/* ══════════════════════════════════════════════════════════════════════
   Baby Boner Coin — "Nepo Baby"
   Dad's kit, inherited: black marble, gold engraving, and his glowing
   emerald candle used as a HERO OBJECT, not a data colour. See DESIGN.md.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:        #07090A;
  --ink-2:      #0F1312;
  --marble:     #F2EDE3;
  --marble-dim: #A8A296;
  --marble-mute:#847F76;
  --gold:       #C9A24A;
  --gold-lit:   #E8CE8E;
  --green:      #35D46F;
  --green-hot:  #6BFFA3;
  --green-deep: #12703A;
  --red:        #D4553F;
  --rule:       rgba(201,162,74,.20);
  --rule-soft:  rgba(201,162,74,.11);
  --rule-marble:rgba(242,237,227,.16);   /* cool hairline, keeps panels off pure black */
  --stone-lit:  #FFFDF8;
  --stone:      #F1ECE1;
  --stone-mid:  #D3CCBE;
  --stone-dark: #9C9689;

  --metal: linear-gradient(157deg,#F0DCA4 0%,#C9A24A 34%,#8C6B28 62%,#E8CE8E 100%);

  --display: "Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --mono:    "Fragment Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gutter: clamp(1.25rem,6vw,3rem);
  --space:  clamp(4.5rem,13vw,8rem);
  --measure: 54ch;
  --max: 68rem;

  --rail-h: 3.6rem;  /* measured sticky rail, so the hero is exactly one screen */
  --grow: 0;   /* 0..1 — how far dad's candle has come up */
}

*,*::before,*::after{ box-sizing:border-box; }

/* Author display rules below outrank the UA [hidden] rule; restate with force. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }

body{
  margin:0;
  background:var(--ink);
  color:var(--marble);
  font-family:var(--display);
  font-optical-sizing:auto;
  overflow-x:clip;
}

/* Marble grain — material, not gradient. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
/* No global texture here any more. A first pass tiled one crack
   pattern across the whole page as a position:fixed layer; that made
   it read as an independent screen-space filter sliding over the
   content rather than as part of any particular room, and the hero
   picked up the same faint texture it was never supposed to have.
   Each chapter below now carries its own unique crack pattern as a
   normal (scrolls-with-content) background instead — see each
   section's own rule further down. */

main,.rail,.colophon,.toast{ position:relative; z-index:2; }

img,video,iframe{ display:block; max-width:100%; }
::selection{ background:var(--green); color:#04140A; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

button{ font:inherit; color:inherit; }

.skip{ position:absolute; left:-9999px; font-family:var(--mono); font-size:.75rem; }
.skip:focus{
  left:var(--gutter); top:.75rem; z-index:99;
  background:var(--ink); color:var(--gold);
  padding:.6rem .9rem; border:1px solid var(--rule);
}
.is-inert{ opacity:.4; cursor:default; pointer-events:none; }

/* ── mono register ───────────────────────────────────────────────────── */

.eyebrow,.chip,.ca,.rail,.colophon__links,.disclaimer,.btn,.sound,.folio,
.toast,.tape,.quote__cell,.statement,.chart__bar,.chart__empty,.pumps,.cue,
.film__cap,.plate figcaption,.quote__note{
  font-family:var(--mono);
  font-weight:400;
}

/* Shared recipe for every big chapter-opening headline below the hero —
   same gold emboss as the wordmark, one definition instead of three. */
.chapter-title{
  margin:0;
  font-weight:700;
  font-variation-settings:"opsz" 88;
  letter-spacing:-.02em;
  text-shadow:0 1px 0 #8C6B28, 0 -1px 0 rgba(240,220,164,.4);
}

.eyebrow{
  position:relative; z-index:3;   /* stays legible when the candle towers past it */
  margin:0;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--marble-dim);
}
.folio{
  text-align:center;
  margin:0 0 clamp(2rem,6vw,3rem);
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
}

/* ── rail ────────────────────────────────────────────────────────────── */

.rail{
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem var(--gutter);
  border-bottom:1px solid var(--rule);
  background:rgba(7,9,10,.85);
  backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20;
}
.rail__mark{
  flex:none;
  font-size:.7rem; letter-spacing:.2em;
  color:var(--gold); text-decoration:none;
}
.rail__nav{ display:none; margin-left:auto; gap:1.4rem; }
.rail__nav a{
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--marble-dim); text-decoration:none; transition:color .25s;
}
.rail__nav a:hover{ color:var(--green); }
.rail .chip{ display:none; }
.rail .btn--sm{ margin-left:auto; }

/* ── buttons ─────────────────────────────────────────────────────────── */

.chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.4rem .7rem;
  background:transparent; border:1px solid var(--rule);
  color:var(--marble-dim);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:border-color .25s,color .25s;
}
.chip:hover{ border-color:var(--gold); color:var(--marble); }
.chip__label{ color:var(--gold); }
.chip__val{ font-variant-numeric:tabular-nums; text-transform:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:2.9rem; padding:0 1.6rem;
  border:1px solid var(--gold);
  color:var(--marble); background:transparent; text-decoration:none;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer; transition:background .3s,filter .3s;
}
.btn:hover{ background:rgba(201,162,74,.1); }
.btn--gold{ border:none; background:var(--metal); color:#120C02; }
.btn--gold:hover{ background:var(--metal); filter:brightness(1.12); }
.btn--sm{ min-height:2.1rem; padding:0 .95rem; font-size:.6rem; letter-spacing:.16em; }
.btn--lg{ min-height:3.4rem; padding:0 2.4rem; font-size:.74rem; }

.ca{
  display:inline-flex; align-items:center; gap:.7rem;
  max-width:100%; padding:.75rem .95rem;
  background:transparent; border:1px solid var(--rule);
  color:var(--marble-dim);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:border-color .25s;
}
.ca:hover{ border-color:var(--gold); }
.ca__label{ color:var(--gold); flex:none; }
.ca__val{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-variant-numeric:tabular-nums; text-transform:none; letter-spacing:.02em;
}
.ca__act{ flex:none; color:var(--marble); }

/* ══ SCREEN ONE ═══════════════════════════════════════════════════════
   The coin is the hero; everything else is arranged AROUND it. Mobile
   flows top-to-bottom; from 60rem up the corners go absolute so nothing
   stacks underneath the image like a slide.
   ═══════════════════════════════════════════════════════════════════ */

.hero{
  position:relative;
  min-height:calc(100svh - var(--rail-h));
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:clamp(.9rem,2.6vw,1.4rem);
  padding:clamp(1.5rem,5vw,2.5rem) var(--gutter) clamp(3rem,8vw,3.5rem);
  text-align:center;
  overflow:hidden;   /* torchlight must not bleed into the tape below */
}

/* Torchlight fills the room as the bar comes up. */
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(56% 42% at 0% 48%,   rgba(53,212,111,calc(.30 * var(--grow))) 0%, transparent 68%),
    radial-gradient(56% 42% at 100% 48%, rgba(53,212,111,calc(.30 * var(--grow))) 0%, transparent 68%),
    radial-gradient(70% 45% at 50% 44%,  rgba(53,212,111,calc(.14 * var(--grow))) 0%, transparent 72%);
  transition:background .18s linear;
}
.hero > *{ position:relative; z-index:2; }

/* ── the colonnade ───────────────────────────────────────────────────
   Two green torches on fluted columns, lifted straight off dad's coin.
   Everything about them tracks --grow: taller bar, brighter room. */

.colonnade{ position:absolute; inset:0; z-index:1; pointer-events:none; }

.torch{
  --flame: clamp(52px,7.5vw,96px);
  --cap:   clamp(18px,2.6vw,30px);
  position:absolute; bottom:0;
  width:clamp(30px,5vw,68px);
  height:min(76%,33rem);
}
.torch--l{ left:clamp(.35rem,2.5vw,4.5rem); }
.torch--r{ right:clamp(.35rem,2.5vw,4.5rem); }

/* Fluted white-marble shaft. The vertical grooves are a repeating gradient
   (lit edge, shadow edge); the wide gradient underneath is the cylinder. */
.torch__shaft{
  position:absolute; left:0; bottom:0;
  width:100%; height:calc(100% - var(--flame) - var(--cap));
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.34)      0 1px,
      rgba(255,255,255,.20) 1px 3px,
      rgba(255,255,255,.03) 3px 8px,
      rgba(0,0,0,.24)       8px 10px),
    linear-gradient(90deg,
      var(--stone-dark) 0%, var(--stone-mid) 14%, var(--stone) 34%,
      var(--stone-lit) 48%, var(--stone) 62%, var(--stone-mid) 84%,
      var(--stone-dark) 100%);
  box-shadow:0 0 calc(12px + 40px * var(--grow)) rgba(53,212,111,calc(.10 + .34 * var(--grow)));
  transition:box-shadow .18s linear;
}
/* Firelight falling down the marble — brightens with the candle. */
.torch__shaft::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(53,212,111,calc(.62 * var(--grow))) 0%,
    rgba(53,212,111,calc(.16 * var(--grow))) 38%,
    transparent 72%);
  mix-blend-mode:screen;
  transition:background .18s linear;
}

/* Doric capital: square abacus over a flaring echinus. */
.torch__cap{
  position:absolute; left:-20%; width:140%;
  bottom:calc(100% - var(--flame) - var(--cap));
  height:var(--cap);
  background:linear-gradient(180deg,var(--stone-lit) 0%,var(--stone) 46%,var(--stone-mid) 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.55);
}
.torch__cap::after{
  content:"";
  position:absolute; left:14%; width:72%; top:100%;
  height:calc(var(--cap) * .62);
  background:linear-gradient(180deg,var(--stone) 0%,var(--stone-mid) 70%,var(--stone-dark) 100%);
  clip-path:polygon(0 0,100% 0,84% 100%,16% 100%);
}

/* the gold brazier the fire sits in */
.torch__bowl{
  position:absolute; left:6%; width:88%;
  bottom:calc(100% - var(--flame) - 1px);
  height:clamp(9px,1.3vw,15px);
  background:var(--metal);
  clip-path:polygon(0 0,100% 0,84% 100%,16% 100%);
}

.torch__fire{
  position:absolute; left:50%; bottom:calc(100% - var(--flame) + 6px);
  width:92%; height:var(--flame);
  background:radial-gradient(50% 60% at 50% 76%,
    #E6FFF1 0%, var(--green-hot) 24%, var(--green) 50%, rgba(18,112,58,0) 78%);
  border-radius:50% 50% 42% 42% / 72% 72% 28% 28%;
  filter:blur(2.5px);
  opacity:calc(.52 + .48 * var(--grow));
  transform-origin:bottom center;
  animation:flicker 2.4s ease-in-out infinite;
}

.torch__glow{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% - var(--flame) - 34%);
  width:clamp(150px,22vw,340px); aspect-ratio:1;
  background:radial-gradient(circle,
    rgba(53,212,111,calc(.14 + .48 * var(--grow))) 0%, transparent 62%);
  filter:blur(8px);
}

@keyframes flicker{
  0%,100%{ transform:translateX(-50%) scale(1,1); }
  35%    { transform:translateX(-50%) scale(.93,1.07); }
  70%    { transform:translateX(-50%) scale(1.04,.95); }
}

/* ── masthead ────────────────────────────────────────────────────────
   The name sits BEHIND the coin and the coin overlaps its lower third,
   so the kid reads as popping off the page instead of sitting on a slab. */

.ca--bare{ border:none; padding:.25rem 0; }
.ca--bare:hover{ border:none; }
.ca--bare .ca__act{ color:var(--gold); }

.wordmark{
  position:relative; z-index:1;
  margin:0;
  font-size:clamp(2.9rem,12vw,6.5rem);
  font-weight:700;
  font-variation-settings:"opsz" 96;
  line-height:.92; letter-spacing:-.03em;
  color:var(--marble);
  text-shadow:
    0 1px 0 #8C6B28,
    0 -1px 0 rgba(240,220,164,.45),
    0 6px 26px rgba(0,0,0,.85);
}

.stage{
  position:relative;
  z-index:3;
  width:min(50vw,15rem);
  aspect-ratio:1;
  /* Pull the coin up over the name — but only far enough that its top arc
     kisses the baseline. Deeper than this and the circle eats "y B" and the
     name stops being readable, which is the one thing it must stay. */
  margin-top:clamp(-2.25rem,-4vw,-1.25rem);
}

/* ── dad's candle ────────────────────────────────────────────────────
   Beside the kid, not behind him: behind, the medallion hid it at any
   believable height and it read as a green nub. */
.candle{
  position:absolute;
  right:-21%; bottom:4%;
  width:clamp(30px,7vw,52px);
  height:calc((.38 + var(--grow) * .72) * 100%);
  z-index:1;
  will-change:height;
}
.candle__body{
  display:block; height:100%; width:100%;
  background:linear-gradient(180deg,var(--green-hot) 0%,var(--green) 38%,var(--green-deep) 100%);
  border:1px solid rgba(140,255,180,.55);
  box-shadow:
    0 0 30px rgba(53,212,111,.55),
    0 0 90px rgba(53,212,111,.28),
    inset 0 0 14px rgba(255,255,255,.22);
}
.candle__wick{
  position:absolute; left:50%;
  width:2px; background:var(--green);
  transform:translateX(-50%);
  box-shadow:0 0 10px rgba(53,212,111,.8);
  opacity:calc(var(--grow) * 1.6);
}
.candle__wick--up{ top:calc(-1 * clamp(14px,3.5vw,26px)); height:clamp(14px,3.5vw,26px); }
.candle__wick--down{ bottom:calc(-1 * clamp(10px,2.5vw,18px)); height:clamp(10px,2.5vw,18px); }

.plinth{
  position:absolute; left:50%; top:50%;
  width:150%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(53,212,111,calc(.4 * var(--grow))) 0%, transparent 62%);
  z-index:0; pointer-events:none;
  transition:background .18s linear;
}

/* ── the kid ─────────────────────────────────────────────────────────── */

.medallion{
  position:absolute; inset:0;
  z-index:2;
  display:block; padding:0; border:none; background:none;
  cursor:pointer;
  transform:perspective(760px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.medallion__bezel{
  position:absolute; inset:clamp(-14px,-3vw,-9px);
  border-radius:50%;
  background:repeating-conic-gradient(from var(--bezel-angle,0deg),
    var(--gold) 0deg .5deg, transparent .5deg 1.7deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));
          mask:radial-gradient(closest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));
  opacity:.5;
  animation:turn 90s linear infinite;
}
/* The angle is animated, not the element: rotating the square would inflate
   its bounding box by root-2 and push horizontal overflow on phones. */
@property --bezel-angle{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes turn{ to{ --bezel-angle:360deg; } }

.medallion__ring{
  display:block; height:100%;
  border-radius:50%;
  padding:clamp(5px,1.4vw,9px);
  background:var(--metal);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 18px 50px rgba(0,0,0,.7);
}
.medallion__inner{
  display:block; height:100%;
  border-radius:50%; overflow:hidden;
  background:var(--ink-2);
}
.medallion img{ width:100%; height:100%; object-fit:cover; }

/* The overshoot lives in the keyframes, so the curve stays a clean
   ease-out rather than an elastic one. */
.medallion.is-ripping{ animation:pop .5s cubic-bezier(.22,1,.36,1); }
@keyframes pop{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.07) rotate(-2deg); }
  100%{ transform:scale(1); }
}

/* ── burst ───────────────────────────────────────────────────────────── */

.fx{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.bit{
  position:absolute; top:50%; left:50%;
  width:var(--s,10px); height:var(--s,10px);
  margin:calc(var(--s,10px) / -2);
  border-radius:50%;
  background:var(--metal);
  box-shadow:0 0 8px rgba(232,206,142,.8);
  animation:fly var(--t,760ms) cubic-bezier(.15,.7,.3,1) forwards;
}
.bit--green{
  border-radius:1px;
  background:linear-gradient(180deg,var(--green-hot),var(--green-deep));
  box-shadow:0 0 10px rgba(53,212,111,.9);
}
@keyframes fly{
  to{ transform:translate(var(--dx),var(--dy)) rotate(var(--dr,180deg)); opacity:0; }
}

/* ── the corner artifact ─────────────────────────────────────────────
   Dad engraves his tagline on a brass plate. So does his kid. */

.placard{
  display:flex; align-items:stretch; gap:.95rem;
  max-width:min(24rem,100%);
  padding:1rem 1.2rem;
  border:1px solid rgba(201,162,74,.42);
  background:linear-gradient(180deg,rgba(201,162,74,.11),rgba(201,162,74,.015));
  box-shadow:inset 0 1px 0 rgba(240,220,164,.22), 0 12px 34px rgba(0,0,0,.55);
  text-align:left;
}
/* museum spine label, read bottom-to-top down the plate's edge */
.placard__title{
  flex:none;
  writing-mode:vertical-rl; transform:rotate(180deg);
  padding-left:.55rem;
  border-left:1px solid rgba(201,162,74,.26);
  font-family:var(--mono);
  font-size:.5rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold);
}
.placard__body{ min-width:0; }
.placard__line{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.05rem,3.9vw,1.5rem);
  font-weight:700; line-height:1.2;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold-lit);
  text-shadow:0 1px 0 rgba(0,0,0,.8);
}
.placard__sub{
  display:block; margin-top:.65rem;
  font-family:var(--mono);
  font-size:.53rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--marble-mute);
}

.hero__links{ display:flex; flex-wrap:wrap; gap:.65rem; justify-content:center; }
.x-glyph{ margin-right:.5em; font-size:1.05em; line-height:1; }

.pumps{
  display:flex; align-items:baseline; gap:.55rem;
  margin:0;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--marble-mute);
}
.pumps__label{ color:var(--gold); }
.pumps__n{ font-variant-numeric:tabular-nums; font-size:.85rem; color:var(--green); }
.pumps__hint{ opacity:.7; }

.cue{
  display:inline-flex; flex-direction:column; align-items:center; gap:.55rem;
  font-size:.55rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--marble-mute); text-decoration:none;
}
.cue span{
  display:block; width:1px; height:2rem;
  background:linear-gradient(180deg,var(--gold),transparent);
  animation:drop 2.4s ease-in-out infinite;
}
@keyframes drop{
  0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.5; }
  50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
}

/* Mobile reading order: contract, name, coin, plate, links, pumps, cue */
.ca--bare{ order:1; }
.wordmark{ order:2; }
.stage{ order:3; }
.placard{ order:4; }
.hero__links{ order:5; }
.pumps{ order:6; }
.cue{ order:7; }

/* ── wall sconces ────────────────────────────────────────────────────
   Small flames mounted to the true viewport edge, independent of both the
   hero's own torches and the section-bracketing columns below. Hidden
   until the hero has been scrolled past (site.js toggles .is-on off a
   sentinel), hidden on phones. This is the "attached to the edge of the
   browser as we scroll" ask — a second, permanent green highlight running
   the whole length of the page instead of the hero's light dying at the
   fold. */

.sconces{
  display:none;
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:6; pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
}
.sconces.is-on{ opacity:1; }

.sconce{
  --flame: 46px;
  position:absolute; top:50%; transform:translateY(-50%);
  width:60px; height:130px;   /* ~10% up from the previous pass */
}
.sconce--l{ left:0; }
.sconce--r{ right:0; transform:translateY(-50%) scaleX(-1); }

.sconce__bracket{
  position:absolute; left:0; bottom:30%;
  width:46px; height:12px;
  background:var(--metal);
  clip-path:polygon(0 0,100% 30%,100% 70%,0 100%);
  box-shadow:3px 3px 12px rgba(0,0,0,.6);
}
.sconce__bowl{
  position:absolute; left:3px; bottom:calc(30% + 9px);
  width:35px; height:10px;
  background:var(--metal);
  clip-path:polygon(0 0,100% 0,80% 100%,20% 100%);
}
.sconce__fire{
  position:absolute; left:10px; bottom:calc(30% + 17px);
  width:29px; height:var(--flame);
  background:radial-gradient(50% 60% at 50% 76%,
    #E6FFF1 0%, var(--green-hot) 26%, var(--green) 52%, rgba(18,112,58,0) 80%);
  border-radius:50% 50% 42% 42% / 72% 72% 28% 28%;
  filter:blur(2.5px);
  opacity:.94;
  transform-origin:bottom center;
  /* Its own keyframes, not the hero torches' shared `flicker` — a wider
     scale swing so the sway reads clearly, isolated so nothing about the
     hero's own flame animation is touched by this. */
  animation:sconce-flicker 2s ease-in-out infinite;
}
.sconce--r .sconce__fire{ animation-delay:-1.1s; }  /* the two sides drift out of phase */
.sconce__glow{
  position:absolute; left:10px; bottom:calc(30% + 17px);
  width:165px; height:165px; transform:translateX(-68px);
  background:radial-gradient(circle,rgba(53,212,111,.36) 0%,transparent 65%);
  filter:blur(7px);
}

@keyframes sconce-flicker{
  0%,100%{ transform:translateX(-50%) scale(1,1); }
  22%    { transform:translateX(-50%) scale(.86,1.16); }
  48%    { transform:translateX(-50%) scale(1.1,.88); }
  70%    { transform:translateX(-50%) scale(.9,1.1); }
  85%    { transform:translateX(-50%) scale(1.05,.94); }
}

@media (min-width:62rem){ .sconces{ display:block; } }

/* ── framed sections ─────────────────────────────────────────────────
   Full white-marble columns that bracket ONE block top to bottom, so they
   act as that section's border. Deliberately not on the pledge/film block
   and not on the closing line. Desktop only — no side room on a phone. */

.framed{ position:relative; }

.frame-col{
  display:none;
  position:absolute; top:0; bottom:0;
  width:clamp(38px,4vw,64px);
  background:
    /* a real astragal molding — a thin gold band a fixed distance below
       the capital, the extra column detail asked for */
    linear-gradient(180deg,var(--gold-lit) 0%,var(--gold) 50%,#8C6B28 100%)
      no-repeat 0 30px / 100% 4px,
    /* the vine WRAPS the column: four crescent arcs, alternating which
       edge they hug, connected by real gaps (nothing drawn) standing for
       the stretch where the vine is on the unseen far side of the
       cylinder — a real spiral wrap, not a flat meander. Leaves cluster
       only along the visible arcs. Two ivy silhouettes (pointed tip, two
       rounded base lobes, a visible vein line) rather than one shape
       reused as a blob. */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='460' viewBox='0 0 60 460'><defs><path id='lfa' d='M0,-7 C3,-7 5,-4 5,-1 C5,2 3,3 5,5 C7,7 6,9 3,8 C1,7 0,5 0,3 C0,5 -1,7 -3,8 C-6,9 -7,7 -5,5 C-3,3 -5,2 -5,-1 C-5,-4 -3,-7 0,-7 Z'/><path id='lfb' d='M0,-4.5 C2.6,-4.6 4.4,-2.4 4.3,0.2 C4.4,2.6 2.6,3.4 2.2,5.6 C2,6.6 1,7.6 0,8.4 C-1,7.6 -2,6.6 -2.2,5.6 C-2.6,3.4 -4.4,2.6 -4.3,0.2 C-4.4,-2.4 -2.6,-4.6 0,-4.5 Z'/><path id='vna' d='M0,3 C0,0 0,-4 0,-6.4 M0,0 C1.6,1.8 3,3.4 4,4.6 M0,0 C-1.6,1.8 -3,3.4 -4,4.6' fill='none'/><path id='vnb' d='M0,7.8 C0,4 0,0 0,-3.8' fill='none'/></defs><path d='M4,74 C20,64 24,52 26,44 C24,36 20,24 4,6' fill='none' stroke='%232B5D3A' stroke-width='2.1' stroke-linecap='round' opacity='.35'/><path d='M4,74 C20,64 24,52 26,44 C24,36 20,24 4,6' fill='none' stroke='%232B5D3A' stroke-width='1.5' stroke-linecap='round' opacity='.95'/><path d='M56,186 C40,176 36,164 34,156 C36,148 40,136 56,118' fill='none' stroke='%232B5D3A' stroke-width='2.1' stroke-linecap='round' opacity='.35'/><path d='M56,186 C40,176 36,164 34,156 C36,148 40,136 56,118' fill='none' stroke='%232B5D3A' stroke-width='1.5' stroke-linecap='round' opacity='.95'/><path d='M4,298 C20,288 24,276 26,268 C24,260 20,248 4,230' fill='none' stroke='%232B5D3A' stroke-width='2.1' stroke-linecap='round' opacity='.35'/><path d='M4,298 C20,288 24,276 26,268 C24,260 20,248 4,230' fill='none' stroke='%232B5D3A' stroke-width='1.5' stroke-linecap='round' opacity='.95'/><path d='M56,410 C40,400 36,388 34,380 C36,372 40,360 56,342' fill='none' stroke='%232B5D3A' stroke-width='2.1' stroke-linecap='round' opacity='.35'/><path d='M56,410 C40,400 36,388 34,380 C36,372 40,360 56,342' fill='none' stroke='%232B5D3A' stroke-width='1.5' stroke-linecap='round' opacity='.95'/><path d='M26,44 c8,-3 13,3 9,10 c-3,6 -11,4 -10,-3' fill='none' stroke='%233E7A4E' stroke-width='1' opacity='.7'/><path d='M34,156 c-8,-3 -14,2 -11,9 c2,6 10,5 10,-2' fill='none' stroke='%233E7A4E' stroke-width='1' opacity='.7'/><g transform='translate(16,14) rotate(-50) scale(1.0)'><use href='%23lfa' fill='%234DE887' opacity='0.85'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(28,24) rotate(30) scale(0.85)'><use href='%23lfb' fill='%232FA357' opacity='0.8'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(10,34) rotate(-70) scale(0.9)'><use href='%23lfb' fill='%235C7A4A' opacity='0.82'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(30,44) rotate(45) scale(1.05)'><use href='%23lfa' fill='%234DE887' opacity='0.87'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(14,58) rotate(-35) scale(0.8)'><use href='%23lfb' fill='%238FCB9C' opacity='0.78'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(26,68) rotate(55) scale(0.95)'><use href='%23lfa' fill='%232FA357' opacity='0.84'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(44,126) rotate(40) scale(0.95)'><use href='%23lfa' fill='%234DE887' opacity='0.84'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(30,136) rotate(-45) scale(0.85)'><use href='%23lfb' fill='%235C7A4A' opacity='0.8'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(48,148) rotate(60) scale(1.0)'><use href='%23lfb' fill='%232FA357' opacity='0.85'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(32,160) rotate(-30) scale(0.9)'><use href='%23lfa' fill='%234DE887' opacity='0.82'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(46,176) rotate(50) scale(0.85)'><use href='%23lfb' fill='%238FCB9C' opacity='0.8'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(16,238) rotate(-55) scale(0.9)'><use href='%23lfa' fill='%232FA357' opacity='0.82'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(28,250) rotate(35) scale(0.85)'><use href='%23lfb' fill='%234DE887' opacity='0.8'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(10,262) rotate(-40) scale(1.0)'><use href='%23lfa' fill='%235C7A4A' opacity='0.85'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(30,276) rotate(50) scale(0.8)'><use href='%23lfb' fill='%232FA357' opacity='0.78'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(14,290) rotate(-60) scale(0.95)'><use href='%23lfa' fill='%234DE887' opacity='0.84'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(44,350) rotate(45) scale(0.9)'><use href='%23lfb' fill='%235C7A4A' opacity='0.82'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(30,362) rotate(-50) scale(1.0)'><use href='%23lfa' fill='%234DE887' opacity='0.85'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(48,374) rotate(55) scale(0.85)'><use href='%23lfb' fill='%232FA357' opacity='0.8'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(32,388) rotate(-35) scale(0.95)'><use href='%23lfa' fill='%238FCB9C' opacity='0.84'/><use href='%23vna' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g><g transform='translate(46,402) rotate(40) scale(0.85)'><use href='%23lfb' fill='%234DE887' opacity='0.8'/><use href='%23vnb' stroke='%231E4A2C' stroke-width='.45' opacity='.55'/></g></svg>")
      repeat-y center top / 100% 460px,
    /* weathering — a few soft blotches, lighter (mineral bloom) and darker
       (age/shadow), placed asymmetrically so even before the mirrored
       vine, the two columns don't read as identical stock */
    radial-gradient(120% 40% at 28% 10%, rgba(0,0,0,.06) 0%, transparent 58%),
    radial-gradient(90% 30% at 74% 30%, rgba(255,255,255,.05) 0%, transparent 62%),
    radial-gradient(100% 32% at 66% 58%, rgba(0,0,0,.05) 0%, transparent 64%),
    radial-gradient(90% 28% at 30% 78%, rgba(255,255,255,.04) 0%, transparent 60%),
    radial-gradient(110% 30% at 45% 94%, rgba(0,0,0,.045) 0%, transparent 60%),
    /* flutes */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22)       0 1px,
      rgba(255,255,255,.24) 1px 3px,
      rgba(255,255,255,.04) 3px 9px,
      rgba(0,0,0,.14)       9px 12px),
    linear-gradient(90deg,
      var(--stone-mid) 0%, var(--stone) 16%, var(--stone-lit) 42%,
      var(--stone) 66%, var(--stone-mid) 88%, var(--stone-dark) 100%);
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
.frame-col--l{ left:0; }
/* Mirrored, not a second asset: a marble cylinder is symmetric, so
   flipping the vine is enough to make the two columns stop matching — the
   astragal band and weathering blotches are asymmetric on purpose so even
   the mirror isn't a perfect one. */
.frame-col--r{ right:0; transform:scaleX(-1); }

/* capital */
.frame-col::before{
  content:"";
  position:absolute; left:-20%; width:140%; top:0;
  height:clamp(12px,1.3vw,19px);
  background:linear-gradient(180deg,var(--stone-lit) 0%,var(--stone) 50%,var(--stone-mid) 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.5);
}
/* base */
.frame-col::after{
  content:"";
  position:absolute; left:-20%; width:140%; bottom:0;
  height:clamp(12px,1.3vw,19px);
  background:linear-gradient(180deg,var(--stone-mid) 0%,var(--stone) 40%,var(--stone-dark) 100%);
  box-shadow:0 -2px 5px rgba(0,0,0,.45);
}

@media (min-width:62rem){
  .frame-col{ display:block; }
  /* .sconces already gated above; grouped here in spirit only */
  /* The frame is wider than the reading column, so the columns land near the
     block's edges and the text keeps its normal measure inside them. */
  .framed{
    max-width:64rem;
    margin-inline:auto;
    padding-inline:clamp(4.5rem,8vw,7.5rem);
  }
}

/* ── tape ────────────────────────────────────────────────────────────── */

.tape{
  overflow:hidden; padding:.75rem 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--ink-2);
}
.tape__track{
  display:inline-flex; align-items:center;
  white-space:nowrap; will-change:transform;
  animation:tape 42s linear infinite;
}
.tape__item{
  padding:0 1.1rem;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--marble-dim);
}
.tape__dot{ color:var(--green); }
@keyframes tape{ to{ transform:translateX(-50%); } }

/* ══ SCREEN TWO — the pledge, then the film ═══════════════════════════ */

.pledge{
  /* Was 18ch — narrow enough that "50% of all fees go to $BONER" wrapped
     a second time on its own, giving three cramped lines instead of the
     intended two ("...go to $BONER" / "and never sell.", split by the
     explicit <br> below). 30ch is just wide enough to hold the first line
     whole. */
  max-width:33ch;
  margin:0 auto clamp(2.5rem,7vw,4rem);
  font-size:clamp(1.9rem,7vw,3.9rem);
  font-weight:700;
  font-variation-settings:"opsz" 88;
  line-height:1.1; letter-spacing:-.025em;
  text-wrap:balance;
  text-shadow:0 1px 0 #8C6B28, 0 -1px 0 rgba(240,220,164,.4);
}
/* At the pledge's giant scale the usual .sc mono-label treatment (.68em)
   read as a mismatched, undersized insert next to the huge serif around
   it. Full size here — same weight/case/tracking as .sc everywhere else,
   just not shrunk down. */
.pledge .sc{ font-size:1em; letter-spacing:.06em; }

.film{
  padding:var(--space) var(--gutter);
  text-align:center;
  /* dad's desk lamp, echoed at the top of his own chapter */
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='340' viewBox='0 0 500 340'><path d='M-20,90 C50,50 110,140 190,90 C260,48 330,110 400,70' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M60,-10 C30,60 90,90 60,170 C40,220 90,250 70,320' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M420,20 C360,80 390,150 320,190' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M190,90 c12,-18 40,-12 40,-8' fill='none' stroke='%23F2EDE3' stroke-width='.8' opacity='.035'/></svg>") repeat,
    radial-gradient(60% 40% at 50% 0%,rgba(201,162,74,.06) 0%,transparent 70%);
}
.film__frame{
  position:relative;
  width:min(100%,34rem); margin:0 auto;
  padding:clamp(6px,1.4vw,10px);
  background:var(--metal);
  box-shadow:0 24px 70px rgba(0,0,0,.75);
}
.film__frame video{
  width:100%; aspect-ratio:1; object-fit:cover;
  background:var(--ink-2);
}
.sound{
  position:absolute; left:50%; bottom:-3rem;
  transform:translateX(-50%);
  padding:.4rem .85rem;
  background:transparent; border:1px solid var(--rule);
  color:var(--marble-dim);
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:color .25s,border-color .25s;
}
.sound:hover{ color:var(--green); border-color:var(--green); }
.film__cap{
  margin:5rem auto 0; max-width:36ch;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--marble-mute);
}

/* ── lore ────────────────────────────────────────────────────────────── */

.manifesto{
  padding:var(--space) var(--gutter);
  border-top:1px solid var(--rule);
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='400' viewBox='0 0 560 400'><path d='M-10,200 C80,160 130,230 220,190 C300,156 350,220 430,180' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M300,-10 C260,60 320,100 280,170 C250,224 300,260 270,330' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M20,340 C90,310 120,370 190,340' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M480,80 C430,120 450,180 400,210' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M220,190 c-14,-20 -40,-14 -40,-6' fill='none' stroke='%23F2EDE3' stroke-width='.8' opacity='.035'/><path d='M280,170 c16,16 34,22 34,24' fill='none' stroke='%23F2EDE3' stroke-width='.8' opacity='.035'/></svg>") repeat,
    radial-gradient(70% 50% at 50% 100%,rgba(53,212,111,.05) 0%,transparent 70%);
}
.lore-title{
  font-size:clamp(2.6rem,11vw,4.6rem);
  line-height:.98;
  margin-bottom:clamp(1.75rem,5vw,2.5rem);
}
.prose{ max-width:var(--measure); margin:0 auto; }
.prose{ text-align:center; }
.prose p{
  margin:0 0 clamp(2rem,6vw,2.6rem);
  font-size:clamp(1.2rem,5vw,1.6rem);
  font-variation-settings:"opsz" 11;
  line-height:1.62;
  text-wrap:pretty;
}
.prose p:last-child{ margin-bottom:0; }

.sc{
  font-family:var(--mono); font-size:.68em; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
}
.up{ color:var(--green); font-weight:700; }

/* .punch (a mid-scale "shout" beat between body copy and a full chapter
   title) was removed here — the lore now runs at one uniform size below
   its chapter title, per the user's own note that varied sizing read as
   messy. Chapter titles (.chapter-title, .lore-title, etc.) still carry
   the emboss/scale treatment; this file no longer has an intermediate
   step between them and body text. */

.plate{
  width:min(100%,24rem);
  margin:clamp(2.5rem,8vw,3.5rem) auto;
}
.plate img{ width:100%; height:auto; border:1px solid var(--rule-marble); }

/* The cutout has no background to frame — a bordered rectangle around
   transparent space read as an empty box, so this variant drops the
   border and floats him directly on the page instead. Narrower than the
   old bordered-photo width too: he's a tall portrait, not a square. */
.plate--cutout{ width:min(62%,14.5rem); perspective:900px; }
.plate--cutout img{
  border:none;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
  animation:baby-sway 7s ease-in-out infinite;
}
/* A slow, continuous tilt — not hover-triggered, since nothing above this
   fold tracks the cursor — so he reads as gently alive rather than a flat
   photo pasted onto the page. Same "ambient forever" motion language as
   the bezel's rotation and the torches' flicker. */
@keyframes baby-sway{
  0%,100%{ transform:rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%{ transform:rotateY(6deg) rotateX(-2deg) translateY(-7px); }
}
.plate figcaption{
  margin-top:.8rem; text-align:center;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--marble-mute);
}

/* ── spank bank ──────────────────────────────────────────────────────── */

.bank{
  padding:var(--space) var(--gutter);
  border-top:1px solid var(--rule);
  /* the vault — the greenest room on the page, it holds the actual $BONER */
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='300' viewBox='0 0 460 300'><path d='M-10,60 C60,30 90,90 170,60 C240,36 280,90 350,66' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M240,-10 C210,50 260,80 230,140 C210,180 250,210 230,260' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M40,260 C100,230 130,280 190,254' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M170,60 c14,-16 36,-10 36,-8' fill='none' stroke='%23F2EDE3' stroke-width='.8' opacity='.035'/></svg>") repeat,
    radial-gradient(60% 55% at 50% 30%,rgba(53,212,111,.075) 0%,transparent 72%);
}
.bank__head{ max-width:var(--measure); margin:0 auto clamp(2.25rem,7vw,3rem); text-align:center; }
.bank__title{
  font-size:clamp(2.4rem,10vw,4rem);
  /* "Daddy's Spank Bank" wraps to two lines; .95 was tuned for the old
     one-line "The Spank Bank" and left no room for the descender on "y" —
     it was overlapping the line below. 1.08 gives it breathing room. */
  line-height:1.08;
}
.bank__lede{
  margin:clamp(1.1rem,4vw,1.6rem) 0 0;
  font-size:clamp(1rem,4vw,1.15rem);
  font-variation-settings:"opsz" 11;
  line-height:1.7; color:var(--marble-dim);
  text-wrap:pretty;
}

.statement{
  max-width:var(--measure); margin:0 auto;
  border:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(201,162,74,.03),transparent 40%);
}
.statement__head{
  display:flex; justify-content:space-between;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--rule);
  font-size:.55rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}
.statement__line{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.1rem; border-bottom:1px solid var(--rule-marble);
}
.statement__line:last-of-type{ border-bottom:none; }
.statement__name{
  display:flex; flex-direction:column; gap:.3rem;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--marble-dim);
}
.statement__name small{
  font-size:.55rem; letter-spacing:.1em; text-transform:none;
  color:var(--marble-mute);
}
.statement__num{
  flex:none; text-align:right;
  font-size:.95rem; font-variant-numeric:tabular-nums;
  color:var(--marble);
}
.statement__line--lead{ padding:1.5rem 1.1rem; }
.statement__line--lead .statement__name{ color:var(--gold); }
.statement__line--lead .statement__num{
  font-size:clamp(1.25rem,5.5vw,1.75rem);
  color:var(--green);
}
.statement__line--sub .statement__num{ color:var(--marble-dim); }
.statement__foot{
  display:flex; flex-wrap:wrap; gap:.6rem;
  align-items:center; justify-content:space-between;
  padding:.85rem 1.1rem; border-top:1px solid var(--rule);
  font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--marble-mute);
}
.statement__foot a{ color:var(--gold); text-decoration:none; border-bottom:1px solid var(--rule); }
.statement__foot a:hover{ border-bottom-color:var(--gold); }

/* ── market ──────────────────────────────────────────────────────────── */

.market{
  padding:var(--space) var(--gutter);
  border-top:1px solid var(--rule);
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='280' viewBox='0 0 450 280'><path d='M-10,150 C60,110 100,170 180,140 C250,114 290,160 360,140' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M330,-10 C290,50 330,90 300,150' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M60,220 C120,196 150,240 210,218' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M180,140 c-12,-18 -36,-12 -36,-6' fill='none' stroke='%23F2EDE3' stroke-width='.8' opacity='.035'/></svg>") repeat,
    radial-gradient(50% 40% at 50% 0%,rgba(201,162,74,.05) 0%,transparent 70%);
}
.market-title{
  font-size:clamp(1.6rem,6vw,2.4rem);
  line-height:1.15;
  max-width:20ch;
  margin-inline:auto;
  margin-bottom:clamp(1.75rem,5vw,2.5rem);
  text-align:center;
}
.quote__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  max-width:52rem; margin:0 auto;
  background:var(--rule-marble); border:1px solid var(--rule-marble);
}
.quote__cell{ background:var(--ink); padding:1.1rem 1rem; }
.quote__cell dt{
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--marble-mute);
}
.quote__cell dd{
  margin:.5rem 0 0;
  font-size:clamp(1rem,4vw,1.2rem);
  font-variant-numeric:tabular-nums; color:var(--marble);
}
[data-tone="up"]{ color:var(--green); }
[data-tone="down"]{ color:var(--red); }

.quote__note{
  max-width:52rem; margin:1rem auto clamp(2.5rem,7vw,3.5rem);
  font-size:.6rem; letter-spacing:.1em; color:var(--marble-mute);
}

.chart__frame{
  max-width:52rem; margin:0 auto;
  border:1px solid var(--rule); background:var(--ink-2);
}
.chart__bar{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--rule);
  font-size:.55rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.chart__bar a{ color:var(--marble-dim); text-decoration:none; }
.chart__bar a:hover{ color:var(--green); }
/* Reserve chart-shaped space only once there is a chart. */
.chart__embed{ position:relative; width:100%; }
.chart__embed:has(iframe){ aspect-ratio:16/11; }
.chart__embed iframe{ width:100%; height:100%; border:0; }
.chart__empty{
  display:flex; align-items:center; justify-content:center;
  min-height:8rem; padding:2rem; margin:0;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--marble-mute); text-align:center;
}

/* ── close ───────────────────────────────────────────────────────────── */

.close{
  padding:var(--space) var(--gutter);
  border-top:1px solid var(--rule);
  text-align:center;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='220' viewBox='0 0 450 220'><path d='M-10,110 C70,80 110,140 200,110 C270,86 310,130 390,110' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M180,-10 C150,40 190,70 165,120' fill='none' stroke='%23F2EDE3' stroke-width='1' stroke-linecap='round' opacity='.045'/><path d='M200,110 c12,-16 34,-10 34,-6' fill='none' stroke='%23F2EDE3' stroke-width='.8' opacity='.035'/></svg>") repeat,
    radial-gradient(60% 60% at 50% 100%,rgba(53,212,111,.1) 0%,transparent 70%);
}
/* the closing mark — a small silhouette, not a second hero image */
.baby-mark{
  display:block;
  width:clamp(38px,7vw,52px);
  height:auto;
  margin:clamp(2.5rem,7vw,3.25rem) auto 0;
  opacity:.9;
}

.close__line{
  margin:0 0 clamp(2rem,6vw,2.5rem);
  font-size:clamp(2.6rem,13vw,6rem);
  font-weight:700;
  font-variation-settings:"opsz" 88;
  line-height:1; letter-spacing:-.03em;
  text-shadow:0 1px 0 #8C6B28, 0 -1px 0 rgba(240,220,164,.4);
}

/* ── colophon ────────────────────────────────────────────────────────── */

.colophon{ padding:0 var(--gutter) clamp(3rem,9vw,4rem); }
.rail__rule--full{ display:block; width:100%; height:1px; background:var(--rule); }
.colophon__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  justify-content:space-between; padding:clamp(2rem,6vw,2.5rem) 0;
}
.colophon .chip{ display:inline-flex; }
.colophon__links{ display:flex; flex-wrap:wrap; gap:1.3rem; }
.colophon__links a{
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--marble-dim); text-decoration:none; transition:color .25s;
}
.colophon__links a:hover{ color:var(--green); }
.disclaimer{
  max-width:64ch; margin:0;
  font-size:.68rem; line-height:1.9; color:var(--marble-mute);
}

/* ── toast ───────────────────────────────────────────────────────────── */

.toast{
  position:fixed; left:50%; bottom:1.5rem;
  transform:translate(-50%,1.2rem);
  padding:.6rem 1rem;
  background:var(--ink-2); border:1px solid var(--green);
  color:var(--marble);
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; pointer-events:none;
  transition:opacity .3s,transform .3s; z-index:40;
}
.toast[data-on]{ opacity:1; transform:translate(-50%,0); }

/* ── reveal ──────────────────────────────────────────────────────────── */

.rise{
  opacity:0; transform:translateY(14px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);
}
.rise.is-in{ opacity:1; transform:none; }

/* ── wider viewports ─────────────────────────────────────────────────── */

/* From 62rem the hero corners go absolute: name up top, plate bottom-left,
   links bottom-right, coin alone in the middle. Nothing under the image. */
@media (min-width:62rem){
  .hero .torch--l{ left:clamp(1rem,2vw,2.5rem); }
  .hero .torch--r{ right:clamp(1rem,2vw,2.5rem); }

  .hero .ca--bare{
    position:absolute; top:clamp(1.5rem,4vh,2.75rem);
    left:50%; transform:translateX(-50%);
    width:max-content; max-width:calc(100% - 2 * var(--gutter));
  }
  .hero .pumps{
    position:absolute; top:clamp(1.9rem,5vh,3.4rem);
    right:calc(var(--gutter) + 4.5rem);
  }
  .hero .placard{
    position:absolute; left:calc(var(--gutter) + 4.5rem);
    bottom:clamp(2rem,6vh,4rem);
  }
  .hero .hero__links{
    position:absolute; right:calc(var(--gutter) + 4.5rem);
    bottom:clamp(2rem,6vh,4rem);
    flex-direction:column; align-items:stretch;
  }
  .hero .cue{
    position:absolute; bottom:clamp(.9rem,2.5vh,1.75rem);
    left:50%; transform:translateX(-50%);
  }
  .hero .stage{ width:min(26vw,20rem); }
}


/* Everything below the hero is centred on a single axis. An earlier pass
   pushed blocks left and right; against this much dark ground it just read as
   blank space. Marble columns bracket specific blocks instead. */
@media (min-width:62rem){
  .film__frame{ width:min(100%,40rem); margin-left:auto; margin-right:auto; }
  .film__cap{ margin:4.5rem auto 0; text-align:center; max-width:36ch; }
}

@media (min-width:48rem){
  .rail{ gap:1.25rem; }
  .rail__nav{ display:flex; }
  .rail .chip{ display:inline-flex; }
  .rail .btn--sm{ margin-left:0; }
  .stage{ width:min(23vw,16.5rem); }
  .quote__grid{ grid-template-columns:repeat(4,1fr); }
}

/* ── reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .medallion__bezel,.tape__track,.cue span{ animation:none; }
  .medallion{ transition:none; }
  .rise{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; }
}