/* ============================================================
   BACK TO SCHOOL skin — chalkboard-green panels alternating with ruled
   notebook paper. Luckiest Guy display + Fredericka the Great chalk
   annotations + Titan One numerals + Inter body; school-bus yellow and
   schoolhouse red accents on hard-shadow sticker buttons.
   Imported from the Claude Design project "Back to School Theme".
   Structure shares the canonical section vocabulary with the other skins;
   everything below the token block is this design's own treatment.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Fredericka+the+Great&family=Titan+One&family=Rock+Salt&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* paper */
  --cream: #f4f1e8;
  --cream-2: #f2ebd8;
  --paper: #fffdf7;
  --ruled: repeating-linear-gradient(to bottom, #f7f2e4 0 27px, rgba(46,109,180,.028) 27px 28px);
  /* chalkboard */
  --charcoal: #1e2a24;
  --charcoal-2: #243329;
  --board: #1e2a24;
  --board-2: #243329;
  --board-deep: #182019;
  --board-ink: #141b15;
  --chalk-line: rgba(244,241,232,.16);
  /* ink */
  --ink: #22201b;
  --ink-2: #4a463d;
  --ink-3: #7a7466;
  /* accents */
  --red: #d7362f;
  --red-2: #a9241f;
  --yellow: #ffc22e;
  --yellow-2: #e8a90f;
  --line: rgba(34,32,27,.12);
  --line-dark: rgba(244,241,232,.14);
  --maxw: 1200px;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(34,32,27,.14);
  --hard: 0 4px 0 rgba(34,32,27,.30);
  --font-head: 'Luckiest Guy', cursive;
  --font-chalk: 'Fredericka the Great', cursive;
  --font-num: 'Titan One', cursive;
  --font-hand: 'Rock Salt', cursive;
  --font-body: 'Inter', system-ui, sans-serif;
  --anim: .2s ease;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); line-height: 1.6; }
html { scroll-behavior: smooth; }
a { color: var(--red); text-decoration: none; }
a:not(.btn):hover { color: var(--red-2); }
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(--cream-2); }
.section__head { margin-bottom: 2.5rem; }
.section__eyebrow { display: inline-block; color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; margin: 0 0 .85rem; }
.section__title { font-family: var(--font-head); font-weight: 400; color: var(--ink); font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; margin: 0 0 .75rem; }
.section__intro { color: var(--ink-2); font-size: 1.1rem; max-width: 60ch; margin: 0; }

/* ---- Buttons ---- */
.btn { display: inline-block; font-family: var(--font-body); font-weight: 800; letter-spacing: .01em; font-size: .95rem; padding: .85rem 1.6rem; border-radius: 9999px; border: 2px solid transparent; cursor: pointer; transition: transform var(--anim), box-shadow var(--anim), background var(--anim); }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 8px 20px rgba(209,45,45,.3); }
.btn--primary:hover { background: var(--red-2); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(209,45,45,.42); }
.btn--phone { background: var(--yellow); color: var(--ink); }
.btn--phone:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ---- Header (dark) ---- */
.section--header { position: sticky; top: 0; z-index: 50; background: var(--charcoal); padding: 1rem 0; border-bottom: 3px solid var(--yellow); }
.section--header:nth-of-type(even) { background: var(--charcoal); }
.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); line-height: 1; }
.brand__city { font-size: .7rem; color: rgba(250,243,227,.6); 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: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.nav__link:hover { color: var(--yellow); }
.nav__link:last-child { background: var(--red); color: #fff; border-radius: 9999px; padding: .5rem 1.1rem; }
.header__phone { color: var(--yellow); font-weight: 800; margin-left: 1rem; }

/* ---- Hero ---- */
.section--hero { position: relative; overflow: hidden; min-height: clamp(560px, 86vh, 840px); display: grid; align-items: center; color: #fff; background: var(--charcoal); }
.section--hero:nth-of-type(even) { background: var(--charcoal); }
.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(20,23,28,.95) 0%, rgba(20,23,28,.78) 45%, rgba(20,23,28,.32) 100%); }
.section--hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 660px; }
.hero__eyebrow { display: inline-block; background: var(--red); color: #fff; border-radius: 9999px; padding: .35rem .9rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 1.1rem; }
.hero__title { font-family: var(--font-head); font-weight: 400; font-size: clamp(2.75rem, 7.5vw, 5.5rem); line-height: 1.02; color: #fff; margin: .25rem 0; }
.hero__sub { color: rgba(255,255,255,.9); font-size: 1.2rem; max-width: 46ch; }
.hero__rating { color: var(--yellow); font-weight: 800; }
.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: 205px; height: 205px; font-family: var(--font-head); font-size: 1.9rem; color: var(--ink); background: var(--yellow); 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 45px rgba(245,180,0,.55); animation: kr-pop .5s ease-out both; }
.hero-burst.kapow { animation: kr-kapow .5s ease-out; }
.floaty { position: absolute; z-index: 4; font-family: var(--font-head); font-size: 2.6rem; color: var(--yellow); text-shadow: 2px 2px 0 var(--ink); pointer-events: none; animation: kr-float 1s ease-out forwards; }
@media (max-width: 900px) { .hero-burst { width: 138px; height: 138px; font-size: 1.4rem; 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%23faf3e3%27%20stroke%3D%27%2314171c%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%23d12d2d%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%23faf3e3%27%20stroke%3D%27%2314171c%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%23d12d2d%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%23faf3e3%27%20stroke%3D%27%2314171c%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M15%2023%20H25%20M13%2031%20H27%27%20stroke%3D%27%23d12d2d%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: kr-pins-in .6s ease-out both; }
@media (max-width: 900px) { .section--hero::after { width: 240px; height: 200px; right: 0; } }
@keyframes kr-pins-in { 0% { opacity: 0; transform: translateY(-50%) scale(.6) rotate(-8deg); } 100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); } }

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

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

/* ---- Offerings ---- */
.offerings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.25rem; }
.offering { padding: 1.5rem; }
.offering__title { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); margin: 0 0 .5rem; }
.offering__desc { color: var(--ink-2); margin: 0 0 1rem; font-size: .95rem; }
.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: 700; }
.price-row__value { font-family: var(--font-head); font-size: 1.4rem; color: var(--red); }

/* ---- 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.25rem; }
.party { padding: 1.5rem; }
.party__name { display: block; font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); }
.party__price { display: inline-block; font-family: var(--font-head); font-size: 1.4rem; color: var(--red); margin: .35rem 0; }
.party__detail { display: block; color: var(--ink-2); }
.party__includes { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--ink-2); }

/* ---- Leagues ---- */
.leagues__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.25rem; 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; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.league__name { font-weight: 800; color: var(--ink); }
.league__day { color: var(--ink-3); }
.league__time { margin-left: auto; font-family: var(--font-head); color: var(--red); }

/* League feature (photo + "why league up" + stats + CTA) — playful paper card */
.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(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
@media (min-width: 921px) { .league-feature { position: sticky; top: 90px; } }
.league-feature__photo { margin: -1.5rem -1.5rem 1.25rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.league-feature__photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.league-feature__photo figcaption { padding: .7rem 1rem 0; font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.league-feature__title { font-family: var(--font-head); font-weight: 400; color: var(--ink); font-size: 1.5rem; line-height: 1.05; margin: 0 0 .6rem; }
.league-feature__body { color: var(--ink-2); margin: 0 0 1.35rem; font-size: .98rem; }
.league-feature__stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 0 0 1.35rem; }
.league-stat { display: flex; flex-direction: column; }
.league-stat__value { font-family: var(--font-head); font-weight: 400; color: var(--red); font-size: 2rem; line-height: 1; }
.league-stat__label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-top: .4rem; }
.league-feature__cta { display: block; width: 100%; text-align: center; }
@media (max-width: 820px) { .leagues-layout { grid-template-columns: 1fr; } }

/* ---- Bar & lounge / Cosmic (dark bands) ---- */
.section--barlounge, .section--cosmic { background: var(--charcoal); color: var(--cream); }
.section--barlounge .section__title, .section--cosmic .section__title { color: var(--cream); }
.section--barlounge .section__intro, .section--cosmic .section__intro, .barlounge__details { color: rgba(250,243,227,.72); }
.barlounge__photos, .cosmic__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.barlounge__photo, .cosmic__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }

/* ---- Food service (menu) — dark ---- */
.section--foodservice { background: var(--charcoal); color: var(--cream); }
.section--foodservice .section__title { color: var(--cream); }
.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); 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: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--cream); background: var(--charcoal-2); border: 1px solid var(--line-dark); border-radius: 9999px; padding: .5rem 1.1rem; cursor: pointer; transition: background var(--anim); }
.menu-tab.is-active { background: var(--red); color: #fff; 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); color: var(--yellow); font-size: 1.2rem; margin: 0 0 1.25rem; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1.25rem; }
.menu-item { background: var(--charcoal-2); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; transition: transform var(--anim); }
.menu-item:hover { transform: translateY(-4px); }
.menu-item__photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.menu-item__name { font-weight: 800; color: var(--cream); margin: .75rem .85rem .25rem; }
.menu-item__desc { color: rgba(250,243,227,.65); font-size: .85rem; margin: 0 .85rem .5rem; }
.menu-item__price { display: inline-block; font-family: var(--font-head); color: var(--yellow); 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-dark); padding: .6rem 0; }
.menu-list__name { font-weight: 700; color: var(--cream); }
.menu-list__meta { color: rgba(250,243,227,.6); font-size: .8rem; }
.menu-list__price { margin-left: auto; font-family: var(--font-head); color: var(--yellow); }

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

/* ---- Reviews ---- */
.review-sources { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; color: var(--ink-2); }
.review-source__num { font-family: var(--font-head); color: var(--red); font-size: 1.5rem; margin-right: .25rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.25rem; }
.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(--yellow); }
.review__quote { margin: .5rem 0 1rem; color: var(--ink); }
.review__author { font-weight: 800; display: block; color: var(--red); }
.review__source, .review__date { font-size: .8rem; color: var(--ink-3); }

/* ---- 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 (yellow band) ---- */
.section--giftcards { background: var(--yellow); }
.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,.5); border-radius: var(--radius); padding: .4rem; }
.giftcard__name { font-family: var(--font-head); color: var(--ink); }
.section--giftcards .section__title, .section--giftcards .section__eyebrow, .section--giftcards .section__intro { color: var(--ink); }

/* ---- Gift cards — rich layout (denom pills + CTA + branded card) ---- */
.giftcard--rich { text-align: left; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; justify-items: stretch; }
.giftcard__intro { max-width: 44ch; }
.giftcard__denoms { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.4rem 0 1.25rem; }
.giftcard__denom { font-family: var(--font-head); font-weight: 400; font-size: .95rem; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 9999px; padding: .45rem 1.15rem; box-shadow: 0 4px 0 rgba(20,23,28,.9); }
.giftcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: .25rem; }
.section--giftcards .giftcard__cta { background: var(--red); color: #fff; box-shadow: 0 8px 20px rgba(209,45,45,.32); }
.section--giftcards .giftcard__cta:hover { background: var(--red-2); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(209,45,45,.42); }
.giftcard__note { font-family: var(--font-body); font-weight: 700; color: var(--ink-2); font-size: .9rem; }

.giftcard__preview { display: flex; justify-content: center; }
.giftcard__card { position: relative; overflow: hidden; width: 100%; max-width: 400px; aspect-ratio: 1.6/1; background: var(--charcoal); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(20,23,28,.3); padding: 1.4rem 1.55rem; display: flex; flex-direction: column; color: var(--cream); }
.giftcard__card::after { content: ""; position: absolute; right: -46px; top: -46px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(245,180,0,.28), transparent 70%); pointer-events: none; }
.giftcard__card-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.giftcard--rich .giftcard__logo { width: 46px; height: 46px; padding: .3rem; background: var(--paper); border-radius: 10px; }
.giftcard__card-label { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--yellow); }
.giftcard__card-amount { position: relative; z-index: 1; font-family: var(--font-head); font-weight: 400; font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1; color: var(--yellow); margin-top: auto; }
.giftcard__card-foot { position: relative; z-index: 1; font-family: var(--font-body); font-size: .82rem; color: rgba(250,243,227,.75); margin-top: .5rem; }
.giftcard--rich .giftcard__name { font-family: var(--font-head); color: var(--cream); font-size: .95rem; }
@media (max-width: 820px) {
  .giftcard--rich { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .giftcard--rich .giftcard__intro { margin-left: auto; margin-right: auto; }
  .giftcard__denoms, .giftcard__actions { justify-content: center; }
  .giftcard__preview { order: -1; }
}

/* ---- CTA (red band) ---- */
.section--cta { background: var(--red); text-align: center; }
.cta__inner { display: grid; justify-items: center; gap: 1rem; }
.cta__title { font-family: var(--font-head); color: #fff; font-size: clamp(2.2rem,7vw,4rem); margin: 0; }
.cta__sub { color: rgba(255,255,255,.9); font-size: 1.15rem; }
.cta__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.section--cta .btn--primary { background: var(--yellow); color: var(--ink); }
.section--cta .btn--primary:hover { background: #fff; }

/* ---- Footer (dark) ---- */
.section--footer { background: var(--charcoal); color: var(--cream); border-top: 3px solid var(--yellow); }
.section--footer:nth-of-type(even) { background: var(--charcoal); }
.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); color: var(--yellow); font-size: 1rem; margin: 0 0 .75rem; }
.footer__map { width: 100%; border-radius: 10px; margin-bottom: .75rem; }
.footer__tag, .footer__address { color: rgba(250,243,227,.65); }
.footer__phone, .footer__directions { color: var(--yellow); font-weight: 800; display: inline-block; margin-top: .5rem; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.footer__links a { color: rgba(250,243,227,.85); }
.footer__links a:hover { color: var(--yellow); }
.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-dark); font-size: .8rem; color: rgba(250,243,227,.55); }

/* ---- Scroll reveal ---- */
.section.in-view:not(.section--header):not(.section--hero) { animation: kr-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(--charcoal); border-left: 1px solid var(--line-dark); 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 kr-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 kr-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 kr-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 kr-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: 74vh; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================
   KRUNKLE — strike-era section additions (light theme; dark header/cosmic/footer, RED find-us).
   Later rules override the now-dead old ones (party-list, cosmic photos, gallery grid…).
   ============================================================ */

/* Hero: drop the off-design burst + flying pins (now a photo hero + marquee). */
.hero-burst, .floaty { display: none; }
.section--hero::after { content: none; }
.hero__title em { font-style: italic; -webkit-text-fill-color: var(--yellow); }

/* Hero deals marquee */
.hero-marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; overflow: hidden; background: var(--yellow); 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: 1rem; letter-spacing: .02em; animation: kr-marquee 26s linear infinite; }
.hero-marquee__track span { display: inline-flex; align-items: center; gap: 2.5rem; }
@keyframes kr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Live hours status (header / hero dark → light; find-us card is white → dark text) */
.hours-status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .9rem; color: #fff; white-space: nowrap; }
.hours-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255,255,255,.5); flex: none; }
.hours-status.is-open::before { background: #2bbd6e; box-shadow: 0 0 0 3px rgba(43,189,110,.25); }
.hours-status.is-closed::before { background: var(--yellow); }
.hours-status--badge { font-size: .8rem; padding: .35rem .75rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.section--hero .hours-status { margin-top: 1.1rem; }
.findus__card .hours-status { color: var(--ink); margin: 0 0 .85rem; }
.findus__card .hours-status::before { background: var(--ink-3); }
.findus__card .hours-status.is-open::before { background: #1f9d57; }
.findus__card .hours-status.is-closed::before { background: var(--red); }
.findus__hours-row.is-today { background: rgba(245,180,0,.2); border-radius: 7px; margin: 0 -.6rem; padding: .15rem .6rem .5rem; }
.findus__hours-row.is-today span { color: var(--red); font-weight: 800; }

/* Header utility + nav More dropdown + reserve pill (charcoal header) */
.header__utility { display: flex; align-items: center; gap: 1.1rem; }
.brand__status, .nav__head { display: none; }
.header__phone { color: var(--yellow); font-weight: 800; white-space: nowrap; }
.nav__link--cta { background: var(--red); color: #fff; border-radius: 9999px; padding: .5rem 1.2rem; font-weight: 800; }
.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(--charcoal-2); border: 1px solid var(--line-dark); 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; color: var(--cream); }
.nav__more-menu .nav__link:last-child { background: none; color: var(--cream); padding: .55rem .65rem; }
.nav__more-menu .nav__link:hover { background: rgba(255,255,255,.08); color: var(--yellow); }

/* Offering / deal / amenity card photos (light cards) */
.offering { 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(--red); color: #fff; font-family: var(--font-head); padding: .2rem .7rem; border-radius: 6px; }
.offering__cta { color: var(--red); font-weight: 800; 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(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; overflow: hidden; border-top: 4px solid var(--yellow); }
.amenity__name { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); margin: 0 0 .4rem; }
.amenity__desc { color: var(--ink-3); 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 (light) */
.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(--red); color: #fff; text-align: center; line-height: 1; filter: drop-shadow(0 8px 18px rgba(209,45,45,.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.5rem * 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(--yellow); color: var(--ink); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .02em; font-size: .8rem; 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,.2); }
.parties-feature__lead { color: var(--ink-2); 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(--ink); font-weight: 700; }
.parties-feature__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--red); 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(--red); 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 (dark; overrides the old photo grid) */
.section--cosmic { position: relative; overflow: hidden; padding: 0; background: var(--charcoal); }
.cosmic__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; z-index: 0; }
.section--cosmic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(20,23,28,.94) 0%, rgba(20,23,28,.55) 45%, rgba(209,45,45,.32) 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(--yellow); text-transform: uppercase; letter-spacing: .24em; font-weight: 800; font-size: .8rem; margin: 0 0 .6rem; }
.cosmic__mark { margin: 0; line-height: .82; font-family: var(--font-head); }
.cosmic__mark-top { display: block; font-size: clamp(2.6rem, 8vw, 5.5rem); }
.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: #ff7a3c; }
.cosmic__letter:nth-child(3) { color: var(--yellow); }
.cosmic__letter:nth-child(4) { color: #4ade5b; }
.cosmic__letter:nth-child(5) { color: #38bdf8; }
.cosmic__letter:nth-child(6) { color: #a855f7; }
.cosmic__mark-bottom { display: block; color: var(--cream); font-size: clamp(1.8rem, 5.5vw, 3.6rem); letter-spacing: .12em; }
.cosmic__sub { color: rgba(250,243,227,.78); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; margin: .8rem 0 0; }
.cosmic__facts dt { color: var(--yellow); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 800; margin: 0 0 .3rem; }
.cosmic__facts dd { color: var(--cream); font-weight: 800; 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 (dark section) */
.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 + overlay (light section) */
.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(15,12,8,.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,.12); 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: #fff; }

/* Find Us (the cta section is RED → white cards with dark text) */
.findus { display: grid; grid-template-columns: 1fr; gap: 2rem; text-align: left; }
@media (min-width: 920px) { .findus { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.findus__map { border-radius: var(--radius); overflow: hidden; border: 2px solid rgba(255,255,255,.35); }
.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(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; color: var(--ink); }
.findus__card-title { font-family: var(--font-head); font-size: 1.1rem; color: var(--red); margin: 0 0 .7rem; }
.findus__address { color: var(--ink); margin: 0 0 .5rem; line-height: 1.5; }
.findus__note--link { color: var(--red); font-weight: 800; 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 var(--line); padding-bottom: .45rem; color: var(--ink); font-size: .92rem; }
.findus__hours-row span:last-child { font-weight: 800; }
.findus__contact { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; color: var(--ink-3); }
.findus__contact a { color: var(--red); font-weight: 800; }

/* Footer logo + legal links (charcoal) */
.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: rgba(250,243,227,.6); }
.footer__social a:hover { color: var(--yellow); }
.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: rgba(250,243,227,.6); }
.footer__legal-links a:hover { color: var(--yellow); }

/* Hide the status placeholder until the client fills it */
[data-hours-status]:empty { display: none; }

/* ============================================================
   KRUNKLE — proof-match pass: cream header, checkerboard edge strips,
   centered stats, cream icon-amenities, + the two NEW sections (FAQ, TEAM).
   Appended last so these win the cascade.
   ============================================================ */

/* Signature checkerboard token: alternating red/yellow dashes, section bg shows
   through the gaps (dark on dark bands, cream on cream — exactly like the proof). */
:root { --checker: repeating-linear-gradient(90deg, var(--red) 0 30px, transparent 30px 42px, var(--yellow) 42px 72px, transparent 72px 84px); }

/* One dashed strip at the TOP edge of every section (except header/hero) =
   a single checkerboard divider per boundary, top + bottom of the dark bands. */
.section:not(.section--header):not(.section--hero) { position: relative; }
.section:not(.section--header):not(.section--hero)::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: var(--checker); z-index: 6; pointer-events: none;
}

/* ---- Header → cream bar (proof) ---- */
.section--header { background: var(--cream); border-bottom: 1px solid var(--line); }
.section--header:nth-of-type(even) { background: var(--cream); }
.section--header .brand__name { color: var(--ink); }
.section--header .brand__city { color: var(--ink-3); }
.section--header .nav-toggle span { background: var(--ink); }
.section--header .header__phone { color: var(--red); }
/* Header live-status pill goes dark-on-cream */
.section--header .header__utility .hours-status { color: var(--ink-2); }
.section--header .header__utility .hours-status--badge { border-color: var(--line); }
.section--header .header__utility .hours-status::before { background: var(--ink-3); }
.section--header .header__utility .hours-status.is-open::before { background: #1f9d57; }
.section--header .header__utility .hours-status.is-closed::before { background: var(--red); }
/* Desktop inline nav links → dark; the red VISIT-US pill + dark "More" dropdown keep their colors */
.section--header .nav > .nav__link { color: var(--ink); font-weight: 700; }
.section--header .nav > .nav__link:hover { color: var(--red); }
.section--header .nav__more-toggle { color: var(--ink); }
.section--header .nav__link--cta { color: #fff; }
.section--header .nav__link--cta:hover { color: #fff; }

/* ---- Stats → centered values with thin vertical dividers (proof) ---- */
.stats__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: center; }
.stat { border-left: 0; text-align: center; padding: .5rem 1rem; position: relative; }
.stat:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 62%; background: rgba(255, 255, 255, .14); }
.stat__value { font-size: clamp(2.6rem, 5vw, 3.4rem); }

/* ---- Amenities → white section + cream icon cards (proof) ---- */
.section--amenities { background: var(--paper); }
.section--amenities:nth-of-type(even) { background: var(--paper); }
.amenity { background: var(--cream); border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.amenity:hover { transform: translateY(-4px); box-shadow: var(--shadow); transition: transform var(--anim), box-shadow var(--anim); }
/* The design proto used a red icon tile with no photo, which meant a center's own
   amenity photography was rendered into the markup and then hidden (brzportal#59).
   A center's real photo beats a generic icon, so the card leads with the photo,
   bled to the card edges against THIS skin's 1.5rem padding. */
.amenity__media { margin: -1.5rem -1.5rem 1rem; }

/* ---- FAQ (NEW) — white section, cream accordion rows ---- */
.section--faq { background: var(--paper); }
.section--faq:nth-of-type(even) { background: var(--paper); }
.section--faq .section__head { text-align: center; }
.section--faq .section__intro { margin-left: auto; margin-right: auto; }
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .9rem; overflow: hidden; }
.faq-item__q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.5rem; cursor: pointer; font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q-text { flex: 1; }
.faq-item__chevron { color: var(--red); font-size: .95rem; line-height: 1; flex: none; transition: transform var(--anim); }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__a { padding: 0 1.5rem 1.25rem; color: var(--ink-2); line-height: 1.6; max-width: 72ch; }

/* ---- TEAM (NEW) — cream section, 4 portrait cards ---- */
.section--team { background: var(--cream); }
.section--team:nth-of-type(even) { background: var(--cream); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.team-card { background: transparent; }
.team-card__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1rem; aspect-ratio: 3 / 4; }
.team-card__photo { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { font-family: var(--font-body); font-weight: 800; font-size: 1.15rem; color: var(--ink); margin: 0 0 .2rem; }
.team-card__role { color: var(--ink-3); font-size: .92rem; margin: 0; }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }

/* ---- Mobile: drawer nav links stay cream on the dark off-canvas panel ---- */
@media (max-width: 1024px) {
  .section--header .nav > .nav__link { color: var(--cream); }
  .section--header .nav > .nav__link:hover { color: var(--yellow); }
}

/* ============================================================
   Operator fixes (2026-07-02): header → strike's 2-row grid
   (one status, over the name; phone top-right; nav row below);
   hero copy hugs the container LEFT (the 660px cap made the
   hero grid shrinkwrap + center the whole cluster).
   ============================================================ */
.header__utility { display: flex; align-items: center; gap: 1.1rem; }
.nav__head { display: none; }
/* The header is cream — the base .hours-status is white (for the dark hero). */
.brand__status { display: inline-flex; margin: 0 0 .1rem; font-size: .78rem; color: var(--ink); }
.brand__status::before { background: var(--ink-3); }
.brand__status.is-open::before { background: #1f9d57; box-shadow: 0 0 0 3px rgba(31,157,87,.18); }
.brand__status.is-closed::before { background: var(--red); }
.header__utility .hours-status--badge { display: none; }
@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; flex-wrap: nowrap; }
}
.hero__inner { max-width: var(--maxw); width: 100%; }
.hero__inner > * { max-width: 660px; }
/* Header port follow-up: stack status above the name (brand__text column) and stop
   nav-link / phone text from wrapping inside their pills. */
.brand { display: flex; align-items: center; gap: .75rem; }
.brand__text { display: flex; flex-direction: column; align-items: flex-start; }
.nav__link, .header__phone, .brand__status { white-space: nowrap; }

/* 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): the mobile .nav__link:last-child
   center/margin rule leaks onto the "And More" dropdown's last item (GALLERY) —
   keep dropdown items left-aligned like their siblings. */
@media (max-width: 1024px) {
  .section--header .nav__more-menu .nav__link:last-child { margin-top: 0; text-align: left; }
}

/* 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(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; }
.overflow-card__title { font-family: var(--font-head); color: var(--ink); font-size: .92rem; line-height: 1.2; margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .02em; }
.overflow-card__desc { color: var(--ink-2); font-size: .82rem; line-height: 1.45; margin: 0; }
.overflow-note { margin: 1.1rem 0 0; color: var(--red); 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(--ink-2); 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; }

/* ============================================================
   BACK TO SCHOOL — design layer
   Everything above is the shared canonical section vocabulary; everything below is
   this design's own treatment and wins on cascade order.

   Section backgrounds are assigned BY NAME, never by :nth-of-type. Owners reorder
   sections (brzportal#21), and positional striping would repaint the whole page when
   they drag one card — a paper section must stay paper wherever it lands.
   ============================================================ */

/* Everything below this marker is this design's own layer; everything above is the shared
   canonical section vocabulary. Tooling uses the custom property to find the boundary. */
:root { --bts-design-layer: 1; }

body { background: var(--cream); font-family: var(--font-body); color: var(--ink); }

/* ---- Paper vs chalkboard ---- */
.section { padding: 5.5rem 0; position: relative; }
/* The header is a .section too but is not a content band — without this it inherits the
   section rhythm and the sticky bar becomes 88px top AND bottom (a 250px header). */
/* Sticky is restored explicitly: the design layer's `.section { position: relative }` matches
   the header too and, at equal specificity but later in the file, silently beat the base's
   `.section--header { position: sticky }`. The nav scrolled away with the page. */
.section--header { padding: .9rem 0; position: sticky; top: 0; z-index: 50; }
.section:where(:nth-of-type(even)) { background: transparent; }   /* reset positional striping */
.section--offerings, .section--foodservice, .section--reviews, .section--giftcards {
  background: var(--ruled); color: var(--ink);
  border-top: 1px solid rgba(34,32,27,.07);
}
.section--pricing, .section--leagues, .section--thisweek, .section--photogallery { background: var(--board); color: var(--cream); }
.section--parties, .section--amenities { background: var(--board-2); color: var(--cream); }
/* The red margin rule down a sheet of notebook paper. */
@media (min-width: 1100px) {
  .section--offerings::before, .section--foodservice::before, .section--reviews::before, .section--giftcards::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: max(2rem, calc(50% - var(--maxw) / 2 - 1.25rem));
    width: 2px; background: rgba(215,54,47,.28); pointer-events: none;
  }
}

/* ---- Display type ---- */
.hero__title, .section__title, .cosmic__title, .cta__title, .brand__name,
.offering__title, .party__name, .deal__title, .amenity__name, .menu-category__title,
.league-feature__title, .giftcard__name, .findus__card-title, .overflow-card__title, .footer__brand-name {
  font-family: var(--font-head); font-weight: 400; letter-spacing: .015em; line-height: 1.02;
}
.section__title { font-size: clamp(2rem, 4.6vw, 3.25rem); color: var(--ink); }
.offering__title, .party__name, .deal__title, .amenity__name, .menu-category__title,
.league-feature__title, .findus__card-title, .overflow-card__title { font-size: clamp(1.25rem, 2.4vw, 1.875rem); }

/* The *…* accent is a chalk hand, tilted like it was written by wrist, not typeset.
   Named per surface so it can never come out chalk-on-chalk. */
.section__title em, .cta__title em, .cosmic__title em, .hero__title em {
  font-family: inherit; font-style: normal; color: inherit; display: inline-block;
  padding: 0 .16em; border: 3px solid var(--red); border-radius: 50% / 60%;
  transform: rotate(-2deg);
}
.section--hero .hero__title em, .section--cosmic .cosmic__title em, .section--cta .cta__title em,
.section--barlounge .section__title em, .section--stats em { border-color: var(--yellow); }

/* ---- Eyebrows: chalk annotation, not a tracked-out label ---- */
.section__eyebrow, .hero__eyebrow, .cosmic__eyebrow {
  font-family: var(--font-chalk); font-size: 1rem; font-weight: 400; text-transform: none;
  letter-spacing: .03em; color: var(--red); transform: rotate(-1.2deg); transform-origin: left center;
}
.section--hero .hero__eyebrow, .section--cosmic .cosmic__eyebrow, .section--cta .section__eyebrow,
.section--barlounge .section__eyebrow { color: var(--yellow); }
.section--hero .hero__sub, .section--cta .cta__sub, .section--barlounge .section__intro { color: rgba(244,241,232,.80); }
.section--hero .section__title, .section--cta .cta__title, .section--barlounge .section__title { color: var(--cream); }

/* ---- Sticker buttons: hard shadow, ink keyline, press-down on hover ---- */
.btn {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  font-size: .82rem; border-radius: 10px; border: 2px solid var(--ink); box-shadow: var(--hard);
  padding: .9rem 1.5rem;
}
.btn:hover { transform: translateY(3px); box-shadow: 0 1px 0 rgba(34,32,27,.30); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-2); }
.btn--phone { background: var(--yellow); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: none; }
.section--hero .btn--ghost, .section--cta .btn--ghost, .section--cosmic .btn--ghost {
  color: var(--cream); border-color: rgba(244,241,232,.55);
}

/* ---- Header: chalkboard with a bus-yellow chalk tray ---- */
.section--header, .section--header:nth-of-type(even) { background: var(--board); border-bottom: 4px solid var(--yellow); }
.brand__name { color: var(--cream); font-size: 1.35rem; }
.brand__city { font-family: var(--font-chalk); text-transform: none; letter-spacing: .02em; color: rgba(244,241,232,.62); font-size: .85rem; }
.nav__link { color: rgba(244,241,232,.85); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; }
.nav__link:hover { color: var(--yellow); }
.nav__link--cta { color: var(--ink); }

/* ---- Hero: board with chalk dust ---- */
.section--hero {
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(244,241,232,.07), transparent 60%),
    radial-gradient(90% 70% at 88% 92%, rgba(255,194,46,.07), transparent 60%),
    var(--board);
  color: var(--cream); border-bottom: 6px solid var(--yellow); padding: 6.5rem 0 5.5rem;
}
.hero__title { font-size: clamp(2.6rem, 7.2vw, 5.4rem); color: var(--cream); text-shadow: 0 4px 0 rgba(20,27,21,.55); }
.hero__eyebrow { font-size: 1.1rem; }
.hero__rating { color: rgba(244,241,232,.85); }

/* The burst is hidden by the canonical base until a skin opts in — a yellow paper star
   stuck on the board. */
.hero-burst {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  width: 118px; height: 118px; padding: 0; border: 0; cursor: pointer;
  background: var(--yellow); color: var(--ink);
  font-family: var(--font-head); font-size: .92rem; line-height: 1.05; letter-spacing: .02em;
  clip-path: polygon(50% 0%,61% 20%,83% 13%,80% 36%,100% 50%,80% 64%,83% 87%,61% 80%,50% 100%,39% 80%,17% 87%,20% 64%,0% 50%,20% 36%,17% 13%,39% 20%);
  transform: rotate(-8deg); transition: transform var(--anim);
}
.hero-burst:hover { transform: rotate(-8deg) scale(1.06); }

/* Open-today chalk tag (revealed by hours-status.js; the skin opts in). */
.hero__today {
  display: inline-block; font-family: var(--font-chalk); font-size: 1rem; color: var(--cream);
  border: 2px dashed rgba(244,241,232,.5); border-radius: 8px; padding: .3rem .8rem;
  transform: rotate(-1.2deg); margin-top: .9rem;
}
.hero__today[hidden] { display: none; }

/* ---- Marquee: school-bus stripe ---- */
.hero-marquee { background: var(--yellow); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: .7rem 0; }
.hero-marquee__item {
  font-family: var(--font-body); font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
  font-size: .84rem; color: var(--ink);
}
.hero-marquee__item::after { content: "✦"; margin: 0 1.6rem; color: var(--red); }

/* ---- Stats: board band, Titan One numerals in bus yellow ---- */
.section--stats, .section--stats:nth-of-type(even) { background: var(--board-2); padding: 3.25rem 0; border-bottom: 4px solid var(--yellow); }
.stat__value, .league-stat__value, .parties-feature__price, .reviews-panel__big, .review-source__num {
  font-family: var(--font-num); font-weight: 400; color: var(--yellow); letter-spacing: .01em;
}
.stat__value { font-size: clamp(2.2rem, 5vw, 3.25rem); line-height: 1; }
.stat__label { font-family: var(--font-chalk); font-size: .98rem; text-transform: none; letter-spacing: .02em; color: rgba(244,241,232,.75); }

/* ---- Cards: cut-out paper with an ink keyline ---- */
.offering, .party, .deal, .menu-item, .review, .amenity, .findus__card, .overflow-card,
.giftcard__card, .league-feature, .parties-feature, .reviews-panel, .menu-feature {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--hard);
}
.offering:hover, .deal:hover, .amenity:hover, .overflow-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(34,32,27,.24); }
.offering__badge, .review__tag, .deal__value, .party__price { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); font-weight: 800; }
.menu-tab { border: 2px solid var(--ink); border-radius: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .76rem; }
.menu-tab[aria-selected="true"], .menu-tab.is-active { background: var(--red); color: #fff; }
.price-row__value, .menu-list__price, .menu-item__price { font-weight: 800; color: var(--red); }
.review__rating, .reviews-panel__stars, .reviews-panel__source-stars { color: var(--yellow-2); }

/* ---- Bar & lounge: after the bell, lights down ---- */
.section--barlounge, .section--barlounge:nth-of-type(even) { background: var(--board-2); color: var(--cream); }
.section--barlounge .barlounge__cap { color: rgba(244,241,232,.7); }

/* ---- Cosmic: lights out ---- */
.section--cosmic, .section--cosmic:nth-of-type(even) {
  background: radial-gradient(80% 70% at 50% 0%, rgba(255,194,46,.12), transparent 65%), var(--board-deep);
  color: var(--cream);
}
.cosmic__intro, .cosmic__sub { color: rgba(244,241,232,.8); }
.cosmic__facts dt { font-family: var(--font-chalk); color: var(--yellow); font-size: .95rem; }
.cosmic__facts dd { color: var(--cream); font-weight: 600; margin: .15rem 0 0; }

/* ---- Closing CTA: chalkboard with a chalk frame ---- */
.section--cta, .section--cta:nth-of-type(even) { background: var(--board); color: var(--cream); }
.cta__title { font-size: clamp(2rem, 5vw, 3.2rem); }

/* ---- Footer ---- */
.section--footer, .section--footer:nth-of-type(even) { background: var(--board-ink); color: rgba(244,241,232,.75); border-top: 5px solid var(--yellow); }
.footer__heading { font-family: var(--font-chalk); color: var(--yellow); font-size: 1.05rem; text-transform: none; letter-spacing: .02em; }
.footer__brand-name { color: var(--cream); }
.footer__links a, .footer__legal-links a { color: rgba(244,241,232,.75); }
.footer__links a:hover, .footer__legal-links a:hover { color: var(--yellow); }
.footer__tag { font-family: var(--font-chalk); color: rgba(244,241,232,.7); }

/* ---- Gift cards ---- */
.giftcard__card { background: linear-gradient(135deg, var(--red) 0%, var(--red-2) 100%); color: #fff; }
.giftcard__card-amount { font-family: var(--font-num); color: var(--yellow); }
.giftcard__card-label, .giftcard__card-foot { font-family: var(--font-chalk); color: rgba(255,255,255,.85); }
.giftcard__denom { border: 2px solid var(--ink); border-radius: 9999px; font-weight: 800; background: var(--paper); }

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-marquee__track { animation: none !important; }
  .btn:hover, .offering:hover, .deal:hover, .amenity:hover, .overflow-card:hover, .hero-burst:hover { transform: none; }
}

/* The comp opens the closing CTA with a big school bus over the heading, centred and tilted. */
.section--cta { overflow: hidden; text-align: center; }
.section--cta > .container { position: relative; }
.section--cta .section__head::before {
  content: ""; display: block; width: min(258px, 62vw); height: min(180px, 44vw); margin: 0 auto 8px;
  background: url('icons/school-bus.svg') no-repeat center / contain; transform: rotate(-4deg);
}
.section--cta .section__eyebrow { transform-origin: center; }

/* ---- Chalkboard surfaces: nothing inherits the paper palette onto a board ----
   .section__intro is ink-grey by default (correct on paper, invisible on a board) and the
   canonical CTA renders it directly on the chalkboard. Rather than patch one selector, every
   dark surface states its own text colour, and the paper cards sitting ON a dark surface
   state theirs back. */
.section--hero, .section--stats, .section--cosmic, .section--barlounge, .section--cta, .section--footer { color: var(--cream); }
.section--hero .section__intro, .section--stats .section__intro, .section--cosmic .section__intro,
.section--barlounge .section__intro, .section--cta .section__intro, .section--footer .section__intro,
.section--cosmic .cosmic__lead, .section--barlounge .barlounge__details {
  color: rgba(244,241,232,.80);
}
/* A paper card keeps its ink wherever it lands. */
.section--cta .findus__card, .section--cta .findus__card p, .section--cta .findus__card span,
.section--cta .findus__card dt, .section--cta .findus__card dd, .section--cta .findus__card li { color: var(--ink); }
.section--cta .findus__card a:not(.btn) { color: var(--red); }
.section--cta .findus__card-title { color: var(--red); }

/* The framed panel the design puts around the closing CTA, on the element that renders. */
.section--cta .section__head {
  border: 2px dashed rgba(244,241,232,.28); border-radius: 18px;
  padding: 2.5rem 2rem; margin-bottom: 2.5rem;
}

/* ---- Design corrections against the source comp ---- */



/* The badge in the comp is a round gold sticker (an "A+" grade stamp), not a starburst. */
.hero-burst {
  width: 112px; height: 112px; border-radius: 50%; clip-path: none;
  border: 3px solid var(--ink); box-shadow: var(--hard); padding: 0 .85rem;
  font-size: .82rem; line-height: 1.1;
}

/* ---- Header: undo the light-header assumptions inherited from the base ----
   The shared base styles a CREAM header, so it sets `.section--header .brand__name`,
   `.nav > .nav__link` and the hours pill to ink at two-class specificity. This skin puts a
   chalkboard up there, and one-class overrides lose — every one of them has to be answered at
   the same weight or the whole header renders ink-on-board. */
.section--header .brand__name { color: var(--cream); }
.section--header .brand__city { color: rgba(244,241,232,.62); }
.section--header .nav > .nav__link { color: rgba(244,241,232,.85); font-weight: 600; }
.section--header .nav > .nav__link:hover { color: var(--yellow); }
.section--header .nav__more-toggle { color: rgba(244,241,232,.85); }
.section--header .nav-toggle span { background: var(--cream); }
.section--header .header__phone { color: var(--yellow); }
.section--header .header__utility .hours-status { color: rgba(244,241,232,.75); }
.section--header .header__utility .hours-status--badge { border-color: rgba(244,241,232,.28); }
.section--header .header__utility .hours-status::before { background: rgba(244,241,232,.5); }
/* The open/closed line sits in .brand__status on desktop (the .header__utility copy is hidden
   at this breakpoint), and inherits the page's ink — invisible on the board. */
.section--header .brand__status, .section--header .brand__status .hours-status { color: rgba(244,241,232,.78); }

/* ============================================================
   HERO — rebuilt to the comp: chalkboard two-column, not a full-bleed photo.
   `.hero__image`, `.hero-burst` and `.hero__inner` are all direct children of the section,
   so the section itself is the grid and each child is placed into a cell. The image and the
   burst share cell 1/2, which keeps the sticker pinned to the card's corner at every width
   without hard-coded offsets.
   ============================================================ */
.section--hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px; align-items: center; min-height: 0;
  /* Matches `.container`'s math (max-width 1200 + 1.5rem padding, border-box) so the hero
     headline starts on the same line as every other section heading — it was 24px left of
     them on wide screens. */
  padding: 76px max(1.5rem, calc((100% - 1200px) / 2 + 1.5rem)) 88px;
  background: radial-gradient(120% 90% at 50% 0%, #28372c 0%, #1e2a24 60%, #182019 100%);
  border-bottom: 0;
}
.section--hero > .hero__inner { grid-area: 1 / 1; max-width: none; width: auto; padding: 0; }
.section--hero > .hero__inner > * { max-width: none; }

/* The polaroid: a thick cream border IS the mat, so no extra wrapper is needed. */
.section--hero > .hero__image {
  grid-area: 1 / 2; position: static; inset: auto;
  width: 100%; height: auto; max-width: none; margin: 0;
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 14px solid #f7f2e4; border-bottom-width: 46px; border-radius: 6px;
  box-shadow: 0 6px 0 rgba(34,32,27,.28);
  transform: rotate(1.4deg);
}
/* The A+ sticker sits in the same cell as the card, pinned to its top-left corner. */
.section--hero > .hero-burst {
  grid-area: 1 / 2; position: relative; justify-self: start; align-self: start;
  margin: -22px 0 0 -26px; z-index: 3;
  width: 88px; height: 88px; padding: 0 .5rem;
  transform: rotate(-13deg); font-size: .78rem; line-height: 1.05;
  box-shadow: 0 3px 0 rgba(34,32,27,.25);
}
.section--hero > .hero-burst:hover { transform: rotate(-13deg) scale(1.06); }

.hero__title { font-size: clamp(2.6rem, 6.4vw, 5.375rem); line-height: 1.05; color: #fff; text-shadow: none; }
.hero__sub { font-size: 1.1875rem; color: rgba(244,241,232,.90); max-width: 34ch; }
/* Eyebrow row: the schoolhouse icon beside the chalk line, as in the comp. */
.hero__eyebrow {
  display: flex; align-items: center; gap: 12px; font-size: 1.25rem; color: var(--yellow);
  transform: rotate(-1.2deg); transform-origin: left center; margin-bottom: 18px;
}
.hero__eyebrow::before {
  content: ""; flex: 0 0 auto; width: 72px; height: 72px;
  background: url('icons/schoolhouse.svg') no-repeat center / contain; transform: rotate(-2deg);
}
/* Primary CTA is the display face here; the secondary is a chalk-underlined text link. */
.section--hero .btn--primary { font-family: var(--font-head); font-size: 1.25rem; letter-spacing: .01em; padding: 1rem 1.875rem .8rem; }
.section--hero .btn--ghost {
  border: 0; box-shadow: none; padding: .35rem 0; border-radius: 0;
  border-bottom: 2px solid var(--yellow); color: var(--cream);
  font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1rem;
}
.section--hero .btn--ghost:hover { transform: none; color: var(--yellow); }

@media (max-width: 900px) {
  .section--hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 48px; }
  .section--hero > .hero__image { grid-area: auto; transform: none; border-bottom-width: 22px; }
  .section--hero > .hero-burst { grid-area: auto; justify-self: end; margin: 0; }
  .hero__eyebrow::before { width: 52px; height: 52px; }
}

/* ---- Stats: tilted cards on the deep board, per the comp ---- */
.section--stats, .section--stats:nth-of-type(even) {
  background: var(--board-ink); padding: 4rem 0;
  border-top: 1px solid var(--chalk-line); border-bottom: 1px solid var(--chalk-line);
}
.section--stats .stat {
  background: var(--board-2); border: 1px solid var(--chalk-line); border-radius: 14px;
  padding: 28px 22px; box-shadow: 0 2px 0 rgba(34,32,27,.20);
}
.section--stats .stat:nth-child(odd) { transform: rotate(-.8deg); }
.section--stats .stat:nth-child(even) { transform: rotate(.7deg); }
.section--stats .stat::after { display: none; }   /* the base's divider hairline */
.section--stats .stat__value { font-size: 3.25rem; line-height: 1; }
.section--stats .stat__label { font-size: 1.1875rem; color: var(--cream); margin-top: 10px; }
/* krunkle decorates its hero with flying bowling pins in a ::after; this design's hero is a
   chalkboard with a polaroid, and the pins land on top of the card. */
.section--hero::after { content: none; }

/* Hero eyebrow: the base ships it as a filled red pill. This design's kicker is bare chalk
   text beside the schoolhouse, so the pill has to be undone explicitly — with the icon in
   flow it stretched into a full-width red bar. */
.section--hero .hero__eyebrow {
  background: none; border: 0; border-radius: 0; padding: 0;
  width: fit-content; max-width: 100%; line-height: 1.2;
}
/* The CTA row is a flex container, so the text-link secondary was stretched to the primary
   button's height and its underline floated 28px clear of the words. */
.section--hero .hero__cta { align-items: center; }
.section--hero .btn--ghost { align-self: center; line-height: 1.3; }
.section--hero > .hero-burst { font-size: .68rem; letter-spacing: .02em; }

/* ============================================================
   SECTIONS 2-6, built against the comp (offerings, pricing, parties, leagues, barlounge).
   Shared grammar first, then each section's own layout.
   ============================================================ */

/* Section head: the comp's kicker is a small tracked-out chalk line in CAPS, and headings run
   52px on the wide sections / 49px on the split ones. Colour flips with the surface. */
.section__eyebrow, .cosmic__eyebrow {
  font-size: 1.125rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
.section--offerings .section__eyebrow, .section--foodservice .section__eyebrow,
.section--reviews .section__eyebrow, .section--giftcards .section__eyebrow { color: var(--red); }
.section--pricing .section__eyebrow, .section--parties .section__eyebrow,
.section--leagues .section__eyebrow, .section--barlounge .section__eyebrow,
.section--thisweek .section__eyebrow, .section--amenities .section__eyebrow,
.section--photogallery .section__eyebrow { color: var(--yellow); }

.section--pricing .section__title, .section--parties .section__title,
.section--leagues .section__title, .section--barlounge .section__title,
.section--thisweek .section__title, .section--amenities .section__title,
.section--photogallery .section__title { color: #fff; }
.section--parties .section__title, .section--leagues .section__title,
.section--barlounge .section__title { font-size: clamp(1.9rem, 4.2vw, 3.0625rem); }

.section--pricing .section__intro, .section--parties .section__intro,
.section--leagues .section__intro, .section--barlounge .section__intro,
.section--thisweek .section__intro, .section--amenities .section__intro,
.section--photogallery .section__intro { color: rgba(244,241,232,.90); font-size: 1.125rem; }
.section--offerings .section__intro, .section--foodservice .section__intro,
.section--reviews .section__intro, .section--giftcards .section__intro { color: rgba(34,32,27,.88); font-size: 1.125rem; }

/* Board cards vs paper cards — the two card recipes the comp uses everywhere. */
.section--parties .overflow-card, .section--leagues .league, .section--amenities .amenity,
.section--thisweek .deal, .section--photogallery .gallery__item {
  background: var(--board-2); border: 1px solid var(--chalk-line); border-radius: 14px;
  box-shadow: 0 2px 0 rgba(34,32,27,.20); color: var(--cream);
}
.section--parties .overflow-card__title, .section--amenities .amenity__name { color: var(--cream); }
.section--parties .overflow-card__desc, .section--amenities .amenity__desc { color: rgba(244,241,232,.82); }

/* A photo on a board sits in a cream polaroid, slightly off-square. */
.section--parties .parties-feature__photo, .section--barlounge .barlounge__photo,
.section--leagues .league-feature__photo {
  background: #f7f2e4; border: 12px solid #f7f2e4; border-radius: 6px;
  box-shadow: 0 5px 0 rgba(34,32,27,.26); width: 100%; max-width: none;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.section--parties .parties-feature__photo { transform: rotate(-1.2deg); }
.section--barlounge .barlounge__photo { transform: rotate(1.1deg); }

/* ---- 2. Offerings: ruled paper, numbered gold chips, white-ruled cards ---- */
.section--offerings .offerings-grid { counter-reset: bts-offering; gap: 22px; }
.section--offerings .offering {
  background: repeating-linear-gradient(to bottom, #fff 0 27px, rgba(46,109,180,.04) 27px 28px);
  border: 1px solid rgba(34,32,27,.12); border-radius: 14px; padding: 26px 22px;
  box-shadow: 0 2px 0 rgba(34,32,27,.20);
}
.section--offerings .offering__body::before {
  counter-increment: bts-offering; content: counter(bts-offering, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 9999px; background: var(--yellow);
  font-family: var(--font-num); font-size: 1.125rem; color: var(--ink); margin: 0 0 16px;
}
.section--offerings .offering__title { font-size: 1.875rem; margin: 0 0 8px; color: var(--ink); }
.section--offerings .offering__desc { font-size: .9375rem; color: rgba(34,32,27,.88); }

/* ---- 3. Pricing: a cream sheet on the board, with the notebook's red margin rule ---- */
/* `.pricing-list` IS the `.scroll-cap__body`. Clipping it to keep the margin rule inside the
   sheet's rounded corners also killed its scrolling, and the cap is 544px against 1617px of
   content — 24 of Fox Bowl's 38 rates became unreachable, not merely hidden. The rule belongs
   on the sheet (which is what has the corners); the list just scrolls. */
.section--pricing .pricing-list { position: static; overflow-y: auto; overflow-x: hidden; padding: 34px 34px 34px 62px; box-shadow: none; }
.section--pricing .pricing-scroll::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 38px; width: 2px; background: var(--red); z-index: 1;
}
.section--pricing .price-row {
  border-bottom: 1px solid rgba(46,109,180,.35); padding: 14px 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.section--pricing .price-row__label { color: var(--ink); font-size: 1.0625rem; font-weight: 500; }
.section--pricing .price-row__value { font-family: var(--font-num); font-size: 1.25rem; color: var(--red); font-weight: 400; }
.section--pricing .scroll-cap__hint { color: var(--red); background: linear-gradient(180deg, rgba(247,242,228,0), #f7f2e4 72%); }
@media (min-width: 780px) { .section--pricing .pricing-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; } }

/* ---- 4. Parties: polaroid left, copy right, on the lighter board ---- */
.section--parties .parties-feature {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center;
}
.section--parties .parties-feature__lead { color: rgba(244,241,232,.90); font-size: 1.125rem; max-width: 46ch; }
.section--parties .btn--primary { font-family: var(--font-head); font-size: 1.125rem; padding: .875rem 1.625rem .7rem; }
.section--parties .parties-feature__ribbon { background: var(--yellow); color: var(--ink); font-family: var(--font-chalk); border-radius: 6px; transform: rotate(6deg); box-shadow: 0 3px 0 rgba(34,32,27,.25); }
.section--parties .parties-feature__more-label { color: var(--yellow); font-family: var(--font-chalk); text-transform: uppercase; letter-spacing: .06em; }

/* ---- 5. Leagues: copy left, a stack of day rows right ---- */
.section--leagues .leagues-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: start; }
.section--leagues .league-feature { background: none; border: 0; box-shadow: none; padding: 0; }
.section--leagues .league-feature__title { color: #fff; }
.section--leagues .league-feature__body { color: rgba(244,241,232,.90); font-size: 1.125rem; max-width: 40ch; }
.section--leagues .league-list { display: flex; flex-direction: column; gap: 12px; }
/* display:contents promotes the day and time out of their wrapper so the row reads
   day | name | time in one flex line, as the comp draws it. */
.section--leagues .league { display: flex; align-items: center; gap: 20px; padding: 18px 22px; }
.section--leagues .league__when { display: contents; }
.section--leagues .league__day { order: 1; min-width: 112px; font-family: var(--font-hand); font-size: .9375rem; color: var(--yellow); }
.section--leagues .league__body { order: 2; flex: 1; }
.section--leagues .league__name { font-size: 1.0625rem; font-weight: 600; color: var(--cream); }
.section--leagues .league__time { order: 3; font-family: var(--font-num); font-size: 1rem; color: rgba(244,241,232,.90); }
.section--leagues .league-feature__cta.btn--primary, .section--leagues .btn--primary {
  background: none; border: 0; border-bottom: 2px solid var(--yellow); border-radius: 0;
  box-shadow: none; color: var(--cream); font-family: var(--font-body); text-transform: none;
  letter-spacing: 0; font-size: 1.0625rem; font-weight: 600; padding: 0 0 2px;
}
.section--leagues .btn--primary:hover { transform: none; color: var(--yellow); }

/* ---- 6. Bar & lounge: copy left, polaroid right, deepest board ---- */
.section--barlounge, .section--barlounge:nth-of-type(even) { background: var(--board-ink); }
.section--barlounge > .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center; }
.section--barlounge .section__head { margin: 0; }
.section--barlounge .section__intro { max-width: 48ch; }
.section--barlounge .barlounge__photos { display: grid; gap: 18px; }
.section--barlounge .barlounge__cap { color: rgba(244,241,232,.7); font-family: var(--font-chalk); }

@media (max-width: 900px) {
  .section--parties .parties-feature, .section--leagues .leagues-layout,
  .section--barlounge > .container { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .section--leagues .league { flex-wrap: wrap; gap: 8px 16px; }
  .section--leagues .league__day { min-width: 0; }
}

/* ---- Corrections after rendering sections 2-6 against real centers ---- */

/* A ghost button inherits ink, which is right on paper and invisible on a board. Name every
   board surface once rather than per-section (parties' "Ask at the front desk" was unreadable). */
.section--pricing .btn--ghost, .section--parties .btn--ghost, .section--leagues .btn--ghost,
.section--barlounge .btn--ghost, .section--thisweek .btn--ghost, .section--amenities .btn--ghost,
.section--photogallery .btn--ghost, .section--stats .btn--ghost {
  color: var(--cream); border-color: rgba(244,241,232,.55);
}

/* Pricing: `.pricing-list` carries a 680px max-width from the base and the paper lives on the
   scroll container (`.pricing-scroll.scroll-cap` is ONE element, so a descendant selector for
   .scroll-cap never matched). Without this the cream sheet stopped half-way across the board
   while the scroll hint ran the full width. */
.section--pricing .pricing-scroll {
  background: #f7f2e4; border-radius: 14px; box-shadow: 0 4px 0 rgba(34,32,27,.28);
  position: relative; overflow: hidden;
}
.section--pricing .pricing-list { max-width: none; background: none; box-shadow: none; }
/* Center prices carry their unit in the value ("$30.00 per lane"), unlike the comp's bare
   "$5.50" — at display size those wrapped to three lines inside the column. */
.section--pricing .price-row__value { white-space: nowrap; font-size: 1.0625rem; }
.section--pricing .price-row__label { flex: 1 1 auto; min-width: 0; }

/* Leagues: the comp puts the schedule rows on the right and the copy on the left; the canonical
   order is list-then-feature. */
.section--leagues .league-scroll { order: 2; }
.section--leagues .league-feature { order: 1; }
.section--leagues .btn--primary { display: inline-block; width: fit-content; }

/* Bar & lounge: the comp shows one photo. Fox Bowl has six, and a single-column stack made the
   section 2,600px tall with an empty half. Let the photos wrap, and keep the copy in view
   beside them instead of floating in the vertical middle of a very tall column. */
.section--barlounge > .container { align-items: start; }
.section--barlounge .section__head { position: sticky; top: 110px; }
.section--barlounge .barlounge__photos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.section--barlounge .barlounge__photo-item:nth-child(even) .barlounge__photo { transform: rotate(-1.1deg); }

/* Package names are data, not headlines — "2 Hour Bowling Fundraiser (Mon-Fri til 6pm…" at the
   comp's 30px card size ran to seven lines. */
.section--parties .overflow-card__title { font-size: clamp(1.05rem, 1.6vw, 1.35rem); }

/* ---- Section kicker icons, matched to the comp ----
   The kicker is a flex row so the glyph sits beside the chalk line. Sized in em of the kicker
   so it tracks the type rather than needing a breakpoint of its own. */
.section--offerings .section__eyebrow, .section--leagues .section__eyebrow,
.section--thisweek .section__eyebrow, .section--amenities .section__eyebrow {
  display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
}
.section--offerings .section__eyebrow::before, .section--leagues .section__eyebrow::before,
.section--thisweek .section__eyebrow::before, .section--amenities .section__eyebrow::before {
  content: ""; flex: 0 0 auto; width: 76px; height: 76px; background: no-repeat center / contain;
}
.section--offerings .section__eyebrow::before { background-image: url('icons/backpack.svg'); transform: rotate(-6deg); }
.section--leagues .section__eyebrow::before { background-image: url('icons/school-bell.svg'); transform: rotate(-14deg); }
.section--thisweek .section__eyebrow::before { background-image: url('icons/calendar.svg'); transform: rotate(-3deg); }
.section--amenities .section__eyebrow::before { background-image: url('icons/books.svg'); transform: rotate(-5deg); }
@media (max-width: 720px) {
  .section--offerings .section__eyebrow::before, .section--leagues .section__eyebrow::before,
  .section--thisweek .section__eyebrow::before, .section--amenities .section__eyebrow::before { width: 52px; height: 52px; }
}
/* The offering photo runs to the card edge, so the card has to clip it to its own radius. */
.section--offerings .offering { overflow: hidden; }

/* ============================================================
   REMAINING SECTIONS, built against the comp:
   cosmic, foodservice, thisweek, reviews, amenities, photogallery, giftcards, cta, footer.
   ============================================================ */

/* ---- Cosmic: the comp's one night-mode section — near-black violet, neon mint kicker,
   hot-pink accent. Everything else in this theme is chalkboard or paper; this is neither. ---- */
.section--cosmic, .section--cosmic:nth-of-type(even) {
  background: repeating-linear-gradient(135deg, #241146 0 14px, #150a2c 14px 28px), #0b0714;
  padding: 0; min-height: 520px; display: grid; align-items: end;
  position: relative; overflow: hidden; color: #f0e8ff;
}
.section--cosmic .cosmic__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Scrim over the photo, not under it — the stripe pattern is the fallback when a center has
   no cosmic photo, so it sits on the section itself. */
.section--cosmic::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,7,20,.35) 0%, rgba(11,7,20,.92) 78%);
}
.section--cosmic::after { content: none; }   /* krunkle's own cosmic decoration */
.section--cosmic .cosmic__inner { position: relative; z-index: 2; padding-bottom: 72px; width: 100%; }
.section--cosmic .cosmic__eyebrow { color: #7cf7d8; font-size: 1.1875rem; }
.section--cosmic .cosmic__mark {
  font-family: var(--font-head); font-weight: 400; font-size: clamp(2.4rem, 5.6vw, 4.25rem);
  line-height: 1.05; color: #fff; text-shadow: 0 0 22px rgba(124,247,216,.45); margin: 0 0 16px;
}
.section--cosmic .cosmic__mark-top { display: inline; }
.section--cosmic .cosmic__letter { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.section--cosmic .cosmic__mark-bottom {
  display: inline-block; font-family: inherit; color: inherit; text-shadow: none;
  padding: 0 .14em; border: 3px solid #ff4fd8; border-radius: 50% / 60%; transform: rotate(-2deg);
}
.section--cosmic .cosmic__intro { color: rgba(240,232,255,.90); font-size: 1.125rem; max-width: 44ch; }
.section--cosmic .cosmic__cta.btn--primary {
  background: #ff4fd8; color: #150a2c; border-color: #ff4fd8;
  font-family: var(--font-head); font-size: 1.125rem; padding: .875rem 1.625rem .7rem;
  box-shadow: 0 0 26px rgba(255,79,216,.55);
}
.section--cosmic .cosmic__cta.btn--primary:hover { transform: none; box-shadow: 0 0 38px rgba(255,79,216,.75); }
.section--cosmic .cosmic__facts dt { color: #7cf7d8; }
.section--cosmic .cosmic__sub { color: rgba(240,232,255,.75); }

/* ---- Foodservice: paper, photo left, the menu as a ruled bill of fare right ---- */
.section--foodservice .menu-layout--featured {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: 52px; align-items: start;
}
.section--foodservice .menu-feature {
  background: #fff; border: 0; padding: 12px; border-radius: 6px;
  box-shadow: 0 4px 0 rgba(34,32,27,.22); transform: rotate(-1deg);
}
.section--foodservice .menu-list__row { border-bottom: 1px solid rgba(46,109,180,.35); padding: 11px 0; }
.section--foodservice .menu-list__name, .section--foodservice .menu-item__name { font-weight: 500; color: var(--ink); }
.section--foodservice .menu-list__price, .section--foodservice .menu-item__price {
  font-family: var(--font-num); color: var(--red); font-weight: 400; white-space: nowrap;
}
.section--foodservice .menu-item { background: #fff; }
.section--foodservice .menu-category__title { color: var(--ink); }

/* ---- This week: the comp frames the whole panel as a chalkboard in a wooden surround,
   and switches the heading to the handwritten face. ---- */
.section--thisweek > .container {
  background: var(--board-ink); border: 6px solid #6b4a2a; border-radius: 8px;
  padding: 44px 40px; box-shadow: 0 5px 0 rgba(34,32,27,.35);
}
.section--thisweek .section__title {
  font-family: var(--font-hand); font-size: clamp(1.4rem, 3vw, 2.4375rem); line-height: 1.3; color: #fff;
}
.section--thisweek .section__intro { color: rgba(244,241,232,.62); font-size: 1.0625rem; }
.section--thisweek .deal, .section--thisweek .overflow-card {
  background: none; border: 1px solid var(--chalk-line); border-radius: 10px;
  padding: 18px 16px; box-shadow: none;
}
.section--thisweek .deal__title, .section--thisweek .overflow-card__title {
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--cream);
}
.section--thisweek .deal__desc, .section--thisweek .overflow-card__desc,
.section--thisweek .overflow-note { color: rgba(244,241,232,.62); font-size: .875rem; }

/* ---- Reviews: paper, white-ruled cards pinned at slight angles ---- */
.section--reviews .review {
  background: repeating-linear-gradient(to bottom, #fff 0 27px, rgba(46,109,180,.04) 27px 28px);
  border: 1px solid rgba(34,32,27,.12); border-radius: 14px; padding: 28px 24px;
  box-shadow: 0 2px 0 rgba(34,32,27,.20);
}
.section--reviews .review:nth-child(3n+1) { transform: rotate(-.7deg); }
.section--reviews .review:nth-child(3n+2) { transform: rotate(.6deg); }
.section--reviews .review:nth-child(3n)   { transform: rotate(-.4deg); }
.section--reviews .review__rating { color: var(--yellow-2); font-size: 1.1875rem; letter-spacing: .12em; }
.section--reviews .review__quote { font-size: 1.0625rem; color: var(--ink); }
.section--reviews .review__author { font-family: var(--font-chalk); font-size: 1.125rem; color: var(--ink); }
.section--reviews .review__source, .section--reviews .review-source { color: var(--ink-3); }
.section--reviews .review-source__num { color: var(--red); }

/* ---- Photo gallery: polaroids on the corkboard, bottom-heavy mats ---- */
.section--photogallery .gallery-grid { gap: 28px; }
.section--photogallery .gallery__item {
  background: #f7f2e4; border: 0; border-radius: 4px; padding: 10px 10px 34px;
  box-shadow: 0 4px 0 rgba(34,32,27,.28);
}
.section--photogallery .gallery__item:nth-child(odd)  { transform: rotate(-1.6deg); }
.section--photogallery .gallery__item:nth-child(even) { transform: rotate(1.2deg); }
.section--photogallery .gallery__photo { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; max-width: none; border-radius: 0; }

/* ---- Gift cards: the card itself is the artwork, tilted, copy beside it ---- */
.section--giftcards .giftcard--rich {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center;
  background: none; border: 0; box-shadow: none; padding: 0;
}
.section--giftcards .giftcard__preview { order: 1; }
.section--giftcards .giftcard__body { order: 2; }
.section--giftcards .giftcard__card {
  background: var(--red); border: 0; border-radius: 14px; padding: 30px 26px;
  box-shadow: 0 5px 0 rgba(34,32,27,.26); transform: rotate(-2deg); color: #fff;
}
.section--giftcards .giftcard__card::after { content: none; }
.section--giftcards .giftcard__name { font-family: var(--font-chalk); font-size: 1.0625rem; color: var(--yellow); }
.section--giftcards .giftcard__card-label { font-family: var(--font-head); font-size: 2rem; line-height: 1.1; color: #fff; }
.section--giftcards .giftcard__card-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px dashed rgba(255,255,255,.55); padding-top: 16px; margin-top: 26px;
  font-family: var(--font-body); font-size: .8125rem; letter-spacing: .1em; font-weight: 700; color: #fff;
}
.section--giftcards .giftcard__card-amount { font-family: var(--font-num); font-size: 1.375rem; color: var(--yellow); }
.section--giftcards .giftcard__intro { color: rgba(34,32,27,.88); font-size: 1.0625rem; max-width: 46ch; }
.section--giftcards .btn--primary { font-family: var(--font-head); font-size: 1.125rem; padding: .875rem 1.625rem .7rem; }
.section--giftcards .giftcard__note { color: var(--ink-3); }

/* ---- Closing CTA: centred column under the bus ---- */
.section--cta { padding: 6rem 0; }
.section--cta .section__head { max-width: 820px; margin: 0 auto 2.75rem; }
.section--cta .section__eyebrow {
  font-family: var(--font-hand); font-size: 1rem; text-transform: none; letter-spacing: 0;
  color: var(--yellow); margin: 0 auto 20px; transform: none;
}
.section--cta .cta__title { font-size: clamp(2.2rem, 5.6vw, 4.375rem); }
.section--cta .section__intro { font-size: 1.1875rem; margin-left: auto; margin-right: auto; }
.section--cta .findus { text-align: left; }

/* ---- Footer ---- */
.section--footer { padding: 4rem 0 2.125rem; }
.section--footer .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 44px; }
.section--footer .footer__brand-name { font-size: 1.25rem; color: var(--cream); }
.section--footer .footer__tag { font-family: var(--font-body); font-size: .9375rem; color: rgba(244,241,232,.62); max-width: 32ch; }
.section--footer .footer__map { background: var(--board-2); border: 1px solid var(--chalk-line); border-radius: 8px; overflow: hidden; }
.section--footer .footer__links a, .section--footer .footer__legal-links a,
.section--footer .footer__phone, .section--footer .footer__locality-phone { font-size: .9375rem; }
.section--footer .footer__legal { border-top: 1px solid var(--chalk-line); color: rgba(244,241,232,.55); }

@media (max-width: 900px) {
  .section--foodservice .menu-layout--featured, .section--giftcards .giftcard--rich {
    grid-template-columns: minmax(0, 1fr); gap: 32px;
  }
  .section--giftcards .giftcard__preview, .section--giftcards .giftcard__body { order: 0; }
  .section--thisweek > .container { padding: 28px 20px; border-width: 4px; }
  .section--footer .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* The base dims the cosmic photo to 0.42 so its own backdrop reads through. Here that let the
   stripe fallback show ON TOP of a real photo, which looks like a rendering fault rather than a
   texture — the scrim above already does the darkening. */
.section--cosmic .cosmic__bg { opacity: 1; }
/* The comp stacks the CTA under the copy rather than setting it in a second column. */
.section--cosmic .cosmic__inner { display: block; }
.section--cosmic .cosmic__action { margin-top: 28px; }

/* ---- Paper-section reset ----
   The base assigns surfaces per section on its own logic — foodservice is a charcoal band there,
   so it ships `.section--foodservice .section__title { color: var(--cream) }`. This design makes
   that section ruled paper, and cream-on-cream rendered the heading invisible (only the red
   accent ellipse survived). Flipping a section's surface means answering every colour the base
   set for the old surface, at equal specificity — not just the section background. */
.section--foodservice, .section--foodservice .section__title,
.section--offerings .section__title, .section--reviews .section__title,
.section--giftcards .section__title { color: var(--ink); }
.section--foodservice .section__intro, .section--reviews .section__intro,
.section--giftcards .section__intro { color: rgba(34,32,27,.88); }

/* Menu tabs sit on paper here, not on a dark band. */
.section--foodservice .menu-tab { background: var(--paper); color: var(--ink); }
.section--foodservice .menu-tab[aria-selected="true"], .section--foodservice .menu-tab.is-active { background: var(--red); color: #fff; }

/* The featured menu photo has no intrinsic ratio, so a portrait shot (Fox Bowl's pizza is
   510x673) drove the whole two-column block. The polaroid sets the ratio, the photo fills it. */
.section--foodservice .menu-feature img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; max-width: none; display: block; }
/* The base pins amenities to --paper with a `:nth-of-type(even)` companion, which out-specifies
   a plain class assignment — the section stayed cream while its heading went white, so the
   heading vanished. Answer it at the same weight. */
.section--amenities, .section--amenities:nth-of-type(even) { background: var(--board-2); }

/* This-week overflow: cap it the way the parties overflow is capped, so a center running two
   dozen offers doesn't push the rest of the page down. theme.js draws the "Scroll for more"
   hint on the wrapper and hides it once you reach the end. */
.section--thisweek .thisweek-more-cards {
  max-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
  padding-right: .35rem; align-content: start;
}
.section--thisweek .thisweek-more-scroll { position: relative; }
.section--thisweek .scroll-cap__hint {
  color: var(--yellow);
  background: linear-gradient(180deg, rgba(20,27,21,0), var(--board-ink) 72%);
}

/* ============================================================
   PAPER AIRPLANES (the comp's toy) — markup is built by this skin's own theme.js.
   The plane shape is a mask so one element carries both the silhouette and its colour;
   `filter: drop-shadow` then gives the comp's hard offset shadow on the shape, not the box.
   ============================================================ */
.bts-planes { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.bts-planes__stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.bts-plane {
  position: absolute; left: 0; top: 0; display: block; opacity: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0 14.016l9.216 6.912 18.784-16.928-14.592 20.064 10.592 7.936 8-32zM8 32l6.016-4-6.016-4v8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0 14.016l9.216 6.912 18.784-16.928-14.592 20.064 10.592 7.936 8-32zM8 32l6.016-4-6.016-4v8z'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 2px 0 rgba(34,32,27,.35));
  offset-rotate: auto 45deg; offset-distance: 0%;
  animation-duration: 17s; animation-timing-function: linear; animation-iteration-count: infinite;
  pointer-events: auto; cursor: pointer;
}
.bts-plane--cruise { animation-name: btsGlideCruise; }
.bts-plane--stall  { animation-name: btsGlideStall; }
.bts-plane.is-hit  { visibility: hidden; }

@keyframes btsGlideCruise {
  0%   { offset-distance: 0%;   opacity: 0; pointer-events: none; }
  2%   { opacity: 1; pointer-events: auto; }
  7%   { offset-distance: 24%; }
  16%  { offset-distance: 62%; }
  24%  { offset-distance: 88%; }
  30%  { offset-distance: 100%; opacity: 1; pointer-events: auto; }
  31%, 100% { offset-distance: 100%; opacity: 0; pointer-events: none; }
}
@keyframes btsGlideStall {
  0%   { offset-distance: 0%;   opacity: 0; pointer-events: none; }
  2%   { opacity: 1; pointer-events: auto; }
  8%   { offset-distance: 26%; }
  17%  { offset-distance: 58%; }
  22%  { offset-distance: 68%; }
  25%  { offset-distance: 71%; }
  27%  { offset-distance: 74%; }
  33%  { offset-distance: 100%; opacity: 1; pointer-events: auto; }
  34%, 100% { offset-distance: 100%; opacity: 0; pointer-events: none; }
}

/* The hit: the comp drops in a raster explosion GIF. Drawn here instead — same 170px, same
   moment — so the skin doesn't ship a few hundred KB of animation for one easter egg. */
.bts-burst {
  position: absolute; width: 170px; height: 170px; margin: -85px 0 0 -85px;
  pointer-events: none; animation: btsBurst .5s ease-out forwards;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,194,46,.95) 0 18%, rgba(215,54,47,.85) 30%, rgba(215,54,47,0) 62%);
}
.bts-burst::before, .bts-burst::after {
  content: ""; position: absolute; inset: 14%;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 20%, 83% 13%, 80% 36%, 100% 50%, 80% 64%, 83% 87%, 61% 80%, 50% 100%, 39% 80%, 17% 87%, 20% 64%, 0% 50%, 20% 36%, 17% 13%, 39% 20%);
}
.bts-burst::after { inset: 26%; background: var(--red); animation: btsBurstSpin .5s ease-out forwards; }

@keyframes btsBurst { 0% { transform: scale(.25); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes btsBurstSpin { 0% { transform: rotate(0deg) scale(.4); } 100% { transform: rotate(70deg) scale(1.1); } }

/* …and the plane itself tumbles off the bottom. */
.bts-wreck {
  color: #8a8578; opacity: 1; offset-path: none; animation: btsCrashFall 1.1s cubic-bezier(.5,0,.9,.6) forwards;
  pointer-events: none; cursor: default;
}
@keyframes btsCrashFall {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, 260px) rotate(430deg); opacity: 0; }
}

/* The planes are a toy, not information — they simply do not run for anyone who asked for less
   motion (theme.js also declines to build the layer at all in that case). */
@media (prefers-reduced-motion: reduce) {
  .bts-planes { display: none; }
}

/* ---- Mobile nav drawer ----
   The drawer sizes its links at 1.15rem inside `@media (max-width: 1024px)`, but a media query
   adds no specificity: my desktop `.nav__link { font-size: .78rem }` sits later in the file and
   beat it. It could NOT beat `.nav__more-menu .nav__link` (two classes), so the drawer came out
   with two sizes — the primary links at 12.5px above the More items at 18.4px. Everything in the
   drawer is one list to a reader, so it all takes the larger size. */
@media (max-width: 1024px) {
  .section--header .nav .nav__link,
  .section--header .nav > .nav__link,
  .section--header .nav__more-menu .nav__link,
  .section--header .nav__link--cta,
  .section--header .nav > .nav__link:last-child {
    font-size: 1.15rem; letter-spacing: .04em;
  }
}

/* A plane must not fly over the open drawer: the layer and the drawer both sit at z-index 70,
   and the layer is appended to <body> last, so it painted on top — the user's screenshot caught
   one sitting on the FIND US button, where it would have taken the tap. */
body.nav-locked .bts-planes { display: none; }

/* At <=720px the base zeroes `.section` side padding, because a section's `.container` normally
   supplies the gutter. This hero has no `.container` — the section itself is the grid and
   `.hero__inner` was stripped to padding:0 — so the headline and copy sat flush against the
   screen edge while every other section kept its 24px. Found by the selector audit, not by eye. */
@media (max-width: 720px) {
  .section--hero > .hero__inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}