/* V9: natural hero flow and a curated, image-led project index. */
.hero {
  height:auto;
  min-height:max(780px,100svh);
  max-height:none;
  grid-template-rows:1fr auto;
  column-gap:2%;
  row-gap:46px;
  padding-bottom:28px;
}
.hero-copy,.hero-instrument { min-width:0; }
.hero-bottom {
  position:relative;
  inset:auto;
  grid-column:1/-1;
  width:100%;
  align-self:end;
  margin:0;
  padding-top:24px;
}
.key-readout>div { flex-wrap:wrap; gap:6px 17px; min-width:0; }
.keyboard-hint { line-height:1.8; margin-bottom:0; }
.curated-visual {
  display:flex; flex-direction:column; padding:0; height:auto; min-height:0;
  border-radius:3px; background:transparent; text-align:left;
  --cover-accent:#6e9781;
}
.curated-stage { position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; background:color-mix(in srgb,var(--cover-accent) 10%,var(--bg)); }
.curated-stage>img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1); }

.curated-visual:is(:hover,:focus-visible) .curated-stage>img { transform:scale(1.025); }
.curated-visual:after { display:none; }
.curated-caption { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0 0; color:var(--ink); }
.curated-caption>span:first-child { font-size:17px; line-height:1.5; }
.curated-caption small { display:block; margin-top:6px; font-size:10px; color:var(--muted); }
.curated-caption>span:last-child { font-size:29px; color:var(--accent); }
.cover-media-label { position:absolute; left:14px; bottom:14px; color:#fff; background:#13251ee6; padding:8px 12px; border-radius:3px; font-size:10px; letter-spacing:.3px; }
.archive-row { grid-template-columns:28px 152px minmax(0,1fr) 90px 22px; gap:28px; padding:24px 0; }
.archive-row:hover { padding-left:0; padding-right:0; }
.archive-thumbnail { display:block; position:relative; width:152px; aspect-ratio:3/2; overflow:hidden; background:var(--surface); border-radius:2px; }
.archive-thumbnail>img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }

.archive-row:is(:hover,:focus-visible) .archive-thumbnail>img { transform:scale(1.045); }
.archive-thumbnail .cover-media-label { left:6px; bottom:6px; padding:4px 6px; font-size:8px; }
.archive-text { min-width:0; }
.archive-title { display:block; font-size:19px; line-height:1.5; overflow-wrap:anywhere; }
.archive-summary { display:block; font-size:12px; line-height:1.8; margin-top:9px; color:var(--soft-ink); }
.archive-status { line-height:1.7; }
.cover-wordmark { display:grid; place-items:center; height:100%; padding:15px; color:var(--accent); font-size:16px; line-height:1.5; }
.gallery-controls { margin-top:0; }
.detail-slide figcaption { padding-right:0; font-size:11px; line-height:1.8; margin-top:16px; }
.gallery-bar { margin-top:10px; min-height:44px; gap:14px; }
.gallery-controls button { width:44px; height:44px; }
.gallery-label { font-size:8px; line-height:1.7; }
.gallery-thumbs { display:flex; gap:14px; margin-top:24px; padding-bottom:5px; overflow:auto; }
.gallery-thumbs button { flex:0 0 142px; padding:0 0 10px; text-align:left; border-bottom:2px solid transparent; opacity:.65; transition:opacity .2s,border-color .2s; }
.gallery-thumbs button[aria-pressed="true"] { border-color:var(--accent); opacity:1; }
.gallery-thumbs button:hover { opacity:1; }
.gallery-thumb-image { position:relative; display:grid; place-items:center; aspect-ratio:16/9; background:var(--surface); overflow:hidden; }
.gallery-thumb-image img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-thumb-image>span { font-size:26px; color:var(--accent); }
.gallery-thumb-image i { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:21px; font-style:normal; text-shadow:0 1px 6px #000; }
.gallery-thumb-label { display:block; font-size:10px; color:var(--soft-ink); margin-top:10px; line-height:1.5; }
.detail-gallery:has(.gallery-thumbs) .detail-image { max-height:calc(100svh - 315px); }
.detail-gallery:has(.gallery-thumbs) .detail-film video { max-height:calc(100svh - 315px); min-height:260px; }
.detail-heading h2 { letter-spacing:-.035em; }
.detail-description>p:first-child { font-size:15px; }
@media(min-width:1600px) { .hero { min-height:max(900px,100svh); } }
@media(max-width:1100px) {
  .hero { min-height:max(720px,100svh); row-gap:38px; }
  .archive { padding-inline:6%; }
  .archive-row { grid-template-columns:22px 120px minmax(0,1fr) 66px 18px; gap:20px; }
  .archive-thumbnail { width:120px; }
  .archive-title { font-size:17px; }
}
@media(max-width:760px) {
  .hero { min-height:0; padding-bottom:26px; gap:28px; }
  .hero-instrument { padding-top:26px; }
  .hero-bottom { margin-top:12px; padding-top:23px; flex:none; }
  .keyboard-hint { line-height:1.9; font-size:10px; margin-bottom:0; }
  .desktop-hint { display:none; }
  .key-readout { min-height:60px; }
  .curated-stage { aspect-ratio:4/3; }

  .curated-caption { padding-top:16px; }
  .curated-caption>span:first-child { font-size:15px; }
  .archive-row { grid-template-columns:96px minmax(0,1fr) 16px; gap:16px; padding:20px 0; }
  .archive-number,.archive-status { display:none; }
  .archive-thumbnail { width:96px; aspect-ratio:1; }
  .archive-title { font-size:15px; line-height:1.55; }
  .archive-summary { display:block; font-size:10px; line-height:1.8; margin-top:6px; }
  .archive-thumbnail .cover-media-label { font-size:7px; }
  .gallery-thumbs { gap:12px; margin:20px 6% 0; }
  .gallery-thumbs button { flex-basis:112px; }
  .detail-gallery:has(.gallery-thumbs) .detail-image { max-height:62svh; }
  .detail-gallery:has(.gallery-thumbs) .detail-film video { max-height:none; min-height:0; }
  .gallery-bar { margin:14px 6% 0; }
  .detail-slide figcaption { margin-inline:6%; font-size:10px; }
  .detail-description>p:first-child { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .curated-stage img,.archive-thumbnail img,.gallery-thumbs button { transition:none; transform:none!important; } }

/* V10: edge-to-edge covers; source images stay intact in project details. */
.curated-stage>img,.archive-thumbnail>img {object-fit:cover;padding:0;}
.curated-dna .curated-stage {aspect-ratio:1440/649;}
.curated-agentcrop .curated-stage {aspect-ratio:16/10;}
.zhixing-opening-frame {position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;}
.curated-zhixing .cover-media-label {z-index:2;}

/* V12 — quiet navigation and a compact index. */
.section-directory{padding:21px 6.5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}
.section-directory>span{font:9px var(--mono);letter-spacing:.1em;color:var(--muted)}
.section-directory>div{display:flex;gap:32px;align-items:center}
.section-directory a{font-size:13px;color:var(--ink);padding:8px 0;text-decoration:none;transition:color .2s}
.section-directory a:hover{color:var(--accent)}
.section-directory sup{font:9px var(--mono);color:var(--muted);margin-left:5px}
.section-directory a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.archive{padding-top:85px;padding-bottom:75px}
.archive-heading{margin-bottom:35px}
.archive-heading h2{font-size:clamp(29px,3.5vw,48px);line-height:1.35}
.archive-controls{align-items:flex-start}
.archive-row{grid-template-columns:30px minmax(0,1fr) 100px 22px;gap:22px;padding:20px 0}
.archive-text{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.archive-title{font-size:17px}
.archive-summary{margin-top:0;font-size:11px}
#result-count{white-space:nowrap;padding-top:12px;font-size:10px}
.archive-expand{display:flex;align-items:center;gap:18px;margin:30px auto 0;padding:12px 5px;font-size:13px;color:var(--accent);border-bottom:1px solid var(--accent-line)}
.archive-expand[hidden]{display:none}
@media(max-width:760px){.section-directory{padding:19px 7%}.section-directory>span{display:none}.section-directory>div{justify-content:space-between;width:100%;gap:12px}.section-directory a{font-size:12px}.archive{padding:58px 7%}.archive-heading h2{font-size:30px}.archive-row{grid-template-columns:20px minmax(0,1fr) 20px;gap:15px;padding:18px 0}.archive-text{display:block}.archive-title{font-size:16px}.archive-summary{font-size:11px;margin-top:5px}.archive-status{display:none}#result-count{display:block;padding-top:14px}.filters button{font-size:11px}}