/*
Author: Claude Fable 5.2 Medium
Date: 13-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:130vh;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(4,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)}
@media (max-width:1000px){.proof{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.proof{grid-template-columns:1fr}}

/* 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} }