:root{
  /* Forging heats, in order of temperature. */
  --heat-dull:   #6B2412;   /* ~600°C  dull red   */
  --heat-cherry: #A83A16;   /* ~800°C  cherry     */
  --heat-orange: #E86B22;   /* ~950°C  orange     */
  --heat-yellow: #F2A93B;   /* ~1100°C yellow     */
  --heat-weld:   #F7E4C0;   /* ~1300°C welding    */

  --maxw: 1120px;
  --gut: clamp(20px, 5vw, 48px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.landing{
  background:var(--forge-black);color:var(--parchment);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:block;padding:0;align-items:initial;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}

/* ── heat spine ──────────────────────────────────────────────────
   The signature. A 3px column pinned to the left edge whose fill climbs the
   forging-heat scale with scroll depth: the page literally gets hotter as you
   read it. The reading is labelled in mono, like a pyrometer. */
.spine{position:fixed;left:0;top:0;bottom:0;width:3px;z-index:60;
  background:var(--forge-line);pointer-events:none;}
.spine-fill{position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(to bottom,
    var(--heat-dull) 0%, var(--heat-cherry) 32%,
    var(--heat-orange) 62%, var(--heat-yellow) 84%, var(--heat-weld) 100%);
  transition:height .12s linear;}
.spine-read{position:fixed;left:14px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.28em;color:var(--parchment-faint);z-index:60;
  pointer-events:none;transition:color .4s;}
@media(max-width:860px){.spine-read{display:none;}}

/* ── shared type ─────────────────────────────────────────────────
   Display is Archivo Expanded at 800 with tight tracking: wide industrial
   grotesque reads as mass, which is what metal is. Mono is not decoration —
   it's the smith's marginalia voice, carrying readings and annotations. */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);display:inline-flex;
  align-items:center;gap:11px;}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;}
.h-display{font-family:var(--font-display);font-weight:800;
  letter-spacing:-.035em;line-height:.94;}
.marginal{font-family:var(--font-mono);font-size:11px;line-height:1.7;
  color:var(--parchment-faint);letter-spacing:.02em;}

/* ── nav ─────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(20,18,16,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s;}
.nav.stuck{border-bottom-color:var(--forge-line);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:10px;}
.logo-name{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;}
.logo-name b{color:var(--copper-bright);font-weight:800;}
.nav-links{display:flex;align-items:center;gap:30px;}
/* :not(.cta) matters here. "nav-links a" is more specific than ".cta", so
   without it the menu's dim grey overrode the button's black text and left it
   pale on a copper fill — roughly 2:1, which is unreadable. */
.nav-links a:not(.cta){font-size:14px;color:var(--parchment-dim);transition:color .2s;}
.nav-links a:not(.cta):hover{color:var(--parchment);}
@media(max-width:760px){.nav-links a:not(.cta){display:none;}}

.cta{font-weight:600;font-size:14px;padding:10px 20px;border-radius:8px;
  background:var(--copper);color:var(--forge-black);border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:.18s;}
.cta:hover{background:var(--copper-bright);transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(232,107,58,.26);}
.cta-lg{padding:15px 30px;font-size:16px;}
.cta-quiet{background:transparent;color:var(--parchment);border:1px solid var(--forge-line);}
.cta-quiet:hover{background:transparent;border-color:var(--copper);
  color:var(--copper-bright);box-shadow:none;}

/* ── hero ────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(60px,10vw,110px) 0 clamp(56px,8vw,90px);overflow:hidden;}
.hero-glow{position:absolute;width:820px;height:820px;right:-300px;top:-320px;
  background:radial-gradient(circle,rgba(200,121,65,.15) 0%,rgba(232,107,58,.05) 36%,transparent 64%);
  pointer-events:none;}
.hero-in{position:relative;display:grid;
  /* The app needs its full 460px; the story takes whatever's left. */
  grid-template-columns:minmax(0,1fr) 460px;
  gap:clamp(32px,5vw,60px);align-items:center;}
@media(max-width:1080px){.hero-in{grid-template-columns:minmax(0,1fr) 400px;}}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(40px,7.4vw,78px);margin:24px 0 22px;}
.hero h1 .heat{color:var(--copper-bright);}
.lede{font-size:clamp(17px,2vw,19.5px);color:var(--parchment-dim);
  max-width:46ch;margin-bottom:30px;}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;align-items:center;}
.hero-foot{margin-top:26px;display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:12px;color:var(--parchment-faint);}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 10px var(--mint);}

/* the app, sitting in the hero — see forge.css for its own internals */
.hero-app{width:100%;max-width:460px;justify-self:end;}
@media(max-width:900px){.hero-app{justify-self:start;margin-top:8px;}}
.hero-app .flow{display:flex;align-items:center;width:100%;margin-bottom:16px;}

/* ── passes: a real sequence, so numbering carries meaning ───────── */
.passes{padding:clamp(56px,8vw,92px) 0;border-top:1px solid var(--forge-line);}
.sec-head{max-width:640px;margin-bottom:clamp(34px,5vw,54px);}
.sec-head h2{font-size:clamp(29px,4.6vw,46px);margin:18px 0 16px;}
.sec-head p{color:var(--parchment-dim);font-size:17.5px;}
.pass-list{display:flex;flex-direction:column;}
.pass{display:grid;grid-template-columns:auto minmax(0,1fr) 150px;
  gap:clamp(18px,4vw,40px);align-items:start;padding:30px 0;
  border-top:1px solid var(--forge-line);}
.pass:last-child{border-bottom:1px solid var(--forge-line);}
.pass-n{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--parchment-faint);padding-top:5px;}
.pass-body h3{font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2.6vw,25px);letter-spacing:-.02em;margin-bottom:9px;}
.pass-body p{color:var(--parchment-dim);font-size:16px;max-width:52ch;}
/* The heat reading, as a gauge rather than a label.
   A bare swatch names a temperature; a gauge places it. Reading down the three
   passes you watch the marker travel from dull red to welding heat — the page
   shows the metal getting hotter instead of just saying so.

   Built as a neutral track with the heat gradient painted ONLY across the
   reached portion. The obvious alternative — draw the whole gradient, then
   dim what hasn't been reached — looks right in the head and fails on screen:
   the scale brightens towards welding white, so a dimmed 1300°C still reads
   brighter than an undimmed 600°C and the gauge appears to run backwards.
   Measured before it shipped. */
.pass-heat{min-width:150px;padding-top:2px;}
.gauge{position:relative;height:22px;margin-bottom:9px;}
/* Darker and thinner than the fill on purpose: the first pass is dull red,
   which is genuinely a dark colour, so brightness alone can't carry "reached".
   Height does it instead — the filled part is visibly thicker whatever its
   temperature. */
.gauge-track{position:absolute;left:0;right:0;top:10px;height:2px;border-radius:2px;
  background:var(--forge-panel);}
/* --pct is the fraction of the scale reached. Scaling the background by its
   inverse makes the gradient span the FULL track even though this element is
   only a slice of it — so each step's colour lands where it belongs. */
.gauge-fill{position:absolute;left:0;top:8px;height:6px;border-radius:3px;
  width:calc(var(--pct) * 100%);
  background-image:linear-gradient(to right,
    var(--heat-dull), var(--heat-cherry), var(--heat-orange),
    var(--heat-yellow), var(--heat-weld));
  background-size:calc(100% / var(--pct)) 100%;
  background-repeat:no-repeat;}
/* the marker: a notch carrying the heat's own glow */
.gauge-mark{position:absolute;top:3px;width:3px;height:16px;border-radius:2px;
  transform:translateX(-50%);background:var(--parchment);
  box-shadow:0 0 9px 1px currentColor;}
.pass-heat .t{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--parchment-faint);white-space:nowrap;}
.pass-heat .t b{color:var(--parchment-dim);font-weight:500;}

@media(max-width:720px){
  .pass{grid-template-columns:auto minmax(0,1fr);}
  .pass-heat{grid-column:2;margin-top:16px;min-width:0;max-width:200px;}
}

/* ── why: prose with marginalia ──────────────────────────────────── */
.why{padding:clamp(56px,8vw,92px) 0;background:var(--forge-char);
  border-top:1px solid var(--forge-line);border-bottom:1px solid var(--forge-line);}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:start;}
@media(max-width:820px){.why-grid{grid-template-columns:1fr;}}
.claim{padding:22px 0;border-bottom:1px solid var(--forge-line);
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start;}
.claim:last-child{border-bottom:none;}
.claim h4{font-weight:600;font-size:17px;margin-bottom:5px;}
.claim p{color:var(--parchment-dim);font-size:15.5px;max-width:44ch;}
.claim .note{text-align:right;white-space:nowrap;}
@media(max-width:520px){
  .claim{grid-template-columns:1fr;}
  .claim .note{text-align:left;}
}

/* ── what we don't keep ──────────────────────────────────────────
   A ledger with every line empty. The right column is the argument, so it
   carries the weight: mono, wide-tracked, and the only place on the page
   where "none" is the loudest word. */
.nothing{padding:clamp(56px,8vw,92px) 0;border-top:1px solid var(--forge-line);}
.ledger-sheet{border-top:1px solid var(--forge-line);max-width:760px;}
.lrow{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:15px 2px;border-bottom:1px solid var(--forge-line);}
.lrow span:first-child{font-size:16px;color:var(--parchment-dim);}
.lrow .none{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--parchment-faint);white-space:nowrap;}
.lrow.total{border-bottom:none;padding-top:20px;}
.lrow.total span:first-child{font-family:var(--font-display);font-weight:700;
  font-size:19px;letter-spacing:-.02em;color:var(--parchment);}
.lrow.total .none{color:var(--copper-bright);font-size:13px;}

/* ── monero ──────────────────────────────────────────────────────── */
.xmr{padding:clamp(56px,8vw,92px) 0;background:var(--forge-char);
  border-top:1px solid var(--forge-line);border-bottom:1px solid var(--forge-line);}
.xmr-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,58px);align-items:center;}
@media(max-width:820px){.xmr-grid{grid-template-columns:1fr;}}
.xmr-facts{border-top:1px solid var(--forge-line);}
.fact{padding:15px 0;border-bottom:1px solid var(--forge-line);}
.fact .fk{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--parchment-faint);margin-bottom:5px;}
.fact .fv{font-size:16px;color:var(--parchment-dim);}
.fact .fv.accent{color:var(--copper-bright);font-weight:600;}

/* ── assets ──────────────────────────────────────────────────────── */
.assets{padding:clamp(56px,8vw,92px) 0;border-top:1px solid var(--forge-line);}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{display:flex;align-items:center;gap:10px;background:var(--forge-char);
  border:1px solid var(--forge-line);padding:11px 17px 11px 11px;border-radius:40px;
  font-weight:500;font-size:15px;transition:border-color .2s;}
.chip:hover{border-color:var(--copper);}
.chip .ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:13px;color:#fff;flex:none;
  overflow:hidden;background:var(--forge-panel);}
.chip .ic img{width:100%;height:100%;object-fit:contain;display:block;}
.chip .muted{color:var(--parchment-faint);}

/* ── closing ─────────────────────────────────────────────────────── */
.close{padding:clamp(76px,11vw,120px) 0;text-align:center;position:relative;
  overflow:hidden;background:var(--forge-char);border-top:1px solid var(--forge-line);}
.close .wrap{position:relative;}
.close h2{font-size:clamp(32px,6vw,60px);margin:20px auto 20px;max-width:15ch;}
.close p{color:var(--parchment-dim);font-size:18px;max-width:46ch;margin:0 auto 32px;}

/* ── footer ──────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--forge-line);padding:46px 0 34px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-brand p{color:var(--parchment-faint);font-size:14px;max-width:250px;
  margin-top:14px;line-height:1.6;}
.foot-col h5{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--parchment-faint);margin-bottom:14px;}
.foot-col a{display:block;color:var(--parchment-dim);font-size:14.5px;
  margin-bottom:10px;transition:color .2s;}
.foot-col a:hover{color:var(--copper-bright);}
.foot-btm{display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid var(--forge-line);
  font-family:var(--font-mono);font-size:12px;color:var(--parchment-faint);gap:16px;}
@media(max-width:640px){.foot-btm{flex-direction:column;text-align:center;}}

/* ── reveal ──────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .65s ease,transform .65s ease;}
.reveal.in{opacity:1;transform:none;}

:focus-visible{outline:2px solid var(--copper-bright);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .spine-fill{transition:none;}
  html{scroll-behavior:auto;}
  .cta:hover{transform:none;}
}