@font-face{font-family:"Bevellier";src:url(/assets/fonts/Bevellier-Black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Bevellier";src:url(/assets/fonts/Bevellier-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Tabular";src:url(/assets/fonts/Tabular-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Tabular";src:url(/assets/fonts/Tabular-Semibold.woff2) format("woff2");font-weight:600;font-display:swap}

/* One world per page. Home is neutral survey-night; each team page takes its deck colour as the ground. */
:root{
  --bg:#0e0d0b; --surface:#191612; --ink:#ece6dc; --dim:#a59d90; --faint:#4a453d;
  --tint:#ece6dc; --ts:#e5a463; --tm:#93b5e8; --tp:#e58276;
  --display:"Bevellier",ui-sans-serif,system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --data:"Tabular",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --g:clamp(16px,4vw,56px); --cut:14px; --navh:64px;
  color-scheme:dark;
}
.t-structural{--bg:#140b05;--surface:#23140a;--ink:#f4e7da;--dim:#bca48d;--faint:#5c4431;--tint:#ef9d55}
.t-mechanical{--bg:#06111f;--surface:#0c1c31;--ink:#e2eaf4;--dim:#97abc5;--faint:#2f4661;--tint:#93b5e8}
.t-power{--bg:#120605;--surface:#210c0a;--ink:#f3e3df;--dim:#c19d96;--faint:#5c2f2a;--tint:#e58276}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background-color:var(--bg);color:var(--ink);font:16px/1.55 var(--body);overflow-x:hidden;
  /* fine grain on the substrate only */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--tint);color:var(--bg)}
.chamfer{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:20;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(10px,2vw,26px);
  height:48px;padding:0 22px 0 18px;background:color-mix(in srgb,var(--surface) 88%,transparent);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);max-width:calc(100% - 24px)}
.brand{display:block;flex:none}
.mark{display:block;width:62px;height:22px;background:var(--ink);-webkit-mask:url(/img/logo-mark.png) center/contain no-repeat;mask:url(/img/logo-mark.png) center/contain no-repeat}
.nav-links{display:flex;gap:clamp(12px,2vw,24px);font:700 15px/1 var(--display);letter-spacing:.02em}
.nl{text-decoration:none;color:var(--dim);transition:color .25s ease;white-space:nowrap}
.nl:hover{color:var(--ink)}
.nl[aria-current]{color:var(--ink)}
.nl-structural[aria-current],.t-home .nl-structural:hover{color:var(--ts)}
.nl-mechanical[aria-current],.t-home .nl-mechanical:hover{color:var(--tm)}
.nl-power[aria-current],.t-home .nl-power:hover{color:var(--tp)}
.nl:focus-visible,.mode:focus-visible,.go:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}

/* ---------- scrolly: one sticky stage, chapters scroll over it ---------- */
.scrolly{position:relative}
.stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#gl.drag{cursor:grabbing}
.gl-fail{position:absolute;right:var(--g);top:45%;max-width:32ch;color:var(--dim);margin:0}
.chapters{position:relative;margin-top:-100svh;pointer-events:none}
.chapters a,.chapters .panel,.chapters button,.chapters details{pointer-events:auto}
.ch{min-height:100svh;display:flex;align-items:center;padding:calc(var(--navh) + 32px) var(--g) 48px}
.ch-hero{align-items:flex-end;padding-bottom:clamp(96px,14vh,150px);flex-direction:column;justify-content:flex-end;align-items:flex-start}
.panel{width:min(540px,100%);padding:30px 32px 32px;background:color-mix(in srgb,var(--surface) 84%,transparent)}

/* modes / roster switch live in the stage */
.modes{position:absolute;z-index:2;top:calc(var(--navh) + 40px);right:var(--g);display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.mode{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--faint);font:700 clamp(22px,2.4vw,34px)/1.18 var(--display);letter-spacing:.01em;transition:color .3s ease}
.mode kbd{font:400 11px/1 var(--data);color:var(--faint);transform:translateY(-4px);transition:color .3s ease}
.mode:hover,.mode:hover kbd{color:var(--dim)}
.mode[aria-current]{color:var(--ink)}
.mode[aria-current] kbd{color:var(--dim)}
.t-home .mode-structural[aria-current]{color:var(--ts)}
.t-home .mode-mechanical[aria-current]{color:var(--tm)}
.t-home .mode-power[aria-current]{color:var(--tp)}
.roster-switch .mode{font-size:clamp(18px,1.7vw,24px)}
.roster-switch .mode[aria-current]{color:var(--tint)}

.readout{position:absolute;z-index:2;right:calc(var(--g) - 14px);bottom:22px;width:258px;display:grid;gap:9px;padding:12px 14px;background:color-mix(in srgb,var(--bg) 72%,transparent);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.readout dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:1px 14px;font:12px/1.5 var(--data);font-variant-numeric:tabular-nums}
.readout dt{color:var(--dim)}
.readout dd{margin:0;text-align:right;color:var(--ink)}
.meter{height:3px;border-radius:2px;background:var(--faint);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0;border-radius:2px;background:var(--tint);clip-path:inset(0 0 0 0 round 2px)}

/* hero */
.hero-title{margin:0;font:900 clamp(54px,9.4vw,156px)/.9 var(--display);letter-spacing:.005em;max-width:12ch}
.hero-title span{display:block}
.hero-sub{margin:22px 0 0;max-width:46ch;color:var(--dim);font-size:clamp(16px,1.25vw,18px);text-wrap:pretty}
.team-title{margin:0;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);font:900 clamp(60px,10vw,168px)/.9 var(--display);color:var(--tint);letter-spacing:.01em}
.logo-chip{flex:none;width:clamp(56px,6.5vw,110px);aspect-ratio:900/320;background:var(--tint);-webkit-mask:url(/img/logo-mark.png) center/contain no-repeat;mask:url(/img/logo-mark.png) center/contain no-repeat}
.hero-stats{margin-top:28px;max-width:640px}
.hero-budget{margin:18px 0 0;font:13px/1.5 var(--data);color:var(--dim)}

/* brief ledger */
.brief-lede{margin:0 0 22px;font-size:17px;text-wrap:pretty}
.ledger{margin:0;display:grid;gap:16px}
.ledger>div{display:grid;grid-template-columns:72px 1fr;column-gap:16px;align-items:baseline}
.ledger dt{color:var(--dim);font-size:13px}
.ledger dd{margin:0;font-size:15px;color:var(--dim)}
.ledger dd b{font:900 30px/1 var(--display);color:var(--ink);margin-right:6px;letter-spacing:.01em}
.ledger p{grid-column:2;margin:3px 0 0;font-size:14px;color:var(--dim)}
.brief-lead{margin:24px 0 0;font-size:15px;color:var(--dim)}
.brief-lead a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}

/* team chapters (home) */
.team-word{margin:0;font:900 clamp(44px,5vw,68px)/.95 var(--display);letter-spacing:.01em}
.ch-structural .team-word{color:var(--ts)} .ch-mechanical .team-word{color:var(--tm)} .ch-power .team-word{color:var(--tp)}
.team-line{margin:10px 0 22px;font-size:18px;text-wrap:balance}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
.hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats div{display:grid;gap:4px;align-content:start}
.stats b{font:900 clamp(24px,2.2vw,30px)/1 var(--display);letter-spacing:.015em}
.stats span{font-size:13px;color:var(--dim);line-height:1.35}
.names{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px}
.names span{color:var(--dim);font-size:13px}
.go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:700 18px/1 var(--display);text-decoration:none;color:var(--ink);transition:color .25s ease}
.go svg,.next-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.3,.7,.2,1.3)}
.go:hover{color:var(--tint)}
.ch-structural .go:hover{color:var(--ts)} .ch-mechanical .go:hover{color:var(--tm)} .ch-power .go:hover{color:var(--tp)}
.go:hover svg,.next-link:hover svg{transform:translate(3px,-3px)}

/* member chapters */
.ch-member .panel{width:min(600px,100%)}
.who{margin:0;font:900 clamp(34px,3.6vw,52px)/1 var(--display);letter-spacing:.01em;color:var(--tint)}
.is-lead{display:block;margin-top:10px;font:600 13px/1 var(--body);color:var(--dim)}
.role{margin:12px 0 0;font-size:17px;font-weight:600}
.bg{margin:4px 0 20px;color:var(--dim);font-size:15px}
.ch-member .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.did{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:9px;font-size:15px;line-height:1.5}
.did li{position:relative;padding-left:20px;text-wrap:pretty}
.did li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--tint);clip-path:polygon(0 0,100% 0,100% 50%,50% 100%,0 100%)}
.said{margin:22px 0 0;font-size:17px;font-style:italic;color:var(--ink);text-wrap:pretty}
.said span,.codes span{display:block;font:600 13px/1 var(--body);font-style:normal;color:var(--dim);margin-bottom:7px}
.moment{margin:16px 0 0;font-size:14px;color:var(--dim)}
.moment time{font:600 12px var(--data);color:var(--ink);margin-right:10px}
.codes{margin:16px 0 0;font-size:13px;color:var(--dim)}

/* ---------- blocks after the stage ---------- */
.block{position:relative;padding:clamp(80px,12vw,150px) var(--g) 0}
.wrap{max-width:1180px;margin:0 auto}
.sent{margin:0 0 clamp(36px,5vw,56px);max-width:24ch;font:700 clamp(28px,3.4vw,46px)/1.08 var(--display);letter-spacing:.01em;text-wrap:balance}
.sent span{display:block;margin-top:14px;max-width:52ch;font:400 17px/1.5 var(--body);color:var(--dim);letter-spacing:0;text-wrap:pretty}
.budgets .sent{max-width:30ch}

.charts2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
figure{margin:0}
figcaption{font-size:14px;color:var(--dim);margin-bottom:12px}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--faint);stroke-width:1;opacity:.6}
.chart .tick{font:11px var(--data);fill:var(--dim)}
.chart .rl{font:600 14px var(--body);fill:var(--ink)}
.chart .val{font:12px var(--data);fill:var(--ink)}
.chart .track{fill:color-mix(in srgb,var(--ink) 12%,transparent)}
.chart .bar{transition:opacity .2s ease}
.chart .line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--ink);stroke:var(--bg);stroke-width:2}
.chart .hit{fill:transparent;cursor:default}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 14px;font-size:13px;color:var(--dim);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:4px}
.legend .unit{margin-left:auto;font:12px var(--data)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px}
.sw+.sw{margin-left:-2px}
.sw-track{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.sw-line{height:2px;border-radius:2px;background:var(--ink);width:16px}
.tbl{margin-top:14px;font-size:13px;color:var(--dim)}
.tbl summary{cursor:pointer;width:max-content}
.tbl table{margin-top:10px;border-collapse:collapse;font:12px var(--data);color:var(--ink)}
.tbl th,.tbl td{padding:4px 14px 4px 0;text-align:left;font-weight:400}
.tbl thead th{color:var(--dim)}
.tip{position:fixed;z-index:40;pointer-events:none;padding:8px 11px;background:var(--surface);color:var(--ink);font:12px/1.4 var(--data);max-width:260px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

/* floor plan + drawings: line art recoloured to the page ink */
.plan-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(28px,5vw,72px);align-items:center}
.plan-copy p{color:var(--dim);max-width:44ch}
.plan .sent{margin-bottom:24px}
.sheet{font-size:13px}
.lineart{width:100%;background:color-mix(in srgb,var(--ink) 78%,transparent);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.drawings .dw{margin-bottom:56px}
.drawings figcaption{margin:16px 0 0;font-size:13px}

/* timeline */
.tl-track{position:relative;height:56px;margin-bottom:28px}
.tl-line{position:absolute;left:0;right:0;top:20px;height:3px;border-radius:2px;background:var(--faint)}
.tl-track i{position:absolute;top:15px;width:13px;height:13px;margin-left:-6.5px;background:var(--dim);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:background .2s ease,transform .2s ease}
.tl-track i.on{background:var(--ink);transform:scale(1.35)}
.tl-months span{position:absolute;top:38px;font:11px var(--data);color:var(--dim);transform:translateX(-50%)}
.tl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:26px 22px}
.tl-list li{display:grid;gap:4px;align-content:start;cursor:default}
.tl-list time{font:12px var(--data);color:var(--dim)}
.tl-list b{font:700 17px/1.15 var(--display);letter-spacing:.01em;transition:color .2s ease}
.tl-list span{font-size:13px;color:var(--dim);line-height:1.45}
.tl-list li:hover b,.tl-list li.on b{color:var(--ts)}

/* consortium */
.photo-team{margin-bottom:clamp(40px,6vw,72px);max-width:800px}
.photo-team img{width:100%;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.con-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,6vw,90px)}
.lead-card .sent{margin-bottom:18px}
.lead-card p{color:var(--dim);max-width:52ch}
.photo-lead{margin-top:28px;max-width:440px}
.photo-lead img{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.rosters{display:grid;gap:36px;align-content:start}
.roster-h{display:inline-block;margin-bottom:12px;font:900 30px/1 var(--display);text-decoration:none;letter-spacing:.01em}
.roster-structural .roster-h{color:var(--ts)} .roster-mechanical .roster-h{color:var(--tm)} .roster-power .roster-h{color:var(--tp)}
.roster ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.roster li{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:16px;font-size:15px;align-items:baseline}
.roster li span{color:var(--dim);font-size:14px}

/* decisions */
.dec-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.dec-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:20px;align-content:start}
.dec-grid li{display:grid;gap:4px}
.dec-grid b{font:700 21px/1.2 var(--display);letter-spacing:.01em}
.kept b{color:var(--ink)}
.cut b{color:var(--dim)}
/* strike through the x-height centre of Bevellier: (ascent 960 - x-height/2 272) / (960 + 200) = 59.3% of the inline box,
   drawn per line fragment so a wrapped item is struck on every line */
.cut s{text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(transparent calc(59.3% - 1px),var(--tint) calc(59.3% - 1px),var(--tint) calc(59.3% + 1px),transparent calc(59.3% + 1px))}
.dec-grid span{font-size:15px;color:var(--dim);max-width:48ch}
.monthly figure{max-width:980px}
.red-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.red-grid ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:17px}
.red-grid li{padding-left:22px;position:relative}
.red-grid li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--tint);clip-path:polygon(0 0,100% 0,100% 50%,50% 100%,0 100%)}

.next{padding-bottom:0}
.next-link{display:flex;align-items:baseline;gap:18px;max-width:1180px;margin:0 auto;text-decoration:none;color:var(--ink)}
.next-link span{font-size:15px;color:var(--dim)}
.next-link b{font:900 clamp(56px,9vw,140px)/1 var(--display);letter-spacing:.01em;transition:color .3s ease}
.next-structural:hover b{color:var(--ts)} .next-mechanical:hover b{color:var(--tm)} .next-power:hover b{color:var(--tp)}
.next-link svg{width:clamp(26px,3vw,44px);height:auto;align-self:center}

/* footer: wordmark anchored to the bottom edge, links above it */
.foot{position:relative;margin-top:clamp(90px,12vw,160px);padding:0 var(--g);overflow:hidden}
.foot-row{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:start;font-size:13px;color:var(--dim);padding-bottom:28px}
.foot-course{margin:0}
.foot-links{display:flex;gap:20px;font:700 16px/1 var(--display)}
.foot-links a{text-decoration:none;color:var(--ink);transition:color .25s ease}
.foot-links a:hover{color:var(--tint)}
.foot-credit{margin:0;display:grid;gap:4px;justify-items:end;text-align:right}
.foot-credit a{color:var(--dim);text-underline-offset:3px}
.foot-word{position:relative;text-align:center;font:900 clamp(120px,30vw,460px)/.76 var(--display);letter-spacing:.06em;margin:0 -.03em -.06em;padding-top:.08em;
  color:color-mix(in srgb,var(--tint) 22%,var(--bg));user-select:none}
/* the wordmark is "scanned": filled with the same dots as the cloud */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .foot-word{color:transparent;background:radial-gradient(circle,color-mix(in srgb,var(--tint) 62%,var(--bg)) 30%,transparent 42%) 0 0/.028em .028em;-webkit-background-clip:text;background-clip:text}
}

/* ---------- phones ---------- */
@media (max-width:860px){
  :root{--navh:60px}
  .nav{top:10px;padding:0 14px 0 12px;gap:12px}
  .mark{width:46px;height:18px}
  .nav-links{gap:12px;font-size:13px}
  .modes{top:calc(var(--navh) + 16px);left:var(--g);right:var(--g);flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px 14px}
  .mode{font-size:17px}
  .mode kbd{display:none}
  .modes{transition:opacity .25s ease}
  .past-hero .modes{opacity:0;pointer-events:none}
  .roster-switch .mode{font-size:15px}
  .readout{display:none}
  .drag-hint{display:none}
  .photo-lead{max-width:290px}
  .ch{align-items:flex-end;padding-top:calc(var(--navh) + 120px);padding-bottom:28px}
  .ch-hero{padding-bottom:64px;align-items:flex-start}
  .chart-scroll{overflow-x:auto;margin-inline:calc(var(--g) * -1);padding-inline:var(--g)}
  .chart-scroll .chart{min-width:560px}
  .panel{padding:24px 22px 26px;background:color-mix(in srgb,var(--surface) 93%,transparent)}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-member .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .charts2,.plan-grid,.con-grid,.dec-grid,.red-grid{grid-template-columns:minmax(0,1fr)}
  .tl-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roster li{grid-template-columns:minmax(0,1fr);gap:2px}
  .foot-row{grid-template-columns:minmax(0,1fr);gap:16px}
  .foot-credit{justify-items:start;text-align:left}
  .legend .unit{margin-left:0}
}
@media (max-width:420px){ .nav-links .nl-home{display:none} }