:root{
  --sheet:#F7F7F4; --ink:#17191C; --graphite:#585D63; --line:#C9CBC6; --line-soft:#E4E5E1;
  --duct:#1E4A72; --rev:#B8151F; --space:#060A12; --glow:#BFD6F5; --max:1200px;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--space)}
body{margin:0;color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible,label:focus-within{outline:2px solid #5aa2f0;outline-offset:3px}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
main{position:relative;z-index:1}

/* the scroll stage */
#stage{height:900vh;position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#EEF3FA}

/* the sheet */
#paper{position:absolute;inset:0;background:var(--sheet);color:var(--ink);z-index:3}
.frame{position:absolute;inset:14px;min-width:0;border:1.5px solid var(--ink);display:grid;grid-template-columns:minmax(300px,27%) minmax(0,1fr);grid-template-rows:1fr auto}
.frame::before{content:"";position:absolute;inset:5px;border:.5px solid var(--ink);pointer-events:none}
.notes{padding:30px 30px 22px;border-right:.5px solid var(--ink);display:flex;flex-direction:column;min-height:0;position:relative;z-index:1}
.mark{font-weight:700;font-variation-settings:"wdth" 112;font-size:17px;letter-spacing:-.01em;text-decoration:none;margin-bottom:auto;padding-bottom:20px}
.notes h1{margin:0 0 18px;font-weight:700;font-variation-settings:"wdth" 118;font-size:clamp(32px,3.7vw,56px);line-height:1.02;letter-spacing:-.025em}
.notes p{margin:0 0 22px;color:var(--graphite);font-size:clamp(15px,1.15vw,17px)}
.notes .btn{align-self:flex-start}
.gn{margin:24px 0 auto;padding:12px 0 0 18px;border-top:.5px solid var(--line);font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--graphite)}
.scroll{font-family:var(--mono);font-size:11.5px;color:var(--duct);padding-top:14px}
.draw{min-width:0;min-height:0;padding:10px 18px;display:flex}
#plan{width:100%;height:100%;display:block}
.btn{display:inline-block;padding:13px 20px;background:var(--ink);color:var(--sheet);text-decoration:none;font:600 15px "Archivo",sans-serif;border:1.5px solid var(--ink);cursor:pointer}
.btn:hover{background:var(--sheet);color:var(--ink)}
.btn.light{background:#EEF3FA;border-color:#EEF3FA;color:var(--space)}
.btn.light:hover{background:transparent;color:#EEF3FA}

/* plan linework */
#plan path,#plan rect,#plan circle{fill:none}
#plan .grid{stroke:#9aa0a6;stroke-width:.6;stroke-dasharray:14 3 2 3}
#plan .bub{stroke:var(--ink);stroke-width:.9}
#plan .col{fill:#17191c;stroke:none}
#plan .sys{stroke:var(--ink)}
#plan .edge{stroke-width:1.15}
#plan .pipe{stroke-width:1.5}
#plan .sa,#plan .ra{stroke:var(--duct)}
#plan .chws,#plan .chwr{stroke:#0c6f70}
#plan .hws,#plan .hwr{stroke:#a4620f}
#plan .cw{stroke:#2b7d3f}
#plan .san{stroke:#5d479c}
#plan .fp{stroke:var(--rev)}
#plan .el{stroke:#8d7a0b}
#plan .equip{stroke:var(--ink);stroke-width:1;fill:rgba(23,25,28,.05)}
#plan .hgr{stroke:var(--ink);stroke-width:.8}
#plan .lead{stroke:var(--ink);stroke-width:.6}
#plan .cloud{stroke:var(--rev);stroke-width:1.3}
#plan .delta{stroke:var(--rev);stroke-width:1.2}
#plan text{font-family:var(--mono);fill:var(--ink);font-size:9.5px}
#plan .bubt{text-anchor:middle;font-size:11px;font-weight:700}
#plan .dim{text-anchor:middle;font-size:9px;fill:var(--graphite)}
#plan .tag{font-weight:700;font-size:10px}
#plan .note{fill:var(--graphite);font-size:9px}
#plan .deltat{text-anchor:middle;fill:var(--rev);font-size:9px;font-weight:700}
@media (prefers-reduced-motion:no-preference){
  #plan path[pathLength]{stroke-dashoffset:1;animation:draw 1.8s .15s cubic-bezier(.3,.1,.2,1) forwards}
  #plan .sys[pathLength]{stroke-dasharray:1;animation-delay:.5s}
  #plan .cloud{stroke-dasharray:1;animation-delay:1.7s}
  #plan .grid{animation:none;stroke-dashoffset:0}
  #plan .hgr,#plan .delta,#plan .deltat,#plan .lead,#plan .tag,#plan .note{opacity:0;animation:appear .5s 1.9s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}

/* title block */
.tb{display:grid;grid-template-columns:2.4fr 1fr 1fr 1.1fr .6fr .8fr;border-top:1.5px solid var(--ink);font-size:12px;line-height:1.3;background:var(--sheet);color:var(--ink);position:relative;z-index:1}
.frame .tb{grid-column:1/-1;margin:0 5px 5px}
.tb div{padding:9px 14px;border-right:.5px solid var(--ink);min-height:54px}
.tb div:last-child{border-right:0}
.tb small{display:block;color:var(--graphite);font-size:10.5px;margin-bottom:4px}
.tb b{font-size:14px;font-weight:700;font-variation-settings:"wdth" 112;display:block}
.stamp{color:var(--rev);font-family:var(--mono);font-size:11px;font-weight:700}

/* chapters */
.cap{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(92px,13vh,130px);max-width:520px;opacity:0;z-index:2;padding:18px 22px;background:rgba(6,10,18,.62);backdrop-filter:blur(6px);border-left:2px solid #5aa2f0}
.cap small{font-family:var(--mono);font-size:12px;color:#8fb4e0;letter-spacing:.04em}
.cap h2{margin:6px 0 10px;font-size:clamp(28px,3.4vw,46px);line-height:1.05;font-variation-settings:"wdth" 114;letter-spacing:-.02em}
.cap p{margin:0;color:#C6D2E2;font-size:clamp(15px,1.25vw,18px)}
.cap p b{color:#fff;font-family:var(--mono)}
.cap.end .btn{margin-top:18px}
#rail{position:absolute;top:26px;left:clamp(20px,5vw,72px);display:flex;gap:18px;font-family:var(--mono);font-size:12px;color:#7d8ba0;z-index:2}
#rail a{display:flex;gap:6px;transition:color .2s}
#rail i{font-style:normal;opacity:.6}
#rail a.on{color:#fff}
#rail .skip{margin-left:14px;color:#BFD6F5;text-decoration:underline}
#hud{position:absolute;right:clamp(20px,4vw,56px);top:22px;display:flex;gap:26px;opacity:0;z-index:2;text-align:right}
#hud small{display:block;font-size:11px;color:#8fa0b6}
#hud b{font-family:var(--mono);font-size:clamp(20px,2.3vw,30px);font-weight:500}
#hud .red{color:#ff6a5e}
#tags{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;z-index:1}
#tags span{position:absolute;left:0;top:0;font-family:var(--mono);font-size:11px;color:#BFF5F0;background:rgba(6,10,18,.72);border:.5px solid #18c8c0;padding:2px 6px;white-space:nowrap}
.honest{position:absolute;right:clamp(20px,4vw,56px);bottom:14px;margin:0;padding:3px 7px;background:rgba(6,10,18,.72);font-family:var(--mono);font-size:11px;color:#8fa0b6;z-index:2}

/* explore */
#explore{display:none}
.exploring body{overflow:hidden}
.exploring .sheet-body,.exploring .pin>*{visibility:hidden!important}
.exploring #gl{z-index:2;cursor:grab}
.exploring #explore{display:block;position:fixed;inset:0;z-index:3;pointer-events:none;color:#EEF3FA}
.panel{position:absolute;left:18px;top:18px;width:250px;padding:16px;background:rgba(6,10,18,.84);border:.5px solid #3f5878;pointer-events:auto;font-size:14px}
.panel p{margin:4px 0 12px;color:#9fb0c6;font-size:13px}
#filters{display:grid;gap:5px;margin-bottom:14px;font-size:13px}
#filters label{display:flex;align-items:center;gap:7px;cursor:pointer}
#filters i{width:12px;height:12px;display:inline-block}
.panel.props{left:auto;right:18px;width:280px}
.panel[hidden]{display:none}
.props dl{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px}
.props dt{color:#8fa0b6}
.props dd{margin:0;font-family:var(--mono);font-size:12px}

/* the page after the model */
.sheet-body{position:relative;background:var(--sheet);border:1.5px solid var(--ink);margin:14px;outline:14px solid var(--sheet)}
.sheet-body::before{content:"";position:absolute;inset:5px;border:.5px solid var(--ink);pointer-events:none}
section{max-width:var(--max);margin:0 auto;padding:clamp(48px,7vw,88px) clamp(20px,5vw,56px);border-bottom:.5px solid var(--line)}
section:last-of-type{border-bottom:0}
section h2{margin:0 0 30px;font-weight:700;font-variation-settings:"wdth" 110;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:-.02em}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:40px}
.schedule{width:100%;border-collapse:collapse;border-top:1.5px solid var(--ink)}
.schedule thead th{font:500 11px var(--mono);color:var(--graphite);padding:9px 14px 9px 0;text-align:left;border-bottom:.5px solid var(--ink)}
.schedule tbody th,.schedule tbody td{text-align:left;vertical-align:top;padding:20px 18px 20px 0;border-bottom:.5px solid var(--line)}
.schedule tbody th{width:27%;font-size:clamp(17px,1.7vw,20px);line-height:1.15;letter-spacing:-.01em}
.schedule tbody td{color:var(--graphite);font-size:15.5px}
.schedule .k{font-family:var(--mono);font-size:12px;color:var(--rev);width:44px}
.pains,.terms{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.pains{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.pains li,.terms li{padding:16px 0;border-bottom:.5px solid var(--line);color:var(--graphite)}
.pains b,.terms b{color:var(--ink);font-weight:600;display:block;margin-bottom:4px}
.lede{font-size:clamp(18px,1.8vw,22px);line-height:1.45;max-width:48ch;margin:0 0 24px}
.spec{width:100%;border-collapse:collapse;border-top:1.5px solid var(--ink)}
.spec th,.spec td{text-align:left;vertical-align:top;padding:12px 0;border-bottom:.5px solid var(--line);font-size:15.5px}
.spec th{width:130px;font:500 12px/1.8 var(--mono);color:var(--duct);padding-right:16px}
.spec td{color:var(--graphite)}
.readout{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink);border-left:.5px solid var(--line)}
.readout div{padding:16px;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line)}
.readout b{display:block;font-family:var(--mono);font-size:clamp(26px,3.2vw,42px);font-weight:500;letter-spacing:-.03em}
.readout span{font-size:13px;color:var(--graphite)}
.readout i{font-style:normal}
.tests{list-style:none;margin:16px 0 0;padding:0;font-family:var(--mono);font-size:12px;color:var(--graphite);columns:2;column-gap:32px}
.tests li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:.5px solid var(--line-soft);break-inside:avoid}
.roles{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.roles li{display:grid;grid-template-columns:6.5em 1fr;gap:16px;padding:12px 0;border-bottom:.5px solid var(--line);font-size:15px}
.roles li span:first-child{color:var(--graphite);font-variant-numeric:tabular-nums}
.roles b{font-weight:600}
.roles em{font-style:normal;color:var(--graphite)}
.sectors{margin:24px 0 0;color:var(--graphite);max-width:56ch}
.sectors b{color:var(--ink);font-weight:600}
.contact p{max-width:48ch;color:var(--graphite);margin:0 0 24px}
.contact .mail{font-size:clamp(22px,3.4vw,44px);font-weight:700;letter-spacing:-.02em;text-decoration:none;display:inline-block;margin-bottom:24px;word-break:break-all}
.contact .mail:hover{color:var(--rev)}
.contact .links a{margin-right:22px;font-size:15px}
.sheet-body>.tb{margin:0 5px 5px}

/* no WebGL: the sheet and the page still work */
.no-gl #stage{height:100vh}
.no-gl .cap,.no-gl #hud,.no-gl #rail,.no-gl .honest{display:none}

@media (max-width:900px){
  .cols{grid-template-columns:1fr;gap:6px}
  .frame{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;inset:8px}
  .notes{border-right:0;border-bottom:.5px solid var(--ink);padding:18px 18px 14px}
  .mark{margin-bottom:0;padding-bottom:12px}
  .gn,.scroll{display:none}
  .notes p{margin-bottom:14px}
  .tb{grid-template-columns:1fr 1fr 1fr}
  .tb .wide{grid-column:1/-1;border-right:0;border-bottom:.5px solid var(--ink)}
  .frame .tb div:not(.wide){min-height:0}
  .tb div{padding:6px 10px;min-height:0}
  .schedule thead{display:none}
  .schedule,.schedule tbody,.schedule tr,.schedule tbody th,.schedule tbody td{display:block;width:auto}
  .schedule tbody th,.schedule tbody td{padding:4px 0;border:0}
  .schedule tr{padding:14px 0;border-bottom:.5px solid var(--line)}
  .pains{grid-template-columns:1fr}
  .readout{grid-template-columns:1fr 1fr}
  .tests{columns:1}
  .sheet-body{margin:8px;outline-width:8px}
  #rail a:not(.skip){display:none}
  #rail{top:68px;left:20px}
  #rail .skip{margin-left:0}
  #hud{left:20px;right:auto;text-align:left;top:16px}
  .cap{left:12px;right:12px;bottom:40px;max-width:none;padding:12px 14px}
  .honest{right:12px;left:12px;bottom:10px}
  .panel{width:auto;right:12px;left:12px;top:12px;max-height:46vh;overflow:auto}
  .panel.props{top:auto;bottom:12px;left:12px;right:12px;width:auto}
}