/* =============================================================================
   TA' ĊNUS BOTTEGA
   Large type + whitespace + photography. Not boxes + icons + UI decoration.
   ========================================================================== */

/* --- brand fonts -----------------------------------------------------------
   Licensed .woff2 files go in assets/fonts/ — see the README there.
   Until then the fallback stacks below carry the design.
   ⚠ Brandon Grotesque and Dutch801 XBd BT both need a purchased web licence.
   A Canva subscription does not cover website embedding.

@font-face {
  font-family: 'Dutch801 XBd BT';
  src: url('assets/fonts/dutch801-xbd.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brandon Grotesque';
  src: url('assets/fonts/brandon-grotesque-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brandon Grotesque';
  src: url('assets/fonts/brandon-grotesque-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
--------------------------------------------------------------------------- */

/* --- theme tokens ---------------------------------------------------------- */
:root {
  --ivory:      #F8F2E8;
  --ivory-warm: #FDF8EE;
  --anthracite: #22211D;
  --olive-deep: #1E211C;
  --green:      #6C7A5E;
  --gold:       #C8A15A;
  --cream:      #F0E7D6;
  --logo-yellow: #FAE6A2;   /* sampled from logo-cream.png */
  /* The main call to action ("Reserve a table"): the brand gold in every mode,
     with dark text. Tested against white text: white on this gold is only
     2.4:1 (hard to read in sunlight); the dark text is 6.7:1. A green was
     tried first and read as a delivery app, not Ta' Ċnus. */
  --cta: #C8A15A;
  --cta-hover: #B68E47;
  --on-cta: #1E211C;

  --bg: var(--ivory);
  --fg: var(--anthracite);
  /* 72% clears 4.5:1 against both the ivory and the dark themes;
     62% measured ~4.45:1, fractionally under AA for small text. */
  --muted: color-mix(in srgb, var(--fg) 72%, transparent);
  --faint: color-mix(in srgb, var(--fg) 12%, transparent);
  --accent: var(--green);
  --on-accent: #FFF;

  /* Title — Dutch801 XBd BT, falling back to Lora Bold (same Dutch lineage). */
  --font-title-fallback: 'Frank Ruhl Libre';   /* written by tools/prerender.py */
  --title-weight: 900;
  --font-title: 'Dutch801 XBd BT', var(--font-title-fallback), 'Lora', Georgia, 'Times New Roman', serif;
  /* Subtitle — Lora, a confirmed brand font. */
  --font-subtitle: 'Lora', Georgia, 'Times New Roman', serif;
  /* Headings and body: Brandon Grotesque, the brand's own face. Served by
     Adobe Fonts when a kit id is set (see content.fonts). --font-fallback is
     written by tools/prerender.py from fonts.fallbackFamily, so switching
     stand-in is one word in content.js. */
  --font-fallback: 'Outfit';
  --font-body: 'brandon-grotesque', 'Brandon Grotesque', var(--font-fallback), system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Legacy aliases, kept so nothing breaks if a rule still uses them. */
  --serif: var(--font-subtitle);
  --sans: var(--font-body);

  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --measure: 34rem;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: 380ms;
}

/* Service modes recolour the page. Same site, different time of day. */
[data-mode='cafeteria']      { --bg: var(--ivory);      --fg: var(--anthracite); --accent: var(--green); --on-accent:#FFF; }
[data-mode='weekendKitchen'] { --bg: var(--ivory-warm); --fg: var(--anthracite); --accent: #B08046;      --on-accent:#FFF; }
[data-mode='bottegaNight']   { --bg: var(--olive-deep); --fg: var(--cream);      --accent: var(--gold);  --on-accent:#1E211C; }
[data-mode='closed']         { --bg: #2A2E27;           --fg: var(--cream);      --accent: #9DA88F;      --on-accent:#1E211C; }

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
img, svg { max-width: 100%; display: block; }
figure { margin: 0; }   /* UA default is 1em 40px — it inset the Find Us photo */
/* <picture> only chooses the file (AVIF or JPEG); it must not add a box of
   its own, so every img rule keeps applying as if it weren't there. */
picture { display: contents; }
a { color: inherit; }
/* Every heading is set in the logo's face, Dutch801 XBd BT Extra Bold (or its
   stand-in) — the hero, the section titles, the planner answer, the reviews line. */
h1, h2, h3 { font-family: var(--font-title); font-weight: var(--title-weight); line-height: 1.12; margin: 0; letter-spacing: -.01em; text-wrap: balance; }

/* --- shared ---------------------------------------------------------------- */
.section { padding: clamp(3.5rem, 12vw, 7rem) var(--pad); }
.wrap { max-width: 64rem; margin-inline: auto; }
.eyebrow {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1rem;
}
.h2 { font-size: clamp(2rem, 8vw, 3.25rem); letter-spacing: -.015em; }
.lede { color: var(--muted); max-width: var(--measure); margin: 1rem 0 0; }

/* Buttons are generous, quiet, and always ≥44px tall. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .85rem 1.6rem;
  background: var(--cta); color: var(--on-cta);
  font: 500 1rem/1 var(--font-body); letter-spacing: .01em;
  text-decoration: none; border: 0; border-radius: 2rem; cursor: pointer;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:not(.btn-outline):not(.btn-quiet):hover { background: var(--cta-hover); }
.btn-outline {
  background: none; color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 28%, transparent);
}
.btn-outline:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.btn-quiet {
  /* Plain words beside the main button: no underline (it read as a false
     bottom to the page), no arrow, normal weight. */
  background: none; color: inherit; padding: .85rem .25rem;
  font-weight: 400; border-radius: 0;
  align-self: flex-start;    /* hug the text when the row wraps */
}
.btn-quiet:hover { opacity: .8; transform: none; }
.link {
  color: inherit; text-underline-offset: .28em; text-decoration-thickness: 1px;
  display: inline-flex; align-items: center; min-height: 2.75rem;  /* 44px touch target */
}
.link:hover { text-decoration-color: var(--accent); }
:where(a, button, select, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

/* --- fixed site header ------------------------------------------------------ */
/* Sits over the top of the hero and scrolls away with it. Not sticky: the
   page is one scroll and the bar shouldn't follow you down it. */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  color: var(--cream);
}
.header-inner {
  /* Same left edge as the hero text below it, at every width. */
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem var(--pad);
  min-height: 3.75rem;
}
.header-brand { display: flex; align-items: center; flex: none; }
.header-brand img {
  width: clamp(7.75rem, 32vw, 9.5rem); height: auto; aspect-ratio: 5 / 2;
  object-fit: cover; object-position: center;
  /* The logo file has ~48px of empty space left of the lettering (of 580).
     Pull it back so the lettering lines up with the hero text. */
  margin-left: calc(-48 / 580 * clamp(7.75rem, 32vw, 9.5rem));
}
/* Private Events: the one link to the events page, always in view — beside
   the menu button on phones, after the section links on desktop. Fuchsia is
   the Private Events campaign colour; nothing else on the homepage uses it. */
.header-events {
  /* The colour does the shouting, so the pill itself stays small and neat:
     about the height of the logo's lettering. The tap area is still a full
     44px (the ::before), so it's easy to hit. */
  position: relative; margin-left: auto; flex: none;
  display: inline-flex; align-items: center;
  padding: .36rem .78rem; border-radius: 999px;
  background: #C41564; color: #fff; text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; line-height: 1.2; white-space: nowrap;
}
.header-events::before { content: ''; position: absolute; inset: -.5rem -.25rem; }
.header-events:hover { background: #A30F52; }
.header-nav { display: none; }
.header-toggle {
  margin-left: .25rem; flex: none; color: var(--logo-yellow);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 0; cursor: pointer; border-radius: .6rem;
}
.bars { display: grid; gap: 4px; width: 1.15rem; }
.bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.site-header.is-open .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .bars i:nth-child(2) { opacity: 0; }
.site-header.is-open .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-panel {
  padding: .5rem var(--pad) 1.1rem;
  background: rgba(22, 25, 20, .97);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border-block: 1px solid rgba(240,231,214,.10);
}
.menu-panel nav { display: flex; flex-direction: column; }
/* Scoped to the nav: an unscoped ".menu-panel a" also caught the CTA and
   stripped its padding, so "Reserve a table" jammed against the pill edges. */
.menu-panel nav a {
  color: var(--cream); text-decoration: none;
  display: flex; align-items: center;
  padding: .8rem 0; min-height: 2.75rem;
  border-bottom: 1px solid rgba(240,231,214,.10);
  font-size: 1rem;
}
.menu-cta {
  display: flex; width: 100%; margin-top: 1.1rem;
  padding: .95rem 1.5rem; white-space: nowrap;
}

/* Narrow phones (under 368px): logo and button give a little so the row fits. */
@media (max-width: 23rem) {
  .header-brand img { width: 6.9rem; margin-left: calc(-48 / 580 * 6.9rem); }
  .header-events { padding-inline: .65rem; }
}

/* --- hero ------------------------------------------------------------------ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--pad); padding-bottom: calc(clamp(2rem, 7vw, 3.5rem) + 2rem);   /* room for the scroll cue */
  padding-top: calc(4rem + var(--pad));   /* clear the banner above it */
  color: var(--cream); isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--olive-deep); }
/* Scroll cue: one thin chevron, centred at the foot of the photo. It drifts
   gently; with reduced motion it simply sits there. */
.hero-scroll {
  position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; color: rgba(240, 231, 214, .78);
}
.hero-scroll svg {
  width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(12,14,11,.5));
  animation: hero-scroll 2.6s var(--ease) infinite;
}
.hero-scroll:hover { color: #fff; }
@keyframes hero-scroll { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll svg { animation: none; } }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 600ms var(--ease);
}
.hero-media img.is-live { opacity: 1; }
.hero-media img { object-position: var(--pos, center); }
/* Wide landscape screens show only about half of a tall photo's height, so
   a photo can be framed differently there (images.positionWideByFile). */
@media (min-aspect-ratio: 1/1) and (min-width: 48rem) {
  .hero-media img { object-position: var(--pos-wide, var(--pos, center)); }
}
.hero::before {                       /* keeps text legible over any photo */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    /* a deeper scrim under the fixed header, which sits over this photo */
    linear-gradient(180deg, rgba(20,22,18,.72) 0%, rgba(20,22,18,.34) 16%, rgba(20,22,18,0) 30%),
    linear-gradient(180deg, rgba(20,22,18,.35) 0%, rgba(20,22,18,.12) 38%, rgba(20,22,18,.85) 100%);
}
/* Belt and braces: a soft shadow so small type survives a bright patch. */
.hero-status, .hero-strapline { text-shadow: 0 1px 3px rgba(12,14,11,.55); }
/* The logo file is square with generous transparent padding; crop to the
   wordmark so it reads at a sensible size without a huge empty box. */
.hero-body { max-width: 40rem; }
/* "Trusted by Santa Lucia", a quiet line above the headline. It lived in the
   header until Private Events took that spot. */
.hero-trust {
  /* A quiet frosted panel so it reads over any photo. Deliberately not a
     button: small, squarish corners, no border, no shadow, no hover. */
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
  padding: .38rem .7rem .38rem .75rem; border-radius: .45rem;
  background: rgba(16, 18, 15, .5);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  font-size: .8rem; letter-spacing: .02em; color: #fff;
}
/* The wordmark file is logo-yellow; shown white here to match the text. */
.hero-trust img { height: clamp(1.25rem, 4.4vw, 1.6rem); width: auto; filter: brightness(0) invert(1); }
.hero-headline {
  font-size: clamp(2.1rem, 9.5vw, 4rem);
  line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .75rem;
}
.hero-line { display: block; }
.hero-strapline {
  font-family: var(--font-subtitle); font-style: italic;
  font-size: clamp(1rem, 4vw, 1.25rem);
  color: rgba(240, 231, 214, .82); margin: 0 0 1.5rem;
}
/* No status dot: a coloured pill reads like a server monitor, not a sign in
   a window. The words carry it. */
.hero-status {
  font-size: .95rem; letter-spacing: .02em;
  color: rgba(240,231,214,.95);
}
.hero-status.is-shut { color: rgba(240,231,214,.72); }
.hero-status { margin: .15rem 0 1.75rem; }   /* straight under the headline now */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.hero-actions .btn-outline {
  background: none; color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 28%, transparent);
}
.btn-outline:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.btn-quiet { color: var(--cream); }
.seasonal-note {
  font-family: var(--font-subtitle); font-style: italic; font-size: 1rem;
  color: var(--gold); margin: 0 0 1rem;
}

/* --- day / night toggle ---------------------------------------------------- */
.daynight { padding: clamp(1.5rem, 6vw, 2.25rem) var(--pad) clamp(1.25rem, 5vw, 2rem); }
.toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  max-width: 30rem; margin-inline: auto;
  padding: .35rem; border-radius: 1.15rem;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.toggle-option {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .85rem .6rem; min-height: 3.6rem;
  font: inherit; color: inherit; text-align: center;
  background: none; border: 0; border-radius: .9rem; cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.toggle-option.is-on {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 6px rgba(0,0,0,.14);
}
.toggle-label { font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.toggle-hint { font-size: .72rem; opacity: .78; text-wrap: balance; line-height: 1.3; }   /* no orphaned 'more' */
.toggle-option.is-on .toggle-hint { opacity: .92; }
.toggle-caption {
  text-align: center; color: var(--muted); font-size: .8rem;
  margin: .85rem 0 0;
}

/* --- reviews: one quiet band, never a three-card grid ---------------------- */
.reviews { text-align: center; padding: clamp(1.75rem, 6vw, 2.75rem) var(--pad); border-block: 1px solid var(--faint); }
.stars { color: var(--accent); letter-spacing: .22em; font-size: .95rem; margin: 0; }
.rating { font-family: var(--font-title); font-weight: var(--title-weight); font-size: clamp(1.15rem, 4.6vw, 1.5rem); margin: .35rem 0 0; text-wrap: balance; }
.review-count { color: var(--muted); font-size: .9rem; }
.review-quote {
  font-family: var(--font-subtitle); font-style: italic;
  font-size: clamp(1rem, 3.9vw, 1.2rem);
  line-height: 1.5; max-width: 32rem; margin: .9rem auto 0; text-wrap: pretty;
}
.review-by {
  font-style: normal; font-size: .76rem; letter-spacing: .04em;
  color: var(--muted); margin-top: .5rem;
}
.review-links { display: flex; justify-content: center; align-items: center; gap: .9rem; margin: .4rem 0 0; font-size: .9rem; }

/* --- opening hours: the most-requested information on the site ------------- */
.hours-list { list-style: none; margin: 2.25rem 0 0; padding: 0; max-width: 32rem; }
.hours-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .85rem .9rem .85rem .75rem;
  border-bottom: 1px solid var(--faint);
  border-left: 2px solid transparent;
  font-size: 1.0625rem;
}
.hours-row.is-today {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-weight: 600;
}
.hours-row .day { letter-spacing: .01em; }
.hours-row .time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours-row.is-closed .time { color: var(--muted); }
.today-flag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-left: .6rem; font-weight: 600; }
.hours-note { color: var(--muted); font-size: .9rem; margin-top: 1.1rem; }
.status-strip { font-size: .95rem; color: var(--muted); }
.status-strip.is-open { color: var(--accent); }

/* --- visit selector: a prompt, not a booking widget ------------------------ */
.selector { border-top: 1px solid var(--faint); }
.selector-controls { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.field { position: relative; flex: 1 1 10rem; min-width: 9.5rem; }
.field label {
  display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .4rem;
}
.field select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 3rem; padding: .8rem 2.5rem .8rem 1rem;
  font: inherit; font-size: 1rem; color: inherit;
  background: transparent; border: 1px solid var(--faint); border-radius: .75rem;
  cursor: pointer; transition: border-color var(--t) var(--ease);
}
.field select:hover { border-color: var(--accent); }
/* A closed day has no times to pick: say so, and don't look tappable. */
.field select:disabled { color: var(--muted); cursor: default; opacity: 1; }
.field select:disabled:hover { border-color: var(--faint); }
.field::after {
  content: ''; position: absolute; right: 1.1rem; bottom: 1.35rem;
  width: .5rem; height: .5rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}
.selector-result { margin-top: 1.75rem; }
.selector-result .arrow { color: var(--accent); font-size: 1.4rem; line-height: 1; }
.selector-answer { font-family: var(--font-title); font-weight: var(--title-weight); font-size: clamp(1.75rem, 7vw, 2.6rem); margin: 0 0 .35rem; }
.selector-answer.is-closed { color: var(--muted); }
.selector-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 1rem 0 0; }
/* The planner asks the question; this section answers it. Keep them close. */
#serve { padding-top: clamp(1.75rem, 6vw, 2.5rem); }
/* Without the planner above it, What We Serve gets a full section's space. */
.selector[hidden] + #serve { padding-top: clamp(3.5rem, 12vw, 7rem); border-top: 1px solid var(--faint); }
/* What We Serve's own By day | By night switch (when the planner is off). */
.serve-switch-row { margin-bottom: clamp(1.5rem, 5vw, 2.25rem); }
.serve-switch {
  display: inline-flex; gap: .3rem; padding: .3rem; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.serve-switch-opt {
  font: inherit; font-weight: 600; font-size: .95rem; letter-spacing: .01em; color: inherit;
  min-height: 2.75rem; min-width: 7.5rem; padding: .5rem 1.2rem; border: 0; border-radius: 999px;
  background: none; cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.serve-switch-opt[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 6px rgba(0,0,0,.14); }
.selector { padding-bottom: clamp(1.75rem, 5vw, 2.25rem); }
.selector-sub { color: var(--muted); }
.selector-reset { margin-top: 0; min-height: 2.75rem; font-size: .9rem; color: var(--muted); background: none; border: 0; padding: .5rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }

/* --- what we serve --------------------------------------------------------- */
.serve-media { margin: 0 0 clamp(2rem, 6vw, 3rem); }
/* Photos are shown whole, at their own shape — never cropped into a box.
   They're all portrait (2:3 to square); a landscape frame cut half of each
   one away. width/height attributes reserve the space before they load. */
.serve-media img, .contact-media img { width: 100%; height: auto; border-radius: .5rem; }
.serve-menu { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.serve-groups { list-style: none; margin: 2rem 0 0; padding: 0; }

/* --- best sellers: five by day, five by night -------------------------------- */
.bests { margin-top: clamp(2.75rem, 9vw, 4.5rem); }
.bests-h { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.bests-note { color: var(--muted); margin: .5rem 0 0; }
/* Phones: one swipeable row, the next card peeking in so it's clearly a row.
   It bleeds to the screen edges; scroll-snap keeps cards lined up. */
.bests-row {
  list-style: none; padding: 0 var(--pad); margin: 1.5rem calc(-1 * var(--pad)) 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: .9rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bests-row::-webkit-scrollbar { display: none; }
.best { scroll-snap-align: start; }
.best-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .6rem; }
.best-name { margin: .7rem 0 0; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.best-note { margin: .2rem 0 0; font-size: .86rem; line-height: 1.4; color: var(--muted); }
@media (min-width: 64rem) {
  .bests-row { grid-auto-flow: row; grid-template-columns: repeat(var(--cols, 5), 1fr); overflow: visible;
    padding: 0; margin-inline: 0; gap: 1.75rem 1.25rem; }
}
.serve-group { padding: 1.35rem 0; border-top: 1px solid var(--faint); }
.serve-group dt { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .45rem; }
.serve-group dd { margin: 0; font-family: var(--font-subtitle); font-size: clamp(1.15rem, 4.4vw, 1.45rem); line-height: 1.4; }
.serve-foot { color: var(--muted); font-size: .9rem; margin-top: 2rem; }

/* --- partners: a quiet row of marks, not a logo wall ----------------------- */
.partners { border-top: 1px solid var(--faint); }
.partners-intro { color: var(--muted); max-width: var(--measure); margin: .35rem 0 0; }
.partners-list {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: .5rem .75rem; text-align: center;
}
/* Subgrid so the marks, the names and the descriptors each sit on one
   shared baseline — the three logos are different shapes and the names are
   different lengths, so without this the descriptors stagger. */
.partner {
  display: grid; grid-row: span 3; grid-template-rows: subgrid;
  justify-items: center; align-content: start; gap: .5rem;
}
/* The marks sit on the page itself: no plate, no ring. All three have
   transparent backgrounds now, so each carries its own shape. Matched on
   height rather than width, since two are circles and one is a wide crest. */
.partner-mark {
  height: clamp(3.4rem, 14vw, 4.4rem); width: auto; max-width: 100%;
  object-fit: contain; align-self: center;
}
.partner-name {
  font-family: var(--font-subtitle); font-weight: 700; font-size: clamp(.82rem, 3.1vw, .95rem);
  line-height: 1.25; text-wrap: balance; align-self: start;
}
.partner-note { font-size: .74rem; letter-spacing: .04em; color: var(--muted); align-self: start; }

/* --- find us --------------------------------------------------------------- */
.contact { border-top: 1px solid var(--faint); }
.contact-media img { margin-bottom: 2.5rem; }
/* One grid, equal columns: the two buttons are always the same size,
   stacked on phones and side by side from tablet up. */
.contact-actions {
  display: grid; grid-template-columns: 1fr; gap: .75rem;
  max-width: 24rem; margin-top: 2rem; align-items: start;
}
.contact-actions .btn { width: 100%; }
.contact-alt { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.contact-call { font-size: .95rem; }
.contact-secondary { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: .95rem; margin-top: 1.25rem; }
.address { font-style: normal; color: var(--muted); margin-top: 2rem; line-height: 1.7; }

/* --- footer ---------------------------------------------------------------- */
.footer { padding: clamp(2.5rem, 8vw, 4rem) var(--pad); border-top: 1px solid var(--faint); color: var(--muted); font-size: .875rem; }
.footer-inner { max-width: 64rem; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.footer-sign { margin: 0; line-height: 1.55; }
.footer-line { display: block; }
.footer-name { font-weight: 600; color: var(--fg); }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; }
.footer-menu { margin: 0; }
.footer-menu a { color: var(--fg); }
.footer a { text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer a:hover { text-decoration: underline; }

/* --- sticky action bar ----------------------------------------------------- */
/* Appears once the hero is gone, hides again at "Find us". Three actions,
   no navigation — the page is still a single scroll (§27). */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: .6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--faint);
  transform: translateY(105%); opacity: 0; visibility: hidden;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), visibility var(--t);
}
.sticky.is-visible { transform: none; opacity: 1; visibility: visible; }
.sticky-inner {
  max-width: 34rem; margin-inline: auto;
  display: flex; align-items: stretch; gap: .5rem;
}
.sticky-primary { flex: 1 1 auto; min-height: 2.9rem; padding-inline: 1rem; }
.sticky-action {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .1rem;
  width: 2.9rem; min-height: 2.9rem; padding: 0;
  border-radius: 50%; text-decoration: none; color: inherit;
  box-shadow: inset 0 0 0 1px var(--faint);
}
.sticky-action:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.sticky-action svg { width: 1.45rem; height: 1.45rem; fill: currentColor; }
/* Keep the footer clear of the bar while it's up. */
.sticky.is-visible ~ .footer { padding-bottom: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  .sticky { transition: opacity .01ms, visibility .01ms; transform: none; }
}

.preview-banner {
  /* Under the header, over the photo: never on top of a button. */
  position: absolute; top: 4.1rem; left: 50%; transform: translateX(-50%);
  z-index: 90; white-space: nowrap; max-width: calc(100% - 1rem); overflow: hidden; text-overflow: ellipsis;
  padding: .35rem .65rem; border-radius: .5rem;
  background: #B3261E; color: #fff; font: 600 .7rem/1.3 var(--font-body);
  box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none;
}

/* --- seasonal layer: subtle, never structural ------------------------------ */
.seasonal-strip { position: absolute; top: 0; left: 0; right: 0; height: 90px; z-index: -1; opacity: .85; pointer-events: none; }

/* --- larger screens: more photography, more whitespace, same hierarchy ----- */
@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
  .hours-row { padding-inline: 1.1rem .5rem; font-size: 1.15rem; }
  /* One column, but a wide screen: a full-width portrait photo would be
     taller than the screen. Cap the height; the width follows the photo. */
  .serve-media img, .contact-media img { width: auto; max-width: 100%; max-height: min(34rem, 75svh); }
  .contact-actions { grid-template-columns: 1fr 1fr; max-width: 30rem; gap: 1rem; }
  .header-brand img { width: 11.5rem; margin-left: calc(-48 / 580 * 11.5rem); }
  .selector-controls { max-width: 34rem; }
  .partners-list { gap: 2rem; max-width: 44rem; }
}
/* The inline nav needs the room: four links, one of them "Bottega By Night
   Menu", beside the logo and the Santa Lucia line. At tablet width they
   wrapped and ran into the partner logo, so the burger stays until here. */
@media (min-width: 64rem) {
  .header-nav {
    display: flex; gap: 1.5rem; margin-left: auto;
    font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  }
  .header-nav a {
    color: var(--logo-yellow); text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 2.75rem;
  }
  .header-nav a:hover { color: #fff; }
  .header-events { margin-left: 1.75rem; }
  .header-toggle, .menu-panel { display: none; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
  .serve-media { margin-bottom: 0; }
  .serve-media img, .contact-media img { width: 100%; max-height: none; }
  .contact-media img { margin-bottom: 0; }
}

/* --- night menu page ------------------------------------------------------ */
/* Its own page, so the menu image only loads for people who ask for it. A
   plain bar instead of the homepage header: there's no hero to sit on. */
.menu-page { background: var(--bg); color: var(--fg); }
.menu-bar { border-bottom: 1px solid var(--faint); }
.menu-bar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 64rem; margin-inline: auto; padding: .6rem var(--pad); min-height: 3.75rem;
}
.menu-bar-back {
  color: var(--logo-yellow); text-decoration: none; font-size: .9rem;
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.menu-bar-back:hover { text-decoration: underline; text-underline-offset: .25em; }
.menu-main { padding: clamp(2rem, 7vw, 3.5rem) var(--pad) clamp(2.5rem, 8vw, 4rem); }
.menu-wrap { max-width: 44rem; }
/* The menu is shown whole and as wide as the column allows; pinch-zoom is
   left on so the prices can be read on a phone. */
.menu-figure { margin: 1.75rem 0 0; }
.menu-figure a { display: block; }
.menu-figure img { width: 100%; height: auto; border-radius: .5rem; background: #fff; }
.menu-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }
.menu-more { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 1rem 0 0; }
/* Food | Drinks switch. Pinned under the top of the screen while you scroll
   a long menu, so the other one is always a tap away. Without JavaScript the
   sheets just stack and the switch works as two jump links. */
.menu-tabs {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: .35rem; width: max-content; max-width: 100%;
  margin: 1.5rem 0 0; padding: .3rem;
  background: color-mix(in srgb, var(--bg) 88%, #000); border-radius: 999px;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.6);
}
.menu-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; min-width: 7rem; padding: .5rem 1.25rem; border-radius: 999px;
  color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: .02em;
}
.menu-tab[aria-selected="true"] { background: var(--cta); color: var(--on-cta); }
.menu-sheet { scroll-margin-top: 4.5rem; }   /* land below the pinned switch */
.menu-sheet + .menu-sheet { margin-top: 2.5rem; }
.menu-tabbed .menu-sheet + .menu-sheet { margin-top: 0; }
.menu-sheet .menu-figure { margin-top: 1.25rem; }

/* --- motion: reveals only, no theatrics ------------------------------------ */
/* Only hide once JS has armed the observer — see observeReveals(). Without
   this, a script failure would leave the whole page invisible. */
.reveals-armed .reveal { opacity: 0; transform: translateY(14px); }
.reveal { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.reveals-armed .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-media img { opacity: 1; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}