@font-face{font-family:Mulish;src:url("fonts/mulish-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Mulish;src:url("fonts/mulish-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:"Noto Sans";src:url("fonts/notosans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Noto Sans";src:url("fonts/notosans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --paper:#ffffff;--ink:#0b0b0b;--mid:#4a4745;--faint:#6f6b67;
  --rule:#e3e1de;--rule-soft:#efedea;
  --type:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--display:Mulish,"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);overflow-x:clip}
body{font-family:var(--type);-webkit-font-smoothing:antialiased;position:relative}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.22'/></svg>");
  mix-blend-mode:multiply;opacity:.45;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(960px,100%);margin:0 auto;padding:0 28px}

/* ---------- header ---------- */
.head{position:relative;z-index:2;border-bottom:1px solid var(--rule-soft)}
.head .wrap{display:flex;align-items:center;gap:14px;height:62px}
.head svg{width:22px;height:22px;color:var(--ink);flex:none}
.head .nm{font-size:15px;font-weight:700;letter-spacing:-.005em}
.head .tag{margin-left:auto;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* ---------- the opening line, inside the banner ---------- */
.opening{grid-area:1/1;z-index:4;width:min(960px,100%);padding:0 28px;opacity:var(--openO,1);transform:translateY(calc((1 - var(--openO,1)) * -18px));pointer-events:none}
.ask{font-size:clamp(27px,4.6vw,52px);line-height:1.26;font-weight:700;letter-spacing:-.02em;margin:0;max-width:24ch;text-wrap:balance}
.hint{margin-top:52px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:12px}
.hint i{display:block;width:30px;height:1px;background:var(--rule)}

/* ---------- the reactor ---------- */
.reactor{position:relative;height:460vh}
.rwrap{position:sticky;top:0;height:calc(100vh - 62px);height:calc(100dvh - 62px);display:grid;place-items:center;overflow:hidden}
.stage{grid-area:1/1;position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;opacity:var(--stageO,1)}
.stage svg{width:min(860px,72vw);height:auto;color:var(--ink);display:block;overflow:visible}
.legend{position:absolute;left:0;right:0;bottom:7vh;opacity:var(--legO,1);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;z-index:2}
.legend .st{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--rule);transition:color .5s ease}
.legend .st.on{color:var(--ink)}
.legend .sep{font-size:11px;color:var(--rule)}
.fill{position:absolute;inset:0;background:var(--ink);z-index:3;pointer-events:none;clip-path:circle(var(--r,0px) at var(--fx,80%) var(--fy,26%))}
.closing{grid-area:1/1;position:relative;z-index:4;color:#fff;text-align:center;max-width:min(900px,88vw);margin:0;
  font-size:clamp(22px,3.4vw,42px);line-height:1.24;font-weight:700;letter-spacing:-.015em;
  opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 12px));pointer-events:none}

/* ---------- sections ---------- */
section{padding:13vh 0;border-top:1px solid var(--rule-soft)}
.grid{display:grid;grid-template-columns:150px 1fr;gap:0 44px;align-items:start}
.grid .side{position:sticky;top:34px}
.grid .eyebrow{margin:10px 0 0}
.sidefig{margin-top:26px;width:112px;height:auto;color:var(--ink);display:block}
.sidefig .dr{stroke-dasharray:var(--L,400);stroke-dashoffset:var(--L,400)}
html.js .in .sidefig .dr,html.js .sidefig.in .dr,html:not(.js) .sidefig .dr{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.3,1)}
.sidefig .dr:nth-child(2){transition-delay:.2s}
.sidefig .dr:nth-child(3){transition-delay:.4s}
.sidefig .dr:nth-child(4){transition-delay:.58s}
.sidefig .pop{opacity:0}
html.js .in .sidefig .pop,html.js .sidefig.in .pop{opacity:1;transition:opacity .7s ease .9s}
.eyebrow{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
h2{font-size:clamp(26px,4.2vw,44px);line-height:1.22;font-weight:700;letter-spacing:-.015em;margin:0 0 26px;max-width:22ch;text-wrap:balance}
p{font-size:clamp(15px,1.7vw,17px);line-height:1.95;color:var(--mid);margin:0 0 20px;max-width:58ch}
p.lead{color:var(--ink)}
b,strong{font-weight:700;color:var(--ink)}

.story{border-top:1px solid var(--rule);padding:34px 0}
.story:last-of-type{border-bottom:1px solid var(--rule);margin-bottom:26px}
.story h3{font-size:clamp(17px,2.2vw,21px);line-height:1.5;font-weight:700;margin:0 0 14px;max-width:34ch}
.story p{margin:0;max-width:56ch}
.src{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--faint);border-bottom:1px solid var(--rule)}
.src:hover{color:var(--ink);border-color:var(--ink)}
.disc{font-size:13.5px;color:var(--faint);max-width:56ch}

/* ---------- start ---------- */
.start{border-top:1px solid var(--rule)}
.doors{display:grid;grid-template-columns:1fr;gap:0;margin-top:34px;max-width:620px}
.door{display:block;border:1px solid var(--rule);padding:26px 26px 24px;transition:border-color .25s ease,background .25s ease}
.door + .door{border-top:0}
.door:hover{border-color:var(--ink)}
.door.main{background:var(--ink);border-color:var(--ink)}
.door.main .dt,.door.main .dl{color:var(--paper)}
.door.main .dp{color:#c9c6c3}
.door.main:hover{background:#000}
.dt{font-size:17px;font-weight:700;margin:0 0 10px}
.dp{font-size:14.5px;line-height:1.75;color:var(--mid);margin:0 0 14px;max-width:46ch}
.dl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
.dl i{display:block;width:16px;height:1px;background:currentColor}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:54px 0 60px}
.sign{display:flex;align-items:center;gap:15px;padding-bottom:26px;margin-bottom:24px;border-bottom:1px solid var(--rule-soft)}
.sign svg{width:30px;height:30px;color:var(--ink);flex:none}
.fname{font-size:16px;font-weight:700;letter-spacing:-.005em}
.ftag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.flinks{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:13.5px;color:var(--mid);margin-bottom:22px}
.flinks a{border-bottom:1px solid var(--rule)}
.flinks a:hover{color:var(--ink);border-color:var(--ink)}
.flinks .dot{color:var(--rule)}
.copy{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- the founder's note, as a pop-up ---------- */
.note{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:4vh 20px;
  background:rgba(10,10,10,.42);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .4s ease}
.note.open{opacity:1;pointer-events:auto}
.note .card{
  width:min(720px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--paper);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  transform:translateY(14px) scale(.985);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.note.open .card{transform:none}
.note .bar{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--rule);flex:none}
.note .bar svg{width:20px;height:20px;color:var(--ink)}
.note .who{font-size:13px;font-weight:700}
.note .who span{font-weight:400;color:var(--faint);margin-left:8px;letter-spacing:.14em;font-size:9.5px;text-transform:uppercase}
.note .x{margin-left:14px;background:none;border:0;color:var(--faint);font-family:var(--type);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:6px}
.note .x:hover{color:var(--ink)}
.note .sheet{flex:1 1 auto;min-height:0;overflow-y:auto;padding:46px 34px 54px;scrollbar-width:thin}
.note .col{width:100%}
.ln{font-size:clamp(15px,1.75vw,19px);line-height:1.95;min-height:1.95em;white-space:pre-wrap}
.ln.gap{min-height:.85em;line-height:.85}
.ln .ch{display:inline-block}
.ln.quiet{color:var(--mid)}
.caret{display:inline-block;width:.52em;height:.075em;background:var(--ink);margin-left:.04em;margin-bottom:.12em;opacity:0}
.caret.on{animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,50%{opacity:.85}50.01%,100%{opacity:0}}
.sound{position:static;margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--type);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);background:none;border:0;cursor:pointer;padding:6px}
.sound:hover{color:var(--ink)}
.sound .off{display:none}
.sound[data-on="false"] .on{display:none}
.sound[data-on="false"] .off{display:inline}

/* ---------- reveal ---------- */
html.js .rv{opacity:0;transform:translateY(12px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.25,.6,.3,1),transform .9s cubic-bezier(.25,.6,.3,1)}

@media(max-width:820px){
  .wrap{padding:0 20px}
  .top{min-height:78vh;padding:12vh 0 8vh}
  .id svg{width:32px;height:32px}
  .ask{font-size:clamp(25px,7.4vw,34px);max-width:16ch}
  .reactor{height:420vh}
  .rwrap{height:calc(100vh - 56px);height:calc(100dvh - 56px)}
  .opening{padding:0 20px}
  .stage svg{width:80vw}
  .legend{bottom:5vh;gap:9px}
  .legend .st{font-size:8.5px;letter-spacing:.14em}
  section{padding:10vh 0}
  .grid{grid-template-columns:1fr;gap:0}
  .grid .side{position:static;display:flex;align-items:center;gap:18px;margin-bottom:22px}
  .grid .eyebrow{margin:0}
  .sidefig{margin-top:0;width:62px;order:-1}
  .head .wrap{height:56px}
  .head .tag{font-size:8.5px;letter-spacing:.14em;line-height:1.2;text-align:right;align-self:center;margin-bottom:0}
  h2{font-size:clamp(22px,6.4vw,30px);max-width:18ch}
  .note{padding:3vh 14px}
  .note .card{max-height:92vh;border-radius:12px}
  .note .sheet{padding:30px 22px 38px}
  .ln{font-size:14.5px}

  .flinks{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js .rv{opacity:1!important;transform:none!important}
}

/* ---------- inner pages ---------- */
.pagetop{border-bottom:1px solid var(--rule);padding:26px 0}
.pagetop .wrap{display:flex;align-items:center;gap:13px}
.pagetop svg{width:26px;height:26px;color:var(--ink)}
.pagetop .nm{font-size:16px;font-weight:700}
.pagetop .back{margin-left:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.pagetop .back:hover{color:var(--ink)}
.doc{padding:11vh 0 12vh}
.doc h1{font-size:clamp(28px,4.4vw,44px);line-height:1.2;font-weight:700;letter-spacing:-.02em;margin:0 0 14px;max-width:20ch}
.doc .when{font-size:12px;color:var(--faint);margin:0 0 54px}
.qa{border-top:1px solid var(--rule);padding:30px 0}
.qa:last-of-type{border-bottom:1px solid var(--rule)}
.qa h2{font-size:clamp(17px,2.2vw,21px);line-height:1.45;margin:0 0 12px;max-width:32ch}
.qa p{margin:0;max-width:58ch}
.doc h3{font-size:15px;font-weight:700;margin:40px 0 12px;letter-spacing:.01em}
.doc p a{border-bottom:1px solid var(--rule)}
.doc p a:hover{border-color:var(--ink)}
h1,h2,h3,.ask,.nm,.fname{font-family:var(--display)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:12px 18px;font-size:13px;text-decoration:none}.skip:focus{left:0}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hnav{margin-left:auto;display:flex;gap:20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}.hnav a{text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}.hnav a:hover{border-bottom-color:var(--ink);color:var(--ink)}.head .tag{margin-left:28px}@media(max-width:820px){.hnav{gap:14px;font-size:10px;letter-spacing:.06em}.head .tag{display:none}}
.brandlink{display:flex;align-items:center;gap:13px;flex:none}.head{position:relative;z-index:2;border-bottom:1px solid var(--rule-soft)}.nm{font-size:15px;font-weight:700;letter-spacing:-.005em}.hnav a{text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}.hnav a[aria-current="page"]{border-bottom-color:var(--ink);color:var(--ink)}footer{border-top:1px solid var(--rule);padding:54px 0 60px}footer svg{width:30px;height:30px;flex:none}.dot{color:var(--rule)}@media(max-width:820px){.nm{font-size:16px}}