/* ==========================================================================
   TIPSTER  -  the royal treasury of Discord
   Art direction: royal ledger. Ink violet night, champagne-gold hairlines,
   Fraunces display serif, generous air, no noise.
   ========================================================================== */

:root {
  --ink:      #070510;
  --ink-2:    #0c0918;
  --panel:    rgba(236,229,255,.032);
  --panel-2:  rgba(236,229,255,.06);
  --line:     rgba(200,186,240,.13);
  --line-2:   rgba(200,186,240,.26);

  --violet:   #7c5cff;
  --lilac:    #cabdf5;
  --glow:     rgba(124,92,255,.5);

  --gold:     #e3c98f;
  --gold-hi:  #f4e3b2;
  --gold-lo:  #c2a35b;
  --gold-dim: rgba(227,201,143,.5);

  --white:    #f4f1ff;
  --text:     #e6e1f7;
  --mut:      #9d93c6;
  --mut-2:    #6e6694;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", system-ui, sans-serif;
  --ease:  cubic-bezier(.22,.61,.36,1);
  --w: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(124,92,255,.4); color: var(--white); }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
code { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }

.ic { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; flex: none; }

.hair { display: inline-block; height: 1px; width: 3.2rem; flex: none;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }

/* ---- ambient veil ---- */
.veil { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90rem 50rem at 50% -12%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(70rem 45rem at 85% 115%, rgba(227,201,143,.06), transparent 55%),
    radial-gradient(60rem 45rem at 8% 60%, rgba(124,92,255,.07), transparent 55%),
    var(--ink); }

/* ---- top progress rail ---- */
.rail { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90; }
.rail span { display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  box-shadow: 0 0 14px var(--glow); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; font-size: .95rem;
  padding: .78em 1.35em; border-radius: 999px; border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, border-color .35s; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-lg { padding: .95em 1.7em; font-size: 1rem; }
.btn-gold { color: #241906;
  background: linear-gradient(178deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  box-shadow: 0 12px 34px rgba(227,201,143,.22), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-gold:hover { transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(227,201,143,.34), inset 0 1px 0 rgba(255,255,255,.65); }
.btn-line { color: var(--text); border-color: var(--line-2); background: transparent; }
.btn-line:hover { transform: translateY(-2px); border-color: var(--gold-dim); color: var(--white); }
/* faucet accent - an outlined button that still reads as gold */
.btn-faucet { color: var(--gold-hi); border-color: var(--gold-dim);
  background: linear-gradient(180deg, rgba(227,201,143,.10), rgba(227,201,143,.02)); }
.btn-faucet:hover { color: #fff7e4; border-color: var(--gold);
  background: linear-gradient(180deg, rgba(227,201,143,.18), rgba(227,201,143,.05)); }
/* tertiary - text only, for the "keep scrolling" action */
.btn-ghost { color: var(--mut); border-color: transparent; background: none; padding-inline: .9em; }
.btn-ghost:hover { transform: translateY(-2px); color: var(--white); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav { position: fixed; z-index: 80; inset: 0 0 auto 0; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.1rem, 4vw, 2.6rem);
  border-bottom: 1px solid transparent; transition: all .4s var(--ease); }
.nav.on { background: rgba(7,5,16,.75); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line); padding-block: .65rem; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 12px var(--glow)); }
.brand-word { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--white); }
.nav-links { display: flex; gap: clamp(1rem, 2.6vw, 2.2rem); }
.nav-links a { font-size: .88rem; letter-spacing: .04em; color: var(--mut); transition: color .25s; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -6px; height: 1px;
  background: var(--gold); transition: left .3s var(--ease), right .3s var(--ease); }
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { left: 0; right: 0; }
.nav-cta { font-size: .88rem; padding: .62em 1.15em; }
@media (max-width: 840px) { .nav-links { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  text-align: center; padding: 7.5rem 1.4rem 5rem; }
.hero-frame { position: absolute; pointer-events: none;
  inset: 5.6rem clamp(14px, 2.4vw, 28px) clamp(14px, 2.4vw, 28px);
  border: 1px solid rgba(227,201,143,.14); }
.corner { position: absolute; width: 22px; height: 22px; border: 1px solid var(--gold-dim); }
.c-tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.c-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.c-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.c-br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.hero-body { max-width: 880px; }
.hero-over { display: flex; align-items: center; justify-content: center; gap: 1rem;
  font-size: .78rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 2.4rem; }

.hero-coin { position: relative; width: clamp(160px, 24vw, 240px); margin: 0 auto .6rem; }
.hero-coin img { width: 100%; position: relative; z-index: 1;
  filter: drop-shadow(0 22px 50px var(--glow));
  animation: coin-float 6.5s ease-in-out infinite; }
.coin-halo { position: absolute; inset: -34%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(124,92,255,.3), transparent 62%); }
@keyframes coin-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }

.hero-word { font-size: clamp(4rem, 14vw, 9.6rem); font-weight: 550; color: var(--white);
  font-variation-settings: "opsz" 144;
  background: linear-gradient(180deg, #fff 12%, #d8cdf6 58%, var(--gold) 135%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1.2rem; }
.hero-tag { font-size: clamp(1.05rem, 2.3vw, 1.32rem); color: var(--mut); max-width: 46ch;
  margin: 0 auto 2.4rem; }
.hero-tag em { font-family: var(--serif); font-style: italic; color: var(--lilac); font-size: 1.08em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

.hero-proof { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.1rem; margin-top: 2.8rem; color: var(--mut-2); font-size: .86rem; }
.hero-proof li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-proof .ic { color: var(--gold); }
.proof-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-dim); padding: 0 !important; }

.hero-cue { position: absolute; left: 50%; bottom: 1.9rem; transform: translateX(-50%);
  width: 24px; height: 40px; border: 1px solid var(--line-2); border-radius: 99px; }
.hero-cue span { position: absolute; top: 7px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px;
  border-radius: 2px; background: var(--gold); animation: cue 1.9s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(15px); } }

/* ==========================================================================
   Chain banner
   ========================================================================== */
.banner { border-block: 1px solid var(--line); padding: 1.7rem 0;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,.05) 50%, transparent); }
.banner-mask { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.banner-track { display: inline-flex; align-items: center; gap: 2.2rem; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 2rem); color: var(--lilac);
  animation: slide 30s linear infinite; }
.dia { width: 7px; height: 7px; flex: none; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo)); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   Coin journey  (scrollytelling)
   ========================================================================== */
.journey { position: relative; height: 280vh; }
.journey-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.journey-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#jPathGhost { fill: none; stroke: rgba(200,186,240,.17); stroke-width: 1.5; stroke-dasharray: 2 8; }
#jPath { fill: none; stroke: var(--gold-dim); stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(227,201,143,.35)); }

/* terminus seal - lights up when the journey completes */
#jEnd { fill: none; stroke: rgba(227,201,143,.0); stroke-width: 1.5;
  transition: stroke .6s var(--ease), r .6s var(--ease); }
#jEndCore { fill: rgba(227,201,143,0); transition: fill .6s var(--ease); }
.journey-pin.done #jEnd { stroke: rgba(227,201,143,.8); }
.journey-pin.done #jEndCore { fill: var(--gold); }
.journey-pin.done .orb-sphere { box-shadow:
  0 18px 54px rgba(124,92,255,.6),
  0 0 40px rgba(227,201,143,.25),
  inset -8px -10px 22px rgba(10,6,30,.75),
  inset 4px 5px 14px rgba(255,255,255,.16); }

/* The traveler: a small 3D orb - sphere + moving glint. */
.j-orb { position: absolute; left: 0; top: 0; width: clamp(38px, 4vw, 54px); aspect-ratio: 1;
  margin-left: calc(clamp(38px, 4vw, 54px) / -2); margin-top: calc(clamp(38px, 4vw, 54px) / -2);
  will-change: transform; z-index: 3; }
.orb-sphere { position: absolute; inset: 8%; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.25) 12%, transparent 30%),
    radial-gradient(circle at 34% 30%, #a68cff 0%, #7c5cff 38%, #4a2fd6 68%, #241455 92%);
  box-shadow:
    0 18px 44px rgba(124,92,255,.45),
    inset -8px -10px 22px rgba(10,6,30,.75),
    inset 4px 5px 14px rgba(255,255,255,.16);
  animation: orb-breathe 4.5s ease-in-out infinite; }
.orb-glint { position: absolute; inset: 8%; border-radius: 50%; overflow: hidden; }
.orb-glint::after { content: ""; position: absolute; top: -30%; left: -60%; width: 55%; height: 160%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: orb-glint 3.4s ease-in-out infinite; }
@keyframes orb-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes orb-glint { 0%, 55% { left: -60%; } 85%, 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .orb-sphere, .orb-glint::after { animation: none !important; } }

/* Chapter panels are vertically CENTERED in the stage so they can never clip
   on short viewports; only the left/right side alternates per chapter. */
.j-chapter { position: absolute; z-index: 4; top: 50%; max-width: 23rem; opacity: 0;
  transform: translateY(calc(-50% + 26px));
  padding: 1.5rem 1.7rem; border: 1px solid var(--line);
  background: rgba(9,7,20,.55); backdrop-filter: blur(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.j-chapter::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--gold-dim), transparent 80%); }
.j-chapter.on { opacity: 1; transform: translateY(-50%); }
.j-num { font-size: .74rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.j-num::after { content: ""; display: block; width: 3.4rem; height: 1px; margin-top: .7rem;
  background: linear-gradient(90deg, var(--gold-dim), transparent); }
.j-chapter h3 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--white); margin-bottom: .8rem; }
.j-copy { color: var(--mut); font-size: .98rem; }

/* chapters alternate sides, opposite the traveler's bend */
.j-chapter[data-ch="0"] { right: clamp(1.2rem, 7vw, 7rem); }
.j-chapter[data-ch="1"] { left: clamp(1.2rem, 7vw, 7rem); }
.j-chapter[data-ch="2"] { right: clamp(1.2rem, 7vw, 7rem); }
.j-chapter[data-ch="3"] { left: clamp(1.2rem, 7vw, 7rem); }

.j-progress { position: absolute; right: clamp(.9rem, 2.4vw, 2rem); top: 50%; transform: translateY(-50%);
  display: grid; gap: .85rem; z-index: 4; }
.j-progress span { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-2);
  transition: background .4s, border-color .4s, box-shadow .4s; }
.j-progress span.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px var(--gold-dim); }

@media (max-width: 760px) {
  .journey { height: 260vh; }
  .j-chapter { left: 50% !important; right: auto !important; transform: translate(-50%, 26px);
    text-align: center; top: auto !important; bottom: 12%; width: min(88vw, 21.5rem); }
  .j-chapter.on { transform: translate(-50%, 0); }
  .j-num::after { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
}

/* ==========================================================================
   Counts
   ========================================================================== */
.counts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.4rem, 5vw, 3.6rem); padding: clamp(3.6rem, 8vw, 6rem) 1.4rem;
  border-block: 1px solid var(--line); }
.count { text-align: center; }
.count-n { display: block; font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--gold); line-height: 1; }
.count-l { display: block; margin-top: .45rem; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mut-2); }
.count-sep { width: 1px; height: 3.2rem; background: linear-gradient(180deg, transparent, var(--line-2), transparent); }
@media (max-width: 700px) { .count-sep { display: none; } }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.sec-head { text-align: center; max-width: 720px; margin: 0 auto clamp(3rem, 7vw, 5rem); padding: 0 1.2rem; }
.kicker { font-size: .76rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.1rem; }
.sec-head h2 { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--white); margin-bottom: 1rem; }
.sub { color: var(--mut); font-size: 1.05rem; }
.sub code { color: var(--lilac); }

/* ==========================================================================
   Regalia
   ========================================================================== */
.regalia { max-width: var(--w); margin: 0 auto; padding: clamp(5rem, 11vw, 8.5rem) clamp(1.1rem, 4vw, 2rem); }
.reg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.reg { position: relative; padding: 2.2rem 1.9rem 2.4rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease); }
.reg:hover { background: var(--panel-2); }
.reg::after { content: ""; position: absolute; left: 0; right: 100%; top: -1px; height: 1px;
  background: var(--gold); transition: right .5s var(--ease); }
.reg:hover::after { right: 0; }
.reg-no { font-family: var(--serif); font-style: italic; color: var(--mut-2); font-size: .86rem; }
.reg-ic { display: grid; place-items: center; width: 46px; height: 46px; margin: 1.1rem 0 1.2rem;
  color: var(--gold); border: 1px solid var(--line-2); border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, rgba(124,92,255,.22), transparent 70%); font-size: 1.2rem; }
.reg h3 { font-size: 1.38rem; color: var(--white); margin-bottom: .55rem; }
.reg p { color: var(--mut); font-size: .95rem; }
.reg p code { color: var(--lilac); font-size: .9em; }
.reg p a { color: var(--gold); border-bottom: 1px solid var(--gold-dim); transition: color .25s, border-color .25s; }
.reg p a:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }
@media (max-width: 940px) { .reg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reg-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Decrees - the ledger
   ========================================================================== */
.decrees { max-width: 880px; margin: 0 auto; padding: clamp(4.5rem, 10vw, 8rem) clamp(1.1rem, 4vw, 2rem); }
.ledger { border: 1px solid var(--line-2); padding: clamp(1.6rem, 4vw, 3rem);
  position: relative; background: linear-gradient(180deg, rgba(18,14,34,.55), rgba(9,7,20,.65)); }
.ledger::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line);
  pointer-events: none; }
.ledger-title { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-bottom: 1.8rem; }
.ledger-crest img { width: 58px; display: block; filter: drop-shadow(0 6px 18px var(--glow)); }
.ledger-rows p { display: flex; align-items: baseline; gap: .8rem; padding: .68rem 0; }
.ledger-rows code { color: var(--gold); font-size: .95rem; white-space: nowrap; }
.lead { flex: 1; border-bottom: 1px dotted rgba(200,186,240,.22); transform: translateY(-.32em); min-width: 2rem; }
.desc { color: var(--mut); font-size: .92rem; text-align: right; }
@media (max-width: 560px) {
  .ledger-rows p { flex-wrap: wrap; gap: .2rem .8rem; }
  .lead { display: none; }
  .desc { text-align: left; width: 100%; padding-left: .1rem; }
}

/* ==========================================================================
   Mint - medallions
   ========================================================================== */
.mint { max-width: var(--w); margin: 0 auto; padding: clamp(4.5rem, 10vw, 8rem) clamp(1.1rem, 4vw, 2rem); }
/* eight assets - four across reads as two even rows */
.medals { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); justify-items: center; }
.medal { text-align: center; }
.medal-coin { display: grid; place-items: center; width: clamp(84px, 9.5vw, 112px); aspect-ratio: 1;
  border-radius: 50%; font-family: var(--serif); font-weight: 600; letter-spacing: .02em;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem); color: var(--white);
  border: 1px solid rgba(227,201,143,.4);
  background:
    radial-gradient(100% 100% at 32% 24%, rgba(124,92,255,.30), rgba(124,92,255,.04) 58%),
    var(--ink-2);
  box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6px rgba(227,201,143,.22), 0 14px 34px rgba(0,0,0,.45);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.medal-coin img { width: 58%; height: 58%; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.medal:hover .medal-coin { transform: translateY(-6px) rotate(-3deg); border-color: var(--gold);
  box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6px rgba(227,201,143,.35), 0 22px 44px rgba(0,0,0,.55), 0 0 30px rgba(227,201,143,.12); }
.medal figcaption { margin-top: .85rem; font-size: .88rem; color: var(--text); }
.medal figcaption em { display: block; font-style: normal; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut-2); margin-top: .18rem; }
@media (max-width: 900px) { .medals { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .medals { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Wellspring - the faucet call to action
   ========================================================================== */
.wellspring { border-block: 1px solid var(--line);
  padding: clamp(4rem, 9vw, 6.5rem) clamp(1.1rem, 4vw, 2rem);
  background:
    radial-gradient(60rem 26rem at 50% 0%, rgba(124,92,255,.11), transparent 70%),
    linear-gradient(180deg, rgba(227,201,143,.035), transparent 60%); }
.well-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.well-drop { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 1.5rem;
  color: var(--gold); border: 1px solid var(--line-2); border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, rgba(124,92,255,.24), transparent 70%);
  box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.well-drop .ic { width: 1.5rem; height: 1.5rem; }
.wellspring h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); color: var(--white); margin-bottom: 1rem; }
.wellspring .sub { margin-bottom: 2.1rem; }
.well-note { margin-top: 1.5rem; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mut-2); }

/* ==========================================================================
   Invitation
   ========================================================================== */
.invite { padding: clamp(4.5rem, 10vw, 8rem) clamp(1.1rem, 4vw, 2rem) clamp(6rem, 12vw, 9rem); }
.card { max-width: 720px; margin: 0 auto; border: 1px solid rgba(227,201,143,.35); padding: 10px;
  background: linear-gradient(180deg, rgba(124,92,255,.10), rgba(9,7,20,.4)); }
.card-inner { border: 1px solid var(--line-2); text-align: center;
  padding: clamp(2.6rem, 6vw, 4.2rem) clamp(1.4rem, 5vw, 3rem); }
.card-crest { width: 110px; margin: 0 auto 1.4rem; display: block; filter: drop-shadow(0 12px 30px var(--glow)); }
.card-inner h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); color: var(--white); margin-bottom: .9rem; }
.card-inner .sub { margin-bottom: 2rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { text-align: center; padding: 3.4rem 1.4rem 4.2rem; border-top: 1px solid var(--line); }
.foot-line { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.foot-line img { width: 40px; }
.foot-brand { font-family: var(--serif); font-size: 1.25rem; color: var(--white); margin-bottom: .9rem; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem 1.7rem; margin-bottom: 1.5rem; font-size: .88rem; }
.foot-links a { color: var(--mut); border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s; }
.foot-links a:hover { color: var(--white); border-bottom-color: var(--gold-dim); }
.foot-note { color: var(--mut); font-size: .9rem; }
.foot-disclaimer { color: var(--mut-2); font-size: .82rem; margin-top: 1.2rem; max-width: 62ch;
  margin-inline: auto; }
.foot-fine { color: var(--mut-2); font-size: .78rem; margin-top: .5rem; max-width: 54ch; margin-inline: auto; }

/* ==========================================================================
   Reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-coin img, .banner-track, .hero-cue span { animation: none !important; }
  .j-chapter { transition: none; }
}

/* ============================ PRELOADER ============================
   Covers the page until fonts, the logo and the hero art are ready, so the
   first paint is the finished design rather than unstyled text jumping into
   place. Two independent retirement paths on purpose:
     1. script.js removes it on window load (the fast, normal path)
     2. the CSS animation below hides it regardless after 4s
   If JS is blocked or throws, (2) still frees the page. It must never trap. */
.preload {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--ink);
  animation: preload-retire .5s ease 4s forwards;
}
.preload.done { animation: none; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }

.preload-inner { display: grid; justify-items: center; gap: 18px; }

.preload-mark {
  width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 0 22px var(--glow));
  animation: preload-breathe 1.9s ease-in-out infinite;
}

/* Indeterminate sweep - honest about not knowing real progress. */
.preload-bar {
  position: relative; display: block;
  width: 160px; height: 2px; overflow: hidden;
  background: var(--line); border-radius: 2px;
}
.preload-bar i {
  position: absolute; inset: 0 auto 0 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: preload-sweep 1.15s ease-in-out infinite;
}

.preload-word {
  margin: 0; font-family: Fraunces, Georgia, serif;
  font-size: .82rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--lilac); opacity: .55;
}

@keyframes preload-breathe { 0%,100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.07); opacity: 1 } }
@keyframes preload-sweep   { 0% { left: -45% } 100% { left: 105% } }
@keyframes preload-retire  { to { opacity: 0; visibility: hidden } }

/* Respect reduced-motion: no pulsing, just a still mark that clears fast. */
@media (prefers-reduced-motion: reduce) {
  .preload-mark, .preload-bar i { animation: none; }
  .preload { animation-delay: .8s; }
}