/* ============================================================
   ZERO TO HERO — GLOBAL STYLESHEET (Phase 1 shell)
   One design system, reused across every page.
   Source of truth: extracted + extended from the homepage
   (formerly landing-page/full-site.html), 2026-07-10.

   Palette + type are the committed ZTH identity — do not
   reinvent per page. Add new components here, not inline.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* brand */
  --zth-blue:   #56b9ff;
  --zth-red:    #ff2e3e;
  --zth-yellow: #ffcf1a;
  --zth-ink:    #0a0a0c;
  --zth-panel:  #131318;
  --zth-panel-2:#1b1b22;
  --zth-line:   rgba(255,255,255,0.10);
  --zth-line-2: rgba(255,255,255,0.18);

  /* text */
  --ink-1: #ffffff;
  --ink-2: rgba(255,255,255,0.78);
  --ink-3: rgba(255,255,255,0.55);

  /* layout */
  --maxw: 1180px;
  --maxw-wide: 1440px;
  --nav-h: 88px;

  /* semantic z-scale — never arbitrary 9999s */
  --z-base: 1;
  --z-raised: 5;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  background: var(--zth-ink);
  color: var(--ink-1);
  font-family: "Sora", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- atmosphere (fixed background) ---------- */
.zth-atmos, .zth-stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.zth-atmos {
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(86,185,255,0.08), transparent 55%),
    radial-gradient(ellipse 100% 90% at 50% 120%, rgba(255,46,62,0.06), transparent 55%);
}
.zth-stars {
  inset: -10%;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 85% 25%, rgba(86,185,255,0.45), transparent),
    radial-gradient(1px 1px at 15% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,46,62,0.35), transparent),
    radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,0.35), transparent);
  background-repeat: repeat;
  background-size: 60% 60%;
  animation: drift 90s linear infinite;
  opacity: 0.6;
}
@keyframes drift { from { transform: translateY(0);} to { transform: translateY(-60px) translateX(30px);} }
@media (prefers-reduced-motion: reduce){ .zth-stars { animation: none; } }

/* ---------- shell ---------- */
main { position: relative; z-index: var(--z-base); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 6vw; }
.wrap-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 4vw; }
section { padding: clamp(4rem, 10vh, 8rem) 0; position: relative; }

/* ---------- typography ---------- */
.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--zth-blue); font-weight: 600; margin-bottom: 1.4rem;
}
h1, h2 {
  font-family: "Dela Gothic One", sans-serif; font-weight: 400;
  line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.7rem); }
h2.h2-sm { font-size: clamp(1.7rem, 3.4vw, 2.9rem); }
h3 { font-family: "Sora"; font-weight: 700; font-size: 1.15rem; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink-2); font-weight: 300; text-wrap: pretty; }
.kicker { margin-top: 1.6rem; font-weight: 600; color: #fff; letter-spacing: 0.02em; }
.accent-blue { color: var(--zth-blue); }
.accent-red { color: var(--zth-red); }
.accent-yellow { color: var(--zth-yellow); }
.center { text-align: center; max-width: 820px; margin: 0 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: "Sora"; font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0.03em; color: var(--zth-ink); background: var(--zth-yellow);
  padding: 1rem 2.1rem; border-radius: 999px; border: none; cursor: pointer;
  text-decoration: none; transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,207,26,0.28); }
.btn-ghost {
  background: transparent; color: #fff; border: 1px solid var(--zth-line-2);
}
.btn-ghost:hover { border-color: var(--zth-blue); box-shadow: none; background: rgba(86,185,255,0.08); }
.btn-blue { background: var(--zth-blue); color: var(--zth-ink); }
.btn-blue:hover { box-shadow: 0 14px 34px rgba(86,185,255,0.30); }
.btn-sm { padding: 0.6rem 1.3rem; font-size: 0.85rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- NAV (shared, every page) ---------- */
/* 3-column grid: logo left, links centered, right column balances the logo */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0.9rem 6vw;
  /* semi-transparent at rest over the hero; shades in more once scrolled (.scrolled) */
  background: rgba(10,10,12,0.28); backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
header.nav.scrolled {
  background: rgba(10,10,12,0.6); backdrop-filter: blur(12px);
  border-bottom-color: var(--zth-line);
}
.nav .mark { display: flex; align-items: center; grid-column: 1; justify-self: start; }
.nav .mark img { height: 72px; width: auto; display: block; }
.nav-toggle { grid-column: 3; justify-self: end; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; grid-column: 2; justify-self: center; }
/* the Join-the-List button lives inside .nav-links (so it's in the mobile drawer),
   but on desktop it's pinned to the header's right edge to balance the logo. */
.nav-links a.btn { position: absolute; right: 6vw; top: 50%; transform: translateY(-50%); }
/* :not(.btn) so the general reset never strips the Join-the-List button's fill */
.nav-links > a:not(.btn), .nav-drop > button {
  color: var(--ink-2); text-decoration: none; font-size: 0.85rem;
  letter-spacing: 0.03em; transition: color 0.2s; background: none; border: none;
  font-family: "Sora"; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
}
.nav-links > a:not(.btn):hover, .nav-drop > button:hover { color: #fff; }
.nav-links > a:not(.btn) { position: relative; }
.nav-links a[aria-current="page"]:not(.btn) { color: var(--zth-blue); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--zth-blue);
}
.nav-links a.btn { color: var(--zth-ink); }
.nav-links a.btn:hover { color: var(--zth-ink); }

/* nav dropdown (Collection → Gallery / Traits / My Closet) */
.nav-drop { position: relative; }
.nav-drop > button svg { width: 12px; height: 12px; fill: currentColor; transition: transform 0.2s; }
.nav-drop:hover > button svg, .nav-drop:focus-within > button svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 190px; background: var(--zth-panel); border: 1px solid var(--zth-line-2);
  border-radius: 14px; padding: 0.5rem; z-index: var(--z-dropdown);
  opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s var(--ease-out);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border-radius: 9px;
  color: var(--ink-2); text-decoration: none; font-size: 0.88rem; transition: background 0.15s, color 0.15s;
}
.nav-drop-menu a:hover { background: rgba(86,185,255,0.10); color: #fff; }
.nav-drop-menu a .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zth-blue); flex: none; }
.nav-drop-menu a.disabled { opacity: 0.5; pointer-events: none; }
.nav-drop-menu .menu-note { padding: 0.4rem 0.9rem 0.2rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

/* mobile menu toggle */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: 0.25s; }

@media (max-width: 900px){
  /* shorter sticky bar on mobile: smaller logo + tighter padding, and the
     --nav-h token drops to match so the drawer/content offset stays flush */
  :root { --nav-h: 66px; }
  header.nav { padding: 0.3rem 6vw; }
  .nav .mark img { height: 60px; }
  .nav-links {
    /* header has backdrop-filter, so it's the containing block for this fixed
       drawer; grid-column also anchored it to track 2. Reset both so it spans
       the header's full width from the left edge. */
    position: fixed; top: var(--nav-h); left: 0; right: 0; width: auto;
    grid-column: 1 / -1; justify-self: stretch;
    flex-direction: column; align-items: stretch;
    gap: 0; background: rgba(10,10,12,0.97); backdrop-filter: blur(16px);
    padding: 1rem 6vw 2rem; border-bottom: 1px solid var(--zth-line);
    transform: translateY(-120%); transition: transform 0.3s var(--ease-out);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links > a, .nav-drop > button { padding: 0.9rem 0; font-size: 1rem; }
  .nav-drop, .nav-drop-menu { position: static; }
  .nav-drop-menu { opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: none; padding: 0 0 0 1rem; }
  /* in the mobile drawer the button flows normally, not pinned to the header.
     align-self:center + inline-block so the pill sizes to its text (the drawer's
     stretch alignment was squishing it and cramping the label). */
  .nav-links a.btn {
    position: static; right: auto; top: auto; transform: none; margin-top: 0.8rem;
    align-self: center; display: inline-block; text-align: center; white-space: nowrap;
    padding: 0.8rem 2rem;
  }
  /* the active underline reads as mislabeled in a vertical list (it sits
     between items) — drop it on mobile, blue text alone marks the active page */
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- page header band (interior pages) ---------- */
.page-head { padding: calc(var(--nav-h) + clamp(2rem,6vh,4.5rem)) 0 clamp(2rem,5vh,3.5rem); position: relative; }
.page-head .lead { margin-top: 1.4rem; max-width: 60ch; }
.page-head.center .lead { margin-left: auto; margin-right: auto; }
.crumbs { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.2rem; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--zth-blue); }

/* ---------- SUB-NAV (collection area: Gallery / Traits / My Closet) ----------
   A secondary tabs bar that sits directly under the main nav. Pages that use it
   add class="has-subnav" to <html> so page-head/hero clear it. */
:root { --subnav-h: 56px; }
.subnav {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: calc(var(--z-nav) - 1);
  height: var(--subnav-h); display: flex; align-items: stretch; justify-content: center; gap: 1.4rem;
  padding: 0 6vw; background: rgba(14,14,18,0.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--zth-line); overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav .subnav-label {
  align-self: center; font-family: "Sora"; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; flex: none;
  padding-right: 1.4rem; border-right: 1px solid var(--zth-line);
}
.subnav-tabs { display: flex; align-items: stretch; gap: 0; flex: none; }
/* each tab fills the full bar height; the active tab is a full-height faded-blue
   block (no radius) with a full-width underline at its base — fade + underline as one unit */
.subnav-tabs a {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: "Sora"; font-size: 0.9rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 0 1.3rem; white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.subnav-tabs a:hover { color: #fff; background: rgba(255,255,255,0.04); }
.subnav-tabs a[aria-current="page"] { color: #fff; background: rgba(86,185,255,0.12); }
.subnav-tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--zth-blue);
}
/* push interior content down to clear the sub-nav */
.has-subnav { scroll-padding-top: calc(var(--nav-h) + var(--subnav-h)); }
.has-subnav .page-head { padding-top: calc(var(--nav-h) + var(--subnav-h) + clamp(1.5rem,4vh,3rem)); }
.has-subnav .ev-hero { margin-top: calc(var(--nav-h) + var(--subnav-h)); }
@media (max-width: 640px){ :root { --subnav-h: 52px; } .subnav { padding: 0 4vw; gap: 0.8rem; } .subnav .subnav-label { display: none; } }

/* ---------- placeholder art frame ---------- */
.art {
  position: relative; border: 1px dashed rgba(255,255,255,0.22); border-radius: 18px;
  background: linear-gradient(135deg, rgba(86,185,255,0.10), rgba(255,46,62,0.08) 60%, rgba(255,207,26,0.06));
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-3); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1.5rem; min-height: 240px; overflow: hidden;
}
.art span { max-width: 80%; line-height: 1.5; }
.art.tall { min-height: 420px; }
.art-img { border-radius: 18px; overflow: hidden; background: var(--zth-ink); }
.art-img img { width: 100%; height: auto; }

/* ---------- layout helpers ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.two-col.flip .col-copy { order: 2; }
.two-col.copywide { grid-template-columns: 1.6fr 1fr; }
.two-col.copywide.flip { grid-template-columns: 1fr 1.6fr; }

/* ---------- tiles / cards ---------- */
.tiles { display: grid; gap: 1.4rem; }
.tiles.t3 { grid-template-columns: repeat(3, 1fr); }
.tiles.t4 { grid-template-columns: repeat(4, 1fr); }
.tile {
  background: var(--zth-panel); border: 1px solid var(--zth-line); border-radius: 18px;
  padding: 1.8rem; transition: transform 0.25s var(--ease-out), border-color 0.25s ease;
}
.tile:hover { transform: translateY(-4px); border-color: rgba(86,185,255,0.4); }
.tile h3 { margin-bottom: 0.6rem; }
.tile p { font-size: 0.95rem; color: var(--ink-2); font-weight: 300; }
.tile .tile-img { border-radius: 12px; overflow: hidden; margin-bottom: 1.3rem; aspect-ratio: 1 / 1; background: var(--zth-ink); }
.tile .tile-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- stat tiles ---------- */
.stats-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; }
.stats-big .stat { text-align: center; }
.stats-big .num {
  font-family: "Anton", sans-serif; color: var(--zth-yellow); line-height: 0.9;
  font-size: clamp(3.5rem, 9vw, 8.5rem); letter-spacing: 0.01em;
  text-shadow: 0 6px 30px rgba(255,207,26,0.18);
}
.stats-big .lbl {
  margin-top: 0.5rem; font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
@media (max-width: 860px){ .stats-big { grid-template-columns: repeat(2,1fr); gap: 2.4rem 1.5rem; } }

/* ---------- forms ---------- */
.field { margin-bottom: 1.4rem; }
.field label { display:block; font-size: 0.82rem; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 0.7rem; text-transform: uppercase; }
.field input, .field textarea {
  width:100%; padding: 1.15rem 1.3rem; border-radius: 14px; border: 1px solid var(--zth-line);
  background: rgba(255,255,255,0.04); color:#fff; font-family:"Sora"; font-size: 1.05rem;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.42); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--zth-blue); }
.form-card {
  background: var(--zth-panel); border: 1px solid var(--zth-line); border-radius: 24px;
  padding: clamp(1.8rem, 4vw, 3rem); width: 100%;
}

/* ---------- badges / pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.42rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--zth-line-2); color: var(--ink-2);
}
.pill.live { color: var(--zth-red); border-color: rgba(255,46,62,0.4); }
.pill.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zth-red); animation: livePulse 1.6s ease-in-out infinite; }
.pill.ended { color: var(--ink-3); }
.pill.blue { color: var(--zth-blue); border-color: rgba(86,185,255,0.4); }
.pill.gold { color: var(--zth-yellow); border-color: rgba(255,207,26,0.4); }
@keyframes livePulse { 0%,100%{ opacity:1; box-shadow: 0 0 0 0 rgba(255,46,62,0.5);} 50%{ opacity:0.6; box-shadow: 0 0 0 5px rgba(255,46,62,0);} }

/* rarity chips */
.rarity { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 6px; }
.rarity.common    { background: rgba(255,255,255,0.10); color: var(--ink-2); }
.rarity.uncommon  { background: rgba(86,185,255,0.16);  color: var(--zth-blue); }
.rarity.rare      { background: rgba(255,207,26,0.16);  color: var(--zth-yellow); }
.rarity.legendary { background: rgba(255,46,62,0.18);   color: #ff6b76; }

/* ---------- accordion (FAQ) ---------- */
.accordion { max-width: 820px; margin: 0 auto; }
.acc-item { border-bottom: 1px solid var(--zth-line); }
.acc-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: #fff;
  font-family: "Sora"; font-weight: 600; font-size: clamp(1rem, 2vw, 1.2rem);
  padding: 1.6rem 3rem 1.6rem 0; position: relative; display: block; transition: color 0.2s;
}
.acc-q:hover { color: var(--ink-2); }
/* the open question is highlighted so the focused item is obvious */
.acc-item.open .acc-q { color: var(--zth-blue); }
.acc-q::after {
  content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--zth-blue); font-weight: 300; transition: transform 0.25s;
}
.acc-item.open .acc-q::after { transform: translateY(-50%) rotate(45deg); }
/* grid-template-rows 0fr→1fr animates to auto height without layout-thrash on max-height */
.acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease-out); }
.acc-item.open .acc-a { grid-template-rows: 1fr; }
.acc-a-inner { overflow: hidden; padding: 0; color: var(--ink-2); font-weight: 300; max-width: 70ch; }
.acc-item.open .acc-a-inner { padding: 0 0 1.6rem; }
@media (prefers-reduced-motion: reduce){ .acc-a { transition: none; } }

/* ============================================================
   EVENT DETAIL PAGES (standalone, 3 states: before/during/after)
   Reusable across every event. State is driven by [data-state] on
   the page root; the reviewer top-hat flips it, the dev sets it by date.
   ============================================================ */

/* --- reviewer top-hat: a preview bar ABOVE the whole site chrome --- */
.tophat {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.55rem 6vw; background: var(--zth-yellow); color: var(--zth-ink);
  font-size: 0.8rem; font-weight: 600;
}
.tophat .th-label { letter-spacing: 0.02em; }
.tophat .th-switch { display: inline-flex; background: rgba(10,10,12,0.14); border-radius: 999px; padding: 3px; }
.tophat .th-switch button {
  border: none; background: none; cursor: pointer; font-family: "Sora"; font-weight: 600; font-size: 0.78rem;
  color: rgba(10,10,12,0.65); padding: 0.4rem 0.9rem; border-radius: 999px; transition: background 0.2s, color 0.2s;
}
.tophat .th-switch button.on { background: var(--zth-ink); color: #fff; }
.tophat-h { --tophat-h: 46px; }
/* when a top-hat is present, push the fixed nav (and page) down below it */
.tophat-h header.nav { top: var(--tophat-h); }
.tophat-h { scroll-padding-top: calc(var(--nav-h) + var(--tophat-h)); }
.tophat-h .ev-hero { margin-top: calc(var(--nav-h) + var(--tophat-h)); }
@media (max-width: 640px){ .tophat-h { --tophat-h: 70px; } }

/* top-hat + sub-nav together: stack tophat -> nav -> sub-nav, content clears all three.
   (+2px so the sub-nav sits flush under the nav's real rendered height, not the token) */
.tophat-h.has-subnav .subnav { top: calc(var(--tophat-h) + var(--nav-h) + 2px); }
.tophat-h.has-subnav { scroll-padding-top: calc(var(--tophat-h) + var(--nav-h) + var(--subnav-h)); }
.tophat-h.has-subnav .profile-top,
.tophat-h.has-subnav .swap-top,
.tophat-h.has-subnav .traits-top,
.tophat-h.has-subnav .gallery-top { padding-top: calc(var(--tophat-h) + var(--nav-h) + var(--subnav-h) + clamp(1rem, 2.5vh, 1.6rem)); }
.tophat-h.has-subnav .mock-strip { top: calc(var(--tophat-h) + var(--nav-h) + var(--subnav-h)); }

/* --- full-width event hero banner --- */
.ev-hero {
  position: relative; min-height: min(72vh, 640px); display: flex; align-items: flex-end;
  overflow: hidden; margin-top: var(--nav-h);
}
.ev-hero-bg { position: absolute; inset: 0; z-index: 0; }
.ev-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.ev-hero-bg .art { width: 100%; height: 100%; border: none; border-radius: 0; }
.ev-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  /* bottom-up for the banner base + a left-weighted wash so headline/lead stay legible
     over busy art regardless of what the event illustration looks like */
  background:
    linear-gradient(0deg, rgba(10,10,12,0.95) 2%, rgba(10,10,12,0.5) 42%, rgba(10,10,12,0.2) 100%),
    linear-gradient(90deg, rgba(10,10,12,0.8) 0%, rgba(10,10,12,0.4) 32%, transparent 60%);
}
.ev-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 6vw clamp(2.5rem, 6vh, 4rem); }
.ev-hero .ev-dates { margin-top: 1.1rem; font-size: 0.9rem; color: var(--ink-2); letter-spacing: 0.04em; }
.ev-hero h1 { max-width: 16ch; }
.ev-hero .lead { margin-top: 1.4rem; max-width: 54ch; }
.ev-hero .state-badges { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }

/* --- state visibility: only the active state's blocks show --- */
[data-ev-state="before"] .state-during,
[data-ev-state="before"] .state-after,
[data-ev-state="during"] .state-before,
[data-ev-state="during"] .state-after,
[data-ev-state="after"]  .state-before,
[data-ev-state="after"]  .state-during { display: none; }
/* per-state hero badge */
.ev-badge { display: none; }
[data-ev-state="before"] .ev-badge.before,
[data-ev-state="during"] .ev-badge.during,
[data-ev-state="after"]  .ev-badge.after { display: inline-flex; }

/* --- BEFORE: big countdown --- */
.ev-countdown { display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); flex-wrap: wrap; }
.ev-cd-unit {
  text-align: center; min-width: 96px; padding: 1.4rem 1rem; border-radius: 18px;
  background: var(--zth-panel); border: 1px solid var(--zth-line);
}
.ev-cd-unit .n { font-family: "Anton", sans-serif; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 0.9; color: var(--zth-yellow); }
.ev-cd-unit .l { margin-top: 0.5rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

/* --- DURING: the spin wheel (static layout) --- */
.wheel-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px){ .wheel-layout { grid-template-columns: 1fr; } }
.wheel-stage { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; }
.wheel-wrap { position: relative; width: min(380px, 80vw); aspect-ratio: 1/1; }
/* pointer at top */
.wheel-wrap::before {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3;
  border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 22px solid var(--zth-yellow);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}
.wheel {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  border: 6px solid var(--zth-ink);
  box-shadow: 0 0 0 3px var(--zth-line-2), 0 24px 60px rgba(0,0,0,0.55);
  /* 8 segments alternating the ticket outcomes; conic gradient = the wheel face */
  background: conic-gradient(
    var(--zth-blue)   0deg  45deg,
    var(--zth-panel-2) 45deg 90deg,
    var(--zth-yellow) 90deg 135deg,
    var(--zth-panel-2) 135deg 180deg,
    var(--zth-red)    180deg 225deg,
    var(--zth-panel-2) 225deg 270deg,
    var(--zth-yellow) 270deg 315deg,
    var(--zth-panel-2) 315deg 360deg
  );
}
.wheel .hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 74px; height: 74px; border-radius: 50%; background: var(--zth-ink); border: 3px solid var(--zth-line-2);
  display: grid; place-items: center; text-align: center;
}
.wheel .hub img { width: 42px; height: auto; }
.wheel-legend { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.spin-panel { }
.spin-panel .spins-left { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1.4rem; }
.spin-panel .spins-left .big { font-family: "Anton"; font-size: clamp(2.6rem, 6vw, 3.6rem); color: #fff; line-height: 1; }
.spin-panel .spins-left .cap { color: var(--ink-3); font-size: 0.9rem; }
.tally { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 1.6rem 0; }
.tally .cell { background: var(--zth-panel); border: 1px solid var(--zth-line); border-radius: 14px; padding: 1.1rem 1.2rem; }
.tally .cell .k { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.tally .cell .v { font-family: "Anton"; font-size: 1.9rem; color: var(--zth-yellow); line-height: 1; margin-top: 0.35rem; }
.tally .cell .v.blue { color: var(--zth-blue); }

/* --- AFTER: what was given away --- */
.prizes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem; }
.prize-card { border-radius: 16px; overflow: hidden; background: var(--zth-panel); border: 1px solid var(--zth-line); transition: transform 0.2s var(--ease-out), border-color 0.2s; }
.prize-card:hover { transform: translateY(-4px); border-color: var(--zth-line-2); }
.prize-card .thumb { aspect-ratio: 1/1; overflow: hidden; background: var(--zth-ink); position: relative; }
.prize-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.prize-card .thumb .rarity { position: absolute; top: 8px; left: 8px; }
.prize-card .body { padding: 1rem 1.1rem 1.2rem; }
.prize-card .body .name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; }
.prize-card .body .won { font-size: 0.8rem; color: var(--ink-3); }
.winners-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--zth-panel); border: 1px solid var(--zth-line); border-radius: 18px; padding: 1.4rem 1.8rem;
}
.winners-strip .stat-inline { display: flex; align-items: baseline; gap: 0.5rem; }
.winners-strip .stat-inline .n { font-family: "Anton"; font-size: 1.8rem; color: var(--zth-yellow); }
.winners-strip .stat-inline .l { color: var(--ink-3); font-size: 0.85rem; }

/* ============================================================
   APP AREA (Gallery / Traits / Closet) — wallet mock
   Shares the same nav + tokens; adds an "app" feel.
   ============================================================ */

/* connect-wallet gate */
.wallet-gate {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(3rem, 8vh, 6rem) 1.5rem; max-width: 560px; margin: 0 auto;
}
.wallet-gate .glyph {
  width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; margin-bottom: 2rem;
  background: linear-gradient(135deg, rgba(86,185,255,0.2), rgba(255,46,62,0.14));
  border: 1px solid var(--zth-line-2);
}
.wallet-gate .glyph svg { width: 40px; height: 40px; fill: var(--zth-blue); }
.wallet-gate h2 { margin-bottom: 1rem; }
.wallet-chips { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.wallet-chip {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border-radius: 12px;
  border: 1px solid var(--zth-line); background: var(--zth-panel); font-size: 0.85rem; color: var(--ink-2);
}
.wallet-chip .sw { width: 16px; height: 16px; border-radius: 5px; }

/* app toolbar */
.app-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 0 1.6rem; border-bottom: 1px solid var(--zth-line); margin-bottom: 2rem;
}
.app-bar .status { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--ink-2); }
.app-bar .status .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,var(--zth-blue),var(--zth-red)); }
.app-bar .status code { color: #fff; font-family: ui-monospace, monospace; font-size: 0.82rem; }

/* collection grid (Gallery) */
.grid-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px){ .grid-layout { grid-template-columns: 1fr; } }
.filters { position: sticky; top: calc(var(--nav-h) + 1rem); }
.filter-group { border-bottom: 1px solid var(--zth-line); padding: 1.1rem 0; }
.filter-group h4 { font-family:"Sora"; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; }
.filter-opt { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0; color: var(--ink-2); font-size: 0.9rem; cursor: pointer; }
.filter-opt > span:first-child { display: inline-flex; align-items: center; gap: 0.7rem; }
.filter-opt:hover { color: #fff; }
.filter-opt .count { color: var(--ink-3); font-size: 0.8rem; }
.filter-opt input { accent-color: var(--zth-blue); flex: none; width: 15px; height: 15px; }

.nft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.1rem; }
.nft-card { border-radius: 16px; overflow: hidden; background: var(--zth-panel); border: 1px solid var(--zth-line); transition: transform 0.2s var(--ease-out), border-color 0.2s; cursor: pointer; }
.nft-card:hover { transform: translateY(-4px); border-color: rgba(86,185,255,0.45); }
.nft-card .thumb { aspect-ratio: 1/1; background: var(--zth-ink); overflow: hidden; }
.nft-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.nft-card .meta { padding: 0.8rem 0.9rem; display: flex; align-items: center; justify-content: space-between; }
.nft-card .meta .id { font-family:"Sora"; font-weight: 600; font-size: 0.9rem; }
.nft-card .meta .tag { font-size: 0.72rem; color: var(--ink-3); }

/* traits catalog */
.trait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.trait-cell { border-radius: 14px; overflow: hidden; background: var(--zth-panel); border: 1px solid var(--zth-line); transition: border-color 0.2s, transform 0.2s; }
.trait-cell:hover { border-color: var(--zth-line-2); transform: translateY(-3px); }
.trait-cell .swatch { aspect-ratio: 1/1; display: grid; place-items: center; background: linear-gradient(135deg, rgba(86,185,255,0.10), rgba(255,46,62,0.06)); }
.trait-cell .swatch img { width: 100%; height: 100%; object-fit: cover; }
.trait-cell .info { padding: 0.75rem 0.85rem; }
.trait-cell .info .name { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.trait-cell .info .pct { font-size: 0.72rem; color: var(--ink-3); }

/* ---------- footer ---------- */
footer.site-footer {
  position: relative; z-index: var(--z-base); border-top: 1px solid var(--zth-line);
  padding: clamp(3rem, 8vh, 5rem) 6vw 3rem;
}
.footer-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand img { width: min(220px, 60vw); margin-bottom: 1.2rem; }
.footer-brand p { color: var(--ink-3); font-size: 0.9rem; font-weight: 300; max-width: 32ch; }
.footer-col h5 { font-family:"Sora"; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.footer-col a { display: block; color: var(--ink-2); text-decoration: none; font-size: 0.92rem; padding: 0.35rem 0; transition: color 0.15s; }
.footer-col a:hover { color: #fff; }
.footer-socials { display: flex; gap: 0.8rem; margin-top: 0.4rem; }
.footer-socials a { color: var(--ink-3); transition: color 0.2s; }
.footer-socials a:hover { color: #fff; }
.footer-socials svg { width: 20px; height: 20px; fill: currentColor; }
.footer-base {
  max-width: var(--maxw); margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid var(--zth-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ============================================================
   NEWSLETTER MODAL (global — injected by app.js, opened via
   [data-open="newsletter"]). Mailing-list signup, distinct from
   the homepage's contest entry form.
   ============================================================ */
.nl-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
  padding: 1.5rem; background: rgba(6,6,8,0.72); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s;
}
.nl-backdrop.open { opacity: 1; visibility: visible; }
.nl-modal {
  position: relative; width: 100%; max-width: 460px; background: var(--zth-panel);
  border: 1px solid var(--zth-line-2); border-radius: 22px; padding: clamp(1.8rem, 4vw, 2.6rem);
  transform: translateY(16px) scale(0.98); transition: transform 0.3s var(--ease-out);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
}
.nl-backdrop.open .nl-modal { transform: translateY(0) scale(1); }
.nl-close {
  position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--zth-line); color: var(--ink-2);
  cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; transition: background 0.15s, color 0.15s;
}
.nl-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.nl-modal .nl-eyebrow { color: var(--zth-blue); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; margin-bottom: 0.9rem; }
.nl-modal h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 0.8rem; }
.nl-modal .nl-sub { color: var(--ink-2); font-weight: 300; margin-bottom: 1.6rem; }
.nl-modal .btn { width: 100%; text-align: center; }
.nl-modal .nl-fine { margin-top: 1rem; font-size: 0.76rem; color: var(--ink-3); text-align: center; }
.nl-success { display: none; text-align: center; }
.nl-modal.done .nl-form { display: none; }
.nl-modal.done .nl-success { display: block; }
.nl-success .check {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1.2rem; display: grid; place-items: center;
  background: rgba(86,185,255,0.16); color: var(--zth-blue); font-size: 1.6rem;
}
@media (prefers-reduced-motion: reduce){ .nl-backdrop, .nl-modal { transition: none; } }

/* ---------- reveal on scroll ----------
   Content is visible by DEFAULT. The hidden->fade-in state only applies
   when JS is running (html.js, set by app.js before paint) AND the observer
   is available. This guarantees no blank sections in headless renderers,
   crawlers, print, or if JS fails. */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ html.js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- responsive base ---------- */
@media (max-width: 860px){
  .two-col, .two-col.copywide, .two-col.copywide.flip { grid-template-columns: 1fr; }
  .two-col.flip .col-copy { order: 0; }
  .tiles.t3, .tiles.t4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .tiles.t3, .tiles.t4 { grid-template-columns: 1fr; }
}

/* ---------- mobile hero: stack, don't overlay ----------
   On phones the cropped full-bleed hero with text over busy art reads as messy.
   Instead show the whole image uncropped as a banner, then the copy below it on
   the black page. Applies to the shared event/pass hero (.ev-hero family). */
@media (max-width: 640px){
  .ev-hero {
    /* padding:0 kills the global `section` padding (clamp 4rem/10vh) that
       otherwise pushes the image ~84px below the nav on mobile */
    display: block; min-height: 0; overflow: visible; padding: 0;
  }
  .ev-hero-bg { position: relative; inset: auto; }
  .ev-hero-bg img, .ev-hero-bg .art { position: static; width: 100%; height: auto; display: block; }
  .ev-hero-scrim { display: none; }
  .ev-hero-inner { padding: 1.8rem 6vw 0.5rem; }
  /* pass hero is a min-height:100vh variant — reset it too */
  .pass-hero { min-height: 0; }
  .pass-hero .ev-hero-inner { padding-bottom: 0.5rem; }
}