/* ============================================================
   HOME V2 - "The Ledger Made Visible"
   Standalone stylesheet for the alternate homepage (/v2/).
   Derives from the jacket system (DESIGN.md) and pushes it:
   scroll-driven animations, anchor positioning, popovers,
   scroll-state queries, oklch/color-mix, subgrid, squircles.
   ============================================================ */

@font-face{
  font-family:'Literata';
  src:url('fonts/literata-var.woff2') format('woff2');
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Literata';
  src:url('fonts/literata-italic-var.woff2') format('woff2');
  font-weight:200 900;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

/* ---- Tokens ------------------------------------------------ */
:root{
  --bg:#081420;
  --bg2:#0d1c2b;
  --card:#122435;
  --line:#263c50;
  --fg:#edf1f2;
  --ink:#d3dce0;
  --muted:#94a7b4;
  --accent:#f7931a;
  --accent2:#ffb04d;
  --gold:#cdb37e;
  --band:#e11a1e;
  --band-deep:#a30b0e;

  --line-soft:color-mix(in oklab, var(--line) 55%, var(--bg));
  --gold-dim:color-mix(in oklab, var(--gold) 55%, var(--bg));
  --orange-glow:color-mix(in oklab, var(--accent) 30%, transparent);
  --card-glass:color-mix(in srgb, var(--card) 62%, transparent);

  --display:'Archivo',system-ui,sans-serif;
  --serif:'Literata',Georgia,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --wrap:1080px;
  --measure:640px;
  --nav-h:58px;

  --z-canvas:-1;
  --z-grain:1;
  --z-content:2;
  --z-nav:10;
  --z-popover:20;

  --ease-out:cubic-bezier(.16,1,.3,1);
}

@property --p{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
@property --numglow{ syntax:'<number>'; inherits:false; initial-value:0; }

/* ---- Reset / base ------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0;
  background:var(--bg);
  background-image:radial-gradient(120% 90% at 50% 0%, var(--bg2) 0%, var(--bg) 55%);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-underline-offset:3px; }
a:hover{ color:var(--accent2); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--accent); color:var(--bg); }

.skip{
  position:fixed; left:12px; top:-48px; z-index:var(--z-popover);
  background:var(--accent); color:var(--bg); font-family:var(--sans);
  padding:8px 14px; border-radius:6px; transition:top .2s;
}
.skip:focus{ top:12px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,40px); }
.measure{ max-width:var(--measure); }

/* ---- Fixed canvas + grain ---------------------------------- */
#gl{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:var(--z-canvas); pointer-events:none;
  opacity:.85;
}
.no-webgl #gl{ display:none; }
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{ position:relative; z-index:var(--z-content); }

/* ---- Nav ---------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  padding-top:env(safe-area-inset-top);
}
.nav-inner{
  display:flex; align-items:center; gap:clamp(10px,2vw,18px);
  height:var(--nav-h);
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(12px,3vw,40px);
  font-family:var(--sans);
}
.nav::before{
  content:''; position:absolute; inset:0;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid color-mix(in srgb, var(--line) 40%, transparent);
}
.nav>*{ position:relative; }
.brand{
  font-family:var(--display); font-weight:800; font-stretch:115%;
  text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(10px,2.9vw,13px); color:var(--fg); text-decoration:none; line-height:1.15;
  white-space:nowrap;
}
.brand:hover{ color:var(--fg); }
.brand .bw-accent{ color:var(--accent); }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:clamp(10px,2.5vw,22px); }
.nav-links a{ color:var(--ink); text-decoration:none; font-size:14px; }
.nav-links a:hover{ color:var(--fg); }
.nav-cta{
  font-family:var(--display); font-weight:800; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.03em; font-size:clamp(10.5px,3vw,12.5px);
  background:var(--accent); color:var(--bg) !important;
  padding:8px clamp(9px,2.6vw,14px); border-radius:8px; text-decoration:none;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--accent2); }
@media (max-width:739px){
  .nav-mid{ display:none; }
}

/* Reading progress: 13 confirmation segments under the nav bar */
.conf{
  position:absolute; left:0; right:0; bottom:-3px; height:3px;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/13 - 3px),transparent 0 calc(100%/13));
  mask:repeating-linear-gradient(90deg,#000 0 calc(100%/13 - 3px),transparent 0 calc(100%/13));
}
@supports (animation-timeline: scroll()){
  .conf{
    animation:confFill linear both;
    animation-timeline:scroll(root);
  }
}
@keyframes confFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---- Buttons ------------------------------------------------ */
.btn{
  display:inline-block;
  font-family:var(--display); font-weight:800; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:14px; line-height:1;
  padding:15px 22px; border-radius:10px;
  corner-shape:squircle;
  background:var(--accent); color:var(--bg); text-decoration:none;
  border:1px solid transparent;
  transition:background .18s var(--ease-out), transform .18s var(--ease-out);
}
.btn:hover{ background:var(--accent2); color:var(--bg); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-ghost{
  background:transparent; color:var(--fg);
  border-color:var(--line);
}
.btn-ghost:hover{ background:var(--card); color:var(--fg); border-color:var(--muted); }
.btn-invert{ background:#fff; color:var(--band-deep); }
.btn-invert:hover{ background:#ffe9e9; color:var(--band-deep); }
.btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); color:#fff; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---- Hero ---------------------------------------------------- */
.hero{
  min-height:100svh;
  display:grid; align-content:center;
  padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + 20px);
  padding-bottom:96px;
  position:relative;
}
/* Keep type legible over the particle field */
.hero .wrap, .act .wrap{
  text-shadow:0 1px 10px rgba(8,20,32,.9), 0 0 28px rgba(8,20,32,.75);
}
.v2-band .wrap{ text-shadow:none; }

/* The cover in the header: centered in the mobile fold, right column on desktop.
   The particle coin mark tracks this element and halos it. */
/* .hero is a grid: auto margins on the item disable stretch, so force full
   width or the wrap shrink-wraps and the hero's left rail drifts */
.hero .wrap{ position:relative; width:100%; }
.hero-cover-wrap{ margin:30px auto 6px; }
.hero-cover-wrap .book3d{
  width:clamp(150px,40vw,220px);
  transform:rotateY(-16deg) rotateX(3deg);
}
@media (min-width:960px){
  .hero-cover-wrap{
    position:absolute; right:clamp(18px,4vw,40px); top:50%;
    translate:0 -50%; margin:0;
  }
  /* Headline column clears the cover (220px box + projected spine + gap);
     the data strip runs full width beneath it */
  .hero-meta, .hero h1, .hero .sub, .hero .cta-row, .hero .cta-note{
    max-width:calc(100% - 340px);
  }
  .hero h1{ font-size:clamp(2.55rem,6.4vw,5.9rem); }
}
.hero-meta{
  font-family:var(--sans); font-size:14px; color:var(--muted); margin:0 0 22px;
}
.hero h1{
  font-family:var(--display);
  font-weight:850; font-stretch:118%;
  text-transform:uppercase;
  font-size:clamp(2.55rem, 9.2vw, 5.9rem);
  line-height:.98;
  letter-spacing:-0.015em;
  margin:0 0 26px;
  color:var(--fg);
  text-wrap:balance;
  text-box-trim:trim-start;
  text-box-edge:cap;
}
.hero h1 .hl{ display:block; }
.hero .sub{
  font-size:clamp(17px,2.2vw,20px); line-height:1.7;
  max-width:56ch; color:var(--ink); margin:0 0 30px;
  text-wrap:pretty;
}
.hero-by{ font-family:var(--sans); font-size:14px; color:var(--muted); margin:26px 0 0; max-width:52ch; }
.cta-note{ font-family:var(--sans); font-size:14px; color:var(--muted); margin:14px 0 0; }

/* One-time condensation of the headline, mirrors the particle intro */
@media (prefers-reduced-motion: no-preference){
  .hero h1 .hl{
    animation:condense 1.15s var(--ease-out) both;
  }
  .hero h1 .hl-2{ animation-delay:.12s; }
  .hero h1 .hl-3{ animation-delay:.24s; }
  @keyframes condense{
    from{ font-stretch:62%; font-weight:200; opacity:.25; letter-spacing:.06em; }
    to{ font-stretch:118%; font-weight:850; opacity:1; letter-spacing:-0.015em; }
  }
}

/* Live data strip */
.live{
  display:flex; flex-wrap:wrap; gap:10px 34px;
  margin:34px 0 0; padding:16px 0 0;
  border-top:1px solid var(--line-soft);
  font-family:var(--sans);
}
.live-item{ min-width:150px; }
.live-k{
  font-size:12px; color:var(--muted); margin:0 0 3px;
  display:flex; align-items:center; gap:7px;
}
.live-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold); flex:none;
}
.live[data-live="1"] .live-dot{ background:var(--accent); }
@media (prefers-reduced-motion: no-preference){
  .live[data-live="1"] .live-dot{ animation:pulse 2.2s ease-in-out infinite; }
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 var(--orange-glow);} 50%{ box-shadow:0 0 0 6px transparent;} }
.live-v{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:clamp(19px,2.4vw,24px); color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.live-v small{ font-family:var(--sans); font-weight:400; font-size:13px; color:var(--muted); margin-left:4px; }

.hero-rating{ display:flex; align-items:center; gap:10px; margin:22px 0 0; font-family:var(--sans); font-size:14px; color:var(--muted); }
.rating-stars{
  --pct:90%;
  display:inline-block; font-size:15px; line-height:1; letter-spacing:2px;
  background:linear-gradient(90deg, var(--accent) var(--pct), var(--line) var(--pct));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rating-stars::before{ content:'★★★★★'; }
.hero-rating strong{ color:var(--fg); }

/* Scroll cue: a gold node descending a hairline */
.cue{
  position:absolute; bottom:18px; left:50%; translate:-50% 0;
  width:1px; height:56px; background:var(--line);
  overflow:hidden;
}
.cue::after{
  content:''; position:absolute; left:-2.5px; top:-8px;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
@media (prefers-reduced-motion: no-preference){
  .cue::after{ animation:cueDrop 2.4s cubic-bezier(.5,0,.5,1) infinite; }
}
@keyframes cueDrop{ from{ top:-8px; opacity:0;} 18%{opacity:1;} 85%{opacity:1;} to{ top:60px; opacity:0;} }

/* ---- Section scaffolding ------------------------------------ */
.act{ padding:clamp(78px,13vh,150px) 0; position:relative; }
.act-head{
  font-family:var(--display); font-weight:820; font-stretch:117%;
  text-transform:uppercase; letter-spacing:-0.005em;
  font-size:clamp(1.9rem,5.4vw,3.4rem); line-height:1.02;
  color:var(--fg); margin:0 0 14px;
  text-wrap:balance;
}
.act-head .gold{ color:var(--gold); }
.act-head .orange{ color:var(--accent); }
.act-rule{
  height:1px; background:var(--line-soft); position:relative;
  margin:0 0 30px; max-width:var(--measure);
  transform-origin:0 50%;
}
.act-rule::after{
  content:''; position:absolute; right:-2px; top:-3px;
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .act-rule{
      animation:ruleDraw 1s var(--ease-out) both;
      animation-timeline:view();
      animation-range:entry 10% entry 60%;
    }
    @keyframes ruleDraw{ from{ transform:scaleX(.15); } to{ transform:scaleX(1); } }
  }
}
.lead{
  font-size:clamp(17.5px,2.1vw,20px); line-height:1.7; color:var(--ink);
  max-width:60ch; margin:0 0 22px; text-wrap:pretty;
}
.act .foot-link{ font-family:var(--sans); font-size:15px; }

/* Gentle settle of section heads as they enter (content visible by default) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .act-head{
      animation:headSettle .9s var(--ease-out) both;
      animation-timeline:view();
      animation-range:entry 5% entry 45%;
    }
    @keyframes headSettle{
      from{ transform:translateY(22px); }
      to{ transform:translateY(0); }
    }
  }
}

/* ---- Act I: excerpt ----------------------------------------- */
.excerpt{ max-width:var(--measure); }
.excerpt-kicker{
  font-family:var(--serif); font-style:italic; color:var(--gold);
  font-size:16px; margin:0 0 16px;
}
.excerpt p{ margin:0 0 1.2em; font-size:clamp(17.5px,2.1vw,19.5px); text-wrap:pretty; }
.excerpt em{ color:var(--fg); }
.excerpt .drop::first-letter{
  font-size:3.1em; float:left; line-height:.82;
  padding:4px 10px 0 0; color:var(--gold); font-weight:600;
}

/* ---- Act II: mechanisms + demos ------------------------------ */
.beats{
  display:grid; gap:clamp(22px,4vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:44px 0 0;
  counter-reset:beat;
}
.beat h3{
  font-family:var(--serif); font-weight:700; font-size:20px;
  color:var(--fg); margin:0 0 10px; line-height:1.3;
}
.beat h3::before{
  counter-increment:beat; content:counter(beat);
  font-family:var(--display); font-weight:700; font-stretch:110%;
  color:var(--gold); font-size:15px;
  display:inline-block; margin-right:10px; transform:translateY(-2px);
}
.beat p{ margin:0; font-size:16.5px; color:var(--ink); text-wrap:pretty; }

/* :has() sibling dimming on the beats grid */
@media (hover:hover){
  .beats:has(.beat:hover) .beat:not(:hover){ opacity:.5; transition:opacity .25s; }
  .beat{ transition:opacity .25s; }
}

/* Glossary term triggers */
.term{
  font:inherit; color:inherit; background:none; border:none; padding:0;
  border-bottom:1.5px dotted var(--accent);
  cursor:help; anchor-name:var(--anchor);
}
.term:hover{ color:var(--fg); border-bottom-color:var(--accent2); }

[popover].gloss{
  position:fixed;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  corner-shape:squircle;
  padding:16px 18px; max-width:min(340px, calc(100vw - 32px));
  font-family:var(--sans); font-size:14.5px; line-height:1.6;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.6);
  margin:auto;
}
[popover].gloss::backdrop{ background:color-mix(in srgb, var(--bg) 45%, transparent); }
[popover].gloss h4{
  margin:0 0 6px; font-family:var(--serif); font-size:16px; color:var(--gold); font-weight:600;
}
[popover].gloss p{ margin:0; }
@supports (position-area: top){
  [popover].gloss{
    position-anchor:var(--anchor);
    position-area:top;
    position-try-fallbacks:flip-block;
    margin:10px 0;
    inset:auto;
  }
  [popover].gloss::backdrop{ background:transparent; }
}
@media (prefers-reduced-motion: no-preference){
  [popover].gloss{
    opacity:0; transform:translateY(6px) scale(.98);
    transition:opacity .22s var(--ease-out), transform .22s var(--ease-out),
      overlay .22s allow-discrete, display .22s allow-discrete;
  }
  [popover].gloss:popover-open{
    opacity:1; transform:none;
  }
  @starting-style{
    [popover].gloss:popover-open{ opacity:0; transform:translateY(6px) scale(.98); }
  }
}

/* Lab panels (hash + miner) */
.labs{
  display:grid; gap:26px; margin:54px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
}
.lab{
  border:1px solid var(--line); border-radius:16px;
  corner-shape:squircle;
  background:color-mix(in srgb, var(--bg2) 82%, transparent);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  padding:clamp(20px,3.4vw,30px);
  container-type:inline-size;
}
.lab h3{
  font-family:var(--display); font-weight:800; font-stretch:114%;
  text-transform:uppercase; font-size:16px; letter-spacing:.02em;
  color:var(--fg); margin:0 0 6px;
}
.lab .lab-sub{ font-family:var(--sans); font-size:14px; color:var(--muted); margin:0 0 18px; }
.lab-caption{ font-family:var(--sans); font-size:14px; color:var(--muted); margin:16px 0 0; line-height:1.6; text-wrap:pretty; }
.lab-caption strong{ color:var(--gold); font-weight:600; }

.hash-input{
  width:100%; font-family:var(--sans); font-size:16px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:10px;
  padding:13px 14px;
}
.hash-input:focus{ border-color:var(--accent); outline:none; }
.hex{
  display:grid; grid-template-columns:repeat(16,1fr);
  gap:3px; margin:16px 0 0;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:clamp(11px,2.6cqw,14px); line-height:1;
}
.hex span{
  text-align:center; padding:5px 0; border-radius:4px;
  background:var(--card); color:var(--gold);
  transition:background .5s, color .5s;
}
.hex span.flip{ background:var(--accent); color:var(--bg); transition:none; }
.hash-meta{
  display:flex; justify-content:space-between; gap:10px;
  font-family:var(--sans); font-size:13px; color:var(--muted); margin:12px 0 0;
  font-variant-numeric:tabular-nums;
}
.hash-meta strong{ color:var(--accent); font-weight:600; }

/* Miner */
.mine-controls{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.chip{
  font-family:var(--sans); font-size:13.5px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; cursor:pointer;
}
.chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600; }
.mine-btn{
  font-family:var(--display); font-weight:800; font-stretch:112%;
  text-transform:uppercase; letter-spacing:.03em; font-size:14px;
  background:var(--accent); color:var(--bg);
  border:none; border-radius:10px; corner-shape:squircle;
  padding:14px 20px; cursor:pointer; width:100%;
}
.mine-btn:hover{ background:var(--accent2); }
.mine-btn[data-running="1"]{ background:var(--card); color:var(--fg); border:1px solid var(--line); }
.mine-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 0;
  font-family:var(--sans);
}
.mine-stat .k{ font-size:12px; color:var(--muted); margin:0 0 2px; }
.mine-stat .v{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:clamp(15px,3.6cqw,20px); color:var(--fg); font-variant-numeric:tabular-nums;
}
.mine-hash{
  margin:16px 0 0; padding:12px; border-radius:8px;
  background:var(--bg); border:1px solid var(--line-soft);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:clamp(10.5px,2.4cqw,12.5px);
  word-break:break-all; line-height:1.55; color:var(--muted);
  min-height:3.2em;
}
.mine-hash .z{ color:var(--accent); font-weight:700; }
.lab.found{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 44px -8px color-mix(in srgb, var(--gold) 35%, transparent); }
.mine-verdict{ font-family:var(--sans); font-size:14px; margin:14px 0 0; color:var(--gold); min-height:1.5em; }

/* ---- Act III: scarcity --------------------------------------- */
.chart-wrap{ margin:46px 0 0; }
.supply-svg{ width:100%; height:auto; display:block; }
.supply-svg .axis{ stroke:var(--line); stroke-width:1; }
.supply-svg .grid{ stroke:var(--line-soft); stroke-width:.5; }
.supply-svg text{ font-family:var(--sans); font-size:9.5px; fill:var(--muted); }
.supply-svg .cap-line{ stroke:var(--gold); stroke-width:1; stroke-dasharray:5 4; }
.supply-svg .cap-label{ fill:var(--gold); font-size:10px; }
.supply-svg .curve{
  stroke:var(--accent); stroke-width:2.25; fill:none;
  stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--orange-glow));
}
.supply-svg .curve-fill{ fill:url(#supplyFade); opacity:.5; }
.supply-svg .halving{ stroke:var(--gold-dim); stroke-width:1; stroke-dasharray:2 3; }
.supply-svg .now-dot{ fill:var(--fg); stroke:var(--accent); stroke-width:2.5; }
.supply-svg .now-label{ fill:var(--fg); font-weight:600; font-size:10px; }
/* Stroke-draw is an enhancement only: the filled area, axes, labels and the
   now-marker are always visible, so the chart is never blank without it.
   Range ends at entry 45% so the stroke is complete before the chart is
   fully in view; reduced-motion paints the full stroke immediately. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .supply-svg .curve{
      stroke-dasharray:450; stroke-dashoffset:450;
      animation:drawCurve 1s var(--ease-out) both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
    @keyframes drawCurve{ to{ stroke-dashoffset:0; } }
  }
}

.scarcity-grid{
  display:grid; gap:12px; margin:40px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.sc-tile{
  border-top:1px solid var(--line-soft);
  padding:16px 4px 4px;
  font-family:var(--sans);
  container-type:inline-size;
}
.sc-tile .k{ font-size:13px; color:var(--muted); margin:0 0 6px; }
.sc-tile .v{
  font-family:var(--display); font-weight:750; font-stretch:110%;
  font-size:clamp(21px,7cqw,28px); color:var(--fg);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.sc-tile .v small{ font-family:var(--sans); font-size:13px; font-weight:400; color:var(--muted); }
.sc-tile .note{ font-size:12.5px; color:var(--muted); margin:6px 0 0; line-height:1.5; }
.sc-tile .gold-v{ color:var(--gold); }

/* Halving ring */
.ring-tile{ display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; }
.ring{
  --p:0%;
  width:64px; height:64px; border-radius:50%;
  background:
    radial-gradient(closest-side, var(--bg) 74%, transparent 75% 100%),
    conic-gradient(var(--gold) var(--p), var(--card) 0);
  display:grid; place-items:center;
  transition:--p 1.6s var(--ease-out);
  font-family:var(--display); font-weight:700; font-size:13px; color:var(--gold);
}

/* ---- Act IV: timeline ---------------------------------------- */
.tl-outer{ margin:46px 0 0; }
.tl{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:min(340px, 78vw);
  gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:4px clamp(18px,4vw,40px) 26px;
  margin:0; list-style:none;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.tl li{
  scroll-snap-align:center;
  border:1px solid var(--line); border-radius:14px;
  corner-shape:squircle;
  background:color-mix(in srgb, var(--bg2) 78%, transparent);
  padding:22px;
  display:grid; align-content:start; gap:8px;
  transition:border-color .3s, transform .3s;
}
.tl .tl-date{
  font-family:var(--display); font-weight:750; font-stretch:112%;
  color:var(--gold); font-size:15px; letter-spacing:.02em;
}
.tl h3{ font-family:var(--serif); font-weight:700; font-size:18.5px; line-height:1.3; color:var(--fg); margin:0; }
.tl p{ font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--muted); margin:0; text-wrap:pretty; }

/* Style the snapped card via scroll-state (Chrome 133+) */
@supports (container-type: scroll-state){
  .tl li{ container-type:scroll-state; }
  /* fallback no-op: scroll-state used on children below */
}
@media (hover:hover){
  .tl li:hover{ border-color:var(--gold-dim); transform:translateY(-3px); }
}

/* CSS-only carousel controls where supported (Chrome 135+) */
.tl::scroll-button(inline-start),
.tl::scroll-button(inline-end){
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  width:40px; height:40px; border-radius:50%;
  font-size:16px; cursor:pointer;
}
.tl::scroll-button(inline-start){ content:'←' / 'Earlier events'; }
.tl::scroll-button(inline-end){ content:'→' / 'Later events'; }
.tl::scroll-button(*):disabled{ opacity:.3; }
.tl::scroll-button(*):hover{ border-color:var(--accent); }
.tl{ scroll-marker-group:after; }
.tl::scroll-marker-group{
  display:grid; grid-auto-flow:column; justify-content:center; gap:7px;
  height:24px; margin-top:2px;
}
.tl li::scroll-marker{
  content:'' / '';
  width:7px; height:7px; border-radius:50%;
  background:var(--line);
}
.tl li::scroll-marker:target-current{ background:var(--gold); }

/* ---- Chapters (subgrid rows) ---------------------------------- */
.toc{
  display:grid;
  grid-template-columns:[num] max-content [title] 1fr [min] max-content;
  margin:40px 0 0;
  border-top:1px solid var(--line-soft);
}
.toc a{
  grid-column:1 / -1;
  display:grid; grid-template-columns:subgrid;
  gap:0 18px; align-items:baseline;
  padding:15px 4px;
  border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:var(--ink);
  transition:opacity .22s, background .22s;
}
.toc .num{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  color:var(--gold); font-size:14px; min-width:2ch; text-align:right;
  font-variant-numeric:tabular-nums;
}
.toc .t{
  font-family:var(--serif); font-weight:600; font-size:clamp(16.5px,2vw,19px);
  color:var(--fg); line-height:1.35;
}
.toc .blurb{
  grid-column:title; font-family:var(--sans); font-size:14px; color:var(--muted);
  line-height:1.55; margin-top:2px; text-wrap:pretty;
}
.toc .min{
  font-family:var(--sans); font-size:12.5px; color:var(--muted); white-space:nowrap;
}
.toc a:hover .t{ color:var(--accent); }
.toc:has(a:hover) a:not(:hover){ opacity:.55; }
@media (max-width:560px){
  .toc{ grid-template-columns:[num] max-content [title] 1fr; }
  .toc .min{ display:none; }
}

/* ---- Readers --------------------------------------------------- */
.quotes{ display:grid; gap:clamp(26px,4vw,40px); margin:40px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.quote{ margin:0; position:relative; padding-left:26px; }
.quote::before{
  content:'\201C'; position:absolute; left:0; top:-4px;
  font-family:var(--serif); font-size:40px; line-height:1; color:var(--gold);
}
.quote blockquote{
  margin:0 0 12px; font-size:16.5px; line-height:1.65; color:var(--ink);
  font-style:italic; hanging-punctuation:first; text-wrap:pretty;
}
.quote figcaption{ font-family:var(--sans); font-size:13.5px; color:var(--muted); }
.quote .stars{ color:var(--accent); font-size:13px; letter-spacing:2px; margin-bottom:8px; }
.quote .stars .off{ color:var(--line); }
.quotes-foot{ font-family:var(--sans); font-size:14px; color:var(--muted); margin:30px 0 0; }

/* ---- Jacket band (red, conversion) ----------------------------- */
.v2-band{
  background:linear-gradient(180deg, var(--band) 0%, var(--band-deep) 130%);
  padding:clamp(60px,9vw,100px) 0;
  position:relative; z-index:var(--z-content);
}
.band-grid{
  display:grid; gap:clamp(30px,6vw,70px);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:760px){
  .band-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); }
}
.v2-band h2{
  font-family:var(--display); font-weight:830; font-stretch:117%;
  text-transform:uppercase; color:#fff;
  font-size:clamp(2rem,5vw,3.2rem); line-height:1; margin:0 0 14px;
  letter-spacing:-.005em;
}
.v2-band .band-price{
  font-family:var(--display); font-weight:750; font-stretch:110%;
  font-size:22px; color:#fff; margin:0 0 10px;
}
.v2-band .band-price span{ font-family:var(--sans); font-weight:400; font-size:15px; color:rgba(255,255,255,.85); }
.v2-band p{ color:#fff; font-size:16.5px; max-width:52ch; text-wrap:pretty; }
.v2-band .band-note{ font-family:var(--sans); font-size:14px; margin:16px 0 0; }
.v2-band .band-note a{ color:#fff; }

/* CSS 3D book */
.book3d-stage{ perspective:1100px; display:grid; justify-content:center; }
.book3d{
  position:relative; width:min(230px,56vw); aspect-ratio:938/1500;
  transform-style:preserve-3d;
  transform:rotateY(-22deg) rotateX(4deg);
  transition:transform .35s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference){
  .book3d{ animation:bookFloat 7s ease-in-out infinite; }
  @keyframes bookFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
}
.book3d img{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:3px 8px 8px 3px;
  box-shadow:28px 40px 60px -18px rgba(0,0,0,.55);
  backface-visibility:hidden;
}
.book3d .spine{
  position:absolute; top:0; bottom:0; left:0; width:34px;
  background:linear-gradient(90deg,#050d16 0%, #0d1c2b 60%, #16283a 100%);
  transform:rotateY(-90deg) translateZ(17px) translateX(-17px);
  border-radius:3px 0 0 3px;
}
.book3d .pages{
  position:absolute; top:1.5%; bottom:1.5%; right:-13px; width:26px;
  background:repeating-linear-gradient(90deg,#e9e2d0 0 2px,#cfc8b6 2px 3px);
  transform:rotateY(90deg) translateZ(calc(min(230px,56vw) - 13px)) translateX(13px);
  border-radius:0 2px 2px 0;
}

/* ---- Author ----------------------------------------------------- */
.author-grid{
  display:grid; gap:clamp(24px,5vw,54px); align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:700px){
  .author-grid{ grid-template-columns:190px minmax(0,1fr); }
}
.author-photo{ border-radius:14px; corner-shape:squircle; width:min(190px,52vw); }

/* ---- Contact form -------------------------------------------------- */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cform{ max-width:640px; display:grid; gap:16px; font-family:var(--sans); }
.cform-row{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.cfield{ display:grid; gap:6px; }
.cfield span{ font-size:13.5px; color:var(--muted); }
.cfield input,.cfield textarea{
  width:100%; font-family:var(--sans); font-size:16px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:10px;
  padding:12px 14px;
}
.cfield textarea{ min-height:130px; resize:vertical; field-sizing:content; }
.cfield input:focus,.cfield textarea:focus{ border-color:var(--accent); outline:none; }
.cform button.btn{ border:0; cursor:pointer; justify-self:start; }
.notice{
  max-width:640px; font-family:var(--sans); font-size:14.5px; line-height:1.6;
  border:1px solid var(--line); border-radius:10px; corner-shape:squircle;
  padding:12px 16px; margin:0 0 18px;
}
.notice-ok{ border-color:color-mix(in srgb, var(--gold) 55%, transparent); color:var(--gold); }
.notice-err{ border-color:color-mix(in srgb, var(--band) 55%, transparent); color:#ffa3a3; }

/* ---- Footer ------------------------------------------------------ */
.foot{
  position:relative; z-index:var(--z-content);
  border-top:1px solid var(--line-soft);
  padding:44px 0 60px;
  font-family:var(--sans); font-size:14px; color:var(--muted);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
}
.foot-nav{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:0 0 20px; padding:0; list-style:none; }
.foot-nav a{ color:var(--ink); text-decoration:none; }
.foot-nav a:hover{ color:var(--accent); }
.foot-note{ margin:0 0 8px; max-width:70ch; }
.foot-preview{
  display:inline-block; margin-top:14px;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  font-size:12.5px; color:var(--muted);
}

/* ---- Motion toggle ----------------------------------------------- */
.motion-toggle{
  position:fixed; right:14px; bottom:14px; z-index:var(--z-nav);
  width:40px; height:40px; border-radius:50%;
  background:color-mix(in srgb, var(--card) 80%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); color:var(--ink);
  font-size:13px; cursor:pointer; display:grid; place-items:center;
}
.motion-toggle:hover{ border-color:var(--muted); color:var(--fg); }
/* The toggle stays visible without WebGL: it also pauses the CSS animations.
   Only the no-JS path hides it (noscript style in the document head). */
/* The toggle pauses every perpetual animation, not only the WebGL clock.
   Scroll-driven animations stay live: they only move when the user scrolls. */
.motion-paused .book3d,
.motion-paused .cue::after,
.motion-paused .live-dot{ animation-play-state:paused; }

/* ---- No-JS / fallbacks -------------------------------------------- */
.nojs-note{ font-family:var(--sans); font-size:13.5px; color:var(--gold); margin:10px 0 0; }
noscript .nojs-note{ display:block; }

/* Static hero mark shown when WebGL is unavailable */
.hero-mark-fallback{ display:none; }
.no-webgl .hero-mark-fallback{
  display:block; position:absolute; z-index:-1;
  right:clamp(-60px,2vw,80px); top:50%; translate:0 -50%;
  width:min(52vw,520px); opacity:.14;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .conf{ animation:none; transform:scaleX(1); opacity:.35; }
  .ring{ transition:none; }
}

/* Language toggle (homepage only: /, /de/, /es/, /ja/). Stays visible on
   mobile, where .nav-mid links are hidden; the brand yields space instead. */
.lang-switch{
  display:flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap; flex:0 0 auto;
}
.lang-switch a{ font-size:11px; color:var(--ink); opacity:.75; text-decoration:none; }
.lang-switch a:hover{ opacity:1; color:var(--fg); }
.lang-switch .lang-on{ color:var(--accent); font-weight:700; }
@media (max-width:739px){
  .nav-inner{ min-width:0; }
  /* Let the brand truncate rather than push the row wider than the viewport */
  .brand{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .lang-switch{ gap:5px; font-size:10px; }
  .lang-switch a{ font-size:10px; }
}