/* ============================================================
   STARLITE skin — dark indigo + teal with orange/gold, Alfa Slab One slab
   headings + Kaushan script accents + Familjen Grotesk body, rounded cards.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=DM+Mono:wght@400;500&family=Familjen+Grotesk:wght@400;500;600;700&family=Kaushan+Script&display=swap');

:root {
  --bg: #0e0a2a;
  --bg-2: #120c36;
  --surface: #161046;
  --surface-2: #1e1356;
  --teal: #38c9c2;
  --teal-deep: #1f7d7a;
  --orange: #f15a29;
  --gold: #ffd23f;
  --yellow: #ffd23f;
  --coral: #f15a29;
  --pink: #ff7a8a;
  --red: #f15a29;
  --ink: #0e0a2a;
  --cream: #fef0d3;
  --muted: rgba(254,240,211,.62);
  --line: rgba(254,240,211,.18);
  --rule: rgba(254,240,211,.18);
  --glow-cream: 0 0 14px rgba(254,240,211,.55);
  --glow-yellow: 0 0 16px rgba(255,210,63,.6);
  --glow-orange: 0 0 18px rgba(241,90,41,.6);
  --glow-teal: 0 0 16px rgba(56,201,194,.55);
  --maxw: 1200px;
  --radius: 16px;
  --shadow: 0 14px 36px rgba(0,0,0,.5);
  --font-head: 'Alfa Slab One', serif;
  --font-script: 'Kaushan Script', cursive;
  --font-body: 'Familjen Grotesk', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
  --anim: .2s ease;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg);
  background-image: radial-gradient(900px 520px at 82% -5%, rgba(35,202,187,.16), transparent 60%),
                    radial-gradient(800px 500px at 0% 4%, rgba(232,128,58,.14), transparent 55%);
  color: var(--cream); font-family: var(--font-body); line-height: 1.55;
}
html { scroll-behavior: smooth; }
a { color: var(--teal); text-decoration: none; }
a:not(.btn):hover { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* ---- Sections ---- */
.section { padding: 5rem 0; }
.section:where(:nth-of-type(even)) { background: var(--bg-2); }
.section__head { margin-bottom: 2.5rem; }
.section__eyebrow { display: inline-block; font-family: var(--font-script); color: var(--teal); font-size: 1.35rem; margin: 0 0 .5rem; }
.section__title { font-family: var(--font-head); font-weight: 400; color: var(--cream); font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: .98; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 .75rem; }
.section__intro { color: var(--muted); font-size: 1.1rem; max-width: 60ch; margin: 0; }

/* ---- Buttons ---- */
.btn { display: inline-block; font-family: var(--font-body); font-weight: 700; letter-spacing: .02em; font-size: .95rem; padding: .85rem 1.6rem; border-radius: 9999px; border: 2px solid transparent; cursor: pointer; transition: transform var(--anim), box-shadow var(--anim); }
.btn--primary { background: linear-gradient(180deg, var(--gold), var(--orange)); color: var(--ink); box-shadow: 0 8px 22px rgba(232,128,58,.4); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(232,128,58,.55); }
.btn--phone { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn--phone:hover { background: rgba(35,202,187,.14); transform: translateY(-2px); }

/* ---- Header ---- */
.section--header { position: sticky; top: 0; z-index: 50; background: rgba(15,10,32,.94); padding: 1rem 0; border-bottom: 1px solid var(--line); }
.section--header:nth-of-type(even) { background: rgba(15,10,32,.94); }
.header__inner { display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; }
.brand__name { font-family: var(--font-head); font-size: 1.3rem; color: var(--cream); text-transform: uppercase; line-height: 1; }
.brand__city { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.nav__link { color: var(--cream); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.nav__link:hover { color: var(--teal); }
.nav__link:last-child { background: linear-gradient(180deg, var(--gold), var(--orange)); color: var(--ink); border-radius: 9999px; padding: .5rem 1.1rem; font-weight: 700; }
.header__phone { color: var(--teal); font-weight: 700; margin-left: 1rem; }

/* ---- Hero ---- */
.section--hero { position: relative; overflow: hidden; min-height: clamp(540px, 84vh, 820px); display: grid; align-items: center; color: var(--cream); }
.section--hero:nth-of-type(even) { background: var(--bg); }
.section--hero .hero__image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; border: 0; z-index: 0; }
.section--hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,10,32,.95) 0%, rgba(15,10,32,.78) 45%, rgba(15,10,32,.35) 100%); }
.section--hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 640px; }
.hero__eyebrow { display: inline-block; font-family: var(--font-script); color: var(--teal); font-size: 1.5rem; margin: 0 0 .75rem; }
.hero__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(3rem, 8.5vw, 6rem); line-height: 1; text-transform: uppercase; color: var(--cream); margin: .25rem 0; }
.hero__sub { color: var(--cream); font-size: 1.2rem; max-width: 42ch; }
.hero__rating { color: var(--gold); font-weight: 700; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0 0; }
.hero-burst { display: grid; place-items: center; position: absolute; z-index: 3; right: 6%; top: 50%; transform: translateY(-50%) rotate(-8deg); width: 210px; height: 210px; font-family: var(--font-head); text-transform: uppercase; font-size: 2.1rem; color: var(--ink); background: radial-gradient(circle at 50% 40%, var(--gold), var(--orange)); border: 0; padding: 0; cursor: pointer; clip-path: polygon(50% 0,61% 18%,82% 12%,76% 33%,98% 38%,80% 52%,98% 67%,76% 70%,84% 92%,62% 82%,50% 100%,38% 82%,16% 92%,24% 70%,2% 67%,20% 52%,2% 38%,24% 33%,18% 12%,39% 18%); box-shadow: 0 0 50px rgba(232,128,58,.6); animation: sl-pop .5s ease-out both; }
.hero-burst.kapow { animation: sl-kapow .5s ease-out; }
.floaty { position: absolute; z-index: 4; font-family: var(--font-head); text-transform: uppercase; font-size: 2.6rem; color: var(--teal); text-shadow: 3px 3px 0 var(--ink); pointer-events: none; animation: sl-float 1s ease-out forwards; }
@media (max-width: 900px) { .hero-burst { width: 140px; height: 140px; font-size: 1.5rem; right: 3%; } }


/* flying pins behind the hero STRIKE burst (decorative; no markup) */
.section--hero::after { content: ""; position: absolute; z-index: 2; right: 1%; top: 50%; transform: translateY(-50%); width: 420px; height: 340px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20220%20180%27%3E%3Cg%20transform%3D%27translate%288%2026%29%20rotate%28-28%29%20scale%28.95%29%27%3E%3Cpath%20d%3D%27M20%203%20C27%203%2028%2013%2024%2022%20C21%2029%2021%2033%2025%2044%20C31%2060%2031%2082%2020%2097%20C9%2082%209%2060%2015%2044%20C19%2033%2019%2029%2016%2022%20C12%2013%2013%203%2020%203%20Z%27%20fill%3D%27%23fff8ee%27%20stroke%3D%27%230f0a20%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%2323cabb%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%208%29%20rotate%2834%29%20scale%28.85%29%27%3E%3Cpath%20d%3D%27M20%203%20C27%203%2028%2013%2024%2022%20C21%2029%2021%2033%2025%2044%20C31%2060%2031%2082%2020%2097%20C9%2082%209%2060%2015%2044%20C19%2033%2019%2029%2016%2022%20C12%2013%2013%203%2020%203%20Z%27%20fill%3D%27%23fff8ee%27%20stroke%3D%27%230f0a20%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%2323cabb%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2896%2092%29%20rotate%288%29%20scale%281.05%29%27%3E%3Cpath%20d%3D%27M20%203%20C27%203%2028%2013%2024%2022%20C21%2029%2021%2033%2025%2044%20C31%2060%2031%2082%2020%2097%20C9%2082%209%2060%2015%2044%20C19%2033%2019%2029%2016%2022%20C12%2013%2013%203%2020%203%20Z%27%20fill%3D%27%23fff8ee%27%20stroke%3D%27%230f0a20%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%2323cabb%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.4)); animation: sl-pins-in .6s ease-out both; }
@media (max-width: 900px) { .section--hero::after { width: 240px; height: 200px; right: 0; } }
@keyframes sl-pins-in { 0% { opacity: 0; transform: translateY(-50%) scale(.6) rotate(-8deg); } 100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); } }

/* ---- Stats ---- */
.section--stats { padding: 2.5rem 0; background: var(--surface); }
.section--stats:nth-of-type(even) { background: var(--surface); }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; }
.stat { padding: .25rem 1.5rem; border-left: 2px solid var(--teal); }
.stat__value { display: block; font-family: var(--font-head); font-size: 2.5rem; line-height: 1; color: var(--gold); }
.stat__label { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: var(--muted); }

/* ---- Card base ---- */
.offering, .party, .league, .review, .menu-item, .deal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--anim), box-shadow var(--anim); }
.offering:hover, .party:hover, .review:hover, .menu-item:hover, .deal:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* ---- Offerings ---- */
.offerings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.5rem; }
.offering { padding: 1.5rem; }
.offering__title { font-family: var(--font-head); text-transform: uppercase; font-size: 1.2rem; color: var(--teal); margin: 0 0 .5rem; }
.offering:nth-child(3n+2) .offering__title { color: var(--gold); }
.offering:nth-child(3n) .offering__title { color: var(--orange); }
.offering__desc { color: var(--muted); margin: 0 0 1rem; }
.offering__photos { display: grid; gap: .5rem; }
.offering__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }

/* ---- Pricing ---- */
.pricing-list, .pricing-rentals { display: grid; gap: .5rem; max-width: 680px; }
.pricing-rentals { margin-top: 1rem; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line); padding: .75rem 0; }
.price-row__label { font-weight: 600; }
.price-row__value { font-family: var(--font-head); font-size: 1.5rem; color: var(--gold); }

/* ---- Parties ---- */
.parties__image { width: 100%; max-width: 720px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.5rem; }
.party-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.5rem; }
.party { padding: 1.5rem; }
.party__name { display: block; font-family: var(--font-head); text-transform: uppercase; font-size: 1.1rem; color: var(--teal); }
.party__price { display: inline-block; font-family: var(--font-head); font-size: 1.5rem; color: var(--gold); margin: .35rem 0; }
.party__detail { display: block; color: var(--muted); }
.party__includes { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--muted); }

/* ---- Leagues ---- */
.leagues__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.leagues__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.league-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; max-width: 760px; }
.league { display: flex; align-items: baseline; gap: 1rem; padding: .85rem 1.2rem; }
.league__name { font-weight: 700; color: var(--cream); }
.league__day { color: var(--muted); }
.league__time { margin-left: auto; font-family: var(--font-head); color: var(--teal); }

/* ---- League feature (schedule + "why league up?" rail) ---- */
.leagues-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 2.5rem; align-items: start; }
.leagues-layout .league-list { max-width: none; }
.league-feature { align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; }
.league-feature__photo { margin: 0 0 1.25rem; }
.league-feature__photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), var(--glow-teal); }
.league-feature__photo figcaption { font-family: var(--font-script); color: var(--teal); font-size: 1.15rem; margin-top: .65rem; }
.league-feature__title { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: 1.6rem; line-height: 1.02; color: var(--cream); margin: 0 0 .6rem; }
.league-feature__title em { font-style: normal; color: var(--gold); }
.league-feature__body { color: var(--muted); margin: 0 0 1.4rem; }
.league-feature__stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 0 0 1.5rem; }
.league-stat { display: flex; flex-direction: column; padding-left: 1rem; border-left: 2px solid var(--teal); }
.league-stat:nth-child(2) { border-left-color: var(--orange); }
.league-stat__value { font-family: var(--font-head); font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--gold); }
.league-stat:nth-child(2) .league-stat__value { color: var(--orange); }
.league-stat__label { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: var(--muted); margin-top: .45rem; }
.league-feature__cta { margin-top: .25rem; }
@media (max-width: 820px) { .leagues-layout { grid-template-columns: 1fr; } }

/* ---- Bar & lounge / Cosmic ---- */
.section--barlounge { background: var(--surface); }
.section--cosmic { background: linear-gradient(120deg, #142a52, var(--teal) 160%); }
.barlounge__details, .section--cosmic .section__intro, .section--barlounge .section__intro { color: var(--muted); }
.barlounge__photos, .cosmic__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.barlounge__photo, .cosmic__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---- Food service (menu) ---- */
.section--foodservice { background: var(--bg); }
.menu-layout--featured { display: grid; grid-template-columns: .8fr 1.3fr; gap: 2rem; align-items: start; }
.menu-feature { margin: 0; }
.menu-feature img { width: 100%; max-width: none; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 90px; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.menu-tab { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--cream); background: var(--surface); border: 1px solid var(--line); border-radius: 9999px; padding: .5rem 1.1rem; cursor: pointer; transition: background var(--anim), color var(--anim); }
.menu-tab.is-active { background: var(--teal); color: var(--ink); border-color: transparent; }
html.js .section--foodservice .menu-main:has(.menu-tabs) .menu-category { display: none; }
html.js .section--foodservice .menu-main:has(.menu-tabs) .menu-category.is-active { display: block; }
.menu-category__title { font-family: var(--font-head); text-transform: uppercase; color: var(--teal); font-size: 1.25rem; margin: 0 0 1.25rem; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1.25rem; }
.menu-item { overflow: hidden; }
.menu-item__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.menu-item__name { font-weight: 700; color: var(--cream); margin: .75rem .85rem .25rem; }
.menu-item__desc { color: var(--muted); font-size: .85rem; margin: 0 .85rem .5rem; }
.menu-item__price { display: inline-block; font-family: var(--font-head); color: var(--gold); font-size: 1.2rem; margin: 0 .85rem .85rem; }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list__row { display: flex; align-items: baseline; gap: .75rem; border-bottom: 1px solid var(--line); padding: .6rem 0; }
.menu-list__name { font-weight: 600; color: var(--cream); }
.menu-list__meta { color: var(--muted); font-size: .8rem; }
.menu-list__price { margin-left: auto; font-family: var(--font-head); color: var(--gold); }

/* ---- This week / deals (one highlighted teal) ---- */
.deals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem; }
.deal { padding: 1.5rem; }
.deal:first-child { background: var(--teal); color: var(--ink); }
.deal:first-child .deal__title, .deal:first-child .deal__value { color: var(--ink); }
.deal:first-child .deal__desc, .deal:first-child .deal__valid, .deal:first-child .deal__code { color: rgba(22,10,2,.8); }
.deal__title { font-family: var(--font-head); text-transform: uppercase; font-size: 1.4rem; color: var(--teal); margin: 0 0 .5rem; }
.deal__desc { color: var(--muted); margin: 0 0 .75rem; }
.deal__value { display: inline-block; font-family: var(--font-head); color: var(--gold); font-size: 1.5rem; }
.deal__valid, .deal__code { display: block; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .4rem; }

/* ---- Reviews ---- */
.review-sources { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; color: var(--muted); }
.review-source__num { font-family: var(--font-head); color: var(--gold); font-size: 1.6rem; margin-right: .25rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.5rem; }
.review { padding: 1.5rem; }
.review__avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; float: right; margin-left: .75rem; border: 2px solid var(--line); }
.review__rating { color: var(--gold); }
.review__quote { margin: .5rem 0 1rem; color: var(--cream); }
.review__author { font-weight: 700; display: block; color: var(--teal); }
.review__source, .review__date { font-size: .8rem; color: var(--muted); }

/* ---- Gallery ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1rem; }
.gallery__photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); transition: transform var(--anim); }
.gallery__photo:hover { transform: scale(1.03); }

/* ---- Gift cards ---- */
.section--giftcards { background: linear-gradient(120deg, var(--orange), var(--gold)); }
.giftcard { text-align: center; display: grid; justify-items: center; gap: .5rem; }
.giftcard__logo { width: 64px; height: 64px; object-fit: contain; background: rgba(255,255,255,.18); border-radius: var(--radius); padding: .4rem; }
.giftcard__name { font-family: var(--font-head); text-transform: uppercase; color: var(--ink); }
.section--giftcards .section__title { color: var(--ink); }

/* ---- CTA ---- */
.section--cta { background: var(--surface); text-align: center; }
.cta__inner { display: grid; justify-items: center; gap: 1rem; }
.cta__title { font-family: var(--font-head); text-transform: uppercase; color: var(--cream); font-size: clamp(2.4rem,8vw,4.5rem); margin: 0; }
.cta__sub { color: var(--muted); font-size: 1.15rem; }
.cta__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ---- Footer ---- */
.section--footer { background: var(--bg); color: var(--cream); border-top: 1px solid var(--line); }
.section--footer:nth-of-type(even) { background: var(--bg); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 2rem; }
.footer__logo { width: 60px; height: 60px; object-fit: contain; }
.footer__heading { font-family: var(--font-head); text-transform: uppercase; color: var(--teal); font-size: 1rem; margin: 0 0 .75rem; }
.footer__map { width: 100%; border-radius: 10px; margin-bottom: .75rem; }
.footer__tag, .footer__address { color: var(--muted); }
.footer__phone, .footer__directions { color: var(--teal); font-weight: 700; display: inline-block; margin-top: .5rem; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.footer__links a { color: var(--cream); }
.footer__links a:hover { color: var(--teal); }
.footer__legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }

/* ---- Scroll reveal ---- */
.section.in-view:not(.section--header):not(.section--hero) { animation: sl-reveal .55s ease both; }

/* ---- Mobile slide-out nav (smooth off-canvas drawer) ---- */
.nav-toggle { flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; width: 46px; height: 46px; padding: 0; cursor: pointer; margin-left: auto; }
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--cream); border-radius: 2px; transition: transform .3s cubic-bezier(.4,.01,.2,1), opacity .2s ease; }
/* overlay fades (opacity/visibility) instead of display-toggling, so it eases; display:block
   overrides the canonical base hide; pointer-events gate clicks while hidden. */
.nav-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
body.nav-locked { overflow: hidden; }
@media (max-width: 1024px) {
  .nav-toggle { display: flex; order: 2; margin-left: 0; flex: none; }
  .header__phone { display: none; }
  /* Compact single-row mobile header (logo + name | status | toggle) */
  .section--header { padding: .4rem 0; }
  .header__inner { flex-wrap: nowrap; align-items: center; gap: .6rem; }
  .brand { order: 0; flex: 1 1 auto; min-width: 0; }
  .brand__logo { width: 34px; height: 34px; }
  .brand__name { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__city { display: none; }
  .header__utility { order: 1; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: .15rem; margin: 0; }
  .hours-status--badge { font-size: .62rem; padding: .12rem .45rem; }
  .nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(0,0,0,.45); flex-direction: column; align-items: stretch; gap: .15rem; padding: 5.5rem 1.5rem 2rem; margin: 0; z-index: 70; transform: translateX(100%); transition: transform .34s cubic-bezier(.22,.61,.36,1); overflow-y: auto; }
  .nav__link { font-size: 1.15rem; padding: .75rem 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav__link:last-child { margin-top: .75rem; text-align: center; border-bottom: 0; }
  .section--header.nav-open .nav { transform: translateX(0); }
  .section--header.nav-open .nav-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
  .section--header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .section--header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .section--header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  .menu-layout--featured { grid-template-columns: 1fr; }
  .menu-feature img { position: static; aspect-ratio: 16/9; }
}

/* ---- Animations ---- */
@keyframes sl-pop { 0% { transform: translateY(-50%) rotate(-8deg) scale(0); } 60% { transform: translateY(-50%) rotate(-8deg) scale(1.15); } 100% { transform: translateY(-50%) rotate(-8deg) scale(1); } }
@keyframes sl-kapow { 0% { transform: translateY(-50%) rotate(-8deg) scale(1); } 30% { transform: translateY(-50%) rotate(6deg) scale(1.2); } 60% { transform: translateY(-50%) rotate(-14deg) scale(.92); } 100% { transform: translateY(-50%) rotate(-8deg) scale(1); } }
@keyframes sl-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { transform: translateY(-18px) scale(1.1); opacity: 1; } 100% { transform: translateY(-130px) scale(1); opacity: 0; } }
@keyframes sl-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) { .section:not(.section--header) { padding: 3rem 0; } .section--hero { min-height: 72vh; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================
   STARLITE — strike-era section additions (later rules override the now-dead old ones).
   ============================================================ */

/* Hero: drop the off-design burst + flying pins (proof uses stars + tile letters), script accent. */
.hero-burst { display: none; }
.section--hero::after { content: none; }
.hero__title em { font-family: var(--font-script); color: var(--gold); font-style: normal; text-transform: none; }
.section__eyebrow::before, .hero__eyebrow::before { content: "\2605  "; }

/* Hero deals marquee */
.hero-marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; overflow: hidden; background: var(--teal); color: var(--ink); }
.hero-marquee__track { display: inline-flex; gap: 2.5rem; white-space: nowrap; padding: .55rem 0; font-family: var(--font-head); text-transform: uppercase; font-size: 1.05rem; letter-spacing: .03em; animation: sl-marquee 26s linear infinite; }
.hero-marquee__track span { display: inline-flex; align-items: center; gap: 2.5rem; }
@keyframes sl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Live "open now" status (header badge / hero / find-us) + today-row highlight */
.hours-status { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-body); font-weight: 700; font-size: .9rem; color: var(--cream); white-space: nowrap; }
.hours-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); flex: none; }
.hours-status.is-open::before { background: #3fe08a; box-shadow: 0 0 0 3px rgba(63,224,138,.25); }
.hours-status.is-closed::before { background: var(--red); }
.hours-status--badge { font-size: .8rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.05); }
.findus__card .hours-status { margin: 0 0 .85rem; }
.section--hero .hours-status { margin-top: 1.1rem; }
.findus__hours-row.is-today { background: rgba(35,202,187,.12); border-radius: 7px; margin: 0 -.6rem; padding: .15rem .6rem .5rem; }
.findus__hours-row.is-today span { color: var(--teal); font-weight: 800; }

/* Header utility + nav "More" dropdown + reserve pill */
.header__utility { display: flex; align-items: center; gap: 1.1rem; }
.brand__status, .nav__head { display: none; }
.header__phone { color: var(--gold); font-weight: 700; white-space: nowrap; }
.nav__link--cta { background: var(--gold); color: var(--ink); border-radius: 9999px; padding: .5rem 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.nav__more { position: relative; display: inline-flex; }
.nav__more-toggle { background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--cream); display: inline-flex; align-items: center; gap: .3rem; }
.nav__more-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 13rem; flex-direction: column; gap: .1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .85rem .5rem .5rem; box-shadow: var(--shadow); z-index: 80; }
.nav__more:hover .nav__more-menu, .nav__more:focus-within .nav__more-menu { display: flex; }
.nav__more-menu .nav__link { padding: .55rem .65rem; border-radius: 8px; white-space: nowrap; border: 0; }
.nav__more-menu .nav__link:hover { background: rgba(255,255,255,.06); color: var(--teal); }

/* Offerings / deal / amenity card photos (full-bleed top) */
.offering { padding: 1.5rem; overflow: hidden; }
.offering__media { position: relative; margin: -1.5rem -1.5rem 1rem; }
.offering__photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 0; }
.offering__badge { position: absolute; top: .8rem; left: .8rem; background: var(--gold); color: var(--ink); font-family: var(--font-head); padding: .2rem .7rem; border-radius: 8px; }
.offering__cta { color: var(--teal); font-weight: 700; text-transform: uppercase; font-size: .82rem; display: inline-block; margin-top: .5rem; }
.deal { overflow: hidden; }
.deal__media { margin: -1.5rem -1.5rem 1.1rem; overflow: hidden; }
.deal__photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1.25rem; }
.amenity { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; overflow: hidden; }
.amenity__name { font-family: var(--font-head); text-transform: uppercase; font-size: 1.05rem; color: var(--gold); margin: 0 0 .4rem; }
.amenity__desc { color: var(--muted); font-size: .9rem; margin: 0; }
.amenity__media { margin: -1.25rem -1.4rem 1rem; overflow: hidden; }
.amenity__photo { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }

/* Parties — featured-package hero */
.parties-feature { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .parties-feature { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.parties-feature__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.parties-feature__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.parties-feature__price { position: absolute; top: 1rem; right: 1rem; width: calc(6.5rem * var(--badge-scale, 1)); height: calc(6.5rem * var(--badge-scale, 1)); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--gold); color: var(--ink); text-align: center; line-height: 1; filter: drop-shadow(0 8px 18px rgba(0,0,0,.4)); clip-path: polygon(50% 0%, 61% 11%, 76% 8%, 78% 24%, 92% 30%, 84% 43%, 95% 55%, 82% 62%, 86% 78%, 70% 78%, 62% 92%, 50% 82%, 38% 92%, 30% 78%, 14% 78%, 18% 62%, 5% 55%, 16% 43%, 8% 30%, 22% 24%, 24% 8%, 39% 11%); }
.parties-feature__price strong { font-family: var(--font-head); font-size: calc(1.6rem * var(--badge-scale, 1)); }
.parties-feature__price small { font-size: calc(.68rem * var(--badge-scale, 1)); text-transform: uppercase; letter-spacing: .08em; }
.parties-feature__ribbon { position: absolute; left: 0; bottom: 1.5rem; background: var(--orange); color: var(--cream); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; padding: .55rem 1.7rem .55rem 1.1rem; clip-path: polygon(0 0, 100% 0, calc(100% - .8rem) 50%, 100% 100%, 0 100%); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.parties-feature__lead { color: rgba(255,248,238,.9); font-size: 1.08rem; line-height: 1.6; margin: 1.1rem 0 1.6rem; max-width: 46ch; }
.parties-feature__list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .9rem; }
.parties-feature__list li { position: relative; padding-left: 1.9rem; color: var(--cream); font-weight: 600; }
.parties-feature__list li::before { content: "\2605"; position: absolute; left: 0; color: var(--teal); font-weight: 800; }
.parties-feature__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.parties-feature__deskcta { cursor: default; }
.party__readmore { margin-top: .5rem; background: none; border: 0; padding: 0; color: var(--teal); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.party-list__more { text-align: center; margin-top: 1.75rem; }
.party__detail { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.party.is-expanded .party__detail { -webkit-line-clamp: unset; }

/* Cosmic — neon banner (overrides the old photo grid) */
.section--cosmic { position: relative; overflow: hidden; padding: 0; background: linear-gradient(135deg, #160a36 0%, #1f1454 52%, #2a1a6e 100%); }
.cosmic__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; z-index: 0; }
.section--cosmic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(15,10,32,.96) 0%, rgba(15,10,32,.6) 42%, rgba(35,202,187,.25) 100%); z-index: 1; }
.cosmic__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 1.25rem 2rem; padding: 3.5rem 1.5rem; align-items: start; }
.cosmic__lead { grid-column: 1; grid-row: 1; }
.cosmic__action { grid-column: 2; grid-row: 1; text-align: right; justify-self: end; }
.cosmic__facts { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 1.5rem 0 0; }
.cosmic__eyebrow { color: var(--teal); text-transform: uppercase; letter-spacing: .24em; font-weight: 800; font-size: .8rem; margin: 0 0 .6rem; }
.cosmic__eyebrow::before { content: "\2605  "; }
.cosmic__mark { margin: 0; line-height: .82; font-family: var(--font-head); text-transform: uppercase; }
.cosmic__mark-top { display: block; font-size: clamp(2.8rem, 8vw, 6rem); }
.cosmic__letter { -webkit-text-stroke: 1px rgba(0,0,0,.45); paint-order: stroke fill; text-shadow: 0 0 18px currentColor, 0 0 5px currentColor; }
.cosmic__letter:nth-child(1) { color: #ff2d9b; }
.cosmic__letter:nth-child(2) { color: var(--orange); }
.cosmic__letter:nth-child(3) { color: var(--gold); }
.cosmic__letter:nth-child(4) { color: #4ade5b; }
.cosmic__letter:nth-child(5) { color: var(--teal); }
.cosmic__letter:nth-child(6) { color: #a855f7; }
.cosmic__mark-bottom { display: block; color: var(--cream); font-size: clamp(1.9rem, 5.5vw, 4rem); letter-spacing: .18em; }
.cosmic__sub { color: rgba(255,248,238,.78); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; margin: .8rem 0 0; }
.cosmic__facts dt { color: var(--teal); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 800; margin: 0 0 .3rem; }
.cosmic__facts dd { color: var(--cream); font-weight: 700; font-size: 1.05rem; margin: 0; }
@media (max-width: 760px) { .cosmic__inner { grid-template-columns: 1fr; } .cosmic__action { grid-column: 1; grid-row: 3; text-align: left; justify-self: start; margin-top: 1rem; } }

/* Bar & lounge masonry (overrides the old grid) */
.barlounge__photos { display: block; column-count: 3; column-gap: .9rem; grid-template-columns: none; margin-top: 1.5rem; }
.barlounge__photos[data-count="1"] { column-count: 1; }
.barlounge__photos[data-count="2"] { column-count: 2; }
.barlounge__photo-item { position: relative; break-inside: avoid; margin: 0 0 .9rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: block; }
.barlounge__photo-item .barlounge__photo { width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; display: block; }
.barlounge__cap { position: absolute; inset: auto 0 0 0; margin: 0; padding: .7rem .8rem; color: #fff; font-size: .8rem; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.78)); opacity: 0; transition: opacity .3s ease; }
.barlounge__photo-item:hover .barlounge__cap { opacity: 1; }
@media (max-width: 600px) { .barlounge__photos { column-count: 2; } .barlounge__photos[data-count="1"] { column-count: 1; } }

/* Gallery lightbox figures + the lightbox overlay */
.gallery__item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.gallery__cap { position: absolute; inset: auto 0 0 0; margin: 0; padding: .7rem .8rem; color: #fff; font-size: .8rem; background: linear-gradient(transparent, rgba(0,0,0,.8)); opacity: 0; transition: opacity .3s ease; }
.gallery__item:hover .gallery__cap { opacity: 1; }
.gallery__item:hover .gallery__photo { transform: scale(1.05); }
.lightbox { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(8,4,16,.94); align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 82vh; border-radius: 10px; }
.lightbox__btn { position: absolute; background: rgba(255,255,255,.1); border: 0; color: #fff; font-size: 2rem; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; }
.lightbox__btn--close { top: 1.25rem; right: 1.25rem; }
.lightbox__btn--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__cap { position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center; color: var(--cream); }

/* Find Us (the cta section is now the find-us map + cards) */
.findus { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 920px) { .findus { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.findus__map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.findus__map img { width: 100%; max-width: none; display: block; aspect-ratio: 4/5; object-fit: cover; }
.findus__cards { display: grid; gap: 1.25rem; }
.findus__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.findus__card-title { font-family: var(--font-head); text-transform: uppercase; font-size: 1.1rem; color: var(--teal); margin: 0 0 .7rem; }
.findus__address { color: var(--cream); margin: 0 0 .5rem; line-height: 1.5; }
.findus__note--link { color: var(--gold); font-weight: 700; text-transform: uppercase; font-size: .82rem; }
.findus__hours { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.findus__hours-row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed rgba(255,255,255,.1); padding-bottom: .45rem; color: var(--cream); font-size: .92rem; }
.findus__hours-row span:last-child { font-weight: 700; }
.findus__contact { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; color: var(--muted); }
.findus__contact a { color: var(--cream); font-weight: 700; }

/* Footer logo + legal links */
.footer__brand-id { display: flex; align-items: center; gap: .7rem; }
.footer__social { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.footer__social a { color: var(--muted); }
.footer__social a:hover { color: var(--teal); }
.footer__brand-id .footer__logo { width: 42px; height: 42px; }
.footer__legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__powered { text-align: center; font-size: .72rem; margin: 1.5rem 0 0; opacity: .5; }
.footer__powered a { color: inherit; font-weight: 400; font-style: italic; text-decoration: none; }
.footer__powered a:hover { text-decoration: underline; }

/* Compact mobile header — final overrides (win over the later-appended base rules) */
@media (max-width: 1024px) {
  .section--header .header__inner { flex-wrap: nowrap; align-items: center; gap: .6rem; }
  .section--header .brand { flex: 1 1 auto; min-width: 0; align-items: center; gap: .6rem; }
  .section--header .brand__logo { width: 48px; height: 48px; }
  .section--header .brand__text { min-width: 0; gap: .05rem; }
  .section--header .brand__status { display: inline-flex; font-size: .64rem; }
  .section--header .brand__name { min-width: 0; font-size: 1.1rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .section--header .brand__city { display: block; font-size: .68rem; opacity: .85; }
  .section--header .header__utility { display: none; }
  .section--header .nav-toggle { flex: none; margin-left: 0; }
  /* Flatten the desktop "More" dropdown into the drawer — all items at one level */
  .section--header .nav { padding-top: 10px; }
  .section--header.nav-open .nav-toggle { z-index: 80; }
  .section--header .nav__head { display: flex; align-items: center; gap: .7rem; width: 100%; margin: 10px 0 .6rem; padding: 0 2.75rem .85rem 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .section--header .nav__head-logo { width: 44px; height: 44px; flex: none; }
  .section--header .nav__head-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .section--header .nav__head-name { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .section--header .nav__head-status { font-size: .68rem; }
  .section--header .nav__more { display: block; width: 100%; }
  .section--header .nav__more-toggle { display: none; }
  .section--header .nav__more-menu { display: flex; flex-direction: column; position: static; width: 100%; min-width: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; gap: 0; }
  .section--header .nav__more-menu .nav__link { padding: .75rem 0; font-size: 1.15rem; width: 100%; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .section--header .nav__more-menu .nav__link:hover { background: none; }
}
.footer__legal-links a { color: var(--muted); }
.footer__legal-links a:hover { color: var(--teal); }

/* Base hide for graphics + status until filled / styled */
.lightbox, .gallery__cap { display: none; }
[data-hours-status]:empty { display: none; }
.gallery__item .gallery__cap { display: block; }
.lightbox.is-open { display: flex; }

/* ============================================================
   STARLITE — designer-proof match (Bowling Under The Stars).
   Midcentury starlight lounge: deep indigo bg, cream + Kaushan script
   wordmark/accents, Alfa Slab display headings, Space Mono UI labels,
   teal + coral + warm-yellow accents. These END-of-file rules win the
   cascade and refine the earlier base/strike-era rules to match the comp.
   Verified visually against the proof screenshots on center lava-lanes-bend.
   ============================================================ */

/* ---- Mono UI label voice (nav, eyebrows, stat labels, codes, buttons) ---- */
.nav__link, .hero__eyebrow, .section__eyebrow, .stat__label,
.deal__code, .deal__valid, .offering__cta, .findus__note--link,
.reviews-panel__source-name, .review__source, .review__tag {
  font-family: var(--font-mono);
}

/* ---- Header: clean bar, round logo, script wordmark, mono nav, gold pill ---- */
.section--header { background: rgba(14,9,40,.96); border-bottom: 1px solid rgba(255,255,255,.08); }
.section--header:nth-of-type(even) { background: rgba(14,9,40,.96); }
.brand__logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--coral); box-shadow: 0 0 16px rgba(255,90,53,.5); background: var(--bg); }
.brand__name { font-family: var(--font-script); font-weight: 400; text-transform: none; font-size: 1.7rem; letter-spacing: 0; color: var(--cream); line-height: 1; }
.nav__link { text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; font-weight: 400; }
.nav__link:hover { color: var(--teal); }
.nav__link--cta { background: var(--gold); color: var(--ink); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 9999px; padding: .55rem 1.3rem; box-shadow: 0 6px 18px rgba(245,200,66,.35); }
.nav__link--cta:hover { color: var(--ink); filter: brightness(1.06); }
.header__phone { font-family: var(--font-mono); color: var(--gold); }

/* ---- Section heads: "// eyebrow" teal mono + slab title w/ coral-script accent ---- */
.section__eyebrow { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .22em; font-size: .82rem; color: var(--teal); margin: 0 0 1rem; }
.section__eyebrow::before { content: "// "; }
.section__eyebrow::after { content: none; }
.section__title em { font-family: var(--font-script); font-style: normal; font-weight: 400; text-transform: none; color: var(--coral); }

/* ---- Buttons: coral primary pill, outline-cream ghost pill (mono labels) ---- */
.btn { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.btn--primary { background: var(--coral); color: #fff; border-color: transparent; box-shadow: 0 8px 22px rgba(255,90,53,.42); }
.btn--primary:hover { background: #ff6f4f; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,90,53,.55); }
.btn--ghost { background: transparent; color: var(--cream); border: 2px solid rgba(255,248,238,.55); border-radius: 9999px; padding: .85rem 1.6rem; }
.btn--ghost:hover { border-color: var(--cream); color: var(--cream); transform: translateY(-2px); }

/* ============================================================
   HERO — framed dark photo panel under the stars.
   ============================================================ */
.section--hero { margin: 1.25rem 1.1rem 0; border: 1px dotted rgba(255,248,238,.3); border-radius: 26px; min-height: clamp(560px, 86vh, 880px); }
.section--hero::before { background: linear-gradient(90deg, rgba(12,8,34,.92) 0%, rgba(12,8,34,.7) 48%, rgba(12,8,34,.32) 100%); border-radius: 26px; }
/* Eyebrow: ★ EST 1962 · OPEN LATE ★ — teal mono, star bookends */
.hero__eyebrow { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .26em; font-size: .85rem; color: var(--teal); }
.hero__eyebrow::before { content: "\2605  "; }
.hero__eyebrow::after { content: "  \2605"; }
/* H1: the center name as a big cream SCRIPT wordmark (not the slab) */
.hero__title { font-family: var(--font-script); font-weight: 400; text-transform: none; font-size: clamp(3rem, 8vw, 6rem); line-height: .95; color: var(--cream); text-shadow: 0 2px 24px rgba(0,0,0,.5); margin: .1rem 0 .2rem; }
.hero__title em { font-family: var(--font-script); color: var(--gold); font-style: normal; }
/* Sub: the word rendered BIG as a warm "tile sign" — red slab letters on gold */
.hero__sub { display: inline-block; font-family: var(--font-head); font-weight: 400; text-transform: uppercase; color: var(--red); font-size: clamp(1.8rem, 5.5vw, 3.6rem); line-height: 1; letter-spacing: .12em; max-width: none; margin: .35rem 0 0; padding: .35rem .65rem .25rem; background:
    repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 1.05em, rgba(0,0,0,.22) 1.05em, rgba(0,0,0,.22) 1.18em);
  background-color: var(--gold); border-radius: 10px; box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 12px 26px rgba(0,0,0,.45); text-shadow: 1px 1px 0 rgba(255,255,255,.25); }
/* Open-tonight badge — glowing outlined box (revealed by hours JS) */
.hero__today { display: none; }
.hero__today[data-hours-today]:not([hidden]), .hero__today.is-open-today { display: inline-block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.4rem, 3.4vw, 2.4rem); color: var(--cream); padding: .6rem 1.4rem; margin: 1.1rem 0 .25rem; border: 2px solid rgba(255,248,238,.85); border-radius: 14px; background: rgba(255,248,238,.04); box-shadow: 0 0 22px rgba(35,202,187,.45), inset 0 0 22px rgba(35,202,187,.18); text-shadow: 0 0 14px rgba(255,248,238,.55); }
.hero__rating { font-family: var(--font-mono); color: var(--gold); font-size: .9rem; letter-spacing: .02em; }
.hero__cta { margin-top: 1.6rem; }
/* Decorative stars cluster, upper-left, gently floating (no markup — pseudo) */
.section--hero::after { content: ""; position: absolute; z-index: 3; left: 4%; top: 16%; width: 320px; height: 240px; pointer-events: none; background-repeat: no-repeat; filter: drop-shadow(0 0 6px rgba(245,200,66,.5));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5c842' d='M12 0l2.4 8.4L23 11l-8.6 2.6L12 22l-2.4-8.4L1 11l8.6-2.6z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff8ee' d='M12 0l2.4 8.4L23 11l-8.6 2.6L12 22l-2.4-8.4L1 11l8.6-2.6z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5c842' d='M12 0l2.4 8.4L23 11l-8.6 2.6L12 22l-2.4-8.4L1 11l8.6-2.6z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2323cabb' d='M12 0l2.4 8.4L23 11l-8.6 2.6L12 22l-2.4-8.4L1 11l8.6-2.6z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff8ee' d='M12 0l2.4 8.4L23 11l-8.6 2.6L12 22l-2.4-8.4L1 11l8.6-2.6z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5c842' d='M12 0l2.4 8.4L23 11l-8.6 2.6L12 22l-2.4-8.4L1 11l8.6-2.6z'/%3E%3C/svg%3E");
  background-size: 26px, 16px, 20px, 18px, 22px, 14px;
  background-position: 6% 30%, 30% 8%, 52% 40%, 64% 12%, 80% 52%, 90% 22%;
  animation: sl-twinkle 5s ease-in-out infinite;
}
@keyframes sl-twinkle { 0%,100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-8px); opacity: 1; } }
@media (max-width: 900px) { .section--hero::after { width: 200px; height: 160px; left: 3%; top: 12%; } }

/* Hero "Lanes Available NOW" island — cyan neon sign, pinned top-right (mounts client-side) */
.hero-island:not([hidden]) { position: absolute; z-index: 4; top: clamp(1rem, 4vh, 3rem); right: clamp(1rem, 4vw, 3rem); max-width: 320px; padding: .9rem 1.2rem; color: var(--cream); font-family: var(--font-script); border: 2px solid var(--teal); border-radius: 14px; background: rgba(8,16,30,.55); box-shadow: 0 0 18px rgba(35,202,187,.7), inset 0 0 18px rgba(35,202,187,.3); text-shadow: 0 0 10px rgba(35,202,187,.8); }

/* ============================================================
   STATS — centered gold glow values + teal mono labels, dark panel
   ============================================================ */
.section--stats { background: var(--bg); padding: 2.25rem 0 3.25rem; }
.section--stats:nth-of-type(even) { background: var(--bg); }
.stats__grid { grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1.5rem; }
.stat { border-left: 0; padding: .25rem .5rem; text-align: center; }
.stat__value { color: var(--gold); font-size: clamp(2.1rem, 4vw, 3.1rem); text-shadow: 0 0 20px rgba(245,200,66,.5); }
.stat__label { color: var(--teal); font-family: var(--font-mono); letter-spacing: .18em; font-size: .72rem; }

/* ============================================================
   OFFERINGS ("Cheap Thrills") + THIS WEEK deals — dark cards, CODE pills
   ============================================================ */
.offering, .deal, .amenity, .review, .findus__card { border-radius: 18px; }
.offering__title { font-family: var(--font-head); color: var(--cream); }
.offering:nth-child(n) .offering__title { color: var(--cream); }
.offering__badge { background: var(--gold); color: var(--ink); font-family: var(--font-head); }
.offering__cta { color: var(--teal); letter-spacing: .06em; }
.deal__title { color: var(--cream); }
.deal__value { color: var(--gold); font-size: clamp(1.8rem, 4vw, 2.8rem); text-shadow: 0 0 16px rgba(245,200,66,.35); }
.deal:first-child .deal__value { color: var(--ink); text-shadow: none; }
.deal__code { display: inline-block; font-family: var(--font-mono); border: 1px dashed rgba(255,255,255,.32); border-radius: 8px; padding: .3rem .7rem; color: var(--gold); letter-spacing: .04em; text-transform: uppercase; }
.deal__code::before { content: "CODE "; color: var(--muted); }
.deal:first-child .deal__code { border-color: rgba(22,10,2,.45); color: var(--ink); }
.deal:first-child .deal__code::before { color: rgba(22,10,2,.7); }

/* ============================================================
   AMENITIES ("The Whole Spread") — first card featured teal
   ============================================================ */
.amenities-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.amenity__name { color: var(--cream); }
.amenity:first-child { background: linear-gradient(135deg, var(--teal), #169c90); border-color: transparent; color: var(--ink); box-shadow: 0 0 26px rgba(35,202,187,.35); }
.amenity:first-child .amenity__name { color: var(--ink); }
.amenity:first-child .amenity__desc { color: rgba(22,10,2,.82); }

/* ============================================================
   REVIEWS ("Loved by Locals") — scoreboard panel + masonry quote cards
   ============================================================ */
.reviews-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem 1.8rem; margin-bottom: 2rem; }
.reviews-panel__overall { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.reviews-panel__big { font-family: var(--font-head); font-size: 3.2rem; line-height: 1; color: var(--gold); text-shadow: 0 0 22px rgba(245,200,66,.4); }
.reviews-panel__stars { color: var(--gold); font-size: 1.3rem; letter-spacing: .1em; }
.reviews-panel__total { font-family: var(--font-mono); color: var(--muted); font-size: .85rem; }
.reviews-panel__sources { display: flex; flex-wrap: wrap; gap: .8rem; margin-left: auto; }
.reviews-panel__source { display: grid; gap: .15rem; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .9rem; min-width: 7rem; }
.reviews-panel__source-name { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--teal); }
.reviews-panel__source-count { font-size: .72rem; color: var(--muted); }
.reviews-panel__source-score { display: flex; align-items: center; gap: .35rem; }
.reviews-panel__source-stars { color: var(--gold); font-size: .85rem; }
.reviews-panel__source-rating { font-family: var(--font-head); color: var(--cream); font-size: 1rem; }
/* Masonry quote cards; starlite hides the per-card top tag */
.reviews-grid { display: block; column-count: 3; column-gap: 1.5rem; grid-template-columns: none; }
.review { display: block; break-inside: avoid; margin: 0 0 1.5rem; padding: 1.5rem 1.6rem; position: relative; }
.review__tag { display: none; }
.review__rating { display: block; color: var(--gold); font-size: 1.05rem; letter-spacing: .08em; margin-bottom: .5rem; }
.review__quote { float: none; color: var(--cream); font-size: 1.02rem; line-height: 1.55; margin: 0 0 1.1rem; }
.review__quote::before { content: "\201C"; display: block; font-family: var(--font-head); color: var(--teal); font-size: 2.6rem; line-height: .6; margin-bottom: .35rem; }
.review__foot { display: flex; align-items: center; gap: .75rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.review__avatar { float: none; margin: 0; width: 42px; height: 42px; border: 2px solid var(--teal); }
.review__who { margin: 0; display: grid; gap: .1rem; }
.review__author { color: var(--cream); font-weight: 700; }
.review__source { color: var(--teal); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
@media (max-width: 860px) { .reviews-grid { column-count: 2; } }
@media (max-width: 560px) { .reviews-grid { column-count: 1; } .reviews-panel__sources { margin-left: 0; } }

/* ============================================================
   GALLERY ("The Scene") — masonry photo grid, rounded
   ============================================================ */
.gallery-grid { display: block; column-count: 3; column-gap: 1rem; grid-template-columns: none; }
.gallery__item { break-inside: avoid; margin: 0 0 1rem; }
.gallery__photo { aspect-ratio: auto; height: auto; border-radius: var(--radius); }
@media (max-width: 760px) { .gallery-grid { column-count: 2; } }

/* ============================================================
   FIND US ("Roll on by") — today row highlighted gold
   ============================================================ */
.findus__card-title { color: var(--teal); }
.findus__hours-row.is-today { background: rgba(245,200,66,.14); border-radius: 7px; margin: 0 -.6rem; padding: .15rem .6rem .5rem; }
.findus__hours-row.is-today span { color: var(--gold); font-weight: 800; }
.findus__contact a { color: var(--cream); }
.findus__note--link { color: var(--gold); letter-spacing: .04em; }

/* ============================================================
   CONTACT / socials ("Follow the glow") — glowing footer social bar
   ============================================================ */
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--cream); transition: color var(--anim), border-color var(--anim), box-shadow var(--anim); }
.footer__social a:hover { color: var(--teal); border-color: var(--teal); box-shadow: 0 0 16px rgba(35,202,187,.6); }

/* ============================================================
   FOOTER — script brand, star-dotted baseline
   ============================================================ */
.footer__brand-name { font-family: var(--font-script); font-weight: 400; font-size: 1.7rem; color: var(--cream); }
.footer__heading { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--teal); font-size: .8rem; }
.footer__legal { border-top: 0; position: relative; }
.footer__legal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0; border-top: 1px dotted rgba(255,248,238,.28); }
.footer__legal-links a { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
.giftcard__name { font-family: var(--font-script); text-transform: none; font-size: 1.6rem; }

/* Mobile: relax the hero frame + tile sign so nothing overflows */
@media (max-width: 720px) {
  .section--hero { margin: .75rem .6rem 0; border-radius: 20px; }
  .section--hero::before { border-radius: 20px; }
  .hero__sub { letter-spacing: .06em; }
}

/* ============================================================
   STARLITE — motion (matches the proof's animation guide).
   Background motion is slow + ambient; interactions are snappy.
   ============================================================ */

/* 01 — Twinkling starfield: a fixed full-viewport layer of tiny white dots
   (exact positions/sizes from the proof). Sections sit above it; it only
   peeks through the dark page gaps (around the framed hero, between panels). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-repeat: no-repeat; background-size: 100% 100%;
  background-image:
    radial-gradient(1px 1px at 12% 20%, #fff, transparent),
    radial-gradient(1px 1px at 80% 10%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 60%, #fff, transparent),
    radial-gradient(1px 1px at 30% 80%, #fff, transparent),
    radial-gradient(1px 1px at 65% 75%, #fff, transparent),
    radial-gradient(1px 1px at 90% 50%, #fff, transparent),
    radial-gradient(1px 1px at 8% 55%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 25%, #fff, transparent),
    radial-gradient(1px 1px at 22% 88%, #fff, transparent),
    radial-gradient(1px 1px at 72% 40%, #fff, transparent);
  animation: sl-twinkle-bg 5s ease-in-out infinite alternate;
}
@keyframes sl-twinkle-bg { from { opacity: .35; } to { opacity: .75; } }
/* Lift every non-header section (and footer) above the starfield so content
   stays crisp; the header is already a sticky stacking context (z-index 50). */
.section:not(.section--header) { position: relative; z-index: 1; }

/* 02 — Hero atomic-star float keyframe (gentle drift), colors/glow per guide. */
@keyframes sl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.section--hero::after { animation: sl-float 5s ease-in-out infinite; }

/* 05 — Hero "Lanes Available NOW" neon island: base tilt + gentle sway + glow
   (the island mounts client-side; static preview keeps it hidden). */
@keyframes sl-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.hero-island:not([hidden]) { transform-origin: center top; animation: sl-sway 5s ease-in-out infinite; }

/* 06 — Hero vibe-strip marquee pauses on hover (track already scrolls). */
.hero-marquee:hover .hero-marquee__track { animation-play-state: paused; }

/* 07 — Card hover lift (snappy) on the cards the base didn't already cover. */
.amenity, .findus__card, .reviews-panel__source { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.amenity:hover, .findus__card:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: var(--shadow); }
/* Hero letter-sign tilts up on hover. */
.hero__sub { transition: transform .25s ease; }
.hero__sub:hover { transform: translateY(-6px) rotate(-1.5deg); }

/* 08 — Drawer link stagger (JS toggles .nav-open; no per-link --i, so nth-child). */
@media (max-width: 1024px) {
  .section--header.nav-open .nav .nav__link { animation: sl-drawer-in .5s cubic-bezier(.22,1,.36,1) both; }
  .section--header.nav-open .nav .nav__link:nth-child(2) { animation-delay: .06s; }
  .section--header.nav-open .nav .nav__link:nth-child(3) { animation-delay: .12s; }
  .section--header.nav-open .nav .nav__link:nth-child(4) { animation-delay: .18s; }
  .section--header.nav-open .nav .nav__link:nth-child(5) { animation-delay: .24s; }
  .section--header.nav-open .nav .nav__link:nth-child(n+6) { animation-delay: .3s; }
}
@keyframes sl-drawer-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* 10 — Reduced motion: freeze all ambient motion, keep end-states usable. */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; opacity: .55; }
  .section--hero::after, .hero-island:not([hidden]), .hero-marquee__track,
  .hero__sub, .section--header.nav-open .nav .nav__link { animation: none !important; transition: none !important; }
  .hero-island:not([hidden]) { transform: rotate(7deg); }
}

/* ============================================================
   STARLITE — section-head two-column (title left, intro right) + glow polish.
   Affects only sections that use .section__head (offerings, thisweek, amenities,
   reviews, gallery, find-us); parties/giftcards have bespoke heads.
   ============================================================ */
.section__head { display: grid; grid-template-columns: 1fr; gap: .4rem 3rem; margin-bottom: 3rem; }
@media (min-width: 880px) {
  .section__head { grid-template-columns: 1.5fr 1fr; }
  .section__head .section__eyebrow { grid-column: 1; grid-row: 1; }
  .section__head .section__title { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .section__head .section__intro { grid-column: 2; grid-row: 2; align-self: end; max-width: 420px; }
}
/* Glow polish via tokens (matches the proof's neon-on-dark feel). */
.stat__value { text-shadow: var(--glow-yellow); }
.deal__value { text-shadow: var(--glow-yellow); }
.btn--primary { box-shadow: var(--glow-orange); }
.nav__link--cta { box-shadow: var(--glow-yellow); }
.reviews-panel__big { text-shadow: var(--glow-yellow); }
.section__intro { opacity: .9; }

/* Gift cards sit on the warm orange→gold gradient — force dark ink for the
   script accent + intro so they stay readable (cream-on-orange was too faint). */
.section--giftcards .section__title em { color: var(--ink); }
.section--giftcards .section__intro,
.section--giftcards .giftcard__intro { color: rgba(14,10,42,.78); opacity: 1; }
.section--giftcards .section__eyebrow { color: var(--teal-deep); }
.giftcard__logo { background: rgba(14,10,42,.12); }

/* ============================================================
   GIFT CARDS — RICH layout (denomination pills + call-to-buy CTA +
   a branded gift-card visual). Sits on the warm orange→gold gradient,
   so copy is dark ink and the card artwork goes deep-night to contrast.
   ============================================================ */
.giftcard--rich {
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: 3.5rem;
  align-items: center;
  justify-items: stretch;
}
.giftcard--rich .section__title { color: var(--ink); }
.giftcard--rich .section__eyebrow { color: var(--teal-deep); }
.giftcard--rich .giftcard__intro { color: rgba(14,10,42,.82); opacity: 1; max-width: 46ch; }

/* Denomination pills — ink-outlined chips on the warm ground */
.giftcard__denoms { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 1.8rem; }
.giftcard__denom {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
  color: var(--ink);
  background: rgba(254,240,211,.55);
  border: 1.5px solid var(--ink);
  border-radius: 9999px;
  padding: .5rem 1.15rem;
}

/* CTA + aside — dark ink button for punch against the gold ground */
.giftcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.section--giftcards .giftcard__cta {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: 0 10px 26px rgba(14,10,42,.35);
}
.section--giftcards .giftcard__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(14,10,42,.45);
}
.giftcard__note {
  font-family: var(--font-script);
  font-size: 1.25rem;
  color: var(--teal-deep);
}

/* The card artwork — deep starlit night with neon glow */
.giftcard__preview { display: flex; justify-content: center; }
.giftcard__card {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1.6/1;
  background:
    radial-gradient(120px 90px at 84% 12%, rgba(56,201,194,.35), transparent 60%),
    radial-gradient(140px 110px at 10% 92%, rgba(241,90,41,.32), transparent 60%),
    linear-gradient(150deg, var(--surface-2) 0%, var(--bg) 70%);
  border: 1px solid rgba(254,240,211,.22);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 26px rgba(255,210,63,.18);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.giftcard__card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.giftcard--rich .giftcard__logo {
  width: 46px; height: 46px; object-fit: contain;
  background: rgba(254,240,211,.14);
  border-radius: 10px; padding: .3rem;
}
.giftcard__card-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  color: var(--teal);
}
.giftcard__card-amount {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4rem);
  line-height: 1;
  color: var(--gold);
  text-shadow: var(--glow-yellow);
  margin-top: auto;
}
.giftcard__card-foot {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--muted);
  margin-top: .35rem;
}
.giftcard--rich .giftcard__name {
  font-family: var(--font-script);
  text-transform: none;
  font-size: 1.35rem;
  color: var(--cream);
}

@media (max-width: 820px) {
  .giftcard--rich { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 2.5rem; }
  .giftcard--rich .giftcard__intro { margin-left: auto; margin-right: auto; }
  .giftcard__denoms, .giftcard__actions { justify-content: center; }
  .giftcard__preview { order: -1; }
}

/* ============================================================
   STARLITE — HEADER: strike-style two-row desktop grid (wins the cascade).
   Row 1: brand (left, spanning) + live status/phone utility (right).
   Row 2: nav on its own line, no wrap. ONE open/closed status, shown ABOVE
   the center name (brand__status); the utility badge is hidden so it isn't
   duplicated. Header + mobile drawer sit on starlite's own opaque tokens.
   ============================================================ */
/* Solid, on-brand header (was a semi-transparent hardcoded rgba). */
.section--header { background: var(--bg); }
.header__inner { display: flex; align-items: center; gap: 1.5rem; }
.brand { align-items: center; }
.brand__text { display: flex; flex-direction: column; gap: .1rem; line-height: 1.05; }
.header__utility { display: flex; align-items: center; gap: 1.1rem; }
.nav__head { display: none; }
/* Status lives above the name; the redundant top-right badge is hidden. */
.brand__status { display: inline-flex; margin: 0 0 .15rem; font-size: .78rem; }
.header__utility .hours-status--badge { display: none; }
.nav { flex-wrap: nowrap; }
@media (min-width: 1025px) {
  .header__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand utility" "brand nav";
    column-gap: 1.5rem;
    row-gap: .55rem;
    align-items: center;
  }
  .brand { grid-area: brand; }
  .header__utility { grid-area: utility; justify-self: end; }
  .nav { grid-area: nav; justify-self: end; margin: 0; }
}

/* ============================================================
   STARLITE — TYPOGRAPHY fixes (align stragglers to the type system).
   Menu-item card name should read as a slab card heading like its siblings
   (offering/amenity/find-us titles), not body text. Footer tagline is script.
   ============================================================ */
.menu-item__name { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: 1.02rem; color: var(--cream); }
.footer__tag { font-family: var(--font-script); font-size: 1.2rem; line-height: 1.35; }

/* ============================================================
   STARLITE — HERO atomic stars (DOM svg row, floating; behind copy).
   Alternating warm-yellow / cream 4-point stars with a soft self-glow.
   ============================================================ */
.hero-stars { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-stars svg { position: absolute; color: var(--yellow); filter: drop-shadow(0 0 7px currentColor); }
.hero-stars svg:nth-of-type(2n) { color: var(--cream); }
.hero-stars svg path { fill: currentColor; }
.hero-stars .float { animation: sl-hero-float 4s ease-in-out infinite; }
.hero-stars .float2 { animation: sl-hero-float 5.5s ease-in-out infinite -1.5s; }
.hero-stars .float3 { animation: sl-hero-float 3.5s ease-in-out infinite -2s; }
@keyframes sl-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ============================================================
   STARLITE — MOBILE DRAWER: spring slide-in (tuned) + chasing bulb strip.
   Keys off the shared .section--header.nav-open toggle (theme.js). The left
   edge of the drawer gets a glowing dashed "bulb" strip that chases downward.
   ============================================================ */
@media (max-width: 1024px) {
  /* Spring slide-in from the right (105% so the drop-shadow clears too). */
  .nav { transform: translateX(105%); transition: transform .42s cubic-bezier(.22, 1, .36, 1); }
  .section--header.nav-open .nav { transform: translateX(0); }
  .nav-overlay { transition: opacity .35s ease, visibility .35s ease; }
  /* Staggered link reveal (first link .12s, +.06s each). First .nav child is
     the drawer head, so the links start at :nth-child(2). */
  .section--header.nav-open .nav .nav__link { animation: sl-drawer-in .5s cubic-bezier(.22, 1, .36, 1) both; }
  .section--header.nav-open .nav .nav__link:nth-child(2) { animation-delay: .12s; }
  .section--header.nav-open .nav .nav__link:nth-child(3) { animation-delay: .18s; }
  .section--header.nav-open .nav .nav__link:nth-child(4) { animation-delay: .24s; }
  .section--header.nav-open .nav .nav__link:nth-child(5) { animation-delay: .30s; }
  .section--header.nav-open .nav .nav__link:nth-child(6) { animation-delay: .36s; }
  .section--header.nav-open .nav .nav__link:nth-child(7) { animation-delay: .42s; }
  .section--header.nav-open .nav .nav__link:nth-child(n+8) { animation-delay: .48s; }
  /* Chasing-bulb strip down the drawer's front (left) edge. */
  .nav { position: fixed; }
  .nav::before {
    content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
    background: repeating-linear-gradient(180deg, var(--yellow) 0 10px, transparent 10px 20px);
    box-shadow: 0 0 12px rgba(255, 210, 63, .6);
    animation: sl-bulb-chase 1.6s linear infinite;
  }
}
@keyframes sl-bulb-chase { from { background-position-y: 0; } to { background-position-y: 20px; } }

/* Reduced motion: freeze the new decorative animations (keep end-states). */
@media (prefers-reduced-motion: reduce) {
  .hero-stars svg,
  .nav::before,
  .nav { animation: none !important; }
}

/* ============================================================
   STARLITE — HERO headline per the designer proof (script + letter tiles).
   The h1's *em* is the cream Kaushan script line with a soft cream glow; every
   non-em word renders as per-letter lit SIGN TILES (Alfa Slab letter in
   orange-red on a glowing gold tile with a cream border) — markup from
   slot_em_letter_tiles(). Hero eyebrow goes cream with gold ★ bookends
   (hero ONLY — section eyebrows elsewhere stay teal). The old hero__sub
   "one continuous gold bar" letter-sign is retired back to a quiet sub line
   (the tiles ARE the sign now). END-of-file so these win the cascade.
   ============================================================ */
/* Eyebrow: cream DM Mono, gold star bookends */
.hero__eyebrow { color: var(--cream); }
.hero__eyebrow::before, .hero__eyebrow::after { color: var(--yellow); }

/* Script line: cream Kaushan with a soft cream glow, on its own line */
.hero__title { font-size: clamp(2.7rem, 6.5vw, 5rem); line-height: 1.06; }
.hero__title em {
  display: block;
  font-family: var(--font-script);
  font-style: normal;
  color: var(--cream);
  text-shadow: var(--glow-cream);
  margin: 0 0 .02em;
}

/* The block word: one glowing tile per letter; words wrap as whole units */
.hero__title .tile-word { display: inline-flex; flex-wrap: nowrap; gap: .12em; vertical-align: top; margin: .1em .22em .1em 0; }
.hero__title .tile {
  display: inline-grid;
  place-items: center;
  min-width: 1.18em;
  font-family: var(--font-head); /* Alfa Slab One */
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.45rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: #e8501c;
  background: var(--yellow);
  border: 3px solid var(--cream);
  border-radius: 12px;
  padding: .16em .12em .1em;
  box-shadow: var(--glow-yellow);
  text-shadow: none;
}

/* Sub returns to a quiet inviting line — the tiles are the letter-sign now */
.hero__sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
  margin: .9rem 0 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}
.hero__sub:hover { transform: none; }

/* Mobile: smaller tiles that wrap cleanly to a second row */
@media (max-width: 700px) {
  .hero__title .tile-word { gap: .1em; }
  .hero__title .tile { font-size: clamp(1.15rem, 5.4vw, 1.6rem); border-width: 2px; border-radius: 8px; }
}

/* ============================================================
   HERO ARRANGEMENT (operator-annotated revision, 2026-07-02):
   content cluster hugs the LEFT of the full container width;
   the floating star cluster moves from upper-left to the upper
   middle-right, above/right of the script line.
   ============================================================ */
/* was 640px — that centered the whole cluster. width:100% matters: the hero is a grid and
   the container's auto margins otherwise shrink it to fit-content and re-center it. */
.hero__inner { max-width: var(--maxw); width: 100%; }
.hero__inner > * { max-width: 640px; }            /* copy column stays readable, hugs the left  */
.hero__inner .hero__cta { max-width: none; }      /* buttons row can breathe */
/* star cluster → upper middle-right (green zone) */
.section--hero::after { left: 34%; top: 8%; }
@media (max-width: 900px) { .section--hero::after { left: auto; right: 4%; top: 6%; } }

/* ============================================================
   LEAGUES — long schedules scroll in place (operator request,
   2026-07-02): the list caps at the feature column's height and
   a "Scroll for more" fade-hint sits over its bottom edge
   (revealed by theme.js only while there is more below).
   ============================================================ */
.league-scroll { position: relative; min-width: 0; }
.league-list { max-width: none; max-height: 640px; overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; scrollbar-width: thin; scrollbar-color: var(--teal) transparent; }
.league-list::-webkit-scrollbar { width: 8px; }
.league-list::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 9999px; }
.league-list::-webkit-scrollbar-track { background: transparent; }
.league-scroll-hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2.4rem 0 .55rem; text-align: center; pointer-events: none;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: var(--teal); text-shadow: 0 0 10px rgba(35,202,187,.6);
  background: linear-gradient(180deg, rgba(15,10,32,0) 0%, rgba(15,10,32,.92) 70%); border-radius: 0 0 14px 14px; }

/* Bigger brand logo (operator request 2026-07-02) — the 2-row header grid gives
   the brand column status+name+city of height, so the mark can fill it. */
.brand__logo { width: 56px; height: 56px; }
@media (min-width: 1025px) { .section--header .brand__logo { width: 68px; height: 68px; } }
@media (max-width: 700px) { .brand__logo { width: 42px; height: 42px; } }

/* ============================================================
   Drawer consistency (operator fix 2026-07-02): every mobile menu
   item gets ONE style. Three styles were leaking in: the mono
   typography re-skin shrank top-level links to .82rem while the
   flattened "And More" items kept 1.15rem, and the legacy
   .nav__link:last-child gradient pill (pre .nav__link--cta) hit
   the dropdown's last item (e.g. GALLERY). Only the real CTA
   (.nav__link--cta, FIND US) keeps the gold pill.
   ============================================================ */
.nav__more-menu .nav__link:last-child { background: none; color: var(--cream); font-weight: 400; }
@media (max-width: 1024px) {
  .section--header .nav > .nav__link,
  .section--header .nav__more-menu .nav__link {
    font-size: 1.02rem; font-weight: 400; letter-spacing: .06em;
    padding: .75rem 0; width: 100%; border-radius: 0; background: none;
    color: var(--cream); border-bottom: 1px solid rgba(255,255,255,.12);
    margin: 0; text-align: left;
  }
  .section--header .nav > .nav__link--cta {
    background: var(--gold); color: var(--ink); border-radius: 9999px;
    border-bottom: 0; text-align: center; margin-top: .9rem; padding: .75rem 1.3rem;
    font-weight: 700;
  }
}

/* Powered-by line centers across the WHOLE page (it no longer sits in a .container). */
.footer__powered { width: 100%; padding: 0 1.5rem; }

/* Overflow mini-cards — capped sections surface extras instead of dropping them (brzportal#45/#48). */
.overflow-cards { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1rem; }
.overflow-cards--4up, .overflow-cards--6up { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .overflow-cards--4up { grid-template-columns: repeat(4, 1fr); } .overflow-cards--6up { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .overflow-cards--6up { grid-template-columns: repeat(6, 1fr); } }
.overflow-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; }
.overflow-card__title { font-family: var(--font-head); color: var(--gold); font-size: .92rem; line-height: 1.2; margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .02em; }
.overflow-card__desc { color: var(--muted); font-size: .82rem; line-height: 1.45; margin: 0; }
.overflow-note { margin: 1.1rem 0 0; color: var(--gold); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.parties-feature__more { margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.parties-feature__more-label { margin: 0 0 .6rem; color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* ---- More party packages: full descriptions, taller cards, two-row scroll (brzportal#61) ---- */
.parties-more-scroll { position: relative; min-width: 0; }
.parties-more-cards { max-height: 30rem; overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; align-content: start; }
.parties-more-cards .overflow-card { padding: 1.1rem 1.25rem; }
.parties-more-cards .overflow-card__desc { display: block; overflow: visible; text-overflow: clip; -webkit-line-clamp: none; }

/* Owner-chosen badge size (brzportal#67). A scale factor, not pixels — each skin keeps its own
   type scale and the badge stays inside the design instead of being set to something that
   breaks the photo composition. Medium is the theme's own size. */
.parties-feature__price--small { --badge-scale: .78; }
.parties-feature__price--large { --badge-scale: 1.34; }