/* Gold Shop Sites · landing page, direction "Crucible", second pass.
   One fixed stage: the 3D world, the gold flood and every act's words sit on top of each other and
   hand over on one scroll clock, so nothing slides away between acts. Full-bleed, thin gutter only.
   Two colour options, picked per shop: A "night" (warm black, gold, ivory) and B "ivory" (ivory, gold, ink). */
:root {
  --gold: #d9a84e;        /* set from the shop's metal colour */
  --gold-hi: #f4d58d;
  --gold-lo: #8a6420;
  --pad: clamp(16px, 2.4vw, 44px);
  --font: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --head: 68px;
  --railh: 38px;
  --top: calc(var(--head) + var(--railh));
}
/* A · night: warm black like a goldsmith's crucible */
html[data-theme="night"] {
  --ground: #0c0907; --ground-2: #16110c; --ground-glass: rgba(12, 9, 7, 0.8);
  --ink: #f1e9da; --ink-dim: #b9ad99; --accent: var(--gold-hi);
  --line: rgba(217, 168, 78, 0.22); --line-ink: rgba(241, 233, 218, 0.4);
  --glow: rgba(217, 168, 78, 0.12);
  --field: radial-gradient(70% 70% at 50% 45%, #f1cf83, #e2b863 55%, #c79237);
  --on-field: #0c0907; --on-field-dim: #4a3416; --giant: rgba(12, 9, 7, 0.09);
  --word-stroke: rgba(217, 168, 78, 0.38); --word-fill: rgba(217, 168, 78, 0.16);
  --call-bg: var(--gold); --call-ink: #0c0907; --join-bg: #f1e9da; --join-ink: #0c0907;
}
/* B · ivory: daylight silk, gold metal, ink text; the coin act floods to black instead of gold */
html[data-theme="ivory"] {
  --ground: #f3ece0; --ground-2: #e9dfcf; --ground-glass: rgba(243, 236, 224, 0.84);
  --ink: #1b130b; --ink-dim: #6a5a45; --accent: #8a5a12;
  --line: rgba(138, 90, 18, 0.26); --line-ink: rgba(27, 19, 11, 0.42);
  --glow: rgba(214, 160, 70, 0.22);
  --field: radial-gradient(70% 70% at 50% 45%, #2a1e12, #140e09 60%, #0a0705);
  --on-field: #f1e9da; --on-field-dim: #c5b79f; --giant: rgba(217, 168, 78, 0.12);
  --word-stroke: rgba(138, 90, 18, 0.45); --word-fill: rgba(214, 160, 70, 0.22);
  --call-bg: #1b130b; --call-ink: #f4d58d; --join-bg: var(--gold); --join-ink: #1b130b;
}
* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--font); font-variation-settings: "wdth" 100; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: fixed; left: var(--pad); top: -60px; z-index: 30; background: var(--gold); color: #0c0907; padding: 10px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 10px; }

/* ---------- type ---------- */
.display { font-family: var(--font); font-weight: 300; line-height: 0.92; letter-spacing: -0.035em; margin: 0;
  font-variation-settings: "wdth" calc(96 + 24 * var(--vis, 1)); font-size: clamp(2.6rem, 6.4vw, 7.6rem); text-wrap: balance; }
/* each word rises out of its own line mask, and leaves upward */
.display .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.02em 0.1em; margin: -0.04em -0.02em -0.1em; }
.display .w > span { display: inline-block; will-change: transform;
  transform: translate3d(0, calc(var(--dir, 1) * (1 - clamp(0, var(--vis, 1) * 1.45 - var(--d, 0), 1)) * 112%), 0); }
.lede { font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.28rem); line-height: 1.55; color: var(--ink-dim); max-width: 34ch; margin: 22px 0 0; }
.step { display: flex; gap: 14px; align-items: baseline; font-size: 0.9rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; margin: 0 0 22px; }
.step b { color: var(--accent); font-weight: 500; }
.step i { font-style: normal; flex: 0 0 64px; height: 1px; background: var(--line); align-self: center; transform: scaleX(var(--vis, 1)); transform-origin: left; }

/* ---------- buttons: square-cut bars ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 58px; padding: 0 22px 0 24px;
  font: 500 1.02rem/1 var(--font); text-decoration: none; border: 0; cursor: pointer; transition: transform 500ms var(--ease), background-color 400ms var(--ease), color 400ms var(--ease), box-shadow 400ms var(--ease); }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform 500ms var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(0.98); }
.btn-gold { background: var(--gold); color: #0c0907; }
.btn-gold:hover { background: var(--gold-hi); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-ink); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.btn-dark { background: var(--on-field); color: var(--field-ink, #f1e9da); }
html[data-theme="night"] .btn-dark { color: #f4d58d; }
html[data-theme="ivory"] .btn-dark { color: #1b130b; background: var(--gold); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

/* ---------- header and chapter rail: two hairline bars across the full width ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--head); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  padding: 0 var(--pad); transition: background-color 500ms var(--ease), color 400ms var(--ease); }
.top.is-solid { background: var(--ground-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.mark b { font-weight: 600; font-size: 1.32rem; letter-spacing: 0.02em; font-variation-settings: "wdth" 125; color: var(--accent); }
.mark span { font-size: 0.86rem; color: var(--ink-dim); font-variation-settings: "wdth" 110; }
.nav { display: flex; gap: clamp(14px, 2vw, 34px); justify-content: center; }
.nav a { text-decoration: none; font-size: 0.94rem; color: var(--ink-dim); padding: 10px 0; position: relative; transition: color 300ms var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.top-end { display: flex; align-items: center; gap: 22px; }
.top-rate { font-size: 0.9rem; color: var(--ink-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.top-rate b { color: var(--ink); font-weight: 500; }
.top .btn { min-height: 42px; padding: 0 16px; gap: 12px; font-size: 0.94rem; }

.rail { position: fixed; z-index: 19; left: 0; right: 0; top: var(--head); height: var(--railh); transition: opacity 600ms var(--ease); }
.rail.is-off { opacity: 0; pointer-events: none; }
.rail ol { list-style: none; margin: 0; padding: 0 calc(var(--pad) + 170px) 0 var(--pad); height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }
.rail a { display: flex; align-items: center; gap: 12px; height: 100%; text-decoration: none; font-size: 0.8rem; color: var(--ink-dim); transition: color 400ms var(--ease); }
.rail a b { font-weight: 500; font-variant-numeric: tabular-nums; }
.rail a[aria-current] { color: var(--ink); }
.rail a[aria-current] b { color: var(--accent); }
.rail a:hover { color: var(--accent); }
.rail > i { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 1px; background: var(--line); }
.rail > i > i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transform: scaleX(var(--p, 0)); transform-origin: left; }
html.on-flood .top, html.on-flood .rail { color: var(--on-field); --ink: var(--on-field); --ink-dim: var(--on-field-dim); --accent: var(--on-field); --line: rgba(12, 9, 7, 0.22); }
html[data-theme="ivory"].on-flood .top, html[data-theme="ivory"].on-flood .rail { --accent: #f4d58d; --line: rgba(241, 233, 218, 0.22); }
html.on-flood .top.is-solid { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- the world: fixed behind everything ---------- */
#world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; }
.glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 55% at var(--gx, 70%) 50%, var(--glow), transparent 70%); }
.flood { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--field);
  clip-path: circle(calc(var(--flood, 0) * 115%) at 50% var(--fy, 50%)); }
html[data-tier="still"] #world, html[data-tier="video"] #world { display: none; }
/* video level: the pre-rendered story, scrubbed by scroll; the stills show until its first frame is ready */
.story-video { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; object-fit: cover; display: none; }
html[data-tier="video"].video-on .story-video { display: block; }
html[data-tier="video"].video-on .still { display: none; }

/* ---------- story acts: scroll spacers; their screens are fixed and hand over on one clock ---------- */
main { position: relative; }
.act { position: relative; height: var(--len, 210vh); }
/* hidden acts stay focusable (opacity only): tabbing into one scrolls it on screen (landing.js) */
.act-pin { position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.act-back { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.act.is-on .act-pin a, .act.is-on .act-pin button, .act.is-on .act-pin input, .act.is-on .act-pin label, .act.is-on .act-pin .stage { pointer-events: auto; }
.act-copy { position: absolute; z-index: 3; opacity: var(--vis, 1); transform: translate3d(0, calc(var(--dir, 1) * (1 - var(--vis, 1)) * 30px), 0); will-change: opacity, transform; }
.act-copy .display { opacity: 1; }
.stage { position: absolute; z-index: 2; touch-action: pan-y; cursor: grab; }
.stage.is-drag { cursor: grabbing; }
.still { position: absolute; z-index: 1; display: none; opacity: var(--vis, 1); pointer-events: none; object-fit: contain; transform: scale(calc(0.94 + 0.06 * var(--vis, 1))); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45)); }
html[data-tier="still"] .still, html[data-tier="video"] .still { display: block; }
html[data-tier="still"] .stage, html[data-tier="video"] .stage { cursor: default; }
.hint { font-size: 0.84rem; color: var(--ink-dim); display: flex; align-items: center; gap: 10px; }
.hint button { font: inherit; color: var(--accent); background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
html[data-tier="still"] .hint, html[data-tier="video"] .hint { display: none; }

/* act 1 · ring: asymmetric split; a vertical running line on the left edge instead of background type */
.run { position: absolute; z-index: 3; left: calc(var(--pad) * 0.5); top: 50%; margin: 0; display: flex; align-items: center; gap: 14px; transform: translate(-50%, -50%) rotate(-90deg) translateY(50%);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; opacity: calc(1 - var(--sink, 0)); }
.run i { width: 28px; height: 1px; background: var(--line); }
.hero .act-copy { left: calc(var(--pad) + 28px); top: calc(var(--top) + 6vh); width: min(54vw, 940px); }
.hero .display { font-size: clamp(3rem, 6.8vw, 8.6rem); }
.hero .stage { right: 0; top: var(--top); width: 50vw; height: 64vh; }
.hero .still { right: 6vw; top: 18vh; width: 40vw; height: 56vh; }
.rates { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.4fr; border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums; opacity: calc(1 - var(--sink, 0)); background: linear-gradient(transparent, var(--ground-glass)); }
.rates > div { padding: 16px var(--pad) 18px; border-right: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; }
.rates > div:last-child { border-right: 0; display: flex; align-items: center; }
.rates dt { font-size: 0.86rem; color: var(--ink-dim); grid-row: span 2; }
.rates dd { margin: 0; font-size: 1.5rem; font-weight: 400; font-variation-settings: "wdth" 112; }
.rates .mv { font-size: 0.84rem; }
.mv[data-dir="up"] { color: var(--accent); }
.mv[data-dir="down"] { color: var(--ink-dim); }
.rates .when dd { font-size: 0.82rem; color: var(--ink-dim); }
.hero .hint { position: absolute; z-index: 3; right: var(--pad); bottom: 160px; opacity: var(--vis, 1); max-width: 30ch; text-align: right; flex-wrap: wrap; justify-content: flex-end; }
.cue { position: absolute; z-index: 3; right: var(--pad); bottom: 104px; margin: 0; display: flex; align-items: center; gap: 12px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); opacity: calc(1 - var(--sink, 0) * 3); }
.cue i { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* act 2 · chain: drapes across the full width; one huge line of type under it, the proof marks on the right */
.act-chain .stage { left: 0; right: 0; top: var(--top); height: 52vh; }
.act-chain .still { left: 8vw; right: 8vw; top: 12vh; width: 84vw; height: 50vh; }
.act-chain .act-copy:not(.chain-side) { left: var(--pad); bottom: 7vh; width: 62vw; }
.act-chain .display { font-size: clamp(2.8rem, 7.4vw, 9.4rem); text-wrap: initial; }
.chain-side { right: var(--pad); bottom: 7vh; width: min(28vw, 460px); }
.chain-side .lede { margin: 0; }
.marks { display: flex; gap: 0; margin-top: 26px; border-top: 1px solid var(--line); }
.marks span { flex: 1; padding: 14px 14px 0 0; font-size: 0.8rem; color: var(--ink-dim); }
.marks b { display: block; font-size: 1.6rem; font-weight: 300; line-height: 1.1; color: var(--ink); font-variation-settings: "wdth" 118; }

/* act 3 · bangle: radial. The collections fly out of the bangle and circle it */
.act-bangle .stage { left: 36vw; right: 6vw; top: 14vh; bottom: 12vh; }
.act-bangle .still { left: 62%; top: 52%; width: 44vh; height: 44vh; transform: translate(-50%, -50%); }
.orbit { position: absolute; z-index: 3; left: 62%; top: 52%; width: 0; height: 0; }
.orbit button { position: absolute; left: 0; top: 0; --a: calc(var(--i) * 51.43deg - 90deg + var(--rot, 0deg));
  transform: translate(calc(cos(var(--a)) * var(--rx, 24vw) * var(--spread, 1)), calc(sin(var(--a)) * var(--ry, 34vh) * var(--spread, 1))) translate(-50%, -50%);
  opacity: var(--spread, 1); display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; white-space: nowrap; cursor: pointer;
  font: 300 clamp(1rem, 0.8rem + 0.6vw, 1.45rem)/1 var(--font); font-variation-settings: "wdth" 118; color: var(--ink-dim);
  background: none; border: 0; box-shadow: inset 0 -1px 0 transparent; transition: color 300ms var(--ease), box-shadow 400ms var(--ease), font-variation-settings 500ms var(--ease); }
.orbit button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-ink); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease), transform 400ms var(--ease); }
.orbit button:hover, .orbit button:focus-visible { color: var(--ink); }
.orbit button:hover::before { box-shadow: inset 0 0 0 1px var(--accent); }
.orbit button[aria-pressed="true"] { color: var(--accent); font-variation-settings: "wdth" 125, "wght" 420; box-shadow: inset 0 -1px 0 var(--accent); }
.orbit button[aria-pressed="true"]::before { background: var(--accent); box-shadow: 0 0 0 4px var(--glow); transform: scale(1.2); }
.orbit button:active { transform: translate(calc(cos(var(--a)) * var(--rx, 24vw) * var(--spread, 1)), calc(sin(var(--a)) * var(--ry, 34vh) * var(--spread, 1))) translate(-50%, -50%) scale(0.97); }
.showing { left: 62%; bottom: 5vh; transform: translateX(-50%); margin: 0; display: flex; align-items: baseline; gap: 14px; white-space: nowrap; font-size: 0.95rem; color: var(--ink-dim); opacity: var(--spread, 1); }
.showing span { color: var(--ink); font-size: 1.1rem; }
.showing b { font-weight: 400; font-variant-numeric: tabular-nums; }
.showing a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); text-decoration: none; }
.showing svg { width: 18px; height: 18px; transition: transform 400ms var(--ease); }
.showing a:hover svg { transform: translateX(4px); }
.still.swap { opacity: 0 !important; transition: opacity 250ms var(--ease); }
.act-bangle .act-copy:not(.side):not(.showing) { left: var(--pad); bottom: 8vh; width: min(30vw, 520px); }
.act-bangle .display { font-size: clamp(2.2rem, 4.4vw, 5.4rem); }
.act-bangle .side { left: var(--pad); top: calc(var(--top) + 5vh); width: min(22vw, 340px); font-size: 0.95rem; color: var(--ink-dim); margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.act-bangle .side b { color: var(--ink); font-weight: 500; }

/* act 4 · coin: the screen floods gold from the point the bangle collapsed into; the coin is struck in the middle */
.act-coin { --ink: var(--on-field); --ink-dim: var(--on-field-dim); --accent: var(--on-field); --line: rgba(12, 9, 7, 0.25); color: var(--on-field); }
html[data-theme="ivory"] .act-coin { --accent: #f4d58d; --line: rgba(241, 233, 218, 0.22); }
.act-coin .stage { left: 30vw; right: 30vw; top: 18vh; bottom: 14vh; }
.act-coin .still { left: 50%; top: 50%; width: 50vh; height: 50vh; transform: translate(-50%, -50%); }
.act-coin .act-copy:not(.weights) { left: var(--pad); top: calc(var(--top) + 5vh); width: min(32vw, 540px); }
.act-coin .display { font-size: clamp(2.2rem, 4.4vw, 5.4rem); }
.weights { right: var(--pad); top: calc(var(--top) + 5vh); bottom: 7vh; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.weights fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.weights legend { font-size: 0.86rem; color: var(--ink-dim); margin-bottom: 8px; text-align: right; width: 100%; }
.weights label { display: flex; justify-content: flex-end; align-items: baseline; gap: 18px; cursor: pointer; padding: 2px 0; }
.weights input { position: absolute; opacity: 0; }
.weights .g { font-size: clamp(2.2rem, 5vw, 5.4rem); font-weight: 200; line-height: 1; font-variation-settings: "wdth" 125; color: var(--ink); opacity: 0.34; transition: opacity 300ms var(--ease), font-variation-settings 500ms var(--ease); }
.weights input:checked + .g, .weights label:hover .g { opacity: 1; font-variation-settings: "wdth" 125, "wght" 420; }
.weights input:focus-visible + .g { outline: 2px solid currentColor; outline-offset: 4px; }
.price { text-align: right; font-variant-numeric: tabular-nums; margin: 0; }
.price b { display: block; font-size: clamp(1.6rem, 2.6vw, 2.6rem); font-weight: 400; font-variation-settings: "wdth" 112; }
.price small { font-size: 0.84rem; color: var(--ink-dim); display: block; max-width: 30ch; margin-left: auto; }

/* act 5 · necklace: sticky narrative column beside the moving stage; eleven months shown as eleven marks */
.act-neck .stage { left: 0; top: 0; width: 62vw; height: 100%; }
.act-neck .still { left: 6vw; top: 14vh; width: 50vw; height: 72vh; }
.act-neck .act-copy { right: var(--pad); top: calc(var(--top) + 5vh); width: min(34vw, 580px); }
.act-neck .display { font-size: clamp(2.2rem, 4.4vw, 5.4rem); }
.calc { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.calc label { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--ink-dim); }
.calc output { color: var(--ink); font-variant-numeric: tabular-nums; }
.calc input[type="range"] { width: 100%; accent-color: var(--gold); height: 44px; margin: 0; }
.months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.months li { height: 22px; background: linear-gradient(to top, var(--gold) calc(var(--m, 0.3) * 100%), var(--line) 0); transition: background 300ms var(--ease); }
.calc .sum { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; font-variant-numeric: tabular-nums; }
.calc .sum b { display: block; font-size: 1.9rem; font-weight: 300; font-variation-settings: "wdth" 118; color: var(--accent); }
.calc .sum span { font-size: 0.84rem; color: var(--ink-dim); }
.calc .note { font-size: 0.8rem; color: var(--ink-dim); margin: 0; }

/* ending · the initials are written in dust across the top; the two actions rise as full-width halves */
.end-head { left: var(--pad); top: calc(var(--top) + 5vh); width: min(40vw, 640px); }
.end-head .display { font-size: clamp(2.6rem, 5.6vw, 6.8rem); }
.end-line { right: var(--pad); top: calc(var(--top) + 5vh); margin: 0; text-align: right; font-size: 0.92rem; line-height: 1.7; color: var(--ink-dim); }
.act-end .still { left: 50%; top: calc(var(--top) + 2vh); width: 46vh; height: 40vh; transform: translateX(-50%); }
.finale { left: 0; right: 0; bottom: 0; height: 40vh; display: grid; grid-template-columns: 1fr 1fr; transform: translate3d(0, calc((1 - var(--rise, 1)) * 100%), 0); opacity: 1; }
.finale a { position: relative; display: grid; grid-template-rows: auto 1fr auto; align-items: end; padding: var(--pad); text-decoration: none; overflow: hidden; transition: background-color 600ms var(--ease); }
.finale .call { background: var(--call-bg); color: var(--call-ink); }
.finale .join { background: var(--join-bg); color: var(--join-ink); }
.finale .call:hover { filter: brightness(1.06); }
.finale .join:hover { filter: brightness(1.04); }
.finale small { font-size: 0.92rem; max-width: 40ch; display: block; }
.finale strong { display: block; font-weight: 300; font-size: clamp(2.8rem, 6vw, 7.6rem); line-height: 0.9; letter-spacing: -0.04em; font-variation-settings: "wdth" 120; transition: font-variation-settings 700ms var(--ease); }
.finale a:hover strong { font-variation-settings: "wdth" 125, "wght" 420; }
.finale .foot { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: 18px; font-variant-numeric: tabular-nums; }
.finale .foot span { font-size: clamp(1.1rem, 1.6vw, 1.6rem); font-variation-settings: "wdth" 112; }
.finale svg { width: clamp(40px, 4vw, 64px); height: auto; transition: transform 700ms var(--ease); }
.finale a:hover svg { transform: translate(8px, -8px); }

/* after the story: offers and footer slide up over the stage like a curtain */
.offers { position: relative; z-index: 4; background: var(--ground); border-top: 1px solid var(--line); display: grid; grid-template-columns: 22vw repeat(3, 1fr); padding-top: clamp(72px, 9vw, 140px); }
/* the cards sit inside a display: contents list, so they are grid items too and are styled directly */
.offers > .rise, .offer { padding: 0 var(--pad) clamp(56px, 6vw, 96px); border-right: 1px solid var(--line); }
.offer:last-child { border-right: 0; }
.offers h2 { margin: 0; font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.6rem); line-height: 1; font-variation-settings: "wdth" 118; }
.offers h2 + p { color: var(--ink-dim); font-size: 0.9rem; margin: 14px 0 0; }
.offer b { display: block; font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-weight: 300; line-height: 1.1; color: var(--accent); font-variation-settings: "wdth" 118; }
.offer h3 { margin: 10px 0 8px; font-size: 1rem; font-weight: 500; }
.offer p { margin: 0; font-size: 0.86rem; color: var(--ink-dim); }
.offer .ends { margin-top: 14px; font-size: 0.8rem; color: var(--accent); }
.foot-main { position: relative; z-index: 4; background: var(--ground); padding: 72px var(--pad) 0; overflow: hidden; border-top: 1px solid var(--line); }
.cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; font-size: 0.94rem; }
.cols h2 { font-size: 0.9rem; font-weight: 500; color: var(--accent); margin: 0 0 14px; }
.cols p, .cols ul { margin: 0; color: var(--ink-dim); }
.cols ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.cols a { text-decoration: none; display: inline-block; padding: 4px 0; }
.cols a:hover { color: var(--accent); }
.cols .t { color: var(--ink); font-variant-numeric: tabular-nums; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-dim); }
.legal nav { display: flex; gap: 22px; flex-wrap: wrap; }
.legal a { text-decoration: none; }
.legal a:hover { color: var(--accent); }
/* fixed bits: motion switch, cookie line, phone action bar */
/* the animation switch sits at the right end of the chapter rail */
.motion { position: fixed; z-index: 21; right: var(--pad); top: var(--head); height: var(--railh); display: flex; align-items: center; gap: 10px; padding: 0 0 0 14px; font: 500 0.8rem var(--font); color: var(--ink-dim); background: none; border: 0; border-left: 1px solid var(--line); cursor: pointer; min-width: 44px; }
.motion:hover { color: var(--ink); }
html.on-flood .motion { --ink: var(--on-field); --ink-dim: var(--on-field-dim); --line: rgba(12, 9, 7, 0.22); }
.motion i { width: 30px; height: 16px; border-radius: 8px; background: var(--line); position: relative; transition: background-color 300ms var(--ease); }
.motion i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transition: transform 400ms var(--ease); }
.motion[aria-pressed="true"] i { background: var(--gold); }
.motion[aria-pressed="true"] i::after { transform: translateX(14px); background: #0c0907; }
.cookie { position: fixed; z-index: 21; right: var(--pad); bottom: 18px; max-width: 440px; display: flex; gap: 16px; align-items: center; padding: 10px 10px 10px 16px; font-size: 0.82rem; color: var(--ink-dim); background: var(--ground-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.cookie button { font: 500 0.84rem var(--font); background: var(--ink); color: var(--ground); border: 0; min-height: 40px; padding: 0 14px; cursor: pointer; }
.cookie[hidden] { display: none; }
.bar { display: none; }
.rise { opacity: 0; transform: translateY(40px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* ---------- still level: a plain page, one screen per act, no fixed stage ---------- */
html[data-tier="still"] .act { height: auto; }
html[data-tier="still"] .act-pin { position: relative; height: 100vh; min-height: 680px; pointer-events: auto; }
html[data-tier="still"] .act-pin * { pointer-events: auto; }
html[data-tier="still"] .act-back { position: absolute; }
html[data-tier="still"] .act-coin { background: var(--field); }
html[data-tier="still"] .flood { display: none; }
html[data-tier="still"] .act-end .act-pin { height: auto; min-height: 100vh; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 900px) {
  :root { --head: 58px; --railh: 30px; }
  .nav, .top-rate { display: none; }
  .top { grid-template-columns: 1fr auto; }
  .top .btn { min-height: 40px; }
  .rail a span { display: none; }
  .rail a { justify-content: center; }
  .act-copy { left: var(--pad) !important; right: var(--pad) !important; top: auto !important; bottom: calc(76px + 3vh) !important; width: auto !important; }
  .display, .hero .display, .act-chain .display { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .act-bangle .display, .act-coin .display, .act-neck .display { font-size: clamp(2rem, 8.6vw, 2.9rem); }
  .lede { font-size: 1rem; margin-top: 12px; }
  .actions { display: none; }
  .stage { left: 0 !important; right: 0 !important; top: var(--top) !important; bottom: auto !important; width: 100% !important; height: 42svh !important; }
  .still { left: 50% !important; right: auto !important; top: calc(var(--top) + 2svh) !important; width: 78vw !important; height: 38svh !important; transform: translateX(-50%) !important; }
  .run { display: none; }
  .rates { position: absolute; top: calc(var(--top) + 44svh); bottom: auto; grid-template-columns: repeat(3, 1fr); background: none; }
  .rates > div { padding: 10px var(--pad); display: block; }
  .rates > div.when, .rates .mv { display: none; }
  .rates dd { font-size: 1.05rem; }
  .hero .hint, .cue { display: none; }
  .chain-side { display: none; }
  .act-bangle .side { display: none; }
  .orbit { top: calc(var(--top) + 42svh); left: 0; right: 0; width: auto; height: auto; display: flex; gap: 4px; overflow-x: auto; padding: 0 var(--pad); scrollbar-width: none; }
  .orbit button, .orbit button:active { position: static; transform: none; opacity: var(--vis, 1); font-size: 0.95rem; padding: 0 12px; flex: none; }
  .hero .step { display: none; }
  .showing { display: none; }
  .act-bangle .lede, .act-coin .lede, .act-neck .lede { display: none; }
  .weights { left: var(--pad) !important; right: var(--pad) !important; top: calc(var(--top) + 43svh) !important; bottom: auto !important; align-items: flex-start; justify-content: flex-start; gap: 8px; }
  .weights fieldset { grid-auto-flow: column; gap: 14px; }
  .weights legend { text-align: left; }
  .weights .g { font-size: 1.9rem; white-space: nowrap; }
  .price { text-align: left; }
  .price b { font-size: 1.4rem; white-space: nowrap; }
  .price small { display: none; }
  .act-coin .act-copy:not(.weights) { bottom: calc(76px + 2vh) !important; }
  .calc { margin-top: 12px; padding-top: 10px; gap: 6px; }
  .calc .sum b { font-size: 1.4rem; }
  .months li { height: 12px; }
  .end-head { top: calc(var(--top) + 3svh) !important; bottom: auto !important; }
  .end-head .display { font-size: clamp(2rem, 9vw, 2.8rem); }
  .end-line { display: none; }
  .finale { left: 0 !important; right: 0 !important; bottom: 60px !important; top: auto !important; height: auto; grid-template-columns: 1fr; }
  .finale a { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; min-height: 0; height: 16svh; padding: 14px var(--pad); }
  .finale .foot { margin-top: 6px; }
  .finale svg { width: 32px; }
  .finale small { display: none; }
  .finale strong { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .offers { grid-template-columns: 1fr; padding-top: 64px; }
  .offers > .rise, .offer { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px var(--pad); }
  .offers > .rise { padding-top: 0; }
  .cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-main { padding-bottom: 76px; }
  .bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; z-index: 22; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--ground); }
  .bar a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; font-weight: 500; text-decoration: none; }
  .bar .c { background: var(--call-bg); color: var(--call-ink); }
  .bar .j { background: var(--join-bg); color: var(--join-ink); }
  .bar svg { width: 18px; height: 18px; }
  .rail ol { padding-right: calc(var(--pad) + 56px); }
  .motion { padding-left: 12px; }
  .motion span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cookie { left: var(--pad); right: var(--pad); bottom: 72px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .act-copy, .rates, .weights, .side, .still, .display .w > span, .orbit button { opacity: 1 !important; }
  .act-copy, .rates, .weights, .side, .display .w > span { transform: none !important; }
  .cue i { animation: none; }
  * { scroll-behavior: auto !important; }
}