/* ==========================================================================
   Vybe by Goldpurp — booking platform stylesheet
   ========================================================================== */

:root {
  --ink: #0f1115;
  --ink-2: #181b21;
  --ink-3: #22262e;
  --line: rgba(236, 231, 221, 0.14);
  --bone: #ece7dd;
  --bone-dim: rgba(236, 231, 221, 0.62);
  --accent: #f5c64f;          /* custard */
  --accent-text: #f5c64f;
  --on-accent: #17130b;
  --glass: rgba(15, 17, 21, 0.78);
  --glass-soft: rgba(15, 17, 21, 0.35);
  --scrim: rgba(8, 9, 12, 0.9);
  --seat-off: #2e333d;
  --band: #f5c64f;
  --band-ink: #17130b;
  --warn: #ff8a3d;
  --danger: #ff5d5d;

  --t-front: #c6f25a;
  --t-stalls: #7fd6ff;
  --t-rear: #d7a6ff;

  --f-display: "Archivo", "Arial Narrow", sans-serif;
  --f-serif: "Fraunces", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(0.76, 0, 0.18, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.muted { color: var(--bone-dim); }
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); margin: 0 0 16px; }
.display-serif { font-family: var(--f-serif); font-weight: 300; font-style: italic; font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -0.02em; line-height: 0.95; }
.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }
.lede { font-family: var(--f-serif); font-weight: 300; font-size: clamp(24px, 3vw, 42px); line-height: 1.15; max-width: 26ch; margin: 0; }

/* ---------- Buttons & small controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 16px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 15px 26px;
  transition: transform .3s var(--ease-out), background .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--bone); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--bone); }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--bone-dim); border-bottom: 1px solid var(--line); }
.link-btn:hover { color: var(--accent-text); border-color: var(--accent); }
.link-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
.link-arrow { display: inline-flex; gap: 8px; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 4px; background: none; cursor: pointer; transition: color .3s, border-color .3s; }
.link-arrow:hover { color: var(--accent-text); border-color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 15px; cursor: pointer; background: none; color: var(--bone);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--bone); }
.chip[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--bone);
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.status-pill[data-status="few"]::before { background: var(--warn); }
.status-pill[data-status="few"] { color: var(--warn); border-color: rgba(255,138,61,.4); }
.status-pill[data-status="soldout"]::before, .status-pill[data-status="past"]::before { background: var(--bone-dim); }
.status-pill[data-status="soldout"], .status-pill[data-status="past"] { color: var(--bone-dim); }

.field { display: grid; gap: 8px; }
.field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.field input, .field select, .field textarea, .alert-form input {
  font: inherit; font-size: 17px; color: var(--bone);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 0; border-radius: 0; outline: none; width: 100%;
  transition: border-color .3s ease;
}
.field select option { background: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .alert-form input:focus { border-color: var(--accent); }
input[type="range"] { accent-color: var(--accent); padding: 14px 0; border: 0; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--bone-dim); }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--gutter) 20px;
  color: var(--bone);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  transition: background-color .4s ease, padding .4s ease;
}
.site-header.is-solid {
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-block: calc(env(safe-area-inset-top, 0px) + 12px) 12px;
  text-shadow: none;
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.wordmark { position: relative; }
/* Logo mark: a "V" built from louver slats; they flip flat on hover */
.wordmark-mark { display: grid; justify-items: center; gap: 2.5px; width: 26px; perspective: 60px; }
.wordmark-mark i { display: block; height: 3.5px; border-radius: 2px; background: var(--accent); transform: rotateX(50deg); transition: transform .55s var(--ease-out); }
.wordmark-mark i:nth-child(1) { width: 100%; } .wordmark-mark i:nth-child(2) { width: 78%; transition-delay: .04s; }
.wordmark-mark i:nth-child(3) { width: 56%; transition-delay: .08s; } .wordmark-mark i:nth-child(4) { width: 34%; transition-delay: .12s; }
.wordmark-mark i:nth-child(5) { width: 14%; transition-delay: .16s; }
.wordmark:hover .wordmark-mark i { transform: rotateX(0deg); }
.wordmark-name { font-weight: 800; font-variation-settings: "wdth" 96; font-size: 30px; letter-spacing: -.045em; line-height: 1; }
.wordmark-by { position: absolute; left: 100%; top: 50%; translate: 0 -50%; margin-left: 10px; font-size: 9px; white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .5s var(--ease-out); color: var(--accent-text); pointer-events: none; }
.wordmark:hover .wordmark-by, .wordmark:focus-visible .wordmark-by { opacity: 1; transform: none; }
.nav { display: flex; gap: 28px; }
.nav-link { position: relative; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 0; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-out); }
.nav-link:hover::after, .nav-link.is-current::after { transform: scaleX(1); transform-origin: left; }
.wallet-btn {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px 8px 16px; text-shadow: none;
  background: var(--glass-soft); transition: border-color .3s, background .3s;
}
.wallet-btn:hover, .wallet-btn.is-current { border-color: var(--accent); }
.wallet-btn b { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; }

/* ---------- Hero / louver ---------- */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.louver { position: absolute; inset: 0; perspective: 1600px; }
.slat { position: absolute; left: 0; right: 0; }
.slat-card { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(0deg); }
.slat.is-flipping .slat-card { transition: transform 1000ms var(--ease) var(--delay, 0ms); transform: rotateX(-180deg); }
.slat-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.slat-face.back { transform: rotateX(180deg); }
.slat-paint { position: absolute; left: 0; width: 100%; }
.slat-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.25)); opacity: 0; }
.slat.is-flipping .slat-face::after { animation: shade 1000ms var(--ease) var(--delay, 0ms); }
@keyframes shade { 50% { opacity: 1; } }
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero::before { top: 0; height: 22%; background: linear-gradient(180deg, rgba(8,9,12,.55), transparent); }
.hero::after { bottom: 0; height: 60%; background: linear-gradient(0deg, rgba(8,9,12,.85), transparent); }

.hero-caption {
  position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 4vw, 44px));
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.hero-text { display: grid; gap: 12px; justify-items: start; transition: opacity .32s ease, transform .32s var(--ease-out); }
.hero-caption.is-swapping .hero-text { opacity: 0; transform: translateY(12px); }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-date { display: inline-grid; justify-items: center; line-height: 1; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: linear-gradient(rgba(15,17,21,.4), rgba(15,17,21,.4)); }
.hero-date b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 26px; }
.hero-date span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.hero-title { font-size: clamp(56px, 10vw, 156px); margin: 0; }
.hero-title a:hover { color: var(--accent-text); }
.hero-meta { color: var(--bone-dim); }
.hero-book { margin-top: 8px; }
.hero-dots { display: flex; gap: 8px; }
.hero-dots button { appearance: none; border: 0; padding: 14px 0; width: clamp(28px, 4vw, 56px); background: none; cursor: pointer; }
.hero-dots span { display: block; height: 2px; background: linear-gradient(rgba(236,231,221,.25), rgba(236,231,221,.25)); position: relative; overflow: hidden; }
.hero-dots span::after { content: ""; position: absolute; inset: 0; background: var(--bone); transform: scaleX(0); transform-origin: left; }
.hero-dots .is-active span::after { transform: scaleX(1); }
.hero-dots .is-running span::after { animation: fill var(--dur) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-hint { position: absolute; z-index: 5; right: var(--gutter); top: 50%; writing-mode: vertical-rl; color: var(--bone-dim); }
.hero-hint:hover { color: var(--bone); }

/* ---------- Sections ---------- */
.home-section { padding-block: clamp(88px, 12vw, 180px); }
.section-label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; margin-bottom: clamp(32px, 5vw, 64px); border-bottom: 1px solid var(--line); color: var(--bone-dim); }
.section-title { margin: 0 0 clamp(28px, 4vw, 56px); font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(52px, 10vw, 160px); line-height: .88; }
.section-title em { font-family: var(--f-serif); font-weight: 300; text-transform: none; font-variation-settings: "SOFT" 100; color: var(--accent-text); }
.page-head { padding: clamp(130px, 16vw, 200px) 0 clamp(32px, 5vw, 64px); }
.page-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(60px, 13vw, 200px); line-height: 0.86; }
.page-title em { font-family: var(--f-serif); text-transform: none; font-weight: 300; font-variation-settings: "SOFT" 100; color: var(--accent-text); }

/* Intro */
.intro-statement { margin: 0; font-family: var(--f-serif); font-weight: 300; font-size: clamp(38px, 6.6vw, 112px); line-height: 1.02; letter-spacing: -.025em; max-width: 18ch; }
.intro-statement .word { opacity: .3; transition: opacity .5s ease; }
.intro-statement .word.is-lit { opacity: 1; }
.intro-foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px clamp(16px, 2vw, 32px); margin-top: clamp(48px, 7vw, 100px); align-items: end; }
.intro-body { grid-column: 1 / span 5; margin: 0; font-size: 19px; color: var(--bone-dim); max-width: 44ch; }
.stats { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; }
.stats dt { font-weight: 800; font-variation-settings: "wdth" 62; font-size: clamp(36px, 4.4vw, 72px); line-height: 1; }
.stats dd { margin: 8px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }

/* Mood finder */
.finder-head .section-title { margin-bottom: 24px; }
.finder-head .section-title em { display: inline-block; min-width: 3ch; }
.finder-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.finder-count { color: var(--bone-dim); margin: 0 0 12px; }
.empty { padding: 32px 0; color: var(--bone-dim); list-style: none; }

/* Show list rows */
.show-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.show-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 200px 120px 120px; align-items: center; gap: 20px;
  padding: clamp(16px, 2vw, 26px) 0; border-bottom: 1px solid var(--line);
  transition: padding .5s var(--ease-out), background .3s;
}
.show-date { display: grid; justify-items: start; line-height: 1; gap: 4px; }
.show-date b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 40px; }
.show-date span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.show-main { display: grid; gap: 6px; min-width: 0; }
.show-artist { font-family: var(--f-serif); font-weight: 300; font-size: clamp(28px, 4vw, 60px); line-height: 1; letter-spacing: -.02em; transition: color .3s, opacity .3s; }
.show-sub, .show-venue span { color: var(--bone-dim); }
.show-venue { line-height: 1.6; }
.show-price { font-weight: 600; font-size: 18px; white-space: nowrap; }
.show-price .mono { color: var(--bone-dim); margin-right: 4px; }
.show-row .status-pill { justify-self: end; }
.show-row:hover { padding-left: 14px; }
.show-row:hover .show-artist { font-style: italic; color: var(--accent-text); }
.show-list:hover .show-row:not(:hover) .show-artist { opacity: .4; }
.show-row[data-status="soldout"] .show-artist { text-decoration: line-through; text-decoration-thickness: 1px; }
.show-row.is-picked { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); padding-left: 14px; }

.cursor-preview { position: fixed; top: 0; left: 0; z-index: 40; width: clamp(200px, 20vw, 300px); aspect-ratio: 4 / 5; overflow: hidden; pointer-events: none; opacity: 0; clip-path: inset(50% 0 50% 0); transition: opacity .3s ease, clip-path .6s var(--ease-out); }
.cursor-preview.is-on { opacity: 1; clip-path: inset(0 0 0 0); }
.cursor-preview .paint { position: absolute; inset: 0; }

/* Calendar */
.calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.cal-title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 16px; font-weight: 400; }
.cal-title .display-serif { font-size: 40px; }
.cal-title .mono { color: var(--bone-dim); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid > .mono { text-align: center; color: var(--bone-dim); padding-bottom: 6px; }
.cal-day { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; font-size: 13px; color: var(--bone-dim); overflow: hidden; }
.cal-day b { font-weight: 500; position: relative; z-index: 1; }
.cal-day.is-past { opacity: .3; }
.cal-day.is-lit::before { content: ""; position: absolute; inset: 0; background: var(--bg); transition: transform .4s var(--ease-out); }
.cal-day.is-lit b { font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.cal-day.is-lit span { position: absolute; inset: auto 0 0 0; z-index: 2; font-size: 9px; padding: 4px; background: var(--ink); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(100%); transition: transform .3s var(--ease-out); }
.cal-day.is-lit:hover::before { transform: scale(1.15); }
.cal-day.is-lit:hover span, .cal-day.is-lit:focus-visible span { transform: none; }

/* Listen / sketches */
.sheet { display: flex; gap: clamp(12px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--gutter) 24px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sketch-note { color: var(--bone-dim); margin: -24px auto 32px; }
.listen-card { flex: 0 0 clamp(260px, 28vw, 380px); scroll-snap-align: start; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ink-2); }
.listen-art { aspect-ratio: 16 / 10; }
.listen-body { padding: 18px; display: grid; gap: 10px; }
.listen-body p { margin: 0; color: var(--bone-dim); }
.listen-body h3 { margin: 0; font-size: 36px; }
.listen-body h3 a:hover { color: var(--accent-text); }

.sketch { display: flex; align-items: center; gap: 14px; }
.sketch-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--bone); color: var(--ink); border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.sketch-btn:hover { background: var(--accent); }
.sketch-icon { font-size: 10px; }
.sketch-slats { flex: 1; display: flex; align-items: center; gap: 3px; height: 34px; perspective: 120px; min-width: 80px; }
.sketch-slats i { --l: 0; flex: 1; height: 100%; background: var(--bone-dim); opacity: calc(.25 + var(--l) * .75); transform: rotateY(calc(80deg - var(--l) * 80deg)) scaleY(calc(.25 + var(--l) * .75)); transition: transform .08s linear, opacity .08s linear; }
.sketch.is-playing .sketch-slats i { background: var(--accent); }

/* Venues (home) */
.venue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.venue-card h3 { margin: 14px 0 4px; font-family: var(--f-serif); font-weight: 300; font-size: 30px; }
.venue-card p { margin: 0; color: var(--bone-dim); }
.venue-art { aspect-ratio: 4 / 5; border-radius: 12px; display: flex; align-items: flex-end; padding: 14px; transition: transform .6s var(--ease-out); }
.venue-card:hover .venue-art { transform: scale(.98); }

/* Marquee */
.clients { padding-block: clamp(56px, 7vw, 110px); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > div { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); padding-right: clamp(24px, 4vw, 64px); }
.marquee-track a { font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(40px, 6vw, 96px); line-height: 1; white-space: nowrap; color: var(--bone-dim); transition: color .3s; }
.marquee-track a.alt { font-family: var(--f-serif); font-weight: 300; font-style: italic; text-transform: none; font-variation-settings: "SOFT" 100; }
.marquee-track a:hover { color: var(--accent-text); }
.marquee-track i { font-style: normal; color: var(--accent-text); font-size: 24px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* CTA / alerts */
.cta-title { margin: 0; display: grid; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(56px, 11vw, 180px); line-height: .88; }
.cta-title em { font-family: var(--f-serif); font-weight: 300; text-transform: none; font-variation-settings: "SOFT" 100; color: var(--accent-text); padding-left: clamp(0px, 8vw, 160px); }
.cta-title em.reveal { transition-delay: .12s; }
.alert-form { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(36px, 5vw, 72px); max-width: 760px; }
.alert-form input { flex: 1 1 260px; font-size: 22px; }
.form-note { flex-basis: 100%; color: var(--bone-dim); margin: 0; }

/* ---------- Shows page ---------- */
.filters { display: grid; gap: 20px; padding-bottom: 24px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.filter-row .field { flex: 1 1 180px; }
.filter-row .field.search { flex: 2 1 260px; }
.filter-end { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.view-toggle button { background: none; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 14px; color: var(--bone-dim); }
.view-toggle button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
.poster-grid { list-style: none; margin: 0; padding: 0 0 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.poster-art { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; padding: 12px; transition: transform .6s var(--ease-out); }
.poster:hover .poster-art { transform: translateY(-6px); }
.poster-date { display: grid; justify-items: center; line-height: 1; background: var(--ink); border-radius: 8px; padding: 6px 10px; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.poster-date b { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 62; font-size: 24px; letter-spacing: 0; }
.poster-art .status-pill { background: rgba(15,17,21,.75); }
.poster h3 { margin: 14px 0 6px; font-size: 32px; }
.poster p { margin: 0 0 4px; color: var(--bone-dim); }
.poster:hover h3 { color: var(--accent-text); }

/* ---------- Show page ---------- */
.show-hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; }
.show-hero-paint { position: absolute; inset: 0; animation: settle 1.6s var(--ease-out) both; }
@keyframes settle { from { transform: scale(1.12); } }
.show-hero::after { content: ""; position: absolute; inset: 30% 0 0 0; background: linear-gradient(0deg, rgba(8,9,12,.92), transparent); }
.show-hero-text { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(28px, 5vw, 56px); display: grid; gap: 14px; justify-items: start; }
.show-hero-text h1 { font-size: clamp(60px, 12vw, 190px); margin: 0; }
.show-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; width: min(640px, 100%); margin-top: 8px; }
.show-hero-actions .sketch { flex: 1 1 260px; }
.show-info { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px clamp(16px, 2vw, 32px); padding-block: clamp(64px, 9vw, 130px); }
.show-info .lede { grid-column: 1 / span 6; }
.show-info .facts { grid-column: 8 / span 5; }
.show-info .link-arrow { grid-column: 8 / span 5; justify-self: start; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; border-top: 1px solid var(--line); padding-top: 18px; }
.facts dt, .ticket-facts dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.facts dd { margin: 6px 0 0; font-size: 17px; }
.facts dd a { border-bottom: 1px solid var(--line); }
.facts dd a:hover { color: var(--accent-text); }

.book-section { padding-bottom: clamp(80px, 10vw, 150px); scroll-margin-top: 80px; }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 3vw, 48px); align-items: start; }
.picker { min-width: 0; display: grid; gap: 20px; }
.summary { position: sticky; top: 90px; border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--ink-2); display: grid; gap: 14px; }
.summary .eyebrow { margin: 0; }
.summary-empty { font-size: 34px; margin: 0; }
.summary .muted { margin: 0; }

/* Seat tools */
.seat-tools { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.seatview { width: min(340px, 100%); }
.sv-room { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, #2a2d36, #0a0b0e 70%); perspective: 500px; border: 1px solid var(--line); }
.sv-stage { position: absolute; left: 20%; right: 20%; top: 14%; height: 52%; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,.6); transform: scale(.7); transform-origin: 50% 60%; transition: transform .6s var(--ease-out); }
.sv-heads {
  position: absolute; left: -5%; right: -5%; bottom: 0; height: 0;
  background:
    radial-gradient(circle at 50% 100%, #050506 0 46%, transparent 48%) 0 100% / 7% 70% repeat-x,
    radial-gradient(circle at 50% 100%, #0b0c0f 0 46%, transparent 48%) 3.5% 40% / 6% 55% repeat-x;
  transition: height .6s var(--ease-out);
}
.sv-label { margin: 10px 0 0; color: var(--bone-dim); min-height: 1.5em; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--bone-dim); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item i { width: 12px; height: 12px; border-radius: 4px 4px 2px 2px; background: var(--bone); }
.legend-item[data-tier="front"] i { background: var(--t-front); }
.legend-item[data-tier="stalls"] i { background: var(--t-stalls); }
.legend-item[data-tier="rear"] i { background: var(--t-rear); }
.legend-item.is-sold i { background: var(--ink-3); }
.legend-item.is-mine i { background: var(--bone); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--bone); }

.seatmap-scroll { overflow-x: auto; padding: 8px 0 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.seatmap { display: grid; justify-content: center; gap: 6px; padding: 24px; min-width: max-content; }
.stage-arc { justify-self: center; width: 70%; min-width: 260px; text-align: center; padding: 10px 0 18px; margin-bottom: 18px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, var(--ink-3), transparent); border-bottom: 2px solid var(--bone-dim); color: var(--bone-dim); }
.seat-row { display: flex; align-items: flex-start; gap: 5px; }
.seat-row[data-tier="front"] { --tc: var(--t-front); }
.seat-row[data-tier="stalls"] { --tc: var(--t-stalls); }
.seat-row[data-tier="rear"] { --tc: var(--t-rear); }
.seat-row[data-tier="front"] + .seat-row[data-tier="stalls"],
.seat-row[data-tier="stalls"] + .seat-row[data-tier="rear"] { margin-top: 12px; }
.row-label { width: 18px; text-align: center; color: var(--bone-dim); padding-top: 4px; }
.seat {
  width: 22px; height: 22px; padding: 0; cursor: pointer; margin-top: var(--y, 0);
  border: 0; border-radius: 7px 7px 3px 3px; background: var(--tc); opacity: .85;
  transition: transform .2s var(--ease-out), opacity .2s, box-shadow .2s;
}
.seat.has-aisle { margin-right: 18px; }
.seat:hover:not(:disabled) { transform: translateY(-3px) scale(1.15); opacity: 1; }
.seat:disabled { background: var(--ink-3); cursor: not-allowed; opacity: 1; }
.seat[aria-pressed="true"] { background: var(--bone); opacity: 1; box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 4px var(--bone); transform: translateY(-2px); }

/* GA tiers */
.ga-list { display: grid; gap: 12px; }
.ga-tier { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
.ga-tier h3 { margin: 0 0 4px; font-family: var(--f-serif); font-weight: 300; font-size: 30px; }
.ga-tier p { margin: 0 0 10px; color: var(--bone-dim); }
.ga-tier.is-sold { opacity: .5; }
.ga-price { font-weight: 700; font-size: 22px; }
.meter { height: 4px; background: var(--ink-3); border-radius: 4px; overflow: hidden; max-width: 260px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--warn)); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; }
.stepper button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 20px; border-radius: 50%; }
.stepper button:hover:not(:disabled) { background: var(--ink-3); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper output { min-width: 24px; text-align: center; font-weight: 700; }

/* Crew + totals */
.crew { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 320px; overflow-y: auto; }
.crew li { display: grid; gap: 6px; padding: 12px; border-radius: 10px; background: var(--ink-3); }
.crew-ticket { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.crew-ticket .mono { color: var(--bone-dim); }
.crew-name { font: inherit; font-size: 15px; color: var(--bone); background: transparent; border: 0; border-bottom: 1px dashed var(--line); padding: 4px 0; outline: none; }
.crew-name:focus { border-bottom-color: var(--accent); }
.totals { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.totals div { display: flex; justify-content: space-between; align-items: baseline; }
.totals b { font-size: 24px; }
.totals .split { color: var(--accent-text); }
.totals .split b { font-size: 16px; }
.checkout { display: grid; gap: 16px; }

/* Confirm modal */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gutter); background: var(--scrim); backdrop-filter: blur(6px); }
.confirm-panel { position: relative; width: min(560px, 100%); background: var(--ink-2); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 40px); animation: pop .5s var(--ease-out); }
@keyframes pop { from { transform: translateY(20px) scale(.97); opacity: 0; } }
.confirm-panel h2 { font-size: clamp(36px, 5vw, 56px); margin: 0 0 20px; }
.confirm-list { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); }
.confirm-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.confirm-list .mono { color: var(--bone-dim); }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lightbox-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; font-size: 22px; cursor: pointer; }
.lightbox-close:hover { background: var(--bone); color: var(--ink); }
.waitlist .lede { margin-bottom: 8px; }

/* ---------- Wallet ---------- */
.wallet { padding-bottom: 40px; }
.wallet-note { padding-bottom: 80px; }
.wallet-past { margin-top: 56px; }
.wallet-empty { display: grid; gap: 14px; justify-items: start; padding: 40px 0 80px; }
.wallet-empty .display-serif { font-size: clamp(40px, 6vw, 80px); margin: 0; }
.wallet-empty .muted { margin: 0 0 12px; }
.ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 20px; }
.ticket {
  position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr);
  border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden;
}
.ticket::before, .ticket::after { content: ""; position: absolute; left: 200px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); z-index: 3; }
.ticket::before { top: -12px; } .ticket::after { bottom: -12px; }
.ticket.is-past { opacity: .55; }
.ticket-reveal { position: relative; min-height: 240px; border-right: 1px dashed var(--line); }
.ticket-code { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 18px; background: var(--bone); color: var(--ink); }
.ticket-code svg { width: 120px; height: 120px; fill: var(--ink); }
.ticket-code p { margin: 0; font-weight: 500; }
.ticket-blinds { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; z-index: 2; }
.tslat { position: absolute; left: 0; right: 0; top: calc(var(--i) * 100% / var(--n)); height: calc(100% / var(--n) + 1px); overflow: hidden; transform-origin: 50% 50%; transition: transform .7s var(--ease) calc(var(--i) * 45ms), opacity .3s ease calc(var(--i) * 45ms + .4s); backface-visibility: hidden; }
.tslat-paint { position: absolute; left: 0; right: 0; }
.ticket.is-open .tslat { transform: rotateX(-90deg); opacity: 0; }
.ticket:not(.is-open) .tslat { transition-delay: calc(var(--i) * 45ms), 0s; }
.ticket-blinds-label { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; padding: 8px; border-radius: 999px; background: rgba(15,17,21,.8); color: var(--bone); transition: opacity .3s; }
.ticket.is-open .ticket-blinds-label { opacity: 0; }
.ticket-body { padding: 20px 22px; display: grid; gap: 6px; align-content: start; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; }
.ticket-count { color: var(--accent-text); }
.ticket-body h3 { margin: 8px 0 0; font-size: 40px; }
.ticket-body h3 a:hover { color: var(--accent-text); }
.ticket-body > .muted { margin: 0; }
.ticket-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px; }
.ticket-facts dd { margin: 4px 0 0; font-size: 15px; }
.ticket-actions, .ticket-confirm { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.ticket-confirm { padding-top: 8px; color: var(--danger); }

/* ---------- Venues page ---------- */
.venue-list { display: grid; gap: clamp(64px, 9vw, 130px); padding-bottom: 100px; }
.venue-block { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px clamp(16px, 2vw, 32px); scroll-margin-top: 90px; }
.venue-hero { grid-column: 1 / span 6; aspect-ratio: 5 / 4; border-radius: 16px; display: flex; align-items: flex-end; padding: 16px; }
.venue-copy { grid-column: 8 / span 5; display: grid; gap: 12px; align-content: end; }
.venue-copy h2 { margin: 0; font-size: clamp(48px, 6vw, 96px); }
.venue-copy p { margin: 0; }
.venue-block .show-list { grid-column: 1 / -1; }
.venue-block .show-artist { font-size: clamp(24px, 3vw, 40px); }

/* ---------- Help page ---------- */
.help-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding-bottom: 120px; align-items: start; }
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-family: var(--f-serif); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\eb0b"; font-family: "tabler-icons"; font-family: var(--f-mono); color: var(--accent-text); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--bone-dim); max-width: 60ch; margin: 12px 0 0; }
.contact-form { display: grid; gap: 24px; position: sticky; top: 100px; }
.contact-form .btn { justify-self: start; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 120px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 28px); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer-cols > div { display: grid; align-content: start; gap: 8px; }
.footer-cols a, .footer-cols span { font-size: 16px; width: fit-content; }
.footer-cols a:hover { color: var(--accent-text); }
.footer-giant { margin-top: clamp(48px, 7vw, 100px); font-weight: 800; font-variation-settings: "wdth" 96; letter-spacing: -.06em !important; font-size: 34vw; line-height: .78; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; color: var(--ink-2); -webkit-text-stroke: 1px var(--line); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 5vw, 64px); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.to-top:hover { color: var(--bone); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 95; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--bone); color: var(--ink); padding: 12px 20px; border-radius: 999px; font-weight: 600; max-width: calc(100% - 32px); transition: opacity .3s, transform .4s var(--ease-out); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .book-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .venue-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .nav { justify-self: center; gap: 16px; }
  .wallet-btn span { display: none; }
  .wallet-btn { padding: 6px 6px 6px 12px; }
  .wallet-btn::before { content: "Tickets"; }
  .intro-body, .stats { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .show-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; }
  .show-venue { display: none; }
  .show-price { grid-column: 2; font-size: 15px; }
  .show-row .status-pill { grid-column: 3; grid-row: 1 / span 2; }
  .show-date b { font-size: 32px; }
  .show-info .lede, .show-info .facts, .show-info .link-arrow { grid-column: 1 / -1; }
  .venue-hero, .venue-copy { grid-column: 1 / -1; }
  .help-grid { grid-template-columns: 1fr; }
  .contact-form { position: static; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero-hint { display: none; }
  .ticket { grid-template-columns: 1fr; }
  .ticket::before, .ticket::after { display: none; }
  .ticket-reveal { border-right: 0; border-bottom: 1px dashed var(--line); min-height: 220px; }
}
@media (max-width: 520px) {
  .nav { gap: 12px; }
  .nav-link { font-size: 11px; }
  .wordmark-name { display: none; }
  .venue-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ga-tier { grid-template-columns: 1fr auto; }
  .ga-tier .stepper { grid-column: 1 / -1; justify-self: start; }
  .hero-dots button { width: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Multi-event platform components
   ========================================================================== */
:root { --c-concert: #ff7eb6; --c-conference: #7fd6ff; --c-wedding: #f3d9b1; --c-birthday: #ffd36b; --c-festival: #9ef0c3; --c-workshop: #e9a77a; --c-gala: #d7a6ff; --c-comedy: #ff9c6b; }
.type-tag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--tc, var(--bone)); }
.type-tag i { font-style: normal; font-size: 13px; }
[data-type="concert"] { --tc: var(--c-concert); } [data-type="conference"] { --tc: var(--c-conference); }
[data-type="wedding"] { --tc: var(--c-wedding); } [data-type="birthday"] { --tc: var(--c-birthday); }
[data-type="festival"] { --tc: var(--c-festival); } [data-type="workshop"] { --tc: var(--c-workshop); }
[data-type="gala"] { --tc: var(--c-gala); } [data-type="comedy"] { --tc: var(--c-comedy); }
.status-pill[data-status="invite"]::before { background: var(--c-gala); }
.warn { color: var(--warn); }
.span-2 { grid-column: 1 / -1; }

/* Type tiles */
.type-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 28px; }
.type-tile { position: relative; display: grid; gap: 6px; justify-items: start; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-2); cursor: pointer; transition: border-color .25s, transform .3s var(--ease-out), background .25s; }
.type-tile:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--bone-dim); }
.type-tile[aria-pressed="true"], .type-tile:has(input:checked) { border-color: var(--accent); background: linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); }
.type-tile:disabled { opacity: .35; cursor: not-allowed; }
.type-tile input { position: absolute; opacity: 0; pointer-events: none; }
.type-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.type-glyph { font-size: 26px; line-height: 1; color: var(--accent-text); }
.type-name { font-family: var(--f-serif); font-weight: 300; font-size: 22px; }
.type-tile .mono { color: var(--bone-dim); }
.type-tiles.small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.type-tiles.small .type-tile { padding: 12px; }

/* ---------- Ticket-stub event cards ---------- */
.ecard-rail { list-style: none; margin: 0; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 18px var(--gutter) 36px; scrollbar-width: none; }
.ecard-rail::-webkit-scrollbar { display: none; }
.ecard-rail > .ecard-li { flex: 0 0 clamp(260px, 24vw, 340px); scroll-snap-align: start; }
.ecard-rail .empty { padding-inline: 0; }
.ecard-grid { list-style: none; margin: 0; padding: 0 0 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 24px); }
.rail-controls { display: flex; align-items: center; gap: 10px; }
.rail-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; font-size: 18px; transition: background .2s, color .2s, opacity .2s, border-color .2s; }
.rail-btn:hover:not(:disabled) { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.rail-btn:disabled { opacity: .3; cursor: default; }
#occasions { padding-bottom: 24px; }


/* Row tag inside list rows */
.show-main .type-tag { margin-bottom: 2px; }

/* Calendar extras */
.cal-more { position: absolute; top: 3px; right: 4px; z-index: 2; font-style: normal; font-size: 9px; color: #fff; }

/* Host showcase */
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.flow-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--ink-2); display: flex; flex-direction: column; }
.flow-art { aspect-ratio: 16 / 10; padding: 14px; display: flex; align-items: flex-start; }
.flow-art .type-tag { background: rgba(15,17,21,.72); padding: 5px 10px; border-radius: 999px; }
.flow-body { padding: 20px; display: grid; gap: 14px; align-content: start; flex: 1; }
.flow-body h3 { margin: 0; font-size: 34px; }
.flow-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--bone-dim); }
.flow-body li::before { content: "— "; color: var(--accent-text); }
.flow-body .link-arrow { justify-self: start; }
.flow-body .mono { margin: 0; }
.host-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(40px, 5vw, 72px); padding-top: 32px; border-top: 1px solid var(--line); }

/* Event page info */
.show-info .info-main { grid-column: 1 / span 6; display: grid; gap: 40px; align-content: start; }
.show-info .info-side { grid-column: 8 / span 5; display: grid; gap: 20px; align-content: start; }
.show-info .info-main .lede { grid-column: auto; }
.show-info .info-side .facts, .show-info .info-side .link-arrow { grid-column: auto; }
.timeline ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0 10px 20px; font-size: 18px; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.timeline .mono { color: var(--bone-dim); padding-top: 4px; }

/* Booking layout: picker + steps */
.book-grid > .picker { display: grid; gap: 28px; }
.step { border-top: 1px solid var(--line); padding-top: 22px; }
.step-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.step-head .eyebrow, .step-head p { margin: 0; }

/* Invite gate */
.invite-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--ink-2); }
.invite-art { min-height: 320px; }
.invite-body { padding: clamp(24px, 4vw, 48px); display: grid; gap: 12px; align-content: center; }
.invite-body h3 { font-size: clamp(44px, 5vw, 72px); margin: 0; }
.invite-body .alert-form { margin-top: 12px; }
.waitlist { grid-column: 1 / -1; }

/* Tables map */
.tablemap { border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); padding: 20px; overflow-x: auto; }
.head-table { text-align: center; padding: 12px; border-radius: 10px; background: linear-gradient(180deg, var(--ink-3), transparent); border-bottom: 2px solid var(--bone-dim); color: var(--bone-dim); margin: 0 auto 28px; max-width: 420px; }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; min-width: 360px; }
.table { position: relative; width: 160px; height: 160px; justify-self: center; display: grid; place-items: center; }
.table-top { width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1.1; background: radial-gradient(circle, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--accent) calc(var(--free) * 35%), transparent); }
.table-top b { font-family: var(--f-serif); font-weight: 300; font-size: 24px; }
.table-top .mono { color: var(--bone-dim); font-size: 10px; }
.tseat { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--t-stalls); transform: rotate(var(--a)) translateY(-64px) rotate(calc(-1 * var(--a))); transition: background .2s, box-shadow .2s, scale .2s; }
.tseat:hover:not(:disabled) { scale: 1.3; }
.tseat:disabled { background: var(--seat-off); box-shadow: inset 0 0 0 1px rgba(236,231,221,.12); cursor: not-allowed; }
.tseat[aria-pressed="true"] { background: var(--bone); box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 4px var(--bone); }

/* Agenda builder */
.agenda { display: grid; gap: 12px; }
.agenda-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.agenda-time { padding-top: 14px; color: var(--accent-text); }
.agenda-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.session { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); cursor: pointer; transition: border-color .2s, background .2s; }
.session:hover:not(:disabled) { border-color: var(--bone-dim); }
.session[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); }
.session[aria-pressed="true"] .session-title::before { content: "\ea5e"; font-family: "tabler-icons"; margin-right: 6px; color: var(--accent-text); }
.session:disabled { opacity: .4; cursor: not-allowed; }
.session-title { font-size: 16px; font-weight: 500; }
.session .mono { color: var(--bone-dim); }
.session-left { color: var(--accent-text) !important; }

/* Bring-list */
.bring { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.bring-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.bring-item input { grid-row: span 2; accent-color: var(--accent); width: 18px; height: 18px; }
.bring-item .mono { color: var(--bone-dim); }
.bring-item:has(input:checked) { border-color: var(--accent); }
.bring-item.is-claimed { opacity: .5; cursor: default; }

/* Summary extras */
.crew-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crew-extra select, .crew-extra input { font: inherit; font-size: 14px; color: var(--bone); background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; min-width: 0; }
.fund { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.fund .eyebrow, .fund p { margin: 0; }
.fund .chip { font-size: 14px; padding: 6px 12px; }
.summary .mono.warn, .summary .mono.muted { margin: 0; }
.summary [data-decline] { justify-self: start; }

/* ---------- Host studio ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 4px; margin-right: 18px; cursor: pointer; font-size: 16px; color: var(--bone-dim); }
.tabs button[aria-selected="true"] { color: var(--bone); border-color: var(--accent); }
.tab-panel { padding-bottom: 100px; }
.create-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.create-form { display: grid; gap: 28px; }
.create-step { border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin: 0; min-width: 0; }
.create-step legend { padding: 0 8px; margin-left: -8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.create-step > .seg + * { margin-top: 16px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; transition: background .2s, color .2s; }
.seg input:checked + span { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tier-rows { display: grid; gap: 12px; margin-top: 16px; }
.tier-row { display: grid; grid-template-columns: 1.4fr .7fr .7fr 1.6fr auto; gap: 12px; align-items: end; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.tier-row input { font-size: 15px; }
.tier-rows > .link-btn { justify-self: start; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 64px; height: 64px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--accent); }
.create-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.create-actions .muted { margin: 0; }
.create-side { position: sticky; top: 90px; display: grid; gap: 16px; }
.create-side > .eyebrow { margin: 0; }
.preview-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--ink-2); }
.preview-art { aspect-ratio: 4 / 3; display: flex; justify-content: space-between; align-items: flex-start; padding: 12px; }
.preview-art .status-pill { background: rgba(15,17,21,.75); }
.preview-body { padding: 18px; display: grid; gap: 6px; }
.preview-body h3 { margin: 4px 0 0; font-size: 40px; overflow-wrap: anywhere; }
.preview-body p { margin: 0; }
.preview-price { font-weight: 600; font-size: 18px; color: var(--accent-text); margin-top: 6px !important; }
.preview-feats { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.preview-feats li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--bone-dim); }
.published { border: 1px solid var(--accent); border-radius: 18px; padding: 20px; display: grid; gap: 12px; background: linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)); }
.published .eyebrow, .published p { margin: 0; }
.published :is(h2, h3) { margin: 0; font-size: 32px; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--bone); background: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; }
.copy-row .btn { padding: 10px 16px; font-size: 14px; }

.manage-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; margin-bottom: 24px; }
.manage-head .field { flex: 1 1 320px; max-width: 520px; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.kpis div { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--ink-2); }
.kpis dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.kpis dd { margin: 8px 0 0; font-weight: 800; font-variation-settings: "wdth" 62; font-size: 44px; line-height: 1; }
.manage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 24px 0; }
.panel { border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 10px; align-content: start; }
.panel .eyebrow { margin: 0 0 4px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.bar-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 6px; border-radius: 6px; background: var(--ink-3); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.regret p { margin: 4px 0 0; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.guest-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px; }
.guest-table th { text-align: left; font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.guest-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guest-table tr:last-child td { border-bottom: 0; }

.door-count { display: grid; justify-items: end; line-height: 1; }
.door-count b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 64px; color: var(--accent-text); }
.door-count .mono { color: var(--bone-dim); }
.door-form { display: flex; gap: 12px; max-width: 640px; }
.door-form input { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 24px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone); background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; outline: none; }
.door-form input:focus { border-color: var(--accent); }
.door-result { margin-top: 20px; max-width: 640px; }
.door-card { border-radius: 18px; padding: 24px; display: grid; gap: 8px; justify-items: start; animation: pop .4s var(--ease-out); }
.door-card b { font-family: var(--f-serif); font-weight: 300; font-size: 36px; }
.door-card p { margin: 0; }
.door-card.is-good { background: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); border: 1px solid var(--accent); }
.door-card.is-good b { color: var(--accent-text); }
.door-card.is-warn { background: linear-gradient(rgba(255,138,61,.1), rgba(255,138,61,.1)); border: 1px solid var(--warn); }
.door-card.is-warn b { color: var(--warn); }
.door-card.is-bad { background: linear-gradient(rgba(255,93,93,.1), rgba(255,93,93,.1)); border: 1px solid var(--danger); }
.door-card.is-bad b { color: var(--danger); }

/* Wallet extras */
.ticket-facts .span-2 { grid-column: 1 / -1; }
.ticket.is-in .ticket-count { color: var(--bone-dim); }
.ticket-top { gap: 10px; flex-wrap: wrap; }

@media (max-width: 1020px) {
  .create-grid { grid-template-columns: 1fr; }
  .create-side { position: static; order: -1; }
  .flow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .show-info .info-main, .show-info .info-side { grid-column: 1 / -1; }
  .invite-card { grid-template-columns: 1fr; }
  .invite-art { min-height: 180px; }
  .tier-row { grid-template-columns: 1fr 1fr; }
  .tier-row .field:first-child, .tier-row .field:nth-child(4) { grid-column: 1 / -1; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .agenda-slot { grid-template-columns: 1fr; gap: 6px; }
  .agenda-time { padding-top: 0; }
  .finder-tools { align-items: flex-end; }
}
@media (max-width: 520px) {
  .ecard-rail > .ecard-li { flex-basis: 80vw; }
  .crew-extra { grid-template-columns: 1fr; }
  .door-form { flex-direction: column; }
  .type-tiles { grid-template-columns: 1fr 1fr; }
}



/* ==========================================================================
   Light theme — white & custard. Dark is the default; <html data-theme>
   is set before paint by the inline script in each page's <head>.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #ffffff;
  --ink-2: #fffaf0;
  --ink-3: #fbf0d4;
  --line: rgba(40, 30, 10, 0.13);
  --bone: #1c170d;
  --bone-dim: rgba(28, 23, 13, 0.62);
  --accent: #f5c64f;
  --accent-text: #8f6000;
  --on-accent: #1c170d;
  --warn: #c2560f;
  --danger: #c62f2f;
  --glass: rgba(255, 255, 255, 0.86);
  --glass-soft: rgba(255, 255, 255, 0.55);
  --scrim: rgba(255, 249, 235, 0.94);
  --seat-off: #e9e0ca;
  --band: #f5c64f;
  --band-ink: #1c170d;
}
:root[data-theme="light"] body::after { opacity: .035; }
:root[data-theme="light"] .type-tag { color: color-mix(in srgb, var(--tc, var(--bone)) 45%, #1c170d); }
:root[data-theme="light"] .status-pill[data-status="few"] { border-color: rgba(194, 86, 15, .35); }
:root[data-theme="light"] .flow-card, :root[data-theme="light"] .ticket { box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(80, 60, 10, .35); }
:root[data-theme="light"] #calendar, :root[data-theme="light"] .sheet-section { background: var(--ink-2); }
/* Zones painted over artwork keep their dark tokens in both themes */
:root[data-theme="light"] :is(.hero, .show-hero, .has-hero .site-header:not(.is-solid),  .tk-shape, .occ-inner, .flow-art, .listen-art, .venue-art, .preview-art, .ticket-reveal) {
  --ink: #0f1115; --ink-2: #181b21; --ink-3: #22262e;
  --line: rgba(236, 231, 221, 0.18); --bone: #ece7dd; --bone-dim: rgba(236, 231, 221, 0.66);
  --accent-text: #f5c64f; --glass-soft: rgba(15, 17, 21, 0.35);
  color: var(--bone);
}
:root[data-theme="light"] :is(.tk-shape, .occ-inner, .flow-art, .hero, .show-hero) .type-tag { color: var(--tc, var(--bone)); }
.ticket-code { color: #0f1115; }

/* ---------- Header: search, theme toggle ---------- */
.site-header { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px clamp(16px, 2.4vw, 36px); }
.nav { justify-self: end; }
.header-end { display: flex; align-items: center; gap: 10px; justify-self: end; }
.hsearch {
  display: flex; align-items: center; gap: 10px; justify-self: start; width: min(480px, 100%); height: 44px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--line); text-shadow: none;
  background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s, background .3s;
}
.hsearch:focus-within { border-color: var(--accent); background: linear-gradient(color-mix(in srgb, var(--bone) 12%, transparent), color-mix(in srgb, var(--bone) 12%, transparent)); }
.hsearch svg { width: 18px; height: 18px; flex: none; opacity: .7; }
.hsearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: inherit; font: inherit; font-size: 15px; }
.hsearch input::placeholder { color: var(--bone-dim); }
.hsearch input::-webkit-search-cancel-button { filter: grayscale(1); }
.hsearch-sep { width: 1px; height: 20px; background: var(--line); flex: none; }
.hsearch select { background: none; border: 0; color: inherit; font: inherit; font-size: 14px; cursor: pointer; outline: none; max-width: 130px; }
.hsearch select option { background: var(--ink); color: var(--bone); }
.theme-btn {
  width: 38px; height: 38px; display: grid; place-items: center; flex: none; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line); background: var(--glass-soft); color: inherit;
  transition: border-color .3s, transform .5s var(--ease-out);
}
.theme-btn:hover { border-color: var(--accent); transform: rotate(-20deg); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .i-moon, :root[data-theme="light"] .theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-moon { display: block; }
@media (max-width: 1180px) { .hsearch-sep, .hsearch-pin, .hsearch select { display: none; } }
@media (max-width: 1020px) { .hsearch { display: none; } .site-header { grid-template-columns: auto 1fr auto; } .nav { justify-self: center; } }

/* ---------- Live ticker (announcement bar) ---------- */
.ticker {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  margin: calc(-1 * (env(safe-area-inset-top, 0px) + 20px)) calc(-1 * var(--gutter)) 0;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--gutter) 8px;
  background: var(--band); color: var(--band-ink); text-shadow: none; font-size: 14px; line-height: 1.3;
  transition: margin .4s ease;
}
.site-header.is-solid .ticker { margin-top: calc(-1 * (env(safe-area-inset-top, 0px) + 12px)); }
.ticker-live { display: inline-flex; align-items: center; gap: 7px; flex: none; font-weight: 500; }
.ticker-view { flex: 1; min-width: 0; text-align: center; overflow: hidden; }
.ticker-line { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .35s, transform .35s var(--ease-out); }
.ticker-line.is-out { opacity: 0; transform: translateY(-8px); }
.ticker-line a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ticker-line b { font-weight: 700; }
.ticker-x { flex: none; width: 26px; height: 26px; border-radius: 999px; border: 0; background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)); cursor: pointer; font-size: 16px; line-height: 1; color: inherit; }
.ticker-x:hover { background: linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .16)); }
body.has-ticker:not(.has-hero) main { margin-top: 38px; }

.live-dot { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; flex: none; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ff4d4d; opacity: 0; animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- Shout headings (custard marker highlight) ---------- */
.shout { margin: 0; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(56px, 9vw, 136px); line-height: .88; letter-spacing: -.005em; }
.shout span {
  color: var(--on-accent); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 10%, var(--accent) 10% 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  transition: background-size 1s .2s var(--ease-out);
}
.shout.is-in span, .is-in .shout span, .page-head .shout span, .host-band .shout span { background-size: 100% 100%; }
.page-head .shout { font-size: clamp(60px, 13vw, 200px); }

/* ---------- Booking fast (home) ---------- */
#popular { padding-top: clamp(56px, 7vw, 96px); }
.pop-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.pop-sub { margin: 0; max-width: 34ch; color: var(--bone-dim); font-size: 17px; }
.pop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(28px, 4vw, 44px); }
.next-up a { border-bottom: 1px solid var(--line); }
.next-up b { color: var(--accent-text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Ranked rows (home + events list view) ---------- */
.rank-list { --thumb: clamp(84px, 8.5vw, 116px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
.rank { position: relative; border-top: 1px solid var(--line); }
@media (hover: hover) { .rank-list:has(.rank-link:hover) .rank:not(:has(.rank-link:hover)) { opacity: .55; } }
.rank { transition: opacity .4s ease; }
.rank-link { display: grid; grid-template-columns: var(--thumb) auto minmax(0, 1fr) auto; align-items: center; padding: 22px 0 26px; perspective: 700px; }
.rank-thumb { position: relative; width: var(--thumb); aspect-ratio: 1; border-radius: 10px; overflow: hidden; transform-origin: left center; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.rank-thumb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, transparent 1px 14%); opacity: 0; transform: translateY(-30%); transition: opacity .5s, transform 1s var(--ease-out); pointer-events: none; }
.rank-link:hover .rank-thumb, .rank-link:focus-visible .rank-thumb { transform: rotateY(-16deg) scale(1.06); box-shadow: 18px 18px 30px -16px rgba(0, 0, 0, .55); }
.rank-link:hover .rank-thumb::after { opacity: 1; transform: translateY(0); }
.rank-num {
  position: relative; z-index: 1; margin-left: -.42em; margin-right: clamp(12px, 1.6vw, 24px);
  font-weight: 800; font-variation-settings: "wdth" 62; font-size: clamp(64px, 6.6vw, 100px); line-height: .8; letter-spacing: -.02em;
  color: var(--accent-text); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--accent-text);
  background:
    linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 0% no-repeat,
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 3px, transparent 3px 9px);
  -webkit-background-clip: text; background-clip: text;
  transition: background-size .6s var(--ease-out), transform .6s var(--ease-out);
}
.rank-link:hover .rank-num, .rank-link:focus-visible .rank-num { background-size: 100% 100%, auto; transform: translateX(6px); }
.rank-body { display: grid; gap: 6px; min-width: 0; }
.rank-title { display: flex; align-items: center; gap: 8px; font-size: clamp(18px, 1.6vw, 23px); font-weight: 600; line-height: 1.15; }
.rank-title > span:first-of-type { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.verified { width: 20px; height: 20px; flex: none; }
.rank-move { flex: none; font-family: var(--f-mono); font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: 6px; }
.rank-move.up { color: var(--c-done); }
.rank-move.down { color: var(--bone-dim); }
.rank-meta { color: var(--bone-dim); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-meta i { font-style: normal; margin: 0 8px; opacity: .5; }
.live-line { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.live-line.is-quiet { color: var(--bone-dim); }
.live-line.is-out { color: var(--bone-dim); text-decoration: line-through; text-decoration-color: var(--line); }
.rank-cta { display: grid; justify-items: end; gap: 8px; padding-left: 16px; }
.rank-price { font-weight: 700; font-size: 16px; white-space: nowrap; }
.rank-go { display: inline-flex; gap: 6px; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .5s var(--ease-out); }
.rank-go i { font-style: normal; transition: transform .4s var(--ease-out); }
.rank-link:hover .rank-go, .rank-link:focus-visible .rank-go { opacity: 1; transform: none; }
.rank-link:hover .rank-go i { transform: translateX(3px); }
@media (hover: none) { .rank-go { opacity: 1; transform: none; } }
.rank-meter { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.rank-meter i { display: block; height: 100%; width: calc(var(--fill) * 100%); background: var(--accent); border-radius: 0 3px 3px 0; transform: scaleX(0); transform-origin: left; transition: transform 1.4s .25s var(--ease-out); }
.rank.is-in .rank-meter i { transform: scaleX(1); }
.rank-meter em { position: absolute; right: 0; bottom: 8px; font-style: normal; color: var(--bone-dim); opacity: 0; transition: opacity .3s; }
@media (hover: hover) { .rank-link:hover .rank-meter em { opacity: 1; } }
.rank-link[data-status="soldout"] .rank-meter i { background: var(--bone-dim); }
.rank-list > .empty { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .rank-list { grid-template-columns: 1fr; --thumb: 78px; }
  .rank-link { grid-template-columns: var(--thumb) auto minmax(0, 1fr); padding: 18px 0 20px; }
  .rank-num { font-size: 60px; }
  .rank-cta { grid-column: 3; justify-items: start; padding: 10px 0 0; display: flex; align-items: center; gap: 12px; }
  .rank-go { padding: 5px 12px; }
  .rank-meta { white-space: normal; }
}

/* ---------- Poster thumbnails (composed from each event's art) ---------- */
.poster { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 9%; color: #fff; overflow: hidden; container-type: inline-size; isolation: isolate; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.35)); }
.poster-glyph { position: absolute; right: -6%; top: -10%; font-size: 70cqw; line-height: 1; opacity: .16; z-index: -1; }
.poster-title { font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; line-height: .84; font-size: 17cqw; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0,0,0,.35); overflow-wrap: anywhere; }
.poster-title b { font-weight: inherit; }
.poster-title b:nth-child(2n) { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; font-variation-settings: "SOFT" 100; color: #ffe39a; }
.poster-foot { display: flex; justify-content: space-between; gap: 6px; padding-top: 5%; border-top: 1px solid rgba(255,255,255,.4); font-family: var(--f-mono); font-size: 7.5cqw; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.poster.p-top .poster-title { grid-row: 1; }
.poster.p-top .poster-foot { grid-row: 3; }
.poster.p-bottom .poster-title { grid-row: 2; align-self: end; padding-bottom: 6%; }
.poster.p-bottom .poster-foot { grid-row: 3; }
.poster.p-side .poster-title { grid-row: 1 / 3; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: start; font-size: 15cqw; max-height: 100%; }
.poster.p-side .poster-foot { grid-row: 3; }
.poster.is-mini .poster-title, .poster.is-mini .poster-foot { display: none; }
.poster.is-mini .poster-glyph { position: static; display: grid; place-items: center; grid-row: 1 / -1; font-size: 50cqw; opacity: .9; }

/* ---------- Activity feed ---------- */
.feed { position: fixed; z-index: 60; left: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); max-width: min(360px, calc(100% - 32px)); transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform .6s var(--ease-out), opacity .4s; pointer-events: none; }
.feed.is-on { transform: none; opacity: 1; pointer-events: auto; }
.feed-link { display: flex; align-items: center; gap: 12px; padding: 8px 40px 8px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -20px rgba(0,0,0,.5); font-size: 14px; line-height: 1.3; }
.feed-thumb { position: relative; width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; }
.feed-text span { color: var(--bone-dim); font-size: 12px; }
.feed-x { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 999px; background: none; color: var(--bone-dim); cursor: pointer; font-size: 16px; }
.feed-x:hover { color: var(--bone); }
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; } }

/* ---------- Host band ---------- */
.host-band { position: relative; overflow: hidden; margin-top: clamp(40px, 5vw, 72px); padding: clamp(28px, 5vw, 64px); border-radius: 28px; background: var(--band); color: var(--band-ink); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px 48px; align-items: end; }
.host-band::after { content: ""; position: absolute; inset: 0 0 0 55%; background: repeating-linear-gradient(180deg, rgba(0,0,0,.07) 0 12px, transparent 12px 24px); mask-image: linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.host-band > * { position: relative; z-index: 1; }
.host-band .shout { grid-column: 1 / -1; font-size: clamp(44px, 7.4vw, 112px); }
.host-band .shout span { background: none; color: inherit; font-family: var(--f-serif); font-style: italic; font-weight: 300; text-transform: none; font-variation-settings: "SOFT" 100; }
.host-band-copy { margin: 0; font-size: clamp(16px, 1.4vw, 19px); max-width: 48ch; }
.btn-dark { background: var(--band-ink); color: var(--band); }
@media (max-width: 720px) { .host-band { grid-template-columns: 1fr; } }
.cal-day.is-today { position: relative; color: var(--bone); }
.cal-day.is-today::after { content: ""; position: absolute; inset: 14%; border-radius: 999px; border: 2px solid var(--accent); }
:root[data-theme="light"] body:not(.has-hero) .site-header, :root[data-theme="light"] .site-header.is-solid { text-shadow: none; }

/* ==========================================================================
   Ticket card — espresso stub, side bites at the tear line, a curved notch
   at the foot, outlined date numeral, louvred art, pointer tilt + glare.
   ========================================================================== */
:root {
  --notch-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30C34 30 44 0 76 0H124C156 0 166 30 200 30Z'/%3E%3C/svg%3E");
  --notch-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0C34 0 44 30 76 30H124C156 30 166 0 200 0Z'/%3E%3C/svg%3E");
  --espresso-1: #2d2219;
  --espresso-2: #150f0a;
  --cream: #f3e9da;
}
.ecard-li { display: flex; }
.tk {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%; --cut: 86cqw;
  position: relative; display: block; width: 100%; container-type: inline-size;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s var(--ease-out), translate .6s var(--ease-out), filter .6s;
  filter: drop-shadow(0 24px 24px rgba(30, 18, 6, .28));
}
.tk:hover, .tk:focus-visible { translate: 0 -8px; filter: drop-shadow(0 34px 30px rgba(30, 18, 6, .36)); }
.tk:focus-visible { outline: none; }
.tk:focus-visible .tk-shape { box-shadow: inset 0 0 0 2px var(--accent); }
.tk-shape {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 22px; color: var(--cream);
  background:
    radial-gradient(120% 55% at 100% 100%, color-mix(in srgb, var(--tc, #f5c64f) 24%, transparent), transparent 62%),
    linear-gradient(165deg, var(--espresso-1), var(--espresso-2) 72%);
  -webkit-mask: radial-gradient(circle 14px at 0 var(--cut), #000 96%, transparent 100%), radial-gradient(circle 14px at 100% var(--cut), #000 96%, transparent 100%), var(--notch-b) 50% 100% / 58% 30px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: radial-gradient(circle 14px at 0 var(--cut), #000 96%, transparent 100%), radial-gradient(circle 14px at 100% var(--cut), #000 96%, transparent 100%), var(--notch-b) 50% 100% / 58% 30px no-repeat, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.tk-art { position: relative; aspect-ratio: 1 / .86; overflow: hidden; flex: none; }
.tk-slats { position: absolute; inset: 0; perspective: 700px; }
.tk-slat { position: absolute; left: 0; right: 0; top: calc(var(--i) * 100% / 6); height: calc(100% / 6 + 1px); overflow: hidden; transform-origin: 50% 0; transition: transform .8s var(--ease-out), filter .8s; transition-delay: calc(var(--i) * 30ms); }
.tk-slat > span { position: absolute; left: 0; right: 0; transform: scale(1.02); transition: transform 1.4s var(--ease-out); }
.tk:hover .tk-slat, .tk:focus-visible .tk-slat { transform: rotateX(-24deg) scaleY(.93); filter: brightness(calc(1.1 - var(--i) * .05)); }
.tk:hover .tk-slat > span { transform: scale(1.1); }
.tk-art::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(0deg, var(--espresso-1), transparent); pointer-events: none; }
.tk-chips { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tk-chips .type-tag, .tk-chips .status-pill { background: rgba(21, 15, 10, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .08); color: var(--tc, var(--cream)); }
.tk-chips .status-pill { color: var(--cream); }
.tk-chips .status-pill[data-status="few"] { color: #ffb27a; }
.tk-date { position: absolute; z-index: 2; right: 16px; top: calc(var(--cut) - 52px); display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.tk-date b {
  font-weight: 800; font-variation-settings: "wdth" 100; font-size: 74px; line-height: .78; letter-spacing: -.04em;
  color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--cream);
  background: linear-gradient(#f5c64f, #f5c64f) 0 100% / 100% 0% no-repeat; -webkit-background-clip: text; background-clip: text;
  transition: background-size .7s var(--ease-out), -webkit-text-stroke-color .4s;
}
.tk:hover .tk-date b, .tk.is-featured .tk-date b { background-size: 100% 100%; -webkit-text-stroke-color: #f5c64f; }
.tk-date span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; opacity: .75; padding-bottom: 2px; }
.tk-body { position: relative; display: grid; gap: 4px; padding: 20px 20px 0; }
.tk-body::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; border-top: 2px dashed rgba(243, 233, 218, .18); }
.tk-kicker { margin: 0; color: rgba(243, 233, 218, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30cqw; }
.tk-title { margin: 2px 0 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(26px, 12.5cqw, 44px); line-height: .9; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .4s; }
.tk:hover .tk-title { color: #fff; }
.tk-meta { margin: 4px 0 0; font-size: 14px; color: rgba(243, 233, 218, .66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 46px; }
.tk-price { display: grid; line-height: 1.05; }
.tk-price small { font-size: 10px; color: rgba(243, 233, 218, .55); }
.tk-price b { font-size: 26px; font-weight: 700; font-variation-settings: "wdth" 80; color: #f5c64f; letter-spacing: -.01em; }
.tk[data-status="soldout"] .tk-price b, .tk[data-status="past"] .tk-price b { color: rgba(243, 233, 218, .5); text-decoration: line-through; }
.tk-go { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(243, 233, 218, .35); transition: background .4s, color .4s, border-color .4s, transform .6s var(--ease-out); }
.tk-go svg { width: 20px; height: 20px; }
.tk:hover .tk-go, .tk:focus-visible .tk-go { background: #f5c64f; border-color: #f5c64f; color: #17110b; transform: rotate(-45deg); }
.tk-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 240, 210, .22), transparent 42%); opacity: 0; transition: opacity .5s; mix-blend-mode: screen; }
.tk:hover .tk-glare { opacity: 1; }
.tk-notch { position: absolute; left: 50%; bottom: 7px; translate: -50% 0; font-size: 10px; letter-spacing: .14em; color: var(--bone-dim); white-space: nowrap; transition: color .4s, letter-spacing .6s var(--ease-out); }
.tk:hover .tk-notch { color: var(--accent-text); letter-spacing: .2em; }
.tk.is-featured .tk-shape { box-shadow: inset 0 0 0 2px #f5c64f; }

/* Dealt in like cards whenever a list re-renders */
.is-dealing > .ecard-li { animation: deal .9s var(--ease-out) both; animation-delay: calc(min(var(--i), 8) * 70ms); }
@keyframes deal { from { opacity: 0; transform: translate(70px, 26px) rotate(6deg); } }

/* ==========================================================================
   (03) Occasion stage
   ========================================================================== */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #f5c64f; }

.occ-stage { --glow: #f5c64f; --nw: clamp(320px, 36vw, 540px); --nh: clamp(44px, 5vw, 70px); --pad: clamp(22px, 2.6vw, 36px); position: relative; transition: --glow 1.1s ease; }
.occ-panel {
  position: absolute; inset: 0; overflow: hidden; border-radius: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(60% 80% at 0% 100%, rgba(245, 198, 79, .08), transparent 60%),
    linear-gradient(160deg, #31251b, #160f0a 70%);
  -webkit-mask: var(--notch-t) 50% 0 / var(--nw) var(--nh) no-repeat, var(--notch-b) 50% 100% / var(--nw) var(--nh) no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: var(--notch-t) 50% 0 / var(--nw) var(--nh) no-repeat, var(--notch-b) 50% 100% / var(--nw) var(--nh) no-repeat, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.occ-glow { position: absolute; left: 52%; top: 50%; width: min(70%, 760px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 34%, transparent), transparent 62%); animation: glowBreath 7s ease-in-out infinite; }
@keyframes glowBreath { 50% { scale: 1.14; opacity: .75; } }
.occ-lines { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 26px); mask-image: linear-gradient(90deg, #000, transparent 45%, transparent 55%, #000); -webkit-mask-image: linear-gradient(90deg, #000, transparent 45%, transparent 55%, #000); }
.occ-inner {
  position: relative; z-index: 1; min-height: clamp(580px, 50vw, 740px);
  display: grid; grid-template-columns: 28px minmax(0, 1.25fr) clamp(250px, 22vw, 320px) minmax(0, .75fr); grid-template-rows: auto 1fr auto;
  column-gap: clamp(16px, 2.6vw, 44px); padding: var(--pad) clamp(20px, 3vw, 44px); color: var(--cream);
}
.occ-bar { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; color: rgba(243, 233, 218, .6); }
.occ-bar b { color: #f5c64f; font-weight: 500; }
.occ-pager { grid-column: 1; grid-row: 2; align-self: center; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 60%; overflow: hidden; }
.occ-pager button { position: relative; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; writing-mode: vertical-rl; transform: rotate(180deg); background: none; border: 0; padding: 6px 4px; color: rgba(243, 233, 218, .68); cursor: pointer; transition: color .4s; }
.occ-pager button::before { content: ""; position: absolute; left: -6px; top: 50%; translate: 0 -50%; width: 2px; height: 0; background: #f5c64f; transition: height .5s var(--ease-out); }
.occ-pager button[aria-current="true"] { color: #f5c64f; }
.occ-pager button[aria-current="true"]::before { height: 100%; }
.occ-pager button:hover { color: var(--cream); }
.occ-copy { grid-column: 2; grid-row: 2; align-self: center; display: grid; gap: clamp(10px, 1.4vw, 18px); justify-items: start; min-width: 0; }
.occ-kicker { margin: 0; color: rgba(243, 233, 218, .65); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.occ-kicker .type-tag { color: var(--tc); }
.occ-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 108; font-size: clamp(48px, 6.4vw, 108px); line-height: .92; letter-spacing: -.035em; color: #fff; max-width: 100%; overflow-wrap: anywhere; }
.occ-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.occ-title .ch { display: inline-block; transform: translateY(110%) rotate(8deg); animation: chUp .9s var(--ease-out) forwards; animation-delay: calc(var(--d) * 26ms); }
@keyframes chUp { to { transform: none; } }
.occ-outline { margin: 0; font-weight: 800; font-variation-settings: "wdth" 112; font-size: clamp(56px, 7.6vw, 128px); line-height: .88; letter-spacing: -.03em; white-space: nowrap; color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--cream); }
.occ-outline.is-drawn { animation: drawIn 1.2s .2s var(--ease-out) both; }
@keyframes drawIn { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 -2% 0 0); opacity: 1; } }
.occ-price { margin: 4px 0 0; display: grid; gap: 4px; }
.occ-price b { font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; color: #f5c64f; }
.occ-price span { color: rgba(243, 233, 218, .65); font-size: 15px; }
.occ-price.is-up { animation: fadeUp .8s .35s var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
.occ-explore { border-bottom: 1px solid rgba(243, 233, 218, .25); padding-bottom: 4px; color: var(--cream); transition: color .3s, border-color .3s; }
.occ-explore:hover { color: #f5c64f; border-color: #f5c64f; }
.occ-center { grid-column: 3; grid-row: 1 / -1; display: grid; align-items: center; perspective: 1400px; margin-top: calc(-1 * var(--pad) + 14px); margin-bottom: calc(var(--nh) - var(--pad) + 10px); }
.occ-center > .tk { grid-area: 1 / 1; }
.tk--hero { filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .45)); }
.tk.is-in { animation: tkIn .95s var(--ease-out) both; }
.tk.is-in-back { animation: tkInBack .95s var(--ease-out) both; }
.tk.is-out { animation: tkOut .42s var(--ease) both; pointer-events: none; }
.tk.is-out-back { animation: tkOutBack .42s var(--ease) both; pointer-events: none; }
@keyframes tkIn { from { opacity: 0; transform: perspective(1000px) translateY(70px) rotateX(-70deg) scale(.92); } }
@keyframes tkInBack { from { opacity: 0; transform: perspective(1000px) translateY(-70px) rotateX(70deg) scale(.92); } }
@keyframes tkOut { to { opacity: 0; transform: perspective(1000px) translateY(-60px) rotateX(60deg) scale(.94); } }
@keyframes tkOutBack { to { opacity: 0; transform: perspective(1000px) translateY(60px) rotateX(-60deg) scale(.94); } }
.occ-side { grid-column: 4; grid-row: 2; align-self: center; justify-self: end; display: grid; justify-items: center; gap: 12px; }
.occ-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(243, 233, 218, .25); background: none; color: var(--cream); cursor: pointer; transition: background .3s, color .3s, transform .4s var(--ease-out); }
.occ-arrow:hover:not(:disabled) { background: var(--cream); color: #17110b; }
.occ-arrow:first-child:hover:not(:disabled) { transform: translateX(-3px); }
.occ-arrow:last-child:hover:not(:disabled) { transform: translateX(3px); }
.occ-arrow:disabled { opacity: .25; cursor: default; }
.occ-thumb { width: clamp(120px, 11vw, 158px); display: grid; gap: 6px; padding: 10px; border-radius: 22px; border: 1px solid rgba(243, 233, 218, .18); background: linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .03)); color: var(--cream); text-align: left; cursor: pointer; transition: border-color .4s, background .4s; }
.occ-thumb:hover { border-color: #f5c64f; background: linear-gradient(rgba(245, 198, 79, .06), rgba(245, 198, 79, .06)); }
.occ-thumb-art { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; transition: transform .6s var(--ease-out); }
.occ-thumb:hover .occ-thumb-art { transform: rotate(-3deg) scale(1.04); }
.occ-thumb .mono { font-size: 9px; color: rgba(243, 233, 218, .55); }
.occ-thumb b { font-size: 13px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.occ-thumb.is-swap { animation: thumbSwap .8s .1s var(--ease-out) both; }
@keyframes thumbSwap { from { opacity: 0; transform: translateY(20px) scale(.92); } }
.occ-go { grid-column: 4; grid-row: 3; justify-self: end; align-self: end; position: relative; width: 62px; height: 62px; display: grid; place-items: center; color: var(--cream); font-size: 22px; }
.occ-go svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.occ-ring-bg { fill: none; stroke: rgba(243, 233, 218, .22); stroke-width: 1.5; }
.occ-ring { fill: none; stroke: #f5c64f; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.occ-ring.is-running { animation: ringFill 7s linear forwards; }
@keyframes ringFill { to { stroke-dashoffset: 0; } }
.occ-stage:hover .occ-ring, .occ-stage:focus-within .occ-ring, .occ-stage.is-paused .occ-ring { animation-play-state: paused; }
.occ-go span { transition: transform .5s var(--ease-out); }
.occ-go:hover span { transform: rotate(-45deg); color: #f5c64f; }
.occ-cta { position: absolute; z-index: 2; left: 50%; bottom: 0; translate: -50% 0; height: var(--nh); display: grid; place-items: center; padding: 0 20px; font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--bone); }
.occ-cta::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: calc(50% - 14px); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.occ-cta:hover::after { transform: scaleX(1); transform-origin: left; }

.occ-railhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin: clamp(44px, 5vw, 72px) 0 0; }
.occ-railcount { margin: 0; display: flex; align-items: flex-end; gap: 14px; }
.occ-railcount > b { font-weight: 800; font-variation-settings: "wdth" 100; font-size: clamp(64px, 7vw, 108px); line-height: .78; letter-spacing: -.04em; color: var(--bone); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--bone); font-variant-numeric: tabular-nums; }
.occ-railcount > span { display: grid; gap: 6px; padding-bottom: 4px; }
[data-finder-what] { font-size: clamp(20px, 2vw, 28px); font-weight: 600; line-height: 1.1; }
.occ-private { color: var(--bone-dim); }
:root[data-theme="dark"] .occ-panel { background: radial-gradient(60% 80% at 0% 100%, rgba(245, 198, 79, .1), transparent 60%), linear-gradient(160deg, #3a2c20, #1b130d 70%); }

@media (max-width: 1100px) {
  .occ-inner { grid-template-columns: 0 minmax(0, 1fr) clamp(230px, 28vw, 290px) auto; }
  .occ-pager { visibility: hidden; }
  .occ-thumb { width: 110px; }
}
@media (max-width: 860px) {
  .occ-stage { --nw: min(78vw, 360px); --nh: 46px; --pad: 22px; }
  .occ-inner { min-height: 0; grid-template-columns: 1fr; grid-template-rows: none; row-gap: 22px; padding: 30px 20px calc(var(--nh) + 22px); }
  .occ-bar, .occ-pager { display: none; }
  .occ-center { grid-column: 1; grid-row: 1; width: min(300px, 76vw); justify-self: center; margin: -42px 0 0; }
  .occ-copy { grid-column: 1; grid-row: 2; justify-items: center; text-align: center; }
  .occ-kicker { justify-content: center; }
  .occ-title { font-size: clamp(40px, 12vw, 64px); }
  .occ-outline { font-size: clamp(48px, 15vw, 84px); }
  .occ-side { grid-column: 1; grid-row: 3; justify-self: center; grid-auto-flow: column; align-items: center; }
  .occ-thumb { display: none; }
  .occ-go { grid-column: 1; grid-row: 3; justify-self: end; align-self: center; width: 54px; height: 54px; }
  .occ-cta { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .occ-title .ch { transform: none; animation: none; }
  .occ-glow, .occ-ring.is-running, .tk.is-in, .tk.is-in-back, .is-dealing > .ecard-li { animation: none; }
}

/* Footer brand: giant Vybe + "by Goldpurp" */
.footer-brand { position: relative; }
.footer-by { position: absolute; right: 0; bottom: 12%; margin: 0; display: grid; justify-items: end; gap: 4px; text-align: right; }
.footer-by .mono { color: var(--bone-dim); }
.footer-by b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 3vw, 44px); color: var(--accent-text); line-height: 1; }
@media (max-width: 720px) { .footer-by { position: static; justify-items: start; text-align: left; margin-top: 16px; } }

/* ==========================================================================
   Wallet ticket — same espresso stub language as the cards
   ========================================================================== */
.ticket-wrap { position: relative; filter: drop-shadow(0 24px 26px rgba(30, 18, 6, .3)); transition: translate .6s var(--ease-out); }
.ticket-wrap:hover { translate: 0 -4px; }
.ticket-wrap.is-past { opacity: .6; }
.ticket-wrap .ticket {
  --bx: 200px; border: 0; border-radius: 24px; color: var(--cream);
  background:
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--tc, #f5c64f) 20%, transparent), transparent 60%),
    linear-gradient(160deg, var(--espresso-1), var(--espresso-2) 75%);
  -webkit-mask: radial-gradient(circle 16px at var(--bx) 0, #000 96%, transparent 100%), radial-gradient(circle 16px at var(--bx) 100%, #000 96%, transparent 100%), var(--notch-b) calc(50% + var(--bx) / 2) 100% / 44% 30px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: radial-gradient(circle 16px at var(--bx) 0, #000 96%, transparent 100%), radial-gradient(circle 16px at var(--bx) 100%, #000 96%, transparent 100%), var(--notch-b) calc(50% + var(--bx) / 2) 100% / 44% 30px no-repeat, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.ticket-wrap .ticket::before, .ticket-wrap .ticket::after { display: none; }
.ticket-wrap .ticket.is-past { opacity: 1; }
.ticket-wrap .ticket-reveal { border-right: 2px dashed rgba(243, 233, 218, .16); }
.ticket-wrap .ticket-body { min-width: 0; padding: 22px 24px 48px; gap: 8px; }
.ticket-wrap .ticket-count { color: #f5c64f; }
.ticket-wrap .muted, .ticket-wrap .ticket-facts dt { color: rgba(243, 233, 218, .58); }
.ticket-wrap .type-tag { color: var(--tc); }
.tw-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 6px; }
.tw-head > div:first-child { min-width: 0; }
.tw-head .mono { margin: 6px 0 0; }
.tw-title { overflow-wrap: anywhere; margin: 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(30px, 3vw, 44px); line-height: .9; letter-spacing: -.01em; }
.tw-title a { transition: color .3s; }
.tw-title a:hover { color: #f5c64f; }
.tw-date { display: flex; align-items: flex-end; gap: 8px; flex: none; }
.tw-date b { font-weight: 800; font-variation-settings: "wdth" 100; font-size: 76px; line-height: .78; letter-spacing: -.04em; color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--cream); background: linear-gradient(#f5c64f, #f5c64f) 0 100% / 100% 0% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-size .7s var(--ease-out), -webkit-text-stroke-color .4s; }
.ticket-wrap:hover .tw-date b { background-size: 100% 100%; -webkit-text-stroke-color: #f5c64f; }
.tw-date span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; opacity: .7; }
.ticket-wrap .ticket-facts { padding-top: 14px; border-top: 1px solid rgba(243, 233, 218, .12); }
.ticket-wrap .link-btn { color: rgba(243, 233, 218, .7); border-color: rgba(243, 233, 218, .2); }
.ticket-wrap .link-btn:hover { color: #f5c64f; border-color: #f5c64f; }
.tw-go { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(243, 233, 218, .35); margin-right: 6px; transition: background .4s, color .4s, border-color .4s, transform .6s var(--ease-out); }
.tw-go svg { width: 18px; height: 18px; }
.tw-go:hover { background: #f5c64f; border-color: #f5c64f; color: #17110b; transform: rotate(-45deg); }
.tw-notch { position: absolute; bottom: 8px; left: calc(50% + 100px); translate: -50% 0; font-size: 10px; letter-spacing: .16em; color: var(--bone-dim); white-space: nowrap; }
@media (max-width: 860px) {
  .ticket-wrap .ticket {
    -webkit-mask: radial-gradient(circle 16px at 0 220px, #000 96%, transparent 100%), radial-gradient(circle 16px at 100% 220px, #000 96%, transparent 100%), var(--notch-b) 50% 100% / 56% 30px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: radial-gradient(circle 16px at 0 220px, #000 96%, transparent 100%), radial-gradient(circle 16px at 100% 220px, #000 96%, transparent 100%), var(--notch-b) 50% 100% / 56% 30px no-repeat, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  .ticket-wrap .ticket-reveal { border-right: 0; border-bottom: 2px dashed rgba(243, 233, 218, .16); }
  .tw-notch { left: 50%; }
  .tw-date b { font-size: 60px; }
}
/* Stage sizing: the hero ticket rises into the top notch and stops above the bottom one */
.tk--hero { --cut: 66cqw; }
.tk--hero .tk-art { aspect-ratio: 1 / .66; }
.tk--hero .tk-title { font-size: clamp(26px, 11cqw, 40px); }
.occ-title { font-size: clamp(44px, 5.4vw, 92px); }
.occ-outline { font-size: clamp(50px, 6.2vw, 108px); }
.occ-center { align-items: start; }
@media (min-width: 861px) {
  .occ-inner { min-height: clamp(540px, 44vw, 660px); grid-template-columns: 28px minmax(0, 1.2fr) clamp(270px, 25vw, 340px) minmax(0, .7fr); }
}
@media (min-width: 861px) and (max-width: 1100px) { .occ-inner { grid-template-columns: 0 minmax(0, 1fr) clamp(250px, 28vw, 300px) auto; } }
.tk { --cut: 76cqw; }
.tk-art { aspect-ratio: 1 / .76; }
.tk-notch { bottom: 8px; }
.tk.tk--hero { --cut: 66cqw; }
.tk.tk--hero .tk-art { aspect-ratio: 1 / .66; }
:root[data-theme="light"] :is(.ticket-wrap, .tk-shape, .occ-inner) .type-tag { color: var(--tc); }
.footer-giant { letter-spacing: -.035em !important; }
:root[data-theme="light"] .footer-giant { color: var(--accent); -webkit-text-stroke: 0; }
:root:not([data-theme="light"]) { --espresso-1: #3b2c20; --espresso-2: #1f160f; }

/* ==========================================================================
   Category index — oversized outlined words. Hover fills them in, the picked
   one gets a custard marker bar; a poster of its next event trails the cursor.
   ========================================================================== */
.cidx { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px clamp(14px, 1.8vw, 28px); margin: 0 0 clamp(28px, 3.4vw, 48px); }
.cidx-item { position: relative; display: inline-flex; align-items: flex-start; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--bone); font: inherit; flex: none; }
.cidx-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.cidx-glyph { font-style: normal; font-size: clamp(12px, 1vw, 16px); line-height: 1; margin-top: .55em; color: var(--tc, var(--accent-text)); opacity: .5; transition: transform .6s var(--ease-out), opacity .4s; }
.cidx-item[data-type="all"] { --tc: var(--accent-text); }
.cidx-word {
  position: relative; isolation: isolate;
  font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase;
  font-size: clamp(40px, 5.4vw, 88px); line-height: .94; letter-spacing: -.005em;
  color: color-mix(in srgb, var(--bone) 50%, transparent); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--bone) 50%, transparent);
  background: linear-gradient(var(--bone), var(--bone)) 0 0 / 0% 100% no-repeat; -webkit-background-clip: text; background-clip: text;
  transition: background-size .7s var(--ease-out), -webkit-text-stroke-color .4s, color .35s .15s;
}
.cidx-word::before { content: ""; position: absolute; z-index: -1; inset: 4% -.1em 2%; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform .75s var(--ease-out); }
.cidx-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; line-height: 1; margin-top: .45em; color: var(--bone-dim); transition: color .3s; }
@media (hover: hover) {
  .cidx-item:not(:disabled):hover .cidx-word { background-size: 100% 100%; -webkit-text-stroke-color: var(--bone); }
  .cidx-item:not(:disabled):hover .cidx-glyph { transform: rotate(-20deg) scale(1.35); opacity: 1; }
}
.cidx-item[aria-pressed="true"] .cidx-word { color: var(--on-accent); -webkit-text-stroke-color: transparent; background-size: 0% 100%; -webkit-text-fill-color: currentColor; }
.cidx-item[aria-pressed="true"] .cidx-word::before { transform: scaleX(1); transform-origin: left; }
.cidx-item[aria-pressed="true"] .cidx-glyph { opacity: 1; transform: rotate(-12deg); }
.cidx-item[aria-pressed="true"] .cidx-n { color: var(--accent-text); }
.cidx-item:disabled { opacity: .25; cursor: not-allowed; }
.cidx--sm .cidx-word { font-size: clamp(30px, 3.6vw, 56px); }
.filters .cidx { margin: 8px 0 4px; }
/* entrance: words rise one after another */
.cidx.reveal { opacity: 1; transform: none; }
.cidx.reveal .cidx-item { opacity: 0; transform: translateY(36px); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
.cidx.reveal.is-in .cidx-item { opacity: 1; transform: none; }
.cidx.reveal.is-in .cidx-item:disabled { opacity: .25; }

.cidx-peek { position: fixed; left: 0; top: 0; z-index: 70; width: 168px; pointer-events: none; opacity: 0; scale: .6; transition: opacity .3s, scale .45s var(--ease-out); filter: drop-shadow(0 22px 30px rgba(20, 12, 4, .35)); }
.cidx-peek.is-on { opacity: 1; scale: 1; }
.cidx-peek-art { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; }
.cidx-peek-cap { display: grid; gap: 3px; margin-top: 8px; padding: 9px 11px; border-radius: 12px; background: var(--espresso-2); color: var(--cream); font-size: 13px; line-height: 1.2; }
.cidx-peek-cap span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #f5c64f; }
.cidx-peek.is-swap .cidx-peek-art { animation: peekFlip .55s var(--ease-out); }
@keyframes peekFlip { from { transform: perspective(500px) rotateY(75deg); opacity: .2; } }

@media (max-width: 860px) {
  .cidx { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 12px; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .cidx::-webkit-scrollbar { display: none; }
  .cidx-item { scroll-snap-align: start; }
  .cidx-word, .cidx--sm .cidx-word { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { .cidx.reveal .cidx-item { opacity: 1; transform: none; } .cidx-peek { display: none; } }
@media (max-width: 860px) { .cidx { scroll-padding-inline: var(--gutter); } }

/* ==========================================================================
   Host studio — dashboard shell
   ========================================================================== */
.dash-body { background: var(--ink); }
.dash { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
:root[data-theme="light"] :is(.dash-side, .kpi.is-dark, .dcard.is-dark, .published, .door-stage) {
  --ink: #0f1115; --ink-2: #181b21; --ink-3: #22262e;
  --line: rgba(236, 231, 221, 0.16); --bone: #ece7dd; --bone-dim: rgba(236, 231, 221, 0.62);
  --accent-text: #f5c64f; --glass-soft: rgba(15, 17, 21, 0.35);
}
.dash-side {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow-y: auto; z-index: 30;
  display: flex; flex-direction: column; gap: 18px; padding: calc(env(safe-area-inset-top, 0px) + 26px) 18px 22px;
  background: radial-gradient(120% 40% at 0% 0%, rgba(245, 198, 79, .12), transparent 60%), linear-gradient(180deg, var(--espresso-1), var(--espresso-2));
  color: var(--cream); border-radius: 0 28px 28px 0; scrollbar-width: none;
}
.dash-side .wordmark { padding-left: 8px; }
.dash-side .wordmark-name { font-size: 32px; }
.dash-by { margin: -10px 0 6px; padding-left: 10px; font-size: 10px; color: rgba(243, 233, 218, .5); }
.dash-nav { display: grid; gap: 4px; }
.dash-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; color: rgba(243, 233, 218, .72); font-weight: 500; transition: background .3s, color .3s, transform .4s var(--ease-out); }
.dash-nav a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dash-nav a b { margin-left: auto; font-family: var(--f-mono); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: linear-gradient(rgba(243, 233, 218, .1), rgba(243, 233, 218, .1)); }
.dash-nav a:hover { background: linear-gradient(rgba(243, 233, 218, .06), rgba(243, 233, 218, .06)); color: var(--cream); transform: translateX(3px); }
.dash-nav a[aria-current="page"] { background: #f5c64f; color: #17110b; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(245, 198, 79, .7); }
.dash-nav a[aria-current="page"] b { background: linear-gradient(rgba(23, 17, 11, .14), rgba(23, 17, 11, .14)); }
.dash-next { margin-top: 8px; }
.side-next { display: grid; gap: 4px; padding: 10px; border-radius: 18px; border: 1px solid rgba(243, 233, 218, .12); background: linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .03)); transition: border-color .3s, transform .5s var(--ease-out); }
.side-next:hover { border-color: #f5c64f; transform: translateY(-2px); }
.side-next-art { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.side-next .mono { font-size: 10px; }
.side-next b { font-size: 15px; line-height: 1.2; }
.side-next-count { color: #f5c64f; font-size: 13px !important; font-variant-numeric: tabular-nums; }
.dash-side-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 8px 0; border-top: 1px solid rgba(243, 233, 218, .1); }
.dash-side-foot a { color: rgba(243, 233, 218, .65); }
.dash-side-foot a:hover { color: #f5c64f; }
.dash-side .theme-btn { color: var(--cream); border-color: rgba(243, 233, 218, .2); background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)); }
.dash-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(10, 8, 5, .55); backdrop-filter: blur(3px); }

.dash-main { min-width: 0; padding: 0 clamp(16px, 2.4vw, 36px) 72px; }
.dash-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 0 16px; margin-bottom: clamp(20px, 2.4vw, 32px);
  background: color-mix(in srgb, var(--ink) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.dash-heading { min-width: 0; }
.dash-crumb { margin: 0 0 4px; color: var(--bone-dim); font-size: 10px; }
.dash-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(30px, 3vw, 44px); line-height: .9; white-space: nowrap; }
.dash-search { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 420px; margin-left: auto; height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-2); transition: border-color .3s; }
.dash-search:focus-within { border-color: var(--accent); }
.dash-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .6; flex: none; }
.dash-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: inherit; font: inherit; font-size: 15px; }
.dash-new { padding: 12px 20px; white-space: nowrap; }
.dash-avatar { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #f5c64f, #d99a1c); color: #17110b; font-weight: 800; font-size: 14px; letter-spacing: .02em; box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--line); }
.dash-burger { display: none; width: 42px; height: 42px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); cursor: pointer; padding: 0 11px; flex-direction: column; justify-content: center; gap: 4px; }
.dash-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.dash-burger i:nth-child(2) { width: 70%; } .dash-burger i:nth-child(3) { width: 40%; }

.dash-view.is-entering { animation: viewIn .6s var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Cards, chips ---------- */
.dcard { position: relative; border-radius: 22px; border: 1px solid var(--line); background: var(--ink-2); padding: clamp(16px, 1.6vw, 22px); min-width: 0; }
:root[data-theme="light"] .dcard, :root[data-theme="light"] .kpi { background: #fff; box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgba(80, 60, 10, .35); }
.dcard.is-dark, .kpi.is-dark { background: radial-gradient(120% 70% at 100% 0%, rgba(245, 198, 79, .14), transparent 55%), linear-gradient(160deg, var(--espresso-1), var(--espresso-2)) !important; color: var(--cream); border-color: transparent; }
.dcard--flush { padding: 0; overflow: hidden; }
.dcard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.dcard-head .eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.dcard-big { margin: 4px 0 0; color: var(--bone-dim); }
.dcard-big b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 40px; line-height: .9; color: var(--bone); margin-right: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 11px; font-style: normal; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent)); color: var(--bone-dim); white-space: nowrap; }
.chip.up { background: linear-gradient(rgba(47, 191, 113, .14), rgba(47, 191, 113, .14)); color: #2fbf71; }
.chip.down { background: linear-gradient(color-mix(in srgb, var(--danger) 14%, transparent), color-mix(in srgb, var(--danger) 14%, transparent)); color: var(--danger); }
:root[data-theme="light"] .chip.up { color: #1a8a4f; }

/* ---------- Overview ---------- */
.ov-hello { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 32px; margin-bottom: 24px; }
.ov-hello .mono { margin: 0 0 8px; }
.ov-greet { margin: 0; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(40px, 5vw, 76px); line-height: .88; }
.ov-greet span { color: var(--on-accent); padding: 0 .06em; background: linear-gradient(transparent 10%, var(--accent) 10% 90%, transparent 90%) no-repeat 0 0 / 0% 100%; animation: marker 1s .3s var(--ease-out) forwards; }
@keyframes marker { to { background-size: 100% 100%; } }
.ov-quick { display: flex; flex-wrap: wrap; gap: 10px; }
.qa { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); font-weight: 500; transition: border-color .3s, transform .4s var(--ease-out); }
.qa i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-style: normal; transition: transform .5s var(--ease-out); }
.qa:hover { border-color: var(--accent); transform: translateY(-2px); }
.qa:hover i { transform: rotate(-20deg) scale(1.08); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--ink-2); padding: 18px 20px 20px; min-height: 160px; display: grid; align-content: space-between; animation: viewIn .7s var(--ease-out) both; }
.kpi:nth-child(2) { animation-delay: .06s; } .kpi:nth-child(3) { animation-delay: .12s; } .kpi:nth-child(4) { animation-delay: .18s; }
.kpi-label { margin: 0; color: var(--bone-dim); }
.kpi-num { margin: 10px 0; }
.kpi-num b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: clamp(44px, 4vw, 66px); line-height: .85; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi.is-dark .kpi-num b { color: #f5c64f; }
.kpi-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi-foot .mono { font-size: 10px; }
.spark { position: absolute; right: 0; bottom: 0; width: 55%; height: 52px; opacity: .9; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark-fill { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
.kpi.is-dark .spark-line { stroke: #f5c64f; }

.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.ov-chart { grid-column: span 8; }
.ov-next { grid-column: span 4; grid-row: span 2; display: grid; align-content: start; }
.ov-next .tk { width: min(310px, 100%); justify-self: center; margin-top: 4px; }
.ov-events { grid-column: span 8; }
.ov-activity { grid-column: span 7; }
.ov-types { grid-column: span 5; }

.bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: clamp(4px, .8vw, 10px); height: 220px; }
.bar-col { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px; min-width: 0; cursor: default; }
.bar-col i { align-self: end; width: 100%; height: calc(var(--h) * 100%); min-height: 4px; border-radius: 9px 9px 4px 4px; background: linear-gradient(color-mix(in srgb, var(--bone) 13%, transparent), color-mix(in srgb, var(--bone) 13%, transparent)); transform-origin: bottom; animation: barUp 1s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); transition: background .3s; }
.bar-col.is-today i { background: repeating-linear-gradient(180deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 70%, #000) 8px 10px); }
.bar-col:hover i { background: var(--accent); }
.bar-val { font-size: 10px; color: var(--bone-dim); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.bar-col:hover .bar-val, .bar-col.is-today .bar-val { opacity: 1; transform: none; }
.bar-col.is-today .bar-val { color: var(--accent-text); }
.bar-day { font-size: 10px; color: var(--bone-dim); }
@keyframes barUp { from { transform: scaleY(0); } }

.ev-rows { display: grid; gap: 4px; }
.ev-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) minmax(80px, 160px) 44px; align-items: center; gap: 14px; padding: 8px; border-radius: 14px; transition: background .3s; }
.ev-row:hover { background: linear-gradient(color-mix(in srgb, var(--bone) 5%, transparent), color-mix(in srgb, var(--bone) 5%, transparent)); }
.ev-thumb { position: relative; display: block; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: none; }
.ev-thumb--lg { width: 76px; height: 76px; border-radius: 16px; }
.ev-name { display: grid; min-width: 0; }
.ev-name b, .ev-cell b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ev-name .mono { font-size: 10px; }
.ev-meter { display: block; height: 7px; border-radius: 99px; background: linear-gradient(color-mix(in srgb, var(--bone) 10%, transparent), color-mix(in srgb, var(--bone) 10%, transparent)); overflow: hidden; min-width: 70px; }
.ev-meter i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--accent); transform-origin: left; animation: meterIn 1.2s .2s var(--ease-out) both; }
@keyframes meterIn { from { transform: scaleX(0); } }
.ev-pct { text-align: right; color: var(--bone-dim); }

.act-list { list-style: none; margin: 0; padding: 0; display: grid; }
.act-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); animation: viewIn .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.act-list li:first-child { border-top: 0; }
.act-av { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); background-size: cover; }
.act-text { font-size: 14px; line-height: 1.35; min-width: 0; }
.act-text .muted { font-size: 13px; }
.act-when { font-size: 10px; color: var(--bone-dim); display: grid; justify-items: end; gap: 4px; text-align: right; }

.type-bar { display: grid; grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) 42px; align-items: center; gap: 12px; padding: 7px 0; font-size: 14px; }
.type-bar i { font-style: normal; color: var(--tc); margin-right: 8px; }
.tb-track { height: 10px; border-radius: 99px; background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent)); overflow: hidden; }
.tb-track i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--tc); margin: 0; transform-origin: left; animation: meterIn 1.1s var(--ease-out) both; animation-delay: calc(.2s + var(--i) * 70ms); }
.type-bar b { text-align: right; font-weight: 500; }

/* ---------- Events table ---------- */
.ev-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-bottom: 16px; }
.ev-toolbar .mono { margin: 0; }
.seg--chips { gap: 6px; }
.chip-btn { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); color: var(--bone-dim); cursor: pointer; font-size: 14px; font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.chip-btn:hover { color: var(--bone); border-color: var(--bone-dim); }
.chip-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dtable { width: 100%; border-collapse: collapse; min-width: 820px; font-size: 14px; }
.dtable th { text-align: left; font-family: var(--f-mono); font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); padding: 14px 16px; background: linear-gradient(color-mix(in srgb, var(--bone) 4%, transparent), color-mix(in srgb, var(--bone) 4%, transparent)); }
.dtable td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.dtable td.mono { font-size: 11px; line-height: 1.5; }
.dtable tbody tr { transition: background .25s; animation: viewIn .5s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 10) * 35ms); }
.dtable tbody tr:hover { background: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
.ev-cell { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 300px; }
.ev-cell > span:last-child { display: grid; min-width: 0; }
.ev-cell .muted { font-size: 12px; }
.dtable td .ev-meter { margin-bottom: 6px; max-width: 120px; }
.row-acts { white-space: nowrap; text-align: right; }
.row-acts .link-btn { margin-right: 14px; }
.row-go { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); transition: background .3s, color .3s, transform .5s var(--ease-out); }
.row-go:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: rotate(-45deg); }
.guest-table.dtable { min-width: 640px; }

/* ---------- Create ---------- */
.dash .create-grid { grid-template-columns: 190px minmax(0, 1fr) 330px; gap: clamp(18px, 2.4vw, 32px); }
.step-rail { position: sticky; top: 112px; display: grid; gap: 2px; align-self: start; }
.step-rail a { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; color: var(--bone-dim); font-size: 13px; line-height: 1.2; transition: background .3s, color .3s; }
.step-rail a b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 26px; line-height: 1; color: var(--bone-dim); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--bone-dim); transition: color .3s, -webkit-text-stroke-color .3s; }
.step-rail a:hover { background: linear-gradient(color-mix(in srgb, var(--bone) 5%, transparent), color-mix(in srgb, var(--bone) 5%, transparent)); color: var(--bone); }
.step-rail a.is-done b { color: var(--bone-dim); -webkit-text-stroke-color: transparent; -webkit-text-fill-color: currentColor; }
.step-rail a[aria-current] { background: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); color: var(--bone); }
.step-rail a[aria-current] b { color: var(--accent-text); -webkit-text-stroke-color: transparent; -webkit-text-fill-color: currentColor; }
.dash .create-form { gap: 16px; }
.dash .create-step { border-radius: 22px; background: var(--ink-2); padding: clamp(18px, 2vw, 26px); scroll-margin-top: 110px; }
:root[data-theme="light"] .dash .create-step { background: #fff; box-shadow: 0 1px 0 var(--line), 0 18px 40px -32px rgba(80, 60, 10, .35); }
.step-legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 14px; padding: 0; margin: 0 0 18px; }
.step-legend + * { clear: both; }
.create-step.grid-2 > .step-legend { grid-column: 1 / -1; }
.step-n { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 44px; line-height: .8; color: var(--accent-text); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.3px var(--accent-text); }
.step-t { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.cidx--form { gap: 4px 18px; margin: 0; }
.cidx--form .cidx-word { font-size: clamp(26px, 2.6vw, 40px); }
label.cidx-item { cursor: pointer; }
.cidx-item:has(input:checked) .cidx-word { color: var(--on-accent); -webkit-text-stroke-color: transparent; background-size: 0% 100%; -webkit-text-fill-color: currentColor; }
.cidx-item:has(input:checked) .cidx-word::before { transform: scaleX(1); transform-origin: left; }
.cidx-item:has(input:checked) .cidx-glyph { opacity: 1; transform: rotate(-12deg); }
.cidx-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.cidx-item[aria-selected="true"] .cidx-word { color: var(--on-accent); -webkit-text-stroke-color: transparent; background-size: 0% 100%; -webkit-text-fill-color: currentColor; }
.cidx-item[aria-selected="true"] .cidx-word::before { transform: scaleX(1); transform-origin: left; }
.dash .seg span { padding: 10px 18px; background: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.dash .seg input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dash .swatch { width: 72px; height: 90px; border-radius: 14px; position: relative; overflow: hidden; transition: transform .4s var(--ease-out), box-shadow .3s; }
.dash .swatch::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 15%); }
.dash .swatch:hover { transform: translateY(-3px) rotate(-2deg); }
.dash .swatch[aria-pressed="true"] { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--ink-2), 0 0 0 5px var(--accent); }
.dash .create-actions { justify-content: flex-end; }
.dash .create-side { top: 112px; gap: 14px; }
.preview-ticket { display: grid; justify-items: center; }
.preview-ticket .tk { width: min(310px, 100%); }
.preview-feats { justify-content: center; }
.create-note { margin: 0; text-align: center; font-size: 10px; }
.published { position: relative; overflow: hidden; border: 0 !important; background: radial-gradient(100% 60% at 100% 0%, rgba(245, 198, 79, .18), transparent 60%), linear-gradient(160deg, var(--espresso-1), var(--espresso-2)) !important; color: var(--cream); padding: 22px !important; border-radius: 22px !important; animation: viewIn .7s var(--ease-out) both; }
.pub-stamp { position: absolute; top: 18px; right: -38px; transform: rotate(35deg); background: #f5c64f; color: #17110b; padding: 6px 48px; font-weight: 600; }
.pub-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: 34px; line-height: .9; }
.pub-title span { color: #f5c64f; }
.published .copy-row input { color: var(--cream); }

/* ---------- Guest lists ---------- */
.dash .manage-head.dcard { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.dash .manage-head .field { flex: 1 1 280px; }
.dash .kpis div { border-radius: 20px; background: var(--ink-2); padding: 18px; }
:root[data-theme="light"] .dash .kpis div, :root[data-theme="light"] .dash .panel { background: #fff; }
.dash .kpis dd { font-size: 52px; }
.dash .panel { border-radius: 20px; background: var(--ink-2); padding: 20px; }
.dash .bar i { background: var(--accent); }

/* ---------- Door ---------- */
.door-stage { --glow: #f5c64f; --nw: clamp(240px, 28vw, 420px); --nh: 44px; position: relative; margin-bottom: 16px; }
.door-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(56px, 6vw, 72px) clamp(22px, 4vw, 56px); color: var(--cream); }
.door-ring { position: relative; width: 220px; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; text-align: center; }
.door-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dr-bg { fill: none; stroke: rgba(243, 233, 218, .12); stroke-width: 8; }
.dr-fg { fill: none; stroke: #f5c64f; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); animation: ringIn 1.4s var(--ease-out) both; }
@keyframes ringIn { from { stroke-dashoffset: 100; } }
.door-ring b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 80px; line-height: .8; }
.door-ring .mono { color: rgba(243, 233, 218, .6); margin-top: 6px; }
.door-main { display: grid; gap: 20px; min-width: 0; }
.door-main .field label { color: rgba(243, 233, 218, .6); }
.door-main select { color: var(--cream); border-color: rgba(243, 233, 218, .25); }
.dash .door-form { display: flex; align-items: center; gap: 14px; max-width: none; }
.dash .door-form input { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); background: none; border: 0; border-bottom: 2px solid rgba(243, 233, 218, .3); padding: 10px 0; outline: none; border-radius: 0; transition: border-color .3s; }
.dash .door-form input:focus { border-color: #f5c64f; }
.door-go { width: 64px; height: 64px; flex: none; border-radius: 50%; border: 0; background: #f5c64f; color: #17110b; font-size: 26px; cursor: pointer; transition: transform .5s var(--ease-out), box-shadow .3s; box-shadow: 0 12px 30px -12px rgba(245, 198, 79, .8); }
.door-go:hover { transform: rotate(-45deg) scale(1.05); }
.door-hint { color: rgba(243, 233, 218, .6); margin: 0; }
.dash .door-result { margin: 0; max-width: none; }
.dash .door-card { position: relative; border-radius: 18px; padding: 22px 24px; background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) !important; border: 0 !important; border-left: 4px solid currentColor !important; color: var(--cream); animation: viewIn .5s var(--ease-out) both; }
.dash .door-card.is-good { color: #f5c64f; } .dash .door-card.is-warn { color: #ffb27a; } .dash .door-card.is-bad { color: #ff8f8f; }
.dash .door-card b { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: 34px; line-height: .95; color: currentColor; }
.dash .door-card p { color: var(--cream); }
.dash .door-card .btn { margin-top: 6px; }
.door-stamp { position: absolute; top: -14px; right: 18px; padding: 4px 14px; border: 3px solid currentColor; border-radius: 8px; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: 22px; letter-spacing: .04em; transform: rotate(-8deg); background: var(--espresso-2); animation: stampIn .5s .1s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-20deg) scale(2.2); } }
.door-list { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-chart, .ov-events { grid-column: span 12; }
  .ov-next { grid-column: span 12; grid-row: auto; }
  .ov-activity, .ov-types { grid-column: span 6; }
  .dash .create-grid { grid-template-columns: minmax(0, 1fr) 310px; }
  .step-rail { display: none; }
}
@media (max-width: 960px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); transform: translateX(-105%); transition: transform .5s var(--ease-out); }
  .dash-side.is-open { transform: none; box-shadow: 30px 0 60px rgba(0, 0, 0, .4); }
  .dash-burger { display: inline-flex; }
  .dash-search { display: none; }
  .dash-new { margin-left: auto; }
  .ov-activity, .ov-types { grid-column: span 12; }
  .dash .create-grid { grid-template-columns: 1fr; }
  .dash .create-side { position: static; }
  .door-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .door-main { width: 100%; text-align: left; }
}
@media (max-width: 560px) {
  .dash-new { padding: 11px 14px; font-size: 14px; }
  .dash-avatar { display: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { min-height: 130px; padding: 14px; }
  .spark { width: 70%; height: 36px; }
  .ev-row { grid-template-columns: 46px minmax(0, 1fr) 44px; }
  .ev-row .ev-meter { display: none; }
  .type-bar { grid-template-columns: 100px minmax(0, 1fr) 36px; }
  .door-ring { width: 180px; }
}
@media (prefers-reduced-motion: reduce) { .dash-view.is-entering, .kpi, .bar-col i, .ev-meter i, .tb-track i, .act-list li, .dtable tbody tr, .door-stamp { animation: none; } }
.kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kpi-row .spark { position: static; width: 46%; max-width: 160px; height: 46px; margin-bottom: 12px; }
.door-ring[style*="--p:0.000"] .dr-fg { opacity: 0; }

/* ==========================================================================
   Site-wide harmonising: marker-highlight words in big titles
   ========================================================================== */
.section-title em, .page-title em, .cta-title em {
  font-family: inherit; font-style: normal; font-weight: inherit; text-transform: uppercase; font-variation-settings: inherit;
  color: var(--on-accent); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 10%, var(--accent) 10% 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  transition: background-size 1s .25s var(--ease-out);
}
.section-title.is-in em, .is-in > em, .reveal.is-in em, .page-title em, .section-title em { background-size: 100% 100%; }

/* Stats: outlined numerals that fill custard */
.stats dt { color: var(--bone); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.3px var(--bone); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 0% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-size 1.2s .4s var(--ease-out), -webkit-text-stroke-color .6s .4s; }
.stats.is-in dt { background-size: 100% 100%; -webkit-text-stroke-color: var(--accent-text); }
.stats div:nth-child(2) dt { transition-delay: .55s; } .stats div:nth-child(3) dt { transition-delay: .7s; } .stats div:nth-child(4) dt { transition-delay: .85s; }

/* Marquee: alternate solid and outlined names */
.marquee-track a.alt { font-family: var(--f-display); font-style: normal; font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 62; color: var(--bone); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.3px var(--bone); }
.marquee-track a.alt:hover { color: var(--accent-text); -webkit-text-stroke-color: transparent; -webkit-text-fill-color: currentColor; }

/* Sketch player (booth + event page) */
.sketch-btn { background: var(--accent); color: var(--on-accent); padding: 8px 16px 8px 8px; gap: 10px; transition: transform .4s var(--ease-out), box-shadow .3s; }
.sketch-btn:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(245, 198, 79, .8); }
.sketch-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--on-accent); color: var(--accent); font-size: 10px; }
.sketch-slats i { background: linear-gradient(color-mix(in srgb, var(--bone) 40%, transparent), color-mix(in srgb, var(--bone) 40%, transparent)); border-radius: 2px; }
.sketch.is-playing .sketch-slats i { background: var(--accent); }

/* ==========================================================================
   (06) Listening booth — record sleeves; the disc slides out and spins
   ========================================================================== */
.sheet { padding-top: 10px; }
.booth { position: relative; flex: 0 0 clamp(280px, 26vw, 360px); scroll-snap-align: start; filter: drop-shadow(0 24px 24px rgba(30, 18, 6, .28)); transition: translate .6s var(--ease-out); }
.booth:hover { translate: 0 -6px; }
.booth-shape {
  position: relative; display: grid; gap: 18px; height: 100%; padding: 18px 18px 48px; border-radius: 24px; color: var(--cream); overflow: hidden;
  background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--tc, #f5c64f) 22%, transparent), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2) 72%);
  -webkit-mask: var(--notch-b) 50% 100% / 52% 30px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: var(--notch-b) 50% 100% / 52% 30px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude;
}
.booth-deck { position: relative; aspect-ratio: 1 / .78; }
.booth-sleeve { position: absolute; left: 0; top: 0; bottom: 0; aspect-ratio: 1; z-index: 2; border-radius: 12px; overflow: hidden; box-shadow: 10px 0 24px -8px rgba(0, 0, 0, .6); transition: transform .6s var(--ease-out); }
.booth-sleeve::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255, 255, 255, .14), transparent 40%); pointer-events: none; }
.booth-disc {
  position: absolute; top: 4%; bottom: 4%; left: 0; aspect-ratio: 1; z-index: 1; border-radius: 50%;
  background: radial-gradient(circle, #111 0 3%, transparent 3.2%), repeating-radial-gradient(circle, #141414 0 2px, #1d1d1d 2px 4px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04), 0 10px 20px rgba(0, 0, 0, .4);
  transform: translateX(14%); transition: transform .9s var(--ease-out);
}
.booth-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .1) 25%, transparent 32% 70%, rgba(255, 255, 255, .07) 75%, transparent 80%); }
.booth-label { position: absolute; inset: 33%; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 3px #f5c64f; animation: spin 2.4s linear infinite paused; }
.booth:hover .booth-disc { transform: translateX(26%); }
.booth:has(.sketch.is-playing) .booth-disc { transform: translateX(36%); }
.booth:has(.sketch.is-playing) .booth-label, .booth:has(.sketch.is-playing) .booth-disc::after { animation-play-state: running; }
.booth-disc::after { animation: spin 2.4s linear infinite paused; }
.booth:has(.sketch.is-playing) .booth-sleeve { transform: translateX(-4px) rotate(-2deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.booth-body { display: grid; gap: 12px; }
.booth-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.booth-bpm { display: flex; align-items: flex-end; gap: 8px; }
.booth-bpm b { font-weight: 800; font-variation-settings: "wdth" 100; font-size: 54px; line-height: .78; letter-spacing: -.04em; color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.4px var(--cream); transition: color .5s; }
.booth:has(.sketch.is-playing) .booth-bpm b { color: #f5c64f; -webkit-text-stroke-color: #f5c64f; animation: beat .47s ease-in-out infinite alternate; -webkit-text-fill-color: currentColor; }
@keyframes beat { to { transform: scale(1.04); } }
.booth-bpm .mono { font-size: 10px; color: rgba(243, 233, 218, .6); line-height: 1.3; }
.booth-when { font-size: 10px; color: rgba(243, 233, 218, .55); text-align: right; line-height: 1.5; }
.booth-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: 32px; line-height: .92; }
.booth-title a:hover { color: #f5c64f; }
.booth .sketch-slats i { background: linear-gradient(rgba(243, 233, 218, .3), rgba(243, 233, 218, .3)); }
.booth .sketch.is-playing .sketch-slats i { background: #f5c64f; }
.booth .tk-notch { color: var(--bone-dim); }
@media (prefers-reduced-motion: reduce) { .booth-label, .booth-disc::after, .booth-bpm b { animation: none !important; } }

/* ==========================================================================
   (05) Host flows — notched espresso cards with big step numerals
   ========================================================================== */
.flow { position: relative; filter: drop-shadow(0 24px 24px rgba(30, 18, 6, .26)); transition: translate .6s var(--ease-out); transition-delay: 0s; }
.flow.reveal { transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out), translate .6s var(--ease-out); transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms), 0s; }
.flow:hover { translate: 0 -6px; }
.flow-shape {
  display: flex; flex-direction: column; height: 100%; border-radius: 24px; overflow: hidden; color: var(--cream);
  background: radial-gradient(120% 50% at 100% 100%, color-mix(in srgb, var(--tc, #f5c64f) 22%, transparent), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2) 72%);
  -webkit-mask: var(--notch-b) 50% 100% / 52% 30px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: var(--notch-b) 50% 100% / 52% 30px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude;
}
.flow .flow-art { position: relative; aspect-ratio: 16 / 9; padding: 14px; display: flex; justify-content: space-between; align-items: flex-start; overflow: hidden; }
.flow .flow-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 16.6%), linear-gradient(0deg, var(--espresso-1), transparent 60%); transition: transform 1s var(--ease-out); }
.flow:hover .flow-art::after { transform: translateY(-6%); }
.flow .flow-art .type-tag { position: relative; z-index: 1; background: rgba(21, 15, 10, .7); padding: 5px 10px; border-radius: 999px; color: var(--tc); }
.flow-n { position: absolute; z-index: 1; right: 16px; bottom: -6px; font-weight: 800; font-variation-settings: "wdth" 100; font-size: 96px; line-height: .78; letter-spacing: -.05em; color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--cream); background: linear-gradient(#f5c64f, #f5c64f) 0 100% / 100% 0% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-size .7s var(--ease-out), -webkit-text-stroke-color .4s; }
.flow:hover .flow-n { background-size: 100% 100%; -webkit-text-stroke-color: #f5c64f; }
.flow .flow-body { padding: 20px 22px 50px; display: grid; gap: 14px; align-content: start; flex: 1; }
.flow-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: 32px; line-height: .92; }
.flow-title a:hover { color: #f5c64f; }
.flow .flow-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: rgba(243, 233, 218, .75); }
.flow .flow-body li { display: flex; gap: 10px; align-items: baseline; }
.flow .flow-body li::before { content: "\ea5e"; font-family: "tabler-icons"; color: #f5c64f; font-size: 15px; }
.flow-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }
.flow-foot .chip { background: linear-gradient(rgba(243, 233, 218, .08), rgba(243, 233, 218, .08)); color: rgba(243, 233, 218, .7); }
.flow-foot .chip b { color: #f5c64f; font-weight: 500; }
.flow-go { color: var(--cream); }
.flow-go:hover { background: #f5c64f; border-color: #f5c64f; color: #17110b; transform: rotate(-45deg); }

/* ==========================================================================
   Venues (home)
   ========================================================================== */
.venue-card { display: grid; gap: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); color: var(--cream); transition: translate .6s var(--ease-out), box-shadow .6s; }
.venue-card:hover { translate: 0 -6px; box-shadow: 0 30px 50px -30px rgba(30, 18, 6, .6); }
.venue-card .venue-art { position: relative; border-radius: 0; aspect-ratio: 4 / 4.2; padding: 16px; overflow: hidden; }
.venue-card .venue-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 12.5%), linear-gradient(0deg, var(--espresso-1), transparent 50%); transition: transform 1s var(--ease-out); }
.venue-card:hover .venue-art { transform: none; }
.venue-card:hover .venue-art::after { transform: translateY(-8%); }
.venue-cap { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 8px; }
.venue-cap b { font-weight: 800; font-variation-settings: "wdth" 100; font-size: clamp(48px, 4.4vw, 68px); line-height: .78; letter-spacing: -.04em; color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.4px var(--cream); transition: color .5s, -webkit-text-stroke-color .5s; }
.venue-card:hover .venue-cap b { color: #f5c64f; -webkit-text-stroke-color: #f5c64f; -webkit-text-fill-color: currentColor; }
.venue-cap .mono { font-size: 10px; opacity: .7; }
.venue-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px 18px; }
.venue-foot h3 { margin: 0 0 4px; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: 24px; line-height: .95; font-family: var(--f-display); }
.venue-foot p { margin: 0; color: rgba(243, 233, 218, .6); font-size: 10px; }
.venue-card .tk-go { width: 40px; height: 40px; }
.venue-card:hover .tk-go { background: #f5c64f; border-color: #f5c64f; color: #17110b; transform: rotate(-45deg); }

/* ==========================================================================
   (07) Alerts — espresso stage
   ========================================================================== */
.alerts-stage { --glow: #f5c64f; --nw: clamp(260px, 30vw, 460px); --nh: clamp(40px, 4vw, 60px); position: relative; }
.alerts-inner { position: relative; z-index: 1; padding: clamp(64px, 7vw, 110px) clamp(22px, 5vw, 80px); color: var(--cream); }
.alerts-inner .cta-title { color: var(--cream); }
.cta-outline { color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--cream); }
.alerts-inner .cta-title em { color: #17110b; background-image: linear-gradient(transparent 10%, #f5c64f 10% 90%, transparent 90%); }
.alerts-inner .alert-form input { color: var(--cream); border-color: rgba(243, 233, 218, .3); }
.alerts-inner .alert-form input::placeholder { color: rgba(243, 233, 218, .45); }
.alerts-inner .alert-form input:focus { border-color: #f5c64f; }
.alerts-inner .form-note { color: rgba(243, 233, 218, .55); }
.alerts-inner .btn { background: #f5c64f; color: #17110b; }
.sheet { scroll-padding-inline: var(--gutter); }

/* Venues page */
.venue-hero { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(18px, 2vw, 28px); }
.venue-hero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 10%), linear-gradient(0deg, rgba(21, 15, 10, .7), transparent 50%); pointer-events: none; }
.venue-hero .venue-cap { color: var(--cream); }
.venue-hero .venue-cap b { font-size: clamp(64px, 8vw, 128px); }
.venue-name { margin: 0; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(56px, 7vw, 112px); line-height: .86; }
.venue-good { display: flex; flex-wrap: wrap; gap: 8px; }
.venue-good .chip i { font-style: normal; color: var(--tc); }
.venue-copy .btn { justify-self: start; margin-top: 6px; }
.venue-block .rank-list { grid-column: 1 / -1; }
/* Help */
.faq details { border-radius: 18px; border: 1px solid var(--line); padding: 4px 20px; margin-bottom: 10px; background: var(--ink-2); transition: border-color .3s; }
.faq details[open] { border-color: var(--accent); }
.faq summary { font-weight: 600; }
.contact-form { border-radius: 24px; padding: clamp(20px, 2.4vw, 32px); background: linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); color: var(--cream); }
:root[data-theme="light"] .contact-form { --ink: #0f1115; --line: rgba(236, 231, 221, .2); --bone: #ece7dd; --bone-dim: rgba(236, 231, 221, .62); --accent-text: #f5c64f; }
.faq details { padding: 18px 22px; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq details[open]:last-child { border-bottom-color: var(--accent); }
.faq summary { font-family: var(--f-display); font-weight: 700; font-variation-settings: "wdth" 80; font-size: clamp(19px, 1.8vw, 24px); align-items: center; }
.faq summary::after { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
:root[data-theme="light"] .faq details { background: #fff; }
.dash-side .wordmark-name { display: inline; }

/* Header logo: "by Goldpurp" unfolds in place on hover, sliding the search across */
.site-header .wordmark-by {
  position: static; translate: none; transform: none; left: auto; top: auto;
  display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: middle;
  max-width: 0; margin-left: 0; opacity: 0;
  transition: max-width .6s var(--ease-out), margin-left .6s var(--ease-out), opacity .35s ease;
}
.site-header .wordmark:hover .wordmark-by, .site-header .wordmark:focus-visible .wordmark-by { max-width: 120px; margin-left: 4px; opacity: 1; transition-delay: 0s, 0s, .12s; }
.site-header .wordmark { gap: 10px; }
.site-header .hsearch { transition: border-color .3s, background .3s; }
@media (prefers-reduced-motion: reduce) { .site-header .wordmark-by { transition: none; } }

/* ==========================================================================
   Account menu (header)
   ========================================================================== */
.acct { position: relative; }
.acct-signin { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-soft); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-shadow: none; transition: border-color .3s; }
.acct-signin svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.acct-signin:hover { border-color: var(--accent); }
.acct-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, #f5c64f, #d99a1c); color: #17110b; font-weight: 800; font-size: 13px; text-shadow: none; box-shadow: 0 0 0 2px var(--glass-soft); transition: transform .4s var(--ease-out); }
.acct-btn:hover { transform: scale(1.06); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 230px; display: grid; padding: 8px; border-radius: 18px; color: var(--cream); text-shadow: none; background: linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); animation: viewIn .35s var(--ease-out) both; }
.acct-who { margin: 0 0 6px; padding: 10px 12px; display: grid; gap: 2px; border-bottom: 1px solid rgba(243, 233, 218, .12); }
.acct-who .mono { font-size: 10px; color: rgba(243, 233, 218, .55); text-transform: none; overflow: hidden; text-overflow: ellipsis; }
.acct-menu a, .acct-menu button { text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover { background: linear-gradient(rgba(243, 233, 218, .08), rgba(243, 233, 218, .08)); }
.acct-menu [data-signout] { color: #ffb27a; }
@media (max-width: 720px) { .acct-signin span { display: none; } .acct-signin { padding: 0; width: 38px; justify-content: center; } }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal a:hover { color: var(--accent-text); }
.dash-signin { padding: 10px 16px; }

/* Solid / outline type pair (auth, studio) */
.st-solid { display: block; }
.st-outline { display: block; color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--cream); }
.st-solid em { font-style: normal; color: #17110b; padding: 0 .06em; background: linear-gradient(transparent 10%, #f5c64f 10% 90%, transparent 90%); }

/* ==========================================================================
   About
   ========================================================================== */
.about-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.about-intro .lede { max-width: 32ch; }
.about-stats { grid-column: auto; grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.value { position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start; min-height: 320px; padding: clamp(22px, 2.4vw, 32px); border-radius: 26px; color: var(--cream); background: radial-gradient(120% 60% at 100% 100%, rgba(245, 198, 79, .16), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); -webkit-mask: var(--notch-b) 50% 100% / 46% 28px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--notch-b) 50% 100% / 46% 28px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; transition: translate .6s var(--ease-out); }
.value.reveal { transition-delay: calc(var(--i) * 90ms); }
.value:hover { translate: 0 -6px; }
.value-n { font-weight: 800; font-variation-settings: "wdth" 100; font-size: 110px; line-height: .78; letter-spacing: -.05em; color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--cream); background: linear-gradient(#f5c64f, #f5c64f) 0 100% / 100% 0% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-size .8s var(--ease-out), -webkit-text-stroke-color .4s; }
.value:hover .value-n { background-size: 100% 100%; -webkit-text-stroke-color: #f5c64f; }
.value-title { margin: auto 0 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 34px); line-height: .92; }
.value p { margin: 0; color: rgba(243, 233, 218, .7); max-width: 34ch; }
.how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.how { display: grid; gap: 18px; align-content: start; padding: clamp(22px, 2.6vw, 36px); border-radius: 26px; border: 1px solid var(--line); background: var(--ink-2); }
:root[data-theme="light"] .how:not(.how--dark) { background: #fff; }
.how--dark { color: var(--cream); border-color: transparent; background: radial-gradient(100% 60% at 0% 0%, rgba(245, 198, 79, .14), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); --bone: #ece7dd; --bone-dim: rgba(236, 231, 221, .62); --line: rgba(236, 231, 221, .14); }
.how .eyebrow { margin: 0; }
.how .btn { justify-self: start; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.how-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.how-steps b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 44px; line-height: .8; color: var(--accent-text); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.3px var(--accent-text); }
.how-steps span { color: var(--bone-dim); }
.how-steps strong { color: var(--bone); font-weight: 600; }
.maker-stage { --glow: #f5c64f; --nw: clamp(240px, 28vw, 420px); --nh: clamp(40px, 4vw, 56px); position: relative; }
.maker-inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 16px; padding: clamp(70px, 8vw, 120px) clamp(22px, 5vw, 80px); color: var(--cream); }
.maker-kicker { margin: 0; color: rgba(243, 233, 218, .6); }
.maker-name { margin: 0; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(64px, 10vw, 160px); line-height: .9; color: #f5c64f; letter-spacing: -.03em; }
.maker-copy { margin: 0; max-width: 46ch; color: rgba(243, 233, 218, .75); font-size: 18px; }
.maker-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.maker-actions .btn-ghost { color: var(--cream); border-color: rgba(243, 233, 218, .3); }
@media (max-width: 960px) { .about-intro, .value-grid, .how-grid { grid-template-columns: 1fr; } .value { min-height: 260px; } }

/* ==========================================================================
   Pricing
   ========================================================================== */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); align-items: stretch; padding-bottom: 20px; }
.plan { position: relative; display: grid; gap: 16px; align-content: start; padding: clamp(22px, 2.4vw, 32px); border-radius: 26px; border: 1px solid var(--line); background: var(--ink-2); transition: translate .6s var(--ease-out); }
.plan.reveal { transition-delay: calc(var(--i) * 90ms); }
:root[data-theme="light"] .plan:not(.plan--hero) { background: #fff; }
.plan:hover { translate: 0 -6px; }
.plan-kicker { margin: 0; color: var(--bone-dim); }
.plan-price { margin: 0; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.plan-price b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: clamp(56px, 5.6vw, 88px); line-height: .82; }
.plan-price .mono { color: var(--bone-dim); padding-bottom: 6px; }
.plan-for { margin: 0; color: var(--bone-dim); }
.plan-list { list-style: none; margin: 0 0 8px; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.plan-list li { display: flex; gap: 10px; }
.plan-list li::before { content: "\ea5e"; font-family: "tabler-icons"; color: var(--accent-text); }
.plan .btn { margin-top: auto; }
.plan--hero { color: var(--cream); border-color: transparent; padding-bottom: 54px; background: radial-gradient(120% 60% at 100% 0%, rgba(245, 198, 79, .2), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); -webkit-mask: var(--notch-b) 50% 100% / 52% 30px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--notch-b) 50% 100% / 52% 30px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; --bone: #ece7dd; --bone-dim: rgba(236, 231, 221, .62); --line: rgba(236, 231, 221, .14); --accent-text: #f5c64f; }
.plan--hero .plan-price b { color: #f5c64f; }
.plan--hero .tk-notch { color: var(--bone-dim); }
.plan-flag { position: absolute; top: 22px; right: 22px; padding: 5px 10px; border-radius: 999px; background: #f5c64f; color: #17110b; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(22px, 3vw, 40px); border-radius: 26px; border: 1px solid var(--line); background: var(--ink-2); }
:root[data-theme="light"] .calc { background: #fff; }
.calc-inputs { display: grid; gap: 18px; }
.calc-inputs label b { color: var(--accent-text); font-weight: 500; }
.calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.calc-out > div { padding: 18px; border-radius: 20px; border: 1px solid var(--line); }
.calc-out .mono { margin: 0 0 10px; font-size: 10px; }
.calc-num { margin: 0; font-weight: 800; font-variation-settings: "wdth" 62; font-size: clamp(30px, 3vw, 46px); line-height: .9; font-variant-numeric: tabular-nums; }
.calc-out .is-you { border: 0; background: linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); color: var(--cream); }
.calc-out .is-you .calc-num { color: #f5c64f; }
.calc-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 960px) { .plan-grid, .calc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .calc-out { grid-template-columns: 1fr; } }

/* ==========================================================================
   Legal (privacy, terms)
   ========================================================================== */
.legal-note { margin: -12px 0 32px; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--accent); color: var(--accent-text); max-width: 640px; }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); padding-bottom: 120px; }
.legal-toc { position: sticky; top: 110px; align-self: start; display: grid; gap: 2px; }
.legal-toc .eyebrow { margin: 0 0 8px; }
.legal-toc a { display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--bone-dim); font-size: 14px; transition: background .3s, color .3s; }
.legal-toc a b { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 22px; line-height: 1; color: var(--bone-dim); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--bone-dim); }
.legal-toc a:hover { color: var(--bone); background: linear-gradient(color-mix(in srgb, var(--bone) 5%, transparent), color-mix(in srgb, var(--bone) 5%, transparent)); }
.legal-toc a[aria-current] { color: var(--bone); background: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); }
.legal-toc a[aria-current] b { color: var(--accent-text); -webkit-text-stroke-color: transparent; -webkit-text-fill-color: currentColor; }
.legal-body { max-width: 72ch; }
.legal-sec { padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.legal-sec h2 { margin: 0 0 14px; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(28px, 3vw, 40px); line-height: .95; }
.legal-sec p, .legal-sec li { color: var(--bone-dim); font-size: 17px; line-height: 1.65; }
.legal-sec b { color: var(--bone); font-weight: 600; }
.legal-sec ul { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.legal-sec li { padding-left: 22px; position: relative; }
.legal-sec li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 3px; border-radius: 2px; background: var(--accent); }
@media (max-width: 860px) { .legal-grid { grid-template-columns: 1fr; } .legal-toc { position: static; } }

/* ==========================================================================
   404
   ========================================================================== */
.nf { min-height: 80vh; display: grid; align-content: center; justify-items: start; gap: 22px; padding-block: 160px 100px; }
.nf-num { display: flex; align-items: center; gap: .04em; font-weight: 800; font-variation-settings: "wdth" 100; font-size: clamp(140px, 26vw, 360px); line-height: .8; letter-spacing: -.05em; color: var(--bone); -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px var(--bone); }
.nf-zero { position: relative; width: .62em; height: .8em; border-radius: 50%; border: 2px solid var(--bone); animation: spin 8s linear infinite; background: radial-gradient(circle, #f5c64f 0 16%, transparent 17%), repeating-radial-gradient(circle, transparent 0 6px, color-mix(in srgb, var(--bone) 12%, transparent) 6px 7px); }
.nf .lede { max-width: 34ch; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Auth (sign in, create account, reset)
   ========================================================================== */
.auth-body { background: var(--ink); }
.auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; padding: 14px; gap: 14px; }
.auth-stage { --glow: #f5c64f; --nw: clamp(220px, 22vw, 340px); --nh: 46px; position: relative; min-height: 640px; }
.auth-stage .occ-panel { border-radius: 30px; }
.auth-stage-inner { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto auto auto 1fr; gap: 18px; padding: clamp(28px, 3vw, 48px); color: var(--cream); }
.auth-stage .wordmark-name { font-size: 32px; }
.auth-kicker { margin: 18px 0 0; display: inline-flex; align-items: center; gap: 8px; color: rgba(243, 233, 218, .65); }
.auth-shout { margin: 0; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(48px, 5.6vw, 92px); line-height: .86; }
.auth-ticket { display: grid; place-items: end; align-self: end; perspective: 1400px; }
.auth-ticket .tk { grid-area: 1 / 1; width: min(300px, 70%); }
.auth-panel { display: grid; grid-template-rows: auto 1fr auto; padding: clamp(18px, 3vw, 40px) clamp(16px, 4vw, 64px); }
.auth-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth-mobile-logo { visibility: hidden; }
.auth-card { align-self: center; width: min(440px, 100%); justify-self: center; display: grid; gap: 14px; padding-block: 40px; transition: opacity .5s, transform .6s var(--ease-out); }
.auth-card.is-done { opacity: .4; transform: translateY(-10px); }
.auth-card .eyebrow { margin: 0; }
.auth-title { margin: 0 0 10px; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(52px, 6vw, 88px); line-height: .86; }
.auth-title em { font-style: normal; color: var(--on-accent); padding: 0 .06em; background: linear-gradient(transparent 10%, var(--accent) 10% 90%, transparent 90%) no-repeat 0 0 / 0% 100%; animation: marker 1s .3s var(--ease-out) forwards; }
.auth-form { display: grid; gap: 20px; }
.auth-form.is-shake { animation: shake .45s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.auth-form [aria-invalid="true"] { border-color: var(--danger) !important; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-error { margin: 0; padding: 10px 14px; border-radius: 12px; color: var(--danger); background: linear-gradient(color-mix(in srgb, var(--danger) 10%, transparent), color-mix(in srgb, var(--danger) 10%, transparent)); }
.auth-lede { margin: 0; color: var(--bone-dim); font-size: 17px; }
.auth-foot { color: var(--bone-dim); }
.auth-already { margin: 0 0 10px; color: var(--accent-text); }
.auth-legal { margin: 0; text-align: center; color: var(--bone-dim); font-size: 10px; }
.auth-legal a { text-decoration: underline; text-underline-offset: 3px; }
.auth-terms a { text-decoration: underline; text-underline-offset: 3px; }
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy span { display: inline-block; animation: spin .8s linear infinite; }
.pw { position: relative; }
.pw input { padding-right: 64px !important; }
.pw-toggle { position: absolute; right: 0; bottom: 8px; border: 0; background: none; cursor: pointer; color: var(--accent-text); padding: 4px 0; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.pw-meter i { height: 4px; border-radius: 4px; background: linear-gradient(color-mix(in srgb, var(--bone) 12%, transparent), color-mix(in srgb, var(--bone) 12%, transparent)); transition: background .3s; }
.pw-meter[data-level="1"] i:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-level="2"] i:nth-child(-n+2) { background: #ffb27a; }
.pw-meter[data-level="3"] i:nth-child(-n+3) { background: var(--accent); }
.pw-meter[data-level="4"] i { background: #2fbf71; }
.pw-hint { margin: 2px 0 0; font-size: 10px; color: var(--bone-dim); }
.auth-role { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-role label { position: relative; cursor: pointer; }
.auth-role input { position: absolute; opacity: 0; }
.auth-role span { display: grid; gap: 4px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--ink-2); transition: border-color .3s, background .3s, transform .4s var(--ease-out); }
.auth-role b { font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: 26px; line-height: .9; }
.auth-role small { font-size: 10px; color: var(--bone-dim); }
.auth-role input:checked + span { border-color: transparent; background: var(--accent); color: var(--on-accent); transform: translateY(-2px); }
.auth-role input:checked + span small { color: var(--on-accent); opacity: .7; }
.auth-role input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.auth-sent { display: grid; gap: 14px; justify-items: start; animation: viewIn .6s var(--ease-out) both; }
.auth-sent-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 28px; animation: stampIn .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; padding: 0; }
  .auth-stage { display: none; }
  .auth-mobile-logo { visibility: visible; }
}

/* ==========================================================================
   Paper tickets — tiers, table package, pricing, confirmation
   Papers: espresso / caramel / cream / custard. Main body + tear-off stub,
   chamfered corners, a thumb-notch on the left, perforation bites at the tear.
   ========================================================================== */
.paper-espresso { --pm: #3b2c20; --pm-ink: #f3e9da; --ps: #f3e9da; --ps-ink: #2b2018; --pa: #f5c64f; }
.paper-caramel  { --pm: #a8672f; --pm-ink: #fff4e3; --ps: #f6ecdc; --ps-ink: #5a3415; --pa: #ffe1a6; }
.paper-cream    { --pm: #efe4d2; --pm-ink: #2b2018; --ps: #f5c64f; --ps-ink: #2b2018; --pa: #a8672f; }
.paper-custard  { --pm: #f5c64f; --pm-ink: #241a0f; --ps: #2d2219; --ps-ink: #f3e9da; --pa: #7a4a1c; }

.ptk-list { display: grid; gap: 22px; }
.ptk-li { --stub: clamp(132px, 22%, 176px); position: relative; animation: viewIn .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
.ptk, .ptk-ghost {
  --cut: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  clip-path: var(--cut);
  -webkit-mask: radial-gradient(circle 20px at 0 50%, #000 96%, transparent 100%), radial-gradient(circle 11px at calc(100% - var(--stub)) 0, #000 96%, transparent 100%), radial-gradient(circle 11px at calc(100% - var(--stub)) 100%, #000 96%, transparent 100%), linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: radial-gradient(circle 20px at 0 50%, #000 96%, transparent 100%), radial-gradient(circle 11px at calc(100% - var(--stub)) 0, #000 96%, transparent 100%), radial-gradient(circle 11px at calc(100% - var(--stub)) 100%, #000 96%, transparent 100%), linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.ptk {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); min-height: 210px;
  background: linear-gradient(90deg, var(--pm) 0 calc(100% - var(--stub)), var(--ps) 0);
  filter: drop-shadow(0 18px 22px rgba(30, 18, 6, .22));
  transition: transform .6s var(--ease-out);
}
.ptk::before { content: ""; position: absolute; top: 14px; bottom: 14px; right: var(--stub); border-left: 2px dashed color-mix(in srgb, var(--pm-ink) 30%, transparent); }
/* paper grain + faint watermark arc */
.ptk::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 140% at 62% 120%, transparent 54%, color-mix(in srgb, var(--pm-ink) 9%, transparent) 54.4%, transparent 55%), radial-gradient(45% 90% at 30% -20%, transparent 64%, color-mix(in srgb, var(--pm-ink) 7%, transparent) 64.4%, transparent 65%); }
.ptk-ghost { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--pm) 80%, #000) 0 calc(100% - var(--stub)), color-mix(in srgb, var(--ps) 85%, #000) 0); opacity: 0; transition: transform .6s var(--ease-out), opacity .4s; }
.ptk-li[data-q="1"] .g1, .ptk-li[data-q="2"] .g1, .ptk-li[data-q="3"] .g1 { opacity: .9; transform: translate(10px, 9px) rotate(1.2deg); }
.ptk-li[data-q="2"] .g2, .ptk-li[data-q="3"] .g2 { opacity: .7; transform: translate(20px, 17px) rotate(2.4deg); }
.ptk-li[data-q="3"] .g2 { transform: translate(24px, 22px) rotate(3.4deg); }
.ptk-li--pkg .ptk-ghost { opacity: 0 !important; }
.ptk-li.is-tear .ptk-stub { animation: tear .5s var(--ease-out); }
@keyframes tear { 30% { transform: translateX(6px) rotate(2.5deg); } 60% { transform: translateX(-2px) rotate(-.8deg); } }
.ptk-li.is-picked .ptk { transform: translateY(-3px); }

.ptk-main { position: relative; z-index: 1; display: grid; align-content: space-between; gap: 12px; padding: 20px 26px 20px 40px; color: var(--pm-ink); min-width: 0; }
.ptk-top { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; opacity: .7; }
.ptk-top span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptk-name { display: flex; align-items: flex-end; gap: 14px; min-width: 0; }
.ptk-n { font-weight: 300; font-family: var(--f-display); font-variation-settings: "wdth" 100; font-size: 76px; line-height: .78; letter-spacing: -.05em; color: var(--pm-ink); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px var(--pm-ink); flex: none; transition: color .4s, -webkit-text-stroke-color .4s; }
.ptk-li.is-picked .ptk-n { color: var(--pa); -webkit-text-stroke-color: var(--pa); -webkit-text-fill-color: currentColor; }
.ptk-name h3 { margin: 0; display: grid; line-height: .86; min-width: 0; }
.ptk-name h3 b { font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ptk-name h3 span { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); opacity: .85; }
.ptk-desc { margin: 0; font-size: 15px; opacity: .78; max-width: 46ch; }
.ptk-desc b { font-weight: 700; }
.ptk-avail { display: flex; align-items: center; gap: 14px; }
.ptk-avail .mono { font-size: 10px; opacity: .75; white-space: nowrap; }
.ptk-code { display: flex; align-items: stretch; gap: 2px; height: 26px; flex: 0 1 190px; min-width: 90px; }
.ptk-code i { flex: var(--w) 1 0; background: var(--pm-ink); border-radius: 1px; transition: opacity .6s; }
.ptk-code i.is-gone { opacity: .18; }

.ptk-stub { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 18px 12px 18px 16px; color: var(--ps-ink); text-align: center; }
.ptk-vert { position: absolute; left: 6px; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: .14em; opacity: .55; white-space: nowrap; }
.ptk-price { margin: 0; display: grid; line-height: 1; }
.ptk-price small { font-size: 9px; opacity: .6; margin-bottom: 4px; }
.ptk-price b { font-weight: 800; font-variation-settings: "wdth" 70; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.01em; }
.ptk-punch { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 110px; min-height: 10px; }
.ptk-punch i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--ps-ink) 35%, transparent); transition: background .3s, border-color .3s, transform .4s cubic-bezier(.2, 1.8, .4, 1); }
.ptk-punch i.is-punched { background: var(--ink); border: 0; transform: scale(1.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.ptk-step { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: linear-gradient(color-mix(in srgb, var(--ps-ink) 10%, transparent), color-mix(in srgb, var(--ps-ink) 10%, transparent)); }
.ptk-step button { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px; color: var(--ps); background: var(--ps-ink); transition: transform .3s var(--ease-out), opacity .3s; }
.ptk-step button:first-child { background: transparent; color: var(--ps-ink); }
.ptk-step button:hover:not(:disabled) { transform: scale(1.1); }
.ptk-step button:disabled { opacity: .3; cursor: not-allowed; }
.ptk-step output { min-width: 22px; text-align: center; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.ptk-stamp { position: absolute; z-index: 3; left: 38%; top: 50%; translate: -50% -50%; rotate: -12deg; padding: 6px 18px; border: 3px solid var(--danger); border-radius: 10px; color: var(--danger); font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: 30px; letter-spacing: .04em; background: color-mix(in srgb, var(--pm) 80%, transparent); }
.ptk-li.is-sold .ptk { filter: grayscale(.7) drop-shadow(0 18px 22px rgba(30, 18, 6, .15)); opacity: .75; }

/* Table package */
.ptk-li--pkg { margin-bottom: 22px; }
.ptk--pkg { min-height: 230px; }
.pkg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pkg-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pm-ink) 25%, transparent); background: none; color: var(--pm-ink); cursor: pointer; font: inherit; font-size: 14px; transition: background .3s, color .3s, border-color .3s; }
.pkg-chip b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(color-mix(in srgb, var(--pm-ink) 14%, transparent), color-mix(in srgb, var(--pm-ink) 14%, transparent)); font-size: 13px; }
.pkg-chip[aria-pressed="true"] { background: var(--pa); border-color: var(--pa); color: #17110b; }
.pkg-chip[aria-pressed="true"] b { background: linear-gradient(rgba(23, 17, 11, .15), rgba(23, 17, 11, .15)); }
.ptk-go { border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; background: var(--ps-ink); color: var(--ps); font: inherit; font-size: 13px; font-weight: 600; transition: transform .3s var(--ease-out); }
.ptk-go:hover:not(:disabled) { transform: translateY(-2px); }
.ptk-go:disabled { opacity: .35; cursor: not-allowed; }
.ptk-li.is-reserved .ptk-stub { animation: tear .5s var(--ease-out), reserved 1.2s ease; }
@keyframes reserved { 30% { box-shadow: inset 0 0 0 3px #2fbf71; } }

@media (max-width: 640px) {
  .ptk-li { --stub: 118px; }
  .ptk { min-height: 0; }
  .ptk-main { padding: 18px 16px 18px 30px; }
  .ptk-n { font-size: 52px; }
  .ptk-top span:last-child { display: none; }
  .ptk-avail .mono { display: none; }
  .ptk-stub { padding: 14px 8px 14px 14px; }
  .ptk-vert { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ptk-li, .ptk-li.is-tear .ptk-stub { animation: none; } }

/* Confirmation: one mini paper stub per guest */
.confirm-stubs { display: grid; gap: 8px; border: 0 !important; padding: 0 !important; }
.confirm-stubs .mini-ptk { --stub: 64px; display: grid !important; grid-template-columns: 1fr var(--stub); padding: 0 !important; border: 0 !important; border-radius: 10px; overflow: hidden; background: linear-gradient(90deg, var(--pm) 0 calc(100% - var(--stub)), var(--ps) 0); animation: viewIn .5s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); -webkit-mask: radial-gradient(circle 7px at calc(100% - var(--stub)) 0, #000 96%, transparent), radial-gradient(circle 7px at calc(100% - var(--stub)) 100%, #000 96%, transparent), linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: radial-gradient(circle 7px at calc(100% - var(--stub)) 0, #000 96%, transparent), radial-gradient(circle 7px at calc(100% - var(--stub)) 100%, #000 96%, transparent), linear-gradient(#000 0 0); mask-composite: exclude; }
.mini-main { display: grid; gap: 2px; padding: 12px 16px; color: var(--pm-ink); border-right: 2px dashed color-mix(in srgb, var(--pm-ink) 30%, transparent); }
.mini-main .mono { font-size: 10px; opacity: .7; }
.mini-stub { display: grid; place-items: center; color: var(--ps-ink); font-weight: 600; font-size: 14px !important; }

/* Pricing plans as vertical paper tickets */
.plan { --stubH: 104px; padding-bottom: calc(var(--stubH) + 22px); overflow: hidden;
  -webkit-mask: radial-gradient(circle 12px at 0 calc(100% - var(--stubH)), #000 96%, transparent), radial-gradient(circle 12px at 100% calc(100% - var(--stubH)), #000 96%, transparent), linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: radial-gradient(circle 12px at 0 calc(100% - var(--stubH)), #000 96%, transparent), radial-gradient(circle 12px at 100% calc(100% - var(--stubH)), #000 96%, transparent), linear-gradient(#000 0 0); mask-composite: exclude; }
.plan-stub { position: absolute; left: 0; right: 0; bottom: 0; height: var(--stubH); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 0 clamp(18px, 2vw, 28px); border-top: 2px dashed var(--line); background: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); }
.plan-stub .btn { margin: 0; }
.plan-code { display: flex; align-items: stretch; gap: 2px; height: 40px; width: 72px; }
.plan-code i { flex: var(--w) 1 0; background: currentColor; opacity: .55; border-radius: 1px; }
.plan--hero .plan-stub { background: #f5c64f; color: #17110b; border-top-color: rgba(23, 17, 11, .25); }
.plan--hero .plan-stub .btn { background: #17110b; color: #f5c64f; }
.plan--hero { -webkit-mask: radial-gradient(circle 12px at 0 calc(100% - var(--stubH)), #000 96%, transparent), radial-gradient(circle 12px at 100% calc(100% - var(--stubH)), #000 96%, transparent), linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: radial-gradient(circle 12px at 0 calc(100% - var(--stubH)), #000 96%, transparent), radial-gradient(circle 12px at 100% calc(100% - var(--stubH)), #000 96%, transparent), linear-gradient(#000 0 0); mask-composite: exclude; padding-bottom: calc(var(--stubH) + 22px); }

/* Account badge + menu counts */
.acct-btn { position: relative; }
.acct-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--accent-text); border: 1.5px solid var(--accent); font-size: 10px; font-weight: 700; }
.acct-menu a { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.acct-menu a[aria-current] { background: linear-gradient(rgba(245, 198, 79, .14), rgba(245, 198, 79, .14)); }
.acct-count, .acct-new { font-style: normal; font-family: var(--f-mono); font-size: 10px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(rgba(243, 233, 218, .1), rgba(243, 233, 218, .1)); }
.acct-new { background: #f5c64f; color: #17110b; }

/* Tickets page gate (signed out) */
.wallet-gate { --stub: 160px; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); max-width: 860px; margin-bottom: 100px; border-radius: 26px; overflow: hidden; background: linear-gradient(90deg, #f5c64f 0 var(--stub), var(--espresso-1) 0); color: var(--cream); filter: drop-shadow(0 24px 30px rgba(30, 18, 6, .3));
  -webkit-mask: radial-gradient(circle 14px at var(--stub) 0, #000 96%, transparent), radial-gradient(circle 14px at var(--stub) 100%, #000 96%, transparent), linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: radial-gradient(circle 14px at var(--stub) 0, #000 96%, transparent), radial-gradient(circle 14px at var(--stub) 100%, #000 96%, transparent), linear-gradient(#000 0 0); mask-composite: exclude; }
.wallet-gate-stub { display: grid; place-items: center; align-content: center; gap: 6px; color: #17110b; border-right: 2px dashed rgba(23, 17, 11, .3); -webkit-text-fill-color: currentColor; }
.wallet-gate-stub .mono { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; }
.wallet-gate-stub b { font-weight: 800; font-variation-settings: "wdth" 100; font-size: 90px; line-height: .8; color: #17110b; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #17110b; animation: beat 1.2s ease-in-out infinite alternate; }
.wallet-gate-body { display: grid; gap: 14px; padding: clamp(24px, 3vw, 44px); }
.wallet-gate-body .eyebrow { margin: 0; color: rgba(243, 233, 218, .6); }
.wallet-gate-body .muted { margin: 0; color: rgba(243, 233, 218, .7); max-width: 48ch; }
.wg-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 68px); line-height: .88; }
.wg-title em { font-style: normal; color: #17110b; padding: 0 .06em; background: linear-gradient(transparent 10%, #f5c64f 10% 90%, transparent 90%); }
.wg-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wg-actions .btn-ghost { color: var(--cream); border-color: rgba(243, 233, 218, .3); }
@media (max-width: 640px) { .wallet-gate { --stub: 84px; } .wallet-gate-stub b { font-size: 56px; } }
.ptk { filter: none; }
.ptk-li { filter: drop-shadow(0 18px 22px rgba(30, 18, 6, .22)); }
.ptk-li.is-sold { filter: grayscale(.6) drop-shadow(0 18px 22px rgba(30, 18, 6, .12)); }
.ptk-li.is-sold .ptk { filter: none; }

/* ==========================================================================
   Tabler icons — sizing inside existing components
   ========================================================================== */
.ti { line-height: 1; vertical-align: -0.12em; font-style: normal; }
.btn .ti, .link-arrow .ti, .link-btn .ti { font-size: 1.05em; }
.hsearch .ti { font-size: 19px; opacity: .7; flex: none; }
.theme-btn .ti { font-size: 19px; }
.theme-btn .i-moon, :root[data-theme="light"] .theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-moon { display: block; }
.acct-signin .ti { font-size: 18px; }
.tk-go .ti, .tw-go .ti, .row-go .ti { font-size: 20px; }
.verified { font-size: 22px; color: var(--accent); flex: none; }
.type-tag .ti { font-size: 1.15em; }
.cidx-glyph.ti { font-size: clamp(14px, 1.2vw, 20px); margin-top: .4em; }
.poster-glyph.ti { font-size: 70cqw; }
.poster.is-mini .poster-glyph.ti { font-size: 46cqw; }
.dash-nav a .ti { font-size: 21px; flex: none; }
.dash-search .ti { font-size: 18px; opacity: .6; }
.qa .ti { font-size: 17px; }
.door-go .ti { font-size: 26px; }
.sketch-icon .ti { font-size: 13px; }
.ptk-step .ti { font-size: 17px; }
.rank-move .ti, .chip .ti { font-size: 12px; vertical-align: -1px; }
.auth-sent-icon .ti { font-size: 30px; }
.occ-arrow .ti { font-size: 18px; }
.occ-go .ti { font-size: 24px; }
.rail-btn .ti { font-size: 20px; }
.rank-go .ti { font-size: 15px; }
.to-top .ti { font-size: 13px; }

/* ==========================================================================
   Type scale — calmer display sizes on big screens, tighter on phones
   ========================================================================== */
.hero-title { font-size: clamp(44px, 7vw, 112px); }
.show-hero-text h1 { font-size: clamp(44px, 7.4vw, 120px); }
.section-title { font-size: clamp(38px, 6vw, 96px); }
.page-title, .page-head .shout { font-size: clamp(44px, 7.4vw, 120px); }
.shout { font-size: clamp(38px, 6vw, 96px); }
.intro-statement { font-size: clamp(30px, 4.4vw, 72px); }
.cta-title { font-size: clamp(42px, 7vw, 116px); }
.marquee-track a { font-size: clamp(32px, 4.4vw, 68px); }
.lede { font-size: clamp(20px, 2.1vw, 32px); }
.stats dt { font-size: clamp(34px, 3.4vw, 56px); }
.occ-title { font-size: clamp(36px, 4.2vw, 72px); }
.occ-outline { font-size: clamp(40px, 4.8vw, 84px); }
.cidx-word { font-size: clamp(30px, 3.8vw, 64px); }
.cidx--sm .cidx-word { font-size: clamp(24px, 2.6vw, 42px); }
.cidx--form .cidx-word { font-size: clamp(22px, 2.2vw, 34px); }
.host-band .shout { font-size: clamp(34px, 5vw, 84px); }
.rank-num { font-size: clamp(54px, 5vw, 80px); }
.footer-giant { font-size: 22vw; }
.venue-name { font-size: clamp(40px, 5vw, 80px); }
.venue-hero .venue-cap b { font-size: clamp(56px, 6vw, 96px); }
.maker-name { font-size: clamp(52px, 7vw, 112px); }
.nf-num { font-size: clamp(120px, 18vw, 260px); }
.ov-greet { font-size: clamp(34px, 3.8vw, 60px); }
.auth-shout { font-size: clamp(40px, 4.4vw, 72px); }
.auth-title { font-size: clamp(44px, 4.6vw, 72px); }
.plan-price b { font-size: clamp(46px, 4.4vw, 72px); }
.value-n { font-size: clamp(72px, 7vw, 100px); }
.wg-title { font-size: clamp(34px, 3.8vw, 56px); }
.legal-sec h2 { font-size: clamp(24px, 2.4vw, 34px); }
.kpi-num b { font-size: clamp(40px, 3.2vw, 56px); }
.dash-title { font-size: clamp(26px, 2.4vw, 38px); }
.flow-n { font-size: 84px; }
.tk-date b { font-size: 64px; }
.tk--hero .tk-date b { font-size: 70px; }
.booth-bpm b { font-size: 48px; }
.calc-num { font-size: clamp(28px, 2.6vw, 40px); }

@media (max-width: 640px) {
  .hero-title { font-size: clamp(40px, 12vw, 56px); }
  .show-hero-text h1 { font-size: clamp(40px, 12vw, 60px); }
  .section-title, .shout { font-size: clamp(34px, 10.5vw, 48px); }
  .page-title, .page-head .shout { font-size: clamp(40px, 12vw, 56px); }
  .intro-statement { font-size: clamp(26px, 7.4vw, 36px); }
  .cta-title { font-size: clamp(38px, 11.5vw, 56px); }
  .marquee-track a { font-size: 30px; }
  .lede { font-size: 19px; }
  .stats dt { font-size: 36px; }
  .occ-title { font-size: clamp(32px, 9.5vw, 44px); }
  .occ-outline { font-size: clamp(36px, 11vw, 52px); }
  .cidx-word, .cidx--sm .cidx-word { font-size: 30px; }
  .cidx--form .cidx-word { font-size: 24px; }
  .host-band .shout { font-size: clamp(30px, 9vw, 42px); }
  .rank-num { font-size: 46px; }
  .footer-giant { font-size: 30vw; }
  .venue-name { font-size: clamp(36px, 11vw, 52px); }
  .maker-name { font-size: 56px; }
  .nf-num { font-size: 34vw; }
  .ov-greet { font-size: 34px; }
  .auth-title { font-size: clamp(40px, 12vw, 54px); }
  .plan-price b { font-size: 48px; }
  .value-n { font-size: 64px; }
  .kpi-num b { font-size: 38px; }
  .tk-title { font-size: clamp(24px, 9cqw, 34px); }
  .tk-date b { font-size: 54px; }
  .flow-n { font-size: 64px; }
  .booth-bpm b { font-size: 40px; }
  .booth-title, .flow-title { font-size: 26px; }
  .page-head { padding-top: 120px; }
  .home-section { padding-block: 56px; }
}
.home-section { padding-block: clamp(64px, 9vw, 140px); }

/* ==========================================================================
   Mobile pass — measured at 390×844
   ========================================================================== */
@media (max-width: 640px) {
  /* header: keep the name, tighten the nav */
  .site-header { gap: 8px 10px; padding-inline: 16px; }
  .wordmark-name { display: inline; font-size: 22px; }
  .wordmark-mark { width: 20px; }
  .nav { gap: 12px; }
  .nav-link { font-size: 10px; letter-spacing: .06em; }
  .theme-btn, .acct-btn { width: 34px; height: 34px; }
  .acct-signin { width: 34px; height: 34px; }
  .header-end { gap: 6px; }
  .ticker { font-size: 12px; gap: 8px; padding-block: calc(env(safe-area-inset-top, 0px) + 6px) 6px; }
  .ticker-live { font-size: 9px; }
  .ticker-x { width: 22px; height: 22px; }

  .section-label { flex-wrap: wrap; gap: 6px 12px; }
  .section-label .mono { font-size: 10px; }

  /* Booking fast */
  .rank-list { --thumb: 62px; }
  .rank-link { padding: 14px 0 16px; }
  .rank-num { font-size: 40px; margin-right: 10px; }
  .rank-title { font-size: 17px; gap: 6px; }
  .verified { font-size: 18px; }
  .rank-meta { font-size: 13px; }
  .live-line { font-size: 9.5px; letter-spacing: .04em; }
  .rank-price { font-size: 14px; }
  .rank-go { padding: 5px 11px; font-size: 12px; }
  .pop-sub { font-size: 15px; }

  /* Occasion stage */
  .occ-center { width: min(252px, 66vw); margin-top: -36px; }
  .tk--hero .tk-title { font-size: 26px; }
  .occ-kicker, .occ-price { display: none; }
  .occ-copy { gap: 6px; }
  .occ-inner { row-gap: 16px; padding: 26px 16px calc(var(--nh) + 16px); }
  .occ-cta { font-size: 13px; }
  .occ-arrow { width: 34px; height: 34px; }
  .occ-go { width: 48px; height: 48px; }
  .occ-railhead { margin-top: 32px; }
  .occ-railcount > b { font-size: 56px; }
  [data-finder-what] { font-size: 18px; }
  .occ-private { font-size: 9.5px; }
  .rail-controls .btn { padding: 11px 16px; font-size: 14px; }
  .rail-btn { width: 40px; height: 40px; }

  /* Ticket cards in rails/grids */
  .ecard-rail > .ecard-li { flex-basis: 66vw; }
  .tk { --cut: 64cqw; }
  .tk-art { aspect-ratio: 1 / .64; }
  .tk.tk--hero { --cut: 60cqw; }
  .tk.tk--hero .tk-art { aspect-ratio: 1 / .6; }
  .tk-body { padding: 16px 16px 0; }
  .tk-foot { padding: 12px 16px 40px; }
  .tk-price b { font-size: 21px; }
  .tk-go { width: 40px; height: 40px; }
  .tk-meta { font-size: 12.5px; }
  .tk-chips .type-tag, .tk-chips .status-pill { font-size: 9px; padding: 4px 8px; }
  .ecard-grid { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .ecard-grid .tk-title { font-size: 18px; }
  .ecard-grid .tk-meta, .ecard-grid .tk-kicker { display: none; }
  .ecard-grid .tk-date b { font-size: 40px; }
  .ecard-grid .tk-date span { display: none; }
  .ecard-grid .tk-chips .status-pill { display: none; }
  .ecard-grid .tk-go { width: 32px; height: 32px; }
  .ecard-grid .tk-price b { font-size: 17px; }
  .ecard-grid .tk-notch { font-size: 8px; letter-spacing: .1em; }

  /* Calendar: swipe between months */
  .calendar { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .calendar::-webkit-scrollbar { display: none; }
  .cal-month { flex: 0 0 86vw; scroll-snap-align: start; }

  /* Host flows: swipe rail of compact cards */
  .flow-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 24px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .flow-grid::-webkit-scrollbar { display: none; }
  .flow { flex: 0 0 80vw; scroll-snap-align: start; }
  .flow .flow-art { aspect-ratio: 16 / 7; }
  .flow .flow-body { padding: 16px 18px 44px; gap: 10px; }
  .flow .flow-body ul { font-size: 14px; gap: 4px; }
  .flow-go { width: 38px; height: 38px; }
  .host-band { padding: 26px 20px; border-radius: 22px; }
  .host-band-copy { font-size: 15px; }

  /* Listening booth */
  .booth { flex-basis: 72vw; }
  .booth-shape { padding: 14px 14px 42px; gap: 12px; }
  .booth .sketch-btn { padding: 6px 12px 6px 6px; font-size: 13px; }
  .booth .sketch-icon { width: 24px; height: 24px; }

  /* Rooms we book: compact horizontal rows */
  .venue-grid { grid-template-columns: 1fr; gap: 10px; }
  .venue-card { grid-template-columns: 108px minmax(0, 1fr); border-radius: 18px; }
  .venue-card .venue-art { aspect-ratio: auto; min-height: 108px; padding: 10px; display: flex; align-items: flex-end; }
  .venue-cap b { font-size: 30px; -webkit-text-stroke-width: 1.1px; }
  .venue-cap .mono { display: none; }
  .venue-foot { padding: 12px 14px; }
  .venue-foot h3 { font-size: 20px; }
  .venue-foot p { font-size: 9.5px; }
  .venue-card .tk-go { width: 36px; height: 36px; flex: none; }

  /* Alerts / footer */
  .alerts-inner { padding: 64px 20px 56px; }
  .alert-form input { font-size: 18px; }
  .footer-cols { gap: 24px 16px; }
  .footer-cols a { font-size: 15px; }
  .footer-row { font-size: 9.5px; gap: 10px; }
  .feed { left: 10px; right: 10px; max-width: none; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .feed-link { font-size: 13px; }
}
@media (max-width: 640px) {
  .ptk-step { gap: 2px; padding: 2px; }
  .ptk-step button { width: 28px; height: 28px; font-size: 15px; }
  .ptk-step output { min-width: 18px; font-size: 16px; }
  .ptk-price b { font-size: 21px; }
  .ptk-punch { max-width: 84px; gap: 4px; }
  .ptk-punch i { width: 8px; height: 8px; }
  .ptk-name h3 b { font-size: 26px; }
  .ptk-name h3 span { font-size: 19px; }
  .ptk-desc { font-size: 13.5px; }
  .ptk-code { height: 20px; }
  .ptk-top span:first-child { font-size: 9px; }
  .pkg-chip { padding: 4px 10px 4px 4px; font-size: 12px; }
  .pkg-chip b { width: 22px; height: 22px; }
  .ptk-go { padding: 7px 10px; font-size: 11px; }
}
.book-grid > *, .picker, [data-picker] { min-width: 0; }
.tablemap { max-width: 100%; }
@media (max-width: 640px) { .tables { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 640px) {
  .dash-main { padding-inline: 14px; }
  .dash-top { gap: 10px; padding-block: calc(env(safe-area-inset-top, 0px) + 12px) 12px; margin-bottom: 16px; }
  .dash-burger { width: 38px; height: 38px; }
  .dash-new { padding: 10px 14px; font-size: 13px; }
  .ov-hello { gap: 14px; margin-bottom: 16px; }
  .ov-hello .mono { font-size: 9.5px; }
  .ov-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .qa { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 12px 6px; border-radius: 16px; font-size: 12px; }
  .qa i { width: 30px; height: 30px; }
  .kpi { min-height: 0; padding: 14px; border-radius: 18px; }
  .kpi-label { font-size: 9px; }
  .kpi-row .spark { height: 34px; margin-bottom: 8px; }
  .kpi-foot .mono { font-size: 9px; }
  .dcard { border-radius: 18px; padding: 14px; }
  .dcard-big b { font-size: 32px; }
  .bars { height: 150px; gap: 4px; }
  .bar-col i { border-radius: 6px 6px 3px 3px; }
  .ov-next .tk { width: min(260px, 100%); }
  .act-text { font-size: 13px; }
  .type-bar { font-size: 13px; }
  .door-inner { padding: 48px 18px 56px; gap: 22px; }
  .door-ring { width: 160px; }
  .door-ring b { font-size: 56px; }
  .dash .door-form input { font-size: 20px; }
  .door-go { width: 52px; height: 52px; }
  .dash .door-card b { font-size: 26px; }
  .step-legend { gap: 10px; }
  .step-n { font-size: 34px; }
  .step-t { font-size: 17px; }
  .dash .create-step { padding: 16px; border-radius: 18px; }
  .dash .swatch { width: 56px; height: 70px; }
}
@media (min-width: 641px) { .footer-giant { font-size: 17vw; } .cta-title { font-size: clamp(42px, 6vw, 96px); } }

/* ==========================================================================
   Square buttons, taller header, no sideways drift on phones
   ========================================================================== */
:root { --r-btn: 4px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* every clickable control: small radius, no pills or circles */
.btn, .sketch-btn, .chip, button.chip, .chip-btn, .view-toggle, .view-toggle button, .stepper, .stepper button,
.lightbox-close, .rail-btn, .ticker-x, .rank-go, .feed-x, .occ-arrow, .occ-go, .occ-thumb, .tk-go, .tw-go, .qa, .qa i,
.row-go, .door-go, .acct-signin, .acct-btn, .theme-btn, .seg span, .ptk-step, .ptk-step button, .pkg-chip, .pkg-chip b,
.ptk-go, .faq summary::after, .dash-burger, .dash-new, .plan-stub .btn, .copy-row input, .wallet-btn, .session,
.cidx-item, .hsearch, .hsearch button, .acct-menu a, .acct-menu button, .auth-card .btn, .pw-toggle, .sketch-icon {
  border-radius: var(--r-btn);
}
.btn { padding: 14px 24px; letter-spacing: .01em; }
.btn:hover { transform: none; box-shadow: 4px 4px 0 color-mix(in srgb, var(--bone) 22%, transparent); translate: -2px -2px; }
.btn { transition: translate .25s var(--ease-out), box-shadow .25s var(--ease-out), background .3s; }
.theme-btn:hover { transform: none; }

/* taller header + live bar */
.site-header { padding-block: calc(env(safe-area-inset-top, 0px) + 26px) 26px; }
.site-header.is-solid { padding-block: calc(env(safe-area-inset-top, 0px) + 16px) 16px; }
.ticker { margin-top: calc(-1 * (env(safe-area-inset-top, 0px) + 26px)); padding-block: calc(env(safe-area-inset-top, 0px) + 12px) 12px; font-size: 14px; }
.site-header.is-solid .ticker { margin-top: calc(-1 * (env(safe-area-inset-top, 0px) + 16px)); }
.ticker-x { width: 30px; height: 30px; }
.theme-btn, .acct-btn, .acct-signin { height: 42px; }
.theme-btn, .acct-btn { width: 42px; }
body.has-ticker:not(.has-hero) main { margin-top: 46px; }

@media (max-width: 640px) {
  .site-header { padding-block: calc(env(safe-area-inset-top, 0px) + 20px) 18px; }
  .site-header.is-solid { padding-block: calc(env(safe-area-inset-top, 0px) + 14px) 14px; }
  .ticker { margin-top: calc(-1 * (env(safe-area-inset-top, 0px) + 20px)); padding-block: calc(env(safe-area-inset-top, 0px) + 11px) 11px; font-size: 13px; }
  .site-header.is-solid .ticker { margin-top: calc(-1 * (env(safe-area-inset-top, 0px) + 14px)); }
  .ticker-live { font-size: 10px; }
  .ticker-x { width: 28px; height: 28px; }
  .wordmark-name { font-size: 24px; }
  .nav-link { font-size: 11px; }
  .theme-btn, .acct-btn, .acct-signin { width: 38px; height: 38px; }
  body.has-ticker:not(.has-hero) main { margin-top: 44px; }

  /* iOS zooms into any field under 16px — keep them at 16 */
  input, select, textarea { font-size: 16px !important; }

  /* rank rows use the full width: art, then a body that spans to the edge */
  .rank-list { --thumb: 84px; }
  .rank-link { grid-template-columns: var(--thumb) minmax(0, 1fr); column-gap: 14px; padding: 16px 0 18px; }
  .rank-num { position: absolute; left: calc(var(--thumb) - 30px); top: 6px; z-index: 2; font-size: 38px; margin: 0; pointer-events: none; }
  .rank-link { position: relative; }
  .rank-body, .rank-cta { grid-column: 2; }
  .rank-title { font-size: 18px; }
  .rank-meta { font-size: 14px; }
  .rank-cta { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0 0; }
  .rank-price { font-size: 15px; }
  .rank-go { padding: 9px 16px; font-size: 13px; }
}

/* ==========================================================================
   Logo — a V of paired slats ending in a point, then "ybe"
   ========================================================================== */
.wordmark { --logo: 30px; gap: 0 !important; align-items: center; }
.wordmark-mark { position: relative; display: block; width: calc(var(--logo) * .84); height: calc(var(--logo) * 1.02); perspective: 80px; translate: 0 calc(var(--logo) * -.02); flex: none; }
.wordmark-mark i, .wordmark-mark b { position: absolute; display: block; height: 13%; border-radius: 999px; background: var(--accent); transform: none; transition: none; }
.wordmark-mark i:nth-child(1) { left: 0;     width: 43.7%; top: 0; }
.wordmark-mark i:nth-child(2) { left: 57.2%; width: 42.8%; top: 0; }
.wordmark-mark i:nth-child(3) { left: 11.1%; width: 35.2%; top: 20.75%; }
.wordmark-mark i:nth-child(4) { left: 55.1%; width: 34.3%; top: 20.75%; }
.wordmark-mark i:nth-child(5) { left: 19.9%; width: 28.3%; top: 41%; }
.wordmark-mark i:nth-child(6) { left: 53%;   width: 28%;   top: 41%; }
.wordmark-mark i:nth-child(7) { left: 28.9%; width: 20.5%; top: 61%; }
.wordmark-mark i:nth-child(8) { left: 52.1%; width: 20.2%; top: 61%; }
.wordmark-mark b { left: 38.9%; width: 23.5%; top: 78.25%; height: 21.75%; border-radius: 0; clip-path: polygon(8% 0, 92% 0, 100% 10%, 56% 97%, 50% 100%, 44% 97%, 0 10%); }
.wordmark-name { font-size: var(--logo); font-weight: 600; font-variation-settings: "wdth" 100; letter-spacing: -.05em; line-height: 1; margin-left: calc(var(--logo) * -.05); }
/* hover: the slats flip row by row, top to bottom, and the point drops in */
.wordmark:hover .wordmark-mark i, .wordmark:focus-visible .wordmark-mark i { animation: slatFlip .7s var(--ease-out) both; }
.wordmark:hover .wordmark-mark i:nth-child(n+3), .wordmark:focus-visible .wordmark-mark i:nth-child(n+3) { animation-delay: .06s; }
.wordmark:hover .wordmark-mark i:nth-child(n+5), .wordmark:focus-visible .wordmark-mark i:nth-child(n+5) { animation-delay: .12s; }
.wordmark:hover .wordmark-mark i:nth-child(n+7), .wordmark:focus-visible .wordmark-mark i:nth-child(n+7) { animation-delay: .18s; }
.wordmark:hover .wordmark-mark b, .wordmark:focus-visible .wordmark-mark b { animation: pointDrop .7s .26s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes slatFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg) scaleX(.8); } 100% { transform: rotateX(0); } }
@keyframes pointDrop { 0% { transform: translateY(-40%) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wordmark .wordmark-mark i, .wordmark .wordmark-mark b { animation: none !important; } }
.site-header .wordmark-by { margin-left: 0; }
.site-header .wordmark:hover .wordmark-by, .site-header .wordmark:focus-visible .wordmark-by { margin-left: 8px; }
.dash-side .wordmark { --logo: 32px; }
.auth-stage .wordmark, .auth .wordmark { --logo: 32px; }
.mnav .wordmark { --logo: 28px; }
@media (max-width: 640px) { .site-header .wordmark { --logo: 26px; } .wordmark-name { display: inline; } }

/* ==========================================================================
   Mobile menu
   ========================================================================== */
.nav-burger { display: none; width: 42px; height: 42px; flex: none; cursor: pointer; padding: 0 11px; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--glass-soft); color: inherit; }
.nav-burger i { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease-out), width .4s var(--ease-out), opacity .3s; }
.nav-burger i:nth-child(2) { width: 70%; } .nav-burger i:nth-child(3) { width: 40%; background: var(--accent); }
.nav-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] i:nth-child(3) { width: 100%; transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
  .nav-burger { display: inline-flex; }
  .site-header .nav, .site-header .header-end > .theme-btn { display: none; }
  .site-header { grid-template-columns: auto 1fr auto !important; }
  .header-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
}
@media (max-width: 640px) { .nav-burger { width: 38px; height: 38px; padding: 0 9px; } }
html.menu-open, html.menu-open body { overflow: hidden; }

.mnav { position: fixed; inset: 0; z-index: 100; background: rgba(8, 6, 4, 0); transition: background .4s; }
.mnav.is-open { background: rgba(8, 6, 4, .55); }
.mnav-panel {
  position: absolute; inset: 0 0 0 auto; width: min(440px, 100%); overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 22px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
  color: var(--cream);
  background: radial-gradient(120% 50% at 100% 0%, rgba(245, 198, 79, .16), transparent 60%), linear-gradient(170deg, var(--espresso-1), var(--espresso-2));
  transform: translateX(100%); transition: transform .5s var(--ease-out);
}
.mnav.is-open .mnav-panel { transform: none; }
.mnav-top { display: flex; align-items: center; justify-content: space-between; }
.mnav-top .wordmark-name { color: var(--cream); }
.mnav-x { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-btn); border: 1px solid rgba(243, 233, 218, .22); background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)); color: var(--cream); cursor: pointer; font-size: 20px; }
.mnav-search { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; height: 52px; border-radius: var(--r-btn); border: 1px solid rgba(243, 233, 218, .2); background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)); }
.mnav-search .ti { font-size: 19px; opacity: .7; }
.mnav-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--cream); font: inherit; outline: none; }
.mnav-search input::placeholder { color: rgba(243, 233, 218, .5); }
.mnav-search select { max-width: 120px; border: 0; border-left: 1px solid rgba(243, 233, 218, .2); background: none; color: var(--cream); font: inherit; padding: 0 6px 0 10px; height: 34px; }
.mnav-search select option { color: #17110b; }
.mnav-links { display: grid; align-content: start; }
.mnav-links a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(243, 233, 218, .12); opacity: 0; transform: translateX(24px); transition: opacity .4s, transform .5s var(--ease-out), color .3s; transition-delay: calc(.08s + var(--i) * .045s); }
.mnav.is-open .mnav-links a, .mnav.is-open .mnav-acct { opacity: 1; transform: none; }
.mnav-n { font-size: 11px; color: rgba(243, 233, 218, .5); }
.mnav-label { font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: 34px; line-height: 1; letter-spacing: -.01em; }
.mnav-links em { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: var(--r-btn); background: linear-gradient(rgba(243, 233, 218, .1), rgba(243, 233, 218, .1)); }
.mnav-links a > .ti { font-size: 20px; opacity: .45; transition: transform .4s var(--ease-out), opacity .3s; }
.mnav-links a:hover, .mnav-links a[aria-current] { color: #f5c64f; }
.mnav-links a:hover > .ti { opacity: 1; transform: translate(3px, -3px); }
.mnav-links a[aria-current] .mnav-n { color: #f5c64f; }
.mnav-acct { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease-out); transition-delay: .35s; }
.mnav-acct .btn { padding: 14px 12px; }
.mnav-acct .btn-ghost { color: var(--cream); border-color: rgba(243, 233, 218, .3); }
.mnav-tile { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-btn); border: 1px solid rgba(243, 233, 218, .18); background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)); position: relative; }
.mnav-tile .ti { font-size: 22px; color: #f5c64f; }
.mnav-tile b { position: absolute; top: 12px; right: 12px; font-family: var(--f-mono); font-size: 11px; padding: 2px 7px; border-radius: var(--r-btn); background: #f5c64f; color: #17110b; }
.mnav-foot { display: grid; gap: 14px; padding-top: 6px; }
.mnav-theme { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-btn); border: 1px solid rgba(243, 233, 218, .18); background: none; color: var(--cream); cursor: pointer; font: inherit; }
.mnav-switch { position: relative; display: inline-flex; gap: 0; padding: 3px; border-radius: var(--r-btn); background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)); }
.mnav-switch i { position: relative; z-index: 1; width: 34px; height: 28px; display: grid; place-items: center; font-size: 16px; transition: color .3s; }
.mnav-switch b { position: absolute; top: 3px; left: 3px; width: 34px; height: 28px; border-radius: 3px; background: #f5c64f; transition: transform .4s var(--ease-out); }
:root[data-theme="light"] .mnav-switch b { transform: translateX(34px); }
:root:not([data-theme="light"]) .mnav-switch i:first-child, :root[data-theme="light"] .mnav-switch i:last-child { color: #17110b; }
.mnav-by { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 233, 218, .55); }
@media (prefers-reduced-motion: reduce) { .mnav-panel, .mnav-links a, .mnav-acct { transition: none; } }

/* ==========================================================================
   Season calendar — one horizontal strip of months, never stacks
   ========================================================================== */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.cal-range { margin: 0; color: var(--bone-dim); }
.calendar {
  display: flex !important; gap: clamp(20px, 3vw, 44px); overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.calendar::-webkit-scrollbar { display: none; }
.cal-month { flex: 0 0 clamp(280px, 30%, 400px); scroll-snap-align: start; min-width: 0; }
@media (max-width: 640px) {
  .cal-month { flex-basis: 84vw; }
  .cal-head .rail-btn { width: 38px; height: 38px; }
  .cal-range { font-size: 10px; }
}

/* ==========================================================================
   Event page — map
   ========================================================================== */
.map-section { padding-block: clamp(24px, 4vw, 56px) 0; }
.vmap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); border-radius: 22px; overflow: hidden; background: linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); color: var(--cream); min-height: 420px; }
.vmap-card { display: grid; align-content: start; gap: 12px; padding: clamp(22px, 2.6vw, 36px); }
.vmap-card .type-tag { justify-self: start; color: #f5c64f; }
.vmap-name { margin: 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(34px, 3.6vw, 52px); line-height: .92; }
.vmap-addr { margin: 0; font-size: 17px; }
.vmap-note { margin: 0; color: rgba(243, 233, 218, .65); font-size: 15px; max-width: 34ch; }
.vmap-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 0 4px; border-block: 1px dashed rgba(243, 233, 218, .22); }
.vmap-facts div { padding: 12px 0; }
.vmap-facts div + div { padding-left: 12px; border-left: 1px dashed rgba(243, 233, 218, .22); }
.vmap-facts dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 233, 218, .5); }
.vmap-facts dd { margin: 4px 0 0; font-size: 15px; color: var(--cream); }
.vmap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.vmap-actions .btn { padding: 12px 18px; font-size: 15px; }
.vmap-actions .btn-ghost { color: var(--cream); border-color: rgba(243, 233, 218, .3); }
.vmap-frame { position: relative; min-height: 320px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px), #1b140e; }
.vmap-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9) sepia(.2); }
:root[data-theme="light"] .vmap-frame iframe { filter: sepia(.25) saturate(.85); }
.vmap-pin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 44px; height: 44px; translate: -50% -100%; display: grid; place-items: center; background: #f5c64f; color: #17110b; font-size: 22px; border-radius: 4px 4px 4px 0; rotate: -45deg; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .6); pointer-events: none; animation: pinDrop .9s .3s cubic-bezier(.2, 1.5, .4, 1) both; }
.vmap-pin .ti { rotate: 45deg; }
.vmap-pin::after { content: ""; position: absolute; left: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #f5c64f; animation: livePulse 1.8s ease-out infinite; }
@keyframes pinDrop { from { translate: -50% -260%; opacity: 0; } }
.vmap-corner { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; border-radius: var(--r-btn); background: rgba(21, 15, 10, .8); color: var(--cream); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
@media (max-width: 760px) {
  .vmap { grid-template-columns: 1fr; min-height: 0; }
  .vmap-frame { order: -1; min-height: 260px; }
  .vmap-actions .btn { flex: 1; }
}
.vmap-corner { bottom: auto; top: 12px; }
.vmap-pin { border-radius: 50% 50% 50% 0; width: 46px; height: 46px; }
.map-section { padding-bottom: clamp(32px, 5vw, 72px); }

/* ==========================================================================
   Rooms we book — venue stage (one big room, next two in the side column)
   ========================================================================== */
.vstage {
  --line-c: rgba(243, 233, 218, .12);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 22%, 310px); grid-template-rows: minmax(0, 1fr) auto;
  border-radius: 6px; overflow: hidden; color: var(--cream);
  background: linear-gradient(165deg, var(--espresso-1), var(--espresso-2));
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .7);
}
.vstage-main { position: relative; overflow: hidden; min-height: clamp(440px, 44vw, 620px); isolation: isolate; }
.vstage-paint { position: absolute; inset: 0; z-index: -2; transition: background .8s ease; }
.vstage-paint::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 10%),
    linear-gradient(90deg, rgba(14, 10, 7, .88) 0%, rgba(14, 10, 7, .55) 45%, rgba(14, 10, 7, .1) 100%),
    linear-gradient(0deg, rgba(14, 10, 7, .7), transparent 40%);
}
.vstage-obj {
  position: absolute; z-index: 2; right: 6%; top: 50%; translate: 0 -50%;
  font-size: clamp(240px, 30vw, 470px); line-height: 1; pointer-events: none;
  background: linear-gradient(160deg, #ffe39a 0%, #f5c64f 35%, #e0782f 100%); -webkit-background-clip: text; background-clip: text; color: #f5c64f; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
  animation: objFloat 7s ease-in-out infinite;
}
@keyframes objFloat { 50% { transform: translateY(-14px) rotate(-3deg); } }
.vstage-copy { position: relative; z-index: 1; height: 100%; display: grid; align-content: center; gap: clamp(14px, 1.6vw, 22px); padding: clamp(26px, 4vw, 64px); max-width: 760px; }
.vstage-stat { display: grid; gap: 4px; padding-left: 16px; border-left: 3px solid #e0782f; }
.vstage-stat b { font-weight: 500; font-variation-settings: "wdth" 100; font-size: clamp(38px, 3.6vw, 56px); line-height: 1; letter-spacing: -.02em; }
.vstage-stat span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 233, 218, .7); }
.vstage-name { margin: 0; font-family: var(--f-display); font-weight: 600; font-variation-settings: "wdth" 100; font-size: clamp(64px, 8.6vw, 148px); line-height: .9; letter-spacing: -.045em; white-space: nowrap; }
.vstage-name em { font-style: normal; color: #f5c64f; }
.vstage-note { margin: 0; max-width: 34ch; color: rgba(243, 233, 218, .72); font-size: clamp(15px, 1.2vw, 17px); }
.vstage-ctrl { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.sq-pair { display: inline-flex; border: 1px solid rgba(243, 233, 218, .35); border-radius: 3px; }
.sq-pair button { width: 46px; height: 46px; display: grid; place-items: center; border: 0; background: none; color: var(--cream); cursor: pointer; font-size: 18px; transition: background .3s, color .3s; }
.sq-pair button + button { border-left: 1px solid rgba(243, 233, 218, .35); }
.sq-pair button:hover { background: var(--cream); color: #17110b; }
.vstage-book { display: inline-grid; place-items: center; min-width: 140px; height: 48px; padding: 0 30px; border-radius: 3px; background: var(--cream); color: #17110b; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; transition: background .3s, translate .3s var(--ease-out), box-shadow .3s; }
.vstage-book:hover { background: #f5c64f; translate: -2px -2px; box-shadow: 4px 4px 0 rgba(243, 233, 218, .35); }

.vstage-side { grid-row: 1 / 3; grid-column: 2; display: grid; grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr); border-left: 1px solid var(--line-c); }
.vstage-side button { position: relative; overflow: hidden; isolation: isolate; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vside-paint { position: absolute; inset: 0; z-index: -1; transition: transform 1.2s var(--ease-out), background .8s; }
.vside-paint::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 14%), linear-gradient(0deg, rgba(14, 10, 7, .92) 10%, rgba(14, 10, 7, .35) 70%); }
.vstage-side button:hover .vside-paint { transform: scale(1.06); }
.vside-a { display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-c) !important; }
.vside-body { display: grid; gap: 12px; padding: 26px; }
.vside-name { font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.vside-rule { width: 70%; height: 2px; background: #e0782f; transform-origin: left; transition: transform .6s var(--ease-out); }
.vstage-side button:hover .vside-rule { transform: scaleX(1.3); }
.vside-note { font-size: 13px; line-height: 1.45; color: rgba(243, 233, 218, .65); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vside-b { display: flex; align-items: flex-end; padding: 22px 26px !important; }
.vside-big { font-weight: 600; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.04em; line-height: 1; }
.vside-big em { font-style: normal; color: #f5c64f; }

.vstage-bar { position: relative; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); min-height: 66px; border-top: 1px solid var(--line-c); padding-right: clamp(16px, 2.4vw, 32px); }
.vbar-tile { align-self: stretch; width: 66px; display: grid; place-items: center; background: #e0782f; color: #fff7ec; font-size: 26px; }
.vbar-stat { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; }
.vbar-stat .ti { font-size: 22px; color: #e0782f; }
.vbar-count { color: rgba(243, 233, 218, .55); font-size: 11px; letter-spacing: .14em; }
.vbar-loc { margin-left: auto; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(243, 233, 218, .6); }
.vbar-loc b { margin-left: 8px; letter-spacing: .06em; text-transform: none; font-family: var(--f-sans, inherit); font-size: 12px; color: var(--cream); font-weight: 500; }
.vbar-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(rgba(243, 233, 218, .08), rgba(243, 233, 218, .08)); }
.vbar-progress i { display: block; height: 100%; background: #f5c64f; transform-origin: left; animation: vProgress 7s linear both; }
.vstage.is-paused .vbar-progress i { animation-play-state: paused; }
@keyframes vProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* swap transitions */
.vstage.is-swap .vstage-name span, .vstage.is-swap .vstage-stat b { animation: vsUp .7s var(--ease-out) both; }
.vstage.is-swap .vstage-stat b { animation-delay: .05s; }
.vstage.is-swap .vstage-note { animation: vsFade .8s .15s both; }
.vstage.is-swap .vstage-obj { animation: vsObj 1s var(--ease-out) both, objFloat 7s 1s ease-in-out infinite; }
.vstage.is-swap[data-dir="prev"] .vstage-obj { animation-name: vsObjPrev, objFloat; }
.vstage.is-swap .vside-body, .vstage.is-swap .vside-big { animation: vsFade .7s .2s both; }
@keyframes vsUp { from { opacity: 0; transform: translateY(40%); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); } }
@keyframes vsFade { from { opacity: 0; transform: translateY(10px); } }
@keyframes vsObj { from { opacity: 0; transform: translateX(18%) rotate(14deg) scale(.85); } }
@keyframes vsObjPrev { from { opacity: 0; transform: translateX(-18%) rotate(-14deg) scale(.85); } }
.vstage-name span { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .vstage *, .vstage.is-swap * { animation: none !important; } }

@media (max-width: 900px) {
  .vstage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .vstage-side { grid-row: auto; grid-column: 1; grid-template-rows: none; grid-template-columns: 1.3fr 1fr; border-left: 0; border-top: 1px solid var(--line-c); min-height: 170px; }
  .vside-a { border-bottom: 0 !important; border-right: 1px solid var(--line-c) !important; }
  .vstage-bar { grid-row: 2; }
}
@media (max-width: 640px) {
  .vstage-main { min-height: 470px; }
  .vstage-copy { align-content: end; padding: 22px 18px 24px; gap: 14px; }
  .vstage-obj { font-size: 210px; right: -6%; top: 34%; }
  .vstage-name { font-size: clamp(48px, 15vw, 66px); white-space: normal; }
  .vstage-note { font-size: 14px; }
  .vstage-stat b { font-size: 36px; }
  .sq-pair button { width: 44px; height: 44px; }
  .vstage-book { flex: 1; min-width: 0; height: 46px; }
  .vside-body { padding: 16px; gap: 8px; }
  .vside-name { font-size: 11px; }
  .vside-note { font-size: 12px; -webkit-line-clamp: 2; }
  .vside-b { padding: 16px !important; }
  .vside-big { font-size: 22px; }
  .vstage-bar { flex-wrap: wrap; gap: 6px 14px; padding: 0 14px 0 0; min-height: 56px; }
  .vbar-tile { width: 56px; }
  .vbar-stat { font-size: 13px; }
  .vbar-count { margin-left: auto; }
  .vbar-loc { display: none; }
}
.ticket-code { background: #fff; color: #0f1115; }
.ticket-code svg.ticket-qr { width: 136px; height: 136px; fill: initial; }

/* ==========================================================================
   Host studio — ticket scanner
   ========================================================================== */
.dash-nav a b.nav-live { background: #ff4d4d; color: #fff; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-btn); }
.scan-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.scan-cam { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3.4; min-height: 420px; border-radius: 6px; color: var(--cream);
  background: radial-gradient(80% 60% at 50% 40%, rgba(245, 198, 79, .12), transparent 70%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 7%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); }
.scan-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0; transition: opacity .5s; }
.scan-cam.is-on video { opacity: 1; }
.scan-cam.is-mirror video { transform: scaleX(-1); }
.scan-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(closest-side, transparent 0 calc(min(58%, 260px) - 4px), rgba(8, 6, 4, .55) calc(min(58%, 260px)) 100%); }
.scan-cam.is-on .scan-shade { opacity: 1; }
.scan-frame { position: absolute; left: 50%; top: 47%; width: min(58%, 280px); aspect-ratio: 1; translate: -50% -50%; z-index: 1; pointer-events: none; }
.scan-frame i { position: absolute; width: 22%; height: 22%; border: 3px solid #f5c64f; }
.scan-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.scan-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.scan-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.scan-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.scan-laser { position: absolute; left: 6%; right: 6%; top: 8%; height: 2px; background: #f5c64f; box-shadow: 0 0 14px 2px rgba(245, 198, 79, .7); opacity: 0; }
.scan-cam.is-on .scan-laser { opacity: 1; animation: laser 2.2s ease-in-out infinite alternate; }
@keyframes laser { to { top: 92%; } }
.scan-cam.is-on .scan-frame i { animation: framePulse 2.2s ease-in-out infinite; }
@keyframes framePulse { 50% { scale: 1.06; } }
.scan-top { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scan-top select { min-width: 0; max-width: 62%; height: 40px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid rgba(243, 233, 218, .25); background: rgba(14, 10, 7, .7); color: var(--cream); font: inherit; font-size: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scan-top select option { color: #17110b; }
.scan-count { padding: 9px 12px; border-radius: var(--r-btn); background: rgba(14, 10, 7, .7); font-size: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scan-count b { color: #f5c64f; font-size: 15px; }
.scan-idle { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 70px 22px 90px; text-align: center; transition: opacity .4s; }
.scan-cam.is-on .scan-idle { opacity: 0; pointer-events: none; }
.scan-cam:not(.is-on) .scan-frame { opacity: .35; }
.scan-idle-ico { font-size: 54px; color: #f5c64f; line-height: 1; }
.scan-idle-title { margin: 0; font-weight: 700; font-size: clamp(20px, 2vw, 26px); }
.scan-idle-note { margin: 0; max-width: 40ch; font-size: 11px; line-height: 1.6; color: rgba(243, 233, 218, .65); word-break: break-word; }
.scan-idle-note b { color: #f5c64f; }
.scan-idle-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.scan-idle .btn-ghost { color: var(--cream); border-color: rgba(243, 233, 218, .3); }
.scan-idle .btn[disabled] { opacity: .45; cursor: not-allowed; }
.scan-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.scan-flash.go { animation: flash .7s ease-out; }
.scan-flash.is-ok { background: radial-gradient(circle, rgba(47, 191, 113, .55), rgba(47, 191, 113, .15)); }
.scan-flash.is-dup { background: radial-gradient(circle, rgba(245, 198, 79, .55), rgba(245, 198, 79, .15)); }
.scan-flash.is-bad { background: radial-gradient(circle, rgba(255, 77, 77, .55), rgba(255, 77, 77, .15)); }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.scan-bottom { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; gap: 10px; align-items: center; }
.scan-tool { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: var(--r-btn); border: 1px solid rgba(243, 233, 218, .25); background: rgba(14, 10, 7, .7); color: var(--cream); cursor: pointer; font-size: 20px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scan-cam:not(.is-on) [data-scan-stop] { opacity: .35; pointer-events: none; }
.scan-type { flex: 1; min-width: 0; display: flex; height: 46px; border-radius: var(--r-btn); border: 1px solid rgba(243, 233, 218, .25); background: rgba(14, 10, 7, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scan-type input { flex: 1; min-width: 0; border: 0; background: none; color: var(--cream); font-family: var(--f-mono); font-size: 14px; padding: 0 12px; outline: none; text-transform: uppercase; }
.scan-type input::placeholder { color: rgba(243, 233, 218, .45); text-transform: none; }
.scan-type button { width: 46px; border: 0; border-radius: 0 var(--r-btn) var(--r-btn) 0; background: #f5c64f; color: #17110b; cursor: pointer; font-size: 18px; }

.scan-side { display: grid; gap: 14px; }
.scan-result { min-height: 168px; }
.scan-result .eyebrow { margin: 0 0 10px; }
.scan-wait { margin: 0; padding: 40px 18px; text-align: center; border: 1px dashed var(--line); border-radius: 6px; color: var(--bone-dim); font-size: 12px; }
.scan-card { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 20px 20px 18px; border-radius: 6px; color: var(--cream); background: linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); border-left: 5px solid var(--c); animation: stampIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.scan-card.is-ok { --c: #2fbf71; } .scan-card.is-dup { --c: #f5c64f; } .scan-card.is-bad { --c: #ff4d4d; }
.scan-card-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-btn); background: var(--c); color: #17110b; font-size: 22px; }
.scan-card b { font-size: 22px; line-height: 1.1; }
.scan-card p { margin: 0; color: rgba(243, 233, 218, .8); }
.scan-card .muted { font-size: 11px; color: rgba(243, 233, 218, .5); }
.scan-card .door-stamp { position: absolute; top: 18px; right: 16px; color: var(--c); border-color: var(--c); }
.scan-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scan-tally div { display: grid; gap: 2px; padding: 14px; border-radius: 6px; background: var(--ink-2); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.scan-tally .is-ok { --c: #2fbf71; } .scan-tally .is-dup { --c: #f5c64f; } .scan-tally .is-bad { --c: #ff4d4d; }
.scan-tally b { font-size: 28px; line-height: 1; }
.scan-tally span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.scan-log ul { list-style: none; margin: 0; padding: 0; display: grid; }
.scan-log li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.scan-log li:first-child { border-top: 0; }
.scan-log li > .ti { font-size: 20px; }
.scan-log li.is-ok > .ti { color: #2fbf71; } .scan-log li.is-dup > .ti { color: #f5c64f; } .scan-log li.is-bad > .ti { color: #ff4d4d; }
.scan-log time { font-size: 11px; color: var(--bone-dim); }
.scan-log .scan-log-empty { display: block; border: 0; font-size: 12px; }
.scan-test summary { cursor: pointer; list-style: none; font-weight: 600; display: flex; justify-content: space-between; }
.scan-test summary::-webkit-details-marker { display: none; }
.scan-test summary::after { content: "\eb0b"; font-family: "tabler-icons"; }
.scan-test[open] summary::after { content: "\eaf2"; }
.scan-test-qr { display: grid; justify-items: center; gap: 8px; margin-top: 12px; }
.scan-test-qr svg { width: 180px; height: 180px; }
.scan-test-qr span { font-size: 11px; color: var(--bone-dim); }
.scan-none { margin: 0; font-size: 12px; }
@media (max-width: 1020px) { .scan-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .scan-cam { aspect-ratio: auto; min-height: 0; height: min(72svh, 560px); margin-inline: -4px; }
  .scan-top select { max-width: 58%; }
  .scan-tally b { font-size: 22px; }
}

/* Mobile: the profile lives in the menu, not the header */
@media (max-width: 760px) { .site-header .acct { display: none; } }
.mnav-panel { grid-template-rows: auto auto auto 1fr auto auto; }
.mnav-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-btn); background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)); border: 1px solid rgba(243, 233, 218, .14); }
.mnav-av { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-btn); background: linear-gradient(135deg, #f5c64f, #d99a1c); color: #17110b; font-weight: 800; }
.mnav-who { display: grid; gap: 2px; min-width: 0; }
.mnav-who b { font-size: 16px; }
.mnav-who .mono { font-size: 11px; color: rgba(243, 233, 218, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnav-out { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--r-btn); border: 1px solid rgba(255, 178, 122, .35); background: none; color: #ffb27a; font: inherit; font-size: 13px; cursor: pointer; }
.mnav-acct .mnav-tile { gap: 8px; padding: 12px; font-size: 14px; }
.vstage-main { min-height: clamp(420px, 36vw, 540px); }
.vstage-obj { font-size: clamp(220px, 24vw, 380px); right: 9%; }
@media (max-width: 640px) { .vstage-main { min-height: 470px; } .vstage-obj { font-size: 200px; right: -6%; } }
.mnav-who .mono { text-transform: none; letter-spacing: .02em; }

/* Venue stage: no floating glyph; name keeps its full stop; small Tabler chips instead */
.vstage-obj { display: none !important; }
.vstage-name { white-space: normal; text-wrap: balance; font-size: clamp(56px, 7.4vw, 124px); }
.vstage-name em { font-style: normal; color: #f5c64f; }
.vstage-good { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vstage-good li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-btn); border: 1px solid rgba(243, 233, 218, .25); background: linear-gradient(rgba(14, 10, 7, .45), rgba(14, 10, 7, .45)); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.vstage-good .ti { font-size: 15px; color: #f5c64f; }
.vstage.is-swap .vstage-good { animation: vsFade .7s .2s both; }
.vstage-copy { max-width: 820px; }
@media (max-width: 640px) {
  .vstage-name { font-size: clamp(44px, 13vw, 58px); }
  .vstage-main { min-height: 0; }
  .vstage-copy { padding-top: 48px; }
  .vstage-good li { font-size: 10px; padding: 5px 8px; }
}

/* Menu buttons use Tabler glyphs */
.nav-burger, .dash-burger { padding: 0; align-items: center; justify-content: center; font-size: 22px; }
.nav-burger .ti, .dash-burger .ti { display: block; width: auto; height: auto; background: none; transform: none; }
.nav-burger[aria-expanded="true"] .ti::before { content: "\eb55"; }
.nav-burger[aria-expanded="true"] .ti { transform: none !important; }

/* Poster glyphs: a small corner mark instead of a giant watermark */
.poster-glyph, .poster-glyph.ti { position: absolute; right: 7%; top: 6%; left: auto; bottom: auto; z-index: 1; font-size: 13cqw; line-height: 1; opacity: .85; }
.poster.is-mini .poster-glyph, .poster.is-mini .poster-glyph.ti { position: absolute; display: block; grid-row: auto; right: 8%; top: 8%; font-size: 15cqw; opacity: .8; }

/* ==========================================================================
   Venue stage name: one line, truncate long names (cards keep one height)
   ========================================================================== */
.vstage-name { white-space: nowrap; overflow: hidden; text-wrap: nowrap; max-width: 100%; }
.vstage-name > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: .06em; }
@media (max-width: 640px) { .vstage-name { font-size: clamp(40px, 12vw, 52px); } }

/* ==========================================================================
   Filter console (events page) — one bordered bar of labelled cells
   ========================================================================== */
.fconsole {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr) minmax(0, .9fr);
  border: 1px solid var(--line); border-radius: 6px; background: var(--ink-2); overflow: hidden;
}
.fc-cell { position: relative; display: grid; align-content: center; gap: 8px; min-width: 0; padding: 16px 20px 14px; cursor: text; transition: background .3s; }
.fc-cell + .fc-cell { border-left: 1px solid var(--line); }
.fc-cell::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.fc-cell:focus-within { background: color-mix(in srgb, var(--accent) 6%, var(--ink-2)); }
.fc-cell:focus-within::after { transform: scaleX(1); }
.fc-label { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.fc-label .ti { font-size: 14px; color: var(--accent-text); }
.fc-label b { margin-left: auto; color: var(--accent-text); font-weight: 500; letter-spacing: .06em; }
.fc-cell input[type="search"], .fc-select select {
  width: 100%; min-width: 0; border: 0; outline: none; background: none; color: var(--bone); font: inherit; font-size: 17px; padding: 0; height: 28px;
}
.fc-cell input[type="search"]::placeholder { color: color-mix(in srgb, var(--bone) 40%, transparent); }
.fc-select { position: relative; display: block; }
.fc-select select { -webkit-appearance: none; appearance: none; padding-right: 24px; cursor: pointer; text-overflow: ellipsis; }
.fc-select select option, .fc-select select optgroup { background: var(--ink); color: var(--bone); }
.fc-select::after { content: "\ea5f"; font-family: "tabler-icons"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 16px; color: var(--bone-dim); pointer-events: none; transition: color .3s; }
.fc-cell:focus-within .fc-select::after { color: var(--accent-text); }
/* range: custom track with a filled portion */
.fc-price input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; padding: 0; margin: 0; background: none; cursor: pointer; --p: 1; }
.fc-price input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) calc(var(--p) * 100%), var(--line) 0); }
.fc-price input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) calc(var(--p) * 100%), var(--line) 0); }
.fc-price input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 3px; background: var(--accent); border: 3px solid var(--ink-2); box-shadow: 0 0 0 1px var(--accent); transition: transform .2s; }
.fc-price input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); border: 3px solid var(--ink-2); box-shadow: 0 0 0 1px var(--accent); }
.fc-price input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.filters .filter-end { gap: 10px; }
.ftoggle { position: relative; cursor: pointer; }
.ftoggle input { position: absolute; opacity: 0; pointer-events: none; }
.ftoggle span { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-btn); border: 1px solid var(--line); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); transition: background .3s, color .3s, border-color .3s; }
.ftoggle .ti { font-size: 15px; }
.ftoggle:hover span { border-color: var(--bone-dim); color: var(--bone); }
.ftoggle input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ftoggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.view-toggle { border-radius: var(--r-btn); }
.view-toggle button { border-radius: 2px; }
@media (max-width: 1100px) {
  .fconsole { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-cell + .fc-cell { border-left: 0; }
  .fc-cell { border-top: 1px solid var(--line); }
  .fc-search { grid-column: 1 / -1; border-top: 0; }
  .fc-cell:nth-child(odd):not(.fc-search) { border-left: 1px solid var(--line); }
  .fc-cell:last-child { grid-column: 1 / -1; border-left: 0 !important; }
}
@media (max-width: 640px) {
  .fc-cell { padding: 12px 14px 10px; gap: 6px; }
  .fc-cell input[type="search"], .fc-select select { font-size: 16px; }
  .ftoggle span { height: 34px; padding: 0 10px; font-size: 10px; }
}

/* ==========================================================================
   Header search — same console look, compact
   ========================================================================== */
.hsearch { display: flex; align-items: stretch; gap: 0; padding: 0; height: 50px; width: min(520px, 100%); border-radius: 6px; overflow: hidden; background: linear-gradient(color-mix(in srgb, var(--bone) 6%, transparent), color-mix(in srgb, var(--bone) 6%, transparent)); }
.hsearch .hs-cell { position: relative; display: grid; align-content: center; gap: 2px; min-width: 0; padding: 0 14px; cursor: text; }
.hsearch .hs-q { flex: 1.5; }
.hsearch .hs-where { flex: 1; border-left: 1px solid var(--line); cursor: pointer; }
.hs-label { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); line-height: 1; }
.hsearch input[type="search"] { font-size: 14px; height: 20px; padding: 0; }
.hsearch .fc-select select { font-size: 14px; height: 20px; padding-right: 20px; max-width: none; }
.hsearch .fc-select::after { font-size: 14px; }
.hsearch .hs-cell::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.hsearch .hs-cell:focus-within::after { transform: scaleX(1); }
.hs-go { width: 50px; flex: none; border: 0; background: var(--accent); color: var(--on-accent); font-size: 19px; cursor: pointer; display: grid; place-items: center; transition: filter .3s; }
.hs-go:hover { filter: brightness(1.08); }
.hsearch .hs-go .ti { opacity: 1; }
@media (max-width: 1180px) { .hsearch .hs-where { display: none; } }
.mnav-search { height: auto; padding: 0; gap: 0; align-items: stretch; overflow: hidden; border-radius: 6px; display: grid; grid-template-columns: minmax(0, 1fr) 52px; }
.mnav-search .hs-cell { display: grid; gap: 4px; padding: 10px 14px; }
.mnav-search .hs-q { grid-column: 1; }
.mnav-search .hs-where { grid-column: 1; border-top: 1px solid rgba(243, 233, 218, .18); }
.mnav-search .hs-go { grid-column: 2; grid-row: 1 / 3; width: auto; }
.mnav-search .hs-label { color: rgba(243, 233, 218, .55); }
.mnav-search input, .mnav-search select { color: var(--cream); font-size: 16px; }
.mnav-search .fc-select select { border: 0; padding: 0 22px 0 0; height: 24px; max-width: none; color: var(--cream); }
.mnav-search .fc-select::after { color: rgba(243, 233, 218, .55); }
.mnav-find { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 233, 218, .7); border: 1px dashed rgba(243, 233, 218, .25); border-radius: var(--r-btn); }

/* ==========================================================================
   Guest checkout + find my tickets
   ========================================================================== */
.guest-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-btn); background: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--accent-text); font-size: 11px; letter-spacing: .04em; line-height: 1.5; }
.guest-note .ti { font-size: 16px; flex: none; }
.confirm-guest { margin: 16px 0 0; font-size: 11px; line-height: 1.6; }
.confirm-guest a { color: var(--accent-text); text-decoration: underline; }
.guest-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; background: var(--ink-2); }
.guest-banner > .ti { font-size: 26px; color: var(--accent-text); }
.guest-banner p { flex: 1 1 260px; margin: 0; display: grid; gap: 4px; }
.guest-banner .mono { font-size: 11px; line-height: 1.5; }
.wg-find { display: flex; align-items: center; gap: 0; margin-top: 6px; border: 1px solid rgba(243, 233, 218, .25); border-radius: 6px; overflow: hidden; background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)); }
.wg-find .ti { padding: 0 4px 0 14px; font-size: 18px; color: #f5c64f; }
.wg-find input { flex: 1; min-width: 0; height: 52px; border: 0; outline: none; background: none; color: var(--cream); font: inherit; font-size: 16px; padding: 0 10px; }
.wg-find input::placeholder { color: rgba(243, 233, 218, .5); }
.wg-find .btn { border-radius: 0; height: 52px; padding: 0 20px; }
.wg-find-note { margin: 4px 0 0; font-size: 11px; color: rgba(243, 233, 218, .6) !important; }
.wallet-gate .wg-actions { align-items: center; }
.wallet-gate .wg-actions .btn-ghost { color: var(--cream); border-color: rgba(243, 233, 218, .3); }
.wallet-gate .link-arrow { color: var(--cream); }
.foot-find { display: inline-flex !important; align-items: center; gap: 6px; color: var(--accent-text) !important; }
@media (max-width: 640px) { .wg-find { flex-wrap: wrap; } .wg-find .btn { flex: 1 0 100%; } }

/* ==========================================================================
   Underline inputs everywhere (matches the sign-in form)
   ========================================================================== */
.vstage-name { max-width: 70%; }

.fconsole { border: 0; border-radius: 0; background: none; overflow: visible; gap: 0 clamp(20px, 2.6vw, 40px); align-items: end; }
.fc-cell, .fc-cell + .fc-cell { border: 0 !important; padding: 0; gap: 14px; background: none !important; }
.fc-cell::after { display: none; }
.fc-label { font-size: 11px; letter-spacing: .14em; gap: 8px; min-height: 16px; }
.fc-label .ti { color: var(--bone-dim); font-size: 14px; transition: color .3s; }
.fc-cell:focus-within .fc-label { color: var(--bone); }
.fc-cell:focus-within .fc-label .ti { color: var(--accent-text); }
/* the line under every control, with an accent sweep on focus */
.fc-cell input[type="search"], .fc-select select { height: 50px; font-size: 19px; border-bottom: 1px solid var(--line); background: none; }
.fc-cell input[type="search"] { padding: 0; }
.fc-select::before, .fc-search::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); z-index: 1; }
.fc-search { position: relative; }
.fc-select:focus-within::before, .fc-search:focus-within::before { transform: scaleX(1); }
.fc-price { gap: 14px; }
.fc-price input[type="range"] { height: 50px; border-bottom: 1px solid var(--line); }
@media (max-width: 1100px) {
  .fconsole { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .fc-cell:last-child { grid-column: auto; }
  .fc-search { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fconsole { gap: 18px 16px; }
  .fc-cell input[type="search"], .fc-select select, .fc-price input[type="range"] { height: 44px; font-size: 16px; }
}

/* header search: transparent, underlined, labelled */
.hsearch { height: 50px; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; gap: 18px; align-items: end; }
.hsearch:focus-within { background: none; }
.hsearch .hs-cell { padding: 0 0 6px; border-bottom: 1px solid var(--line); gap: 4px; }
.hsearch .hs-where { border-left: 0; }
.hsearch .hs-cell::after { bottom: -1px; height: 1px; }
.hs-go { width: 42px; height: 42px; align-self: center; border-radius: var(--r-btn); }
.mnav-search { border: 0; background: none; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mnav-search .hs-cell { padding: 0 0 8px; border-bottom: 1px solid rgba(243, 233, 218, .2); }
.mnav-search .hs-where { border-top: 0; }
.mnav-search .hs-go { grid-column: 1; grid-row: auto; width: 100%; height: 46px; }
.mnav-search .hs-go::after { content: "Search"; margin-left: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.mnav-search .hs-go { display: flex; align-items: center; justify-content: center; }

/* guest lookup: underline field */
.wg-find { border: 0; border-bottom: 1px solid rgba(243, 233, 218, .3); border-radius: 0; background: none; overflow: visible; gap: 10px; }
.wg-find .ti { padding: 0; }
.wg-find input { padding: 0; }
.wg-find .btn { border-radius: var(--r-btn); height: 44px; }
.vstage-copy { max-width: none; }
.vstage-name { max-width: 70%; font-size: clamp(52px, 6.6vw, 108px); }
.vstage-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.vstage-good { flex-wrap: nowrap; overflow: hidden; }
.vstage-good li { flex: none; }
@media (max-width: 640px) { .vstage-name { max-width: 100%; } }
@media (max-width: 1020px) { .site-header .hsearch { display: none !important; } }
.wg-find { border-bottom: 0; flex-wrap: wrap; gap: 14px; }
.wg-find .ti { position: absolute; margin-top: 15px; }
.wg-find { position: relative; }
.wg-find input { flex: 1 1 240px; height: 50px; padding-left: 28px; border-bottom: 1px solid rgba(243, 233, 218, .3); transition: border-color .3s; }
.wg-find input:focus { border-color: #f5c64f; }
@media (max-width: 640px) { .wallet-gate { --stub: 64px; } .wallet-gate-stub b { font-size: 40px; } }
.guest-banner .mono { text-transform: none; letter-spacing: .02em; }
.fconsole--venues { grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }
.venue-count { margin: 18px 0 8px; }
.venue-empty { padding: 60px 0; }
@media (max-width: 1100px) { .fconsole--venues { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fconsole--venues .fc-search { grid-column: 1 / -1; } }
@media (max-width: 640px) { .fconsole--venues { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fconsole--venues .fc-cell:last-child { grid-column: 1 / -1; } }
.nav-dash { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); }
.nav-dash .ti { font-size: 15px; }
.auth-gate-note { display: flex; gap: 10px; align-items: center; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--r-btn); border-left: 3px solid var(--accent); background: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); font-size: 12px; letter-spacing: .04em; }
.auth-gate-note .ti { font-size: 18px; color: var(--accent-text); }
.venue-count { margin: 22px 0 28px; }
.footer-giant { line-height: .95 !important; padding-bottom: .1em; overflow: visible; }

/* ==========================================================================
   About — editorial, lighter
   ========================================================================== */
.ab-section { padding-top: clamp(64px, 8vw, 120px); }
.ab-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: clamp(140px, 14vw, 190px); padding-bottom: clamp(40px, 5vw, 64px); }
.ab-hero-copy { display: grid; gap: 22px; align-content: start; }
.ab-hero-copy .eyebrow { margin: 0; }
.ab-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(48px, 6.4vw, 96px); line-height: .9; letter-spacing: -.01em; }
.ab-title em { font-style: normal; display: inline-block; padding: 0 .08em; background: var(--accent); color: var(--on-accent); }
.ab-lede { margin: 0; max-width: 46ch; font-family: var(--f-serif); font-weight: 300; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; color: var(--bone); }
.ab-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 6px; }
.ab-collage { position: relative; height: clamp(360px, 36vw, 520px); }
.ab-card { position: absolute; margin: 0; width: 56%; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; display: flex; align-items: flex-end; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); transition: transform .8s var(--ease-out); }
.ab-card::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 10%), linear-gradient(0deg, rgba(14, 10, 7, .8), transparent 55%); }
.ab-card figcaption { position: relative; z-index: 1; display: grid; gap: 4px; padding: 16px; color: var(--cream); }
.ab-card figcaption span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.ab-card figcaption b { font-weight: 800; font-variation-settings: "wdth" 72; text-transform: uppercase; font-size: clamp(18px, 1.6vw, 24px); line-height: 1; }
.ab-card--0 { left: 0; top: 10%; transform: rotate(-6deg); z-index: 1; }
.ab-card--1 { left: 22%; top: 0; transform: rotate(1deg); z-index: 3; }
.ab-card--2 { right: 0; top: 14%; transform: rotate(7deg); z-index: 2; }
.ab-collage:hover .ab-card--0 { transform: rotate(-9deg) translateX(-12px); }
.ab-collage:hover .ab-card--2 { transform: rotate(10deg) translateX(12px); }

.ab-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
.ab-stats div { padding: 22px 0 20px 20px; }
.ab-stats div:first-child { padding-left: 0; }
.ab-stats div + div { border-left: 1px solid var(--line); }
.ab-stats dt { font-weight: 800; font-variation-settings: "wdth" 70; font-size: clamp(36px, 3.4vw, 54px); line-height: 1; color: var(--accent-text); }
.ab-stats dd { margin: 8px 0 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }

.ab-md { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ab-portrait { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bone) 4%, transparent) 0 10px, transparent 10px 20px), var(--ink-2); border: 1px solid var(--line); }
.ab-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-portrait-empty { position: absolute; inset: 14px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; border: 1px dashed color-mix(in srgb, var(--bone) 25%, transparent); border-radius: 4px; color: var(--bone-dim); }
.ab-portrait-empty .ti { font-size: 42px; color: var(--accent-text); }
.ab-portrait-empty span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ab-portrait-empty small { font-size: 10px; letter-spacing: .04em; opacity: .8; }
.ab-portrait-tag { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 10px; border-radius: var(--r-btn); background: var(--accent); color: var(--on-accent); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.ab-letter { display: grid; gap: 24px; }
.ab-kicker { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.ab-rule { width: 48px; height: 1px; background: var(--accent); }
.ab-quote { margin: 0; font-family: var(--f-serif); font-weight: 300; font-style: italic; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.2; color: var(--bone); }
.ab-letter-body { margin: 0; max-width: 56ch; color: var(--bone-dim); font-size: 17px; line-height: 1.65; }
.ab-sign { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.ab-sign-name { font-family: var(--f-serif); font-style: italic; font-size: 30px; color: var(--accent-text); }
.ab-sign-role { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }

.ab-values { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ab-values li { display: grid; grid-template-columns: 80px minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease-out); }
.ab-values li:hover { padding-left: 12px; }
.ab-n { font-size: 12px; color: var(--accent-text); }
.ab-values h2 { margin: 0; font-weight: 700; font-variation-settings: "wdth" 80; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.01em; }
.ab-values p { margin: 0; color: var(--bone-dim); line-height: 1.6; }

.ab-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
.ab-how-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 700; font-size: 20px; }
.ab-how-head .ti { font-size: 22px; color: var(--accent-text); }
.ab-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.ab-steps li { counter-increment: s; position: relative; padding: 18px 0 18px 46px; border-bottom: 1px solid var(--line); color: var(--bone-dim); line-height: 1.55; }
.ab-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 19px; font-family: var(--f-mono); font-size: 12px; color: var(--accent-text); }
.ab-steps b { color: var(--bone); font-weight: 600; }

.ab-regions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ab-regions a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; }
.ab-regions a:hover { background: var(--ink-2); }
.ab-regions .ti { grid-row: 1 / 3; font-size: 26px; color: var(--accent-text); }
.ab-regions b { font-size: 18px; }
.ab-regions span { font-size: 11px; letter-spacing: .06em; color: var(--bone-dim); }
.ab + .site-footer, .ab .maker-stage { margin-top: 0; }
.ab > .home-section:last-child { padding-top: clamp(64px, 8vw, 120px); }

@media (max-width: 900px) {
  .ab-hero, .ab-md, .ab-how { grid-template-columns: 1fr; }
  .ab-collage { height: 380px; max-width: 520px; width: 100%; justify-self: center; }
  .ab-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-stats div:nth-child(4) { border-left: 0; padding-left: 0; }
  .ab-stats div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .ab-values li { grid-template-columns: 48px minmax(0, 1fr); }
  .ab-values p { grid-column: 2; }
  .ab-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-portrait { max-width: 420px; }
}
@media (max-width: 640px) {
  .ab-hero { padding-top: 120px; }
  .ab-collage { height: 300px; }
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-stats div, .ab-stats div:first-child { padding: 16px 0 14px 14px; border-left: 1px solid var(--line) !important; border-top: 1px solid var(--line); }
  .ab-stats div:nth-child(odd) { border-left: 0 !important; padding-left: 0; }
  .ab-stats div:nth-child(-n+2) { border-top: 0; }
  .ab-regions { grid-template-columns: 1fr; }
  .ab-regions a { padding: 16px; }
  .ab-values li { gap: 10px 14px; padding: 22px 0; }
}

/* ==========================================================================
   Spacing rhythm — one tighter scale for every section
   ========================================================================== */
:root { --sec-y: clamp(40px, 4.4vw, 68px); --sec-head: clamp(22px, 2.4vw, 34px); --sec-inner: clamp(24px, 2.6vw, 40px); }
.home-section, .home-section:first-child { padding-block: var(--sec-y) !important; }
#popular { padding-top: clamp(48px, 5vw, 76px) !important; }
.sheet-section { padding-block: calc(var(--sec-y) + 12px) !important; }
.section-label { margin-bottom: var(--sec-head); padding-bottom: 12px; }
.section-title { margin-bottom: var(--sec-inner) !important; }
.pop-head { margin-bottom: var(--sec-inner); }
.pop-foot { margin-top: var(--sec-inner) !important; }
.intro-foot { margin-top: var(--sec-inner) !important; }
.occ-railhead { margin-top: var(--sec-inner) !important; }
.cidx { margin-bottom: var(--sec-inner) !important; }
.host-band { margin-top: var(--sec-inner) !important; }
.vstage { margin-top: 0 !important; }
.clients .marquee { margin-top: 0; }
/* inner page heads + sections */
.page-head { padding: clamp(118px, 12vw, 160px) 0 clamp(24px, 3vw, 40px); }
.ab-section { padding-top: calc(var(--sec-y) + 16px); }
.ab-hero { padding-top: clamp(118px, 12vw, 160px); padding-bottom: var(--sec-head); }
.site-footer { padding-top: clamp(44px, 5vw, 72px); }
.footer-giant { margin-top: clamp(28px, 4vw, 56px) !important; }
@media (max-width: 640px) {
  :root { --sec-y: 36px; --sec-head: 20px; --sec-inner: 22px; }
  .page-head { padding-top: 112px; }
}
:root { --sec-y: clamp(32px, 3.6vw, 56px); }
.sheet-section { padding-block: var(--sec-y) !important; }
@media (max-width: 640px) { :root { --sec-y: 30px; } }
.clients .marquee { padding-block: clamp(12px, 1.6vw, 24px); }

/* ==========================================================================
   Pricing — one-line model, live receipt, quiet plan columns
   ========================================================================== */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: clamp(118px, 12vw, 160px); padding-bottom: var(--sec-y); }
.pr-hero-copy { display: grid; gap: 22px; }
.pr-hero-copy .eyebrow { margin: 0; }
.pr-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(46px, 6vw, 92px); line-height: .9; }
.pr-title em { font-style: normal; color: var(--accent-text); }
.pr-lede { margin: 0; max-width: 50ch; color: var(--bone-dim); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }
.pr-lede b { color: var(--bone); }
.pr-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 10px; }
.pr-field input { font-size: 30px !important; font-weight: 600; padding: 6px 0 10px; }
.pr-money { display: flex; align-items: baseline; gap: 4px; border-bottom: 1px solid var(--line); transition: border-color .3s; }
.pr-money:focus-within { border-color: var(--accent); }
.pr-money span { font-size: 30px; font-weight: 600; color: var(--accent-text); }
.pr-money input { border-bottom: 0 !important; }
.pr-field input::-webkit-outer-spin-button, .pr-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-field input[type="number"] { -moz-appearance: textfield; }
.pr-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.ftoggle-btn { height: 36px; padding: 0 14px; border-radius: var(--r-btn); border: 1px solid var(--line); background: none; color: var(--bone-dim); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.ftoggle-btn:hover { color: var(--bone); border-color: var(--bone-dim); }
.ftoggle-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.pr-receipt { position: sticky; top: 130px; display: grid; gap: 12px; }
.pr-paper {
  position: relative; display: grid; gap: 14px; padding: 26px 26px 34px; color: #1c1610;
  background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(28, 22, 16, .04) 27px 28px), #f6efe1;
  border-radius: 4px 4px 0 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) bottom / 14px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) bottom / 14px 10px repeat-x;
  transform: rotate(1.2deg);
}
.pr-paper.is-print .pr-total b { animation: prPrint .5s var(--ease-out); }
@keyframes prPrint { from { opacity: .2; transform: translateY(6px); } }
.pr-rhead { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed rgba(28, 22, 16, .3); }
.pr-rhead .wordmark-mark { --logo: 20px; width: calc(var(--logo) * .84); height: calc(var(--logo) * 1.02); }
.pr-rhead .wordmark-mark i, .pr-rhead .wordmark-mark b { background: #c48a12; }
.pr-rhead .mono { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.pr-lines { display: grid; gap: 10px; margin: 0; }
.pr-lines div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pr-lines dt { font-size: 15px; }
.pr-lines dt small { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.pr-lines dd { margin: 0; font-family: var(--f-mono); font-size: 15px; }
.pr-lines .is-strong dt, .pr-lines .is-strong dd { font-weight: 700; }
.pr-sep { display: flex; align-items: center; gap: 10px; margin: 2px 0; font-size: 11px; letter-spacing: .1em; color: rgba(28, 22, 16, .6); }
.pr-sep::before, .pr-sep::after { content: ""; flex: 1; border-top: 1px dashed rgba(28, 22, 16, .3); }
.pr-total { display: grid; gap: 4px; padding: 16px; border-radius: 3px; background: #1c1610; color: #f6efe1; }
.pr-total .mono { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.pr-total b { font-weight: 800; font-variation-settings: "wdth" 72; font-size: clamp(40px, 4vw, 58px); line-height: 1; color: #f5c64f; }
.pr-total .pr-keep { opacity: .85; text-transform: none; letter-spacing: .04em; }
.pr-code { display: flex; align-items: stretch; gap: 2px; height: 34px; }
.pr-code i { width: calc(var(--w) * 1.5px); background: #1c1610; }
.pr-code i:nth-child(3n) { margin-right: 2px; }
.pr-note { margin: 0; font-size: 10px; line-height: 1.6; }

.pr-section { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pr-plan { position: relative; display: grid; gap: 16px; align-content: start; padding: 28px clamp(18px, 2.4vw, 34px) 32px; }
.pr-plan + .pr-plan { border-left: 1px solid var(--line); }
.pr-plan.is-main { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%); box-shadow: inset 0 3px 0 var(--accent); }
.pr-flag { position: absolute; top: 28px; right: clamp(18px, 2.4vw, 34px); padding: 4px 9px; border-radius: var(--r-btn); background: var(--accent); color: var(--on-accent); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.pr-plan-kicker { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.pr-plan-kicker .ti { font-size: 16px; color: var(--accent-text); }
.pr-plan-price { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.pr-plan-price b { font-weight: 800; font-variation-settings: "wdth" 72; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; }
.pr-plan-price span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.pr-plan-for { margin: 0; color: var(--bone-dim); line-height: 1.55; min-height: 3.1em; }
.pr-feats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.pr-feats li { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.pr-feats li::before { content: "\ea5e"; font-family: "tabler-icons"; color: var(--accent-text); }

.pr-never { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.pr-never li { display: grid; gap: 8px; align-content: start; padding: 24px clamp(14px, 2vw, 28px) 24px 0; }
.pr-never li + li { padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid var(--line); }
.pr-never .ti { font-size: 26px; color: var(--accent-text); }
.pr-never b { font-size: 18px; }
.pr-never span { color: var(--bone-dim); font-size: 14px; line-height: 1.5; }
.pr-faq { max-width: 900px; }

@media (max-width: 1000px) {
  .pr-hero { grid-template-columns: 1fr; }
  .pr-receipt { position: static; max-width: 460px; }
  .pr-plans { grid-template-columns: 1fr; }
  .pr-plan + .pr-plan { border-left: 0; border-top: 1px solid var(--line); }
  .pr-plan-for { min-height: 0; }
  .pr-never { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-never li:nth-child(3) { border-left: 0; padding-left: 0; }
  .pr-never li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .pr-hero { padding-top: 112px; }
  .pr-calc { gap: 18px 16px; }
  .pr-field input, .pr-money span { font-size: 24px !important; }
  .pr-paper { padding: 22px 20px 30px; transform: none; }
  .pr-never { grid-template-columns: 1fr; }
  .pr-never li, .pr-never li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pr-never li:first-child { border-top: 0; }
}

/* Pricing — back on brand: highlight title, espresso ticket, notched plan panels */
.pr-title { font-size: clamp(56px, 8vw, 120px); }
.pr-sub { margin: -6px 0 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 38px); line-height: 1; }
.pr-sub b { color: var(--accent-text); }
.pr-ticket { position: relative; display: grid; color: var(--cream); filter: drop-shadow(0 30px 40px rgba(20, 12, 4, .45)); }
.pr-ticket.is-print .pr-total b { animation: prPrint .5s var(--ease-out); }
.pr-tmain { display: grid; gap: 14px; padding: 24px 26px 28px; border-radius: 22px 22px 0 0;
  background: radial-gradient(120% 70% at 100% 0%, rgba(245, 198, 79, .16), transparent 60%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 28px), linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); }
.pr-tstub { position: relative; display: grid; gap: 14px; padding: 22px 26px 24px; border-radius: 0 0 22px 22px; background: #f5c64f; color: #17110b; border-top: 2px dashed rgba(23, 17, 11, .35); }
.pr-tstub::before, .pr-tstub::after { content: ""; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); }
.pr-tstub::before { left: -13px; } .pr-tstub::after { right: -13px; }
.pr-rhead { border-bottom: 1px dashed rgba(243, 233, 218, .25); }
.pr-rhead .wordmark-mark i, .pr-rhead .wordmark-mark b { background: #f5c64f; }
.pr-rno { margin-left: auto; opacity: .6; }
.pr-lines dt small { opacity: .5; }
.pr-sep { color: rgba(243, 233, 218, .55); }
.pr-sep::before, .pr-sep::after { border-top-color: rgba(243, 233, 218, .25); }
.pr-total { padding: 0; background: none; color: #17110b; }
.pr-total b { color: #17110b; font-size: clamp(44px, 4.4vw, 64px); }
.pr-total .mono { opacity: .7; }
.pr-code i { background: #17110b; }
@media (max-width: 640px) { .pr-tmain, .pr-tstub { padding-inline: 20px; } }

.pr-plans { border-top: 0; gap: clamp(14px, 1.6vw, 22px); }
.pr-plan, .pr-plan + .pr-plan { border: 0; }
.pr-plan { padding: 44px clamp(20px, 2.2vw, 30px) 30px; border-radius: 22px; color: var(--cream);
  background: radial-gradient(120% 60% at 100% 100%, rgba(245, 198, 79, .14), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2));
  -webkit-mask: var(--notch-t) 50% 0 / 44% 26px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: var(--notch-t) 50% 0 / 44% 26px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: translate .6s var(--ease-out); }
.pr-plan:hover { translate: 0 -6px; }
.pr-plan.is-main { background: #f5c64f; color: #17110b; box-shadow: none; }
.pr-plan-kicker { color: rgba(243, 233, 218, .65); }
.pr-plan-kicker .ti { color: #f5c64f; }
.pr-plan-price b { color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--cream); transition: color .5s; }
.pr-plan:hover .pr-plan-price b { color: #f5c64f; -webkit-text-stroke-color: #f5c64f; -webkit-text-fill-color: currentColor; }
.pr-plan-price span, .pr-plan-for { color: rgba(243, 233, 218, .65); }
.pr-feats li { border-top-color: rgba(243, 233, 218, .14); }
.pr-feats li::before { color: #f5c64f; }
.pr-plan .btn-ghost { color: var(--cream); border-color: rgba(243, 233, 218, .3); }
.pr-plan.is-main .pr-plan-kicker, .pr-plan.is-main .pr-plan-price span, .pr-plan.is-main .pr-plan-for { color: rgba(23, 17, 11, .7); }
.pr-plan.is-main .pr-plan-kicker .ti, .pr-plan.is-main .pr-feats li::before { color: #17110b; }
.pr-plan.is-main .pr-plan-price b { color: #17110b; -webkit-text-stroke: 0; -webkit-text-fill-color: currentColor; }
.pr-plan.is-main .pr-feats li { border-top-color: rgba(23, 17, 11, .15); }
.pr-plan.is-main .btn { background: #17110b; color: #f5c64f; }
.pr-plan.is-main .pr-flag { background: #17110b; color: #f5c64f; top: 40px; }
@media (max-width: 1000px) { .pr-plan + .pr-plan { border-top: 0; } }

.pr-never { border-top: 0; gap: 12px; }
.pr-never li, .pr-never li + li { padding: 22px; border: 1px solid var(--line) !important; border-radius: 6px; background: var(--ink-2); }
.pr-title em { color: var(--on-accent); }

/* ==========================================================================
   Legal centre (privacy, terms, cookies)
   ========================================================================== */
.lg-head { display: grid; gap: 18px; padding-top: clamp(118px, 12vw, 160px); padding-bottom: var(--sec-head); }
.lg-head .eyebrow { margin: 0; }
.lg-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(48px, 6.4vw, 96px); line-height: .9; }
.lg-title em { font-style: normal; display: inline-block; padding: 0 .08em; background: var(--accent); color: var(--on-accent); }
.lg-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
.lg-tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 14px 0; margin-right: 18px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); transition: color .3s; }
.lg-tabs a .ti { font-size: 16px; }
.lg-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.lg-tabs a:hover { color: var(--bone); }
.lg-tabs a[aria-current="page"] { color: var(--bone); }
.lg-tabs a[aria-current="page"] .ti { color: var(--accent-text); }
.lg-tabs a[aria-current="page"]::after { transform: scaleX(1); }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: 11px; letter-spacing: .08em; color: var(--bone-dim); }
.lg-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.lg-meta .ti { font-size: 14px; color: var(--accent-text); }

.lg-glance { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.lg-glance li { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 22px; color: var(--cream);
  background: radial-gradient(120% 70% at 100% 100%, rgba(245, 198, 79, .14), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2));
  -webkit-mask: var(--notch-b) 50% 100% / 40% 20px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: var(--notch-b) 50% 100% / 40% 20px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; padding-bottom: 32px; }
.lg-glance .ti { font-size: 26px; color: #f5c64f; }
.lg-glance b { font-weight: 800; font-variation-settings: "wdth" 76; text-transform: uppercase; font-size: 20px; line-height: 1; }
.lg-glance span { font-size: 14px; color: rgba(243, 233, 218, .7); line-height: 1.5; }
.lg-demo { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sec-head); font-size: 11px; letter-spacing: .04em; color: var(--bone-dim); }
.lg-demo .ti { color: var(--accent-text); font-size: 15px; }

.lg-grid { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-bottom: var(--sec-y); }
.lg-toc { position: sticky; top: 130px; display: grid; gap: 2px; }
.lg-toc-head { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.lg-toc-head span { color: var(--accent-text); }
.lg-progress { display: block; height: 2px; margin-bottom: 10px; background: var(--line); overflow: hidden; }
.lg-progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.lg-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 0; color: var(--bone-dim); font-size: 14px; border-bottom: 1px solid transparent; transition: color .3s; }
.lg-toc a b { font-size: 11px; font-weight: 500; padding-top: 2px; }
.lg-toc a:hover, .lg-toc a[aria-current] { color: var(--bone); }
.lg-toc a[aria-current] b { color: var(--accent-text); }

.lg-body { min-width: 0; }
.lg-clause { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); scroll-margin-top: 130px; }
.lg-clause:first-child { border-top: 0; padding-top: 0; }
.lg-num { grid-row: 1 / 3; font-weight: 800; font-family: var(--f-display); font-variation-settings: "wdth" 70; font-size: 40px; line-height: .9; color: var(--accent-text); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px var(--accent-text); }
.lg-clause h2 { margin: 0 0 10px; font-weight: 700; font-variation-settings: "wdth" 84; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; }
.lg-clause > :not(.lg-num):not(h2) { grid-column: 2; }
.lg-clause p, .lg-clause li { margin: 0; max-width: 68ch; color: var(--bone-dim); line-height: 1.7; font-size: 16px; }
.lg-clause ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lg-clause li { position: relative; padding-left: 22px; }
.lg-clause li::before { content: "\ea5e"; font-family: "tabler-icons"; position: absolute; left: 0; top: 1px; color: var(--accent-text); }
.lg-clause b { color: var(--bone); }
.lg-clause a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.lg-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.lg-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.lg-table th { text-align: left; padding: 12px 14px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); background: var(--ink-2); border-bottom: 1px solid var(--line); }
.lg-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--bone-dim); vertical-align: top; }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table td.mono { color: var(--bone); font-size: 12px; }
.lg-tag { display: inline-block; padding: 3px 8px; border-radius: var(--r-btn); font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.lg-tag--essential { background: linear-gradient(color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 18%, transparent)); color: var(--accent-text); }
.lg-tag--preference { background: linear-gradient(color-mix(in srgb, var(--bone) 10%, transparent), color-mix(in srgb, var(--bone) 10%, transparent)); color: var(--bone); }
.lg-contact { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 28px; padding: 20px 22px; border-radius: 6px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--ink-2); }
.lg-contact > .ti { font-size: 26px; color: var(--accent-text); }
.lg-contact div { flex: 1 1 200px; display: grid; gap: 2px; }
.lg-contact .mono { font-size: 12px; color: var(--bone-dim); }
@media (max-width: 900px) {
  .lg-grid { grid-template-columns: 1fr; }
  .lg-toc { position: static; display: none; }
  .lg-glance { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lg-head { padding-top: 112px; }
  .lg-clause { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .lg-num { font-size: 30px; }
  .lg-tabs a { margin-right: 12px; padding-right: 6px; font-size: 11px; }
}

/* ==========================================================================
   Help centre
   ========================================================================== */
.hp-head { display: grid; gap: 22px; padding-top: clamp(118px, 12vw, 160px); padding-bottom: var(--sec-head); }
.hp-head .eyebrow, .hp-head .page-title { margin: 0; }
.hp-search { position: relative; display: grid; gap: 10px; max-width: 760px; cursor: text; }
.hp-search input { height: 60px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--bone); font: inherit; font-size: clamp(20px, 2vw, 26px); outline: none; padding: 0; }
.hp-search input::placeholder { color: color-mix(in srgb, var(--bone) 35%, transparent); }
.hp-search::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.hp-search:focus-within::after { transform: scaleX(1); }
.hp-search:focus-within .fc-label .ti { color: var(--accent-text); }
.hp-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-topic { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-btn); border: 1px solid var(--line); background: none; color: var(--bone-dim); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.hp-topic .ti { font-size: 15px; }
.hp-topic sup { font-size: 9px; opacity: .7; }
.hp-topic:hover { color: var(--bone); border-color: var(--bone-dim); }
.hp-topic[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.hp-quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.hp-quick a { position: relative; display: grid; gap: 6px; padding: 22px 22px 30px; border-radius: 22px; color: var(--cream); height: 100%;
  background: radial-gradient(120% 70% at 100% 100%, rgba(245, 198, 79, .14), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2));
  -webkit-mask: var(--notch-b) 50% 100% / 40% 18px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: var(--notch-b) 50% 100% / 40% 18px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; transition: translate .5s var(--ease-out); }
.hp-quick a:hover { translate: 0 -4px; }
.hp-quick li:first-child a { background: #f5c64f; color: #17110b; }
.hp-quick a > .ti:first-child { font-size: 26px; color: #f5c64f; }
.hp-quick li:first-child a > .ti:first-child { color: #17110b; }
.hp-quick b { font-weight: 800; font-variation-settings: "wdth" 76; text-transform: uppercase; font-size: 20px; line-height: 1; }
.hp-quick span { font-size: 14px; opacity: .72; }
.hp-go { position: absolute; top: 20px; right: 20px; font-size: 18px; transition: transform .4s var(--ease-out); }
.hp-quick a:hover .hp-go { transform: translate(3px, -3px); }

.hp-body { padding-top: var(--sec-y); }
.hp-count { margin: 0 0 14px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.hp-group { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); padding: 26px 0; border-top: 1px solid var(--line); }
.hp-group-title { position: sticky; top: 130px; align-self: start; display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 800; font-variation-settings: "wdth" 72; text-transform: uppercase; font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.hp-group-title .ti { font-size: 24px; color: var(--accent-text); }
.hp-qs { display: grid; }
.hp-q { border-bottom: 1px solid var(--line); }
.hp-q:first-child summary { padding-top: 4px; }
.hp-q summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; }
.hp-q summary::-webkit-details-marker { display: none; }
.hp-q summary::after { display: none !important; }
.hp-n { font-size: 11px; color: var(--accent-text); }
.hp-qt { font-size: 18px; font-weight: 600; line-height: 1.3; transition: color .3s; }
.hp-q summary:hover .hp-qt { color: var(--accent-text); }
.hp-q summary > .ti { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-btn); border: 1px solid var(--line); font-size: 16px; transition: transform .4s var(--ease-out), background .3s, color .3s, border-color .3s; }
.hp-q[open] summary > .ti { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hp-a { padding: 0 0 18px 46px; animation: vsFade .4s both; }
.hp-a p { margin: 0; max-width: 64ch; color: var(--bone-dim); line-height: 1.7; }
.hp-a a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.hp-a b { color: var(--bone); }
.hp-q mark { background: linear-gradient(color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent) 35%, transparent)); color: inherit; border-radius: 2px; padding: 0 1px; }
.hp-empty { display: grid; justify-items: start; gap: 10px; padding: 40px 0; border-top: 1px solid var(--line); color: var(--bone-dim); }
.hp-empty .ti { font-size: 36px; color: var(--accent-text); }
.hp-empty a { color: var(--accent-text); text-decoration: underline; }

.hp-contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); margin: var(--sec-y) 0; padding: clamp(24px, 3vw, 44px); border-radius: 22px; border: 1px solid var(--line); background: var(--ink-2); scroll-margin-top: 120px; }
.hp-contact-side { display: grid; gap: 14px; align-content: start; }
.hp-contact-side .eyebrow, .hp-contact-side p { margin: 0; }
.hp-contact-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(34px, 3.6vw, 54px); line-height: .92; }
.hp-contact-title em { font-style: normal; padding: 0 .08em; background: var(--accent); color: var(--on-accent); }
.hp-mail { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent-text); }
.hp-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 24px; }
.hp-form .hp-wide { grid-column: 1 / -1; }
.hp-form textarea { min-height: 120px; }
.hp-form .fc-select select { height: 44px; font-size: 17px; border-bottom: 1px solid var(--line); }
.hp-send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hp-send p { margin: 0; }
@media (max-width: 900px) {
  .hp-quick { grid-template-columns: 1fr; }
  .hp-group { grid-template-columns: 1fr; gap: 10px; }
  .hp-group-title { position: static; }
  .hp-contact { grid-template-columns: 1fr; }
  .hp-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hp-head { padding-top: 112px; }
  .hp-qt { font-size: 16px; }
  .hp-a { padding-left: 0; }
}

/* ==========================================================================
   Pricing — metal plan cards
   ========================================================================== */
.pr-plans2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
.pr-plan2 { display: grid; gap: 22px; perspective: 1100px; }
.pcard {
  --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 20%;
  --m1: #e6e8ee; --m2: #b9bfcb; --ink-c: #2b303b; --soft: rgba(43, 48, 59, .55); --hi: rgba(255, 255, 255, .9); --lo: rgba(40, 46, 60, .35); --mark: #2b303b;
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 54 / 86; border-radius: 18px; padding: 8% 9%;
  display: grid; grid-template-rows: auto 1fr auto auto; color: var(--ink-c); outline: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, var(--m1), var(--m2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(0, 0, 0, .15) inset, 0 40px 60px -34px rgba(0, 0, 0, .7), 0 12px 20px -14px rgba(0, 0, 0, .5);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .6s var(--ease-out), box-shadow .6s;
}
.pcard:hover, .pcard:focus-visible { transition: transform .12s linear, box-shadow .6s; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(0, 0, 0, .15) inset, 0 60px 80px -40px rgba(0, 0, 0, .75), 0 16px 26px -16px rgba(0, 0, 0, .55); }
.pcard--gold { --m1: #fbe3a0; --m2: #d9a531; --ink-c: #3a2608; --soft: rgba(58, 38, 8, .6); --hi: rgba(255, 248, 225, .95); --lo: rgba(110, 70, 10, .45); --mark: #3a2608; }
.pcard--wine { --m1: #6e2430; --m2: #2c0b12; --ink-c: #f3e3df; --soft: rgba(243, 227, 223, .6); --hi: rgba(255, 190, 200, .45); --lo: rgba(0, 0, 0, .55); --mark: #f5c64f; }
.pcard-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light; opacity: .75;
  background: radial-gradient(60% 45% at var(--mx) var(--my), rgba(255, 255, 255, .85), transparent 70%), linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 48%, transparent 60%); }
.pcard-v { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pcard-v path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pcard-v .v-shadow, .pcard-v .v-inner-s { stroke: var(--lo); }
.pcard-v .v-light, .pcard-v .v-inner-l { stroke: var(--hi); stroke-width: 1.4; }

.pcard-top { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 10px; }
.pcard-wm { --logo: 26px; color: var(--ink-c); }
.pcard-wm .wordmark-mark i, .pcard-wm .wordmark-mark b { background: var(--mark); }
.pcard-wm .wordmark-name { color: var(--ink-c); }
/* "by Goldpurp" unfolds exactly like the header logo — on card hover or logo hover */
.pcard-wm .wordmark-by { position: static; translate: none; transform: none; display: inline-block; overflow: hidden; white-space: nowrap; align-self: center; max-width: 0; margin-left: 0; opacity: 0; color: var(--soft); font-size: 8px; letter-spacing: .1em; transition: max-width .6s var(--ease-out), margin-left .6s var(--ease-out), opacity .35s ease; }
.pcard:hover .pcard-wm .wordmark-by, .pcard:focus-visible .pcard-wm .wordmark-by { max-width: 90px; margin-left: 6px; opacity: 1; transition-delay: 0s, 0s, .12s; }
.pcard:hover .wordmark-mark i, .pcard:focus-visible .wordmark-mark i { animation: slatFlip .7s var(--ease-out) both; }
.pcard:hover .wordmark-mark i:nth-child(n+3) { animation-delay: .06s; }
.pcard:hover .wordmark-mark i:nth-child(n+5) { animation-delay: .12s; }
.pcard:hover .wordmark-mark i:nth-child(n+7) { animation-delay: .18s; }
.pcard:hover .wordmark-mark b, .pcard:focus-visible .wordmark-mark b { animation: pointDrop .7s .26s cubic-bezier(.2, 1.6, .4, 1) both; }
.pcard-chip { position: relative; margin-left: auto; width: 17%; aspect-ratio: 1.25; border-radius: 6px; flex: none;
  background: linear-gradient(135deg, #f4f1ea, #b9b3a6 45%, #e8e3d8 60%, #a49d8e); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 1px 1px rgba(255, 255, 255, .5); }
.pcard-chip i { position: absolute; background: linear-gradient(rgba(60, 55, 45, .35), rgba(60, 55, 45, .35)); }
.pcard-chip i:nth-child(1) { left: 33%; top: 0; bottom: 0; width: 1px; }
.pcard-chip i:nth-child(2) { right: 33%; top: 0; bottom: 0; width: 1px; }
.pcard-chip i:nth-child(3) { top: 50%; left: 0; right: 0; height: 1px; }
.pcard-nfc { font-size: 22px; transform: rotate(90deg); color: var(--soft); flex: none; margin-top: 4px; }
.pcard-flag { position: relative; z-index: 2; justify-self: start; align-self: start; margin-top: 14px; padding: 4px 8px; border-radius: 3px; background: var(--ink-c); color: var(--m1); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.pcard-num { position: relative; z-index: 2; align-self: end; margin-bottom: 8%; font-family: var(--f-mono); font-weight: 500; font-size: clamp(30px, 3vw, 44px); letter-spacing: .04em; color: var(--ink-c);
  text-shadow: 0 1px 0 var(--hi), 0 -1px 0 var(--lo); }
.pcard-bottom { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pcard-meta { font-size: 9px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.pcard-tier { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1; color: var(--ink-c); text-shadow: 0 1px 0 var(--hi); }
.pcard--wine .pcard-tier { color: #f5c64f; text-shadow: none; }

.pr-plan2-info { display: grid; gap: 14px; }
.pr-plan2-info .pr-plan-kicker { color: var(--bone-dim); }
.pr-plan2-info .pr-plan-kicker .ti { color: var(--accent-text); }
.pr-plan2-for { margin: 0; color: var(--bone-dim); line-height: 1.55; min-height: 3.1em; }
.pr-plan2-info .pr-feats li { border-top-color: var(--line); }
.pr-plan2-info .pr-feats li::before { color: var(--accent-text); }
.pr-plan2:nth-child(2) .pr-plan2-info .btn { background: var(--accent); color: var(--on-accent); }
@media (max-width: 1000px) {
  .pr-plans2 { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .pr-plan2-for { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .pcard { transform: none !important; } }
.pcard-v { inset: 6% 0 auto; height: 88%; }
.pcard-v .v-face { fill: rgba(255, 255, 255, .06); stroke: none; }
.pcard--gold .pcard-v .v-face { fill: rgba(255, 245, 210, .14); }
.pcard--wine .pcard-v .v-face { fill: rgba(0, 0, 0, .14); }
.pcard-v .v-shadow { fill: none; stroke: var(--lo); stroke-width: 1.4; }
.pcard-v .v-light { fill: none; stroke: var(--hi); stroke-width: 1; }
.pcard:hover .pcard-v .v-face { fill: rgba(255, 255, 255, .12); }
.pcard-wm .wordmark-by { font-size: 9px; letter-spacing: .08em; color: var(--ink-c); }
.pcard:hover .pcard-wm .wordmark-by, .pcard:focus-visible .pcard-wm .wordmark-by { max-width: 120px; opacity: .8; }
.pcard--silver { --mark: #e0a91c; }
.pcard--wine { --mark: #f5c64f; }
@media (hover: none) { .pcard-wm .wordmark-by { max-width: 120px; margin-left: 6px; opacity: .8; } }

/* Plan cards: smaller, centred above their info */
.pr-plans2 { gap: clamp(20px, 3vw, 48px); }
.pcard { width: 100%; max-width: 270px; justify-self: center; padding: 9% 10%; border-radius: 16px; }
.pcard-wm { --logo: 22px; }
.pcard-num { font-size: clamp(26px, 2.2vw, 34px); }
.pcard-tier { font-size: clamp(20px, 1.6vw, 26px); }
.pcard-nfc { font-size: 18px; }
.pr-plan2-info { max-width: 380px; justify-self: center; width: 100%; }
@media (max-width: 1000px) { .pr-plans2 { max-width: 460px; } .pcard { max-width: 250px; } }
@media (max-width: 640px) { .pcard { max-width: 228px; } .pr-plans2 { gap: 44px; } }

/* ==========================================================================
   Never charged — postage stamps
   ========================================================================== */
.pr-stamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.stamp { --perf: 7px; padding: 10px; background: #f6efe1; transform: rotate(var(--rot, -1.5deg)); transition: transform .5s var(--ease-out);
  -webkit-mask: radial-gradient(circle at center, transparent calc(var(--perf) / 2 - .5px), #000 calc(var(--perf) / 2)) 0 0 / var(--perf) var(--perf) round;
  mask: radial-gradient(circle at center, transparent calc(var(--perf) / 2 - .5px), #000 calc(var(--perf) / 2)) 0 0 / var(--perf) var(--perf) round;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.stamp:nth-child(2) { --rot: 1.2deg; } .stamp:nth-child(3) { --rot: -.8deg; } .stamp:nth-child(4) { --rot: 1.8deg; }
.stamp:hover { transform: rotate(0deg) translateY(-6px); }
.stamp-in { position: relative; height: 100%; display: grid; gap: 8px; align-content: start; padding: 18px 16px 16px; border: 1.5px solid rgba(23, 17, 11, .25); color: #17110b;
  background: radial-gradient(120% 70% at 100% 0%, rgba(245, 198, 79, .5), transparent 60%), linear-gradient(165deg, #f9e7b8, #f5c64f); }
.stamp:nth-child(even) .stamp-in { background: radial-gradient(120% 70% at 100% 0%, rgba(245, 198, 79, .25), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); color: var(--cream); border-color: rgba(243, 233, 218, .25); }
.stamp-val { position: absolute; top: 12px; right: 14px; font-size: 18px; font-weight: 500; }
.stamp-in > .ti { font-size: 34px; margin-top: 4px; }
.stamp:nth-child(even) .stamp-in > .ti { color: #f5c64f; }
.stamp-in b { font-weight: 800; font-variation-settings: "wdth" 76; text-transform: uppercase; font-size: 19px; line-height: 1; }
.stamp-in > span:not(.stamp-val):not(.stamp-foot) { font-size: 13px; line-height: 1.45; opacity: .78; }
.stamp-foot { margin-top: 6px; padding-top: 8px; border-top: 1px dashed currentColor; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
@media (max-width: 1000px) { .pr-stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pr-stamps { gap: 12px; } .stamp-in { padding: 14px 12px 12px; } .stamp-in b { font-size: 16px; } .stamp-in > span:not(.stamp-val):not(.stamp-foot) { font-size: 12px; } }

/* ==========================================================================
   Pricing questions — envelopes; the answer slides out as a letter
   ========================================================================== */
.env-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(18px, 2.4vw, 32px); align-items: end; }
.env { --rise: 0px; position: relative; padding-top: 0; transition: padding-top .7s var(--ease-out); }
.env.is-open { padding-top: var(--rise); transition-delay: .1s; }
.env-body { position: relative; height: clamp(210px, 17vw, 240px); perspective: 900px; }
.env-back { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(170deg, #3a2a1c, #22180f); }
.env-letter { position: absolute; left: 5%; right: 5%; bottom: 10px; z-index: 2; display: grid; gap: 10px; min-height: 82%; padding: 18px 20px 20px; border-radius: 4px; color: #1c1610;
  background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(28, 22, 16, .06) 25px 26px), #f6efe1; box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, .4);
  transform: translateY(0); transition: transform .7s var(--ease-out); }
.env.is-open .env-letter { transform: translateY(calc(-1 * var(--rise) - 10px)); transition-delay: .25s; }
.env-letter-head { display: flex; justify-content: space-between; margin: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.env-answer { margin: 0; font-family: var(--f-serif); font-size: 18px; line-height: 1.5; }
.env-answer b { color: #8a5a00; }
.env-sign { margin: 0; font-family: var(--f-serif); font-style: italic; color: #8a5a00; }
.env-front { position: absolute; inset: 34% 0 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: end; gap: 10px 14px; padding: 0 20px 18px; border-radius: 0 0 8px 8px; color: var(--cream);
  background: linear-gradient(170deg, #5a412b, #2f2216);
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); }
.env-front::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .06), transparent 40%); pointer-events: none; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 4; border-radius: 8px 8px 0 0; transform-origin: top; background: linear-gradient(180deg, #6a4d33, #4a3522);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .55s var(--ease-out), z-index 0s .3s; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }
.env-flap::after { content: ""; position: absolute; left: 50%; top: 72%; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd77a, #c48a12 70%); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .15); }
.env.is-open .env-flap { transform: rotateX(180deg); z-index: 1; transition: transform .55s var(--ease-out), z-index 0s .25s; }
.env-stamp { position: absolute; right: 18px; top: 52%; translate: 0 -100%; width: 44px; height: 52px; display: grid; place-items: center; background: #f5c64f; color: #17110b; font-size: 22px;
  -webkit-mask: radial-gradient(circle at center, transparent 2.5px, #000 3px) 0 0 / 6px 6px round; mask: radial-gradient(circle at center, transparent 2.5px, #000 3px) 0 0 / 6px 6px round; }
.env-post { grid-column: 1 / -1; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 233, 218, .5); }
.env-q { grid-column: 1; margin: 0; font-weight: 700; font-variation-settings: "wdth" 84; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; }
.env-open { grid-column: 2; align-self: end; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid rgba(243, 233, 218, .3); border-radius: var(--r-btn); background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)); color: var(--cream); font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.env-open .ti { font-size: 16px; }
.env-open:hover, .env.is-open .env-open { background: #f5c64f; border-color: #f5c64f; color: #17110b; }
.env:not(.is-open):hover .env-flap { transform: rotateX(18deg); }
@media (max-width: 800px) { .env-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .env-front { padding: 0 14px 14px; } .env-answer { font-size: 16px; } .env-stamp { width: 38px; height: 44px; right: 14px; } }
@media (prefers-reduced-motion: reduce) { .env, .env-letter, .env-flap { transition: none !important; } }
.env.is-open .env-letter { transform: translateY(calc(-1 * var(--lift, 0px))); }
.pcard-v { inset: 17% 18% auto 18%; width: auto; height: 46%; }
/* perforation only around the edge: solid centre + a row of holes on every side */
.stamp {
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle, transparent 3px, #000 3.5px) -5px -5px / 10px 10px repeat;
  mask: linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle, transparent 3px, #000 3.5px) -5px -5px / 10px 10px repeat;
}
.env-stamp {
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 6px) calc(100% - 6px) no-repeat, radial-gradient(circle, transparent 1.8px, #000 2.2px) -3px -3px / 6px 6px repeat;
  mask: linear-gradient(#000 0 0) center / calc(100% - 6px) calc(100% - 6px) no-repeat, radial-gradient(circle, transparent 1.8px, #000 2.2px) -3px -3px / 6px 6px repeat;
}
/* the letter stays sealed inside until opened */
.env .env-letter { opacity: 0; visibility: hidden; transition: transform .7s var(--ease-out), opacity .25s, visibility 0s .25s; }
.env.is-open .env-letter { opacity: 1; visibility: visible; transition: transform .7s var(--ease-out) .25s, opacity .2s .2s, visibility 0s; }

/* Pricing: never charged as quiet ruled columns; questions as a clean accordion */
.pr-never2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pr-never2 li { display: grid; gap: 10px; align-content: start; padding: 26px clamp(16px, 2vw, 28px); }
.pr-never2 li:first-child { padding-left: 0; }
.pr-never2 li + li { border-left: 1px solid var(--line); }
.pr-never2 .ti { font-size: 26px; color: var(--accent-text); }
.pr-never2 b { font-weight: 700; font-size: 18px; }
.pr-never2 span { color: var(--bone-dim); font-size: 14px; line-height: 1.55; }
.pr-qs { max-width: 920px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) {
  .pr-never2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-never2 li:nth-child(3) { border-left: 0; padding-left: 0; }
  .pr-never2 li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .pr-never2 { grid-template-columns: 1fr; }
  .pr-never2 li, .pr-never2 li + li { padding: 20px 0; border-left: 0; }
  .pr-never2 li + li { border-top: 1px solid var(--line); }
}
.hp-q[open] summary > .ti { transform: none; }
.hp-q[open] summary > .ti::before { content: "\eaf2"; }
.pr-qs { border-top: 0; }
.pr-never2 { border-top: 0; }

/* ==========================================================================
   One flow per occasion — compact switcher
   ========================================================================== */
#host .section-title { font-size: clamp(40px, 5vw, 72px); }
.fsw { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: stretch; }
.fsw-tabs { display: grid; align-content: start; border-top: 1px solid var(--line); }
.fsw-tab { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 18px 4px 18px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--bone-dim); text-align: left; font: inherit; cursor: pointer; transition: color .3s, padding .4s var(--ease-out); }
.fsw-tab::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease-out); }
.fsw-n { font-size: 11px; }
.fsw-tab-txt { display: grid; gap: 3px; min-width: 0; }
.fsw-tab-txt b { font-weight: 800; font-variation-settings: "wdth" 74; text-transform: uppercase; font-size: 22px; line-height: 1; color: var(--bone); }
.fsw-tab-txt small { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsw-tab > .ti { font-size: 20px; opacity: .5; transition: opacity .3s, color .3s; }
.fsw-tab:hover { color: var(--bone); }
.fsw-tab[aria-selected="true"] { padding-left: 14px; color: var(--bone); }
.fsw-tab[aria-selected="true"]::before { transform: scaleY(1); }
.fsw-tab[aria-selected="true"] .fsw-n, .fsw-tab[aria-selected="true"] > .ti { color: var(--accent-text); opacity: 1; }

.fsw-panel { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: clamp(16px, 2vw, 28px); padding: clamp(14px, 1.6vw, 20px); border-radius: 22px; color: var(--cream);
  background: radial-gradient(120% 70% at 100% 100%, rgba(245, 198, 79, .14), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); }
.fsw-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border-radius: 14px; min-height: 240px; }
.fsw-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 12%), linear-gradient(0deg, rgba(14, 10, 7, .75), transparent 55%); transition: transform 1s var(--ease-out); }
.fsw-art:hover::after { transform: translateY(-6%); }
.fsw-art .type-tag { position: relative; z-index: 1; align-self: flex-start; background: rgba(21, 15, 10, .7); padding: 5px 10px; border-radius: var(--r-btn); color: var(--tc); }
.fsw-art-title { position: relative; z-index: 1; font-weight: 800; font-variation-settings: "wdth" 72; text-transform: uppercase; font-size: clamp(22px, 2vw, 30px); line-height: .95; color: var(--cream); }
.fsw-body { display: grid; gap: 12px; align-content: start; padding: 6px 6px 4px 0; }
.fsw-body .eyebrow { margin: 0; color: rgba(243, 233, 218, .55); }
.fsw-title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 72; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 36px); line-height: .95; }
.fsw-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.fsw-steps li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(243, 233, 218, .12); font-size: 15px; }
.fsw-steps li span { font-size: 10px; color: #f5c64f; }
.fsw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.fsw-foot .chip { background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)); color: rgba(243, 233, 218, .8); border: 1px solid rgba(243, 233, 218, .15); border-radius: var(--r-btn); }
.fsw-foot .chip b { color: #f5c64f; font-weight: 500; }
.fsw-foot .btn { padding: 11px 18px; font-size: 15px; }
.fsw-panel.is-swap .fsw-art { animation: vsFade .5s both; }
.fsw-panel.is-swap .fsw-title { animation: vsFade .5s .05s both; }
.fsw-panel.is-swap .fsw-steps li { animation: vsFade .45s both; animation-delay: calc(.08s + var(--k) * .05s); }
.host-band { margin-top: var(--sec-inner) !important; }

@media (max-width: 900px) {
  .fsw { grid-template-columns: 1fr; }
  .fsw-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: 8px; }
  .fsw-tab { grid-template-columns: 1fr; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; text-align: left; }
  .fsw-tab::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 3px; transform: scaleX(0); transform-origin: left; }
  .fsw-tab[aria-selected="true"] { padding-left: 12px; border-color: var(--accent); }
  .fsw-tab[aria-selected="true"]::before { transform: scaleX(1); }
  .fsw-tab > .ti, .fsw-tab-txt small { display: none; }
  .fsw-tab-txt b { font-size: 16px; }
}
@media (max-width: 640px) {
  .fsw-panel { grid-template-columns: 1fr; }
  .fsw-art { min-height: 150px; }
  .fsw-steps { grid-template-columns: 1fr; }
  .fsw-tab-txt b { font-size: 14px; }
  .fsw-foot .btn { flex: 1; }
}
.host-band { padding: clamp(24px, 3.2vw, 44px) !important; gap: 16px 40px; }
.host-band .shout { font-size: clamp(36px, 4.6vw, 68px) !important; }
.host-band-copy { font-size: clamp(15px, 1.2vw, 18px); }

/* ==========================================================================
   Mobile polish pass
   ========================================================================== */
/* never let a button label wrap */
.btn { white-space: nowrap; }
/* rank thumbnails: no corner glyph under the big number */
.rank-thumb .poster-glyph { display: none !important; }
/* side preview names stay on one line */
.vside-big { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
/* hear the room: breathing room under the title */
#listen .section-title { margin-bottom: 14px !important; }

@media (max-width: 640px) {
  /* bigger tap targets */
  .cidx-item { min-height: 40px; }
  .hero-dots button { width: 30px; padding: 18px 0; }
  .ticker-x { width: 34px; height: 34px; }
  .pw-toggle { min-height: 36px; padding: 6px 4px; }
  .section-label a, .link-arrow { padding-block: 8px; }
  /* home: shorter ranked list on phones */
  #popular .rank-list > li:nth-child(n+6) { display: none; }
  /* occasion stage: the ticket already names the event */
  .occ-title { display: none; }
  /* flow switcher: full-width action */
  .fsw-foot { flex-direction: column; align-items: stretch; }
  .fsw-foot .chip { align-self: flex-start; }
  .fsw-foot .btn { width: 100%; justify-content: center; }
  .fsw-steps li { padding: 8px 0; font-size: 14px; }
  /* booking pop-up: compact so it covers less */
  .feed { left: 10px; right: 10px; max-width: none; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .feed-link { padding: 8px 40px 8px 8px !important; gap: 10px !important; }
  .feed-thumb { width: 36px !important; height: 36px !important; }
  .feed-text { font-size: 12px !important; line-height: 1.35 !important; }
  .feed-text span { font-size: 11px !important; }
}
@media (max-width: 640px) {
  .filters { gap: 14px; }
  .filters .cidx { margin-bottom: 0 !important; padding-block: 6px 0; }
  .filters .cidx-peek { display: none; }
}
@media (max-width: 640px) {
  /* seat map fits the phone: 20 seats + aisle in ~330px */
  .seatmap { padding: 16px 8px; gap: 5px; min-width: 0; }
  .seat-row { gap: 3px; }
  .seat { width: 13px; height: 15px; border-radius: 4px 4px 2px 2px; }
  .seat.has-aisle { margin-right: 9px; }
  .row-label { width: 12px; font-size: 9px; padding-top: 1px; }
  .seatmap-scroll { border-radius: 12px; }
}
/* bigger invisible tap area around each table seat */
.tseat::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.ptk-go { white-space: nowrap; }
@media (max-width: 640px) { .ptk-go { font-size: 12px; padding: 9px 10px; } }
.bar-col.is-today i { background: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 8px 18px -8px var(--accent); }
.bar-col i { background: linear-gradient(color-mix(in srgb, var(--bone) 18%, transparent), color-mix(in srgb, var(--bone) 18%, transparent)); }
@media (max-width: 640px) {
  .dash .create-side { order: 2; }
  .dash .create-side [data-preview] .tk { max-width: 260px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .cidx--form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible !important; padding: 0 !important; margin: 0 !important; mask: none !important; -webkit-mask: none !important; }
  .cidx--form .cidx-item { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-btn); opacity: 1 !important; transform: none !important; }
  .cidx--form .cidx-word { font-size: 15px !important; -webkit-text-stroke: 0 !important; color: var(--bone-dim) !important; letter-spacing: .02em; -webkit-text-fill-color: currentColor; }
  .cidx--form .cidx-word::after, .cidx--form sup { display: none !important; }
  .cidx--form .cidx-glyph { margin: 0 !important; font-size: 16px !important; opacity: .8; transform: none !important; }
  .cidx--form .cidx-item:has(input:checked) { background: var(--accent); border-color: var(--accent); }
  .cidx--form .cidx-item:has(input:checked) .cidx-word, .cidx--form .cidx-item:has(input:checked) .cidx-glyph { color: var(--on-accent) !important; -webkit-text-fill-color: currentColor; }
}
@media (max-width: 640px) {
  .dash-new { width: 44px; height: 44px; padding: 0 !important; font-size: 0 !important; gap: 0; justify-content: center; }
  .dash-new .ti { font-size: 20px; }
}
.scan-cam:not(.is-on) [data-scan-stop] { display: none; }
@media (max-width: 640px) {
  .ab-collage { height: 270px; max-width: 320px; margin-inline: auto; }
  .ab-card { width: 52%; }
  .ab-card--0 { left: 2%; } .ab-card--2 { right: 2%; }
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-stats div, .ab-stats div:first-child, .ab-stats div + div { padding: 16px 0 14px 14px !important; border-left: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; }
  .ab-stats div:nth-child(odd) { border-left: 0 !important; padding-left: 0 !important; }
  .ab-stats div:nth-child(-n+2) { border-top: 0 !important; }
  .ab-stats div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ab-portrait { max-width: 260px; margin-inline: auto; width: 100%; }
  .ab-quote { font-size: 24px; }
}
@media (max-width: 640px) {
  .hp-topics { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .hp-topics::-webkit-scrollbar { display: none; }
  .hp-topic { flex: none; }
  .hp-quick { gap: 8px; }
  .hp-quick a { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 14px 44px 14px 14px; border-radius: 10px; -webkit-mask: none; mask: none; }
  .hp-quick a > .ti:first-child { grid-row: 1 / 3; font-size: 22px; }
  .hp-quick b { font-size: 16px; }
  .hp-quick span { font-size: 12px; }
  .hp-go { top: 50%; translate: 0 -50%; right: 14px; }
}

/* ==========================================================================
   Dashboard — a touch lighter, plus the new views
   ========================================================================== */
.dash-body :is(.dash-title, .ov-greet, .kpi-num b, .dcard-big b, .pub-title, .door-ring b, .step-n, .step-rail a b, .scan-tally b, .sales-kpis b) { font-weight: 650; }
.dash-body :is(.dash-avatar, .door-stamp, .dash .door-card b, .scan-card b) { font-weight: 700; }
.dash-body :is(.ev-name b, .ev-cell b, .step-t, .dash-nav a[aria-current="page"], .act-text b, .hist-txt b, .set-sec header :is(h2, h3)) { font-weight: 500; }
.dash-body :is(.dtable td b, .dcard b) { font-weight: 550; }
.dash-body .dash-nav a, .dash-body .qa, .dash-body .chip-btn { font-weight: 450; }
.dash-body .btn { font-weight: 550; }

/* status tabs (events, transactions, history) */
.evs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 12px; }
.evs-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-2); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.evs-tabs::-webkit-scrollbar { display: none; }
.evs-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 5px; background: none; color: var(--bone-dim); font: inherit; font-size: 14px; font-weight: 450; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s; }
.evs-tab .ti { font-size: 16px; }
.evs-tab b { font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 4px; background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent)); }
.evs-tab:hover { color: var(--bone); }
.evs-tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.evs-tab[aria-selected="true"] b { background: linear-gradient(rgba(23, 17, 11, .15), rgba(23, 17, 11, .15)); }
.evs-new { padding: 10px 16px; font-size: 14px; }
.evs-hint { margin: 0 0 14px; font-size: 11px; }
.evs-empty { padding: 28px 16px !important; }
.evs-pill, .tx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 4px; font-size: 11px; letter-spacing: .04em; white-space: nowrap; border: 1px solid transparent; }
.evs-pill::before, .tx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.evs-pill[data-st="live"], .tx-pill[data-tx="paid"] { color: #2fbf71; background: linear-gradient(rgba(47, 191, 113, .12), rgba(47, 191, 113, .12)); }
.evs-pill[data-st="scheduled"] { color: #6fa8ff; background: linear-gradient(rgba(111, 168, 255, .12), rgba(111, 168, 255, .12)); }
.evs-pill[data-st="completed"], .tx-pill[data-tx="free"] { color: var(--bone-dim); background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent)); }
.evs-pill[data-st="draft"] { color: var(--accent-text); background: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); }
.evs-pill[data-st="suspended"], .tx-pill[data-tx="refunded"] { color: #ff6b6b; background: linear-gradient(rgba(255, 77, 77, .12), rgba(255, 77, 77, .12)); }
.dtable tr.is-muted td { opacity: .62; }
.dtable tr.is-muted td.row-acts { opacity: 1; }
.row-acts { white-space: nowrap; }

/* ticket sales + transactions */
.sales-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sales-kpis .dcard { padding: 16px 18px; }
.sales-kpis p { margin: 0 0 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.sales-kpis p span { text-transform: none; letter-spacing: 0; opacity: .7; }
.sales-kpis b { font-size: clamp(24px, 2.4vw, 32px); line-height: 1; letter-spacing: -.01em; }
.sales-kpis b.is-accent { color: var(--accent-text); }
.sales-table { margin-bottom: 22px; }
.sales-table .dcard-head { padding: 16px 18px 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sales-table .dcard-head .eyebrow { margin: 0; }
.sales-table .mono.muted { font-size: 11px; }
.sales-table .table-scroll { max-height: 340px; overflow-y: auto; }
.sales-row { cursor: pointer; transition: background .2s; }
.sales-row:hover { background: linear-gradient(color-mix(in srgb, var(--bone) 4%, transparent), color-mix(in srgb, var(--bone) 4%, transparent)); }
.sales-row.is-on { background: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); box-shadow: inset 3px 0 0 var(--accent); }
.sales-sub { margin: 0 0 12px; font-size: 18px; font-weight: 500; }
.tx-table td { font-size: 14px; }
.dash-note { margin: 14px 0 0; font-size: 11px; line-height: 1.6; }

/* operational history */
.hist { padding: 6px 18px 12px; }
.hist-day { margin: 18px 0 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.hist-day:first-child { margin-top: 10px; }
.hist-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hist-row:last-child { border-bottom: 0; }
.hist-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(color-mix(in srgb, var(--bone) 7%, transparent), color-mix(in srgb, var(--bone) 7%, transparent)); font-size: 17px; color: var(--bone-dim); }
.hist-row[data-kind="event"] .hist-ico { color: #6fa8ff; background: linear-gradient(rgba(111, 168, 255, .12), rgba(111, 168, 255, .12)); }
.hist-row[data-kind="sale"] .hist-ico { color: #2fbf71; background: linear-gradient(rgba(47, 191, 113, .12), rgba(47, 191, 113, .12)); }
.hist-row[data-kind="door"] .hist-ico { color: var(--accent-text); background: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); }
.hist-row[data-kind="account"] .hist-ico { color: #c792ea; background: linear-gradient(rgba(199, 146, 234, .12), rgba(199, 146, 234, .12)); }
.hist-txt { display: grid; gap: 2px; min-width: 0; }
.hist-txt b { font-size: 15px; }
.hist-txt .muted { font-size: 13px; }
.hist-txt a { text-decoration: underline; text-underline-offset: 2px; }
.hist-row time { font-size: 11px; }

/* settings */
.set-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.set-nav { position: sticky; top: 100px; display: grid; gap: 2px; padding: 8px; }
.set-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; color: var(--bone-dim); font-size: 14px; transition: background .2s, color .2s; }
.set-nav a:hover { background: linear-gradient(color-mix(in srgb, var(--bone) 6%, transparent), color-mix(in srgb, var(--bone) 6%, transparent)); color: var(--bone); }
.set-nav .ti { font-size: 17px; }
.set-body { display: grid; gap: 14px; }
.set-sec { padding: clamp(16px, 2vw, 24px); scroll-margin-top: 100px; }
.set-sec header { margin-bottom: 14px; }
.set-sec header :is(h2, h3) { margin: 0 0 4px; font-size: 18px; }
.set-sec header p { margin: 0; font-size: 14px; }
.set-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.set-row + .set-row { margin-top: 16px; }
.set-sec .fc-select select { height: 44px; font-size: 17px; border-bottom: 1px solid var(--line); }
.set-sec input:disabled { opacity: .55; }
.set-toggles { display: grid; }
.set-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.set-toggle:first-child { border-top: 0; }
.set-toggle span { display: grid; gap: 2px; }
.set-toggle b { font-weight: 500; font-size: 15px; }
.set-toggle small { font-size: 13px; }
.set-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.set-toggle i { position: relative; flex: none; width: 42px; height: 24px; border-radius: 12px; background: linear-gradient(color-mix(in srgb, var(--bone) 14%, transparent), color-mix(in srgb, var(--bone) 14%, transparent)); transition: background .25s; }
.set-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bone); transition: transform .3s var(--ease-out); }
.set-toggle input:checked + i { background: var(--accent); }
.set-toggle input:checked + i::after { transform: translateX(18px); background: var(--on-accent); }
.set-toggle input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.danger { color: #ff6b6b; border-color: rgba(255, 107, 107, .4); }
.set-confirm { margin: 12px 0 0; font-size: 12px; }
.set-save { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.set-save .mono { font-size: 11px; }

@media (max-width: 900px) {
  .sales-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-grid { grid-template-columns: 1fr; }
  .set-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .set-nav a { flex: none; }
}
@media (max-width: 640px) {
  .evs-head { flex-direction: column; align-items: stretch; }
  .evs-new { display: none; }
  .evs-tab { height: 34px; padding: 0 10px; font-size: 13px; }
  .set-row { grid-template-columns: 1fr; }
  .hist { padding: 4px 14px 10px; }
  .hist-row { grid-template-columns: 30px minmax(0, 1fr); }
  .hist-row time { grid-column: 2; }
  .hist-ico { width: 30px; height: 30px; }
  .sales-kpis b { font-size: 22px; }
}

/* ==========================================================================
   Confirm dialog
   ========================================================================== */
.cdlg { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(8, 6, 4, 0); transition: background .25s; }
.cdlg.is-open { background: rgba(8, 6, 4, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cdlg-panel { width: min(440px, 100%); display: grid; gap: 12px; padding: 26px 24px 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-2); color: var(--bone); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .25s, transform .35s var(--ease-out); }
.cdlg.is-open .cdlg-panel { opacity: 1; transform: none; }
.cdlg-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; font-size: 22px; }
.cdlg-ico--danger { color: #ff6b6b; background: linear-gradient(rgba(255, 77, 77, .12), rgba(255, 77, 77, .12)); }
.cdlg-ico--neutral { color: var(--accent-text); background: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); }
.cdlg-title { margin: 4px 0 0; font-size: 20px; font-weight: 600; line-height: 1.25; }
.cdlg-body { margin: 0; color: var(--bone-dim); line-height: 1.6; font-size: 15px; }
.cdlg-body b { color: var(--bone); font-weight: 550; }
.cdlg-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.cdlg-acts .btn { padding: 11px 18px; font-size: 15px; }
.cdlg-ok--danger { background: #e5484d; color: #fff; }
@media (max-width: 480px) { .cdlg { align-items: end; padding: 12px; } .cdlg-acts { flex-direction: column-reverse; } .cdlg-acts .btn { width: 100%; justify-content: center; } }

/* ==========================================================================
   Status: colour-coded text, no background
   ========================================================================== */
.status-pill, .evs-pill, .tx-pill, .tk-chips .status-pill, .poster-art .status-pill, .preview-art .status-pill { background: none !important; border: 0 !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.status-pill::before, .evs-pill::before, .tx-pill::before { background: currentColor !important; }
/* labels like "Yours" and the pricing-card flag: text only too (button.chip keeps its fill for the pressed state) */
span.chip, em.chip, .pcard-flag { background: none !important; border: 0 !important; padding: 0 !important; }
.pcard-flag { color: var(--ink-c); }
.status-pill { color: #2fbf71; }
.status-pill[data-status="few"] { color: #ff8a3d; }
.status-pill[data-status="soldout"] { color: #ff6b6b; }
.status-pill[data-status="past"] { color: var(--bone-dim); }
.status-pill[data-status="invite"] { color: #c792ea; }
.evs-pill[data-st="upcoming"] { color: #2fbf71; }
.evs-pill[data-st="ongoing"] { color: #ff8a3d; }
.evs-pill[data-st="ongoing"]::before { animation: livePulseDot 1.6s ease-in-out infinite; }
@keyframes livePulseDot { 50% { opacity: .3; } }
.evs-pill[data-st="scheduled"] { color: #6fa8ff; }
.evs-pill[data-st="completed"] { color: var(--bone-dim); }
.evs-pill[data-st="draft"] { color: var(--accent-text); }
.evs-pill[data-st="suspended"] { color: #ff6b6b; }
.tx-pill[data-tx="paid"] { color: #2fbf71; }
.tx-pill[data-tx="free"] { color: var(--bone-dim); }
.tx-pill[data-tx="refunded"] { color: #ff6b6b; }
:root[data-theme="light"] .status-pill:not([data-status]), :root[data-theme="light"] .evs-pill[data-st="upcoming"], :root[data-theme="light"] .tx-pill[data-tx="paid"], :root[data-theme="light"] .status-pill[data-status="onsale"] { color: #13804a; }
:root[data-theme="light"] .evs-pill[data-st="scheduled"] { color: #2c63c9; }
:root[data-theme="light"] .evs-pill[data-st="ongoing"], :root[data-theme="light"] .status-pill[data-status="few"] { color: #c2560f; }
:root[data-theme="light"] .evs-pill[data-st="suspended"], :root[data-theme="light"] .tx-pill[data-tx="refunded"], :root[data-theme="light"] .status-pill[data-status="soldout"] { color: #c7272c; }

/* ==========================================================================
   No icons on event types
   ========================================================================== */
.type-tag > .ti, .type-tag .ti, .cidx-glyph, .venue-good .chip .ti, .vstage-good .ti, .fsw-tab > .ti, .chip[data-type] > .ti { display: none !important; }
.cidx--form .cidx-item { gap: 0; }

/* ==========================================================================
   Tables: fixed header, rows scroll under, full size when empty
   ========================================================================== */
.dash .table-scroll { max-height: min(64vh, 620px); min-height: 360px; overflow: auto; overscroll-behavior: contain; }
.dtable { width: 100%; }
.dtable thead th { position: sticky; top: 0; z-index: 3; background: var(--ink-2); box-shadow: inset 0 -1px 0 var(--line); }
:root[data-theme="light"] .dtable thead th { background: #fff; }
.dtable tbody tr.empty-row td { padding: 0 !important; border: 0; height: 300px; }
.dtable tr.empty-row:hover { background: none !important; }
.empty-state { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 300px; padding: 32px 16px; text-align: center; color: var(--bone-dim); }
.empty-state > .ti { font-size: 36px; color: color-mix(in srgb, var(--bone) 35%, transparent); }
.empty-state p { margin: 0; font-size: 16px; }
.empty-state p b { color: var(--bone); font-weight: 550; }
.hist .empty-state { min-height: 320px; }
/* public pages: centred empty messages too */
.empty, .wallet-empty, .hp-empty, .venue-empty { display: grid !important; place-items: center; align-content: center; gap: 12px; min-height: 260px; text-align: center; grid-column: 1 / -1; padding: 40px 16px !important; }
.rank-list > .empty { min-height: 220px; }
.wallet-empty .btn { justify-self: center; }
.scan-log .scan-log-empty { text-align: center; padding: 28px 0; }
/* smaller cursor preview card */
.cidx-peek { width: 118px; }
.cidx-peek-art { border-radius: 10px; }
.cidx-peek-cap { margin-top: 6px; padding: 7px 9px; border-radius: 8px; font-size: 11px; }
.cidx-peek-cap span { font-size: 9px; }
.cidx-peek .poster-title { font-size: 15cqw; }
/* coloured status on ticket chips too */
.tk-chips .status-pill[data-status="onsale"] { color: #4fd88a; }
.tk-chips .status-pill[data-status="soldout"] { color: #ff8080; }
.tk-chips .status-pill[data-status="invite"] { color: #d6a6f5; }

/* ==========================================================================
   Occasion stage: fit one laptop screen
   ========================================================================== */
@media (min-width: 861px) {
  .occ-stage { --nw: clamp(280px, 28vw, 420px); --nh: clamp(40px, 4vw, 56px); --pad: clamp(18px, 2vw, 28px); }
  .occ-inner { min-height: min(clamp(420px, 34vw, 520px), calc(100vh - 210px)); grid-template-columns: 24px minmax(0, 1.2fr) clamp(230px, 20vw, 290px) minmax(0, .65fr); column-gap: clamp(16px, 2vw, 32px); }
  .occ-title { font-size: clamp(32px, 3.4vw, 58px); }
  .occ-outline { font-size: clamp(36px, 3.8vw, 64px); }
  .occ-price b, .occ-price { font-size: clamp(18px, 1.6vw, 26px); }
  .occ-copy { gap: clamp(8px, 1vw, 14px); }
  .occ-thumb { width: clamp(104px, 8.5vw, 128px); padding: 8px; border-radius: 16px; }
  .occ-arrow { width: 34px; height: 34px; }
  .occ-go { width: 52px; height: 52px; font-size: 18px; }
  .occ-pager { gap: 4px; }
  .occ-pager li, .occ-pager button { font-size: 10px; }
  .occ-center .tk--hero .tk-title { font-size: clamp(22px, 2vw, 32px); }
  .occ-center .tk--hero .tk-day, .occ-center .tk-date b { font-size: clamp(48px, 4.4vw, 72px); }
}

/* ==========================================================================
   Screen-fit pass: calmer display sizes on laptops and desktops
   ========================================================================== */
@media (min-width: 641px) {
  .page-title { font-size: clamp(44px, 5.2vw, 78px); }
  .shout, .section-title { font-size: clamp(36px, 4.4vw, 68px) !important; }
  #host .section-title { font-size: clamp(34px, 3.8vw, 60px) !important; }
  .ab-title, .lg-title { font-size: clamp(40px, 4.8vw, 72px); }
  .pr-title { font-size: clamp(44px, 5.4vw, 82px); }
  .pr-sub { font-size: clamp(20px, 2vw, 30px); }
  .vstage-name { font-size: clamp(44px, 5.2vw, 80px); }
  .vstage-main { min-height: clamp(380px, 32vw, 480px); }
  .footer-giant { font-size: clamp(120px, 13vw, 200px) !important; }
  .intro-statement { font-size: clamp(26px, 3vw, 46px); }
  .cidx-word { font-size: clamp(30px, 3.4vw, 52px); }
  .cidx--sm .cidx-word { font-size: clamp(22px, 2.2vw, 36px); }
  .rank-num { font-size: clamp(46px, 4.2vw, 68px); }
  .host-band .shout { font-size: clamp(30px, 3.6vw, 54px) !important; }
  .page-head { padding-bottom: clamp(18px, 2.4vw, 32px); }
}
@media (min-width: 861px) {
  .occ-inner { grid-template-columns: 24px minmax(0, 1.2fr) clamp(210px, 17vw, 260px) minmax(0, .65fr); min-height: min(clamp(400px, 32vw, 500px), calc(100vh - 220px)); }
  .occ-stage { --nw: clamp(260px, 24vw, 380px); }
  .occ-center .tk--hero .tk-art, .occ-center .tk-art { aspect-ratio: 1 / .6; }
}
/* pricing: smaller metal cards, tighter hero */
.pcard { max-width: 236px; }
.pr-hero { padding-bottom: clamp(24px, 3vw, 44px); gap: clamp(28px, 5vw, 72px); }
.pr-total b { font-size: clamp(36px, 3.4vw, 50px); }
.pr-field input, .pr-money span { font-size: 26px !important; }
/* about */
.ab-collage { height: clamp(300px, 28vw, 420px); }
.ab-portrait { max-width: 400px; }
/* host create preview */
@media (min-width: 900px) { .dash .create-side [data-preview] .tk { max-width: 270px; margin-inline: auto; } }
@media (min-width: 861px) { .occ-pager { max-height: 280px; align-self: center; } }
@media (min-width: 641px) { .occ-railcount b { font-size: clamp(56px, 5.4vw, 88px) !important; } }
/* pricing: fit laptop screens */
.pcard { max-width: 212px; }
.pr-plan2 { gap: 16px; }
.pr-plan2-info { gap: 10px; }
.pr-feats li { padding: 8px 0; font-size: 14px; }
.pr-plan2-for { min-height: 0; font-size: 15px; }
.pr-hero-copy { gap: 16px; }
.pr-lede { font-size: clamp(15px, 1.1vw, 17px); }
.pr-tmain { gap: 10px; padding: 18px 22px 22px; }
.pr-tstub { padding: 16px 22px 18px; gap: 10px; }
.pr-lines { gap: 7px; }
.pr-lines dt, .pr-lines dd { font-size: 14px; }
.pr-code { height: 26px; }
.pr-receipt { top: 110px; }

/* ==========================================================================
   Colour system (status + actions)
   ========================================================================== */
:root {
  --c-danger: #EF4444; --c-done: #22C55E; --c-cancel: #9CA3AF; --c-cancelled: #6B7280; --c-progress: #3B82F6; --c-pending: #F59E0B;
  --st-completed: #4ADE80; --st-upcoming: #60A5FA; --st-scheduled: #34D399; --st-free: #D1D5DB; --st-paid: #34D399; --st-refunded: #A78BFA; --st-failed: #F87171; --st-paused: #FBBF24; --st-cancelled: #6B7280;
}
:root[data-theme="light"] {
  --c-danger: #DC2626; --c-done: #16A34A; --c-cancel: #6B7280; --c-cancelled: #9CA3AF; --c-progress: #2563EB; --c-pending: #D97706;
  --st-completed: #166534; --st-upcoming: #1E40AF; --st-scheduled: #166534; --st-free: #374151; --st-paid: #065F46; --st-refunded: #5B21B6; --st-failed: #991B1B; --st-paused: #92400E; --st-cancelled: #9CA3AF;
}
.evs-pill[data-st="completed"] { color: var(--st-completed) !important; }
.evs-pill[data-st="completed"]::before { content: "\ea5e" !important; font-family: "tabler-icons"; width: auto !important; height: auto !important; background: none !important; font-size: 12px; }
.evs-pill[data-st="upcoming"] { color: var(--st-upcoming) !important; }
.evs-pill[data-st="ongoing"] { color: var(--c-progress) !important; }
.evs-pill[data-st="scheduled"] { color: var(--st-scheduled) !important; }
.evs-pill[data-st="draft"] { color: var(--c-pending) !important; }
.evs-pill[data-st="suspended"] { color: var(--st-cancelled) !important; }
:root:not([data-theme="light"]) .evs-pill[data-st="suspended"] { color: #8B95A5 !important; }
.tx-pill[data-tx="paid"] { color: var(--st-paid) !important; }
.tx-pill[data-tx="free"] { color: var(--st-free) !important; }
.tx-pill[data-tx="refunded"] { color: var(--st-refunded) !important; }
.tx-pill[data-tx="failed"] { color: var(--st-failed) !important; }
.status-pill, .status-pill[data-status="onsale"] { color: var(--c-done); }
.status-pill[data-status="few"] { color: var(--c-pending); }
.status-pill[data-status="soldout"] { color: var(--c-danger); }
.status-pill[data-status="past"] { color: var(--c-cancelled); }
.status-pill[data-status="invite"] { color: var(--st-refunded); }
/* actions */
.link-btn.danger, .btn.danger, .mnav-out { color: var(--c-danger) !important; border-color: color-mix(in srgb, var(--c-danger) 45%, transparent) !important; }
.cdlg-ok--danger { background: var(--c-danger) !important; color: #fff !important; }
.cdlg-ok--neutral { background: var(--c-done) !important; color: #fff !important; }
.cdlg-ico--danger { color: var(--c-danger); background: linear-gradient(color-mix(in srgb, var(--c-danger) 12%, transparent), color-mix(in srgb, var(--c-danger) 12%, transparent)); }
.cdlg-ico--neutral { color: var(--c-done); background: linear-gradient(color-mix(in srgb, var(--c-done) 12%, transparent), color-mix(in srgb, var(--c-done) 12%, transparent)); }
.cdlg-acts .btn-ghost { color: var(--c-cancel); border-color: color-mix(in srgb, var(--c-cancel) 40%, transparent); }
.cdlg-acts .btn-ghost:hover { color: var(--bone); }
.ov-delta.is-up { color: var(--c-done); } .ov-delta.is-down { color: var(--c-danger); }

/* ==========================================================================
   Dashboard: smaller buttons
   ========================================================================== */
.btn-sm, .dash-body .btn-sm { padding: 8px 14px !important; font-size: 13px !important; gap: 6px; }
.dash-body .btn { padding: 9px 16px; font-size: 14px; }
.dash-body .btn .ti { font-size: 16px; }
.dash-new { height: 38px; }
.dash-body .create-actions .btn, .dash-body .set-save .btn { padding: 10px 18px; }

/* ==========================================================================
   Tabs (underline) + toolbar
   ========================================================================== */
.dash-body .evs-tabs { gap: 22px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; width: 100%; }
.dash-body .evs-tab { position: relative; height: 46px; padding: 0 2px; border-radius: 0; background: none !important; color: var(--bone-dim) !important; font-size: 15px; }
.dash-body .evs-tab .ti { display: none; }
.dash-body .evs-tab b { min-width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0 7px; border-radius: 13px; background: linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)) !important; color: var(--accent-text); font-size: 12px; }
.dash-body .evs-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .3s var(--ease-out); }
.dash-body .evs-tab[aria-selected="true"] { color: var(--accent-text) !important; }
.dash-body .evs-tab[aria-selected="true"]::after { transform: scaleX(1); }
.dash-body .evs-head { margin-bottom: 18px; }
.tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.tbar-search { display: flex; align-items: center; gap: 8px; width: min(360px, 100%); height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-2); transition: border-color .25s; }
.tbar-search:focus-within { border-color: var(--accent); }
.tbar-search .ti { font-size: 17px; color: var(--bone-dim); }
.tbar-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--bone); font: inherit; font-size: 14px; }
.tbar-region { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--ink-2); cursor: pointer; }
.tbar-region .ti { font-size: 15px; color: var(--bone-dim); }
.tbar-region select { appearance: none; -webkit-appearance: none; border: 0; background: none; color: var(--bone); font: inherit; font-size: 13px; font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; outline: none; padding-right: 2px; }
.tbar-region select option { color: #111; text-transform: none; }
.tbar-filter { position: relative; }
.tbar-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-2); color: var(--bone); font: inherit; font-size: 14px; cursor: pointer; }
.tbar-btn .ti { font-size: 16px; }
.tbar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tbar-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 240px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); }
.tbar-pop p { margin: 0 0 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.tbar-types { display: flex; flex-wrap: wrap; gap: 6px; }
.tbar-types button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--bone-dim); font: inherit; font-size: 13px; cursor: pointer; }
.tbar-types button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tbar-sp { flex: 1; }
.tbar-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 8px; background: none; color: var(--accent-text); font-size: 18px; cursor: pointer; transition: background .25s; }
.tbar-icon:hover { background: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); }
.dash .evs-hint { margin-bottom: 10px; }

/* empty state with illustration */
.empty-state { min-height: 420px; gap: 6px; }
.dash .table-scroll { min-height: 480px; }
.dtable tbody tr.empty-row td { height: 420px; }
.es-art { width: 170px; height: auto; margin-bottom: 14px; }
.es-art .es-star { fill: color-mix(in srgb, var(--bone) 28%, transparent); }
.es-art .es-s2 { fill: color-mix(in srgb, var(--bone) 18%, transparent); }
.es-art .es-lid { fill: color-mix(in srgb, var(--bone) 10%, transparent); }
.es-art .es-flap { fill: color-mix(in srgb, var(--bone) 16%, transparent); }
.es-title { margin: 0; font-size: 18px !important; font-weight: 550; color: var(--accent-text); }
.es-sub { margin: 0 0 8px; font-size: 14px !important; color: var(--bone-dim); }
.empty-state .btn-sm { margin-top: 6px; }

/* ==========================================================================
   Header: notifications + banner
   ========================================================================== */
.dash-sp { flex: 1; }
.notif { position: relative; }
.notif-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-2); color: var(--bone); font-size: 19px; cursor: pointer; }
.notif-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: #B91C1C; color: #fff; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px var(--ink); }
.notif-pop { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(360px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); overflow: hidden; animation: viewIn .25s var(--ease-out) both; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.notif-head b { font-weight: 550; }
.notif-head .mono { font-size: 11px; }
.notif-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.notif-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; }
.notif-list li.is-new { background: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
.notif-list li.is-new .notif-txt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.notif-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(color-mix(in srgb, var(--bone) 7%, transparent), color-mix(in srgb, var(--bone) 7%, transparent)); color: var(--bone-dim); font-size: 15px; }
.notif-list time { font-size: 11px; color: var(--bone-dim); }
.notif-empty { display: block !important; text-align: center; padding: 30px 16px !important; }
.notif-foot { display: block; padding: 12px 16px; text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.dash-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 16px 14px 18px; border-radius: 12px; color: #fff7ec; background: linear-gradient(90deg, #8a4a1c, #c2702f 12%, #c2702f 88%, #8a4a1c); }
.dash-banner > .ti { font-size: 24px; flex: none; }
.dash-banner p { flex: 1; margin: 0; font-size: 15px; line-height: 1.45; }
.dash-banner b { font-weight: 600; }
.dash-banner-cta { background: #fff !important; color: #b4581c !important; flex: none; }
.dash-banner-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: #fff7ec; font-size: 18px; cursor: pointer; }
.dash-banner-x:hover { background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)); }

/* ==========================================================================
   Overview (rebuilt)
   ========================================================================== */
.ov-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.ov-date { margin: 0 0 6px; font-size: 11px; }
.ov-hi { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 550; letter-spacing: -.01em; }
.ov-acts { display: flex; gap: 8px; }
.ov-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.ov-kpi { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); min-width: 0; }
.ov-kpi.is-accent { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--ink-2); }
.ov-kpi-l { margin: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.ov-kpi-v { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.ov-kpi-v b { font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.ov-kpi-v .spark { width: 96px; height: 32px; }
.ov-kpi-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--bone-dim); }
.ov-delta { display: inline-flex; align-items: center; gap: 2px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; }
.ov-delta .ti { font-size: 13px; }
.ov-fill { position: relative; flex: 1 1 100%; height: 6px; border-radius: 3px; background: linear-gradient(color-mix(in srgb, var(--bone) 10%, transparent), color-mix(in srgb, var(--bone) 10%, transparent)); overflow: hidden; }
.ov-fill i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--accent); }
.ov-row { display: grid; gap: 12px; margin-bottom: 12px; }
.ov-row--a { grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); }
.ov-row--b { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); }
.ov-card { padding: 16px 18px 18px !important; border-radius: 12px !important; min-width: 0; }
.ov-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ov-card-t { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 550; }
.ov-card-s { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--bone-dim); }
.ov-card-s b { font-size: 22px; font-weight: 600; color: var(--bone); }
.ov-card .link-arrow { font-size: 11px; padding-block: 2px; }
/* range radio group */
.seg-radio { --w: 46px; position: relative; display: inline-grid; grid-template-columns: repeat(3, var(--w)); padding: 3px; border-radius: 9px; border: 1px solid var(--line); background: linear-gradient(color-mix(in srgb, var(--bone) 4%, transparent), color-mix(in srgb, var(--bone) 4%, transparent)); isolation: isolate; flex: none; }
.seg-radio label { position: relative; z-index: 1; height: 30px; display: grid; place-items: center; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--bone-dim); transition: color .25s; }
.seg-radio input:checked + span { color: var(--on-accent); font-weight: 600; }
.seg-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.seg-radio-thumb { position: absolute; z-index: 0; top: 3px; left: 3px; width: var(--w); height: 30px; border-radius: 6px; background: var(--accent); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 70%, transparent); transform: translateX(calc(var(--n, 1) * var(--w))); transition: transform .35s var(--ease-out); }
/* chart */
.ov-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 210px; align-items: end; padding-top: 22px; }
.ov-bars.is-dense { gap: 3px; }
.ov-bar { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; min-width: 0; }
.ov-bar i { align-self: end; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(color-mix(in srgb, var(--bone) 16%, transparent), color-mix(in srgb, var(--bone) 16%, transparent)); transform-origin: bottom; animation: barGrow .7s var(--ease-out) both; animation-delay: calc(var(--i) * 18ms); transition: background .2s; }
.ov-bar.is-today i { background: var(--accent); }
.ov-bar:hover i { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.ov-bar em { font-style: normal; font-size: 10px; color: var(--bone-dim); text-align: center; height: 12px; }
.ov-tip { position: absolute; left: 50%; bottom: calc(var(--h) * (100% - 18px) + 26px); translate: -50% 0; z-index: 2; display: grid; gap: 2px; padding: 6px 8px; border-radius: 6px; background: var(--bone); color: var(--ink); font-size: 10px; white-space: nowrap; text-align: center; opacity: 0; pointer-events: none; transition: opacity .15s; }
.ov-tip b { font-size: 13px; }
.ov-bar:hover .ov-tip { opacity: 1; }
@keyframes barGrow { from { transform: scaleY(0); } }
/* coming up */
.ov-up { list-style: none; margin: 0; padding: 0; display: grid; }
.ov-up a { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.ov-up li:first-child a { border-top: 0; padding-top: 0; }
.ov-up-d { display: grid; justify-items: center; padding: 6px 0; border-radius: 8px; background: linear-gradient(color-mix(in srgb, var(--bone) 6%, transparent), color-mix(in srgb, var(--bone) 6%, transparent)); line-height: 1; }
.ov-up-d b { font-size: 18px; font-weight: 600; }
.ov-up-d span { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); margin-top: 3px; }
.ov-up-t { display: grid; gap: 2px; min-width: 0; }
.ov-up-t b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-up-t .muted { font-size: 12px; }
.ov-up-p { font-size: 12px; color: var(--accent-text); }
.ov-up a:hover b { color: var(--accent-text); }
/* top events table */
.ov-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ov-table th { text-align: left; padding: 0 8px 8px 0; font-family: var(--f-mono); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); border-bottom: 1px solid var(--line); }
.ov-table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ov-table tr:last-child td { border-bottom: 0; }
.ov-table .ev-thumb { width: 30px; height: 30px; }
.ov-table .ev-cell b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; display: block; }
.ov-table .ev-meter { min-width: 60px; }
/* activity */
.ov-act { list-style: none; margin: 0; padding: 0; display: grid; }
.ov-act li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ov-act li:first-child { border-top: 0; padding-top: 0; }
.ov-act .act-av { width: 30px; height: 30px; font-size: 12px; }
.ov-act-t { display: grid; gap: 1px; min-width: 0; }
.ov-act-t .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-act b { font-weight: 550; }
.ov-act time { font-size: 10.5px; white-space: nowrap; }
/* types */
.ov-types { display: grid; gap: 12px; }
.ov-type { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 13px; }
.ov-type-bar { height: 8px; border-radius: 4px; background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent)); overflow: hidden; }
.ov-type-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.ov-type b { text-align: right; font-weight: 500; font-size: 12px; }

@media (max-width: 1200px) { .ov-row--b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ov-row--b > :first-child { grid-column: 1 / -1; } }
@media (max-width: 1200px) { .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .ov-row--a { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ov-row--b { grid-template-columns: 1fr; }
  .ov-kpi-v .spark { display: none; }
  .ov-kpi-v b { font-size: 24px; }
  .ov-card-h { flex-wrap: wrap; }
  .ov-bars { height: 160px; gap: 3px; }
  .ov-acts .btn span { display: none; }
  .tbar-search { width: 100%; }
  .tbar-sp { display: none; }
  .dash-body .evs-tabs { overflow-x: auto; gap: 18px; }
  .dash-banner { flex-wrap: wrap; padding-right: 44px; }
  .dash-banner p { flex-basis: calc(100% - 40px); font-size: 14px; }
  .dash-banner-x { position: absolute; top: 10px; right: 8px; }
  .dash-new { width: 40px; }
  .es-art { width: 130px; }
  .empty-state { min-height: 340px; }
}
.ov-kpi-v .spark { position: static; flex: none; opacity: 1; }

/* ==========================================================================
   Hear the room: subtitle sits under the title
   ========================================================================== */
.sketch-note { margin: 0 auto clamp(22px, 3vw, 36px) !important; font-size: 11px; line-height: 1.6; }
#listen .section-title { margin-bottom: 12px !important; }

/* ==========================================================================
   Spot illustrations (theme-matched)
   ========================================================================== */
.art { --a-line: color-mix(in srgb, var(--bone) 34%, transparent); --a-face: color-mix(in srgb, var(--bone) 9%, var(--ink-2)); --a-fill: color-mix(in srgb, var(--bone) 14%, var(--ink-2)); --a-shade: color-mix(in srgb, var(--bone) 5%, var(--ink-2)); display: block; width: min(220px, 70%); margin: 0 auto 10px; }
:root[data-theme="light"] .art { --a-line: #b9b0a2; --a-face: #fbf8f2; --a-fill: #f1ece2; --a-shade: #e4ddd0; }
.art svg { display: block; width: 100%; height: auto; overflow: visible; }
.art--sm { width: 120px; }
.art--xl { width: min(320px, 80%); }
.art .art-shadow { fill: color-mix(in srgb, var(--bone) 7%, transparent); }
.art .art-face { fill: var(--a-face); }
.art .art-fill { fill: var(--a-fill); }
.art .art-shade { fill: var(--a-shade); }
.art .art-line { stroke: var(--a-line); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.art .art-tag { fill: none; stroke: var(--a-line); stroke-width: 1.4; }
.art .art-handle { fill: none; stroke: var(--a-line); stroke-width: 2.4; }
.art .art-rail { fill: none; stroke: var(--a-line); stroke-width: 1.6; }
.art .art-accent { fill: var(--accent); }
.art .art-accent-soft { fill: color-mix(in srgb, var(--accent) 30%, var(--a-face)); }
.art .art-spark { fill: var(--accent); opacity: .85; }
.art .art-spark--s { opacity: .5; }
.art .art-dot { fill: var(--a-line); }
.art .art-lens { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--a-line); stroke-width: 1.4; }
.art .art-glint { fill: none; stroke: color-mix(in srgb, var(--bone) 45%, transparent); stroke-width: 3; stroke-linecap: round; }
.art .art-handle-big { stroke: var(--a-line); stroke-width: 20; stroke-linecap: round; }
.art .art-handle-cap { stroke: var(--a-face); stroke-width: 16; stroke-linecap: round; }
.art .art-cable { fill: none; stroke: var(--a-line); stroke-width: 5; stroke-linecap: round; }
.art .art-hole { fill: var(--a-line); }
.art .art-prong { fill: var(--a-line); }
.art .art-stripe { fill: var(--a-face); }
.art .art-404 { font-family: var(--f-display, sans-serif); font-weight: 800; font-size: 150px; fill: var(--accent); }
.art .art-404-o { fill: var(--accent); }
.art .art-bg { fill: var(--ink); }
.art .art-ghost { fill: #fffaf0; stroke: var(--a-line); stroke-width: 1.4; }
.art .art-ghost-arm { fill: none; stroke: #fffaf0; stroke-width: 6; stroke-linecap: round; }
.art .art-eye { fill: #17110b; }
.art svg > *, .art svg g > * { animation: artIn .6s var(--ease-out) both; }
.art .art-spark { animation: artTwinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.art .art-ghost, .art .art-eye, .art .art-ghost-arm { animation: ghostFloat 3.2s ease-in-out infinite; }
@keyframes artIn { from { opacity: 0; } }
@keyframes artTwinkle { 50% { opacity: .25; transform: scale(.7); } }
@keyframes ghostFloat { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .art * { animation: none !important; } }
.wallet-empty .es-title, .hp-empty .es-title, .venue-empty .es-title, .empty .es-title { margin: 0; font-size: 18px; font-weight: 550; color: var(--accent-text); }
.wallet-empty .es-sub, .hp-empty .es-sub, .venue-empty .es-sub, .empty .es-sub { margin: 0 0 6px; font-size: 14px; color: var(--bone-dim); }
.scan-log .scan-log-empty { display: grid; justify-items: center; gap: 8px; }
.notif-empty { display: grid !important; justify-items: center; gap: 6px; }

/* error / maintenance pages */
.state-page { min-height: calc(100svh - 120px); display: grid; place-items: center; align-content: center; gap: 24px; padding-block: 120px 60px; }
body[data-page="maintenance"] .state-page { min-height: 100svh; padding-block: 40px; }
.state-top { position: absolute; top: 28px; left: var(--gutter); }
.state-card { display: grid; justify-items: center; gap: 12px; max-width: 520px; text-align: center; }
.state-title { margin: 6px 0 0; font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.01em; }
.state-text { margin: 0; color: var(--bone-dim); line-height: 1.6; }
.state-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.state-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.state-social { display: flex; gap: 10px; margin-top: 8px; }
.state-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 18px; transition: border-color .25s, color .25s; }
.state-social a:hover { border-color: var(--accent); color: var(--accent-text); }
.state-mail { margin: 4px 0 0; color: var(--bone-dim); }
.state-mail .mono { display: inline-block; margin-left: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--bone); }

/* ==========================================================================
   Category index: tiny poster thumbnails
   ========================================================================== */
.cidx-thumb { position: relative; flex: none; width: clamp(30px, 2.6vw, 40px); aspect-ratio: 1; border-radius: 8px; overflow: hidden; align-self: center; margin-right: 12px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--bone) 14%, transparent); transition: transform .4s var(--ease-out), box-shadow .3s; }
.cidx-thumb .poster, .cidx-thumb .poster-art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.cidx-thumb .poster-title, .cidx-thumb .poster-glyph, .cidx-thumb .poster-meta, .cidx-thumb .poster-foot { display: none !important; }
.cidx-item { align-items: center; }
.cidx-item:not(:disabled):hover .cidx-thumb { transform: rotate(-6deg) scale(1.08); }
.cidx-item[aria-pressed="true"] .cidx-thumb, .cidx-item:has(input:checked) .cidx-thumb { box-shadow: 0 0 0 2px var(--accent); }
.cidx--sm .cidx-thumb { width: 28px; border-radius: 6px; margin-right: 8px; }
@media (max-width: 640px) { .cidx-thumb { width: 26px; border-radius: 6px; margin-right: 8px; } }

/* ==========================================================================
   Events: progressive "load more"
   ========================================================================== */
.more { display: grid; justify-items: center; gap: 12px; padding: 28px 0 60px; }
.more-count { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.more-count a { margin-left: 4px; }
.more-bar { width: min(220px, 60%); height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.more-bar i { display: block; height: 100%; background: var(--accent); transition: width .5s var(--ease-out); }
.more-spin { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.more-spin .ti { animation: spin 1s linear infinite; }
.more .btn { padding: 10px 18px; font-size: 14px; }

/* ==========================================================================
   LIVE: red dot + mono "LIVE", everywhere (ticker, dashboard nav, ongoing status)
   ========================================================================== */
.live-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.live-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, .6); animation: livePing 1.8s ease-out infinite; }
@keyframes livePing { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, .55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(255, 77, 77, 0); } }
.dash-nav a b.nav-live { background: none !important; color: inherit !important; padding: 0 !important; font-size: 10px !important; display: inline-flex; align-items: center; gap: 6px; letter-spacing: .14em; }
.dash-nav a b.nav-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; animation: livePing 1.8s ease-out infinite; }
.evs-pill[data-st="ongoing"] { color: var(--bone) !important; letter-spacing: .14em; }
.evs-pill[data-st="ongoing"]::before { width: 7px !important; height: 7px !important; background: #ff4d4d !important; animation: livePing 1.8s ease-out infinite !important; }

/* ==========================================================================
   Spaces for hire
   ========================================================================== */
.sp-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; }
.sp-head .eyebrow, .sp-head .page-title { margin: 0; }
.sp-head .page-title { margin-top: 10px; }
.sp-head-acts { display: grid; justify-items: end; gap: 10px; max-width: 320px; text-align: right; }
.sp-head-acts p { margin: 0; font-size: 14px; }
.sp-label-acts { display: inline-flex; gap: 18px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(14px, 1.8vw, 24px); padding-bottom: var(--sec-y); }
.sp-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ink-2); scroll-margin-top: 120px; transition: translate .4s var(--ease-out), box-shadow .4s, border-color .3s; }
.sp-card:hover { translate: 0 -4px; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .7); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.sp-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.sp-art { position: relative; aspect-ratio: 16 / 9; display: flex; justify-content: space-between; align-items: flex-end; padding: 14px; color: var(--cream); isolation: isolate; }
.sp-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 10%), linear-gradient(0deg, rgba(14, 10, 7, .75), transparent 60%); }
.sp-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 6px; background: rgba(14, 10, 7, .7); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sp-badge .ti { font-size: 13px; color: #f5c64f; }
.sp-cap { display: grid; gap: 2px; }
.sp-cap b { font-size: 34px; font-weight: 700; line-height: 1; }
.sp-cap .mono { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.sp-body { display: grid; align-content: start; gap: 8px; padding: 16px 18px 16px; }
.sp-loc { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bone-dim); }
.sp-name { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.sp-note { margin: 0; color: var(--bone-dim); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-amen { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-amen li { padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; color: var(--bone-dim); }
.sp-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.sp-price { margin: 0; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 6px; }
.sp-price b { font-size: 22px; font-weight: 650; color: var(--accent-text); }
.sp-price span { font-size: 13px; color: var(--bone-dim); }
.sp-price em { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: var(--bone-dim); }
.sp-acts { display: flex; gap: 8px; }
.sp-owner { margin: 2px 0 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.sp-add { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 360px; border-style: dashed; background: none; color: var(--bone); font: inherit; cursor: pointer; text-align: center; padding: 24px; }
.sp-add b { font-size: 18px; font-weight: 600; }
.sp-add .muted { font-size: 14px; }
.sp-sheet { position: relative; width: min(620px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; }
.sp-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--bone-dim); font-size: 18px; cursor: pointer; }
.sp-sheet .eyebrow { margin: 0; }
.sp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 6px; }
.sp-wide { grid-column: 1 / -1; }
.sp-form .fc-select select { height: 44px; font-size: 17px; border-bottom: 1px solid var(--line); width: 100%; }
.sp-form textarea { min-height: 80px !important; }
.sp-err { margin: 0; color: var(--c-danger); font-size: 12px; }
.sp-amen-pick, .sp-arts { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-amen-pick legend, .sp-arts legend { width: 100%; margin-bottom: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.sp-amen-pick label { cursor: pointer; }
.sp-amen-pick input { position: absolute; opacity: 0; pointer-events: none; }
.sp-amen-pick span { display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--bone-dim); transition: background .2s, color .2s, border-color .2s; }
.sp-amen-pick input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sp-amen-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-arts .swatch { width: 34px; height: 34px; }
@media (max-width: 640px) {
  .sp-head-acts { justify-items: start; text-align: left; }
  .sp-form { grid-template-columns: 1fr; }
  .sp-label-acts a:first-child { display: none; }
}
@media (min-width: 641px) { #occasions .cidx-word { font-size: clamp(26px, 2.6vw, 42px); } #occasions .cidx-thumb { width: clamp(26px, 2.2vw, 34px); } }

/* ==========================================================================
   Table seats: big, numbered, easy to tap
   ========================================================================== */
.tables { --tsz: 200px; --r: 78px; --s: 30px; grid-template-columns: repeat(auto-fill, minmax(var(--tsz), 1fr)); gap: 22px 18px; min-width: 0 !important; }
.table { width: var(--tsz); height: var(--tsz); }
.table-top { width: 96px; height: 96px; border: 1px solid var(--line); color: var(--bone); font: inherit; cursor: pointer; transition: border-color .25s, transform .3s var(--ease-out), background .25s; }
.table-top:hover:not(:disabled) { border-color: var(--accent); transform: scale(1.04); }
.table-top:disabled { cursor: not-allowed; opacity: .6; }
.table-top .mono { font-size: 10px; letter-spacing: .06em; }
.tseat { width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 9px; display: grid; place-items: center; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); background: color-mix(in srgb, var(--t-stalls) 85%, transparent); color: rgba(14, 10, 7, .7); font-family: var(--f-mono); font-size: 11px; font-weight: 600; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); transition: background .2s, box-shadow .2s, scale .2s, color .2s; }
.tseat::after { inset: -6px !important; }
.tseat span { pointer-events: none; }
.tseat:hover:not(:disabled) { scale: 1.15; background: var(--t-stalls); }
.tseat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tseat:disabled, .tseat.is-sold { background: var(--seat-off); color: transparent; box-shadow: inset 0 0 0 1px rgba(236, 231, 221, .12); }
.tseat:disabled::before { content: "\eb55"; font-family: "tabler-icons"; font-size: 12px; color: color-mix(in srgb, var(--bone) 30%, transparent); }
.tseat[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px var(--ink-2), 0 0 0 5px var(--accent); scale: 1.08; }
@media (max-width: 640px) {
  .tablemap { padding: 14px 8px; }
  .tables { --tsz: 156px; --r: 60px; --s: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 4px; }
  .table-top { width: 72px; height: 72px; }
  .table-top b { font-size: 20px; }
  .tseat { font-size: 10px; border-radius: 7px; }
}
@media (max-width: 359px) { .tables { --tsz: 140px; --r: 54px; --s: 24px; } }

/* ==========================================================================
   Verified banner — espresso ticket with custard stub
   ========================================================================== */
.vb { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; margin: 0 0 20px; border-radius: 16px; overflow: hidden; color: var(--cream);
  background: radial-gradient(90% 140% at 100% 0%, rgba(245, 198, 79, .16), transparent 60%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 22px), linear-gradient(160deg, var(--espresso-1), var(--espresso-2));
  box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .7); animation: viewIn .5s var(--ease-out) both; }
.vb[hidden] { display: none; }
.vb-stub { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; background: #f5c64f; color: #17110b; border-right: 2px dashed rgba(23, 17, 11, .3); }
.vb-stub::before, .vb-stub::after { content: ""; position: absolute; right: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); }
.vb-stub::before { top: -10px; } .vb-stub::after { bottom: -10px; }
.vb-seal { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #17110b; color: #f5c64f; font-size: 30px; animation: stampIn .6s .2s cubic-bezier(.2, 1.6, .4, 1) both; }
.vb-stub-t { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.vb-main { display: grid; gap: 6px; padding: 18px 22px; min-width: 0; }
.vb-kicker { margin: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #f5c64f; }
.vb-title { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.2; }
.vb-title em { font-style: normal; color: #f5c64f; }
.vb-text { margin: 0; font-size: 13.5px; color: rgba(243, 233, 218, .7); }
.vb-steps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.vb-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(243, 233, 218, .65); }
.vb-steps .ti { font-size: 16px; }
.vb-steps li.is-done { color: var(--cream); }
.vb-steps li.is-done .ti { color: var(--c-done); }
.vb-side { display: grid; justify-items: center; align-content: center; gap: 12px; padding: 18px 26px 18px 8px; }
.vb-side .btn { background: #f5c64f; color: #17110b; }
.vb-ring { --p: 0; position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.vb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.vb-ring circle { fill: none; stroke: rgba(243, 233, 218, .15); stroke-width: 4; }
.vb-ring .vb-ring-fg { stroke: #f5c64f; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); transition: stroke-dashoffset .8s var(--ease-out); }
.vb-ring b { font-family: var(--f-mono); font-size: 12px; font-weight: 500; }
.vb-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: rgba(243, 233, 218, .6); font-size: 16px; cursor: pointer; }
.vb-x:hover { background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)); color: var(--cream); }
@media (max-width: 760px) {
  .vb { grid-template-columns: 1fr; }
  .vb-stub { grid-auto-flow: column; justify-content: start; padding: 12px 16px; border-right: 0; border-bottom: 2px dashed rgba(23, 17, 11, .3); }
  .vb-stub::before, .vb-stub::after { right: auto; top: auto; bottom: -11px; }
  .vb-stub::before { left: -10px; } .vb-stub::after { right: -10px; left: auto; }
  .vb-seal { width: 38px; height: 38px; font-size: 22px; }
  .vb-side { grid-auto-flow: column; justify-content: space-between; padding: 0 18px 18px; }
}

/* ==========================================================================
   Custom dropdown
   ========================================================================== */
.dd { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.dd--block { display: block; width: 100%; }
.dd-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; margin: 0; background: none; color: inherit; border-color: var(--line); text-align: left; cursor: pointer; line-height: 1.2; transition: border-color .25s, color .25s; }
.dd-btn:not(.has-box) { border-top: 0; border-left: 0; border-right: 0; }
.dd-btn:hover, .dd.is-open .dd-btn, .dd-btn:focus-visible { border-color: var(--accent); outline: none; }
.dd-btn:disabled { opacity: .5; cursor: not-allowed; }
.dd-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-chev { flex: none; font-size: 15px !important; opacity: .6; transition: transform .3s var(--ease-out), opacity .2s; }
.dd.is-open .dd-chev { transform: rotate(180deg); opacity: 1; color: var(--accent-text); }
.fc-select:has(.dd)::after, .fc-select:has(.dd)::before { display: none !important; }
.fc-select .dd-btn { padding-right: 0 !important; }
.tbar-region:has(.dd) > .ti-chevron-down { display: none; }
.dd-list { position: fixed; z-index: 300; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 180px; max-width: min(360px, calc(100vw - 16px)); padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); color: var(--bone); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .2); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .16s, transform .2s var(--ease-out); overflow: hidden; font-family: var(--f-sans, inherit); }
.dd-list.is-up { transform-origin: bottom left; transform: translateY(6px) scale(.98); }
.dd-list.is-open { opacity: 1; transform: none; }
.dd-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dd-search { display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; padding: 0 10px; height: 38px; border-bottom: 1px solid var(--line); }
.dd-search .ti { font-size: 15px; color: var(--bone-dim); }
.dd-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--bone); font: inherit; font-size: 14px !important; }
.dd-group { margin: 8px 10px 4px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.dd-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 8px 10px; border-radius: 7px; font-size: 14.5px; cursor: pointer; user-select: none; }
.dd-opt.in-group { padding-left: 16px; }
.dd-opt .ti { font-size: 15px; color: var(--accent-text); opacity: 0; }
.dd-opt.is-active { background: linear-gradient(color-mix(in srgb, var(--bone) 7%, transparent), color-mix(in srgb, var(--bone) 7%, transparent)); }
.dd-opt.is-sel { color: var(--accent-text); font-weight: 550; }
.dd-opt.is-sel .ti { opacity: 1; }
.dd-opt.is-disabled { opacity: .4; cursor: not-allowed; }
.dd-none { margin: 10px; font-size: 13px; color: var(--bone-dim); text-align: center; }
.dd-scrim { position: fixed; inset: 0; z-index: 299; background: rgba(8, 6, 4, 0); transition: background .2s; }
.dd-scrim.is-open { background: rgba(8, 6, 4, .55); }
.dd-list.is-sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; max-width: none; max-height: 72svh; border-radius: 16px 16px 0 0; padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateY(100%); transition: transform .3s var(--ease-out), opacity .2s; }
.dd-list.is-sheet.is-open { transform: none; }
.dd-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.dd-sheet-head b { font-weight: 550; font-size: 16px; }
.dd-sheet-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--bone-dim); font-size: 18px; cursor: pointer; }
.dd-list.is-sheet .dd-opt { min-height: 48px; font-size: 16px; }
.dd-list.is-sheet .dd-search input { font-size: 16px !important; }
/* dark contexts keep cream text */
.scan-top .dd-btn, .mnav .dd-btn { color: var(--cream); }

/* ==========================================================================
   Dashboard inputs: underline style like the main app
   ========================================================================== */
.tbar { gap: 14px 22px; align-items: end; }
.tbar-search { height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; transition: border-color .25s; }
.tbar-search input { font-size: 16px; }
.tbar-region { height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; min-width: 170px; }
.tbar-region:focus-within, .tbar-region:has(.dd.is-open) { border-color: var(--accent); }
.tbar-region .dd-btn { height: 44px; border: 0 !important; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tbar-btn { height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.tbar-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); }
.tbar-icon { width: 40px; height: 40px; }
.dash .scan-top .dd-btn { height: 40px; }

/* ==========================================================================
   Tables everywhere: history + scanner get the full-height scroll treatment
   ========================================================================== */
.dash .hist { max-height: min(64vh, 620px); min-height: 480px; overflow-y: auto; overscroll-behavior: contain; padding-top: 0; }
.dash .hist .hist-day { position: sticky; top: 0; z-index: 2; margin: 0 -18px; padding: 12px 18px 8px; background: var(--ink-2); }
.dash .hist .empty-state { min-height: 440px; }
.scan-hist { margin-top: 22px; }
.scan-tally button { display: grid; gap: 2px; padding: 14px; border-radius: 6px; background: var(--ink-2); border: 1px solid var(--line); border-top: 3px solid var(--c); color: var(--bone); font: inherit; text-align: left; cursor: pointer; transition: background .2s, box-shadow .2s; }
.scan-tally .is-ok { --c: var(--c-done); } .scan-tally .is-dup { --c: var(--c-pending); } .scan-tally .is-bad { --c: var(--c-danger); }
.scan-tally button:hover { background: color-mix(in srgb, var(--c) 8%, var(--ink-2)); }
.scan-tally button.is-on { background: color-mix(in srgb, var(--c) 14%, var(--ink-2)); box-shadow: inset 0 0 0 1px var(--c); }
.scan-tally button b { font-size: 26px; line-height: 1; }
.scan-tally button span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.scan-res { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .04em; }
.scan-res .ti { font-size: 15px; }
.scan-res[data-k="ok"] { color: var(--c-done); } .scan-res[data-k="dup"] { color: var(--c-pending); } .scan-res[data-k="bad"] { color: var(--c-danger); }

/* ==========================================================================
   Dashboard mobile: compact header + bottom tab bar
   ========================================================================== */
.dash-tabbar { display: none; }
@media (max-width: 900px) {
  .dash-tabbar { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 64px; padding: 0 6px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--ink-2) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
  .dash-tabbar a, .dash-tabbar button { display: grid; justify-items: center; align-content: center; gap: 3px; height: 64px; border: 0; background: none; color: var(--bone-dim); font: inherit; font-size: 10.5px; letter-spacing: .02em; cursor: pointer; transition: color .2s; }
  .dash-tabbar .ti { font-size: 22px; transition: transform .3s var(--ease-out); }
  .dash-tabbar .is-on { color: var(--accent-text); }
  .dash-tabbar .is-on .ti { transform: translateY(-1px); }
  .dash-tabbar .is-main { position: relative; }
  .dash-tabbar .is-main .ti { width: 52px; height: 52px; display: grid; place-items: center; margin-top: -26px; border-radius: 16px; background: var(--accent); color: var(--on-accent); font-size: 24px; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 0 5px var(--ink); }
  .dash-tabbar .is-main span { color: var(--bone); }
  .dash-main { padding-bottom: 100px !important; }
  .dash-burger { display: none !important; }
  .dash-top { gap: 10px; }
  .dash-new.btn-sm { width: 40px; height: 40px; padding: 0 !important; font-size: 0 !important; justify-content: center; }
  .dash-new .ti { font-size: 20px !important; }
  .notif-btn, .dash-avatar { width: 40px; height: 40px; }
  .dash-title { font-size: 26px; }
  .dash-crumb { font-size: 9px; }
  .dash-side { z-index: 60; }
  .scan-cam { height: min(60svh, 480px); }
}
/* empty tables fit the screen; tabs scroll with a fade; toolbar on one row */
.dtable:has(.empty-row) { min-width: 0 !important; table-layout: fixed; }
@media (max-width: 640px) {
  .dtable:has(.empty-row) thead th:nth-child(n+3) { display: none; }
  .dash-body .evs-tabs { gap: 18px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; }
  .dash-body .evs-tab { scroll-snap-align: start; font-size: 14px; }
  .dash-body .evs-tabs.is-end { -webkit-mask-image: none; mask-image: none; }
  .tbar { flex-wrap: nowrap; gap: 10px; }
  .tbar-search { flex: 1; width: auto; min-width: 0; }
  .tbar-region { min-width: 0; flex: 0 1 120px; }
  .tbar-btn { padding: 0; width: 40px; justify-content: center; font-size: 0; }
  .tbar-btn .ti { font-size: 18px; }
  .tbar-filter .tbar-pop { left: auto; right: 0; }
  .tbar .tbar-sp { display: none; }
}

/* ==========================================================================
   Category chips: events page always, every category strip on phones
   ========================================================================== */
.cidx--sm, #occasions .cidx { --chip-h: 46px; }
.cidx--sm { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 calc(-1 * var(--gutter)) !important; padding: 4px var(--gutter) 8px !important; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 48px), transparent); }
.cidx--sm::-webkit-scrollbar { display: none; }
.cidx--sm .cidx-item { align-items: center; gap: 0; height: var(--chip-h); padding: 0 14px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2); scroll-snap-align: start; opacity: 1 !important; transform: none !important; transition: border-color .25s, background .25s; }
.cidx--sm .cidx-thumb { width: 34px !important; border-radius: 50% !important; margin-right: 10px !important; }
.cidx--sm .cidx-word { font-family: var(--f-sans, inherit); font-weight: 550; font-variation-settings: normal; text-transform: none; font-size: 15px !important; line-height: 1; letter-spacing: 0; color: var(--bone); -webkit-text-stroke: 0; background: none; white-space: nowrap; -webkit-text-fill-color: currentColor; }
.cidx--sm .cidx-word::before { display: none; }
.cidx--sm .cidx-n { margin: 0 0 0 8px; padding: 2px 7px; border-radius: 10px; background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent)); font-size: 11px; }
.cidx--sm .cidx-item:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.cidx--sm .cidx-item[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.cidx--sm .cidx-item[aria-pressed="true"] .cidx-word { color: var(--on-accent); -webkit-text-fill-color: currentColor; }
.cidx--sm .cidx-item[aria-pressed="true"] .cidx-n { background: linear-gradient(rgba(23, 17, 11, .15), rgba(23, 17, 11, .15)); color: var(--on-accent); }
.cidx--sm .cidx-item[aria-pressed="true"] .cidx-thumb { box-shadow: 0 0 0 2px var(--on-accent); }
@media (max-width: 640px) {
  #occasions .cidx { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 calc(-1 * var(--gutter)) 18px !important; padding: 4px var(--gutter) 8px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 48px), transparent); }
  #occasions .cidx::-webkit-scrollbar { display: none; }
  #occasions .cidx-item { align-items: center; gap: 0; height: 44px; padding: 0 12px 0 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2); opacity: 1 !important; transform: none !important; }
  #occasions .cidx-thumb { width: 32px !important; border-radius: 50% !important; margin-right: 8px !important; }
  #occasions .cidx-word { font-family: var(--f-sans, inherit); font-weight: 550; font-variation-settings: normal; text-transform: none; font-size: 14px !important; line-height: 1; color: var(--bone); -webkit-text-stroke: 0; background: none; white-space: nowrap; -webkit-text-fill-color: currentColor; }
  #occasions .cidx-word::before { display: none; }
  #occasions .cidx-n { margin: 0 0 0 6px; font-size: 10px; }
  #occasions .cidx-item[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
  #occasions .cidx-item[aria-pressed="true"] .cidx-word, #occasions .cidx-item[aria-pressed="true"] .cidx-n { color: var(--on-accent); -webkit-text-fill-color: currentColor; }
}

/* ==========================================================================
   Dashboard: one corner radius for every frame (sidebar keeps its own)
   ========================================================================== */
.dash-body { --r-frame: 14px; }
.dash-main :is(.dcard, .ov-kpi, .ov-card, .vb, .set-nav, .set-sec, .scan-cam, .scan-card, .scan-tally button, .scan-wait, .published, .kpi, .door-stage, .create-step, .panel, .kpis > div, .sales-kpis .dcard, .hist2, .set-save, .tbar-pop, .scan-test, .door-card, .occ-panel, .manage-head),
.dash-body :is(.notif-pop, .dd-list:not(.is-sheet), .cdlg-panel) { border-radius: var(--r-frame) !important; }
.dash .dcard--flush .table-scroll { border: 0; border-radius: 0; }
.dash .dcard--flush { border-radius: var(--r-frame) !important; }

/* ==========================================================================
   Settings: sub-pages
   ========================================================================== */
.set-grid { grid-template-columns: 260px minmax(0, 1fr); }
.set-nav { gap: 4px; padding: 8px; top: 24px; }
.set-nav a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; }
.set-nav a > .ti:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(color-mix(in srgb, var(--bone) 6%, transparent), color-mix(in srgb, var(--bone) 6%, transparent)); font-size: 17px; }
.set-nav a span { display: grid; gap: 2px; min-width: 0; }
.set-nav a b { font-weight: 500; font-size: 14.5px; color: var(--bone); }
.set-nav a small { font-size: 12px; color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-nav-go { font-size: 16px; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .3s var(--ease-out); }
.set-nav a:hover .set-nav-go { opacity: .5; transform: none; }
.set-nav a[aria-current="page"] { background: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); }
.set-nav a[aria-current="page"] > .ti:first-child { background: var(--accent); color: var(--on-accent); }
.set-nav a[aria-current="page"] .set-nav-go { opacity: 1; transform: none; color: var(--accent-text); }
.set-body { align-content: start; }
.set-sec { min-height: 420px; align-content: start; }
.set-sec[hidden] { display: none !important; }
.set-sec.is-entering { animation: viewIn .4s var(--ease-out) both; }
.set-sec header { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.set-sec header :is(h2, h3) { font-size: 20px; }
.set-save { position: static; }
@media (max-width: 900px) {
  .set-grid { grid-template-columns: 1fr; }
  .set-nav { display: flex; overflow-x: auto; padding: 6px; gap: 6px; scrollbar-width: none; }
  .set-nav a { flex: none; grid-template-columns: 28px auto; padding: 6px 12px 6px 6px; }
  .set-nav a > .ti:first-child { width: 28px; height: 28px; font-size: 15px; }
  .set-nav a small, .set-nav-go { display: none; }
  .set-sec { min-height: 0; }
}

/* ==========================================================================
   Operational history: ledger timeline
   ========================================================================== */
.hist2 { max-height: min(68vh, 680px); min-height: 480px; overflow-y: auto; overscroll-behavior: contain; padding: 0 !important; }
.hl-day { display: grid; grid-template-columns: 110px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.hl-day:last-child { border-bottom: 0; }
.hl-stamp { position: sticky; top: 0; align-self: start; display: grid; justify-items: center; gap: 2px; margin: 16px 0 16px 16px; padding: 12px 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--ink-2)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); text-align: center; z-index: 2; }
.hl-stamp::before { content: ""; position: absolute; left: 10px; right: 10px; top: -1px; height: 4px; border-radius: 0 0 4px 4px; background: var(--accent); }
.hl-stamp-w { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.hl-stamp b { font-size: 34px; font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.hl-stamp-m { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.hl-stamp-n { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); width: 100%; font-size: 9.5px; color: var(--bone-dim); }
.hl-rail { position: relative; padding: 16px 18px 16px 0; }
.hl-slip { position: relative; display: grid; grid-template-columns: 74px 22px minmax(0, 1fr); align-items: start; animation: viewIn .45s var(--ease-out) both; animation-delay: calc(var(--i) * 30ms); }
.hl-slip + .hl-slip { margin-top: 10px; }
.hl-slip::before { content: ""; position: absolute; left: 84px; top: 0; bottom: -10px; width: 2px; background: var(--line); }
.hl-slip:last-child::before { bottom: 50%; }
.hl-slip:first-child::before { top: 22px; }
.hl-time { display: grid; justify-items: end; gap: 2px; padding: 14px 10px 0 0; }
.hl-time b { font-size: 13px; font-weight: 500; }
.hl-time span { font-size: 11px; color: var(--bone-dim); white-space: nowrap; }
.hl-node { position: relative; z-index: 1; width: 12px; height: 12px; margin: 18px 0 0 4px; border-radius: 50%; background: var(--ink-2); border: 2px solid var(--kc, var(--bone-dim)); box-shadow: 0 0 0 4px var(--ink-2); }
.hl-slip[data-kind="event"] { --kc: var(--c-progress); }
.hl-slip[data-kind="sale"] { --kc: var(--c-done); }
.hl-slip[data-kind="door"] { --kc: var(--accent); }
.hl-slip[data-kind="account"] { --kc: var(--st-refunded); }
.hl-slip[data-kind="system"] { --kc: var(--bone-dim); }
.hl-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "av who meta" "av act act"; align-items: center; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--kc, var(--line)); border-radius: 12px; background: linear-gradient(color-mix(in srgb, var(--bone) 2.5%, transparent), color-mix(in srgb, var(--bone) 2.5%, transparent)); transition: border-color .25s, background .25s, translate .3s var(--ease-out); }
.hl-card:hover { background: linear-gradient(color-mix(in srgb, var(--bone) 5%, transparent), color-mix(in srgb, var(--bone) 5%, transparent)); translate: 2px 0; }
.hl-av { grid-area: av; position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, hsl(var(--h) 55% 62%), hsl(calc(var(--h) + 40) 50% 42%)); color: #fff; font-weight: 650; font-size: 14px; letter-spacing: .02em; }
.hl-av .wordmark-mark { --logo: 20px; width: calc(var(--logo) * .84); height: calc(var(--logo) * 1.02); }
.hl-av .wordmark-mark i, .hl-av .wordmark-mark b { background: #17110b; }
.hl-slip[data-kind="system"] .hl-av { background: var(--accent); }
.hl-badge { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-2); color: var(--kc, var(--bone)); font-size: 13px; box-shadow: 0 0 0 2px var(--ink-2); border: 1px solid var(--line); }
.hl-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.hl-who b { font-weight: 550; font-size: 14.5px; }
.hl-who .mono { font-size: 11.5px; color: var(--bone-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.hl-you { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); color: var(--accent-text); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; }
.hl-act { grid-area: act; margin: 0; font-size: 14px; color: var(--bone-dim); line-height: 1.5; }
.hl-act em { font-style: normal; font-weight: 550; color: var(--kc, var(--bone)); }
.hl-slip[data-kind="system"] .hl-act em, .hl-slip[data-kind="door"] .hl-act em { color: var(--accent-text); }
.hl-ev { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 2px 9px 2px 3px; border-radius: 20px; border: 1px solid var(--line); color: var(--bone); font-size: 12.5px; vertical-align: 1px; transition: border-color .2s; }
.hl-ev:hover { border-color: var(--accent); }
.hl-ev-dot { width: 16px; height: 16px; border-radius: 50%; background-size: cover !important; }
.hl-meta { grid-area: meta; justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; border: 1px dashed var(--line); font-size: 11px; color: var(--bone-dim); white-space: nowrap; }
.hl-meta .ti { font-size: 13px; }
.hist2 .empty-state { min-height: 460px; }
@media (max-width: 900px) { .hl-card { grid-template-areas: "av who" "av act" "meta meta"; grid-template-columns: 42px minmax(0, 1fr); } .hl-meta { justify-self: start; margin-top: 6px; } }
@media (max-width: 640px) {
  .hl-day { grid-template-columns: 1fr; }
  .hl-stamp { position: sticky; top: 0; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 0; border-width: 0 0 1px; }
  .hl-stamp::before { display: none; }
  .hl-stamp b { font-size: 20px; }
  .hl-stamp-n { display: none; }
  .hl-rail { padding: 12px 12px 14px 0; }
  .hl-slip { grid-template-columns: 56px 20px minmax(0, 1fr); }
  .hl-slip::before { left: 65px; }
  .hl-time span { display: none; }
  .hl-meta { white-space: normal; font-size: 10px; }
}

/* ==========================================================================
   Events page filters: normal-size input text
   ========================================================================== */
.fc-cell input[type="search"], .fc-select select, .fc-cell .dd-btn { font-size: 15.5px !important; height: 44px !important; }
.fc-label { font-size: 10px; }
.fconsole { gap: 18px clamp(18px, 2.2vw, 32px) !important; }
.fc-price input[type="range"] { height: 44px; }
.hsearch .dd-btn { font-size: 14px !important; height: 20px !important; }
.mnav-search .dd-btn { font-size: 16px !important; height: 24px !important; }
.field .dd-btn { font-size: 16px !important; }
.hl-who .mono, .hl-meta { text-transform: none !important; letter-spacing: .02em !important; }
@media (min-width: 641px) { .cidx--sm { --chip-h: 40px; } .cidx--sm .cidx-word { font-size: 14px !important; } .cidx--sm .cidx-thumb { width: 28px !important; margin-right: 8px !important; } }

/* ==========================================================================
   Venues page — two per row, espresso cards
   ========================================================================== */
.vn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); padding-bottom: var(--sec-y); }
.vn { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; color: var(--cream); scroll-margin-top: 120px;
  background: radial-gradient(120% 50% at 100% 100%, rgba(245, 198, 79, .1), transparent 60%), linear-gradient(165deg, var(--espresso-1), var(--espresso-2));
  box-shadow: 0 30px 50px -36px rgba(0, 0, 0, .8); transition: translate .5s var(--ease-out), box-shadow .5s; }
.vn:hover { translate: 0 -4px; box-shadow: 0 40px 60px -36px rgba(0, 0, 0, .85); }
.vn:target { box-shadow: 0 0 0 3px var(--accent), 0 30px 50px -36px rgba(0, 0, 0, .8); }
.vn-art { position: relative; aspect-ratio: 16 / 7.5; display: flex; justify-content: space-between; align-items: flex-end; padding: 18px 20px; isolation: isolate; overflow: hidden; }
.vn-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 11%), linear-gradient(0deg, var(--espresso-1), transparent 70%); transition: transform 1s var(--ease-out); }
.vn:hover .vn-art::after { transform: translateY(-6%); }
.vn-cap { display: flex; align-items: flex-end; gap: 10px; }
.vn-cap b { font-weight: 800; font-variation-settings: "wdth" 96; font-size: clamp(54px, 5vw, 76px); line-height: .78; letter-spacing: -.04em; color: var(--cream); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.4px var(--cream); transition: color .5s, -webkit-text-stroke-color .5s; }
.vn:hover .vn-cap b { color: #f5c64f; -webkit-text-stroke-color: #f5c64f; -webkit-text-fill-color: currentColor; }
.vn-cap .mono { font-size: 10px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.vn-free { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 20px; background: rgba(14, 10, 7, .72); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vn-free i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.vn-body { display: grid; align-content: start; gap: 10px; padding: 18px 20px 20px; }
.vn-loc { margin: 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 233, 218, .55); }
.vn-name { margin: 0; font-weight: 800; font-variation-settings: "wdth" 72; text-transform: uppercase; font-size: clamp(28px, 2.6vw, 38px); line-height: .92; }
.vn-note { margin: 0; color: rgba(243, 233, 218, .7); font-size: 14.5px; line-height: 1.5; }
.vn-feats { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vn-feats li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)); border: 1px solid rgba(243, 233, 218, .12); font-size: 12.5px; color: rgba(243, 233, 218, .85); }
.vn-feats li:first-child { background: #f5c64f; border-color: #f5c64f; color: #17110b; font-weight: 600; }
.vn-feats .ti { font-size: 14px; opacity: .85; }
.vn-shows { display: grid; gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed rgba(243, 233, 218, .18); }
.vn-shows-h { margin: 0 0 2px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #f5c64f; }
.vn-show { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px; margin: 0 -6px; border-radius: 10px; transition: background .2s; }
.vn-show:hover { background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)); }
.vn-show-art { position: relative; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; }
.vn-show-art .poster, .vn-show-art .poster-art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.vn-show-art .poster-title, .vn-show-art .poster-glyph, .vn-show-art .poster-meta, .vn-show-art .poster-foot { display: none !important; }
.vn-show-t { display: grid; gap: 1px; min-width: 0; }
.vn-show-t b { font-weight: 550; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-show-t .mono { font-size: 10.5px; color: rgba(243, 233, 218, .55); letter-spacing: .04em; }
.vn-show-p { font-size: 13px; font-weight: 600; color: #f5c64f; white-space: nowrap; }
.vn-more { justify-self: start; color: var(--cream); font-size: 11px; }
.vn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(243, 233, 218, .12); }
.vn-price { margin: 0; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 6px; }
.vn-price b { font-size: 24px; font-weight: 650; color: #f5c64f; }
.vn-price span { font-size: 13px; color: rgba(243, 233, 218, .6); }
.vn-price em { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: rgba(243, 233, 218, .55); }
.vn-foot .btn { background: #f5c64f; color: #17110b; }
.vn-grid .venue-empty { grid-column: 1 / -1; }
@media (max-width: 860px) { .vn-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .vn-art { aspect-ratio: 16 / 9; } .vn-body { padding: 16px; } }

/* ==========================================================================
   Dashboard venues: add form + availability dialog
   ========================================================================== */
.evs-head .btn-sm { flex: none; }
.vf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.vf { padding: clamp(18px, 2vw, 26px) !important; }
.vf-head { display: grid; gap: 6px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.vf-head h3 { margin: 6px 0 0; font-size: 22px; font-weight: 600; }
.vf-head p { margin: 0; font-size: 14px; }
.vf-head .link-arrow { justify-self: start; font-size: 11px; }
.vf .sp-form { gap: 20px 22px; }
.vf .set-toggle { border-top: 1px solid var(--line); padding-top: 16px; }
.vf-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.vf-side { position: sticky; top: 24px; padding: 18px; border-radius: var(--r-frame, 14px); color: var(--cream); background: linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); }
.vf-side .eyebrow { margin: 0 0 10px; color: #f5c64f; }
.vf-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.vf-steps li { counter-increment: s; position: relative; padding-left: 34px; font-size: 14px; line-height: 1.5; color: rgba(243, 233, 218, .75); }
.vf-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #f5c64f; color: #17110b; font-family: var(--f-mono); font-size: 11px; font-weight: 600; }
.vf-steps b { color: var(--cream); font-weight: 550; }
.vd-add { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 14px; margin-top: 8px; }
.vd-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 60px; max-height: 200px; overflow-y: auto; padding: 12px 0; border-block: 1px solid var(--line); margin-top: 12px; }
.vd-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--c-danger) 40%, var(--line)); border-radius: 8px; background: linear-gradient(color-mix(in srgb, var(--c-danger) 8%, transparent), color-mix(in srgb, var(--c-danger) 8%, transparent)); color: var(--bone); font: inherit; font-size: 13px; cursor: pointer; }
.vd-chip .ti { font-size: 13px; opacity: .6; }
.vd-chip:hover { border-color: var(--c-danger); }
.vd-none { margin: 0; font-size: 14px; }
.vn-enq-h { margin-top: 26px; }
.dash .vn-enq { min-height: 300px; }
@media (max-width: 1000px) { .vf-grid { grid-template-columns: 1fr; } .vf-side { position: static; } }
@media (max-width: 640px) { .vd-add { grid-template-columns: 1fr 1fr; } .vd-add .btn { grid-column: 1 / -1; } }
.vn-art { aspect-ratio: auto; height: clamp(150px, 13vw, 200px); }
.vn-body { display: flex; flex-direction: column; gap: 10px; }
.vn-foot { margin-top: auto; }
.vn-shows { margin-bottom: 6px; }
@media (max-width: 640px) { .vn-art { height: 150px; } }
.dash-body .evs-head:has(> .btn) { flex-wrap: nowrap; align-items: flex-end; }
.dash-body .evs-head:has(> .btn) .evs-tabs { width: auto; flex: 1; min-width: 0; }
@media (max-width: 640px) { .dash-body .evs-head:has(> .btn) { flex-wrap: wrap; } .dash-body .evs-head:has(> .btn) .evs-tabs { width: 100%; flex-basis: 100%; } }

/* ==========================================================================
   Currency picker
   ========================================================================== */
.cur { position: relative; }
.cur-btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--glass-soft); color: inherit; font: inherit; cursor: pointer; text-shadow: none; transition: border-color .25s; }
.cur-btn:hover, .cur-btn[aria-expanded="true"] { border-color: var(--accent); }
.cur-btn b { font-weight: 650; font-size: 15px; color: var(--accent-text); }
.cur-btn .mono { font-size: 11px; letter-spacing: .1em; }
.cur-btn .ti { font-size: 14px; opacity: .6; transition: transform .3s; }
.cur-btn[aria-expanded="true"] .ti { transform: rotate(180deg); }
.cur-pop { position: absolute; z-index: 70; top: calc(100% + 10px); right: 0; width: 300px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); color: var(--bone); text-shadow: none; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); animation: viewIn .25s var(--ease-out) both; }
.cur-head { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 6px 10px; }
.cur-head b { font-weight: 550; font-size: 14px; }
.cur-head .mono { font-size: 9.5px; letter-spacing: .08em; color: var(--bone-dim); }
.cur-list { display: grid; gap: 2px; }
.cur-opt, .cur-auto { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--bone); font: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.cur-opt:hover, .cur-auto:hover { background: linear-gradient(color-mix(in srgb, var(--bone) 6%, transparent), color-mix(in srgb, var(--bone) 6%, transparent)); }
.cur-sym { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(color-mix(in srgb, var(--bone) 7%, transparent), color-mix(in srgb, var(--bone) 7%, transparent)); font-weight: 650; font-size: 14px; }
.cur-name { display: grid; gap: 1px; min-width: 0; }
.cur-name b, .cur-auto b { font-weight: 550; font-size: 14px; }
.cur-name small, .cur-auto small { font-size: 12px; color: var(--bone-dim); }
.cur-rate { font-size: 10.5px; color: var(--bone-dim); }
.cur-opt > .ti, .cur-auto > .ti:last-child { font-size: 16px; color: var(--accent-text); opacity: 0; }
.cur-opt[aria-pressed="true"], .cur-auto[aria-pressed="true"] { background: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); }
.cur-opt[aria-pressed="true"] .cur-sym { background: var(--accent); color: var(--on-accent); }
.cur-opt[aria-pressed="true"] > .ti, .cur-auto[aria-pressed="true"] > .ti:last-child { opacity: 1; }
.cur-auto { grid-template-columns: 36px minmax(0, 1fr) 18px; margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 12px; }
.cur-auto > .ti:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(color-mix(in srgb, var(--bone) 7%, transparent), color-mix(in srgb, var(--bone) 7%, transparent)); font-size: 17px; }
.cur-auto span { display: grid; gap: 1px; }
.cur-note { display: flex; align-items: center; gap: 6px; margin: 10px 6px 4px; font-size: 10.5px; color: var(--bone-dim); }
.cur-note .ti { color: var(--accent-text); }
html.is-reprice body { opacity: .5; transition: opacity .15s; }
.mnav-cur { display: grid; gap: 8px; }
.mnav-cur > .mono { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 233, 218, .55); }
.mnav-cur > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mnav-cur button { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border: 1px solid rgba(243, 233, 218, .18); border-radius: 10px; background: none; color: var(--cream); font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; }
.mnav-cur button small { font-family: var(--f-mono); font-size: 9px; font-weight: 400; letter-spacing: .08em; opacity: .7; }
.mnav-cur button[aria-pressed="true"] { background: #f5c64f; border-color: #f5c64f; color: #17110b; }
.foot-cur { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; background: none; color: inherit; font-size: 11px; cursor: pointer; }
.foot-cur:hover { border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 760px) { .site-header .cur { display: none; } }
@media (max-width: 1180px) and (min-width: 761px) { .cur-btn .mono { display: none; } }

/* ==========================================================================
   Checkout hold + pay currency
   ========================================================================== */
.hold { --hc: var(--c-done); position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 16px; padding: 12px 14px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hc) 40%, var(--line)); background: linear-gradient(color-mix(in srgb, var(--hc) 8%, transparent), color-mix(in srgb, var(--hc) 8%, transparent)); overflow: hidden; animation: viewIn .4s var(--ease-out) both; }
.hold[data-level="warn"] { --hc: var(--c-pending); }
.hold[data-level="danger"] { --hc: var(--c-danger); }
.hold-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--hc); color: #fff; font-size: 18px; }
.hold-txt { display: grid; gap: 2px; min-width: 0; }
.hold-txt b { font-weight: 600; font-size: 14.5px; }
.hold-txt b .mono { color: var(--hc); font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.hold-txt small { font-size: 12px; color: var(--bone-dim); line-height: 1.4; }
.hold-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(color-mix(in srgb, var(--hc) 15%, transparent), color-mix(in srgb, var(--hc) 15%, transparent)); }
.hold-bar i { display: block; height: 100%; background: var(--hc); transform-origin: left; transition: transform 1s linear, background .3s; }
.hold[data-level="danger"] .hold-ico { animation: holdPulse 1s ease-in-out infinite; }
@keyframes holdPulse { 50% { transform: scale(.9); } }
.pay-cur { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--bone-dim); }
.pay-cur .ti { font-size: 15px; margin-top: 2px; color: var(--accent-text); }
.pay-cur b { color: var(--bone); font-weight: 600; }
.tx-paid { font-size: 11px; }
.tx-cash.tx-channel { --channel-color: #b8a5dc; color: var(--channel-color); }
.tx-channel[data-channel="website"] { --channel-color: #86b9c9; }
:root[data-theme="light"] .tx-channel { --channel-color: #6940a3; }
:root[data-theme="light"] .tx-channel[data-channel="website"] { --channel-color: #166681; }

/* ==========================================================================
   Checkout steps
   ========================================================================== */
.co-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.co-steps li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 11.5px; color: var(--bone-dim); }
.co-steps li::before { content: ""; position: absolute; top: 13px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--line); }
.co-steps li:first-child::before { display: none; }
.co-steps li.is-done::before, .co-steps li.is-on::before { background: var(--accent); }
.co-steps b { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); background: var(--ink-2); font-family: var(--f-mono); font-size: 12px; font-weight: 500; transition: background .3s, border-color .3s, color .3s; }
.co-steps .is-on b { border-color: var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.co-steps .is-done b { border-color: var(--accent); color: var(--accent-text); }
.co-steps .is-on span { color: var(--bone); font-weight: 550; }
.co-body { display: grid; gap: 14px; animation: viewIn .35s var(--ease-out) both; }
.co-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--bone-dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.co-back:hover { color: var(--accent-text); }
.co-lines { list-style: none; margin: 0; padding: 0; display: grid; }
.co-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.co-lines li > span:first-child { display: grid; gap: 2px; }
.co-lines small { font-size: 12.5px; color: var(--bone-dim); }
.co-lines .mono { font-size: 13px; color: var(--bone-dim); white-space: nowrap; }
.co-sub { margin-top: 6px !important; }
.co-details { display: grid; gap: 14px; }
.co-review { display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: linear-gradient(color-mix(in srgb, var(--bone) 4%, transparent), color-mix(in srgb, var(--bone) 4%, transparent)); border: 1px solid var(--line); }
.co-ev { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.co-ev-art { position: relative; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; }
.co-ev-art .poster, .co-ev-art .poster-art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.co-ev-art .poster-title, .co-ev-art .poster-glyph, .co-ev-art .poster-meta, .co-ev-art .poster-foot { display: none !important; }
.co-ev > span:last-child { display: grid; gap: 2px; min-width: 0; }
.co-ev b { font-weight: 600; font-size: 15px; }
.co-ev .mono { font-size: 10.5px; letter-spacing: .04em; color: var(--bone-dim); }
.co-who { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; }
.co-who > span { display: grid; gap: 2px; }
.co-who b { font-weight: 550; font-size: 14px; }
.co-who .mono { font-size: 12px; color: var(--bone-dim); text-transform: none; }
.co-pay { border: 0; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.co-pay legend { margin-bottom: 8px; }
.co-pay label { cursor: pointer; }
.co-pay input { position: absolute; opacity: 0; pointer-events: none; }
.co-pay span { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; transition: border-color .2s, background .2s; }
.co-pay .ti { font-size: 22px; }
.co-pay input:checked + span { border-color: var(--accent); background: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); box-shadow: inset 0 0 0 1px var(--accent); }
.co-pay input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.summary .guest-note { margin: 0; }

/* ==========================================================================
   Venues page: tighter rhythm
   ========================================================================== */
.venue-list { gap: 0 !important; padding-bottom: var(--sec-y); }
.venue-block { gap: 18px clamp(16px, 2vw, 32px) !important; padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--line); align-items: center; }
.venue-block:first-child { border-top: 0; padding-top: 8px; }
.venue-hero { aspect-ratio: 16 / 10 !important; max-height: 340px; grid-column: 1 / span 5 !important; }
.venue-copy { grid-column: 7 / span 6 !important; gap: 10px !important; align-content: center !important; }
.venue-name, .venue-copy h2 { font-size: clamp(34px, 3.6vw, 56px) !important; }
.venue-copy .lede { font-size: clamp(17px, 1.4vw, 21px); }
.venue-copy .btn { justify-self: start; padding: 11px 18px; font-size: 14px; }
.venue-block .rank-list { margin-top: 4px; }
.venue-block .rank-list > .empty { min-height: 0; padding: 18px 0 !important; grid-template-columns: auto auto; justify-content: start; }
.venue-block .rank-list > .empty .art { width: 64px; margin: 0; }
.venue-block .rank-list > .empty .es-title { font-size: 15px; }
@media (max-width: 760px) { .venue-hero, .venue-copy { grid-column: 1 / -1 !important; } .venue-hero { aspect-ratio: 16 / 9 !important; } }

/* ==========================================================================
   Settings: frameless nested pages
   ========================================================================== */
.set-top { display: flex; justify-content: flex-end; margin: -6px 0 18px; }
.set-verify { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 10px; color: var(--accent-text); font-size: 13.5px; }
.set-verify .ti { color: var(--accent); }
.set-verify.is-done { border-color: color-mix(in srgb, var(--c-done) 50%, transparent); color: var(--c-done); }
.set-grid { grid-template-columns: 200px minmax(0, 1fr) !important; gap: clamp(24px, 4vw, 64px) !important; }
.dash-main .set-nav { position: sticky; top: 24px; display: grid; gap: 4px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.set-nav a { display: flex !important; align-items: center; gap: 10px; padding: 10px 0 !important; border-radius: 0 !important; background: none !important; color: var(--bone-dim); font-size: 15.5px; }
.set-nav a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; transition: transform .25s, opacity .25s; }
.set-nav a:hover { color: var(--bone); }
.set-nav a[aria-current="page"] { color: var(--accent-text); font-weight: 550; }
.set-nav a[aria-current="page"]::before { opacity: 1; transform: scale(1.4); background: var(--accent); }
.dash-main .set-sec { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0; }
.set-sec header { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 22px !important; }
.set-sec header :is(h2, h3) { font-size: 22px !important; font-weight: 600; }
.set-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.set-h { display: flex; align-items: center; gap: 6px; margin: 34px 0 14px; font-size: 17px; font-weight: 600; }
.set-h .ti { font-size: 14px; color: var(--accent); }
.set-row + .set-row { margin-top: 22px !important; }
.set-cover { position: relative; height: clamp(130px, 14vw, 190px); margin-bottom: 64px; border-radius: 14px; background: radial-gradient(60% 120% at 80% 0%, rgba(245, 198, 79, .35), transparent 60%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 16px), linear-gradient(135deg, #2a1d12, #110b07 70%); }
.set-av { position: absolute; left: 28px; bottom: -48px; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #f5c64f, #d99a1c); color: #17110b; font-size: 34px; font-weight: 700; box-shadow: 0 0 0 6px var(--ink); }
.set-av-edit { position: absolute; right: 2px; bottom: 2px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink-2); color: var(--bone); box-shadow: 0 0 0 2px var(--ink); font-size: 15px; cursor: pointer; }
.set-ok { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-family: var(--f-sans, inherit); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--c-done); }
.set-phone { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: end; }
.set-phone .dd-btn { height: 44px; }
.set-handle { position: relative; }
.set-handle input { padding-right: 40px !important; }
.set-copy { position: absolute; right: 0; bottom: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--bone-dim); font-size: 17px; cursor: pointer; }
.set-copy:hover { color: var(--accent-text); }
.set-check { margin-top: 22px; font-size: 14.5px; }
.set-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.set-soc .set-toggle { padding: 0 0 6px; border: 0; }
.set-soc-in { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.set-soc-in .mono { font-size: 12px; color: var(--bone-dim); white-space: nowrap; }
.set-soc-in input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; outline: none; color: var(--bone); font: inherit; font-size: 15px; }
.set-soc-in:focus-within { border-color: var(--accent); }
.set-hint { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 11px; color: var(--bone-dim); }
.set-team-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.set-team-bar .tbar-search { width: min(380px, 100%); }
.set-empty { min-height: 380px; }
.set-empty .es-sub { max-width: 46ch; }
.set-empty-add { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); border: 0; font-size: 12px; }
.team-grid { display: grid; gap: 10px; }
.team-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.team-who { display: grid; gap: 2px; min-width: 0; }
.team-who b { font-weight: 550; }
.team-who .mono { font-size: 12px; color: var(--bone-dim); text-transform: none; letter-spacing: 0; }
.team-role { font-size: 11px; letter-spacing: .06em; color: var(--bone-dim); }
.team-st { font-size: 11px; color: var(--c-pending); }
.team-st[data-st="active"] { color: var(--c-done); }
.set-sec-list { display: grid; }
.set-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.set-line > span:nth-child(2) { display: grid; gap: 2px; }
.set-line b { font-weight: 550; }
.set-line small { font-size: 13px; }
.set-line-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(color-mix(in srgb, var(--bone) 6%, transparent), color-mix(in srgb, var(--bone) 6%, transparent)); font-size: 19px; }
.set-toggle--bare { padding: 0; border: 0; }
.dash-main .set-save { margin-top: 30px; padding: 16px 0 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; justify-content: flex-start; flex-direction: row-reverse; }
@media (max-width: 900px) {
  .set-grid { grid-template-columns: 1fr !important; }
  .dash-main .set-nav { position: static; display: flex !important; overflow-x: auto; gap: 18px; scrollbar-width: none; border-bottom: 1px solid var(--line) !important; }
  .set-nav a { flex: none; white-space: nowrap; }
  .set-nav a::before { display: none; }
  .set-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .set-social { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .team-role, .team-st { display: none; }
  .set-team-bar { flex-wrap: wrap; }
}

/* ==========================================================================
   Notifications: clickable rows; history focus highlight
   ========================================================================== */
.notif-list li { display: block !important; padding: 0 !important; }
.notif-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; color: var(--bone-dim); transition: background .2s; }
.notif-item:hover, .notif-item:focus-visible { background: linear-gradient(color-mix(in srgb, var(--bone) 5%, transparent), color-mix(in srgb, var(--bone) 5%, transparent)); outline: none; }
.notif-item b { color: var(--bone); font-weight: 550; }
.notif-item.is-new { background: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
.notif-item.is-new .notif-txt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.notif-item time { font-size: 11px; }
.notif-item[data-kind="sale"] .notif-ico { color: var(--c-done); }
.notif-item[data-kind="event"] .notif-ico { color: var(--c-progress); }
.notif-item[data-kind="system"] .notif-ico { color: var(--c-pending); }
.hl-slip.is-focus .hl-card { border-color: var(--accent); background: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); animation: focusPulse 1.2s ease-in-out 2; }
.hl-slip.is-focus .hl-node { background: var(--accent); border-color: var(--accent); }
@keyframes focusPulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 10%, transparent); } }
.ov-empty { display: grid; justify-items: center; gap: 4px; padding: 22px 8px; text-align: center; }
.ov-empty .art { width: 96px; margin-bottom: 6px; }
.ov-empty .es-title { margin: 0; font-size: 15px; font-weight: 550; color: var(--accent-text); }
.ov-empty .es-sub { margin: 0; font-size: 13px; color: var(--bone-dim); }
.ov-table td:has(.ov-empty) { border: 0; }
.side-next--empty { display: grid; justify-items: start; gap: 6px; }
.side-next--empty .art { width: 80px; margin: 0 0 4px; }
.dash-nav b:empty { display: none; }
/* About collage: stay inside its own box, never over the numbers */
.ab-hero { align-items: center; padding-bottom: clamp(40px, 5vw, 72px); }
.ab-collage { height: clamp(300px, 26vw, 380px) !important; max-width: 460px; width: 100%; justify-self: end; isolation: isolate; }
.ab-card { width: 50% !important; }
.ab-card--0 { left: 2% !important; top: 12% !important; }
.ab-card--1 { left: 25% !important; top: 0 !important; }
.ab-card--2 { right: 2% !important; top: 14% !important; }
.ab-stats { position: relative; z-index: 1; background: var(--ink); }
@media (max-width: 900px) { .ab-collage { justify-self: center; } }

/* ==========================================================================
   Create event: frameless nested step pages (rail + preview stay)
   ========================================================================== */
.dash .create-grid { grid-template-columns: 220px minmax(0, 1fr) 330px; gap: clamp(24px, 3vw, 48px); }
.dash .create-step { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.dash .create-step[hidden] { display: none !important; }
.dash .create-step.is-entering { animation: viewIn .4s var(--ease-out) both; }
.dash .create-step .step-legend { margin-bottom: 26px; }
.step-rail { top: 24px !important; }
.step-rail a { border-radius: 10px; }
.co-nav { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
.co-nav-n { margin-right: auto; order: -1; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.co-nav .btn[disabled] { opacity: .4; pointer-events: none; }
@media (max-width: 1100px) {
  .dash .create-grid { grid-template-columns: minmax(0, 1fr); }
  .dash .create-side { grid-column: auto; position: static; }
  .step-rail { display: flex !important; position: static; overflow-x: auto; gap: 6px; scrollbar-width: none; margin-bottom: 8px; }
  .step-rail a { flex: none; grid-template-columns: auto auto; padding: 6px 10px; }
  .step-rail a b { font-size: 20px; }
}
@media (max-width: 900px) {
  .dash .create-grid { grid-template-columns: 1fr; }
  .step-rail { display: flex !important; position: static; overflow-x: auto; gap: 6px; scrollbar-width: none; margin-bottom: 8px; }
  .step-rail a { flex: none; grid-template-columns: auto auto; padding: 6px 10px; }
  .step-rail a b { font-size: 20px; }
}
.dash .create-step textarea { min-height: 110px !important; }

/* ==========================================================================
   Toasts (top-right)
   ========================================================================== */
.toast { display: none !important; }
.toasts { position: fixed; z-index: 400; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast2 { --tc: var(--c-progress); position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 24px; align-items: start; gap: 10px; padding: 12px 12px 14px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--tc); background: var(--ink-2); color: var(--bone); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .15); overflow: hidden; pointer-events: auto; opacity: 0; transform: translateX(24px); transition: opacity .25s, transform .35s var(--ease-out); }
.toast2.is-on { opacity: 1; transform: none; }
.toast2.is-out { opacity: 0; transform: translateX(24px); }
.toast2.is-success { --tc: var(--c-done); } .toast2.is-error { --tc: var(--c-danger); } .toast2.is-info { --tc: var(--accent); }
.toast2-ico { font-size: 20px; color: var(--tc); margin-top: 1px; }
.toast2 p { margin: 0; font-size: 14px; line-height: 1.45; }
.toast2-x { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--bone-dim); cursor: pointer; font-size: 14px; }
.toast2-x:hover { background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent)); color: var(--bone); }
.toast2-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tc); transform-origin: left; animation: toastBar 3.6s linear forwards; opacity: .6; }
.toast2.is-paused .toast2-bar { animation-play-state: paused; }
@keyframes toastBar { to { transform: scaleX(0); } }
@media (max-width: 640px) { .toasts { right: 12px; left: 12px; width: auto; } }

/* ==========================================================================
   Loading: buttons, page bar, rows
   ========================================================================== */
.btn.is-loading, .is-loading.btn, button.is-loading, .pay-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > *, button.is-loading > * { visibility: hidden; }
.btn.is-loading::after, button.is-loading::after, .pay-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--on-accent) var(--on-accent) transparent transparent; animation: spin .7s linear infinite; visibility: visible; }
.btn-ghost.is-loading::after, .link-btn.is-loading::after { border-color: var(--bone) var(--bone) transparent transparent; }
.cdlg-ok--danger.is-loading::after, .cdlg-ok--neutral.is-loading::after { border-color: #fff #fff transparent transparent; }
.pbar { position: fixed; z-index: 500; top: 0; left: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--accent), #e0782f); transform-origin: left; transform: scaleX(0); pointer-events: none; box-shadow: 0 0 10px var(--accent); }
.pbar.is-run { animation: pbarRun 8s cubic-bezier(.1, .7, .2, 1) forwards; }
.pbar.is-done { transform: scaleX(1); opacity: 0; transition: transform .2s, opacity .4s .2s; }
@keyframes pbarRun { 0% { transform: scaleX(0); } 20% { transform: scaleX(.45); } 100% { transform: scaleX(.92); } }
.more-row td { text-align: center; padding: 18px !important; border: 0 !important; }
.more-row { display: block; text-align: center; padding: 18px; }
tr.more-row { display: table-row; }
.more-spin { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.more-spin .ti { animation: spin 1s linear infinite; font-size: 15px; color: var(--accent-text); }
.is-revealed { animation: viewIn .4s var(--ease-out) both; }
.skel { display: grid; gap: 12px; }
.skel i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--bone) 6%, transparent) 25%, color-mix(in srgb, var(--bone) 12%, transparent) 50%, color-mix(in srgb, var(--bone) 6%, transparent) 75%); background-size: 300% 100%; animation: skel 1.2s linear infinite; }
.skel .k { height: 96px; border-radius: 14px; }
.skel .r { height: 54px; }
.skel-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@keyframes skel { to { background-position: -150% 0; } }
@media (max-width: 640px) { .skel-row { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Status dialog (stepwise)
   ========================================================================== */
.steps-panel { width: min(400px, 100%); justify-items: center; text-align: center; gap: 16px; padding: 30px 26px 24px; }
.steps-orb { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.steps-spin { position: absolute; inset: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.steps-ok, .steps-bad { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-size: 32px; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.steps-ok { background: var(--c-done); color: #fff; }
.steps-bad { background: var(--c-danger); color: #fff; }
.steps-panel.is-ok .steps-spin, .steps-panel.is-bad .steps-spin { opacity: 0; }
.steps-panel.is-ok .steps-ok, .steps-panel.is-bad .steps-bad { opacity: 1; transform: none; }
.steps-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; text-align: left; }
.steps-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--bone-dim); opacity: .55; transition: opacity .3s, background .3s; }
.steps-list li span:last-child { display: grid; gap: 1px; }
.steps-list b { font-weight: 550; font-size: 14.5px; }
.steps-list small { font-size: 12px; color: var(--bone-dim); }
.steps-dot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); font-size: 14px; }
.steps-dot .ti { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.steps-list li.is-on { opacity: 1; background: linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); color: var(--bone); }
.steps-list li.is-on .steps-dot { border-color: color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.steps-list li.is-done { opacity: 1; color: var(--bone); }
.steps-list li.is-done .steps-dot { border-color: var(--c-done); background: var(--c-done); color: #fff; animation: none; }
.steps-list li.is-done .steps-dot .ti { opacity: 1; transform: none; }
.steps-done { width: 100%; animation: viewIn .4s var(--ease-out) both; }
.steps-acts { display: grid; gap: 8px; justify-items: center; }
.steps-acts .link-btn { margin-top: 4px; }

/* ==========================================================================
   Stripe-style payment page (demo)
   ========================================================================== */
.pay { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; }
.pay-side { display: grid; justify-content: end; align-content: start; padding: clamp(32px, 8vh, 90px) clamp(24px, 5vw, 80px); background: #f7f8fa; border-right: 1px solid #e3e8ee; }
.pay-side > * { width: min(420px, 100%); }
.pay-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 30px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #697386; }
.pay-back:hover { color: #1a1f36; }
.pay-merchant { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-weight: 550; font-size: 15px; color: #1a1f36; }
.pay-merchant .wordmark-mark { --logo: 20px; width: calc(var(--logo) * .84); height: calc(var(--logo) * 1.02); }
.pay-merchant .wordmark-mark i, .pay-merchant .wordmark-mark b { background: #d99a1c; }
.pay-label { margin: 0; color: #697386; font-size: 15px; }
.pay-total { margin: 2px 0 24px; font-size: 36px; font-weight: 650; letter-spacing: -.02em; }
.pay-ev { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #e3e8ee; }
.pay-ev-art { position: relative; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; }
.pay-ev-art .poster, .pay-ev-art .poster-art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.pay-ev-art .poster-title, .pay-ev-art .poster-glyph, .pay-ev-art .poster-meta, .pay-ev-art .poster-foot { display: none !important; }
.pay-ev > span:last-child { display: grid; gap: 2px; min-width: 0; }
.pay-ev b { font-weight: 600; color: var(--bone); }
.pay-ev .mono { font-size: 11px; color: #697386; letter-spacing: .02em; }
.pay-lines { list-style: none; margin: 0; padding: 0; display: grid; }
.pay-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.pay-lines li > span:first-child { display: grid; gap: 2px; }
.pay-lines small { font-size: 12.5px; color: var(--bone-dim); }
.pay-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-weight: 600; }
.pay-tot b { font-size: 18px; }
.pay-fx { margin: 12px 0 0; font-size: 11px; color: #697386; }
.pay-main { display: grid; justify-content: start; align-content: start; padding: clamp(32px, 8vh, 90px) clamp(24px, 5vw, 80px); background: #fff; }
.pay-form { width: min(420px, 100%); display: grid; gap: 16px; }
.pay-hold { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #effaf3; color: #13804a; font-size: 13.5px; }
.pay-hold[data-level="warn"] { background: #fff7e6; color: #92400e; }
.pay-hold[data-level="danger"] { background: #fef2f2; color: #b42318; }
.pay-h { margin: 6px 0 0; font-size: 20px; font-weight: 600; }
.pay-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-wallet { height: 46px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 6px; background: #000; color: #fff; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
.pay-wallet .ti { font-size: 20px; }
.pay-or { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: 11px; color: #697386; letter-spacing: .04em; text-transform: none; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; border-top: 1px solid #e3e8ee; }
.pay-f { display: grid; gap: 6px; position: relative; }
.pay-f > span:first-child { font-size: 13px; font-weight: 500; color: #3c4257; }
.pay-f input, .pay-f .dd-btn { height: 42px !important; padding: 0 12px !important; border: 1px solid #e0e6eb !important; border-radius: 6px !important; background: #fff !important; color: #1a1f36 !important; font: inherit; font-size: 15px !important; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); outline: none; }
.pay-f input:focus { border-color: #635bff !important; box-shadow: 0 0 0 3px rgba(99, 91, 255, .2); }
.pay-card { display: grid; }
.pay-card .pay-f--top input { border-radius: 6px 6px 0 0 !important; }
.pay-card-row { display: grid; grid-template-columns: 1fr 1fr; }
.pay-card-row input { border-top: 0 !important; border-radius: 0 !important; }
.pay-card-row .pay-f:first-child input { border-radius: 0 0 0 6px !important; }
.pay-card-row .pay-f:last-child input { border-left: 0 !important; border-radius: 0 0 6px 0 !important; }
.pay-brands { position: absolute; right: 12px; bottom: 11px; font-size: 20px; color: #697386; }
.pay-f .fc-select::after { color: #697386; }
.pay-btn { position: relative; height: 46px; margin-top: 6px; border: 0; border-radius: 6px; background: #635bff; color: #fff; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); transition: background .2s; }
.pay-btn:hover { background: #5249e6; }
.pay-btn.is-loading::after { border-color: #fff #fff transparent transparent !important; }
.pay-test { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 6px; background: #fff8e6; color: #7a5a00; font-size: 11.5px; letter-spacing: 0; text-transform: none; line-height: 1.5; }
.pay-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; font-size: 11.5px; color: #697386; text-transform: none; letter-spacing: 0; }
.pay-foot a { color: #697386; text-decoration: underline; }
.pay .sp-err { color: #df1b41; }
body[data-page="pay"] .dd-list { background: #fff; color: #1a1f36; border-color: #e3e8ee; }
@media (max-width: 860px) {
  .pay { grid-template-columns: 1fr; }
  .pay-side, .pay-main { justify-content: stretch; padding: 24px 18px; }
  .pay-side { border-right: 0; border-bottom: 1px solid #e3e8ee; }
  .pay-side > *, .pay-form { width: 100%; }
  .pay-total { margin-bottom: 16px; font-size: 30px; }
}

/* ==========================================================================
   Success / failed pages
   ========================================================================== */
.res { padding-top: clamp(118px, 12vw, 150px); padding-bottom: var(--sec-y); }
.res-head { display: grid; gap: 12px; margin-bottom: 28px; }
.res-head .page-title { margin: 0; }
.res-badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 550; }
.res-badge.is-ok { color: var(--c-done); }
.res-badge.is-bad { color: var(--c-danger); justify-self: center; }
.res-sub { margin: 0; max-width: 60ch; color: var(--bone-dim); font-size: 17px; line-height: 1.55; }
.res-sub b { color: var(--bone); }
.res-ref { margin: 0; font-size: 11px; letter-spacing: .08em; color: var(--bone-dim); }
.res-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.res-tix { display: grid; gap: 14px; }
.res-tk { display: grid; grid-template-columns: minmax(0, 1fr) 132px; border-radius: 16px; overflow: hidden; color: var(--cream); background: linear-gradient(165deg, var(--espresso-1), var(--espresso-2)); animation: viewIn .5s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); }
.res-tk-main { display: grid; gap: 4px; padding: 18px 20px; border-right: 2px dashed rgba(243, 233, 218, .2); }
.res-tk-main .mono { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .08em; color: #f5c64f; }
.res-tk-main b { font-size: 20px; font-weight: 650; }
.res-tk-main > span { color: rgba(243, 233, 218, .7); }
.res-code { font-size: 12px !important; letter-spacing: .1em; color: var(--cream) !important; margin-top: 6px; }
.res-tk-qr { display: grid; place-items: center; padding: 12px; background: #fff; }
.res-tk-qr svg { width: 100%; max-width: 108px; }
.res-side { display: grid; gap: 12px; position: sticky; top: 110px; }
.res-box { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-2); }
.res-box .eyebrow { margin: 0 0 6px; }
.res-acts { display: grid; gap: 8px; }
.res-hold { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border-radius: 8px; background: linear-gradient(color-mix(in srgb, var(--c-pending) 12%, transparent), color-mix(in srgb, var(--c-pending) 12%, transparent)); color: var(--c-pending); font-size: 12px; }
.res .state-card { margin: 0 auto; }
@media (max-width: 860px) { .res-grid { grid-template-columns: 1fr; } .res-side { position: static; } }
@media (max-width: 480px) { .res-tk { grid-template-columns: minmax(0, 1fr) 100px; } .res-tk-main { padding: 14px; } .res-tk-main b { font-size: 17px; } }

/* ==========================================================================
   Paper tickets: narrower, tighter
   ========================================================================== */
.book-grid { grid-template-columns: minmax(0, 720px) minmax(320px, 380px) !important; justify-content: space-between; }
.ptk-list { gap: 14px; max-width: 720px; }
.ptk-li { --stub: clamp(118px, 20%, 150px); }
.ptk { min-height: 0 !important; }
.ptk-main { padding: 18px 22px 18px 34px !important; gap: 6px !important; }
.ptk-name h3 b { font-size: clamp(30px, 3vw, 44px) !important; }
.ptk-n { font-size: clamp(44px, 4.4vw, 62px) !important; }
.ptk-desc { font-size: 15px !important; margin: 0 !important; }
.ptk-stub { padding: 14px 10px !important; gap: 8px !important; }
.ptk-price b { font-size: clamp(24px, 2.2vw, 30px) !important; }
@media (max-width: 1100px) { .book-grid { grid-template-columns: 1fr !important; } .ptk-list { max-width: none; } }

/* history timeline: standard status colours */
.hl-slip[data-kind="event"] { --kc: var(--c-progress) !important; }
.hl-slip[data-kind="sale"] { --kc: var(--c-done) !important; }
.hl-slip[data-kind="door"] { --kc: var(--c-done) !important; }
.hl-slip[data-kind="account"] { --kc: var(--c-cancel) !important; }
.hl-slip[data-kind="system"] { --kc: var(--c-pending) !important; }
.hl-act em { color: var(--bone) !important; }

/* Event page: tighter section rhythm */
.show-hero { min-height: min(80vh, 760px) !important; min-height: min(80svh, 760px) !important; }
.show-info { padding-block: var(--sec-y) calc(var(--sec-y) * .6) !important; gap: 24px clamp(16px, 2vw, 32px) !important; }
.show-info .info-main { gap: 28px; }
.map-section { padding-block: 0 var(--sec-y) !important; }
.book-section { padding-top: 0; padding-bottom: var(--sec-y) !important; }
.book-section .section-title { margin-bottom: var(--sec-head) !important; }
.seat-tools { margin-bottom: 14px; row-gap: 12px; }
.seat-tools .legend { gap: 8px 18px; }
@media (max-width: 640px) { .show-hero { min-height: 72svh !important; } }
@media (max-width: 640px) { .ptk-name h3 b { font-size: 26px !important; } .ptk-n { font-size: 44px !important; } .ptk-main { padding: 14px 14px 14px 26px !important; } }
.mq-dot { display: inline-block; flex: none; width: .26em; height: .26em; border-radius: 50%; background: var(--accent); vertical-align: middle; margin: 0 .5em; }

/* Stripe hand-off (Stripe renders its own payment page) */
body[data-page="pay"] { background: var(--ink) !important; color: var(--bone) !important; }
.handoff { min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
.handoff-card { width: min(440px, 100%); display: grid; justify-items: center; gap: 12px; text-align: center; }
.handoff-card .eyebrow { margin: 6px 0 0; }
.handoff-orb { margin-bottom: 4px; }
.handoff.is-demo .steps-spin { animation-duration: 2.4s; opacity: .4; }
.handoff-sum { width: 100%; margin-top: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); text-align: left; }
.handoff-sum .pay-ev { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 0; border: 0; }
.handoff-sum .pay-ev .mono { color: var(--bone-dim); }
.handoff-total { font-size: 18px; color: var(--accent-text); }
.handoff-demo { width: 100%; display: grid; gap: 12px; padding: 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); animation: viewIn .4s var(--ease-out) both; }
.handoff-demo p { display: flex; gap: 8px; margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--bone-dim); text-transform: none; letter-spacing: .02em; text-align: left; }
.handoff-acts { display: grid; gap: 8px; }
.handoff-back { margin-top: 6px; }
@media (max-width: 640px) {
  .ov-table { table-layout: fixed; }
  .ov-table th:nth-child(2), .ov-table td:nth-child(2) { display: none; }
  .ov-table th:nth-child(3), .ov-table td:nth-child(3) { width: 70px; }
  .ov-table th:nth-child(4), .ov-table td:nth-child(4) { width: 64px; text-align: right; }
  .ov-table .ev-cell { min-width: 0; }
  .ov-table .ev-cell b { max-width: 100%; }
  .ov-table .ev-meter { min-width: 0; width: 60px; }
}

/* ==========================================================================
   Dashboard on phones: tables become cards; toolbar on two rows
   ========================================================================== */
@media (max-width: 640px) {
  .tbar { flex-wrap: wrap !important; gap: 10px 12px; }
  .tbar-search { flex: 1 1 100% !important; width: 100% !important; }
  .tbar-region { flex: 1 1 auto !important; min-width: 0 !important; }
  .tbar-btn { width: auto !important; padding: 0 4px !important; font-size: 13px !important; gap: 6px; }
  .tbar .tbar-icon { margin-left: auto; }
  .dash .dcard--flush { border: 0 !important; background: none !important; overflow: visible; }
  .dash .table-scroll { min-height: 0 !important; max-height: none !important; overflow: visible !important; border: 0; }
  .dash .dtable { min-width: 0 !important; display: block; }
  .dash .dtable thead { display: none; }
  .dash .dtable tbody { display: grid; gap: 10px; }
  .dash .dtable tbody tr:not(.empty-row):not(.more-row) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
  .dash .dtable tbody tr[hidden] { display: none !important; }
  .dash .dtable td { display: grid; gap: 3px; min-width: 0; padding: 0 !important; border: 0 !important; font-size: 13.5px; white-space: normal; overflow-wrap: anywhere; }
  .dash .dtable td[data-label]::before { content: attr(data-label); font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
  .dash .dtable td:first-child { grid-column: 1 / -1; padding-bottom: 8px !important; border-bottom: 1px dashed var(--line) !important; }
  .dash .dtable td:first-child::before { display: none; }
  .dash .dtable td.row-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 8px !important; border-top: 1px dashed var(--line) !important; }
  .dash .dtable td.row-acts::before { display: none; }
  .dash .dtable td.row-acts .row-go { margin-left: auto; }
  .dash .dtable td:empty { display: none; }
  .dash .dtable tr.empty-row, .dash .dtable tr.empty-row td { display: block; height: auto; }
  .dash .dtable tr.more-row { display: block; }
  .dash .dtable tr.more-row td { display: block; }
  .dash .dtable .ev-meter { width: 100%; }
  .dash .dtable .ev-cell { gap: 10px; }
  .sales-kpis { gap: 10px; }
  .sales-kpis .dcard { padding: 14px; min-width: 0; }
  .sales-kpis b { font-size: 22px !important; overflow-wrap: anywhere; }
  .sales-kpis p { font-size: 9.5px; }
  .ov-kpi { padding: 14px; }
  .ov-kpi-f { font-size: 12px; }
  .ov-card { padding: 14px !important; }
  .hist2 { max-height: none; min-height: 0; overflow: visible; }
}
@media (max-width: 640px) {
  .hl-rail { padding: 10px 0 12px !important; }
  .hl-slip { grid-template-columns: 1fr !important; }
  .hl-slip::before, .hl-time, .hl-node { display: none !important; }
  .hl-card { grid-template-columns: 36px minmax(0, 1fr) !important; grid-template-areas: "av who" "av act" "meta meta" !important; align-items: start; gap: 2px 12px; padding: 12px; }
  .hl-av { width: 36px; height: 36px; font-size: 12px; border-radius: 10px; }
  .hl-badge { width: 18px; height: 18px; font-size: 11px; right: -5px; bottom: -5px; }
  .hl-who { display: grid; gap: 0; }
  .hl-who b { font-size: 14px; }
  .hl-who .mono { font-size: 11px; }
  .hl-act { font-size: 13.5px; margin-top: 2px; }
  .hl-ev { font-size: 12px; }
  .hl-meta { margin-top: 8px; font-size: 10.5px; padding: 4px 8px; }
  .hist2 { padding: 0 10px !important; }
  .hl-stamp { margin: 0 -10px !important; }
}
@media (max-width: 640px) { .dash .dtable td { align-content: start; align-items: start; justify-items: start; } }
@media (min-width: 1101px) { .book-grid { grid-template-columns: minmax(0, 720px) minmax(340px, 420px) !important; justify-content: start !important; gap: clamp(28px, 3vw, 48px) !important; } }
.co-secure { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--bone-dim); } .co-secure .ti { font-size: 16px; color: var(--c-done); margin-top: 1px; }

/* ==========================================================================
   White-label (your own site)
   ========================================================================== */
.wl-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 96px); }
.wl-title { font-size: clamp(52px, 9vw, 136px); }
.wl-h2 em, .wl-band em { font-style: normal; color: var(--on-accent); padding: 0 .06em; background: linear-gradient(transparent 10%, var(--accent) 10% 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wl-lede { max-width: 54ch; margin: 24px 0 0; font-size: clamp(16px, 1.4vw, 18px); color: var(--bone-dim); }
.wl-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.wl-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 28px 0 0; color: var(--bone-dim); }
.wl-proof li { display: inline-flex; align-items: center; gap: 6px; }
.wl-proof .ti { font-size: 15px; color: var(--accent-text); }




.wl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: wl; }
.wl-steps li { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 22px; border-top: 2px solid var(--line); }
.wl-steps li::before { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 0; background: var(--accent); transition: width 1.1s var(--ease-out) .25s; }
.wl-steps li.is-in::before { width: 100%; }
.wl-steps li:nth-child(2)::before { transition-delay: .45s; } .wl-steps li:nth-child(3)::before { transition-delay: .65s; } .wl-steps li:nth-child(4)::before { transition-delay: .85s; }
.wl-step-n { color: var(--accent-text); }
.wl-steps b { font-size: 17px; }
.wl-steps span:last-child { font-size: 14px; color: var(--bone-dim); }

.wl-req { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.wl-h2 { margin: 0 0 14px; font-size: clamp(32px, 4.4vw, 60px); font-weight: 800; font-variation-settings: "wdth" 66; text-transform: uppercase; line-height: .95; }
.wl-req-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.wl-req-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.wl-req-list .ti { color: var(--accent-text); font-size: 18px; }
.wl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--r-frame, 14px); background: var(--ink-2); }
.wl-form .field small { text-transform: none; letter-spacing: 0; opacity: .7; }
.wl-span { grid-column: 1 / -1; }
.wl-form .btn { justify-self: start; }

.wl-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k btn" "t btn" "s btn"; column-gap: 24px; row-gap: 6px; align-items: center; margin-top: 20px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-frame, 14px); background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 10%, var(--ink-2)), var(--ink-2) 60%); transition: border-color .3s, transform .5s var(--ease-out); }
.wl-band:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-2px); }
.wl-band-k { grid-area: k; display: inline-flex; align-items: center; gap: 6px; color: var(--bone-dim); }
.wl-band-k .ti { color: var(--accent-text); font-size: 15px; }
.wl-band strong { grid-area: t; font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; font-variation-settings: "wdth" 70; text-transform: uppercase; line-height: 1.02; }
.wl-band-sub { grid-area: s; color: var(--bone-dim); font-size: 14.5px; }
.wl-band-btn { grid-area: btn; }
.wl-band:hover .wl-band-btn .ti { transform: translateX(3px); }
.wl-band-btn .ti { transition: transform .35s var(--ease-out); }

@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  .wl-hero { grid-template-columns: 1fr; }
  .wl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .wl-req { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .wl-steps { grid-template-columns: 1fr; }
  .wl-form { grid-template-columns: 1fr; }
  .wl-form .btn { justify-self: stretch; }
  .wl-band { grid-template-columns: 1fr; grid-template-areas: "k" "t" "s" "btn"; }
  .wl-band-btn { margin-top: 10px; justify-self: start; }
}

/* ==========================================================================
   Payment tracker (Track)
   ========================================================================== */
.trk { --n: 5; --p: 0; position: relative; list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.trk-rail { position: absolute; top: 15px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; background: var(--line); border-radius: 2px; z-index: 0; overflow: hidden; }
.trk-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--p)); background: linear-gradient(90deg, var(--c-done), color-mix(in srgb, var(--c-done) 70%, var(--accent))); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.trk-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: trkShine 1.8s ease-in-out infinite; }
@keyframes trkShine { to { transform: translateX(100%); } }
.trk-s { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.trk-node { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-2); border: 1.5px solid var(--line); color: var(--bone-dim); transition: background .4s, border-color .4s, color .4s, transform .5s cubic-bezier(.2, 1.5, .4, 1); }
.trk-node .ti { position: absolute; font-size: 15px; transition: opacity .25s, transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.trk-ok, .trk-bad { opacity: 0; transform: scale(.4) rotate(-20deg); }
.trk-txt { display: grid; gap: 1px; min-width: 0; padding-inline: 2px; }
.trk-txt b { font-size: 12px; font-weight: 550; line-height: 1.25; color: var(--bone-dim); transition: color .3s; }
.trk-txt small { font-size: 11px; color: var(--bone-dim); }
.trk-s.is-on .trk-node { border-color: var(--accent); color: var(--accent-text); transform: scale(1.08); }
.trk-s.is-on .trk-node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: trkPulse 1.6s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes trkPulse { 0% { opacity: .7; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
.trk-s.is-on .trk-txt b { color: var(--bone); }
.trk-s.is-done .trk-node { background: var(--c-done); border-color: var(--c-done); color: #fff; }
.trk-s.is-done .trk-ic { opacity: 0; transform: scale(.4); }
.trk-s.is-done .trk-ok { opacity: 1; transform: none; }
.trk-s.is-done .trk-txt b { color: var(--bone); }
.trk-s.is-bad .trk-node { background: var(--c-danger); border-color: var(--c-danger); color: #fff; transform: none; animation: trkShake .45s cubic-bezier(.36, .07, .19, .97); }
.trk-s.is-bad .trk-node::after { display: none; }
.trk-s.is-bad .trk-ic { opacity: 0; }
.trk-s.is-bad .trk-bad { opacity: 1; transform: none; }
.trk-s.is-bad .trk-txt b { color: var(--c-danger); }
@keyframes trkShake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
/* vertical variant (dashboard sheet) */
.trk--v { grid-template-columns: 1fr; grid-template-rows: repeat(var(--n), auto); gap: 18px; }
.trk--v .trk-rail { top: 16px; bottom: 16px; left: 15px; right: auto; width: 2px; height: auto; }
.trk--v .trk-fill { transform-origin: top center; transform: scaleY(var(--p)); background: var(--c-done); }
.trk--v .trk-fill::after { display: none; }
.trk--v .trk-s { grid-template-columns: 32px minmax(0, 1fr); justify-items: start; align-items: center; gap: 14px; text-align: left; }
.trk--v .trk-txt b { font-size: 14px; }
.trk--v .trk-txt small { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .trk-fill::after, .trk-s.is-on .trk-node::after { animation: none; } }

.handoff-trk { width: 100%; margin: 10px 0 4px; }
.handoff-orb.is-ok .steps-spin, .handoff-orb.is-bad .steps-spin { opacity: 0; }
.handoff-orb.is-ok .steps-ok, .handoff-orb.is-bad .steps-bad { opacity: 1; transform: none; }
.handoff-orb.is-going .steps-spin { animation-duration: .6s; }
.handoff-card > * { animation: viewIn .6s var(--ease-out) both; }
.handoff-card > *:nth-child(2) { animation-delay: .05s; } .handoff-card > *:nth-child(3) { animation-delay: .1s; } .handoff-card > *:nth-child(4) { animation-delay: .15s; } .handoff-card > *:nth-child(5) { animation-delay: .2s; } .handoff-card > *:nth-child(6) { animation-delay: .25s; } .handoff-card > *:nth-child(7) { animation-delay: .3s; }
.res-trk { width: 100%; max-width: 640px; margin: 6px 0 2px; }
.state-card .res-trk { max-width: 480px; margin: 8px auto 4px; }
.co-secure { animation: viewIn .5s var(--ease-out) both; }
@media (max-width: 480px) {
  .trk-txt b { font-size: 10.5px; }
  .trk-node { width: 28px; height: 28px; }
  .trk-node .ti { font-size: 13px; }
  .trk-rail { top: 13px; }
  .trk--v .trk-rail { top: 14px; left: 13px; }
  .trk--v .trk-s { grid-template-columns: 28px minmax(0, 1fr); }
  .trk--v .trk-txt b { font-size: 13.5px; }
}

/* Transaction sheet (dashboard) */
.tx-row { cursor: pointer; transition: background .25s; }
.tx-row:hover, .tx-row:focus-visible { background: linear-gradient(color-mix(in srgb, var(--bone) 4%, transparent), color-mix(in srgb, var(--bone) 4%, transparent)); }
.tx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tsheet { position: fixed; inset: 0; z-index: 210; }
.tsheet-scrim { position: absolute; inset: 0; background: rgba(8, 6, 4, 0); transition: background .35s; }
.tsheet.is-open .tsheet-scrim { background: rgba(8, 6, 4, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tsheet-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; gap: 18px; padding: calc(20px + env(safe-area-inset-top, 0px)) 22px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; background: var(--ink-2); border-left: 1px solid var(--line); box-shadow: -30px 0 80px -40px rgba(0,0,0,.7); transform: translateX(102%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.tsheet.is-open .tsheet-panel { transform: none; }
.tsheet-panel > * { opacity: 0; transform: translateX(18px); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.tsheet.is-open .tsheet-panel > * { opacity: 1; transform: none; }
.tsheet.is-open .tsheet-panel > *:nth-child(2) { transition-delay: .05s; } .tsheet.is-open .tsheet-panel > *:nth-child(3) { transition-delay: .09s; } .tsheet.is-open .tsheet-panel > *:nth-child(4) { transition-delay: .13s; } .tsheet.is-open .tsheet-panel > *:nth-child(5) { transition-delay: .17s; } .tsheet.is-open .tsheet-panel > *:nth-child(6) { transition-delay: .21s; }
.tsheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tsheet-head p { margin: 0 0 4px; }
.tsheet-head h2 { margin: 0; font-size: 15px; letter-spacing: .06em; }
.tsheet-x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--line); background: transparent; cursor: pointer; transition: border-color .25s, transform .35s var(--ease-out); }
.tsheet-x:hover { border-color: var(--bone); transform: rotate(90deg); }
.tsheet-amt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tsheet-amt b { font-size: 34px; font-weight: 700; letter-spacing: -.01em; }
.tsheet-amt .tx-pill { background: none; padding: 0; }
.tsheet-ev { margin: -10px 0 0; font-size: 14.5px; }
.tsheet-sec { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.tsheet-sec .eyebrow { margin: 0; }
.tsheet-dl { margin: 0; display: grid; }
.tsheet-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tsheet-dl > div:last-child { border-bottom: 0; }
.tsheet-dl dt { color: var(--bone-dim); }
.tsheet-dl dd { margin: 0; text-align: right; display: grid; min-width: 0; }
.tsheet-dl dd small { color: var(--bone-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.tsheet-dl .is-strong dd { font-weight: 700; color: var(--accent-text); }
.tsheet-acts { margin-top: auto; display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }
@media (max-width: 600px) {
  .tsheet-panel { top: auto; left: 0; width: 100%; max-height: 92svh; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; transform: translateY(102%); padding-inline: 18px; }
  .tsheet-panel > * { transform: translateY(12px); }
  .tsheet-acts .btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   Motion layer — one set of springs and easings for the whole app
   ========================================================================== */
:root {
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --glide: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s; --t-med: .32s; --t-slow: .6s;
}
/* page enter / leave */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
body > main { animation: pageIn .45s var(--glide) both; }
body:not([data-page="host"]) > main > section:first-child, body:not([data-page="host"]) > main > .wrap:first-child { animation: riseIn .7s var(--glide) .05s both; }
html.is-leaving body > main { opacity: 0; transition: opacity .2s ease; }
html.is-leaving .site-footer { opacity: 0; transition: opacity .2s ease; }

/* buttons: lift on hover, press on tap, icon follows */
.btn { transition: transform var(--t-med) var(--spring), background-color var(--t-med) var(--glide), color var(--t-med), border-color var(--t-med), box-shadow var(--t-med) var(--glide), opacity var(--t-med); will-change: transform; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-ghost:hover, .btn-dark:hover { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .6); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; }
.btn .ti { transition: transform var(--t-med) var(--spring); }
.btn:hover .ti-arrow-right, .btn:hover .ti-arrow-up-right, .link-arrow:hover .ti-arrow-up-right, .link-arrow:hover .ti-arrow-right { transform: translate(2px, -1px); }
.btn:hover .ti-arrow-right { transform: translateX(3px); }
.btn:disabled, .btn[aria-disabled="true"] { transform: none; box-shadow: none; }
.link-btn, .ftoggle-btn, .evs-tab, .chip, .cur-btn { transition: color var(--t-med) var(--glide), background-color var(--t-med) var(--glide), border-color var(--t-med) var(--glide), transform var(--t-med) var(--spring); }
.ftoggle-btn:active, .evs-tab:active, .chip:active, .link-btn:active { transform: scale(.96); }

/* selected tab settles in */
.evs-tab[aria-selected="true"] { animation: tabIn .35s var(--spring); }
@keyframes tabIn { from { transform: scale(.94); } to { transform: none; } }

/* fields: soft focus ring */
.field input, .field select, .field textarea, .dd-btn { transition: border-color var(--t-med) var(--glide), box-shadow var(--t-med) var(--glide), background-color var(--t-med); }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* cards: gentle lift */
.dcard, .res-box, .handoff-sum { transition: border-color var(--t-med) var(--glide), transform .45s var(--glide), box-shadow .45s var(--glide); }
.sales-kpis .dcard:hover, .ov-kpis .dcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--bone) 24%, transparent); }

/* table rows fade in a little at a time */
.dtable tbody tr:not(.empty-row) { animation: rowIn .45s var(--glide) both; animation-delay: calc(var(--i, 0) * 22ms); }
@keyframes rowIn { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* dropdown list: spring open */
.dd-list { transition: opacity .18s var(--glide), transform .28s var(--spring); }

/* toasts and dialogs: springier entrance */
.cdlg-panel { transition: opacity .25s var(--glide), transform .45s var(--spring); }

/* accordions: icon turns, answer glides */
.hp-q summary > .ti { transition: transform .45s var(--spring), background-color .3s, color .3s, border-color .3s; }
.hp-q[open] .hp-a { animation: riseIn .45s var(--glide) both; }

/* nav links: underline draws in */
.footer-cols a { transition: color var(--t-med) var(--glide), transform var(--t-med) var(--spring); display: inline-block; }
.footer-cols a:hover { color: var(--accent-text); transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.pay-ev > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.pay-ev > span:nth-child(2) b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsheet-panel:focus { outline: none; }
.co-body { animation: coIn .45s var(--glide) both; }
.co-body.is-back { animation-name: coBack; }
@keyframes coIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes coBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.co-steps li b { transition: background-color .35s var(--glide), color .35s, transform .45s var(--spring); }
.co-steps li.is-on b { transform: scale(1.08); }
.co-steps li::before { transition: background-color .5s var(--glide); }
@media (max-width: 480px) { .wl-cta .btn { flex: 1 1 100%; } }
.summary { grid-template-columns: minmax(0, 1fr); }
.summary > * { min-width: 0; }
.co-steps li { min-width: 0; }
.co-steps li span { overflow-wrap: anywhere; }
@media (max-width: 360px) { .summary { padding: 18px 16px; } .co-steps li { font-size: 10.5px; } .hold-txt { font-size: 12px; } }
.co-body, .checkout, .co-review, .totals { grid-template-columns: minmax(0, 1fr); }
.btn-block { white-space: normal; text-align: center; }
@media (max-width: 360px) { .summary .btn-block { padding-inline: 16px; font-size: 15px; } }
@media (max-width: 360px) { .fsw-tab { padding: 10px 8px; } .fsw-tab-txt b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
@media (max-width: 360px) { .fsw-tab-txt b { font-variation-settings: "wdth" 62; font-size: 13px; } }
.ov-bar:first-child .ov-tip, .ov-bar:nth-child(2) .ov-tip { left: 0; translate: 0 0; }
.ov-bar:last-child .ov-tip, .ov-bar:nth-last-child(2) .ov-tip { left: auto; right: 0; translate: 0 0; }
.scan-cam, .scan-cam video { max-width: 100%; }

/* ==========================================================================
   White-label v2: template showcase, feature arc, domain field
   ========================================================================== */
.wl-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* showcase: a phone scrolling through each template, neighbours tilted behind */
.wl-show { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.wl-stage { --pw: clamp(230px, 22vw, 290px); position: relative; width: 100%; height: calc(var(--pw) * 2.02 + 10px); display: grid; place-items: center; }
.wl-phone { position: relative; z-index: 2; width: var(--pw); aspect-ratio: 9 / 18.5; padding: 9px; border-radius: calc(var(--pw) * .16); background: linear-gradient(160deg, #2a2e36, #0d0f13 60%); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px rgba(0,0,0,.75), inset 0 0 0 1.5px rgba(255,255,255,.06); }
.wl-notch { position: absolute; z-index: 3; top: 16px; left: 50%; width: 30%; height: 20px; translate: -50% 0; border-radius: 20px; background: #050608; }
.wl-screen { position: relative; height: 100%; border-radius: calc(var(--pw) * .13); overflow: hidden; background: #0b0c0f; isolation: isolate; }
.wl-layer { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); filter: blur(6px); transition: opacity .7s var(--glide), transform .9s var(--glide), filter .7s var(--glide); }
.wl-layer.is-on { opacity: 1; transform: none; filter: none; z-index: 1; }
.wl-strip { will-change: transform; }
.wl-strip img { display: block; width: 100%; height: auto; max-width: none; user-select: none; }
.wl-ghost { position: absolute; z-index: 1; top: 50%; width: calc(var(--pw) * .82); aspect-ratio: 9 / 18.5; padding: 7px; border-radius: calc(var(--pw) * .14); background: #15171c; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.7); opacity: .5; transition: transform .9s var(--glide), opacity .6s; }
.wl-ghost--l { left: 50%; transform: translate(-112%, -48%) rotate(-9deg); }
.wl-ghost--r { left: 50%; transform: translate(12%, -48%) rotate(9deg); }
.wl-ghost-img { width: 100%; height: 100%; border-radius: calc(var(--pw) * .11); background: #0b0c0f center top / cover no-repeat; filter: saturate(.7) brightness(.75); transition: background-image .6s; }
.wl-show.is-swap .wl-ghost--l { animation: ghostL .9s var(--glide); }
.wl-show.is-swap .wl-ghost--r { animation: ghostR .9s var(--glide); }
@keyframes ghostL { from { transform: translate(-95%, -48%) rotate(-4deg); opacity: 0; } }
@keyframes ghostR { from { transform: translate(-5%, -48%) rotate(4deg); opacity: 0; } }
.wl-stage:hover .wl-ghost--l { transform: translate(-118%, -49%) rotate(-11deg); opacity: .7; }
.wl-stage:hover .wl-ghost--r { transform: translate(18%, -49%) rotate(11deg); opacity: .7; }
.wl-show-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; }
.wl-url { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); text-transform: none; letter-spacing: .02em; color: var(--bone); max-width: 100%; }
.wl-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-url .ti { color: var(--c-done, #2fbf71); font-size: 13px; }
.wl-url-kind { color: var(--bone-dim); font-size: 10px; }
.wl-show.is-swap .wl-show-cap { animation: riseIn .5s var(--glide); }
.wl-tpls { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wl-tpl { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--bone-dim); text-align: left; cursor: pointer; overflow: hidden; transition: border-color .3s, color .3s, background-color .3s, transform .35s var(--spring); }
.wl-tpl:hover { color: var(--bone); border-color: color-mix(in srgb, var(--bone) 30%, transparent); transform: translateY(-2px); }
.wl-tpl[aria-selected="true"] { color: var(--bone); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
.wl-tpl-th { width: 34px; height: 44px; border-radius: 5px; background: var(--ink-3) center top / cover no-repeat; display: grid; place-items: center; }
.wl-tpl-txt { display: grid; min-width: 0; }
.wl-tpl-txt b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-tpl-txt small { font-size: 9.5px; color: var(--bone-dim); }
.wl-tpl-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.wl-tpl.is-run .wl-tpl-bar { animation: tplRun var(--dur, 9s) linear forwards; }
.wl-show.is-paused .wl-tpl.is-run .wl-tpl-bar { animation-play-state: paused; }
@keyframes tplRun { to { transform: scaleX(1); } }
.wl-tpl--more { border-style: dashed; }
.wl-tpl--more .wl-tpl-th { background: linear-gradient(color-mix(in srgb, var(--bone) 6%, transparent), color-mix(in srgb, var(--bone) 6%, transparent)); }
.wl-tpl--more .wl-tpl-th b { font-size: 12px; color: var(--accent-text); }

/* feature arc: cards fan out along a curve, drag or tap to turn */
.wl-arc-sec { overflow: hidden; }
.wl-arc-title { margin: 0 0 8px; }
.wl-arc-count { color: var(--bone-dim); }
.wl-arc { --cw: clamp(230px, 21vw, 280px); --ch: calc(var(--cw) * 1.25); --r: 1100px; --step: 15deg; position: relative; height: calc(var(--ch) + 150px); margin-top: 8px; cursor: grab; touch-action: pan-y; user-select: none; outline: none; }
.wl-arc.is-drag { cursor: grabbing; }
.wl-arc:focus-visible .wl-card.is-on { outline: 2px solid var(--accent); outline-offset: 4px; }
.wl-arc-track { position: absolute; inset: 0; }
.wl-card { position: absolute; top: 40px; left: 50%; width: var(--cw); height: var(--ch); margin-left: calc(var(--cw) / -2); display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); transform-origin: 50% var(--r); transform: rotate(calc(var(--d) * var(--step))); opacity: var(--o); transition: transform .85s cubic-bezier(.22, 1.12, .36, 1), opacity .6s var(--glide), border-color .4s, background-color .4s, box-shadow .6s; }
.wl-card.no-tr { transition: opacity .2s; }
.wl-arc.is-drag .wl-card { transition: none; }
.wl-card.is-on { border-color: color-mix(in srgb, var(--bone) 28%, transparent); background: var(--ink-3); box-shadow: 0 34px 60px -36px rgba(0, 0, 0, .8); }
.wl-card-n { font-weight: 800; font-variation-settings: "wdth" 62; font-size: 54px; line-height: .9; color: var(--bone-dim); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--bone-dim); transition: color .5s, -webkit-text-stroke-color .5s; }
.wl-card.is-on .wl-card-n { color: var(--accent-text); -webkit-text-stroke-color: transparent; -webkit-text-fill-color: currentColor; }
.wl-card-ic { margin-top: auto; font-size: 24px; color: var(--bone-dim); transition: color .4s, transform .6s var(--spring); }
.wl-card.is-on .wl-card-ic { color: var(--bone); transform: translateY(-2px); }
.wl-card h3 { margin: 0; font-size: 19px; font-weight: 650; line-height: 1.2; }
.wl-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bone-dim); }
.wl-arc-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: -40px; position: relative; z-index: 2; }
.wl-arc-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--ink); color: var(--bone); cursor: pointer; transition: border-color .3s, transform .35s var(--spring); }
.wl-arc-btn:hover { border-color: var(--bone); transform: scale(1.06); }
.wl-arc-btn:active { transform: scale(.94); }
.wl-arc-dots { display: inline-flex; gap: 6px; }
.wl-arc-dots i { width: 6px; height: 6px; border-radius: 6px; background: var(--line); transition: width .45s var(--spring), background-color .3s; }
.wl-arc-dots i.is-on { width: 22px; background: var(--bone); }

/* domain field */
.wl-dom { border: 0; padding: 0; margin: 0; min-width: 0; }
.wl-dom legend { padding: 0; margin-bottom: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.wl-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line); border-radius: 6px; justify-self: start; }
.wl-seg label { position: relative; cursor: pointer; }
.wl-seg input { position: absolute; opacity: 0; pointer-events: none; }
.wl-seg span { display: block; padding: 7px 14px; border-radius: 4px; font-size: 13px; color: var(--bone-dim); white-space: nowrap; transition: background-color .3s var(--glide), color .3s; }
.wl-seg input:checked + span { background: var(--bone); color: var(--ink); font-weight: 600; }
.wl-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.wl-dom-in { display: flex; align-items: baseline; gap: 2px; border-bottom: 1px solid var(--line); transition: border-color .3s; }
.wl-dom-in:focus-within { border-color: var(--accent); }
.wl-dom-in input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; padding-inline: 0 !important; background: none; }
.wl-dom-pre, .wl-dom-suf { flex: none; text-transform: none; letter-spacing: .02em; font-size: 13px; color: var(--bone-dim); }
.wl-hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--bone-dim); }
.wl-hint b { color: var(--bone); font-weight: 550; }
.wl-hint.is-in { animation: riseIn .4s var(--glide); }

@media (max-width: 1100px) { .wl-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .wl-hero { grid-template-columns: 1fr; }
  .wl-stage { --pw: 240px; }
  .wl-tpls { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); width: calc(100% + var(--gutter) * 2); }
  .wl-tpls::-webkit-scrollbar { display: none; }
  .wl-tpl { flex: 0 0 150px; scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .wl-arc { --cw: 220px; --r: 760px; --step: 19deg; }
  .wl-card { padding: 18px; }
  .wl-card-n { font-size: 44px; }
  .wl-card h3 { font-size: 17px; }
  .wl-stage { --pw: 210px; }
  .wl-ghost--l { transform: translate(-100%, -48%) rotate(-8deg); }
  .wl-ghost--r { transform: translate(0%, -48%) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) { .wl-layer, .wl-card, .wl-ghost { transition: none; } }
.wl-tpl { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.wl-tpl-th { width: 28px; height: 38px; }
.wl-tpl-txt b { white-space: normal; line-height: 1.15; font-size: 12px; }
.wl-arc { --r: 1500px; --step: 12.5deg; }
.wl-card { filter: brightness(calc(1 - var(--dim, 0))); transition: transform .85s cubic-bezier(.22, 1.12, .36, 1), opacity .6s var(--glide), filter .6s var(--glide), border-color .4s, background-color .4s, box-shadow .6s; }
@media (max-width: 600px) { .wl-arc { --r: 900px; --step: 16deg; } }
@media (max-width: 900px) { .wl-tpls { scroll-padding-inline: var(--gutter); } }
@media (max-width: 600px) { .wl-arc { height: calc(var(--ch) + 100px); } .wl-arc-nav { margin-top: -30px; } }
.wl-dom .wl-seg label { font-family: var(--f-display); font-size: inherit; text-transform: none; letter-spacing: 0; color: inherit; }
.auth-guest { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--bone-dim); text-transform: none; letter-spacing: .02em; }
.auth-guest .ti { color: var(--accent-text); font-size: 14px; }
.auth-guest a { color: var(--bone); border-bottom: 1px solid var(--line); }
.mnav-find a { color: var(--accent-text); border-bottom: 1px solid currentColor; }

/* ==========================================================================
   Create event: photos & video uploader
   ========================================================================== */
.mup-lede { margin: -10px 0 18px; font-size: 14px; }
.mup { display: grid; gap: 26px; }
.mup-block { display: grid; gap: 12px; min-width: 0; }
.mup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mup-head b { font-size: 15px; font-weight: 600; }
.mup-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 18px; border: 1.5px dashed color-mix(in srgb, var(--bone) 22%, transparent); border-radius: var(--r-frame, 14px); background: linear-gradient(color-mix(in srgb, var(--bone) 2%, transparent), color-mix(in srgb, var(--bone) 2%, transparent)); text-align: center; cursor: pointer; transition: border-color .3s var(--glide), background-color .3s var(--glide), transform .4s var(--spring); }
.mup-drop:hover, .mup-drop:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)); }
.mup-drop.is-over { border-color: var(--accent); border-style: solid; background: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); transform: scale(1.01); }
.mup-drop.is-full { opacity: .45; pointer-events: none; }
.mup-drop-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(color-mix(in srgb, var(--bone) 7%, transparent), color-mix(in srgb, var(--bone) 7%, transparent)); font-size: 22px; color: var(--accent-text); transition: transform .5s var(--spring); }
.mup-drop:hover .mup-drop-ic, .mup-drop.is-over .mup-drop-ic { transform: translateY(-3px) scale(1.06); }
.mup-drop-t { font-size: 14.5px; }
.mup-drop-t u { text-decoration-color: var(--accent); text-underline-offset: 3px; }
.mup-drop-s { font-size: 10px; color: var(--bone-dim); }
.mup-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mup-grid:empty { display: none; }
.mup-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--ink-3); border: 1px solid var(--line); animation: tileIn .45s var(--spring) both; }
@keyframes tileIn { from { opacity: 0; transform: scale(.9); } }
.mup-tile img { width: 100%; height: 100%; object-fit: cover; transition: filter .4s, transform .6s var(--glide); }
.mup-tile.is-busy img { filter: blur(3px) brightness(.55); }
.mup-tile:not(.is-busy):hover img { transform: scale(1.04); }
.mup-tile.is-cover { grid-column: span 2; grid-row: span 2; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.mup-ring { position: absolute; inset: 0; display: grid; place-items: center; }
.mup-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.mup-ring circle { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 3; }
.mup-ring .mup-ring-v { stroke: #fff; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 * (1 - var(--p, 0))); }
.mup-badge { position: absolute; left: 8px; top: 8px; padding: 3px 7px; border-radius: 4px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; }
.mup-act { position: absolute; top: 6px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(10, 11, 14, .66); color: #fff; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .3s var(--spring), background-color .25s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mup-star { left: 6px; } .mup-del { right: 6px; }
.mup-del:hover { background: var(--c-danger); }
.mup-star:hover { background: var(--accent); color: var(--on-accent); }
.mup-tile:hover .mup-act, .mup-tile:focus-within .mup-act { opacity: 1; transform: none; }
@media (hover: none) { .mup-act { opacity: 1; transform: none; } }
.mup-meta { position: absolute; left: 8px; bottom: 6px; font-size: 9px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); opacity: .8; }
.mup-vid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-frame, 14px); background: var(--ink-2); animation: tileIn .45s var(--spring) both; }
.mup-vid-play { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.mup-vid-play video { width: 100%; height: 100%; object-fit: contain; display: block; }
.mup-vid-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 28px; color: rgba(255,255,255,.5); animation: pulseDim 1.4s ease-in-out infinite; }
@keyframes pulseDim { 50% { opacity: .4; } }
.mup-vid-info { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.mup-vid-info b { font-size: 14px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mup-vid-info .mono { font-size: 10.5px; }
.mup-bar { width: 100%; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.mup-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.mup-vid .mup-bar i { transform: scaleX(var(--p, 0)); }
@media (max-width: 600px) { .mup-vid { grid-template-columns: 1fr; } .mup-tile.is-cover { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; } }
.preview-cover { position: relative; margin-bottom: 14px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); animation: tileIn .5s var(--spring) both; }
.preview-cover img { width: 100%; height: 100%; object-fit: cover; }
.preview-cover span { position: absolute; left: 10px; bottom: 8px; font-size: 9.5px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }

/* event page: host cover, gallery, video, lightbox */
.show-hero-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--glide), transform 2.4s var(--glide); }
.show-hero-cover.is-in { opacity: .62; transform: none; }
.show-hero-text { position: relative; z-index: 2; }
.ev-media { padding-block: clamp(20px, 4vw, 48px); }
.ev-media .section-label { margin-bottom: 20px; }
.evm-video { margin-bottom: 14px; aspect-ratio: 16 / 9; border-radius: var(--r-frame, 14px); overflow: hidden; background: #000; border: 1px solid var(--line); }
.evm-video video, .evm-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.evm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 14vw, 200px); gap: 10px; }
.evm-grid li:first-child { grid-column: span 2; grid-row: span 2; }
.evm-grid--1 { grid-template-columns: 1fr; grid-auto-rows: clamp(220px, 40vw, 520px); }
.evm-grid--1 li:first-child { grid-column: auto; grid-row: auto; }
.evm-grid--2 { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(180px, 26vw, 380px); }
.evm-grid--2 li:first-child { grid-column: auto; grid-row: auto; }
.evm-grid button { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--ink-3); cursor: zoom-in; }
.evm-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--glide), filter .4s; }
.evm-grid button:hover img { transform: scale(1.05); }
@media (max-width: 640px) { .evm-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; } }
.lbox { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 56px 16px; background: rgba(6, 7, 9, 0); transition: background .3s; }
.lbox.is-open { background: rgba(6, 7, 9, .92); }
.lbox figure { margin: 0; display: grid; gap: 10px; justify-items: center; max-width: 100%; max-height: 100%; }
.lbox img { max-width: min(1200px, 100%); max-height: calc(100svh - 140px); border-radius: 8px; opacity: 0; transform: scale(.96); transition: opacity .35s var(--glide), transform .5s var(--spring); }
.lbox img.is-in { opacity: 1; transform: none; }
.lbox figcaption { color: rgba(255,255,255,.6); font-size: 10.5px; }
.lbox-x, .lbox-nav { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)); color: #fff; cursor: pointer; transition: background-color .25s, transform .35s var(--spring); }
.lbox-x { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.lbox-nav { top: 50%; translate: 0 -50%; }
.lbox-prev { left: 14px; } .lbox-next { right: 14px; }
.lbox-x:hover, .lbox-nav:hover { background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)); transform: scale(1.06); }
@media (max-width: 600px) { .lbox-nav { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: none; } }

/* ==========================================================================
   Cash Desk (dashboard)
   ========================================================================== */
.nav-till { background: none !important; color: var(--c-done) !important; padding: 0 !important; font-size: 10px !important; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.nav-till::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-done); }
.desk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 14px 18px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-frame, 14px); background: var(--ink-2); animation: riseIn .45s var(--glide) both; }
.desk-status { display: flex; align-items: center; gap: 12px; }
.desk-status span:last-child { display: grid; }
.desk-status b { font-size: 15px; }
.desk-status small { font-size: 10px; color: var(--bone-dim); }
.desk-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--c-done); }
.desk-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--c-done); animation: trkPulse 1.8s var(--glide) infinite; }
.desk-kpis { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 auto 0 0; padding-left: 22px; border-left: 1px solid var(--line); }
.desk-kpis div { display: grid; gap: 2px; }
.desk-kpis dt { font-size: 9.5px; color: var(--bone-dim); }
.desk-kpis dd { margin: 0; font-size: 17px; font-weight: 650; }
.desk-kpis dd.is-accent { color: var(--accent-text); }
.desk-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.desk-sell, .desk-pay { display: grid; gap: 14px; align-content: start; min-width: 0; }
.desk-pay { position: sticky; top: 90px; }
.desk-step { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.desk-step:first-child { margin-top: 0; }
.desk-step b { font-size: 15px; font-weight: 600; }
.desk-n { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 11px; color: var(--accent-text); }
.desk-ev .dd, .desk-ev select { width: 100%; }
.desk-evmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 0; font-size: 10.5px; color: var(--bone-dim); text-transform: none; letter-spacing: .02em; }
.desk-evmeta b { color: var(--bone); }
.desk-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.desk-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; transition: border-color .3s var(--glide), background-color .3s var(--glide); }
.desk-line.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
.desk-line.is-out { opacity: .5; }
.desk-line-t { display: grid; gap: 2px; min-width: 0; }
.desk-line-t b { font-size: 15px; font-weight: 600; }
.desk-line-t small { font-size: 10px; color: var(--bone-dim); text-transform: none; letter-spacing: .02em; }
.desk-line-p { font-size: 14px; }
.desk-stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-btn); padding: 3px; }
.desk-stepper button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 3px; background: none; color: var(--bone); cursor: pointer; transition: background-color .2s, transform .25s var(--spring); }
.desk-stepper button:hover:not(:disabled) { background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent)); }
.desk-stepper button:active:not(:disabled) { transform: scale(.9); }
.desk-stepper button:disabled { opacity: .3; cursor: default; }
.desk-stepper output { min-width: 26px; text-align: center; font-family: var(--f-mono); font-size: 15px; }
.desk-line.is-on .desk-stepper output { color: var(--accent-text); animation: tabIn .3s var(--spring); }
.desk-buyer { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.desk-order { list-style: none; margin: 0; padding: 0; display: grid; }
.desk-order li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; animation: riseIn .35s var(--glide) both; }
.desk-empty { display: grid; justify-items: center; gap: 8px; padding: 22px 10px; border: 1px dashed var(--line); border-radius: 10px; color: var(--bone-dim); font-size: 13.5px; }
.desk-empty .ti { font-size: 24px; }
.desk-total { display: flex; justify-content: space-between; align-items: baseline; }
.desk-total span { color: var(--bone-dim); }
.desk-total b { font-size: 34px; font-weight: 700; letter-spacing: -.01em; }
.desk-cash-in { display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--line); transition: border-color .3s; }
.desk-cash-in:focus-within { border-color: var(--accent); }
.desk-cash-in .mono { font-size: 18px; color: var(--bone-dim); text-transform: none; }
.desk-cash-in input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; padding-inline: 0 !important; background: none; font-size: 26px !important; font-weight: 650; }
.desk-cash-in input.is-pop { animation: tabIn .35s var(--spring); }
.desk-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.desk-notes .ftoggle-btn { flex: 1 1 0; min-width: 64px; text-transform: none; letter-spacing: .02em; font-size: 12px; }
.desk-change { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 10px; background: linear-gradient(color-mix(in srgb, var(--bone) 4%, transparent), color-mix(in srgb, var(--bone) 4%, transparent)); transition: background-color .3s, color .3s; }
.desk-change span { color: var(--bone-dim); font-size: 14px; }
.desk-change b { font-size: 22px; }
.desk-change.is-ok b { color: var(--c-done); }
.desk-change.is-short b { color: var(--c-danger); }
.desk-go:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.desk-clear { justify-self: center; }
.desk-note { display: flex; gap: 8px; margin: 0; font-size: 10px; line-height: 1.5; color: var(--bone-dim); text-transform: none; letter-spacing: .02em; }
.desk-done { display: grid; justify-items: center; gap: 10px; text-align: center; animation: riseIn .45s var(--glide) both; }
.desk-done-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--c-done); color: #fff; font-size: 28px; animation: tileIn .5s var(--spring) both; }
.desk-done .eyebrow { margin: 0; }
.desk-give { display: grid; gap: 2px; padding: 14px 20px; border-radius: 12px; background: linear-gradient(color-mix(in srgb, var(--c-done) 10%, transparent), color-mix(in srgb, var(--c-done) 10%, transparent)); width: 100%; }
.desk-give span { font-size: 13px; color: var(--bone-dim); }
.desk-give b { font-size: 38px; color: var(--c-done); line-height: 1.1; }
.desk-give small { font-size: 10px; color: var(--bone-dim); text-transform: none; letter-spacing: .02em; }
.desk-done-free { margin: 0; font-size: 16px; }
.desk-tix { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; max-height: 320px; overflow-y: auto; text-align: left; }
.desk-tix li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; animation: riseIn .4s var(--glide) both; animation-delay: calc(var(--i) * 60ms); }
.desk-qr svg { width: 64px; height: 64px; display: block; border-radius: 4px; }
.desk-tix span:last-child { display: grid; gap: 2px; min-width: 0; }
.desk-tix b { font-size: 14px; }
.desk-tix small { font-size: 11px; color: var(--bone-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-sent { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 10px; color: var(--bone-dim); text-transform: none; }
.desk-done-acts { display: flex; gap: 8px; width: 100%; }
.desk-done-acts .btn { flex: 1; }
.desk-recent-h { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px 12px; }
.desk-recent-h b { font-size: 15px; font-weight: 600; }
.desk-closed { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
.desk-open { display: grid; gap: 12px; justify-items: start; animation: riseIn .45s var(--glide) both; }
.desk-open-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); color: var(--accent-text); font-size: 26px; }
.desk-open h2 { margin: 0; font-size: 22px; }
.desk-open p { margin: 0; font-size: 14px; }
.desk-open-f { display: grid; gap: 14px; width: 100%; }
.desk-diff[data-diff="even"], .desk-diffline[data-diff="even"] { color: var(--c-done); }
.desk-diff[data-diff="short"], .desk-diffline[data-diff="short"] { color: var(--c-danger); }
.desk-diff[data-diff="over"], .desk-diffline[data-diff="over"] { color: var(--c-pending, #f5a524); }
.desk-close { width: min(420px, 100%); }
.desk-sum { margin: 0; display: grid; }
.desk-sum div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.desk-sum dt { color: var(--bone-dim); } .desk-sum dd { margin: 0; font-family: var(--f-mono); }
.desk-sum .is-strong dd { color: var(--accent-text); font-weight: 600; }
.desk-diffline { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; animation: riseIn .3s var(--glide); }
.tx-cash { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-size: 9.5px; color: var(--c-done); letter-spacing: .08em; }
.tx-cash .ti { font-size: 13px; }
@media (max-width: 1100px) { .desk-grid, .desk-closed { grid-template-columns: 1fr; } .desk-pay { position: static; } }
@media (max-width: 600px) {
  .desk-bar { padding: 14px; }
  .desk-kpis { padding-left: 0; border-left: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; order: 3; }
  .desk-bar > .btn { margin-left: auto; }
  .desk-line { grid-template-columns: minmax(0, 1fr) auto; }
  .desk-line .desk-stepper { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; }
  .desk-buyer { grid-template-columns: 1fr; }
  .desk-total b { font-size: 28px; }
}
.evm-wrap { display: grid; gap: 10px; }
.evm-wrap .evm-video { margin: 0; max-height: 72svh; }
.evm-wrap:not(.has-both) .evm-video { max-width: 980px; }
@media (min-width: 901px) {
  .evm-wrap.has-both { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .evm-wrap.has-both .evm-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(90px, 9vw, 150px); }
}

/* lighter mobile menu */
.mnav-links a { padding: 11px 0; gap: 8px; grid-template-columns: 28px minmax(0, 1fr) auto auto; }
.mnav-label, .mnav .mnav-label { font-weight: 500 !important; font-variation-settings: normal !important; text-transform: none !important; font-size: 20px !important; letter-spacing: 0 !important; line-height: 1.2 !important; }
.mnav-links a[aria-current] .mnav-label { font-weight: 600 !important; }
.mnav-n { font-size: 10px; }
.mnav-links em { font-size: 10px; padding: 2px 7px; }
.mnav-links a > .ti { font-size: 16px; }
/* plain Login link in the header */
.acct-signin.acct-login { padding: 0 16px; border-radius: var(--r-btn); font-size: 11px; }

/* Events page header with New event */
.evs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.evs-lede { margin: 0; font-size: 14px; }
.evt-row { cursor: pointer; transition: background-color .25s; }
.evt-row:hover, .evt-row:focus-visible { background: linear-gradient(color-mix(in srgb, var(--bone) 4%, transparent), color-mix(in srgb, var(--bone) 4%, transparent)); }
.evt-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 600px) { .evs-lede { display: none; } .evs-top { justify-content: flex-end; } }

/* Manage event: read-only mini dashboard */
.emd { display: grid; gap: 14px; }
.emd-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--bone-dim); transition: color .25s, transform .35s var(--spring); }
.emd-back:hover { color: var(--bone); transform: translateX(-3px); }
.emd-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; animation: riseIn .45s var(--glide) both; }
.emd-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; display: block; }
.emd-thumb .poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.emd-thumb .poster img { width: 100%; height: 100%; object-fit: cover; }
.emd-meta { min-width: 0; display: grid; gap: 4px; }
.emd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.emd-tags .evs-pill { background: none; padding: 0; }
.emd-title { margin: 2px 0 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 650; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emd-sub { margin: 0; font-size: 14px; }
.emd-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.emd-acts .is-danger { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 40%, transparent); }
.emd-kpis .dcard b small { font-size: 14px; font-weight: 500; }
.emd-kpis .ov-fill { margin-top: 8px; }
.emd-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); gap: 14px; align-items: stretch; }
.emd-chart .ov-bars { height: 200px; }
.emd-tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.emd-tlist li { display: grid; gap: 6px; animation: riseIn .45s var(--glide) both; animation-delay: calc(var(--i) * 60ms); }
.emd-trow { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.emd-trow b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emd-tbar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.emd-tbar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(var(--p)); animation: barGrow 1s var(--glide) both; }
.emd-tbar.is-done i { background: var(--c-done); }
@keyframes barGrow { from { transform: scaleX(0); } }
.emd-tsub { font-size: 10px; }
.emd-split { display: grid; gap: 14px; justify-items: center; align-content: start; }
.emd-split .ov-card-h { justify-self: stretch; }
.emd-donut { --p: 1; width: 132px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 360deg), var(--c-done) 0); animation: donutIn .9s var(--glide) both; }
@keyframes donutIn { from { transform: rotate(-90deg) scale(.85); opacity: 0; } }
.emd-donut span { width: 74%; aspect-ratio: 1; border-radius: 50%; background: var(--ink-2); display: grid; place-content: center; text-align: center; }
.emd-donut b { font-size: 22px; line-height: 1; }
.emd-donut small { font-size: 9px; color: var(--bone-dim); }
.emd-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-self: stretch; }
.emd-legend li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.emd-legend li b { margin-left: auto; font-weight: 500; }
.emd-legend i { width: 9px; height: 9px; border-radius: 3px; }
.emd-legend .is-on { background: var(--accent); } .emd-legend .is-desk { background: var(--c-done); }
.emd-check { justify-self: stretch; display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.emd-orders .desk-recent-h a { font-size: 10px; }
@media (max-width: 1200px) { .emd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .emd-chart { grid-column: 1 / -1; } }
@media (max-width: 700px) { .emd-grid { grid-template-columns: 1fr; } .emd-head { grid-template-columns: 56px minmax(0, 1fr); } .emd-thumb { width: 56px; height: 56px; } .emd-title { white-space: normal; } .emd-acts .btn { flex: 1 1 calc(50% - 8px); justify-content: center; } }

/* Create event: Look */
.look-prev { display: grid; gap: 10px; }
.look-img { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-frame, 14px); overflow: hidden; border: 1px solid var(--line); background: var(--ink-3); animation: tileIn .45s var(--spring) both; }
.look-img img { width: 100%; height: 100%; object-fit: cover; transition: filter .4s; }
.look-img.is-busy img { filter: blur(4px) brightness(.55); }
.look-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.look-acts label { cursor: pointer; }
.look-acts .is-danger { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 40%, transparent); }
.look-alt { margin-top: 18px; display: grid; gap: 10px; transition: opacity .3s; }
.look-alt.is-off { opacity: .35; pointer-events: none; }
.look-or { margin: 0; font-size: 10px; color: var(--bone-dim); }
.look-video { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.look-alt .swatches { display: flex; flex-wrap: wrap; gap: 8px; } .look-alt .swatch { width: 44px; height: 44px; border-radius: 8px; flex: none; }
.mnav-tile { padding: 12px 14px !important; gap: 8px !important; font-size: 14px !important; } .mnav-tile .ti { font-size: 18px !important; } .mnav-me { padding: 12px 14px !important; } .mnav-me .mnav-av { width: 38px !important; height: 38px !important; font-size: 15px !important; } .mnav-who b { font-size: 15px !important; }

/* dashboard: a touch smaller everywhere */
.dash-nav a { font-size: 14.5px; padding: 9px 12px; gap: 11px; }
.dash-nav a .ti { font-size: 19px; }
.dash-nav a b { font-size: 10px; }
.dash-body .evs-tab { font-size: 13px; height: 34px; }
.dash-body .evs-tab b { font-size: 10.5px; }
.dash-body .tbar-search input, .dash-body .tbar .dd-btn, .dash-body .tbar-btn { font-size: 14px !important; }
.dash-body .tbar-region .dd-btn { letter-spacing: .04em; }
.dash-body .dtable td { font-size: 13px; }
.dash-body .ev-cell b { font-size: 14px; }
.dash-body .sales-kpis .dcard b { font-size: clamp(20px, 2vw, 26px); }
.dash-body .field input, .dash-body .field textarea, .dash-body .field .dd-btn { font-size: 15px; }
.tbar .evs-create { flex: none; }
@media (max-width: 600px) { .tbar .evs-create { order: -1; margin-left: auto; } }
.look-from { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; background: rgba(10,11,14,.66); color: #fff; font-size: 9.5px; text-transform: none; letter-spacing: .02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .look-img:not(:has(img)) { min-height: 180px; }

/* Cash Desk v2: settings-style nested pages */
.desk-top { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.desk-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--bone-dim); }
.desk-chip.is-open { color: var(--bone); border-color: color-mix(in srgb, var(--c-done) 45%, transparent); }
.desk-chip .desk-dot { width: 8px; height: 8px; }
.desk-navn { margin-left: auto; font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: linear-gradient(color-mix(in srgb, var(--bone) 8%, transparent), color-mix(in srgb, var(--bone) 8%, transparent)); color: var(--bone); }
.desk-sec .set-h { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 12px; font-size: 15px; font-weight: 600; }
.desk-sec .set-h small { font-size: 12px; font-weight: 400; }
.desk-sec header + .set-h { margin-top: 0; }
.desk-row1 { align-items: end; }
.desk-row1 .desk-evmeta { margin: 0 0 10px; }
.desk-lines2 { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.desk-l { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); transition: background-color .3s var(--glide); }
.desk-l.is-out { opacity: .45; }
.desk-l-t { display: grid; gap: 2px; min-width: 0; }
.desk-l-t b { font-size: 14.5px; font-weight: 550; }
.desk-l-t small { font-size: 12.5px; }
.desk-l.is-on .desk-l-t b { color: var(--accent-text); }
.desk-l-p { font-size: 13.5px; }
.desk-stepper2 { display: inline-flex; align-items: center; gap: 2px; }
.desk-stepper2 button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-btn); border: 1px solid var(--line); background: none; color: var(--bone); cursor: pointer; transition: border-color .2s, background-color .2s, transform .25s var(--spring); }
.desk-stepper2 button:hover:not(:disabled) { border-color: var(--bone); }
.desk-stepper2 button:active:not(:disabled) { transform: scale(.9); }
.desk-stepper2 button:disabled { opacity: .3; cursor: default; }
.desk-stepper2 output { min-width: 32px; text-align: center; font-family: var(--f-mono); font-size: 14px; }
.desk-l.is-on .desk-stepper2 output { color: var(--accent-text); animation: tabIn .3s var(--spring); }
.desk-pay2 { display: grid; gap: 14px; }
.desk-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.desk-pay2 .desk-total b { font-size: 28px; }
.desk-pay2 .set-row { align-items: end; }
.desk-pay2 .desk-change { align-self: end; }
.desk-acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.desk-lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.desk-form { display: grid; gap: 18px; }
.desk-form .set-row { align-items: end; }
.desk-dl { margin: 0; display: grid; border-top: 1px solid var(--line); }
.desk-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.desk-dl dt { color: var(--bone-dim); }
.desk-dl dd { margin: 0; }
.desk-dl .is-strong dd { color: var(--accent-text); font-weight: 650; font-size: 16px; }
.desk-done2 { display: grid; gap: 14px; animation: riseIn .45s var(--glide) both; }
.desk-done-h { display: flex; align-items: center; gap: 12px; }
.desk-done-h div { display: grid; }
.desk-done-h b { font-size: 16px; }
.desk-done2 .desk-done-ic { width: 42px; height: 42px; font-size: 22px; }
.desk-done2 .desk-give { text-align: left; }
.desk-done2 .desk-tix { max-height: none; }
.desk-done2 .desk-acts { justify-content: flex-start; }
.desk-empty2 { padding: 30px 10px; }
@media (max-width: 600px) {
  .desk-l { grid-template-columns: minmax(0, 1fr) auto; }
  .desk-stepper2 { grid-column: 1 / -1; justify-self: start; }
  .desk-acts .btn { flex: 1; justify-content: center; }
}

/* Create event step 1: what are you hosting */
.kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kind { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 22px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; animation: riseIn .45s var(--glide) both; animation-delay: calc(var(--i) * 35ms); transition: border-color .25s var(--glide), background-color .25s var(--glide), transform .35s var(--spring); }
.kind:hover { border-color: color-mix(in srgb, var(--bone) 30%, transparent); transform: translateY(-1px); }
.kind-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(color-mix(in srgb, var(--bone) 6%, transparent), color-mix(in srgb, var(--bone) 6%, transparent)); font-size: 21px; color: var(--bone-dim); transition: background-color .25s, color .25s; }
.kind-t { display: grid; gap: 2px; min-width: 0; }
.kind-t b { font-size: 15px; font-weight: 600; }
.kind-t small { font-size: 12.5px; color: var(--bone-dim); line-height: 1.4; }
.kind-ok { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); font-size: 13px; color: transparent; transition: background-color .25s, border-color .25s, color .25s, transform .35s var(--spring); }
.kind:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); }
.kind:has(input:checked) .kind-ic { background: var(--accent); color: var(--on-accent); }
.kind:has(input:checked) .kind-ok { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.05); }
.kind:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .kind-grid { grid-template-columns: 1fr; } }

/* Create event v3 */
.cq { display: grid; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.cq:first-of-type { border-top: 0; padding-top: 4px; }
.cq-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cq-h b { font-size: 15px; font-weight: 600; }
.cq-h small { font-size: 13px; }
.cq-n { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 10px; color: var(--accent-text); align-self: center; }
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acc { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .25s var(--glide), background-color .25s var(--glide), transform .35s var(--spring); }
.acc:hover { border-color: color-mix(in srgb, var(--bone) 30%, transparent); }
.acc-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(color-mix(in srgb, var(--bone) 6%, transparent), color-mix(in srgb, var(--bone) 6%, transparent)); font-size: 20px; color: var(--bone-dim); transition: background-color .25s, color .25s; }
.acc-t { display: grid; gap: 2px; min-width: 0; }
.acc-t b { font-size: 15px; font-weight: 600; }
.acc-t small { font-size: 12.5px; color: var(--bone-dim); line-height: 1.4; }
.acc:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); }
.acc:has(input:checked) .acc-ic { background: var(--accent); color: var(--on-accent); }
.acc:has(input:checked) .kind-ok { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.acc:has(input:focus-visible), .style:has(input:focus-visible), .ref:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.style-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.style { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--bone-dim); transition: border-color .25s, background-color .25s, color .25s, transform .3s var(--spring); }
.style .ti { font-size: 18px; }
.style:hover { color: var(--bone); border-color: color-mix(in srgb, var(--bone) 30%, transparent); }
.style:has(input:checked) { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.style:active { transform: scale(.97); }
.style-hint { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 13.5px; color: var(--bone-dim); min-height: 20px; }
.style-hint .ti { color: var(--accent-text); }
.acc-code { margin-top: 16px; display: grid; gap: 8px; animation: riseIn .35s var(--glide) both; }
.acc-code-in { display: flex; align-items: center; gap: 8px; }
.acc-code-in input { flex: 1; min-width: 0; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ref { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .25s, background-color .25s; }
.ref b { font-size: 14px; font-weight: 600; }
.ref small { font-size: 12px; color: var(--bone-dim); }
.ref:hover { border-color: color-mix(in srgb, var(--bone) 30%, transparent); }
.ref:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); }
.ref:has(input:checked) b { color: var(--accent-text); }
[data-refund-custom] { margin-top: 12px; }
[data-when-later] { margin-top: 14px; max-width: 360px; animation: riseIn .35s var(--glide) both; }
.pub-check { list-style: none; margin: 0; padding: 0; display: grid; }
.pub-check li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pub-check li .ti { font-size: 18px; }
.pub-check li.is-ok .ti { color: var(--c-done); }
.pub-check li.is-bad .ti { color: var(--c-danger); }
.pub-check li a { margin-left: auto; }
.co-nav-n { display: grid; gap: 2px; margin-right: auto; order: -1; }
.co-saved { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--bone-dim); text-transform: none; letter-spacing: .02em; min-height: 14px; transition: color .3s; }
.co-saved.is-saved { color: var(--c-done); }
.co-saved .link-btn { font-size: 10px; padding: 0; }
.co-nav { flex-wrap: wrap; }
.step-rail a.is-locked { opacity: .4; cursor: not-allowed; }
.step-rail a.is-locked .ti { margin-left: auto; font-size: 13px; }
.step-rail a.is-done b { color: var(--c-done) !important; -webkit-text-stroke-color: transparent !important; -webkit-text-fill-color: currentColor; }
.is-bad { animation: badShake .45s cubic-bezier(.36, .07, .19, .97); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea, .field.is-bad .dd-btn { border-color: var(--c-danger) !important; }
.cq.is-bad .cq-h b, .acc-grid.is-bad .acc, .ref-grid.is-bad .ref { border-color: color-mix(in srgb, var(--c-danger) 60%, transparent); }
@keyframes badShake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.create-grid.is-stepping .create-step:not([hidden]) { opacity: .35; filter: blur(1px); transition: opacity .2s, filter .2s; pointer-events: none; }
@media (max-width: 900px) { .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .acc-grid { grid-template-columns: 1fr; } .co-nav .btn { flex: 1 1 auto; } }
.step-rail a { grid-template-columns: 38px minmax(0, 1fr) auto; } .style { min-width: 0; font-size: 13.5px; padding: 10px; } .style span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1100px) { .step-rail a { grid-template-columns: auto auto auto; } }
.co-nav .co-nav-n { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: center; } .co-nav [data-save-draft] { margin-left: auto; }
.co-refund { display: flex; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--bone-dim); } .co-refund .ti { font-size: 16px; color: var(--bone-dim); } .co-refund b { color: var(--bone); font-weight: 550; }
.ev-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--glide); z-index: 1; pointer-events: none; } .ev-vid.is-in { opacity: 1; } .tk-art::after { z-index: 1; }
/* desk: buyer drawer, price drop, cash history */
.desk-more { margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.desk-more summary { display: flex; align-items: center; gap: 8px; padding: 13px 0; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 550; }
.desk-more summary::-webkit-details-marker { display: none; }
.desk-more summary .ti:first-child { color: var(--accent-text); font-size: 17px; }
.desk-more summary small { font-weight: 400; font-size: 12px; }
.desk-more-chev { margin-left: auto; transition: transform .35s var(--spring); }
.desk-more[open] .desk-more-chev { transform: rotate(180deg); }
.desk-more .set-row { padding-bottom: 16px; animation: riseIn .35s var(--glide) both; }
.desk-drop-t { border-top: 1px solid var(--line) !important; }
.desk-drop { animation: riseIn .35s var(--glide) both; }
.desk-dropnote { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 10.5px; color: var(--c-pending); text-transform: none; letter-spacing: .02em; }
.desk-total s { font-size: .6em; font-weight: 400; margin-right: 6px; }
.desk-was { display: block; font-size: 10.5px; color: var(--c-pending); text-decoration: none; }
.desk-hist-h { justify-content: space-between; margin-top: 30px !important; }
.desk-hist-h .link-arrow { font-size: 10px; font-weight: 400; }
.desk-recent2 { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.desk-recent2 li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; animation: riseIn .4s var(--glide) both; }
.desk-r-t { display: grid; min-width: 0; }
.desk-r-t small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-r-a { text-align: right; }
/* avatar photo, logout, notifications leaving */
.av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.acct-btn, .mnav-av, .dash-avatar, .set-av { overflow: hidden; }
.set-av { overflow: visible; }
.set-av > .av-img { border-radius: 50%; }
.set-av.is-busy::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.set-av-edit { cursor: pointer; transition: transform .3s var(--spring), background-color .2s; }
.set-av-edit:hover { transform: scale(1.08); background: var(--accent); color: var(--on-accent); }
.set-av-rm { position: absolute; left: 148px; bottom: -36px; font-size: 10px; }
.dash-side-foot { flex-wrap: wrap; }
.dash-logout { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: color-mix(in srgb, var(--c-danger) 80%, var(--bone)); cursor: pointer; font-size: 11px; transition: color .25s, transform .3s var(--spring); }
.dash-logout:hover { color: var(--c-danger); transform: translateX(2px); }
.notif-list li.is-leaving { animation: notifOut .32s var(--glide) forwards; }
@keyframes notifOut { to { opacity: 0; transform: translateX(24px); height: 0; } }
.dash-logout { order: 3; flex-basis: 100%; justify-content: flex-start; padding-top: 10px; }

/* avatar photo fills its frame whatever the photo's shape */
.acct-btn, .dash-avatar, .mnav-av { position: relative; overflow: visible !important; }
.acct-btn > .av-img, .dash-avatar > .av-img, .mnav-av > .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }
.set-av > .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.acct-btn .acct-badge { z-index: 1; }

/* side tabs (settings, cash desk): hover fills, active underlines */
.set-nav a { background: none; outline: none; transition: background-color .25s var(--glide), color .25s; }
.set-nav a:hover { background: linear-gradient(color-mix(in srgb, var(--bone) 7%, transparent), color-mix(in srgb, var(--bone) 7%, transparent)) !important; }
.set-nav a[aria-current="page"] { background: none !important; box-shadow: none !important; border: 0 !important; outline: none !important; }
.set-nav a[aria-current="page"] b { color: var(--accent-text) !important; text-decoration: underline 2px var(--accent); text-underline-offset: 7px; }
.set-nav a[aria-current="page"] > .ti:first-child { background: linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)) !important; color: var(--accent-text) !important; }
.set-nav a[aria-current="page"]::before { background: var(--accent) !important; }
.set-nav a:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
.set-nav-l { font-weight: 500; }

/* where: address search */
.loc { position: relative; }
.loc-in { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); transition: border-color .25s; }
.loc-in:focus-within { border-color: var(--accent); }
.loc-in > .ti { font-size: 20px; color: var(--bone-dim); }
.loc-in input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; padding-inline: 0 !important; background: none; }
.loc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.loc-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - 26px); margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6); animation: riseIn .25s var(--glide) both; max-height: 340px; overflow-y: auto; }
.loc-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.loc-opt .ti { color: var(--bone-dim); }
.loc-opt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-opt small { color: var(--bone-dim); font-size: 12.5px; }
.loc-opt em, .loc-card-t em { font-style: normal; font-size: 9.5px; color: var(--accent-text); }
.loc-opt:hover, .loc-opt.is-on { background: linear-gradient(color-mix(in srgb, var(--bone) 7%, transparent), color-mix(in srgb, var(--bone) 7%, transparent)); }
.loc-msg { padding: 12px 10px; font-size: 13px; color: var(--bone-dim); }
.loc-attr { padding: 6px 10px 2px; font-size: 9px; color: var(--bone-dim); text-align: right; text-transform: none; letter-spacing: .02em; }
.loc-picked { display: grid; gap: 10px; animation: riseIn .35s var(--glide) both; }
.loc-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 12px; background: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
.loc-card-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 19px; }
.loc-card-t { display: grid; gap: 2px; min-width: 0; }
.loc-card-t b { font-size: 15px; }
.loc-card-t small { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-map { height: 200px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.loc-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.02); }
.loc-manual { justify-self: start; }

/* settings: preferences groups, team list, password, verify jump */
.set-group { padding-bottom: 8px; }
.set-group + .set-group { margin-top: 10px; }
.set-h--first { margin-top: 4px !important; }
.set-hint--gap { margin-top: 14px !important; line-height: 1.5; }
.set-sec .set-row + .set-row { margin-top: 22px; }
.field.is-target input, .field.is-target .dd-btn { border-color: var(--accent) !important; }
.field.is-target { animation: targetGlow 1.6s var(--glide); border-radius: 6px; }
@keyframes targetGlow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.set-verify { cursor: pointer; transition: border-color .25s, transform .35s var(--spring); }
.set-verify:hover { transform: translateY(-1px); border-color: var(--accent); }
.tm-list { display: grid; border-top: 1px solid var(--line); }
.tm-head, .tm-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .8fr) 40px; gap: 16px; align-items: center; }
.tm-head { padding: 10px 4px; font-size: 10px; color: var(--bone-dim); border-bottom: 1px solid var(--line); }
.tm-row { padding: 14px 4px; border-bottom: 1px solid var(--line); animation: riseIn .4s var(--glide) both; animation-delay: calc(var(--i) * 40ms); transition: background-color .25s; }
.tm-row:hover { background: linear-gradient(color-mix(in srgb, var(--bone) 3%, transparent), color-mix(in srgb, var(--bone) 3%, transparent)); }
.tm-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-av { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h, 40) 55% 45%); color: #fff; font-weight: 700; font-size: 14px; }
.tm-id, .tm-role { display: grid; gap: 2px; min-width: 0; }
.tm-id b, .tm-role b { font-size: 14.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-id small, .tm-role small { font-size: 12.5px; color: var(--bone-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.tm-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-done); }
.tm-st[data-st="invited"] { color: var(--c-pending); }
.tm-st[data-st="invited"] i { background: var(--c-pending); }
.tm-st[data-st="active"] { color: var(--c-done); }
.tm-rm { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-btn); border: 1px solid var(--line); background: none; color: var(--bone-dim); cursor: pointer; transition: color .2s, border-color .2s, transform .3s var(--spring); }
.tm-rm:hover { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 50%, transparent); }
.tm-rm:active { transform: scale(.92); }
@media (max-width: 700px) {
  .tm-head { display: none; }
  .tm-row { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 8px; }
  .tm-who { grid-column: 1; }
  .tm-rm { grid-column: 2; grid-row: 1; }
  .tm-role, .tm-st { grid-column: 1 / -1; padding-left: 52px; }
}
.pw-form { display: grid; gap: 18px; max-width: 520px; }
#set-password .emd-back { margin-bottom: 14px; display: inline-flex; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.desk-day + .desk-day { margin-top: 26px; } .desk-day-h { display: flex; align-items: baseline; gap: 12px; padding: 4px 2px 12px; } .desk-day-h > b:first-child { font-size: 15px; } .desk-day-t { margin-left: auto; font-size: 16px; color: var(--accent-text); } .desk-day .dcard { border-radius: 12px; }
.desk-day .table-scroll { min-height: 0 !important; }
a.acct-btn { display: grid; place-items: center; text-decoration: none; }

/* where: map + address fields */
.loc-detail { display: grid; gap: 12px; animation: riseIn .35s var(--glide) both; }
.loc-detail .loc-map { height: 280px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--ink-3); position: relative; z-index: 0; }
.loc-detail .leaflet-container { font-family: var(--f-display); background: var(--ink-3); }
.loc-detail .leaflet-control-attribution { font-size: 9px; }
:root:not([data-theme="light"]) .loc-detail .leaflet-tile-pane { filter: brightness(.82) contrast(1.06) saturate(.85); }
.loc-pin span { display: grid; place-items: center; width: 36px; height: 44px; font-size: 38px; line-height: 1; color: var(--accent); filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); transition: transform .3s var(--spring); }
.loc-pin span i { color: #f5c64f; -webkit-text-stroke: 1px #17130b; }
.leaflet-dragging .loc-pin span { transform: translateY(-6px) scale(1.06); }
.loc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin-top: 4px; }
.loc-wide { grid-column: 1 / -1; }
.field.is-ask label { color: var(--accent-text); }
.field.is-ask input { border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important; }
.loc-again { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.loc-nomap { padding: 20px; font-size: 13px; }
@media (max-width: 600px) { .loc-fields { grid-template-columns: 1fr; } .loc-detail .loc-map { height: 240px; } }
.venue-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* Accessibility: the giant footer wordmark is decoration, drawn as generated content so checkers don't read it as low-contrast text */
.footer-giant::before { content: attr(data-word); }
.step-legend h2.step-t { margin: 0; line-height: inherit; }
@media (prefers-reduced-motion: reduce) { .intro-statement .word { opacity: 1; } }
/* Accessibility: solid gold under the avatar gradients so contrast checkers read dark-on-gold */
.acct-btn, .dash-avatar, .set-av, .mnav-av { background-color: #e8b23a; }

/* ==========================================================================
   Accessibility: let contrast checkers (WAVE) see the colours people see
   ========================================================================== */
/* Marker words: readable light text until the gold sweeps in, then dark on gold.
   The 1% gold tint is invisible; it tells checkers the word sits on gold. */
.cta-title em, .shout span { color: var(--bone); transition: background-size 1s .25s var(--ease-out), color .35s .55s; }
.section-title em, .page-title em, .is-in > em, .reveal.is-in em, .cta-title.is-in em,
.shout.is-in span, .is-in .shout span, .page-head .shout span { color: var(--on-accent); background-color: color-mix(in srgb, var(--accent) 1%, transparent); }
.host-band .shout span { color: inherit; background-color: transparent; }
/* Cards painted with gradients: an invisible tint of their real colour */
.ptk-stub { background-color: color-mix(in srgb, var(--ps) 1%, transparent); }
.pcard { background-color: color-mix(in srgb, var(--m1) 1%, transparent); }
.wallet-gate-stub { background-color: rgba(245, 198, 79, .01); }
.poster { background-color: rgba(10, 8, 6, .01); }
.cidx-item[aria-pressed="true"] .cidx-word, .cidx-item:has(input:checked) .cidx-word, .cidx-item[aria-selected="true"] .cidx-word { background-color: color-mix(in srgb, var(--accent) 1%, transparent); }
.ov-greet span, .alerts-inner .cta-title em, .st-solid em, .auth-title em, .wg-title em, .wl-h2 em, .wl-band em { background-color: color-mix(in srgb, var(--accent) 1%, transparent); }
.poster { background-color: rgba(10, 8, 6, .01) !important; }
.pcard-meta { color: color-mix(in srgb, var(--ink-c) 86%, transparent); }
.seg-radio input:checked + span { background-color: color-mix(in srgb, var(--accent) 1%, transparent); }
.dash-tabbar a:not([aria-current]), .dash-tabbar button { color: color-mix(in srgb, var(--bone) 78%, transparent); }
select option { background-color: var(--ink); color: var(--bone); }

/* Buying a template (white-label page) and the account step after it */
.wl-buy { display: grid; justify-items: center; gap: 8px; margin-top: 18px; text-align: center; }
.wl-buy small { font-size: 11px; }
.wl-buy-sheet .seg { margin-bottom: 10px; }
.wl-dom { display: flex; align-items: center; gap: 6px; }
.wl-dom input { flex: 1; }
.wl-buy-sheet .slot-sum { margin: 0; display: grid; gap: 6px; padding: 14px; border-radius: 10px; background: color-mix(in srgb, var(--bone) 5%, transparent); }
.wl-buy-sheet .slot-sum div { display: flex; justify-content: space-between; gap: 12px; }
.wl-buy-sheet .slot-sum dt { color: var(--bone-dim); }
.wl-buy-sheet .slot-sum dd { margin: 0; }
.wl-buy-sheet .slot-total { padding-top: 8px; border-top: 1px dashed var(--line); }
.wl-buy-sheet .slot-total dt, .wl-buy-sheet .slot-total dd { color: var(--bone); font-weight: 600; }
.wl-buy-sheet .slot-demo { margin: 0; font-size: 11px; text-align: center; }
.auth-paid { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; font-size: 12px; line-height: 1.5; color: #2fbf71; background: rgba(47, 191, 113, .1); }
.auth-paid .ti { font-size: 16px; margin-top: 1px; }
.auth-paid b { color: var(--bone); font-weight: 600; }

/* Branded loading cards retain their shimmer with the app mark behind it. */
.skel .k,.skel .r{position:relative;overflow:hidden}
.skel .k::after,.skel .r::after{content:"";position:absolute;inset:0;background:url('/icons/mark.svg') center / auto 52% no-repeat;opacity:.2;pointer-events:none}
.skel .r::after{background-position:20px center;background-size:auto 55%;opacity:.14}
@media(prefers-reduced-motion:reduce){.skel i{animation:none}}

/* Muted label palette; action colors and red alerts retain their emphasis. */
:is(.tx-cash, .tx-pill, .evs-pill, .status-pill, .team-st, .tm-st, .nav-till, .desk-chip) {
  --c-done: #91b8a4;
  --c-progress: #91abc9;
  --c-pending: #c5b08a;
  --st-completed: #91b8a4;
  --st-upcoming: #91abc9;
  --st-scheduled: #91b8a4;
  --st-paid: #91b8a4;
  --st-refunded: #b8a5dc;
  --st-paused: #c5b08a;
}
:root[data-theme="light"] :is(.tx-cash, .tx-pill, .evs-pill, .status-pill, .team-st, .tm-st, .nav-till, .desk-chip) {
  --c-done: #426b57;
  --c-progress: #496586;
  --c-pending: #7b623a;
  --st-completed: #426b57;
  --st-upcoming: #496586;
  --st-scheduled: #426b57;
  --st-paid: #426b57;
  --st-refunded: #694f8c;
  --st-paused: #7b623a;
}
/* Higher-specificity ticket labels use the same palette. */
.tk-chips .status-pill[data-status="onsale"] { color: var(--c-done); }
.tk-chips .status-pill[data-status="invite"] { color: var(--st-refunded); }

/* Event page states: not found, not published, scheduled, suspended, website-only */
.show-hero.show-hero--state { min-height: min(72vh, 640px) !important; align-items: center; justify-content: center; padding: 120px 0 64px; }
.show-hero--state::after { content: none; }
.show-hero--state > .wrap { position: relative; z-index: 2; }
.show-hero--state .state-card { margin: 0 auto; }
.show-hero--state .eyebrow { margin: 0; }
.ev-preview-bar { position: sticky; top: 64px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; padding: 10px 16px; font-size: 12px; color: var(--ink, #0f1115); background: var(--accent, #f5c64f); }
.ev-preview-bar a { margin-left: auto; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* a refunded pass: no entry code, marked void */
.ticket-void { display: grid; place-items: center; padding: 24px; text-align: center; color: #ff6b6b; background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 77, 77, .06) 12px 24px); }
.ticket-void p { margin: 0; font-size: 12px; }