/* Phone work index: each row carries a miniature of its desktop preview slide.
   The tile takes the arrow's slot, so the destination itself becomes the cue. */
@media(max-width:700px) {
  /* A plain length first: an unsupported unit inside a custom property would invalidate
     every size that reads it, so pre-svh browsers would lose the whole row layout. */
  #work-grid.has-thumbs { --thumb:42px; }
  /* Fits the row's content box: the svh row budget less padding and rule, or the text's own
     height where rows are content-sized (landscape). The width term keeps the longest
     detail line unwrapped from 320px up. */
  @supports (height:1svh) {
    #work-grid.has-thumbs { --thumb:clamp(36px,min(max(calc((100svh - 190px) / 7 - 21px),calc(clamp(20px,5.5vw,28px) * 1.12 + 20.8px)),calc(100vw - 278px)),60px); }
  }
  /* Flexible outer rows absorb the tile's height, so title and detail keep their
     4px pairing instead of being pushed apart by the taller tile. */
  #work-grid.has-thumbs>.work-card { grid-template-columns:22px minmax(0,1fr) var(--thumb); grid-template-rows:1fr auto auto 1fr; row-gap:0; }
  #work-grid.has-thumbs :is(.work-row-number,.work-row-title) { grid-row:2; }
  #work-grid.has-thumbs .work-row-detail { grid-row:3; margin-top:4px; }
  #work-grid.has-thumbs .work-row-arrow { display:none; }
  .work-row-thumb {
    grid-column:3; grid-row:1/-1; align-self:center;
    /* A definite 1fr cell lets portrait artwork contain instead of overflowing. */
    display:grid; grid-template:minmax(0,1fr)/minmax(0,1fr); place-items:center;
    width:var(--thumb); height:var(--thumb); padding:8%; overflow:hidden; background:var(--thumb-bg);
    /* Beneath the row's own paint (the row isolates), so its focus outline stays whole. */
    z-index:-1;
    transition:transform 400ms var(--editorial-ease);
  }
  .work-row-thumb.is-wide { padding-inline:max(2px,4%); }
  .work-row-thumb img { display:block; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 300ms; }
  .work-row-thumb.is-loaded img { opacity:1; }
  /* Motion has no artwork yet: an empty frame in the index's own hairline. */
  .work-row-thumb.is-pending { background:none; box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); }
  .work-row-thumb svg { width:38%; height:38%; overflow:visible; }
  .work-row-thumb polygon { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  /* The tile settles with the row's text during motion.js scroll reveals. */
  .scroll-row .work-row-thumb { translate:0 var(--row-reveal-y,0px); opacity:var(--row-reveal-opacity,1); }
  #work-grid.has-thumbs>.work-card:active .work-row-thumb { transform:scale(.92); transition-duration:120ms; }
  /* Below 320px the tile sits at its floor, so tighter gaps hand the text back the width
     it loses and detail lines wrap where the base index wraps them. */
  @media(max-width:319px) {
    #work-grid.has-thumbs>.work-card { column-gap:8px; }
  }
}
@media(max-width:700px) and (prefers-reduced-motion:reduce) {
  .work-row-thumb,.work-row-thumb img { transition:none; }
  .scroll-row .work-row-thumb { translate:none!important; opacity:1!important; }
  #work-grid.has-thumbs>.work-card:active .work-row-thumb { transform:none; }
}