/* Selected Work v20 — quiet typographic index, artwork on exploration.
   Original grid is preserved in 20-editorial-work-list/before/. */
.selected .section-heading {
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 32px;
  align-items:end;
  margin-bottom:16px;
}
.selected .section-heading>.eyebrow { grid-column:1/-1; }
.selected .section-heading h2 { margin:0; font-size:clamp(28px,min(3.2vw,5svh),44px); }
.selected .section-heading p { margin:0 0 2px; font-size:11px; }
/* Seven rows share a viewport-scaled height. Content can still grow at text zoom;
   no clipped section or nested scrolling is introduced. */
#work-grid { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:minmax(min-content,clamp(52px,calc((100svh - 220px) / 7),110px)); gap:0; border-top:1px solid var(--line); }
:is(#work-grid>.work-card,.work-card.morph) {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) minmax(180px,22%) 32px;
  grid-template-rows:auto;
  align-items:center; align-content:center; justify-content:stretch;
  column-gap:20px;
  grid-column:1/-1;
  width:100%; min-width:0; min-height:0;
  margin:0; padding:10px 12px;
  background:var(--bg); color:var(--ink);
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  overflow:hidden; isolation:isolate;
  transition:color 240ms,opacity 240ms,border-color 240ms;
}
:is(#work-grid>.work-card,.work-card.morph) .work-row-number {
  align-self:center;
  font-size:11px; letter-spacing:.05em; color:var(--muted);
}
:is(#work-grid>.work-card,.work-card.morph) .work-row-title {
  margin:0; min-width:0;
  font:400 clamp(24px,min(3vw,4.2svh),44px)/1.06 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:-.045em;
  transition:transform 400ms var(--editorial-ease);
}
:is(#work-grid>.work-card,.work-card.morph) .work-row-detail {
  justify-self:start;
  font-size:12px; line-height:1.5; color:var(--muted);
}
:is(#work-grid>.work-card,.work-card.morph) .work-row-arrow {
  justify-self:end; align-self:center;
  font-size:28px; font-weight:400; line-height:1;
  transition:transform 400ms var(--editorial-ease),color 240ms;
}
#work-grid>.work-card:hover { box-shadow:none; }
#work-grid>.work-card:focus-visible { outline:2px solid var(--lime); outline-offset:-3px; }
#work-grid>.work-card:is(:hover,:focus-visible) .work-row-title { transform:translateX(10px); }
#work-grid>.work-card:is(:hover,:focus-visible) .work-row-arrow { transform:translate(3px,-3px); color:var(--lime); }
:is(#work-grid>.work-card,.work-card.morph).work-pending { padding-block:10px; }
.selected .preview-note { margin-top:12px; font-size:11px; letter-spacing:0; }

/* One shared preview; nothing here participates in navigation or accessibility. */
.work-hover-preview {
  position:fixed; top:0; left:0; z-index:90;
  width:min(clamp(260px,28vw,380px),calc(100dvh - 32px)); aspect-ratio:1;
  pointer-events:none; visibility:hidden;
  will-change:transform;
  transition:visibility 240ms;
}
.work-hover-frame {
  position:relative; width:100%; height:100%; padding:0;
  display:grid; place-items:center; overflow:hidden;
  /* Trim the rasterized strip boundary: adjacent slide colours must not leak
     into settled previews at fractional cursor positions or browser zoom. */
  clip-path:inset(1px); isolation:isolate; border:0; outline:0;
  background:#24261f; opacity:0; transform:scale(.88);
  transition:opacity 200ms,transform 420ms var(--editorial-ease);
}
.work-hover-media { position:relative; width:100%; height:100%; min-height:0; overflow:hidden; }
.work-hover-track {
  position:absolute; inset:0; width:100%; height:100%;
  transition:transform 560ms cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
.work-hover-slide { width:100%; height:100%; padding:24px; display:grid; place-items:center; overflow:hidden; }
.work-hover-media img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.work-hover-view {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:76px; height:76px;
  border-radius:50%; background:var(--lime); color:#15170e;
  font-size:13px; letter-spacing:-.02em;
}
.work-hover-preview.is-visible { visibility:visible; }
.work-hover-preview.is-visible .work-hover-frame { opacity:1; transform:scale(1); }
@media(hover:hover) and (pointer:fine) {
  #work-grid.is-previewing>.work-card:not(.is-previewed) { opacity:.42; }
}
@media(max-width:1000px) {
  :is(#work-grid>.work-card,.work-card.morph) { grid-template-columns:28px minmax(0,1fr) 184px 26px; gap:14px; padding:10px 4px; }
  :is(#work-grid>.work-card,.work-card.morph) .work-row-detail { font-size:11px; }
}
@media(max-width:700px) {
  .selected .section-heading { grid-template-columns:1fr; gap:8px; margin-bottom:16px; }
  .selected .section-heading p { display:none; }
  #work-grid { grid-auto-rows:minmax(min-content,clamp(48px,calc((100svh - 190px) / 7),88px)); }
  :is(#work-grid>.work-card,.work-card.morph) {
    grid-template-columns:22px minmax(0,1fr) 24px;
    grid-template-rows:auto auto;
    column-gap:12px; row-gap:4px;
    padding:10px 0;
  }
  :is(#work-grid>.work-card,.work-card.morph) .work-row-number { grid-column:1; grid-row:1; font-size:9px; }
  :is(#work-grid>.work-card,.work-card.morph) .work-row-title { grid-column:2; grid-row:1; font-size:clamp(20px,5.5vw,28px); line-height:1.12; }
  /* Touch has no hover preview, so the detail line stays as the row's context. */
  :is(#work-grid>.work-card,.work-card.morph) .work-row-detail { grid-column:2; grid-row:2; font-size:12px; line-height:1.4; }
  :is(#work-grid>.work-card,.work-card.morph) .work-row-arrow { grid-column:3; grid-row:1/3; font-size:24px; }
  :is(#work-grid>.work-card,.work-card.morph).work-pending { padding-block:10px; }
    #work-grid>.work-card:is(:hover,:focus-visible) .work-row-title { transform:none; }
  .work-hover-preview { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  :is(#work-grid>.work-card,.work-card.morph),
  #work-grid>.work-card .work-row-title,
  #work-grid>.work-card .work-row-arrow { transition:none; transform:none!important; }
  .work-hover-preview { display:none; }
}