@charset "UTF-8";
/* ==========================================================================
   Avenida — site stylesheet
   Migrated off Squarespace. One token system, mobile-first, no per-page CSS.

   Structure
     1  Fonts
     2  Tokens
     3  Reset + base
     4  Layout primitives
     5  Wave section divider
     6  Buttons
     7  Header / mobile nav        (MIGRATION.md §2.1)
     8  Footer
     9  Carousel
    10  Accordion (FAQ)
    11  Contact card
    12  Marquee
    13  Promo popup               (MIGRATION.md §12)
    14  Menu component brand map  (MIGRATION.md §5 / §5.1)
    15  Page sections
    16  Utilities

   Type scale and colours were read off the live Squarespace render, so the
   values below are measurements, not guesses. Two notes on deliberate
   deviations from the old site:
     - The old site defined the brand palette three times with conflicting
       values (#C92D0E vs #C73112 red, #FFFBE6 vs #fffbe6 cream, etc). The
       contact card therefore rendered a different red to everything else.
       Unified here on the theme values.
     - Buttons on the old site used `futura-pt` (Adobe Fonts, not
       self-hostable). Substituted Poppins 700 — same geometric-sans
       lineage, already loaded, no third-party dependency.
   ========================================================================== */


/* 1 — Fonts =============================================================== */

@font-face {
  font-family: 'FatFrank';
  src: url('fonts/FatFrank-Heavy.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Angelface';
  src: url('fonts/Angelface.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 2 — Tokens ============================================================== */

:root {
  /* Brand palette — the single source of truth for colour on this site. */
  --cream:  #FFFBE6;
  --red:    #C92D0E;
  --orange: #FFAC48;
  --blue:   #005996;
  --green:  #10C48C;

  /* Semantic aliases. Sections set these to re-theme their whole subtree,
     so components never need to know which section they're sitting in. */
  --bg:     var(--cream);
  --ink:    var(--blue);     /* live body colour on every page; sections override */
  --ink-on: var(--cream);

  /* Button label + hover pair. Red-palette bands are the default; the blue
     bands override these, so a pill never hovers to a colour from the other
     half of the palette. */
  --btn-ink:       var(--red);
  --btn-hover-bg:  var(--orange);
  --btn-hover-ink: var(--red);

  /* Fonts */
  --font-display: 'FatFrank', 'Futura', 'Trebuchet MS', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Angelface', 'Brush Script MT', cursive;

  /* Type scale — clamp(mobile, fluid, desktop), matching the live render.
     h1 46.4 -> 66.4px | h2 34.2 -> 46.2px | h3 18 -> 36.2px | h4 22 -> 26.1px */
  --step-1: clamp(3.025rem, 2.6071rem + 1.7143vw, 4.15rem);
  --step-2: clamp(2.215rem, 1.9643rem + 1.0286vw, 2.89rem);
  --step-3: clamp(1.125rem, 0.7034rem + 1.7295vw, 2.26rem);
  --step-4: clamp(1.3798rem, 1.2869rem + 0.3813vw, 1.63rem);
  --step-lede: clamp(1.3375rem, 1.2679rem + 0.2857vw, 1.525rem);
  --text: 1rem;
  --text-sm: 0.875rem;

  --leading-display: 1.23;
  --leading-heading: 1.3;
  --leading-body: 1.8;

  /* Spacing */
  --gutter: clamp(1.4375rem, 0.5rem + 3vw, 3rem);
  --section-y: clamp(3rem, 1.5rem + 6vw, 6.5rem);
  --measure: 68ch;
  --wrap: 1215px;         /* feature columns / FAQ / hero row */
  --wrap-wide: 1325px;    /* the banner headline runs wider */
  --wrap-narrow: 1086px;  /* contact card */

  /* Radii — the site's corner language: fully-round pills, big soft cards. */
  --pill: 300px;
  --radius-card: clamp(1.875rem, 0.9rem + 3.9vw, 3.75rem);
  --radius-inner: clamp(1.25rem, 0.6rem + 2.6vw, 3.125rem);

  /* Wave divider: 12vw wavelength, 2vw peak-to-peak (measured off the
     Squarespace clip-path). Used by .wave and consumed in §5. */
  --wave-height: 2vw;

  --transition: 0.2s ease;
}


/* 3 — Reset + base ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is only `display: none` in the UA stylesheet, so any
   author `display` rule silently beats it — a component with `display: grid`
   renders while still marked hidden. Asserted once here so every JS-toggled
   element can rely on the attribute alone. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text);
  font-weight: 300;
  line-height: var(--leading-body);
  /* Stops the wave dividers (which sit flush to the section edges) from
     ever producing a horizontal scrollbar. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-heading);
}

h1 { font-size: var(--step-1); line-height: var(--leading-display); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-4); }

p { margin: 0 0 1.5rem; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

a { color: inherit; transition: color var(--transition); }
a:hover { color: var(--orange); }

img, svg, video { display: block; max-width: 100%; height: auto; }

ul, ol { margin: 0 0 1.5rem; padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }

hr {
  height: 0;
  margin: 0 0 1.875rem;
  /* Browsers set `color: gray` on the hr itself, so a currentColor border
     resolves to grey rather than the surrounding ink. Inherit it back. */
  color: inherit;
  border: 0;
  border-top: 1px solid currentColor;
}

button { font: inherit; color: inherit; }

/* Visible focus for keyboard users on every interactive thing. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link — first thing in the tab order on every page. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  padding: 0.75rem 1.5rem;
  transform: translate(-50%, -120%);
  background: var(--cream);
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--pill) var(--pill);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translate(-50%, 0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.no-scroll { overflow: hidden; }


/* 4 — Layout primitives =================================================== */

/* A full-bleed band of colour. Sections declare their own palette by
   setting --bg / --ink, which every descendant inherits. */
.section {
  position: relative;
  padding-block: var(--section-y);
  background-color: var(--bg);
  color: var(--ink);
}

/* Sections that carry a wave on an edge need room for it, otherwise the
   wave overlaps the content. */
.section--wave-bottom { padding-bottom: calc(var(--section-y) + var(--wave-height)); }
.section--wave-top    { padding-top: calc(var(--section-y) + var(--wave-height)); }

.section--flush { padding-block: 0; }

/* Section themes — the combinations that appear on the site. */
.theme-red    { --bg: var(--red);    --ink: var(--cream); }
.theme-cream  { --bg: var(--cream);  --ink: var(--red); }
.theme-cream-blue { --bg: var(--cream); --ink: var(--blue); }
.theme-orange { --bg: var(--orange); --ink: var(--cream); }
.theme-orange-blue { --bg: var(--orange); --ink: var(--blue); }
.theme-blue   { --bg: var(--blue);   --ink: var(--cream); }
.theme-green  { --bg: var(--green);  --ink: var(--cream); }

/* Every band in the blue half of the palette — including the header and
   footer, which carry these same classes — swaps the button pair to blue
   labels hovering onto green. */
.theme-blue,
.theme-cream-blue,
.theme-orange-blue {
  --btn-ink:       var(--blue);
  --btn-hover-bg:  var(--green);
  --btn-hover-ink: var(--blue);
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); }
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); }
.wrap--full { width: 100%; }

/* Vertical rhythm without per-element margins. */
.stack > * + * { margin-top: var(--stack-gap, 1.5rem); }

.center { text-align: center; }
.measure { max-width: var(--measure); }
.measure-center { max-width: var(--measure); margin-inline: auto; }

/* Two-up split used by the hero, rooftop and happy-hour sections. */
.split {
  display: grid;
  gap: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: var(--split-cols, 1fr 1fr); }
  .split--art-right { --split-cols: 1.15fr 0.85fr; }
  .split--art-left  { --split-cols: 0.85fr 1.15fr; }
  /* Hero uses the live site's fixed measurements rather than a ratio. */
  .split--hero {
    grid-template-columns: 287px minmax(0, 601px);
    justify-content: center;
    gap: 141px;
  }
}

/* Equal-width columns that collapse to one on phones. */
.cols {
  display: grid;
  gap: clamp(1.75rem, 0.75rem + 4vw, 4.5rem);
}
@media (min-width: 48rem) {
  .cols--2 { grid-template-columns: repeat(2, 1fr); }
}
/* The two-up feature rows sit on the live site's 546 + 123 + 546 rhythm. */
@media (min-width: 62rem) {
  .cols--2 { gap: 123px; }
}
@media (min-width: 62rem) {
  .cols--3 { grid-template-columns: repeat(3, 1fr); }
}


/* 5 — Wave section divider ================================================ */

/* Reproduces the Squarespace "wavy" divider: wavelength 12vw, peak-to-peak
   2vw. The SVG viewBox is 120 x 2 (ten 12-unit wavelengths) and stretches
   with preserveAspectRatio="none", so one wavelength always equals 12% of
   the viewport width exactly as it did on the old site.

   The wave is filled with the colour of the section it points into, and sits
   on the boundary between two bands. Markup:

     <svg class="wave" viewBox="0 0 120 2" preserveAspectRatio="none" ...>
   */
.wave {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  /* Bleed a full pixel past the section edge, not half of one: at 1x, or at a
     fractional zoom/DPR, 0.5px rounds to no overlap at all and the antialiased
     edge of the stretched shape shows the band underneath as a hairline. The
     extra 1px of height is what bleeds, so the crest line stays put. */
  height: calc(var(--wave-height) + 1px);
  margin-block: -1px;
  pointer-events: none;
}

.wave--bottom { bottom: 0; }
.wave--top { top: 0; transform: scaleY(-1); }

/* Wave fill = the neighbouring band's colour. */
.wave-fill-cream  { fill: var(--cream); }
.wave-fill-red    { fill: var(--red); }
.wave-fill-orange { fill: var(--orange); }
.wave-fill-blue   { fill: var(--blue); }
.wave-fill-green  { fill: var(--green); }

/* Content must clear the wave. */
.section > .wrap { position: relative; z-index: 2; }


/* 6 — Buttons ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px minimum tap target (MIGRATION.md §2). */
  min-height: 44px;
  padding: 0.7em 3.1em;
  background-color: var(--btn-bg, var(--cream));
  color: var(--btn-ink, var(--red));
  border: 2px solid var(--btn-bg, var(--cream));
  border-radius: var(--pill);
  font-family: var(--font-body);
  font-size: var(--text);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}

.btn:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-ink);
  transform: translateY(-1px);
}

/* Outline variant — used for the reservation button in the red header. */
.btn--outline {
  background-color: transparent;
  color: var(--btn-bg, var(--cream));
}
.btn--outline:hover {
  background-color: var(--btn-bg, var(--cream));
  color: var(--btn-ink, var(--red));
  border-color: var(--btn-bg, var(--cream));
}

.btn--wide { padding-inline: 3.5em; }
.btn--block { width: 100%; }

.btn-row {
  display: grid;
  gap: clamp(1rem, -0.75rem + 4.5vw, 2rem);
}
@media (min-width: 48rem) {
  .btn-row {
    grid-template-columns: repeat(2, minmax(0, 546px));
    gap: 123px;
    justify-content: center;
  }
  /* A row with one button drops to a single column, otherwise it sits in the
     left half of a centred pair — i.e. visibly off-centre. */
  .btn-row:has(> :only-child) { grid-template-columns: minmax(0, 546px); }
}
/* Matches the live pill height at both ends of the range. */
.btn-row .btn { min-height: clamp(59px, 55.7px + 0.86vw, 68px); }


/* 7 — Header / mobile nav ================================================= */
/* The standard slide-in nav from MIGRATION.md §2.1. Behaviour is identical
   across sites; only the icon, colours, fonts and panel radius differ. */

.topnav-container {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  padding-block: 1rem;
  background-color: transparent;
  color: var(--cream);
}

/* The header continues the page's first band, so it carries a theme class in
   the markup (theme-red / theme-blue / theme-orange) rather than a fixed
   colour. Falls back to red if a page forgets one. */
.site-header {
  background-color: var(--bg, var(--red));
  color: var(--ink, var(--cream));
}
.site-header:not([class*="theme-"]) { background-color: var(--red); color: var(--cream); }

.nav-logo { width: 46px; height: auto; }
@media (min-width: 62rem) {
  .nav-logo { width: clamp(120px, 10vw, 158px); }
}

.topnav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.25rem + 1.5vw, 2rem);
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--text);
  font-weight: 300;
  text-decoration: none;
  white-space: nowrap;
}

/* Current page gets an underline, as on the old site. */
.nav-link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Desktop: cream pill, label in the header's own palette. Deliberately a notch
   smaller than the surrounding nav links so the pill doesn't dominate the bar. */
.nav-link-reserve {
  padding: 0.5em 1.1em;
  font-size: 0.8125rem;
  background-color: var(--cream);
  color: var(--btn-ink, var(--red));
  border: 1.5px solid var(--cream);
  border-radius: var(--pill);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-color var(--transition), color var(--transition);
}
.nav-link-reserve:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-ink);
}

/* Nav items that open a submenu. */
.nav-group { position: relative; }

.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--text);
  font-weight: 300;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.nav-group-toggle:hover,
.nav-group-toggle[aria-expanded="true"] { color: var(--orange); }

.nav-group-toggle svg {
  width: 10px;
  height: 10px;
  transition: transform var(--transition);
}
.nav-group-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-submenu li { margin: 0; }

/* Hamburger — hidden on desktop. */
.icon {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.icon svg { width: 34px; height: auto; overflow: visible; }
.icon svg path {
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}
/* Wave → X when open (keys off the three paths). */
.icon[aria-expanded="true"] svg path:nth-of-type(1) { transform: translateY(12px) rotate(45deg); }
.icon[aria-expanded="true"] svg path:nth-of-type(2) { opacity: 0; }
.icon[aria-expanded="true"] svg path:nth-of-type(3) { transform: translateY(-12px) rotate(-45deg); }

/* Desktop submenu: a floating card under its toggle. */
@media (min-width: 62rem) {
  .nav-submenu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    z-index: 45;
    min-width: max-content;
    gap: 0.125rem;
    padding: 0.5rem;
    transform: translateX(-50%);
    background: var(--cream);
    color: var(--red);
    border-radius: 0.875rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  }
  .nav-submenu[hidden] { display: none; }

  /* Invisible bridge across the gap to the toggle, so travelling from the
     label to the card doesn't cross a dead zone and close the menu. */
  .nav-submenu::before {
    content: "";
    position: absolute;
    inset: -0.6rem 0 100% 0;
  }

  /* Pointer notch under the toggle. */
  .nav-submenu::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--cream);
    border-radius: 2px;
  }

  /* Full-width rows rather than bare text, so the whole row is the target. */
  .nav-submenu .nav-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    transition: background-color var(--transition), color var(--transition);
  }
  .nav-submenu .nav-link:hover,
  .nav-submenu .nav-link:focus-visible {
    background-color: color-mix(in srgb, var(--red) 10%, transparent);
    color: var(--red);
  }
  .nav-submenu .nav-link[aria-current="page"] {
    background-color: color-mix(in srgb, var(--red) 10%, transparent);
    font-weight: 700;
    text-decoration: none;
  }

  /* Open the menu with a short fade-up. Exit stays instant — the panel is
     display:none while hidden, which nothing can transition out of. */
  .nav-submenu:not([hidden]) { animation: nav-submenu-in 0.16s ease-out both; }
  @keyframes nav-submenu-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-0.35rem); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-submenu:not([hidden]) { animation: none; }
  }
}

/* The parent of the current page reads as active too, so the section is still
   signposted once the card is closed. */
.nav-group:has(.nav-link[aria-current="page"]) > .nav-group-toggle {
  text-decoration: underline;
  text-underline-offset: 5px;
}

@media (max-width: 61.9375rem) {
  .icon { display: inline-flex; z-index: 40; }

  /* Avenida's nav is a full-bleed overlay rather than the standard's narrow
     side panel — same mechanics and same JS, restyled per store (which
     MIGRATION.md §2.1 allows for colours, radius and slide-in side). */
  .topnav {
    position: fixed;
    inset: 0 -100% 0 auto;
    width: 100vw;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0;
    padding: 6rem var(--gutter) 2.5rem;
    overflow-y: auto;
    background: var(--bg, var(--red));
    color: var(--ink, var(--cream));
    border-radius: 0;
    /* `visibility` keeps the closed panel out of the tab order and the
       accessibility tree — an off-screen panel is still focusable otherwise,
       so keyboard users would tab into an invisible menu. Transitioning it
       alongside `right` means it flips to visible immediately on open but
       holds until the slide-out finishes on close. */
    visibility: hidden;
    transition: right 0.3s ease, visibility 0.3s ease;
    z-index: 30;
  }
  .topnav.show { right: 0; visibility: visible; }

  .topnav .nav-link,
  .topnav .nav-group-toggle {
    min-height: 44px;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 1.875rem);
    font-weight: 300;
  }

  /* Submenus sit inline and stay open once expanded. A faint tinted block
     groups them under their toggle, which bare text at a smaller size didn't
     do on a full-screen panel. */
  .nav-group { display: flex; flex-direction: column; align-items: center; }
  .nav-submenu {
    align-items: stretch;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.25rem 1.75rem;
    background-color: color-mix(in srgb, var(--cream) 12%, transparent);
    border-radius: 1rem;
  }
  .nav-submenu[hidden] { display: none; }
  .nav-submenu .nav-link {
    justify-content: center;
    font-size: 1.25rem;
    opacity: 0.85;
  }
  .nav-submenu .nav-link[aria-current="page"] { opacity: 1; font-weight: 700; }

  /* Green pill at the foot of the panel, as on the live site. */
  .topnav .nav-link-reserve {
    margin-top: 2rem;
    padding: 0.75em 2.5em;
    background-color: var(--green);
    border-color: var(--green);
    color: var(--cream);
    font-size: var(--text);
  }
  .topnav .nav-link-reserve:hover {
    background-color: var(--cream);
    border-color: var(--cream);
    color: var(--btn-ink, var(--red));
  }
}


/* 8 — Footer ============================================================== */

/* Like the header, the footer carries a theme class so it can match the page
   (blue on /menu and /brunch-events, red elsewhere). Note it is set
   independently of the header — on /jobs the header is orange but the footer
   is red, as on the live site. */
.site-footer {
  background-color: var(--bg, var(--red));
  color: var(--ink, var(--cream));
}
.site-footer:not([class*="theme-"]) { background-color: var(--red); color: var(--cream); }

.footer-inner {
  display: grid;
  gap: clamp(1.5rem, 0.5rem + 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 1rem + 3vw, 3rem);
  text-align: center;
}
@media (min-width: 48rem) {
  .footer-inner {
    grid-template-columns: 1fr auto;
    text-align: left;
  }
}

.footer-logo { width: clamp(80px, 8vw, 120px); margin-inline: auto; }
@media (min-width: 48rem) {
  .footer-logo { margin-inline: 0 auto; }
}

.footer-hours {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 30rem) {
  .footer-hours { flex-direction: row; gap: 2.5rem; align-items: flex-start; }
}

/* These are <h2> for the document outline — every page's last content heading
   is an h2, so an h4 here skipped a level (flagged by Lighthouse). Sized back
   down to the old h4 step so the footer looks identical. */
.footer-hours-items h2 { margin: 0; font-size: var(--step-4); }
.footer-hours-items p { margin: 0; }

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
}
@media (min-width: 48rem) {
  .footer-socials { justify-content: flex-start; }
}

/* The linktree page shares the icon sizing and hover, but not the footer's
   own alignment — see .linktree-socials. */
.footer-socials a,
.linktree-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icons are 26px but the hit area needs to be 44px (MIGRATION.md §2). */
  min-width: 44px;
  min-height: 44px;
}

.footer-socials svg,
.linktree-socials svg {
  width: 26px;
  height: 26px;
  color: var(--cream);
  transition: color var(--transition), transform var(--transition);
}
.footer-socials a:hover svg,
.linktree-socials a:hover svg {
  color: var(--green);
  transform: scale(1.15);
}

.jobs-button {
  --btn-bg: var(--cream);
  /* Label picks up the footer's own background, so it reads correctly whether
     the footer is red or blue. */
  --btn-ink: var(--bg, var(--red));
  padding: 0.45em 2.5em;
  text-transform: none;   /* live keeps this one mixed-case */
}


/* 9 — Carousel ============================================================ */
/* Scroll-snap track; the arrows just nudge scrollLeft, so it degrades to a
   plain swipeable strip with JS off. */

.carousel {
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* Keeps the keyboard focus ring visible on the focused slide. */
  scroll-padding-inline: 0;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track > * {
  flex: 0 0 85%;
  max-width: 85%;
  scroll-snap-align: center;
}
@media (min-width: 48rem) {
  .carousel-track > * { flex-basis: 500px; max-width: 500px; }
}

.carousel-track img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  background: var(--cream);
  color: var(--btn-ink, var(--red));
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.carousel-btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-ink); }
.carousel-btn[disabled] { opacity: 0.35; cursor: default; }
.carousel-btn[disabled]:hover { background: var(--cream); }

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

@media (min-width: 48rem) {
  .carousel-btn { display: inline-flex; }
}

/* Swipe hint for phones, where the arrows are hidden. */
.carousel-hint {
  margin: 0.75rem 0 0;
  font-size: var(--text-sm);
  text-align: center;
  opacity: 0.75;
}
@media (min-width: 48rem) { .carousel-hint { display: none; } }


/* 10 — Accordion (FAQ) ==================================================== */
/* One <details>/<summary> per item: open/close is native, so it works with
   JS off, is keyboard-accessible for free, and needs no aria wiring. */

.accordion { width: 100%; }

.accordion-item {
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.accordion-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  /* 44px tap target via padding. */
  padding: 1.125rem 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
@media (min-width: 48rem) {
  .accordion-item > summary { padding: 1.25rem 0; font-size: var(--text); }
}

/* Hide the native disclosure triangle. */
.accordion-item > summary::-webkit-details-marker { display: none; }
.accordion-item > summary::marker { content: ""; }

.accordion-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-inline: 0.625rem;
  /* Masked rather than a coloured image, so the sunburst always takes the
     section's text colour (the raster version was cream-on-cream, i.e.
     invisible, on the brunch FAQs). */
  background-color: currentColor;
  -webkit-mask: url("images/logo/sunburst.svg") center / contain no-repeat;
  mask: url("images/logo/sunburst.svg") center / contain no-repeat;
  transition: transform 0.25s ease;
}
.accordion-item[open] .accordion-icon { transform: rotate(45deg); }

.accordion-body {
  padding-bottom: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}
@media (min-width: 48rem) {
  .accordion-body { font-size: var(--text-sm); }
}
.accordion-body a { color: var(--green); }
.accordion-body a:hover { color: var(--orange); }
.accordion-body > :last-child { margin-bottom: 0; }

/* Slide the panel open. `interpolate-size` lets height animate from a
   keyword; browsers without it just snap open, which is fine. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .accordion-item::details-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .accordion-item[open]::details-content { height: auto; }
}


/* 11 — Contact card ======================================================= */

.contact-card {
  display: grid;
  /* The body has its own padding, so a wide gap here reads as a canyon
     between the map and the copy — the two stack up. */
  gap: clamp(1.25rem, 0.5rem + 1.5vw, 2rem);
  padding: clamp(0.625rem, 0.4rem + 0.6vw, 1rem);
  background-color: var(--cream);
  color: var(--red);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
@media (min-width: 62rem) {
  .contact-card {
    grid-template-columns: 400px 1fr;
    align-items: stretch;
  }
}

.contact-map {
  position: relative;
  aspect-ratio: 1;
  background-image: url("images/illustrations/map-base.webp");
  background-position: center;
  background-size: cover;
  border-radius: var(--radius-inner);
}

/* The pin is a link to the venue on Google Maps; it wiggles on hover. */
.contact-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  transform: translate(-30%, -130%);
  transform-origin: 50% 100%;
}
.contact-map-pin img { width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .contact-map-pin:hover,
  .contact-map-pin:focus-visible {
    animation: pin-wiggle 0.6s ease-in-out infinite;
  }
  @keyframes pin-wiggle {
    0%,  100% { transform: translate(-30%, -130%) scale(1.1) rotate(0deg); }
    25%       { transform: translate(-30%, -130%) scale(1.1) rotate(-5deg); }
    75%       { transform: translate(-30%, -130%) scale(1.1) rotate(5deg); }
  }
}

.contact-body {
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 0.25rem + 1.5vw, 1.75rem);
}
/* A little extra on the right keeps the copy off the card edge without the
   text block looking shoved out of the middle. */
@media (min-width: 62rem) {
  .contact-body { padding-right: 2.5rem; }
}

.contact-body > h2 { font-size: clamp(1.75rem, 0.8586rem + 3.6571vw, 4.15rem); }

/* Rule sits with the footer it separates, not glued under the details block:
   the pair is pushed to the bottom of the card as one unit. */
.contact-body > hr {
  width: 100%;
  margin: auto 0 1.25rem;
}

.contact-details {
  display: grid;
  gap: 0.625rem;
  padding: 0.625rem 0 1.25rem;
}
@media (min-width: 30rem) {
  .contact-details {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 3.125rem;
    padding-top: 1.875rem;
  }
}

.contact-details h3 { margin-bottom: 0.25rem; }
.contact-details a { text-decoration: none; }

.contact-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.contact-hours { margin: 0; }

.contact-socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.contact-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.contact-socials svg {
  width: 22px;
  height: 22px;
  transition: color var(--transition), transform var(--transition);
}
@media (min-width: 48rem) {
  .contact-socials svg { width: 28px; height: 28px; }
}
.contact-socials a:hover svg { color: var(--orange); transform: scale(1.1); }


/* 12 — Marquee ============================================================ */
/* Duplicated track scrolled with a transform. The copy is aria-hidden so
   screen readers read the strip once, and it holds still for anyone who
   asked for reduced motion. */

.marquee {
  display: flex;
  overflow: hidden;
  gap: 0;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2.5rem;
  min-width: 100%;
  padding-right: 2.5rem;
  animation: marquee-scroll var(--marquee-duration, 32s) linear infinite;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--font-display);
  font-size: var(--step-4);
  white-space: nowrap;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; overflow-x: auto; }
  .marquee-track { animation: none; }
  .marquee-track[aria-hidden="true"] { display: none; }
}


/* 13 — Promo popup ======================================================== */
/* MIGRATION.md §12 — ships inactive; the script no-ops until switched on. */

.promo-popup[hidden] { display: none; }

.promo-popup {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.promo-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.promo-popup__card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  align-items: center;
  width: min(92vw, 980px);
  max-height: 88dvh;
  overflow-y: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  background: var(--cream);
  color: var(--red);
  border-radius: var(--radius-inner);
  text-align: center;
}
@media (min-width: 48rem) {
  .promo-popup__card { grid-template-columns: 1fr 1fr; text-align: left; }
}

.promo-popup__art { border-radius: var(--radius-inner); }

.promo-popup__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  background: var(--cream);
  color: var(--red);
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.promo-popup__close:hover { background: var(--red); color: var(--cream); }

.promo-popup__title { margin-bottom: 0.75rem; }
.promo-popup__body { font-size: var(--text-sm); }
.promo-popup__cta { --btn-bg: var(--red); --btn-ink: var(--cream); margin-top: 0.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .promo-popup__card { animation: promo-in 0.3s ease; }
  @keyframes promo-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}


/* 14 — Menu component brand map =========================================== */
/* MIGRATION.md §5 — menus/menu.css and menus/menu.js are shared and never
   edited per store. Everything below is token assignment only. */

:root {
  --menu-text: var(--blue);
  --menu-surface: var(--cream);
  --menu-accent: var(--green);
  --menu-font-display: var(--font-script);   /* big category headings */
  /* Angelface has a small x-height, so it needs a much larger size than the
     component's 2em default to read at the same optical scale. */
  --menu-category-size: 6em;
  --menu-category-size-sm: 4.2em;
  --menu-font-heading: var(--font-display);  /* section headings, item names */
  --menu-font-body: var(--font-body);
  --menu-skeleton-base: color-mix(in srgb, var(--blue) 12%, var(--cream));
  --menu-skeleton-shimmer: color-mix(in srgb, var(--blue) 22%, var(--cream));
}

/* Category headings use the script face; everything else follows the tokens
   above. menus/menu.css now carries the shape (radii, sizes, which token goes
   where), so this page needs token assignment only — no overrides. */
/* §5.1 — the skeleton has to mirror the finished menu so there's no jump
   when the sheet data lands. The real menu is a centred single column of
   rows with big display headings, so the skeleton matches that. */
.menu-skeleton { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); margin-inline: auto; }
.menu-skeleton .skeleton-heading { height: var(--step-2); margin: 2.5rem auto 1.25rem; max-width: 18ch; }
.menu-skeleton .skeleton-section-title { height: var(--step-3); margin: 2rem auto 1rem; max-width: 12ch; }
.menu-skeleton .skeleton-grid { display: grid; gap: 1.25rem; }
.menu-skeleton .skeleton-item { display: grid; gap: 0.5rem; }
.menu-skeleton .skeleton-line { height: 0.85rem; }
.menu-skeleton .skeleton-price { height: 0.85rem; width: 4rem; }


/* 15 — Page sections ====================================================== */

/* --- Hero ---------------------------------------------------------------- */
.hero { --stack-gap: 0.5rem; }

/* Mobile: the skull is a small accent pinned to the top-right corner. The
   h1's long lines fall below it, so it never needs to wrap around it. */
.hero-row { position: relative; }
.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 78px;
  height: auto;
}
@media (min-width: 62rem) {
  .hero-art { position: static; width: 287px; }
}
.hero p {
  margin: 0;
  color: var(--orange);
  font-size: var(--step-lede);
}
.theme-red .hero p { color: var(--orange); }

/* --- Banner (sunburst + headline + buttons) ------------------------------ */
.banner { --stack-gap: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); }
.banner-mark { width: clamp(48px, 5vw, 72px); margin-inline: auto; }

/* --- Feature copy columns ----------------------------------------------- */
.feature h2 { margin-bottom: 1rem; }

/* --- Stacked display hero (brunch) --------------------------------------- */
/* Three display lines at h1 scale, the middle one in orange. Marked up as a
   single <h1> with spans so there's still exactly one heading here. */
.hero-stack {
  display: grid;
  gap: 0;
  line-height: 1;
  text-align: center;
}
.hero-stack span { display: block; }
.hero-stack .line-1 { font-size: clamp(3.4313rem, 0.6131rem + 11.5619vw, 11.0188rem); }
.hero-stack .line-2 { font-size: clamp(1.6375rem, 0.2931rem + 5.5143vw,  5.2563rem); }
.hero-stack .line-3 { font-size: clamp(2.7938rem, 0.4956rem + 9.4286vw,  8.9813rem); }
.hero-stack .line-accent { color: var(--orange); }

/* --- Happy hour --------------------------------------------------------- */
.hh-art { width: min(100%, 320px); margin-inline: auto; }

/* --- Venue / logo grids (about, press) ---------------------------------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  align-items: center;
}
.logo-grid img { width: 100%; max-width: 160px; margin-inline: auto; }

/* Sister-venue wall on the About page: four 212px logos per row, last row
   centred (matching the live layout). */
.venue-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  justify-content: center;
  /* 4 x 212px + 3 x 11px gap — holds the live site's four-per-row layout
     instead of letting a fifth logo slip onto the row. */
  max-width: 881px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.venue-grid li { flex: 0 0 calc(50% - 6px); margin: 0; }
@media (min-width: 48rem) {
  .venue-grid li { flex: 0 0 212px; }
}
.venue-grid img { width: 100%; height: auto; }

.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
}
.press-grid a { display: block; border-radius: var(--radius-inner); overflow: hidden; }
.press-grid img { width: 100%; transition: transform 0.3s ease; }
.press-grid a:hover img { transform: scale(1.03); }

/* --- Photo grids (brunch, events) --------------------------------------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(0.75rem, 0.25rem + 1.5vw, 1.25rem);
}
.photo-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-inner);
}
.photo-grid img.portrait { aspect-ratio: 4 / 5; }

/* --- Bullet lists with the brand bullet --------------------------------- */
.brand-list { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.brand-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}
.brand-list li::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55em;
  background: currentColor;
  border-radius: 50%;
}

/* --- Illustration accents ----------------------------------------------- */
.accent-art { width: min(100%, 260px); margin-inline: auto; }

/* --- Info panels (events venue cards) ----------------------------------- */
/* Three cards; a swipeable snap row with dots on phones, a plain grid from
   tablet up. Uses the same .carousel plumbing so there's one scroller in the
   codebase, not two. */
.info-panels {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
}
.info-panels::-webkit-scrollbar { display: none; }

/* Column layout so the copy sits at the top and the photo is pinned to the
   bottom. The cards are equal height (flex/grid both stretch by default), so
   pinning the photos means their top edges line up across the row however
   many lines of copy each card carries. */
.info-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 82%;
  margin: 0;
  scroll-snap-align: center;
}
.info-panel h3 { margin-bottom: 0.5rem; }
.info-panel p {
  /* A notch heavier than body copy: this is small cream text on orange. */
  font-size: var(--text-sm);
  font-weight: 400;
}
.info-panel img {
  width: 100%;
  /* Floors the gap under the copy, then takes up whatever slack is left. */
  margin-top: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-inner);
}

@media (min-width: 48rem) {
  .info-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
    /* Constrained to the page measure — without this the grid runs full-bleed
       and the outer cards get clipped by the viewport edge. */
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    padding: 0;
    overflow: visible;
  }
  .info-panel { flex: none; }
}

/* Dots mirror the snap position on phones; hidden once it becomes a grid. */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.carousel-dots span {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.3;
  transition: opacity var(--transition);
}
.carousel-dots span.active { background: var(--green); opacity: 1; }
@media (min-width: 48rem) { .carousel-dots { display: none; } }

/* --- Info cards (brunch: drinks / DJ / food) ----------------------------- */
/* Rounded red cards with an illustration on top. Swipeable snap row with
   dots on phones, three-up grid from tablet, sharing the .info-panels
   scroller behaviour above. */
.info-cards {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
}
.info-cards::-webkit-scrollbar { display: none; }

.info-card {
  flex: 0 0 min(358px, 88%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 30px;
  background: var(--red);
  color: var(--cream);
  border-radius: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  scroll-snap-align: center;
  text-align: center;
}
@media (min-width: 62rem) {
  .info-card { border-radius: 50px; }
}
.info-card img { width: clamp(64px, 6vw, 88px); height: auto; }
.info-card h3 { margin: 0.25rem 0; }
.info-card p { font-size: var(--text-sm); margin-bottom: 0.5rem; }
.info-card .brand-list { margin: 0; text-align: left; }
.info-card .brand-list li { font-size: var(--text-sm); justify-content: flex-start; }
.info-card a { color: var(--cream); text-decoration: underline; }
.info-card a:hover { color: var(--orange); }

@media (min-width: 48rem) {
  .info-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 363px));
    gap: 5%;
    justify-content: center;
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    padding: 0;
    overflow: visible;
    align-items: stretch;
  }
  .info-card { flex: none; }
}

/* --- Offer panels (brunch events: drinks / DJ / food) -------------------- */
/* Tall green cards. Named .offer-* rather than .info-panel because the events
   page already owns .info-panel with a completely different treatment — on the
   old site those only coexisted because they lived on separate pages. */

.offer-panels {
  display: flex;
  gap: 5%;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 500px;
  margin: 0;
  padding: 30px;
  background-color: var(--green);
  color: var(--cream);
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.offer-panel img {
  width: auto;
  max-height: 150px;
  margin: 0 auto;
}

.offer-panel h3 {
  margin: 0.5rem 0;
  color: var(--cream);
}

.offer-panel > p { font-size: var(--text-sm); }

/* Brand sunburst bullets, left-aligned inside a centred card. */
.offer-panel ul {
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  list-style-image: url("images/illustrations/bullet.webp");
  list-style-position: inside;
  text-align: left;
}
.offer-panel li { margin-bottom: 0.35rem; }

.list-highlight { font-weight: 700; }

@media (max-width: 48rem) {
  /* Swipeable row on phones, with the dots below reflecting position. */
  .offer-panels {
    flex-direction: row;
    gap: 20px;
    padding: 0 var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .offer-panels::-webkit-scrollbar { display: none; }

  .offer-panel {
    flex: 0 0 85%;
    scroll-snap-align: center;
    min-height: 450px;
    border-radius: 40px;
  }
}

/* Lede under the panels. */
.info-description {
  margin: clamp(2rem, 1rem + 3vw, 3rem) auto 0;
  max-width: var(--measure);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  text-align: center;
}
.text-standout { color: var(--green); }

/* --- Why panel (brunch events pricing callout) --------------------------- */

.why-panel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--green);
  color: var(--cream);
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
@media (min-width: 48rem) {
  .why-panel-container { flex-direction: row; align-items: center; }
}

.why-panel {
  width: 100%;
  padding: 30px var(--gutter) 0;
  color: var(--cream);
}
@media (min-width: 48rem) {
  .why-panel { width: 90%; padding: 50px; }
}

.why-panel h2 { margin: 0 0 1rem; color: var(--cream); }

.why-panel ul {
  margin: 0;
  padding: 0;
  list-style-image: url("images/illustrations/bullet.webp");
  list-style-position: inside;
}
.why-panel li { margin-bottom: 0.5rem; }

.why-panel-right {
  width: 100%;
  padding: 15px var(--gutter) 45px;
  text-align: center;
}
@media (min-width: 48rem) {
  .why-panel-right { width: 250px; flex-shrink: 0; padding: 50px; }
}

.why-panel-right p {
  margin: 0;
  padding: 0;
  color: var(--blue);
  font-weight: 800;
}

.why-panel-right h3 {
  margin: 0 0 1.25rem;
  padding: 0;
  color: var(--cream);
}

/* --- Platter cards (brunch food platters) -------------------------------- */
/* Deliberately NOT called .menu-section / .menu-item: those belong to the
   sheet-driven menu component (menus/menu.css) and reusing the names would
   collide the moment both loaded on one page. */

.platters-title {
  margin-bottom: 2.5rem;
  text-align: center;
}

.platter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.25rem;
  /* Reset the base ul padding/markers — this is a card grid, not a bullet list. */
  margin: 0;
  padding: 0;
  list-style: none;
}

.platter {
  margin: 0;
  padding: 1.25rem;
  background: var(--cream);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .platter:hover { transform: translateY(-4px); }
}

.platter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.625rem;
}

.platter-name {
  color: var(--green);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.platter-price {
  color: var(--green);
  font-weight: 700;
  white-space: nowrap;
}

.platter-desc {
  color: var(--blue);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* --- Booking card (cream panel on a colour band) ------------------------- */

/* Colours are driven by the locals below so the same panel can sit on any
   band. Three pairings are in use: the default blue/green (brunch events),
   --red (brunch) and --red-solid (events). */
.booking-panel-container {
  --booking-ink: var(--blue);          /* body copy */
  --booking-heading: var(--orange);    /* heading */
  --booking-accent: var(--blue);       /* pill border + label */
  --booking-accent-fill: transparent;  /* pill background at rest */
  --booking-accent-hover: var(--green);/* pill fill on hover */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--cream);
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
@media (min-width: 48rem) {
  .booking-panel-container { flex-direction: row; align-items: center; }
}

/* Brunch: red type, red outlined pill. */
.booking-panel-container--red {
  --booking-ink: var(--red);
  --booking-heading: var(--red);
  --booking-accent: var(--red);
  --booking-accent-hover: var(--red);
}

/* Events: red type, solid orange pill with a red label. */
.booking-panel-container--red-solid {
  --booking-ink: var(--red);
  --booking-heading: var(--red);
  --booking-accent: var(--orange);
  --booking-accent-fill: var(--orange);
  --booking-accent-label: var(--red);
  --booking-accent-hover: var(--red);
}

.booking-left {
  width: 90%;
  padding: 5% 5% 0;
  color: var(--booking-ink);
  text-align: center;
}
@media (min-width: 48rem) {
  .booking-left { width: 70%; padding: 2.5%; text-align: left; }
}

.booking-left h2 { margin: 0 0 0.5rem; color: var(--booking-heading); }
.booking-left p { margin: 0; }

.booking-right {
  width: 90%;
  padding: 1.5rem 5% 2.5rem;
  text-align: center;
}
@media (min-width: 48rem) {
  .booking-right { width: 25%; padding: 2.5%; }
}

/* Pill in the panel's accent — outlined unless the variant fills it. Either
   way it flips to the hover colour with a cream label, as on the old site. */
.booking-right .btn {
  --btn-bg: var(--booking-accent);
  background-color: var(--booking-accent-fill);
  border: 3px solid var(--booking-accent);
  color: var(--booking-accent-label, var(--booking-accent));
}
.booking-right .btn:hover {
  background-color: var(--booking-accent-hover);
  border-color: var(--booking-accent-hover);
  color: var(--cream);
}

/* --- Application form (jobs) -------------------------------------------- */
.form-grid {
  display: grid;
  gap: 1.25rem;
  max-width: 640px;
  margin-inline: auto;
  text-align: left;
}
@media (min-width: 40rem) {
  .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

.field { display: grid; gap: 0.375rem; }
.field > span { font-weight: 700; font-size: var(--text-sm); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  background: var(--cream);
  color: var(--red);
  border: 2px solid color-mix(in srgb, var(--red) 35%, transparent);
  border-radius: 0.75rem;
  font: inherit;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); }

.checkbox-grid { display: grid; gap: 0.5rem; }
@media (min-width: 40rem) { .checkbox-grid { grid-template-columns: 1fr 1fr; } }

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
}
.checkbox input { width: 20px; min-height: 20px; height: 20px; padding: 0; flex-shrink: 0; }

.form-note { font-size: var(--text-sm); }
.field-hint { font-size: var(--text-sm); opacity: 0.75; font-weight: 400; }

/* Off-screen rather than display:none — bots skip hidden inputs, and the
   wrapper is aria-hidden with tabindex="-1" so people never reach it. */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hidden until the JS fills it in, so an empty <p> never takes up a gap row. */
.form-error {
  display: none;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 2px solid var(--red);
  color: var(--red);
}
.form-error.is-visible { display: block; }

.form-success {
  display: grid;
  gap: 1rem;
  justify-items: center;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.form-success .btn { margin-top: 0.5rem; }

/* --- Linktree page ------------------------------------------------------ */
/* Centred with `margin: auto` on the child rather than `place-content: center`
   on the parent: six buttons plus the logo are taller than a short phone in
   landscape, and centred grid content overflows past the top edge where it
   can't be scrolled to. Auto margins collapse instead of overflowing. */
.linktree {
  display: flex;
  min-height: 100dvh;
  padding-block: clamp(2rem, 1rem + 4vw, 3.5rem);
}
.linktree-inner {
  width: min(100% - 2 * var(--gutter), 500px);
  margin: auto;
  text-align: center;
}
.linktree-logo { width: clamp(150px, 20vw, 220px); margin: 0 auto 1.25rem; }
.linktree-handle {
  margin-bottom: 0.375rem;
  font-family: var(--font-body);
  font-size: var(--text);
  letter-spacing: 0.04em;
}
.linktree-tagline {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--cream);
}
.linktree-rule { width: 64px; height: 2px; margin: 1.5rem auto; background: var(--green); border: 0; }

.linktree-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.link-buttons { display: grid; gap: 0.875rem; margin-top: 2rem; }

/* Reservations lead, in the same green the nav uses for that CTA, so the
   stack has a primary action rather than six identical pills. Every other
   label comes from the page's theme via --btn-ink. */
.link-buttons .btn--reserve {
  --btn-bg: var(--green);
  --btn-ink: var(--cream);
}
/* Inverts instead of going green-on-green like the rest of the stack. */
.link-buttons .btn--reserve:hover {
  background-color: var(--cream);
  border-color: var(--cream);
  color: var(--btn-hover-ink);
}

.linktree-footer { margin-top: 2.5rem; font-size: 0.75rem; letter-spacing: 0.04em; opacity: 0.75; }


/* 16 — Utilities ========================================================== */

.text-cream  { color: var(--cream); }
.text-red    { color: var(--red); }
.text-orange { color: var(--orange); }
.text-blue   { color: var(--blue); }
.text-green  { color: var(--green); }

.bold { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }