/* Drawing rail: a row that scrolls sideways.
   The card is a link to the drawing; adding to the carnet is a separate round
   button stacked on the image. Two actions, two targets - the picture never
   does something other than open the picture. */

.td{margin:38px 0 8px}
.td__eyebrow{margin:0 0 4px;font-size:.78rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--col-accent-text)}
.td__title{margin:0 0 6px;font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.2}
.td__lead{margin:0;color:var(--col-muted);max-width:60ch}

.td__rail{
  display:flex;gap:16px;list-style:none;margin:0;padding:16px 2px 18px;
  overflow-x:auto;scrollbar-width:thin;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}

/* Narrow enough that a third card always peeks in and shows the row moves. */
.td__item{flex:0 0 164px;scroll-snap-align:start}
@media (max-width:640px){.td__item{flex:0 0 140px}}

.td__card{
  position:relative;display:flex;flex-direction:column;
  background:var(--col-white);border-radius:var(--radius-card);overflow:hidden;
  box-shadow:0 1px 2px rgba(31,26,54,.07);
  transition:transform .18s ease,box-shadow .18s ease}
.td__card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(31,26,54,.13)}

.td__media{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--col-cream)}
.td__media img{width:100%;height:100%;object-fit:cover;display:block}

/* The stretched link: the whole card opens the drawing. */
.td__link{display:block;padding:9px 11px 2px;text-decoration:none}
.td__link::after{content:"";position:absolute;inset:0;z-index:1}
.td__name{display:block;font-weight:700;font-size:.87rem;line-height:1.3;
  color:var(--col-heading)}
.td__card:hover .td__name{text-decoration:underline;text-underline-offset:2px}
.td__age{display:block;padding:2px 11px 0;font-size:.74rem;
  color:var(--col-muted);font-weight:600}

/* Only present once a counter has moved, so the card keeps its shape when the
   line is absent: the padding that closes the card lives on whichever element
   ends up last. */
.td__stats{display:block;padding:3px 11px 0;font-size:.72rem;line-height:1.35;
  color:var(--col-accent-text);font-weight:700;font-variant-numeric:tabular-nums}
.td__card > :last-child{padding-bottom:11px}

/* Above the stretched link, so it stays clickable. */
.td__add{
  position:absolute;top:8px;right:8px;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;padding:0;
  background:var(--col-white);color:var(--col-accent-text);
  box-shadow:0 1px 4px rgba(31,26,54,.22);
  transition:background .15s ease,color .15s ease,transform .15s ease}
.td__add:hover{transform:scale(1.08)}
.td__add:focus-visible{outline:3px solid var(--col-accent-solid);outline-offset:2px}
.td__add[aria-pressed="true"]{background:var(--col-accent-solid);color:#fff}

.td__tick{display:none}
.td__add[aria-pressed="true"] .td__plus{display:none}
.td__add[aria-pressed="true"] .td__tick{display:block}

/* A chosen card reads as chosen even with the button unhovered. */
.td__card:has(.td__add[aria-pressed="true"]){
  box-shadow:0 0 0 2px var(--col-accent-solid),0 4px 12px rgba(31,26,54,.12)}

@media (prefers-reduced-motion:reduce){
  .td__card,.td__add{transition:none}
  .td__card:hover{transform:none}
}