/*TOKENS:BEGIN*/:root{--bg:#FFFFFF;--ink:#141412;--muted:#615D54;--hair:#DEDBD2;--acc:#3425FF;--card:#FDFDFB;--body:#44423C;--tint-stone:#EFEEE9;--tint-sand:#F5EDDA;--tint-sage:#EAF0E1;--tint-clay:#F6E7DC;--lab-stone:#57564E;--lab-sand:#75653F;--lab-sage:#546348;--lab-clay:#75543E;--cat-work:#3425FF;--cat-about:#E08700;--cat-side:#1F9D57;--wash-work:#F0F1FF;--wash-about:#FFF4E1;--wash-side:#EAF7EE;--layer-0:#FFFFFF;--layer-1:#F7F6F1;--layer-2:#EFEFE7;--layer-3:#DCD7C9;--surface-inverse:#141412;--text-inverse:#EFEFE7;--muted-inverse:#9B978B;--acc-inverse:#8A7FFF;--r-tile:20px;--r-card:16px;--r-fig:14px;--maxw:1200px;--ease:cubic-bezier(.22,.9,.24,1)}/*TOKENS:END*/
/* BRAND v2 (2026-07-19, Steven-directed): bright white ground, category color washes carry warmth; stripe accents retired. Gradients remain banned. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:calc(17px*var(--fs,1));line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
em,.ital{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:0}
::selection{background:var(--acc);color:#fff}
/* header */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--layer-0) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
.logo{font-weight:600;letter-spacing:.14em;font-size:14px;text-transform:uppercase;white-space:nowrap}
.logo .dot{color:var(--acc)}
.pills{display:flex;gap:4px;background:var(--card);border:1px solid var(--hair);border-radius:99px;padding:4px}
.pills button,.pills a{border:0;background:transparent;font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:7px 16px;border-radius:99px;cursor:pointer;transition:all .3s var(--ease)}
.pills .on{background:var(--ink);color:var(--bg)}
.pills button:hover:not(.on),.pills a:hover{color:var(--ink)}
/* depth toggle */
.depth{display:flex;gap:4px;background:var(--card);border:1px solid var(--hair);border-radius:99px;padding:4px}
.depth button{border:0;background:transparent;font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:7px 13px;border-radius:99px;cursor:pointer;transition:all .3s var(--ease)}
.depth button.on{background:var(--acc);color:#fff}
/* hero */
.hero{padding:var(--hero-pad,72px) 0}
.hero .cap{display:block;margin-bottom:22px}
.cap{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
h1{font-size:clamp(38px,6vw,76px);line-height:1.02;font-weight:600;letter-spacing:-.03em}
h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .16em .16em;margin:-.12em -.16em -.16em}
h1 .w span{display:inline-block;transform:translateY(135%);animation:rise .9s var(--ease) forwards;animation-delay:calc(var(--i)*.07s)}
@keyframes rise{to{transform:translateY(0)}}
h1 em{color:var(--acc)}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.55;max-width:36em;color:var(--body)}
/* marquee */
.marquee{border-block:1px solid var(--hair);overflow:hidden;white-space:nowrap;padding:13px 0;margin-top:56px}
.marquee div{display:inline-block;animation:mq 28s linear infinite}
.marquee span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 26px}
.marquee b{color:var(--acc);font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}
/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:56px 0 24px;grid-auto-flow:dense}
.tile{grid-column:span 1;background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:28px;position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:230px;height:100%;box-sizing:border-box;transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .4s var(--ease),border-color .3s;overflow:hidden}
.tile::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc) 7%,transparent),transparent 65%)}
.tile:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--acc) 40%,var(--hair));box-shadow:0 3px 6px -2px rgba(20,20,18,.14),0 12px 22px -10px rgba(20,20,18,.18),0 28px 56px -22px rgba(20,20,18,.26)}
.tile:hover::after{opacity:1}
.tile.big,.tile.p-wide{grid-column:span 2}
.tile.tall{grid-row:span 2}
.tile h2{font-size:clamp(19px,2vw,25px);line-height:1.18;font-weight:600;letter-spacing:-.01em;margin:14px 0 10px}
.tile .cap{display:flex;justify-content:space-between;gap:10px}
.tile .go{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:18px}
.tile .go i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.tile:hover .go i{transform:translateX(6px)}
.tile .pdo{font-size:calc(16px*var(--fs,1));color:var(--body);display:grid;gap:6px;margin-top:4px}
.tile .pdo b{font-weight:600;color:var(--muted);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-right:9px}
.tile.hide{opacity:0;transform:scale(.96);pointer-events:none;position:absolute;visibility:hidden}
.tile .num{font-family:'Instrument Serif',serif;font-size:52px;line-height:1;color:var(--acc)}
/* depth: scan mode trims tiles */
body[data-depth="scan"] .tile .pdo{display:none}
body[data-depth="scan"] .tile{min-height:150px}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
/* case pages */
.cs-hero{padding:80px 0 44px;border-bottom:1px solid var(--hair)}
.cs-hero .cap{display:block;margin-bottom:16px}
.cs-hero h1{font-size:clamp(30px,4.6vw,54px);max-width:20em}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 0;border-bottom:1px solid var(--hair);font-size:calc(16px*var(--fs,1))}
.facts .cap{display:block;margin-bottom:6px}
.scanbox{margin:40px 0;background:var(--card);border:1px solid var(--hair);border-left:3px solid var(--acc);border-radius:14px;padding:26px 30px;display:grid;gap:12px;max-width:52em}
.scanbox .row{display:grid;grid-template-columns:110px 1fr;gap:16px;font-size:calc(16px*var(--fs,1))}
.scanbox .cap{padding-top:4px}
.prose{max-width:46em;padding:var(--vsp) 0}
.prose>*+*{margin-top:1.15em}
h2{font-size:clamp(23px,3vw,30px);line-height:1.2;font-weight:600;letter-spacing:-.01em}
.prose h2{margin-top:2.1em}
.prose h2 .num{color:var(--acc);font-family:'Instrument Serif',serif;font-weight:400;margin-right:.5em}
.prose ul{padding-left:1.2em}
.callout{border-left:2px solid var(--acc);padding:6px 0 6px 22px;font-size:calc(17px*var(--fs,1));margin-top:1.6em;font-family:'Instrument Serif',serif;font-size:calc(21px*var(--fs,1));line-height:1.45}
.flag{font-size:calc(16px*var(--fs,1));color:var(--muted);border:1px solid var(--hair);display:inline-block;padding:2px 10px;border-radius:99px}
/* depth on case pages */
body[data-depth="scan"] .d-read,body[data-depth="scan"] .d-dive{display:none}
body[data-depth="read"] .d-dive details{/* collapsed by default */}
body[data-depth="dive"] .d-dive details{}
.depth-note{font-size:calc(16px*var(--fs,1));color:var(--muted);margin-top:14px}
body:not([data-depth="scan"]) .scan-only{display:none}
/* deep dive — large section, color-coded cards */
.dd2{padding:var(--vsp) 0;border-top:1px solid var(--ink)}
.dd2 .ddsub{color:var(--muted);font-size:calc(16px*var(--fs,1));max-width:42em;margin-top:10px}
.legend{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.chip{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:5px 14px;border-radius:99px}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:var(--vsp2)}
.dcard{border:1px solid var(--hair);border-radius:16px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.dcard:hover{transform:translateY(-2px);box-shadow:0 12px 30px -16px rgba(20,20,18,.2)}
.dcard summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:9px;padding:24px 26px;position:relative}
.dcard summary::after{content:"+";position:absolute;right:22px;top:18px;font-size:calc(24px*var(--fs,1));font-weight:300;color:var(--ink);opacity:.5}
.dcard[open] summary::after{content:"–"}
.dcard .klabel{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.dcard .dtitle{font-weight:600;font-size:17.5px;line-height:1.3;padding-right:28px;letter-spacing:-.01em}
.dcard .inner{padding:0 26px 26px;color:var(--body);font-size:calc(16px*var(--fs,1));max-width:none}
.dcard .inner>*+*{margin-top:1em}
.dcard.wide{grid-column:1/-1}
.t-stone{background:var(--tint-stone)}.t-stone .klabel,.chip.t-stone{color:var(--lab-stone)}
.t-sand{background:var(--tint-sand)}.t-sand .klabel,.chip.t-sand{color:var(--lab-sand)}
.t-sage{background:var(--tint-sage)}.t-sage .klabel,.chip.t-sage{color:var(--lab-sage)}
.t-clay{background:var(--tint-clay)}.t-clay .klabel,.chip.t-clay{color:var(--lab-clay)}
@media(max-width:900px){.dd-grid{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:calc(16px*var(--fs,1));margin-top:8px}
th{text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:10px 14px 10px 0;border-bottom:1px solid var(--ink)}
td{padding:12px 14px 12px 0;border-bottom:1px solid var(--hair);vertical-align:top}
/* figures & image placeholders */
figure{margin:2.4em 0}
figure img{width:100%;display:block;border-radius:14px;border:1px solid var(--hair)}
figure svg{width:100%;height:auto;display:block}
figcaption{font-size:calc(16px*var(--fs,1));color:var(--muted);margin-top:10px}
figure.missing img{display:none}
figure.missing::before{content:"Image slot — " attr(data-file) " (see IMAGES.md)";display:flex;align-items:center;justify-content:center;height:240px;border:1px dashed var(--hair);border-radius:14px;color:var(--muted);font-size:calc(16px*var(--fs,1));letter-spacing:.04em;background:var(--card)}
/* footer */
/* v5.6 — one footer site-wide. The inverse band IS the boundary, so the
   hairline goes; and the 72px margin was half of the 175px gap on About
   (the other half was .crumbs-foot, now folded inside the footer). */
footer{border-top:0;margin-top:0}
.foot{display:flex;justify-content:space-between;align-items:baseline;padding:40px 24px;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap;gap:16px}
.foot .links{display:flex;gap:28px}
.foot a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.foot a:hover{color:var(--acc)}
.next{padding:var(--vsp) 0;border-top:1px solid var(--ink)}
.next a:hover{color:var(--acc)}
@media(max-width:900px){
 .bento{grid-template-columns:repeat(2,1fr)}
 .tile,.tile.big,.tile.p-wide,.tile.p-hero{grid-column:span 2;grid-row:auto}
 .facts{grid-template-columns:repeat(2,1fr)}
 .nav{flex-wrap:wrap}.pills{order:3;width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
 h1 .w span{transform:none;animation:none}
}

/* homepage dive: the dossier */
.dossier{display:none}
body[data-depth="dive"] .dossier{display:block;padding-bottom:var(--vsp)}
body[data-depth="dive"] .bento,body[data-depth="dive"] .browse-row{display:none}
.band{background:var(--wash-work);border:1px solid var(--hair);border-radius:20px;padding:44px 48px;margin-top:var(--vsp2);display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:start;box-shadow:0 1px 2px rgba(20,20,18,.05),0 3px 10px -4px rgba(20,20,18,.10)}

.band .cap{display:flex;justify-content:space-between}
.band h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.015em;margin:14px 0 14px}
.band .pdo{font-size:calc(16px*var(--fs,1));color:var(--body);display:grid;gap:8px;max-width:44em}
.band .pdo b{font-weight:600;color:var(--ink)}
.band .nums{display:flex;gap:36px;margin-top:26px;flex-wrap:wrap}
.band .nums div span{display:block;font-size:calc(16px*var(--fs,1));color:var(--muted);letter-spacing:.06em}
.band .nums div b{font-family:'Instrument Serif',serif;font-weight:400;font-size:30px;color:var(--acc);line-height:1.2}
.band .go{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:2px;display:inline-block;margin-top:26px}
.band .vis{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--card)}
.band .vis img{width:100%;display:block}
.band .vis svg{width:100%;height:auto;display:block;padding:18px}
.band .vis .ph{display:flex;align-items:center;justify-content:center;height:200px;color:var(--muted);font-size:calc(16px*var(--fs,1));padding:0 18px;text-align:center}
.tail{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:44px 48px;margin-top:var(--vsp2);box-shadow:0 1px 2px rgba(20,20,18,.05),0 3px 10px -4px rgba(20,20,18,.10)}
.tail h2{font-size:clamp(22px,2.4vw,30px);margin:12px 0 8px}
.tail .ddsub{color:var(--muted);font-size:calc(16px*var(--fs,1));max-width:44em}
.trow{display:grid;grid-template-columns:190px 1fr 150px;gap:24px;padding:16px 0;border-bottom:1px solid var(--hair);font-size:calc(16px*var(--fs,1));align-items:baseline}
.trow:first-of-type{margin-top:24px;border-top:1px solid var(--ink)}
.trow .tg{font-weight:600}
.trow .tf{color:var(--body)}
.trow .tn{color:var(--muted);text-align:right;font-size:calc(16px*var(--fs,1))}
@media(max-width:900px){.band{grid-template-columns:1fr}.trow{grid-template-columns:1fr;gap:6px}.trow .tn{text-align:left}}

/* section rail — position indicator with previews */
.rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:40}
.rail button{position:relative;background:transparent;border:0;cursor:pointer;padding:4px 0;display:flex;align-items:center;justify-content:flex-end;width:30px}
.rail button i{display:block;width:14px;height:2px;background:#C9C5B8;transition:all .3s var(--ease)}
.rail button:hover i{width:24px;background:var(--ink)}
.rail button.on i{width:30px;background:var(--acc)}
.rail .chip2{position:absolute;right:40px;top:50%;transform:translateY(-50%) translateX(6px);background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:14px 18px;width:290px;text-align:left;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);box-shadow:0 14px 34px -14px rgba(20,20,18,.28)}
.rail button:hover .chip2,.rail button:focus-visible .chip2{opacity:1;transform:translateY(-50%) translateX(0)}
.rail .chip2 .cap{display:block;margin-bottom:5px;color:var(--acc)}
.rail .chip2 b{font-size:calc(16px*var(--fs,1));display:block;line-height:1.3;color:var(--ink)}
.rail .chip2 .pv{font-size:calc(16px*var(--fs,1));color:var(--muted);display:block;margin-top:5px;line-height:1.45}
.prose h2,.dd2 h2,.band h2,.tail h2{scroll-margin-top:92px}
@media(max-width:1100px){.rail{display:none}}
.rail-dive{display:none}
body[data-depth="dive"] .rail-dive{display:flex}

/* impact / clients / recommendations */
/* v5.6 — the black section dividers are gone at Steven's request. The
   hairlines INSIDE the impact trio and the client wall are --hair and stay;
   only these two --ink rules were the heavy lines. */
.hsec{padding:var(--vsp) 0}
.hsec>h2{font-size:clamp(22px,2.4vw,30px);margin:12px 0 26px}
.imp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.imp{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:28px;transition:transform .5s var(--ease),border-color .3s}
.imp:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc) 40%,var(--hair))}
.imp h3{font-size:calc(20px*var(--fs,1));font-weight:600;letter-spacing:-.01em;margin:12px 0 10px}
.imp p{font-size:calc(16px*var(--fs,1));color:var(--body);line-height:1.6}
.cl-wall{display:flex;flex-wrap:wrap;gap:16px 18px;align-items:baseline}
.cl-wall span{font-size:clamp(20px,2.4vw,29px);font-weight:600;letter-spacing:-.015em;transition:color .3s}
.cl-wall span:hover{color:var(--acc)}
.cl-wall i{font-style:normal;color:var(--hair);font-size:calc(20px*var(--fs,1))}
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rec-ph{border:1px dashed var(--hair);border-radius:16px;padding:26px;color:var(--muted);font-size:calc(16px*var(--fs,1));background:var(--card);min-height:170px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.6}
.rec{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:14px}
.rec q{font-family:'Instrument Serif',serif;font-size:calc(18px*var(--fs,1));line-height:1.5;quotes:"\201C" "\201D"}
.rec .who{font-size:calc(16px*var(--fs,1));color:var(--muted)}
.rec .who b{color:var(--ink);font-weight:600;display:block;font-size:calc(16px*var(--fs,1))}
@media(max-width:900px){.imp-grid,.rec-grid{grid-template-columns:1fr}}

/* range chips + cursor peek */
#peek{position:fixed;left:0;top:0;pointer-events:none;z-index:70;background:var(--ink);color:var(--bg);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:9px 16px;border-radius:99px;opacity:0;transform:translate(-50%,-150%);transition:opacity .2s var(--ease);white-space:nowrap}
#peek.on{opacity:1}
.pills a{border-bottom:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:7px 16px;border-radius:99px;transition:all .3s var(--ease)}
.pills a:hover{color:var(--ink)}

/* category color washes (brand v2: tinted grounds replace the stripe accents) + breadcrumbs */
.tile{transition-property:transform,box-shadow,opacity,border-color;transition-duration:.5s,.5s,.4s,.3s}
.tile[data-cat~="work"]{background:var(--wash-work)}
.tile[data-cat~="about"]{background:var(--wash-about)}
.tile[data-cat~="side"]{background:var(--wash-side)}
.crumbs{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted);border-bottom:0;transition:color .2s}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--acc)}
.crumbs .dot{width:8px;height:8px;border-radius:2px;display:inline-block}
.crumbs b{color:var(--ink);font-weight:600}

/* elevation system: rest / hover / pressed */
.tile,.dcard{box-shadow:0 1px 2px rgba(20,20,18,.05),0 3px 10px -4px rgba(20,20,18,.10)}
.tile:active{transform:translateY(-1px) scale(.99);box-shadow:0 1px 3px rgba(20,20,18,.14);transition-duration:.12s}
.dcard:active{transform:translateY(0);transition-duration:.12s}
.imp,.rec{box-shadow:0 1px 2px rgba(20,20,18,.04)}
/* dark theme */
html[data-theme="dark"]{--layer-0:#141412;--layer-1:#191815;--layer-2:#1F1D19;--layer-3:#26231D;--surface-inverse:#EFEFE7;--text-inverse:#141412;--muted-inverse:#615D54;--acc-inverse:#3425FF;--bg:#141412;--ink:#EFEFE7;--muted:#9B978B;--hair:#33312C;--acc:#8A7FFF;--card:#1E1D1A;--body:#C9C5B8;--tint-stone:#26251F;--tint-sand:#2A2618;--tint-sage:#232A1E;--tint-clay:#2B221B;--lab-stone:#B8B4A6;--lab-sand:#CBB878;--lab-sage:#A9BC98;--lab-clay:#C79F82;--cat-work:#8A7FFF;--cat-about:#D4B24A;--cat-side:#7FAF74;--wash-work:#20203A;--wash-about:#2B2415;--wash-side:#1B2A20}
html[data-theme="dark"] body::before{opacity:.05}
html[data-theme="dark"] .tile,html[data-theme="dark"] .dcard,html[data-theme="dark"] .imp,html[data-theme="dark"] .rec{box-shadow:none}
html[data-theme="dark"] .tile:hover{box-shadow:0 3px 6px -2px rgba(0,0,0,.4),0 12px 22px -10px rgba(0,0,0,.45),0 28px 56px -22px rgba(0,0,0,.6)}
html[data-theme="dark"] .depth button.on{color:#141412}
html[data-theme="dark"] .pills .on{background:var(--ink);color:#141412}
html[data-theme="dark"] .band .vis img{opacity:.92}

/* nav morph (pills <-> links), hide-on-scroll header, bottom crumbs, slow press */
@view-transition{navigation:auto}
.pills button:nth-of-type(1),.navlinks a:nth-of-type(1){view-transition-name:nav-1}
.pills button:nth-of-type(2),.navlinks a:nth-of-type(2){view-transition-name:nav-2}
.pills button:nth-of-type(3),.navlinks a:nth-of-type(3){view-transition-name:nav-3}
.pills button:nth-of-type(4),.navlinks a:nth-of-type(4){view-transition-name:nav-4}
.navlinks{display:flex;gap:30px;align-items:center}
.navlinks a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent;padding-bottom:3px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current]{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}
header{transition:transform .4s var(--ease)}
header.hid{transform:translateY(-105%)}
#navBtn{position:fixed;top:14px;right:16px;z-index:60;display:none;align-items:center;gap:9px;background:var(--card);border:1px solid var(--hair);border-radius:10px;padding:10px 16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:0 6px 20px -8px rgba(20,20,18,.25);font-family:inherit}
#navBtn.on{display:flex}
#navBtn svg{width:16px;height:16px;display:block}
#navBtn:hover{border-color:var(--acc);color:var(--acc)}
.tile:hover{transform:translateY(-6px)}
.tile:active{transform:translateY(-1px) scale(.99);box-shadow:0 1px 3px rgba(20,20,18,.14);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.dcard:active{transform:translateY(0);transition:transform .45s var(--ease)}
/* v5.6 — DEAD: no page emits .crumbs-foot any more. Retained so reverting the
   markup alone restores the old look. */
.crumbs-foot{border-top:1px solid var(--hair);margin-top:64px}
.crumbs-foot .crumbs{padding:22px 0}
@media(prefers-reduced-motion:reduce){header{transition:none}}

/* nav morph: luxurious staggered wave (500ms, soft settle) */
::view-transition-group(nav-1),::view-transition-group(nav-2),::view-transition-group(nav-3),::view-transition-group(nav-4){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,.84,.24,1)}
::view-transition-group(nav-2){animation-delay:.05s}
::view-transition-group(nav-3){animation-delay:.1s}
::view-transition-group(nav-4){animation-delay:.15s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.16,.84,.24,1)}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation:none!important}}
/* a11y dock: language + type size, floating in the left gutter */
#dock{position:fixed;right:20px;bottom:20px;z-index:65;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hair);border-radius:14px;box-shadow:0 6px 24px -10px rgba(20,20,18,.25);overflow:hidden}
#dock>button{background:none;border:0;cursor:pointer;width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;font:inherit;color:var(--ink);font-size:16px;line-height:1}
#dock>button+button{border-top:1px solid var(--hair)}
#dock>button svg{width:16px;height:16px;display:block;margin:0 auto}
#dock>button:hover{color:var(--acc)}
#dockPanel{position:fixed;right:78px;bottom:20px;top:auto;z-index:66;background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:18px 22px;width:300px;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 18px 44px -18px rgba(20,20,18,.3);opacity:0;pointer-events:none;transform:translateX(8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
#dockPanel.on{opacity:1;pointer-events:auto;transform:translateX(0)}
#dockPanel .cap{display:block;margin-bottom:8px}
#dockPanel .cap+.cap{margin-top:14px}
.langopt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;background:none;border:0;border-top:1px solid var(--hair);padding:7px 2px;font:inherit;font-size:calc(16px*var(--fs,1));cursor:pointer;color:var(--ink);text-align:start}
.langopt:hover{color:var(--acc)}
.langopt.on{color:var(--acc);font-weight:600}
.langopt .dirtag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fsrow{display:flex;gap:10px;margin-top:10px}
.fsrow button{flex:1;background:none;border:1px solid var(--hair);border-radius:10px;cursor:pointer;color:var(--ink);padding:7px 0;font-family:inherit;transition:all .25s var(--ease)}
.fsrow button.on{border-color:var(--acc);color:var(--acc)}
.fsrow .s1{font-size:16px}.fsrow .s2{font-size:19px}.fsrow .s3{font-size:22px}
#nameMode{margin-top:10px;background:none;border:0;font-family:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);cursor:pointer;padding:0}
#nameMode:hover{color:var(--acc)}
.dockNote{font-size:12px;letter-spacing:.06em;color:var(--muted);margin-top:12px;line-height:1.5}
@media(max-width:900px){#dock{right:14px;bottom:14px}#dockPanel{right:14px;bottom:76px;max-height:calc(100dvh - 96px);width:min(300px,calc(100vw - 28px))}}

/* depth-switch transition: content falls up into place */
@keyframes vtUp{from{opacity:0;transform:translateY(22px)}}
@keyframes vtDown{to{opacity:0;transform:translateY(-12px)}}
html.vt-depth::view-transition-old(root){animation:vtDown .28s ease forwards}
html.vt-depth::view-transition-new(root){animation:vtUp .5s cubic-bezier(.16,.84,.24,1)}
/* bento filter choreography: tiles fall up, staggered */
@keyframes fallUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.tile.drop{animation:fallUp .55s cubic-bezier(.16,.84,.24,1) both}
.bento.dense{grid-auto-flow:dense}
/* + dot filter bar */
.fbar{display:flex;align-items:center;gap:14px;margin-top:44px;flex-wrap:wrap}
#fChips{display:flex;gap:8px;flex-wrap:wrap}
#fChips .fchip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--acc);color:var(--acc);border-radius:99px;padding:8px 16px;font-size:calc(16px*var(--fs,1));font-weight:500;background:none;cursor:pointer;font-family:inherit;transition:all .25s var(--ease)}
#fChips .fchip:hover{background:var(--acc);color:var(--card)}
#fPanel{position:fixed;top:0;right:0;height:100vh;width:min(400px,92vw);z-index:80;background:var(--card);border-inline-start:1px solid var(--hair);box-shadow:-24px 0 60px -30px rgba(20,20,18,.35);padding:28px;overflow-y:auto;transform:translateX(110%);transition:transform .45s cubic-bezier(.16,.84,.24,1)}
#fPanel.on{transform:translateX(0)}
#fPanel h3{font-size:calc(20px*var(--fs,1));font-weight:600;letter-spacing:-.01em;margin:6px 0 4px}
#fPanel .cap{display:block;margin:22px 0 10px}
.fgroup{display:flex;flex-wrap:wrap;gap:8px}
.fopt{border:1px solid var(--hair);border-radius:99px;padding:8px 16px;font-size:calc(16px*var(--fs,1));background:none;color:var(--ink);cursor:pointer;font-family:inherit;transition:all .25s var(--ease)}
.fopt:hover{border-color:var(--acc);color:var(--acc)}
.fopt.on{background:var(--acc);border-color:var(--acc);color:#fff}
html[data-theme="dark"] .fopt.on{color:#141412}
.frow{display:flex;gap:10px;margin-top:28px}
.frow button{flex:1;border-radius:12px;padding:12px 0;font-family:inherit;font-size:calc(16px*var(--fs,1));cursor:pointer}
#fApply{background:var(--ink);color:var(--bg);border:0}
#fClear{background:none;border:1px solid var(--hair);color:var(--ink)}
#fClose{position:absolute;top:18px;right:18px;background:none;border:0;font-size:22px;color:var(--muted);cursor:pointer}
#fClose:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.tile.drop{animation:none}#fPanel{transition:none}}

/* filter trigger: labeled button (the + is retired) */
#fPlus{display:inline-flex;align-items:center;gap:10px;width:auto;height:auto;border-radius:99px;border:1px solid var(--hair);background:var(--card);color:var(--ink);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:12px 20px;cursor:pointer;transition:all .35s var(--ease);box-shadow:0 1px 2px rgba(20,20,18,.05),0 3px 10px -4px rgba(20,20,18,.10);font-family:inherit}
#fPlus svg{width:15px;height:15px;display:block}
#fPlus:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)}
#fPlus.open{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:none}
/* type-size ballooning: --fs itself animates with overshoot */
@property --fs{syntax:"<number>";inherits:true;initial-value:1}
:root{transition:--fs .6s cubic-bezier(.34,1.56,.64,1)}
@media(prefers-reduced-motion:reduce){:root{transition:none}}
/* typewriter caret for language switch */
.typing::after{content:"▌";color:var(--acc);margin-left:1px;animation:caret .7s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* dock hover states + current-language label */
#dock:hover{border-color:var(--acc)}
#dock>button{transition:all .25s var(--ease);letter-spacing:.02em}
#dock>button:hover{background:var(--bg);color:var(--acc)}
#dkLang{font-size:14px;font-weight:600;min-width:52px}
/* mobile: dock docks to the bottom, panel becomes a bottom sheet */
@media(max-width:900px){
 #dock{flex-direction:column}
}

/* rolling label swap */
.lout{opacity:0;transform:translateY(-9px);transition:all .17s ease}
.lin{animation:lin .38s cubic-bezier(.16,.84,.24,1)}
@keyframes lin{from{opacity:0;transform:translateY(10px)}}
.pills button,.navlinks a,.depth button,#dkLang,.lname{display:inline-block}

/* accent cursor: big dot at rest, focused ring over interactive */
#cur{position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--acc);border:2px solid transparent;pointer-events:none;z-index:2147483400;will-change:transform;opacity:0;transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),opacity .2s}
#cur.live{opacity:1}
#cur.focused{width:9px;height:9px;background:transparent;border-color:var(--acc)}
#cur.down{width:12px;height:12px}
html.cursor-live,html.cursor-live *{cursor:none!important}

/* depth-aware hero sizing */
body[data-depth="read"] .hero h1{font-size:clamp(32px,4.6vw,58px)}
/* v5.9d — Steven chose B on the walkthrough: the hero headline takes the same
   58px step in every depth state (app.js defaults depth to "dive", so fresh
   visitors were getting the 31px calm-mode h1 — the only page element the
   site's own h1 lost to was a case-study card). Scan keeps the 76px shout. */
body[data-depth="dive"] .hero h1{font-size:clamp(32px,4.6vw,58px)}
.blockrise{display:inline-block;animation:rise .8s cubic-bezier(.16,.84,.24,1) both}

@media(max-width:900px){.band,.tail{padding:26px 22px}}
html[data-theme="dark"] .band,html[data-theme="dark"] .tail{box-shadow:none}

/* vertical rhythm tokens: 64/40 desktop, 40/24 mobile */
:root{--vsp:64px;--hero-pad:72px;--vsp2:40px}
@media(max-width:900px){:root{--vsp:40px;--vsp2:24px}.hero{padding:44px 0 24px}.fbar{margin-top:24px}}

/* dock side logic: right by default, left in RTL, clear of the section rail */

html[dir="rtl"] #dock{left:20px;right:auto}
html[dir="rtl"] #dockPanel{left:78px;right:auto;transform:translateX(-8px)}
html[dir="rtl"] #dockPanel.on{transform:translateX(0)}

@media(max-width:900px){html[dir="rtl"] #dock{left:14px;right:auto}html[dir="rtl"] #dockPanel{left:14px;right:auto}}
.fsrow button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.fsrow button svg{width:15px;height:15px;display:block;flex:none}

/* worked-with: depth-aware logo wall */
.who-grid{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.who{display:flex;flex-direction:column;gap:10px;max-width:300px;position:relative}
.wmark{transition:width .45s var(--ease),height .45s var(--ease)}
.wsite{display:none;font-size:calc(15px*var(--fs,1));color:var(--muted);text-decoration:none}
.wsite:hover{color:var(--acc)}
body[data-depth="scan"] .who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:22px;width:100%}
body[data-depth="scan"] .who{max-width:none}
body[data-depth="scan"] .who .wmark{width:100%;height:auto;aspect-ratio:1/1;border-radius:22px}
body[data-depth="read"] .who{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;max-width:none}
body[data-depth="read"] .who .wmark{width:112px;height:112px;border-radius:22px}
body[data-depth="read"] .who .wname{font-size:calc(18px*var(--fs,1))}
body[data-depth="dive"] .who .wsite{display:inline-flex;align-items:center;gap:6px;width:max-content;margin-top:10px;border:1px solid var(--hair);border-radius:99px;padding:7px 16px;color:var(--ink);transition:border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
body[data-depth="dive"] .who .wsite:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)}
.wmark{width:56px;height:56px;border:1px solid var(--hair);border-radius:14px;background:var(--card);display:flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:20px;color:var(--ink);box-shadow:0 1px 2px rgba(20,20,18,.04);position:relative;overflow:hidden}
.wmark img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;filter:grayscale(1)}
html[data-theme="dark"] .wmark img{filter:grayscale(1) invert(1)}
.wmark.haslogo{font-size:0}
.wname{font-weight:600;font-size:calc(16px*var(--fs,1))}
.wbio{font-size:calc(16px*var(--fs,1));color:var(--body);line-height:1.6;display:none}
body[data-depth="scan"] .who .wname{display:none}
body[data-depth="dive"] .who .wbio{display:block}
body[data-depth="dive"] .who-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
body[data-depth="dive"] .who{max-width:none;background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:24px}
body[data-depth="dive"] .who .wmark{border:0;background:var(--bg)}

/* dossier: category-aware bands (brand v2 washes) */
.band.hide,.tail.hide{display:none}
.band[data-cat="about"]{background:var(--wash-about)}
.band[data-cat="side"]{background:var(--wash-side)}

/* depth-state tile marks: circle at scan, rounded rect at read */
.tico{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--hair);background:var(--bg);margin-bottom:16px;flex:none;transition:border-radius .45s var(--ease),width .45s var(--ease),height .45s var(--ease)}
.tico svg{width:21px;height:21px;color:var(--ink)}
body[data-depth="scan"] .tico{border-radius:50%}
body[data-depth="read"] .tico{border-radius:12px;width:52px;height:52px}
body[data-depth="scan"] .tico svg{width:19px;height:19px}
/* dive: give the filter bar full section clearance above the first band */


/* raster hero illustrations */
.rhero{margin:var(--vsp2) 0 0}
.rhero img{width:100%;height:auto;display:block;border-radius:20px;border:1px solid var(--hair)}
.vis>img{width:100%;height:100%;object-fit:cover;display:block;min-height:220px}
html[data-theme="dark"] .rhero img,html[data-theme="dark"] .vis>img{opacity:.9}

/* tile thumbnails (raster heroes) — depth-scaled: Scan strip, Read tall */
.timg{display:block;margin:14px 0 2px;border-radius:12px;overflow:hidden;border:1px solid var(--hair)}
.timg img{width:100%;height:56px;object-fit:cover;display:block;transition:height .45s var(--ease)}
body[data-depth="read"] .timg img{height:150px}
html[data-theme="dark"] .timg img{opacity:.9}
/* dossier band illustration (Dive) — large, above the working diagram */
.vis .bimg{width:100%;height:240px;object-fit:cover;display:block;border-bottom:1px solid var(--hair)}
html[data-theme="dark"] .vis .bimg{opacity:.9}

/* Lights tile: two frames cross-fade with the real theme */
.timg.lights{position:relative}
.timg.lights img{transition:opacity .6s var(--ease),height .45s var(--ease)}
.timg.lights img+img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
html[data-theme="dark"] .timg.lights img:first-child{opacity:0}
html[data-theme="dark"] .timg.lights img+img{opacity:1}

/* rows determine height; content top-aligned; CTA pinned */
.bento{align-items:stretch}
.tile>.go{margin-top:auto;padding-top:14px}
/* imgfull tiles at read: the image absorbs spare row height instead of leaving dead space (2026-07-19) */
body[data-depth="read"] .tile.imgfull{display:flex}
body[data-depth="read"] .tile.imgfull .timg{flex:1;min-height:150px}
body[data-depth="read"] .tile.imgfull .timg img{height:100%;min-height:150px;object-fit:cover}
/* superseded by imgfull system below */
.timg img{object-position:50% 30%}

/* Lights tile icon: sun by day, moon by night */
.tico .ic-moon{display:none}
html[data-theme="dark"] .tico .ic-moon{display:block}
html[data-theme="dark"] .tico .ic-sun{display:none}

/* priority mosaic (2026-07-06; row-span retired 2026-07-19 — after the utility de-carding it stretched tiles over half-empty rows) */
.tile.p-hero{grid-column:span 2}
body[data-depth="read"] .tile.p-hero .timg img{height:300px}
body[data-depth="read"] .tile.p-hero h2{font-size:clamp(24px,2.6vw,34px)}
/* dive dossier: mixed full-width + half bands */
body[data-depth="dive"] .dossier{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding-top:var(--vsp);grid-auto-flow:dense}
.dossier .band{grid-column:1/-1;margin-top:0}
.dossier .band.bhalf{grid-column:auto;grid-template-columns:1fr;padding:36px;gap:24px}
.dossier .band.bhalf .vis .bimg{height:190px}
.dossier .tail,.dossier>h2,.dossier>.cap,.dossier>p{grid-column:1/-1}
@media(max-width:900px){.dossier .band.bhalf{grid-column:1/-1}}

/* rebuild-log v2: feature grid, build passes, artifact excerpts */
.featgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:22px}
.fcard{border:1px solid var(--hair);border-radius:14px;background:var(--card);padding:18px}
.fcard b{display:block;margin-bottom:6px;font-size:calc(16px*var(--fs,1))}
.fcard span{font-size:calc(16px*var(--fs,1));color:var(--body);line-height:1.55}
.passes{margin-top:22px;border-top:1px solid var(--hair)}
.bpass{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--hair)}
.bpass i{font-family:'Instrument Serif',serif;font-style:italic;color:var(--acc);font-size:calc(22px*var(--fs,1))}
.bpass b{display:block;font-size:calc(17px*var(--fs,1));margin-bottom:4px}
.bpass span{font-size:calc(16px*var(--fs,1));color:var(--body);line-height:1.6}
.bpass code{background:var(--card);border:1px solid var(--hair);border-radius:6px;padding:1px 6px;font-size:.88em}
.bpass.fail i{color:var(--cat-about)}
.artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:22px}
.artifact{margin:0;border-radius:14px;padding:18px;border:1px solid var(--hair)}
.artifact figcaption{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:10px}
.artifact pre{margin:0;font-size:13px;line-height:1.6;white-space:pre-wrap;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
html[data-theme="dark"] .artifact{color:var(--ink)}

/* hover system (2026-07-06): bar pop + floating icons at every depth */
body[data-depth="read"] .tile .tico{position:absolute;top:14px;inset-inline-start:14px;z-index:3;margin:0;opacity:0;transform:translateY(-6px);background:var(--bg);box-shadow:0 2px 10px -4px rgba(20,20,18,.35);transition:opacity .3s var(--ease),transform .3s var(--ease)}
body[data-depth="read"] .tile:hover .tico{opacity:1;transform:none}
/* dive bands: raise, bar pop, icon reveal */
.band{position:relative;transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .3s var(--ease)}
.band:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--acc) 40%,var(--hair));box-shadow:0 3px 6px -2px rgba(20,20,18,.12),0 12px 22px -10px rgba(20,20,18,.16),0 28px 56px -22px rgba(20,20,18,.24)}
.band .tico{position:absolute;top:14px;inset-inline-start:14px;z-index:3;margin:0;opacity:0;transform:translateY(-6px);background:var(--bg);border-radius:12px;box-shadow:0 2px 10px -4px rgba(20,20,18,.35);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.band:hover .tico{opacity:1;transform:none}
/* dive: rows size to content; smaller half-band imagery */
body[data-depth="dive"] .dossier{align-items:start}
.dossier .band.bhalf .vis .bimg{height:160px}
/* scan imgfull tile (example: About) — image is the tile; title on a card strip; icon on hover */
body[data-depth="scan"] .tile.imgfull{padding:0;min-height:250px}
body[data-depth="scan"] .tile.imgfull .timg{position:absolute;inset:0;margin:0;border:0;border-radius:19px;order:0;overflow:hidden}
body[data-depth="scan"] .tile.imgfull .timg img{width:100%;height:100%;object-fit:cover}
body[data-depth="scan"] .tile.imgfull .cap,body[data-depth="scan"] .tile.imgfull .go,body[data-depth="scan"] .tile.imgfull .pdo{display:none}
body[data-depth="scan"] .tile.imgfull h2{position:relative;z-index:2;margin:auto 0 0;background:color-mix(in srgb,var(--card) 15%,transparent);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);border-top:1px solid color-mix(in srgb,var(--hair) 45%,transparent);padding:16px 22px;border-radius:0 0 19px 19px;font-size:clamp(18px,1.7vw,23px)}
body[data-depth="scan"] .tile.imgfull .tico{position:absolute;top:14px;inset-inline-start:14px;z-index:3;margin:0;opacity:0;transform:translateY(-6px);background:var(--bg);box-shadow:0 2px 10px -4px rgba(20,20,18,.35);transition:opacity .3s var(--ease),transform .3s var(--ease)}
body[data-depth="scan"] .tile.imgfull:hover .tico{opacity:1;transform:none}

.tile{transition-timing-function:var(--ease)}
/* imgfull scan tiles — the image IS the tile, title on a card strip, icon on hover (system) */
body[data-depth="scan"] .tile:has(.timg){padding:0;min-height:250px}
body[data-depth="scan"] .tile:has(.timg)>*:not(.timg):not(.tico):not(h2){display:none}
body[data-depth="scan"] .tile .timg{position:absolute;inset:0;margin:0;border:0;border-radius:19px;overflow:hidden;order:0}
body[data-depth="scan"] .tile .timg img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
body[data-depth="scan"] .tile:has(.timg) h2{position:relative;z-index:2;margin:auto 0 0;background:var(--card);border-top:1px solid var(--hair);padding:16px 22px;border-radius:0 0 19px 19px;font-size:clamp(18px,1.7vw,23px)}
body[data-depth="scan"] .tile .tico{position:absolute;top:14px;inset-inline-start:14px;z-index:3;margin:0;opacity:0;transform:translateY(-6px);background:var(--bg);box-shadow:0 2px 10px -4px rgba(20,20,18,.35);transition:opacity .3s var(--ease),transform .3s var(--ease)}
body[data-depth="scan"] .tile:hover .tico{opacity:1;transform:none}

/* scan hierarchy: group headers over the bento (2026-07-19 · review fix #2 — Work / About me / Side quests) */
.ghead{display:none}
body[data-depth="scan"] .ghead{display:flex;align-items:center;gap:12px;grid-column:1/-1;margin:34px 2px 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
body[data-depth="scan"] .ghead i{width:8px;height:8px;border-radius:2px;flex:none}
body[data-depth="scan"] .ghead::after{content:"";flex:1;height:1px;background:var(--hair)}
body[data-depth="scan"] .ghead[data-g="work"]{order:0;margin-top:0}
body[data-depth="scan"] .ghead[data-g="about"]{order:2}
body[data-depth="scan"] .ghead[data-g="side"]{order:4}
body[data-depth="scan"] .bento{grid-auto-flow:row}
body[data-depth="scan"] .tile.s2{grid-column:span 2}
body[data-depth="scan"] .bento .tile[data-cat~="work"]{order:1}
body[data-depth="scan"] .bento .tile[data-cat~="about"]{order:3}
body[data-depth="scan"] .bento .tile[data-cat~="side"]{order:5}
.ghead.hide{display:none!important}

/* utilities: plain links, not cards (2026-07-19 · review fix #3 — de-carded) */
.urow{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:0 0 var(--vsp2)}
.urow .cap{margin-right:4px}
.urow a{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);transition:color .2s}
.urow a:hover{color:var(--acc)}
.urow a svg{width:15px;height:15px;flex:none}

/* explorations tile: a secret entry point — absent at scan, title-only at read & dive */
/* WS5 (2026-07-27): the 256 matrix is the differentiator, so it stops being a secret tile.
   Option B per Greg's note — show three real layouts before the click. */
.mxline{display:block;font-size:calc(14.5px*var(--fs,1));color:var(--body);margin-top:8px;max-width:34em}
.mxrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:14px}
.mx{width:76px;height:54px;border-radius:9px;border:1px solid rgba(0,0,0,.10);position:relative;overflow:hidden;
 transition:transform .4s var(--ease),box-shadow .4s var(--ease);flex:0 0 auto}
.mx i{position:absolute;left:6px;border-radius:2px;height:3px;display:block}
.mx .b1{top:8px;right:6px}
.mx .b2{top:16px;width:58%;opacity:.5}
.mx b{position:absolute;left:6px;bottom:5px;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600}
.mx-term{background:#0B0B0C}.mx-term i{background:#7CFFB2}.mx-term b{color:#7CFFB2}
.mx-ledg{background:#F3EFE4}.mx-ledg i{background:#2B2A26}.mx-ledg b{color:#2B2A26}
.mx-one{background:#EAF0FF}.mx-one i{background:var(--acc)}.mx-one b{color:var(--acc)}
.tile:hover .mx{transform:translateY(-4px)}
.tile:hover .mx-ledg{transition-delay:.05s}
.tile:hover .mx-one{transition-delay:.1s}
.mxall{font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:2px;margin-left:4px}
.tile:hover .mxall{color:var(--acc);border-color:var(--acc)}
@media(prefers-reduced-motion:reduce){.mx,.tile:hover .mx{transition:none;transform:none}}
/* at scan the swatches are the whole point, so they stay while the prose drops */
body[data-depth="scan"] .mxline{display:none}
/* prototype-site link inside case studies */
.protolink{margin:26px 0}
.protolink a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--hair);background:var(--card);border-radius:99px;padding:12px 22px;font-size:14px;font-weight:600;letter-spacing:.02em;transition:all .3s var(--ease)}
.protolink a:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(20,20,18,.3)}
.protolink a i{font-style:normal;color:var(--acc)}

/* map view button, top right */
.mapbtn{display:flex;align-items:center;background:var(--card);border:1px solid var(--hair);border-radius:99px;padding:11px 16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;transition:all .3s var(--ease);white-space:nowrap}
.mapbtn:hover{color:var(--acc);border-color:var(--acc)}
/* annotated-resume inline link */
.alink{color:var(--acc);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* media-left band: image column left, content right, height capped by the text */
.band.medialeft{grid-template-columns:5fr 7fr}
.band.medialeft>div:first-child{order:2}
.band.medialeft .vis{order:1;align-self:stretch;display:flex}
.band.medialeft .vis img{height:100%;object-fit:cover}
/* horizontal-split hero tile at read: image left, content right */
body[data-depth="read"] .tile.hsplit{display:grid;grid-template-columns:42% 1fr;column-gap:24px;grid-auto-rows:min-content}
body[data-depth="read"] .tile.hsplit>*{grid-column:2}
body[data-depth="read"] .tile.hsplit .timg{grid-column:1;grid-row:1/span 6;margin:0;height:100%}
body[data-depth="read"] .tile.hsplit .timg img{height:100%!important;object-fit:cover}

/* recommendation cards */
.rec blockquote{margin:0;font-size:15px;line-height:1.65;color:var(--body)}
.rec figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted);margin-top:auto}
.rec figcaption b{color:var(--ink);font-size:14px}
.rec figcaption a{color:var(--acc);width:max-content}

/* ── v4 · FIVE-STOP TONAL RAMP (2026-08-07, Steven-directed:
   "go from white, to the off white, to the bone, to another color, then black at the very end")
   1 hero #FFFFFF · 2 items #F7F6F1 · 3 impact #EFEFE7 · 4 worked-with + recs #DCD7C9 · 5 footer #141412
   Steps measured at 1.082 / 1.068 / 1.244 / 12.83 — the literal #FDFDFB second stop was dropped
   because #FFFFFF->#FDFDFB is 1.018 (invisible) and the ramp stalled before it started.
   Surface model taken from portfolio-site-white-preview: tiles are FLAT, no category washes,
   so the ramp is the only colour system on the page.
   NOTE: clip-path creates a containing block — an absolutely-positioned child of a banded
   section cannot escape it. Delete this block to revert. */
body{background:var(--layer-0)}
header{background:color-mix(in srgb,var(--layer-0) 88%,transparent)}
[data-surface]{position:relative;z-index:0}
[data-surface="0"]{background:var(--layer-0);box-shadow:0 0 0 100vw var(--layer-0);clip-path:inset(0 -100vw)}
[data-surface="1"]{background:var(--layer-1);box-shadow:0 0 0 100vw var(--layer-1);clip-path:inset(0 -100vw);padding-top:44px;padding-bottom:60px}
[data-surface="2"]{background:var(--layer-2);box-shadow:0 0 0 100vw var(--layer-2);clip-path:inset(0 -100vw);padding:52px 0}
[data-surface="3"]{background:var(--layer-3);box-shadow:0 0 0 100vw var(--layer-3);clip-path:inset(0 -100vw);padding:52px 0}
[data-surface="inverse"]{background:var(--surface-inverse);box-shadow:0 0 0 100vw var(--surface-inverse);clip-path:inset(0 -100vw);
  color:var(--text-inverse);padding:52px 0 44px;margin-top:0}
[data-surface="inverse"] .cap,[data-surface="inverse"] .foot .cap{color:var(--muted-inverse)}
[data-surface="inverse"] a{color:var(--text-inverse)}
[data-surface="inverse"] a:hover{color:var(--acc-inverse)}
[data-surface="inverse"] .links a{border-color:color-mix(in srgb,var(--text-inverse) 30%,transparent)}
/* white-preview surface model: flat tiles, the ramp carries all the colour */
.tile[data-cat~="work"],.tile[data-cat~="about"],.tile[data-cat~="side"]{background:#FFFFFF}
@media print{[data-surface]{box-shadow:none;clip-path:none}}

/* ── v4 · REAL SCREENS (2026-08-08). Quoc 08-07: "I'm not seeing a user interface
   designer yet, until I start seeing some screenshots." Tile slots now carry framed
   product screens; the illustrations stay as .bimg backdrops only.
   Delete this block and revert the index.html img srcs to hero-*.webp to undo. */
.shot{margin:0;border-top:1px solid var(--hair)}
.shot img{width:100%;display:block;opacity:1}
.shot figcaption{font-size:calc(12.5px*var(--fs,1));letter-spacing:.01em;color:var(--muted);
  padding:10px 18px 16px;line-height:1.45}
.vis .shot:first-of-type{border-top:1px solid var(--hair)}
@media print{.shot figcaption{color:#555}}

/* ── v4 · SCREENS/DRAWINGS TOGGLE (2026-08-08). Steven: "let's have a toggle to switch
   between them and the illustrations." Mirrors the .depth control. Tile crops are pinned
   top-left so the product logo and headline survive at every tile width. */
body[data-tileimg="shot"] .tile .timg img[data-shot]{object-position:left top}
.imgtog{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--hair);
  border-radius:99px;padding:4px;margin-left:10px;vertical-align:middle}
.imgtog button{border:0;background:transparent;font:inherit;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:7px 13px;border-radius:99px;cursor:pointer;
  transition:all .3s var(--ease)}
.imgtog button.on{background:var(--acc);color:#fff}
.imgtog button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
@media (max-width:560px){.imgtog{margin-left:0}}

/* ── MERGE 2026-08-08 · re-applied after the imagery pass overwrote them ─────
   Appended deliberately AFTER the REAL SCREENS and TOGGLE blocks so source order
   favours these rules. Nothing here touches .timg/.shot/.imgtog internals.
   .fbar keeps THEIR display:flex and THEIR 24px spacing — margin becomes padding
   only so the band paints behind the Filters row and the Screens/Drawings toggle. */
.fbar{margin-top:0;padding-top:24px;padding-bottom:4px}
[data-surface="1"].bento{padding-top:24px}
[data-surface="1"].dossier{padding-top:8px;padding-bottom:56px}
/* category colour hints. hover pop MUST stay last or the cascade eats it */
.tile{transition-property:transform,box-shadow,opacity,border-color,border-inline-start-width}
.tile[data-cat~="work"]{border-inline-start:3px solid var(--cat-work)}
.tile[data-cat~="about"]{border-inline-start:3px solid var(--cat-about)}
.tile[data-cat~="side"]{border-inline-start:3px solid var(--cat-side)}
.bento .tile:hover{border-inline-start-width:10px}
/* 4d · hide in plain sight. Surface recedes, type does not: --muted fails AA below .84 */
.quiet .mx{transition:filter .45s var(--ease)}
.quiet .go{transition:opacity .35s var(--ease)}
body[data-depth="scan"] .quiet{border-inline-start-color:var(--hair)}
body[data-depth="scan"] .quiet .mx{filter:grayscale(1)}
body[data-depth="scan"] .quiet .go{opacity:0}
body[data-depth="scan"] .quiet:hover,body[data-depth="scan"] .quiet:focus,
body[data-depth="scan"] .quiet:focus-within{border-inline-start-color:var(--cat-side)}
body[data-depth="scan"] .quiet:hover .mx,body[data-depth="scan"] .quiet:focus .mx,
body[data-depth="scan"] .quiet:focus-within .mx{filter:none}
body[data-depth="scan"] .quiet:hover .go,body[data-depth="scan"] .quiet:focus .go,
body[data-depth="scan"] .quiet:focus-within .go{opacity:1}
@media(prefers-reduced-motion:reduce){.quiet .mx,.quiet .go{transition:none}}
/* footer: the retired "Elsewhere" icons, stacked. 92px reserves the floating dock's
   lane — it clipped Instagram/Resume at 1280px, found by hit-testing not by eye */
.foot{align-items:flex-start}
.foot .links{flex-direction:column;gap:14px}
.foot .links a{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.foot .links a svg{width:15px;height:15px;flex:none}
.foot .links a:hover{color:var(--acc-inverse)}
@media(min-width:701px){.foot{padding-right:92px}}
@media(max-width:700px){.foot{flex-direction:column;gap:26px}}
@media print{[data-surface]{box-shadow:none;clip-path:none}}

/* Screen-reader-only. Clip, never display:none — hidden content must stay in the
   accessibility tree and in the DOM for crawlers. KILL-LIST spec, 2026-08-08. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================================
   v5 — 2026-08-13. Two-page architecture: curated home + work index.
   Home drops from 16 tiles to 4 blocks; work.html carries every project with
   three view modes and two layers of filter chips.
   Source: 2026-08-13-portfolio-v5-plan.md · review constitution 2026-08-13.
   ========================================================================== */

/* --- shared: primary nav ------------------------------------------------- */
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:1.5px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc)}

/* --- home block 2: the quote that opens the About door ------------------- */
.hq{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:var(--vsp) 0}
.hq figure{margin:0;max-width:30em}
.hq blockquote{margin:0;font-family:'Instrument Serif',serif;font-size:clamp(22px,2.7vw,33px);line-height:1.34;letter-spacing:-.01em;color:var(--ink)}
.hq figcaption{margin-top:18px;display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.hq figcaption b{font-weight:600}
.hq figcaption span{color:var(--muted)}
.hqgo{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:4px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.hqgo i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.hqgo:hover{color:var(--acc);border-color:var(--acc)}
.hqgo:hover i{transform:translateX(6px)}

/* --- home block 3: the two featured case studies ------------------------- */
.feat{display:grid;gap:20px;padding:var(--vsp) 0}
.fx{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card,20px);padding:26px;text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s var(--ease)}
.fx:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--acc) 40%,var(--hair));box-shadow:0 3px 6px -2px rgba(20,20,18,.14),0 14px 26px -12px rgba(20,20,18,.2),0 32px 60px -24px rgba(20,20,18,.26)}
.fx:nth-child(even){grid-template-columns:.95fr 1.05fr}
.fx:nth-child(even) .fximg{order:2}
.fximg{display:block;border-radius:14px;overflow:hidden;background:var(--layer-2)}
.fximg .timg{display:block;margin:0}
.fximg img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;
  /* v5.9c: the tile shots are built with logo + headline anchored top-left; the
     default centre crop amputated the left edge on the homepage cards. Same rule
     as the v4 toggle fix (body[data-tileimg=shot] ... object-position:left top). */
  object-position:left top}
.fxbody{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.fxbody h2{font-size:clamp(23px,2.5vw,32px);line-height:1.16;font-weight:600;letter-spacing:-.015em;margin:12px 0 12px}
.fxout{font-size:calc(16px*var(--fs,1));color:var(--body);margin:0 0 20px;max-width:34em}
.fxbody .go{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.fxbody .go i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.fx:hover .go i{transform:translateX(6px)}

/* client attribution — Kat + Greg, 2026-08-13: name the client, show the mark */
.climine{display:flex;align-items:center;gap:9px;margin-top:12px;min-height:22px}
.climark img{height:18px;width:auto;display:block}
.cliname{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.tile .climine{margin-top:10px}

/* --- home block 4: the one button --------------------------------------- */
.allwork{display:flex;flex-direction:column;align-items:center;gap:14px;padding:var(--vsp) 0 calc(var(--vsp) + 12px);text-align:center}
.bigbtn{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--layer-0);background:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:17px 38px;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.bigbtn i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.bigbtn:hover{transform:translateY(-3px);background:var(--acc);border-color:var(--acc);box-shadow:0 10px 26px -12px color-mix(in srgb,var(--acc) 70%,transparent)}
.bigbtn:hover i{transform:translateX(6px)}
.awsub{font-size:13.5px;color:var(--muted);margin:0}

/* --- work.html: toolbar -------------------------------------------------- */
.wtools{padding:22px 0 26px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:14px}
.wrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wspace{flex:1 1 auto}
.wlab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;min-width:62px}
.wchips{display:flex;gap:8px;flex-wrap:wrap}
.wchip{font:inherit;font-size:13px;font-weight:500;color:var(--body);background:var(--layer-0);border:1px solid var(--hair);border-radius:999px;padding:7px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.wchip .wn{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.wchip:hover{border-color:var(--ink);color:var(--ink)}
.wchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--layer-0)}
.wchip[aria-pressed="true"] .wn{color:color-mix(in srgb,var(--layer-0) 70%,transparent)}
.viewsw{display:inline-flex;border:1px solid var(--hair);border-radius:999px;overflow:hidden;background:var(--layer-0)}
.viewsw button{font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);background:none;border:0;padding:8px 16px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.viewsw button+button{border-left:1px solid var(--hair)}
.viewsw button:hover{color:var(--ink)}
.viewsw button.on{background:var(--ink);color:var(--layer-0)}
.wcount{font-size:13px;color:var(--muted);margin:2px 0 0}
.wempty{text-align:center;padding:60px 0;color:var(--muted);font-size:15px}
.wempty button{font:inherit;font-size:15px;color:var(--acc);background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;padding:0 0 2px;margin-left:6px}

/* --- work.html: the three views ----------------------------------------- */
.wgrid{padding:8px 0 var(--vsp)}
.wgrid .tile.hidden{display:none}

/* gallery (default) — first project leads, rest uniform */
.wgrid[data-view="bento"]{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-auto-flow:dense}
.wgrid[data-view="bento"] .tile:first-child{grid-column:span 2}

/* large — one per row, image carries it */
.wgrid[data-view="hero"]{display:grid;grid-template-columns:1fr;gap:22px}
.wgrid[data-view="hero"] .tile{min-height:0;padding:0;flex-direction:column;border-radius:var(--r-card,20px)}
.wgrid[data-view="hero"] .tile .timg{display:block;width:100%;margin:0}
.wgrid[data-view="hero"] .tile .timg img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}
.wgrid[data-view="hero"] .tile .cap,
.wgrid[data-view="hero"] .tile .climine,
.wgrid[data-view="hero"] .tile h2,
.wgrid[data-view="hero"] .tile .pdo,
.wgrid[data-view="hero"] .tile .go{padding-left:30px;padding-right:30px}
.wgrid[data-view="hero"] .tile .cap{padding-top:26px}
.wgrid[data-view="hero"] .tile h2{font-size:clamp(24px,2.8vw,36px);max-width:20em}
.wgrid[data-view="hero"] .tile .go{padding-bottom:28px}
.wgrid[data-view="hero"] .tile .pdo span:not(:first-child){display:none}

/* list — highest density, no images */
.wgrid[data-view="list"]{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hair)}
.wgrid[data-view="list"] .tile{min-height:0;background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:20px 4px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 26px;box-shadow:none;grid-column:span 1}
.wgrid[data-view="list"] .tile:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--acc) 4%,transparent)}
.wgrid[data-view="list"] .tile::after{display:none}
.wgrid[data-view="list"] .tile .timg{display:none}
.wgrid[data-view="list"] .tile .cap{grid-row:1;grid-column:2;justify-self:end;text-align:right}
.wgrid[data-view="list"] .tile .climine{display:none}
.wgrid[data-view="list"] .tile h2{grid-row:1;grid-column:1;margin:0;font-size:clamp(17px,1.7vw,21px);line-height:1.3}
.wgrid[data-view="list"] .tile .pdo{grid-row:2;grid-column:1;margin:0}
.wgrid[data-view="list"] .tile .pdo span:not(:first-child){display:none}
.wgrid[data-view="list"] .tile .pdo b{display:none}
.wgrid[data-view="list"] .tile .go{grid-row:2;grid-column:2;justify-self:end;margin:0;white-space:nowrap}

/* the work page never inherits homepage depth state */
body.p-work .wgrid,body.p-work .bento{display:grid}
body.p-work .tile .pdo{display:grid}
body.p-work .dossier{display:none}

@media(max-width:900px){
 .fx,.fx:nth-child(even){grid-template-columns:1fr;gap:20px}
 .fx:nth-child(even) .fximg{order:0}
 .wgrid[data-view="bento"]{grid-template-columns:repeat(2,1fr)}
 .wgrid[data-view="bento"] .tile:first-child{grid-column:span 2}
}
@media(max-width:620px){
 .wgrid[data-view="bento"]{grid-template-columns:1fr}
 .wgrid[data-view="bento"] .tile:first-child{grid-column:span 1}
 .wlab{min-width:auto;width:100%}
 .wgrid[data-view="list"] .tile{grid-template-columns:1fr}
 .wgrid[data-view="list"] .tile .cap,.wgrid[data-view="list"] .tile .go{grid-column:1;justify-self:start;text-align:left}
}
@media(prefers-reduced-motion:reduce){
 .fx,.bigbtn,.wchip,.viewsw button{transition:none}
 .fx:hover,.bigbtn:hover{transform:none}
}

/* list + large views: only the four canonical parts of a row.
   Some tiles carry extra furniture (the 256-matrix swatch row, secondary
   paragraphs); it belongs in gallery, not in a scan-density list. */
.wgrid[data-view="list"] .tile > *:not(.cap):not(h2):not(.pdo):not(.go){display:none}
.wgrid[data-view="hero"] .tile > *:not(.cap):not(h2):not(.pdo):not(.go):not(.timg):not(.climine){display:none}

/* ============================================================================
   v5.1 — 2026-08-15.
   · Left rail on case studies (Ben Shih pattern; steal-backlog item #2)
   · Two reading levels, Scan / Read (Quoc, Greg, Chiu — three sources)
   · Wider type-scale disparity (Quoc: "12-point baseline, 30 is the hero size")
   ========================================================================== */

/* --- on-this-page rail --------------------------------------------------- */
.csrail{max-width:var(--maxw);margin:0 auto 26px;background:var(--card);
  border:1px solid var(--hair);border-radius:16px;padding:18px 16px}
.csrail .cap{display:block;margin-bottom:12px;font-size:10.5px}
.csrail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.csrail a{display:flex;gap:9px;align-items:baseline;text-decoration:none;color:var(--muted);
  font-size:13px;line-height:1.35;padding:7px 9px;border-radius:9px;
  transition:color .25s var(--ease),background .25s var(--ease)}
.csrail a:hover{color:var(--ink);background:color-mix(in srgb,var(--acc) 6%,transparent)}
.csrail a.on{color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--acc) 10%,transparent)}
.csrail .rnum{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted);flex:none;padding-top:1px}
.csrail a.on .rnum{color:var(--acc)}
/* In flow by default — a horizontal chip row above the content.
   It only floats into the gutter when the gutter can actually hold it:
   rail 186 + 24 gap on each side means the viewport must clear maxw + 420.
   Getting this wrong is how the rail ended up sitting on top of the h1. */
.csrail ul{flex-direction:row;flex-wrap:wrap;gap:4px}
.csrail a{font-size:12.5px;padding:6px 10px;border:1px solid var(--hair)}
@media(min-width:calc(1200px + 420px)){
  .csrail{position:fixed;top:120px;left:calc((100vw - var(--maxw))/2 - 210px);
    width:186px;margin:0;z-index:20}
  .csrail ul{flex-direction:column;gap:2px}
  .csrail a{font-size:13px;padding:7px 9px;border:0}
}
@media(max-width:620px){ .csrail{border-radius:12px;padding:14px} }

/* --- type-scale disparity ------------------------------------------------
   Quoc: "Normally people will go, like, 12, 14, 12... His is, like, 12-point is
   the baseline and 30 is the hero size... the big text looks really big, because
   there's smaller text next to it."  Answers Kat's open "is it typographic
   contrast?" — the eyebrow gets genuinely small so the h1 reads genuinely big. */
.hero .cap{font-size:11px;letter-spacing:.2em}
.hero h1{letter-spacing:-.035em;line-height:1.02}
.hq figcaption{font-size:12.5px}
.fxbody .cap{font-size:10.5px;letter-spacing:.2em}

/* ============================================================================
   v5.2 — 2026-08-15
   · The homepage quote block is gone; its pull-quote treatment moves to About,
     where the recommendations now sit at the very bottom of the page.
   · The custom cursor is disabled in app.js — it eased toward the real pointer
     and read as input lag.
   ========================================================================== */

.recwall{padding:var(--vsp) 0 calc(var(--vsp) + 16px)}
.recwall > .cap{display:block;margin-bottom:10px}
.recwall > h2{font-size:clamp(24px,2.8vw,36px);margin:12px 0 34px;letter-spacing:-.02em}
.recwall .rec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:38px 56px}

/* the .hq treatment Steven liked: serif, large, generous, no card chrome */
.recwall .rec{margin:0;display:flex;flex-direction:column;gap:0;
  background:none;border:0;padding:0;box-shadow:none}
.recwall .rec blockquote{margin:0;font-family:'Instrument Serif',serif;
  font-size:clamp(19px,1.65vw,25px);line-height:1.36;letter-spacing:-.01em;color:var(--ink)}
.recwall .rec figcaption{margin-top:16px;display:flex;flex-direction:column;gap:3px;font-size:13px}
.recwall .rec figcaption b{font-weight:600;color:var(--ink)}
.recwall .rec figcaption span{color:var(--muted)}
.recwall .rec figcaption a{margin-top:4px;align-self:flex-start;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);
  text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:3px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.recwall .rec figcaption a:hover{color:var(--acc);border-color:var(--acc)}
@media(max-width:820px){ .recwall .rec-grid{grid-template-columns:1fr;gap:34px} }

/* v5.3 — the hero band was 88px above the content and 48px below: visibly
   top-heavy at nearly 2:1. Now one token, applied to both sides, so it cannot
   drift apart again. Steven, 2026-08-15: "spacing above and below it. Should be even." */
.hero{padding-top:var(--hero-pad);padding-bottom:var(--hero-pad)}
/* work.html and the case studies had inline padding-bottom overrides that
   re-broke the symmetry — neutralised here rather than edited per page. */
.p-work .hero[style],
body:not(.p-home) .hero[style]{padding-bottom:var(--hero-pad)!important}
@media(max-width:620px){ :root{--hero-pad:52px} }


/* ── v5.5 · recommendations carousel (2026-08-20) ────────────────────────────
   Steven: "Run it at 15 seconds. Above the pause feature should be a timer in
   the shape of a circle that will complete in 15 seconds."
   All four slides live in the DOM permanently — the track translates, nothing
   is display:none'd, so crawlers and agents read the full set. WCAG 2.2.2
   (Pause, Stop, Hide, Level A) is satisfied by the explicit pause control:
   anything auto-moving past 5s must be stoppable, and this runs at 15s. */
/* v5.7 — clip 2px off the right edge: the next slide's opening quote mark
   bleeds 1px of ink across the track boundary (negative side bearing in
   Instrument Serif). No absolutely-positioned children here, so the
   clip-path containing-block gotcha does not apply. */
.rcaro{position:relative;overflow:hidden;padding-top:14px;clip-path:inset(0 2px 0 0)}
.rcaro-track{display:flex;transition:transform .62s var(--ease,cubic-bezier(.22,.61,.36,1));will-change:transform}
.rcaro .rec{flex:0 0 100%;min-width:0;background:none;border:0;border-radius:0;padding:0}
/* v5.5c — the measure was the problem: the quote ran the full 1152px column,
   against a readable 45-75 characters per line. Leading opened too.
   v5.7 (2026-08-27) — the 30em cap set in v5.5c was measured in a fallback
   serif; in Instrument Serif it held ~90 characters per full line. 23em is
   65-70 on the real font, at every desktop width (em scales with the clamp). */
.rcaro .rec blockquote{margin:0;font-family:'Instrument Serif',serif;
  font-size:clamp(21px,2.15vw,31px);line-height:1.54;letter-spacing:-.01em;
  max-width:23em;text-wrap:pretty}
.rcaro .rec figcaption{margin-top:30px;display:flex;flex-direction:column;gap:4px;font-size:13px}

/* the control bar — v5.5b: the ring is CONCENTRIC with the pause button rather
   than stacked above it. One 46px control instead of a 77px column: the timer
   costs no vertical space of its own, and the thing being timed and the thing
   that stops it are the same object. */
.rcaro-bar{display:flex;align-items:center;gap:20px;margin-top:46px}
.rcaro-timer{position:relative;width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center}
.rcaro-ring{position:absolute;inset:0;width:46px;height:46px;display:block;pointer-events:none}
.rcaro-ring circle{fill:none;stroke-width:2.2}
.rcaro-ring .bg{stroke:var(--hair)}
.rcaro-ring .fg{stroke:var(--acc);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
/* no border on the button: the ring's grey track is the only circle, so the
   control reads as one object rather than three concentric strokes */
.rcaro-pp{width:34px;height:34px;padding:0;border:0;background:var(--card);
  border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);
  transition:background .3s,color .3s}
.rcaro-pp:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--card))}
.rcaro-pp svg{width:13px;height:13px}
.rcaro-count{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* prev and next flank the position markers as one navigation group */
.rcaro-nav{display:flex;align-items:center;gap:16px;margin-left:auto}
.rcaro-arw{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--card);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);
  transition:background .3s,color .3s}
.rcaro-arw:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--card))}
.rcaro-arw svg{width:15px;height:15px}
.rcaro-arw:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.rcaro-dots{display:flex;gap:8px}
.rcaro-dots button{width:28px;height:3px;padding:0;border:0;border-radius:2px;background:var(--hair);
  cursor:pointer;transition:background .3s}
.rcaro-dots button[aria-selected="true"]{background:var(--ink)}
.rcaro-dots button:focus-visible,.rcaro-pp:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

@media(max-width:820px){
 .rcaro .rec blockquote{font-size:clamp(19px,4.4vw,24px)}
 .rcaro-bar{gap:14px}
 .rcaro-dots{gap:6px}.rcaro-dots button{width:20px}
 /* the ring must not shrink below the 34px button it encircles */
 .rcaro-timer{width:44px;height:44px;flex:0 0 44px}
 .rcaro-ring{width:44px;height:44px}
}
/* Reduced motion: no track animation. The runtime also refuses to autoplay,
   so the carousel degrades to a manually-paged block with no movement. */
@media(prefers-reduced-motion:reduce){
 .rcaro-track{transition:none}
}

/* v5.5c · narrow viewports — the arrows stay, the measure follows the column */
@media(max-width:820px){
 .rcaro .rec blockquote{max-width:none}
 .rcaro .rec figcaption{margin-top:24px}
 .rcaro-bar{margin-top:34px;gap:12px}
 .rcaro-nav{gap:10px}
}

/* v5.6 · the breadcrumb now lives inside the footer, on the dark band */
.fcrumbs{max-width:var(--maxw);margin:0 auto;padding:32px 24px 0}
[data-surface="inverse"] .crumbs{color:var(--muted-inverse)}
[data-surface="inverse"] .crumbs a{color:var(--muted-inverse)}
[data-surface="inverse"] .crumbs a:hover{color:var(--acc-inverse)}
[data-surface="inverse"] .crumbs b{color:var(--text-inverse)}
[data-surface="inverse"] .crumbs .sep{color:var(--acc-inverse)}
footer .foot{padding-top:34px;padding-bottom:44px}
footer .fcrumbs + .foot{padding-top:26px}
@media(max-width:820px){.fcrumbs{padding:26px 20px 0}}


/* ── v5.8 · 2026-08-27 ──────────────────────────────────────────────────────
   CTA band lifted VERBATIM from home.html (Steven's 2026-08-04 voice-pass
   copy; home.html itself untouched, still held). Full-bleed via the same
   box-shadow + clip-path pattern as [data-surface]; no absolutely-positioned
   children, so the containing-block gotcha does not apply. */
.cta{position:relative;z-index:0;background:var(--acc);box-shadow:0 0 0 100vw var(--acc);
  clip-path:inset(0 -100vw);color:#fff;margin-top:96px;padding:96px 0}
.cta h2{font-size:clamp(32px,4.4vw,54px);font-weight:600;letter-spacing:-.02em}
.cta h2 em{color:#fff}
.cta p{margin-top:16px;color:#D7DAFF;max-width:34em;font-size:18px}
.cta .btn{display:inline-block;margin-top:34px;background:#fff;color:var(--acc);border-radius:99px;
  padding:16px 30px;font-size:14px;font-weight:600;letter-spacing:.04em;transition:all .3s var(--ease)}
.cta .btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px rgba(10,6,80,.55)}
@media(max-width:620px){ .cta{margin-top:64px;padding:64px 0} }

/* v5.8 · T1 close-out — at small widths the hero h1 bottoms out at 22px over
   an 11px eyebrow: 2.0x, under the >=2.2 acceptance in the 08-15 plan
   (desktop measures 2.82x and passes). Per Quoc the small stuff gets
   genuinely small; the h1 does not inflate. 10px uppercase at .18em tracking,
   #615D54 on white is 6.0:1 — AA holds. */
@media(max-width:900px){ .hero .cap{font-size:10px} }

/* ── v5.8b · 2026-08-27 — Steven: "why not expand the See all work to be larger
   instead of so tiny and with a white band below it?"
   The white band was .cta's margin-top:96px, inherited verbatim from the
   all-white home.html where a margin is invisible. Between two painted bands
   it let the page ground show through. The accent band now meets the beige
   allwork band directly, and the button scales up to hold its band. */
.cta{margin-top:0}
.bigbtn{font-size:18px;padding:22px 52px;gap:14px}
@media(max-width:620px){ .cta{margin-top:0} .bigbtn{font-size:16px;padding:19px 42px} }