/* Layout: the plant at night. A full-bleed server-hall hero, a thesis set beside a two-panel city, then exhibits whose headers carry a window or strip illustration. Single dark world by choice: teal night and amber rack light from the archive images. */
:root{
  color-scheme:dark;
  --paper:#0a1113; --card:#111b1e; --ink:#e8efe9; --ink-2:#b7c6c2; --ink-3:#7f918e; --rule:#1f2e31; --rule-soft:rgba(232,239,233,.07);
  --amber:#f0a04b; --teal:#6cc7bd;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
  --fact:#8fd3ad; --fact-bg:#13301f; --rep:#f0c46a; --rep-bg:#33280e; --inf:#c7b3f0; --inf-bg:#251f3a; --watch:#bdbcb7; --watch-bg:#262a2a;
  --low:#7fd1a8; --high:#f0936a; --mid:#8fa09d;
  --display:"Fraunces",Georgia,"Times New Roman",serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gut-l:max(16px,env(safe-area-inset-left,0px)); --gut-r:max(16px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:16px/1.6 var(--body);margin:0}
a{color:inherit;text-decoration-color:var(--ink-3);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}
.wrap{max-width:1040px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.prose{max-width:64ch}
.eyebrow{font:500 11.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
h1{font:400 clamp(40px,6.4vw,80px)/.98 var(--display);font-variation-settings:"SOFT" 60,"opsz" 144;letter-spacing:-.025em;margin:16px 0 18px;text-wrap:balance;max-width:16ch}
h1 em{font-style:italic;color:var(--amber)}
h2{font:500 clamp(26px,3.6vw,38px)/1.1 var(--display);font-variation-settings:"SOFT" 50,"opsz" 120;margin:0 0 12px;text-wrap:balance}
h3{font:600 15px/1.3 var(--body);margin:0 0 6px}
.dek{font:400 19px/1.6 var(--body);color:var(--ink-2);max-width:58ch;margin:0}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:22px;font:12px/1.5 var(--mono);color:var(--ink-3)}
.chip{display:inline-block;font:600 10.5px/1 var(--mono);letter-spacing:.06em;padding:4px 6px 3px;border-radius:4px;vertical-align:1px;white-space:nowrap}
.fact{color:var(--fact);background:var(--fact-bg)} .rep{color:var(--rep);background:var(--rep-bg)} .inf{color:var(--inf);background:var(--inf-bg)} .watch{color:var(--watch);background:var(--watch-bg)}
figure{margin:0}
figcaption,.cap{font:11px/1.45 var(--mono);color:var(--ink-3);margin-top:8px}

.hero{position:relative;overflow:hidden;background:var(--card)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,17,19,.7) 0%,rgba(10,17,19,0) 62%),linear-gradient(180deg,rgba(10,17,19,.1) 0%,rgba(10,17,19,.4) 45%,rgba(10,17,19,.97) 100%)}
.hero .wrap{position:relative;z-index:1;min-height:clamp(480px,58vw,760px);display:flex;flex-direction:column;justify-content:flex-end;padding-block:40px 32px}
.hero .cap{color:var(--ink-2);margin-top:18px}

.thesis-row{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:36px;align-items:start;padding-top:44px}
.thesis{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.side{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px 20px;min-width:0}
.side .big{font:400 44px/1 var(--display);font-variant-numeric:tabular-nums;margin:8px 0 10px}
.side.lo .big{color:var(--low)} .side.hi .big{color:var(--high)}
.side p{margin:0;font-size:14.5px;color:var(--ink-2)}
.side .src{margin-top:10px;font:11.5px/1.4 var(--mono);color:var(--ink-3)}
.bridge{font:italic 400 21px/1.45 var(--display);color:var(--ink);margin:22px 0 0;max-width:46ch}
.tall{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--rule)}
.tall img{width:100%;height:auto;display:block}

section.ex{padding-top:64px}
.ex-head{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:32px;align-items:end;border-top:1px solid var(--rule);padding-top:32px}
.ex-head.nofig{grid-template-columns:minmax(0,1fr)}
.ex-head .win{border-radius:12px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 0 0 1px var(--rule)}
.ex-head .win img{width:100%;height:100%;object-fit:cover;display:block}
.strip{margin-top:24px;border-radius:12px;overflow:hidden;aspect-ratio:21/8;box-shadow:0 0 0 1px var(--rule)}
.strip img{width:100%;height:100%;object-fit:cover;display:block}
.exnum{font:600 12px/1 var(--mono);letter-spacing:.16em;color:var(--teal);margin-bottom:12px}
.bench{margin-top:24px;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:20px;min-width:0}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tog{font:500 13px/1 var(--body);color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:999px;padding:9px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tog .sw{width:10px;height:10px;border-radius:3px;background:var(--c,var(--ink-3))}
.tog[aria-pressed="true"]{border-color:var(--teal);background:rgba(108,199,189,.1)}
.tog:hover{border-color:var(--ink-2)}
.readout{font:14.5px/1.55 var(--body);color:var(--ink-2);margin-top:12px;min-height:3.2em}
.readout b{color:var(--ink);font-variant-numeric:tabular-nums}
.note{font:12.5px/1.5 var(--body);color:var(--ink-3);margin-top:10px}
svg text{font-family:var(--mono)}
.chart{width:100%;height:auto;display:block;overflow:visible}
.tip{position:absolute;pointer-events:none;opacity:0}
.relwrap{position:relative}
input[type=range]{width:100%;accent-color:var(--amber)}
.slider-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.slider-val{font:400 28px/1 var(--display);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right;color:var(--amber)}
.marks{position:relative;height:44px;margin-top:2px;font:11px/1.2 var(--mono);color:var(--ink-3)}
.marks span{position:absolute;transform:translateX(-50%);white-space:nowrap;top:0}
.marks span::before{content:"";display:block;width:1px;height:8px;background:var(--ink-3);margin:0 auto 3px}
.ledger{width:100%;border-collapse:collapse;font-size:14px}
.ledger th{font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule)}
.ledger td{padding:10px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.ledger td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
.dials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dial{border:1px solid var(--rule);border-radius:10px;padding:12px;min-width:0;background:var(--paper)}
.dial .q{font:600 13.5px/1.35 var(--body);margin-bottom:8px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 auto;font:500 12.5px/1.2 var(--body);color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:7px;padding:8px 9px;cursor:pointer;text-align:left}
.seg button[aria-pressed="true"]{border-color:var(--teal);background:rgba(108,199,189,.1);font-weight:600}
.verdict{margin-top:14px;border-radius:10px;padding:14px 16px;background:var(--paper);border:1px solid var(--rule)}
.verdict .arrow{font:400 26px/1.15 var(--display);margin:4px 0 6px}
.verdict ul{margin:8px 0 0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.verdict li{margin:4px 0}

.band{position:relative;overflow:hidden;background:var(--card);margin-top:72px}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,17,19,.2) 0%,rgba(10,17,19,.45) 55%,rgba(10,17,19,.95) 100%)}
.band .wrap{position:relative;z-index:1;min-height:clamp(300px,36vw,460px);display:flex;flex-direction:column;justify-content:flex-end;padding-block:28px}
.band h2{max-width:22ch}
.band .cap{color:var(--ink-2)}

.counter{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.counter .side h3{font:500 20px/1.25 var(--display)}
.counter ul{margin:6px 0 0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.counter li{margin:6px 0}
.qs{counter-reset:q;list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.qs li{counter-increment:q;padding:14px 16px 14px 50px;position:relative;background:var(--card);border:1px solid var(--rule);border-radius:10px;font-size:15.5px}
.qs li::before{content:counter(q);position:absolute;left:16px;top:12px;font:400 22px/1 var(--display);color:var(--amber)}
.ties{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ties a{font:500 12.5px/1 var(--mono);border:1px solid var(--rule);border-radius:6px;padding:9px 11px;text-decoration:none;background:var(--card)}
.ties a:hover{border-color:var(--teal)}
.sources{font-size:13px;color:var(--ink-2);padding-left:18px}
.sources li{margin:5px 0}
footer{margin-top:64px;border-top:1px solid var(--rule);padding-block:18px 48px;font:12px/1.6 var(--mono);color:var(--ink-3)}
@media (max-width:820px){
  .thesis-row{grid-template-columns:1fr}.thesis-row .tall{max-width:360px}
  .ex-head{grid-template-columns:minmax(0,1fr) 130px;gap:18px}
}
@media (max-width:680px){
  .thesis,.counter,.dials{grid-template-columns:1fr}
  .ex-head{grid-template-columns:1fr}.ex-head .win{display:none}
  .strip{aspect-ratio:16/9}
  .relwrap{overflow-x:auto}
  .hero img{object-position:88% 50%}
  .hero::after{background:linear-gradient(180deg,rgba(10,17,19,.55) 0%,rgba(10,17,19,.75) 40%,rgba(10,17,19,.97) 100%)}
  .chart{min-width:600px}.relwrap::after{content:"Scroll the chart sideways";display:block;font:11px/1.4 var(--mono);color:var(--ink-3);margin-top:6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.topnav{position:absolute;z-index:2;top:0;left:0;right:0;max-width:1040px;margin:0 auto;padding:18px var(--gut-r) 0 var(--gut-l);font:500 12px/1.4 var(--mono);letter-spacing:.06em}
.topnav a{text-decoration:none;color:var(--ink-2)}
.topnav a:hover{color:var(--ink)}
:root{padding-bottom:env(safe-area-inset-bottom,0px)}