/*
Author: Claude Sonnet 5.5 Medium (earlier versions: Claude Fable 5.2 Medium)
Date: 14-November-2026
PURPOSE: Layout and type for "The Machine" (dist/index.html). A fixed full-screen canvas sits behind seven
  tall chapters; each chapter's text block sticks in place while its chapter scrolls past. Also styles the
  brand, the chapter marks on the right edge, the small labels that machine.js pins to points in the 3D
  scene, and the people cards in the last chapter. Nothing on the page is set smaller than 14px.
SRP/DRY check: Pass - the only stylesheet for this page; the old dashboard sheet is retired.
*/
:root{
  --bg:#05080f; --text:#fff; --soft:#c6d2e4; --dim:#7385a3; --line:#22335a;
  --orange:#ff851b; --amber:#ffb469; --cyan:#58c7ff;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.5 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* The scene. If 3D is unavailable machine.js adds .no3d to <body> and this soft glow stands in. */
#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
body.no3d #scene{display:none}
body.no3d{background:radial-gradient(900px 600px at 70% 30%,rgba(255,133,27,.16),transparent 60%),var(--bg)}

.brand{position:fixed;top:22px;left:clamp(20px,5vw,84px);z-index:5;display:flex;align-items:center;gap:12px;
  font:800 16px/1 var(--sans);font-stretch:112%;letter-spacing:.16em}
/* The pixel mark: a 2x2 block with two cells lit. */
.mark{width:16px;height:16px;background:
  linear-gradient(var(--orange),var(--orange)) 0 0/7px 7px no-repeat,
  linear-gradient(var(--line),var(--line)) 9px 0/7px 7px no-repeat,
  linear-gradient(var(--line),var(--line)) 0 9px/7px 7px no-repeat,
  linear-gradient(var(--amber),var(--amber)) 9px 9px/7px 7px no-repeat}

.dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:16px}
.dots a{width:13px;height:13px;border-radius:50%;border:2px solid #56688c;position:relative;transition:all .25s}
.dots a.on{background:var(--orange);border-color:var(--orange);transform:scale(1.25)}
.dots a span{position:absolute;right:26px;top:50%;transform:translateY(-50%);white-space:nowrap;opacity:0;transition:opacity .2s;
  font:800 14px/1 var(--mono);letter-spacing:.12em;color:var(--soft);pointer-events:none}
.dots a:hover span,.dots a:focus-visible span,.dots a.on span{opacity:1}
.dots a.on span{color:var(--orange)}

/* A soft darkening toward the corners, drawn over the scene and under the words. */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 62% 48%,transparent 45%,rgba(5,8,15,.6) 100%)}
main{position:relative;z-index:2}
/* Each chapter is two screens tall so there is room to scroll through its change. */
.ch{min-height:150vh;padding:22vh 0 0 clamp(20px,5vw,84px);pointer-events:none}
.txt{position:sticky;top:22vh;width:min(46vw,800px);pointer-events:auto}
.txt h1,.txt h2{margin:0 0 .32em;font:900 clamp(30px,min(6.3vw,11vh),104px)/.95 var(--sans);font-stretch:112%;letter-spacing:-.022em;
  text-wrap:balance;text-shadow:0 2px 10px rgba(5,8,15,.9)}
.txt>p{margin:0;max-width:34ch;font-size:clamp(16px,min(1.6vw,3vh),24px);color:var(--soft);text-shadow:0 1px 6px rgba(5,8,15,.95)}
.hint{margin-top:min(44px,5vh);font:800 14px var(--mono);letter-spacing:.2em;color:var(--orange);animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(6px)}}

/* Labels pinned to the scene. machine.js sets transform and opacity every frame. */
#tags{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform,opacity;opacity:0;
  font:800 15px/1 var(--mono);letter-spacing:.08em;color:#fff;padding:6px 9px;
  background:rgba(5,8,15,.72);border:1px solid rgba(88,199,255,.55)}
.tag.us{border-color:var(--orange);color:var(--orange)}
.tag.big{border:0;background:none;padding:0;color:var(--orange);font:900 clamp(34px,4vw,64px)/1 var(--sans);font-stretch:112%;
  text-shadow:0 0 30px rgba(5,8,15,.9)}

/* Last chapter: text flows normally, with the two people and the links. */
.ch.last{min-height:100vh;padding-bottom:10vh}
.txt.wide{position:static;width:min(90vw,1180px)}
.txt.wide>p{max-width:52ch}
.people{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:44px 0 30px}
.card{border:1px solid var(--line);background:rgba(8,13,24,.9);padding:26px 28px;border-top:3px solid var(--orange)}
.card b{display:block;font:900 clamp(26px,2.6vw,38px)/1 var(--sans);font-stretch:112%;letter-spacing:.02em;margin-bottom:12px}
.card p{margin:0;font-size:18px;color:var(--soft)}
.links{display:flex;flex-wrap:wrap;gap:14px}
.links a{font:800 16px var(--mono);letter-spacing:.08em;text-decoration:none;padding:14px 20px;border:1px solid var(--cyan);color:#fff;background:rgba(8,13,24,.7)}
.links a:hover{background:var(--cyan);color:var(--bg)}
.foot{margin-top:60px!important;font:400 14px var(--mono)!important;color:var(--dim)!important;letter-spacing:.08em}

/* Profile links inside a person's card, and the row of proof cards under the people. */
.who{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.who a{font:800 14px var(--mono);letter-spacing:.08em;text-decoration:none;color:var(--cyan);border:1px solid var(--line);padding:7px 11px}
.who a:hover{border-color:var(--cyan);color:#fff}
.sub{margin:44px 0 14px;font:800 14px var(--mono);letter-spacing:.2em;color:var(--orange)}
.proof{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pcard{display:block;text-decoration:none;border:1px solid var(--line);background:rgba(8,13,24,.9);padding:20px;transition:border-color .2s,transform .2s}
.pcard:hover{border-color:var(--orange);transform:translateY(-3px)}
.pcard b{display:block;font:900 22px/1.1 var(--sans);font-stretch:110%;margin-bottom:8px}
.pcard b::after{content:" ↗";color:var(--orange)}
.pcard span{display:block;font-size:16px;color:var(--soft);margin-bottom:14px}
.pcard i{display:inline-block;font:400 14px var(--mono);font-style:normal;color:var(--dim);border:1px solid var(--line);padding:2px 8px;margin:0 6px 6px 0}
.foot a{color:var(--cyan)}

/* Debug readout, shown only with ?debug=1 */
#dbg{position:fixed;left:12px;bottom:12px;z-index:9;font:800 14px var(--mono);color:#0f0;background:#000;padding:4px 8px}

/* Narrow screens: text sits in the lower half, the scene in the upper half. */
@media (max-width:800px){
  .ch{padding-top:56vh}
  .txt{top:56vh;width:88vw}
  .txt h1,.txt h2{font-size:clamp(34px,9.5vw,60px)}
  .dots{right:10px;gap:12px}
  .dots a span{display:none}
  .people{grid-template-columns:1fr}
  .ch.last{padding-top:30vh}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hint{animation:none} }

/* Advisor line under the two people: a name only, set large enough to be read, in the page's mono voice. */
.advisors{margin:-8px 0 6px!important;font:800 14px var(--mono)!important;letter-spacing:.2em;color:var(--orange)!important}
.advisors b{margin-left:14px;font:900 clamp(22px,2.2vw,30px) var(--sans);letter-spacing:.02em;color:#fff}

/* ---- Research section: flat, solid ground over the dimmed scene, so long text stays easy to read ---- */
.hint{display:inline-block;text-decoration:none}
.research{position:relative;z-index:2;padding:160px clamp(20px,5vw,84px) 80px;
  background:linear-gradient(180deg,rgba(5,8,15,0) 0,rgba(5,8,15,.96) 180px,#05080f 100%)}
.r-wrap{max-width:1180px;margin:0 auto}
.r-eyebrow{margin:0 0 14px;font:800 14px var(--mono);letter-spacing:.22em;color:var(--orange)}
.r-title{margin:0 0 20px;font:900 clamp(36px,5.2vw,76px)/.98 var(--sans);font-stretch:112%;letter-spacing:-.02em}
.r-lede{margin:0 0 56px;max-width:64ch;font-size:clamp(18px,1.5vw,22px);color:var(--soft)}
.pillar{margin:0 0 44px;padding:clamp(22px,3vw,40px);border-top:3px solid var(--orange);background:#080d18}
.p-head{display:flex;align-items:baseline;gap:18px;margin:0 0 8px;font:800 14px var(--mono);letter-spacing:.2em}
.p-no{color:var(--orange)} .p-tag{color:var(--dim)}
.pillar h3{margin:0 0 28px;max-width:26ch;font:900 clamp(26px,3.3vw,46px)/1.04 var(--sans);font-stretch:110%;letter-spacing:-.015em}
/* Each fact is a label and a paragraph, divided by thin rules, which reads like a data sheet. */
.facts{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0 30px;margin:0 0 34px}
.facts dt{padding:18px 0;border-top:1px solid var(--line);font:800 14px var(--mono);letter-spacing:.16em;color:var(--orange)}
.facts dd{margin:0;padding:16px 0;border-top:1px solid var(--line);font:400 18px/1.6 var(--sans);color:var(--soft);max-width:80ch}
.facts dd:has(.stats){max-width:none}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:4px 0 18px;background:var(--line);border:1px solid var(--line)}
.stat{padding:18px;background:#0a101c}
.stat b{display:block;font:900 clamp(26px,2.8vw,42px)/1 var(--sans);font-stretch:108%;color:var(--orange)}
.stat span{display:block;margin-top:10px;font-size:16px;line-height:1.4;color:var(--soft)}
.note{margin:0;padding:2px 0 2px 16px;border-left:3px solid var(--cyan);font-size:17px;line-height:1.55;color:var(--soft)}
.note span{display:block;margin-bottom:4px;font:800 14px var(--mono);letter-spacing:.16em;color:var(--cyan)}
.pillar .sub{margin:36px 0 14px}
.pillar .pcard b{font-size:20px}
.tscroll{overflow-x:auto;margin:0 0 6px;border:1px solid var(--line)}
.tbl{width:100%;min-width:820px;border-collapse:collapse;font:400 15px/1.45 var(--mono)}
.tbl th{padding:11px 14px;text-align:left;font:800 14px var(--mono);letter-spacing:.12em;color:var(--dim);border-bottom:1px solid var(--line)}
.tbl td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;color:var(--soft)}
.tbl .num{text-align:right;white-space:nowrap}
.tbl .fam td{background:rgba(255,133,27,.08);color:var(--orange);font-weight:800;letter-spacing:.14em;border-top:1px solid var(--line)}
.tbl a{color:var(--cyan);text-decoration:none;font-weight:600}
.tbl a:hover{text-decoration:underline}
.tbl a.log{margin-left:10px;color:var(--dim);font-weight:400}
.tbl .dim{color:var(--dim)}
.tbl .raw a{font-weight:400;color:var(--dim)} .tbl .raw a:hover{color:var(--cyan)}
.tnote{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--dim);max-width:90ch}
.research .people{margin-top:0}
.research .sub{margin-top:8px}
@media (max-width:900px){
  .facts{grid-template-columns:1fr} .facts dt{padding:16px 0 0;border-top:1px solid var(--line)} .facts dd{border-top:0;padding-top:6px}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:800px){ .research{padding-top:90px} .ch.last{padding-top:56vh} }