/* ==========================================================================
   mokkh. – replica of mookh.com design system
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --font-general: 'General Sans', 'Inter', system-ui, sans-serif;
  --font-display: 'Cabinet Grotesk', 'General Sans', system-ui, sans-serif;

  --bg: #f4f0e6;          /* brand beige */
  --bg-soft: #efeadd;
  --surface: #ffffff;
  --surface-2: #faf8f2;
  --foreground: #0b0d0e;
  --muted: #656a6a;
  --muted-2: #8a8f8e;
  --border: #e3ded1;
  --border-strong: #d6d0bf;

  --brand-yellow: #f2e09d;
  --brand-yellow-strong: #ecd07a;
  --graphite: #1c2022;
  --graphite-2: #3a4043;
  --flag-ink: #0b0d0e;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .10);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, .18);

  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --maxw: 1280px;

  --header-h: 68px;
  --drawer-w: 400px;
  --toast-z: 999999;
}

.dark {
  --bg: #0b0d0e;
  --bg-soft: #0e1113;
  --surface: #15191b;
  --surface-2: #191e20;
  --foreground: #edeae1;
  --muted: #99a0a0;
  --muted-2: #767d7d;
  --border: #262b2e;
  --border-strong: #33393c;

  --brand-yellow: #d9bd6a;
  --brand-yellow-strong: #e2cb82;
  --graphite: #e8e5dc;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-general);
  font-size: 15px;
  line-height: 1.55;
  color: var(--foreground);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

::selection { background: var(--brand-yellow); color: var(--flag-ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  transition: transform .12s ease, filter .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--foreground); color: var(--bg); }
.btn-ink:hover { box-shadow: var(--shadow-md); filter: brightness(1.12); }
.btn-ink.dark-only { background: #0b0d0e; color: #fff; }
.dark .btn-ink.dark-only { background: #fff; color: #0b0d0e; }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--foreground); }
.btn-outline:hover { background: var(--surface-2); }
.btn-yellow { background: var(--brand-yellow); color: var(--flag-ink); box-shadow: var(--shadow-sm); }
.btn-yellow:hover { filter: brightness(1.04); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 10px 30px rgba(0,0,0,.06);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto;
  height: var(--header-h);
  display: flex; align-items: center; gap: 20px; padding: 0 24px;
}
@media (max-width: 640px) { .header-inner { padding: 0 16px; gap: 12px; } }

.logo { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo img { height: 30px; width: auto; }
.logo .logo-img-dark { display: block; }
.logo .logo-img-light { display: none; }
.dark .logo .logo-img-dark { display: none; }
.dark .logo .logo-img-light { display: block; }

.main-nav { display: flex; align-items: center; gap: 22px; margin-left: 8px; }
.main-nav a {
  font-size: 14.5px; font-weight: 500; color: var(--muted);
  padding: 6px 2px; position: relative; transition: color .15s ease;
}
.main-nav a:hover { color: var(--foreground); }
.main-nav a[aria-current] { color: var(--foreground); }
.main-nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--foreground);
}
@media (max-width: 1020px) { .main-nav { display: none; } }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* market select (pill) */
.pill-menu {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 14px; font-weight: 500; color: var(--foreground);
  transition: background .15s ease, border-color .15s ease;
}
.pill-menu:hover { border-color: var(--border-strong); }
.pill-menu svg { width: 15px; height: 15px; flex-shrink: 0; }
.pill-menu .chev { margin-left: -2px; opacity: .6; }

/* cart button */
.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--foreground); transition: background .15s ease, border-color .15s ease;
}
.cart-btn:hover { border-color: var(--border-strong); }
.cart-btn svg { width: 18px; height: 18px; }
.cart-count {
  position: absolute; top: -4px; right: -6px;
  min-width: 19px; height: 19px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--brand-yellow-strong);
  color: var(--flag-ink); font-size: 11px; font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg);
}

/* login button + dropdown */
.login-wrap { position: relative; }
.login-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 14px; font-weight: 600; color: var(--foreground);
}
.login-btn:hover { border-color: var(--border-strong); }
.login-btn .chev { width: 14px; height: 14px; opacity: .6; }

.login-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 340px; background: var(--surface);
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); padding: 10px;
  transform-origin: top right;
  animation: pop .16s cubic-bezier(.2,.8,.2,1);
  display: none;
}
.login-panel.open { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.login-tile {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px; border-radius: 12px; transition: background .14s ease;
}
.login-tile:hover { background: var(--surface-2); }
.login-tile img { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.login-tile b { display: block; font-size: 14px; margin-bottom: 2px; }
.login-tile p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.login-panel .or { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); margin: 8px 0; }

/* theme toggle */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--foreground);
}
.theme-toggle:hover { border-color: var(--border-strong); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: block; }
.theme-toggle .moon { display: none; }
/* desktop-only Sign Up (Free) in the header row. Height is pinned to 40px to
   match .pill-menu / .cart-btn / .login-btn / .theme-toggle, since .btn is 42px.
   Shown from 1120px only: between 1021px (where the desktop nav appears) and
   ~1150px the row cannot fit a text button without shrinking the icon controls
   and overflowing .header-inner. The Log In dropdown and the mobile menu keep
   their own Sign Up CTA. */
.header-signup { display: none; height: 40px; }
@media (min-width: 1120px) { .header-signup { display: inline-flex; } }
.dark .theme-toggle .sun { display: none; }
.dark .theme-toggle .moon { display: block; }

@media (max-width: 720px) {
  .login-btn span.txt { display: none; }
  .login-btn { padding: 0 12px; }
}

/* ==========================================================================
   Mobile bottom nav (Discover)
   ========================================================================== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
}
@media (max-width: 900px) { .bottom-nav { display: flex; } }
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 500; color: var(--muted); padding: 4px 0;
}
.bottom-nav a svg { width: 20px; height: 20px; }
.bottom-nav a[aria-current] { color: var(--foreground); }
body.has-bottom-nav main, body.has-bottom-nav footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ==========================================================================
   Cart drawer
   ========================================================================== */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 10, 10, .42);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  width: min(var(--drawer-w), 92vw); background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(102%); transition: transform .28s cubic-bezier(.3,.9,.3,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.drawer-head h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.drawer-close { width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--foreground); display: inline-flex; align-items: center; justify-content: center; }
.drawer-close:hover { background: var(--surface-2); }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px 22px; }
.drawer-foot { padding: 16px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }

.cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 10px; gap: 8px; }
.cart-empty svg { width: 40px; height: 40px; color: var(--muted-2); margin-bottom: 8px; }
.cart-empty b { font-size: 16px; }
.cart-empty p { margin: 0; color: var(--muted); font-size: 13.5px; }
.cart-empty .btn { margin-top: 16px; }

.cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.cart-item:last-of-type { border-bottom: none; }
.cart-item-img { width: 74px; height: 92px; border-radius: 10px; background: var(--surface-2); overflow: hidden; flex-shrink: 0; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-main { flex: 1; min-width: 0; }
.cart-item-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.cart-item-tier { font-size: 12px; color: var(--muted); margin-top: 1px; }
.cart-item-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.qty-stepper { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; }
.qty-stepper button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--foreground); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.qty-stepper button:hover { background: var(--surface-2); }
.qty-stepper .q { min-width: 22px; text-align: center; font-size: 13px; font-weight: 600; }
.cart-item-price { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-item-remove { margin-left: 8px; background: none; border: 0; color: var(--muted-2); font-size: 12px; text-decoration: underline; }
.cart-item-remove:hover { color: var(--foreground); }

.totals-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 13.5px; color: var(--muted); }
.totals-row b { color: var(--foreground); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* toast */
.toast-wrap { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: var(--toast-z); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.toast {
  background: var(--graphite); color: #fff; border-radius: 10px;
  padding: 12px 18px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  animation: toast-in .22s ease;
}
.dark .toast { background: #fff; color: #0b0d0e; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); margin-top: 72px; background: var(--bg-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 56px 0 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.footer-brand p { color: var(--muted); font-size: 14px; max-width: 260px; margin: 14px 0 0; }
.footer-socials { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.footer-socials a { width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: color .15s ease, border-color .15s ease; }
.footer-socials a:hover { color: var(--foreground); border-color: var(--border-strong); }
.footer-socials svg { width: 15px; height: 15px; }
.footer-col h4 { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--muted); }
.footer-col a:hover { color: var(--foreground); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding: 18px 0; font-size: 13px; color: var(--muted-2);
}
.footer-bottom a:hover { color: var(--foreground); }
.footer-bottom .sep { opacity: .6; }

/* ==========================================================================
   Discover page
   ========================================================================== */
.hero { padding: 56px 0 8px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 6vw, 74px); letter-spacing: -.04em; line-height: 1.02;
  max-width: 900px; margin: 0; text-wrap: balance;
}
.hero .accent { color: var(--brand-yellow-strong); }
.dark .hero .accent { color: var(--brand-yellow); }

/* Desktop (>=1120px): let the hero heading use the full .wrap width instead of the
   900px cap, and pin the line break so it always reads as two lines with
   "experience" alone on the second. The explicit <br> is required because
   text-wrap:balance on the base rule would otherwise rebalance the two lines and
   pull "event" down onto line 2. Below 1120px this is inert and the base .hero h1
   rule - typography, font-size, letter-spacing, line-height - is left untouched. */
.hero-br { display: none; }
@media (min-width: 1120px) {
  .hero h1 { max-width: none; }
  .hero-br { display: inline; }
}

/* category chips */
.cat-row {
  display: flex; gap: 10px; overflow-x: auto; padding: 26px 24px 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cat-row::-webkit-scrollbar { display: none; }
.cat-row .wrap { padding: 0; margin: 0 auto; display: contents; }
.cat-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.cat-chip small { font-size: 11px; opacity: .7; }
.cat-chip:hover { border-color: var(--border-strong); color: var(--foreground); }
.cat-chip.active { background: var(--foreground); color: var(--bg); border-color: var(--foreground); }
.cat-chip.active small { opacity: .6; }

.section { padding-top: 44px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.section-head a { font-size: 14px; color: var(--muted); font-weight: 500; }
.section-head a:hover { color: var(--foreground); }

/* explore search */
.search-field {
  position: relative; display: flex; align-items: center; gap: 10px;
  max-width: 520px; margin: 0 0 20px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--muted);
}
.search-field:focus-within { border-color: var(--border-strong); color: var(--foreground); }
.search-field svg { flex-shrink: 0; }
.search-field input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  font: inherit; font-size: 14px; color: var(--foreground);
}
.search-field input::placeholder { color: var(--muted); }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* primary hero search */
.search-field.hero-search {
  max-width: 640px; margin: 22px 0 0; padding: 13px 18px;
  background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm);
}
.search-field.hero-search svg { width: 19px; height: 19px; }
.search-field.hero-search input { font-size: 15px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }
@media (max-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 1120px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; width: 100vw; margin-left: calc(50% - 50vw); padding: 0 12px; } }

/* featured infinite marquee ("Top picks from our staff") */
/* touch-action:pan-y keeps vertical panning with the browser (so vertical page
   scrolling is untouched) and hands horizontal movement to the drag handler in
   js/app.js; user-select:none stops iOS selecting card text mid-drag. Both are
   inert for a mouse. */
.mkh-marquee { overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mkh-marquee-drag { will-change: transform; }
.mkh-marquee-track { display: flex; width: max-content; will-change: transform; animation: mkh-marquee-scroll var(--mkh-speed, 60s) linear infinite; }
/* set only by non-mouse pointers (js/app.js), so a mouse press on desktop is unaffected */
.mkh-marquee-track.is-held { animation-play-state: paused; }
/* desktop mouse hover (js/app.js). A separate class from is-held on purpose: the
   tap-hold is cleared unconditionally on pointerup/pageshow/visibilitychange,
   which would resume the marquee from under a resting cursor. */
.mkh-marquee-track.is-hover { animation-play-state: paused; }
.mkh-mk { display: flex; gap: 20px; padding-right: 20px; }
.mkh-marquee .event-card { width: 258px; flex: 0 0 auto; }
@keyframes mkh-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 620px) {
  .mkh-mk { gap: 12px; padding-right: 12px; }
  .mkh-marquee .event-card { width: 158px; }
}
@media (min-width: 1120px) { .mkh-marquee { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 12px; } }
/* No prefers-reduced-motion override for the marquee: the looping track is the
   feature, not decoration, and it is the only thing users get at <=900px. The
   duplicated .mkh-mk group is what makes the loop seamless, so it must stay
   visible here too. */

/* event card */
.event-card { position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.event-card:hover .card-img img { transform: scale(1.045); }
.card-img .ticket-strip { position: absolute; top: 0; right: 0; bottom: 0; width: 66px; display: flex; align-items: center; justify-content: center; }
.date-badge {
  position: absolute; left: 18px; top: 16px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; padding: 6px 8px; text-align: center;
  background: rgba(255,255,255,.94); border-radius: 12px; color: #0b0d0e; box-shadow: var(--shadow-sm);
}
.date-badge .m { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1; }
.date-badge .d { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.date-badge .w { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1; opacity: .7; }
@media (max-width: 620px) { .card-img .ticket-strip { width: 40px; } }

.card-body { padding: 14px 14px 16px; }
.card-title { font-size: 15.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-venue { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.card-venue img.flag { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; }
.card-price { margin-top: 12px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-price .off { display: block; }

/* 'ticket cutout' hero (features section treatments) */
.hero-ticket { position: relative; overflow: hidden; border-radius: var(--radius-lg); }

/* ==========================================================================
   Event detail page
   ========================================================================== */
.back-top { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.back-top:hover { color: var(--foreground); }
.event-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.event-title { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 6px 0 12px; text-transform: uppercase; }
.event-organizer { color: var(--muted); font-size: 14px; }
.event-organizer a { color: var(--foreground); font-weight: 600; border-bottom: 1px solid var(--border-strong); }
.follow-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: transparent; font-size: 13px; font-weight: 600; color: var(--foreground); }
.follow-btn:hover { background: var(--surface-2); }
.follow-btn.following { color: var(--brand-yellow-strong); }
.dark .follow-btn.following { color: var(--brand-yellow); }

.event-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin: 28px 0; }
@media (max-width: 640px) { .event-meta { grid-template-columns: 1fr; } }
.meta-cell { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--surface); }
.meta-cell svg { width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0; color: var(--brand-yellow-strong); }
.dark .meta-cell svg { color: var(--brand-yellow); }
.meta-cell small { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); margin-bottom: 3px; }
.meta-cell a.tz { color: var(--foreground); font-size: 14.5px; font-weight: 500; }
.meta-cell p { margin: 0; font-size: 14.5px; color: var(--muted); }
.meta-cell b { color: var(--foreground); font-weight: 600; }

.event-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
@media (max-width: 980px) { .event-layout { grid-template-columns: 1fr; } }

.event-desc p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.read-more { background: none; border: 0; color: var(--foreground); font-weight: 600; font-size: 13.5px; padding: 0; }
.read-more:hover { text-decoration: underline; }

.poster-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
.poster-row img { width: 100%; border-radius: var(--radius-lg); }
.poster-main img { border-radius: var(--radius-lg); }
.posters { display: grid; gap: 16px; }

/* ticketing panel */
.ticket-panel { position: sticky; top: calc(var(--header-h) + 20px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.tp-head { padding: 20px 22px; border-bottom: 1px solid var(--border); }
.tp-head h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.tp-head p { margin: 0; font-size: 13px; color: var(--muted); }
.tp-body { padding: 8px 0; max-height: 44vh; overflow-y: auto; }
.tier { display: flex; flex-direction: column; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--border); }
.tier:last-child { border-bottom: 0; }
.tier-row { display: flex; align-items: center; gap: 14px; }
.tier-info { flex: 1; min-width: 0; }
.tier-name { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.tier-mode { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
.tier-meta { display: flex; align-items: center; gap: 12px; }
.tier-price { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier .tinfo { font-size: 12px; color: var(--muted); text-decoration: underline; white-space: nowrap; }
.tier .tinfo:hover { color: var(--foreground); }
.add-btn { width: 100%; height: 84px; border-radius: 18px; border: 1.5px solid #777777; background: #ffffff; color: #292929; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; font-family: var(--font-general); font-size: 24px; font-weight: 600; padding: 0; margin: 0; transition: background-color .18s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; }
.add-btn .add-plus { font-size: 24px; font-weight: 500; line-height: 1; }
.add-btn:hover { background: #f5f5f5; }
.add-btn:active { transform: scale(.98); }
.add-btn.added { background: #f5f5f5; border-color: #292929; }
.tp-foot { padding: 16px 22px; border-top: 1px solid var(--border); background: var(--surface-2); }
.sum-lines { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.sum-lines b { color: var(--foreground); }
.sum-total { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; margin: 8px 0 14px; }
.tp-foot .btn { width: 100%; }
.tp-foot .hint { text-align: center; font-size: 12px; color: var(--muted-2); margin-top: 10px; }

/* share strip */
.share-row { display: flex; gap: 10px; margin-top: 22px; }
.share-row a, .share-row .share-btn { width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; padding: 0; cursor: pointer; text-decoration: none; }
.share-row a:hover, .share-row .share-btn:hover { color: var(--foreground); }
.share-row .share-btn svg { width: 17px; height: 17px; }

/* share modal platform grid */
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.share-grid a, .share-grid button {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 10px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--foreground);
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.share-grid a:hover, .share-grid button:hover { border-color: var(--border-strong); background: var(--surface); }
@media (max-width: 420px) { .share-grid { grid-template-columns: 1fr; } }

/* tier 'ticket info' modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(8,10,10,.5); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { width: min(460px, 100%); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 26px; animation: pop .16s cubic-bezier(.2,.8,.2,1); }
.modal h4 { margin: 0 0 10px; font-family: var(--font-display); font-size: 18px; }
.modal p { margin: 0 0 6px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.modal .modal-x { position: absolute; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; }
.modal-x { border: 0; background: transparent; color: var(--muted-2); font-size: 22px; }

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
@media (max-width: 940px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-signin {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 18px 0; padding: 12px 16px; font-size: 13.5px;
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted);
}
.checkout-signin a { color: var(--foreground); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.checkout-signin a:hover { text-decoration-thickness: 2px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.field input, .field select {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); color: var(--foreground); font-size: 14.5px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--foreground); box-shadow: 0 0 0 3px rgba(11,13,14,.08); }
.card-pay { border: 1px solid var(--border); border-radius: 14px; padding: 4px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.card-pay:hover { border-color: var(--border-strong); }
.card-pay input { accent-color: var(--foreground); }
.card-pay .pm-label { flex: 1; font-weight: 600; }
.card-pay .pm-sub { color: var(--muted); font-size: 12px; }
.order-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.order-summary h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: 17px; }
.os-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); padding: 8px 0; border-bottom: 1px dashed var(--border); }
.os-row b { color: var(--foreground); text-align: right; }
.os-row:last-child { border-bottom: 0; }
.os-total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 12px; display: flex; justify-content: space-between; font-size: 16px; font-weight: 750; }

/* success / ticket */
.ticket-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.ticket-card-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px dashed var(--border-strong); }
.ticket-card-body { display: grid; grid-template-columns: 1fr 130px; gap: 0; }
@media (max-width: 620px) { .ticket-card-body { grid-template-columns: 1fr; } }
.ticket-info { padding: 22px; }
.ticket-info b.t { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; margin-bottom: 6px; }
.ticket-info .row { font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.ticket-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px dashed var(--border-strong); padding: 18px; }
@media (max-width: 620px) { .ticket-qr { border-left: 0; border-top: 1px dashed var(--border-strong); } }
.qr-svg { width: 110px; height: 110px; }
.notch-l, .notch-r { position: absolute; top: 50%; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); transform: translateY(-50%); }
.notch-l { left: -17px; } .notch-r { right: -17px; }

/* ==========================================================================
   Marketing pages
   ========================================================================== */
.page-hero { padding: 64px 0 16px; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 62px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; margin: 0 0 14px; text-wrap: balance; }
.page-hero p.lede { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-2); padding: 18px 0 0; }
.breadcrumb a:hover { color: var(--foreground); }

.tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px; margin: 28px 0; }
.tabs button { height: 34px; padding: 0 18px; border-radius: var(--radius-pill); border: 0; background: transparent; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.tabs button.on { background: var(--foreground); color: var(--bg); }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 20px 0 10px; }
@media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.feature-card .fc-body { padding: 24px; }
.feature-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.feature-card p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }
.feature-card .fc-tag { font-size: 12px; color: var(--brand-yellow-strong); font-weight: 700; margin-bottom: 8px; }
.dark .feature-card .fc-tag { color: var(--brand-yellow); }
.feature-card .fc-img { aspect-ratio: 16/9; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 13px; border-top: 1px solid var(--border); }

.pricing-band { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: 48px 0; }
@media (max-width: 820px) { .pricing-band { grid-template-columns: 1fr; } }
.price-stat { font-family: var(--font-display); font-weight: 800; font-size: 96px; letter-spacing: -.05em; line-height: 1; }
.price-stat small { font-size: 22px; font-weight: 600; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.checks svg { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: var(--brand-yellow-strong); }
.dark .checks svg { color: var(--brand-yellow); }
.checks small { color: var(--muted); display: block; font-size: 13px; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; background: none; border: 0; text-align: left; font-size: 16px; font-weight: 600; color: var(--foreground); }
.faq-q svg { width: 18px; height: 18px; transition: transform .2s ease; flex-shrink: 0; opacity: .7; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; }
.faq-a-in p { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 720px; }

/* features screenshot placeholder tiles */
.mock-shot { width: 100%; aspect-ratio: 16/9; background: var(--surface-2); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 13px; }

/* about page numbers */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 30px 0; }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.stat .n { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--brand-yellow-strong); }
.dark .stat .n { color: var(--brand-yellow); }
.stat .l { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 34px 0; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.split-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.split-card h3 { font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.split-card .kicker { color: var(--brand-yellow-strong); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.dark .split-card .kicker { color: var(--brand-yellow); }
.split-card ul { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 12px; }

/* legal */
.legal-doc { max-width: 760px; margin: 0 auto; padding-bottom: 30px; }
.legal-doc h2 { font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em; margin: 34px 0 10px; }
.legal-doc p, .legal-doc li { color: var(--muted); font-size: 14.5px; line-height: 1.75; }
.legal-doc .tof { font-size: 12.5px; color: var(--muted-2); }
.legal-doc ul { padding-left: 18px; }

.cal-month { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 26px 0 14px; }

/* partners */
.partner-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.partner-card h3 { font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; margin: 0 0 8px; }
.partner-card p { color: var(--muted); line-height: 1.7; margin: 0 0 12px; }
.partner-card ul { color: var(--muted); margin: 0; padding-left: 18px; line-height: 1.8; }

/* market dropdown */
.market-drop {
  position: absolute; top: calc(var(--header-h) + 4px); left: 50%;
  transform: translateX(-50%);
  width: 300px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 10px;
  z-index: 90; display: block;
}
.market-drop[hidden] { display: none; }
.market-drop .md-title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); padding: 6px 10px 4px; margin: 0; }
.market-drop .md-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; background: transparent; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--foreground); }
.market-drop .md-item:hover { background: var(--surface-2); }
.market-drop .md-item img { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; }
.market-drop .md-foot { font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); margin: 6px 0 0; padding: 10px; }

/* scroll top */
.scroll-top-btn { position: fixed; right: 22px; bottom: 24px; z-index: 60; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-md); display: none; align-items: center; justify-content: center; }
.scroll-top-btn.show { display: inline-flex; }
@media (max-width: 900px) { .scroll-top-btn { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* ==========================================================================
   Marketing & auxiliary pages (showcase/features/partners/about/careers/auth/legal)
   ========================================================================== */
.page-hero { padding: 30px 0 6px; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 52px); line-height: 1.03; letter-spacing: -0.03em; margin: 0 0 10px; }
.lede { color: var(--muted); font-size: 17px; max-width: 640px; }

.value-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.value-card b { display: block; font-size: 18px; margin-bottom: 6px; }
.value-card p { color: var(--muted); font-size: 14px; margin: 0; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 34px 0; }
@media (max-width: 820px) { .values-grid { grid-template-columns: 1fr; } }

.lead-block { font-size: clamp(20px, 3vw, 30px); line-height: 1.35; letter-spacing: -0.01em; font-family: var(--font-display); max-width: 800px; margin: 10px 0 0; }
.muted { color: var(--muted); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

.partner-logo { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--muted-2); font-family: var(--font-display); font-weight: 700; font-size: 16px; }

.faq { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); margin-bottom: 10px; overflow: hidden; }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--muted-2); }
.faq[open] summary::after { content: '−'; }
.faq .inner { padding: 0 18px 16px; color: var(--muted); font-size: 14.5px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 30px 0; }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 20px; text-align: left; }
.stat b { display: block; font-size: 30px; font-family: var(--font-display); letter-spacing: -.02em; }
.stat span { color: var(--muted); font-size: 13px; }

.legal > section { max-width: 760px; margin-bottom: 40px; }
.legal h2 { font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em; margin: 0 0 10px; }
.legal h3 { font-size: 16px; margin: 18px 0 6px; }
.legal p, .legal li { color: var(--muted); font-size: 15px; line-height: 1.6; }
.legal ul { padding-left: 18px; }
.legal .updated { font-size: 13px; color: var(--muted-2); }

.auth-card { max-width: 440px; margin: 26px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px; }
.auth-card h1 { font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em; margin: 0 0 6px; }
.auth-card .sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.auth-nav { display: flex; gap: 8px; background: var(--surface-2); padding: 4px; border-radius: 12px; margin-bottom: 20px; }
.auth-nav button { flex: 1; border: 0; background: transparent; padding: 9px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; }
.auth-nav button.active { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-sm); }

.showcase-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); margin: 30px 0; }
.showcase-hero .wrap { position: relative; z-index: 2; padding: 64px 20px; }
.showcase-hero h1 { font-size: clamp(34px, 6vw, 62px); letter-spacing: -.03em; font-family: var(--font-display); max-width: 700px; margin: 0 0 12px; line-height: 1.02; }

.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 60px 0; border-bottom: 1px solid var(--border); }
.feature-row:last-child { border-bottom: 0; }
.feature-row h2 { font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 38px); letter-spacing: -.02em; margin: 0 0 14px; }
.feature-row p { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 18px; }
.feature-art { background: linear-gradient(135deg, var(--surface-2), var(--surface-3, var(--surface-2))); border: 1px solid var(--border); border-radius: 18px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
@media (max-width: 800px) { .feature-row { grid-template-columns: 1fr; gap: 22px; } }

.career-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); margin-bottom: 12px; }
.career-row b { font-size: 16px; display: block; }
.career-row span { color: var(--muted); font-size: 13px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--surface-3, var(--surface-2)); border: 1px solid var(--border); color: var(--muted); }

/* ==========================================================================
   Misc utilities
   ========================================================================== */
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; } .mt-4 { margin-top: 26px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mobile-only { display: none; }
@media (max-width: 640px) { .mobile-only { display: initial; } .desktop-only { display: none; } }


/* ==========================================================================
   MOBILE  (<= 900px)
   --------------------------------------------------------------------------
   Everything below is scoped to max-width 900px or lower. Laptop rendering
   at 901px and up is intentionally untouched: the only rules in the
   901-1120px band are the pre-existing ones at :156, :408 and :420, and
   none of them are modified here. New components below default to
   display:none and are switched on inside a max-width query, following the
   same pattern as .bottom-nav.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Off-canvas menu — markup exists on every page, shown <= 900px only
   -------------------------------------------------------------------------- */
/* The mark tiles are the small-phone header logo. They must stay hidden at
   every width unless the <= 640px block below opts in — including in dark
   mode, where the visible one is logo-mark-light rather than -dark. */
.logo-mark-dark, .logo-mark-light { display: none; }

.menu-btn { display: none; }

.menu-backdrop {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(8,10,10,.45);
  opacity: 0; transition: opacity .24s ease;
}
.menu-backdrop[hidden] { display: none; }
.menu-backdrop.open { opacity: 1; }

.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 97;
  width: min(360px, 88vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
  overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.open { transform: translateX(0); }

.mm-head {
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
  height: var(--header-h);
  padding: 0 10px 0 20px;
  border-bottom: 1px solid var(--border);
}
.mm-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.mm-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -4px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--foreground);
}
.mm-close svg { width: 18px; height: 18px; }

.mm-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 14px calc(20px + env(safe-area-inset-bottom));
}
.mm-nav { display: flex; flex-direction: column; padding: 6px 0; }
.mm-link {
  display: flex; align-items: center; gap: 13px;
  min-height: 48px; padding: 0 10px;
  border-radius: 12px;
  font-size: 15px; font-weight: 550; color: var(--foreground);
}
.mm-link svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--muted); }
.mm-link.is-active { background: var(--surface-2); font-weight: 700; }
.mm-link.is-active svg { color: var(--foreground); }

.mm-sec { padding: 16px 10px 0; border-top: 1px solid var(--border); margin-top: 10px; }
.mm-sec-row { padding-bottom: 4px; }
.mm-label {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
.mm-markets { display: flex; flex-wrap: wrap; gap: 7px; }
.mm-market {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--foreground);
  font-size: 13.5px; font-weight: 550;
}
.mm-market img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
.mm-market svg { width: 15px; height: 15px; }
.mm-market.is-active { border-color: var(--foreground); font-weight: 700; }

.mm-cta { margin-top: 10px; }
.mm-action {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 48px; padding: 0 10px;
  border: 0; border-radius: 12px; background: none;
  color: var(--foreground); font-size: 15px; font-weight: 550; text-align: left;
}
.mm-action svg { width: 19px; height: 19px; color: var(--muted); }
.mm-action .mm-moon { display: none; }
.dark .mm-action .mm-sun { display: none; }
.dark .mm-action .mm-moon { display: block; }

.mm-socials { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 10px 0; margin-top: 16px; border-top: 1px solid var(--border); }
.mm-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--muted);
}
.mm-socials svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   Sticky mobile buy bar (event page) — desktop keeps the panel's own button
   Note: do not add a `body.has-buybar .buy-bar` rule here. Media queries add
   no specificity, so a (0,2,0) base rule would beat the (0,1,0) display:flex
   inside the max-width query below and the bar would never render.
   -------------------------------------------------------------------------- */
.buy-bar { display: none; }

/* ==========================================================================
   <= 900px — phones and tablets portrait
   ========================================================================== */
@media (max-width: 900px) {
  /* ---- navigation: hamburger replaces the (already hidden) desktop nav ---- */
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    margin-right: -6px;
    border: 0; border-radius: var(--radius-pill);
    background: none; color: var(--foreground);
  }
  .mb-bars { display: block; width: 19px; }
  .mb-bars i {
    display: block; height: 2px; border-radius: 2px;
    background: currentColor;
  }
  .mb-bars i + i { margin-top: 4.5px; }

  /* bottom nav: safe areas for landscape notches */
  .bottom-nav {
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }

  /* ---- containment: stop flex children forcing horizontal overflow ---- */
  .header-right, .tier-meta, .meta-cell > div, .os-row > span, .card-venue { min-width: 0; }

  /* ---- toasts must clear the bottom nav ---- */
  .toast-wrap { bottom: calc(78px + env(safe-area-inset-bottom)); }

  /* ---- inputs: 16px stops iOS Safari zooming on focus ----
     .search-field.hero-search input is the base rule and is more specific
     than a plain .search-field input, so both are overridden here. */
  .search-field input, .search-field.hero-search input,
  .hero-search input,
  .field input, .field select, .field textarea,
  .auth-card input, .auth-card select { font-size: 16px; }

  /* ---- ticket panel: not sticky once the layout is a single column ---- */
  .ticket-panel { position: static; }
  /* nested scroller inside the page scroller fights momentum scrolling on iOS */
  .tp-body { max-height: none; overflow-y: visible; }

  /* ---- modal: fits the viewport, scrolls internally, close button robust ---- */
  .modal-backdrop { padding: 14px; align-items: flex-end; }
  .modal {
    padding: 20px 18px; max-height: 84vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* static keeps the button in the .modal-head flex row instead of escaping
     to the initial containing block; desktop is left exactly as it is */
  .modal .modal-x { position: static; }
  .modal-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: -8px -8px -8px 0; flex: 0 0 auto;
  }

  /* ---- checkout: summary above the form, total always visible ---- */
  .checkout-layout { gap: 22px; }
  .order-summary { order: -1; padding: 18px; }
  .card-pay { flex-wrap: wrap; padding: 8px; }
  .card-pay img[height] { height: 40px !important; width: auto; flex: 0 1 auto; }
  .card-pay .pm-label { flex: 1 1 120px; min-width: 0; }

  /* ---- vertical rhythm ---- */
  .hero { padding: 34px 0 6px; }
  .section { padding-top: 30px; }
  .section-head { flex-wrap: wrap; row-gap: 8px; }
  .page-hero { padding: 24px 0 4px; }
  .feature-row { padding: 40px 0; }
  .breadcrumb { padding-top: 12px; }

  /* ---- touch targets: 44px minimum ---- */
  .cat-chip { height: 40px; }
  .qty-stepper button { width: 40px; height: 40px; font-size: 17px; }
  .drawer-close { width: 44px; height: 44px; }
  /* .share-btn is styled as `.share-row .share-btn` in the base sheet, which
     is more specific than a bare `button` descendant selector. */
  .share-row a, .share-row .share-btn { width: 44px; height: 44px; }
  .btn { min-height: 44px; }
  .follow-btn { min-height: 44px; }

  /* ---- event page sticky buy bar ---- */
  .buy-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; z-index: 69;
    bottom: calc(64px + env(safe-area-inset-bottom));
    padding: 10px 16px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0,0,0,.07);
  }
  .buy-bar[hidden] { display: none; }
  .bb-info { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
  .bb-info b { display: block; font-size: 15.5px; font-weight: 750; }
  .bb-info span { font-size: 12.5px; color: var(--muted); }
  .buy-bar .btn { flex: 0 0 auto; margin: 0; }
  body.has-buybar main { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  body.has-buybar.has-bottom-nav main { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }

  /* ---- scroll-top must clear the buy bar when both are present ---- */
  body.has-buybar .scroll-top-btn { bottom: calc(140px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   <= 640px — standard phones
   ========================================================================== */
@media (max-width: 640px) {
  /* ---- header: swap the 160px wordmark for the 30px mark tile ----
     The base rules pair with .dark (e.g. ".dark .logo .logo-img-light"),
     so the hiding selectors repeat the .dark prefix to win on specificity.
     Without this, dark mode shows the wordmark AND the mark side by side. */
  .header-inner { gap: 10px; }
  .header-right { gap: 6px; }
  .logo .logo-img-dark, .dark .logo .logo-img-dark,
  .logo .logo-img-light, .dark .logo .logo-img-light { display: none; }
  .logo .logo-mark-dark { display: block; }
  .dark .logo .logo-mark-dark { display: none; }
  .dark .logo .logo-mark-light { display: block; }
  .logo img { height: 30px; }

  /* market pill collapses to the globe glyph */
  .pill-menu { padding: 0 11px; gap: 4px; }
  .pill-menu #market-label { display: none; }

  /* login panel must not run off the left edge */
  .login-panel { width: min(340px, calc(100vw - 24px)); }

  /* category row: align with .wrap's 16px and snap while swiping */
  .cat-row {
    padding: 20px 16px 6px;
    scroll-snap-type: x proximity;
  }
  .cat-chip { scroll-snap-align: start; }

  /* two-up grid needs breathing room */
  .grid { gap: 10px; }
  .section-head h2, .legal-doc h2, .legal h2, .auth-card h1 { font-size: 22px; }

  /* tier rows: let the price wrap under long tier names */
  .tier-row { flex-wrap: wrap; row-gap: 8px; }
  .tier-meta { flex: 1 1 100%; justify-content: space-between; }
  .tp-head, .tier, .ticket-info { padding-left: 16px; padding-right: 16px; }

  .add-btn { height: 56px; font-size: 17px; border-radius: 14px; }
  .add-btn .add-plus { font-size: 19px; }

  .event-meta { gap: 14px; }
  .poster-row { margin-top: 20px; }
  .share-grid { grid-template-columns: 1fr 1fr; }
  .order-summary { padding: 16px; }
  .drawer-head { padding: 14px 16px; }
  .drawer-body { padding: 14px 16px; }
  .drawer-foot { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }

  /* ticket notch circles sit on the split line, which is vertical once stacked */
  .notch-l, .notch-r { top: auto; bottom: -17px; transform: none; }
  .notch-l { left: -17px; }
  .notch-r { right: -17px; }

  .stat { padding: 16px; }
  .stat b { font-size: 25px; }
  .value-card, .auth-card { padding: 18px; }
}

/* ==========================================================================
   <= 560px — small phones
   ========================================================================== */
@media (max-width: 560px) {
  /* market dropdown: centre it and cap it to the viewport */
  .market-drop { width: min(300px, calc(100vw - 32px)); }

  /* cart becomes a bottom sheet */
  .drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    border-left: 0; border-top: 1px solid var(--border);
    transform: translateY(102%);
    box-shadow: 0 -12px 40px rgba(0,0,0,.18);
  }
  .drawer.open { transform: translateY(0); }
  .drawer-body { flex: 1 1 auto; min-height: 0; }
  /* drag handle */
  .drawer-head { position: relative; padding-top: 20px; }
  .drawer-head::before {
    content: ""; position: absolute; top: 8px; left: 50%;
    width: 40px; height: 4px; margin-left: -20px;
    border-radius: 99px; background: var(--border-strong);
  }
  .cart-item-img { width: 60px; height: 76px; }

  /* careers: title above the button instead of crushed beside it */
  .career-row { flex-wrap: wrap; row-gap: 12px; }
  .career-row > div { min-width: 0; }
  .career-row .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   <= 900px — the "top picks" marquee runs at every width.
   Only the tighter mobile rhythm survives here: the 12px gap/padding and the
   2px/6px vertical breathing room. The animation, the overflow:hidden clip
   and the duplicated loop group all stay ON, so the track scrolls itself and
   loops seamlessly. A finger resting on it holds it still (see .is-held in
   js/app.js) so taps still land on the card the user aimed at.
   ========================================================================== */
@media (max-width: 900px) {
  .mkh-marquee { padding: 2px 0 6px; }
  .mkh-mk { gap: 12px; padding-right: 12px; }
}

/* ==========================================================================
   <= 900px and (hover: none) — press feedback instead of hover
   Bounded to 900px on purpose so touch-screen laptops (which report
   hover: hover) keep their existing behaviour.
   ========================================================================== */
@media (max-width: 900px) and (hover: none) {
  .event-card:active { transform: scale(.985); }
  .event-card:active .card-img img { transform: scale(1.02); }
  .btn:active { transform: scale(.985); }
  .mm-link:active, .mm-market:active, .mm-action:active { background: var(--bg-soft); }
  .cat-chip:active { transform: scale(.97); }
  .share-row a:active, .share-btn:active { transform: scale(.94); }
  .cat-chip, .btn, .event-card, .share-row a, .mm-link { transition: transform .12s ease; }
}

/* ==========================================================================
   Legal page layout
   Base values are identical to the inline styles this replaced, so laptop
   rendering is unchanged. The two-column grid only collapses <= 860px.
   ========================================================================== */
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; }
.legal-toc { position: sticky; top: 96px; align-self: start; }
.legal-toc ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; gap: 22px; }
  .legal-toc {
    position: static;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); padding: 12px 14px;
  }
  .legal-toc ul { flex-direction: row; flex-wrap: wrap; gap: 6px 8px; }
  .legal-toc a {
    display: inline-block; min-height: 34px;
    padding: 7px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 13px; font-weight: 600; line-height: 1.2;
  }
}