/* SKIN B — starts as an exact copy of Skin A. This is the "everything we
   can think of" direction: enhancements get layered on top of this baseline.
   Skin B must never LOSE anything Skin A has. */
/* ==========================================================================
   PERFECT SZN — design tokens
   Pulled from the brand logo (Brand Assets) + existing menu graphics.
   Eric hasn't given design input yet — everything routes through these
   custom properties so the palette can change without touching markup.
   ========================================================================== */
:root{
  /* -- brand colour --
     Skin B runs a HARDER, three-accent system against a deeper ground than
     Skin A: black is pushed from #0d0d0d to #08080A so the orange and gold
     hit harder, and a broadcast red is added for live/urgent moments.
     The brand orange is deliberately UNCHANGED — recognition has to survive
     the divergence, so the difference comes from ground, red, and type. */
  --c-black:      #08080a;   /* deeper than Skin A: more punch behind accents */
  --c-black-soft: #101014;
  --c-panel:      #16161b;
  --c-line:       #2a2a33;
  --c-orange:     #f5a623;   /* primary brand orange, from logo — 9.87:1 on bg */
  --c-orange-dim: #c9821a;
  /* Gold sits a full TIER lighter than the orange rather than beside it.
     MEASURED: the original #f2c94c was only 7.8deg of hue and 1.28:1 from
     --c-orange — close enough that side by side it read as the orange
     rendered wrong, not as a second colour. #ffe9a8 is 1.69:1 and 28%
     lighter, so the two now separate by VALUE (brand vs highlight) instead
     of competing on hue. Still champagne/trophy gold, so the brand cue holds. */
  --c-gold:       #ffe9a8;   /* highlight tier — 16.65:1 on bg */

  /* Broadcast red — the "live" energy colour Skin A doesn't have.
     VERIFIED: #FF3B30 = 5.64:1 on --c-black (passes AA for text).
     The obvious pick (#DC2626) FAILS at 4.14:1 and must never be used as
     text on the dark ground — it is only safe as a BADGE BACKGROUND, where
     white on it measures 4.83:1. Two tokens so the distinction can't be lost. */
  --c-red:        #ff3b30;   /* text / icons / accents on dark */
  --c-red-deep:   #dc2626;   /* badge + button BACKGROUND only, white text */

  --c-white:      #ffffff;
  --c-gray-100:   #e7e7e7;
  --c-gray-400:   #c9c9ce;   /* body — 12.13:1, lifted from Skin A's #b5b5b5 */
  --c-gray-600:   #8a8a90;   /* muted — 5.83:1, still passes AA */

  /* semantic */
  --bg:            var(--c-black);
  --bg-raised:     var(--c-panel);
  --fg:            var(--c-white);
  --fg-muted:      var(--c-gray-400);
  --accent:        var(--c-orange);
  --accent-strong: var(--c-gold);
  --accent-live:   var(--c-red);
  --accent-live-bg:var(--c-red-deep);
  --border:        var(--c-line);

  /* -- type --
     Barlow Condensed + Barlow: ui-ux-pro-max's "Sports/Fitness" pairing
     (sports, fitness, athletic, competition). One superfamily, so display and
     body share skeletons and the page reads as a system rather than a
     collision. Deliberately NOT Anton — that's Skin A's face, and reusing it
     would erase the difference the client is being asked to choose between.
     Barlow carries tabular figures, so prices still align as stat lines. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-data:    'Barlow Condensed', var(--font-body);

  /* fluid type scale — the text steps run ~8% larger than Skin A's.
     MEASURED, not guessed: Barlow's x-height is 51 units where Inter's is 55
     (7.3% smaller) and it sets 9.4% narrower. At an identical 18px the Skin B
     menu therefore rendered visibly smaller and thinner than Skin A, which is
     what "doesn't feel the same" was. Barlow needs ~19.4px to match Inter at
     18px, so these steps are scaled to put the two skins at the same OPTICAL
     size. Display steps (2/3/4) are left alone — Barlow Condensed is already
     tuned there and enlarging it risks overflow.

     --step-00's floor is additionally pinned at a hard 16px (not fluid down
     to ~15px like the others). Measured on a live phone-width page: body text
     (.menu-item p, li) was rendering under the 16px mobile-readability floor.
     --step-00 is the shared "small body text" token, used in 11 places, so
     fixing the token fixes all of them at once. */
  --step-000: clamp(0.84rem, 0.81rem + 0.16vw, 0.92rem);
  --step-00:  clamp(1rem, 0.98rem + 0.12vw, 1.1rem);   /* floor guaranteed >=16px, see comment below */
  --step-0:   clamp(1.08rem, 1.04rem + 0.27vw, 1.22rem);
  --step-1:   clamp(1.2rem,  1.1rem + 0.5vw,   1.5rem);
  --step-2:   clamp(1.6rem,  1.4rem + 1vw,     2.1rem);
  --step-3:   clamp(2.2rem,  1.8rem + 2vw,     3.2rem);
  --step-4:   clamp(3rem,    2.2rem + 4vw,     5.4rem);

  /* spacing */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.4rem;
  --sp-4: 2.2rem;
  --sp-5: 3.6rem;
  --sp-6: 5.6rem;

  --radius: 8px;
  --max: 1240px;
}

/* view transitions between documents — biggest perceived-quality win for free */
@view-transition{ navigation: auto; }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 20px; }
section{ padding: var(--sp-6) 0; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  /* Anton (Skin A) is a single ultra-heavy face. Barlow Condensed at 700 reads
     noticeably lighter at the same size, so Skin B goes to 800 to match the
     weight on screen rather than on paper. */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.98;
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}
h1{ font-size: var(--step-4); }
h2{ font-size: var(--step-3); color: var(--accent); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); }
p{ color: var(--fg-muted); margin: 0 0 var(--sp-2); text-wrap: pretty; }

.eyebrow{
  display: block; font-family: var(--font-data); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-size: var(--step-000); color: var(--accent-strong); margin-bottom: var(--sp-2);
}

/* -- tabular data / prices -- */
.stat, .price{
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.price{ color: var(--accent); white-space: nowrap; }

/* -- buttons -- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 4px; font-family: var(--font-data);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: var(--step-00); border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary{ background: var(--accent); color: var(--c-black); }
.btn-primary:hover{ background: var(--accent-strong); }
.btn-outline{ border-color: var(--accent); color: var(--fg); }
.btn-outline:hover{ background: var(--accent); color: var(--c-black); }
.btn-row{ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (hover:hover){ .btn:hover{ transform: translateY(-2px); } }

/* ==========================================================================
   Header — broadcast score-bug nav
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in oklab, var(--c-black) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--accent);
}
.nav{ display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: var(--sp-2); }
/* The header wordmark keeps Skin A's Anton. Barlow Condensed reads too light
   at this size against the logo, and the brand lockup is the one place both
   skins should look identical — it is the company name, not a design choice. */
.brand{
  display: flex; align-items: center; gap: 10px;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: var(--step-1); letter-spacing: 0.02em;
}
.brand img{ height: 42px; width: auto; }
.nav-links{ display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a{
  font-family: var(--font-data); font-size: var(--step-000); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted);
  padding: 8px 12px; border: 1px solid transparent; border-radius: 3px;
}
.nav-links a:hover{ color: var(--fg); border-color: var(--border); }
.nav-links a[aria-current="page"]{ color: var(--c-black); background: var(--accent); }
.nav-cta{ display: flex; align-items: center; gap: 14px; }
.nav-text-link{
  font-family: var(--font-data); font-size: var(--step-000); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--fg-muted);
  /* 19px tall in body copy (the "Uniquely" cards on home) — same class of miss
     as the phone/footer links above, just a different context. Harmless in the
     header, where the surrounding nav padding already gave it room. */
  display: inline-block; padding: 6px 0; min-height: 24px;
}
.nav-text-link:hover{ text-decoration-color: var(--accent); color: var(--accent); }
.btn-sm{ padding: 9px 18px; font-size: var(--step-000); }
.loc-select{
  appearance: none; -webkit-appearance: none; background: var(--bg-raised);
  border: 1px solid var(--border); color: var(--fg); font-family: var(--font-data);
  font-size: var(--step-000); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 8px 30px 8px 12px; border-radius: 3px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23f5a623'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.loc-select:hover{ border-color: var(--accent); }
.nav-links-mobile-extra{ display: none; }
.nav-order-mobile{ display: none; }
.nav-toggle{ display: none; background: none; border: none; color: var(--fg); font-size: 1.6rem; cursor: pointer; line-height: 1; }

@media (max-width: 920px){
  .nav-links{
    position: fixed; inset: 62px 0 0 0; background: var(--c-black-soft);
    flex-direction: column; align-items: flex-start; padding: var(--sp-3) 20px; gap: var(--sp-2);
    overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ font-size: var(--step-1); width: 100%; }
  .nav-links-mobile-extra{
    display: block; margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px solid var(--border); width: 100%;
  }
  .nav-links-mobile-extra label{
    display: block; font-family: var(--font-data); font-size: var(--step-000);
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-strong); margin-bottom: 8px;
  }
  .nav-links-mobile-extra .loc-select{ width: 100%; }
  .nav-cta{ display: none; }
  .nav-order-mobile{ display: inline-flex; }
  .nav-toggle{ display: grid; }   /* grid + the align/justify above centres the icon */
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative; padding: var(--sp-6) 0 var(--sp-5); text-align: center;
  background:
    radial-gradient(circle at 50% -10%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 55%),
    repeating-linear-gradient(-45deg, transparent 0 40px, color-mix(in oklab, var(--accent) 5%, transparent) 40px 41px),
    var(--c-black);
  border-bottom: 1px solid var(--border);
  overflow: clip;
}
.hero .eyebrow{ justify-content: center; }
.hero p.lead{ max-width: 640px; margin: 0 auto var(--sp-2); font-size: var(--step-1); }
.hero .btn-row{ justify-content: center; }
.hero-trophy{ width: clamp(64px, 8vw, 96px); margin: 0 auto var(--sp-3); opacity: 0.92; }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero-trophy{
      animation: hero-scale linear;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    @keyframes hero-scale{
      from{ transform: scale(1); }
      to{ transform: scale(1.08); }
    }
  }
}

/* ==========================================================================
   Broadcast ticker — pure CSS marquee, no JS. Evergreen content only (see
   templates/partials.js renderTicker) so it never goes stale between builds.
   ========================================================================== */
.ticker{ overflow: hidden; background: var(--c-black-soft); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ticker-track{
  display: inline-flex; width: max-content; padding: 8px 0;
  font-family: var(--font-data); font-size: var(--step-000); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted);
  animation: ticker-scroll 26s linear infinite;
}
.ticker-track span{ padding-right: 60px; }
@keyframes ticker-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none; } }

/* ==========================================================================
   Split-screen location picker (home page entry)
   ========================================================================== */
.split-hero{
  /* 65px header + ~34px ticker */
  display: flex; min-height: calc(100svh - 99px); border-bottom: 1px solid var(--border);
}
.split-half{
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; isolation: isolate;
  transition: flex-grow 0.5s ease, filter 0.5s ease;
  filter: grayscale(55%) brightness(0.85);
}
.split-half::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(-45deg, transparent 0 34px, color-mix(in oklab, var(--c-black) 82%, transparent) 34px 35px),
    linear-gradient(160deg, color-mix(in oklab, var(--accent) 55%, var(--c-black)) 0%, var(--c-black) 85%);
}
.split-half.split-barrie::before{
  background:
    repeating-linear-gradient(45deg, transparent 0 34px, color-mix(in oklab, var(--c-black) 82%, transparent) 34px 35px),
    linear-gradient(200deg, color-mix(in oklab, var(--accent-strong) 55%, var(--c-black)) 0%, var(--c-black) 85%);
}
.split-half::after{ content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--c-black) 30%, transparent); }
.split-content{ position: relative; z-index: 1; padding: var(--sp-3); }
.split-content .eyebrow{ justify-content: center; display: flex; }
.split-content h2{ color: var(--fg); font-size: clamp(2.4rem, 7vw, 5rem); margin-bottom: 6px; }
.split-content p{ color: var(--c-gray-100); margin-bottom: var(--sp-2); }
.split-enter{
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-data);
  font-size: var(--step-000); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg); border-bottom: 2px solid var(--accent); padding-bottom: 4px;
}
.split-divider{
  width: 2px; background: var(--border); flex: 0 0 auto; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
/* The divider line is only 2px wide, and the global `img{max-width:100%}`
   was clamping the logo to that — it rendered as a 22px sliver, so max-width
   has to be released explicitly. No plate or circle behind it: the mark is
   white-and-gold on transparent, so it reads straight over the photos, and a
   drop-shadow carries it over the lighter patches instead of a hard disc. */
.split-divider img{
  flex: 0 0 auto;
  width: clamp(104px, 11vw, 156px);
  height: auto; max-width: none;
  background: none; padding: 0; border: 0; border-radius: 0;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,0.8));
}

/* stadium spotlight — follows the cursor across whichever half is hovered.
   Position set via --mx/--my custom properties from main.js; desktop only,
   listener never attaches under prefers-reduced-motion (see main.js). */
.split-spotlight{
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.16), transparent 60%);
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine){
  .split-half:hover{ filter: grayscale(0%) brightness(1); flex-grow: 1.12; }
  .split-hero:has(.split-half:hover) .split-half:not(:hover){ filter: grayscale(100%) brightness(0.45); flex-grow: 0.88; }
  .split-half:hover .split-spotlight{ opacity: 1; }
}
.split-half:focus-visible{ filter: grayscale(0%) brightness(1); outline: 2px solid var(--accent); outline-offset: -4px; }

@media (max-width: 760px){
  .split-hero{ flex-direction: column; min-height: calc(100svh - 94px); }
  .split-half{ filter: grayscale(0%) brightness(1); }
  .split-divider{ width: 100%; height: 2px; }
  /* MEASURED at a true 375px: the logo rendered 98x110 on a 2px divider, so it
     spilled ~54px into each stacked half and sat on top of "Enter Bradford".
     Smaller here, and the halves get vertical breathing room so the mark has
     somewhere to sit. Desktop is untouched — the divider is a full-height
     column there and never had the problem. */
  .split-divider img{ width: clamp(52px, 15vw, 72px); height: auto; }
  .split-half{ padding-block: var(--sp-4); }
}

/* promo banner + "uniquely" cards, homepage sections below the picker */
.uniquely-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }
@media (max-width: 820px){ .uniquely-grid{ grid-template-columns: 1fr; } }
.uniquely-card{
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-3); text-align: center;
}
.uniquely-card h3{ margin-bottom: 8px; }
.uniquely-card .stat{ font-size: 1.6rem; color: var(--accent); display: block; margin-bottom: 10px; }

.promo-banner{
  border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--sp-4);
  background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 16%, var(--bg-raised)), var(--bg-raised));
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
}
.promo-banner h3{ margin: 0 0 4px; }
.promo-banner p{ margin: 0; }

.social-strip{ text-align: center; }
.social-strip .btn{ margin-top: var(--sp-2); }

/* ==========================================================================
   Broadcast lower-third — "Tonight at Perfect SZN"
   ========================================================================== */
.lower-third{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; justify-content: center;
  transform: translateY(110%);
  transition: transform 0.5s cubic-bezier(.2,.9,.25,1);
}
.lower-third.is-visible{ transform: translateY(0); }
@starting-style{
  .lower-third.is-visible{ transform: translateY(110%); }
}
.lower-third-card{
  width: min(880px, calc(100% - 24px)); margin-bottom: 14px;
  /* A broadcast lower-third legitimately carries a coloured leading edge, but
     a flat solid bar is the generic tell. This ramps orange into the live red
     so the edge reads as a deliberate broadcast device and puts the new red
     token to actual work. */
  background-color: var(--c-black-soft);
  background-image: linear-gradient(180deg, var(--accent), var(--accent-live));
  background-repeat: no-repeat;
  background-size: 5px 100%;
  border: 1px solid var(--border); border-left: 0;
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2);
  /* left padding clears the 5px gradient edge above */
  padding: 12px var(--sp-2) 12px calc(var(--sp-2) + 5px);
}
.lower-third-tag{
  font-family: var(--font-data); font-size: var(--step-000); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-black);
  background: var(--accent); padding: 5px 10px; border-radius: 3px; display: flex; align-items: center; gap: 6px;
}
.lower-third-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--c-black); }
@media (prefers-reduced-motion: no-preference){
  .lower-third-dot{ animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.25; } }
.lower-third-body{ font-family: var(--font-data); font-size: var(--step-00); }
.lower-third-body b{ color: var(--fg); }
.lower-third-close{
  background: none; border: 1px solid var(--border); color: var(--fg-muted);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1;
}
.lower-third-close:hover{ color: var(--fg); border-color: var(--fg); }
@media (max-width: 640px){
  .lower-third-card{ grid-template-columns: 1fr auto; }
  .lower-third-tag{ grid-column: 1 / -1; width: max-content; }
}

/* ==========================================================================
   Location cards / grids
   ========================================================================== */
.loc-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 760px){ .loc-grid{ grid-template-columns: 1fr; } }
.loc-card{
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3); display: flex; flex-direction: column;
}
.loc-card h3{ color: var(--accent); }
.loc-meta{ list-style: none; margin: 0 0 var(--sp-2); padding: 0; color: var(--fg-muted); font-family: var(--font-data); font-size: var(--step-00); }
.loc-meta li{ margin-bottom: 6px; padding-left: 20px; position: relative; }
.loc-meta li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--accent-strong); }

.feature-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-2); }
@media (max-width: 900px){ .feature-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .feature-grid{ grid-template-columns: 1fr; } }
.feature{ background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); }
.feature .stat{ color: var(--accent); font-size: var(--step-1); display: block; margin-bottom: 6px; }

.section-alt{ background: var(--c-black-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.center{ text-align: center; }

/* scroll-reveal on cards, progressively enhanced */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .loc-card, .feature, .special-day{
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    @keyframes rise-in{
      from{ opacity: 0; transform: translateY(18px); }
      to{ opacity: 1; transform: translateY(0); }
    }
  }
}

/* ==========================================================================
   Location page
   ========================================================================== */
.loc-hero{ padding: var(--sp-5) 0 var(--sp-4); border-bottom: 1px solid var(--border); background: var(--c-black-soft); }
.loc-hero-grid{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 820px){ .loc-hero-grid{ grid-template-columns: 1fr; } }
.info-card{ background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); }
.info-card h4{ font-family: var(--font-data); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step-000); color: var(--accent-strong); margin: 0 0 4px; }
.info-card .val{ font-size: var(--step-1); margin: 0 0 var(--sp-2); color: var(--fg); }
.info-card .val:last-child{ margin-bottom: 0; }
.map-embed{ border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: var(--sp-3); }
.map-embed iframe{ width: 100%; height: 280px; border: 0; display: block; filter: grayscale(0.3) invert(0.92) contrast(0.9); }

/* ==========================================================================
   Daily specials — scoreboard grid
   ========================================================================== */
.specials-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-2); }
@media (max-width: 700px){ .specials-grid{ grid-template-columns: 1fr; } }
/* Scoreboard row, not a side-tab card. The thick coloured leading edge this
   used to carry is the single most recognisable tell of generated UI, and it
   was doing no work here. The day now reads as a fixture row: a ruled header
   with the day name set against the panel, which is both less generic and
   closer to the broadcast vernacular the rest of this skin runs on. */
/* The card owns the horizontal padding and the header breaks out of it with a
   negative margin. Doing it the other way round (spacing each child) loses to
   the `.special-day p { margin: 0 0 4px }` shorthand further down the file and
   leaves the copy flush against the border. */
.special-day{
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden;
  padding: 0 var(--sp-3) var(--sp-2);
}
.special-day h4{
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--step-1);
  margin: 0 calc(var(--sp-3) * -1) var(--sp-2);
  padding: 8px var(--sp-3);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.special-day p{ margin: 0 0 4px; font-size: var(--step-00); }
.special-day .tag{ display: inline-block; background: var(--accent-strong); color: var(--c-black); font-family: var(--font-data); font-weight: 700; font-size: var(--step-000); text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 3px; margin-top: 6px; }

/* ==========================================================================
   Menu pages
   ========================================================================== */
.menu-hero{ padding: var(--sp-4) 0 var(--sp-2); text-align: center; }

/* Mobile default: horizontal sticky pill strip above the content.
   Desktop (900px+): becomes a sticky vertical sidebar to the left of the
   content instead — see .menu-layout below. Same markup, CSS only. */
.menu-layout{ padding-top: var(--sp-4); }
.menu-content{ min-width: 0; }

.menu-tabs-wrap{
  position: sticky; top: 63px; z-index: 50; background: var(--bg);
  border-bottom: 1px solid var(--border); margin: 0 -20px var(--sp-3); padding: 0 20px;
}
.menu-tabs{ display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.menu-tabs::-webkit-scrollbar{ display: none; }
.menu-tab{
  flex: 0 0 auto; background: var(--bg-raised); border: 1px solid var(--border); color: var(--fg-muted);
  padding: 7px 16px; border-radius: 20px; font-family: var(--font-data); white-space: nowrap;
  font-size: var(--step-000); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
}
.menu-tab.is-active{ background: var(--accent); color: var(--c-black); border-color: var(--accent); }

/* game-clock scroll progress — mobile only, see below */
.game-clock{ height: 3px; background: var(--border); position: relative; overflow: hidden; }
.game-clock::before{
  content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .game-clock::before{ animation: clock-fill linear; animation-timeline: scroll(root); }
    @keyframes clock-fill{ to{ transform: scaleX(1); } }
  }
}

@media (min-width: 900px){
  .menu-layout{ display: grid; grid-template-columns: 230px 1fr; gap: var(--sp-4); align-items: start; }
  .menu-tabs-wrap{
    position: sticky; top: 85px; margin: 0; padding: 0; border-bottom: none; background: transparent;
    align-self: start; max-height: calc(100vh - 105px); overflow-y: auto;
  }
  .menu-tabs{ flex-direction: column; align-items: stretch; overflow-x: visible; padding: 4px 0; gap: 2px; }
  .menu-tab{
    text-align: left; white-space: normal; border-radius: 4px; background: transparent; border-color: transparent;
    border-left: 3px solid transparent; padding-left: 12px;
  }
  .menu-tab:hover{ color: var(--fg); }
  .menu-tab.is-active{ background: transparent; color: var(--accent); border-left-color: var(--accent); }
  .game-clock{ display: none; }
}

.menu-section{ margin-bottom: var(--sp-5); scroll-margin-top: 130px; }
.menu-section h3{ color: var(--accent-strong); border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: var(--sp-2); }
.menu-section .section-note{ font-size: var(--step-00); margin-top: -6px; margin-bottom: var(--sp-2); }
.menu-items{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); }
@media (max-width: 760px){ .menu-items{ grid-template-columns: 1fr; } }

.menu-item{ border-bottom: 1px dashed var(--border); padding-bottom: var(--sp-2); }
.menu-item-top{ display: flex; align-items: baseline; gap: 10px; }
.menu-item-top h4{
  font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0;
  font-size: var(--step-0); color: var(--fg); margin: 0; flex: 1;
}
.leader{ flex: 1; border-bottom: 1px dotted var(--border); margin: 0 6px 5px; min-width: 12px; }
.menu-item p{ margin: 6px 0 0; font-size: var(--step-00); color: var(--fg-muted); }
.menu-item .tags{ display: flex; gap: 6px; margin-top: 6px; }
.tag-pill{
  font-family: var(--font-data); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border); color: var(--fg-muted);
}
.tag-pill.new{ color: var(--c-black); background: var(--accent-strong); border-color: var(--accent-strong); }
.tag-pill.spicy{ color: #ff8a65; border-color: #ff8a65; }
.tag-pill.veg{ color: #8bc987; border-color: #8bc987; }
.variant-list{ display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--font-data); font-size: var(--step-00); color: var(--fg); }
.variant-list span b{ color: var(--accent); }
.modifiers{ margin-top: 6px; font-size: var(--step-000); color: var(--fg-muted); }
.menu-note{ background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; margin-bottom: var(--sp-3); color: var(--fg-muted); font-size: var(--step-00); }
.ref-list{ list-style: none; margin: 0; padding: 0; color: var(--fg-muted); font-size: var(--step-00); }
.ref-list li{ padding: 8px 0; border-bottom: 1px dashed var(--border); }

/* ==========================================================================
   Reservations / forms
   ========================================================================== */
.form-card{ background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); max-width: 640px; margin: 0 auto; }
.form-row{ margin-bottom: var(--sp-2); }
.form-row label{ display: block; font-family: var(--font-data); font-size: var(--step-000); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-strong); margin-bottom: 6px; }
.form-row input, .form-row select, .form-row textarea{
  width: 100%; background: var(--c-black-soft); border: 1px solid var(--border); color: var(--fg);
  padding: 12px 14px; border-radius: 4px; font-family: var(--font-body); font-size: var(--step-00);
}
.form-row textarea{ resize: vertical; min-height: 100px; }
.form-two{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
@media (max-width: 560px){ .form-two{ grid-template-columns: 1fr; } }
.notice-card{ background: color-mix(in oklab, var(--accent) 12%, var(--bg-raised)); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-4); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--c-black-soft); border-top: 1px solid var(--border); padding: var(--sp-5) 0 var(--sp-3); }
.footer-grid{ display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.footer-grid.footer-grid-2{ grid-template-columns: 1.2fr 1fr; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{ font-family: var(--font-data); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step-000); color: var(--accent-strong); margin: 0 0 14px; }
.footer-grid ul{ list-style: none; margin: 0; padding: 0; }
.footer-grid li{ margin-bottom: 9px; color: var(--fg-muted); font-size: var(--step-00); }
.footer-grid a:hover{ color: var(--accent); }
.footer-bottom{ border-top: 1px solid var(--border); padding-top: var(--sp-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: var(--step-000); color: var(--c-gray-600); }

.badge-todo{
  display: inline-block; background: color-mix(in oklab, var(--accent-strong) 20%, var(--c-black));
  border: 1px solid var(--accent-strong); color: var(--accent-strong);
  font-family: var(--font-data); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 3px; margin-left: 8px; vertical-align: middle;
}

/* ==========================================================================
   404
   ========================================================================== */
.error-page{ text-align: center; padding: var(--sp-6) 0; }
.error-page h1{ font-size: clamp(4rem, 20vw, 9rem); color: var(--accent); }

/* ==========================================================================
   Cinematic intro — SKIN B, home page only
   The viewer starts deep inside the logo; the "camera" pulls back until the
   trophy and wordmark resolve, then the overlay clears to the location picker.
   ==========================================================================
   FAIL-SAFE: display:none is the DEFAULT. The overlay only ever appears
   because JS added .is-running. If the script is blocked, errors, or never
   runs, this markup stays invisible and the page is simply the normal split
   picker — it can never end up stuck covering a paying client's site.
   Everything animated here is transform/opacity/filter only: no layout thrash. */
.intro{
  display: none;
  position: fixed; inset: 0; z-index: 9000;   /* above header (200) + lower-third (300) */
  background: var(--c-black);
  place-items: center;
  overflow: hidden;
}
.intro.is-running{ display: grid; }

.intro-stage{
  display: grid; place-items: center; gap: var(--sp-3);
  text-align: center; padding: var(--sp-3);
}

/* transform-origin sits on the trophy rather than the middle of the canvas,
   so the pull-back reads as emerging from the mark itself, not from the file. */
.intro-logo{
  width: min(42vw, 250px); height: auto;
  transform-origin: 50% 42%;
}

/* The wordmark already lives inside the logo artwork, so this line is the
   tagline instead — it adds a beat rather than repeating what's on screen. */
.intro-word{
  font-family: var(--font-data);
  font-size: var(--step-000);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--accent-strong);
  opacity: 0;                                  /* JS animates this in */
}

.intro-skip{
  position: fixed; right: 18px; bottom: 16px;
  background: none; border: 1px solid var(--border); color: var(--fg-muted);
  font-family: var(--font-data); font-size: var(--step-000);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 7px 14px; border-radius: 3px; cursor: pointer;
}
.intro-skip:hover{ color: var(--fg); border-color: var(--fg); }

/* Scroll is locked only while the overlay is up; the JS always removes this,
   including via the watchdog. */
html.intro-lock, body.intro-lock{ overflow: hidden; }
.error-page{ text-align: center; padding: var(--sp-6) 0; }
.error-page h1{ font-size: clamp(4rem, 20vw, 9rem); color: var(--accent); }

/* ==========================================================================
   Skip link + menu dietary filter — Skin B
   ========================================================================== */
/* Visually hidden until focused — keyboard users otherwise tab the whole
   header on every page before reaching content. */
.skip-link{
  position: absolute; left: 8px; top: -60px; z-index: 10000;
  background: var(--accent); color: var(--c-black);
  font-family: var(--font-data); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: var(--step-000);
  padding: 10px 16px; border-radius: 4px;
  transition: top 0.15s ease;
}
.skip-link:focus{ top: 8px; }

.menu-filters{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0 var(--sp-3); border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}
.menu-filters-label{
  font-family: var(--font-data); font-size: var(--step-000); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-strong);
}
.menu-filters-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip{
  background: var(--bg-raised); border: 1px solid var(--border); color: var(--fg-muted);
  font-family: var(--font-data); font-size: var(--step-000); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 7px 14px; border-radius: 20px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-chip:hover{ color: var(--fg); border-color: var(--fg-muted); }
.filter-chip.is-active{ background: var(--accent); border-color: var(--accent); color: var(--c-black); }
.filter-count{ opacity: 0.65; font-variant-numeric: tabular-nums; }
.filter-chip.is-active .filter-count{ opacity: 0.8; }
.filter-clear{ border-style: dashed; }
.filter-status{
  width: 100%; margin: 0; font-family: var(--font-data);
  font-size: var(--step-000); color: var(--fg-muted);
}

/* ==========================================================================
   Rotating banner — SKIN B ONLY
   Crossfade rather than slide: no horizontal overflow to manage, and only
   opacity animates, so it stays cheap on a phone.
   ========================================================================== */
.rotator{
  position: relative;
  background: var(--c-black-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.rotator-viewport{
  position: relative;
  height: clamp(190px, 30vh, 340px);
}
.rotator-slide{
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.rotator-slide.is-active{ opacity: 1; visibility: visible; }
.rotator-slide img{
  width: 100%; height: 100%; object-fit: cover;
}
/* scrim so the caption and controls stay readable over any photo */
.rotator-slide:not(.is-placeholder)::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--c-black) 20%, transparent) 0%,
    color-mix(in oklab, var(--c-black) 62%, transparent) 100%);
}
.rotator-caption{
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 1;
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: var(--step-2); color: var(--fg);
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}

/* --- placeholder slides: obviously intentional, never look broken --- */
.rotator-slide.is-placeholder{
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px,
      color-mix(in oklab, var(--accent) 4%, transparent) 22px 23px),
    var(--c-black-soft);
}
.rotator-ph{
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: var(--sp-3) var(--sp-2);
  border: 2px dashed color-mix(in oklab, var(--accent) 45%, var(--border));
  border-radius: var(--radius);
  min-width: min(300px, 82vw);
}
.rotator-ph svg{
  width: 30px; height: 30px; fill: none;
  stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round;
  opacity: 0.85;
}
.rotator-ph-label{
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--step-1); color: var(--fg); letter-spacing: 0.01em;
}
.rotator-ph-hint{
  font-family: var(--font-body); font-size: var(--step-000); color: var(--fg-muted);
  max-width: 34ch;
}
.rotator-ph-tag{
  margin-top: 4px;
  font-family: var(--font-data); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--c-black); background: var(--accent-strong);
  padding: 3px 9px; border-radius: 3px;
}

/* --- controls --- */
.rotator-ui{
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
}
.rotator-toggle{
  width: 32px; height: 32px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--c-black) 62%, transparent);
  border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer; padding: 0;
}
.rotator-toggle:hover{ border-color: var(--accent); }
.rotator-icon-pause{
  width: 9px; height: 11px;
  border-left: 3px solid var(--fg); border-right: 3px solid var(--fg);
}
.rotator-toggle.is-paused .rotator-icon-pause{
  width: 0; height: 0; border: 0;
  border-left: 10px solid var(--fg);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  margin-left: 3px;
}
.rotator-dots{ display: flex; gap: 7px; }
.rotator-dot{
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  background: color-mix(in oklab, var(--fg) 35%, transparent);
  border: 1px solid color-mix(in oklab, var(--c-black) 50%, transparent);
  cursor: pointer;
}
.rotator-dot.is-active{ background: var(--accent); border-color: var(--accent); }

/* Reduced motion: no crossfade, no auto-advance (handled in JS too) */
@media (prefers-reduced-motion: reduce){
  .rotator-slide{ transition: none; }
}

/* Sidebar entries for the separate menus (Kids / Lunch / Drinks / Happy Hour)
   that render below the main food list. Marked apart from the food sections so
   it's clear they're different menus, not more food categories. */
.menu-tabs-divider{
  flex: 0 0 auto;
  align-self: stretch;
  border-top: 1px solid var(--border);
  margin: 6px 0;
}
.menu-tab-alt{
  border-style: dashed;
  color: var(--accent-strong);
}
.menu-tab-alt.is-active{
  background: var(--accent-strong); color: var(--c-black);
  border-color: var(--accent-strong); border-style: solid;
}
@media (max-width: 899px){
  /* horizontal pill strip: a vertical rule reads better than a horizontal one */
  .menu-tabs-divider{
    border-top: 0; border-left: 1px solid var(--border);
    margin: 0 4px; align-self: center; height: 22px;
  }
}

/* ==========================================================================
   Photography
   ========================================================================== */
/* Split-hero photo sits BEHIND the ::before scrim. When a photo is present the
   scrim switches from an opaque brand gradient to a translucent darkener, so
   the image reads through while the location name stays legible. */
.split-photo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.split-half.has-photo::before{
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--c-black) 42%, transparent) 0%,
    color-mix(in oklab, var(--c-black) 78%, transparent) 100%);
}
/* Keep the brand tint on hover so the colour/greyscale interaction still reads
   as a Perfect SZN panel rather than a plain photo. */
.split-half.has-photo::after{
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.uniquely-photo{
  /* Smaller than Skin A: on this skin the rotating banner sits directly above
     these cards, and two large photo blocks stacked read as clutter. */
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: 6px; margin-bottom: var(--sp-2);
  background: var(--c-black-soft);   /* holds the space while it loads */
}

/* Menu masthead photo — the overhead spread behind "Full Menu".
   Scoped to the hero only; a photo running under the whole item list would
   need so much darkening to stay readable that the image would disappear. */
.menu-hero.has-photo,
.loc-hero.has-photo{
  position: relative;
  isolation: isolate;
  padding: var(--sp-6) 0 var(--sp-5);
  overflow: hidden;
}
.page-hero-photo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.menu-hero.has-photo::after,
.loc-hero.has-photo::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* stronger at the bottom so the address/phone line stays legible where the
     plated food is brightest */
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--c-black) 55%, transparent) 0%,
    color-mix(in oklab, var(--c-black) 72%, transparent) 55%,
    var(--c-black) 100%);
}
.menu-hero.has-photo .eyebrow,
.loc-hero.has-photo .eyebrow{ color: var(--accent-strong); }

/* The location masthead is a two-column layout, so its banner needs the text
   column to sit above the scrim rather than the grid being pushed around. */
.loc-hero.has-photo{ position: relative; isolation: isolate; overflow: hidden; }
.loc-hero.has-photo .loc-hero-grid{ position: relative; z-index: 1; }
/* the info card keeps a solid ground so address/hours stay readable on top */
.loc-hero.has-photo .info-card{
  background: color-mix(in oklab, var(--c-panel) 92%, var(--c-black));
  backdrop-filter: blur(2px);
}

/* Rotator slides are links now — caption + call to action sit over the photo. */
.rotator-slide{ text-decoration: none; color: inherit; display: block; }
.rotator-copy{
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 1;
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 0 var(--sp-2);
}
.rotator-cta{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data); font-size: var(--step-000); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-black); background: var(--accent);
  padding: 7px 15px; border-radius: 3px;
  transition: background-color 0.15s ease;
}
.rotator-slide:hover .rotator-cta,
.rotator-slide:focus-visible .rotator-cta{ background: var(--accent-strong); }
.rotator-slide:focus-visible{ outline: 3px solid var(--accent); outline-offset: -3px; }
.rotator-slide.is-placeholder{ align-content: center; }
.rotator-ph{ display: grid; justify-items: center; gap: 6px; }

/* Menu typography parity with Skin A.
   Item names inherit the h1-h4 rule, whose 0.98 line-height is meant for big
   display type — on a two-line dish name it reads cramped. Skin A lands at 1.0
   for the same reason; this gives the names room without touching headings.
   The section rules also drop Skin B's negative tracking, which tightens a
   condensed face past comfortable at menu-heading size. */
.menu-item-top h4{ line-height: 1.22; }
.menu-section h3{ letter-spacing: 0.01em; }

/* "PLACEHOLDER" stamped across the empty slides so nobody mistakes them for
   finished design during a walkthrough. Sits behind the label/CTA so the slide
   is still readable and clickable. */
.rotator-ph-stamp{
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 5.5rem);
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--accent) 26%, transparent);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  overflow: hidden;
}
.rotator-slide.is-placeholder .rotator-ph{ position: relative; z-index: 1; }

/* A placeholder slide may carry a stand-in photo. It sits under a heavy scrim
   and the PLACEHOLDER stamp so it can never be mistaken for finished work. */
.rotator-ph-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1;
  filter: saturate(0.75) brightness(0.55);
}
.rotator-slide.is-placeholder:has(.rotator-ph-img){
  background: var(--c-black);
}
.rotator-slide.is-placeholder:has(.rotator-ph-img) .rotator-ph-stamp{
  color: color-mix(in oklab, var(--c-white) 70%, transparent);
  text-shadow: 0 3px 18px rgba(0,0,0,0.85);
}

/* ==========================================================================
   Touch targets — measured at 390px, not assumed
   ==========================================================================
   Apple HIG asks for 44x44pt and WCAG 2.2 for 24x24 CSS px minimum. Several
   controls were under both. Where a control should stay visually small (the
   carousel dots), the HIT AREA is expanded with a pseudo-element instead of
   inflating the dot, so the look is unchanged but the thumb target is not. */
/* Sizing only — must NOT set `display` here. This rule sits after the
   @media (max-width:920px) block, so an unscoped `display:grid` overrode the
   base `display:none` and left the hamburger visible on desktop, where it has
   nothing to open. The mobile media query is what makes it appear; centring
   is done without touching display. */
.nav-toggle{
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.menu-tab{ min-height: 44px; }
.filter-chip{ min-height: 44px; }
.rotator-toggle{ width: 44px; height: 44px; }

.rotator-dot{ position: relative; }
.rotator-dot::after{           /* invisible 44px thumb target around a 9px dot */
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
.rotator-dots{ gap: 2px; }     /* dots keep their spacing; targets now touch */

/* Phone/address links in body copy are easy to miss with a thumb. */
.info-card a, .footer-grid a[href^="tel:"]{
  display: inline-block; padding: 6px 0; min-height: 24px;
}

/* Footer nav links were 19px tall — fine with a mouse, awkward with a thumb. */
.footer-grid li a{
  display: inline-block; padding: 8px 0; min-height: 28px;
}
.skip-link{ min-height: 44px; display: inline-flex; align-items: center; }

/* Footer credit link was 15px tall, same class of miss as the nav links above. */
.footer-bottom a{ display: inline-block; padding: 6px 0; min-height: 24px; }

/* iOS zooms the entire page when a focused field is under 16px. The fluid
   scale lands at ~15.5px on a phone, which was enough to trigger it on every
   form on the site — tap a field, page jumps, user pinches back out.
   max() keeps the fluid scale on larger screens and clamps the floor at 16. */
.form-row input,
.form-row select,
.form-row textarea{
  font-size: max(16px, var(--step-00));
}

/* Menu/events masthead phone link had no class, just an inline colour style
   — a raw <a href="tel:..."> in a <p>, 19px tall. Missed by the .info-card /
   .footer-grid tel: rules above because it matches neither selector. */
.phone-link{ display: inline-block; padding: 6px 0; min-height: 24px; }

/* ==========================================================================
   MOBILE / TABLET FIXES — 2026-08-25
   Found by probing a TRUE 375px viewport. Earlier passes were measuring at
   750px CSS width (the emulator reported device pixels, DPR 2), so none of
   this was visible. Everything below is breakpoint-agnostic: it holds for
   phone and tablet, portrait and landscape.
   ========================================================================== */

/* 1. The phantom black page to the right, on EVERY page.
   The mobile nav panel is parked off-screen at translateX(100%). A transformed
   element still contributes scrollable overflow, so it dragged a full extra
   viewport along behind the page.
   MUST be `clip`, not `hidden`: overflow-x:hidden forces overflow-y to auto,
   creating a scroll container that silently breaks position:sticky on the
   header and the menu tab strip. `clip` clips without becoming a scroller. */
html{ overflow-x: clip; }
body{ overflow-x: clip; }

/* 2. The mobile menu opened as a ~45px sliver jammed under the header.
   Cause: `backdrop-filter` on .site-header. A filtered ancestor becomes the
   containing block for position:fixed descendants, so the panel resolved its
   inset against the 66px header box instead of the viewport. MEASURED: 45px
   tall with the filter, 750px (full viewport) without it.
   The blur is decorative; a solid header at mobile widths costs nothing. */
@media (max-width: 920px){
  .site-header{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--c-black);
  }
  .nav-links{
    /* start flush below the real header rather than a hard-coded 62px */
    inset: var(--header-h, 64px) 0 0 0;
    z-index: 260;                     /* above the header's own 200 */
    height: auto;
    /* Off-screen menus should not be reachable by keyboard or screen reader.
       visibility is delayed out so the slide-away still animates. */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav-links.open{
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
  }
}

/* 3. The category strip is the point of a long menu — it has to stay put.
   It was sticking at a hard-coded top:63px against a 66px header, and at
   z-index 50 against the header's 200, so it slid underneath and vanished.
   --header-h is measured live in main.js (and re-measured on resize,
   orientationchange and webfont load). */
.menu-tabs-wrap{
  top: var(--header-h, 64px);
  z-index: 150;                       /* above content, below the header */
  background: var(--bg);
}

/* 4. One tap should land on the section. scroll-margin-top lets the browser
   do the offset arithmetic, so it stays correct at every breakpoint and in
   both orientations instead of being re-derived in JS on each click. */
.menu-section,
[id^="menu-alt-"]{
  scroll-margin-top: calc(var(--header-h, 64px) + var(--tabs-h, 0px) + 12px);
}

/* A deliberate non-price ("Ask your server") — quieter than a real price and
   visually distinct from the amber "Price TBD" badge, which means missing data. */
.price-note{ color: var(--fg-muted); font-style: italic; font-weight: 500; }

/* ==========================================================================
   Ordering hierarchy — direct loud, aggregators quiet but findable
   ==========================================================================
   Skip and Uber take a large cut, so this stays deliberately lopsided: the
   direct button is full size, the partner links are small pills underneath.
   They are real, tappable, and carry their own logos (people scan for those
   marks) — just never competing with the direct action.

   Earlier version used 13.6px mid-grey text with no logos and Mitchel could not
   find it on the page at all. De-emphasis has a floor: past it you are not
   steering the customer, you are hiding a service they may still want and
   making the page feel evasive. */
.order-options{ display: grid; justify-items: start; gap: 6px; margin-top: var(--sp-3); }
.btn-order-direct{ font-size: var(--step-00); }
.order-direct-note{
  margin: 0; font-family: var(--font-data); font-size: var(--step-000);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-strong);
}

.order-delivery{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0;
}
.order-delivery-label{ font-size: var(--step-000); color: var(--fg-muted); }

.delivery-badge{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 8px; border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--step-000); line-height: 1; color: var(--fg-muted);
  text-decoration: none; background: transparent;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.delivery-badge img{
  width: 20px; height: 20px; display: block; flex: none; border-radius: 4px;
  /* Muted at rest so the badges read as secondary, full colour on hover once
     the customer has deliberately gone looking for delivery. */
  filter: grayscale(1); opacity: .75; transition: filter .18s ease, opacity .18s ease;
}
.delivery-badge:hover, .delivery-badge:focus-visible{
  color: var(--fg); border-color: var(--fg-muted); background: rgba(255,255,255,.05);
}
.delivery-badge:hover img, .delivery-badge:focus-visible img{ filter: none; opacity: 1; }

/* Menu-page hero is centre-aligned, so the block centres with it. */
.menu-hero .order-options{ justify-items: center; justify-self: center; margin-top: var(--sp-4, 24px); }
.menu-hero .order-delivery{ justify-content: center; }