/* ==========================================================================
   BOCAS — Restaurante Bocas, Aguadilla PR
   Single stylesheet. Plain CSS, no build step.

   Structure
     01  Tokens (colours, type, spacing)   <- edit here to re-skin the template
     02  Reset & base
     03  Layout helpers
     04  Typography
     05  Buttons & links
     06  Header / navigation
     07  Hero
     08  Sections (story, highlights, interlude, reserve band)
     09  Menu page
     10  About page (story, room, team, jobs)
     11  Footer
     12  Motion & reduced-motion
     13  Responsive
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   Palette is taken straight from the Bocas brand guide. The OKLCH value from
   the guide is kept in a comment beside each hex so the source of truth is
   never lost.
   ========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --navy:        #080D16;  /* oklch(0.16 0.02 260)   Midnight Navy  — primary background */
  --slate:       #202938;  /* oklch(0.28 0.03 260)   Slate Blue     — secondary surface  */
  --teal:        #19342D;  /* oklch(0.30 0.035 175)  Deep Teal-Green— accent surface     */
  --gold:        #B37903;  /* oklch(0.62 0.13 75)    Brass Gold     — primary accent     */
  --amber:       #E48E26;  /* oklch(0.72 0.15 65)    Amber Glow     — warm highlight     */
  --stone:       #B1AEA3;  /* oklch(0.75 0.015 90)   Warm Stone     — secondary text     */
  --ivory:       #F1EEE7;  /* oklch(0.95 0.01 90)    Ivory          — primary text       */

  /* --- Derived surfaces --------------------------------------------------
     Page backgrounds are a single flat Midnight Navy everywhere — no
     gradients, and no near-navy tints that would read as banding down the
     page. Where a panel genuinely needs to sit apart from the page (the jobs
     block), it uses Slate Blue, which is a brand colour in its own right. */
  --hairline:    rgba(179, 121, 3, 0.28);
  --hairline-soft: rgba(241, 238, 231, 0.12);
  --scrim:       rgba(5, 8, 15, 0.72);

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.7vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.7rem + 3.9vw, 5.25rem);

  /* --- Space ------------------------------------------------------------- */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --measure: 62ch;
  --max:     1200px;
  --max-wide: 1440px;

  /* --- Misc -------------------------------------------------------------- */
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--navy); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.5rem;
  background: var(--gold);
  color: var(--navy);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

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


/* ==========================================================================
   03  LAYOUT HELPERS
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--max-wide); }
.wrap--narrow { max-width: 760px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section--slate { background: var(--slate); }
/* Optional surface modifiers, both brand colours. Unused by the current pages —
   every section sits on the flat Midnight Navy page background. */
.section--teal   { background: var(--teal); }
.section--raised { background: var(--slate); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--hairline);
}

/* Two-column editorial split: media on one side, copy on the other. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}

.split__media { position: relative; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Thin brass frame offset behind an image — echoes the room's gilt mirrors. */
.framed { position: relative; }
.framed::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  border: 1px solid var(--hairline);
  pointer-events: none;
  z-index: -1;
}


/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.eyebrow--stone { color: var(--stone); }

.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ivory);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.3;
}

.lede {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.6;
  color: var(--stone);
  max-width: var(--measure);
}

p { max-width: var(--measure); }
p + p { margin-top: 1.15em; }

.prose p { color: var(--stone); }
.prose p strong, .prose strong { color: var(--ivory); font-weight: 400; }

.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head p { margin-top: 1.25rem; }


/* ==========================================================================
   05  BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1rem 2.1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--btn-bg);
  transition: background-color 0.25s var(--ease),
              border-color 0.25s var(--ease),
              color 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.btn:hover { --btn-bg: var(--amber); transform: translateY(-2px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ivory);
  border-color: var(--hairline-soft);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  background: var(--ivory);
  border-color: var(--ivory);
}

.btn--sm { padding: 0.8rem 1.5rem; font-size: 0.7rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
}
.center .btn-row,
.btn-row.center { justify-content: center; }

/* Understated arrow link used to lead into deeper pages. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.link-arrow:hover { color: var(--amber); border-color: var(--amber); gap: 1.1em; }
.link-arrow::after { content: "\2192"; font-size: 1.1em; line-height: 1; }

/* Inline link inside running copy. */
.link-inline {
  color: var(--gold);
  border-bottom: 1px solid var(--hairline);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.link-inline:hover { color: var(--amber); border-color: var(--amber); }


/* ==========================================================================
   06  HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* Solid once the page scrolls, and on every non-hero page. */
.site-header.is-solid,
.site-header--solid {
  background: rgba(8, 13, 22, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-soft);
}

.site-header__inner {
  width: 100%;
  max-width: var(--max-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand { display: inline-flex; align-items: center; }
.brand img { width: auto; height: 30px; }

.nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }

.nav__link {
  position: relative;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  padding-block: 0.5rem;
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--gold); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--gold); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
}
.nav-toggle__bars { display: block; width: 24px; height: 10px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 1px;
  background: var(--ivory);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { top: 9px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 4px; transform: rotate(-45deg); }


/* ==========================================================================
   07  HOME CAROUSEL  +  PAGE HERO

   The carousel is the whole of index.html: a contained crossfade slideshow
   with the reservation CTA beneath it, and no on-screen copy at all. The
   photograph is framed rather than full-bleed and carries no scrim — a scrim
   exists to make overlaid text legible, and there is no overlaid text here.
   ========================================================================== */

.carousel {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.25rem, 3.5vw, 2.75rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.carousel__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-inline: auto;
  /* Portrait on phones, landscape from tablet up. The max-height keeps the
     frame and the CTA under it inside one screen on a laptop. */
  aspect-ratio: 2 / 3;

  /* One dial for the size of the whole slideshow. 1 = fills the space
     available; 0.9 = 10% smaller in both directions. It scales the height
     budget and the width cap together, so the frame keeps its ratio. */
  --carousel-scale: 0.9;

  /* --carousel-room is the vertical space left once the header, the controls,
     the CTA and a margin below it are accounted for, so the whole composition
     lands inside one screen. */
  --carousel-room: calc((100svh - var(--header-h) - 15rem) * var(--carousel-scale));
  max-height: var(--carousel-room);
  /* On phones the frame is limited by the column, not the height, so the
     scale has to be applied to the width as well or it would have no effect. */
  max-width: calc(100% * var(--carousel-scale));
  background: var(--navy);
}

@media (min-width: 700px) {
  .carousel__viewport {
    aspect-ratio: 3 / 2;
    /* Capping the WIDTH off the height budget keeps a true 3:2 frame. Capping
       only the height would letterbox the photograph to ~2.3:1 on a short
       laptop screen and crop the dishes and chandeliers out of frame.
       Whichever of the two caps is smaller wins. */
    max-width: min(calc(100% * var(--carousel-scale)), calc(var(--carousel-room) * 1.5));
  }
}

.carousel__track {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Slides are stacked; only the active one is opaque. */
.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.carousel__slide.is-active { opacity: 1; }

/* Each slide wraps its <img> in a <picture> for the WebP/JPEG srcset, and
   <picture> is inline by default — it has to fill the slide for the image's
   height:100% to resolve against anything. */
.carousel__slide picture {
  display: block;
  width: 100%; height: 100%;
}
.carousel__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* For photos whose subject sits high in the frame — a sign, a ceiling. */
.carousel__slide--top img { object-position: center 30%; }

/* --- Controls ------------------------------------------------------------
   Centred under the frame, deliberately quiet — they should read as a caption
   line, not compete with the photograph.
   -------------------------------------------------------------------------- */

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* The CTA is the only copy on the page, so give it room and keep it a button
   rather than letting it stretch edge to edge on narrow screens. */
.carousel .btn-row { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.carousel .btn-row .btn { flex: 0 0 auto; min-width: 16rem; }

.carousel__btn {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-soft);
  color: var(--ivory);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
              background-color 0.25s var(--ease);
}
.carousel__btn:hover { border-color: var(--gold); color: var(--gold); }
.carousel__btn svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pause / play: one icon shows at a time, driven by state on the section. */
.carousel__icon-play { display: none; }
[data-carousel][data-playing="false"] .carousel__icon-pause { display: none; }
[data-carousel][data-playing="false"] .carousel__icon-play { display: block; }
.carousel__icon-play { fill: currentColor; stroke: none; }

.carousel__dots {
  display: flex;
  gap: 0.5rem;
  margin: 0 0.4rem;
  padding: 0;
  list-style: none;
}
/* Hairline bars rather than circles, to match the brass rules elsewhere.
   The button is 30x24 so the tap target stays usable. */
.carousel__dot {
  width: 30px; height: 24px;
  display: inline-flex;
  align-items: center;
}
.carousel__dot::before {
  content: "";
  width: 100%; height: 2px;
  background: rgba(241, 238, 231, 0.3);
  transition: background-color 0.3s var(--ease), height 0.3s var(--ease);
}
.carousel__dot:hover::before { background: rgba(241, 238, 231, 0.6); }
.carousel__dot[aria-current="true"]::before { background: var(--gold); height: 3px; }

/* Compact hero used on Menu and About. */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(4rem, 9vw, 7.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline-soft);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
/* The <picture> wrapper MUST be a block that fills, or the img's height:100%
   below has nothing to resolve against: percentage heights need a parent with
   a definite height, and an auto-height <picture> makes the img fall back to
   its intrinsic size. When that happened the image stopped covering — a strip
   of bare navy showed under the hero on phones, and on desktop the picture
   overflowed instead, which silently disabled object-position so the crop sat
   at the top of the frame rather than the intended band. Same rule as
   .collage picture, for the same reason. */
.page-hero__media picture { display: block; width: 100%; height: 100%; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Flat scrim, not a gradient — it only has to hold the copy legible.
     0.65 is the floor, not a taste call: the hero titles are --ivory, and at
     0.65 the brightest 5% of the About photo (the chandeliers) still clears
     3.0 contrast, which is the AA minimum for large text. Going darker was
     hiding the photography — at the old 0.88 the picture contributed about 11
     levels out of 255 and the hero read as a flat navy band. If a brighter
     photo ever goes in here, re-check the contrast before keeping this value. */
  background: rgba(8, 13, 22, 0.65);
}
.page-hero .lede { margin-top: 1.5rem; }

/* Menu-page hero: the title alone, large and centred. Used only on menu.html —
   About's hero keeps the standard left-aligned treatment. */
.page-hero--title {
  padding-top: calc(var(--header-h) + clamp(5rem, 11vw, 9rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  text-align: center;
}
.page-hero--title h1 {
  font-size: clamp(3.25rem, 2rem + 6vw, 7rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Tracking adds space after the final letter; pull it back so the word
     still reads optically centred. */
  margin-right: -0.14em;
}


/* ==========================================================================
   08  SECTIONS
   ========================================================================== */

/* --- Highlights ----------------------------------------------------------
   UNUSED by the current pages. The home page was rebuilt around the carousel
   in Aug 2026 and this card grid came out with it. Kept because it is the
   obvious component for a "menu favourites" or "featured dishes" row, here or
   on another restaurant built from this template. Delete freely if not wanted.
   -------------------------------------------------------------------------- */

/* Four cards, explicitly 1 / 2 / 4 across so the last one never orphans. */
.highlight-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .highlight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .highlight-grid { grid-template-columns: repeat(4, 1fr); } }

.highlight {
  display: flex;
  flex-direction: column;
  background: var(--slate);
  border: 1px solid var(--hairline-soft);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.highlight:hover { border-color: var(--hairline); transform: translateY(-4px); }

.highlight__media { overflow: hidden; }
.highlight__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.highlight:hover .highlight__media img { transform: scale(1.04); }

.highlight__body { padding: 1.75rem 1.6rem 1.9rem; flex: 1; }
.highlight__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.highlight__title h3 { font-size: var(--step-1); }
.highlight__price {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--gold);
  white-space: nowrap;
}
.highlight__body p { font-size: var(--step--1); color: var(--stone); max-width: none; }

/* --- Interlude -----------------------------------------------------------
   UNUSED by the current pages — see the note on Highlights above. This is the
   full-bleed photo band with a pull quote over it.
   -------------------------------------------------------------------------- */

.interlude {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(70svh, 560px);
}
.interlude__media { position: absolute; inset: 0; z-index: -2; }
.interlude__media img { width: 100%; height: 100%; object-fit: cover; }
.interlude__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 22, 0.82);
}
.interlude blockquote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ivory);
  max-width: 24ch;
}
.interlude cite {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- Reserve band -------------------------------------------------------- */

.reserve-band {
  background: var(--navy);
  border-block: 1px solid var(--hairline);
  text-align: center;
}
/* The band is now only the button, so it needs no lead-in spacing. */
.reserve-band .btn-row {
  margin-top: 0;
  justify-content: center;
}


/* ==========================================================================
   09  MENU PAGE
   ========================================================================== */

/* Sticky in-page category jump nav. */
.menu-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(8, 13, 22, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.menu-nav ul {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 1.05rem;
}
.menu-nav ul::-webkit-scrollbar { display: none; }
.menu-nav a {
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.menu-nav a:hover { color: var(--ivory); }
.menu-nav a.is-active { color: var(--gold); border-bottom-color: var(--gold); }

/* Why there are no prices. Sits between the category nav and the first
   category — bracketed by brass hairlines so it reads as a standing notice
   rather than a dish, but quiet enough not to compete with the headings. */
.menu-price-note {
  max-width: 70ch;
  margin: 0 auto;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--hairline-soft);
  text-align: center;
}
.menu-price-note p {
  max-width: none;
  margin: 0;
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.75;
  color: var(--stone);
}
.menu-price-note strong {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--gold);
}

.menu-category {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  /* Clear both the fixed header and the sticky category bar on a jump link. */
  scroll-margin-top: calc(var(--header-h) + 5rem);
}
/* Between categories: a hairline with a small pattern diamond set on it,
   cut from the dining room's own wallpaper. */
.menu-category + .menu-category {
  border-top: 1px solid var(--hairline-soft);
  position: relative;
}
.menu-category + .menu-category::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 46px; height: 46px;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: var(--navy);
  background-image: url("../images/menu-pattern-640.jpg");
  background-image: image-set(url("../images/menu-pattern-640.webp") type("image/webp"),
                              url("../images/menu-pattern-640.jpg") type("image/jpeg"));
  background-size: 160%;
  background-position: center;
  border: 1px solid var(--hairline);
  opacity: 0.85;
}

/* --- Ornamented headings -------------------------------------------------
   A letterspaced title flanked by a rule that ends in a diamond. The ornament
   is one inline SVG, mirrored for the right side. */

.menu-category__head {
  text-align: center;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.menu-category__head h2,
.menu-subhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.4rem);
}
.menu-category__head h2 {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.menu-category__head h2::before,
.menu-category__head h2::after,
.menu-subhead::before,
.menu-subhead::after {
  content: "";
  flex: 0 0 auto;
  height: 10px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 5h62' stroke='%23B37903' stroke-width='1'/%3E%3Cpath d='M78 0l7 5-7 5-7-5z' fill='%23B37903'/%3E%3Cpath d='M92 5h8' stroke='%23B37903' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.menu-category__head h2::before,
.menu-category__head h2::after { width: clamp(46px, 9vw, 110px); }
.menu-category__head h2::after,
.menu-subhead::after { transform: scaleX(-1); }

.menu-subhead {
  margin-bottom: 1.9rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.menu-subhead::before,
.menu-subhead::after { width: clamp(30px, 6vw, 64px); }

.menu-group + .menu-group { margin-top: clamp(3.5rem, 6vw, 5.5rem); }

/* --- Category photo, with the wallpaper offset behind it ------------------ */

.menu-group--media {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .menu-group--media { grid-template-columns: 1.05fr 0.95fr; }
  /* Alternate which side the photograph falls on, down the page. */
  .menu-group--media.is-reversed .menu-figure { order: -1; }
}

.menu-figure {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.menu-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
/* The wallpaper block, offset up and outward from behind the photograph so an
   L of pattern shows along two edges. The outward offset stays inside the
   page gutter, so it never causes a horizontal scrollbar. */
.menu-figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 64%;
  aspect-ratio: 1;
  top: clamp(-56px, -4.5vw, -26px);
  right: clamp(-40px, -3.2vw, -18px);
  background-image: url("../images/menu-pattern-640.jpg");
  background-image: image-set(url("../images/menu-pattern-640.webp") type("image/webp"),
                              url("../images/menu-pattern-640.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  opacity: 0.6;
}
.menu-group--media.is-reversed .menu-figure::before {
  right: auto;
  left: clamp(-40px, -3.2vw, -18px);
}

.menu-list {
  display: grid;
  /* Roomier rows than before — the item text is larger now, and dense rows are
     the other half of what makes a menu hard to read. */
  gap: clamp(2rem, 3.4vw, 2.9rem) clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .menu-list--two { grid-template-columns: 1fr 1fr; }
}

.menu-item__head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}
/* Sizes and weights on this page are set for legibility over delicacy: the
   menu is read in a dim room, often by people over 50. Contrast was already
   fine (ivory 16.8:1, stone 8.8:1 on navy); what hurt was 14px text at weight
   300 and caps set at 0.14em. Larger, a touch heavier, and less tracked. */
.menu-item__name {
  flex: none;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory);
  max-width: 74%;
}
/* Thin gold leader carrying the eye from dish to price. */
.menu-item__head::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-bottom: 0.3em;
  background: var(--hairline);
  min-width: 1.5rem;
}
/* Desserts and coffee carry no printed price. Without one the leader would
   trail off to nothing, so only draw it when there is a price to lead to. */
.menu-item__head:not(:has(.menu-item__price))::after { display: none; }
.menu-item__price {
  flex: none;
  order: 3;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
  white-space: nowrap;
}
.menu-item__desc {
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.7;
  color: var(--stone);
  max-width: 46ch;
}

/* Coffee / no-price list — a simple wrapped row of names. */
.menu-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.25rem;
}
.menu-inline li {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory);
}

.menu-note,
.note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--stone);
  opacity: 0.85;
  max-width: 70ch;
}
/* Menu-page notes carry real information (how the dough is made, what a side
   substitution costs), so they are set to be read, not skimmed past. Larger,
   heavier, and at full opacity rather than 0.85. */
.menu-note {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.7;
  opacity: 1;
}
.menu-disclaimer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.9rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.75;
  color: var(--stone);
  text-align: center;
}
.menu-disclaimer p { max-width: 70ch; margin-inline: auto; }
.menu-disclaimer p + p { margin-top: 0.9rem; }


/* ==========================================================================
   10  ABOUT PAGE
   ========================================================================== */

/* --- Our Story ------------------------------------------------------------ */

.story {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.story__title {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  letter-spacing: 0.06em;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.story__copy p {
  max-width: none;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.75;
  color: var(--stone);
}
.story__copy p + p { margin-top: 1.1em; }

/* --- Collage --------------------------------------------------------------
   Three columns. Two portrait tiles span two rows, one tile is a 2x2 block,
   the rest are single cells — which fills a 3x4 grid exactly:

     giraffe  table    flambe
     giraffe  gratin   flambe
     store    croq     croq
     store    croq     croq

   Markup order is placement order. Row height drives the tile proportions,
   so change --collage-row rather than the individual tiles.
   -------------------------------------------------------------------------- */

.collage {
  /* Sized so a two-row tile lands at roughly 3:4 and a single cell at 3:2 —
     the ratios the images were cut to, so almost nothing gets cropped away. */
  --collage-row: clamp(118px, 19vw, 240px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: var(--collage-row);
  gap: clamp(0.5rem, 1.1vw, 0.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.collage li { overflow: hidden; }
.collage picture { display: block; width: 100%; height: 100%; }
.collage img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.collage li:hover img { transform: scale(1.04); }

.collage__tall { grid-row: span 2; }
.collage__block { grid-column: span 2; grid-row: span 2; }

/* Two columns on phones. The 2x2 block stays two rows tall on purpose.
   It was span 1 — a full-width band — which looked tidy in the layout but
   squeezed a 3:2 photograph into roughly 2.8:1 and threw away 47% of the
   frame, cutting the dish in half. At span 2 the tile lands near 1.37, so it
   loses about 9% like every other tile here. If this block ever needs to be
   shorter, crop a dedicated wide version of the image rather than letting
   object-fit hack 3:2 down to a letterbox. */
@media (max-width: 640px) {
  .collage { grid-template-columns: repeat(2, 1fr); }
  .collage__block { grid-column: span 2; grid-row: span 2; }
}

/* --- Application form -----------------------------------------------------
   One per open role, hidden behind the card's "Apply for this role" summary.
   Posts to a Google Apps Script web app — see APPLICATION-FORM-SETUP.md.
   -------------------------------------------------------------------------- */

/* One role per row. Side by side, the cards are too narrow for the form that
   opens inside them — the select clipped its own label and the textarea had
   no room to write in.
   Scoped through .jobs so it outranks .job-grid, which is defined further
   down this section with the same single-class specificity. */
.jobs .job-grid--roles { grid-template-columns: 1fr; align-items: start; }

.apply { margin-top: 0.35rem; }
.apply > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.apply > summary::-webkit-details-marker { display: none; }
.apply > summary:hover { color: var(--amber); border-color: var(--amber); }
.apply > summary::after {
  content: "";
  width: 0.42em; height: 0.42em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.apply[open] > summary::after { transform: translateY(0.08em) rotate(-135deg); }

.apply__form { margin-top: 1.5rem; }
.apply__field + .apply__field { margin-top: 1rem; }
.apply__field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}
.apply__hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.75;
}

.apply__field input[type="text"],
.apply__field input[type="tel"],
.apply__field select,
.apply__field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--ivory);
  background: rgba(8, 13, 22, 0.6);
  border: 1px solid var(--hairline-soft);
  border-radius: 0;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.apply__field input[type="text"]:focus,
.apply__field input[type="tel"]:focus,
.apply__field select:focus,
.apply__field textarea:focus {
  border-color: var(--gold);
  background: rgba(8, 13, 22, 0.85);
}

.apply__field textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}

/* Native select menus render their dropdown list in the OS palette, so set
   both sides: dark control here, and readable option rows on Windows/Linux
   where the popup inherits the element's colours. */
.apply__field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  /* Chevron, drawn rather than shipped as an image. */
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.85rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.apply__field select option { color: var(--ivory); background: #12192a; }
.apply__field select:invalid { color: var(--stone); }

.apply__form .btn { margin-top: 1.4rem; }

/* The honeypot. Hidden from people without display:none, which some bots
   check for, and taken out of the tab order and the accessibility tree. */
.apply__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.apply__status {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--stone);
  max-width: none;
}
.apply__status:empty { margin-top: 0; }
.apply__status.is-ok { color: var(--gold); }
.apply__status.is-error { color: var(--amber); }

/* --- Careers disclosure ---------------------------------------------------
   The jobs section is folded behind a link. <details> handles the toggling
   with no JavaScript and stays keyboard operable.
   -------------------------------------------------------------------------- */

.jobs-toggle { text-align: center; }
.jobs-toggle > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
  list-style: none;               /* hide the default triangle */
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.jobs-toggle > summary::-webkit-details-marker { display: none; }
.jobs-toggle > summary:hover { color: var(--amber); border-color: var(--amber); }
/* Chevron, rotated when open. */
.jobs-toggle > summary::after {
  content: "";
  width: 0.5em; height: 0.5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.jobs-toggle[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.jobs-toggle[open] > summary { margin-bottom: clamp(2rem, 4vw, 3rem); }
.jobs-toggle .jobs { margin-top: 0; text-align: left; }

/* --- Room grid -----------------------------------------------------------
   UNUSED by the current pages. "The Room" section was removed from About in
   Aug 2026. Kept as the captioned-photo-grid component — see the note on
   Highlights in section 08. Delete freely if not wanted.
   -------------------------------------------------------------------------- */
.room-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.room-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.room-grid figure { margin: 0; }
.room-grid figcaption {
  margin-top: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --- Team ----------------------------------------------------------------
   UNUSED by the current pages. The "Who you'll meet" section was removed from
   About in Aug 2026 while the real names and headshots were still outstanding.
   Kept as the profile-card component — see the note on Highlights in section
   08. Delete freely if not wanted.
   -------------------------------------------------------------------------- */

.team-grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.team-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.5s var(--ease);
}
.team-card:hover img { filter: grayscale(0) contrast(1); }
.team-card h3 { font-size: var(--step-1); margin-top: 1.25rem; }
.team-card__role {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.team-card p { margin-top: 0.9rem; font-size: var(--step--1); color: var(--stone); }

/* --- Join our team ------------------------------------------------------- */

.jobs {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding: clamp(2.25rem, 5vw, 4rem);
  background: var(--slate);
  border: 1px solid var(--hairline-soft);
}
.jobs__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.jobs__head h2,
.jobs__head h3 { font-size: var(--step-3); }

.job-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.job-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.75rem 1.6rem;
  background: rgba(8, 13, 22, 0.55);
  border: 1px solid var(--hairline-soft);
  transition: border-color 0.3s var(--ease);
}
.job-card:hover { border-color: var(--hairline); }
.job-card h4 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--ivory);
}
.job-card__type {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.job-card p { font-size: var(--step--1); color: var(--stone); flex: 1; max-width: none; }
.job-card .btn { align-self: flex-start; margin-top: 0.5rem; }


/* ==========================================================================
   11  FOOTER
   ========================================================================== */

.site-footer {
  background: var(--navy);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

.footer-grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.footer-brand img { width: 160px; height: auto; }
.footer-brand p { margin-top: 1.5rem; font-size: var(--step--1); color: var(--stone); max-width: 34ch; }

.footer-col h2 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.35rem;
}
.footer-col address {
  font-style: normal;
  font-size: var(--step--1);
  line-height: 1.9;
  color: var(--stone);
}
.footer-col a { transition: color 0.25s var(--ease); }
.footer-col a:hover { color: var(--gold); }

.hours-list { font-size: var(--step--1); color: var(--stone); }
.hours-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.3rem;
  max-width: 280px;
}
.hours-list > div.is-closed { color: rgba(177, 174, 163, 0.55); }
.hours-list dt, .hours-list dd { margin: 0; }

.social-row { display: flex; gap: 1.25rem; margin-top: 1.5rem; }
.social-row a {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
}
.social-row a:hover { color: var(--gold); border-bottom-color: var(--hairline); }

.footer-bottom {
  border-top: 1px solid var(--hairline-soft);
  padding-block: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(177, 174, 163, 0.7);
}
.footer-bottom p { max-width: none; }
.footer-bottom a:hover { color: var(--gold); }


/* ==========================================================================
   12  MOTION
   ========================================================================== */

/* Scoped to .js (set by an inline script in each <head>) so that with
   JavaScript off, or if main.js fails to load, every .reveal block is simply
   visible instead of stuck at opacity 0. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

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


/* ==========================================================================
   13  RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
  :root { --header-h: 66px; }

  .nav-toggle { display: inline-flex; }

  /* backdrop-filter on the header would make it the containing block for the
     position:fixed overlay nav below, pinning the overlay inside the 66px bar.
     Drop the blur at this width and use a near-opaque background instead. */
  .site-header.is-solid,
  .site-header--solid {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 13, 22, 0.97);
  }

  /* Full-screen overlay nav on small screens. */
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    background: var(--navy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { font-size: 0.95rem; letter-spacing: 0.28em; }
  /* Keep the CTA a button in the overlay, not a full-bleed bar. */
  .nav .btn { margin-top: 0.5rem; width: auto; min-width: 15rem; }

  .framed::after { transform: translate(8px, 8px); }
  .interlude__media::after { background: rgba(8, 13, 22, 0.86); }
  .interlude blockquote { max-width: none; }
}

@media (max-width: 520px) {
  /* Swipe carries navigation on a phone, so the controls stay modest. */
  .carousel__btn { width: 40px; height: 40px; }
  .carousel__dot { width: 22px; }
  .carousel__controls { gap: 0.4rem; }
  .carousel .btn-row .btn { min-width: 0; width: 100%; }

  .menu-item__name { max-width: 70%; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 auto; }
}

/* Print — a legible black-on-white menu for front-of-house. */
@media print {
  .site-header, .menu-nav, .site-footer, .btn,
  .carousel__viewport, .carousel__controls, .page-hero__media { display: none !important; }
  body { background: #fff; color: #111; }
  h1, h2, h3, .menu-item__name { color: #111; }
  .menu-item__desc, .menu-note, .menu-disclaimer { color: #444; }
  .menu-item__price { color: #111; }
  .page-hero { padding-top: 1rem; }
}