/* =============================================================================
   Concept F · Ciridae (after ciridae.com, via Refero Styles)
   Void-black canvas, tonal surfaces. One type weight (400), uppercase condensed for display.
   Flat filled pills for every control (no outline), 10px for every container.
   One accent, Ember Rust: the separators in the news bar, never a fill behind text.
   No shadows, no glows, no UI gradients, no edge fades. Atmosphere comes from blurred light in the hero.
   TasteSkill passes (2026-10-16): page containers use tone steps; page labels use sentence case;
   the fleet diagram is a drawing under the page rules (fills, no outlines, no numbering, 13px+),
   and stacks top to bottom below 1280px. Only the vendored memory renderer is an interface
   fragment (data-ui). The hero's blurred light is the one treatment still recorded as open.
   The circuit board (2026-10-19, Trevor's ask for colour, pop, 3D and chrome) is the one drawing
   with material in it: chrome parts shaded with SVG gradients, traces in the fleet's lane colours
   and the fleet's canvas lights. Those gradients render objects inside the drawing, not UI surfaces.
   Two faces: Inter for text, labels and system data (tabular figures), Barlow Semi Condensed
   (for Pragmatica Cond) for display: headlines, figures, the name. Both OFL.
   ========================================================================== */

@font-face{font-family:"Barlow Semi Condensed";src:url("../../assets/fonts/barlow-semi-condensed-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../../assets/fonts/inter-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --void:#0b0b0b; --abyss:#050505; --char:#272a2a; --char-2:#1b1d1d; --steel:#484848; --ash:#cecece;
  --bone:#edebe7; --bone-2:#dfddd9; --white:#fff; --ember:#cc6437;
  --mute:rgba(255,255,255,.64); --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.26);
  --cond:"Barlow Semi Condensed","Barlow Condensed",sans-serif; --prose:"Inter","Söhne",system-ui,sans-serif;
  --max:1400px; --gut:clamp(16px,2.6vw,40px); --gap:80px;
  --ease:cubic-bezier(.19,1,.22,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void);color-scheme:dark}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--void);color:var(--white);font:400 14px/1.45 var(--prose);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--white);color:var(--void)}
:focus-visible{outline:1px solid var(--white);outline-offset:4px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:12px 18px;min-height:44px;border-radius:1440px;background:var(--white);color:var(--void)}
.skip:focus{top:48px}

/* ---- controls: pills, flat. One fill (a tone step off the void), white on hover; no outline */
.pill{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 20px;border-radius:1440px;background:var(--char);
  font:400 13px/1 var(--prose);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease)}
.pill:hover{background:var(--white);color:var(--void)}
.pill--lg{font-size:14px;padding:16px 30px;min-height:56px}
.burger{display:grid;gap:5px;width:20px}
.burger i{display:block;height:2px;background:currentColor;transition:transform .35s var(--ease)}
.menu-open .burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---- news bar (system data, tabular figures) */
.news{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:stretch;height:44px;padding-right:152px;background:var(--abyss)}
.news__track{flex:1;display:flex;overflow:hidden;font:400 13px/44px var(--prose);letter-spacing:0;color:var(--mute);
}
.news__run{display:flex;flex:none;justify-content:space-around;min-width:100%;gap:18px;padding-right:18px;white-space:nowrap;animation:news 60s linear infinite}
.news__run .sep{color:var(--ember)}
.news:is(:hover,:focus-within) .news__run{animation-play-state:paused}
.motion-off .news__run[aria-hidden]{display:none}
.motion-off .news__track{overflow-x:auto;scrollbar-width:none}
@keyframes news{to{transform:translateX(-100%)}}
.news__btn{display:inline-flex;align-items:center;margin-right:2px;padding:0 20px;border-radius:0;background:var(--char);font:400 13px/1 var(--prose);letter-spacing:.02em;text-transform:uppercase;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.news__btn:hover{background:var(--white);color:var(--abyss)}

/* ---- header: two pills, nothing else */
.head{position:fixed;left:0;right:0;top:44px;z-index:55;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gut);pointer-events:none}
.head>*{pointer-events:auto}
/* solid, not frosted: a 40px backdrop blur on a fixed element repaints on every scroll frame */

/* ---- menu overlay */
.menu{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--abyss);padding:120px var(--gut) 40px}
.menu[hidden]{display:none}
.menu__list{list-style:none;display:grid;gap:4px;width:min(720px,100%)}
.menu__list a{display:flex;align-items:center;gap:20px;padding:14px 0;font:400 clamp(30px,4vw,44px)/1 var(--cond);letter-spacing:-.02em;text-transform:uppercase;
  transition:padding-left .4s var(--ease),color .3s}
.menu__list a:hover,.menu__list a:focus-visible{padding-left:12px}

/* ---- hero: void canvas, blurred light, the mark, flanking labels */
.hero{position:relative;min-height:100dvh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:110px var(--gut) 130px;overflow:hidden;isolation:isolate}
.atm{position:absolute;inset:0;z-index:-1;background:var(--void);--px:0;--py:0}
.atm>i{position:absolute;display:block;border-radius:50%;will-change:transform}
.atm.is-off>i{animation-play-state:paused}
.atm__a{left:6vw;top:14vh;width:46vw;height:24vw;background:#a8734f;filter:blur(64px);opacity:.5;transform:rotate(-20deg);
  translate:calc(var(--px)*-40px) calc(var(--py)*-30px);animation:drA 26s ease-in-out infinite alternate}
.atm__c{right:-6vw;top:18vh;width:32vw;height:44vw;background:#55667c;filter:blur(72px);opacity:.55;translate:calc(var(--px)*30px) calc(var(--py)*24px);
  animation:drC 30s ease-in-out infinite alternate}
.atm__d{left:36vw;top:-30vh;width:24vw;height:160vh;border-radius:40%;background:var(--void);filter:blur(42px);transform:rotate(16deg);
  translate:calc(var(--px)*16px) 0;animation:drD 34s ease-in-out infinite alternate}
.atm__e{left:22vw;bottom:-10vw;width:34vw;height:14vw;background:var(--ember);filter:blur(80px);opacity:.32;animation:drA 28s ease-in-out infinite alternate-reverse}
.atm__grain{position:absolute;inset:0;width:100%;height:100%;opacity:.09;mix-blend-mode:overlay;pointer-events:none}
@keyframes drA{from{transform:rotate(-20deg) translate3d(0,0,0)}to{transform:rotate(-14deg) translate3d(3vw,2vh,0) scale(1.06)}}
@keyframes drC{from{transform:translate3d(0,0,0)}to{transform:translate3d(-4vw,4vh,0) scale(1.08)}}
@keyframes drD{from{transform:rotate(16deg) translate3d(0,0,0)}to{transform:rotate(12deg) translate3d(-2vw,0,0)}}
.hero__side{display:flex;align-items:center;gap:16px;font-size:14px;max-width:24ch;text-wrap:balance}
.hero__side--r{justify-self:end;text-align:right;flex-direction:row-reverse}
.hero__mark{position:relative;display:grid;justify-items:center}
/* the live memory core, sphere layout, no labels: what the site is about, as its emblem */
.hero__core{position:relative;width:min(560px,60vw,54vh);aspect-ratio:1;margin-bottom:0;pointer-events:none}
.hero__core .cx-core__labels,.hero__core .cx-core__tip{display:none!important}
.hero__core-fallback{position:absolute;inset:0;display:grid;place-items:center}
.hero__core-fallback svg{width:28%}
.hero__core[data-state="ready"] .hero__core-fallback{display:none}
.wordmark{position:relative;font:400 clamp(44px,5.6vw,84px)/.92 var(--cond);letter-spacing:-.02em;text-transform:uppercase}
.hero__role{margin-top:14px;font-size:16px;color:var(--mute)}
/* entrance: the core opens, then the name rises */
.hero__core{animation:coreIn 2.2s var(--ease) both}
.wordmark{animation:nameIn 1.6s var(--ease) .5s both}
.hero__role,.hero__side,.hero__foot{animation:fadeIn 1.4s var(--ease) 1s both}
@keyframes coreIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes nameIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero__foot{position:absolute;left:50%;bottom:40px;translate:-50% 0;text-align:center;font-size:14px;line-height:1.5;width:min(90vw,40ch)}
.hero__foot a{display:inline-block;margin-top:4px;padding:6px 0 2px;text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:6px}

/* ---- tools strip: the one light section */
.strip{background:var(--bone);color:var(--void);padding:56px var(--gut);text-align:center}
.strip__label{font-size:14px;margin-bottom:24px;color:#4a4845}
.strip__list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;max-width:1100px;margin:0 auto;font:400 22px/1 var(--cond);letter-spacing:-.02em;text-transform:uppercase}
.strip__list--logos{gap:26px 46px;align-items:center}
.strip__list--logos li{display:grid;place-items:center;width:34px;height:34px}
.strip__list--logos svg{width:30px;height:30px;fill:#1b1b1b}
.strip__list--logos img{width:30px;height:30px;filter:invert(1) brightness(.12)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- sections and heading blocks */
.sec{max-width:var(--max);margin:0 auto;padding:var(--gap) var(--gut)}
.sh{display:grid;justify-items:center;text-align:center;gap:16px;margin:0 auto 56px;max-width:880px}
.sh__title{font:400 clamp(32px,3.4vw,48px)/1 var(--cond);letter-spacing:-.02em;text-transform:uppercase;max-width:22ch;text-wrap:balance}
.sh__lede{font:400 16px/1.45 var(--prose);letter-spacing:-.01em;color:var(--mute);max-width:60ch}

/* reveals */
/* Prerendered copy stays readable if scripts fail or are disabled. */
.reveal-ready [data-r]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-r].is-in{opacity:1;transform:none}

/* ---- cards: a tonal surface one step up from the void, 10px, no outline, nothing raised */
.card{position:relative;background:var(--char);border-radius:10px;overflow:hidden;transition:background-color .4s var(--ease)}
a.card:hover,.prog:hover{background:#2e3131}

/* ---- proof */
.proof{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.proof__item{display:grid;gap:14px;align-content:start;padding:32px 24px 32px 0}
.proof__item:not(:first-child){padding-left:24px}
.proof__v{font:400 clamp(64px,7vw,104px)/.9 var(--cond);letter-spacing:-.02em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.proof__l{font-size:14px;color:var(--mute)}
.proof--four{margin-bottom:48px}

/* ---- the board (system.js): gold-leaf parts, traces in the fleet's lane colours, the fleet's lights.
   --ec on a trace and --pc on a part are "r,g,b" from fleet.js RGB. The lights are a canvas (.bd-orbs). */
.board{position:relative;max-width:1240px;margin:0 auto;aspect-ratio:1200/780}
.board.is-narrow{aspect-ratio:920/560}
.board svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.board .bd-orbs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.board .bd-l{stroke:rgba(255,255,255,.16);stroke-width:1.2}
.board .bd-o{fill:none;stroke:rgba(255,255,255,.15);stroke-width:1.2}
/* traces: the lane colour at rest, thick enough to read on the board photograph */
.board .tr{fill:none;stroke:rgba(var(--ec),.42);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.board .tr--deco{stroke:rgba(var(--ec),.17);stroke-width:1.8}
.board .tip{fill:rgba(var(--ec),.5)}
.board .sock{fill:#121416;stroke:rgba(255,255,255,.12);stroke-width:1}
/* pins are plain gold: a gradient stroke cannot paint a line with a zero-width box */
.board .pin{stroke:#d9b062;stroke-width:2.4;stroke-linecap:round}
.board .pin1{fill:rgb(var(--pc))}
/* the part: a dark bronze side wall under a gold-leaf lid (the name's gold, with the leaf's crinkle laid over in
   soft-light, as on the name), a bright edge on the lid, a black die window */
.board .wall{fill:url(#fWall)}
.board .lid{fill:url(#fGold)}
.board .lid-leaf,.board .star-leaf{fill:url(#fLeaf);mix-blend-mode:soft-light}
.board .lid-sheen{fill:url(#fSheen)}
.board .lid-edge{fill:none;stroke:rgba(255,244,214,.8);stroke-width:1.2}
.board .die{fill:#0c0e10;stroke:url(#fBevel);stroke-width:2}
.board .rim{fill:none;stroke:rgb(var(--pc));stroke-width:2.6;stroke-dasharray:1 1;stroke-dashoffset:1}
.board .slot{fill:#16191c;stroke:rgba(255,255,255,.16);stroke-width:1}
.board .face-o{fill:none;stroke:rgba(var(--pc),.75);stroke-width:1.6}
.board .hex{fill:#101315;stroke:url(#fPin);stroke-width:2.2}
.board .hex--in{fill:none;stroke:rgb(var(--pc));stroke-width:1.6;stroke-dasharray:3 4}
.board .star{fill:url(#fGold)}
.board .dot-off{fill:rgba(var(--pc),.22)}
.board .dot-on{fill:rgb(var(--pc));opacity:0}
.board .btn-face{fill:none;stroke:rgba(var(--pc),.5);stroke-width:1.6}
.board .lens{fill:rgb(var(--pc))}
.board .ping{fill:none;stroke:rgb(var(--pc));stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.board .bar{stroke:rgba(var(--pc),.45);stroke-width:2.4;stroke-linecap:round}
.board .check{fill:none;stroke:rgb(var(--pc));stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.board .tagp{fill:var(--void);stroke:rgba(var(--pc),.8);stroke-width:1.4}
.board .tagt{font:400 12px var(--prose);letter-spacing:.02em;fill:var(--white)}
.board .tags{font:400 11px var(--prose);letter-spacing:.04em;fill:rgba(255,255,255,.62)}
/* the lit line: full colour, drawn behind the light and held, then let go */
.board .trail{fill:none;stroke:rgb(var(--ec));stroke-width:3;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0}
/* one keyframe set per layer: Chrome will not interpolate calc(var()) offsets inside keyframes */
@keyframes trl{0%{stroke-dashoffset:1;opacity:1}24%{stroke-dashoffset:0;opacity:1}40%{stroke-dashoffset:0;opacity:1}62%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes tip{0%,20%{fill:rgba(var(--ec),.5)}24%{fill:rgb(var(--ec))}48%,100%{fill:rgba(var(--ec),.5)}}
@keyframes rim{0%{stroke-dashoffset:1}14%{stroke-dashoffset:0;opacity:1}40%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes dot{0%{opacity:1}30%,100%{opacity:0}}
@keyframes btn{0%,100%{stroke:rgba(var(--pc),.5)}8%{stroke:rgb(var(--pc))}22%{stroke:rgba(var(--pc),.5)}}
@keyframes ping{0%{opacity:1;transform:scale(.5)}22%{opacity:0;transform:scale(2.2)}100%{opacity:0}}
@keyframes bar{0%,100%{stroke:rgba(var(--pc),.45)}8%{stroke:rgb(var(--pc))}26%{stroke:rgba(var(--pc),.45)}}
@keyframes chk{0%{stroke-dashoffset:1}10%,60%{stroke-dashoffset:0;opacity:1}75%,100%{stroke-dashoffset:0;opacity:.3}}
@keyframes star{0%,100%{opacity:.85}14%{opacity:1}}
.board.is-live .trail{animation:trl 6s cubic-bezier(.45,.05,.55,.95) var(--d) infinite}
.board.is-live .tip{animation:tip 6s linear var(--d) infinite}
.board.is-live .rim{animation:rim 6s ease-out var(--d) infinite}
.board.is-live .dot-on{animation:dot 6s steps(1) var(--d) infinite}
.board.is-live .btn-face{animation:btn 6s ease-in-out var(--d) infinite}
.board.is-live .ping{animation:ping 6s ease-out var(--d) infinite}
.board.is-live .bar{animation:bar 6s ease-in-out var(--d) infinite}
.board.is-live .check{animation:chk 6s ease-out var(--d) infinite}
.board.is-live :is(.star,.star-leaf){animation:star 6s ease-in-out var(--d) infinite}
.board.is-live.is-hidden *{animation-play-state:paused}
/* still state (reduced motion): every line lit at half strength, rims drawn, fields filled, check drawn */
.motion-off .board .trail{stroke-dashoffset:0;opacity:.5}
.motion-off .board .rim{stroke-dashoffset:0;opacity:.6}
.motion-off .board .dot-on{opacity:1}
.motion-off .board .check{stroke-dashoffset:0}
.rails{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.rails li{padding:24px;border-radius:10px;background:var(--char-2);
  font:400 16px/1.45 var(--prose);letter-spacing:-.01em;color:var(--ash)}

/* ---- fleet: the agent-fleet flowchart, native to the page (fleet.js). A drawing, so the page rules
   apply: cards are a tone step with no outline, labels are sentence case at a readable size, lanes are
   named not numbered. Each lane keeps its colour for its lines, its icons and the light that runs them.
   Wide screens read it left to right in six lanes; below 1280px the lanes stack and read top to bottom,
   so nothing pans sideways and no text drops under 13px. */
.fx{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 calc(var(--gut)*-1);padding:6px var(--gut)}
.fx::-webkit-scrollbar{display:none}
.fx__in{position:relative;min-width:1180px;--fg:clamp(40px,4.4vw,88px)}
.fx__heads,.fx__board{display:grid;grid-template-columns:1fr 1fr 1.18fr 1.18fr 1fr 1fr;column-gap:var(--fg)}
.fx__heads{margin-bottom:24px}
.fx__head,.fx__lane-h{display:flex;align-items:center;gap:10px;font:400 14px/1.2 var(--prose);color:var(--white)}
.fx__head i,.fx__lane-h i{width:8px;height:8px;flex:none;border-radius:50%;background:rgb(var(--c))}
.fx__lane-h{display:none}
.fx__board{position:relative}
.fx__lane{display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;z-index:1}
.fx__edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.fx__orbs{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
.fx-card{position:relative;padding:14px 14px 15px;border-radius:10px;background:var(--char);cursor:pointer;
  transition:opacity .3s var(--ease),background-color .3s var(--ease)}
.fx-card:hover{background:#2e3131}
.fx-card:focus-visible,.fx-card:has(.fx-card__pin:focus-visible){outline:2px solid var(--white);outline-offset:3px}
.fx-card__pin{position:absolute;inset:0;width:100%;height:100%;z-index:1;border-radius:inherit;scroll-margin-block:128px 24px}
.fx-card__pin:focus-visible{outline:0} /* the enclosing card supplies the visible ring */
.fx-card__t{display:flex;align-items:center;gap:9px;font:400 19px/1.05 var(--cond);letter-spacing:-.01em;text-transform:uppercase}
.fx-card svg{width:15px;height:15px;flex:none;fill:none;stroke:rgb(var(--c));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fx-card__d{margin-top:8px;font:400 14px/1.4 var(--prose);color:rgba(255,255,255,.72)}
.fx-parent{margin-top:10px;padding:10px;border-radius:8px;background:var(--char-2)}
.fx-parent__h{font:400 14px/1.1 var(--prose)}
.fx-logos{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fx-logo{display:grid;place-items:center;width:32px;height:32px;border-radius:1440px;background:rgba(255,255,255,.07)}
.fx-logo svg{width:15px;height:15px;fill:rgba(255,255,255,.88);stroke:none}
.fx-logo img{display:block;width:16px;height:16px;opacity:.88}
.fx-parent .fx-logos{margin-top:10px}
.fx-grp{margin-top:12px}
.fx-grp h4{display:flex;align-items:center;gap:8px;font:400 14px/1.2 var(--prose)}
.fx-grp svg{width:13px;height:13px}
/* lines: quiet at rest, full colour while they carry something */
.fx__edges .e{fill:none;stroke:rgba(var(--ec),.34);stroke-width:1.3;transition:stroke .4s,stroke-width .4s,opacity .3s}
.fx__edges .e.dash{stroke-dasharray:5 5}
.fx__edges .tip{fill:rgba(var(--ec),.55);transition:opacity .3s,fill .4s}
.fx__edges .hit{fill:none;stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer}
.fx__edges .e.lit,.fx__edges .e.on{stroke:rgb(var(--ec));stroke-width:1.9}
.fx__edges .tip.lit,.fx__edges .tip.on{fill:rgb(var(--ec))}
/* a card that carries the request takes its lane's colour as a fill, never an outline */
.fx-card.lit,.is-focus .fx-card.on{background:color-mix(in srgb,rgb(var(--c)) 22%,var(--char))}
.fx.is-focus .fx-card,.is-focus .fx-card{opacity:.72}
.is-focus .fx-card.on{opacity:1}
.is-focus .fx__edges .e{opacity:.25}
.is-focus .fx__edges .e.on{opacity:1}
.is-focus .fx__edges .tip{opacity:.2}
.is-focus .fx__edges .tip.on{opacity:1}
/* stacked: each lane is a row of nodes at their own width, named above them; lines drop from lane to
   lane and pass under the nodes, so a line from the first row reads as coming out of its card */
@media (max-width:1279px){
  .fx{overflow:visible;margin:0;padding:0}
  .fx__in{min-width:0}
  .fx__heads{display:none}
  .fx__board{display:flex;flex-direction:column;gap:56px}
  .fx__lane{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:10px;z-index:3}
  .fx__lane-h{display:block;flex-basis:100%;margin-bottom:4px}
  /* the name sits on the page ground, so the lines into this lane pass behind it, not through it */
  .fx__lane-h span{display:inline-flex;align-items:center;gap:10px;padding:3px 10px 3px 0;background:var(--void)}
  .fx__edges,.fx__orbs{z-index:1}
  .fx-card{flex:0 1 auto;max-width:100%}
  .fx-card__t{white-space:nowrap}
  .fx-grp{display:inline-flex;margin:12px 18px 0 0}
}
@media (max-width:560px){
  .fx__board{gap:48px}
  .fx-card{padding:12px 12px 13px}
}
.pill--float{position:absolute;right:16px;bottom:16px;z-index:2;background:rgba(5,5,5,.88)}

/* ---- memory core (the vendored Bips renderer), monochrome */
/* memory: no frame. The graph sits on the page itself, with no fade at its edges */
.mem{position:relative;height:min(720px,82vh);min-height:460px;margin:0 calc(var(--gut)*-1)}
.mem__well{position:absolute;inset:0;outline:none;touch-action:pan-y;cursor:grab}
.mem__well:focus-visible{outline:1px solid var(--white);outline-offset:-4px}
.mem__fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:var(--mute)}
.mem__well[data-state="ready"] .mem__fallback{display:none}
.cx-gl{position:absolute;inset:0;pointer-events:none}
.cx-gl__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.cx-gl:is([data-state="live"],[data-state="still"]) .cx-gl__canvas{opacity:1}
.cx-gl[data-state="fallback"] .cx-gl__canvas{visibility:hidden}
.cx-gl__fallback{position:absolute;inset:0}
.mem__well[data-ui] .cx-core__labels{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.mem__well[data-ui] .cx-core__label{position:absolute;left:0;top:0;display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border:1px solid var(--ash);border-radius:1440px;
  background:rgba(5,5,5,.82);font:400 11px/1 var(--prose);letter-spacing:.03em;text-transform:uppercase;color:var(--white);white-space:nowrap;opacity:0;transition:opacity .22s;will-change:transform}
.mem__well[data-ui] .cx-core__label-m{font-family:var(--prose);font-size:10px;color:var(--mute)}
.mem__well[data-ui] .cx-core__leader{position:absolute;left:0;top:0;height:1px;background:var(--ember);transform-origin:0 0;pointer-events:none}
.mem__well[data-ui] .cx-core__label.is-hollow{border-style:dashed}
.mem__well[data-ui] .cx-core__label.is-core{font:400 15px/1 var(--cond);letter-spacing:0;padding:6px 14px;border-color:var(--ember)}
.mem__well[data-ui] .cx-core__tip{position:absolute;z-index:4;left:0;top:0;max-width:300px;padding:10px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--abyss);pointer-events:none}
.mem__well[data-ui] .cx-core__tip[hidden]{display:none}
.mem__well[data-ui] .cx-core__tip-t{font:400 12px/1.3 var(--prose);letter-spacing:.02em;text-transform:uppercase}
.mem__well[data-ui] .cx-core__tip-m{margin-top:4px;font:400 11px/1.2 var(--prose);text-transform:none;color:var(--mute)}
.mem__note{position:absolute;left:50%;bottom:6px;translate:-50% 0;z-index:5;font:400 13px var(--prose);color:var(--mute);pointer-events:none}


/* ---- built: the systems grid, first card twice as wide */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.prog{display:flex;flex-direction:column;gap:12px;padding:32px 24px}
.prog--wide{grid-column:span 2;grid-row:span 2}
/* seven cards beside the wide one leave one cell open; the last card takes the rest of its row */
.grid>.prog:last-child:nth-child(even){grid-column:span 2}
.prog img{height:auto;border-radius:6px;background:var(--void);aspect-ratio:16/10;object-fit:cover;object-position:top}
.prog__shots{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px}
.prog__shots img{width:100%;min-height:0}
/* the wide card is two rows tall: the lead shot grows into the spare height (a light crop at most)
   so the text sits right under the shots; the two below keep their own shape */
.prog__shots img:first-child{grid-column:span 2;aspect-ratio:auto;height:100%}
.prog--wide .prog__shots{flex:1 1 auto;min-height:0}
.prog__name{font:400 28px/1 var(--cond);letter-spacing:-.02em;text-transform:uppercase;margin-top:auto}
.prog--wide .prog__name{font-size:40px}
.prog__kind{font-size:14px;color:var(--mute)}
.prog__line{font:400 16px/1.45 var(--prose);letter-spacing:-.01em;color:rgba(255,255,255,.82);max-width:60ch}
.prog__num{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-top:14px;font-size:14px;color:var(--mute)}
.prog__num span{font:400 36px/1 var(--cond);letter-spacing:-.02em;color:var(--white)}
.prog__mark{display:grid;place-items:center;aspect-ratio:16/10;border-radius:6px;background:var(--void)}
.prog__mark svg{width:42%;overflow:visible}
.prog__mark .o{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1}
.prog__mark .e{fill:none;stroke:var(--ember);stroke-width:1;stroke-dasharray:2 4}
.prog__mark .s{fill:var(--white)}
.prog__mark--clock svg{width:58%}
.prog__mark--clock .hand{transform-origin:60px 60px;animation:hand 8s linear infinite}
.prog__mark--clock .hand line{stroke:var(--ember);stroke-width:1.5;stroke-linecap:round}
@keyframes hand{to{transform:rotate(360deg)}}
.prog__stack{font:400 13px/1.5 var(--prose);color:var(--mute)}
.also{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;margin-top:56px}
.also li{display:grid;gap:6px;align-content:start;padding-right:20px}
.also h3{font:400 22px/1 var(--cond);letter-spacing:-.02em;text-transform:uppercase}
.also span{font:400 16px/1.45 var(--prose);letter-spacing:-.01em;color:var(--mute)}


/* ---- creative work */
.work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.work__item{display:block}
.work__item video{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--abyss);filter:grayscale(.35);transition:filter .5s var(--ease)}
.work__item:hover video{filter:none}
.work__meta{display:grid;gap:4px;padding:16px 18px 18px}
.work__meta b{font:400 22px/1.05 var(--cond);letter-spacing:-.02em;text-transform:uppercase}
.work__meta small{font:400 13px var(--prose);color:var(--mute)}

/* ---- featured film */
.film{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);margin-bottom:48px}
.film__frame{position:relative;background:var(--abyss)}
.film__v{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--abyss)}
.film__meta{display:flex;flex-direction:column;gap:12px;padding:32px 28px}
.film__name{font:400 clamp(36px,3.4vw,48px)/.95 var(--cond);letter-spacing:-.02em;text-transform:uppercase;margin-top:auto}
.film__sound[hidden]{display:none}

/* ---- career */
/* rows sit on a tone step instead of between hairlines */
.career{list-style:none;display:grid;gap:6px}
.career li{display:grid;grid-template-columns:180px 1.4fr 1fr;gap:24px;padding:24px;border-radius:10px;background:var(--char-2);align-items:baseline}
.career__when{font:400 13px var(--prose);color:var(--mute)}
.career__who{display:grid;gap:8px}
.career__role{font:400 28px/1 var(--cond);letter-spacing:-.02em;text-transform:uppercase}
.career__org{font:400 14px/1.3 var(--prose);color:var(--mute)}
.career__note{font:400 16px/1.45 var(--prose);letter-spacing:-.01em;color:var(--mute);max-width:60ch}

/* ---- contact + footer */
.contact{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}
.sec--contact .pill--lg{text-transform:none}
.sec--contact .pill--lg:last-child{text-transform:uppercase}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:var(--max);margin:0 auto;padding:40px var(--gut) 80px;font-size:14px}
/* the close: the name returns at full width, as in the hero */
.foot__name{flex:1 0 100%;margin-bottom:24px;font:400 min(calc((100vw - 2 * var(--gut)) / 7),188px)/.82 var(--cond);letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;color:var(--white)}
.foot nav{display:flex;flex-wrap:wrap;gap:24px}
.foot a{display:inline-block;padding:12px 0;min-height:44px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;transition:text-decoration-color .3s}
.foot a:hover{text-decoration-color:var(--ember)}

/* the shared motion toggle, restyled as a pill */
/* the shared motion toggle lives in the news bar, as its second square button */
.motion-toggle{position:fixed!important;top:0!important;right:0!important;bottom:auto!important;left:auto!important;z-index:61!important;width:152px;height:44px;min-height:44px!important;
  border:0!important;border-radius:0!important;background:var(--char)!important;color:var(--white)!important;
  font:400 13px/1 var(--prose)!important;letter-spacing:.02em;text-transform:uppercase;padding:0 14px!important;transition:background-color .35s,color .35s}
.motion-toggle:hover{background:var(--white)!important;color:var(--abyss)!important}
.menu-open{overflow:hidden}

/* ---- 404: the hero's light, one message, the way back */
.lost{grid-template-columns:1fr;justify-items:center;padding:80px var(--gut)}
.lost__in{margin:0 auto}
.lost .sh__title{font-size:clamp(40px,6vw,80px)}
.lost .contact{margin-top:16px}
/* Keep the staggered rise readable even if playback stalls at its first frame. Backwards fill
   hands transform back to the pill after landing; keyboard focus skips the entrance immediately. */
@keyframes lostIn{from{transform:translateY(24px)}to{transform:none}}
.lost .sh__title,.lost .sh__lede,.lost .contact .pill{animation:lostIn 1.2s var(--ease) .1s backwards}
.lost .sh__lede{animation-delay:.18s}
.lost .contact .pill:first-child{animation-delay:.26s}
.lost .contact .pill:last-child{animation-delay:.34s}
.lost .pill{transition:background-color .35s var(--ease),color .35s var(--ease),transform .2s var(--ease)}
.lost .pill:active{transform:scale(.97)}
.lost .pill:focus-visible{animation:none;outline-width:2px;outline-offset:3px}

/* ---- responsive */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--gap:64px}
  .hero{grid-template-columns:1fr;justify-items:center;align-content:center;text-align:center;gap:20px;padding-top:140px}
  .hero__mark{margin-bottom:12px}
  .atm>i{scale:1.9}
  .hero__side{order:2;justify-self:center;text-align:center}
  .hero__side--r{order:3}
  .hero__foot{position:static;translate:none;order:4;margin-top:24px}
  .hero__core{width:min(88vw,420px)}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof__item{padding-left:0!important}
  .board .tagp,.board text{display:none}
  .rails{grid-template-columns:1fr}
  .also{grid-template-columns:1fr}
  .film{grid-template-columns:1fr}
  .career li{grid-template-columns:1fr;gap:8px;padding:20px}
  /* stacked, the dates follow the role so they never read as a label above it */
  .career__when{order:2}
  .career__note{order:3}
}
@media (max-width:560px){
  .grid,.work{grid-template-columns:1fr}
  .prog--wide{grid-column:auto}
  .grid>.prog:last-child:nth-child(even){grid-column:auto}
  /* two stats a row: the figure shrinks with the screen so "1,800%" never runs into its neighbour */
  .proof__v{font-size:clamp(40px,12vw,64px)}
  .head{padding:14px var(--gut)}
  .head .pill{padding:8px 16px}
  .news__btn{padding:0 14px}
  .news{padding-right:118px}
  .motion-toggle{width:118px;white-space:normal;line-height:1.2!important;font-size:13px!important;padding:0 8px!important}
}
/* memory on a phone: the box hugs the graph, so it sits right under the heading with no dead band */
@media (max-width:700px){
  #memory .sh{margin-bottom:8px}
  .mem{height:min(104vw,480px);min-height:0;margin-top:-32px}
  #memory{padding-bottom:48px}
  .mem__note{bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .atm>i,.news__run,.hero__core,.wordmark,.hero__role,.hero__side,.hero__foot,.prog__mark--clock .hand{animation:none}
  .news__run[aria-hidden]{display:none}
  .news__track{overflow-x:auto;scrollbar-width:none}
  [data-r]{opacity:1;transform:none;transition:none}
  .lost .sh__title,.lost .sh__lede,.lost .contact .pill{animation:none}
  .lost .pill:active{transform:none}
}