:root{
  --void:#05060a; --ink:#0a0a0a; --ink-2:#141414;
  --paper:#f4f1ea; --paper-dim:#cfc8b8; --bone:#a8a194; --dimmer:#5d5a52;
  --rust:#b85c2c; --brass:#c9a96e;
  --hal:#ff2f18; --halglow:#e01d06; --pupil:#ffeab0; --amber:#e8a33d;
  --line:rgba(244,241,234,.16);
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --grot:'Inter',system-ui,sans-serif;
  --tight:'Inter Tight','Inter',system-ui,sans-serif;
  --gut:clamp(18px,3.4vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--paper);font:300 clamp(0.98rem,0.92rem + 0.2vw,1.08rem)/1.62 var(--grot);letter-spacing:-.0075em;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
::selection{background:var(--rust);color:var(--paper)}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
img{height:auto}   /* S5 (2026-10-11): the width/height attributes the build injects are an aspect-ratio hint only */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hatch{display:inline-block;width:1em;height:1em;color:var(--rust);vertical-align:-.1em}
.hatch svg{width:100%;height:100%;display:block;fill:currentColor}

/* -- the film: fixed, full-bleed, under everything -------------------------- */
.film{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--void)}
.film video,.film img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.62) saturate(.85) contrast(1.08);transform:scale(1.03)}
.film img.poster{z-index:0}
.film video{z-index:1;opacity:0;transition:opacity 1.2s ease}
.film video.on{opacity:1}
/* haze: two slow fogs, screen-blended, blurred, drifting against each other */
/* haze (Rhoden, TASTE-BRIEF s2): warm-neutral only, blue banned, soft-light, no layer above .35, 90-130 s loops read as weather */
.fog{position:absolute;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:soft-light;filter:blur(40px)}
.fog.a{background:radial-gradient(45% 35% at 20% 30%,rgba(138,74,38,.22) 0%,transparent 70%),
       radial-gradient(55% 45% at 80% 70%,rgba(10,8,6,.30) 0%,transparent 70%);animation:fogA 90s ease-in-out infinite alternate}
.fog.b{background:radial-gradient(40% 30% at 60% 15%,rgba(201,169,110,.14) 0%,transparent 70%),
       radial-gradient(50% 40% at 30% 80%,rgba(138,74,38,.16) 0%,transparent 70%);animation:fogB 130s ease-in-out infinite alternate-reverse}
@keyframes fogA{from{transform:translate(-4%,-2%) scale(1)}to{transform:translate(3%,4%) scale(1.08)}}
@keyframes fogB{from{transform:translate(2%,3%) scale(1.04)}to{transform:translate(-3%,-3%) scale(1)}}
.grain{position:absolute;inset:-10%;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 0.86 0 0 0 .55 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");background-size:220px 220px;animation:grain .5s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.vignette{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,transparent 45%,#0a0806 105%);opacity:.55}
.scrim{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,10,.42) 0%,rgba(5,6,10,.10) 38%,rgba(5,6,10,.28) 70%,rgba(5,6,10,.82) 100%)}
/* the page darkens the film as you read, so the story bands stay legible over motion */
.film::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--void);opacity:var(--dim,0);transition:opacity .25s linear}

/* -- corner furniture (Igloo): wordmark TL, manifesto TR, scroll BL, film BR -- */
.corner{position:fixed;z-index:20;font:400 clamp(10px,.62vw + 8px,11px)/1.7 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--paper-dim)}
@media(min-width:1024px){.c-bl,.c-br,.wordmark small{font-size:9.5px}}
.corner a{border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.corner a:hover{color:var(--paper);border-bottom-color:var(--brass)}
.corner::before{content:"";position:absolute;inset:-90px;z-index:-1;pointer-events:none;filter:blur(18px)}
.c-tl{top:var(--gut);left:var(--gut)}.c-tl::before{background:radial-gradient(ellipse at 30% 30%,rgba(8,6,4,.70),transparent 68%)}
.c-tr{top:var(--gut);right:var(--gut);max-width:min(34ch,38vw);text-align:right;text-transform:none;letter-spacing:.01em;
  font:300 12.5px/1.6 var(--grot);color:var(--paper-dim)}
.c-tr::before{background:radial-gradient(ellipse at 70% 30%,rgba(8,6,4,.70),transparent 68%)}
.c-bl{bottom:var(--gut);left:var(--gut)}.c-bl::before{background:radial-gradient(ellipse at 30% 70%,rgba(8,6,4,.70),transparent 68%)}
.c-br::before{background:radial-gradient(ellipse at 70% 70%,rgba(8,6,4,.70),transparent 68%)}
.c-br{bottom:var(--gut);right:var(--gut);display:flex;gap:16px;align-items:center}
.wordmark{display:flex;align-items:center;gap:12px;font:300 14px/1 var(--tight);letter-spacing:.42em;text-transform:uppercase;color:var(--paper)}
.wordmark .hatch{font-size:15px}
.wordmark small{display:block;margin-top:7px;font:400 9px/1 var(--mono);letter-spacing:.3em;color:var(--bone)}
.wordmark b{font-weight:300;color:var(--rust)}
button.tog{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
button.tog i{width:14px;height:4px;background:#232323;display:inline-block;transition:background .2s,box-shadow .2s}
button.tog.on i{background:var(--amber);box-shadow:0 0 8px rgba(232,163,61,.7)}
@media(max-width:760px){.c-tr{display:none}.c-bl{display:none}.corner{font-size:9px;letter-spacing:.22em}}

/* -- content over the film ------------------------------------------------- */
main{position:relative;z-index:10}
.band{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--gut) + 64px) var(--gut)}
.band--hero{justify-content:flex-end;padding-bottom:calc(var(--gut) + 56px)}
.label{font:400 10px/1.7 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:10px;margin-bottom:22px}
.label .hatch{font-size:11px}
h1{font:200 clamp(1.7rem,1rem + 2.6vw,3.6rem)/1.06 var(--tight);letter-spacing:.19em;text-transform:uppercase;max-width:22ch;color:var(--paper)}
h1 em{font-style:normal;font-weight:300;color:var(--brass)}
.hero-line{margin-top:22px;max-width:44ch;font:300 clamp(15px,1.2vw,18px)/1.5 var(--grot);color:var(--paper-dim)}
h2{font:200 clamp(22px,2.8vw,40px)/1.12 var(--tight);letter-spacing:.005em;color:var(--paper);max-width:24ch}
h2 em{font-style:normal;color:var(--brass);font-weight:300}
.col{max-width:52ch}
.story{display:grid;gap:clamp(28px,4vw,48px);max-width:60ch}
.beat{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:baseline}
.beat .k{font:400 9px/1.9 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--dimmer)}
.beat p{font-size:16.5px;line-height:1.62;color:var(--paper)}
.beat.limits p,.beat.proof p{color:var(--paper-dim)}
.beat.future p{font-family:var(--tight);font-weight:200;font-size:clamp(19px,2vw,26px);line-height:1.3;color:var(--paper)}
@media(max-width:560px){.beat{grid-template-columns:1fr;gap:6px}}

.make{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);max-width:960px;margin-top:34px}
.make div{background:rgba(5,6,10,.62);backdrop-filter:blur(10px);padding:22px 20px 24px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.make .n{font:400 9px/1 var(--mono);letter-spacing:.3em;color:var(--dimmer)}
.make h3{font:300 clamp(16px,1.5vw,20px)/1.2 var(--tight);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.make p{font-size:13.5px;line-height:1.6;color:var(--paper-dim)}
@media (max-width:760px){.make{grid-template-columns:1fr}}
.wont{list-style:none;max-width:52ch;margin-top:26px;border-top:1px solid var(--line)}
.wont li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--paper-dim);display:grid;grid-template-columns:22px 1fr;gap:12px}
.wont li::before{content:"\2014";color:var(--rust)}

.faq{max-width:64ch;margin-top:30px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font:300 clamp(15px,1.4vw,18px)/1.4 var(--tight);color:var(--paper);display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--brass);flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 18px;font-size:15px;line-height:1.65;color:var(--paper-dim);max-width:58ch}

/* -- the desk band + the eye ----------------------------------------------- */
.desk{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;max-width:820px}
.desk p{font-size:16px;color:var(--paper);max-width:40ch}
.desk .nevers{margin-top:18px;font:400 clamp(10px,.62vw + 8px,11px)/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);max-width:46ch}
.desk .nevers b{font-weight:400;color:var(--brass)}
@media(max-width:560px){.desk{grid-template-columns:1fr}}
.eye{position:relative;width:var(--eye,64px);aspect-ratio:1;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center;flex:0 0 auto}
.eye .bezel{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 42%,#15161a 0%,#0c0d10 58%,#070809 78%,#0e0f13 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 14px rgba(0,0,0,.9),0 12px 30px -14px #000;border:1px solid #191b21}
.eye .glass{position:absolute;inset:15%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--pupil) 0%,var(--pupil) 5%,#ffb24a 9%,var(--hal) 21%,var(--halglow) 44%,#6d0d02 74%,#2a0500 100%);
  box-shadow:0 0 14px 2px rgba(224,29,6,.36),inset 0 0 10px rgba(0,0,0,.55);filter:brightness(.62) saturate(1.05);transition:filter .3s,box-shadow .3s}
.eye .glass::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 44% 30% at 32% 22%,rgba(255,255,255,.16),transparent 70%)}
.eye .pupil{position:absolute;top:50%;left:50%;width:10%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#fffdf4 0%,#ffe9a8 34%,#ffc245 72%,#ff9b10 100%);box-shadow:0 0 6px 2px rgba(255,232,170,.55)}
.eye:hover .glass,.eye:focus-visible .glass,.eye.awake .glass{filter:none;box-shadow:0 0 26px 5px rgba(224,29,6,.42),inset 0 0 10px rgba(0,0,0,.55)}
.eye:focus-visible{outline:1px solid var(--amber);outline-offset:6px;border-radius:50%}
.eye-fixed{position:fixed;right:var(--gut);bottom:calc(var(--gut) + 30px);z-index:30;display:flex;align-items:center;gap:12px;--eye:48px;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
body.cbar-on .eye-fixed{transform:translateY(-96px)}
@media(max-width:640px){body.cbar-on .eye-fixed{transform:translateY(-190px)}}
.eye-fixed .t{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#787f8c;text-align:right}
@media(max-width:760px){.eye-fixed{bottom:calc(var(--gut) + 34px);--eye:44px}.eye-fixed .t{display:none}}

/* -- the desk panel: the live desk, framed --------------------------------- */
.panel{position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(460px,100vw);transform:translateX(102%);transition:transform .45s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.panel.on{transform:none;pointer-events:auto}
.panel .box{width:100%;height:100%;background:#05060a;border-left:1px solid #1c2029;display:flex;flex-direction:column;box-shadow:-30px 0 80px -30px #000}
.panel .is{padding:10px 16px;font:400 12.5px/1.5 var(--grot);color:#787f8c;border-bottom:1px solid #1c2029}
.panel .bar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #1c2029;
  font:400 9.5px/1.6 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:#4a515e}
.panel .bar b{display:block;font-weight:400;color:#e9e7e1;letter-spacing:.44em;font-size:12px}
.panel .bar button{background:none;border:1px solid #2a3040;color:#787f8c;font:300 20px/1 var(--grot);width:36px;height:36px;cursor:pointer;flex:0 0 auto}
.panel .bar button:hover{color:#e9e7e1;border-color:#787f8c}
.panel iframe{flex:1 1 auto;width:100%;border:0;background:var(--void)}
.panel .fall{display:none;padding:20px;font-size:14px;line-height:1.6;color:#787f8c;border-top:1px solid #1c2029}
.panel.dead .fall{display:block}
.panel .fall a{color:#e9e7e1;border-bottom:1px solid #2a3040}

/* -- contact + footer ------------------------------------------------------ */
.contact .mail{display:inline-block;margin-top:22px;font:300 clamp(20px,2.6vw,36px)/1.2 var(--tight);letter-spacing:.03em;color:var(--paper);border-bottom:1px solid var(--line);padding-bottom:6px}
.contact .mail:hover{color:var(--brass);border-bottom-color:var(--brass)}
.contact .two{display:flex;gap:28px;flex-wrap:wrap;margin-top:26px;font:400 10px/1.7 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--bone)}
.contact .two a:hover{color:var(--paper)}
footer{position:relative;z-index:10;padding:40px var(--gut) calc(var(--gut) + 46px);border-top:1px solid var(--line);background:rgba(5,6,10,.7);backdrop-filter:blur(12px);
  display:flex;flex-wrap:wrap;gap:16px 36px;justify-content:space-between;font:400 9.5px/1.8 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)}
footer a,footer button{color:var(--bone);background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0}
footer a:hover,footer button:hover{color:var(--paper)}
footer .row{display:flex;gap:22px;flex-wrap:wrap}
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px;max-width:900px}
.rooms>div{background:rgba(10,10,10,.66);backdrop-filter:blur(10px);padding:22px 20px 24px;display:flex;flex-direction:column;gap:12px;min-height:150px}
.rooms .n{font:400 9px/1 var(--mono);letter-spacing:.3em;color:var(--dimmer)}
.rooms h3{font:300 18px/1.2 var(--tight);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.rooms p{font-size:13.5px;line-height:1.6;color:var(--paper-dim)}
.rooms>div.has-tool{position:relative;outline:1px solid rgba(184,92,44,.55);outline-offset:-1px}
.rooms .roomtool{margin-top:auto;font:400 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--rust)}
.rooms .roomtool::after{content:'';position:absolute;inset:0}
.rooms>div.has-tool:hover{background:rgba(184,92,44,.12)}
.lede{margin-top:20px;max-width:54ch;font:300 clamp(15px,1.2vw,18px)/1.55 var(--grot);color:var(--paper-dim)}
.rooms-end{margin-top:34px;max-width:36ch;font:200 clamp(19px,2vw,28px)/1.25 var(--tight);color:var(--paper)}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px;max-width:1100px}
.doors a{background:rgba(5,6,10,.62);backdrop-filter:blur(10px);padding:22px 20px 24px;display:flex;flex-direction:column;gap:12px;min-height:150px;transition:background .3s}
.doors a:hover{background:rgba(184,92,44,.12)}
.doors .n{font:400 9px/1 var(--mono);letter-spacing:.3em;color:var(--dimmer)}
.doors h3{font:300 18px/1.2 var(--tight);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.doors p{font-size:13.5px;line-height:1.6;color:var(--paper-dim)}
.doors .d{font:400 9px/1 var(--mono);letter-spacing:.2em;color:var(--brass);margin-top:auto}

/* -- policy pages ---------------------------------------------------------- */
.doc{max-width:66ch;padding:calc(var(--gut) + 80px) var(--gut) 80px;position:relative;z-index:10}
.doc h1{font-size:clamp(26px,3.6vw,48px);letter-spacing:.04em}
.doc h2{font-size:clamp(18px,2vw,26px);margin:38px 0 12px}
.doc p,.doc li{font-size:15px;line-height:1.7;color:var(--paper-dim);margin:0 0 12px}
.doc table{border-collapse:collapse;width:100%;font-size:13.5px;margin:12px 0 20px}
.doc td,.doc th{border-top:1px solid var(--line);padding:10px 8px 10px 0;vertical-align:top;text-align:left;color:var(--paper-dim)}
.doc th{font:400 9.5px/1.6 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.doc code{font-family:var(--mono);font-size:12px;color:var(--paper)}
.doc a{color:var(--paper);border-bottom:1px solid var(--line)}

/* -- consent bar (Stillroom consent.js, restyled to the void) --------------- */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#0a0c12;border-top:1px solid #1c2029;padding:16px var(--gut);transform:translateY(101%);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.cbar.on{transform:none}
.cbar__in{max-width:1400px;margin:0 auto;display:flex;gap:clamp(16px,3vw,40px);align-items:flex-start;flex-wrap:wrap}
.cbar__t{flex:1 1 380px;font-size:13px;line-height:1.6;color:#787f8c;margin:0;max-width:80ch}
.cbar__t b{color:#e9e7e1;font-weight:400}
.cbar__btns{display:flex;gap:10px;flex:0 0 auto;padding-top:2px}
.cbar__b{font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:11px 18px;border:1px solid #2a3040;background:transparent;color:#787f8c;cursor:pointer;transition:.25s}
.cbar__b:hover{border-color:var(--amber);color:#e9e7e1}
.cbar__b:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media(max-width:640px){.cbar__btns{width:100%}.cbar__b{flex:1}}

@media(prefers-reduced-motion:reduce){.fog,.grain{animation:none}.film video{display:none}.film img.poster{display:block}}

/* -- inner pages ----------------------------------------------------------- */
body.inner main{min-height:calc(100vh - 150px)}
body.inner .film::after{opacity:calc(.42 + var(--dim,0))}
.pnav{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font:400 clamp(10px,.62vw + 8px,11px)/1.7 var(--mono);letter-spacing:.24em;text-transform:uppercase}
.pnav a{color:var(--paper-dim);border-bottom:1px solid transparent}
.pnav a:hover,.pnav a[aria-current]{color:var(--paper);border-bottom-color:var(--brass)}
@media(max-width:760px){.pnav{gap:12px;letter-spacing:.18em}}
.band--doc{min-height:0;padding-top:calc(var(--gut) + 140px);padding-bottom:calc(var(--gut) + 20px)}
.band--doc + .band--doc{padding-top:0}
.band--flow{max-width:66ch}
.band--doc h1{font-size:clamp(1.5rem,1rem + 1.9vw,2.6rem);max-width:26ch}
.lede{margin-top:18px;max-width:52ch;font:300 clamp(15px,1.1vw,17.5px)/1.55 var(--grot);color:var(--paper-dim)}
.sec{margin-top:40px;max-width:60ch}
.sec h2{font-size:clamp(18px,1.6vw,24px);margin-bottom:10px}
.sec p{color:var(--paper);font-size:16px;line-height:1.66}
.cta{margin-top:40px;font-size:16px;color:var(--paper)}
.cta a{border-bottom:1px solid var(--brass);color:var(--brass)}
.also{margin-top:22px;font:400 10px/1.8 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.also a{border-bottom:1px solid var(--line)}.also a:hover{color:var(--paper)}
.steps{list-style:none;counter-reset:s;max-width:60ch;margin-top:8px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps .n{font:400 10px/2 var(--mono);letter-spacing:.3em;color:var(--brass)}
.steps h3{font:300 18px/1.25 var(--tight);letter-spacing:.04em;color:var(--paper);grid-column:2}
.steps p{grid-column:2;font-size:15px;line-height:1.62;color:var(--paper-dim);margin-top:6px}
.band--flow h2{margin-top:48px;margin-bottom:14px;font-size:clamp(18px,1.6vw,24px)}
.band--flow .make{margin-top:8px}
.band--flow .make h3{font-size:15px}
.pieces{display:grid;gap:36px;max-width:820px;margin-top:8px}
.piece{border-top:1px solid var(--line);padding-top:18px}
.piece__film{width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.85) saturate(.9);margin-bottom:14px;border:1px solid var(--line);background:#000}
.piece h2{margin-top:0;font-size:clamp(17px,1.5vw,22px)}
.piece p{font-size:15px;line-height:1.62;color:var(--paper-dim);max-width:60ch;margin-top:8px}
.gloss{max-width:64ch;margin-top:8px;border-top:1px solid var(--line)}
.term{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:16px;align-items:baseline}
.term dt{font:300 16px/1.3 var(--tight);letter-spacing:.04em;color:var(--paper)}
.term dd{font-size:14.5px;line-height:1.6;color:var(--paper-dim)}
@media(max-width:560px){.term{grid-template-columns:1fr;gap:4px}}

/* ===== THE BRAND LAYER (Fred 2026-09-14: "use the brand guidelines and impose them") =====
   Source of truth: 03-Knowledge/STILLROOM/brand/BRAND-GUIDELINES.html, compiled 13 Sep 2026
   from the canonical build. This layer REPLACES the Igloo layer, which is deleted, not
   overridden - Igloo was a reference for one quality (small type, corner furniture) and it
   had taken the site somewhere the guidelines do not go. Section numbers below are the
   guidelines' own.

     s01  the hatch always spins or pulses. Igloo hid it on every label; it is back.
     s02  the ground is #0A0A0A - the actual black, not the blue-black #05060A and not the
          pale mist. The mist/slate tokens are gone. No green anywhere.
     s03  four faces, no more: Inter Tight, Inter, Space Mono, VT323. IBM Plex Mono was a
          fifth and is removed. Six Caps is loaded for s04 and used nowhere else.
          The wordmark returns to Inter Tight - the signature's Helvetica Neue is a mail
          delivery constraint, not a web display face (s09, Don't).
     s04  the billing block, in the footer, on true #000, two sizes on one baseline.
     s05  the instrument panel: focus brackets framing the page, a camera readout and frame
          counter under the hero, the rotor around Hal's eye. Two devices per screen, never
          more.
     s06  rolling banner strips, 36px, content duplicated back to back so the loop is seamless.
     s07  the hero starts dim and lifts over .8s on the first click.
     s08  the address, the coordinates, the company number, the floor - quoted, never retyped.
   No haze: the fog layers are not rendered at all (Fred 2026-09-13, and the guidelines have
   no fog in them). */

:root{
  --void:#0a0a0a;                                   /* s02 the ground */
  --ink:#0a0a0a; --ink-2:#141414; --concrete:#1d1d1c;
  --paper:#f4f1ea; --paper-dim:#cfc8b8; --bone:#a8a194; --dimmer:#5d5a52;
  --rust:#b85c2c; --brass:#c9a96e;
  --line:rgba(244,241,234,.18); --line-2:rgba(244,241,234,.06);
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --grot:'Inter',system-ui,sans-serif;
  --tight:'Inter Tight','Inter',system-ui,sans-serif;
  --led:'VT323',ui-monospace,monospace;             /* s03 LED counters only */
  --credit:'Six Caps','Oswald','Arial Narrow',Impact,sans-serif;  /* s04 only */
  --tick:36px;
}
html,body{background:var(--ink)}
body{text-shadow:none}

/* -- s01 the hatch: never still ------------------------------------------- */
.hatch{animation:hatchSpin 22s linear infinite;transform-origin:50% 50%}
.hatch.pulse{animation:hatchPulse 3.2s ease-in-out infinite}
@keyframes hatchSpin{to{transform:rotate(360deg)}}
@keyframes hatchPulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hatch{animation:none}}

/* -- s07 the hero starts dim, and lifts on the first click ----------------- */
.film video,.film img.poster{filter:saturate(.7) contrast(1.05) brightness(.5);transition:filter .8s ease}
body.lit .film video,body.lit .film img.poster{filter:saturate(.95) contrast(1.05) brightness(1)}
.scrim{background:linear-gradient(180deg,rgba(10,10,10,.80) 0%,rgba(10,10,10,.46) 34%,rgba(10,10,10,.56) 66%,rgba(10,10,10,.96) 100%);transition:opacity .8s ease}
body.lit .scrim{opacity:.62}
.vignette{background:radial-gradient(120% 100% at 50% 50%,transparent 46%,#000 106%);opacity:.62}
.film::after{background:#000}
.grain{opacity:.055;mix-blend-mode:overlay}
.band--hero{position:relative}
.lift{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:12;
  font:400 10px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--paper-dim);
  background:rgba(244,241,234,.04);border:1px solid rgba(244,241,234,.18);padding:9px 15px;
  backdrop-filter:blur(8px);cursor:pointer;transition:opacity .4s ease,color .25s}
.lift:hover{color:var(--paper)}
body.lit .lift{opacity:0;pointer-events:none}
@media(max-width:760px){.lift{display:none}}

/* -- s05 focus brackets: the page's own outer frame ------------------------ */
.vf{position:fixed;width:22px;height:22px;z-index:26;pointer-events:none;opacity:.5;animation:vfPulse 4.2s ease-in-out infinite}
.vf.tl{top:calc(var(--tick) + 14px);left:14px;border-top:1.5px solid var(--paper);border-left:1.5px solid var(--paper)}
.vf.tr{top:calc(var(--tick) + 14px);right:14px;border-top:1.5px solid var(--paper);border-right:1.5px solid var(--paper);animation-delay:-1s}
.vf.bl{bottom:14px;left:14px;border-bottom:1.5px solid var(--paper);border-left:1.5px solid var(--paper);animation-delay:-2s}
.vf.br{bottom:14px;right:14px;border-bottom:1.5px solid var(--paper);border-right:1.5px solid var(--paper);animation-delay:-3s}
@keyframes vfPulse{0%,100%{opacity:.30}50%{opacity:.68}}
@media(max-width:1100px){.vf{display:none}}
@media(prefers-reduced-motion:reduce){.vf{animation:none}}

/* -- s05 camera readout + frame counter: one strip, under the hero --------- */
.instr{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;margin-top:30px}
.readout{font:400 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);
  background:rgba(0,0,0,.42);border:1px solid var(--line);padding:7px 12px;display:inline-flex;gap:10px;align-items:center}
.readout em{font-style:normal;color:var(--paper)}
.readout .bullet{width:5px;height:5px;border-radius:50%;background:var(--rust);box-shadow:0 0 6px var(--rust);animation:pulse 1.8s ease-in-out infinite;flex:0 0 auto}
@keyframes pulse{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.35);opacity:1}}
@media(prefers-reduced-motion:reduce){.readout .bullet{animation:none}}
.frames{font:400 22px/1 var(--led);letter-spacing:.04em;color:var(--rust);text-shadow:0 0 8px rgba(184,92,44,.7)}
@media(max-width:560px){.readout{font-size:9px;letter-spacing:.12em}.frames{font-size:18px}}

/* -- s05 the rotor: real text on a real circle, around Hal's eye ----------- */
.rotor-wrap{position:relative;display:grid;place-items:center;width:min(230px,62vw);aspect-ratio:1;flex:0 0 auto}
.rotor{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:rot 28s linear infinite;pointer-events:none}
.rotor text{font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;fill:var(--paper-dim)}
@keyframes rot{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.rotor{animation:none}}
.desk{grid-template-columns:auto 1fr}
@media(max-width:560px){.rotor-wrap{width:min(190px,70vw)}}

/* -- s06 rolling banner strips -------------------------------------------- */
.tick{overflow:hidden;height:var(--tick);display:flex;align-items:center}
.tick--top{position:fixed;top:0;left:0;right:0;z-index:70;background:rgba(244,241,234,.90);border-bottom:1px solid rgba(10,10,10,.18);backdrop-filter:blur(6px)}
.tick--close{position:relative;z-index:10;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tick .track{display:flex;gap:44px;white-space:nowrap;font:400 11px/1 var(--mono);letter-spacing:.06em;padding-left:44px}
.tick--top .track{color:var(--ink);animation:tslide 46s linear infinite}
.tick--close .track{color:var(--paper-dim);animation:tslide-rev 58s linear infinite}
.tick .track>span{display:inline-flex;align-items:center;gap:44px;flex:0 0 auto}
.tick .track>span::after{content:"\2317";color:var(--rust);font-size:12px}
@keyframes tslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tslide-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.tick .track{animation:none}}
/* the fixed corner furniture drops below the strip */
.c-tl{top:calc(var(--gut) + var(--tick))}
.c-tr{top:calc(var(--gut) + var(--tick))}
.band--hero{padding-top:calc(var(--gut) + var(--tick) + 64px)}
.band--doc{padding-top:calc(var(--gut) + var(--tick) + 140px)}
.doc{padding-top:calc(var(--gut) + var(--tick) + 80px)}

/* -- s03 the wordmark: Inter Tight, 300, .22em, widening on hover ---------- */
.wordmark{font:300 18px/1 var(--tight);letter-spacing:.22em;text-transform:uppercase;color:var(--paper);
  transition:letter-spacing .3s cubic-bezier(.2,.7,.3,1)}
.wordmark:hover{letter-spacing:.32em}
.wordmark .hatch{font-size:17px}
.wordmark small{font:400 9px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--bone);margin-top:8px}
.panel .bar b{font-family:var(--tight);font-weight:300;letter-spacing:.22em;text-transform:uppercase}
@media(max-width:760px){.wordmark{font-size:15px;letter-spacing:.18em}}

/* -- s04 the billing block: the footer credits, on true #000 --------------- */
.credits{position:relative;z-index:10;background:#000;border-top:1px solid var(--line);
  padding:clamp(38px,6vw,72px) var(--gut) clamp(30px,4vw,48px);overflow-x:auto}
.billing{font-family:var(--credit);font-weight:400;text-align:center;text-transform:uppercase;
  color:var(--paper);letter-spacing:.035em;line-height:1.02;font-size:clamp(17px,3.6vw,44px)}
.billing .line{display:block;white-space:nowrap}
.billing .title{font-size:1.28em;letter-spacing:.06em}
.billing .r{text-transform:none;font-size:.44em;letter-spacing:.06em;color:var(--paper);
  display:inline-block;vertical-align:baseline;line-height:.92;text-align:left;margin-inline:.12em}
.billing .r.stack{vertical-align:-.02em}
.billing .r.stack span{display:block}
.billing-strip{margin:16px auto 0;max-width:1180px;display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-family:var(--credit);text-transform:uppercase;letter-spacing:.05em;line-height:1.05;
  font-size:clamp(12px,1.6vw,19px);color:var(--paper)}
.billing-strip .box{border:2px solid var(--paper);padding:.12em .4em;display:inline-flex;align-items:center;gap:.4em}
.billing-strip .box .hatch{font-size:.9em;vertical-align:0}
.billing-strip .small{font-size:.66em;line-height:1.12;text-align:center}
.billing-strip .copy{font-size:.55em;letter-spacing:.1em}
@media(max-width:640px){.billing-strip{justify-content:center;text-align:center}}

/* -- the rest of the shell, brought back onto the palette ------------------ */
.corner{color:var(--paper-dim)}
.c-tr{font:300 12.5px/1.6 var(--grot);color:var(--paper-dim)}
.label{color:var(--brass)}
footer{background:rgba(10,10,10,.82);border-top:1px solid var(--line)}
.panel .box{background:var(--ink);border-left:1px solid var(--line)}
.panel .bar,.panel .is,.panel .fall{border-color:var(--line)}
.panel iframe{background:var(--ink)}
.cbar{background:var(--ink-2);border-top:1px solid var(--line)}
.cbar__b{border:1px solid var(--line)}
.make div,.doors a{background:rgba(10,10,10,.66)}
.piece__film{background:#000}

/* -- the hero mark: "#" from brutalist-v3, the word from brutalist-v2 ------- */
/* the mark takes the room above the hero's own copy. The padding biases it downward so it
   clears the fixed manifesto in the top-right corner, which v3's hero did not have to.
   This is the static floor; the fitter tops it up from a real measurement if a longer
   manifesto still reaches into the mark. */
.big-mark{margin-block:auto;width:100%;min-width:0;text-align:center}
@media(min-width:761px){.big-mark{padding-top:clamp(40px,6vh,76px)}}
.big-mark .mark{
  font-family:'Inter Tight',sans-serif;
  font-weight:200;
  /* v2's size, with a height ceiling: v2's hero carried one short line under the mark,
     this one carries a label, a three-line H1, a lead and the instrument strip, so the
     mark also has to fit the viewport it shares. The letterform, weight and track are v2's. */
  font-size:min(clamp(38px,9.6vw,168px),15vh);
  --trk:.38em;
  letter-spacing:var(--trk);
  text-transform:uppercase;
  line-height:.95;
  text-shadow:0 4px 60px rgba(0,0,0,.6);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;gap:.18em;   /* v3: the gap IS the distance from the "#" to the S */
  width:max-content;max-width:none;margin:0 auto;                     /* so the pair can be measured and fitted */
}
/* .38em tracking also lands after the last letter; take it back off so the "#" and the
   word sit optically centred rather than pushed left by a trailing space. */
.big-mark .mark [data-scramble]{margin-right:calc(var(--trk) * -1)}
/* v3 spaceBreathe (brutalist-v3.html line 2254), the only idle animation the wordmark has ever
   had in any surviving version: 7s ease-in-out infinite, expand, HOLD at the peak for ~3s of the
   7, retract, hold tight. v3 breathes .19em -> .34em because its mark sits at .19em; this mark
   sits at v2's .38em, so the EXCURSION travels (+.15em) rather than the absolute numbers - same
   duration, same easing, same distance, and no snap at the moment it starts.
   Sequenced, which v3 is not: the class goes on when the scramble settles. */
@keyframes markBreathe{
  0%   {letter-spacing:var(--trk)}
  25%  {letter-spacing:calc(var(--trk) + .15em)}
  65%  {letter-spacing:calc(var(--trk) + .15em)}   /* hold expanded for ~3s of the 7s cycle */
  90%  {letter-spacing:var(--trk)}
  100% {letter-spacing:var(--trk)}
}
.big-mark .mark [data-scramble].breathing{animation:markBreathe 7s ease-in-out infinite}
/* the fitter measures with this on, or it sizes the mark to a width it outgrows 900ms later.
   !important is not decoration: an author declaration only outranks a running animation that way. */
.big-mark .mark.at-peak [data-scramble]{letter-spacing:calc(var(--trk) + .15em)!important}
.big-mark .mark .hatch{
  font-size:.78em;
  color:var(--rust);
  margin-right:.05em;
  display:inline-block;
  transform-origin:center;
  vertical-align:0;
  animation:none;
}
.big-mark .mark .hatch svg{animation:hatchClapper 5s ease-out infinite;transform-origin:center}
@keyframes hatchClapper{
  0%   {transform:rotate(0deg)}
  20%  {transform:rotate(-720deg);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  40%  {transform:rotate(-1080deg)}
  100% {transform:rotate(-1080deg)}
}
@media(prefers-reduced-motion:reduce){.big-mark .mark .hatch svg{animation:none}}
/* v3 .hero__presents (line 570) + its 24s textDriftAlt (line 2558). Plain text in v3 -
   there is no pill behind it; what looks like one in a screenshot is a drifting
   .scaffold-block passing behind. The "bold" is a colour lift, not a weight. */
.big-mark .presents{
  margin-bottom:clamp(18px,3.6vh,32px);
  font:400 10px/1.7 var(--mono);
  letter-spacing:.45em;
  text-transform:uppercase;
  color:var(--bone);
  animation:textDriftAlt 24s ease-in-out infinite;
}
.big-mark .presents em{font-style:normal;color:var(--paper)}
@keyframes textDriftAlt{0%{transform:translateX(6px)}50%{transform:translateX(-6px)}100%{transform:translateX(6px)}}
/* v3 .hero__big-mark .sub + .dot (lines 559-567). The dots reuse the build's own `pulse`
   keyframe - redefining it here would re-time the instrument strip's bullet as well. */
.big-mark .sub{
  margin-top:clamp(20px,4.2vh,38px);
  font:400 13px/1.6 var(--mono);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.big-mark .sub .dot{display:inline-block;width:6px;height:6px;background:var(--rust);border-radius:50%;
  margin:0 18px;animation:pulse 1.6s ease-in-out infinite;vertical-align:middle}
.big-mark .lift{position:static;left:auto;top:auto;transform:none;margin:clamp(12px,1.8vh,28px) auto 0}
@media(max-width:760px){
  .big-mark .lift{display:none}
  .big-mark .presents{font-size:9px;letter-spacing:.32em;margin-bottom:18px}
  .big-mark .sub{font-size:9px;letter-spacing:.32em;margin-top:22px}
  .big-mark .sub .dot{margin:0 10px;width:4px;height:4px}
}
@media(max-width:560px){.big-mark .mark{--trk:.28em}}
@media(prefers-reduced-motion:reduce){.big-mark .presents{animation:none}.big-mark .sub .dot{animation:none}}

/* -- Hal: concept A, the barrel (Cassia; Fred approved 2026-09-22) --------- */
/* the widget grew from a 48px orb to a 248px rig, so the wrapper stops taking clicks: a
   transparent box that size would kill click-to-brighten over a quarter of the hero's corner.
   Only the core is hit-testable (`.rig .eye` below); the label is aria-hidden and has no handler. */
.eye-fixed{--rig:248px;gap:18px;pointer-events:none}
.rig{position:relative;width:var(--rig);aspect-ratio:1;display:grid;place-items:center;flex:0 0 auto;
  pointer-events:none}                 /* the rig is decoration: only the core takes a click */
/* the site's own device for holding something legible over moving film (.corner::before) */
.rig::before{content:"";position:absolute;inset:-14%;z-index:-1;pointer-events:none;filter:blur(18px);
  background:radial-gradient(circle at 50% 50%,rgba(6,5,4,.78) 0%,rgba(6,5,4,.42) 52%,transparent 72%)}

/* `hoop`, not the concept's `band`: .band is this site's full-height page section */
.rig .hoop{position:absolute;border-radius:50%;pointer-events:none}
/* Re-laid for the corner (Cassia, 2026-09-22). The concept was drawn at a 560px rig; this runs at
   248px, so every band was moved to make room for lettering that can actually be read - see the
   ring block below. Radii are given in the rings' own 400-unit space: r = (50 - inset%) * 4. */
.rig .hair-1{inset:28%;border:1px solid rgba(244,241,234,.08)}      /* r 88  - under the words  */
.rig .hair-2{inset:20%;border:1px solid rgba(244,241,234,.07)}      /* r 120 - between the two  */
.rig .hair-3{inset:8%;border:1px solid rgba(244,241,234,.06)}       /* r 168 - under the scale  */
.rig .hair-4{inset:2%;border:1px solid rgba(244,241,234,.09);box-shadow:inset 0 1px 0 rgba(244,241,234,.05)}

.rig .ticks{position:absolute;inset:0;pointer-events:none;      /* r 157-165, the fine scale */
  background:repeating-conic-gradient(from 0deg,rgba(244,241,234,.34) 0deg .22deg,transparent .22deg 6deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 78%,#000 78.5%,#000 82.5%,transparent 83%);
          mask:radial-gradient(circle closest-side,transparent 78%,#000 78.5%,#000 82.5%,transparent 83%)}
.rig .ticks-long{position:absolute;inset:0;pointer-events:none; /* r 152-165, the major divisions */
  background:repeating-conic-gradient(from 0deg,rgba(244,241,234,.5) 0deg .3deg,transparent .3deg 30deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 75.5%,#000 76%,#000 82.5%,transparent 83%);
          mask:radial-gradient(circle closest-side,transparent 75.5%,#000 76%,#000 82.5%,transparent 83%)}
.rig .knurl{position:absolute;inset:0;pointer-events:none;opacity:.55;   /* r 192-199, the rim */
  background:repeating-conic-gradient(from 0deg,rgba(244,241,234,.16) 0deg .45deg,rgba(0,0,0,.5) .45deg 1.5deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 95.5%,#000 96%,#000 99.5%,transparent 100%);
          mask:radial-gradient(circle closest-side,transparent 95.5%,#000 96%,#000 99.5%,transparent 100%)}
.rig .index{position:absolute;top:1.2%;left:50%;transform:translateX(-50%);width:0;height:0;pointer-events:none;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:8px solid var(--rust);
  filter:drop-shadow(0 0 5px rgba(184,92,44,.55))}

.rig .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rig .ring text{font-family:var(--mono);text-transform:uppercase;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.95)) drop-shadow(0 -.5px 0 rgba(255,255,255,.10))}
.rig .r-in {animation:halCw 74s linear infinite}
.rig .r-mid{animation:halAcw 104s linear infinite}
.rig .r-out{animation:halCw 148s linear infinite}
/* Legibility at corner scale (Cassia, 2026-09-22). The rings live in a 400-unit viewBox drawn at
   248px, so a glyph renders at 0.62x its unit size - the concept's 11px inner ring was landing at
   6.9px, which is texture, not a word. Fixed by cutting repeats (3/2/4 -> 2/2/3) and enlarging to
   suit, not by scaling the rig, which would eat the hero corner.
   The hierarchy is a real barrel's, and it is deliberate: ONE ring you read (the inner words), one
   you can read if you look (the process), one that is frankly a scale (the apertures). Three rings
   competing for the same weight is what made it noise. Rendered: 13.0 / 10.9 / 8.7px at --rig 248;
   10.7 / 8.9 / 7.1px at 204. */
.rig .r-in  text{font-size:21px;letter-spacing:.02em;fill:rgba(244,241,234,.78)}
.rig .r-mid text{font-size:17.5px;letter-spacing:.02em;fill:rgba(207,200,184,.46)}
.rig .r-out text{font-size:14px;letter-spacing:.02em;fill:rgba(184,92,44,.66)}
@keyframes halCw{to{transform:rotate(360deg)}}
@keyframes halAcw{to{transform:rotate(-360deg)}}

/* the core, at the concept's 30% of the rig. The site dims its eye until hover; the concept does
   not, and the concept is what was approved, so the dim comes off and the 7.5s breath goes on. */
.rig .eye{position:absolute;width:30%;height:auto;aspect-ratio:1;pointer-events:auto}
.rig .bezel{border:1px solid #191b21;
  background:radial-gradient(circle at 50% 40%,#17181c 0%,#0b0c0f 58%,#060607 80%,#101115 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 38px rgba(0,0,0,.92),0 26px 70px -28px #000}
.rig .glass{inset:14%;filter:none;animation:halBreathe 7.5s ease-in-out infinite}
.rig .glass::after{background:radial-gradient(ellipse 44% 30% at 32% 22%,rgba(226,238,255,.20),transparent 70%)}
.rig .pupil{width:9%;box-shadow:0 0 12px 3px rgba(255,232,170,.55)}
@keyframes halBreathe{
  0%,100%{box-shadow:0 0 34px 5px rgba(224,29,6,.26),inset 0 0 28px rgba(0,0,0,.62)}
  50%    {box-shadow:0 0 54px 10px rgba(224,29,6,.40),inset 0 0 28px rgba(0,0,0,.62)}}

@media(max-width:1100px){.eye-fixed{--rig:204px}}

/* Phones: the compact barrel (Cassia, 2026-09-22). The rig that clears the H1 at 390px is about
   132px, and at 132px a 400-unit ring renders a glyph at 0.33x - 7px for the inner ring, 4.6px for
   the scale. Nothing can be done with type at that size, so the type comes off and the ENGRAVING
   stays: knurled rim, fine scale, two hairlines, the rust index mark, the core. That is what a
   small lens actually looks like - a barrel does not carry readable words at 30mm either - and it
   keeps this a button rather than a billboard. The motion Fred asked for survives in the scale,
   which turns on its own at 90s, one direction, no text to read while it does.
   The core goes to 46% of a 100px rig, so the button is 46px - bigger than the 44px it is today -
   and the engraving is a collar around it rather than a dial beside it. Three rotating text layers
   also come off the phone compositor, which is free.
   Measured at a TRUE 390px viewport, in an iframe: headless Chrome floors a window at 512px wide,
   so a `--window-size=390` screenshot is a 512px page and proves nothing about phones. At 390 with
   the cookie bar up, a 132px rig still sat across the end of the H1's first line; hence 100px and
   the deeper lift below. */
@media(max-width:760px){
  .eye-fixed{--rig:100px}
  .rig .ring,.rig .hair-2,.rig .hair-3,.rig .ticks-long{display:none}
  .rig .eye{width:46%}                          /* 46px: the tap target is bigger than today's 44 */
  .rig .hair-1{inset:22%}                       /* pulled in to ring the core, not empty space */
  .rig .hair-4{inset:3%}
  .rig .ticks{animation:halCw 90s linear infinite;
    -webkit-mask:radial-gradient(circle closest-side,transparent 70%,#000 70.5%,#000 79%,transparent 79.5%);
            mask:radial-gradient(circle closest-side,transparent 70%,#000 70.5%,#000 79%,transparent 79.5%)}
  .rig .knurl{opacity:.72;
    -webkit-mask:radial-gradient(circle closest-side,transparent 93%,#000 93.5%,#000 99%,transparent 99.5%);
            mask:radial-gradient(circle closest-side,transparent 93%,#000 93.5%,#000 99%,transparent 99.5%)}
  .rig .index{border-left-width:3px;border-right-width:3px;border-top-width:6px}
  .rig::before{inset:-10%;filter:blur(12px)}
}
/* With the cookie bar up on a phone there is no clear band left at the bottom of the hero - the
   H1 runs to within 30px of the bar - so the widget was sitting on the end of "CREATIVE AGENCY".
   The bar's own lift is deepened from 190 to 250 to park it in the empty film between the tagline
   and the headline. It only applies while the bar is up; dismissed, the widget drops back down. */
@media(max-width:640px){body.cbar-on .eye-fixed{transform:translateY(-272px)}}
@media(prefers-reduced-motion:reduce){
  .rig .ring,.rig .ticks{animation:none}
  .rig .glass{animation:none;box-shadow:0 0 40px 7px rgba(224,29,6,.32),inset 0 0 28px rgba(0,0,0,.62)}}

/* -- the journey: text scrolls, the picture stays -----------------------------
   Fred 2026-09-23: the section is no longer pinned as a whole. The copy column is in normal
   document flow and scrolls like any other page content; the panel beside it is sticky and
   holds one clip, still, until the next block of text reaches the middle of the screen. */
.journey{position:relative;z-index:10;background:var(--ink)}
/* -- the room dial (Fred 2026-10-04): one full screen under the hero, the dial page in a frame --
   Source: website-v9-concept/dial-studies, built by its tools/make_site_dial.py into static/group/dial/.
   The wheel turns the dial only while this section is flush with the screen; see the script in page(). */
.dialband{position:relative;z-index:10;height:100vh;height:100svh;background:var(--ink);overflow:hidden}
/* a fast flick or trackpad fling must not carry the page past the dial (Fred 2026-10-05): the section is a
   mandatory stop - the browser lands on it before it lets the page move on to the journey */
/* (no CSS scroll-snap: proximity snap could pull the page back from the journey; the gate is the script in page()) */
.factoryband{position:relative;z-index:10;height:100vh;height:100svh;background:var(--ink);overflow:hidden}
.factoryband iframe{display:block;width:100%;height:100%;border:0;background:var(--ink)}
.dialband iframe{display:block;width:100%;height:100%;border:0;background:var(--ink)}
.journey__track{position:relative}
.journey__stage{display:grid;
  grid-template-columns:minmax(0,42vw) minmax(0,1fr);align-items:start;
  gap:clamp(12px,1vw,22px);
  padding:0 var(--gut)}
/* NO max-width and NO margin-inline:auto here. A cap plus auto margins centres the section and
   opens a dead gutter both sides, so this column started ~240px further in than the logo and
   every other band, which all run edge to edge on var(--gut). Raised twice; do not re-add. */
.journey__copy{max-width:none;position:relative;z-index:2}
.jhead{position:relative;z-index:3;
  /* Fred 2026-10-11 (fred-15/16/17): the intro is no longer sticky and no longer indented 280px - it flows in the column and
     scrolls away with the rest, so the step card can never sit on top of it. The top padding clears the fixed header and the fade. */
  padding:clamp(180px,25vh,300px) 0 clamp(6px,1.5vh,16px) 0}
/* the header zone (ticker, wordmark, menu, corner text) is fixed: everything that scrolls up into it fades out over the top ~26% of
   the screen first, and the same at the bottom edge for the footer links (sticky bands, so they ride with the viewport inside the section) */
.jfade{position:sticky;top:0;z-index:6;height:26vh;margin-bottom:-26vh;pointer-events:none;
  background:linear-gradient(to bottom,var(--ink) 0,var(--ink) 45%,rgba(10,10,10,.6) 70%,rgba(10,10,10,0) 100%)}
.jfade--b{top:auto;bottom:0;height:11vh;margin:0;background:linear-gradient(to top,var(--ink) 0,var(--ink) 45%,rgba(10,10,10,0) 100%)}
/* the copy column is narrower now (Fred's mockup measure), so the display line comes down with
   it - at the old size it wrapped to eight lines and ate the whole first screen */
.jlead{margin-top:16px;font:200 clamp(19px,1.75vw,31px)/1.16 var(--tight);color:var(--paper);max-width:24ch}
/* one screen per block */
.jstep{min-height:0;padding:clamp(18px,3.4vh,38px) 0;display:flex;align-items:flex-start;
  opacity:.28;transition:opacity .45s ease}
.jstep__body{max-width:none;min-width:0;width:100%}
/* Fred 2026-10-05: the rooms that do this step, as the ROOM-MARKS-r3 tiles (the dial list view's card:
   animated mark + logo + "NN . STAGE"); each one a link to the room's page */
.jtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;margin-top:20px}
.jtile{--room:#b85c2c;border:1px solid rgba(244,241,234,.16);background:rgba(20,20,20,.88);padding:16px 16px 12px;
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;color:var(--paper);text-decoration:none;
  transition:border-color .2s,transform .3s}
.jtile canvas{width:64px;height:64px;display:block}
.jtile img{width:100%;height:auto;display:block}
.jt-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid rgba(244,241,234,.16);
  padding-top:9px;font:400 10px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.jt-meta .sw{display:inline-block;width:.8em;height:.8em;vertical-align:-1px;margin-right:6px}
.jtile:hover,.jtile:focus-visible{border-color:var(--paper);outline:none;transform:translateY(-2px)}
.jstep.on .jtile{border-color:rgba(244,241,234,.3)}
/* the hard black-to-rust cut of the dial's cue: .cueflash = the narrator just named it; .nextcue = what to do next */
@keyframes jcue{0%,49.9%{background:#0a0a0a;color:var(--paper);border-color:var(--room)}50%,100%{background:#e0733a;color:#0a0a0a;border-color:#e0733a}}
@keyframes jcuet{0%,49.9%{filter:none}50%,100%{filter:drop-shadow(0 0 7px #e0733a) brightness(1.9)}}
.jtile.cueflash,.jnx.nextcue,.jsound.nextcue{animation:jcue .9s steps(1) infinite}
.jtile.cueflash .jt-meta{color:inherit}
@keyframes jcuei{0%,49.9%{filter:none}50%,100%{filter:brightness(0)}}
.jtile.cueflash img{animation:jcuei .9s steps(1) infinite}
@media(prefers-reduced-motion:reduce){.jtile.cueflash img{animation:none}}
/* the narration monitor: VT323 phosphor in the room colour, typed in as Brielle speaks (the dial's story monitor) */
.jcrt{--room:#c9a96e;margin-top:18px;max-width:60ch;border-radius:22px/28px;padding:16px 22px 18px;font-family:'VT323','Courier New',monospace;color:var(--room);
  background:radial-gradient(120% 100% at 50% 50%,rgba(255,255,255,.03),rgba(0,0,0,.35));box-shadow:inset 0 0 40px rgba(0,0,0,.6),0 0 0 1px rgba(244,241,234,.1)}
.jcrt-in{animation:jflick .12s steps(2) infinite}
@keyframes jflick{50%{opacity:.965}}
.jcrt.boot .jcrt-in{animation:jboot .45s cubic-bezier(.2,.8,.2,1)}
@keyframes jboot{0%{transform:scale(1,.01);filter:brightness(4)}45%{transform:scale(1,.02);filter:brightness(3)}100%{transform:none;filter:none}}
.jcrt-hd{font-size:clamp(17px,1.3vw,22px);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);margin-bottom:8px;display:flex;justify-content:space-between;gap:12px}
.jcrt-hd small{font-size:.62em;color:var(--room);letter-spacing:.14em}
.jcrt-tx{font-size:clamp(17px,1.25vw,22px);line-height:1.2;white-space:pre-wrap;min-height:4.8em;text-shadow:0 0 6px color-mix(in srgb,var(--room) 35%,transparent)}
.jcrt-tx .cur{display:inline-block;width:.55em;height:1em;background:var(--room);vertical-align:-.12em;margin-left:1px;animation:jblink .9s steps(1) infinite;box-shadow:0 0 8px var(--room)}
@keyframes jblink{50%{opacity:0}}
.jnx{display:inline-block;margin-top:12px;padding:3px 8px;border:1px solid transparent;font:inherit;font-size:clamp(16px,1.1vw,20px);letter-spacing:.08em;color:var(--room);text-decoration:none;visibility:hidden}
.jnx.show{visibility:visible}
.jsound{margin-top:16px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:rgba(10,10,10,.7);border:1px solid var(--rust);padding:9px 12px;cursor:pointer}
.jsound[aria-pressed="true"]{border-color:var(--brass)}
.jsound:focus-visible,.jnx:focus-visible{outline:1px solid #e0733a}
/* Fred 2026-09-23: the first block still gets double the run of the others so nobody scrolls
   past the opening, but both came down - a 200vh opener was a screen and a half of black. */
.jstep:first-child{padding-top:clamp(8px,2vh,24px)}
.jstep.on{opacity:1}
.jmeta{display:flex;align-items:center;gap:12px}
.jstep .n{font:400 9px/1 var(--mono);letter-spacing:.3em;color:var(--rust)}
.jroom{font:400 9px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--brass);
  border:1px solid var(--line);padding:5px 9px}
.jstep h3{margin-top:16px;font:300 clamp(18px,1.9vw,27px)/1.2 var(--tight);
  letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.jstep p{margin-top:12px;font-size:16.5px;line-height:1.62;color:var(--paper-dim);max-width:52ch}
/* the panel: sticky beside the copy, vertically centred in the viewport */
.journey__panel{position:sticky;top:calc((100vh - 88vh)/2);height:88vh;aspect-ratio:9/16;
  justify-self:start;max-width:100%;margin-left:clamp(0px,1vw,22px);
  /* Fred 2026-09-23: the frame must dissolve on ALL FOUR sides. Two linear masks intersected,
     so the centre stays fully opaque and every border - and every corner, where the two ramps
     overlap - falls away to nothing. The earlier single horizontal mask left hard top and
     bottom edges. Both the standard and the old -webkit- composite keywords are set. */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%),
                     linear-gradient(to bottom,transparent 0%,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%),
                     linear-gradient(to bottom,transparent 0%,#000 13%,#000 87%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.journey__panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;will-change:opacity}
.journey__panel video.on{opacity:1}
@media(max-width:860px){
  .journey__stage{grid-template-columns:1fr;gap:0;padding:0 var(--gut)}
  .jfade{display:none}
  .jhead{padding:0}
  /* Phone: the panel sticks under the top ticker and the stages scroll past beneath it.
     9:16 is kept - stretching it to the column width made a letterboxed band of black. */
  .journey__panel{position:sticky;top:calc(var(--tick) + 10px);order:-1;
    height:46vh;width:auto;aspect-ratio:9/16;justify-self:center;margin:0 auto clamp(14px,3vh,26px)}
  .jstep h3{margin-top:12px}
  .jlead{max-width:none}
  .jstep{min-height:auto;padding:clamp(28px,7vh,60px) 0;opacity:1}
  .jtiles{grid-template-columns:1fr}
  .jcrt{padding:14px 16px 16px}
  .jstep:first-child{min-height:auto}
  .jlead{font-size:clamp(19px,5vw,26px)}
}
@media(prefers-reduced-motion:reduce){
  .jstep{transition:none;opacity:1}
  .journey__panel video{transition:none}
  .jcrt-in,.jcrt.boot .jcrt-in,.jcrt-tx .cur{animation:none}
  .jtile.cueflash,.jnx.nextcue,.jsound.nextcue{animation:none!important;outline:2px solid #e0733a}
}
/* -- the hero's edge falloff ------------------------------------------------
   Fred 2026-09-22: the video's brightness was still visible hard against the frame edge.
   The inherited vignette put its black stop at 106% - outside the box - so the edges never
   actually reached black, and opacity .62 capped it besides. This reaches pure black AT the
   boundary and on all four corners, with a generous open centre and a long feathered ramp
   (the journey spec's own rule for the clips: soft and wide, never a hard porthole). */
.vignette{
  background:radial-gradient(128% 104% at 50% 45%,
    transparent 0%, transparent 34%,
    rgba(0,0,0,.28) 60%, rgba(0,0,0,.62) 80%, rgba(0,0,0,.88) 93%, #000 100%);
  opacity:1;
}
@media(prefers-reduced-motion:reduce){
  .jstep{transition:none}
  .journey__panel video{opacity:1}
  .journey__panel video~video{display:none}
}

/* ===== below the factory (Rafael via Fred 2026-10-05: "pants ... a lot of space ... dislodged and basic") =====
   One tight rhythm: .bsec replaces the 100vh .band for these sections. No min-height, no centring, no snap. */
.bsec{position:relative;z-index:10;padding:clamp(44px,5.4vw,80px) var(--gut);border-top:1px solid var(--line);
  background:radial-gradient(60% 90% at 100% 0%,rgba(184,92,44,.10),transparent 70%),linear-gradient(180deg,rgba(10,10,10,.94),rgba(14,14,14,.94))}
.bsec.alt{background:radial-gradient(60% 90% at 0% 0%,rgba(201,169,110,.07),transparent 70%),linear-gradient(180deg,rgba(12,12,12,.94),rgba(10,10,10,.94))}
.bsec .in{max-width:1240px;margin:0 auto}
.bsec .label{margin-bottom:16px;font-size:13px;letter-spacing:.24em}
.bsec h2{max-width:26ch}
.bsec .label::after{content:"";flex:0 1 120px;height:1px;background:linear-gradient(90deg,var(--rust),transparent)}
.ed{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.4vw,72px);align-items:start}
.ed-story{margin-top:22px;border-left:1px solid var(--line);display:grid}
.ed-story .beat{position:relative;grid-template-columns:104px 1fr;gap:16px;padding:13px 0 13px 22px;border-bottom:1px solid var(--line-2)}
.ed-story .beat:last-child{border-bottom:0}
.ed-story .beat::before{content:"";position:absolute;left:-3px;top:23px;width:5px;height:5px;background:var(--rust);box-shadow:0 0 8px rgba(184,92,44,.8)}
.ed-story .beat .k{color:var(--bone);font-size:13px;letter-spacing:.18em}
.ed-story .beat p{font-size:16px;line-height:1.55}
.ed-story .beat.future p{font-size:clamp(18px,1.7vw,23px)}
.ed-pics{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:sticky;top:96px}
.ed-pics figure{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);background:#000}
.ed-pics figure:first-child{grid-column:1/-1}
.ed-pics img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;filter:saturate(.85) contrast(1.05) brightness(.82);transition:filter .5s,transform .8s}
.ed-pics figure:not(:first-child) img{aspect-ratio:4/3}
.ed-pics figure:hover img{filter:none;transform:scale(1.03)}
.ed-pics figcaption{position:absolute;left:0;bottom:0;padding:18px 12px 8px;width:100%;font:400 13px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);background:linear-gradient(0deg,rgba(0,0,0,.78),transparent)}
.ed-pics figure::before{content:"";position:absolute;z-index:2;top:8px;left:8px;width:14px;height:14px;border-top:1.5px solid var(--paper);border-left:1.5px solid var(--paper);opacity:.5}
.ed-make{margin-top:clamp(30px,3.6vw,52px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--line)}
.ed-make .lede{margin-top:12px}
.ed-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px}
.ed-3 div{background:rgba(10,10,10,.9);padding:18px 18px 20px;display:grid;gap:8px;align-content:start;border-top:2px solid var(--c,var(--rust))}
.ed-3 div:nth-child(1){--c:#c9a96e}.ed-3 div:nth-child(2){--c:#b85c2c}.ed-3 div:nth-child(3){--c:#e8a33d}
.ed-3 .n{font:400 13px/1 var(--mono);letter-spacing:.24em;color:var(--bone)}
.ed-3 h3{font:300 clamp(16px,1.4vw,19px)/1.2 var(--tight);letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.ed-3 p{font-size:15px;line-height:1.55;color:var(--paper-dim)}
.ed-wont{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:20px}
.ed-wont li{font-size:15px;line-height:1.5;color:var(--paper-dim);padding-top:10px;border-top:1px solid var(--line);display:block}
.ed-wont li::before{content:"\2014\00a0";color:var(--rust)}
.rg{margin-top:22px;display:grid;gap:clamp(18px,2.2vw,28px)}
.rg-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:start}
.rg-stage{font:400 13px/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);padding-top:12px;border-top:1px solid var(--brass)}
.rg-stage small{display:block;margin-top:4px;font-size:13px;letter-spacing:.14em;color:var(--bone)}
.rg-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.rt{position:relative;display:grid;gap:5px;align-content:start;padding:12px 14px 13px;background:rgba(18,18,18,.82);border:1px solid var(--line-2);border-left:2px solid var(--rc,var(--rust));transition:background .25s,border-color .25s,transform .25s}
/* the room's ROOM-MARKS logo (the mark, cropped from the logo svg) sits at the end of the name row, in the room's own colour */
.rt b.rt-n{position:relative;display:block;min-height:34px;padding-right:56px}
.rt b.rt-n::after{content:"";position:absolute;right:0;top:50%;width:46px;height:46px;transform:translateY(-50%);background:var(--logo) 0 50%/auto 100% no-repeat;opacity:.95}
.rt b{font:300 16px/1.2 var(--tight);letter-spacing:.08em;text-transform:uppercase;color:var(--rc,var(--paper))}
.rt span{font-size:15px;line-height:1.45;color:var(--paper-dim)}
.rt i{font:400 13px/1.3 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);margin-top:3px}
.rt:hover,.rt:focus-visible{background:rgba(184,92,44,.13);border-color:var(--rc,var(--rust));transform:translateY(-2px)}
.rt:hover i{color:var(--paper)}
.rooms-end2{margin-top:clamp(22px,2.6vw,34px);max-width:40ch;font:200 clamp(18px,1.8vw,26px)/1.25 var(--tight);color:var(--paper)}
.bsec .also{margin-top:14px;font:400 13px/1.8 var(--mono);letter-spacing:.1em;color:var(--bone)}
.bsec .also a{border-bottom:1px solid var(--line)}
.qd{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.qd .faq{margin-top:18px;max-width:none;border-top:1px solid var(--line)}
.qd .faq summary{padding:15px 0;font-size:clamp(15px,1.3vw,17px)}
.qd .faq summary::after{font-size:18px;color:var(--rust)}
.qd .faq details[open]{background:linear-gradient(90deg,rgba(184,92,44,.07),transparent)}
.qd .faq details[open] summary{color:var(--brass)}
.qd .faq details p{padding:0 18px 18px 0}
.qd .cta{margin-top:16px;font:400 13px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.qd .cta a{color:var(--rust);border-bottom:1px solid var(--line)}
.hal{position:relative;border:1px solid rgba(184,92,44,.5);background:radial-gradient(90% 70% at 50% 0%,rgba(224,29,6,.10),transparent 70%),rgba(8,8,8,.9);padding:clamp(20px,2.4vw,32px);display:grid;gap:18px;justify-items:start}
.hal::before,.hal::after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid var(--paper);opacity:.45}
.hal::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.hal::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hal .rotor-wrap{width:min(190px,56vw);margin:0 auto}
.hal .in2{display:grid;gap:12px}
.hal .in2>p:first-child{font-size:16px;line-height:1.55;color:var(--paper);max-width:none}
.hal .nevers{margin-top:0;font-size:13px;line-height:1.7;letter-spacing:.08em;max-width:none}
.go{display:inline-flex;align-items:center;gap:10px;font:400 13px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);background:transparent;border:1px solid var(--rust);padding:13px 18px;cursor:pointer;transition:background .25s,color .25s}
.go:hover,.go:focus-visible{background:var(--rust);color:var(--paper)}
.go::after{content:"\2192"}
.cp{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;border:1px solid var(--line);background:radial-gradient(70% 120% at 0% 100%,rgba(184,92,44,.14),transparent 70%),rgba(8,8,8,.88);padding:clamp(26px,3.6vw,52px)}
.cp::before,.cp::after{content:"";position:absolute;width:18px;height:18px;border:1.5px solid var(--paper);opacity:.5}
.cp::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.cp::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.cp h2{max-width:20ch}
.cp-acts{display:grid;gap:10px}
.cp-act{display:grid;gap:5px;padding:16px 18px;border:1px solid var(--line);background:rgba(18,18,18,.8);text-align:left;color:var(--paper);cursor:pointer;font:inherit;transition:background .25s,border-color .25s}
.cp-act:hover,.cp-act:focus-visible{background:rgba(184,92,44,.13);border-color:var(--rust)}
.cp-act small{font:400 13px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.cp-act b{font:300 clamp(17px,1.9vw,25px)/1.2 var(--tight);letter-spacing:.02em;overflow-wrap:anywhere}
.cp-act span{font-size:15px;line-height:1.5;color:var(--paper-dim)}
.cp .two{margin-top:20px}
.cp-l{display:grid;gap:18px;align-content:start}
.cf{display:grid;gap:14px;margin-top:6px;max-width:560px}
.cf label{display:grid;gap:6px;font:400 14px/1.3 var(--mono);letter-spacing:.08em;color:var(--bone)}
.cf label i{font-style:normal;color:var(--dimmer)}
.cf input,.cf textarea,.cf select{width:100%;box-sizing:border-box;font:400 16px/1.5 Helvetica,Arial,sans-serif;letter-spacing:0;color:var(--paper);background:rgba(18,18,18,.9);border:1px solid var(--line);border-radius:0;padding:12px 14px}
.cf select{min-height:50px}.cf select option{background:#121212;color:var(--paper)}
.cf textarea{min-height:140px;resize:vertical}
.cf input:focus,.cf textarea:focus,.cf select:focus{outline:2px solid var(--rust);outline-offset:1px;border-color:var(--rust)}
.cf .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf .go[disabled]{opacity:.55;cursor:wait}
.cf .go{justify-self:start}
.cf-st{min-height:1.5em;font-size:16px;line-height:1.5;color:var(--paper)}
.cf-st.ok{color:#7fae92}
.cf-st.bad{color:#e8a33d}
.cf-st a{color:var(--paper);border-bottom:1px solid var(--rust)}
.cf-alt{font-size:15px;color:var(--paper-dim)}
.cf-alt a{color:var(--paper);border-bottom:1px solid var(--rust)}
/* media pass 2026-10-07: the room tile's loop (poster img first, video src only once seen) and the size proof under the Factory */
.rt-m{position:relative;display:block;margin:-12px -14px 6px;aspect-ratio:var(--ar,16/9);background:#000;overflow:hidden}
.rt-m img,.rt-m video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.rt-m video{opacity:0;transition:opacity .4s}
.rt-m.on video{opacity:1}
.sc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.sc-pic{margin:0;position:relative;aspect-ratio:var(--ar,16/9);border:1px solid var(--line);background:#000;overflow:hidden}
.sc-pic img{display:block;width:100%;height:100%;object-fit:cover}
.sc .lede{margin-top:12px;max-width:44ch}
@media(prefers-reduced-motion:reduce){.rt-m video{transition:none}}
@media(max-width:980px){.sc{grid-template-columns:1fr}}
@media(max-width:980px){.ed,.qd,.cp{grid-template-columns:1fr}.ed-pics{position:static}.rg-row{grid-template-columns:1fr;gap:8px}.rg-stage{padding-top:8px}}
@media(max-width:680px){.ed-3,.ed-wont{grid-template-columns:1fr}}

/* -- insights (2026-09-26): the article body and the listing. Existing tokens only. -- */
.prose h2{max-width:34ch}
.prose h3{margin:30px 0 10px;font:300 clamp(17px,1.4vw,20px)/1.3 var(--tight);letter-spacing:.02em;color:var(--paper)}
.prose h4{margin:24px 0 8px;font:400 10px/1.7 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.prose>p,.prose>ul,.prose>ol{max-width:64ch}
.prose>p{margin:0 0 18px;font-size:16px;line-height:1.72;color:var(--paper)}
.prose strong{font-weight:500;color:var(--paper)}
.prose em{font-style:italic}
.prose ul,.prose ol{margin:0 0 20px;padding-left:1.25em}
.prose li{margin:0 0 10px;font-size:16px;line-height:1.66;color:var(--paper)}
.prose li::marker{color:var(--rust)}
.prose>p a,.prose li a{border-bottom:1px solid var(--brass)}
.prose code{font-family:var(--mono);font-size:.88em}
.prose .tbl{max-width:100%;overflow-x:auto;margin:8px 0 24px;border-bottom:1px solid var(--line)}
.prose table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;line-height:1.5}
.prose th,.prose td{border-top:1px solid var(--line);padding:11px 14px 11px 0;vertical-align:top;text-align:left;color:var(--paper-dim)}
.prose th{font:400 9.5px/1.6 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--bone)}
.prose td:first-child{color:var(--paper)}
.prose .faq{margin-top:8px}
.prose .ins-pic{max-width:64ch;margin:8px 0 26px}
.prose .ins-pic img{display:block;width:100%;height:auto;aspect-ratio:var(--ar)}
.label a{border-bottom:1px solid transparent}.label a:hover{border-bottom-color:var(--brass)}
.ins-when{margin-top:18px;font:400 9.5px/1.7 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.ins-list{list-style:none;max-width:66ch;margin-top:8px;border-top:1px solid var(--line)}
.ins-list li{border-bottom:1px solid var(--line)}
.ins-list a{display:block;padding:22px 0}
.ins-list h2{margin:0 0 10px;max-width:none;font-size:clamp(18px,1.6vw,24px);transition:color .25s}
.ins-list a:hover h2{color:var(--brass)}
.ins-list p{font-size:15px;line-height:1.62;color:var(--paper-dim)}
.ins-list .d{display:block;margin-top:12px;font:400 9.5px/1.6 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.contact.band--doc{padding-bottom:calc(var(--gut) + 90px)}

/* -- questions (2026-10-11): the answer layer. Existing tokens only. -- */
.qa-toc{margin-top:22px;font:400 10px/1.9 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--bone)}
.qa-toc a{border-bottom:1px solid transparent}.qa-toc a:hover{color:var(--paper);border-bottom-color:var(--brass)}
.qa h2{margin-top:44px;scroll-margin-top:90px}
.qa .qa-list{max-width:64ch;border-top:1px solid var(--line)}
.qa .qa-item{padding:20px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.qa .qa-item h3{margin:0 0 8px;max-width:none;font:300 clamp(17px,1.4vw,20px)/1.3 var(--tight);letter-spacing:.02em;color:var(--paper)}
.qa .qa-item p{margin:0;font-size:16px;line-height:1.7;color:var(--paper-dim)}
.qa .qa-item p a{border-bottom:1px solid var(--brass)}
.qa .qa-item:target h3{color:var(--brass)}

/* -- the site menu (Fred 2026-10-05), top right on every page; site_nav.py is the one source -- */
.sitenav{position:fixed;z-index:30;top:var(--gut);right:var(--gut);display:flex;align-items:center;font:400 15px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.sitenav::before{content:"";position:absolute;inset:-40px -12px -40px -60px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 70% 30%,rgba(8,6,4,.78),transparent 68%);filter:blur(18px)}
.sitenav summary{list-style:none}.sitenav summary::-webkit-details-marker{display:none}
.sitenav details{position:relative}
.c-tr{top:calc(var(--gut) + 48px)}

:is(.sitenav,.roomnav){gap:0;align-items:center;font-size:15px;line-height:1;letter-spacing:.14em;font-weight:400}
:is(.sitenav,.roomnav)>*{position:relative;padding:10px 20px;white-space:nowrap;color:rgba(244,241,234,.92)}
:is(.sitenav,.roomnav)>*+*::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--rust,#b85c2c)}
:is(.sitenav,.roomnav)>a,:is(.sitenav,.roomnav)>.cur,:is(.sitenav,.roomnav)>details>summary{display:inline-block;color:rgba(244,241,234,.92);text-decoration:none;text-underline-offset:9px;text-decoration-thickness:2px;text-decoration-color:transparent;transition:color .15s,text-decoration-color .15s}
:is(.sitenav,.roomnav)>details{padding:0}
:is(.sitenav,.roomnav)>details>summary{padding:10px 20px}
:is(.sitenav,.roomnav)>a:hover,:is(.sitenav,.roomnav)>details>summary:hover,:is(.sitenav,.roomnav)>details[open]>summary{color:var(--paper,#f4f1ea);text-decoration:underline;text-decoration-color:var(--rust,#b85c2c)}
:is(.sitenav,.roomnav)>.cur{color:var(--paper,#f4f1ea);text-decoration:underline;text-decoration-color:var(--rust,#b85c2c)}
:is(.sitenav,.roomnav)>details>summary::after{content:"";display:inline-block;width:0;height:0;margin-left:11px;vertical-align:2px;border:5px solid transparent;border-top:6px solid var(--rust,#b85c2c);border-bottom:0;transition:transform .15s}
:is(.sitenav,.roomnav)>details[open]>summary::after{transform:rotate(180deg)}
:is(.sitenav,.roomnav) a:focus-visible,:is(.sitenav,.roomnav) summary:focus-visible{outline:2px solid var(--rust,#b85c2c);outline-offset:2px}
.roomlist{position:absolute;right:0;top:calc(100% + 6px);z-index:950;display:grid;gap:10px;min-width:250px;max-height:min(70vh,640px);overflow:auto;padding:16px 18px;background:rgba(8,8,8,.96);border:1px solid var(--rust,#b85c2c);font-size:14px;letter-spacing:.14em;text-align:left}
.roomlist a{text-decoration:none;color:rgba(244,241,234,.78)}
.roomlist a:hover{color:var(--paper,#f4f1ea)}
.roomlist .stg{margin-top:6px;font-size:15px;letter-spacing:.24em;color:#e8a077}
.roomlist .stg:first-child{margin-top:0}
.roomlist .cur{color:#d9804f}
.roomlist .all{margin-top:4px;padding-top:9px;border-top:1px solid rgba(244,241,234,.14);color:rgba(244,241,234,.55)}
.roomlist a[style]{opacity:.9}.roomlist a[style]:hover{opacity:1;filter:brightness(1.25)}
.roomlist .cur[style]{text-decoration:underline;text-underline-offset:4px}
.navmore{display:none}
@media(max-width:760px){.navmore{display:block}.inl{display:none!important}:is(.sitenav,.roomnav){font-size:14px;letter-spacing:.08em}:is(.sitenav,.roomnav)>*{padding:8px 10px}:is(.sitenav,.roomnav)>details{padding:0}:is(.sitenav,.roomnav)>details>summary{padding:8px 12px}}