@charset "UTF-8";
/* ==========================================================================
   Pilino — Cult of Yogurt
   --------------------------------------------------------------------------
   Single stylesheet, no build step, no framework. Organised as:
     1. Tokens          6. Hero
     2. Reset           7. Status strip
     3. Primitives      8. Menu
     4. Layout          9. Story / Gallery / Reviews
     5. Header         10. Visit + form
                       11. Footer, lightbox, utilities

   Palette is lifted from the brand: the navy is the storefront sign, the
   terracotta is the clay pot the shop is named after (pílino = "of clay").
   The old site never used the terracotta anywhere, which left the whole
   identity resting on navy alone.
   ========================================================================== */

/* 1. Tokens ============================================================== */
:root {
  /* Brand */
  --navy-900: #0d1f38;
  --navy-800: #122a4a;
  --navy-700: #16325a;   /* rgb(22,50,90) — the original primary */
  --navy-600: #214f8a;   /* the old header contrast colour */
  --navy-300: #8fa6c4;
  --navy-100: #dee4ed;   /* the old pale section background */
  --slate-300: #b8c0cc;

  /* Clay ramp. The mid tones were already here; the dark end (900/800) and
     the light end (400/300/100) were added for the story section, which is
     the only place the brand's own colour carries a whole surface. */
  --clay-900: #422016;   /* story background */
  --clay-800: #5c2e1e;
  --clay-700: #8f4529;
  --clay-600: #b3583a;
  --clay-500: #c0674a;   /* accent */
  --clay-400: #d18a6f;
  --clay-300: #e0b09a;
  --clay-200: #edd3c7;
  --clay-100: #f5e6de;
  --clay-050: #faf1ec;

  --cream: #fbf8f4;
  --white: #ffffff;
  --ink: #1a2230;
  --ink-soft: #4d5a6e;
  /* Darkened from the original #7b8798, which measured 3.65:1 on white and
     failed WCAG AA for the small menu-item descriptions. */
  --ink-faint: #616c7b;

  /* Semantic */
  --bg: var(--cream);
  --fg: var(--ink);
  --rule: rgba(22, 50, 90, .12);
  --rule-strong: rgba(22, 50, 90, .22);

  /* Type — Afacad carries the brand, matching the original site */
  --font: "Afacad", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Afacad", "Segoe UI", system-ui, sans-serif;
  --font-mark: "Montserrat", var(--font);

  /* Fluid scale: clamp(min, preferred, max) */
  --fs-xs:   clamp(.8125rem, .78rem + .15vw, .875rem);
  --fs-sm:   clamp(.9375rem, .9rem + .2vw, 1rem);
  --fs-base: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-lg:   clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --fs-xl:   clamp(1.375rem, 1.25rem + .6vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --fs-3xl:  clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --fs-4xl:  clamp(3rem, 2rem + 5vw, 7rem);

  /* Spacing */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-y: clamp(4rem, 3rem + 6vw, 8rem);

  /* Shell */
  --shell: 1224px;
  --shell-pad: clamp(1.25rem, .75rem + 2.5vw, 3rem);

  /* Effects */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(13, 31, 56, .06), 0 2px 8px rgba(13, 31, 56, .05);
  --shadow: 0 4px 12px rgba(13, 31, 56, .07), 0 12px 32px rgba(13, 31, 56, .08);
  --shadow-lg: 0 8px 24px rgba(13, 31, 56, .1), 0 24px 64px rgba(13, 31, 56, .12);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --header-h: 76px;
}

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

/* 2. Reset =============================================================== */
*, *::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(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

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

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }

address { font-style: normal; }

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

::selection { background: var(--clay-200); color: var(--navy-900); }

@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;
  }
}

/* 3. Primitives ========================================================== */
.shell {
  width: min(100% - (var(--shell-pad) * 2), var(--shell));
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* clay-700, not -600: at 13px this measured 4.54:1 — barely over AA, and
     the decorative FX tint behind it pushed it under. */
  color: var(--clay-700);
}

/* position:relative gives the .sectionFx layer something to anchor to;
   isolation keeps each section's z-index stack to itself. */
.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
}

.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head--center { margin-inline: auto; text-align: center; }

.section__title {
  font-size: var(--fs-3xl);
  color: var(--navy-700);
}
.section__intro {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--ink-soft);
}
.section__cta { margin-top: var(--sp-6); text-align: center; }

.link {
  color: var(--clay-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .2s var(--ease);
}
.link:hover { color: var(--clay-700); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy-700);
  --btn-fg: var(--white);
  --btn-bd: var(--navy-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .875rem 2rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.btn--primary:hover { --btn-bg: var(--navy-600); --btn-bd: var(--navy-600); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--navy-700);
  --btn-bd: var(--rule-strong);
}
.btn--outline:hover { --btn-bg: var(--navy-700); --btn-fg: var(--white); --btn-bd: var(--navy-700); }

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, .12);
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, .5);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--navy-700); --btn-bd: var(--white); }

.btn--sm { padding: .625rem 1.375rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* 4. Header ============================================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--navy-700);
  color: var(--white);
  font-weight: 600;
}
.skip-link:focus { top: 0; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease),
              backdrop-filter .3s var(--ease);
}

/* Transparent over the hero, solid once scrolled — set by main.js */
.site-header.is-stuck {
  background: rgba(18, 42, 74, .92);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.site-header__logo img {
  width: auto;
  height: clamp(30px, 2rem + 1vw, 44px);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
}

.site-nav__link {
  position: relative;
  padding-block: .375rem;
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 2px;
  background: var(--clay-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link.is-current::after { transform: scaleX(1); }

.site-nav__aside {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* Language switcher ------------------------------------------------------ */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill);
}
.lang-switch__item {
  padding: .25rem .625rem;
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .75);
  font-family: var(--font-mark);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang-switch__item:hover { color: var(--white); }
.lang-switch__item.is-active { background: var(--white); color: var(--navy-700); }

/* Social icon rows ------------------------------------------------------- */
/* WCAG 2.5.8 (AA) asks for a 24×24 minimum target. The glyphs are drawn at
   20–22px, so the anchor carries a slightly larger box around them rather
   than the icons being scaled up. */
.social { display: flex; align-items: center; gap: var(--sp-4); }
.social a {
  display: grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  color: var(--white);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.social a:hover { color: var(--clay-200); transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; }

.social--footer a { color: rgba(255, 255, 255, .8); }
.social--footer svg { width: 22px; height: 22px; }

/* Burger ----------------------------------------------------------------- */
.burger { display: none; padding: var(--sp-2); }
.burger__box {
  display: grid;
  gap: 5px;
  width: 26px;
}
.burger__line {
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: transform .3s var(--ease-out), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: block; }

  /* Full-height panel.
     NOT position:fixed. The nav is a child of .site-header, which carries a
     backdrop-filter — and a non-none backdrop-filter makes an element the
     containing block for fixed-position descendants. So `position:fixed;
     inset:<header> 0 0` resolved against the header's own 64px box rather
     than the viewport, collapsing the panel and letting its contents spill
     out underneath. Positioning absolutely against that same header is both
     correct and predictable: top:100% sits it directly below the bar. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-5) var(--shell-pad) var(--sp-7);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(18, 42, 74, .98);
    backdrop-filter: blur(16px);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease-out),
                visibility .25s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link {
    display: block;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--fs-lg);
  }
  .site-nav__link::after { display: none; }

  /* margin-top:auto pins the language switch and social row to the bottom of
     the now full-height panel instead of leaving them floating mid-screen. */
  .site-nav__aside {
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--sp-6);
  }

  /* Solid header while the panel is open. Without this the logo bar stays
     transparent over the hero photo, reading as a gap above the menu. */
  .site-header.is-navopen {
    background: rgba(18, 42, 74, .98);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}

/* 5. Hero ================================================================ */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(100svh, 900px);
  padding-block: calc(var(--header-h) + var(--sp-8)) clamp(4rem, 10vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* Layered scrim: dark at the base for text contrast, tinted navy overall so
   the photo reads as brand rather than as a stock shot. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(13, 31, 56, .92) 0%, rgba(13, 31, 56, .55) 42%, rgba(13, 31, 56, .18) 75%),
    linear-gradient(120deg, rgba(22, 50, 90, .55), rgba(22, 50, 90, .1));
}

.hero__body { position: relative; color: var(--white); max-width: 54rem; }

.hero__eyebrow {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clay-200);
}

.hero__title {
  font-size: var(--fs-4xl);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: .95;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}

.hero__subtitle {
  max-width: 34rem;
  margin-top: var(--sp-5);
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, .88);
}

.hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .82);
}
.hero__stars { color: #f5b544; letter-spacing: .12em; font-size: var(--fs-lg); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  translate: -50% 0;
  color: rgba(255, 255, 255, .6);
  font-family: var(--font-mark);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero__scroll svg { width: 18px; height: 18px; animation: nudge 2.4s var(--ease) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 640px) {
  .hero__scroll { display: none; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* 6. Status strip ======================================================== */
.status {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-6);
  background: var(--navy-700);
  color: var(--white);
  overflow: clip;
}

.status__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-7);
}

.status__now {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-lg);
}
.status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.status__dot.is-open {
  background: #3ec97a;
  box-shadow: 0 0 0 0 rgba(62, 201, 122, .6);
  animation: pulse 2.4s var(--ease) infinite;
}
.status__dot.is-closed { background: var(--slate-300); }

@keyframes pulse {
  70%  { box-shadow: 0 0 0 10px rgba(62, 201, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 201, 122, 0); }
}

.status__hours {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .82);
}
.status__row { display: flex; gap: var(--sp-3); }
.status__row dt { font-weight: 600; color: var(--white); }

.status__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.status__actions .btn--outline { --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, .45); }
.status__actions .btn--outline:hover { --btn-bg: var(--white); --btn-fg: var(--navy-700); }
.status__actions .btn--primary { --btn-bg: var(--clay-500); --btn-bd: var(--clay-500); }
.status__actions .btn--primary:hover { --btn-bg: var(--clay-600); --btn-bd: var(--clay-600); }

@media (max-width: 860px) {
  .status__inner { flex-direction: column; align-items: flex-start; }
  .status__actions { width: 100%; }
  .status__actions .btn { flex: 1; }
}

/* 7. Menu ================================================================ */
.section--menu { background: var(--cream); }

.menu__sectionTitle {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-2xl);
  color: var(--navy-700);
}

/* Horizontal rails -------------------------------------------------------
   Trades vertical scroll for horizontal. Six stacked cards become one
   screen-height row you swipe through, which is the difference between a
   short page and a very long one on a phone.

   Built on native overflow + scroll-snap, so touch, trackpad, mouse wheel
   and the arrow buttons all drive the same mechanism, and it still works
   with JavaScript off (only the arrows and progress bar need JS).
   ------------------------------------------------------------------------ */
/* The wrapper owns the trailing space, not the rail inside it — the rail's
   own margin would sit above the controls and leave nothing after them. */
.railWrap {
  position: relative;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-card, 300px);
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Bleed to the viewport edges so cards can scroll fully off-screen
     instead of stopping inside the shell's gutter. */
  margin-inline: calc(var(--shell-pad) * -1);
  padding-inline: var(--shell-pad);
  scroll-padding-inline-start: var(--shell-pad);
  padding-block-end: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--slate-300) transparent;
}

.rail > * { scroll-snap-align: start; }

.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--slate-300);
}
.rail::-webkit-scrollbar-thumb:hover { background: var(--navy-300); }

/* The rail is a focusable scroll container; make that visible. */
.rail:focus-visible { outline-offset: -3px; }

/* Controls ---------------------------------------------------------------
   Revealed by JS only when the rail actually overflows. */
.rail__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.rail__nav[hidden] { display: none; }

.rail__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--navy-700);
  background: var(--white);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), opacity .2s var(--ease);
}
.rail__btn:hover:not(:disabled) {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}
.rail__btn:disabled { opacity: .3; cursor: default; }
.rail__btn svg { width: 20px; height: 20px; }

.rail__progress {
  position: relative;
  width: clamp(80px, 22vw, 160px);
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--rule);
  overflow: hidden;
}
.rail__progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rail-thumb, 30%);
  border-radius: inherit;
  background: var(--clay-500);
  translate: var(--rail-offset, 0) 0;
  transition: translate .2s var(--ease), width .2s var(--ease);
}

/* Signature bowls --------------------------------------------------------
   A rail at every width. Six cards in one row rather than two (desktop) or
   six (phone) is the whole point of the change. */
.bowls { --rail-card: clamp(230px, 74vw, 300px); }

@media (min-width: 700px)  { .bowls { --rail-card: 280px; } }
@media (min-width: 1100px) { .bowls { --rail-card: 300px; } }

.bowl {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.bowl:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.bowl__media { aspect-ratio: 1; overflow: hidden; background: var(--navy-100); }
.bowl__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.bowl:hover .bowl__media img { transform: scale(1.06); }

.bowl__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}

.bowl__name { font-size: var(--fs-xl); color: var(--navy-700); }
.bowl__desc {
  flex: 1;
  margin: var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.bowl__prices {
  display: flex;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.bowl__prices li {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--radius-sm);
  background: var(--clay-050);
}
.bowl__size {
  font-family: var(--font-mark);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  /* clay-700, not -600: at 11px on the clay-050 chip the lighter tone
     measured 4.31:1, just under the 4.5:1 AA threshold. */
  color: var(--clay-700);
}
.bowl__price { font-size: var(--fs-sm); font-weight: 600; color: var(--navy-700); white-space: nowrap; }

/* Build your own --------------------------------------------------------- */
.buildYourOwn {
  padding: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  border-radius: var(--radius-lg);
  background: var(--navy-700);
  color: var(--white);
  text-align: center;
}
.buildYourOwn__lead {
  max-width: 32rem;
  margin-inline: auto;
  font-size: var(--fs-xl);
  font-family: var(--font-display);
}
.buildYourOwn__prices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.buildYourOwn__prices li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-pill);
}
.buildYourOwn__prices span { color: rgba(255, 255, 255, .75); font-size: var(--fs-sm); }
.buildYourOwn__prices strong { font-size: var(--fs-lg); }

.buildYourOwn__extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .7);
}

/* Menu cards ------------------------------------------------------------- */
/* Menu sections ----------------------------------------------------------
   Rail below 900px (one card per swipe instead of six stacked), plain grid
   above it, where there is room for real columns. The .rail base class
   supplies the scrolling behaviour; this media query switches it off. */
.menuGrid { --rail-card: clamp(260px, 84vw, 340px); }

/* Section lengths vary a lot — Shakes has 3 items, Soft drinks has 20 — so
   in rail mode the row is as tall as the longest card. Letting every card
   stretch to that height turns what would read as dead space under the short
   ones into a set of uniform full-height panels. */
.menuGrid > .menuCard { align-self: stretch; }

@media (min-width: 900px) {
  .menuGrid {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-block-end: 0;
  }
  /* Back to equal-width grid columns, sized by their own content. */
  .menuGrid > .menuCard { align-self: start; scroll-snap-align: none; }
}

.menuCard {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
}

.menuCard__title {
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--clay-200);
  font-size: var(--fs-xl);
  color: var(--navy-700);
}

.menuCard__list { display: grid; gap: var(--sp-4); }
.menuCard--compact .menuCard__list { gap: var(--sp-2); }

/* Leader dots between name and price — a menu convention that also keeps
   the price column readable when descriptions wrap. */
.menuItem {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--sp-2);
}
.menuItem__text { display: grid; gap: 2px; }
.menuItem__name { font-weight: 600; color: var(--navy-800); }
.menuItem__desc { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-faint); }
.menuItem__dots {
  align-self: end;
  height: 1px;
  margin-bottom: .35em;
  border-bottom: 1px dotted var(--rule-strong);
}
.menuItem__price {
  font-weight: 600;
  color: var(--clay-600);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.menuCard__extras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.menu__allergens {
  max-width: 46rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--clay-500);
  background: var(--clay-050);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.menu__print { margin-top: var(--sp-6); text-align: center; }

/* 8. Story ===============================================================
   The page's one warm-dark section. Everything else alternates navy and
   cream; this is the only place the brand's clay colour appears at scale —
   which is the point, since this is the section about clay.
   ------------------------------------------------------------------------ */
.section--story {
  background: var(--clay-900);
  color: var(--clay-100);
  overflow: clip;
}

.section--story .eyebrow { color: var(--clay-300); }

.story {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.story__title {
  font-size: var(--fs-3xl);
  color: var(--cream);
}

.story__lead {
  max-width: 22ch;
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.25;
  color: var(--clay-200);
  text-wrap: balance;
}

/* Arch-topped image. A deliberate move away from the rounded-rectangle card
   the rest of the web uses: the arch reads as both the mouth of a pot and,
   in an Athens context, as architecture. */
.story__figure {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(100%, 420px);
}
.story__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 50% 50% var(--radius) var(--radius) / 34% 34% var(--radius) var(--radius);
}

/* Thin clay outline echoing the arch, offset behind the photo. */
.story__figure::before {
  content: "";
  position: absolute;
  inset: -14px -14px 14px;
  z-index: -1;
  border: 1px solid var(--clay-600);
  border-radius: inherit;
  border-radius: 50% 50% var(--radius) var(--radius) / 34% 34% var(--radius) var(--radius);
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: 1fr minmax(0, 40%);
    gap: clamp(3rem, 7vw, 6rem);
  }
  .story__figure { justify-self: end; }
}

/* The method ------------------------------------------------------------
   Three numbered beats. Hairline rules rather than boxes: this is editorial
   copy, not a feature grid. */
/* Exactly three, so state that rather than letting auto-fit resolve a
   phantom fourth track at wide viewports. */
.method {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--clay-700);
}

.method__step { position: relative; }

.method__num {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mark);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .14em;
  /* clay-300, not -400: at 16px the darker tone measured 4.59:1 — over AA,
     but too close to the line to leave sitting on a decorative surface. */
  color: var(--clay-300);
}

.method__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xl);
  color: var(--cream);
}

.method__body {
  font-size: var(--fs-sm);
  color: var(--clay-200);
}

/* Side by side, with hairline rules instead of gaps. */
@media (min-width: 760px) {
  .method {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .method__step + .method__step {
    padding-left: clamp(1.75rem, 4vw, 3rem);
    border-left: 1px solid var(--clay-700);
  }
  .method__step:not(:last-child) { padding-right: clamp(1.75rem, 4vw, 3rem); }
}

.story__closing {
  max-width: 44ch;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--clay-300);
}

/* 9. Gallery + reviews =================================================== */
.section--gallery { background: var(--cream); }
.section--reviews { background: var(--navy-700); color: var(--white); }
.section--reviews .section__title { color: var(--white); }
.section--reviews .section__intro { color: rgba(255, 255, 255, .78); }
.section--reviews .eyebrow { color: var(--clay-200); }

/* Third-party embeds get a reserved min-height so retaining them does not
   cost a layout shift while platform.js boots. */
.embed { min-height: 340px; }

/* 10. Visit ============================================================== */
.section--visit { background: var(--cream); }

.visit {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas:
    "map    form"
    "detail form";
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.visit__map {
  grid-area: map;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16 / 10;
}
.visit__map iframe { width: 100%; height: 100%; border: 0; }

.visit__details {
  grid-area: detail;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-5);
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--rule);
}
.visit__block h3 {
  margin-bottom: var(--sp-2);
  font-family: var(--font-mark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay-600);
}
.visit__block p { margin-bottom: .35em; }

.visit__hours { display: grid; gap: 4px; font-size: var(--fs-sm); }
.visit__hours > div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.visit__hours dt { font-weight: 600; color: var(--navy-800); }
.visit__hours dd { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.visit__form {
  grid-area: form;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--navy-700);
  color: var(--white);
}
.visit__formTitle { margin-bottom: var(--sp-5); font-size: var(--fs-xl); }

@media (max-width: 900px) {
  .visit {
    grid-template-columns: 1fr;
    grid-template-areas: "map" "detail" "form";
  }
}

/* Form ------------------------------------------------------------------- */
.form__field { margin-bottom: var(--sp-4); }
.form__field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form__req { font-weight: 400; color: rgba(255, 255, 255, .55); }

.form__field input,
.form__field textarea {
  width: 100%;
  padding: .8125rem 1rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--ink-faint); }
.form__field input:focus,
.form__field textarea:focus {
  border-color: var(--clay-500);
  background: var(--white);
  outline: none;
}
.form__field textarea { resize: vertical; min-height: 7rem; }

/* Invalid state only after the field has been touched — see main.js */
.form__field.is-invalid input,
.form__field.is-invalid textarea { border-color: #ff8b8b; }
.form__error { margin-top: var(--sp-2); font-size: var(--fs-xs); color: #ffc2c2; }

.form .btn--primary {
  --btn-bg: var(--clay-500);
  --btn-bd: var(--clay-500);
  margin-top: var(--sp-2);
}
.form .btn--primary:hover { --btn-bg: var(--clay-600); --btn-bd: var(--clay-600); }
.form .btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* The honeypot must be unreachable but not display:none — some bots skip
   hidden inputs, and screen readers need it out of the tab order. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status { margin-top: var(--sp-4); font-size: var(--fs-sm); min-height: 1.5em; }
.form__status.is-success { color: #9ff0bd; }
.form__status.is-error { color: #ffc2c2; }

/* 11. Footer ============================================================= */
.site-footer {
  position: relative;
  isolation: isolate;
  padding-top: clamp(3rem, 6vw, 5rem);
  background: var(--navy-900);
  color: rgba(255, 255, 255, .78);
  overflow: clip;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.site-footer__logo img { width: auto; height: 46px; margin-bottom: var(--sp-4); }
.site-footer__tagline { max-width: 26rem; margin-bottom: var(--sp-5); font-size: var(--fs-sm); }

.site-footer__heading {
  margin-bottom: var(--sp-4);
  font-family: var(--font-mark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer__heading--spaced { margin-top: var(--sp-6); }

.site-footer__links { display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  transition: color .2s var(--ease);
}
.site-footer__links a:hover { color: var(--clay-200); }

.site-footer__hours { display: grid; gap: 4px; font-size: var(--fs-xs); }
.site-footer__hours li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.site-footer__hours li span:first-child { color: var(--white); font-weight: 600; }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-xs);
}
.site-footer__bar p { margin: 0; }
.site-footer__legal { display: flex; align-items: center; gap: var(--sp-3); }
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.site-footer__legal a:hover { color: var(--clay-200); }
.site-footer__credit strong { color: var(--white); }

@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__bar { flex-direction: column; text-align: center; }
}

/* Back to top ------------------------------------------------------------ */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--white);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease-out),
              visibility .3s, background-color .2s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--clay-500); }
.to-top svg { width: 20px; height: 20px; }

/* Lightbox --------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 31, 56, .93);
  backdrop-filter: blur(6px);
  animation: fade .25s var(--ease);
}

.lightbox__inner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  animation: pop .3s var(--ease-out);
}

.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; }
.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100dvh - 6rem);
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  backdrop-filter: blur(8px);
  transition: background-color .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .28); }
.lightbox__btn svg { width: 22px; height: 22px; }

.lightbox__btn--close { top: 0; right: 0; }
.lightbox__btn--prev { left: 0; top: 50%; translate: 0 -50%; }
.lightbox__btn--next { right: 0; top: 50%; translate: 0 -50%; }

@media (max-width: 640px) {
  .lightbox__btn--prev { left: 0; top: auto; bottom: 0; translate: 0; }
  .lightbox__btn--next { right: 0; top: auto; bottom: 0; translate: 0; }
}

@keyframes fade { from { opacity: 0; } }
@keyframes pop  { from { opacity: 0; transform: scale(.96); } }

body.is-locked { overflow: hidden; }

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

/* Scroll reveal. Elements start hidden only when JS is present, so a
   no-JS visitor sees everything (see the .no-js guard in main.js). */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* 12. Section FX =========================================================
   Scroll-reactive background graphics.

   One number drives everything: --fx-p runs 0 → 1 as a section crosses the
   viewport. Registering it with @property makes it animatable, so the same
   variable can be driven two ways:

     • natively, by a CSS scroll-driven animation (compositor thread, no
       scroll listener at all) — Chrome/Edge 115+, Safari 26+
     • by main.js on a rAF-throttled scroll handler, everywhere else
       (notably older iOS Safari, which matters a lot for a tourist site)

   Every visual rule below reads var(--fx-p) and neither path knows about
   the other. With prefers-reduced-motion the shapes render statically at
   their midpoint — still decorative, completely still.

   The layer is inert: aria-hidden in the markup, pointer-events:none here,
   and always behind content.
   ------------------------------------------------------------------------ */
@property --fx-p {
  syntax: '<number>';
  initial-value: 0.5;
  inherits: true;
}

.sectionFx {
  --fx-p: 0.5;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Shapes are decorative; never let one bleed into a text contrast check. */
  contain: paint;
}

/* Content sits above the FX layer. */
.section > .shell,
.status__inner,
.site-footer__grid,
.site-footer__bar { position: relative; z-index: 1; }

.fx {
  position: absolute;
  display: block;
  color: currentColor;
}
.fx svg { width: 100%; height: 100%; overflow: visible; }
.fx svg path,
.fx svg circle,
.fx svg ellipse { fill: currentColor; }

/* --- Placement + motion, per shape ------------------------------------ */
/* Each shape drifts at its own rate, which is what reads as depth. The
   multipliers are the whole trick: bigger number = "closer" to the viewer. */

.fx--blob-a {
  top: -18%; left: -14%;
  width: clamp(260px, 42vw, 620px); aspect-ratio: 1;
  translate: 0 calc((var(--fx-p) - .5) * -120px);
  rotate: calc((var(--fx-p) - .5) * 18deg);
}

.fx--blob-b {
  right: -16%; bottom: -22%;
  width: clamp(240px, 38vw, 560px); aspect-ratio: 1;
  translate: 0 calc((var(--fx-p) - .5) * 90px);
  rotate: calc((var(--fx-p) - .5) * -22deg);
}

.fx--splash-a {
  top: -10%; right: -12%;
  width: clamp(280px, 46vw, 680px); aspect-ratio: 1;
  translate: calc((var(--fx-p) - .5) * 40px) calc((var(--fx-p) - .5) * -140px);
  rotate: calc((var(--fx-p) - .5) * 26deg);
}

.fx--splash-b {
  bottom: -18%; left: -14%;
  width: clamp(240px, 40vw, 580px); aspect-ratio: 1;
  translate: calc((var(--fx-p) - .5) * -30px) calc((var(--fx-p) - .5) * 110px);
  rotate: calc((var(--fx-p) - .5) * -18deg);
}

/* The rosette rotates rather than drifts — it is a mark, not a fluid. */
.fx--rosette {
  width: clamp(220px, 34vw, 480px); aspect-ratio: 1;
  rotate: calc(var(--fx-p) * 90deg);
}

/* --- Per-section colour and opacity ------------------------------------
   Opacities are deliberately tiny. These sit under body copy, and the
   contrast audit has to keep passing with them there. */

.sectionFx--status  { color: #ffffff; opacity: .05; }
.sectionFx--status .fx--blob-a { top: -60%; left: auto; right: -6%; width: clamp(200px, 26vw, 380px); }

.sectionFx--menu    { color: var(--clay-500); opacity: .07; }
.sectionFx--menu .fx--rosette {
  top: 38%; right: 4%;
  width: clamp(160px, 22vw, 300px);
  opacity: .5;
}

/* Story is now a dark clay surface, so its shapes are light rather than
   navy. Opacities stay low: the method copy sits over them. */
.sectionFx--story { color: var(--clay-100); }
.sectionFx--story .fx--rosette { top: -14%; left: -10%; opacity: .05; }
.sectionFx--story .fx--blob-b  { opacity: .04; }

.sectionFx--reviews { color: #ffffff; opacity: .07; }

.sectionFx--visit   { color: var(--navy-600); opacity: .05; }

.sectionFx--footer  { color: #ffffff; opacity: .04; }
.sectionFx--footer .fx--splash-a { top: auto; bottom: -30%; right: -10%; }

/* Soften the shapes. Blur is expensive on large surfaces, so it is dropped
   entirely on small screens where the shapes are small anyway. */
@media (min-width: 700px) {
  .fx--blob-a, .fx--blob-b, .fx--splash-a, .fx--splash-b { filter: blur(28px); }
}

/* --- Driving --fx-p ---------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sectionFx {
      animation: fxProgress linear both;
      animation-timeline: view();
      /* cover = from the section first touching the viewport to fully past it */
      animation-range: cover 0% cover 100%;
    }
    @keyframes fxProgress {
      from { --fx-p: 0; }
      to   { --fx-p: 1; }
    }
  }
}

/* Reduced motion: hold everything at the midpoint. The .no-sda class is set
   by main.js only when it is actually driving the variable itself. */
@media (prefers-reduced-motion: reduce) {
  .sectionFx { --fx-p: 0.5 !important; animation: none !important; }
}

/* --- Hero parallax ------------------------------------------------------
   The image drifts and scales slightly against the page scroll. Uses the
   root scroll timeline directly; the JS fallback drives --fx-p on .hero. */
.hero { --fx-p: 0; }
.hero__media img {
  translate: 0 calc(var(--fx-p) * 6%);
  scale: calc(1 + var(--fx-p) * .08);
  transform-origin: center 40%;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero {
      animation: fxProgress linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero { --fx-p: 0 !important; animation: none !important; }
}

/* --- Scroll progress ----------------------------------------------------
   A hairline under the sticky header. The page is long even after the rails;
   this gives it a sense of extent. */
.scrollProgress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 101;
  background: var(--clay-500);
  transform-origin: 0 50%;
  scale: var(--fx-p, 0) 1;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .scrollProgress {
    --fx-p: 0;
    animation: fxProgress linear both;
    animation-timeline: scroll(root block);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scrollProgress { transition: none; }
}

/* 13. Interior pages (legal, 404) ======================================== */
/* These have no hero for the header to float over, so it is solid from the
   start and the content is pushed clear of it. */
.page-legal .site-header,
.page-404 .site-header {
  background: rgba(18, 42, 74, .97);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.legal, .notfound { padding-block: calc(var(--header-h) + var(--sp-8)) var(--section-y); }

.legal__inner { max-width: 46rem; }
.legal__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.legal__updated {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

.prose { color: var(--ink-soft); }
.prose h2 {
  margin: clamp(2rem, 4vw, 2.75rem) 0 var(--sp-3);
  font-size: var(--fs-xl);
  color: var(--navy-700);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1em; }
.prose strong { color: var(--navy-800); }

.prose__list {
  display: grid;
  gap: var(--sp-3);
  margin: 0 0 1em;
  padding-left: var(--sp-5);
}
.prose__list li { list-style: disc; }
.prose__list li::marker { color: var(--clay-500); }

.notfound__inner { max-width: 40rem; text-align: center; margin-inline: auto; }
.notfound__code {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--clay-200);
}
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* Print ------------------------------------------------------------------ */
@media print {
  .site-header, .to-top, .visit__form, .visit__map, .embed,
  .hero__scroll, .menu__print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  .bowl, .menuCard { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}