/* ============================================================
   ELEVATED MENU SHELL — shared styles
   Used by: menus/dinner.html, cocktails.html, hookah.html,
            bottles.html, brunch.html
   ============================================================ */

/* Hide the main site nav on menu pages — the menu switcher
   below is enough top chrome. Keeps menus clean for QR guests. */
.menu-page-host > .nav,
body:has(.menu-page) > .nav,
body:has(.menu-page) > .mobile-menu,
body:has(.menu-page) > .mobile-bar {
  display: none !important;
}

/* ===== PERSISTENT MENU SWITCHER (sticky tab bar) ===== */
.menu-switcher {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--ink) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.menu-switcher__row {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--pad-x);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.menu-switcher__row::-webkit-scrollbar { display: none; }
.menu-switcher__home {
  display: inline-flex; align-items: center;
  padding: 10px 18px 10px 0;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  margin-right: 10px;
  text-decoration: none;
}
.menu-switcher__home img {
  display: block;
  height: 30px;
  width: auto;
  transition: opacity .15s ease;
}
.menu-switcher__home:hover img { opacity: 0.8; }
.menu-switcher a.menu-switcher__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-2);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .15s ease;
  flex-shrink: 0;
}
.menu-switcher a.menu-switcher__tab:hover { color: var(--bone); }
.menu-switcher a.menu-switcher__tab::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px;
  bottom: 8px;
  height: 1px;
  background: transparent;
  transition: background .15s ease;
}
.menu-switcher a.menu-switcher__tab:hover::after { background: color-mix(in oklch, var(--gold) 60%, transparent); }
.menu-switcher a.menu-switcher__tab.is-current { color: var(--gold); }
.menu-switcher a.menu-switcher__tab.is-current::after { background: var(--gold); }
.menu-switcher a.menu-switcher__tab .badge {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  visibility: hidden;
}
.menu-switcher a.menu-switcher__tab.is-current .badge { visibility: visible; }

/* "All menus" / "Elevated" right-side anchor */
.menu-switcher__right {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0;
  flex-shrink: 0;
}
.menu-switcher__right a {
  padding: 14px 18px;
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bone-2);
  text-decoration: none;
  border-left: 1px solid var(--line);
  transition: color .15s ease, background .15s ease;
}
.menu-switcher__right a:first-child { border-left: none; }
.menu-switcher__right a:hover { color: var(--bone); }
/* Make "All Menus" pop a touch — a tiny chip rather than just text */
.menu-switcher__all {
  color: var(--gold-hot) !important;
  font-weight: 700 !important;
}
.menu-switcher__all:hover {
  background: rgba(232, 38, 124, 0.08);
  color: var(--gold-hot) !important;
}
.menu-switcher__all span {
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .menu-switcher__home { padding: 10px 14px 10px 0; margin-right: 6px; }
  .menu-switcher__home img { height: 24px; }
  .menu-switcher__row { padding: 0 16px; }
  .menu-switcher a.menu-switcher__tab { padding: 12px 14px; font-size: 11px; letter-spacing: 0.14em; }
  .menu-switcher a.menu-switcher__tab::after { left: 14px; right: 14px; bottom: 6px; }
  .menu-switcher__right a { padding: 12px 12px; font-size: 10px; letter-spacing: 0.18em; }
}

.menu-page {
  background: var(--ink);
  min-height: 100vh;
  color: var(--bone-2);
}

/* ===== HEADER ===== */
.menu-hero {
  position: relative;
  padding: clamp(90px, 11vw, 150px) var(--pad-x) clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.menu-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 80% 25%, color-mix(in oklch, var(--gold) 16%, transparent), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, color-mix(in oklch, var(--ember) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.menu-hero::after {
  content: attr(data-watermark);
  position: absolute;
  right: -3vw; bottom: -10vw;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(180px, 28vw, 460px);
  line-height: 0.8;
  color: rgba(246,240,230,0.022);
  pointer-events: none;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  z-index: 0;
  white-space: nowrap;
}
.menu-hero__in {
  position: relative; z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}
.menu-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body);
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-mute);
  text-decoration: none;
  margin-bottom: clamp(28px, 4vw, 44px);
  transition: color .25s ease;
}
.menu-back:hover { color: var(--gold-hot); }

.menu-eye {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-body);
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--bone-mute);
  margin-bottom: 18px;
}
.menu-eye::before { content: ''; width: 36px; height: 1px; background: var(--gold); }

.menu-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(56px, 9.5vw, 156px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--bone);
  margin: 0 0 22px;
}
.menu-title em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -0.025em;
}

.menu-lede {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.5;
  color: var(--bone-2);
  margin: 0 0 8px;
  max-width: 60ch;
}

.menu-meta {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.menu-meta > div {
  flex: 1 1 200px;
  padding: 18px clamp(20px, 2vw, 28px);
  border-right: 1px solid var(--line);
}
.menu-meta > div:last-child { border-right: none; }
.menu-meta .k {
  font-family: var(--f-body);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bone-mute);
  margin-bottom: 6px;
}
.menu-meta .v {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -.005em;
  color: var(--bone);
  line-height: 1.3;
}
.menu-meta .v em {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  color: var(--gold);
}
/* Big, readable price callout (e.g. brunch $55 package) */
.menu-meta .meta-price {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold);
  margin: 2px 0 5px;
}
.menu-meta .meta-price-note {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .01em;
  line-height: 1.35;
  color: var(--bone-2);
}

/* ===== BODY ===== */
.menu-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(80px, 10vw, 120px);
}

/* Section heading — italic Playfair on a hairline */
.menu-section {
  margin-bottom: clamp(48px, 6vw, 80px);
}
.menu-section__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gold);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.menu-section__title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0;
  text-transform: capitalize;
}
.menu-section__title::after {
  content: '.';
  color: var(--gold);
}
.menu-section__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-hot);
  padding-bottom: 8px;
  flex-shrink: 0;
}
.menu-section__note {
  font-family: var(--f-body);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-mute);
  margin: 0 0 24px;
}
.menu-section__note strong { color: var(--bone); font-weight: 600; }

/* Item rows — name + leader dots + price */
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2vw, 26px) clamp(36px, 5vw, 64px);
}
.menu-list--2col { grid-template-columns: 1fr 1fr; }

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 14px;
}
.menu-item__name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.005em;
  color: var(--bone);
  line-height: 1.2;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.menu-item__name .gf {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--gold);
  padding: 2px 6px;
  border: 1px solid color-mix(in oklch, var(--gold) 50%, transparent);
  border-radius: 3px;
  position: relative;
  top: -2px;
}
.menu-item__name .star {
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 16px;
  vertical-align: 4px;
}
.menu-item__price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.005em;
  color: var(--gold);
  white-space: nowrap;
}
.menu-item__desc {
  grid-column: 1 / -1;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.55;
  color: var(--bone-mute);
  margin: 0;
  max-width: 64ch;
}
.menu-item__addons {
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bone-2);
  margin: 0;
  padding: 6px 10px;
  background: rgba(246,240,230,0.025);
  border-left: 2px solid var(--gold);
  display: inline-block;
  margin-top: 2px;
}
.menu-item__addons strong { color: var(--gold-hot); font-weight: 600; }

/* Single-line list variant — for spirits where each item is just name + price */
.menu-list--lines .menu-item {
  padding-bottom: clamp(10px, 1vw, 14px);
  border-bottom: 1px dashed var(--line);
}
.menu-list--lines .menu-item:last-child { border-bottom: none; }

/* Footnote / legend */
.menu-footnote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-mute);
  padding: 18px 22px;
  background: color-mix(in oklch, var(--gold) 6%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 22%, transparent);
  border-left: 3px solid var(--gold);
  margin: clamp(28px, 3vw, 40px) 0;
}
.menu-footnote strong { color: var(--bone); font-weight: 600; font-style: normal; }
.menu-footnote .star {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  color: var(--gold);
}

/* Cross-link strip */
.menu-others {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line);
  background: var(--ink-2);
  margin-top: clamp(48px, 6vw, 80px);
}
.menu-others > a {
  flex: 1 1 180px;
  padding: 22px 22px;
  border-right: 1px solid var(--line);
  text-decoration: none;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .2s ease;
}
.menu-others > a:last-child { border-right: none; }
.menu-others > a:hover { background: color-mix(in oklch, var(--gold) 8%, var(--ink-2)); }
.menu-others .k {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-mute);
}
.menu-others .v {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--bone);
}
.menu-others > a:hover .v { color: var(--gold-hot); }

/* ===== "Tag us" prompts (QR-landing engagement) ===== */
.menu-tag-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 13px 20px;
  text-decoration: none;
  background: linear-gradient(95deg, color-mix(in oklch, var(--gold) 20%, var(--ink-2)), var(--ink-2) 70%);
  color: var(--bone);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-align: center;
  border-bottom: 1px solid color-mix(in oklch, var(--gold) 45%, transparent);
  box-shadow: 0 6px 24px rgba(232,38,124,0.12);
}
.menu-tag-ribbon__txt { color: var(--bone); }
.menu-tag-ribbon__txt strong { font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; color: var(--gold-hot); }
.menu-tag-ribbon__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
  animation: tagPulse 2.2s ease-out infinite;
}
@keyframes tagPulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,38,124,0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(232,38,124,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,38,124,0); }
}
@media (prefers-reduced-motion: reduce) { .menu-tag-ribbon__dot { animation: none; } }
.menu-tag-ribbon__go {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px;
  border: 1.5px solid color-mix(in oklch, var(--gold) 60%, transparent); border-radius: 999px; padding: 5px 13px;
  color: var(--gold-hot); flex-shrink: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.menu-tag-ribbon:hover .menu-tag-ribbon__go { background: var(--gold); color: var(--ink); border-color: var(--gold); }
@media (max-width: 600px) {
  .menu-tag-ribbon { font-size: 11.5px; gap: 10px; padding: 11px 14px; letter-spacing: 0.02em; }
  .menu-tag-ribbon__go { display: none; }
}

.menu-tag-card {
  display: block;
  margin: clamp(44px,5vw,68px) 0 0;
  padding: clamp(28px,4vw,46px) clamp(24px,4vw,48px);
  text-decoration: none;
  background:
    radial-gradient(130% 150% at 100% 0%, color-mix(in oklch, var(--ember) 22%, transparent), transparent 58%),
    color-mix(in oklch, var(--gold) 8%, var(--ink-2));
  border: 1px solid color-mix(in oklch, var(--gold) 30%, transparent);
  border-left: 4px solid var(--gold);
  position: relative;
  transition: border-color .25s ease;
}
.menu-tag-card:hover { border-color: var(--gold); }
.menu-tag-card__eye {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--f-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-hot);
  margin-bottom: 16px;
}
.menu-tag-card__eye .menu-tag-ribbon__dot { background: var(--gold-hot); }
.menu-tag-card__h {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1; letter-spacing: -0.025em;
  color: var(--bone); margin: 0 0 12px;
}
.menu-tag-card__h em { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900; color: var(--gold); }
.menu-tag-card__sub {
  font-family: var(--f-body); font-size: clamp(14px,1.3vw,16px); line-height: 1.55;
  color: var(--bone-2); margin: 0 0 24px; max-width: 48ch;
}
.menu-tag-card__handle {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; color: var(--gold);
}
.menu-tag-card__go {
  font-family: var(--f-body); font-style: normal; font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 16px;
  transition: all .2s ease;
}
.menu-tag-card:hover .menu-tag-card__go { color: var(--ink); background: var(--gold); border-color: var(--gold); }

/* Print friendly */
@media print {
  .nav, .foot, .menu-others, .menu-back, .menu-tag-ribbon, .menu-tag-card { display: none !important; }
  .menu-page { background: #fff !important; color: #000 !important; }
  .menu-hero { padding-top: 0; }
  .menu-hero::before, .menu-hero::after { display: none !important; }
  .menu-title { color: #000 !important; }
  .menu-title em { color: #b88a3d !important; }
  .menu-section__title { color: #000 !important; }
  .menu-item__name { color: #000 !important; }
  .menu-item__price { color: #b88a3d !important; }
  .menu-item__desc { color: #444 !important; }
  .menu-lede, .menu-eye { color: #444 !important; }
  .menu-section__head { border-bottom-color: #b88a3d !important; }
  .menu-section__num { color: #b88a3d !important; }
  .menu-footnote { background: #f7eedd !important; border-color: #b88a3d !important; color: #000 !important; }
}

@media (max-width: 720px) {
  .menu-list--2col { grid-template-columns: 1fr; }
}


/* ============================================================
   BOTTLE-SPECIFIC BLOCKS (packages, sparkler tiers, feature rows)
   ============================================================ */

/* Package cards */
.btl-packs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--gold);
  background: var(--ink-2);
  position: relative;
  margin: clamp(20px, 2.5vw, 32px) 0 clamp(32px, 4vw, 48px);
}
.btl-packs::before {
  content: '';
  position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--ember));
}
.btl-pack {
  padding: clamp(26px, 3vw, 36px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.btl-pack:last-child { border-right: none; }
.btl-pack--featured { background: color-mix(in oklch, var(--gold) 8%, var(--ink-2)); }
.btl-pack__lbl {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-hot);
}
.btl-pack__name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(32px, 3.8vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.btl-pack__price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
  color: var(--gold);
  margin-top: 2px;
}
.btl-pack__desc {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.55;
  color: var(--bone-2);
}

/* Spark cards (Moët luminous tiers) */
.btl-spark-card, .btl-feature-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.btl-spark-card__h, .btl-feature-card__h {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--gold);
  margin: 0 0 18px;
}
.btl-spark-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
}
.btl-spark-tier {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
.btl-spark-tier:last-child { border-right: none; }
.btl-spark-tier__name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 20px;
  color: var(--bone);
}
.btl-spark-tier__price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 28px);
  color: var(--gold);
  letter-spacing: -0.01em;
}
.btl-spark-tier__sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--bone-mute);
  text-transform: uppercase;
}

/* Feature 2-up (Don Julio 1942, Clase Azul) */
.btl-feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--line);
}
.btl-feature {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.btl-feature:last-child { border-right: none; }
.btl-feature__name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--bone);
  letter-spacing: -0.005em;
}
.btl-feature__price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 22px);
  color: var(--gold);
  white-space: nowrap;
}

/* Add-ons block */
.btl-addon {
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  align-items: baseline;
}
.btl-addon__name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--bone);
  letter-spacing: -0.005em;
}
.btl-addon__price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--gold);
}
.btl-addon__desc {
  grid-column: 1 / -1;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--bone-mute);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 720px) {
  .btl-packs { grid-template-columns: 1fr; }
  .btl-pack { border-right: none; border-bottom: 1px solid var(--line); }
  .btl-pack:last-child { border-bottom: none; }
  .btl-spark-tiers { grid-template-columns: 1fr; }
  .btl-spark-tier { border-right: none; border-bottom: 1px solid var(--line); }
  .btl-spark-tier:last-child { border-bottom: none; }
  .btl-feature-row { grid-template-columns: 1fr; }
  .btl-feature { border-right: none; border-bottom: 1px solid var(--line); }
  .btl-feature:last-child { border-bottom: none; }
}


/* ============================================================
   HOOKAH-SPECIFIC BLOCKS (tier cards, flavor cards)
   ============================================================ */

/* Hookah price tier cards */
.hk-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--gold);
  background: var(--ink-2);
  margin-bottom: clamp(36px, 4vw, 56px);
  position: relative;
}
.hk-tiers::before {
  content: '';
  position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--ember));
}
.hk-tier {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 30px);
  text-align: center;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.hk-tier:last-child { border-right: none; }
.hk-tier__lbl {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-hot);
}
.hk-tier__price {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--gold);
  margin: 4px 0;
}
.hk-tier__name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: -.005em;
  color: var(--bone);
}
.hk-tier__sub {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--bone-mute);
  line-height: 1.4;
  margin-top: 4px;
}
.hk-tier--featured {
  background: color-mix(in oklch, var(--gold) 8%, var(--ink-2));
}
.hk-tier--featured .hk-tier__price { color: var(--gold-hot); }

/* Flavor cards */
.hk-flavors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.hk-flavor {
  padding: clamp(24px, 2.5vw, 32px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hk-flavor:nth-child(2n) { border-right: none; }
.hk-flavor:nth-last-child(-n+2) { border-bottom: none; }
.hk-flavor__name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--gold);
  margin: 0 0 12px;
}
.hk-flavor__desc {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.6;
  color: var(--bone-2);
  margin: 0;
}

@media (max-width: 720px) {
  .hk-tiers { grid-template-columns: 1fr; }
  .hk-tier { border-right: none; border-bottom: 1px solid var(--line); }
  .hk-tier:last-child { border-bottom: none; }
  .hk-flavors { grid-template-columns: 1fr; }
  .hk-flavor { border-right: none; }
  .hk-flavor:nth-child(2n) { border-right: none; }
}


/* Inline GF badge inside the meta strip */
.menu-meta .meta-gf {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
  border: 1px solid color-mix(in oklch, var(--gold) 50%, transparent);
  padding: 3px 7px;
  border-radius: 3px;
}


/* =========================================================
   LATE-NIGHT MENU — starfield + nighttime atmosphere
   Each star layer is split into 4 sub-groups with offset
   animation-delays so the field twinkles asynchronously,
   not in unison.
   ========================================================= */
body[data-menu-slug="late-night"] {
  background:
    radial-gradient(80% 50% at 70% 0%, rgba(35, 18, 70, 0.55), transparent 70%),
    radial-gradient(60% 50% at 10% 90%, rgba(85, 25, 75, 0.35), transparent 70%),
    linear-gradient(180deg, #07051a 0%, #050410 50%, #03020a 100%) !important;
}
body[data-menu-slug="late-night"] .menu-page {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
body[data-menu-slug="late-night"] .menu-switcher,
body[data-menu-slug="late-night"] .menu-page,
body[data-menu-slug="late-night"] .foot { position: relative; z-index: 3; }
body[data-menu-slug="late-night"] .starfield { z-index: 1; }
body[data-menu-slug="late-night"] .menu-hero { position: relative; }
body[data-menu-slug="late-night"] .menu-hero__in { position: relative; z-index: 2; }
body[data-menu-slug="late-night"] .menu-meta .v,
body[data-menu-slug="late-night"] .menu-section h2,
body[data-menu-slug="late-night"] .menu-item__name { color: #fff5e6; }

/* ===== STARFIELD ===== */
.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
/* Each layer is now a wrapper holding 4 sub-groups (.g1..g4). */
.starfield__layer {
  position: absolute;
  top: 0; left: 0;
  width: 2000px; height: 2400px;
  will-change: transform;
}
.starfield__layer > span {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  will-change: opacity;
}
/* FAR layer — smallest, dimmest, slowest twinkles */
.starfield__layer--far > span {
  width: 1.5px; height: 1.5px;
}
.starfield__layer--far .g1 { box-shadow: 1778px 2208px rgba(246,240,230,0.8), 788px 2174px rgba(246,240,230,0.8), 738px 1201px rgba(232,38,124,0.6), 462px 289px rgba(180,200,255,0.7), 791px 438px rgba(246,240,230,1), 561px 249px rgba(232,38,124,0.6), 603px 720px rgba(246,240,230,0.8), 1752px 453px rgba(180,200,255,0.7), 841px 446px rgba(246,240,230,1), 703px 1701px rgba(232,38,124,0.6), 172px 417px rgba(246,240,230,1), 80px 2394px rgba(246,240,230,0.65), 1262px 1433px rgba(180,200,255,0.7), 550px 932px rgba(246,240,230,1), 778px 1892px rgba(246,240,230,1), 779px 514px rgba(246,240,230,0.8), 1386px 196px rgba(246,240,230,0.65), 1433px 1940px rgba(180,200,255,0.7), 1754px 1945px rgba(232,38,124,0.6), 1181px 1211px rgba(180,200,255,0.7), 547px 738px rgba(246,240,230,0.8), 687px 1526px rgba(232,38,124,0.6), 433px 2175px rgba(180,200,255,0.7), 620px 1286px rgba(246,240,230,0.65), 79px 2257px rgba(246,240,230,1), 1645px 1290px rgba(246,240,230,1), 150px 1784px rgba(180,200,255,0.7), 429px 2339px rgba(246,240,230,0.8), 1314px 1555px rgba(232,38,124,0.6), 1639px 432px rgba(232,38,124,0.6), 237px 2370px rgba(246,240,230,0.8), 1942px 1169px rgba(232,38,124,0.6), 1586px 229px rgba(246,240,230,1), 4px 551px rgba(246,240,230,1), 28px 734px rgba(246,240,230,0.8), 492px 1777px rgba(246,240,230,0.8), 229px 2282px rgba(246,240,230,1), 73px 848px rgba(246,240,230,0.8), 856px 875px rgba(180,200,255,0.7), 1413px 963px rgba(232,38,124,0.6), 576px 2113px rgba(232,38,124,0.6), 1178px 523px rgba(246,240,230,0.65), 54px 1995px rgba(246,240,230,0.8), 37px 327px rgba(246,240,230,0.65), 1959px 1321px rgba(246,240,230,0.65), 654px 1176px rgba(180,200,255,0.7), 956px 892px rgba(246,240,230,0.8), 1698px 1469px rgba(246,240,230,1), 1713px 1507px rgba(246,240,230,1), 1834px 2006px rgba(246,240,230,0.65), 895px 1567px rgba(232,38,124,0.6), 1730px 1188px rgba(180,200,255,0.7), 1170px 1871px rgba(246,240,230,0.65), 51px 2215px rgba(246,240,230,1), 1205px 819px rgba(232,38,124,0.6), 1465px 1085px rgba(246,240,230,0.65), 1665px 1612px rgba(246,240,230,0.8), 638px 1001px rgba(180,200,255,0.7), 1218px 250px rgba(232,38,124,0.6), 237px 360px rgba(246,240,230,1), 530px 2332px rgba(180,200,255,0.7), 929px 2364px rgba(246,240,230,0.65), 268px 1458px rgba(246,240,230,0.8), 1380px 613px rgba(180,200,255,0.7), 1098px 829px rgba(232,38,124,0.6), 257px 706px rgba(246,240,230,0.65), 1688px 1244px rgba(246,240,230,0.8), 226px 1043px rgba(246,240,230,0.65), 704px 1104px rgba(246,240,230,0.65), 1955px 25px rgba(232,38,124,0.6), 812px 1208px rgba(180,200,255,0.7), 110px 852px rgba(246,240,230,0.8), 680px 2357px rgba(246,240,230,0.8), 1357px 1923px rgba(180,200,255,0.7), 974px 550px rgba(246,240,230,0.65), 364px 1638px rgba(246,240,230,1), 360px 1387px rgba(180,200,255,0.7), 1796px 798px rgba(180,200,255,0.7), 1505px 869px rgba(246,240,230,0.8), 321px 202px rgba(232,38,124,0.6), 1077px 2195px rgba(246,240,230,0.65), 605px 650px rgba(246,240,230,0.8), 1741px 1366px rgba(232,38,124,0.6), 1316px 543px rgba(246,240,230,1), 164px 1581px rgba(180,200,255,0.7), 1118px 681px rgba(246,240,230,0.65), 1013px 1241px rgba(246,240,230,0.8), 680px 1863px rgba(232,38,124,0.6), 955px 1145px rgba(246,240,230,1), 668px 89px rgba(246,240,230,0.8), 656px 2094px rgba(232,38,124,0.6), 1749px 960px rgba(180,200,255,0.7), 782px 87px rgba(180,200,255,0.7), 589px 475px rgba(246,240,230,0.8), 2px 724px rgba(246,240,230,0.65), 1855px 1835px rgba(246,240,230,1), 981px 6px rgba(246,240,230,1), 213px 1039px rgba(246,240,230,0.65), 385px 1133px rgba(246,240,230,1), 331px 1287px rgba(232,38,124,0.6); animation: twinkleA 3.2s ease-in-out infinite;            }
.starfield__layer--far .g2 { box-shadow: 250px 1999px rgba(232,38,124,0.6), 120px 575px rgba(246,240,230,0.8), 1541px 544px rgba(246,240,230,1), 1346px 508px rgba(246,240,230,1), 368px 1467px rgba(246,240,230,0.8), 1442px 2020px rgba(246,240,230,0.65), 1399px 767px rgba(246,240,230,0.8), 1075px 1109px rgba(246,240,230,0.8), 1301px 1646px rgba(246,240,230,1), 912px 976px rgba(180,200,255,0.7), 740px 102px rgba(180,200,255,0.7), 1619px 21px rgba(246,240,230,1), 382px 1735px rgba(246,240,230,0.65), 1863px 1444px rgba(180,200,255,0.7), 895px 147px rgba(246,240,230,1), 311px 1244px rgba(246,240,230,1), 944px 936px rgba(246,240,230,0.65), 1629px 223px rgba(246,240,230,1), 1198px 103px rgba(246,240,230,1), 484px 1579px rgba(246,240,230,1), 322px 848px rgba(246,240,230,0.65), 1543px 1312px rgba(180,200,255,0.7), 983px 1571px rgba(180,200,255,0.7), 1473px 224px rgba(246,240,230,1), 1847px 671px rgba(232,38,124,0.6), 939px 1513px rgba(246,240,230,0.65), 1582px 1349px rgba(180,200,255,0.7), 609px 1180px rgba(246,240,230,0.8), 854px 2005px rgba(246,240,230,0.8), 1150px 25px rgba(246,240,230,1), 330px 1039px rgba(232,38,124,0.6), 1227px 1248px rgba(180,200,255,0.7), 676px 1651px rgba(246,240,230,1), 1508px 848px rgba(246,240,230,0.65), 559px 2240px rgba(246,240,230,1), 660px 2026px rgba(246,240,230,0.65), 646px 1207px rgba(246,240,230,1), 1349px 782px rgba(246,240,230,0.65), 1603px 1752px rgba(246,240,230,0.8), 241px 316px rgba(246,240,230,1), 97px 2275px rgba(232,38,124,0.6), 4px 1428px rgba(246,240,230,0.8), 795px 1175px rgba(246,240,230,0.65), 1303px 117px rgba(232,38,124,0.6), 363px 1653px rgba(232,38,124,0.6), 807px 1984px rgba(246,240,230,1), 1468px 2109px rgba(232,38,124,0.6), 1181px 629px rgba(180,200,255,0.7), 777px 943px rgba(246,240,230,0.8), 1092px 1652px rgba(246,240,230,0.8), 957px 1355px rgba(246,240,230,0.8), 1206px 1052px rgba(246,240,230,1), 673px 1744px rgba(180,200,255,0.7), 191px 2030px rgba(246,240,230,1), 593px 511px rgba(180,200,255,0.7), 713px 586px rgba(246,240,230,0.65), 1384px 856px rgba(246,240,230,0.65), 1439px 2320px rgba(246,240,230,0.65), 1711px 1179px rgba(232,38,124,0.6), 1035px 832px rgba(180,200,255,0.7), 242px 2279px rgba(246,240,230,1), 168px 1721px rgba(246,240,230,1), 1644px 157px rgba(246,240,230,1), 1505px 988px rgba(246,240,230,0.8), 583px 413px rgba(232,38,124,0.6), 1712px 1833px rgba(246,240,230,1), 1725px 1447px rgba(180,200,255,0.7), 1456px 256px rgba(246,240,230,1), 1738px 1659px rgba(232,38,124,0.6), 1404px 1856px rgba(180,200,255,0.7), 1288px 1848px rgba(246,240,230,1), 222px 234px rgba(232,38,124,0.6), 1041px 415px rgba(246,240,230,0.65), 577px 990px rgba(246,240,230,1), 1665px 560px rgba(180,200,255,0.7), 1136px 124px rgba(246,240,230,1), 1826px 682px rgba(246,240,230,0.8), 566px 835px rgba(246,240,230,0.8), 190px 1583px rgba(232,38,124,0.6), 1532px 1525px rgba(246,240,230,1), 1425px 1661px rgba(232,38,124,0.6), 702px 592px rgba(246,240,230,0.8), 197px 1717px rgba(232,38,124,0.6), 743px 1237px rgba(246,240,230,0.65), 1173px 151px rgba(180,200,255,0.7), 320px 1859px rgba(246,240,230,0.65), 1019px 162px rgba(232,38,124,0.6), 102px 860px rgba(246,240,230,1), 402px 152px rgba(246,240,230,0.65), 753px 1438px rgba(246,240,230,0.65), 1989px 919px rgba(246,240,230,0.8), 942px 1994px rgba(246,240,230,0.8), 446px 864px rgba(246,240,230,1), 1334px 928px rgba(180,200,255,0.7), 440px 786px rgba(232,38,124,0.6), 597px 1439px rgba(246,240,230,0.65), 638px 1487px rgba(246,240,230,0.65), 1397px 1929px rgba(232,38,124,0.6), 1706px 1365px rgba(246,240,230,0.65), 400px 796px rgba(246,240,230,0.65); animation: twinkleB 4.1s ease-in-out -0.9s infinite;       }
.starfield__layer--far .g3 { box-shadow: 722px 1791px rgba(246,240,230,0.65), 1452px 1376px rgba(246,240,230,0.8), 343px 2288px rgba(246,240,230,1), 230px 728px rgba(180,200,255,0.7), 1945px 96px rgba(180,200,255,0.7), 323px 1391px rgba(180,200,255,0.7), 195px 815px rgba(246,240,230,0.8), 397px 1766px rgba(246,240,230,0.8), 1761px 445px rgba(246,240,230,1), 1120px 251px rgba(246,240,230,0.65), 1307px 2186px rgba(246,240,230,0.65), 1157px 48px rgba(246,240,230,1), 1502px 2038px rgba(232,38,124,0.6), 1176px 1956px rgba(246,240,230,0.65), 1012px 802px rgba(246,240,230,1), 1843px 1975px rgba(232,38,124,0.6), 503px 1676px rgba(246,240,230,1), 1825px 905px rgba(246,240,230,0.65), 642px 662px rgba(246,240,230,0.65), 1788px 1946px rgba(246,240,230,0.65), 96px 958px rgba(246,240,230,0.65), 400px 1098px rgba(180,200,255,0.7), 1532px 966px rgba(232,38,124,0.6), 326px 1562px rgba(232,38,124,0.6), 1615px 1485px rgba(180,200,255,0.7), 234px 1736px rgba(246,240,230,0.8), 1014px 915px rgba(246,240,230,0.8), 790px 22px rgba(246,240,230,0.8), 394px 56px rgba(232,38,124,0.6), 660px 2019px rgba(246,240,230,0.65), 422px 2109px rgba(246,240,230,0.8), 512px 1326px rgba(180,200,255,0.7), 1765px 672px rgba(232,38,124,0.6), 1013px 1145px rgba(246,240,230,0.65), 1089px 1347px rgba(232,38,124,0.6), 828px 2275px rgba(232,38,124,0.6), 1062px 132px rgba(246,240,230,1), 625px 717px rgba(246,240,230,1), 349px 229px rgba(246,240,230,0.65), 1069px 2069px rgba(246,240,230,0.65), 1618px 37px rgba(232,38,124,0.6), 829px 2332px rgba(246,240,230,0.8), 1535px 356px rgba(232,38,124,0.6), 570px 2307px rgba(246,240,230,0.65), 767px 1986px rgba(180,200,255,0.7), 959px 392px rgba(246,240,230,0.8), 1980px 927px rgba(246,240,230,1), 664px 2189px rgba(246,240,230,0.65), 1842px 379px rgba(180,200,255,0.7), 349px 1297px rgba(232,38,124,0.6), 1018px 1143px rgba(246,240,230,0.65), 683px 916px rgba(246,240,230,0.8), 176px 1617px rgba(246,240,230,0.65), 331px 1846px rgba(246,240,230,1), 1982px 203px rgba(180,200,255,0.7), 1961px 87px rgba(246,240,230,0.65), 1103px 99px rgba(232,38,124,0.6), 239px 1240px rgba(180,200,255,0.7), 205px 2107px rgba(180,200,255,0.7), 1832px 1303px rgba(246,240,230,1), 1955px 2226px rgba(180,200,255,0.7), 1407px 1077px rgba(232,38,124,0.6), 1020px 1256px rgba(246,240,230,0.8), 1629px 1363px rgba(246,240,230,1), 67px 2398px rgba(246,240,230,1), 1167px 560px rgba(246,240,230,1), 1762px 1650px rgba(180,200,255,0.7), 686px 1868px rgba(180,200,255,0.7), 771px 2213px rgba(246,240,230,0.65), 853px 1287px rgba(246,240,230,0.8), 1763px 88px rgba(246,240,230,0.8), 335px 2017px rgba(246,240,230,0.65), 1402px 873px rgba(232,38,124,0.6), 1798px 58px rgba(246,240,230,0.8), 356px 570px rgba(246,240,230,0.65), 1909px 1010px rgba(232,38,124,0.6), 1291px 2378px rgba(246,240,230,1), 1336px 873px rgba(246,240,230,0.65), 875px 2297px rgba(246,240,230,0.65), 743px 448px rgba(246,240,230,0.65), 1774px 1127px rgba(246,240,230,0.65), 799px 534px rgba(246,240,230,0.8), 654px 2068px rgba(232,38,124,0.6), 170px 1930px rgba(180,200,255,0.7), 182px 1120px rgba(180,200,255,0.7), 1522px 638px rgba(246,240,230,0.65), 1025px 1484px rgba(246,240,230,0.65), 1523px 2257px rgba(246,240,230,1), 1849px 1558px rgba(246,240,230,0.8), 838px 387px rgba(232,38,124,0.6), 1322px 2144px rgba(246,240,230,1), 134px 628px rgba(246,240,230,0.65), 109px 1641px rgba(246,240,230,0.8), 79px 1381px rgba(232,38,124,0.6), 878px 848px rgba(246,240,230,0.65), 1339px 1044px rgba(246,240,230,0.8), 295px 567px rgba(246,240,230,0.8), 580px 419px rgba(246,240,230,0.8), 1027px 1597px rgba(180,200,255,0.7), 469px 304px rgba(180,200,255,0.7); animation: twinkleA 3.7s ease-in-out -1.6s infinite;       }
.starfield__layer--far .g4 { box-shadow: 1194px 1583px rgba(246,240,230,0.8), 783px 2176px rgba(246,240,230,0.8), 1145px 1631px rgba(246,240,230,0.65), 1114px 947px rgba(246,240,230,0.65), 1522px 1124px rgba(246,240,230,1), 1204px 763px rgba(246,240,230,0.65), 992px 862px rgba(246,240,230,0.8), 1719px 22px rgba(246,240,230,0.65), 220px 1644px rgba(246,240,230,1), 1328px 1926px rgba(232,38,124,0.6), 1875px 1870px rgba(232,38,124,0.6), 695px 75px rgba(232,38,124,0.6), 622px 2341px rgba(246,240,230,0.8), 489px 68px rgba(232,38,124,0.6), 1129px 1456px rgba(246,240,230,1), 1375px 305px rgba(180,200,255,0.7), 61px 16px rgba(232,38,124,0.6), 21px 1587px rgba(180,200,255,0.7), 86px 1220px rgba(246,240,230,0.8), 1092px 2314px rgba(180,200,255,0.7), 1871px 1069px rgba(246,240,230,0.65), 1256px 885px rgba(246,240,230,0.8), 81px 362px rgba(246,240,230,1), 1179px 500px rgba(246,240,230,0.8), 1384px 2299px rgba(246,240,230,0.8), 1528px 1959px rgba(180,200,255,0.7), 446px 481px rgba(246,240,230,0.8), 970px 1264px rgba(246,240,230,0.8), 1934px 507px rgba(246,240,230,0.65), 171px 1612px rgba(246,240,230,0.8), 514px 778px rgba(232,38,124,0.6), 1798px 1405px rgba(180,200,255,0.7), 854px 2093px rgba(180,200,255,0.7), 517px 1443px rgba(246,240,230,0.8), 1620px 453px rgba(246,240,230,0.8), 996px 125px rgba(246,240,230,0.8), 1478px 1457px rgba(246,240,230,1), 1901px 651px rgba(180,200,255,0.7), 1096px 1106px rgba(246,240,230,1), 1898px 1422px rgba(246,240,230,0.8), 1140px 199px rgba(232,38,124,0.6), 1654px 837px rgba(180,200,255,0.7), 276px 1936px rgba(246,240,230,0.8), 1837px 2097px rgba(232,38,124,0.6), 1171px 2318px rgba(246,240,230,0.8), 1112px 1201px rgba(180,200,255,0.7), 493px 2145px rgba(246,240,230,0.65), 146px 1349px rgba(232,38,124,0.6), 907px 2215px rgba(232,38,124,0.6), 1607px 942px rgba(246,240,230,1), 1080px 931px rgba(232,38,124,0.6), 159px 780px rgba(246,240,230,1), 1679px 1490px rgba(232,38,124,0.6), 471px 1662px rgba(246,240,230,0.65), 1371px 2294px rgba(246,240,230,0.8), 1209px 1988px rgba(246,240,230,0.8), 822px 1743px rgba(246,240,230,0.8), 1040px 159px rgba(246,240,230,0.65), 698px 636px rgba(246,240,230,0.8), 630px 1774px rgba(246,240,230,0.8), 1668px 2173px rgba(246,240,230,1), 646px 434px rgba(232,38,124,0.6), 397px 2355px rgba(246,240,230,1), 1754px 1738px rgba(180,200,255,0.7), 1551px 1982px rgba(246,240,230,0.65), 622px 1687px rgba(246,240,230,1), 1799px 1853px rgba(232,38,124,0.6), 1915px 1080px rgba(246,240,230,0.65), 1805px 368px rgba(232,38,124,0.6), 301px 717px rgba(246,240,230,0.65), 238px 728px rgba(232,38,124,0.6), 447px 1399px rgba(246,240,230,0.8), 1763px 1332px rgba(180,200,255,0.7), 1018px 1525px rgba(232,38,124,0.6), 1047px 580px rgba(180,200,255,0.7), 682px 1896px rgba(232,38,124,0.6), 757px 1673px rgba(232,38,124,0.6), 105px 911px rgba(246,240,230,0.65), 1560px 611px rgba(246,240,230,0.8), 1955px 1771px rgba(246,240,230,0.8), 122px 593px rgba(180,200,255,0.7), 896px 475px rgba(246,240,230,0.8), 1110px 19px rgba(180,200,255,0.7), 1597px 224px rgba(232,38,124,0.6), 1191px 2090px rgba(246,240,230,0.8), 724px 1817px rgba(246,240,230,0.65), 1031px 405px rgba(180,200,255,0.7), 944px 1254px rgba(246,240,230,0.65), 1296px 565px rgba(232,38,124,0.6), 922px 1736px rgba(180,200,255,0.7), 655px 969px rgba(180,200,255,0.7), 1327px 1663px rgba(246,240,230,1), 1772px 17px rgba(180,200,255,0.7), 824px 1833px rgba(246,240,230,1), 1316px 910px rgba(232,38,124,0.6), 81px 649px rgba(246,240,230,0.8), 1952px 2048px rgba(180,200,255,0.7), 1763px 1308px rgba(246,240,230,1), 348px 1830px rgba(232,38,124,0.6), 538px 2212px rgba(246,240,230,1); animation: twinkleB 4.8s ease-in-out -2.4s infinite;       }
/* MID — punchier */
.starfield__layer--mid > span {
  width: 2px; height: 2px;
}
.starfield__layer--mid .g1 { box-shadow: 244px 1754px rgba(246,240,230,0.9), 871px 2150px rgba(246,240,230,0.9), 1994px 1873px rgba(246,240,230,0.9), 446px 1924px rgba(180,200,255,0.95), 1059px 903px rgba(246,240,230,0.9), 668px 2210px rgba(246,240,230,0.9), 106px 2044px rgba(255,255,255,1), 206px 1406px rgba(246,240,230,0.9), 1801px 1296px rgba(255,240,210,1), 1725px 314px rgba(255,255,255,1), 810px 1860px rgba(180,200,255,0.95), 1892px 2133px rgba(255,240,210,1), 1801px 2134px rgba(246,240,230,0.9), 1373px 463px rgba(246,240,230,0.9), 1441px 520px rgba(255,240,210,1), 837px 904px rgba(255,240,210,1), 395px 217px rgba(255,255,255,1), 948px 1857px rgba(180,200,255,0.95), 1330px 2025px rgba(255,255,255,1), 374px 1720px rgba(255,240,210,1), 914px 1943px rgba(255,255,255,1), 1782px 1295px rgba(255,240,210,1), 1813px 774px rgba(255,255,255,1), 1838px 1380px rgba(255,255,255,1), 693px 1715px rgba(255,240,210,1), 1209px 377px rgba(255,255,255,1), 221px 767px rgba(246,240,230,0.9), 561px 1485px rgba(255,240,210,1), 1064px 1130px rgba(180,200,255,0.95), 561px 704px rgba(246,240,230,0.9), 1888px 1205px rgba(246,240,230,0.9), 1877px 1234px rgba(180,200,255,0.95), 1361px 1791px rgba(255,255,255,1), 1173px 1475px rgba(255,240,210,1), 148px 1287px rgba(180,200,255,0.95), 1118px 2227px rgba(180,200,255,0.95), 917px 495px rgba(180,200,255,0.95), 378px 1891px rgba(255,240,210,1), 334px 214px rgba(246,240,230,0.9), 1619px 1265px rgba(255,240,210,1), 1066px 1244px rgba(246,240,230,0.9), 1508px 1151px rgba(255,255,255,1), 1779px 1985px rgba(180,200,255,0.95), 712px 2348px rgba(180,200,255,0.95), 1141px 838px rgba(255,255,255,1), 1898px 855px rgba(255,255,255,1), 1817px 1001px rgba(255,240,210,1), 1731px 2274px rgba(255,255,255,1), 475px 875px rgba(180,200,255,0.95), 880px 204px rgba(255,240,210,1), 1781px 1261px rgba(255,240,210,1), 10px 246px rgba(180,200,255,0.95), 401px 558px rgba(180,200,255,0.95), 1788px 798px rgba(255,255,255,1), 1003px 1966px rgba(180,200,255,0.95); animation: twinkleA 2.4s ease-in-out infinite;             }
.starfield__layer--mid .g2 { box-shadow: 716px 1546px rgba(255,240,210,1), 203px 551px rgba(246,240,230,0.9), 796px 1216px rgba(246,240,230,0.9), 1330px 2144px rgba(255,240,210,1), 636px 1932px rgba(255,240,210,1), 1549px 1581px rgba(255,255,255,1), 902px 2091px rgba(255,240,210,1), 1528px 2063px rgba(180,200,255,0.95), 260px 96px rgba(255,240,210,1), 1933px 1989px rgba(255,240,210,1), 1378px 1544px rgba(255,240,210,1), 1430px 2160px rgba(255,240,210,1), 922px 37px rgba(255,255,255,1), 686px 975px rgba(180,200,255,0.95), 1558px 1175px rgba(255,240,210,1), 369px 1635px rgba(246,240,230,0.9), 1953px 957px rgba(255,255,255,1), 1144px 139px rgba(255,240,210,1), 775px 183px rgba(180,200,255,0.95), 1678px 2088px rgba(255,255,255,1), 688px 2054px rgba(255,255,255,1), 638px 1081px rgba(246,240,230,0.9), 362px 169px rgba(180,200,255,0.95), 691px 318px rgba(255,240,210,1), 461px 129px rgba(246,240,230,0.9), 503px 600px rgba(180,200,255,0.95), 1652px 333px rgba(180,200,255,0.95), 741px 326px rgba(246,240,230,0.9), 603px 1581px rgba(246,240,230,0.9), 72px 297px rgba(255,240,210,1), 1980px 2274px rgba(255,240,210,1), 1162px 1313px rgba(180,200,255,0.95), 450px 812px rgba(255,240,210,1), 678px 1772px rgba(255,240,210,1), 679px 394px rgba(255,255,255,1), 1286px 76px rgba(255,255,255,1), 1333px 1820px rgba(180,200,255,0.95), 1654px 1825px rgba(246,240,230,0.9), 1081px 1091px rgba(180,200,255,0.95), 447px 618px rgba(255,255,255,1), 587px 1406px rgba(246,240,230,0.9), 333px 2055px rgba(180,200,255,0.95), 520px 1166px rgba(255,240,210,1), 1979px 2137px rgba(255,240,210,1), 1545px 1170px rgba(255,240,210,1), 50px 1664px rgba(180,200,255,0.95), 329px 2219px rgba(255,255,255,1), 1214px 1435px rgba(246,240,230,0.9), 1539px 312px rgba(246,240,230,0.9), 137px 2250px rgba(180,200,255,0.95), 1842px 1049px rgba(246,240,230,0.9), 1486px 109px rgba(255,240,210,1), 1904px 431px rgba(255,240,210,1), 1928px 614px rgba(255,255,255,1), 392px 1657px rgba(255,255,255,1); animation: twinkleB 2.1s ease-in-out -0.6s infinite;       }
.starfield__layer--mid .g3 { box-shadow: 1188px 1337px rgba(180,200,255,0.95), 1534px 1351px rgba(246,240,230,0.9), 1599px 560px rgba(255,240,210,1), 214px 2363px rgba(180,200,255,0.95), 213px 560px rgba(255,255,255,1), 430px 952px rgba(180,200,255,0.95), 1698px 2139px rgba(255,240,210,1), 850px 319px rgba(255,255,255,1), 720px 1295px rgba(255,240,210,1), 141px 1264px rgba(180,200,255,0.95), 1946px 1228px rgba(246,240,230,0.9), 968px 2187px rgba(255,240,210,1), 42px 340px rgba(246,240,230,0.9), 1999px 1487px rgba(255,240,210,1), 1675px 1829px rgba(255,240,210,1), 1901px 2366px rgba(180,200,255,0.95), 1512px 1696px rgba(255,240,210,1), 1340px 822px rgba(255,255,255,1), 219px 741px rgba(180,200,255,0.95), 982px 55px rgba(246,240,230,0.9), 463px 2164px rgba(255,255,255,1), 1495px 867px rgba(246,240,230,0.9), 911px 1964px rgba(246,240,230,0.9), 1544px 1656px rgba(246,240,230,0.9), 229px 943px rgba(180,200,255,0.95), 1798px 823px rgba(180,200,255,0.95), 1084px 2299px rgba(180,200,255,0.95), 922px 1568px rgba(246,240,230,0.9), 143px 2032px rgba(255,255,255,1), 1583px 2291px rgba(255,255,255,1), 73px 944px rgba(180,200,255,0.95), 447px 1391px rgba(180,200,255,0.95), 1539px 2233px rgba(246,240,230,0.9), 182px 2069px rgba(255,240,210,1), 1209px 1900px rgba(255,240,210,1), 1454px 325px rgba(255,240,210,1), 1750px 745px rgba(180,200,255,0.95), 930px 1759px rgba(180,200,255,0.95), 1827px 1968px rgba(255,255,255,1), 1276px 2371px rgba(180,200,255,0.95), 108px 1568px rgba(246,240,230,0.9), 1159px 560px rgba(180,200,255,0.95), 1260px 346px rgba(246,240,230,0.9), 1246px 1927px rgba(180,200,255,0.95), 1949px 1502px rgba(246,240,230,0.9), 203px 72px rgba(255,240,210,1), 841px 1036px rgba(180,200,255,0.95), 697px 595px rgba(180,200,255,0.95), 604px 2148px rgba(255,240,210,1), 1395px 1895px rgba(246,240,230,0.9), 1903px 837px rgba(255,255,255,1), 963px 2373px rgba(180,200,255,0.95), 1407px 304px rgba(180,200,255,0.95), 68px 429px rgba(255,255,255,1), 1781px 1349px rgba(255,255,255,1); animation: twinkleA 1.8s ease-in-out -1.1s infinite;       }
.starfield__layer--mid .g4 { box-shadow: 1660px 1129px rgba(246,240,230,0.9), 866px 2152px rgba(246,240,230,0.9), 401px 2304px rgba(255,240,210,1), 1098px 182px rgba(255,255,255,1), 1790px 1589px rgba(180,200,255,0.95), 1311px 324px rgba(255,240,210,1), 494px 2186px rgba(255,240,210,1), 172px 976px rgba(255,255,255,1), 1180px 94px rgba(255,240,210,1), 349px 539px rgba(255,255,255,1), 513px 913px rgba(255,255,255,1), 507px 2214px rgba(246,240,230,0.9), 1162px 643px rgba(255,255,255,1), 1312px 1999px rgba(180,200,255,0.95), 1792px 84px rgba(255,240,210,1), 1433px 696px rgba(255,255,255,1), 1070px 36px rgba(255,240,210,1), 1535px 1504px rgba(180,200,255,0.95), 1663px 1300px rgba(246,240,230,0.9), 286px 423px rgba(255,255,255,1), 237px 2274px rgba(255,255,255,1), 351px 653px rgba(180,200,255,0.95), 1460px 1360px rgba(246,240,230,0.9), 398px 594px rgba(180,200,255,0.95), 1997px 1756px rgba(255,255,255,1), 1092px 1046px rgba(246,240,230,0.9), 516px 1864px rgba(180,200,255,0.95), 1102px 410px rgba(246,240,230,0.9), 1683px 83px rgba(246,240,230,0.9), 1093px 1884px rgba(180,200,255,0.95), 165px 2013px rgba(255,240,210,1), 1732px 1470px rgba(180,200,255,0.95), 628px 1254px rgba(246,240,230,0.9), 1686px 2367px rgba(255,255,255,1), 1740px 1007px rgba(246,240,230,0.9), 1622px 575px rgba(180,200,255,0.95), 166px 2070px rgba(180,200,255,0.95), 206px 1693px rgba(255,255,255,1), 574px 445px rgba(255,240,210,1), 104px 1724px rgba(246,240,230,0.9), 1630px 1730px rgba(246,240,230,0.9), 1984px 1465px rgba(246,240,230,0.9), 1px 1927px rgba(255,255,255,1), 512px 1717px rgba(255,240,210,1), 353px 1835px rgba(180,200,255,0.95), 355px 880px rgba(255,255,255,1), 1353px 2254px rgba(255,240,210,1), 180px 2155px rgba(255,240,210,1), 1668px 1584px rgba(255,255,255,1), 652px 1541px rgba(255,240,210,1), 1965px 625px rgba(255,240,210,1), 440px 2237px rgba(255,240,210,1), 910px 177px rgba(255,240,210,1), 209px 245px rgba(255,255,255,1), 1169px 1041px rgba(255,240,210,1); animation: twinkleB 2.7s ease-in-out -1.6s infinite;       }
/* NEAR — bright, with glow halo (4px blur), fastest blink */
.starfield__layer--near > span {
  width: 2.5px; height: 2.5px;
}
.starfield__layer--near .g1 { box-shadow: 291px 133px 4px rgba(180,200,255,1), 1058px 295px 4px rgba(232,38,124,1), 1319px 985px 4px rgba(180,200,255,1), 1910px 803px 4px rgba(232,38,124,1), 1662px 749px 4px rgba(180,200,255,1), 1410px 1822px 4px rgba(232,38,124,1), 1987px 223px 4px rgba(255,210,180,1), 225px 1752px 4px rgba(232,38,124,1), 959px 209px 4px rgba(232,38,124,1), 1022px 1393px 4px rgba(180,200,255,1), 1247px 1506px 4px rgba(180,200,255,1), 467px 1546px 4px rgba(255,255,255,1), 1516px 113px 4px rgba(180,200,255,1), 1226px 609px 4px rgba(255,210,180,1), 433px 1632px 4px rgba(255,210,180,1), 1967px 1784px 4px rgba(255,255,255,1), 664px 2062px 4px rgba(255,255,255,1), 1357px 1069px 4px rgba(232,38,124,1), 878px 2204px 4px rgba(255,255,255,1), 61px 1666px 4px rgba(255,255,255,1), 1739px 456px 4px rgba(180,200,255,1), 746px 1974px 4px rgba(255,255,255,1); animation: twinkleA 1.5s ease-in-out infinite;           }
.starfield__layer--near .g2 { box-shadow: 763px 2325px 4px rgba(232,38,124,1), 389px 1096px 4px rgba(232,38,124,1), 121px 329px 4px rgba(232,38,124,1), 794px 1023px 4px rgba(255,255,255,1), 1239px 1777px 4px rgba(232,38,124,1), 291px 1193px 4px rgba(255,255,255,1), 783px 270px 4px rgba(255,210,180,1), 1548px 9px 4px rgba(232,38,124,1), 1419px 1408px 4px rgba(232,38,124,1), 1230px 668px 4px rgba(255,210,180,1), 1814px 1190px 4px rgba(255,210,180,1), 5px 1572px 4px rgba(255,255,255,1), 636px 416px 4px rgba(255,255,255,1), 539px 1121px 4px rgba(180,200,255,1), 550px 2287px 4px rgba(255,210,180,1), 1500px 114px 4px rgba(255,210,180,1), 223px 402px 4px rgba(255,255,255,1), 1552px 1752px 4px rgba(255,255,255,1), 322px 362px 4px rgba(180,200,255,1), 1365px 2033px 4px rgba(232,38,124,1), 1514px 566px 4px rgba(255,255,255,1), 1603px 1760px 4px rgba(255,210,180,1); animation: twinkleB 1.2s ease-in-out -0.4s infinite;     }
.starfield__layer--near .g3 { box-shadow: 1235px 2116px 4px rgba(255,255,255,1), 1721px 1897px 4px rgba(232,38,124,1), 924px 2072px 4px rgba(232,38,124,1), 1678px 1242px 4px rgba(232,38,124,1), 816px 406px 4px rgba(255,210,180,1), 1172px 565px 4px rgba(232,38,124,1), 1579px 318px 4px rgba(255,210,180,1), 870px 665px 4px rgba(180,200,255,1), 1878px 207px 4px rgba(232,38,124,1), 1438px 2343px 4px rgba(232,38,124,1), 382px 874px 4px rgba(180,200,255,1), 1543px 1599px 4px rgba(255,210,180,1), 1756px 719px 4px rgba(232,38,124,1), 1852px 1633px 4px rgba(255,255,255,1), 667px 542px 4px rgba(255,210,180,1), 1032px 845px 4px rgba(232,38,124,1), 1781px 1142px 4px rgba(255,210,180,1), 1748px 34px 4px rgba(180,200,255,1), 1766px 920px 4px rgba(180,200,255,1), 668px 1px 4px rgba(255,210,180,1), 1288px 676px 4px rgba(255,255,255,1), 459px 1546px 4px rgba(255,210,180,1); animation: twinkleA 1.7s ease-in-out -0.9s infinite;     }
.starfield__layer--near .g4 { box-shadow: 1707px 1908px 4px rgba(180,200,255,1), 1052px 298px 4px rgba(232,38,124,1), 1726px 1416px 4px rgba(232,38,124,1), 562px 1462px 4px rgba(255,255,255,1), 393px 1435px 4px rgba(180,200,255,1), 53px 2336px 4px rgba(255,210,180,1), 375px 365px 4px rgba(255,210,180,1), 192px 1322px 4px rgba(255,255,255,1), 338px 1406px 4px rgba(255,210,180,1), 1646px 1618px 4px rgba(255,255,255,1), 950px 558px 4px rgba(255,255,255,1), 1082px 1626px 4px rgba(255,210,180,1), 876px 1022px 4px rgba(255,255,255,1), 1165px 2145px 4px rgba(232,38,124,1), 784px 1196px 4px rgba(255,210,180,1), 564px 1575px 4px rgba(180,200,255,1), 1340px 1882px 4px rgba(255,210,180,1), 1944px 716px 4px rgba(232,38,124,1), 1210px 1479px 4px rgba(232,38,124,1), 1972px 369px 4px rgba(180,200,255,1), 1062px 786px 4px rgba(255,255,255,1), 1315px 1332px 4px rgba(232,38,124,1); animation: twinkleB 1.3s ease-in-out -1.2s infinite;     }

/* Slow parallax drift — applied to the layer wrapper */
.starfield__layer--far  { animation: starDriftFar 240s linear infinite; }
.starfield__layer--mid  { animation: starDriftMid 180s linear infinite; }
.starfield__layer--near { animation: starDriftNear 120s linear infinite; }

@keyframes twinkleA { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes twinkleB { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes starDriftFar  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-200px, -120px, 0); } }
@keyframes starDriftMid  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-260px, -180px, 0); } }
@keyframes starDriftNear { from { transform: translate3d(0,0,0); } to { transform: translate3d(-340px, -240px, 0); } }

/* ===== MOON ===== more realistic crescent-leaning glow, tucked into
   the top-right corner, ABSOLUTE so it scrolls away with the hero
   instead of following the user down the page. */
.starfield__moon {
  position: absolute;     /* not fixed — scrolls off with hero */
  top: clamp(40px, 6vh, 90px);
  right: clamp(8px, 2vw, 32px);
  width: clamp(90px, 11vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Layered radial gradients give a subtle crater + terminator. */
  background:
    /* Highlight rim */
    radial-gradient(circle at 32% 30%, rgba(255,250,235,0.95) 0%, rgba(255,250,235,0) 18%),
    /* Dark crater spot */
    radial-gradient(circle at 58% 62%, rgba(170,150,120,0.55) 0%, rgba(170,150,120,0) 9%),
    radial-gradient(circle at 70% 38%, rgba(170,150,120,0.4) 0%, rgba(170,150,120,0) 7%),
    /* Body — warm cream w/ darker terminator on right edge */
    radial-gradient(circle at 40% 40%, #fff4d6 0%, #f0d9a6 38%, #c69d63 60%, #6b4a28 78%, transparent 84%);
  box-shadow:
    0 0 50px rgba(255, 222, 170, 0.40),
    0 0 130px rgba(255, 200, 130, 0.20),
    0 0 240px rgba(232, 38, 124, 0.14);
  opacity: 0.92;
}
/* Subtle outer halo separated as a pseudo so it stays soft */
.starfield__moon::before {
  content: '';
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,235,200,0.18) 0%, transparent 55%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .starfield__layer { animation: none !important; }
  .starfield__layer > span { animation: none !important; opacity: 0.8 !important; }
}