:root { --page:#fff; --ink:#171719; --muted:#64666a; --line:#dedfe1; --control:#f1f1f1; --control-hover:#fff; --header:#fff; --gutter:clamp(20px,2.8vw,46px); --shell:1440px; color-scheme:light; }
html[data-theme="dark"] { --page:#08090a; --ink:#f3f3f1; --muted:#b0b2b7; --line:#38393d; --control:#292a2e; --control-hover:#111214; --header:#08090a; color-scheme:dark; }
* { box-sizing:border-box; }
html { background:var(--page); scroll-behavior:smooth; scroll-padding-top:105px; }
body { margin:0; background:var(--page); color:var(--ink); font-family:Inter,'PingFang SC','Microsoft YaHei',sans-serif; font-size:16px; line-height:1.75; transition:background-color .25s ease,color .25s ease; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; }
/* The project pages are read, not copied: the copy never picks a selection
   out from under a moving pointer. */
body.case-page,body.case-page * { -webkit-user-select:none; user-select:none; }
button,a { touch-action:manipulation; }
button { font:inherit; color:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
button:focus-visible { outline-offset:3px; }
.case-shell { width:min(var(--shell),calc(100% - var(--gutter) * 2)); margin-inline:auto; }
.case-page { padding-bottom:calc(clamp(32px,4vw,64px) + env(safe-area-inset-bottom,0px)); }
.case-skip { position:fixed; z-index:100; top:8px; left:16px; transform:translateY(-160%); padding:8px 16px; background:var(--ink); color:var(--page); }
.case-skip:focus { transform:none; }
.case-header { position:fixed; z-index:50; inset:0 0 auto; min-height:74px; padding:12px var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; background:var(--header); transition:background-color .45s ease; }
.case-menu { width:max-content; min-height:38px; padding:6px 18px; border:1px solid transparent; border-radius:999px; background:var(--control); font-size:12px; }
.case-brand { justify-self:center; }
.case-brand .brand-word { display:block; width:110px; height:auto; aspect-ratio:754 / 224; color:var(--ink); }
.case-actions { justify-self:end; display:flex; gap:8px; }
.case-theme,.case-mail { position:relative; display:grid; place-items:center; width:34px; height:34px; padding:8px; border:1px solid transparent; border-radius:50%; background:var(--control); }
.case-theme { transition:opacity .3s ease,background-color .25s ease,border-color .25s ease; }
.case-theme::after,.case-mail::after { content:""; position:absolute; inset:-4px; }
.case-actions svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.case-theme .case-icon-sun { display:none; }
html[data-theme="dark"] .case-theme .case-icon-sun { display:block; }
html[data-theme="dark"] .case-theme .case-icon-moon { display:none; }
.case-menu,.case-theme,.case-mail { transition:background-color .25s ease,border-color .25s ease,opacity .3s ease; }
.case-menu:hover,.case-theme:hover,.case-mail:hover { border-color:var(--ink); background:var(--control-hover); }
.case-menu-panel { position:fixed; z-index:40; inset:0; display:grid; align-items:center; padding:100px var(--gutter) 32px; background:var(--page); opacity:0; visibility:hidden; transition:opacity .3s ease,visibility 0s linear .3s; overflow-y:auto; }
.case-menu-panel.is-open { opacity:1; visibility:visible; transition:opacity .3s ease; }
.case-menu-inner { width:min(800px,100%); margin:auto; }
.case-menu-projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 56px; margin-top:28px; }
.case-menu-projects a { width:max-content; max-width:100%; padding-block:5px; font-size:clamp(25px,3.2vw,42px); line-height:1.4; }
.case-menu-projects a:hover,.case-menu-projects a[aria-current] { text-decoration:underline; text-underline-offset:9px; text-decoration-thickness:1px; }
.case-menu-links { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); }
.case-menu-links a { padding-block:6px; font-size:14px; }
.case-menu-links a:hover { text-decoration:underline; text-underline-offset:5px; }
.case-hero { padding-top:clamp(132px,10.5vw,168px); }
.case-eyebrow { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; color:var(--muted); font-size:13px; line-height:1.6; }
.case-hero-heading { display:grid; grid-template-columns:1.45fr 1fr; gap:40px; align-items:end; }
.case-hero h1 { margin:0; font-size:clamp(64px,7.8vw,112px); font-weight:500; letter-spacing:0; line-height:1.16; }
.case-subtitle { max-width:20em; margin:0 0 6px; font-size:clamp(20px,1.7vw,26px); line-height:1.65; text-wrap:balance; }
.case-meta { display:grid; grid-template-columns:1fr 1fr 1.5fr; gap:32px; padding:23px 0 30px; margin:48px 0 0; border-top:1px solid var(--line); }
.case-meta dt,.case-context dt { color:var(--muted); font-size:13px; margin-bottom:9px; }
.case-meta dd,.case-context dd { margin:0; font-size:15px; line-height:1.8; }
.case-meta > div,.case-overview > div,.case-narrative > p { min-width:0; }
.case-figure { margin:0; }
.case-gallery { width:100%; margin-inline:0; }
.case-image-surface { display:block; padding:0; border:0; border-radius:0; overflow:hidden; }
.case-image-surface img { display:block; width:100%; height:auto; }
.case-gallery figcaption { width:min(var(--shell),calc(100% - var(--gutter) * 2)); margin-inline:auto; }
.case-figure figcaption { margin-top:16px; color:var(--muted); font-size:13px; line-height:1.7; }
.case-section-label { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.case-overview { display:grid; grid-template-columns:1fr 2.7fr; gap:clamp(40px,6vw,96px); padding-block:clamp(80px,8vw,128px); }
.case-overview h2 { margin:0; max-width:19em; font-size:clamp(30px,3.15vw,46px); font-weight:500; letter-spacing:0; line-height:1.5; text-wrap:balance; }
.case-heading-clause { display:inline; }
.case-narrative { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); margin-top:36px; }
.case-summary { margin:0; font-size:20px; line-height:1.85; }
.case-body-copy { margin:0; color:var(--muted); font-size:16px; line-height:1.95; }
.case-context { max-width:17em; margin:42px 0 0; }
.case-context dd { max-width:16em; }
html[data-case-entering] { overflow:hidden; scroll-behavior:auto; }
@media (min-width:701px) and (max-width:1000px) {
  .case-overview { grid-template-columns:1fr 2.4fr; gap:36px; }
  .case-narrative { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:700px) {
  :root { --gutter:20px; }
  .case-header { min-height:65px; padding:10px 20px; }
  .case-brand .brand-word { width:92px; }
  .case-actions { gap:7px; }
  .case-theme,.case-mail { width:32px; height:32px; }
  .case-menu { min-height:36px; padding-inline:14px; }
  .case-hero { padding-top:108px; }
  .case-eyebrow { margin-bottom:18px; font-size:12px; }
  .case-hero-heading { grid-template-columns:1fr; gap:18px; }
  .case-hero h1 { font-size:clamp(46px,13vw,76px); }
  .case-subtitle { margin:0; font-size:18px; line-height:1.7; }
  .case-meta { grid-template-columns:1fr 1fr; gap:18px 24px; margin-top:28px; padding:20px 0 24px; }
  .case-meta > div:last-child { grid-column:1 / -1; }
  .case-meta dt { margin-bottom:4px; font-size:12px; }
  .case-meta dd { font-size:14px; line-height:1.75; }
  .case-figure figcaption { margin-top:12px; font-size:12px; }
  .case-overview { grid-template-columns:1fr; gap:28px; padding-block:64px; }
  .case-overview-aside { display:grid; grid-template-columns:1fr 1.6fr; gap:24px; }
  .case-context { margin:0; }
  .case-context dt { margin-bottom:4px; font-size:12px; }
  .case-context dd { font-size:14px; }
  .case-overview h2 { font-size:clamp(26px,7.7vw,30px); line-height:1.5; }
  .case-heading-clause { display:block; }
  .case-narrative { grid-template-columns:1fr; gap:24px; margin-top:28px; }
  .case-summary { font-size:18px; line-height:1.85; }
  .case-body-copy { font-size:16px; line-height:1.95; }
  .case-menu-projects { gap:8px 24px; }
  .case-menu-links { gap:10px 22px; margin-top:28px; }
}
/* Long scenario titles and provenance belong only to the refreshed case. */
body[data-case-presentation="scenario"] .case-hero h1 { font-size:clamp(38px,4.8vw,72px); line-height:1.25; text-wrap:balance; }
.case-name-clause { display:inline-block; white-space:nowrap; }
.case-scenario-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 28px; margin-top:24px; color:var(--muted); font-size:13px; line-height:1.7; }
.case-scenario-period time { margin-left:8px; color:var(--ink); font-variant-numeric:tabular-nums; }
body[data-case-presentation="scenario"] .case-meta { margin-top:28px; }
.case-scenario-flow { margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }
.case-scenario-flow h3 { margin:0 0 20px; color:var(--ink); font-size:18px; font-weight:500; }
.case-scenario-flow ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.case-scenario-flow li { display:flex; align-items:baseline; gap:10px; font-size:14px; line-height:1.8; }
.case-scenario-flow li>span { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
@media (max-width:700px) {
  .case-scenario-meta { display:block; margin-top:20px; font-size:12px; }
  .case-scenario-meta>span { display:block; }
  .case-scenario-note { margin-top:6px; }
  .case-scenario-flow ol { grid-template-columns:1fr; gap:12px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}