/* type families: one token per role (display, sans, mono); Departure Mono is a pixel face, crispest at 11px steps, used for navigation only */
@font-face{font-family:'Departure Mono';src:url('https://cdn.jsdelivr.net/gh/rektdeckard/departure-mono@1.500/public/assets/DepartureMono-Regular.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/rektdeckard/departure-mono@1.500/public/assets/DepartureMono-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{--font-mono:'Departure Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Instrument Serif for titles, Instrument Sans for body copy and labels; the pixel face is reserved for navigation */
  --font-sans:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;--font-display:'Instrument Serif','Times New Roman',Georgia,serif;
  /* text colours: primary is a soft graphite (no pure black); secondary is the lightest grey that still passes AA (4.5:1) on white */
  --text-primary:#3d3d3d;--text-secondary:#767676}
body{margin:0;background:#FFFFFF}
/* ---------- square grid ----------
   One cell size for the whole site: the page width split into --cols equal squares (6 / 4 / 3 by width).
   js/site.js sets --cols and --cell in px; these are the fallbacks. Every block snaps to these lines. */
:root{--cols:6;--cell:16.6667vw;--grid-line:rgba(18,18,18,0.06);--grid-mark:rgba(18,18,18,0.3)}
@media (max-width:1199px){:root{--cols:4;--cell:25vw}}
@media (max-width:759px){:root{--cols:3;--cell:33.3333vw}}
[data-theme="dark"]{--grid-line:rgba(233,232,227,0.09);--grid-mark:rgba(233,232,227,0.35)}
/* lines fall back to plain gradients; js/site.js swaps in --grid-tile (lines that stop short of a + at each crossing) */
/* with the case page off the grid, sections get an even rhythm instead of snapping to lines */
.grid-bg{background-image:var(--grid-tile,linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px));background-size:var(--cell) var(--cell)}
html{scroll-behavior:smooth}
a{color:var(--text-primary);text-decoration:none}
a:hover{color:var(--text-primary)}
.statement{position:fixed;top:112px;left:40px;z-index:25;width:min(620px, 46vw)}
.nav{font-family:var(--font-display);font-size:16px;line-height:16px;font-weight:400;letter-spacing:0;text-transform:uppercase;position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:flex-end;align-items:flex-start;gap:40px;padding:31px 40px 0;pointer-events:none}
.wordmark{position:fixed;top:28px;left:40px;z-index:31;font-size:15px;line-height:1;letter-spacing:-0.01em;font-weight:600}
.pixel-trail{position:fixed;inset:0;z-index:26;width:100%;height:100%;pointer-events:none}
@media (pointer: coarse){.pixel-trail{display:none}}
@media (prefers-reduced-motion: reduce){.pixel-trail{display:none}}
[data-theme="dark"] .wordmark{color:#e9e8e3 !important}
.wordmark-logo{display:block;width:132px;height:42px}
[data-theme="light"] .wordmark-logo{filter:invert(1)}
[data-hook="1"] .wordmark-logo{filter:none !important}
@media (min-width:760px){
[data-hook="1"] .nav-link,[data-hook="1"] .nav-link[data-active="1"],[data-hook="1"] .sound-btn,[data-hook="1"] .sound-btn[data-on="1"]{color:#f3f0e8 !important}
[data-hook="1"] .wordmark{color:#f3f0e8 !important}
}
.nav a,.nav-link{pointer-events:auto}
.nav-link{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding-top:10px;box-sizing:border-box;color:var(--text-secondary);transition:color .2s ease}
.nav-link:hover{color:var(--text-primary)}
.nav-link span{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0}
.nav-link[data-active="1"]{color:var(--text-primary)}
.nav-link[data-active="1"] span{opacity:1}
.sound-btn{pointer-events:auto;appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:6px 0 0;min-width:44px;min-height:44px;box-sizing:border-box;font:inherit;color:var(--text-secondary);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.nav > .sound-btn{position:relative;min-width:0;width:22px;padding:12px 0 0}
.nav > .sound-btn .sound-btn-icon{width:17px;height:17px}
.nav > .sound-btn::before{content:"";position:absolute;top:0;left:-11px;right:-11px;height:44px}
.sound-btn-glyphs{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:12px;flex-shrink:0}
.sound-btn-icon{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:0;transform:translate(-50%, calc(-50% - 0.5px));display:block}
.sound-btn-seat{width:4px;height:4px;flex-shrink:0;visibility:hidden;pointer-events:none}
.sound-btn[data-on="1"] .sound-btn-icon--off{display:none}
.sound-btn:not([data-on="1"]) .sound-btn-icon--on{display:none}
.sound-btn[data-on="1"]{color:var(--text-primary)}
[data-theme="dark"] .sound-btn{color:#8f8e88}
[data-theme="dark"] .sound-btn[data-on="1"]{color:#e9e8e3}
/* ---------- views ---------- */
.case{display:none}
.about-section{display:none}
[data-view="case"] .case{display:block}
[data-view="about"] .about-section{display:block;position:fixed;inset:0;z-index:20;overflow-y:auto;-webkit-overflow-scrolling:touch}
[data-view="case"] #records,[data-view="case"] .statement,[data-view="case"] .about-section{display:none !important}
[data-view="about"] #records,[data-view="about"] .statement,[data-view="about"] .case{display:none !important}
[data-section="about"] .statement{opacity:0;pointer-events:none;transform:translateY(-8px)}
.veil{position:fixed;inset:0;z-index:55;background:#FFFFFF;opacity:0;pointer-events:none;transition:opacity .35s ease}
[data-theme="dark"] .veil{background:#0f0f0e}
.veil[data-on="1"]{opacity:1}
/* ---------- case page entrance ---------- */
@keyframes ceUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ceRevealUp{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes ceTitle{from{opacity:0;transform:translateY(0.35em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ceRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ceFade{from{opacity:0}to{opacity:1}}
.case .case-title,.case .case-meta,.case .case-desc,.case .case-hook{opacity:0}
.case[data-enter="1"] .case-title{animation:ceTitle 1s cubic-bezier(.2,.7,.2,1) .1s both}
.case[data-enter="1"] .case-meta,.case[data-enter="1"] .case-desc{animation:ceFade .8s ease .35s both}
.case[data-enter="1"] .case-hook{animation:ceFade .9s ease .45s both}
.case[data-enter="1"] .case-grid > .case-reveal-pending{opacity:0;transform:translate3d(0,12px,0)}
.case-grid > .case-reveal-in{animation:ceRevealUp .58s cubic-bezier(.2,.7,.2,1) both}
.case[data-leave="1"] > *{opacity:0 !important;transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){
.case[data-enter="1"] .case-title,.case[data-enter="1"] .case-meta,.case[data-enter="1"] .case-desc,.case[data-enter="1"] .case-hook{animation-duration:.01s !important;animation-delay:0s !important}
.case[data-enter="1"] .case-grid > .case-reveal-pending{opacity:1;transform:none}
.case-grid > .case-reveal-in{animation:ceFade .01s both}
}
/* ---------- case page: every block sits on the square grid ---------- */
.case{--pad:24px;--case-lh:2;--c-all:2 / -2;--c-head:2 / 4;--c-copy:4 / 6;--c-pa:2 / 4;--c-pb:4 / 6;--c-hero:1 / -1;--c-hero-meta:1 / 3;--c-hero-desc:3 / -1;position:relative;z-index:2;padding:0;max-width:none;margin:0 auto;box-sizing:border-box}
@media (max-width:1199px){.case{--c-all:1 / -1;--c-head:1 / 3;--c-copy:3 / 5;--c-pa:1 / 3;--c-pb:3 / 5;--c-hero-desc:3 / -1}}
@media (max-width:759px){.case{--pad:16px;--c-all:1 / -1;--c-head:1 / -1;--c-copy:1 / -1;--c-pa:1 / -1;--c-pb:1 / -1;--c-hero-meta:1 / -1;--c-hero-desc:1 / -1}}
.case .lbl{font-family:var(--font-sans);font-size:8px;line-height:var(--case-lh);letter-spacing:0.24em;text-transform:uppercase;font-weight:400;margin:0}
.case-hero{position:relative;z-index:2}
/* hero fills exactly one screen: title clears the nav up top, meta + summary sit on the fold, and the gap between them flexes with the viewport height */
/* case hero (Paper: Case study hero): centred serif title, sans summary, details row between two hairlines; fills one screen */
.case-words{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:130px var(--pad) clamp(32px,6vh,72px);box-sizing:border-box;text-align:center}
.case-title{margin:0;padding:0;font-weight:400;font-size:clamp(56px,min(9.2vw,15vh),160px);line-height:1;letter-spacing:0;color:var(--text-primary);text-wrap:balance}
.case-meta{order:3;display:grid;grid-template-columns:repeat(4,192px);justify-content:center;column-gap:48px;row-gap:22px;width:min(1041px,100%);margin:clamp(40px,7vh,66px) 0 0;padding:40px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;box-sizing:border-box;text-align:left}
.case-meta p{margin:0;min-width:0;overflow-wrap:break-word;font-family:var(--font-display);font-size:17px;line-height:22px;letter-spacing:0;color:var(--text-primary)}
.case .case-meta .lbl{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:13px;line-height:14px;letter-spacing:0;text-transform:uppercase;color:var(--text-secondary)}
.case-desc{order:2;max-width:864px;margin:clamp(24px,4vh,38px) 0 0;padding:0;font-family:var(--font-sans);font-size:18px;line-height:1.5;letter-spacing:0.005em;color:var(--text-secondary);white-space:normal;text-wrap:pretty}
/* case side nav: sits in the empty left column on wide screens, fades in after the hook */
.case-toc{position:fixed;right:calc(50% + var(--case-body-w, 820px) / 2 + var(--case-toc-gap, 56px));top:clamp(96px,18vh,200px);z-index:20;width:max-content;max-width:220px;padding:0;box-sizing:border-box;font-family:var(--font-display);font-size:15px;line-height:1.4;letter-spacing:0;text-transform:uppercase;opacity:0;visibility:hidden;transform:translate3d(-8px,0,0);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
.case-toc[data-show="1"]{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s}
.case-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.case-toc a{position:relative;display:inline-block;color:inherit;text-decoration:none;opacity:0.4;transition:opacity .2s ease,transform .2s ease}
.case-toc a::before{content:"";position:absolute;left:-14px;top:0.55em;width:6px;height:6px;background:currentColor;opacity:0;transition:opacity .2s ease}
.case-toc a:hover,.case-toc a:focus-visible{opacity:0.8}
.case-toc a[aria-current]{opacity:1;transform:translate3d(14px,0,0)}
.case-toc a[aria-current]::before{opacity:1}
@media (max-width:1199px){.case-toc{display:none}}
@media (prefers-reduced-motion: reduce){.case-toc,.case-toc a{transition:none}}
.case-hook{position:relative;height:720vh;margin:0;--p:0;background:transparent}
.case-hook-sticky{position:sticky;top:0;z-index:1;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#070707;color:#f3f0e8;text-align:center;pointer-events:none}
.case-hook-burst{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.case-hook-line{position:relative;z-index:1;width:100%;height:2em;margin:0;padding:0 var(--pad);box-sizing:border-box;font-family:var(--font-display);font-weight:400;font-size:clamp(36px,4.8vw,76px);line-height:var(--case-lh);letter-spacing:-0.03em;text-align:center;word-break:normal;overflow-wrap:normal}
.case-hook-row{position:absolute;left:0;right:0;top:0;white-space:nowrap;text-align:center;opacity:0}
.case-hook-word{display:inline-block;white-space:nowrap}
.case-hook-ch{display:inline-block;--t:clamp(0, calc((var(--p) - var(--start)) / var(--span)), 1);opacity:var(--t);transform:translate3d(0, calc((1 - var(--t)) * 0.22em), 0)}
@media (max-width:759px){
.case-hook{height:600vh}
.case-hook-line{font-size:clamp(26px,7.2vw,40px)}
}
@media (prefers-reduced-motion:reduce){
.case-hook{height:auto}
.case-hook-sticky{position:relative;height:auto;min-height:70vh}
.case-hook-line{height:auto;display:flex;flex-direction:column;align-items:center;gap:0.12em}
.case-hook-row{position:static;opacity:1}
.case-hook-ch{opacity:1;transform:none}
}
.rule{height:1px;background:currentColor;opacity:0.35}
/* one gap between every block on the case page: cover → text, text → image, image → image */
.case{--case-gap:96px}
@media (max-width:1199px){.case{--case-gap:72px}}
@media (max-width:759px){.case{--case-gap:56px}}
[data-case-body]{position:relative;z-index:1;max-width:none;margin:calc(-100vh + 40px) 0 0;padding:48px 0 0;box-sizing:border-box;background:#fff}
[data-theme="dark"] [data-case-body]{background:#0f0f0e}
@media (prefers-reduced-motion:reduce){[data-case-body]{margin-top:0}}
/* same white fade under the fixed nav as the About page, so scrolled case content never runs beneath the logo and links */
.case::before{content:"";position:fixed;top:0;left:0;right:0;z-index:15;height:104px;background:linear-gradient(#fff 72%,rgba(255,255,255,0));pointer-events:none}
[data-theme="dark"] .case::before{background:linear-gradient(#0f0f0e 72%,rgba(15,15,14,0))}
/* immersive hook section is switched off on every case; delete these two lines to bring it back */
.case-hook{display:none !important}
[data-case-body]{margin-top:0 !important;padding-top:clamp(48px,8vh,96px)}
.case-cta{display:table;margin:clamp(90px,14vh,180px) auto 0;padding:10px 4px 6px;border-top:4px solid currentColor;border-bottom:4px solid currentColor;font-size:clamp(28px,3vw,48px);line-height:var(--case-lh);letter-spacing:-0.01em;text-transform:uppercase}
/* each body block is a full-width row of grid columns; js/site.js drops each one onto the next horizontal line
   and rounds every image's height to whole cells, so images sit exactly inside the squares */
.case-grid{--ed-ink:#e9e8e3;--ed-prose:#d1d1d1;--ed-prose-muted:rgba(209,209,209,0.52);--ed-prose-size:18px;--ed-prose-lh:var(--case-lh);display:flex;flex-direction:column;row-gap:var(--case-gap)}
[data-theme="light"] .case-grid{--ed-ink:var(--text-primary);--ed-prose:var(--text-secondary);--ed-prose-muted:rgba(58,58,56,0.55)}
.case-grid>*{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:start;width:100%;margin:0;padding:0;box-sizing:border-box}
.case-grid>.ed-fig{padding:0}
.case-grid>.ed-fig>*{grid-column:var(--c-all);justify-self:center;width:calc(100% - var(--pad) * 2) !important}
/* text blocks stack: heading on top, copy underneath, both across the full body column */
/* body type roles: section title, prose, caption. One face, one weight; size, leading and tone carry the hierarchy */
.case-grid{--t-title:26px;--t-title-lh:1.25;--t-body:16px;--t-body-lh:1.75;--t-cap:13px;--t-cap-lh:1.6;--measure:62ch}
.case-grid>.ed,.case-grid>.ed-split{row-gap:20px}
.case-grid>.ed>.ed-kicker,.case-grid>.ed-split>.ed-title{grid-column:var(--c-all);padding:0 var(--pad)}
.case-grid>.ed>.ed-copy,.case-grid>.ed-split>.ed-copy{grid-column:var(--c-all);padding:0 var(--pad)}
.ed-fig img,.ed-fig video,.ed-fig .ph{display:block;width:100%;border-radius:12px}
.ed-fig .ph{background:rgba(127,127,127,0.08)}
.case-grid .ed-fig img,.case-grid .ed-fig video{width:100%;height:auto;object-fit:cover}
.ed-fig.is-round img,.ed-fig.is-round video,.ed-fig.is-round .ph{border-radius:clamp(16px,2.8vw,40px)}
.case-grid .ed-fig .ph{height:auto;aspect-ratio:3/2}
.cap{display:block;margin-top:10px;font-family:var(--font-sans);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;opacity:0.55}
.ed-kicker{margin:0;font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(14px,1vw,16px);line-height:var(--ed-prose-lh);letter-spacing:0.01em;color:var(--ed-prose-muted);text-transform:lowercase}
.ed-copy{min-width:0}
.ed p,.ed .ed-lede{margin:0 0 1em;font-family:var(--font-sans);font-weight:400;font-size:var(--ed-prose-size);line-height:var(--ed-prose-lh);letter-spacing:0;color:var(--ed-prose);opacity:1}
.ed p:last-child,.ed .ed-lede:last-child{margin-bottom:0}
.ed-split .ed-title,.ed-side .ed-title{margin:0;max-width:22em;font-family:var(--font-display);font-weight:400;font-size:var(--t-title);line-height:var(--t-title-lh);letter-spacing:-0.005em;text-wrap:balance;color:var(--ed-ink)}
.ed-split p{white-space:pre-line;max-width:var(--measure);margin:0 0 1.25em;font-family:var(--font-sans);font-weight:400;font-size:var(--t-body);line-height:var(--t-body-lh);text-wrap:pretty;letter-spacing:0;color:var(--text-secondary)}
.ed-split p:last-child{margin-bottom:0}
.ed-split .ed-role-name{font-weight:700;color:var(--ed-ink)}
.ed-fig .ph{display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid rgba(127,127,127,0.35);font-family:var(--font-sans);font-size:11px;line-height:var(--case-lh);letter-spacing:0.12em;text-transform:uppercase;opacity:0.8}
.case-grid>.ed-pair{padding:0}
/* two images side by side with a 12px gutter; a tight pair sits 12px under the image above it */
.ed-pair-in{grid-column:var(--c-all);display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));column-gap:12px;row-gap:12px;align-items:start;padding:0 var(--pad)}
.ed-pair-in>.ed-fig{display:block;margin:0;padding:0;min-width:0}
.case-grid>.ed-pair.is-tight{margin-top:calc(12px - var(--case-gap))}
.ed-cap{margin-top:14px;max-width:var(--measure);font-family:var(--font-sans);font-size:var(--t-cap);line-height:var(--t-cap-lh);letter-spacing:0;color:var(--text-secondary);white-space:pre-line}
/* wide screens: the body after the hook sits in one narrower centred column, leaving room on the left
   for the side nav */
@media (min-width:1200px){
.case{--case-body-w:min(820px, 100vw - 560px);--case-toc-gap:56px}
.case-grid{--c-all:1 / -1;width:var(--case-body-w);margin:0 auto}
}
/* side row: narrow heading + copy, image beside it */
.case-grid>.ed-side>*{grid-column:auto}
.ed-side{align-items:start}
.ed-side-copy{grid-column:var(--c-all) !important;display:flex;flex-direction:column;gap:12px;padding:0 var(--pad);width:calc(238px + var(--pad) * 2);box-sizing:border-box;grid-row:1}
.ed-side-copy p{margin:0;white-space:pre-line;font-family:var(--font-sans);font-size:var(--t-body);line-height:var(--t-body-lh);letter-spacing:0;color:var(--text-secondary)}
.ed-side-media{grid-column:var(--c-all) !important;grid-row:1;padding:0 var(--pad) 0 calc(var(--pad) + 238px + 120px)}
.ed-side-media img{border-radius:12px;background:rgba(127,127,127,0.08)}
@media (max-width:759px){
.case-words{padding:96px var(--pad) 40px}
.case-grid>.ed,.case-grid>.ed-split{row-gap:14px}
.ed-pair-in{grid-template-columns:minmax(0,1fr)}
.ed-side-copy{width:auto;grid-row:auto}
.ed-side-media{grid-row:auto;padding:0 var(--pad)}
.ed-side{row-gap:16px}
}
@media (max-width:1199px){
.case-meta{grid-template-columns:repeat(2,minmax(0,192px))}
}
.case-next{position:relative;height:200vh;margin-top:clamp(100px,16vh,200px)}
.case-next-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.case-next .nl{position:absolute;left:0;right:0;height:1px;background:currentColor;opacity:0.16}
.case-next-kicker{position:absolute;left:0;right:0;top:9%;text-align:center}
.case-next-title{position:absolute;left:0;right:0;top:13%;margin:0;text-align:center;font-weight:400;font-size:clamp(48px,6vw,104px);line-height:1.05;letter-spacing:-0.02em}
.cd{position:absolute;left:50%;top:100%;transform-origin:50% 50%;width:min(62vw,820px);aspect-ratio:1;border-radius:50%;overflow:hidden;will-change:transform;box-shadow:0 0 0 3px #a9adb3, 0 0 0 4px rgba(255,255,255,0.4), 0 30px 60px rgba(0,0,0,0.35);cursor:pointer}
.cd img{width:100%;height:100%;object-fit:cover;display:block}
.cd-hub{position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#0f0f0e 0 34%,#c3c7cd 35% 52%,#8d9299 53% 70%,#b0b5bc 71% 100%)}
[data-theme="light"] .cd-hub{background:radial-gradient(circle,#FFFFFF 0 34%,#c3c7cd 35% 52%,#8d9299 53% 70%,#b0b5bc 71% 100%)}
@media (max-width:760px){
.case-poster-word{font-size:clamp(26px,10vw,52px);line-height:var(--case-lh)}
.case-title{font-size:clamp(48px,14vw,80px)}
.case-desc{font-size:16px}
.case-meta{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;padding:28px 0}
.case-grid{--t-title:23px;--t-body:15px;--t-cap:13px}
.case-grid{--ed-prose-size:clamp(15px,4.4vw,18px);--ed-prose-lh:var(--case-lh)}
.case-next-title{font-size:clamp(28px,10vw,48px)}
.cd{width:86vw}
}
/* ---- intro ---- */
.intro{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#FFFFFF;transition:opacity .5s ease, visibility 0s linear .5s;cursor:pointer}
[data-theme="dark"] .intro{background:#0f0f0e}
.intro-text{margin:0;font-weight:500;font-size:20px;letter-spacing:-0.01em;line-height:1;white-space:nowrap;transition:opacity .5s ease, filter .5s ease, transform .5s ease}
[data-theme="dark"] .intro-text{color:#e9e8e3}
.ic-sp{width:0.28em}
.ic{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(0.35em) skewX(-8deg);animation:icIn .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 45ms + 150ms) forwards}
@keyframes icIn{to{opacity:1;filter:blur(0);transform:none}}
[data-intro="grid"] .intro-text,[data-intro="done"] .intro-text{opacity:0;filter:blur(12px);transform:scale(1.04)}
[data-intro="grid"] .intro,[data-intro="done"] .intro{opacity:0;visibility:hidden;pointer-events:none}
/* the grid opens out from the centre, then the plus marks pop in */
.stage-grid{clip-path:inset(0);transition:clip-path 1.1s cubic-bezier(.65,0,.2,1)}
[data-intro="text"] .stage-grid{clip-path:inset(50% 50%)}
/* hero content waits for the grid */
.hero-grid > *,.nav,.wordmark,.nav-toggle{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
[data-intro="text"] .hero-grid > *,[data-intro="grid"] .hero-grid > *{opacity:0 !important}
[data-intro="text"] .hero-statement,[data-intro="grid"] .hero-statement{transform:translateY(calc(-50% + 18px)) !important}
[data-intro="text"] .nav,[data-intro="grid"] .nav,[data-intro="text"] .wordmark,[data-intro="grid"] .wordmark,[data-intro="text"] .nav-toggle,[data-intro="grid"] .nav-toggle{opacity:0}
.nav-toggle{display:none}
.mobile-nav{display:none}
.hero-statement{transition:opacity .9s ease .1s, transform 1s cubic-bezier(.2,.7,.2,1) .1s}
/* softer ink + slightly open tracking keep the narrow serif from reading heavy */
.hero-statement{color:var(--text-primary)}
[data-theme="dark"] .hero-statement{color:rgba(233,232,227,0.82)}
@media (prefers-reduced-motion:reduce){.ic{animation-duration:.01s;animation-delay:0s}.stage-grid{transition:none}}
.mp-cur{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;will-change:transform,opacity}
.mp-cur .mp-pill{position:absolute;left:14px;top:16px;display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:nowrap;padding:8px 14px 9px;border-radius:3px 18px 18px 18px;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.28);transition:padding .2s ease}
.mp-name{font:500 11px/1 var(--font-sans);letter-spacing:0;opacity:0.85}
.mp-msg{display:none;align-items:center;font:600 16px/1.15 var(--font-sans);letter-spacing:-0.015em}
.mp-jerol[data-talk="1"] .mp-msg{display:inline-flex}
.mp-jerol[data-talk="0"] .mp-name{font-size:12px;opacity:1}
.mp-jerol{color:#e815a0}.mp-jerol .mp-pill{background:#e815a0}
.mp-caret{display:none;width:1.5px;height:16px;background:#fff;margin-left:1px;animation:mpBlink 1s steps(1) infinite}
.mp-cur[data-typing="1"] .mp-caret{display:inline-block}
@keyframes mpBlink{50%{opacity:0}}
@media (max-width:760px),(pointer:coarse){.mp-cur{display:none !important}}
.hero-statement{position:absolute;left:0;right:0;top:43.5%;transform:translateY(-50%);margin:0 auto;max-width:max(calc(var(--cell) * (var(--cols) - 2)), min(100%, 760px));padding:0 24px;box-sizing:border-box;text-align:center;text-wrap:balance}
.hero-statement .w{white-space:nowrap}
/* subtitle under the hero title: same voice as the case summaries */
.hero-sub{display:block;max-width:36em;margin:28px auto 0;font-family:var(--font-sans);font-size:18px;line-height:1.5;letter-spacing:0.005em;color:var(--text-secondary);text-wrap:balance}
@media (max-width:759px){.hero-sub{margin:18px 0 0;font-size:16px}}
.bmp{display:inline-block;width:auto;margin:0 0.08em 0 0.05em;vertical-align:-0.14em}
.bmp-star,.bmp-globe{height:0.92em}
.bmp-portrait{height:0.88em;vertical-align:-0.16em}
.bmp-eye{height:0.6em;vertical-align:-0.02em}
/* the icons sit a little off-kilter, like stickers */
.bmp-star{rotate:5.77deg}
.bmp-portrait{rotate:4.82deg}
.bmp-eye{rotate:-12.09deg}
.hs-line{display:block}
/* intro top-left (fades with the headline); footer stays while the discs play */
.hero-intro{position:absolute;left:24px;top:80px;width:calc(var(--cell) * 2 - 48px);margin:0;font-family:var(--font-sans);font-size:12px;line-height:20px;letter-spacing:0.005em;text-transform:uppercase;white-space:pre-line;color:rgba(18,18,18,0.85)}
.hero-foot{position:absolute;left:24px;right:24px;bottom:24px;z-index:6;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none;font-family:var(--font-display);font-size:14px;line-height:16px;letter-spacing:0;text-transform:uppercase;color:var(--text-secondary)}
.sticker-fall{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fall-sticker{position:absolute;top:0;left:0;width:76px;height:76px;object-fit:contain;object-position:center;image-rendering:pixelated;will-change:transform;animation:stickerFall linear both}
@media (max-width:759px){.fall-sticker{width:60px;height:60px}}
@keyframes stickerFall{
  0%{transform:translate3d(var(--x),var(--startY,-16vh),0) rotate(var(--rot)) scale(var(--s,1))}
  18%{transform:translate3d(calc(var(--x) + var(--sway)),-8vh,0) rotate(calc(var(--rot) + var(--spin) * 0.06 + var(--flutter))) scale(var(--s,1))}
  42%{transform:translate3d(calc(var(--x) - var(--sway) * 0.72 + var(--drift) * 0.12),14vh,0) rotate(calc(var(--rot) + var(--spin) * 0.28 - var(--flutter) * 0.65)) scale(var(--s,1))}
  68%{transform:translate3d(calc(var(--x) + var(--sway) * 0.42 + var(--drift) * 0.48),46vh,0) rotate(calc(var(--rot) + var(--spin) * 0.62 + var(--flutter) * 0.4)) scale(var(--s,1))}
  100%{transform:translate3d(calc(var(--x) + var(--drift)),112vh,0) rotate(calc(var(--rot) + var(--spin))) scale(var(--s,1))}
}
@media (prefers-reduced-motion:reduce){.sticker-fall{display:none}}
.hero-meta-r{white-space:nowrap;text-align:right}
[data-theme="dark"] .hero-intro,[data-theme="dark"] .hero-foot{color:rgba(233,232,227,0.85)}
/* disc panel: title, sentence-case blurb, discipline line. Title and blurb read as one group; the credit sits apart. */
.statement-title{display:block;margin-left:-0.02em !important;line-height:1 !important;letter-spacing:0 !important;text-wrap:balance}
.statement-desc{margin:10px 0 0;max-width:36em;font-family:var(--font-sans);font-size:clamp(14px, calc(0.9vw + 2px), 16px);line-height:1.5;letter-spacing:0.002em;color:var(--text-secondary);text-wrap:pretty}
/* closing credit: a short hairline, then the disciplines */
.statement-role{margin:32px 0 0;display:flex;align-items:center;gap:12px;font-family:var(--font-sans);font-size:10.5px;line-height:1;letter-spacing:0.08em;text-transform:uppercase;color:#6a6a67}
.statement-role::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6;flex:none}
[data-theme="dark"] .statement-desc{color:#d6d5cf}
[data-theme="dark"] .statement-role{color:#8f8e88}
.hero-glow{background:radial-gradient(ellipse 34% 30% at 50% 70%, rgba(255,255,255,0.75), rgba(255,255,255,0) 72%)}
[data-theme="dark"] .hero-glow{background:radial-gradient(ellipse 36% 32% at 50% 70%, rgba(255,240,220,0.11), rgba(255,240,220,0.04) 45%, rgba(255,240,220,0) 75%)}
/* ---- dark theme ---- */
body:has([data-theme="dark"]){background:#0f0f0e}
[data-theme="dark"]{background:#0f0f0e !important;color:#e9e8e3 !important}
[data-theme="dark"] a,[data-theme="dark"] a:hover{color:#e9e8e3}
[data-theme="dark"] .nav a,[data-theme="dark"] .nav-link{color:#8f8e88 !important}
[data-theme="dark"] .nav-link[data-active="1"]{color:#e9e8e3 !important}
[data-theme="dark"] .nav-link span{background:currentColor !important}
[data-theme="dark"] .hero-grid{color:#e9e8e3 !important}
[data-theme="dark"] .statement > div{border-color:rgba(233,232,227,0.22) !important}
/* phones: the logo and menu button float over the page, so give the top a white fade on every view (home, case, about) */
@media (max-width:759px){
/* solid colour + a mask for the fade: iOS Safari tints its status-bar strip from a solid fixed element at the top edge, a gradient background gives it nothing to sample */
#top::before{content:"";position:fixed;top:0;left:0;right:0;z-index:29;height:calc(84px + env(safe-area-inset-top));background-color:#fff;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);pointer-events:none}
[data-theme="dark"]#top::before{background-color:#0f0f0e}
}
/* film grain: one pre-rendered noise tile repeated, so the browser rasterises it once instead of re-filtering every frame */
.grain-svg{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:200px 200px;transform:translateZ(0)}
[data-theme="dark"] .grain-svg{filter:invert(1);opacity:0.3 !important}
[data-theme="light"] .grain-svg{opacity:0.2 !important}
.statement{transition:opacity .35s ease, transform .35s ease}
.statement[data-show="off"]{opacity:0;transform:translateY(-8px);pointer-events:none}
@media (max-width:760px){
[data-theme="dark"] .nav{background:#1b1b1a !important}
.hero-foot{left:16px;right:16px;bottom:24px;font-size:12px}
.hero-meta-r{display:none}
.hero-intro{left:16px;right:16px;top:64px;width:auto}
/* keep stacked lines + true center on phone (was left:16px / bottom which broke alignment) */
.hs-line{display:block}
.hero-statement{
  left:16px !important;
  right:16px !important;
  top:46% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
  width:auto !important;
  text-align:left !important;
  font-size:clamp(34px,10vw,48px) !important;
  box-sizing:border-box !important;
}
.hero-statement .w{white-space:normal}
.hero-col2{display:none}
.hero-top{grid-template-columns:minmax(0,1fr) !important;top:72px !important;gap:14px}
.hero-col3{font-size:15px !important}
.hero-meta{grid-template-columns:repeat(2,minmax(0,1fr)) !important;font-size:12px !important}
.hero-top > div,.hero-meta > span{padding:0 16px !important}
}
.statement > *{clip-path:inset(-0.3em -40% -0.4em 0);transition:clip-path .28s cubic-bezier(.4,0,.2,1)}
.statement[data-phase="out"] > *{clip-path:inset(-0.3em 0 -0.4em 100%)}
.statement[data-phase="out"] > *:nth-child(1){transition-delay:0s}
.statement[data-phase="out"] > *:nth-child(2){transition-delay:.05s}
.statement[data-phase="out"] > *:nth-child(3){transition-delay:.1s}
.statement[data-phase="in"] > *{animation:wipeIn .42s cubic-bezier(.2,.7,.2,1) both}
.statement[data-phase="in"] > *:nth-child(2){animation-delay:.06s}
.statement[data-phase="in"] > *:nth-child(3){animation-delay:.12s}
@keyframes wipeIn{from{clip-path:inset(-0.3em 100% -0.4em 0)}to{clip-path:inset(-0.3em -40% -0.4em 0)}}
@media (max-width:760px){
.statement{top:calc(76px + env(safe-area-inset-top));left:16px;right:16px;width:auto}
.statement h1{font-size:clamp(34px,10vw,44px) !important}
.statement-desc{margin-top:8px;font-size:14px;max-width:none}
.statement-role{margin-top:24px}
.wordmark{top:calc(16px + env(safe-area-inset-top));left:16px}
.wordmark-logo{width:104px;height:33px}
.nav{display:none !important}
.nav-toggle{display:flex;position:fixed;top:calc(12px + env(safe-area-inset-top));right:16px;z-index:46;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--text-primary);cursor:pointer;pointer-events:auto}
.nav-toggle-lines{display:flex;flex-direction:column;justify-content:center;gap:5px;width:22px}
.nav-toggle-lines span{display:block;height:1.5px;background:currentColor;transform-origin:center;transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease, width .35s cubic-bezier(.2,.7,.2,1)}
.nav-toggle-lines span:nth-child(1){width:22px}
.nav-toggle-lines span:nth-child(2){width:16px;margin-left:auto}
.nav-toggle-lines span:nth-child(3){width:22px}
.nav-toggle[data-open="1"] .nav-toggle-lines span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:22px;margin-left:0}
.nav-toggle[data-open="1"] .nav-toggle-lines span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle[data-open="1"] .nav-toggle-lines span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:22px;margin-left:0}
.mobile-nav{display:flex;position:fixed;inset:0;z-index:45;flex-direction:column;justify-content:center;padding:max(72px, calc(48px + env(safe-area-inset-top))) 24px max(32px, env(safe-area-inset-bottom));box-sizing:border-box;background:#FFFFFF;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s cubic-bezier(.2,.7,.2,1), visibility .45s}
.mobile-nav[data-open="1"]{opacity:1;visibility:visible;pointer-events:auto}
.mobile-nav-inner{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,2.5vh,18px);width:100%;max-width:min(100%, 12em)}
.mobile-nav-link{display:block;min-height:auto;padding:0;align-items:flex-start;font-family:var(--font-display);font-size:clamp(44px,13vw,68px);font-weight:400;line-height:1.02;letter-spacing:0;text-transform:uppercase;color:rgba(18,18,18,0.32);transition:color .25s ease, transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease}
.mobile-nav-link[data-active="1"]{color:var(--text-primary)}
.mobile-nav[data-open="1"] .mobile-nav-link{animation:mobileNavIn .55s cubic-bezier(.2,.7,.2,1) both}
.mobile-nav[data-open="1"] .mobile-nav-link:nth-child(1){animation-delay:.06s}
.mobile-nav[data-open="1"] .mobile-nav-link:nth-child(2){animation-delay:.12s}
.mobile-nav-sound{align-self:flex-start;margin-top:clamp(28px,8vh,56px);padding:0;min-height:auto;gap:0}
.mobile-nav-sound .sound-btn-seat{display:none}
.mobile-nav-sound .sound-btn-glyphs{width:28px;height:28px}
.mobile-nav-sound .sound-btn-icon{width:26px;height:26px}
.mobile-nav[data-open="1"] .mobile-nav-sound{animation:mobileNavIn .55s cubic-bezier(.2,.7,.2,1) .18s both}
@keyframes mobileNavIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html[data-mobile-nav="open"]{overflow:hidden}
html[data-mobile-nav="open"] body{overflow:hidden}
[data-theme="dark"] .nav-toggle{color:#e9e8e3}
[data-theme="dark"] .mobile-nav{background:#1b1b1a}
[data-theme="dark"] .mobile-nav-link{color:rgba(233,232,227,0.32)}
[data-theme="dark"] .mobile-nav-link[data-active="1"]{color:#e9e8e3}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
.mobile-nav,.mobile-nav-link,.nav-toggle-lines span{transition:none}
.mobile-nav[data-open="1"] .mobile-nav-link,.mobile-nav[data-open="1"] .mobile-nav-sound{animation:none}
}
@media (max-width:1024px){[data-disc-wrap]{touch-action:pan-y}}
/* ---------- about: small, quiet, tactile ----------
   two lanes (serif label | one narrow content column), printed-index rows with dotted leaders, faint paper grain */
.about-section{position:relative;z-index:2;background:#FFFFFF}
.about-section::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* white band under the fixed nav so scrolled text never runs beneath the logo and links */
.about-section::before{content:"";position:sticky;top:0;z-index:3;display:block;height:104px;margin-bottom:-104px;background:linear-gradient(#fff 72%,rgba(255,255,255,0));pointer-events:none}
.about-section .about-stage{position:relative;z-index:1;width:100%;max-width:1440px;margin:0 auto;padding:clamp(132px,17vh,168px) 40px max(104px, calc(64px + env(safe-area-inset-bottom)));box-sizing:border-box}
.about-inner{width:100%;margin:0}
.about-mast,.about-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.about-mast{padding-bottom:clamp(36px,5vh,56px);border-bottom:1px solid #e4e4e4}
.about-name{grid-column:4 / 11;margin:0 0 0 -0.03em;font-family:var(--font-display);font-weight:400;font-size:clamp(52px,5.6vw,88px);line-height:0.95;letter-spacing:0;color:var(--text-primary)}
.about-tagline{grid-column:4 / 11;margin:14px 0 0;font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--text-secondary)}
.about-sec{padding:clamp(36px,5vh,56px) 0;border-bottom:1px solid #e4e4e4;align-items:start}
.about-sec:last-child{border-bottom:0;padding-bottom:0}
.about-block-label{grid-column:1 / 4;position:sticky;top:120px;margin:0;font-family:var(--font-display);font-weight:400;font-size:13px;line-height:1.6;text-transform:uppercase;letter-spacing:0;color:var(--text-secondary)}
.about-sec-body{grid-column:4 / 10;min-width:0;margin:0}
.about-lead-p{margin:14px 0 0;max-width:34em;font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--text-secondary);text-wrap:pretty}
.about-lead-p--pull{margin:0;max-width:26em;font-family:var(--font-display);font-size:clamp(20px,1.6vw,24px);line-height:1.3;color:var(--text-primary);text-wrap:balance}
/* rows read like a printed index: title, dotted leader, date; they nudge right on hover with a lime pixel */
.about-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:18px}
.about-item{position:relative;display:flex;align-items:baseline;gap:10px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.about-item::before{content:"";position:absolute;left:-16px;top:0.55em;width:6px;height:6px;background:#D4FF3A;opacity:0;transition:opacity .2s ease}
.about-item:hover{transform:translateX(6px)}
.about-item:hover::before{opacity:1}
.about-item-main{min-width:0;flex:0 1 auto}
.about-item-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.25;color:var(--text-primary)}
.about-item-sub{display:inline;margin:0 0 0 8px;font-family:var(--font-sans);font-size:13px;line-height:1.4;color:var(--text-secondary)}
.about-item-title{display:inline}
.about-item-note{margin:4px 0 0;font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--text-secondary);text-wrap:pretty}
.about-item-lead{flex:1 1 24px;min-width:24px;align-self:baseline;height:1px;border-bottom:1px dotted rgba(18,18,18,0.28);transform:translateY(-0.2em)}
.about-item-meta{flex-shrink:0;font-family:var(--font-display);font-size:13px;line-height:1.5;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums}
/* contact: the email, with an underline that thickens like a pressed key */
.about-mail-big{display:inline-flex;align-items:center;gap:0.2em;font-family:var(--font-display);font-size:clamp(24px,2.2vw,32px);line-height:1.1;color:var(--text-primary);text-decoration:none;box-shadow:inset 0 -1px 0 rgba(18,18,18,0.3);padding-bottom:2px;transition:box-shadow .25s ease}
.about-mail-arrow{width:0.6em;height:0.6em;flex-shrink:0;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.about-mail-big:hover{box-shadow:inset 0 -3px 0 #D4FF3A}
.about-mail-big:hover .about-mail-arrow{transform:translate(0.1em,-0.1em)}
.about-mail-big:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (hover:none){.about-item:hover{transform:none}.about-item:hover::before{opacity:0}}
/* entrance */
.about-mast,.about-sec{opacity:0}
.about[data-enter="1"] .about-mast{animation:ceTitle .95s cubic-bezier(.2,.7,.2,1) .05s both}
.about[data-enter="1"] .about-sec:nth-of-type(1){animation:ceUp .9s cubic-bezier(.2,.7,.2,1) .2s both}
.about[data-enter="1"] .about-sec:nth-of-type(2){animation:ceUp .9s cubic-bezier(.2,.7,.2,1) .3s both}
.about[data-enter="1"] .about-sec:nth-of-type(3){animation:ceUp .9s cubic-bezier(.2,.7,.2,1) .4s both}
.about[data-enter="1"] .about-sec:nth-of-type(4){animation:ceUp .9s cubic-bezier(.2,.7,.2,1) .5s both}
@media (prefers-reduced-motion:reduce){.about[data-enter="1"] *{animation-duration:.01s !important;animation-delay:0s !important}}
@media (max-width:1199px){
.about-name,.about-tagline,.about-sec-body{grid-column:4 / -1}
}
@media (max-width:759px){
.about-section .about-stage{padding:104px 16px max(96px, calc(72px + env(safe-area-inset-bottom)))}
.about-mast,.about-sec{grid-template-columns:minmax(0,1fr)}
.about-name,.about-tagline,.about-block-label,.about-sec-body{grid-column:1 / -1}
.about-name{font-size:clamp(44px,13vw,64px)}
.about-block-label{position:static;margin-bottom:14px}
.about-item{flex-wrap:wrap;row-gap:2px}
.about-item-main{flex-basis:100%}
.about-item-lead{display:none}
.about-item-sub{display:block;margin:4px 0 0}
}