/* ==========================================================================
   Vol 101
   Black ground, one red, one yellow, one warm white. Red is the mark and the
   alarm; yellow is the live signal — it lights up whatever is *on*: the
   playing soundtrack, the active tab, the numbers, the agent. Condensed
   display type over full-bleed media, crop-mark brackets as the motif.
   ========================================================================== */

:root{
	--red:#ff1f2d;
	--gold:#ffc400;
	--ink:#050506;
	--paper:#f2efe9;

	--gold-dim:rgba(255,196,0,.42);
	--gold-ghost:rgba(255,196,0,.12);

	--ink-2:#0b0b0e;
	--ink-3:#121216;
	--line:rgba(242,239,233,.14);
	--line-2:rgba(242,239,233,.28);
	--dim:rgba(242,239,233,.56);
	--dimmer:rgba(242,239,233,.34);

	--display:"Anton","Haettenschweiler","Arial Narrow",Impact,sans-serif;
	--sans:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
	--mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

	--gut:clamp(20px,4.6vw,72px);
	--wrap:1560px;
	--sec-y:clamp(96px,13vh,190px);

	--ease:cubic-bezier(.16,1,.3,1);
	--ease-io:cubic-bezier(.65,.05,.36,1);

	--head-h:78px;
}

/* Registered so they can be transitioned and so a browser that does not
   understand them still gets a sane starting value. */
@property --cz{syntax:"<number>";inherits:false;initial-value:1.12}
@property --near{syntax:"<number>";inherits:true;initial-value:0}
@property --py{syntax:"<length>";inherits:false;initial-value:0px}

*,*::before,*::after{box-sizing:border-box}

html{
	-webkit-text-size-adjust:100%;
	scroll-behavior:auto;
}

body{
	margin:0;
	background:var(--ink);
	color:var(--paper);
	font-family:var(--sans);
	font-size:clamp(15px,1.02vw,17px);
	line-height:1.62;
	font-weight:350;
	letter-spacing:.005em;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

body.is-locked{overflow:hidden}

img,svg,video,canvas{max-width:100%;display:block}
img{height:auto}

a{color:inherit;text-decoration:none}

button{
	font:inherit;color:inherit;background:none;border:0;padding:0;
	cursor:pointer;text-align:inherit;
}

h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}

::selection{background:var(--gold);color:var(--ink)}

:focus-visible{
	outline:2px solid var(--gold);
	outline-offset:3px;
}

.screen-reader-text{
	position:absolute!important;width:1px;height:1px;overflow:hidden;
	clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

.skip{
	position:fixed;top:-100px;left:16px;z-index:9999;
	background:var(--red);color:var(--paper);
	padding:12px 18px;font-family:var(--mono);font-size:12px;
	text-transform:uppercase;letter-spacing:.14em;
	transition:top .2s var(--ease);
}
.skip:focus{top:16px}

/* ---------------------------------------------------------------- Type --- */

.display{
	font-family:var(--display);
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:.005em;
	line-height:.9;
}

.mono{
	font-family:var(--mono);
	font-size:clamp(10px,.72vw,12px);
	text-transform:uppercase;
	letter-spacing:.2em;
	line-height:1.5;
}

.dim{color:var(--dim)}

.eyebrow{
	display:flex;align-items:center;gap:12px;
	color:var(--dim);
	margin-bottom:clamp(20px,2.6vw,34px);
}

.sq{
	width:9px;height:9px;background:var(--red);
	display:inline-block;flex:none;
}

.lede{
	font-size:clamp(17px,1.5vw,23px);
	line-height:1.5;
	color:var(--dim);
	max-width:56ch;
	font-weight:300;
}

/* ------------------------------------------------------------- Layout --- */

.wrap{
	width:100%;
	max-width:var(--wrap);
	margin-inline:auto;
	padding-inline:var(--gut);
}
.wrap--narrow{max-width:1020px}

.section{
	position:relative;
	padding-block:var(--sec-y);
	z-index:2;
}

.section.invert{
	background:var(--paper);
	color:var(--ink);
}
.section.invert .dim{color:rgba(5,5,6,.6)}
.section.invert .eyebrow{color:rgba(5,5,6,.55)}

.sec-head{margin-bottom:clamp(44px,6vw,84px)}
.sec-head--work{
	display:grid;
	grid-template-columns:1fr;
	gap:clamp(20px,3vw,48px);
	align-items:end;
}
@media (min-width:960px){
	.sec-head--work{grid-template-columns:1.35fr .85fr}
}
.sec-sub{color:var(--dim);font-size:clamp(15px,1.15vw,18px);max-width:46ch}
.section.invert .sec-sub{color:rgba(5,5,6,.62)}

.sec-h{
	font-size:clamp(42px,7.4vw,116px);
	line-height:.88;
	max-width:18ch;
}

.statement{
	font-size:clamp(30px,4.6vw,74px);
	line-height:.98;
	max-width:20ch;
	margin-bottom:clamp(48px,6vw,90px);
}

/* --------------------------------------------------- Reveal primitives --- */

.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w-in{display:inline-block;will-change:transform}
.split .c{display:inline-block}

.split .w-in{
	transform:translateY(105%) rotate(3deg);
	opacity:0;
	transition:transform .95s var(--ease),opacity .6s linear;
	transition-delay:calc(var(--i) * 22ms);
}
.split.is-in .w-in{transform:none;opacity:1}

[data-reveal]{
	opacity:0;
	transform:translateY(26px);
	transition:opacity .8s var(--ease),transform .9s var(--ease);
	transition-delay:calc(var(--i,0) * 70ms);
}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
	.split .w-in,[data-reveal]{transition:none!important;opacity:1!important;transform:none!important}
	*{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* --------------------------------------------------------- Fixed layer --- */

.gl{
	position:fixed;inset:0;
	width:100vw;height:100vh;
	z-index:0;
	pointer-events:none;
	opacity:0;
	transition:opacity 1.4s var(--ease);
}
.gl.is-on{opacity:1}
body.no-gl .gl{display:none}

.grain{
	position:fixed;inset:-120px;z-index:60;pointer-events:none;
	opacity:.32;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
	animation:grain 8s steps(6) infinite;
}
@keyframes grain{
	0%{transform:translate(0,0)}
	20%{transform:translate(-6%,4%)}
	40%{transform:translate(4%,-5%)}
	60%{transform:translate(-3%,-4%)}
	80%{transform:translate(5%,3%)}
	100%{transform:translate(0,0)}
}

.vignette{
	position:fixed;inset:0;z-index:59;pointer-events:none;
	background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%);
}

.rail{
	position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
	background:rgba(242,239,233,.08);
	pointer-events:none;
}
.rail-fill{
	display:block;height:100%;width:0;
	background:linear-gradient(90deg,var(--red),var(--gold));
	transform-origin:0 50%;
}

/* ------------------------------------------------------------- Cursor --- */

.cursor{
	position:fixed;top:0;left:0;z-index:90;pointer-events:none;
	mix-blend-mode:difference;
	opacity:0;transition:opacity .3s;
}
.cursor.is-on{opacity:1}
.cursor-dot{
	position:absolute;width:6px;height:6px;border-radius:50%;
	background:var(--paper);transform:translate(-50%,-50%);
}
.cursor-ring{
	position:absolute;width:38px;height:38px;border-radius:50%;
	border:1px solid var(--paper);transform:translate(-50%,-50%) scale(1);
	transition:width .3s var(--ease),height .3s var(--ease),background .3s;
}
.cursor.is-hot .cursor-ring{width:74px;height:74px;background:rgba(242,239,233,.1)}
.cursor-label{
	position:absolute;transform:translate(-50%,-50%);
	font-family:var(--mono);font-size:9px;text-transform:uppercase;
	letter-spacing:.18em;color:var(--paper);opacity:0;
	transition:opacity .25s;white-space:nowrap;
}
.cursor.is-hot .cursor-label{opacity:1}

@media (hover:none),(pointer:coarse){
	.cursor{display:none}
}
body.no-cursor .cursor{display:none}

/* --------------------------------------------------------------- Gate --- */

.gate{
	position:fixed;inset:0;z-index:100;
	background:var(--ink);
	display:grid;place-items:center;
	text-align:center;
	transition:opacity .9s var(--ease),visibility .9s;
}
.gate.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-in{padding:var(--gut);width:min(560px,100%)}

.deck{color:var(--dimmer);margin-bottom:26px}
.deck svg{width:min(280px,62vw);margin-inline:auto;overflow:visible}
.deck-platter{color:var(--line-2)}
.deck-ring{transform-origin:150px 170px;animation:spin 9s linear infinite}
.deck-ring2{transform-origin:150px 170px;animation:spin 14s linear infinite reverse}
.deck-arm{transform-origin:268px 86px;transform:rotate(-18deg);transition:transform 1s var(--ease)}
.gate.is-armed .deck-arm{transform:rotate(0)}
.deck-led{color:var(--gold);animation:blink 1.6s steps(1) infinite}
.deck-fader{color:var(--red)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}

.gate-line{color:var(--dim);margin-bottom:26px}
.gate-pct{color:var(--paper)}

.btn-gate{
	position:relative;isolation:isolate;
	font-family:var(--display);
	font-size:clamp(20px,2.6vw,32px);
	text-transform:uppercase;letter-spacing:.02em;
	padding:20px 52px;
	color:var(--paper);
	border:1px solid var(--line-2);
	transition:color .35s var(--ease),border-color .35s;
	overflow:hidden;
}
.btn-gate::after{
	content:"";position:absolute;inset:0;background:var(--red);
	transform:scaleY(0);transform-origin:50% 100%;z-index:-1;
	transition:transform .5s var(--ease);
}
.btn-gate:hover{border-color:var(--red)}
.btn-gate:hover::after{transform:scaleY(1)}
.btn-gate .btn-label{position:relative;z-index:1}
.btn-gate .brackets::before,.btn-gate .brackets::after{border-color:var(--red);width:14px;height:14px}
.btn-gate:hover .brackets::before,.btn-gate:hover .brackets::after{border-color:var(--paper);width:20px;height:20px}

.gate-mute{
	display:block;margin:22px auto 0;
	font-family:var(--mono);font-size:11px;text-transform:uppercase;
	letter-spacing:.18em;color:var(--dimmer);
	transition:color .25s;
}
.gate-mute:hover{color:var(--paper)}

.gate-note{
	margin-top:16px;font-size:13px;color:var(--dimmer);
	font-weight:300;
}

/* ------------------------------------------------------------- Header --- */

.head{
	position:fixed;top:0;left:0;right:0;z-index:80;
	height:var(--head-h);
	display:flex;align-items:center;justify-content:space-between;
	gap:20px;
	padding-inline:var(--gut);
	mix-blend-mode:normal;
	transition:transform .5s var(--ease),background .4s,backdrop-filter .4s;
}
.head.is-hidden{transform:translateY(-110%)}
.head.is-stuck{
	background:rgba(5,5,6,.72);
	backdrop-filter:blur(14px) saturate(1.2);
	border-bottom:1px solid var(--line);
}

.head-l{display:flex;align-items:center;gap:clamp(14px,2vw,30px);min-width:0}

.mark{display:flex;align-items:center;gap:12px}
.mark img{max-height:34px;width:auto}
.mark-sq{
	width:18px;height:18px;background:var(--red);flex:none;
	transition:transform .5s var(--ease);
}
.mark:hover .mark-sq{transform:rotate(90deg) scale(1.15)}
.mark-name{
	font-family:var(--display);font-size:19px;text-transform:uppercase;
	letter-spacing:.03em;white-space:nowrap;
}

.sound{
	display:flex;align-items:center;gap:10px;
	color:var(--dim);transition:color .25s;
	white-space:nowrap;
	/* A hit area you can actually hit. The label is hidden on narrow screens,
	   which would otherwise leave only the 18px meter to tap. The negative
	   margin cancels the padding so nothing in the header moves. */
	padding:14px;
	margin:-14px;
}
.sound:hover{color:var(--paper)}
.sound[aria-pressed="true"]{color:var(--paper)}

.sound-eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.sound-eq i{
	width:2px;height:3px;background:currentColor;display:block;
	transition:height .2s;
}
.sound[aria-pressed="true"] .sound-eq i{
	background:var(--gold);
	animation:eq .9s ease-in-out infinite alternate;
}
.sound-eq i:nth-child(1){animation-delay:0s}
.sound-eq i:nth-child(2){animation-delay:.12s}
.sound-eq i:nth-child(3){animation-delay:.24s}
.sound-eq i:nth-child(4){animation-delay:.36s}
.sound-eq i:nth-child(5){animation-delay:.48s}
@keyframes eq{from{height:3px}to{height:14px}}

.nav{display:none}
@media (min-width:1100px){
	.nav{display:block}
}
.nav-list{display:flex;gap:clamp(18px,2.2vw,38px)}
.nav-list a{
	display:flex;align-items:baseline;gap:7px;
	font-size:14px;letter-spacing:.02em;
	position:relative;padding-block:6px;
}
.nav-no{color:var(--gold);font-size:9px}
.nav-list a::after{
	content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
	background:var(--paper);transform:scaleX(0);transform-origin:100% 50%;
	transition:transform .5s var(--ease);
}
.nav-list a:hover::after{transform:scaleX(1);transform-origin:0 50%}

.head-r{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px)}

.avail{
	display:none;align-items:center;gap:9px;color:var(--dim);
	white-space:nowrap;
}
@media (min-width:760px){.avail{display:flex}}
.avail i{
	width:7px;height:7px;border-radius:50%;background:var(--gold);
	animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
	0%{box-shadow:0 0 0 0 rgba(255,31,45,.7)}
	70%{box-shadow:0 0 0 9px rgba(255,31,45,0)}
	100%{box-shadow:0 0 0 0 rgba(255,31,45,0)}
}

.burger{
	position:relative;width:52px;height:52px;
	display:grid;place-content:center;gap:5px;
}
.burger i{
	display:block;width:22px;height:1.5px;background:var(--paper);
	transition:transform .4s var(--ease),opacity .3s;
}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* Crop-mark brackets — the recurring frame device. */
.brackets{position:absolute;inset:0;pointer-events:none}
.brackets::before,.brackets::after{
	content:"";position:absolute;width:11px;height:11px;
	border:1px solid var(--line-2);
	transition:width .4s var(--ease),height .4s var(--ease),border-color .4s;
}
.brackets::before{top:0;left:0;border-right:0;border-bottom:0}
.brackets::after{bottom:0;right:0;border-left:0;border-top:0}
.brackets--big::before,.brackets--big::after{width:26px;height:26px}
.burger:hover .brackets::before,.burger:hover .brackets::after,
.btn:hover .brackets::before,.btn:hover .brackets::after{
	width:17px;height:17px;border-color:var(--red);
}

/* ------------------------------------------------------------- Drawer --- */

.drawer{
	position:fixed;inset:0;z-index:79;
	background:var(--ink);
	clip-path:inset(0 0 100% 0);
	transition:clip-path .8s var(--ease);
}
.drawer.is-open{clip-path:inset(0 0 0 0)}
.drawer-in{
	height:100%;display:flex;flex-direction:column;justify-content:center;
	gap:clamp(30px,6vh,64px);
	padding:calc(var(--head-h) + 30px) var(--gut) var(--gut);
}
.drawer-list{display:grid;gap:6px}
.drawer-list a{
	display:flex;align-items:baseline;gap:16px;
	font-family:var(--display);text-transform:uppercase;
	font-size:clamp(38px,8.5vw,96px);line-height:1;
	transition:color .3s,transform .5s var(--ease);
}
.drawer-list a .mono{color:var(--gold);font-size:11px}
.drawer-list a:hover{color:var(--red);transform:translateX(14px)}
.drawer-meta{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:24px}
.drawer-mail{font-size:clamp(20px,3vw,34px);font-family:var(--display);text-transform:uppercase}
.drawer-social{display:flex;flex-wrap:wrap;gap:18px}
.drawer-social a{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--dim)}
.drawer-social a:hover{color:var(--red)}

/* -------------------------------------------------------------- Button --- */

.btn{
	position:relative;display:inline-flex;align-items:center;gap:14px;
	padding:17px 30px;
	font-family:var(--mono);font-size:11px;text-transform:uppercase;
	letter-spacing:.2em;
	background:var(--red);color:var(--paper);
	overflow:hidden;
	transition:color .35s var(--ease);
	will-change:transform;
}
.btn::before{
	content:"";position:absolute;inset:0;background:var(--paper);
	transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn>:not(.brackets){position:relative;z-index:1}
.btn-arrow{transition:transform .45s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(6px)}

.btn-ghost{
	background:transparent;color:var(--paper);
	border:1px solid var(--line-2);
}
.btn-ghost:hover{color:var(--ink)}
.section.invert .btn-ghost{color:var(--ink);border-color:rgba(5,5,6,.28)}
.section.invert .btn-ghost::before{background:var(--ink)}
.section.invert .btn-ghost:hover{color:var(--paper)}

.btn-big{padding:22px 40px;font-size:12px}

/* ---------------------------------------------------------------- Hero --- */

/* A soft wedge of ground under the headline: the field behind it is allowed
   to be busy, the type is not allowed to fight it. */
.hero::before{
	content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
	/* Weighted to the left, where the headline sits, and falling away to almost
	   nothing on the right so the photo corridor is actually visible. */
	background:
		linear-gradient(100deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.8) 30%,rgba(5,5,6,.4) 58%,rgba(5,5,6,.06) 88%),
		linear-gradient(to top,rgba(5,5,6,.86) 0%,rgba(5,5,6,.24) 32%,transparent 54%),
		linear-gradient(to bottom,rgba(5,5,6,.72) 0%,transparent 17%);
}

.hero{
	min-height:100svh;
	display:flex;align-items:flex-end;
	padding-top:calc(var(--head-h) + 24px);
	padding-bottom:clamp(24px,4vh,48px);
	overflow:hidden;
}
.hero-in{width:100%}

.hero-eyebrow{
	display:flex;align-items:center;gap:12px;
	color:rgba(242,239,233,.7);margin-bottom:clamp(16px,2vw,26px);
}

.hero-h{
	text-shadow:0 6px 44px rgba(5,5,6,.75);
	font-family:var(--display);
	text-transform:uppercase;
	font-size:clamp(46px,10.4vw,180px);
	line-height:.84;
	letter-spacing:-.012em;
	margin-bottom:clamp(20px,2.6vw,36px);
}
.hero-l{display:block;will-change:transform}
.hero-l--red{color:var(--red)}
.hero-l .c{
	display:inline-block;
	transform:translateY(102%);
	opacity:0;
	animation:heroIn 1.05s var(--ease) forwards;
	animation-delay:calc(var(--i) * 26ms + 120ms);
	animation-play-state:paused;
}
body.is-entered .hero-l .c{animation-play-state:running}
@keyframes heroIn{to{transform:none;opacity:1}}

.hero-foot{
	display:grid;gap:clamp(22px,3vw,40px);
	align-items:end;
}
@media (min-width:900px){
	.hero-foot{grid-template-columns:1fr auto}
}
.hero-sub{max-width:48ch;color:rgba(242,239,233,.72);font-size:clamp(15px,1.2vw,19px);font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

.scroll-cue{
	margin-top:clamp(18px,2.6vh,34px);
	color:var(--dimmer);display:flex;align-items:center;gap:10px;
}
.scroll-arrow{
	display:inline-block;color:var(--gold);
	animation:cue 2.2s var(--ease-io) infinite;
}
@keyframes cue{
	0%,100%{transform:translateY(0);opacity:1}
	50%{transform:translateY(7px);opacity:.35}
}

/* ---------------------------------------------------- Soundtrack plate --- */

.plate{
	display:flex;align-items:center;gap:18px;
	width:max-content;
	padding:12px 24px 12px 12px;
	border:1px solid var(--line);
	background:rgba(11,11,14,.6);
	backdrop-filter:blur(10px);
	margin-bottom:clamp(20px,2.6vw,34px);
	max-width:100%;
}
.plate-btn{position:relative;width:56px;height:56px;flex:none;display:grid;place-items:center}
.plate-disc{
	position:absolute;inset:0;border-radius:50%;
	background:
		radial-gradient(circle at 50% 50%,var(--red) 0 13%,transparent 13.5%),
		repeating-radial-gradient(circle at 50% 50%,#101014 0 2px,#17171c 2px 3px);
	border:1px solid var(--line-2);
}
.plate-disc i{
	position:absolute;inset:0;border-radius:50%;
	background:conic-gradient(from 0deg,rgba(255,255,255,.14),transparent 25%,rgba(255,255,255,.09) 50%,transparent 75%,rgba(255,255,255,.14));
}
body.is-playing .plate-disc{animation:spin 3.6s linear infinite}
.plate-icon{
	position:relative;z-index:1;width:0;height:0;
	border-left:13px solid var(--paper);
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	margin-left:4px;
	transition:opacity .2s;
}
body.is-playing .plate-icon{
	width:12px;height:15px;border:0;margin-left:0;
	background:linear-gradient(90deg,var(--paper) 0 4px,transparent 4px 8px,var(--paper) 8px 12px);
}
.plate-meta{min-width:0}
.plate-title{color:var(--paper);letter-spacing:.14em}
.plate-artist{margin-top:3px;font-size:9px;letter-spacing:.1em}
.plate-bars{display:flex;align-items:flex-end;gap:2px;height:16px;margin-top:9px}
.plate-bars i{
	width:2px;height:2px;background:var(--line-2);display:block;
	transform-origin:50% 100%;
}
body.is-playing .plate-bars i{
	background:var(--gold);
	animation:bars 1.1s ease-in-out infinite alternate;
	animation-delay:calc(var(--i) * -70ms);
}
@keyframes bars{from{height:2px}to{height:16px}}

/* -------------------------------------------------------------- Ticker --- */

.ticker{
	position:relative;z-index:3;
	background:var(--red);
	color:var(--paper);
	padding-block:clamp(10px,1.2vw,18px);
	overflow:hidden;
	border-block:2px solid var(--gold);
}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker-item{
	font-size:clamp(20px,3vw,42px);
	padding-inline:.4em;
	white-space:nowrap;
}

/* --------------------------------------------------------------- About --- */

/* The photo corridor runs on behind this section, so the copy needs its own
   ground. Lighter at the top, where it meets the hero, so the two read as one
   continuous space rather than two rooms. */
.about::before{
	content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
	background:
		linear-gradient(to bottom,rgba(5,5,6,.62) 0%,rgba(5,5,6,.84) 30%,rgba(5,5,6,.9) 100%);
}

.about-grid{
	display:grid;gap:clamp(30px,4vw,64px);
	align-items:start;
	margin-bottom:clamp(56px,7vw,110px);
}
@media (min-width:900px){
	.about-grid{grid-template-columns:.85fr 1.15fr}
}
.about-fig{
	position:relative;margin:0;
	perspective:1200px;
}
.about-frame{
	position:relative;
	aspect-ratio:4/5;
	overflow:hidden;
	background:var(--ink-2);
	transform:translateZ(var(--fz,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
	transform-style:preserve-3d;
	will-change:transform;
}
/* The picture is taller than its frame on purpose: that overhang is the room
   it has to travel against the scroll without the layout moving. */
.about-img,.about-ghost{
	position:absolute;left:0;top:50%;
	width:100%;height:124%;
	object-fit:cover;
	max-width:none;
}
.about-img{
	transform:translateY(calc(-50% + var(--fy,0px)));
	filter:grayscale(.12) contrast(1.07);
}
/* Offset copy in red — print misregistration, not a glitch. */
.about-ghost{
	z-index:2;
	transform:translateY(calc(-50% + var(--gy,0px))) translateX(var(--gx,0px));
	filter:grayscale(1) sepia(1) saturate(700%) hue-rotate(-28deg) brightness(.72) contrast(1.3);
	mix-blend-mode:screen;
	opacity:.42;
}
.about-scan{
	position:absolute;left:0;right:0;top:var(--scan,50%);height:1px;z-index:3;
	background:linear-gradient(90deg,transparent,var(--red),transparent);
	opacity:.65;
}
.about-frame::after{
	content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
	background:repeating-linear-gradient(to bottom,rgba(0,0,0,.2) 0 1px,transparent 1px 4px);
	opacity:.34;mix-blend-mode:multiply;
}
.about-wipe{
	position:absolute;inset:0;z-index:5;background:var(--red);
	transform-origin:0 50%;
	transition:transform 1.15s var(--ease);
}
.about-fig.is-shown .about-wipe{transform:scaleX(0);transform-origin:100% 50%}
.about-tag{
	position:absolute;left:0;bottom:0;z-index:4;
	display:flex;align-items:center;gap:8px;
	background:var(--ink);color:var(--paper);
	padding:9px 14px;font-size:10px;
}
.about-tag-dot{
	width:7px;height:7px;border-radius:50%;background:var(--red);
	animation:blink 1.8s steps(1) infinite;
}
.about-fig .brackets{z-index:4}
.about-fig .brackets::before,.about-fig .brackets::after{border-color:rgba(242,239,233,.55)}
.about-fig figcaption{
	margin-top:14px;color:var(--dimmer);
}
/* The call-out. Set in the display face so it reads as a pulled-out line
   rather than as a bolder sentence, and given its own line-height so the
   paragraph around it does not open up. */
.hot{
	display:inline;
	font-family:var(--display);
	font-weight:400;
	font-style:normal;
	text-transform:uppercase;
	font-size:1.62em;
	line-height:.9;
	letter-spacing:.004em;
	color:var(--gold);
	/* Keeps the taller glyphs from shunting the lines above and below apart. */
	margin-inline:.04em;
	vertical-align:-0.04em;
}
.section.invert .hot{color:#b98a00}
.block-body .hot,.prose .hot{font-size:1.42em}

.about-p{
	font-size:clamp(15px,1.25vw,19px);
	color:var(--dim);
	margin-bottom:1.3em;
	max-width:60ch;
}
.about-p:first-child{
	color:var(--paper);
	font-size:clamp(17px,1.5vw,23px);
}
.sig{
	color:var(--red);font-size:clamp(26px,3vw,42px);
	margin-top:.4em;
}

.stats{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:1px;
	background:var(--line);
	border:1px solid var(--line);
}
@media (min-width:860px){
	.stats{grid-template-columns:repeat(4,1fr)}
}
.stats li{
	background:var(--ink);
	padding:clamp(22px,2.6vw,40px);
	display:grid;gap:10px;align-content:start;
}
.stat-v{
	font-size:clamp(36px,5vw,76px);
	line-height:.9;
	color:var(--gold);
}
.stat-l{color:var(--dim)}

/* ------------------------------------------------------------ Services --- */

.svc-list{border-top:1px solid var(--line)}
.svc{
	position:relative;
	display:grid;
	gap:clamp(10px,1.6vw,26px);
	grid-template-columns:1fr;
	padding-block:clamp(26px,3.4vw,48px);
	border-bottom:1px solid var(--line);
	transition:padding-left .5s var(--ease);
}
@media (min-width:900px){
	.svc{grid-template-columns:64px minmax(180px,.7fr) 1.5fr;align-items:start}
	.svc:hover{padding-left:18px}
}
.svc-no{color:var(--gold);padding-top:.5em}
.svc-t{
	font-size:clamp(26px,3.4vw,54px);
	line-height:.92;
}
.svc-d{color:var(--dim);max-width:56ch;font-size:clamp(15px,1.1vw,18px)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{
	border:1px solid currentColor;
	padding:5px 11px;
	font-family:var(--mono);font-size:9px;
	text-transform:uppercase;letter-spacing:.16em;
	/* Light by default so chips also work in the reader overlay, which is not
	   inside a section at all. */
	color:var(--dimmer);
}
.section.invert .chip{color:rgba(5,5,6,.5)}
.svc-line{
	position:absolute;left:0;bottom:-1px;height:1px;width:100%;
	background:linear-gradient(90deg,var(--red),var(--gold));transform:scaleX(0);transform-origin:0 50%;
	transition:transform .7s var(--ease);
}
.svc:hover .svc-line{transform:scaleX(1)}

/* ----------------------------------------------------------------- Work --- */

.tabs-wrap{
	position:sticky;top:var(--head-h);z-index:20;
	/* Opaque, not a gradient: the grid scrolls underneath a sticky element, and
	   a translucent bar puts card images behind the tab labels. */
	background:var(--ink);
	padding-block:16px 18px;
	margin-bottom:clamp(20px,3vw,40px);
}
.tabs-wrap::after{
	content:"";position:absolute;left:0;right:0;top:100%;height:26px;
	background:linear-gradient(var(--ink),transparent);
	pointer-events:none;
}

.tabs{
	position:relative;
	display:flex;gap:4px;
	overflow-x:auto;
	scrollbar-width:none;
	border-bottom:1px solid var(--line);
	padding-bottom:14px;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
	display:inline-flex;align-items:baseline;gap:8px;
	padding:10px 16px;
	white-space:nowrap;
	color:var(--dim);
	transition:color .3s;
	position:relative;
}
.tab:hover{color:var(--paper)}
.tab.is-on{color:var(--paper)}
.tab-t{font-size:clamp(14px,1.15vw,18px);letter-spacing:.01em}
.tab-n{font-size:9px;color:var(--gold)}
.tab-ink{
	position:absolute;left:0;bottom:-1px;height:2px;width:0;
	background:linear-gradient(90deg,var(--red),var(--gold));
	transition:transform .55s var(--ease),width .55s var(--ease);
}
.track-blurb{
	color:var(--dimmer);margin-top:14px;min-height:1.5em;
	transition:opacity .3s;
}

.grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	/* Dense: a double-width featured card otherwise leaves a hole whenever it
	   cannot fit in the columns left in its row. */
	grid-auto-flow:dense;
	gap:clamp(10px,1.4vw,22px);
	row-gap:clamp(18px,2.2vw,36px);
}
@media (min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1280px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{
	opacity:0;transform:translateY(30px) scale(.985);
	transition:opacity .7s var(--ease),transform .8s var(--ease);
	transition-delay:calc(var(--i,0) * 45ms);
}
.card.is-in{opacity:1;transform:none}
.card.is-hidden{display:none}

/* --- the 3D conveyor ---------------------------------------------------- */

/* Every container whose children ride the conveyor shares one perspective, so
   blocks in different sections tilt on the same axis by the same amount and the
   page reads as one space. */
.svc-list,.steps,.stats,.grid.is-3d{
	perspective:1600px;
	perspective-origin:50% 45%;
}
[data-3d]{
	transform-style:preserve-3d;
	backface-visibility:hidden;
	/* JS writes transform every frame — a transition on it would lag behind the
	   scroll instead of tracking it. */
	transition:opacity .7s var(--ease);
	will-change:transform;
}

.grid.is-3d{
	perspective:1700px;
	perspective-origin:50% 45%;
}
.grid.is-3d .card{
	transform-style:preserve-3d;
	backface-visibility:hidden;
	/* JS writes transform every frame — a transition on it would lag behind
	   the scroll instead of tracking it. */
	transition:opacity .7s var(--ease);
	will-change:transform;
}
.grid.is-3d .card-btn{transform-style:preserve-3d}
.grid.is-3d .card-fig{
	box-shadow:0 calc(16px + 26px * var(--near,0)) calc(30px + 44px * var(--near,0)) rgba(0,0,0,.45);
}
.grid.is-3d .card-fig .brackets::before,
.grid.is-3d .card-fig .brackets::after{
	border-color:color-mix(in srgb,var(--red) calc(var(--near,0) * 100%),rgba(242,239,233,.45));
	width:calc(11px + 9px * var(--near,0));
	height:calc(11px + 9px * var(--near,0));
}
.grid.is-3d .card-meta{transform:translateZ(10px)}
.grid.is-3d .card-track{transform:translateZ(26px)}
.grid.is-3d .card-play{transform:translateZ(38px)}
.grid.is-3d .card-btn:hover .card-play{transform:translateZ(38px) scale(1.12)}
@media (min-width:760px){
	.card--wide{grid-column:span 2}
}

.card-btn{display:block;width:100%;height:100%}

.card-fig{
	position:relative;margin:0;overflow:hidden;
	background:var(--ink-2);
	aspect-ratio:4/5;
}
.card--wide .card-fig{aspect-ratio:3/2}
.card-fig .cover-img{
	width:100%;height:100%;object-fit:cover;
	transform:translate3d(0,var(--py,0px),0) scale(var(--cz,1.12));
	filter:grayscale(.35) contrast(1.05) brightness(.86);
	transition:filter .7s var(--ease),--cz 1.1s var(--ease);
}
.card-btn:hover .cover-img{--cz:1.2;filter:grayscale(0) contrast(1.08) brightness(1)}
.card-fig .brackets::before,.card-fig .brackets::after{
	z-index:2;border-color:rgba(242,239,233,.5);
}
.card-btn:hover .brackets::before,.card-btn:hover .brackets::after{border-color:var(--red);width:20px;height:20px}

.card-track{
	position:absolute;left:12px;top:12px;z-index:2;
	background:var(--ink);color:var(--paper);
	padding:5px 9px;font-size:9px;
}
.card-play{
	position:absolute;right:12px;bottom:12px;z-index:2;
	width:38px;height:38px;border-radius:50%;
	border:1px solid rgba(242,239,233,.5);
	display:grid;place-items:center;
	background:rgba(5,5,6,.4);backdrop-filter:blur(4px);
	transition:background .35s,border-color .35s,transform .5s var(--ease);
}
.card-play i{
	width:0;height:0;margin-left:2px;
	border-left:9px solid var(--paper);
	border-top:5.5px solid transparent;
	border-bottom:5.5px solid transparent;
}
.card-btn:hover .card-play{background:var(--red);border-color:var(--red);transform:scale(1.12)}

.card-meta{padding:16px 2px 6px;display:grid;gap:7px}
.card-line{display:flex;justify-content:space-between;gap:12px;color:var(--dim)}
.card-t{
	font-size:clamp(15px,1.15vw,19px);
	line-height:1.25;font-weight:500;letter-spacing:-.005em;
}
.card-s{color:var(--dim);font-size:13.5px;line-height:1.5}
.card-cta{
	color:var(--red);display:inline-flex;gap:8px;align-items:center;
	opacity:0;transform:translateY(-4px);
	transition:opacity .4s,transform .4s var(--ease);
}
.card-btn:hover .card-cta{opacity:1;transform:none}
.card-cta i{transition:transform .4s var(--ease)}
.card-btn:hover .card-cta i{transform:translateX(5px)}

.grid-empty{margin-top:40px;color:var(--dimmer)}
.stories{display:none}

/* ------------------------------------------------------------- Process --- */

.steps{display:grid;gap:clamp(14px,2vw,28px)}
.step{position:relative}
@media (min-width:1000px){
	.step{position:sticky;top:calc(var(--head-h) + 40px)}
}
.step-in{
	display:grid;gap:clamp(14px,2vw,40px);
	grid-template-columns:1fr;
	padding:clamp(26px,3.4vw,52px);
	background:var(--ink-2);
	border:1px solid var(--line);
}
@media (min-width:820px){
	.step-in{grid-template-columns:auto 1fr;align-items:start}
}
.step-no{
	font-size:clamp(46px,7vw,110px);
	line-height:.8;
	color:transparent;
	-webkit-text-stroke:1px var(--line-2);
	transition:color .6s var(--ease),-webkit-text-stroke-color .6s;
}
.step-in.is-in .step-no{color:var(--gold);-webkit-text-stroke-color:transparent}
.step-t{font-size:clamp(26px,3.2vw,50px);margin-bottom:14px}
.step-d{color:var(--dim);max-width:58ch;font-size:clamp(15px,1.1vw,18px)}

/* ---------------------------------------------------------- Testimonials --- */

.orbit{
	--orbit:clamp(300px,52vw,620px);
	--node:clamp(58px,6.4vw,88px);
	--r:calc(var(--orbit) / 2);
	position:relative;
	display:grid;place-items:center;
	min-height:calc(var(--orbit) + clamp(40px,6vw,90px));
	margin-inline:auto;
	width:100%;
}

/* --- the dial ----------------------------------------------------------- */

.orbit-dial{
	position:absolute;left:50%;top:50%;
	width:var(--orbit);height:var(--orbit);
	transform:translate(-50%,-50%) rotate(var(--wobble,0deg));
	pointer-events:none;
}
.orbit-ring{
	position:absolute;inset:0;border-radius:50%;
	border:1px solid rgba(242,239,233,.14);
}
.orbit-ring--1{animation:spin 46s linear infinite}
.orbit-ring--2{
	inset:8%;
	border-style:dashed;
	border-color:rgba(242,239,233,.2);
	animation:spin 34s linear infinite reverse;
}
/* Sits just outside the quote block: a ring drawn through the text reads as
   noise rather than as structure. */
.orbit-ring--3{
	inset:16%;
	border-color:color-mix(in srgb,var(--red) 42%,transparent);
	border-top-color:var(--red);
	animation:spin 18s linear infinite;
}
.orbit-core{
	position:absolute;left:50%;top:50%;
	width:calc(var(--orbit) * 0.56);height:calc(var(--orbit) * 0.56);
	border-radius:50%;
	transform:translate(-50%,-50%);
	background:radial-gradient(circle at 50% 45%,
		color-mix(in srgb,var(--red) calc(var(--pulse,.4) * 16%),transparent),
		transparent 68%);
}

/* --- the people --------------------------------------------------------- */

.orbit-spin{
	position:absolute;left:50%;top:50%;
	width:var(--orbit);height:var(--orbit);
	transform:translate(-50%,-50%) rotate(var(--spin,0deg));
}
.orbit-node{
	position:absolute;left:50%;top:50%;
	width:var(--node);height:var(--node);
	margin:calc(var(--node) / -2);
	border-radius:50%;
	transform:
		rotate(var(--a,0deg))
		translateY(calc(var(--r) * -1))
		rotate(calc(-1 * (var(--a,0deg) + var(--spin,0deg))));
}
.node-face{
	position:absolute;inset:0;border-radius:50%;overflow:hidden;
	display:grid;place-items:center;
	background:var(--ink-2);
	border:1px solid rgba(242,239,233,.22);
	transition:transform .55s var(--ease),border-color .4s,box-shadow .5s var(--ease);
}
.node-face img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.9)}
.node-initials{
	color:var(--paper);
	font-size:calc(var(--node) * 0.34);
	letter-spacing:.02em;
	transition:color .4s;
}
.orbit-node::after{
	content:"";position:absolute;inset:-10px;border-radius:50%;
	border:1px solid var(--red);
	opacity:0;transform:scale(.86);
	transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.orbit-node:hover .node-face{transform:scale(1.08)}
.orbit-node.is-on .node-face{
	transform:scale(1.24);
	border-color:var(--red);
	box-shadow:0 18px 44px rgba(0,0,0,.6);
}
.orbit-node.is-on .node-initials{color:var(--red)}
.orbit-node.is-on::after{opacity:1;transform:scale(1.24)}
.orbit-node.is-on .node-face img{filter:grayscale(0) contrast(1.06) brightness(1)}
.node-name{
	position:absolute;left:50%;top:calc(100% + 12px);
	transform:translateX(-50%);
	white-space:nowrap;
	color:var(--dimmer);
	font-size:9px;
	opacity:0;transition:opacity .4s;
}
.orbit-node.is-on .node-name,.orbit-node:hover .node-name{opacity:1}

/* --- the quote in the middle -------------------------------------------- */

.orbit-stage{
	position:relative;z-index:2;
	width:min(calc(var(--orbit) * 0.6),40ch);
	display:grid;
	place-items:center;
	text-align:center;
}
.orbit-quote{
	grid-area:1/1;margin:0;
	display:grid;gap:16px;justify-items:center;
	opacity:0;visibility:hidden;
	transform:translateY(14px) scale(.97);
	filter:blur(6px);
	transition:opacity .6s var(--ease),transform .7s var(--ease),filter .6s var(--ease),visibility .6s;
}
.orbit-quote.is-on{opacity:1;visibility:visible;transform:none;filter:none}
.orbit-mark{font-size:44px;line-height:.5;color:var(--gold)}
.orbit-quote blockquote{margin:0}
.orbit-quote p{
	font-size:clamp(14px,1.05vw,17px);
	line-height:1.55;color:var(--paper);
}
.orbit-quote figcaption{display:grid;gap:4px}
.quote-name{font-weight:500}
.quote-role{color:var(--dimmer)}
.orbit-hint{
	position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
	color:var(--dimmer);
}

/* Reduced motion, or no JS: a plain readable stack. */
.orbit.is-static .orbit-dial,.orbit.is-static .orbit-hint{display:none}
.orbit.is-static .orbit-quote{opacity:1;visibility:visible;transform:none;filter:none;position:static;grid-area:auto;margin-bottom:34px}

@media (max-width:720px){
	.orbit{
		--orbit:min(300px,78vw);
		grid-template-rows:auto auto;
		gap:clamp(26px,7vw,46px);
		min-height:0;
	}
	.orbit-dial,.orbit-spin{
		position:relative;left:auto;top:auto;
		transform:none;
		margin-inline:auto;
	}
	.orbit-spin{
		margin-top:calc(var(--orbit) * -1);
		transform:rotate(var(--spin,0deg));
	}
	.orbit-dial{transform:rotate(var(--wobble,0deg))}
	.orbit-stage{width:100%}
	.orbit-hint{position:static;transform:none;margin-top:18px;text-align:center}
}

/* -------------------------------------------------------------- Reader --- */

.reader{
	position:fixed;inset:0;z-index:95;
	background:var(--ink);
	display:flex;flex-direction:column;
	clip-path:circle(0% at var(--ox,50%) var(--oy,50%));
	transition:clip-path .85s var(--ease);
}
.reader.is-open{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
.reader[hidden]{display:none}

.reader-bar{
	position:relative;flex:none;height:var(--head-h);
	display:flex;align-items:center;justify-content:flex-end;
	padding-inline:var(--gut);
	border-bottom:1px solid var(--line);
}
.reader-progress{
	position:absolute;left:0;bottom:-1px;height:2px;width:0;
	background:var(--red);
}
.reader-close{display:flex;align-items:center;gap:12px;color:var(--dim);transition:color .3s}
.reader-close:hover{color:var(--paper)}
.reader-close i{
	position:relative;width:16px;height:16px;display:block;
}
.reader-close i::before,.reader-close i::after{
	content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;background:currentColor;
}
.reader-close i::before{transform:rotate(45deg)}
.reader-close i::after{transform:rotate(-45deg)}

.reader-scroll{
	flex:1;overflow-y:auto;overscroll-behavior:contain;
	padding:clamp(34px,6vw,90px) var(--gut) clamp(60px,8vw,130px);
	scrollbar-width:thin;
}
.reader-nav{
	flex:none;display:flex;justify-content:space-between;gap:16px;
	padding:16px var(--gut);
	border-top:1px solid var(--line);
	background:var(--ink);
}
.reader-nav button{color:var(--dim);transition:color .3s}
.reader-nav button:hover{color:var(--red)}
.reader-nav button[disabled]{opacity:.25;pointer-events:none}

/* --------------------------------------------------------------- Story --- */

.story{max-width:1020px;margin-inline:auto}
.solo{padding-top:calc(var(--head-h) + clamp(28px,4vw,56px))}
.solo .story{margin-top:clamp(20px,3vw,40px)}
.solo-back{color:var(--dim)}
.solo-back a:hover{color:var(--red)}

.story-track{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.story-t{
	font-size:clamp(30px,5vw,74px);
	line-height:.92;
	margin-bottom:18px;
}
.story-sum{
	font-size:clamp(17px,1.5vw,23px);
	color:var(--dim);max-width:52ch;font-weight:300;
	margin-bottom:clamp(26px,3vw,44px);
}

.facts{
	display:grid;grid-template-columns:repeat(2,1fr);
	gap:1px;background:var(--line);
	border:1px solid var(--line);
	margin-bottom:clamp(30px,4vw,56px);
}
@media (min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--ink);padding:18px 20px;display:grid;gap:7px}
.fact dt{color:var(--dimmer)}
.fact dd{margin:0;font-size:14.5px;line-height:1.4}

/* YouTube facade */
.ytt{margin:0 0 clamp(30px,4vw,56px)}
.ytt-btn{
	position:relative;display:block;width:100%;
	aspect-ratio:16/9;overflow:hidden;background:var(--ink-2);
}
.ytt-btn img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.78);transition:filter .6s var(--ease),transform 1.2s var(--ease)}
.ytt-btn:hover img{filter:grayscale(0) brightness(.78);transform:scale(1.04)}
.ytt-scrim{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent,rgba(5,5,6,.55))}
.ytt-play{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;
	background:var(--red);display:grid;place-items:center;
	transition:transform .5s var(--ease),background .4s;
}
.ytt-play::after{
	content:"";position:absolute;inset:-14px;border-radius:50%;
	border:1px solid rgba(255,31,45,.4);
	animation:ring 2.6s var(--ease-io) infinite;
}
@keyframes ring{
	0%{transform:scale(.9);opacity:.9}
	100%{transform:scale(1.35);opacity:0}
}
.ytt-play i{
	width:0;height:0;margin-left:5px;
	border-left:18px solid var(--paper);
	border-top:11px solid transparent;
	border-bottom:11px solid transparent;
}
.ytt-btn:hover .ytt-play{transform:translate(-50%,-50%) scale(1.1)}
.ytt-label{
	position:absolute;left:0;bottom:0;
	padding:14px 18px;background:var(--ink);color:var(--paper);
	max-width:min(90%,520px);text-align:left;
	font-size:10px;
}
.ytt figcaption{margin-top:10px;font-size:9px}
.ytt iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

.story-metrics{
	display:grid;grid-template-columns:repeat(3,1fr);
	gap:1px;background:var(--line);border:1px solid var(--line);
	margin-bottom:clamp(30px,4vw,56px);
}
.story-metrics li{background:var(--ink);padding:clamp(18px,2vw,30px);display:grid;gap:8px}
.metric-v{font-size:clamp(26px,3.4vw,52px);color:var(--gold);line-height:.92}
.metric-l{color:var(--dim);font-size:9px}

.story-body{display:grid;gap:clamp(32px,4vw,60px)}
.block{
	display:grid;gap:clamp(12px,1.6vw,28px);
	grid-template-columns:1fr;
	border-top:1px solid var(--line);
	padding-top:clamp(20px,2.4vw,34px);
}
@media (min-width:820px){
	.block{grid-template-columns:minmax(150px,.42fr) 1.58fr}
}
.block-h{display:flex;align-items:baseline;gap:12px;align-self:start}
.block-h .mono{color:var(--gold)}
.block-h .display{font-size:clamp(20px,2.1vw,32px)}
.block-body p{
	color:var(--dim);font-size:clamp(15px,1.15vw,18.5px);
	margin-bottom:1.15em;max-width:64ch;
}
.block-body p:last-child{margin-bottom:0}
.block--brainstorm .block-body p:first-child{color:var(--paper)}

.story-gal{
	display:grid;gap:clamp(10px,1.4vw,20px);
	margin-top:clamp(30px,4vw,56px);
}
@media (min-width:760px){.story-gal{grid-template-columns:repeat(2,1fr)}}
.story-gal img{width:100%;filter:grayscale(.3) contrast(1.04)}

.story-foot{
	margin-top:clamp(40px,5vw,80px);
	padding-top:clamp(24px,3vw,44px);
	border-top:1px solid var(--line);
	display:grid;gap:16px;justify-items:start;
}
.story-permalink{color:var(--dimmer);transition:color .3s}
.story-permalink:hover{color:var(--red)}

/* -------------------------------------------------------------- Footer --- */

.foot{
	position:relative;z-index:2;
	padding-top:var(--sec-y);
	border-top:1px solid var(--line);
	overflow:hidden;
}
.foot-h{
	font-size:clamp(60px,15vw,240px);
	line-height:.82;
	margin-bottom:clamp(30px,4vw,60px);
}
.foot-grid{
	display:grid;gap:clamp(30px,4vw,70px);
	margin-bottom:clamp(40px,5vw,80px);
}
@media (min-width:960px){.foot-grid{grid-template-columns:1fr 1fr;align-items:start}}
.foot-copy{display:grid;gap:26px;justify-items:start}

.foot-lines{display:grid}
.foot-lines li{
	display:grid;gap:6px;
	padding-block:clamp(14px,1.8vw,24px);
	border-bottom:1px solid var(--line);
}
.foot-lines li:first-child{border-top:1px solid var(--line)}
.foot-lines .mono{color:var(--dimmer)}
.foot-lines a,.foot-plain{
	font-family:var(--display);text-transform:uppercase;
	font-size:clamp(20px,2.5vw,40px);line-height:1.05;
	display:inline-flex;align-items:baseline;gap:10px;
	transition:color .35s,transform .5s var(--ease);
}
.foot-lines a i{color:var(--gold);font-size:.6em;transition:transform .5s var(--ease)}
.foot-lines a:hover{color:var(--red)}
.foot-lines a:hover i{transform:translate(4px,-4px)}
.foot-plain{color:var(--dim)}

.foot-social{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,30px);margin-bottom:clamp(30px,4vw,60px)}
.foot-social a{
	font-family:var(--mono);font-size:11px;text-transform:uppercase;
	letter-spacing:.16em;color:var(--dim);
	display:inline-flex;gap:5px;transition:color .3s;
}
.foot-social a:hover{color:var(--red)}

.wordmark{
	line-height:.72;
	overflow:hidden;
	padding-block:clamp(10px,1.5vw,26px);
	user-select:none;
}
.wordmark span{
	display:block;
	font-family:var(--display);text-transform:uppercase;
	font-size:clamp(70px,19.4vw,340px);
	letter-spacing:-.02em;
	color:transparent;
	-webkit-text-stroke:1px var(--line-2);
	white-space:nowrap;
	text-align:center;
	will-change:transform;
}

.colophon{
	display:flex;flex-wrap:wrap;gap:14px 26px;
	align-items:center;justify-content:space-between;
	padding-block:26px;
	border-top:1px solid var(--line);
	color:var(--dimmer);
}
.to-top{color:var(--dim);transition:color .3s}
.to-top:hover{color:var(--gold)}

/* --------------------------------------------------------------- Prose --- */

.prose-sec{padding-top:calc(var(--head-h) + var(--sec-y))}
.prose{font-size:17px;color:var(--dim);margin-top:34px}
.prose h2,.prose h3{font-family:var(--display);text-transform:uppercase;color:var(--paper);margin:1.6em 0 .5em;line-height:1}
.prose h2{font-size:clamp(24px,3vw,42px)}
.prose p{margin-bottom:1.2em}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prose-fig{position:relative;margin:34px 0}
.post-list{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);margin-top:40px}
.post-item a{display:grid;gap:8px;background:var(--ink);padding:clamp(22px,2.4vw,36px);transition:background .4s}
.post-item a:hover{background:var(--ink-2)}
.post-t{font-size:clamp(22px,2.6vw,38px)}
.post-item p{color:var(--dim)}

.notfound{min-height:80svh;display:grid;align-content:center;padding-top:calc(var(--head-h) + 60px)}
.notfound .lede{margin:26px 0 34px}

.searchform{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.searchform input{
	flex:1;min-width:220px;background:var(--ink-2);border:1px solid var(--line);
	color:var(--paper);padding:16px 18px;font:inherit;
}
.searchform input:focus{outline:none;border-color:var(--red)}

.pagination{margin-top:50px;display:flex;gap:10px;font-family:var(--mono);font-size:12px}
.pagination .page-numbers{padding:10px 14px;border:1px solid var(--line);color:var(--dim)}
.pagination .current{background:var(--red);color:var(--paper);border-color:var(--red)}

/* --------------------------------------------------------------- Small --- */

@media (max-width:760px){
	:root{--head-h:64px}
	.head-l{gap:12px}
	.sound-label{display:none}
	.plate{width:100%}
	.tabs-wrap{top:var(--head-h)}
	.card--wide{grid-column:span 2}
	.reader-scroll{padding-inline:20px}
}

@media (max-width:420px){
	.grid{grid-template-columns:1fr}
	.card--wide{grid-column:span 1}
	.stats{grid-template-columns:1fr}
	.story-metrics{grid-template-columns:1fr}
	.facts{grid-template-columns:1fr}
}

/* When a browser refuses to start the track, the header says BLOCKED rather
   than a dead OFF. The next tap or keypress anywhere tries again. */
body.is-sound-blocked #sound-state{color:var(--red)}

/* ==========================================================================
   ASK NAIN — the talking agent
   Yellow is the agent's colour throughout: the header button, the mouth of
   the wireframe face, the send key. Red stays the site's mark, so the agent
   reads as a second voice rather than as more of the same page.
   ========================================================================== */

/* --------------------------------------------------------- Header button */

.ask{
	position:relative;
	display:flex;align-items:center;gap:9px;
	padding:11px 16px;
	border:1px solid var(--gold-dim);
	background:var(--gold-ghost);
	color:var(--gold);
	font-size:10px;letter-spacing:.2em;text-transform:uppercase;
	white-space:nowrap;
	transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.ask:hover,.ask[aria-expanded="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.ask .brackets::before,.ask .brackets::after{border-color:var(--gold);width:9px;height:9px}
.ask:hover .brackets::before,.ask:hover .brackets::after{width:15px;height:15px}

/* Three bars that idle, so the button reads as something live rather than as
   another link. They stop moving the moment the panel is open — it is talking
   in there instead. */
.ask-orb{display:flex;align-items:center;gap:2px;height:11px}
.ask-orb i{
	width:2px;height:4px;background:currentColor;display:block;
	animation:askbar 1.15s ease-in-out infinite alternate;
}
.ask-orb i:nth-child(2){animation-delay:.16s}
.ask-orb i:nth-child(3){animation-delay:.32s}
.ask[aria-expanded="true"] .ask-orb i{animation-play-state:paused}
@keyframes askbar{from{height:3px}to{height:11px}}

@media (max-width:1080px){
	.ask-label{display:none}
	.ask{padding:13px}
}
@media (max-width:520px){
	.ask{display:none} /* The hero bar is the way in on a phone. */
}

/* ------------------------------------------------------------- Hero bar */

.hero-ask{margin:clamp(20px,2.6vw,34px) 0 clamp(24px,3vw,40px);max-width:620px}
.hero-ask-form{
	position:relative;
	display:flex;align-items:center;gap:12px;
	border:1px solid var(--line-2);
	background:rgba(5,5,6,.62);
	backdrop-filter:blur(9px);
	padding:6px 6px 6px 16px;
	transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.hero-ask-form:focus-within{
	border-color:var(--gold);
	box-shadow:0 0 0 1px var(--gold-ghost),0 18px 50px -30px var(--gold);
}
.hero-ask-orb{display:flex;align-items:center;gap:3px;height:14px;flex:none;color:var(--gold)}
.hero-ask-orb i{
	width:2px;height:5px;background:currentColor;display:block;
	animation:askbar 1.4s ease-in-out infinite alternate;
}
.hero-ask-orb i:nth-child(2){animation-delay:.2s}
.hero-ask-orb i:nth-child(3){animation-delay:.4s}
.hero-ask-input{
	flex:1;min-width:0;
	background:none;border:0;color:var(--paper);
	font:inherit;font-size:clamp(14px,1.05vw,16px);
	padding:14px 0;
}
.hero-ask-input:focus{outline:none}
.hero-ask-input::placeholder{color:var(--dimmer)}
.hero-ask-go{
	position:relative;flex:none;
	padding:14px 20px;
	background:var(--gold);color:var(--ink);
	font-size:10px;letter-spacing:.22em;
	transition:transform .4s var(--ease);
}
.hero-ask-go:hover{transform:translateX(3px)}
.hero-ask-go .brackets::before,.hero-ask-go .brackets::after{border-color:var(--ink);width:8px;height:8px}
.hero-ask-note{margin-top:10px;font-size:9px;letter-spacing:.14em}

/* ---------------------------------------------------------------- Panel */

.agent{position:fixed;inset:0;z-index:120}
.agent[hidden]{display:none}
.agent-scrim{
	position:absolute;inset:0;
	background:rgba(3,3,4,.72);
	backdrop-filter:blur(3px);
	opacity:0;transition:opacity .5s var(--ease);
}
.agent.is-open .agent-scrim{opacity:1}

.agent-panel{
	position:absolute;top:0;right:0;bottom:0;
	width:min(460px,100vw);
	display:flex;flex-direction:column;
	background:var(--ink-2);
	border-left:1px solid var(--line);
	transform:translateX(100%);
	transition:transform .62s var(--ease);
	box-shadow:-40px 0 90px -50px #000;
}
.agent.is-open .agent-panel{transform:none}
.agent-panel > .brackets::before,.agent-panel > .brackets::after{border-color:var(--gold-dim);width:18px;height:18px}

/* A hairline of the theme across the top edge, so the panel belongs to the
   page it slid out of. */
.agent-panel::before{
	content:"";position:absolute;left:0;right:0;top:0;height:2px;
	background:linear-gradient(90deg,var(--red),var(--gold));
	z-index:2;
}

.agent-head{
	display:flex;align-items:center;gap:14px;
	padding:22px 20px 18px;
	border-bottom:1px solid var(--line);
}
.agent-face-wrap{position:relative;width:66px;height:66px;flex:none}
.agent-face{width:100%;height:100%;display:block}
.agent-face-ring{
	position:absolute;inset:-5px;border:1px solid var(--line);border-radius:50%;
	pointer-events:none;
}
body.is-agent-speaking .agent-face-ring{
	border-color:var(--gold-dim);
	animation:facering 1.6s var(--ease-io) infinite;
}
@keyframes facering{
	0%{transform:scale(1);opacity:1}
	100%{transform:scale(1.22);opacity:0}
}

.agent-id{min-width:0;flex:1}
.agent-name{font-size:20px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.agent-role{font-size:9px;letter-spacing:.14em;margin-top:5px}
.agent-state{
	display:flex;align-items:center;gap:7px;
	font-size:9px;letter-spacing:.16em;text-transform:uppercase;
	margin-top:8px;color:var(--dimmer);
}
.agent-state i{width:6px;height:6px;border-radius:50%;background:var(--dimmer);flex:none}
.agent-state[data-state="thinking"]{color:var(--red)}
.agent-state[data-state="thinking"] i{background:var(--red);animation:blink .5s steps(1) infinite}
.agent-state[data-state="speaking"]{color:var(--gold)}
.agent-state[data-state="speaking"] i{background:var(--gold);animation:pulse 1.4s ease-out infinite}

.agent-acts{display:flex;align-items:center;gap:4px;flex:none}
.agent-icon{
	display:flex;align-items:center;gap:6px;
	padding:10px;color:var(--dimmer);
	transition:color .3s;
}
.agent-icon:hover{color:var(--paper)}
.agent-icon-l{font-size:8px;letter-spacing:.16em}
.agent-eq{display:flex;align-items:flex-end;gap:2px;height:10px}
.agent-eq i{width:2px;height:2px;background:currentColor;display:block}
#agent-voice[aria-pressed="true"]{color:var(--gold)}
#agent-voice[aria-pressed="true"] .agent-eq i{
	animation:eq .8s ease-in-out infinite alternate;
}
#agent-voice[aria-pressed="true"] .agent-eq i:nth-child(2){animation-delay:.14s}
#agent-voice[aria-pressed="true"] .agent-eq i:nth-child(3){animation-delay:.28s}
/* Muted: struck through, because a greyed-out meter alone is ambiguous. */
#agent-voice[aria-pressed="false"] .agent-eq{position:relative}
#agent-voice[aria-pressed="false"] .agent-eq::after{
	content:"";position:absolute;left:-2px;right:-2px;top:50%;
	height:1px;background:currentColor;transform:rotate(-24deg);
}
.agent-x{font-size:13px}

/* --------------------------------------------------------------- The log */

.agent-log{
	flex:1;min-height:0;
	overflow-y:auto;
	overscroll-behavior:contain;
	padding:22px 20px;
	display:flex;flex-direction:column;gap:18px;
	scrollbar-width:thin;
	scrollbar-color:var(--line-2) transparent;
}
.agent-log::-webkit-scrollbar{width:4px}
.agent-log::-webkit-scrollbar-thumb{background:var(--line-2)}

.agent-msg{display:flex;flex-direction:column;gap:6px;animation:msgIn .5s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.agent-tag{font-size:8px;letter-spacing:.22em;color:var(--dimmer)}
.agent-bubble{
	padding:14px 16px;
	border:1px solid var(--line);
	background:var(--ink);
	font-size:14px;line-height:1.62;
	/* The answers carry their own paragraph breaks as newlines, which is what
	   lets the typing effect be one textContent write instead of a DOM build. */
	white-space:pre-line;
}
.agent-msg.is-me{align-items:flex-end}
.agent-msg.is-me .agent-bubble{
	background:var(--gold);color:var(--ink);
	border-color:var(--gold);
	max-width:88%;
	font-weight:500;
}
.agent-msg.is-bot .agent-bubble{color:var(--dim);border-left:2px solid var(--red)}
.agent-msg.is-bot.is-unsure .agent-bubble{border-left-color:var(--dimmer)}
.agent-bubble p{margin:0}

.agent-chips{
	display:flex;flex-wrap:wrap;gap:6px;
	padding:0 20px 14px;
}
.agent-chip{
	border:1px solid var(--line-2);
	color:var(--dim);
	padding:8px 12px;
	font-size:9px;letter-spacing:.12em;text-transform:uppercase;
	text-align:left;
	transition:color .3s,border-color .3s,background .3s;
}
.agent-chip:hover{color:var(--gold);border-color:var(--gold);background:var(--gold-ghost)}

.agent-form{
	display:flex;gap:8px;align-items:center;
	padding:14px 20px;
	border-top:1px solid var(--line);
	background:var(--ink);
}
.agent-input{
	flex:1;min-width:0;
	background:var(--ink-2);border:1px solid var(--line);
	color:var(--paper);font:inherit;font-size:14px;
	padding:14px 15px;
	transition:border-color .3s;
}
.agent-input:focus{outline:none;border-color:var(--gold)}
.agent-input::placeholder{color:var(--dimmer)}
.agent-send{
	position:relative;flex:none;
	width:50px;height:50px;
	display:grid;place-items:center;
	background:var(--gold);color:var(--ink);
	font-size:16px;
	transition:transform .35s var(--ease);
}
.agent-send:hover{transform:translateX(3px)}
.agent-send .brackets::before,.agent-send .brackets::after{border-color:var(--ink);width:7px;height:7px}

.agent-fine{
	padding:0 20px 18px;
	font-size:8px;letter-spacing:.1em;line-height:1.7;
}

@media (max-width:560px){
	.agent-panel{width:100%;border-left:0}
	.agent-head{padding:16px}
	.agent-face-wrap{width:54px;height:54px}
	.agent-log{padding:16px}
	.agent-chips{padding-inline:16px}
	.agent-form{padding:12px 16px}
	.agent-fine{padding:0 16px 14px}
}

/* The panel is modal, so the page behind it must not also be scrolling under
   the visitor's finger. */
body.is-agent-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
	.ask-orb i,.hero-ask-orb i,.agent-eq i,.agent-face-ring{animation:none}
	.agent-panel,.agent-scrim{transition-duration:.01ms}
}