/* ==========================================================================
   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;
  /* Android Chrome inflates text it judges too small for the viewport. That
     widens the lines the text sits in and pushes the layout past the screen
     edge, which reads as the page being shifted sideways. The behaviour is
     mobile-only, so a desktop browser narrowed to phone width never shows it
     and the layout measures perfectly clean while real phones do not. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
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;
  /* --mx/--my come from the pointer (see script.js); --lift is the hover rise.
     Composed here rather than written inline by JS, so the two cannot clobber
     each other - an inline transform would outrank the :hover rules below. */
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, border-color .35s; }
/* While the pointer is leading the button, follow it closely; the long ease is
   for the settle when it leaves. */
.btn.magnetic { transition-duration: .12s, .35s, .35s, .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 { --lift: -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 { --lift: -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; } }

/* --- burger + mobile menu ---------------------------------------------------
   Under 840px the inline links are hidden, and until now nothing replaced them:
   on a phone the site had no navigation at all. Most visitors arrive from
   Discord on a phone, so this is the primary menu, not a fallback. */
.burger { display: none; position: relative; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  cursor: pointer; transition: border-color .3s var(--ease), background .3s var(--ease); }
.burger:hover { border-color: var(--line-2); }
.burger span { position: absolute; left: 12px; width: 20px; height: 1.5px; border-radius: 2px;
  background: var(--white); transition: transform .38s var(--ease), opacity .22s var(--ease); }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
/* Burger folds into an X. The middle bar fades rather than rotating with the
   others, so the cross lands clean instead of thickening at the centre. */
.burger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 75; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1rem;
  background: rgba(7,5,16,.92); backdrop-filter: blur(22px) saturate(1.3);
  opacity: 0; visibility: hidden; transition: opacity .42s var(--ease), visibility .42s; }
.menu.open { opacity: 1; visibility: visible; }
.menu-links { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.menu-links a, .menu-cta {
  /* Each item carries its index, so one rule staggers the whole list. */
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i) * 55ms); }
.menu.open .menu-links a, .menu.open .menu-cta { opacity: 1; transform: none; }
.menu-links a { font-family: var(--serif); font-size: clamp(1.7rem, 8vw, 2.4rem);
  color: var(--mut); padding: .32em .6em; transition-property: opacity, transform, color; }
.menu-links a:hover, .menu-links a:focus-visible { color: var(--white); }
.menu-cta { margin-top: .8rem; font-size: 1rem; padding: .8em 1.6em; }
/* Closing runs in reverse so the list collapses from the bottom up rather than
   every item vanishing at once. */
.menu:not(.open) .menu-links a, .menu:not(.open) .menu-cta {
  transition-delay: calc((5 - var(--i)) * 28ms); }
body.menu-open { overflow: hidden; }

@media (max-width: 840px) {
  .burger { display: block; }
  /* The header CTA duplicates the one inside the menu on small screens. */
  .nav-cta { display: none; }
}
@media (min-width: 841px) { .menu { 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; }
  .menu, .menu-links a, .menu-cta, .burger span { transition: none !important; }
  .btn { transform: none !important; }
  .menu-links a, .menu-cta { opacity: 1; transform: none; transition-delay: 0s !important; }
  .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; }
}