/* =========================================================
   ELEVATED — Cinematic site styles
   ========================================================= */

/* ---------- Web fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap');

/* ---------- Custom font ---------- */
@font-face{
  font-family:'StretchPro';
  src:url('assets/StretchPro.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --ink:        #06060A;
  --ink-2:      #0b0b11;
  --ink-3:      #14141c;
  --ink-4:      #1c1c26;
  --bone:       #f6f0e6;
  --bone-2:     #cfc8b8;
  --bone-mute:  #8a8478;
  /* ---- Accent (swappable for client review) ----
     --gold / --gold-hot drive every accent surface; --accent-rgb feeds
     the glow / tint effects that need an rgba() with variable alpha.
     Override all three together via html[data-accent="…"] below. */
  --gold:       #E8267C;
  --gold-hot:   #FF2E86;
  --accent-rgb: 232,38,124;
  --ember:      oklch(0.55 0.18 320);
  --ember-hot:  oklch(0.70 0.20 320);
  --line:       rgba(246,240,230,0.08);
  --line-2:     rgba(246,240,230,0.16);
  --bg-light:   #faecf1;   /* tinted cream for .section-light — shifts with accent */
}

/* ---------- Accent palettes (client review) ----------
   Set html[data-accent="…"] (JS persists the choice). Each palette moves
   the solid accent, its hot variant, the rgb triple for glows/tints, and
   the light-section cream tint so the whole page stays cohesive. */
html[data-accent="teal"]{
  --gold:#14B5A6; --gold-hot:#27D3C2; --accent-rgb:20,181,166; --bg-light:#e9f5f2;
}
html[data-accent="gold"]{
  --gold:#D8A12E; --gold-hot:#F0C04A; --accent-rgb:216,161,46; --bg-light:#f7f0e2;
}
html[data-accent="red"]{
  --gold:#E0342C; --gold-hot:#FF4A3D; --accent-rgb:224,52,44; --bg-light:#faece9;
}
html[data-accent="blue"]{
  --gold:#2F6FE0; --gold-hot:#4D88FF; --accent-rgb:47,111,224; --bg-light:#e9eefb;
}

:root{
  --f-display:  'Unbounded', 'Inter', system-ui, sans-serif;
  --f-body:     'DM Sans', system-ui, sans-serif;

  --pad-x:      clamp(20px, 5vw, 80px);
  --r-sm:       6px;
  --r-md:       14px;
  --r-lg:       22px;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-in:    cubic-bezier(.7,0,.84,0);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;background:var(--ink);}
body{
  font-family:var(--f-body);
  color:var(--bone);
  background:var(--ink);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
::selection{background:var(--gold);color:var(--ink);}

/* Film grain overlay */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Curtain intro ---------- */
.curtain{
  position:fixed;inset:0;z-index:10000;
  background:var(--ink);
  display:grid;place-items:center;
  transition:transform 1s var(--ease-in),opacity .4s ease;
}
.curtain.is-lifted{transform:translateY(-101%);}
.curtain__logo{
  display:block;
  width:min(60vw,640px);
  height:auto;
  opacity:0;
  filter:drop-shadow(0 0 0 transparent);
  animation:curtainNeonFlicker 1.7s linear .1s forwards;
}
/* Neon "sign turning on" — quick stuttering flicker that resolves to a
   steady glow. Brightness AND a pink drop-shadow glow modulate together
   so it reads like an actual neon tube struggling to fire up. */
@keyframes curtainNeonFlicker{
  0%   {opacity:0;     filter:drop-shadow(0 0 0 rgba(var(--accent-rgb),0));}
  5%   {opacity:1;     filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),.75)) drop-shadow(0 0 26px rgba(var(--accent-rgb),.4));}
  6%   {opacity:.18;   filter:drop-shadow(0 0 2px rgba(var(--accent-rgb),.2));}
  10%  {opacity:1;     filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),.75)) drop-shadow(0 0 26px rgba(var(--accent-rgb),.4));}
  12%  {opacity:.4;    filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.3));}
  16%  {opacity:1;     filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.8)) drop-shadow(0 0 28px rgba(var(--accent-rgb),.45));}
  20%  {opacity:.15;   filter:drop-shadow(0 0 2px rgba(var(--accent-rgb),.15));}
  26%  {opacity:1;     filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.8)) drop-shadow(0 0 28px rgba(var(--accent-rgb),.45));}
  32%  {opacity:.65;   filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.4));}
  38%  {opacity:1;     filter:drop-shadow(0 0 16px rgba(var(--accent-rgb),.85)) drop-shadow(0 0 32px rgba(var(--accent-rgb),.5));}
  100% {opacity:1;     filter:drop-shadow(0 0 16px rgba(var(--accent-rgb),.85)) drop-shadow(0 0 32px rgba(var(--accent-rgb),.5));}
}
@media (prefers-reduced-motion: reduce){
  .curtain__logo{
    animation:curtainLogoIn 1s var(--ease-out) .15s forwards;
    filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.55));
  }
}
@keyframes curtainLogoIn{
  0%   {opacity:0;}
  100% {opacity:1;}
}
.curtain__sub{
  position:absolute;bottom:8vh;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--bone-mute);
  white-space:nowrap;
  opacity:0;animation:fadein .6s ease .6s forwards;
}
@media (max-width:520px){
  .curtain__sub{
    font-size:9px;
    letter-spacing:.22em;
  }
}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fadein{to{opacity:1}}

/* ---------- Cursor halo ---------- */
.cursor{display:none !important;}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;letter-spacing:-.01em;margin:0;line-height:1.02;}
em{
  font-style:italic;
  font-weight:900;
  color:var(--gold);
  font-family:'Playfair Display', var(--f-display), serif;
  letter-spacing:-.02em;
}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--bone-mute);
}
.section-eyebrow::before{
  content:"";display:inline-block;width:24px;height:1px;background:var(--gold);
}
.section-title{
  font-size:clamp(36px,6.4vw,92px);
  letter-spacing:-.02em;
  font-weight:400;
  margin:14px 0 18px;
  text-wrap:balance;
}
.section-sub{
  color:var(--bone-mute);
  font-size:clamp(15px,1.4vw,18px);
  max-width:54ch;
  margin:0;
}
.section-head{padding:clamp(48px,7vw,100px) var(--pad-x) clamp(28px,4vw,48px);}
/* First section after the hero gets a tighter top — the hero already
   provides plenty of breathing room and a full 160px on top of that
   reads as a dead band of black. */
.hero + section .section-head,
.hero ~ section:first-of-type .section-head{
  padding-top:clamp(40px,5vw,72px);
}
.section-head--center{text-align:center;}
.section-head--center .section-sub{margin-inline:auto;}
.section-head--center .section-eyebrow{justify-content:center;}

/* ---------- Buttons ----------
   TIER SYSTEM (shape signals weight of the action):
     • Default            → Soft Rectangle (6px) — everyday actions
     • .btn--premium      → Cut Corner — money/ticket/reserve moments
     • .bracket-frame (wrapper) → Bracket Frame — hero / final / one-shot CTAs
   Hover wipe + arrow are identical across all three tiers. */
.btn{
  --btn-fg: var(--bone);
  --btn-bg: rgba(6,6,10,.45);
  --btn-border: rgba(246,240,230,.22);
  --btn-wipe: var(--gold);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:13px 18px 13px 22px;
  border-radius:6px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--btn-fg);
  font-family:var(--f-body);
  font-weight:500;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
  isolation:isolate;
  overflow:hidden;
  cursor:pointer;
  text-decoration:none;
  transition:color .35s ease, border-color .35s ease;
}
.btn span{position:relative;z-index:2;display:block;}
.btn::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:var(--btn-wipe);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn:hover{color:var(--ink);border-color:var(--btn-wipe);}
.btn:hover::before{transform:translateY(0);}
.btn::after{
  content:"";
  position:relative;z-index:2;
  width:16px;height:8px;
  flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M1 4h14M11 1l4 3-4 3' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M1 4h14M11 1l4 3-4 3' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition:transform .4s var(--ease-out);
}
.btn:hover::after{transform:translateX(4px);}

.btn--ghost{--btn-bg:transparent;}
.btn--primary{
  --btn-fg: var(--ink);
  --btn-border: var(--bone);
  --btn-bg: var(--bone);
  --btn-wipe: var(--gold-hot);
}
.btn--lg{padding:15px 24px 15px 28px;font-size:12px;gap:16px;}
.btn--lg::after{width:18px;height:9px;}

/* ---------- Premium tier: Cut Corner ----------
   Applied to filled primary buttons that represent a ticket /
   reservation moment. The chamfer reads as a ticket stub or
   VIP pass. clip-path strips the border, so only use this on
   filled (.btn--primary) buttons. */
.btn--premium{
  border-radius:0;
  clip-path:polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  );
}
.btn--premium.btn--lg{
  clip-path:polygon(
    0 0,
    calc(100% - 13px) 0,
    100% 13px,
    100% 100%,
    13px 100%,
    0 calc(100% - 13px)
  );
}

/* ---------- Showcase tier: Bracket Frame ----------
   A wrapper element that draws pink L-brackets at two corners
   of the button it contains. Brackets grow on hover. Use on the
   site's one or two most important CTAs — hero and final. */
.bracket-frame{
  position:relative;
  display:inline-block;
  padding:10px;
  isolation:isolate;
}
.bracket-frame::before,
.bracket-frame::after{
  content:"";
  position:absolute;
  width:16px;height:16px;
  border:1px solid var(--gold);
  pointer-events:none;
  transition:width .45s var(--ease-out), height .45s var(--ease-out), border-color .35s ease;
}
.bracket-frame::before{top:0;left:0;border-right:0;border-bottom:0;}
.bracket-frame::after{bottom:0;right:0;border-left:0;border-top:0;}
.bracket-frame:hover::before,
.bracket-frame:hover::after{
  width:22px;height:22px;
  border-color:var(--gold-hot);
}
/* On cream backgrounds, brackets use ink instead of pink for contrast */
.section-light .bracket-frame::before,
.section-light .bracket-frame::after{border-color:var(--ink);}
.section-light .bracket-frame:hover::before,
.section-light .bracket-frame:hover::after{border-color:var(--gold-hot);}

/* ---------- Chips ---------- */
.chip{
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-2);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bone-mute);
  transition:color .25s ease, background .25s ease, border-color .25s ease;
}
.chip:hover{color:var(--bone);border-color:var(--bone-mute);}
.chip.is-active{background:var(--bone);color:var(--ink);border-color:var(--bone);}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad-x);
  transition:background .3s ease, backdrop-filter .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(6,6,10,.7);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  padding:12px var(--pad-x);
  border-bottom-color:var(--line);
}
.nav__logo{
  display:flex;align-items:center;gap:10px;
}
.nav__logo-img{
  display:block;
  height:32px;
  width:auto;
  object-fit:contain;
}
@media (max-width:720px){
  .nav__logo-img{height:26px;}
}
.nav__logo-word{
  font-family:var(--f-display);
  font-weight:500;
  letter-spacing:.16em;
  font-size:18px;
}
.nav__logo-dot{
  display:none;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px var(--gold);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.nav__links{
  display:flex;gap:32px;
  font-size:13px;letter-spacing:.03em;
}
.nav__links a{
  position:relative;color:var(--bone-2);
  transition:color .25s ease;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav__links a:hover{color:var(--bone);}
.nav__links a:hover::after{transform:scaleX(1);}
.nav__cta{display:inline-flex;}
.nav__menu{display:none;width:36px;height:36px;flex-direction:column;justify-content:center;align-items:center;gap:5px;}
.nav__menu span{display:block;width:22px;height:1.5px;background:var(--bone);transition:transform .3s ease;}
.nav__menu.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg);}
.nav__menu.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg);}

@media (max-width:1080px){
  .nav__links{display:none;}
  .nav__cta{display:none;}
  .nav__menu{display:flex;}
}

/* Mobile overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:var(--ink);
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.mobile-menu.is-open{opacity:1;pointer-events:auto;}
.mobile-menu__inner{
  display:flex;flex-direction:column;gap:18px;text-align:center;
}
.mobile-menu__inner a{
  font-family:var(--f-display);font-size:32px;letter-spacing:-.01em;
}
.mobile-menu__inner .btn{margin-top:24px;align-self:center;}

/* =========================================================
   TONIGHT pill (floating)
   ========================================================= */
.tonight{
  display:none !important;
  position:fixed;top:90px;right:var(--pad-x);z-index:90;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:rgba(6,6,10,.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-2);
  border-radius:999px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(-12px);
  transition:opacity .6s ease, transform .6s var(--ease-out);
}
.tonight.is-in{opacity:1;transform:translateY(0);}
.tonight__dot{
  width:8px;height:8px;border-radius:50%;
  background:#46e26a;
  box-shadow:0 0 0 0 rgba(70,226,106,.6);
  animation:beacon 1.6s ease-out infinite;
}
@keyframes beacon{
  0%{box-shadow:0 0 0 0 rgba(70,226,106,.5);}
  100%{box-shadow:0 0 0 10px rgba(70,226,106,0);}
}
.tonight__time{color:var(--gold);font-feature-settings:"tnum";}
.tonight__sep{opacity:.4;}
.tonight__text{color:var(--bone);}
@media (max-width:720px){.tonight{display:none;}}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:108px var(--pad-x) clamp(24px,3vw,40px);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);
  transition:opacity 1.4s ease, transform 8s ease-out;
}
.hero__slide.is-active{opacity:1;transform:scale(1);}

/* Nas slide — keep him in the right portion of the frame on desktop
   (away from the left-side headline), and centered on mobile where
   the slide is narrow and the headline overlay is less aggressive. */
.hero__slide--nas{
  background-position: 0% center;
}
/* B&W group photo — landscape composition with subjects spread across,
   letterbox it on desktop so nobody gets cropped. (Mobile rule below
   in the @media (max-width:720px) block forces cover so the photo
   actually fills the 4:5 frame.) */
.hero__slide--contain{
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#06060a;
}
@media (max-width:900px){
  .hero__slide--nas{
    background-position: 5% center;
  }
}

/* Right-anchored slide: portrait images that should sit on the right
   with the subject more fully visible, leaving a smoky left band for text.
   When this slide is active, we ALSO tone down the global .hero__overlay
   so the right side of the photo stays bright and the smoky black wash
   actually has contrast to read against. */
.hero__slide--right{
  background-color:#06060a;
  background-size:auto 108%;
  background-position:right center;
  background-repeat:no-repeat;
}
.hero__slide--right.is-active ~ .hero__overlay,
.hero__media:has(.hero__slide--right.is-active) ~ .hero__overlay{
  opacity:.25;
}
/* Smoky black wash positioned at the LEFT EDGE OF THE PHOTO (the photo
   sits right-anchored at ~38–45% slide width on desktop), so the blobs
   paint on top of the photo and fade INTO it. Positions in 40–75% range
   align with where the photo actually starts on screen. */
.hero__slide--right::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    /* solid black holds the left 50% so the headline reads on darkness */
    linear-gradient(90deg, rgba(6,6,10,1) 0%, rgba(6,6,10,1) 48%, rgba(6,6,10,0) 70%),
    /* narrow band of smoke at the photo's left edge only (~50-62%) */
    radial-gradient(ellipse 18% 70% at 50% 30%, rgba(6,6,10,.85) 0%, rgba(6,6,10,.3) 50%, rgba(6,6,10,0) 80%),
    radial-gradient(ellipse 16% 60% at 52% 78%, rgba(6,6,10,.82) 0%, rgba(6,6,10,.3) 50%, rgba(6,6,10,0) 82%),
    radial-gradient(ellipse 12% 38% at 56% 18%, rgba(6,6,10,.6) 0%, rgba(6,6,10,0) 78%),
    radial-gradient(ellipse 11% 32% at 58% 62%, rgba(6,6,10,.55) 0%, rgba(6,6,10,0) 80%),
    radial-gradient(ellipse 8% 22% at 62% 40%, rgba(6,6,10,.4) 0%, rgba(6,6,10,0) 85%);
}
.hero__slide--right::before{
  content:"";
  position:absolute;inset:0;
  z-index:4;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.026' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -0.15'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:520px 520px;
  opacity:.55;
  -webkit-mask-image:linear-gradient(95deg, rgba(0,0,0,0) 46%, rgba(0,0,0,1) 54%, rgba(0,0,0,.35) 65%, rgba(0,0,0,0) 76%);
          mask-image:linear-gradient(95deg, rgba(0,0,0,0) 46%, rgba(0,0,0,1) 54%, rgba(0,0,0,.35) 65%, rgba(0,0,0,0) 76%);
}
@media (max-width:900px){
  .hero__slide--right{
    background-size:cover;
    background-position:62% 28%;
  }
  .hero__slide--right::before{display:none;}
}
.hero__overlay{
  position:absolute;inset:0;
  z-index:1;
  transition:opacity .8s ease;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(6,6,10,.4), transparent 60%),
    linear-gradient(to top, rgba(6,6,10,.95) 0%, rgba(6,6,10,.5) 40%, rgba(6,6,10,.25) 70%, rgba(6,6,10,.8) 100%);
}
.hero__grain{display:none;}

.hero__inner{position:relative;z-index:2;max-width:1100px;}
.hero__inner > .hero__title{max-width:min(1500px,94vw);width:max-content;}
/* =========================================================
   HERO EYEBROW — Editorial masthead variant (Option C)
   No pill, no fill. Thin pink hairlines top + bottom of a
   letter-spaced caps line. Reads as magazine masthead.
   ========================================================= */
.hero__eyebrow.hero__eyebrow--masthead{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  padding:0;
  background:transparent;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  margin-bottom:30px;
  opacity:0;transform:translateY(20px);
  animation:enter .8s var(--ease-out) 1.2s forwards;
  /* Subtle drop shadow for legibility over busy photos (faces). */
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  width:fit-content;
  max-width:100%;
}
.hero__eyebrow-rule{
  display:block;
  height:1px;
  width:100%;
  background:var(--gold);
  opacity:.85;
  box-shadow:0 0 8px rgba(var(--accent-rgb),.4);
}
.hero__eyebrow-text{
  font-family:var(--f-body);
  font-weight:500;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--bone);
  white-space:nowrap;
  padding:0 2px;
}
@media (max-width:720px){
  .hero__eyebrow.hero__eyebrow--masthead{
    margin-bottom:18px;
    gap:4px;
  }
  .hero__eyebrow-text{
    font-size:9px;
    letter-spacing:.24em;
  }
}
@keyframes enter{to{opacity:1;transform:translateY(0);}}

.hero__title{
  font-size:clamp(34px,5.4vw,88px);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.035em;
  margin:0 0 22px;
  font-family:var(--f-display);
}
.hero__title .line > span{white-space:nowrap;}
.hero__title[data-font="mid"]{
  font-family:'Archivo Black', var(--f-display), sans-serif;
  font-weight:400;
  letter-spacing:-.025em;
}
.hero__title[data-font="mid"] .line--italic span{
  font-family:var(--f-display);
  font-weight:300;
}
.hero__title[data-font="heavy"]{
  font-family:'Bowlby One', var(--f-display), sans-serif;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:.95;
}
.hero__title[data-font="heavy"] .line--italic span{
  font-family:var(--f-display);
  font-weight:300;
}

/* ALT FONT OPTIONS — italic always stays in Unbounded */
.hero__title[data-font="syne"]{
  font-family:'Syne', var(--f-display), sans-serif;
  font-weight:700;
  font-size:clamp(56px,10.4vw,168px);
  letter-spacing:-.03em;
  line-height:.94;
}
.hero__title[data-font="bricolage"]{
  font-family:'Bricolage Grotesque', var(--f-display), sans-serif;
  font-weight:700;
  letter-spacing:-.03em;
}
.hero__title[data-font="boldonse"]{
  font-family:'Boldonse', var(--f-display), sans-serif;
  font-weight:400;
  letter-spacing:-.015em;
  line-height:.95;
}
.hero__title[data-font="bigshoulders"]{
  font-family:'Big Shoulders Display', var(--f-display), sans-serif;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:.88;
}
.hero__title[data-font="anybody"]{
  font-family:'Anybody', var(--f-display), sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
}
.hero__title[data-font="stretch"]{
  font-family:'StretchPro', var(--f-display), sans-serif;
  font-weight:400;
  font-size:clamp(36px,7vw,108px);
  letter-spacing:.01em;
  line-height:1.04;
}
.hero__title[data-font="stretch-accent"]{
  font-family:var(--f-display);
}
.hero__title[data-font="syne"] .line--italic span,
.hero__title[data-font="bricolage"] .line--italic span,
.hero__title[data-font="boldonse"] .line--italic span,
.hero__title[data-font="bigshoulders"] .line--italic span,
.hero__title[data-font="anybody"] .line--italic span,
.hero__title[data-font="stretch"] .line--italic span{
  font-family:'StretchPro', var(--f-display), sans-serif;
  font-weight:400;
  font-style:normal;
  letter-spacing:.01em;
}
.hero__title[data-font="stretch-accent"] .line--italic > span{
  font-family:'StretchPro', var(--f-display), sans-serif;
  font-weight:400;
  font-style:normal;
  letter-spacing:.02em;
  font-size:.62em;
  color:var(--gold);
  text-transform:uppercase;
  font-feature-settings:"liga" on, "dlig" on, "calt" on;
  -webkit-font-feature-settings:"liga" on, "dlig" on, "calt" on;
}

/* Font toggle widget (TEMP) */
.font-toggle{
  position:absolute;top:96px;right:var(--pad-x);z-index:5;
  display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;
  max-width:min(640px,calc(100vw - 2 * var(--pad-x)));
  padding:6px 6px 6px 14px;
  background:rgba(20,18,14,.72);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:999px;
  font-family:var(--f-body);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-mute);
}
.font-toggle__label{padding-right:6px;border-right:1px solid var(--line);margin-right:2px;}
.font-toggle button{
  appearance:none;background:transparent;border:0;color:var(--bone-mute);
  font:inherit;letter-spacing:.16em;
  padding:6px 12px;border-radius:999px;cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.font-toggle button:hover{color:var(--bone);}
.font-toggle button.is-active{background:var(--gold);color:var(--ink);}
@media (max-width:720px){.font-toggle{top:80px;font-size:10px;padding:4px 4px 4px 10px;} .font-toggle button{padding:5px 9px;}}
.hero__title .line{
  display:block;overflow:hidden;
  padding-right:.08em;
  padding-bottom:.12em;
  margin-bottom:-.08em;
}
.hero__title .line > span{
  display:block;
  white-space:nowrap;
  transform:translateY(110%);
  animation:rise .9s var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) > span{animation-delay:1.4s;}
.hero__title .line:nth-child(2) > span{animation-delay:1.55s;}
.hero__title .line:nth-child(3) > span{animation-delay:1.7s;}
.hero__title .line--italic > span{
  font-style:italic;color:var(--gold);
  font-family:'Playfair Display', 'Syne', var(--f-display), serif;
  font-weight:900;
  letter-spacing:-.03em;
  font-size:1.0em;
}

.hero__title .line > span{white-space:nowrap;}
/* Inline accent for the new 2-line hero title ("different HERE.")
   — same pink italic Playfair as .line--italic, but applied to a
   nested <em> so the rest of the line stays in the display font. */
.hero__title .hero__here{
  font-style:italic; color:var(--gold);
  font-family:'Playfair Display', 'Syne', var(--f-display), serif;
  font-weight:900;
  letter-spacing:-.01em;
}

.hero__title .stretchy{
  font-family:'StretchPro', var(--f-display), sans-serif;
  font-weight:400;
  font-style:normal;
  letter-spacing:.01em;
  line-height:1;
  color:var(--gold);
  vertical-align:baseline;
  margin:0 .04em;
  font-feature-settings:"liga" on, "dlig" on, "calt" on;
  -webkit-font-feature-settings:"liga" on, "dlig" on, "calt" on;
}
.hero__title .stretchy--cap{
  font-size:.74em;
  text-transform:uppercase;
}
.hero__title .stretchy--low{
  font-size:.62em;
  text-transform:lowercase;
}

.hero__sub{
  max-width:54ch;color:var(--bone-2);
  font-size:clamp(15px,1.5vw,19px);
  margin:0 0 36px;
  opacity:0;animation:fadein .8s ease 2s forwards;
}
.hero__ctas{
  display:flex;gap:10px;flex-wrap:wrap;
  opacity:0;animation:fadein .8s ease 2.2s forwards;
}

/* =========================================================
   Hero CTA — editorial pill with chapter-marker numbers
   ========================================================= */
.hero-cta{
  --cta-fg: var(--bone);
  --cta-border: rgba(246,240,230,.22);
  --cta-bg: rgba(6,6,10,.55);
  --cta-wipe: var(--gold);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:13px 18px 13px 20px;
  border-radius:6px;
  border:1px solid var(--cta-border);
  background:var(--cta-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--cta-fg);
  font-family:var(--f-body);
  font-weight:500;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
  isolation:isolate;
  overflow:hidden;
  transition:color .35s ease, border-color .35s ease;
}
.hero-cta::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:var(--cta-wipe);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.hero-cta:hover{
  color:var(--ink);
  border-color:var(--cta-wipe);
}
.hero-cta:hover::before{transform:translateY(0);}
.hero-cta > *{position:relative;z-index:1;}

.hero-cta__label{
  display:inline-flex;align-items:baseline;gap:10px;
}
.hero-cta__num{
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;
  font-weight:900;
  font-size:13px;
  letter-spacing:-.02em;
  color:var(--gold);
  text-transform:none;
  line-height:1;
  transition:color .35s ease;
}
.hero-cta:hover .hero-cta__num{color:var(--ink);}

.hero-cta__arrow{
  display:inline-flex;
  width:16px;height:8px;
  flex-shrink:0;
  transition:transform .4s var(--ease-out);
}
.hero-cta__arrow svg{width:100%;height:100%;}
.hero-cta:hover .hero-cta__arrow{transform:translateX(4px);}

/* Primary — solid bone fill so it pops as the lead action */
.hero-cta--primary{
  --cta-fg: var(--ink);
  --cta-border: var(--bone);
  --cta-bg: var(--bone);
  --cta-wipe: var(--gold-hot);
}
.hero-cta--primary .hero-cta__num{color:var(--ink);opacity:.55;}
.hero-cta--primary:hover .hero-cta__num{opacity:1;}


.hero__scroll{
  position:absolute;right:var(--pad-x);bottom:clamp(40px,8vw,90px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-mute);
}
.hero__scroll-line{width:1px;height:80px;background:linear-gradient(to bottom, var(--gold), transparent);position:relative;overflow:hidden;}
.hero__scroll-line::after{
  content:"";position:absolute;top:0;left:0;right:0;height:30%;
  background:var(--bone);
  animation:drip 2.2s ease-in-out infinite;
}
@keyframes drip{0%{transform:translateY(-100%);}100%{transform:translateY(330%);}}
@media (max-width:720px){.hero__scroll{display:none;}}

/* Mobile hero — landscape (3:2) photos forced into a 100svh portrait
   viewport got cropped to a thin vertical center strip, destroying the
   subject framing we curated. Fix: give photos their own 4:5 portrait
   frame at the top of the hero, with text/CTAs stacked beneath on the
   page's dark background. Every photo now shows in full. */
@media (max-width:720px){
  .hero{
    min-height:0;
    justify-content:flex-start;
    padding:62px 0 20px;
    overflow:hidden;
  }
  /* Cap the hero photo so the CTAs land before the fold on common
     phone viewports (~640–740 dvh after URL bar). Aspect kept at
     4:5 so the imagery still gets to breathe, just truncated when it
     would otherwise push CTAs past the fold. */
  .hero__media{
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio: 4 / 5;
    max-height: 56dvh;
    margin-bottom:18px;
    overflow:hidden;
  }
  /* With text now BELOW the photo, the heavy darken-gradient isn't
     needed for legibility. Keep just a soft bottom blend so the photo
     transitions cleanly into the page background. */
  .hero__overlay{
    background:
      linear-gradient(to top,
        rgba(6,6,10,.55) 0%,
        rgba(6,6,10,.15) 18%,
        rgba(6,6,10,0)   38%);
  }
  /* Reset the desktop slide overrides — the new 4:5 frame is close
     enough to the photos' native aspect that plain cover + center
     keeps every subject in frame. */
  .hero__slide,
  .hero__slide--nas,
  .hero__slide--right,
  .hero__slide--contain{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color:transparent;
  }
  /* B&W group photo: nudge the framing right so we crop more off the
     left woman and show more of the girl on the right. */
  .hero__slide--contain{
    background-position:72% center;
  }
  .hero__slide--right::before,
  .hero__slide--right::after{display:none;}

  /* Content block now sits below the photo, centered, in normal flow. */
  .hero__inner{
    padding:0 var(--pad-x);
    text-align:center;
    max-width:none;
  }
  .hero__eyebrow{margin-bottom:12px;}
  .hero__eyebrow.hero__eyebrow--masthead{justify-content:center;}
  .hero__title{
    font-size:clamp(28px,7.2vw,38px);
    line-height:1.05;
  }
  .hero__inner > .hero__title{max-width:100%;margin-inline:auto;}
  .hero__sub{
    font-size:13px;
    margin:10px auto 0;
    max-width:30ch;
  }
  .hero__ctas{
    margin-top:14px;
    gap:8px;
    justify-content:center;
  }
  .hero-cta{
    padding:10px 14px 10px 16px;
    font-size:10px;
    letter-spacing:.2em;
    gap:10px;
  }
  .hero-cta__num{font-size:12px;}
  .hero-cta__arrow{width:14px;height:7px;}
  /* keep legacy .btn fallback in case any are still in use */
  .hero__ctas .btn{
    flex:1 1 100%;
    justify-content:center;
    padding:11px 16px;
    font-size:11px;
    letter-spacing:.06em;
    gap:6px;
  }
  /* slide dot nav, if shown, should sit under the photo box not under
     the whole hero — but it's display:none on this site, so no-op. */

  /* Tighten the first section-head after the hero so there isn't a tall
     band of dead black space between the hero CTAs and "01 / Quick Booking". */
  .hero + section .section-head,
  .hero ~ section:first-of-type .section-head{
    padding-top:44px;
  }
  /* Generic section-head top padding on mobile gets dialed back too —
     clamp(80px,12vw,160px) was tuned for desktop, way too much on phones. */
  .section-head{padding-top:60px;}
}

.hero__nav{
  display:none;
  position:absolute;left:var(--pad-x);bottom:22px;z-index:2;
  gap:10px;
}
.hero__nav button{
  width:36px;height:2px;background:var(--line-2);border-radius:2px;
  transition:background .3s ease, width .3s ease;
}
.hero__nav button.is-active{background:var(--gold);width:60px;}

/* Marquee */
.hero__marquee{
  position:absolute;top:50%;left:0;right:0;z-index:1;
  pointer-events:none;
  transform:rotate(-3deg) translateY(-50%);
  background:var(--gold);color:var(--ink);
  padding:10px 0;
  border-top:1px solid rgba(0,0,0,.2);border-bottom:1px solid rgba(0,0,0,.2);
  overflow:hidden;
  opacity:0;animation:fadein .8s ease 1s forwards;
  display:none; /* hidden — too noisy in hero; reused below via class */
}
.marquee__track{
  display:flex;gap:30px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(20px,2.4vw,32px);
  letter-spacing:-.01em;text-transform:uppercase;
  white-space:nowrap;
  animation:scroll 30s linear infinite;
  width:max-content;
}
@keyframes scroll{to{transform:translateX(-50%);}}

/* =========================================================
   CHOOSE YOUR MOVE
   ========================================================= */
.move{padding:0 var(--pad-x) clamp(80px,10vw,140px);}
.move__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.move__card{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:380px;
  padding:32px 28px;
  border-right:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
  text-decoration:none;
  color:var(--bone);
  transition:color .35s ease;
}
.move__card:last-child{border-right:none;}
.move__card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transition:background .4s ease;
}
.move__card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.move__card:hover::after{transform:scaleX(1);}
.move__card:hover::before{background:var(--ink-2);}
.move__num{
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;
  font-weight:900;
  font-size:clamp(72px,7.5vw,128px);
  line-height:.85;
  letter-spacing:-.04em;
  color:var(--gold);
  text-transform:lowercase;
  margin:0 0 auto;
  position:relative;
  z-index:1;
  transition:color .35s ease, transform .5s var(--ease-out);
}
.move__card:hover .move__num{color:var(--gold-hot);transform:translateY(-2px);}
.move__card h3{
  font-size:clamp(18px,1.7vw,22px);
  font-weight:500;
  margin:28px 0 14px;
  letter-spacing:-.005em;
  color:var(--bone);
  position:relative;
  display:inline-block;
  align-self:flex-start;
}
.move__card h3::after{
  content:"";
  position:absolute;left:0;bottom:-8px;
  width:24px;height:1px;
  background:var(--gold);
  transition:width .45s var(--ease-out);
}
.move__card:hover h3::after{width:72px;}
.move__card p{
  color:var(--bone-mute);font-size:13px;margin:18px 0 24px;
  max-width:30ch;
}
.move__cta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone);
  transition:color .35s ease;
}
.move__card:hover .move__cta{color:var(--gold);}
.move__cta i{
  display:inline-block;width:18px;height:1px;background:var(--gold);
  transition:width .4s var(--ease-out);
}
.move__card:hover .move__cta i{width:34px;}

@media (max-width:1080px){.move__grid{grid-template-columns:repeat(2,1fr);}.move__card:nth-child(odd){border-right:1px solid var(--line);}.move__card:nth-child(even){border-right:none;}.move__card{border-bottom:1px solid var(--line);}.move__card:nth-last-child(-n+2){border-bottom:none;}}
@media (max-width:600px){
  .move__grid{grid-template-columns:1fr;}
  .move__card{
    min-height:auto;
    padding:22px 20px;
    flex-direction:row;
    align-items:center;
    gap:18px;
    border-right:none !important;
    border-bottom:1px solid var(--line);
  }
  .move__card:last-child{border-bottom:none;}
  .move__num{
    font-size:60px;
    line-height:.85;
    margin:0;
    flex-shrink:0;
    width:72px;
  }
  .move__card-body{flex:1;min-width:0;}
  .move__card h3{
    font-size:17px;
    margin:0 0 6px;
    align-self:flex-start;
  }
  .move__card h3::after{display:none;}
  .move__card p{
    font-size:12px;
    margin:0 0 8px;
    max-width:none;
  }
  .move__cta{font-size:9px;letter-spacing:.2em;}
}

/* =========================================================
   DINING
   ========================================================= */
/* =========================================================
   SECTION — LIGHT (bone background variant)
   Used on .dining and .private to break up the dark rhythm.
   Inverts text + borders + buttons to read on cream.
   ========================================================= */
.section-light{
  background:var(--bone);
  color:var(--ink);
}
.section-light .section-eyebrow{
  color:var(--ink);
  opacity:.7;
}
.section-light .section-eyebrow::before{background:var(--gold-hot);}
.section-light .section-title,
.section-light h2,
.section-light h3,
.section-light h4{color:var(--ink);}
.section-light .section-sub,
.section-light p{color:rgba(6,6,10,.65);}
.section-light em{color:var(--gold-hot);}

/* Buttons inside light sections: invert defaults so they read on cream */
.section-light .btn{
  --btn-fg: var(--ink);
  --btn-bg: transparent;
  --btn-border: rgba(6,6,10,.22);
  --btn-wipe: var(--ink);
}
.section-light .btn:hover{color:var(--bone);}
.section-light .btn--primary{
  --btn-fg: var(--bone);
  --btn-bg: var(--ink);
  --btn-border: var(--ink);
  --btn-wipe: var(--gold-hot);
}
.section-light .btn--primary:hover{color:var(--ink);}

/* Dining-specific overrides on light bg */
.section-light .dining__lede{color:rgba(6,6,10,.7);}
.section-light .dining__list li{
  border-top-color:rgba(6,6,10,.12);
  color:rgba(6,6,10,.7);
}
.section-light .dining__list li:last-child{border-bottom-color:rgba(6,6,10,.12);}
.section-light .dining__list span{color:var(--gold-hot);}
.section-light .dining__card{
  /* darken the card border so the photo tiles feel framed on cream */
  box-shadow:0 12px 40px -18px rgba(6,6,10,.4);
}

/* Private form overrides on light bg */
.section-light .private__sub{color:var(--gold-hot);}
.section-light .private__copy{color:rgba(6,6,10,.7);}
/* The .private__form is its own dark card — let it keep its own
   field/check styling without section-light's inversions interfering. */

/* Warehouse overrides on light bg */
.section-light .warehouse__copy p{color:rgba(6,6,10,.7);}
.section-light .warehouse__list li{
  border-top-color:rgba(6,6,10,.12);
  color:rgba(6,6,10,.7);
}
.section-light .warehouse__list li:last-child,
.section-light .warehouse__list li:nth-last-child(2){
  border-bottom-color:rgba(6,6,10,.12);
}
.section-light .warehouse__list li::before{background:var(--gold-hot);}

/* Sections / packages — see dedicated .pkg block below */

/* Final CTA on light bg */
.section-light.final{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,165,116,.18), transparent 60%),
    var(--bone);
}

/* =========================================================
   DINING
   ========================================================= */
.dining{padding:clamp(48px,7vw,96px) var(--pad-x) clamp(80px,10vw,140px);}
.dining__inner{
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,90px);
  align-items:center;
}
.dining__copy h2{margin-top:14px;}
.dining__lede{color:var(--bone-2);font-size:clamp(16px,1.5vw,19px);max-width:50ch;margin:24px 0 36px;}
.dining__list{list-style:none;padding:0;margin:0 0 36px;display:flex;flex-direction:column;gap:14px;}
.dining__list li{
  display:flex;align-items:center;gap:18px;
  padding:14px 0;border-top:1px solid var(--line);
  font-size:14px;color:var(--bone-2);
}
.dining__list li:last-child{border-bottom:1px solid var(--line);}
.dining__list span{
  color:var(--gold);font-family:var(--f-display);font-size:11px;letter-spacing:.2em;
}
.dining__ctas{display:flex;gap:10px;flex-wrap:wrap;}

.dining__media{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr 1.1fr auto;
  gap:14px;
  height:auto;
  min-height:840px;
}
.dining__more{
  grid-column:1 / -1;
  justify-self:end;
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:6px 4px;
  margin-top:2px;
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;
  font-weight:900;
  font-size:clamp(24px,2.4vw,34px);
  letter-spacing:-.02em;
  color:var(--gold);
  text-decoration:none;
  transition:gap .35s var(--ease-out), color .25s ease;
}
.dining__more:hover{
  gap:20px;
  color:var(--gold-hot);
}
.dining__more__arrow{
  width:30px;
  height:10px;
  flex-shrink:0;
  display:inline-block;
  transition:transform .35s var(--ease-out);
}
.dining__more:hover .dining__more__arrow{transform:translateX(4px);}
.dining__card{
  background-size:cover;background-position:center;
  border-radius:var(--r-md);
  position:relative;overflow:hidden;
  transition:transform .8s var(--ease-out);
}
.dining__card:hover{transform:scale(1.02);}
.dining__card--tall{grid-row:span 2;}
.dining__card--wide{grid-column:span 2;}
.dining__card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,6,10,.6), transparent 50%);
}
.dining__card .tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  padding:6px 12px;
  border:1px solid color-mix(in oklch, var(--gold) 70%, transparent);
  border-radius:999px;
  background:color-mix(in oklch, var(--gold) 18%, rgba(6,6,10,.55));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--gold-hot);
  /* Cap width so long labels ("Butternut Squash Ravioli") never collide
     with the right edge of the card. */
  max-width:calc(100% - 28px);
  white-space:normal;
}

@media (max-width:720px){
  /* Mobile: shrink food-tag pills so they don't dominate the photo and
     keep them well inside the card edges. */
  .dining__card .tag{
    left:10px;bottom:10px;
    font-size:9px;letter-spacing:.16em;
    padding:4px 9px;
    max-width:calc(100% - 20px);
    line-height:1.25;
  }
}

@media (max-width:1080px){
  .dining__inner{grid-template-columns:1fr;}
  .dining__media{height:auto;grid-template-rows:260px 260px 280px;}
}

/* Placeholder block (used here + in warehouse) */
.placeholder{
  background:
    repeating-linear-gradient(135deg, rgba(212,165,116,.05) 0 12px, transparent 12px 24px),
    var(--ink-3);
  border:1px dashed var(--line-2);
  border-radius:var(--r-md);
  display:grid;place-items:center;
  width:100%;height:100%;
  min-height:200px;
}
.placeholder--tall{min-height:500px;}
.placeholder__label{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px;color:var(--bone-mute);letter-spacing:.05em;
  padding:8px 14px;border:1px solid var(--line-2);border-radius:4px;
  background:var(--ink-2);
}

/* =========================================================
   EVENTS
   ========================================================= */
.events{padding:0 var(--pad-x) clamp(48px,6vw,80px);}
.events__filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px;}
.events__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.event{
  display:flex;flex-direction:column;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:transform .5s var(--ease-out),border-color .4s ease;
}
.event:hover{transform:translateY(-6px);border-color:var(--line-2);}
.event--feature{
  grid-column:span 2;grid-row:span 1;
  flex-direction:row;
}
.event__media{
  /* Locked to Instagram flyer ratio (4:5 portrait). Since every promoter
     uploads a 1080×1350 IG-formatted flyer, cover is effectively a
     pixel-perfect fit — no cropping, no letterbox, no backdrop blur dance. */
  aspect-ratio: 4 / 5;
  flex:none;
  background-size:cover;background-position:center;
  position:relative;
}
.event__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,6,10,.7), transparent 50%);
}
.event--feature .event__media{\n  flex: 0 0 clamp(320px, 32%, 460px);\n  aspect-ratio: 4 / 5;\n  min-height: 0;\n}
.event__cat{
  position:absolute;left:16px;top:16px;z-index:2;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:6px 10px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.event__date{
  position:absolute;right:16px;top:16px;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:54px;height:60px;
  background:var(--bone);color:var(--ink);
  border-radius:8px;
  text-align:center;
  font-family:var(--f-display);line-height:1;
}
.event__date b{font-size:9px;letter-spacing:.18em;margin-top:8px;font-weight:500;}
.event__date i{font-style:normal;font-size:22px;font-weight:500;margin-top:4px;}
.event__body{padding:22px 24px 26px;flex:1;}
.event--feature .event__body{
  flex:1.1;padding:36px 36px 30px;
  display:flex;flex-direction:column;justify-content:center;background:var(--ink-2);
}
.event__pill{
  display:inline-flex;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
  padding:5px 11px;border:1px solid var(--gold);border-radius:999px;
  margin-bottom:14px;
}
.event h3{
  font-size:clamp(18px,2vw,28px);font-weight:400;margin:0 0 8px;
  letter-spacing:-.01em;
}
.event--feature h3{font-size:clamp(28px,3.2vw,44px);}
.event__body p{color:var(--bone-mute);font-size:14px;margin:0 0 16px;}
.event__link{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);
  border-bottom:1px solid var(--gold);
  padding-bottom:3px;
}
.event__ctas{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.event.is-hidden{display:none;}

.events__more{margin-top:24px;text-align:center;}

@media (max-width:1080px){
  .events__grid{grid-template-columns:repeat(2,1fr);}
  .event--feature{grid-column:span 2;flex-direction:column;}
  .event--feature .event__media{aspect-ratio: 4 / 5;}
}
@media (max-width:680px){
  .events__grid{grid-template-columns:1fr;}
  .event--feature{grid-column:auto;}
}

/* =========================================================
   ZONES
   ========================================================= */
.zones{padding:0 0 clamp(40px,6vw,80px);background:var(--ink);}
/* Tighten the section-head for zones — the bordered stage that follows
   has its own visual weight, so the standard 160px top kicks in as dead
   black space between the events CTA and the "04 / The Spaces" eyebrow. */
.zones > .section-head{padding-top:clamp(40px,5vw,72px);}
.zones__stage{
  position:relative;
  margin:0 var(--pad-x);
  border-radius:var(--r-lg);
  overflow:hidden;
  min-height:480px;
  /* Two columns × two rows. The list (tabs) spans both columns so
     no empty cell hangs off the bottom-right of the container. */
  display:grid;
  grid-template-columns:1.4fr 1fr;
  grid-template-rows:1fr auto;
  grid-template-areas:
    "media panels"
    "list  list";
  border:1px solid var(--line);
}
.zones__media{grid-area:media;position:relative;overflow:hidden;}
.zones__panels{grid-area:panels;}
.zones__list{grid-area:list;}
.zones__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity 1s ease, transform 6s ease-out;
}
.zones__slide.is-active{opacity:1;transform:scale(1);}
.zones__veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 60%, var(--ink) 100%),
             linear-gradient(180deg, transparent 60%, rgba(6,6,10,.5));
  pointer-events:none;
}

.zones__panels{
  position:relative;
  padding:clamp(40px,4.5vw,64px) clamp(24px,3vw,44px) clamp(28px,3.6vw,48px);
  background:var(--ink-2);
}
/* Panels are absolutely positioned over each other and anchored to
   the TOP of the panels area (not vertically centered) — so the
   eyebrow ("01 / 05", "02 / 05", …) always lands at the same Y
   regardless of how many lines the title wraps to. */
.zones__panel{
  position:absolute;
  top:clamp(40px,4.5vw,64px);
  left:clamp(24px,3vw,44px);
  right:clamp(24px,3vw,44px);
  opacity:0;pointer-events:none;
  transform:translateY(12px);
  transition:opacity .5s ease, transform .6s var(--ease-out);
}
.zones__panel.is-active{
  opacity:1;pointer-events:auto;
  transform:none;
}
.zones__num{
  font-family:var(--f-display);font-size:12px;letter-spacing:.28em;color:var(--gold);
}
.zones__panel h3{
  font-size:clamp(28px,3.6vw,52px);font-weight:400;margin:12px 0 12px;
  letter-spacing:-.02em;
}
.zones__panel p{color:var(--bone-2);font-size:15px;max-width:40ch;margin:0 0 18px;}
.zones__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 0;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--bone);
}

.zones__list{
  list-style:none;margin:0;padding:24px clamp(30px,4vw,60px) 26px;
  display:flex;flex-wrap:wrap;gap:0;
  grid-column:1 / -1;
  border-top:1px solid var(--line);
  background:rgba(6,6,10,.6);
  backdrop-filter:blur(10px);
}
.zones__list li{flex:1;}
.zones__list button{
  width:100%;text-align:left;
  display:flex;align-items:center;gap:12px;
  padding:14px 8px;
  color:var(--bone-mute);
  font-size:13px;letter-spacing:.06em;
  margin-top:-26px;padding-top:26px;
  transition:color .3s ease;
}
.zones__list button b{
  font-family:var(--f-display);font-size:11px;letter-spacing:.2em;color:var(--bone-mute);
  font-weight:500;
  transition:color .3s ease;
}
.zones__list button:hover{color:var(--bone);}
.zones__list button:hover b{color:var(--gold);}
.zones__list button.is-active{color:var(--bone);}
.zones__list button.is-active b{color:var(--gold);}

@media (max-width:1080px){
  .zones__stage{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "media"
      "panels"
      "list";
    min-height:0;
  }
  .zones__media{min-height:300px;}
  .zones__panels{padding:30px 24px 32px;}
  .zones__panel{position:relative;inset:auto;top:auto;transform:none;display:none;}
  .zones__panel.is-active{display:block;}
  .zones__panel p{margin-bottom:14px;}
  .zones__list{padding:14px 16px;}
  .zones__list li{flex:1 1 calc(50% - 8px);}
  /* When the row of 5 zones wraps to 2-up, the 5th item lands alone
     on the bottom row — full-bleed it and center its content so it
     reads as an intentional summary tap, not an orphaned cell. */
  .zones__list li:last-child:nth-child(odd){flex-basis:100%;}
  .zones__list li:last-child:nth-child(odd) button{justify-content:center;}
  .zones__list button{
    margin-top:0;padding-top:14px;padding-bottom:14px;
  }
}
@media (max-width:600px){
  .zones__media{min-height:240px;}
  .zones__panels{padding:24px 20px 28px;}
  .zones__panel h3{font-size:26px;margin:8px 0 10px;}
  .zones__panel p{font-size:14px;}
  .zones__list{padding:10px 12px;}
  .zones__list li{flex:1 1 calc(50% - 6px);}
  .zones__list button{font-size:12px;padding:12px 6px;}
}

/* =========================================================
   ARENA
   ========================================================= */
.arena{padding:clamp(80px,10vw,140px) 0 0;background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);overflow:hidden;}
.arena__hero{
  position:relative;
  min-height:min(80vh,720px);
  margin:0 var(--pad-x);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 0 80px rgba(0,0,0,.5), inset 0 0 120px rgba(0,0,0,.5);
}
/* Carousel variant — each slide is an absolutely-positioned cross-fade layer */
.arena__hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.2s ease, transform 8s ease-out;
}
.arena__hero-slide.is-active{
  opacity:1;
  transform:scale(1);
}
.arena__hero-dots{
  position:absolute;left:50%;bottom:20px;
  transform:translateX(-50%);
  z-index:4;
  display:flex;gap:8px;
  /* Cap width so the row never overflows the inset frame on narrow
     viewports. flex-wrap allows the dashes to spill to a second row
     if they truly can't fit, but the mobile size-down below should
     keep them on one line. */
  max-width:calc(100% - 64px);
  flex-wrap:wrap;
  justify-content:center;
  row-gap:6px;
  /* Scoreboard chip system: counter so each child renders its slide number
     as a 2-digit pseudo-element label, monospace, slightly glowing. */
  counter-reset:arenaslide;
}
.arena__hero-dots button{
  /* Minimal numeric indicator — no chip box. Two-digit zero-padded
     number in mono, dim by default, glows gold + scales up when active.
     Reads as "press to switch slides" without visual weight of a chip. */
  counter-increment:arenaslide;
  width:auto;height:auto;
  padding:2px 4px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.4);
  font-family:'JetBrains Mono','Menlo',monospace;
  font-size:11px;
  letter-spacing:.04em;
  font-feature-settings:"tnum" 1;
  line-height:1;
  cursor:pointer;
  transition:color .25s ease, transform .35s var(--ease-out), text-shadow .35s ease;
}
.arena__hero-dots button::before{
  content:counter(arenaslide, decimal-leading-zero);
}
.arena__hero-dots button:hover{
  color:rgba(255,255,255,.85);
}
.arena__hero-dots button.is-active{
  color:var(--gold-hot, var(--gold));
  transform:scale(1.18);
  text-shadow:0 0 12px color-mix(in oklch, var(--gold) 55%, transparent);
}
@media (max-width:720px){
  .arena__hero-dots{
    gap:8px;
    bottom:14px;
  }
  .arena__hero-dots button{
    padding:2px 2px;
    font-size:10px;
  }
}
.arena__hero::after{
  /* Was: blinking "REC ● LIVE" camera-recording flag. Removed because the
     watch-party section should feel like the venue, not a security feed. */
  content:none;
}
.arena__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(6,6,10,.3) 0%, transparent 30%, transparent 60%, rgba(6,6,10,.6) 100%);
}

/* ---------- Arena carousel — custom-framed slides ----------
   These three slides crop differently per viewport. Defining the
   background-image + position in CSS (instead of inline style) lets us
   override per breakpoint without !important. */

/* Crown Royal stage shot — landscape. On the wide desktop hero (~2.6
   aspect), default `center` chopped the top of the LED screen. Push the
   focus higher so the screen sits fully in frame on desktop, with stage
   visible at the bottom. Mobile container is close to image aspect, so
   `center` is fine there. */
.arena__hero-slide--crown{
  background-image:url('assets/arena-crown-royal.jpg');
  background-position:center 18%;
}

/* Outdoor deck w/ mountain visual — portrait phone shot. On wide desktop
   it scales huge by width, so the screen sat far below the visible band
   and we saw mostly sky. Push the focus down so the LED screen lands
   mid-frame on desktop. */
.arena__hero-slide--deck{
  background-image:url('assets/arena-deck-mountain.jpg');
  background-position:center 55%;
}

/* Outdoor deck w/ cloud-sky on screen — also a portrait phone shot.
   Anchor higher than the mountain shot so we show more of the LED at
   the top and less of the concrete floor at the bottom. */
.arena__hero-slide--sky{
  background-image:url('assets/arena-deck-sky.jpg');
  background-position:center 42%;
}

/* ---------- New watch-party slides ---------- */
/* Spurs basketball game on the immersive screen w/ palm-leaf wall.
   REMOVED from carousel — duplicate of slide 5 (bunny-real, actually
   Spurs). Kept here in case we want to swap back in. */
.arena__hero-slide--spurs-game{
  background-image:url('assets/arena-spurs-game.jpg');
  background-size:cover;
  background-position:center 45%;
}
/* Bad Bunny LIVE on the actual screen — NOTE: file misnamed during import.
   The image at arena-bunny-real.jpg is actually a wider Spurs basketball
   shot with the palm-leaf wall + lounge seating. Treated as the Spurs
   slide. Switched to contain so the entire screen + room reads in frame
   on desktop (no close-up). */
.arena__hero-slide--bunny-real{
  background-image:url('assets/arena-bunny-real.jpg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#06060a;
}
/* Barclays/Nets cinematic intro — landscape, content centered.
   Use contain so the full jumbotron graphic is visible — cover was
   cropping the top/bottom of the screen content on desktop. */
.arena__hero-slide--nets-intro{
  background-image:url('assets/arena-nets-intro.jpg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#06060a;
}
/* High-res 2nd floor bar shot — Earth-from-space on screen, bar staff
   visible, full bar setup with stools. Landscape 1920×1280. */
.arena__hero-slide--bar-earth{
  background-image:url('assets/arena-bar-earth.jpg');
  background-position:center 40%;
}
/* Immersive lounge w/ flower visuals on screen — source was 1920x2880
   portrait (way too tall for a wide hero). Re-cropped to ~1920x2016 so
   cover scales sensibly without pixelation. Empty ceiling + sofa
   trimmed; the screen + palm wall is the focal content.
   Still felt too zoomed-in, so switched to contain — full image visible,
   no close-up feel. Dark letterbox bars blend with hero background. */
.arena__hero-slide--immersive-flowers{
  background-image:url('assets/immersive-screen.jpg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#06060a;
}
/* Bar TV w/ OKC/SAS game — TV is in the upper portion of the photo
   and cover was always cropping its top. Switch to contain so the
   entire TV reads in frame, with dark letterbox on the sides. */
.arena__hero-slide--bar-okc{
  background-image:url('assets/arena-bar-okc.jpg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#06060a;
}

/* Bad Bunny — show the WIDE (TV2) composite on desktop; swap to the
   PORTRAIT (TV1) composite on mobile where the wide one cover-cropped
   to a thin strip. */
.arena__hero-slide--bunny{
  background-image:url('assets/elevated-tv2-bunny.jpg');
  background-position:center;
}
@media (max-width:720px){
  .arena__hero-slide--bunny{
    background-image:url('assets/elevated-tv1-bunny.jpg');
    background-position:center 35%;
  }
  /* Mobile crops differ too — let the deck shot center vertically and the
     Crown Royal shot show the stage too since the aspect closely matches. */
  .arena__hero-slide--deck{background-position:center 40%;}
  .arena__hero-slide--sky{background-position:center 40%;}
  .arena__hero-slide--crown{background-position:center 40%;}
  /* Desktop uses contain on these slides to avoid pixelation/cropping
     on the wide hero. Mobile is a 4:5 portrait frame and these images
     are close enough in aspect that cover + sensible positioning works
     better than contain (no letterbox). */
  .arena__hero-slide--spurs-game{background-size:cover;background-position:center;}
  .arena__hero-slide--bunny-real{background-size:cover;background-position:center;}
  .arena__hero-slide--nets-intro{background-size:cover;background-position:center;}
  .arena__hero-slide--bar-earth{background-size:cover;background-position:center;}
  .arena__hero-slide--bar-okc{background-size:cover;background-position:center 15%;}
  .arena__hero-slide--immersive-flowers{background-size:cover;background-position:center;}
}
/* When the hero is in contain mode, dial the veil back so it doesn't
   darken the letterbox bars unnecessarily. */
.arena__veil{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
}

/* Pink chyron-style title stripe — full-width banner below the image.
   Subtle motion: (1) a tiny pulsing "live" dot before the eyebrow,
   (2) a soft white sheen that sweeps across the strip every ~7s.
   No marquee, no LED matrix — just the clean stripe with quiet life. */
.arena__stripe{
  position:relative;z-index:2;
  width:100%;
  background:var(--gold);
  padding:clamp(20px,3.2vw,44px) clamp(24px,5vw,72px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
  overflow:hidden;
  box-shadow:0 18px 60px -20px rgba(0,0,0,.4);
}
/* Sheen sweep — soft white diagonal band that slides across the strip
   every ~7s. Hidden off-screen most of the time, pointer-events:none. */
.arena__stripe::before{
  content:"";
  position:absolute;top:0;bottom:0;left:-30%;width:30%;
  background:linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,0) 65%,
    transparent 100%
  );
  transform:skewX(-18deg);
  pointer-events:none;
  animation:arenaStripeSheen 7.5s ease-in-out infinite;
}
@keyframes arenaStripeSheen{
  0%, 18%   {left:-30%;}
  38%, 100% {left:130%;}
}
@media (prefers-reduced-motion: reduce){
  .arena__stripe::before{animation:none;display:none;}
  .arena__stripe-livedot{animation:none;}
}

.arena__stripe-eyebrow{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:#fff;
  flex-shrink:0;
  opacity:.92;
}
/* Live dot — pulses with a soft white ripple, like a broadcast LIVE bug. */
.arena__stripe-livedot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:arenaStripeLivePulse 1.9s ease-out infinite;
}
@keyframes arenaStripeLivePulse{
  0%  {box-shadow:0 0 0 0 rgba(255,255,255,.7);  transform:scale(1);}
  60% {box-shadow:0 0 0 9px rgba(255,255,255,0); transform:scale(1.1);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);   transform:scale(1);}
}

.arena__stripe-title{
  position:relative;z-index:2;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(28px,4.8vw,68px);
  letter-spacing:-.02em;line-height:1;
  margin:0;
  color:#fff;
}
.arena__stripe-title em{
  color:#fff;
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;font-weight:900;
}

/* Legacy classes from earlier explorations — hidden so they don't
   render or take space. */
.arena__stripe-label,
.arena__stripe-display,
.arena__stripe-phrase,
.arena__stripe-marquee,
.arena__stripe-track,
.arena__stripe-glyph,
.arena__stripe-pulse{display:none;}
.arena__stripe-title--sr{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* =========================================================
   ARENA STRIPE — static pink banner with eyebrow + title
   ========================================================= */
.arena__below{
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  padding:clamp(32px,4vw,56px) var(--pad-x) clamp(16px,2vw,24px);
  text-align:center;
  position:relative;z-index:1;
}
.arena__lede{
  max-width:54ch;margin:clamp(36px,4vw,64px) auto 32px;color:var(--bone-mute);
  font-size:clamp(16px,1.35vw,20px);line-height:1.55;
  letter-spacing:.01em;
}
.arena__lede strong{color:var(--gold);font-weight:500;}
.arena__ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

@media (max-width:900px){
  .arena__stripe{
    padding:18px 22px;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .arena__stripe-eyebrow{font-size:10px;letter-spacing:.28em;}
  .arena__stripe-livedot{width:6px;height:6px;}
  .arena__stripe-title{font-size:clamp(24px,7vw,38px);}
  .arena__hero{min-height:58vh;}
}
.arena__hero::before{
  /* simulated screen edge — like a giant LED frame */
  content:"";position:absolute;inset:24px;
  border:1px solid rgba(255,255,255,.08);border-radius:calc(var(--r-lg) - 6px);
  pointer-events:none;
  z-index:2;
}

.arena__badges{
  display:flex;flex-wrap:wrap;gap:0;
  margin:clamp(14px,1.6vw,22px) var(--pad-x) 0;
  padding:24px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--f-display);
}
.arena__badges span{
  flex:1 1 auto;
  padding:8px 24px;
  border-right:1px solid var(--line);
  font-size:clamp(13px,1.2vw,16px);
  letter-spacing:.04em;
  color:var(--bone-2);
  text-align:center;
  white-space:nowrap;
}
.arena__badges span:last-child{border-right:none;}
.arena__badges span:first-child{color:var(--gold);}

.arena__stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  margin:clamp(24px,3vw,40px) var(--pad-x) 0;
  border-top:1px solid var(--line);
}
.arena__stats > div{
  padding:24px 24px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
}
.arena__stats > div:last-child{border-right:none;}
.arena__stats b{
  font-family:var(--f-display);font-weight:400;font-size:clamp(28px,4.4vw,62px);
  color:var(--bone);letter-spacing:-.02em;line-height:1;
}
.arena__stats > div:nth-child(3) b{
  /* "Rain or Shine" — longer text, dial down a touch */
  font-size:clamp(22px,3vw,44px);
}
.arena__stats i{font-style:normal;color:var(--bone-mute);font-size:13px;letter-spacing:.04em;}

/* THREE CLAIM GRID — restructured from a centered 3-line column into
   a 3-column row of equally-weighted claims. Each callout has a number
   tab, a small uppercase setup phrase, and a BIG italic display headline
   as the actual claim. Vertical dividers between columns mirror the
   stats grid. Mobile collapses to a stack with claims filling more of
   the narrow screen. */
.arena__callouts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:clamp(28px,3.5vw,48px) var(--pad-x) 0;
  padding:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:left;
  position:relative;
  max-width:none;
}
.arena__callouts::before,
.arena__callouts::after{
  content:"";
  position:absolute;left:50%;
  transform:translateX(-50%);
  width:1px;height:12px;
  background:var(--gold);
}
.arena__callouts::before{top:-6px;}
.arena__callouts::after{bottom:-6px;}

.arena__callout{
  padding:clamp(22px,2.4vw,36px) clamp(20px,2.4vw,36px);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px);
  position:relative;
}
.arena__callout:last-child{border-right:none;}

/* Number tab — small mono, dim, sits in upper-left of each column. */
.arena__callout-num{
  font-family:'JetBrains Mono','Menlo',monospace;
  font-size:11px;letter-spacing:.22em;
  color:var(--bone-mute);
  font-weight:500;
}

/* Setup phrase — small uppercase eyebrow, context for the claim.
   min-height reserves two lines of space so the claim below
   always starts at the same baseline across all three callouts,
   even when the setup is a single short line ("Built for"). */
.arena__callout-setup{
  font-family:var(--f-body);
  font-size:clamp(12px,1.05vw,15px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-mute);
  line-height:1.35;
  min-height:calc(2 * 1.35em);
  display:block;
}

/* The italic claim — actual marketing punchline. Big display type,
   gets to breathe. Keeps the neon-flicker animation hook. */
.arena__callout-claim{
  margin:0;
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;font-weight:900;
  font-size:clamp(42px,5.4vw,80px);
  letter-spacing:-.02em;
  line-height:.92;
  color:var(--gold);
  text-shadow:
    0 0 4px color-mix(in oklch, var(--gold) 70%, transparent),
    0 0 12px color-mix(in oklch, var(--gold) 45%, transparent),
    0 0 24px color-mix(in oklch, var(--gold) 25%, transparent);
  animation:neonFlicker 7s infinite;
}
.arena__callout-claim em{font-style:italic;}
.arena__callout:nth-child(1) .arena__callout-claim{animation-delay:0s;}
.arena__callout:nth-child(2) .arena__callout-claim{animation-delay:2.3s;}
.arena__callout:nth-child(3) .arena__callout-claim{animation-delay:4.6s;}

/* MOBILE — stack the three claims, give each room to breathe.
   Bigger claim type so the line fills more of the narrow screen. */
@media (max-width:720px){
  .arena__callouts{
    grid-template-columns:1fr;
    margin:clamp(36px,6vw,52px) 0 0;
  }
  .arena__callout{
    border-right:none;
    border-bottom:1px solid var(--line);
    padding:28px var(--pad-x);
    gap:14px;
  }
  .arena__callout:last-child{border-bottom:none;}
  .arena__callout-setup{
    font-size:13px;
    letter-spacing:.18em;
  }
  /* <br>s in setup/claim were tuned for desktop column widths — collapse
     them on mobile so the text flows naturally in the wider row. */
  .arena__callout-setup br,
  .arena__callout-claim br{display:none;}
  .arena__callout-claim{
    font-size:clamp(48px,13vw,72px);
    line-height:.95;
  }
}

@keyframes neonFlicker{
  0%, 8%, 11%, 14%, 100%   {opacity:1;}
  9%                        {opacity:.4;}
  12%                       {opacity:.65;}
  /* hold steady the rest of the cycle */
  20%, 90%                  {opacity:1;}
}

@media (max-width:900px){
  .arena__stats{grid-template-columns:repeat(2,1fr);}
  .arena__stats > div:nth-child(2){border-right:none;}
  .arena__badges span{flex:1 1 auto;padding:8px 14px;font-size:12px;}
}

/* =========================================================
   PRIVATE
   ========================================================= */
/* =========================================================
   CELEBRATE — birthdays / anniversaries / date nights
   Dark section sandwiched between Watch Party HQ and Private
   Events, with pink/white/gold confetti rain on scroll-in
   that settles into a slow ambient drift.
   ========================================================= */
.celebrate{
  position:relative;
  padding:clamp(80px,9vw,130px) var(--pad-x);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.16), transparent 60%),
    var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.celebrate__confetti{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
}
.celebrate__head,
.celebrate__perks,
.celebrate__fine,
.celebrate__ctas{
  position:relative;z-index:2;
}
.celebrate__head{
  text-align:center;
  max-width:780px;
  margin:0 auto 56px;
}
.celebrate__head .section-eyebrow{justify-content:center;display:inline-flex;}
.celebrate__sub{
  color:var(--bone-2);
  font-size:clamp(15px,1.3vw,17px);
  max-width:52ch;
  margin:18px auto 4px;
  line-height:1.55;
}
.celebrate__tagline{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(20px,2.2vw,32px);
  letter-spacing:-.01em;
  color:var(--bone);
  margin:14px auto 0;
  line-height:1.15;
}
.celebrate__tagline em{
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;
  font-weight:900;
  color:var(--gold);
  letter-spacing:-.02em;
}
.celebrate__perks{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.2vw,16px);
  max-width:1280px;
  margin:0 auto;
}
.perk{
  position:relative;
  padding:clamp(22px,1.8vw,30px) clamp(18px,1.4vw,24px);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  display:flex;flex-direction:column;gap:14px;
  min-height:200px;
  transition:transform .45s var(--ease-out), border-color .35s ease, background .35s ease;
  overflow:hidden;
}
.perk:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  background:rgba(var(--accent-rgb),.04);
}
.perk__num{
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;font-weight:900;
  font-size:clamp(36px,3.4vw,52px);
  letter-spacing:-.03em;
  color:var(--gold);
  line-height:.85;
  margin-bottom:auto;
}
.perk__title{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(17px,1.4vw,22px);
  letter-spacing:-.01em;
  color:var(--bone);
  margin:0;
  line-height:1.15;
}
.perk__copy{
  color:var(--bone-mute);
  font-size:13px;
  line-height:1.5;
  margin:0;
}

/* Featured: Save your age — pink fill, demo of cycling number */
.perk--featured{
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-hot) 100%);
  border-color:var(--gold);
  color:#fff;
  box-shadow:0 24px 60px -28px rgba(var(--accent-rgb),.6);
}
.perk--featured .perk__num{
  color:rgba(255,255,255,.7);
}
.perk--featured .perk__title{color:#fff;}
.perk--featured .perk__copy{color:rgba(255,255,255,.85);}
.perk--featured:hover{
  transform:translateY(-4px);
  border-color:#fff;
  background:linear-gradient(180deg, var(--gold-hot) 0%, var(--gold) 100%);
}
.perk__flag{
  position:absolute;top:14px;right:14px;
  font-family:var(--f-body);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;
  padding:5px 10px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
}
/* Cycling-age number — subtle ticker effect, animate via simple class swap */
.perk__age{
  display:inline-block;
  min-width:1ch;
  font-variant-numeric:tabular-nums;
  transition:opacity .25s ease, transform .25s var(--ease-out);
}
.perk__age.is-changing{
  opacity:0;
  transform:translateY(-6px);
}

.celebrate__fine{
  text-align:center;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-mute);
  margin:36px 0 32px;
}
.celebrate__ctas{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}

/* --- Confetti pieces (created via JS, styled via CSS) --- */
.confetti{
  position:absolute;
  top:-20px;
  width:8px;height:14px;
  pointer-events:none;
  will-change:transform, opacity;
  animation:confettiFall var(--dur,5s) cubic-bezier(.25,.6,.45,1.05) var(--delay,0s) forwards;
  transform-origin:50% 50%;
}
.confetti.is-circle{
  width:6px;height:6px;border-radius:50%;
}
.confetti.is-strip{
  width:4px;height:18px;
}
@keyframes confettiFall{
  0%   {transform:translate3d(0,0,0) rotate(0deg); opacity:1;}
  10%  {opacity:1;}
  92%  {opacity:1;}
  100% {transform:translate3d(var(--drift,0px), 105vh, 0) rotate(var(--spin,720deg)); opacity:0;}
}

@media (max-width:1080px){
  .celebrate__perks{
    grid-template-columns:repeat(2,1fr);
  }
  .perk--featured{grid-column:span 2;}
}
@media (max-width:600px){
  /* Mobile perks: 2-up grid with tighter padding/type so cards don't
     feel oversized. The featured "Turning 21" card still spans full
     width because it carries the SAVE YOUR AGE button + cycling age. */
  .celebrate__perks{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .perk--featured{grid-column:span 2;}
  .perk{
    min-height:auto;
    padding:16px 14px;
    gap:6px;
    border-radius:14px;
  }
  .perk__num{font-size:24px;margin-bottom:2px;}
  .perk__title{font-size:15px;line-height:1.15;}
  .perk__copy{font-size:12px;line-height:1.4;}
  /* Featured card keeps a bit more room because of the inline button */
  .perk--featured{padding:20px 18px;}
  .perk--featured .perk__num{font-size:30px;}
  .perk--featured .perk__title{font-size:20px;}
  .perk__flag{
    position:static;
    align-self:flex-start;
    margin-bottom:4px;
    font-size:10px;
  }
}
@media (prefers-reduced-motion: reduce){
  .confetti{animation:none;display:none;}
  .perk__age.is-changing{transition:none;}
}

/* =========================================================
   PRIVATE
   ========================================================= */
.private{padding:clamp(48px,7vw,96px) var(--pad-x) clamp(80px,10vw,140px);}
/* head is full-width so the large title can stretch and stay centered;
   sub + copy clamp themselves to a comfortable reading measure below. */
.private__head{margin:0 auto 0;text-align:center;}
.private__head .section-eyebrow{justify-content:center;display:inline-flex;}
.private__title{
  max-width:none;
  font-size:clamp(34px,5.4vw,76px);
  line-height:1.02;
}
.private__sub{
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;font-weight:700;
  color:var(--gold);
  font-size:clamp(18px,1.8vw,26px);
  margin:18px auto 14px;
  max-width:64ch;
  letter-spacing:-.01em;
}
.private__copy{
  max-width:62ch;margin:0 auto;
  color:rgba(6,6,10,.65);
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.6;
}

/* Hide old static pill list (HTML still has it removed; this is a guard). */
.private__types{display:none;}

/* Event-types marquee — single line infinite scroller */
.private__marquee{
  margin:44px calc(var(--pad-x) * -1) 60px;
  padding:18px 0;
  border-top:1px solid rgba(6,6,10,.12);
  border-bottom:1px solid rgba(6,6,10,.12);
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.private__marquee-track{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);
  width:max-content;
  animation:privateMarquee 55s linear infinite;
  white-space:nowrap;
}
.private__marquee-track > span{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(14px,1.1vw,18px);
  letter-spacing:.02em;
  color:var(--ink);
}
.private__marquee-track > i{
  font-style:normal;
  color:var(--gold);
  font-size:clamp(10px,.9vw,14px);
  opacity:.7;
}
@keyframes privateMarquee{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(-50%,0,0);}
}
@media (prefers-reduced-motion: reduce){
  .private__marquee-track{animation-duration:300s;}
}

/* If the title actually overflows on narrow desktops, allow it to wrap. */
@media (max-width:1100px){
  .private__title{font-size:clamp(34px,5vw,64px);}
}

/* =========================================================
   PRIVATE INQUIRY — click-to-open card + modal dialog
   The full form was crowding the page; we surface a small
   preview card and reveal the form in a centered modal.
   ========================================================= */
.private__form-card{
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;
  width:100%;max-width:1100px;margin:48px auto 0;
  padding:38px 44px;
  background:rgba(246,240,230,0.03);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  color:inherit;text-align:left;cursor:pointer;font:inherit;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.private__form-card:hover{
  background:rgba(232,38,124,0.04);
  border-color:color-mix(in oklch, var(--gold) 40%, var(--line));
}
.private__form-card h3{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(28px,3.2vw,42px);line-height:1.1;letter-spacing:-.01em;
  color:var(--ink);margin:10px 0 8px;
}
.private__form-card h3 em{font-family:'Playfair Display',serif;font-style:italic;font-weight:900;color:var(--gold-hot);}
.private__form-card p{font-size:14px;color:rgba(6,6,10,0.62);margin:0;max-width:42ch;}
.private__form-card__cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.private__form-card__alt{font-size:12px;color:var(--bone-mute);}
.private__form-card__alt a{color:var(--gold-hot);text-decoration:underline;text-decoration-color:color-mix(in oklch, var(--gold) 50%, transparent);}
@media (max-width:760px){
  .private__form-card{
    grid-template-columns:1fr;gap:24px;padding:28px 22px;
    text-align:center;
  }
  .private__form-card p{margin:0 auto;}
  .private__form-card__cta{align-items:center;}
}
.inquiry-modal{
  position:fixed;inset:0;
  width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 48px);
  margin:auto;padding:0;
  background:#0a0a12;color:var(--bone);
  border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,0.6), 0 0 60px rgba(232,38,124,0.18);
  overflow:hidden;
}
.inquiry-modal::backdrop{
  background:rgba(6,6,10,0.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.inquiry-modal[open]{display:flex;flex-direction:column;}
.inquiry-modal__close{
  position:absolute;top:10px;right:14px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:transparent;border:1px solid var(--line);
  color:var(--bone-2);font-size:22px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color .2s, border-color .2s, background .2s;
}
.inquiry-modal__close:hover{color:var(--bone);border-color:var(--gold);background:rgba(232,38,124,0.08);}
.inquiry-modal__form{
  max-height:calc(100dvh - 48px);
  overflow:auto;
  padding:48px 36px 28px;
  margin:0 !important;
  /* Dark background inherited from modal */
  background:transparent !important;
  border:0 !important;
}
@media (max-width:520px){
  .inquiry-modal__form{padding:48px 18px 22px;}
}

.private__form{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  max-width:1100px;margin:0 auto;
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink);
  color:var(--bone);
}
.private__form-head{
  grid-column:1 / -1;
  padding:32px clamp(24px,3vw,36px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--ink);
}
.private__form-head .section-eyebrow{color:var(--gold);opacity:1;}
.private__form-head .section-eyebrow::before{background:var(--gold);}
.private__form-head h3{
  font-family:var(--f-display);
  font-size:clamp(22px,2.4vw,32px);font-weight:400;margin:0;
  letter-spacing:-.01em;
  color:var(--bone);
}
.field{
  padding:20px clamp(22px,2.4vw,32px) 14px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.field:nth-child(odd){border-right:1px solid var(--line);}
.field--full{grid-column:1 / -1;border-right:none;}
.field label{
  display:block;
  font-family:var(--f-body);font-weight:500;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,240,230,.7);
}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:none;outline:none;
  padding:10px 0 6px;
  border-bottom:1px solid rgba(246,240,230,.18);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:15px;
  transition:border-color .3s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(246,240,230,.32);}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold);}
.field textarea{resize:vertical;min-height:80px;}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23c9c2b3' fill='none' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 4px center;
  padding-right:24px;
}
.field select option{background:var(--ink-3);color:var(--bone);}
.field input[type="date"]{color-scheme:dark;}
.checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.checks label{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;
  cursor:pointer;letter-spacing:0;text-transform:none;font-size:13px;color:var(--bone-2);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.checks input{appearance:none;width:14px;height:14px;border:1px solid var(--bone-mute);border-radius:3px;margin:0;transition:background .2s ease;}
.checks input:checked{background:var(--gold);border-color:var(--gold);}
.checks label:has(input:checked){background:rgba(var(--accent-rgb),.12);color:var(--bone);border-color:var(--gold);}
.private__submit{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;
  padding:24px clamp(24px,3vw,36px);
}
.private__submit .btn{
  /* Override section-light .btn — the form is dark so use the standard
     bone-fill primary aesthetic from the rest of the site. */
  --btn-fg: var(--ink);
  --btn-bg: var(--bone);
  --btn-border: var(--bone);
  --btn-wipe: var(--gold-hot);
}
.private__submit .btn:hover{color:var(--ink);}
.private__note{font-size:11px;color:var(--bone-mute);letter-spacing:.18em;text-transform:uppercase;}

@media (max-width:800px){
  .private__form{grid-template-columns:1fr;}
  .field{border-right:none !important;padding:18px 22px;}
  .private__form-head{flex-direction:column;align-items:flex-start;gap:6px;}
}

/* =========================================================
   WAREHOUSE
   ========================================================= */
.warehouse{padding:clamp(56px,7vw,96px) var(--pad-x);}
.warehouse__inner{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,80px);
  align-items:stretch;
}
.warehouse__media{position:relative;display:flex;}
/* Stretch the carousel to match the copy column's height so the section's
   visual height is anchored to the image, not pushed taller by long copy. */
.warehouse__media .warehouse-carousel{height:100%;max-height:none;min-height:520px;}
/* Right column lays out as a flex stack so the bullet list expands to
   fill any leftover space between the title/body and the CTAs. The whole
   column matches the media height — no more empty pink void below. */
.warehouse__copy{
  display:flex;flex-direction:column;
  height:100%;
}
.warehouse__copy .section-eyebrow{flex:0 0 auto;}
.warehouse__copy h2{flex:0 0 auto;}
.warehouse__copy p{flex:0 0 auto;}
.warehouse__list{flex:1 1 auto;align-content:start;}
.warehouse__ctas{flex:0 0 auto;}

/* =========================================================
   WAREHOUSE CAROUSEL — auto-cycling slideshow of vendor photos
   ========================================================= */
.warehouse-carousel{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  max-height:680px;
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(6,6,10,.4);
  background:#0a0a10;
}
.warehouse-carousel__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.2s ease, transform 6s ease;
}
.warehouse-carousel__slide.is-active{
  opacity:1;
  transform:scale(1);
}
.warehouse-carousel::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,6,10,.55) 0%, transparent 35%);
  pointer-events:none;
}
.warehouse-carousel__tag{
  position:absolute;left:20px;right:20px;bottom:54px;
  z-index:2;
  font-family:var(--f-body);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;
}
.warehouse-carousel__dots{
  position:absolute;left:20px;bottom:20px;
  z-index:2;
  display:flex;gap:8px;
}
.warehouse-carousel__dots button{
  width:24px;height:2px;
  background:rgba(255,255,255,.35);
  border:none;padding:0;
  cursor:pointer;
  transition:background .3s ease, width .4s var(--ease-out);
}
.warehouse-carousel__dots button.is-active{
  background:var(--gold);
  width:36px;
}

@media (max-width:1080px){
  .warehouse-carousel{aspect-ratio:1/1;max-height:520px;}
}
@media (max-width:600px){
  .warehouse-carousel__tag{font-size:10px;letter-spacing:.18em;bottom:46px;}
  .warehouse-carousel__dots button{width:18px;}
  .warehouse-carousel__dots button.is-active{width:28px;}
}
.warehouse__copy h2{
  margin-top:14px;
  /* Tighter than the global .section-title to keep the copy column from
     ballooning past the carousel's height. The right column matches the
     image height instead of pushing it taller. */
  font-size:clamp(34px,4.4vw,58px);
  line-height:1.02;
}
/* Force "Need more room?" to stay on a single line — if the column is
   too narrow for the chosen font size, scale the line down until it
   fits rather than letting it wrap to two lines. */
.warehouse__title-line{
  white-space:nowrap;
  display:inline-block;
}
.warehouse__copy p{
  color:var(--bone-2);
  max-width:50ch;
  margin:18px 0 22px;
  font-size:clamp(13px,1vw,15px);
  line-height:1.55;
}
.warehouse__list{
  list-style:none;padding:0;margin:0 0 22px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:6px 24px;
}
.warehouse__list li{
  padding:9px 0;border-top:1px solid var(--line);
  font-size:13px;color:var(--bone-2);letter-spacing:.02em;
  position:relative;padding-left:18px;
}
.warehouse__list li::before{
  content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--gold);
}
.warehouse__list li:last-child,.warehouse__list li:nth-last-child(2){border-bottom:1px solid var(--line);}
.warehouse__ctas{display:flex;gap:10px;flex-wrap:wrap;}

@media (max-width:1080px){
  .warehouse__inner{grid-template-columns:1fr;}
  .warehouse__media .warehouse-carousel{min-height:0;max-height:520px;}
  .warehouse__copy h2{font-size:clamp(36px,7vw,52px);}
  /* On narrow viewports allow the first title line to wrap naturally
     instead of nowrapping past the viewport edge. */
  .warehouse__title-line{white-space:normal;}
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{padding:0 var(--pad-x) clamp(80px,10vw,140px);}
.gallery__filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:36px;}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:200px;
  gap:14px;
  margin-bottom:24px;
}
/* Compact mode — hide items beyond the first 8 (only when no filter active).
   When a filter chip is engaged, .gallery__grid.is-filtered shows all,
   so users still see every matching item. */
.gallery__grid:not(.is-filtered):not(.is-expanded) .gallery__item:nth-child(n+9){
  display:none;
}
.gallery__more-row{
  display:flex;justify-content:center;
  margin-bottom:80px;
}
.gallery__grid.is-expanded ~ .gallery__more-row .gallery__more-btn::after{
  content:" — Less";
}
.gallery__item{
  position:relative;background-size:cover;background-position:center;
  border-radius:var(--r-md);overflow:hidden;
  transition:transform .6s var(--ease-out);
  cursor:zoom-in;
}
.gallery__item--lg{grid-column:span 2;grid-row:span 2;}
.gallery__item--tall{grid-row:span 2;}
.gallery__item--wide{grid-column:span 2;}
.gallery__item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,6,10,.5), transparent 40%);
  opacity:0;transition:opacity .4s ease;
}
.gallery__item:hover{transform:scale(1.015);}
.gallery__item:hover::after{opacity:1;}
.gallery__item span{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.gallery__item:hover span{opacity:1;transform:translateY(0);}
.gallery__item.is-hidden{display:none;}

@media (max-width:900px){
  .gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:8px;}
  .gallery__item--lg{grid-column:span 2;grid-row:span 2;}
  .gallery__item--wide{grid-column:span 2;}
  .gallery__item--tall{grid-row:span 2;}
  .gallery__filters{gap:6px;margin-bottom:22px;}
  .gallery__filters .chip{font-size:10px;padding:6px 10px;letter-spacing:.18em;}
  .gallery__grid:not(.is-filtered):not(.is-expanded) .gallery__item:nth-child(n+7){display:none;}
}

/* "Show all moments" CTA */
.gallery__more-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;
  font-family:var(--f-body);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone);
  background:transparent;
  border:1px solid rgba(246,240,230,.24);
  border-radius:6px;
  cursor:pointer;
  transition:border-color .3s ease, color .3s ease;
}
.gallery__more-btn:hover{border-color:var(--gold);color:var(--gold);}
.gallery__more-btn svg{transition:transform .3s ease;}
.gallery__grid.is-expanded ~ .gallery__more-row .gallery__more-btn svg{transform:rotate(180deg);}

/* Reels */
.reels{margin-top:60px;}

/* IG feed strip — full-bleed white/bone banner header that mirrors the
   pink arena stripe but inverted. IG glyph + @handle on the left,
   italic display title centered, "Follow →" pill CTA on the right.
   Replaces the older .reels__head three-line layout. */
.reels__strip{
  position:relative;
  /* Bleed past the section padding so the band runs edge to edge. */
  width:calc(100% + var(--pad-x) * 2);
  margin:0 calc(var(--pad-x) * -1) clamp(24px,2.4vw,36px);
  background:var(--bone);
  color:var(--ink);
  padding:clamp(20px,2.6vw,36px) clamp(28px,5vw,72px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,48px);
  flex-wrap:wrap;
  overflow:hidden;
}
.reels__strip-handle{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(12px,.95vw,14px);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  transition:color .25s ease;
  flex:0 0 auto;
}
.reels__strip-handle:hover{color:var(--gold-hot);}
.reels__strip-igicon{
  width:22px;height:22px;display:block;flex:0 0 auto;
}
.reels__strip-title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(22px,3.2vw,44px);
  letter-spacing:-.015em;
  line-height:1.08;
  margin:0;
  flex:1 1 auto;
  text-align:center;
  color:var(--ink);
}
.reels__strip-title em{
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;
  font-weight:900;
  color:var(--gold-hot);
}
.reels__strip-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(11px,.85vw,13px);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding:11px 20px;
  border:1px solid rgba(6,6,10,.22);
  border-radius:999px;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  flex:0 0 auto;
}
.reels__strip-cta:hover{
  background:var(--ink);color:var(--bone);border-color:var(--ink);
}
.reels__strip-arrow{
  transition:transform .25s ease;
}
.reels__strip-cta:hover .reels__strip-arrow{transform:translateX(3px);}

@media (max-width:780px){
  .reels__strip{
    padding:14px 18px;
    gap:10px;
    justify-content:space-between;
    align-items:center;
  }
  .reels__strip-handle{
    order:1;flex:0 1 auto;
    font-size:11px;letter-spacing:.16em;
    gap:8px;
  }
  .reels__strip-igicon{width:18px;height:18px;}
  .reels__strip-cta{
    order:2;flex:0 0 auto;
    padding:7px 12px;font-size:10px;letter-spacing:.2em;
  }
  /* On phones the title gets its own full-width row, big enough to read
     as a real headline (not a tagline) — running edge to edge of the
     strip's content area. */
  .reels__strip-title{
    order:3;flex:1 1 100%;
    font-family:var(--f-display);
    font-weight:400;
    font-style:normal;
    font-size:clamp(22px,7vw,34px);
    letter-spacing:-.015em;
    text-align:center;
    line-height:1.1;
    margin-top:6px;
    color:var(--ink);
  }
  .reels__strip-title em{
    font-family:'Playfair Display', var(--f-display), serif;
    font-style:italic;
    font-weight:900;
    color:var(--gold-hot);
    /* Force the pink italic clause onto its own line so the title
       reads as two clean lines on phones. */
    display:block;
  }
}

.reels__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:24px;flex-wrap:wrap;
}
.reels__head h3{
  font-size:clamp(28px,3.4vw,48px);font-weight:400;margin:8px 0 0;letter-spacing:-.02em;
}
.reels__handle{
  font-size:13px;letter-spacing:.04em;color:var(--gold);
  padding-bottom:4px;border-bottom:1px solid var(--gold);
}
.reels__track{
  display:flex;gap:14px;
  /* Center the cards horizontally when they don't fill the viewport;
     `safe` keeps the first card reachable when the row DOES overflow
     (without `safe`, justify-content:center pushes the first card
     off-screen and the user can't scroll back to it). */
  justify-content:safe center;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 0 20px;
  cursor:grab;
  scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
}
.reels__track:active{cursor:grabbing;}
.reels__track::-webkit-scrollbar{height:6px;}
.reels__track::-webkit-scrollbar-thumb{background:var(--gold);border-radius:6px;}
.reel{
  flex:0 0 auto;
  width:220px;aspect-ratio:9/16;
  background-color:#0a0a10;
  border-radius:var(--r-md);
  position:relative;overflow:hidden;
  scroll-snap-align:start;
  transition:transform .5s var(--ease-out);
  cursor:pointer;
}
/* Photo sits in pseudo so we can Ken Burns it independently of card chrome.
   Inline `--reel-bg` on each .reel sets the image url. */
.reel::before{
  content:"";
  position:absolute;inset:-6%;
  background-image:var(--reel-bg);
  background-size:cover;background-position:center;
  animation:reelKenBurns 18s ease-in-out infinite alternate;
}
.reel:nth-child(2n)::before{animation-duration:22s;animation-delay:-4s;}
.reel:nth-child(3n)::before{animation-duration:26s;animation-delay:-9s;}
.reel:nth-child(5n)::before{animation-duration:20s;animation-delay:-14s;}
@keyframes reelKenBurns{
  0%   {transform:scale(1)    translate3d(0,0,0);}
  50%  {transform:scale(1.08) translate3d(-1%,1%,0);}
  100% {transform:scale(1.12) translate3d(2%,-2%,0);}
}
.reel:hover{transform:scale(1.03);}
.reel::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(6,6,10,.7), transparent 50%);
}
/* Tiny "LIVE" pill at top-right, replaces the old centered play button —
   communicates the feed is moving without a click cue users expect. */
.reel__live{
  position:absolute;top:12px;right:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;
  background:rgba(6,6,10,.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:999px;
  font-family:'JetBrains Mono', monospace;
  font-size:9px;letter-spacing:.2em;
  color:#fff;
}
.reel__live::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:#ff4d4d;
  animation:reelLiveBlink 1.6s ease-in-out infinite;
  box-shadow:0 0 6px rgba(255,77,77,.8);
}
@keyframes reelLiveBlink{
  0%,100%{opacity:1;}
  50%   {opacity:.35;}
}
.reel__tag{
  position:absolute;left:12px;bottom:12px;z-index:2;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
}

@media (max-width:600px){.reel{width:170px;}}

/* Live feed override — when reels-feed.js swaps in real IG reels, each
   card is an <a> wrapping an optional <video>. We keep the same chrome
   (Ken Burns cover, LIVE pill, caption tag) but layer the video on top
   so it plays into view on hover/scroll. */
.reel--live-feed{text-decoration:none;color:inherit;}
.reel__video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:cover;
  /* Was hidden until hover; now visible by default so autoplay
     actually reads on desktop too. Hover/scroll behaviour unchanged. */
  opacity:1;
  transition:opacity .25s ease;
  pointer-events:none;
}
.reel--live-feed:hover .reel__video,
.reel--live-feed:focus-visible .reel__video,
.reel__video[data-playing="true"]{opacity:1;}
/* On touch (no hover), let scroll-into-view auto-play reveal the video. */
@media (hover:none){
  .reel__video{opacity:1;}
}

/* Play-triangle badge on video cards — appears for reels so cards read
   as motion even when we can't embed the underlying .mp4. */
.reel__playmark{
  position:absolute;top:50%;left:50%;z-index:2;
  width:54px;height:54px;
  display:grid;place-items:center;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;
  transition:transform .35s var(--ease-out), opacity .35s ease;
  pointer-events:none;
}
.reel__playmark svg{width:22px;height:22px;margin-left:3px;}
.reel--live-feed:hover .reel__playmark{transform:translate(-50%,-50%) scale(1.08);}
/* Hide the play badge while the video itself is actually playing. */
.reel--live-feed:hover .reel__video:not([data-failed]) ~ .reel__playmark{opacity:0;}

/* =========================================================
   SECTIONS (packages) — editorial cards on the light section
   ========================================================= */
.sections{padding:0 var(--pad-x) clamp(80px,10vw,140px);}
.sections__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
  align-items:stretch;
}
.pkg{
  --pkg-fg: var(--ink);
  --pkg-muted: rgba(6,6,10,.6);
  --pkg-line: rgba(6,6,10,.12);
  position:relative;
  padding:clamp(24px,2.4vw,38px) clamp(22px,2.2vw,34px);
  border-radius:var(--r-md);
  background:#fff;
  color:var(--pkg-fg);
  display:flex;flex-direction:column;gap:18px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .45s var(--ease-out), box-shadow .35s ease;
  box-shadow:0 1px 0 var(--pkg-line);
}
.pkg::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.pkg:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px -28px rgba(6,6,10,.45);
}
.pkg:hover::before{transform:scaleX(1);}

/* Featured — saturated pink fill */
.pkg--featured{
  --pkg-fg: #fff;
  --pkg-muted: rgba(255,255,255,.78);
  --pkg-line: rgba(255,255,255,.22);
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-hot) 100%);
  color:#fff;
  box-shadow:0 24px 60px -24px rgba(var(--accent-rgb),.5);
}
.pkg--featured::before{background:#fff;}
.pkg__flag{
  position:absolute;top:14px;right:14px;
  font-family:var(--f-body);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;
  padding:5px 10px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  z-index:2;
}

.pkg__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--pkg-line);
}
.pkg__head span{
  font-family:var(--f-body);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pkg-muted);
  font-weight:500;
}
.pkg__head b{
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;
  font-weight:900;
  font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-.02em;
  color:var(--pkg-fg);
  white-space:nowrap;
}
.pkg--featured .pkg__head b{color:#fff;}

.pkg h3{
  font-family:var(--f-display);
  font-size:clamp(22px,2.3vw,30px);
  font-weight:500;
  letter-spacing:-.015em;
  margin:0;
  line-height:1.05;
  color:var(--pkg-fg);
}
.pkg ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.pkg ul li{
  position:relative;
  padding-left:18px;
  font-size:13.5px;line-height:1.45;
  color:var(--pkg-muted);
  letter-spacing:.005em;
}
.pkg ul li::before{
  content:"";
  position:absolute;left:0;top:9px;
  width:8px;height:1px;
  background:var(--gold);
}
.pkg--featured ul li::before{background:#fff;}

/* Override the section-light .btn rules so buttons inside pkg cards work
   against the card's own fill (cream card → ink button, pink card → white). */
.pkg .btn{
  --btn-fg: #fff;
  --btn-bg: var(--ink);
  --btn-border: var(--ink);
  --btn-wipe: var(--gold);
  width:100%;justify-content:center;
  margin-top:auto;
}
.pkg .btn:hover{color:#fff;}
.pkg--featured .btn{
  --btn-fg: var(--gold);
  --btn-bg: #fff;
  --btn-border: #fff;
  --btn-wipe: var(--ink);
}
.pkg--featured .btn:hover{color:#fff;}

@media (max-width:900px){
  .sections__grid{grid-template-columns:1fr;gap:12px;}
  .pkg{padding:22px 22px;gap:14px;}
  .pkg h3{font-size:22px;}
  .pkg ul{gap:7px;}
  .pkg ul li{font-size:13px;}
  .pkg__head{padding-bottom:10px;}
  .pkg__head b{font-size:22px;}
  .pkg__flag{font-size:9px;letter-spacing:.2em;padding:4px 8px;}
}


/* =========================================================
   FINAL CTA
   ========================================================= */
.final{
  padding:clamp(80px,10vw,140px) var(--pad-x);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,165,116,.15), transparent 60%),
    var(--ink);
  text-align:center;
}
.final__inner{max-width:1100px;margin:0 auto;}
.final__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(40px,7vw,108px);
  letter-spacing:-.025em;line-height:.96;
  margin:18px 0 40px;
}
.final__title em{font-weight:900;color:var(--gold);font-style:italic;font-family:'Playfair Display', var(--f-display), serif;letter-spacing:-.02em;}
.final__ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{padding:80px var(--pad-x) 30px;border-top:1px solid var(--line);}
.foot__top{
  display:grid;grid-template-columns:1.1fr 2.5fr;gap:48px;
  padding-bottom:50px;
  border-bottom:1px solid var(--line);
}
.foot__brand p{color:var(--bone-mute);font-size:14px;max-width:46ch;margin:16px 0 0;}
.foot__cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;}
.foot__cols h4{
  font-family:var(--f-display);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin:0 0 14px;
}
.foot__cols p{color:var(--bone-2);font-size:14px;margin:0;}
.foot__cols a{color:var(--bone-2);transition:color .25s ease;}
.foot__cols a:hover{color:var(--bone);}
.foot__bottom{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;row-gap:16px;
  padding-top:24px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-mute);
}
.foot__line{flex:1;height:1px;background:var(--line);min-width:24px;}

/* Site-design credit — LaunchBaby */
.foot__credit{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;white-space:nowrap;
  transition:opacity .25s ease;
}
.foot__credit-by{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-mute);
}
.lb-wordmark{
  font-family:'Bowlby One', var(--f-display, sans-serif);
  font-size:14px;line-height:1;letter-spacing:.005em;text-transform:uppercase;
  display:inline-flex;
}
.lb-launch{color:#EC008C;}
.lb-baby{color:#00AEEF;}
.foot__credit:hover{opacity:.82;}

/* =========================================================
   DELIVERY STRIP — banner inside the Eat Elevated section
   ========================================================= */
.delivery-strip{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  margin:80px var(--pad-x) 0;
  border:1px solid rgba(6,6,10,.12);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--ink);
  text-decoration:none;
  color:var(--bone);
  transition:transform .45s var(--ease-out), border-color .35s ease;
}
.delivery-strip:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
}
.delivery-strip__media{
  min-height:300px;
  background-size:cover;
  background-position:center;
}
.delivery-strip__copy{
  padding:clamp(28px,4vw,52px);
  display:flex;flex-direction:column;justify-content:center;gap:12px;
}
.delivery-strip__eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);
}
.delivery-strip h3{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(28px,3.2vw,46px);
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--bone);
  margin:0;
}
.delivery-strip h3 em{
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;
  font-weight:900;
  color:var(--gold);
  letter-spacing:-.02em;
}
.delivery-strip p{
  font-size:14px;
  color:var(--bone-2);
  max-width:48ch;
  margin:0;
}
.delivery-strip__cta{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone);
  margin-top:6px;
  transition:color .35s ease;
}
.delivery-strip:hover .delivery-strip__cta{color:var(--gold);}
.delivery-strip__cta i{
  display:inline-block;width:18px;height:1px;background:currentColor;
  position:relative;
  transition:width .4s var(--ease-out);
}
.delivery-strip__cta i::after{
  content:"";position:absolute;right:0;top:50%;
  width:5px;height:5px;
  border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.delivery-strip:hover .delivery-strip__cta i{width:34px;}
@media (max-width:800px){
  .delivery-strip{grid-template-columns:1fr;margin:60px var(--pad-x) 0;}
  .delivery-strip__media{min-height:240px;}
}

/* =========================================================
   SECTION — LIGHT (tinted cream, shifts with accent)
   ========================================================= */
.section-light{background:var(--bg-light);}
.final.section-light{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.16), transparent 60%),
    var(--bg-light);
}

/* =========================================================
   MOBILE PERF — minor effect trims so the site doesn't choppy-
   scroll on phones. Compressed images + cache headers now do
   the heavy lifting; we no longer pause decorative animations.
   ========================================================= */
@media (max-width: 900px){
  .nav.is-scrolled,
  .hero__top-pill,
  .hero__cta,
  .hero__btn,
  .menu__chip,
  .event__badge,
  .zones,
  .reel__chip,
  .reel__nav,
  .ann-card__scrim,
  .mobile-stickybar,
  .dlv-modal__scrim {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  /* The event feature backdrop uses filter:blur which the GPU
     rasterizes once per frame at huge cost on mobile. Cap it. */
  .event__media-backdrop {
    filter: blur(18px) brightness(0.5) saturate(1.1) !important;
  }
  /* Decorative loops left ON — the marquee / reel sheen is part
     of the brand. (Was paused for perf; compressed assets
     reclaimed enough budget to bring them back.) */
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.foot__credit{
  color:var(--bone);
  text-decoration:none;
  border-bottom:1px solid rgba(212,165,116,.4);
  transition:color .25s ease, border-color .25s ease;
}
.foot__credit:hover{color:var(--gold);border-bottom-color:var(--gold);}
@media (max-width:1200px){
  .foot__top{grid-template-columns:1fr;gap:40px;}
  .foot__cols{grid-template-columns:repeat(5,1fr);}
}
@media (max-width:760px){
  .foot{padding:60px 20px 24px;}
  .foot__top{text-align:center;}
  .foot__brand{display:flex;flex-direction:column;align-items:center;}
  .foot__brand p{margin-left:auto;margin-right:auto;}
  .foot__cols{grid-template-columns:repeat(2,1fr);gap:28px 20px;text-align:center;}
  /* The last footer col ("More") would otherwise orphan into one of
     the two columns. Span both so it centers properly on the row. */
  .foot__cols > div:last-child{grid-column:1 / -1;}
  .foot__cols > div{display:flex;flex-direction:column;align-items:center;}
  /* Warehouse CTAs — center on mobile so the buttons sit in the middle
     of the column instead of left-aligned. */
  .warehouse__ctas{justify-content:center;}
  .foot__bottom{justify-content:center;text-align:center;flex-direction:column;gap:14px;}
  .foot__line{display:none;}
}

/* =========================================================
   MOBILE BAR
   ========================================================= */
.mobile-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  display:none;
  background:rgba(6,6,10,.85);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-top:1px solid var(--line-2);
  padding:10px 12px env(safe-area-inset-bottom);
}
.mobile-bar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:8px 4px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-2);
}
.mobile-bar a i{
  display:block;width:6px;height:6px;border-radius:50%;background:var(--gold);
}
@media (max-width:720px){
  .mobile-bar{display:flex;}
  body{padding-bottom:60px;}
  /* Hidden while the hero is in view so it doesn't crowd the photo.
     site-nav.js toggles .mobile-bar--hidden via IntersectionObserver. */
  .mobile-bar{
    transition: transform .3s ease, opacity .3s ease;
    transform: translateY(0);
  }
  .mobile-bar.mobile-bar--hidden{
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }
}

/* =========================================================
   MODAL
   ========================================================= */
.modal{position:fixed;inset:0;z-index:200;pointer-events:none;}
.modal.is-open{pointer-events:auto;}
.modal__scrim{
  position:absolute;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;transition:opacity .4s ease;
}
.modal__panel{
  position:absolute;top:0;right:0;height:100%;
  width:min(560px,100%);
  background:var(--ink);
  border-left:1px solid var(--line-2);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .5s var(--ease-out);
  overflow-y:auto;
}
.modal.is-open .modal__scrim{opacity:1;}
.modal.is-open .modal__panel{transform:translateX(0);}
.modal__close{
  position:absolute;top:18px;right:18px;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-2);
  display:grid;place-items:center;
  transition:background .3s ease;
}
.modal__close:hover{background:var(--ink-3);}
.modal__close span{display:block;position:absolute;width:14px;height:1.4px;background:var(--bone);}
.modal__close span:nth-child(1){transform:rotate(45deg);}
.modal__close span:nth-child(2){transform:rotate(-45deg);}
.modal__head{padding:60px 40px 24px;border-bottom:1px solid var(--line);}
.modal__title{font-size:clamp(28px,3.6vw,40px);font-weight:400;letter-spacing:-.02em;margin:10px 0 0;}
.modal__cards{display:flex;flex-direction:column;}
.m-card{
  display:flex;align-items:center;gap:20px;
  padding:24px 40px;
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.m-card:hover{background:var(--ink-2);}
.m-card__num{
  font-family:var(--f-display);font-size:11px;letter-spacing:.24em;color:var(--gold);
  width:30px;flex-shrink:0;
}
.m-card div{flex:1;}
.m-card h3{font-size:18px;font-weight:500;margin:0 0 4px;font-family:var(--f-body);letter-spacing:0;}
.m-card p{font-size:13px;color:var(--bone-mute);margin:0;}
.m-card__arrow{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;flex-shrink:0;
  transition:transform .4s var(--ease-out), background .3s ease;
}
.m-card__arrow::before{
  content:"";width:10px;height:1px;background:var(--bone);
  position:relative;
}
.m-card__arrow::after{
  content:"";position:absolute;width:6px;height:6px;
  border-right:1px solid var(--bone);border-top:1px solid var(--bone);
  transform:rotate(45deg) translate(-1px,1px);
}
.m-card:hover .m-card__arrow{background:var(--gold);transform:translateX(4px);}

/* =========================================================
   REVEAL animations
   ========================================================= */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out), transform 1s var(--ease-out);}
.reveal.is-in{opacity:1;transform:translateY(0);}
.reveal--delay-1{transition-delay:.1s;}
.reveal--delay-2{transition-delay:.2s;}
.reveal--delay-3{transition-delay:.3s;}

/* Honor reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* =========================================================
   PHOTO LABEL — replaces pill labels on top of images.
   Pattern: short pink rule + (optional) small all-caps category
   + bold display name with one italic pink word.
   Used on dining cards, event cards, gallery, reels, anywhere
   a photo carries a name. ALWAYS visible — no hover required.
   ========================================================= */
.photo-label{
  position:absolute;left:14px;bottom:14px;right:14px;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  max-width:calc(100% - 28px);
  pointer-events:none;
}
.photo-label__rule{
  width:30px;height:1px;background:var(--gold);
  flex:0 0 auto;
}
.photo-label__meta{
  font-family:var(--f-body);font-weight:500;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-2);
  line-height:1.2;
}
.photo-label__name{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(16px,1.6vw,22px);
  letter-spacing:-.005em;
  color:#fff;
  line-height:1.1;
}
.photo-label__name em{
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;font-weight:900;
  color:var(--gold-hot);
  letter-spacing:-.02em;
}
/* Bigger variant for featured/hero photo cards */
.photo-label--lg .photo-label__name{font-size:clamp(20px,2.2vw,30px);}
.photo-label--lg .photo-label__rule{width:40px;}
@media (max-width:720px){
  .photo-label{left:10px;right:10px;bottom:10px;gap:5px;}
  .photo-label__meta{font-size:9px;letter-spacing:.18em;}
  .photo-label__name{font-size:clamp(15px,4vw,18px);}
}

/* =========================================================
   IN-BODY EYEBROW — replaces .event__pill (a pill sitting
   inside the featured event card body, not on a photo).
   ========================================================= */
.event__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-weight:500;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);
  margin:0 0 14px;
}
.event__eyebrow::before{
  content:"";display:inline-block;
  width:24px;height:1px;background:var(--gold);
  flex:0 0 auto;
}

/* =========================================================
   SLASH FILTER — replaces .chip pill filters in
   .events__filters and .gallery__filters.
   "Words, not buttons" — selected category becomes the
   italic Playfair pink word + a small dot.
   We re-skin existing .chip buttons in those containers so
   the JS (data-filter / is-active) keeps working.
   ========================================================= */
.events__filters[hidden],
.gallery__filters[hidden]{display:none !important;}
.events__filters,
.gallery__filters{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:0 16px;
  margin-bottom:36px;
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(18px,1.9vw,26px);
  letter-spacing:-.005em;
  line-height:1.5;
}
.gallery__filters{justify-content:center;}
.events__filters .chip,
.gallery__filters .chip{
  /* nuke the pill */
  padding:0;border:0;background:none;border-radius:0;
  /* inherit the slash-list type sizing */
  font:inherit;
  text-transform:none;
  letter-spacing:inherit;
  color:var(--bone-mute);
  position:relative;
  transition:color .25s ease;
  cursor:pointer;
}
.events__filters .chip:hover,
.gallery__filters .chip:hover{
  color:var(--bone-2);
  background:none;border:0;
}
.events__filters .chip + .chip::before,
.gallery__filters .chip + .chip::before{
  content:"/";
  display:inline-block;
  margin-right:16px;
  color:rgba(246,240,230,.28);
  font-family:var(--f-display);font-weight:300;
  font-style:normal;
}
.events__filters .chip.is-active,
.gallery__filters .chip.is-active{
  color:var(--bone);
  font-family:'Playfair Display', var(--f-display), serif;
  font-style:italic;font-weight:900;
  background:none;border:0;
  letter-spacing:-.02em;
}
.events__filters .chip.is-active::after,
.gallery__filters .chip.is-active::after{
  content:"";display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  margin-left:8px;
  vertical-align:middle;
  transform:translateY(-4px);
}
@media (max-width:720px){
  .events__filters,
  .gallery__filters{
    gap:0 12px;
    font-size:clamp(16px,4.6vw,20px);
    margin-bottom:24px;
  }
  .events__filters .chip + .chip::before,
  .gallery__filters .chip + .chip::before{margin-right:12px;}
}


/* ============================================================
   MENUS STRIP (#menus on index.html)
   ============================================================ */
.menus-strip {
  background: var(--ink);
  padding: clamp(60px, 8vw, 100px) var(--pad-x) clamp(60px, 8vw, 100px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.menus-strip::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 80% 30%, color-mix(in oklch, var(--gold) 10%, transparent), transparent 70%),
    radial-gradient(40% 60% at 10% 90%, color-mix(in oklch, var(--ember) 10%, transparent), transparent 70%);
  pointer-events: none;
}
.menus-strip .section-head { position: relative; z-index: 2; }
.menus-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  max-width: 1480px;
  margin: 0 auto;
  background: var(--ink-2);
}
.menus-card {
  padding: clamp(24px, 3vw, 36px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  gap: 12px;
  text-decoration: none;
  position: relative;
  min-height: 220px;
  transition: background .25s ease, transform .25s ease;
}
.menus-card:last-child { border-right: none; }
.menus-card:hover { background: color-mix(in oklch, var(--gold) 8%, var(--ink-2)); }
.menus-card--featured {
  background: color-mix(in oklch, var(--gold) 5%, var(--ink-2));
}
.menus-card--featured::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--ember));
}
.menus-card__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-hot);
}
.menus-card__title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0;
}
.menus-card:hover .menus-card__title { color: var(--gold-hot); }
.menus-card__copy {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--bone-mute);
  margin: 0;
  flex: 1;
}
.menus-card__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  margin-top: 12px;
}
.menus-card__cta i {
  display: inline-block;
  width: 20px; height: 1px;
  background: var(--gold);
  position: relative;
  transition: width .25s ease;
}
.menus-card__cta i::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  border-left: 6px solid var(--gold);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}
.menus-card:hover .menus-card__cta i { width: 32px; }

@media (max-width: 980px) {
  .menus-grid { grid-template-columns: 1fr 1fr; }
  .menus-card { border-right: 1px solid var(--line); }
  .menus-card:nth-child(2n) { border-right: none; }
  .menus-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 580px) {
  .menus-grid { grid-template-columns: 1fr; }
  .menus-card { border-right: none; border-bottom: 1px solid var(--line); }
  .menus-card:last-child { border-bottom: none; }
}

/* =========================================================
   LATE NIGHT BAND — 5th menu lives as its own full-width
   moment beneath the 4-card grid. Image-led, dark, kinetic.
   ========================================================= */
.menus-late {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 1px;            /* hairline above to lock it to the grid */
  min-height: clamp(180px, 22vw, 260px);
  border: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
.menus-late__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: 62% 40%;
  transform: scale(1.02);
  transition: transform 1.6s cubic-bezier(.16,1,.3,1), filter .4s ease;
  filter: brightness(0.72) saturate(1.05);
  z-index: 0;
}
.menus-late__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(6,6,10,0.78) 0%, rgba(6,6,10,0.45) 32%, rgba(6,6,10,0.08) 60%, rgba(6,6,10,0) 80%),
    linear-gradient(180deg, rgba(6,6,10,0.15) 0%, rgba(6,6,10,0) 40%, rgba(6,6,10,0.25) 100%);
}
/* Soft hot-pink accent bleed from right — ties to brand */
.menus-late::after {
  content: '';
  position: absolute; right: -10%; top: -30%;
  width: 50%; height: 160%;
  z-index: 1;
  background: radial-gradient(closest-side, rgba(232,38,124,0.22), rgba(232,38,124,0) 70%);
  pointer-events: none;
  transition: opacity .4s ease;
}
.menus-late__inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 44px);
  min-height: inherit;
}
.menus-late__copy { max-width: 62ch; }
.menus-late__num {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-hot);
  margin-bottom: 14px;
}
.menus-late__title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--bone);
}
.menus-late__title em {
  font-style: italic;
  background: linear-gradient(90deg, #FF2E86 0%, #E8267C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.menus-late__sub {
  font-family: var(--f-body);
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.55;
  color: var(--bone-2);
  margin: 0;
}
.menus-late__cta {
  display: inline-flex; align-items: center; gap: 14px;
  flex-shrink: 0;
  padding: 14px 22px;
  border: 1px solid rgba(246,240,230,0.32);
  background: rgba(6,6,10,0.4);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: var(--f-body);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.menus-late__cta-arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.menus-late:hover .menus-late__bg { transform: scale(1.06); filter: brightness(0.85) saturate(1.1); }
.menus-late:hover .menus-late__cta { background: rgba(232,38,124,0.85); border-color: rgba(232,38,124,1); color: #fff; }
.menus-late:hover .menus-late__cta-arrow { transform: translateX(6px); }

@media (max-width: 720px) {
  .menus-late { min-height: 220px; }
  .menus-late__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding: 28px 22px;
  }
  .menus-late__copy { text-align: center; }
  .menus-late__scrim {
    background:
      linear-gradient(180deg, rgba(6,6,10,0.4) 0%, rgba(6,6,10,0.6) 100%);
  }
  .menus-late__cta { width: 100%; justify-content: center; }
}


/* ============================================================
   EVENTS: expand/collapse + empty state
   ============================================================ */
.events__extra {
  display: contents;
}
.events__extra[hidden] { display: none !important; }

.events__empty {
  grid-column: 1 / -1;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--bone-mute);
  text-align: center;
  padding: 36px 22px;
  border: 1px dashed var(--line-2);
  border-radius: 4px;
}

button.btn[data-events-toggle] {
  cursor: pointer;
  border: 1px solid var(--bone);
}
button.btn[data-events-toggle][aria-expanded="true"] {
  background: color-mix(in oklch, var(--gold) 12%, transparent);
  border-color: var(--gold);
}


/* ============================================================
   ANNOUNCEMENT POPUP — dropped in by data/announcement-render.js
   ============================================================ */
.ann-root {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .26s ease;
}
.ann-root.is-open { opacity: 1; pointer-events: auto; }
.ann-root.is-closing { opacity: 0; }
.ann-back {
  position: absolute; inset: 0;
  background: rgba(6,6,10,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ann-card {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 30px 90px rgba(0,0,0,0.6), 0 0 80px color-mix(in oklch, var(--gold) 35%, transparent);
  padding: 44px 36px 36px;
  text-align: center;
  transform: scale(0.96) translateY(8px);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ann-root.is-open .ann-card { transform: scale(1) translateY(0); }
.ann-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--ember));
}
.ann-x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  background: var(--ink-3); color: var(--bone);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 20px;
  line-height: 0;
  transition: all .15s ease;
}
.ann-x:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.ann-glyph {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
}
.ann-img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto 18px;
}
.ann-eye {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-hot);
  margin-bottom: 12px;
}
.ann-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--bone);
  margin: 0 0 14px;
}
.ann-body {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--bone-2);
  margin: 0 0 22px;
}
.ann-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--bone);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: all .2s ease;
}
.ann-cta:hover {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--gold), 0 0 28px color-mix(in oklch, var(--gold) 50%, transparent);
}
.ann-cta__arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: rgba(6,6,10,0.18);
  border-radius: 50%;
  font-size: 13px;
}


.event--wide-source .event__media-backdrop,
.event--tall-source .event__media-backdrop,
.event--wide-source .event__media-fit,
.event--tall-source .event__media-fit { display: none; }
/* (legacy wide/tall-source visual overrides below are no longer applied
    since the renderer stopped adding those classes — kept for safety) */

/* TALL source images (portrait flyers, common for nightclub posters)
   — same contain+backdrop treatment. Trigger: ratio <= 0.85.
   The renderer adds .event--tall-source; styling mirrors wide-source. */
.event--tall-source .event__media {
  background-image: none !important;
  background: #060610;
}
.event--tall-source .event__media-backdrop {
  opacity: 1;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.45) saturate(1.1);
  transform: scale(1.2);
}
.event--tall-source .event__media-fit {
  opacity: 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.event--tall-source .event__media::after {
  background: linear-gradient(to top, rgba(6,6,10,.72), rgba(6,6,10,.05) 55%, transparent 80%);
}
.event--feature.event--tall-source .event__media-backdrop {
  filter: blur(30px) brightness(0.55) saturate(1.1);
}

/* =========================================================
   EVENT CARDS — WIDE-SOURCE (Eventbrite 2:1 flyer) HANDLING
   =========================================================
   When the event image is wide (>= 1.4:1), the renderer adds
   .event--wide-source. We swap the single background-cover
   approach for a two-layer treatment: blurred backdrop fills
   the 4:5 frame, source image sits contained inside.
   This way a 2:1 Eventbrite flyer never gets cropped.
   ========================================================= */
.event__media-backdrop,
.event__media-fit {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
}
.event--wide-source .event__media {
  background-image: none !important;
  background: #060610;
}
.event--wide-source .event__media-backdrop {
  opacity: 1;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.45) saturate(1.15);
  transform: scale(1.2);
}
.event--wide-source .event__media-fit {
  opacity: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* The default ::after gradient still applies on top — keeps
   date stamp readable. We darken it slightly for wide cards
   since the foreground image is fully visible. */
.event--wide-source .event__media::after {
  background: linear-gradient(to top, rgba(6,6,10,.72), rgba(6,6,10,.05) 55%, transparent 80%);
}

/* On the featured (wide aspect) card slot, wide-source images
   look great in their natural ratio. Drop the backdrop layer's
   blur intensity since less padding is needed. */
.event--feature.event--wide-source .event__media-backdrop {
  filter: blur(30px) brightness(0.55) saturate(1.1);
}
.event--feature.event--wide-source .event__media-fit {
  background-size: cover; /* feature card is wide-ish — let it cover */
}

/* =========================================================
   EVENT SOURCE BADGE — small marker on Eventbrite-synced cards
   Subtle — appears on hover so it never competes with content.
   ========================================================= */
.event--src-eventbrite .event__media::before {
  content: "EB";
  position: absolute;
  left: 14px; top: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: rgba(6,6,10,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(247,245,238,0.78);
  font-family: var(--f-body);
  font-weight: 700; font-size: 9px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.event--src-eventbrite:hover .event__media::before {
  opacity: 1;
}