/* ============================================================
   RISE/64 — Marketing site stylesheet
   Aesthetic: warm printed paper vs cold glowing phosphor.
   Paper = the human record. Phosphor = the live machine.
   Four diegetic monitor modes (Paper / Amber / Green / Slate).
   ============================================================ */

/* ---------------- Tokens ---------------- */
:root{
  /* paper ground */
  --paper:#f3efe6;
  --paper-2:#ebe5d8;
  --paper-3:#e3dccb;
  --card:#fbf8f1;
  --ink:#1d1f24;
  --ink-soft:#4a4f59;
  --ink-faint:#7b7466;
  --rule:#d6cfbe;
  --rule-soft:#e2dccd;

  /* accent — owned by the active monitor mode */
  --accent:#d8892b;
  --accent-deep:#a8631a;
  --accent-ink:#1d1410;       /* text that sits on the accent */

  /* fixed phosphor + machine colours */
  --phos:#2f8f5b;
  --phos-bright:#34c476;
  --term-bg:#0e1418;
  --term-bg-2:#121b21;
  --term-fg:#7df2b0;
  --term-dim:#4d7e66;
  --violet:#7a5bb0;
  --terracotta:#c2491f;

  --maxw:1180px;
  --shadow:0 1px 2px rgba(30,25,15,.10), 0 14px 40px -22px rgba(30,25,15,.45);
  --shadow-lift:0 2px 4px rgba(30,25,15,.12), 0 30px 70px -34px rgba(30,25,15,.5);

  --sans:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --serif:"Newsreader","Iowan Old Style",Palatino,Georgia,serif;
  --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
  --hand:"Caveat","Segoe Print",cursive;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* AMBER — classic gas-plasma tube. Accent is amber-forward, paper warms a touch. */
html[data-theme="amber"]{
  --paper:#f1e9d8;
  --paper-2:#e9dfca;
  --card:#faf3e3;
  --accent:#cf7f1f;
  --accent-deep:#9e5c14;
}

/* GREEN — P1 green phosphor, the oldest tube. Accent goes phosphor-green. */
html[data-theme="green"]{
  --accent:#2f8f5b;
  --accent-deep:#1f6e43;
  --accent-ink:#06140d;
}

/* SLATE — night shift / lights-out CRT. The whole ground goes dark. */
html[data-theme="slate"]{
  --paper:#161a20;
  --paper-2:#1d232b;
  --paper-3:#232a33;
  --card:#1e252e;
  --ink:#ece8de;
  --ink-soft:#aab3c0;
  --ink-faint:#79828f;
  --rule:#313a45;
  --rule-soft:#28303a;
  --accent:#e0a24a;
  --accent-deep:#f0b766;
  --accent-ink:#1a1206;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 46px -24px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 36px 80px -34px rgba(0,0,0,.8);
}

/* ---------------- Reset / base ---------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .45s var(--ease), color .45s var(--ease);
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:var(--accent-ink)}

/* phosphor type helpers */
.mono{font-family:var(--mono)}
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--accent-deep); font-weight:600;
}
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent-deep); font-weight:600;
  display:flex; align-items:center; gap:14px; margin:0 0 22px;
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--accent); display:inline-block }
.eyebrow .n{ color:var(--ink-faint) }

.cursor{
  display:inline-block; width:.56ch; height:1em; background:currentColor;
  margin-left:.1ch; transform:translateY(.08em);
  animation:blink 1.08s steps(1) infinite;
}
@keyframes blink{ 50%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .cursor{animation:none} }
.slash{ color:var(--accent) }

/* ---------------- Buttons ---------------- */
.btn{
  font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.03em;
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  padding:14px 22px; border-radius:3px; border:1px solid transparent;
  transition:transform .12s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s;
  text-decoration:none; white-space:nowrap;
}
.btn .arr{ font-family:var(--mono); transform:translateY(-1px) }
.btn--wish{
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 2px 0 var(--accent-deep), var(--shadow);
}
.btn--wish:hover{ transform:translateY(-2px); box-shadow:0 4px 0 var(--accent-deep), var(--shadow-lift) }
.btn--wish:active{ transform:translateY(0); box-shadow:0 1px 0 var(--accent-deep) }
.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--rule);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; font-weight:500; text-transform:uppercase;
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-deep) }
/* ghost on phosphor */
.on-term .btn--ghost{ color:var(--term-fg); border-color:#2c4a3b }
.on-term .btn--ghost:hover{ border-color:var(--term-fg); color:#aef7cf }

/* ---------------- Desk bar (sticky terminal strip) ---------------- */
.deskbar{
  position:sticky; top:0; z-index:60;
  background:var(--term-bg); color:var(--term-fg);
  font-family:var(--mono);
  border-bottom:2px solid var(--accent);
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(14px,3.4vw,34px); height:54px;
}
.deskbar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px);
  opacity:.45; mix-blend-mode:overlay;
}
.deskbar > *{ position:relative; z-index:2 }
.deskbar__brand{
  font-size:18px; font-weight:700; letter-spacing:.04em; color:var(--term-fg);
}
.deskbar__brand .cursor{ background:var(--term-fg) }
.deskbar__nav{ display:flex; gap:4px; margin-left:6px }
.deskbar__nav a{
  font-size:11.5px; letter-spacing:.16em; color:var(--term-dim); padding:6px 10px;
  text-transform:uppercase; border-radius:3px; transition:color .18s, background .18s;
}
.deskbar__nav a:hover{ color:var(--term-fg); background:rgba(125,242,176,.07) }
.deskbar__spacer{ flex:1 1 auto }
.deskbar .themer{ display:flex; align-items:center; gap:0 }
.deskbar .themer b{ font-size:10px; letter-spacing:.18em; color:#3f6b55; margin-right:9px; font-weight:500 }
.themer button{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; cursor:pointer;
  background:transparent; color:#6cae8d; border:1px solid #244135; border-left:none;
  padding:6px 9px; transition:all .15s;
}
.themer button:first-of-type{ border-left:1px solid #244135; border-radius:3px 0 0 3px }
.themer button:last-of-type{ border-radius:0 3px 3px 0 }
.themer button:hover{ color:var(--term-fg); background:rgba(125,242,176,.08) }
.themer button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.deskbar__clock{ font-size:11px; letter-spacing:.1em; color:var(--term-dim); display:none }
.deskbar .btn--wish{ padding:9px 16px; font-size:12px; border-radius:3px }
@media (max-width:1080px){
  .deskbar__nav{ display:none }
  .deskbar .themer b{ display:none }
}
@media (max-width:600px){
  .deskbar{ gap:10px }
  .deskbar .btn--wish .lbl-long{ display:none }
}
@media (min-width:1320px){ .deskbar__clock{ display:inline } }

/* ---------------- Generic section frame ---------------- */
.section{ padding:clamp(74px,9vw,140px) clamp(20px,5vw,40px); position:relative }
.wrap{ max-width:var(--maxw); margin:0 auto }
.wrap--narrow{ max-width:860px }
.on-term{
  background:var(--term-bg); color:var(--term-fg);
}
.on-term .kicker,.on-term .eyebrow{ color:var(--accent) }
.on-term .eyebrow .n{ color:var(--term-dim) }
.on-term .eyebrow::before{ background:var(--accent) }

/* paper grain — extremely subtle */
.section.paper{ background:var(--paper) }
.section.paper-2{ background:var(--paper-2) }
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image:radial-gradient(rgba(120,108,84,.05) 1px, transparent 1px);
  background-size:3px 3px;
}
.section > *{ position:relative; z-index:1 }

/* scanline + vignette helpers for phosphor surfaces */
.scan{ position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode:overlay; opacity:.4;
}
.vignette{ position:absolute; inset:0; pointer-events:none; z-index:4;
  background:radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
}
@media (prefers-reduced-motion:reduce){ .scan{ display:none } }

/* ---------------- Headlines ---------------- */
h1,h2,h3,h4{ font-family:var(--sans); font-weight:800; letter-spacing:-.02em; line-height:1.05; margin:0 }
.h-display{ font-size:clamp(40px,7vw,86px); font-weight:900; letter-spacing:-.035em; line-height:.98 }
.h-1{ font-size:clamp(34px,5.4vw,62px); font-weight:800; letter-spacing:-.03em; line-height:1.02 }
.h-2{ font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.02em }
.lede{ font-family:var(--serif); font-size:clamp(20px,2.4vw,27px); line-height:1.5; color:var(--ink-soft); font-weight:400 }
.on-term .lede{ color:#bfe9d2 }
.prose{ font-size:19px; line-height:1.66; color:var(--ink-soft); max-width:62ch }
.prose strong{ color:var(--ink); font-weight:600 }
.prose em{ font-style:italic }
.dim{ color:var(--ink-faint) }

/* ============================================================
   HERO
   ============================================================ */
.hero{ background:var(--term-bg); color:var(--term-fg); position:relative; overflow:hidden;
  padding:clamp(48px,7vw,86px) clamp(20px,5vw,40px) clamp(64px,8vw,110px) }
.hero__bg{ position:absolute; inset:0; z-index:0; opacity:.5;
  background:
    radial-gradient(80% 60% at 78% 12%, rgba(47,143,91,.16), transparent 60%),
    radial-gradient(70% 70% at 12% 90%, rgba(216,137,43,.10), transparent 60%);
}
.hero__grid{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,68px); align-items:center;
}
@media (max-width:940px){ .hero__grid{ grid-template-columns:1fr; gap:40px } }

.hero__kick{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; color:var(--term-dim);
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-bottom:26px;
}
.hero__kick .dot{ color:#2c4a3b }
.hero__kick .lit{ color:var(--accent) }
.brand-xl{
  font-family:var(--mono); font-weight:700; line-height:.9; white-space:nowrap;
  font-size:clamp(50px,9.4vw,118px); letter-spacing:-.02em; color:var(--term-fg);
  margin:0 0 6px; text-shadow:0 0 28px rgba(125,242,176,.28);
}
.brand-xl .slash{ color:var(--accent); text-shadow:0 0 28px rgba(216,137,43,.4) }
.brand-xl .cursor{ background:var(--term-fg); width:.5ch; height:.84em }
.hero__tag{
  font-family:var(--sans); font-weight:800; letter-spacing:-.025em; line-height:1.06;
  font-size:clamp(25px,3.3vw,38px); color:#eafff4; margin:22px 0 20px; max-width:16ch;
}
.hero__tag .u{ color:var(--accent); font-style:normal }
.hero__sub{ font-family:var(--serif); font-size:clamp(17px,1.9vw,20.5px); line-height:1.55;
  color:#a7d8bf; max-width:46ch; margin:0 0 30px }
.hero__sub em{ font-style:italic; color:#cfeede }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.hero__meta{
  margin-top:30px; padding-top:22px; border-top:1px solid #1d2c25;
  display:flex; flex-wrap:wrap; gap:6px 26px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--term-dim);
}
.hero__meta b{ color:#9fd9bd; font-weight:500 }
.stamp{
  position:absolute; top:clamp(40px,6vw,70px); right:clamp(20px,5vw,40px); z-index:6;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--accent);
  border:2px solid var(--accent); border-radius:4px; padding:6px 11px; transform:rotate(6deg);
  opacity:.85; text-align:center; line-height:1.35;
}
@media (max-width:940px){ .stamp{ display:none } }

/* CRT cutaway bezel */
.crt{
  position:relative; border-radius:14px; padding:14px;
  background:linear-gradient(180deg,#1b2228,#10171c);
  box-shadow:inset 0 0 0 1px #2a3a33, 0 30px 70px -30px rgba(0,0,0,.8), 0 2px 0 #060a0c;
}
.crt__screen{
  position:relative; border-radius:8px; overflow:hidden; background:var(--term-bg);
  box-shadow:inset 0 0 60px rgba(0,0,0,.6), inset 0 0 0 1px #20302a;
}
.crt__bar{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--term-dim);
  border-bottom:1px solid #1b2a23; position:relative; z-index:6;
}
.crt__bar .ttl{ color:var(--term-fg) }
.crt__bar .ph{ color:var(--accent); margin-left:auto }
.crt__bar .led{ width:7px; height:7px; border-radius:50%; background:var(--phos-bright);
  box-shadow:0 0 8px var(--phos-bright); animation:pulse 2.4s ease-in-out infinite }
@keyframes pulse{ 50%{opacity:.4} }
#cutaway{ display:block; width:100%; height:auto }
.crt__metrics{
  display:flex; gap:0; border-top:1px solid #1b2a23; position:relative; z-index:6;
  font-family:var(--mono);
}
.crt__metrics .m{ flex:1; padding:10px 12px; border-right:1px solid #16231d }
.crt__metrics .m:last-child{ border-right:none }
.crt__metrics .lab{ font-size:9.5px; letter-spacing:.18em; color:var(--term-dim) }
.crt__metrics .val{ font-size:16px; color:var(--term-fg); margin-top:2px }
.crt__metrics .val b{ color:var(--accent); font-weight:400 }
.crt__cap{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--term-dim);
  text-align:center; margin-top:14px }

/* legend chips */
.legend{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.1em; color:var(--term-dim); justify-content:center }
.legend i{ width:9px; height:9px; display:inline-block; margin-right:6px; transform:translateY(1px) }
.legend .g{ background:var(--phos-bright); border-radius:50%; box-shadow:0 0 6px var(--phos-bright) }
.legend .a{ background:var(--accent); box-shadow:0 0 6px var(--accent) }
.legend .r{ background:var(--terracotta); border-radius:50% }

/* ============================================================
   STATEMENT + metrics
   ============================================================ */
.statement .big{
  font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.7vw,46px);
  line-height:1.28; letter-spacing:-.012em; color:var(--ink); max-width:24ch; text-wrap:balance;
}
.statement .big .hl{ color:var(--accent-deep); font-style:italic }
.statement .big b{ font-weight:600 }
.statement .sig{ margin-top:26px; font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--ink-faint) }

.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:clamp(44px,6vw,72px) }
@media (max-width:820px){ .metrics{ grid-template-columns:repeat(2,1fr) } }
.metric{
  background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:20px 18px 16px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.metric .lab{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase }
.metric .val{ font-family:var(--sans); font-weight:800; font-size:34px; letter-spacing:-.02em; margin:6px 0 2px; color:var(--ink) }
.metric .val u{ font-size:15px; font-weight:600; color:var(--ink-soft); text-decoration:none; margin-left:3px }
.metric .desc{ font-family:var(--serif); font-size:14px; color:var(--ink-soft) }
.metric .hist{ display:flex; align-items:flex-end; gap:2px; height:30px; margin-top:14px }
.metric .hist span{ flex:1; background:var(--rule); border-radius:1px 1px 0 0; transition:height .6s var(--ease) }
.metric .hist span.you{ background:var(--accent) }

/* ============================================================
   CRAFT — board + code
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:40px } }
.split--rev{ direction:rtl } .split--rev > *{ direction:ltr }

/* phosphor board diagram */
.board{
  background:var(--term-bg); border-radius:10px; padding:26px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-lift); border:1px solid #20302a;
  background-image:
    linear-gradient(rgba(120,160,140,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,140,.05) 1px, transparent 1px);
  background-size:18px 18px;
}
.board__row{ display:flex; align-items:center; justify-content:center; gap:0; min-height:170px; position:relative; z-index:2 }
.chip{
  font-family:var(--mono); color:var(--term-fg); background:#101a16;
  border:1px solid #2f6a4d; border-radius:5px; padding:12px 14px; min-width:104px;
  box-shadow:0 0 0 1px #0c1410, inset 0 0 18px rgba(47,143,91,.08);
}
.chip .pn{ font-size:13px; color:#bdf3d6; font-weight:700; letter-spacing:.04em }
.chip .role{ font-size:9.5px; letter-spacing:.16em; color:var(--term-dim); margin:3px 0 8px }
.chip .reg{ font-size:11px; color:var(--accent) }
.chip--wide{ min-width:128px; position:relative }
.chip--wide::after{ content:"64"; position:absolute; right:7px; bottom:5px; font-size:10px; color:#1f5d40; letter-spacing:.1em }
.wire{ flex:1; height:54px; position:relative }
.wire svg{ width:100%; height:100% }
.pip{ fill:var(--accent); filter:drop-shadow(0 0 5px var(--accent)) }
.board__legend{ display:flex; gap:20px; justify-content:center; margin-top:16px; position:relative; z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--term-dim) }
.board__legend i{ display:inline-block; width:14px; height:0; margin-right:6px; transform:translateY(-3px) }
.board__legend .sig{ border-top:2px solid var(--phos-bright) }
.board__legend .bus{ border-top:2px dashed var(--accent) }

/* code pane */
.codepane{
  background:var(--term-bg); border-radius:10px; overflow:hidden; box-shadow:var(--shadow-lift);
  border:1px solid #20302a; font-family:var(--mono);
}
.codepane__bar{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid #1b2a23;
  font-size:11px; letter-spacing:.1em; color:var(--term-dim) }
.codepane__bar .dotr{ display:flex; gap:5px; margin-right:6px }
.codepane__bar .dotr i{ width:9px; height:9px; border-radius:50%; background:#243a31; display:inline-block }
.codepane pre{ margin:0; padding:18px 20px; font-size:13.5px; line-height:1.75; min-height:300px; white-space:pre; overflow-x:auto }
.codepane .cm{ color:#4f8067 }
.codepane .kw{ color:#7df2b0 }
.codepane .rg{ color:#e6c98a }
.codepane .nm{ color:#d8892b }
.codepane .lb{ color:#8fb6ff }
.codepane .cond{ color:#d8892b; font-weight:700 }
.codepane__run{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-top:1px solid #1b2a23 }
.run-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; cursor:pointer; font-weight:700;
  background:var(--phos); color:#06140d; border:none; border-radius:4px; padding:9px 18px;
  box-shadow:0 2px 0 #1f6e43; transition:transform .12s, box-shadow .12s, background .2s;
}
.run-btn:hover{ transform:translateY(-1px); box-shadow:0 3px 0 #1f6e43, 0 0 18px rgba(52,196,118,.4) }
.run-btn[disabled]{ opacity:.5; cursor:default }
.run-out{ font-size:12px; letter-spacing:.08em; color:var(--term-dim) }
.run-out.pass{ color:var(--phos-bright) }
.run-out .gate{ color:var(--accent) }
.caret{ background:var(--term-fg); color:var(--term-fg); animation:blink 1s steps(1) infinite }

/* ============================================================
   OPTIM / the day — kindness thesis
   ============================================================ */
.kindness{ text-align:center; max-width:900px; margin:0 auto }
.kindness .big{
  font-family:var(--serif); font-size:clamp(27px,4vw,50px); line-height:1.24; letter-spacing:-.015em;
  color:#eafff4; text-wrap:balance; font-weight:400;
}
.kindness .big .am{ color:var(--accent); font-style:italic }
.frontier{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(40px,6vw,64px) }
@media (max-width:760px){ .frontier{ grid-template-columns:repeat(2,1fr) } }
.fcard{ background:var(--term-bg-2); border:1px solid #1f2f27; border-radius:8px; padding:18px 16px; text-align:left }
.fcard .t{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent); text-transform:uppercase }
.fcard .d{ font-family:var(--serif); font-size:15px; color:#a7d8bf; margin-top:8px; line-height:1.5 }
.fcard .bars{ display:flex; align-items:flex-end; gap:3px; height:36px; margin-top:14px }
.fcard .bars span{ flex:1; background:#234034; border-radius:1px 1px 0 0 }
.fcard .bars span.you{ background:var(--accent); box-shadow:0 0 8px rgba(216,137,43,.5) }
.fcard .bars span.friend{ background:var(--phos) }

/* ============================================================
   ERAS — four-act timeline
   ============================================================ */
.timeline{ position:relative; margin-top:clamp(40px,6vw,68px); padding-left:clamp(20px,5vw,48px) }
.timeline::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--accent),var(--rule)); }
.act{ position:relative; padding:0 0 clamp(44px,5vw,64px) clamp(22px,4vw,44px) }
.act:last-child{ padding-bottom:0 }
.act::before{ content:""; position:absolute; left:-3px; top:6px; width:18px; height:18px; border-radius:50%;
  background:var(--paper); border:3px solid var(--accent); box-shadow:0 0 0 4px var(--paper) }
.act__yr{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--accent-deep); font-weight:600 }
.act__t{ font-family:var(--sans); font-weight:800; font-size:clamp(22px,2.8vw,32px); letter-spacing:-.02em; margin:6px 0 6px }
.act__t .era{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--ink-faint);
  border:1px solid var(--rule); border-radius:3px; padding:3px 8px; margin-right:12px; vertical-align:middle; text-transform:uppercase }
.act__d{ font-family:var(--serif); font-size:17.5px; line-height:1.6; color:var(--ink-soft); max-width:60ch }
.act__d b{ color:var(--ink); font-weight:600 }
.act__meta{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.08em; color:var(--ink-faint) }
.act__meta b{ color:var(--accent-deep); font-weight:600 }

/* ============================================================
   WORLD — Haldane
   ============================================================ */
.world{ position:relative; overflow:hidden }
.skyline{ position:relative; height:200px; margin-top:48px; display:flex; align-items:flex-end; gap:6px; justify-content:center; opacity:.9 }
.skyline .tw{ width:clamp(18px,3vw,34px); background:linear-gradient(180deg,var(--paper-3),var(--rule));
  border:1px solid var(--rule); border-bottom:none; border-radius:2px 2px 0 0; position:relative; box-shadow:var(--shadow) }
.skyline .tw::after{ content:""; position:absolute; inset:8px 5px auto 5px; height:60%;
  background-image:radial-gradient(var(--accent) 1px, transparent 1.4px); background-size:8px 12px; opacity:.5 }
.world-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,5vw,60px); align-items:start; margin-top:40px }
@media (max-width:860px){ .world-grid{ grid-template-columns:1fr } }
.factbox{ background:var(--card); border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
  padding:20px 22px; box-shadow:var(--shadow) }
.factbox h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:8px }
.factbox p{ margin:0; font-family:var(--serif); font-size:16px; line-height:1.6; color:var(--ink-soft) }
.factbox p + p{ margin-top:10px }

/* ============================================================
   DOT — the inherited desk (always night)
   ============================================================ */
.dot-sec{ background:#0f1318; color:#e7e2d6; position:relative; overflow:hidden }
.dot-sec .eyebrow{ color:var(--accent) }
.dot-sec .eyebrow::before{ background:var(--accent) }
.dot-grid{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(36px,6vw,80px); align-items:center }
@media (max-width:900px){ .dot-grid{ grid-template-columns:1fr; gap:48px } }
.dot-sec .h-1{ color:#f2eddf }
.dot-sec .prose{ color:#b3aea0 }
.dot-sec .prose strong{ color:#ece6d6 }
.dot-kv{ margin:26px 0 0; display:grid; gap:0 }
.dot-kv div{ display:grid; grid-template-columns:130px 1fr; gap:18px; padding:11px 0; border-top:1px solid #232a30 }
.dot-kv dt{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#7d8794 }
.dot-kv dd{ margin:0; font-family:var(--serif); font-size:16px; color:#cfc9ba }

/* the physical note */
.note-stack{ position:relative; display:flex; justify-content:center; padding:20px }
.note{
  background:linear-gradient(170deg,#f6ead0,#efdfbf); color:#2a2114;
  font-family:var(--hand); font-size:25px; line-height:1.5; font-weight:500;
  padding:34px 32px 28px; max-width:380px; border-radius:2px;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
  transform:rotate(-2.4deg); position:relative;
}
.note::before, .note::after{
  content:""; position:absolute; width:104px; height:30px; top:-15px;
  background:rgba(214,180,120,.42); border:1px solid rgba(160,130,80,.3);
  box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.note::before{ left:24px; transform:rotate(-7deg) }
.note::after{ right:24px; transform:rotate(6deg) }
.note .sig{ display:block; text-align:right; margin-top:14px; font-size:27px; color:#9a6a1d }
.note small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:#9a8a64; margin-top:18px; font-weight:400; transform:rotate(0) }

/* the 64 folder / mystery block */
.mystery{ margin-top:clamp(56px,7vw,96px); border-top:1px solid #232a30; padding-top:clamp(48px,6vw,72px); text-align:center }
.folder{ display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:14px;
  letter-spacing:.1em; color:var(--accent); border:1px dashed #3a4651; border-radius:6px; padding:14px 22px; margin-bottom:30px }
.folder .lock{ color:#7d8794 }
.mystery .q{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,3.2vw,38px);
  line-height:1.35; color:#e7e2d6; max-width:20ch; margin:0 auto; text-wrap:balance }
.mystery .q .am{ color:var(--accent) }
.mystery .foot{ margin-top:26px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:#6f7884 }

/* ============================================================
   CHARM grid
   ============================================================ */
.charm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(40px,6vw,64px) }
@media (max-width:860px){ .charm-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .charm-grid{ grid-template-columns:1fr } }
.charm{ background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:24px 22px;
  box-shadow:var(--shadow); transition:transform .2s var(--ease), box-shadow .2s }
.charm:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift) }
.charm .ic{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--accent-deep);
  border:1px solid var(--rule); border-radius:3px; padding:3px 8px; display:inline-block; margin-bottom:14px }
.charm h4{ font-family:var(--sans); font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:8px }
.charm p{ margin:0; font-family:var(--serif); font-size:15.5px; line-height:1.55; color:var(--ink-soft) }

/* ============================================================
   FINAL CTA + footer
   ============================================================ */
.final{ background:var(--term-bg); color:var(--term-fg); text-align:center; position:relative; overflow:hidden }
.final__boot{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; color:var(--term-dim); margin-bottom:34px }
.final__boot b{ color:var(--phos-bright); font-weight:400 }
.final .brand-xl{ font-size:clamp(54px,11vw,128px); margin-bottom:18px }
.final__tag{ font-family:var(--serif); font-size:clamp(19px,2.4vw,26px); color:#bfe9d2; margin:0 auto 34px; max-width:30ch; line-height:1.5 }
.final .btn--wish{ font-size:16px; padding:17px 30px }
.final__sub{ margin-top:22px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--term-dim) }

.foot{ background:var(--term-bg-2); color:var(--term-dim); border-top:1px solid #1b2a23;
  font-family:var(--mono); padding:40px clamp(20px,5vw,40px) }
.foot__in{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between }
.foot__brand{ font-size:18px; color:var(--term-fg); font-weight:700 }
.foot__links{ display:flex; gap:6px; flex-wrap:wrap }
.foot__links a{ font-size:11.5px; letter-spacing:.12em; color:var(--term-dim); padding:7px 12px; border:1px solid #23332b; border-radius:3px; text-transform:uppercase; transition:all .16s }
.foot__links a:hover{ color:var(--term-fg); border-color:var(--accent) }
.foot__fine{ max-width:var(--maxw); margin:26px auto 0; font-size:11px; letter-spacing:.08em; color:#3f574a; line-height:1.7 }
.foot__fine .tender{ color:#6f9a83; font-family:var(--serif); font-style:italic; letter-spacing:0; font-size:14px }

/* ---------------- Scroll reveal ---------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } }