/* ==========================================================================
   Le Zinc à Raoul — Annecy
   Visual thesis: "Le comptoir en zinc, gravé sur papier kraft"
   The merchant's own printed menu (kraft cover + engraved chalet) opened on screen.
   Brand tokens sampled from the logo badge and the printed menu cover (fact pack §4).
   ========================================================================== */

:root {
  /* brand tokens — logo badge + printed menu cover */
  --kraft:       #C8B098;   /* printed menu cover paper */
  --kraft-light: #D8C7B0;
  --kraft-txt:   #33291C;   /* text on kraft  (contrast ~7:1) */
  --brown:       #5E4E37;   /* logo / menu engraving ink */
  --brown-deep:  #3A3021;   /* text on paper/kraft */
  --teal:        #5D7776;   /* logo badge ring */
  --teal-deep:   #2E4A49;   /* text/accent on paper */
  --teal-light:  #A6C3C1;   /* accent on the ink field */
  --cream:       #F4F0EA;
  --paper:       #FAF8F4;
  --ink:         #241C13;
  --ink-field:   #1E1812;

  --font-display: 'Alfa Slab One', 'Rockwell', Georgia, serif;
  --font-script:  'Yellowtail', 'Segoe Script', cursive;
  --font-util:    'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --page: min(1240px, 92vw);
  --bar-h: 62px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 10px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--brown-deep);
  font-family: var(--font-util);
  font-size: clamp(15px, 1.02vw, 16.5px);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;                /* safety only; layout must not need it */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { width: var(--page); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cream); color: var(--ink); padding: 10px 16px;
  font-weight: 600; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }

/* ── utility type ───────────────────────────────────────────────────────── */
.util {
  font-family: var(--font-util);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.eyebrow { color: var(--teal-light); }
.on-paper .eyebrow { color: var(--teal-deep); }

/* ==========================================================================
   Top bar — controls separated to the edges (benchmark M3)
   ========================================================================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(12px, 3vw, 34px);
  background: rgba(30, 24, 18, 0.9);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid rgba(200, 176, 152, 0.28);
}
.topbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.topbar__badge { width: 38px; height: 38px; flex: 0 0 auto; }
.topbar__name {
  font-family: var(--font-display);
  color: var(--kraft); font-size: 0.95rem; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__nav { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 30px); flex: 0 0 auto; }
.topbar__nav a {
  color: var(--cream); text-decoration: none;
  font-size: clamp(0.68rem, 1.6vw, 0.74rem);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 6px 2px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.topbar__nav a:hover, .topbar__nav a:focus-visible { color: var(--kraft); border-bottom-color: var(--kraft); }

@media (max-width: 700px) {
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar__name { display: none; }             /* keep the badge only: nav must never clip */
  .topbar__badge { width: 34px; height: 34px; }
  .topbar__nav { gap: 14px; }
}
@media (max-width: 380px) {
  .topbar__nav { gap: 10px; }
  .topbar__nav a { letter-spacing: 0.06em; }
}

/* ==========================================================================
   S1 — Wordmark / venue-proof collision
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink-field);
  padding-top: var(--bar-h);
  min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hero__frame {
  position: relative; z-index: 3;
  padding: clamp(14px, 3.4vw, 40px) clamp(12px, 3vw, 30px) 0;
}
.hero__eyebrow { margin: 0 0 clamp(8px, 1.6vw, 18px); }

/* Monumental wordmark: SVG + textLength guarantees it spans the width exactly
   at every viewport without ever overflowing (P1 / typography-systems lockup). */
.wordmark { width: 100%; height: auto; display: block; }
.wordmark text {
  font-family: var(--font-display);
  fill: var(--kraft);
}

.hero__undersign {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-top: clamp(-2px, -0.4vw, 0px);
  padding: 0 clamp(2px, 0.6vw, 10px);
}
.hero__script {
  font-family: var(--font-script);
  color: var(--kraft-light);
  font-size: clamp(1.9rem, 7.6vw, 5.2rem);
  line-height: 0.86;
  transform: translateY(0.16em) rotate(-2.4deg);
}
.hero__year {
  font-family: var(--font-display);
  color: var(--teal-light);
  font-size: clamp(1.5rem, 5.4vw, 3.6rem);
  line-height: 0.8;
  writing-mode: vertical-rl;          /* signature numeral, offset from the wordmark */
  transform: rotate(180deg) translateY(0.06em);
  letter-spacing: 0.02em;
  opacity: 0.92;
}
@media (max-width: 700px) {
  .hero__year { writing-mode: horizontal-tb; transform: rotate(-4deg); }
}

/* Photo begins immediately under the wordmark baseline and collides with it.
   The figure carries a definite height so the img's height:100% resolves here
   instead of contributing the photo's intrinsic height to the hero. */
.hero__photo {
  position: relative; z-index: 1;
  margin-top: clamp(-34px, -3.6vw, -12px);
  flex: 1 1 auto; height: clamp(260px, 40svh, 520px); min-height: 0;
  overflow: hidden;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(30,24,18,0.92) 0%, rgba(30,24,18,0.35) 16%, rgba(30,24,18,0) 42%),
    linear-gradient(0deg, rgba(30,24,18,0.88) 0%, rgba(30,24,18,0) 26%);
  pointer-events: none;
}
.hero__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(10px, 2vw, 20px) clamp(12px, 3vw, 30px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  color: var(--cream);
}
.hero__caption strong { font-weight: 600; color: var(--kraft-light); }
.hero__caption span { opacity: 0.94; }

.hero__scroll {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 8px; z-index: 4;
  color: var(--kraft); text-decoration: none;
  font-family: var(--font-util); font-size: 1.25rem; line-height: 1;
  padding: 6px 10px;
}
.hero__scroll:hover { color: var(--cream); }

/* entrance — the wordmark settles while the photo stays visible (benchmark M1/M6) */
.hero__frame, .hero__undersign { animation: settle 820ms var(--ease) both; }
.hero__undersign { animation-delay: 90ms; }
@keyframes settle {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   S2 — Venue proof band (merchant's own intro copy)
   ========================================================================== */
.proof { background: var(--ink-field); color: var(--cream); }
.proof__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: clamp(20px, 3.6vw, 54px);
  padding: clamp(30px, 5vw, 70px) 0 clamp(18px, 3vw, 40px);
}
.proof__media { position: relative; height: clamp(230px, 30vw, 440px); overflow: hidden; }
.proof__media img { width: 100%; height: 100%; object-fit: cover; }
.proof__media figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 10px 12px; color: var(--cream);
  background: linear-gradient(0deg, rgba(30,24,18,0.86), rgba(30,24,18,0));
  font-size: 0.78rem; letter-spacing: 0.04em;
}
.proof__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.7rem);
  line-height: 1.1; margin: 0 0 0.5em; color: var(--kraft);
  font-weight: 400;
}
.proof__copy h2 em { font-family: var(--font-script); font-style: normal; font-size: 1.24em; color: var(--teal-light); display: block; line-height: 0.92; }
.proof__copy p { margin: 0 0 1em; color: rgba(244,240,234,0.9); max-width: 46ch; }
.proof__facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 1.1em 0 0; padding: 0; list-style: none; }
.proof__facts li { color: var(--kraft-light); font-size: 0.86rem; display: flex; align-items: center; gap: 8px; }
.proof__facts li::before { content: ""; width: 7px; height: 7px; background: var(--teal); border-radius: 50%; flex: 0 0 auto; }

@media (max-width: 860px) {
  .proof__inner { grid-template-columns: 1fr; }
  .proof__media { min-height: 240px; order: 2; }
  .proof__copy { order: 1; }
}

/* ==========================================================================
   S3 — Ritual band (printed-menu rhythm) + min. 2 personnes
   ========================================================================== */
.ritual { background: var(--brown); color: var(--kraft-light); overflow-x: clip; padding: clamp(12px, 2vw, 20px) 0; }
/* Containment: the repeating band is a bounded horizontal scroll container, so the
   track can never extend the document, and it stays swipeable by touch. The marquee
   drift is the signature motion and is kept (and disabled under reduced motion). */
.ritual__band {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  max-width: 100%;
}
.ritual__band::-webkit-scrollbar { display: none; height: 0; width: 0; }
.ritual__track {
  display: flex; align-items: baseline; gap: 0 1.6rem;
  width: max-content; white-space: nowrap;
  animation: drift 34s linear infinite;
}
.ritual__track span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.6vw, 3.3rem);
  letter-spacing: 0.02em; color: var(--kraft);
}
.ritual__track i { font-style: normal; color: var(--teal-light); font-size: clamp(1.1rem, 3vw, 2rem); transform: translateY(-0.25em); }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ritual__note {
  margin: 0.55em 0 0; text-align: center;
  font-family: var(--font-util);
  color: var(--kraft-light);
  font-size: clamp(0.78rem, 1.5vw, 0.9rem);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}

/* ==========================================================================
   S4 — Spécialités: the printed paper list (kraft) + the "kraft reveal"
   ========================================================================== */
.paper {
  position: relative; z-index: 3;
  margin-top: clamp(-26px, -3vw, -8px);
  background-color: var(--kraft);
  background-image: url("../img/kraft.jpg");
  background-size: 460px;
  background-repeat: repeat;
  color: var(--kraft-txt);
  padding: clamp(30px, 5vw, 74px) 0 clamp(34px, 5vw, 66px);
  box-shadow: 0 -14px 40px rgba(20, 14, 8, 0.45);
}
/* signature mechanism: the paper layer rises + uncovers as it enters view */
.reveal {
  transform: translateY(9%);
  clip-path: inset(9% 0 0 0 round 2px);
  transition: transform 820ms var(--ease), clip-path 820ms var(--ease);
}
.reveal.is-revealed { transform: translateY(0); clip-path: inset(0 0 0 0 round 2px); }

.paper__head { text-align: center; margin-bottom: clamp(22px, 3.4vw, 44px); }
.paper__head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 4.4vw, 3.1rem); line-height: 1.05;
  margin: 0.2em 0 0.35em; color: var(--brown-deep);
}
.paper__head p { margin: 0 auto; max-width: 52ch; font-size: 0.9rem; color: var(--brown-deep); }
.paper__rule { height: 3px; width: clamp(60px, 12vw, 130px); margin: 0.7em auto 0; background: var(--teal-deep); }

.menu-grid {
  display: grid; gap: clamp(20px, 2.8vw, 40px) clamp(24px, 4vw, 62px);
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  margin-top: clamp(20px, 3vw, 36px);
}
.cat > h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.06rem, 2.1vw, 1.38rem);
  color: var(--brown-deep);
  margin: 0 0 0.55em; padding-bottom: 0.4em;
  border-bottom: 2px solid var(--teal-deep);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.cat > h3 small {
  font-family: var(--font-util); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--teal-deep);
}
.cat ul { list-style: none; margin: 0; padding: 0; }
.cat li {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px;
  align-items: baseline;
  padding: 0.62em 0; border-bottom: 1px dotted rgba(58, 48, 33, 0.34);
}
.cat li:last-child { border-bottom: 0; }
.dish { font-family: var(--font-display); font-weight: 400; font-size: clamp(0.95rem, 1.5vw, 1.06rem); color: var(--kraft-txt); }
.dishdesc { grid-column: 1 / -1; font-size: 0.8rem; line-height: 1.5; color: rgba(51, 41, 28, 0.82); font-style: italic; margin: 0; }
.price { font-family: var(--font-util); font-weight: 700; font-size: 0.92rem; color: var(--teal-deep); white-space: nowrap; text-align: right; }
.paper__foot { margin: clamp(20px, 3vw, 34px) 0 0; font-size: 0.82rem; color: rgba(51, 41, 28, 0.82); font-style: italic; text-align: center; }

/* ==========================================================================
   S5 — Menu handoff (merchant's engraved artwork)
   ========================================================================== */
.handoff { background: var(--ink-field); color: var(--cream); padding: clamp(30px, 5vw, 66px) 0; }
.handoff__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(22px, 3.6vw, 52px); align-items: center; }
.handoff__art { position: relative; }
.handoff__art img { width: 100%; height: auto; border: 1px solid rgba(200,176,152,0.3); }
.handoff__art figcaption { margin-top: 8px; font-size: 0.74rem; color: rgba(244,240,234,0.66); }
.handoff h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3.2vw, 2.4rem); color: var(--kraft); margin: 0.15em 0 0.5em; }
.handoff p { margin: 0 0 1.2em; color: rgba(244,240,234,0.9); max-width: 44ch; }
@media (max-width: 860px) { .handoff__inner { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--font-util); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; padding: 0.95em 1.6em;
  background: var(--kraft); color: var(--ink);
  border: 2px solid var(--kraft);
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--kraft); }
.btn--ghost { background: transparent; color: var(--kraft); border-color: var(--teal); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.btn--dark { background: var(--brown-deep); border-color: var(--brown-deep); color: var(--kraft-light); }
.btn--dark:hover, .btn--dark:focus-visible { background: transparent; color: var(--brown-deep); }

/* ==========================================================================
   S6 — Venue gallery: bounded rail, native scroll (vertical page scroll free)
   ========================================================================== */
.gallery { background: var(--paper); padding: clamp(30px, 4.6vw, 62px) 0 clamp(26px, 4vw, 50px); }
.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(14px, 2vw, 24px); }
.gallery__head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 3vw, 2.1rem); margin: 0.15em 0 0; color: var(--brown-deep); }
.rail__ctrls { display: flex; gap: 8px; }
.rail__btn {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--paper); color: var(--brown-deep);
  border: 2px solid var(--brown-deep); cursor: pointer;
  font-size: 1.15rem; line-height: 1;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.rail__btn:hover:not([disabled]) { background: var(--brown-deep); color: var(--kraft); }
.rail__btn[disabled] { opacity: 0.32; cursor: default; }
.rail {
  display: flex;
  gap: clamp(10px, 1.6vw, 20px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
  touch-action: pan-x pan-y;              /* deliberate horizontal drag; vertical stays native */
}
.rail > figure { flex: 0 0 clamp(260px, 40vw, 560px); margin: 0; scroll-snap-align: start; position: relative; }
.rail img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.rail figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 22px 12px 10px; color: var(--cream);
  background: linear-gradient(0deg, rgba(30,24,18,0.86), rgba(30,24,18,0));
  font-size: 0.76rem;
}
@media (max-width: 780px) { .rail > figure { flex-basis: clamp(240px, 74vw, 420px); } }

/* ==========================================================================
   S7 — Infos: contact / hours / map, all directly visible
   ========================================================================== */
.infos { background: var(--brown); color: var(--cream); padding: clamp(30px, 5vw, 70px) 0; }
.infos h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3.6vw, 2.6rem); color: var(--kraft); margin: 0.15em 0 0.7em; }
.infos__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(22px, 3.4vw, 52px); align-items: start; }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; padding: 0.85em 0; border-top: 1px solid rgba(244,240,234,0.2); }
.info-list li:first-child { border-top: 0; }
.info-list dt, .info-list .k { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--kraft-light); }
.info-list .v { color: var(--cream); font-size: 0.98rem; }
.info-list .v a { color: var(--kraft-light); text-underline-offset: 3px; }
.info-list .v a:hover { color: var(--cream); }
.info-map { min-height: 380px; }
.info-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: saturate(0.92); }
.info-map .fallback { margin: 0; font-size: 0.84rem; color: var(--kraft-light); }
@media (max-width: 860px) {
  .infos__grid { grid-template-columns: 1fr; }
  .info-list li { grid-template-columns: 1fr; }
  .info-map { min-height: 320px; }
  .info-map iframe { min-height: 320px; }
}

/* ==========================================================================
   S8 — Footer (wordmark repeat, printed-menu rhythm)
   ========================================================================== */
.foot { background: var(--ink-field); color: rgba(244,240,234,0.82); padding: clamp(24px, 3.6vw, 46px) 0 26px; }
.foot__mark { width: 100%; height: auto; }
.foot__mark text { font-family: var(--font-display); fill: var(--kraft); opacity: 0.42; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 30px; margin-top: 18px; }
.foot__grid p { margin: 0 0 0.35em; font-size: 0.9rem; }
.foot a { color: var(--kraft-light); }
.foot a:hover { color: var(--cream); }
.foot__legal { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(244,240,234,0.16); font-size: 0.78rem; color: rgba(244,240,234,0.6); }

/* ==========================================================================
   /menu/ page
   ========================================================================== */
.menu-hero { background: var(--ink-field); color: var(--cream); padding: calc(var(--bar-h) + clamp(22px, 4vw, 50px)) 0 clamp(22px, 4vw, 46px); }
.menu-hero__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(20px, 3.4vw, 48px); align-items: center; }
.menu-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 5.4vw, 3.8rem); color: var(--kraft); margin: 0.12em 0 0.4em; line-height: 1.05; }
.menu-hero p { margin: 0 0 1.1em; color: rgba(244,240,234,0.9); max-width: 48ch; }
.menu-hero__cover { max-width: 300px; justify-self: end; }
.menu-hero__cover img { width: 100%; height: auto; border: 1px solid rgba(200,176,152,0.32); }
.menu-hero__cover figcaption { margin-top: 8px; font-size: 0.74rem; color: rgba(244,240,234,0.66); }
@media (max-width: 860px) {
  .menu-hero__grid { grid-template-columns: 1fr; }
  .menu-hero__cover { max-width: 240px; justify-self: start; }
}
.menu-body { background-color: var(--kraft); background-image: url("../img/kraft.jpg"); background-size: 460px; color: var(--kraft-txt); padding: clamp(28px, 4.4vw, 60px) 0 clamp(34px, 5vw, 64px); }
.menu-body__head { text-align: center; margin-bottom: clamp(20px, 3vw, 36px); }
.menu-body__head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3.4vw, 2.4rem); color: var(--brown-deep); margin: 0.2em 0 0.4em; }
.allergen { display: inline-block; border: 2px solid var(--teal-deep); padding: 0.7em 1.1em; font-size: 0.86rem; color: var(--brown-deep); max-width: 62ch; }
.menu-sec { margin-top: clamp(24px, 3.6vw, 48px); }
.menu-sec > h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.24rem, 2.8vw, 1.9rem); color: var(--brown-deep);
  margin: 0 0 0.5em; padding-bottom: 0.35em; border-bottom: 3px solid var(--teal-deep);
}
.menu-sec > h2 small { font-family: var(--font-util); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--teal-deep); }
.menu-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 0 clamp(24px, 4vw, 60px); }
.ml { list-style: none; margin: 0; padding: 0; }
.ml li { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items: baseline; padding: 0.6em 0; border-bottom: 1px dotted rgba(58,48,33,0.32); }
.ml .dish { font-size: clamp(0.94rem, 1.45vw, 1.04rem); }
.ml .price { font-size: 0.9rem; }
.menu-pdf { margin-top: clamp(26px, 4vw, 46px); text-align: center; }
.menu-pdf .note { margin: 0.9em 0 0; font-size: 0.84rem; color: rgba(51,41,28,0.85); }

/* ==========================================================================
   404
   ========================================================================== */
.nf { min-height: 100svh; display: grid; place-items: center; background: var(--ink-field); color: var(--cream); padding: calc(var(--bar-h) + 30px) 20px 40px; text-align: center; }
.nf h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 8vw, 5rem); color: var(--kraft); margin: 0 0 0.2em; }
.nf p { margin: 0 auto 1.5em; max-width: 44ch; color: rgba(244,240,234,0.88); }

/* ==========================================================================
   Reduced motion — final state immediately, no animation (P14)
   ========================================================================== */
@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;
  }
  .hero__frame, .hero__undersign { animation: none; }
  .ritual__track { animation: none; transform: none; }
  .reveal { transform: none; clip-path: none; }
}