/* =====================================================================
   Valid design system: "Velvet".
   Shared by every page. Page agents never edit this file; page-only
   styles go in css/<page>.css. Every class is documented in src/SYSTEM.md.

   Contents
    1. Tokens            9. Rail heads, tinted band
    2. Base              10. iPhone frame and iOS screen parts
    3. Type              11. Floating glass cards
    4. Buttons, tags     12. Wallet pass
    5. Nav and menu      13. Preview sheet
    6. Layout            15. Footer
    7. Tiles             16. Motion
    8. Flyer cards       17. Responsive (with the early-access forms), 18. Reduced motion
   ===================================================================== */

/* 1. Tokens ---------------------------------------------------------- */
:root {
  /* surfaces: page, then stepped panels */
  --bg: #070608;
  --s1: #0e0d10;
  --s2: #141516;
  --s3: #1c1c1f;
  /* text: one ink, hierarchy by alpha */
  --tx: #f4f1ea;
  --tx2: rgba(244, 241, 234, 0.7);
  --tx3: rgba(244, 241, 234, 0.55);
  --hair: rgba(255, 255, 255, 0.08);
  --hair2: rgba(255, 255, 255, 0.14);
  /* one accent, used sparingly: logo mark, Preview tag, focus ring */
  --gold: #d9ba7c;
  /* ticket types */
  --ga: #8ab4ff;
  --vip: #e8c37a;
  --host: #ff7a59;
  --door: #4bfa94;
  --ok: #34c759;
  --ios-blue: #0a84ff;
  /* tile glows: color lives only in the glow, never in the tile fill */
  --glow-blue: rgba(78, 128, 255, 0.3);
  --glow-green: rgba(46, 190, 140, 0.24);
  --glow-orange: rgba(239, 106, 31, 0.3);
  --glow-gold: rgba(217, 186, 124, 0.24);
  --glow-rose: rgba(240, 70, 110, 0.24);
  /* radius: chips 8, cards 16, panels 24, tiles 28, pills 999 */
  --r-chip: 8px;
  --r-card: 16px;
  --r-panel: 24px;
  --r-tile: 28px;
  --r-pill: 999px;
  /* layered shadows */
  --sh-btn: 0 3.3px 3px rgba(0,0,0,.1), 0 8px 7px rgba(0,0,0,.13), 0 17px 14px rgba(0,0,0,.17), 0 35px 29px rgba(0,0,0,.22);
  --sh-card: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 32px rgba(0,0,0,.45);
  --sh-float: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.22), 0 12px 24px rgba(0,0,0,.3), 0 32px 64px rgba(0,0,0,.42);
  --sh-device: 0 0 0 1px rgba(0,0,0,.85), 0 2px 64px rgba(0,0,0,.6), 0 60px 90px -40px rgba(0,0,0,.85);
  --sh-art: 0 2px 64px rgba(0,0,0,.55), 0 50px 80px -40px rgba(0,0,0,.8);
  /* motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --expo: cubic-bezier(.19, 1, .22, 1);
  --bounce: cubic-bezier(.54, 1.12, .38, 1.11);
  /* type */
  --font: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --ios: -apple-system, "SF Pro Text", "Geist", system-ui, sans-serif;
  /* layout */
  /* side gutter; on a notched phone in landscape it grows to clear the notch (viewport-fit=cover lets the page run under it) */
  --gut-min: 40px;
  --gut: max(var(--gut-min), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --max: 1320px;
  --nav-h: 72px;
  --sec: 136px;
}

/* 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); background: var(--bg); }
html.sheet-open, html.menu-open { overflow: hidden; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--tx);
  font: 400 17px/1.5 var(--font); letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: rgba(217, 186, 124, .35); color: #fff; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--tx); color: #0b0a0b; font-weight: 600; transform: translateY(-160%); transition: transform .2s var(--ease); }
.skip:focus-visible { transform: none; }

/* 3. Type ------------------------------------------------------------ */
.display { font-size: clamp(48px, 5.85vw, 88px); line-height: .95; letter-spacing: -0.048em; font-weight: 600; text-wrap: balance; }
.h2 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; }
.h3 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }
.h4 { font-size: 19px; line-height: 1.25; letter-spacing: -0.025em; font-weight: 600; }
.lede { font-size: 19px; line-height: 1.5; color: var(--tx2); text-wrap: pretty; }
.small { font-size: 15px; line-height: 1.5; color: var(--tx2); }
.fine { font-size: 13px; line-height: 1.45; color: var(--tx3); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--tx2); }

/* 4. Buttons, links, tags, ticket labels ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  font: 600 17px/1 var(--font); letter-spacing: -0.015em; white-space: nowrap; text-align: center;
  transition: transform .3s var(--ease), background-color .2s var(--ease), box-shadow .3s var(--ease), color .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--tx); color: #0b0a0b; box-shadow: var(--sh-btn); }
.btn-primary:hover { background: #fff; transform: translateY(-1px); }
.btn-glass {
  background: rgba(255, 255, 255, .09); color: var(--tx);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.btn-glass:hover { background: rgba(255, 255, 255, .15); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--tx); transition: opacity .2s var(--ease); }
.link-arrow::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--expo);
}
.link-arrow:hover::after { transform: translateX(3px); }

.icon-btn { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); transition: background-color .2s var(--ease); }
.icon-btn:hover { background: rgba(255,255,255,.14); }
.icon-btn svg { width: 16px; height: 16px; }

/* "Preview" in the sheet is the only tag. */
.tag {
  display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font: 600 13px/1 var(--font); letter-spacing: 0; white-space: nowrap; color: #fff;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tag-gold { background: rgba(217, 186, 124, .16); color: var(--gold); box-shadow: none; }

/* ticket-type labels: GA, VIP, Host, Door */
.lbl { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font: 700 11px/1 var(--font); letter-spacing: .02em; white-space: nowrap; flex: none; }
.lbl-ga { color: var(--ga); background: rgba(138, 180, 255, .16); }
.lbl-vip { color: var(--vip); background: rgba(232, 195, 122, .17); }
.lbl-host { color: var(--host); background: rgba(255, 122, 89, .16); }
.lbl-door { color: var(--door); background: rgba(75, 250, 148, .13); }

/* 5. Nav and menu ---------------------------------------------------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h); border-bottom: 1px solid transparent; transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.nav.solid { background: rgba(9, 8, 10, .74); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-color: rgba(255,255,255,.06); }
.nav-in { max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 700 23px/1 var(--font); letter-spacing: -0.045em; color: var(--tx); border-radius: 8px; }
.logo-mark { width: 22px; height: 22px; flex: none; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--tx2); padding: 9px 14px; border-radius: var(--r-pill); transition: color .15s var(--ease), background-color .15s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--tx); background: rgba(255,255,255,.07); }
.menu-btn { display: none; width: 40px; height: 40px; flex: none; border-radius: 50%; place-items: center; background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.menu-btn svg { width: 18px; height: 18px; }

.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0 var(--gut) calc(28px + env(safe-area-inset-bottom)); border: 0;
  background: rgba(7, 6, 8, .97); color: var(--tx);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.menu[open] { display: flex; flex-direction: column; animation: menu-in .4s var(--out); }
.menu::backdrop { background: transparent; }
@keyframes menu-in { from { opacity: 0; } }
.menu-top { height: 60px; flex: none; display: flex; align-items: center; justify-content: space-between; }
.menu-top .menu-btn { display: grid; }
.menu-links { display: flex; flex-direction: column; margin-top: 20px; }
.menu-links a { font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.04em; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.menu-links a[aria-current="page"] { color: var(--gold); }
.menu-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }

/* 6. Layout ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.section { position: relative; padding: var(--sec) 0; }
.section + .section { padding-top: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 56px; }
.sec-head .lede { max-width: 440px; padding-bottom: 6px; }
.sec-head-stack { display: block; }
.sec-head-stack .lede { margin-top: 20px; max-width: 34em; padding: 0; }

/* inner-page header */
.page-head { position: relative; isolation: isolate; padding: calc(var(--nav-h) + 72px) 0 56px; overflow: hidden; }
.page-head .display { max-width: 13em; }
.page-head .lede { margin-top: 24px; max-width: 34em; font-size: 19px; }
.page-head-actions { margin-top: 36px; display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }

/* a rounded band over a graded photo, for a call to action inside a page */
.photo-band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-tile); padding: 72px; box-shadow: var(--sh-card); }
.photo-band-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.photo-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,6,8,.93) 0%, rgba(7,6,8,.78) 42%, rgba(7,6,8,.3) 100%); }
.photo-band::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }

/* product facts in big type: <dl class="facts"><div><dt>48 hours</dt><dd>...</dd></div></dl> */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.facts > div { padding: 22px 22px 24px; border-radius: var(--r-panel); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.facts dt { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.facts dd { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--tx2); }

/* 7. Tiles (Apple-style feature tiles) ------------------------------- */
.tile {
  --glow: rgba(255, 255, 255, .06);
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  border-radius: var(--r-tile); background: var(--s2); padding: 38px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.03);
}
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(64% 52% at 50% 84%, var(--glow) 0%, rgba(0,0,0,0) 100%); }
.tile h3 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }
/* tile copy only: never the text inside a phone screen (the :where keeps this rule as light as .tile p) */
.tile p:not(:where(.iphone p)) { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--tx2); max-width: 26em; text-wrap: pretty; }
.glow-blue { --glow: var(--glow-blue); }
.glow-green { --glow: var(--glow-green); }
.glow-orange { --glow: var(--glow-orange); }
.glow-gold { --glow: var(--glow-gold); }
.glow-rose { --glow: var(--glow-rose); }
.glow-top::before { background: radial-gradient(64% 52% at 50% 16%, var(--glow) 0%, rgba(0,0,0,0) 100%); }

/* 8. Flyer cards ----------------------------------------------------- */
.flyer-card { display: block; width: 100%; text-align: left; border-radius: var(--r-card); }
.flyer-card-art { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: #111; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); }
.flyer-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--expo); }
.flyer-card-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.flyer-card:hover .flyer-card-art img { transform: scale(1.03); }
.flyer-card-title { display: block; margin-top: 14px; font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; }
.flyer-card-meta { display: block; margin-top: 3px; font-size: 15px; color: var(--tx2); }
.flyer-card-price { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.flyer-card-price small { font-size: 15px; font-weight: 500; color: var(--tx2); margin-right: 4px; }

/* a horizontal swipe rail of cards (phones) */
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 calc(var(--gut) * -1); padding: 4px var(--gut) 12px; scroll-padding: 0 var(--gut); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 min(74%, 300px); scroll-snap-align: start; }

/* 9. Rail heads and the tinted discovery band --------------------------
   <div class="rail-head"><h2 class="h2">Title</h2><p class="lede">...</p><div class="rail-btns">two .rail-btn</div></div>
   followed (in the same section) by a <ul class="rail" data-rail>. main.js pages the rail one view per click,
   disables each arrow at its end and hides both when the rail doesn't overflow. */
.rail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; margin-bottom: 32px; }
.rail-head > :not(.rail-btns) { grid-column: 1; }
.rail-head .lede { margin-top: 18px; max-width: 34em; }
.rail-btns { grid-column: 2; grid-row: 1; display: flex; gap: 10px; padding-bottom: 4px; }
.rail-btn {
  width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--tx);
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transition: background-color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover:not(:disabled) { background: rgba(255,255,255,.15); }
.rail-btn:active:not(:disabled) { transform: scale(.95); }
.rail-btn:disabled { opacity: .32; cursor: default; }

/* a section washed in the color of the party you point at: set --tint on the section */
.disc { isolation: isolate; }
.disc::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--tint, #2c1206); transition: background-color .9s var(--ease);
  -webkit-mask: radial-gradient(70% 70% at 50% 55%, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(70% 70% at 50% 55%, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-composite: intersect;
}

/* 10. iPhone frame and iOS screen parts ------------------------------
   <div class="iphone" style="--w:300"><div class="screen"> <div class="ui">...</div> <span class="island"></span> </div></div>
   --w is the phone width in px, unitless. .ui is laid out at 390 x 844 (an iPhone in CSS px) and scaled to fit,
   so screen content is written in plain px as if the phone were real size. Use <img class="shot"> for a rendered screen. */
.iphone {
  --w: 300;
  position: relative; flex: none;
  width: calc(var(--w) * 1px); height: calc(var(--w) * 2.0861px);
  border-radius: calc(var(--w) * .168px);
  border: calc(var(--w) * .0095px) solid transparent;
  padding: calc(var(--w) * .024px);
  background:
    linear-gradient(#060606, #060606) padding-box,
    linear-gradient(155deg, #4f4f55 0%, #2a2a2e 20%, #161618 50%, #2a2a2f 78%, #535358 100%) border-box;
  box-shadow: var(--sh-device);
}
.iphone::before, .iphone::after { content: ""; position: absolute; background: #2e2e32; }
.iphone::before { left: calc(var(--w) * -.019px); top: 24%; width: calc(var(--w) * .011px); height: 7%; border-radius: 2px 0 0 2px; box-shadow: 0 calc(var(--w) * .2px) 0 #2e2e32; }
.iphone::after { right: calc(var(--w) * -.019px); top: 31%; width: calc(var(--w) * .011px); height: 11%; border-radius: 0 2px 2px 0; }
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: calc(var(--w) * .135px); background: #000; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 30%); }
.ui {
  position: absolute; top: 0; left: 0; width: 390px; height: 844px; overflow: hidden;
  transform-origin: 0 0; transform: scale(calc(var(--w) * .933 / 390));
  font: 400 17px/1.3 var(--ios); letter-spacing: -0.01em; color: #fff; text-align: left;
}
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.island { position: absolute; z-index: 9; top: 1.3%; left: 50%; width: 32%; height: 4.4%; transform: translateX(-50%); border-radius: 999px; background: #000; }

/* status bar: <div class="ios-sb" data-statusbar></div> (main.js fills it) */
.ios-sb { position: relative; z-index: 4; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 52px; font: 600 17px/1 var(--ios); letter-spacing: -0.02em; }
.ios-sb .ios-ic { display: flex; align-items: center; gap: 6px; }
.ios-sb svg { height: 12px; width: auto; fill: currentColor; }
.ios-sb svg.bat { height: 13px; }
.ios-home { position: absolute; z-index: 4; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: currentColor; }

/* party page, as a guest sees it after tapping the link */
.pp { position: absolute; inset: 0; background: var(--pp-bg, #170b05); color: #fff; }
.pp-cover { position: absolute; top: 0; left: 0; width: 390px; height: 404px; }
.pp-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.pp-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 96px; background: linear-gradient(180deg, transparent, var(--pp-bg, #170b05)); }
.pp-cover::before { content: ""; position: absolute; inset: 0 0 auto; height: 120px; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
.pp-bar { position: relative; z-index: 3; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 20px; }
.pp-logo { font: 700 21px/1 var(--font); letter-spacing: -0.045em; }
.pp-body { position: absolute; z-index: 2; left: 0; right: 0; top: 414px; bottom: 0; display: flex; flex-direction: column; padding: 0 18px 34px; }
.pp-title { font: 700 27px/1.1 var(--ios); letter-spacing: -0.03em; }
.pp-meta { margin-top: 6px; font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.72); }
.pp-tiers-head { margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 600; }
.pp-tiers-head span { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.6); }
.pp-tiers { margin-top: 18px; display: grid; gap: 8px; }
.pp-tiers-head + .pp-tiers { margin-top: 8px; }
.pp-tier { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 15px; background: rgba(255,255,255,.08); font-size: 16px; }
.pp-tier.on { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 2px #fff; }
.pp-tier b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-tier .lbl { height: 22px; font-size: 11.5px; }
.pp-safe { margin-top: 14px; display: flex; align-items: center; gap: 7px; font-size: 14px; color: rgba(255,255,255,.7); }
.pp-safe svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
.pp-safe + .pp-safe { margin-top: 8px; }
.pp-safe-chat svg { color: var(--ga); }
.pp-buy { margin-top: auto; padding-bottom: 4px; }
.pp-btn { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: #fff; color: #000; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }

/* Wallet screen: <div class="wallet"><div class="ios-sb" data-statusbar></div><div class="wallet-top">Done</div><div data-pass="slug"></div></div> */
.wallet { position: absolute; inset: 0; background: #000; color: #fff; display: flex; flex-direction: column; }
.wallet-top { display: flex; justify-content: flex-end; padding: 2px 22px 10px; color: var(--ios-blue); font-weight: 600; font-size: 17px; }
.wallet .pass { margin: 0 14px; font-size: 16px; }

/* party chat: only ticket holders can join; every name shows that person's ticket */
.ios-chat { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0b0b0d; color: #fff; }
.chat-head { position: relative; z-index: 3; padding: 0 16px 12px; display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px; background: rgba(28,28,30,.9); box-shadow: 0 .5px 0 rgba(255,255,255,.12); }
.chat-head-back { color: var(--ios-blue); }
.chat-head-back svg { width: 13px; height: 22px; }
.chat-head-mid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.chat-head-mid img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.chat-head-mid b { margin-top: 5px; font-size: 13px; font-weight: 600; }
.chat-head-mid span { font-size: 11.5px; color: rgba(255,255,255,.55); }
.chat-body { flex: 1; padding: 14px 14px 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.chat-stamp { text-align: center; font-size: 12px; color: rgba(255,255,255,.45); }
.chat-stamp b { font-weight: 600; color: rgba(255,255,255,.6); }
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: end; }
.msg-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #0b0b0d; background: var(--av, #8e8e93); }
.msg-who { display: flex; align-items: center; gap: 6px; margin: 0 0 4px 12px; font-size: 13.5px; color: rgba(255,255,255,.62); }
.msg-who .lbl { height: 20px; padding: 0 7px; font-size: 11.5px; }
.bubble { width: fit-content; max-width: 280px; padding: 8px 13px; border-radius: 18px; background: #26262a; font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; }
.msg-me { display: flex; flex-direction: column; align-items: flex-end; }
.msg-me .bubble { background: #f4f1ea; color: #0b0a0b; }
.msg-me .msg-who { margin: 0 12px 4px 0; }
.chat-pin { display: flex; gap: 10px; align-items: center; margin: 0 -14px; padding: 10px 16px; background: rgba(255,255,255,.05); font-size: 13.5px; color: rgba(255,255,255,.8); }
.chat-pin svg { width: 14px; height: 14px; flex: none; color: var(--host); }
.chat-compose { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px 38px; }
.chat-compose span { flex: 1; height: 38px; display: flex; align-items: center; padding: 0 16px; border-radius: 19px; background: #1c1c1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: rgba(255,255,255,.45); font-size: 16px; }
.chat-compose i { width: 32px; height: 32px; border-radius: 50%; background: #2c2c2e; flex: none; }

/* 11. Floating glass cards -------------------------------------------
   Float over a photo, a flyer or a device. Never over flat black. */
.glass {
  background: rgba(30, 28, 33, .55); color: var(--tx);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), var(--sh-float);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
}
.float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 22px; font-family: var(--ios); letter-spacing: -0.01em; }
.float-icon { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; }
.float-icon svg { width: 24px; height: 24px; }
.float-txt { min-width: 0; }
.float-txt b { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.float-txt b time { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--tx3); }
.float-txt span { display: block; font-size: 14px; line-height: 1.3; color: var(--tx2); }
.float-thumb { width: 40px; height: 50px; flex: none; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.float-qr { width: 44px; height: 44px; flex: none; padding: 4px; border-radius: 8px; background: #fff; color: #000; }
.float-qr svg { width: 100%; height: 100%; }

/* 12. Wallet pass ----------------------------------------------------
   Rendered by Valid.mountPass(el, opts) or <div data-pass="slug" data-tier="0">. Sized in em: set font-size to scale it. */
.pass { --pbg: #ef6a1f; --pfg: #150a04; font-size: 15px; background: var(--pbg); color: var(--pfg); border-radius: 1.1em; overflow: hidden; font-family: var(--ios); letter-spacing: -0.01em; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1.4em 2.6em -1em rgba(0,0,0,.6); }
.pass-top { display: flex; justify-content: space-between; align-items: center; padding: 1.05em 1.2em .85em; }
.pass-logo { display: inline-flex; align-items: center; gap: .35em; font: 800 1.05em/1 var(--font); letter-spacing: -0.03em; }
.pass-logo svg { width: 1.05em; height: 1.05em; }
.pass-date { font-size: .78em; font-weight: 700; letter-spacing: .04em; }
.pass-strip { display: block; width: 100%; height: 6.4em; object-fit: cover; object-position: 50% 30%; }
.pass-main { padding: 1em 1.2em 1.15em; }
.pass-title { font-size: 1.4em; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.pass-fields { margin-top: .8em; display: grid; grid-template-columns: 1.5fr 1fr; gap: .7em 1em; }
.pass-fields small { display: block; font-size: .72em; font-weight: 700; letter-spacing: .06em; opacity: .85; }
.pass-fields b { display: block; margin-top: .15em; font-size: .95em; font-weight: 600; letter-spacing: -0.015em; }
.pass-qr { margin: 1.1em auto 0; width: 62%; aspect-ratio: 1; padding: .55em; border-radius: .8em; background: #fff; color: #000; }
.pass-qr svg { width: 100%; height: 100%; transition: opacity .25s var(--ease); }
.qr-swap svg { opacity: .12; }
.pass-timer { margin-top: .75em; display: flex; justify-content: center; align-items: center; gap: .45em; font-size: .86em; font-weight: 600; font-variant-numeric: tabular-nums; }
.pass-timer svg { width: 1.25em; height: 1.25em; transform: rotate(-90deg); }
.pass-timer .trk { fill: none; stroke: currentColor; stroke-opacity: .22; stroke-width: 3; }
.pass-timer .bar { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 50.27; transition: stroke-dashoffset 1s linear; }
.pass-fine { margin-top: .3em; text-align: center; font-size: .8em; opacity: .85; }

/* 12b. Payout statement ------------------------------------------------
   One statement, for For hosts. Rows are <div><span>label</span><b>amount</b></div>;
   .stmt-tier rows (optional) list each ticket type above the totals. See src/SYSTEM.md. */
.statement {
  width: 100%; max-width: 400px; padding: 20px; border-radius: var(--r-panel); text-align: left;
  font-family: var(--ios); letter-spacing: -0.01em; color: var(--tx);
  background: rgba(24, 22, 27, .78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), var(--sh-float);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
}
.stmt-top { display: flex; align-items: center; gap: 10px; }
.stmt-top b { font-size: 15px; font-weight: 600; }
.stmt-mark { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #0b0a0b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.stmt-mark svg { width: 18px; height: 18px; }
.stmt-party { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.stmt-party img { width: 40px; height: 50px; flex: none; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.stmt-party b { display: block; font-size: 16px; font-weight: 600; }
.stmt-party span span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--tx2); }
.stmt-rows { margin-top: 16px; padding: 4px 14px; border-radius: var(--r-card); background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.stmt-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; font-size: 14.5px; color: var(--tx2); }
.stmt-rows > div + div { border-top: 1px solid rgba(255,255,255,.08); }
.stmt-rows b { font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stmt-tier > span { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.stmt-tier .lbl { height: 20px; font-size: 10.5px; }
.stmt-rows .stmt-total { color: var(--tx); font-weight: 600; }
.stmt-rows .stmt-total b { font-size: 22px; letter-spacing: -0.03em; }
.stmt-foot { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tx2); }
.stmt-foot svg { width: 17px; height: 17px; flex: none; color: var(--ok); }

/* 13. Preview sheet (one per page, in the layout) ---------------------- */
.sheet {
  width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: var(--r-tile); overflow: auto; overscroll-behavior: contain;
  background: #121114; color: var(--tx);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 120px rgba(0,0,0,.7);
}
.sheet::backdrop { background: rgba(4, 3, 5, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet[open] { animation: sheet-in .5s var(--out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.sheet-in { padding: 18px 22px 24px; }
.sheet-bar { display: flex; justify-content: space-between; align-items: center; }
.pv-top { margin-top: 18px; display: flex; gap: 16px; align-items: center; }
.pv-art { width: 92px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.pv-top h2 { font-size: 24px; line-height: 1.12; letter-spacing: -0.035em; font-weight: 600; }
.pv-top p { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--tx2); }
.pv-top h2 + p { margin-top: 6px; }
.pv-tiers { margin: 22px 0 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.pv-tiers legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.pv-tier { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border-radius: var(--r-card); background: rgba(255,255,255,.06); cursor: pointer; transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.pv-tier:hover { background: rgba(255,255,255,.09); }
.pv-tier input { position: absolute; opacity: 0; pointer-events: none; }
.pv-tier:has(input:checked) { box-shadow: inset 0 0 0 2px var(--tx); background: rgba(255,255,255,.09); }
.pv-tier:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.pv-tier-name { font-size: 16px; font-weight: 500; }
.pv-tier b { margin-left: auto; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-note { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--tx2); }
.pv-buy .btn-primary { margin-top: 20px; }
.pv-free { margin-top: 12px; text-align: center; font-size: 14px; color: var(--tx2); }
.pv-added { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.pv-added svg { width: 22px; height: 22px; color: var(--ok); flex: none; }
.pv-pass-slot { margin-top: 14px; }
.pv-pass-slot .pass { animation: pass-in .7s var(--bounce); }
@keyframes pass-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.pv-chat { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--tx2); }
.pv-chat a { color: var(--tx); text-decoration: underline; text-decoration-color: rgba(244,241,234,.35); text-underline-offset: 3px; }
.pv-pass .btn { margin-top: 18px; }
.pv-pass .btn + .btn { margin-top: 10px; }

/* 15. Footer ---------------------------------------------------------- */
.foot { padding: 80px 0 48px; border-top: 1px solid var(--hair); background: var(--bg); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-brand p { margin-top: 16px; max-width: 21em; font-size: 15px; line-height: 1.5; color: var(--tx2); }
.foot-col h2 { margin-bottom: 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--tx); }
.foot-col a, .foot-col button { display: block; width: fit-content; padding: 6px 0; font-size: 15px; color: var(--tx2); border-radius: 6px; transition: color .15s var(--ease); }
.foot-col a:hover, .foot-col button:hover, .foot-col a[aria-current="page"] { color: var(--tx); }
.foot-base { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 32px; font-size: 13px; color: var(--tx3); }

/* 16. Motion ---------------------------------------------------------
   .rv fades up once when it scrolls into view (stagger with style="--i:1").
   Entrance on load: .ln lines rise (wrap each line: <span class="ln"><span>text</span></span>),
   .enter fades up (delay with style="--d:.3s"). Both wait for html.ready, which main.js sets once fonts load. */
.js .rv { opacity: 0; transform: translateY(24px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .8s var(--out), transform .9s var(--out); transition-delay: calc(var(--i, 0) * 80ms); }
.ln { display: block; overflow: hidden; padding: 0 .04em .1em 0; margin-bottom: -.1em; }
.ln > span { display: block; }
.js .ln > span { transform: translateY(110%); }
.js.ready .ln > span { transform: none; transition: transform 1.2s var(--out); }
.js.ready .ln:nth-child(2) > span { transition-delay: .14s; }
.js.ready .ln:nth-child(3) > span { transition-delay: .28s; }
.js .enter { opacity: 0; transform: translateY(18px); }
.js.ready .enter { opacity: 1; transform: none; transition: opacity .9s var(--out), transform 1s var(--out); transition-delay: var(--d, .3s); }

/* 17. Responsive ------------------------------------------------------ */
/* ---------- early access forms ----------
   <form class="ea-form" data-early-access> with .ea-field labels and one .btn. main.js posts the fields to FORM_ENDPOINT.
   .ea-panel is the home band (copy left, form right). For hosts uses .st-form inside its photo band. */
.ea-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: center; padding: 64px 72px; border-radius: var(--r-tile); background: var(--s2); box-shadow: var(--sh-card); }
.ea-copy .lede { margin-top: 18px; max-width: 24em; }
.ea-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: end; text-align: left; }
.ea-field { display: grid; gap: 8px; min-width: 0; }
.ea-field span { font-size: 15px; font-weight: 500; color: var(--tx2); }
.ea-field input { width: 100%; height: 56px; padding: 0 18px; border: 0; appearance: none; border-radius: var(--r-card); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--tx); font: 500 17px/1 var(--font); transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.ea-field input::placeholder { color: var(--tx3); }
.ea-field input:hover { background: rgba(255,255,255,.09); }
.ea-field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgba(244,241,234,.6); background: rgba(255,255,255,.1); }
.ea-field input:disabled { opacity: .6; }
.ea-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #ff8a80; }
.ea-form .btn { grid-column: 1 / -1; justify-self: start; min-width: 220px; margin-top: 6px; }
.ea-form .btn:disabled { opacity: .6; cursor: default; }
.ea-form.is-done .btn { display: none; }
.ea-status { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; color: var(--tx2); }
.ea-status:empty { display: none; }
.ea-status:focus { outline: none; }
.ea-status[data-kind="ok"] { font-size: 19px; font-weight: 500; color: var(--tx); }
.ea-status[data-kind="err"] { color: #ff8a80; }

@media (max-width: 1180px) {
  :root { --gut-min: 32px; --sec: 112px; }
  .nav-in { gap: 20px; }
  .tile { padding: 30px 28px; }
  .photo-band { padding: 56px; }
}
@media (max-width: 900px) {
  :root { --gut-min: 24px; --nav-h: 60px; --sec: 88px; }
  .nav-links { display: none; }
  .nav-in { gap: 10px; }
  .logo { margin-right: auto; font-size: 22px; }
  .nav .btn-sm { height: 38px; padding: 0 15px; font-size: 15px; }
  .menu-btn { display: grid; }
  .sec-head { display: block; margin-bottom: 32px; }
  .sec-head .lede { margin-top: 16px; font-size: 17px; max-width: 34em; }
  .lede { font-size: 17px; }
  .h2 { font-size: clamp(34px, 9.6vw, 48px); }
  .page-head { padding: calc(var(--nav-h) + 44px) 0 40px; }
  .ea-panel { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; }
  .page-head .lede { font-size: 17px; }
  .tile { border-radius: var(--r-panel); padding: 28px 24px; }
  .tile h3 { font-size: 25px; }
  .tile p:not(:where(.iphone p)) { font-size: 15px; }
  .photo-band { padding: 40px 24px; border-radius: var(--r-panel); }
  .photo-band::before { background: linear-gradient(180deg, rgba(7,6,8,.86) 0%, rgba(7,6,8,.74) 60%, rgba(7,6,8,.86) 100%); }
  .facts { grid-template-columns: 1fr; gap: 0; border-radius: var(--r-panel); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
  .facts > div { padding: 18px 20px 20px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .facts > div + div { border-top: 1px solid var(--hair); }
  .facts dt { font-size: 24px; }
  .facts dd { margin-top: 6px; }
  .foot { padding-top: 56px; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-base { margin-top: 44px; flex-direction: column; }
  .sheet { width: 100%; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-radius: var(--r-tile) var(--r-tile) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  @keyframes sheet-in { from { transform: translateY(40%); opacity: 0; } }
}
@media (max-width: 600px) {
  :root { --gut-min: 16px; --sec: 80px; }
  .display { font-size: clamp(42px, 12.4vw, 60px); line-height: .97; letter-spacing: -0.05em; }
  .page-head .display { max-width: none; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-form { grid-template-columns: 1fr; }
  .ea-form .btn { justify-self: stretch; }
  .ea-panel { padding: 32px 20px; }
  .foot-col:last-child { grid-column: 1 / -1; }
  .sheet-in { padding: 16px 18px 22px; }
}

/* 18. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .rv, .js .ln > span, .js .enter { opacity: 1; transform: none; }
}
/* print and save as PDF: the page never scrolls, so nothing would fade in */
@media print {
  .js .rv, .js .ln > span, .js .enter { opacity: 1 !important; transform: none !important; transition: none !important; }
}