/* Directory and chapter typography, isolated for a quick visual rollback. */
.menu-entry{display:flex;align-items:center;gap:22px}
.menu-hint{display:none;align-items:center;gap:13px;font-size:12px;line-height:1.5;letter-spacing:.03em;white-space:nowrap;color:#d5dbe2b8}
.on-home:not(.menu-open) .menu-hint{display:flex}
.menu-hint>span{font-size:20px;color:#e7edf3}

/* Separate the artwork from the links; neither sits on top of the other. */
#index-menu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:6vw;row-gap:28px;padding-top:116px;background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(45px) saturate(.7);backdrop-filter:blur(45px) saturate(.7)}
#chapter-nav{grid-column:1;grid-row:1;min-width:0;gap:9px;padding:0;justify-content:center}
#chapter-nav a{font-size:clamp(28px,min(4.1vw,7.4svh),68px);gap:clamp(18px,2.3vw,36px);line-height:1.3;letter-spacing:-.045em;min-height:44px}
#chapter-nav a>small{opacity:.45;transform:none}
#chapter-nav a:hover,#chapter-nav a:focus-visible{transform:translateX(6px)}
#menu-preview{position:relative;grid-column:2;grid-row:1;align-self:center;inset:auto;width:100%;height:auto;aspect-ratio:4/3;max-height:57svh;transform:none;opacity:.86}
#index-menu:has(nav a:hover) #menu-preview,#index-menu:has(nav a:focus-visible) #menu-preview{opacity:1}
#menu-preview img{width:100%;height:100%;object-fit:contain;transform:none}
.menu-footer{grid-column:1/-1;grid-row:2;border-top:1px solid var(--line);padding-top:20px}

/* One introduction, without a second copy of the chapter's name. */
.chapter-intro{padding-top:24px;padding-bottom:90px;max-width:1500px}
.chapter-intro>p{display:block;max-width:28em;line-height:1.5;text-wrap:balance}
.chapter-intro.chapter-intro-aigc{grid-template-columns:minmax(0,1fr)}
.work-caption{grid-template-columns:minmax(0,1fr)}

/* Readable columns, quiet rules and selective blue emphasis. */
.about-story-section{padding-top:35px}
.about-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(52px,6vw,90px) clamp(50px,7.5vw,120px);max-width:1360px;margin-inline:auto}
.about-story-block{min-width:0;border-top:1px solid var(--line);padding-top:24px}
.about-story-block h2{display:flex;align-items:baseline;gap:18px;margin-bottom:26px;font-size:17px;line-height:1.5;font-weight:500;letter-spacing:.04em}
.about-story-block h2>span{font-size:11px;font-weight:400;letter-spacing:.08em;color:var(--muted)}
.about-story-block p{font-size:clamp(18px,1.65vw,25px);line-height:1.9;letter-spacing:0;color:color-mix(in srgb,var(--ink) 78%,var(--paper))}
.about-story-block strong{font-weight:600;color:#205ee6}
[data-theme=dark] .about-story-block strong{color:#87b7ff}
.about-story-section .business-links{max-width:1360px;margin:90px auto 0}

/* Keep the WAICY mark in its own clear space, at the original proportions. */
body[data-route=waicy] .chapter-head{min-height:74svh;padding-bottom:50px}
.waicy-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,25%);gap:8%;align-items:center}
.waicy-heading h1.latin{font-size:clamp(110px,17vw,290px);letter-spacing:-.055em;line-height:1}
.waicy-mark{width:min(100%,270px);justify-self:center;padding:28px 24px;background:#10262e;border-radius:6px}
.waicy-mark img{width:100%;height:auto;object-fit:contain}
[data-theme=dark] .waicy-mark{background:transparent;padding:20px 0}
body[data-route=waicy] .chapter-intro>p{max-width:21em;font-size:clamp(27px,3.1vw,50px);line-height:1.65}
body[data-route=together] .chapter-head{min-height:88svh;justify-content:center;padding-top:150px;padding-bottom:90px}
body[data-route=together] .chapter-head h1{font-size:clamp(64px,10.8vw,180px);line-height:1.22;letter-spacing:-.055em}

@media(max-width:900px){
  .menu-entry{gap:12px}.menu-hint{font-size:10px;gap:7px}.menu-hint>span{font-size:17px}
  #index-menu{display:flex;flex-direction:column;gap:18px;padding-top:102px;padding-bottom:24px}
  #chapter-nav{order:0;flex:1;flex-shrink:0;gap:2px;padding-bottom:10px}
  #chapter-nav a{font-size:clamp(25px,5.8vw,39px);line-height:1.35;padding:6px 0;min-height:44px;gap:18px;width:fit-content}
  #chapter-nav a>small{min-width:20px;font-size:11px}
  #menu-preview{order:1;flex:none;position:relative;inset:auto;width:100%;height:clamp(100px,18svh,155px);max-height:none;aspect-ratio:auto;transform:none;opacity:.9}
  .menu-footer{order:2;flex:none;margin-top:0;padding-top:15px;gap:10px 14px}
  .chapter-intro{padding-top:8px;padding-bottom:55px}
  .chapter-intro.chapter-intro-aigc{padding-bottom:55px}
  .about-story-section{padding-top:12px}
  .about-story{grid-template-columns:1fr;gap:42px;max-width:650px}
  .about-story-block{padding-top:20px}.about-story-block h2{margin-bottom:17px;font-size:16px}
  .about-story-block p{font-size:18px;line-height:1.9}
  .about-story-section .business-links{margin-top:60px}
  body[data-route=waicy] .chapter-head{min-height:0;padding-top:140px;padding-bottom:36px}
  .waicy-heading{grid-template-columns:minmax(0,1fr) minmax(95px,27%);gap:7%;align-items:center}
  .waicy-heading h1.latin{font-size:16.5vw;letter-spacing:-.055em}
  .waicy-mark{padding:14px 10px;border-radius:4px}
  [data-theme=dark] .waicy-mark{padding:0}
  body[data-route=waicy] .chapter-intro>p{font-size:clamp(25px,5.6vw,35px);line-height:1.65;max-width:20em}
  body[data-route=together] .chapter-head{min-height:72svh;padding-top:140px;padding-bottom:70px}
  body[data-route=together] .chapter-head h1{font-size:clamp(42px,14vw,105px);line-height:1.3}
}
@media(max-height:620px) and (max-width:900px){#index-menu{padding-top:83px;gap:12px}#chapter-nav a{font-size:25px;min-height:37px;padding:2px 0}#menu-preview{height:90px}.menu-footer{padding-top:10px}.menu-footer a,.menu-footer #theme-toggle{min-height:32px}}
@media(prefers-reduced-motion:reduce){#chapter-nav a{transition:none}}