/* ── TOKENS ─────────────────────────────────────────────────────────────────── */
:root {
  --canvas:   #000000;
  --surface:  #111111;
  --surface2: #181818;
  --border:   #1c1c1c;
  --border2:  rgba(255,255,255,0.06);
  --text:     #ffffff;
  --muted:    rgba(255,255,255,0.45);
  --light:    rgba(255,255,255,0.55);
  --accent:   #E5E12C;
  --accent-bg:rgba(229,225,44,0.12);
  --green-bg: rgba(52,101,56,0.2);
  --green-txt:#5ecf65;
  --blue-bg:  rgba(31,108,159,0.2);
  --blue-txt: #5ab8f5;

  --sans: 'Poppins', 'Helvetica Neue', system-ui, sans-serif;
  --serif:'Poppins', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'SF Mono', 'Geist Mono', 'JetBrains Mono', monospace;

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --dur: 260ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --content-max: 680px;
}

/* ── RESET ──────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html, body {
  height:100%; width:100%;
  background:var(--canvas);
  overflow:hidden;
}
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

/* ── APP SHELL ──────────────────────────────────────────────────────────────── */
#app {
  width:100%; height:100dvh;
  background:var(--canvas);
  position:relative; overflow:hidden;
}

/* ── SCREENS ────────────────────────────────────────────────────────────────── */
.screen {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:#000;
  opacity:0; pointer-events:none;
  transform:translateX(0);
  will-change:transform,opacity;
}

/* Initial snap positions — no transition */
.screen.page-from-right { transform:translateX(52px);  opacity:0; }
.screen.page-from-left  { transform:translateX(-52px); opacity:0; }

/* Active: magnetic spring in */
.screen.active {
  opacity:1; pointer-events:all; transform:translateX(0);
  transition:
    opacity   360ms cubic-bezier(0.16,1,0.3,1),
    transform 440ms cubic-bezier(0.34,1.18,0.64,1);
}

/* Exit: fast decisive slide-out */
.screen.page-exit-left {
  opacity:0; transform:translateX(-36px); pointer-events:none;
  transition: opacity 210ms ease, transform 250ms cubic-bezier(0.4,0,1,1);
}
.screen.page-exit-right {
  opacity:0; transform:translateX(36px); pointer-events:none;
  transition: opacity 210ms ease, transform 250ms cubic-bezier(0.4,0,1,1);
}

.scroll-area {
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  width:100%; max-width:var(--content-max);
  margin:0 auto;
}
.scroll-area::-webkit-scrollbar { display:none; }
.pb-nav { height:96px; }

/* ── STATUS BAR ──────────────────────────────────────────────────────────────── */
.status-bar { display:none; }

/* ── FLOATING BOTTOM NAV — Metro compact style ───────────────────────────────── */
.bottom-nav { display: none; }
.bnav-wrap {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  width: fit-content;
  display: flex; align-items: center;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.bnav-wrap > * { pointer-events: all; }

/* Pill 1 — 3 icon slots */
.bnav-pills {
  display: flex; align-items: center;
  height: 42px;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 9999px;
  border: 1px solid #1c1c1c;
  padding: 0 6px;
  gap: 0;
}

/* Pill 2 — menu circle */
.bnav-menu-pill {
  width: 42px; height: 42px; flex-shrink: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 50%;
  border: 1px solid #1c1c1c;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  transition: transform 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.bnav-menu-pill svg { stroke: rgba(255,255,255,0.7); }
.bnav-menu-pill:active { transform: scale(0.88); }

/* Nav items — icons only, no labels */
.nav-item {
  width: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; height: 100%;
  opacity: 0.3;
  transition: opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-item .nav-icon  { color: #fff; display: flex; align-items: center; justify-content: center; }
.nav-item .nav-label { display: none; }
.nav-dot { display: none; }
.nav-item.active { opacity: 1; }
.nav-item.active .nav-icon svg { stroke: #fff; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────────── */
.btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--r-sm);
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:0.01em;
  border:none; cursor:pointer; width:100%;
  transition:transform 150ms, background 150ms;
  -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:scale(0.98); }
.btn-primary  { background:#E5E12C; color:#000; font-weight:600; }
.btn-primary:hover { background:#d4d028; }
.btn-secondary { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.18); }
.btn-secondary:hover { background:rgba(255,255,255,0.06); }

/* ── BACK BUTTON ─────────────────────────────────────────────────────────────── */
.back-btn {
  width:36px; height:36px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:#fff; transition:background 150ms; -webkit-tap-highlight-color:transparent;
}
.back-btn:active { background:rgba(255,255,255,0.12); }

/* ── CHIPS ───────────────────────────────────────────────────────────────────── */
.chips-scroll { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.chips-scroll::-webkit-scrollbar { display:none; }
.chip {
  flex-shrink:0; padding:6px 14px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--r-md);
  font-size:12px; font-weight:500; letter-spacing:0.01em; color:rgba(255,255,255,0.5);
  cursor:pointer; transition:all 150ms; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.chip.active { background:#E5E12C; color:#000; border-color:#E5E12C; font-weight:600; }

/* ── TAG BADGE ───────────────────────────────────────────────────────────────── */
.tag {
  display:inline-block; padding:3px 8px; border-radius:9999px;
  font-size:10px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
}
.tag-amber { background:var(--accent-bg); color:var(--accent); }
.tag-green { background:var(--green-bg);  color:var(--green-txt); }
.tag-blue  { background:var(--blue-bg);   color:var(--blue-txt); }
.tag-mono  { background:var(--canvas); color:var(--muted); border:1px solid var(--border); }

/* ── DIVIDER ─────────────────────────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:20px 0; }

/* ── SECTION HEADER ──────────────────────────────────────────────────────────── */
.section-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.section-title { font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); }
.see-all { font-size:12px; font-weight:500; color:var(--accent); cursor:pointer; letter-spacing:0.01em; }

/* ── EDITORIAL HEADING ───────────────────────────────────────────────────────── */
.editorial {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-0.03em;
  line-height:1.1;
  color:var(--text);
}

/* ── CARDS ───────────────────────────────────────────────────────────────────── */
.card {
  background:#111; border:1px solid #1c1c1c; border-radius:var(--r-lg);
  overflow:hidden; cursor:pointer;
  transition:box-shadow 200ms;
  -webkit-tap-highlight-color:transparent;
}
.card:hover { box-shadow:0 2px 24px rgba(0,0,0,0.6); }
.card:active { box-shadow:none; }

/* ── EVENT CARD ──────────────────────────────────────────────────────────────── */
.event-img {
  width:100%; height:220px; overflow:hidden; position:relative;
  background:var(--canvas);
}
.event-img img {
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(60%) sepia(15%);
  transition:transform 400ms var(--ease);
}
.card:hover .event-img img { transform:scale(1.02); }
.event-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(17,17,17,0.65) 30%, transparent 70%);
}
.event-img-meta {
  position:absolute; bottom:0; left:0; right:0;
  padding:16px;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.event-date-block { text-align:left; }
.event-date-mo { font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.65); }
.event-date-d  { font-size:28px; font-weight:700; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.event-card-body { padding:16px 20px 20px; }
.event-title {
  font-family:var(--serif); font-size:18px; font-weight:400;
  letter-spacing:-0.02em; line-height:1.25; color:var(--text); margin-bottom:8px;
}
.event-meta-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.event-meta-item { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.event-foot { display:flex; align-items:center; justify-content:space-between; }
.event-dist { font-family:var(--serif); font-size:22px; font-weight:400; letter-spacing:-0.02em; color:var(--text); }
.event-dist span { font-family:var(--sans); font-size:12px; font-weight:400; color:var(--muted); margin-left:4px; }

/* ── MINI EVENT CARD ──────────────────────────────────────────────────────────── */
.mini-card { width:200px; flex-shrink:0; }
.mini-img { width:100%; height:130px; overflow:hidden; background:var(--canvas); position:relative; }
.mini-img img { width:100%; height:100%; object-fit:cover; filter:grayscale(60%) sepia(15%); }
.mini-body { padding:12px 14px 14px; }
.mini-title { font-family:var(--serif); font-size:15px; font-weight:400; letter-spacing:-0.02em; line-height:1.25; margin-bottom:4px; }
.mini-meta  { font-size:11px; color:var(--muted); }

/* ── STAT BLOCK ──────────────────────────────────────────────────────────────── */
.stat-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; margin-bottom:24px;
}
.stat-cell { background:var(--surface); padding:16px; text-align:center; }
.stat-num  { font-family:var(--serif); font-size:24px; font-weight:400; letter-spacing:-0.03em; color:var(--text); margin-bottom:2px; }
.stat-label{ font-size:10px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); }

/* ── INFO ROW ────────────────────────────────────────────────────────────────── */
.info-row {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.info-row:last-of-type { border-bottom:none; }
.info-icon  { width:32px; height:32px; background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--muted); }
.info-label { font-size:10px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.info-val   { font-size:14px; font-weight:500; color:var(--text); line-height:1.4; }

/* ── MEMBER LIST ─────────────────────────────────────────────────────────────── */
.member-list { display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; }
.member-list::-webkit-scrollbar { display:none; }
.member-pill { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.member-av   { width:52px; height:52px; border-radius:8px; background:var(--canvas); border:1px solid var(--border); overflow:hidden; transition:border-color 150ms; }
.member-av img { width:100%; height:100%; object-fit:cover; filter:grayscale(40%); }
.member-pill:active .member-av { border-color:var(--text); }
.member-name { font-size:11px; font-weight:500; color:var(--muted); text-align:center; }

/* ── SOCIAL ROW ──────────────────────────────────────────────────────────────── */
.social-row {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:#111; border:1px solid #1c1c1c; border-radius:var(--r-lg);
  cursor:pointer; transition:background 150ms; -webkit-tap-highlight-color:transparent;
  margin-bottom:10px;
}
.social-row:active { background:#1a1a1a; }
.social-icon { width:36px; height:36px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── GALLERY GRID ────────────────────────────────────────────────────────────── */
.gallery-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; }
.gallery-cell { aspect-ratio:1; overflow:hidden; cursor:pointer; }
.gallery-cell img { width:100%; height:100%; object-fit:cover; filter:grayscale(50%) sepia(10%); transition:filter 200ms; }
.gallery-cell:active img { filter:grayscale(20%); }

/* ── CAROUSEL ────────────────────────────────────────────────────────────────── */
.carousel { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; }
.carousel::-webkit-scrollbar { display:none; }

/* ── COLLAB FEATURE CELL ─────────────────────────────────────────────────────── */
.feature-cell { display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border); }
.feature-cell:last-child { border-bottom:none; }
.feature-icon { width:32px; height:32px; background:var(--canvas); border:1px solid var(--border); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--muted); }
.feature-head { font-size:14px; font-weight:500; color:var(--text); margin-bottom:2px; }
.feature-desc { font-size:12px; color:var(--muted); line-height:1.5; }

/* ── TOAST ───────────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:90px; left:50%;
  transform:translateX(-50%) translateY(12px);
  background:#E5E12C; color:#000; font-weight:600;
  border-radius:var(--r-md); padding:9px 18px;
  font-size:12px; font-weight:500; white-space:nowrap;
  opacity:0; transition:all 280ms var(--ease); z-index:200; pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── SWIPE (VERTICAL) ────────────────────────────────────────────────────────── */
.swipe-track {
  width:52px; height:160px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  position:relative; overflow:hidden;
}
.swipe-label {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:500; letter-spacing:0.1em; color:var(--muted);
  pointer-events:none; user-select:none; text-transform:uppercase;
  writing-mode:vertical-lr; transform:rotate(180deg);
}
.swipe-thumb {
  position:absolute; top:112px; left:4px; width:44px; height:44px;
  background:var(--text); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none; color:#fff;
  transition:background 200ms;
}
.swipe-thumb:active { cursor:grabbing; background:#333; }

/* ── SCROLL REVEAL ───────────────────────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(12px);
  transition:opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── MERCH ───────────────────────────────────────────────────────────────────── */
.merch-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(min-width:520px) { .merch-grid { grid-template-columns:1fr 1fr 1fr; } }
.merch-card { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.merch-img  { aspect-ratio:1; overflow:hidden; position:relative; background:var(--surface2); border-bottom:1px solid var(--border); }
.merch-img img { width:100%; height:100%; object-fit:cover; filter:grayscale(25%) sepia(8%); transition:transform 350ms var(--ease); }
.merch-card:hover .merch-img img { transform:scale(1.04); }
.merch-body  { padding:12px 14px 14px; }
.merch-name  { font-family:var(--serif); font-size:14px; font-weight:400; letter-spacing:-0.01em; line-height:1.25; color:var(--text); margin-bottom:2px; }
.merch-sub   { font-size:11px; color:var(--muted); margin-bottom:8px; }
.merch-price { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text); margin-bottom:10px; }
.merch-add {
  width:100%; padding:8px 0; font-size:12px; font-weight:500; letter-spacing:0.02em;
  background:#E5E12C; color:#000; font-weight:600; border:none; border-radius:var(--r-xs);
  cursor:pointer; transition:background 150ms, transform 150ms;
  -webkit-tap-highlight-color:transparent;
}
.merch-add:active { background:#333; transform:scale(0.97); }
.merch-add.sold { background:transparent; color:var(--light); border:1px solid var(--border); pointer-events:none; }

/* ── SIZE CHIPS ──────────────────────────────────────────────────────────────── */
.size-chips { display:flex; gap:4px; margin-bottom:8px; }
.sz { padding:3px 7px; font-size:10px; font-weight:500; border:1px solid rgba(255,255,255,0.12); border-radius:var(--r-xs); color:rgba(255,255,255,0.4); cursor:pointer; transition:all 120ms; }
.sz.picked { border-color:#E5E12C; color:#000; background:#E5E12C; }
.sz.out { color:var(--border); text-decoration:line-through; pointer-events:none; }

/* ── CART / PAYMENT / ACCOUNT SCREENS ───────────────────────────────────────── */
.cart-badge {
  display:none; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 3px;
  background:var(--accent); color:#fff;
  border-radius:9999px;
  font-size:8px; font-weight:700; font-family:var(--sans);
}
input::placeholder, textarea::placeholder {
  color:rgba(255,255,255,0.2); font-size:13px;
}
input:focus, textarea:focus { outline:none; background:rgba(255,255,255,0.06) !important; }
input[type="radio"] { accent-color:var(--accent); width:14px; height:14px; flex-shrink:0; }
label:has(input[type="radio"]:checked) {
  background:var(--accent-bg) !important;
  border-left:2px solid var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DESKTOP SIDEBAR + RESPONSIVE LAYOUT  (≥768px)
══════════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR ────────────────────────────────────────────────────────────────── */
#sidebar {
  display:none;
  position:fixed; left:0; top:0; bottom:0; width:220px;
  background:#0a0a0a;
  border-right:1px solid #1c1c1c;
  flex-direction:column;
  padding:28px 12px 24px;
  z-index:300;
}
#sb-logo { padding:0 10px; margin-bottom:32px; }
#sb-nav  { display:flex; flex-direction:column; gap:2px; flex:1; }
.sb-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r-md);
  cursor:pointer; transition:background 150ms;
  -webkit-tap-highlight-color:transparent;
}
.sb-item:hover { background:var(--canvas); }
.sb-item.active { background:var(--canvas); }
.sb-icon  { color:var(--light); transition:color var(--dur); flex-shrink:0; display:flex; align-items:center; }
.sb-label { font-size:14px; font-weight:500; color:var(--muted); transition:color var(--dur); }
.sb-item.active .sb-icon  { color:var(--text); }
.sb-item.active .sb-label { color:var(--text); font-weight:600; }
#sb-footer { padding:16px 10px 0; border-top:1px solid var(--border); }

/* ── DESKTOP BREAKPOINT ─────────────────────────────────────────────────────── */

/* ── NAV MODAL ── */
.nav-modal {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.nav-modal.open {
  opacity: 1; pointer-events: all;
}
.nav-modal-inner {
  width: 100%;
  background: #F0F3F7;
  border: none;
  border-radius: 48px 48px 0 0;
  padding: 20px 28px 52px;
  transform: translateY(40px);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.nav-modal.open .nav-modal-inner { transform: translateY(0); }
.nav-modal-inner::before {
  content: '';
  display: block; width: 36px; height: 4px;
  background: rgba(0,0,0,0.12); border-radius: 9999px;
  margin: 0 auto 20px;
}
.nm-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.nm-label {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #7A8694; font-family: var(--mono);
}
.nm-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #4E5D6C; font-size: 12px;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.nm-close:hover { background: rgba(0,0,0,0.12); color: #1A2838; }
.nm-list { display: flex; flex-direction: column; }
.nm-item {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: padding-left 0.2s cubic-bezier(0.16,1,0.3,1);
  -webkit-tap-highlight-color: transparent;
}
.nm-item:first-child { border-top: 1px solid rgba(0,0,0,0.08); }
.nm-item:last-child  { border-bottom: none; }
.nm-item:active { padding-left: 10px; }
.nm-num {
  font-size: 10px; font-weight: 400; letter-spacing: 0.06em;
  color: #7A8694; flex-shrink: 0; width: 24px;
  font-family: var(--mono);
}
.nm-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(26px, 7vw, 42px);
  font-weight: 700; letter-spacing: -0.03em;
  text-transform: uppercase; color: #1A2838; flex: 1;
  line-height: 1; transition: color 0.2s;
}
.nm-item:hover .nm-name,
.nm-item:active .nm-name { color: #CC6800; }
.nm-arrow {
  font-size: 18px; color: #B0B8C2; flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), color 0.2s;
}
.nm-item:hover .nm-arrow,
.nm-item:active .nm-arrow { color: #CC6800; transform: translate(3px,-3px); }

@media (min-width: 768px) {
  #sidebar { display:flex; }
  #app { margin-left:220px; width:calc(100% - 220px); }
  .bottom-nav, .bnav-wrap { display:none !important; }
  .pb-nav { height:40px; }
  .scroll-area { max-width:900px; }
  #enter-btn { display:block !important; }
  .swipe-track { display:none; }
  .events-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .events-list .card { margin-bottom:0 !important; }
  .gallery-grid { grid-template-columns:repeat(4, 1fr); }
  .merch-grid   { grid-template-columns:repeat(3, 1fr); }
  .mini-card    { width:240px; }
  .screen-home .editorial { font-size:40px !important; }
}

@media (min-width: 1200px) {
  .scroll-area { max-width:1100px; }
  .merch-grid  { grid-template-columns:repeat(4, 1fr); }
  .gallery-grid{ grid-template-columns:repeat(5, 1fr); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   METRO HOME — Nokia Lumia style flat tiles
══════════════════════════════════════════════════════════════════════════════ */

/* Home screen dark canvas */
/* dark theme global */

/* STICKY HEADER */
.home-sticky-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 99;
  height: 52px;
  display: flex; align-items: center;
  padding: 0 44px;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0; transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.home-sticky-header.visible {
  opacity: 1; transform: translateY(0); pointer-events: all;
}
.home-sticky-logo {
  height: 22px; width: auto;
  filter: invert(1) brightness(0.9);
}

/* HERO */
.metro-hero {
  padding: 64px 44px 0;
}
.metro-hero-logo-wrap {
  margin-bottom: 16px;
}
.metro-hero-logo-img {
  height: 56px; width: auto;
  filter: invert(1) brightness(0.95);
  transition: height 0.35s ease, opacity 0.35s ease;
  display: block;
}
.metro-hero-sub {
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff;
  opacity: 0.45;
}

/* SECTION */
.metro-section {
  padding: 52px 44px 0;
}
.metro-section-label {
  font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff;
  opacity: 0.22; margin-bottom: 14px;
}

/* TILES */
.metro-tile {
  cursor: pointer; position: relative;
  overflow: hidden; border-radius: 10px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.metro-tile:active { opacity: 0.85; }
.metro-tile-full { width: 100%; display: block; }
.metro-tile-half { flex: 1; }
.metro-tile-wide { flex: 2; }
.metro-h140 { height: 140px; }
.metro-h100 { height: 100px; }
.metro-h80  { height: 80px; }
.metro-c-lime  { background: #E5E12C; }
.metro-c-slate { background: #40494E; }
.metro-c-white { background: #FFFFFF; }
.metro-c-dark  { background: #111111; }
.metro-c-mist  { background: #D9D9D6; }

.metro-tile-inner {
  position: absolute; inset: 0; padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.metro-tile-row { display: flex; gap: 5px; }
.metro-mt5 { margin-top: 5px; }

/* Text on light tiles */
.metro-on-light .metro-t-eye  { font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0,0,0,0.4); }
.metro-on-light .metro-t-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; color: #000; line-height: 1; }
.metro-on-light .metro-t-meta { font-size: 8px; color: rgba(0,0,0,0.38); }
.metro-on-light .metro-arr    { position:absolute; top:10px; right:12px; font-size:12px; color:rgba(0,0,0,0.18); }
.metro-on-light .metro-wm     { color: rgba(0,0,0,0.05); }

/* Text on dark tiles */
.metro-on-dark .metro-t-eye  { font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.3); }
.metro-on-dark .metro-t-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; line-height: 1; }
.metro-on-dark .metro-t-meta { font-size: 8px; color: rgba(255,255,255,0.3); }
.metro-on-dark .metro-arr    { position:absolute; top:10px; right:12px; font-size:12px; color:rgba(255,255,255,0.14); }
.metro-on-dark .metro-wm     { color: rgba(255,255,255,0.04); }

.metro-t-name-lg { font-size: 22px; }
.metro-t-name-md { font-size: 16px; }

.metro-wm {
  position: absolute; bottom: -6px; right: 6px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 60px; line-height: 1; pointer-events: none;
  letter-spacing: -0.06em;
}
.metro-tag { display:inline-block; padding:2px 7px; border-radius:9999px; font-size:7px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; background:#E5E12C; color:#000; }
.metro-tag-dk { background:rgba(0,0,0,0.1); color:rgba(0,0,0,0.45); }

/* ABOUT */
.metro-about-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700;
  line-height: 1.4; letter-spacing: -0.02em;
  padding-bottom: 40px;
}



/* Desktop: hide sticky header (sidebar handles nav) */
@media (min-width: 768px) {
  .home-sticky-header { display: none; }
  .metro-hero  { padding: 48px 60px 0; }
  .metro-section { padding: 52px 60px 0; }
}

/* HERO ABOUT — below logo */
.metro-hero-about {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px; font-weight: 700;
  line-height: 1.4; letter-spacing: -0.02em;
  margin-top: 24px;
}
/* Fix radio button accent */
input[type="radio"] { accent-color: #E5E12C; }
label:has(input[type="radio"]:checked) {
  background: rgba(229,225,44,0.08) !important;
  border-left: 2px solid #E5E12C !important;
}
/* Divider */
.divider { height:1px; background:#1c1c1c; margin:20px 0; }
/* Info row icon */
.info-icon { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); }
/* Feature cell */
.feature-icon { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); }
/* Merch img bg */
.merch-img { background:#1a1a1a; border-bottom:1px solid #1c1c1c; }
/* Stat cell */
.stat-cell { background:#111; }
/* Section header */
.section-title { color:rgba(255,255,255,0.35); }
.see-all { color:#E5E12C; }

/* ═══ ALBUM STACK GALLERY ═════════════════════════════════════════════════════ */
.album-stack-wrap {
  padding: 0 0 8px;
  position: relative;
}

.album-stack {
  position: relative;
  height: 300px;
  margin: 0 28px;
}

.album-card {
  position: absolute;
  left: 0; right: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Stack positions — 4 cards */
.album-card[data-index="0"] {
  top: 0; height: 260px;
  transform: scale(0.84) translateY(-8px);
  z-index: 1; opacity: 0.55;
}
.album-card[data-index="1"] {
  top: 8px; height: 268px;
  transform: scale(0.90) translateY(-4px);
  z-index: 2; opacity: 0.7;
}
.album-card[data-index="2"] {
  top: 18px; height: 275px;
  transform: scale(0.95);
  z-index: 3; opacity: 0.85;
}
.album-card[data-index="3"],
.album-card.album-front {
  top: 30px; height: 280px;
  transform: scale(1);
  z-index: 4; opacity: 1;
}

/* Card internals */
.album-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 20px 0;
}
.album-card-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; color: #fff;
}
.album-card-count {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}
.album-cover {
  margin: 12px 20px 0;
  height: 160px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  opacity: 0.7;
}
.album-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 10px 20px 0;
  border-radius: 10px;
  overflow: hidden;
}
.album-mini-cell { aspect-ratio: 1; overflow: hidden; }
.album-mini-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

.album-card-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 20px 14px;
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%);
}
.album-link-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px;
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8);
  border-radius: 9999px;
}

/* Dots */
.album-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 16px;
}
.album-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}
.album-dot.active {
  background: #E5E12C;
  width: 18px; border-radius: 3px;
}
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══ UNIVERSAL PAGE HEADER ══════════════════════════════════════════════════ */
.page-header {
  flex-shrink: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 10;
}
.page-header-logo {
  height: 18px;
  filter: invert(1) brightness(0.9);
}
.page-header-collab {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: color 0.2s;
}
.page-header-collab:active { color: #E5E12C; }

/* Home sticky header update */
.home-sticky-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

/* ── HOME STICKY: collab CTA ───────────────────────────────────────────────── */
.home-collab-cta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s;
}
.home-collab-cta:active { color: #E5E12C; }

/* ── BNAV BACK PILL ─────────────────────────────────────────────────────────── */
/* ── BACK PILL: independent fixed element, left of center ──────────────────── */
.bnav-back-pill {
  position: fixed;
  bottom: 24px;
  left: calc(50% - 97px - 8px - 42px); /* half of ~194px wrap */
  width: 42px; height: 42px;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 50%;
  border: 1px solid #1c1c1c;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
  pointer-events: auto;
  z-index: 200;
  transition: background 0.15s, transform 0.15s, opacity 0.2s;
}
.bnav-back-pill:active { background: #1a1a1a; transform: scale(0.93); }

/* Hide back button when on home */
.on-home .bnav-back-pill { opacity: 0; pointer-events: none; }


/* ── BNAV magnetic active icon ─────────────────────────────────────────────── */
.nav-item { transition: opacity 0.2s ease; }
.nav-item .nav-icon { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.nav-item.active .nav-icon { transform: scale(1.22); }

/* ── BNAV invert: white pill on light-bg sections ────────────────────────── */
.bnav-pills { transition: background 0.25s, border-color 0.25s; }
.nav-item .nav-icon { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.25s; }

#global-bnav.bnav-light-bg .bnav-pills {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.10);
}
#global-bnav.bnav-light-bg .bnav-pills .nav-item .nav-icon { color: #111; }
#global-bnav.bnav-light-bg .bnav-pills .nav-item .nav-icon svg { stroke: #111; }
#global-bnav.bnav-light-bg .bnav-pills .nav-item.active .nav-icon svg { stroke: #000; }
#global-bnav.bnav-light-bg .bnav-menu-pill {
  background: rgba(0,0,0,0.85);
  border-color: rgba(0,0,0,0.15);
}
.bnav-back-pill { transition: background 0.15s, transform 0.15s, opacity 0.2s, color 0.25s, border-color 0.25s; }
.bnav-back-pill.bnav-light-bg {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.10);
  color: #111;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GALLERY REDESIGN — Premium Photo Cards
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Background gradient on gallery screen */
#screen-gallery { background: linear-gradient(180deg, #0a0a0f 0%, #000 40%) !important; }

/* ── GALLERY SOCIAL (compact) ────────────────────────────────────────────── */
.gal-social-row {
  display: flex; gap: 8px;
  padding: 8px 16px 12px;
  flex-shrink: 0;
}
.gal-social-card {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 14px;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.34,1.4,0.64,1);
  -webkit-tap-highlight-color: transparent;
}
.gal-social-card:active { transform: scale(0.95); }
.gal-social-ig { background:#1a1a1a; border:1px solid #2a2a2a; }
.gal-social-tt { background:#111; border:1px solid #222; }
.gal-social-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.gal-social-ig .gal-social-icon { background:#2a2a2a; color:#fff; }
.gal-social-tt .gal-social-icon { background:#1c1c1c; color:#fff; }
.gal-social-name  { font-size:12px; font-weight:700; color:#fff; line-height:1.2; }
.gal-social-handle{ font-size:10px; color:rgba(255,255,255,0.3); }
.gal-social-arr   { color:rgba(255,255,255,0.2); flex-shrink:0; margin-left:auto; }
.gal-social-info  { flex:1; }

/* ── FOLDER DECK ─────────────────────────────────────────────────────────── */
/*
  Layout: all cards are absolutely positioned, bottom:0.
  Cards stack with ear notch peeking above the front card.
  EAR_H = 32px (height of the notch tab)
  EAR_SPACING = 38px (how much each back card's top peeks above the one in front)
  n = 5 cards
  
  front (pos=0): top = EAR_SPACING * 4 = 152px  → ear visible at 152-32=120px
  pos=1:         top = EAR_SPACING * 3 = 114px  → ear at 82px  
  pos=2:         top = EAR_SPACING * 2 = 76px   → ear at 44px
  pos=3:         top = EAR_SPACING * 1 = 38px   → ear at 6px
  pos=4 (back):  top = 0                         → ear at -32px (but clipped)
  
  To show pos=4 ear: deck has 36px top padding, shift all cards down 36px:
  pos=4: top=36px → ear at 4px ✓
*/
.gal-deck {
  position: relative;
  height: 300px;          /* fixed height — black space above & below */
  flex-shrink: 0;
  margin: 0 0 80px;       /* bottom gap before bnav */
  --ear-h: 28px;
  --ear-gap: 34px;
}

.gal-folder {
  position: absolute;
  left: 28px; right: 28px; bottom: 0;  /* wide margins = more negative space */
  border-radius: 20px 20px 0 0;
  overflow: visible;
  cursor: pointer;
  transition: top 460ms cubic-bezier(0.34,1.18,0.64,1);
  will-change: top;
  -webkit-tap-highlight-color: transparent;
}

/* Stacking positions */
.gal-folder[data-pos="0"] { top: calc(32px + var(--ear-gap)*4); z-index:5; }
.gal-folder[data-pos="1"] { top: calc(32px + var(--ear-gap)*3); z-index:4; }
.gal-folder[data-pos="2"] { top: calc(32px + var(--ear-gap)*2); z-index:3; }
.gal-folder[data-pos="3"] { top: calc(32px + var(--ear-gap)*1); z-index:2; }
.gal-folder[data-pos="4"] { top: 32px;                          z-index:1; }

/* ── EAR NOTCH (the folder tab that pokes up) ─────────────────────────────── */
.gal-folder-ear {
  position: absolute;
  top: calc(-1 * var(--ear-h));
  left: 0;
  height: var(--ear-h);
  padding: 0 16px 0 14px;
  border-radius: 10px 10px 0 0;
  background: var(--accent, #E5E12C);
  display: flex;
  align-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  min-width: 140px;
  max-width: 85%;
  z-index: 10;
  /* folder-tab notch cutout on right side */
  clip-path: polygon(0 100%, 0 0, calc(100% - 14px) 0, 100% 100%);
}

/* ── CARD BODY ────────────────────────────────────────────────────────────── */
.gal-folder-body {
  width: 100%;
  height: 100%;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  position: relative;
  background: #111;
  /* top-left corner flat since ear is there */
  border-radius: 0 22px 0 0;
}

.gal-folder-photo {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat var(--img, linear-gradient(135deg,#111,#222));
}
/* Dual gradient: accent color tint at top + dark at bottom */
.gal-folder-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent,#E5E12C) 30%, transparent) 0%, transparent 45%);
  z-index: 1;
}
.gal-folder-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 50%, transparent 80%);
  z-index: 2;
}

.gal-folder-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 16px 20px;
  z-index: 3;
}
.gal-folder-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent, #E5E12C);
  margin-bottom: 6px;
}
.gal-folder-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px; font-weight: 700;
  line-height: 0.95; letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 12px;
}
.gal-folder-btn {
  display: inline-flex; align-items: center;
  background: var(--accent, #E5E12C);
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: none; border-radius: 30px;
  padding: 9px 20px;
  cursor: pointer;
  transition: transform 160ms ease, opacity 140ms ease;
}
.gal-folder-btn:active { transform: scale(0.94); opacity: 0.8; }

/* Tap feedback on back cards */
.gal-folder[data-pos]:not([data-pos="0"]) .gal-folder-body {
  opacity: 0.92;
}
.gal-folder[data-pos]:not([data-pos="0"]):active .gal-folder-body {
  opacity: 1;
  filter: brightness(1.1);
}


/* ══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
   HOME SNAP SECTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

#home-scroll {
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.home-snap-section {
  flex-shrink: 0;
  width: 100%;
  /* height set by JS via sizeHomeSnap() */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── HERO ── */
.hs-hero {
  background: #000;
}
.hs-hero-top {
  padding: 52px 44px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.hs-hero-logo {
  height: 36px; width: auto;
  filter: invert(1) brightness(0.9);
  display: block;
}
.hs-hero-body {
  padding: 0 44px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hs-hero-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 12px;
}
.hs-hero-stat {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 96px; font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #fff;
}
.hs-hero-star {
  font-size: 44px;
  color: #E5E12C;
  vertical-align: super;
  margin-left: 2px;
}
.hs-hero-stat-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-top: 10px; margin-bottom: 22px;
}
.hs-hero-desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 400;
  line-height: 1.65;
  color: rgba(255,255,255,0.38);
  max-width: 200px;
}
.hs-scroll-hint {
  padding: 0 0 90px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
  transition: opacity 0.5s ease;
}
.hs-scroll-hint-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.22);
}
.hs-scroll-hint-arrow {
  font-size: 16px;
  color: rgba(255,255,255,0.22);
  animation: scrollBounce 1.4s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ── EVENTS ── */
.hs-events {
  background: #E5E12C;
}
.hs-section-inner {
  padding: 56px 44px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.hs-section-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(0,0,0,0.35);
  margin-bottom: 2px;
}
.hs-section-eyebrow.hs-on-dark { color: rgba(255,255,255,0.3); }
.hs-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 60px; font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #000;
  margin-bottom: 28px;
}
.hs-section-title.hs-on-dark { color: #fff; }

.hs-events-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-top: 1px solid rgba(0,0,0,0.15);
  overflow: hidden;
}
.hs-event-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
  transition: opacity 0.2s;
}
.hs-event-row:active { opacity: 0.6; }
.hs-event-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 700;
  color: rgba(0,0,0,0.22);
  width: 20px; flex-shrink: 0;
}
.hs-event-info { flex: 1; min-width: 0; }
.hs-event-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700;
  color: #000; line-height: 1.1;
}
.hs-event-meta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 400;
  color: rgba(0,0,0,0.42);
  margin-top: 2px;
  letter-spacing: 0.03em;
}
.hs-event-arr {
  font-size: 16px;
  color: rgba(0,0,0,0.28);
}
.hs-section-cta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(0,0,0,0.42);
  margin-top: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.hs-cta-muted { color: rgba(255,255,255,0.35); }
.hs-cta-lime  { color: #E5E12C; }

/* ── GALLERY ── */
.hs-gallery-sec {
  background: #111;
}
.hs-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
}
.hs-gallery-cell {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.hs-gallery-cell::after { display: none; }

/* ── MERCH ── */
.hs-merch-sec {
  background: #0a0a0a;
}
.hs-merch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.hs-merch-card {
  cursor: pointer;
  transition: opacity 0.2s;
}
.hs-merch-card:active { opacity: 0.6; }
.hs-merch-img {
  border-radius: 10px;
  height: 130px;
  margin-bottom: 8px;
}
.hs-merch-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #fff; margin-bottom: 2px;
}
.hs-merch-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 400;
  color: rgba(255,255,255,0.35);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   FLAT BLACK & WHITE OVERRIDE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hero — black, pure white text, no accent color */
.hs-hero { background: #000; }
.hs-hero-stat { color: #fff; }
.hs-hero-star { color: #fff; font-size: 52px; vertical-align: super; }
.hs-hero-eyebrow { color: rgba(255,255,255,0.28); }
.hs-hero-stat-label { color: rgba(255,255,255,0.28); }
.hs-hero-desc { color: rgba(255,255,255,0.42); }


/* Events — white bg, black text */
.hs-events { background: #fff; }
.hs-events .hs-section-eyebrow { color: rgba(0,0,0,0.28); }
.hs-events .hs-section-title { color: #000; }
.hs-events-list { border-top: 1px solid rgba(0,0,0,0.1); }
.hs-event-row { border-bottom: 1px solid rgba(0,0,0,0.08); }
.hs-event-num { color: rgba(0,0,0,0.2); }
.hs-event-name { color: #000; }
.hs-event-meta { color: rgba(0,0,0,0.38); }
.hs-event-arr { color: rgba(0,0,0,0.22); }
.hs-events .hs-section-cta { color: rgba(0,0,0,0.35); }

/* Gallery — near-black bg, flat gray cells, no color overlays */
.hs-gallery-sec { background: #0d0d0d; }
.hs-gallery-sec .hs-section-eyebrow { color: rgba(255,255,255,0.25); }
.hs-gallery-sec .hs-section-title { color: #fff; }
.hs-gallery-cell {
  background: var(--bg, #1e1e1e) !important;
  background: #1e1e1e !important;
}
.hs-gallery-cell::after { display: none; }
.hs-gallery-grid { gap: 3px; border-radius: 8px; }
.hs-cta-muted { color: rgba(255,255,255,0.3); }

/* Merch — black bg */
.hs-merch-sec { background: #000; }
.hs-merch-sec .hs-section-eyebrow { color: rgba(255,255,255,0.25); }
.hs-merch-sec .hs-section-title { color: #fff; }
.hs-merch-name { color: #fff; }
.hs-merch-price { color: rgba(255,255,255,0.35); }
.hs-merch-img { border-radius: 8px; }
.hs-cta-lime { color: #fff; }

/* Sticky header — pure black */
.home-sticky-header { background: rgba(0,0,0,0.92); }

/* BNAV — ensure no color leaks */
.cart-badge { background: #fff !important; color: #000 !important; }

.hs-hero-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  max-width: 300px;
  margin-top: 28px;
}