@import url("fonts.css");

/* =====================================================================
   MACCHERONI REPUBLIC — warm modern osteria design system
   Editorial-luxury: warm paper, high-contrast Fraunces, film grain,
   double-bezel cards, fluid custom-easing motion. Mobile-first.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  /* palette — warm paper + a single locked brick-red accent (the Republic red) */
  --paper:        #F4EDE1;
  --paper-2:      #EAE0D0;
  --cream:        #FBF7EF;
  --ink:          #1E1A16;
  --ink-soft:     #5A5047;
  --ink-faint:    #8A7F72;
  --brick:        #A6392B;   /* primary accent */
  --brick-d:      #86281D;   /* darker shade — text/hover */
  --brick-lt:     #DD8264;   /* lighter shade — accents/labels on dark surfaces */
  --olive:        #3B402E;
  --olive-d:      #23271A;
  --line:         rgba(30,26,22,.11);
  --line-soft:    rgba(30,26,22,.06);
  --hi:           rgba(255,255,255,.5);

  /* legacy aliases (kept so existing selectors resolve to the one accent) */
  --terracotta:   var(--brick);
  --terracotta-d: var(--brick-d);

  /* Michelin's own red, sampled from the Bib Gourmand mark. Not a palette
     colour — it belongs to the trademark and is scoped to the quote band. */
  --michelin:     #C60304;

  /* type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;

  /* rhythm */
  --pad:   clamp(1.15rem, 5vw, 2.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw:  1280px;
  --section: clamp(5rem, 12vw, 11rem);
  --navh: clamp(6rem, 6vw + 1.2rem, 6.75rem);  /* floating header footprint + clearance (sticky offsets).
                                                  main.js overwrites this with the nav's measured height. */

  /* radii */
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* motion */
  --ease-expo:  cubic-bezier(.16, 1, .3, 1);
  --ease-fluid: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);  /* soft ease-out settle, no overshoot */

  /* soft ambient shadows, tinted warm to the paper (never harsh/black) */
  --shadow: 0 1px 2px rgba(58,48,36,.05), 0 18px 40px -24px rgba(58,48,36,.26);
  --shadow-lg: 0 2px 4px rgba(58,48,36,.06), 0 40px 80px -40px rgba(58,48,36,.40);
  --shadow-soft: 0 2px 6px rgba(58,48,36,.05), 0 22px 46px -30px rgba(58,48,36,.30);
  --shadow-photo: 0 4px 12px rgba(58,48,36,.07), 0 34px 60px -34px rgba(58,48,36,.42);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }

/* film-grain overlay (fixed, non-interactive) */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */
.display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--ink);
}
h1.display { font-size: clamp(3.4rem, 10vw, 8rem); font-weight: 600; letter-spacing: -.01em; }
h2.display { font-size: clamp(2.7rem, 6.6vw, 5.2rem); }
h3.display { font-size: clamp(1.8rem, 3.8vw, 2.9rem); font-weight: 600; }
.display em { font-style: italic; font-weight: 500; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: clamp(.62rem, 1.4vw, .72rem);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 600;
  color: var(--terracotta);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--terracotta); opacity: .55;
}
.eyebrow.center::after {
  content: ""; width: 26px; height: 1px; background: var(--terracotta); opacity: .55;
}

.lede {
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 40ch;
}
.muted { color: var(--ink-soft); }
.serif-note { font-family: var(--serif); font-style: italic; font-weight: 380; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3.5rem, 8vw, 6rem); }
.stack > * + * { margin-top: 1.2rem; }

/* ---------- buttons (island / button-in-button) ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  position: relative;
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .95rem 1.1rem .95rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  transition: transform .5s var(--ease-fluid), background-color .5s var(--ease-fluid), box-shadow .5s var(--ease-fluid);
  will-change: transform;
}
/* the inset sheet lifts any solid fill (ink or brick) by 8% — real hover
   feedback without hardcoding a second colour per variant. */
.btn:hover { box-shadow: var(--shadow-lg), inset 0 0 0 999px rgba(255,255,255,.08); }
.btn:active { transform: scale(.975); }
.btn__ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--fg) 16%, transparent);
  transition: transform .5s var(--ease-spring), background-color .5s var(--ease-fluid);
}
.btn:hover .btn__ico { transform: translate(3px, -2px) scale(1.06); }
.btn__ico svg { width: 15px; height: 15px; stroke: currentColor; }
.btn--terra { --bg: var(--terracotta); --fg: #fff; }
.btn--ghost {
  --bg: transparent; --fg: var(--ink);
  border: 1px solid var(--line);
  padding-left: 1.4rem;
}
.btn--ghost:hover { background: var(--cream); border-color: color-mix(in srgb, var(--ink) 24%, transparent); }
/* ghost button sitting on a dark photo (e.g. hero) — light text needs a dark hover fill */
.btn--onphoto { --bg: transparent; --fg: var(--paper); border: 1px solid rgba(255,255,255,.42); padding-left: 1.4rem; }
.btn--onphoto:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.72); }
.btn--sm { padding: .7rem .8rem .7rem 1.2rem; font-size: .85rem; }
.btn--sm .btn__ico { width: 28px; height: 28px; }

.textlink {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; color: var(--terracotta);
  border-bottom: 1px solid color-mix(in srgb, var(--terracotta) 35%, transparent);
  padding-bottom: 2px;
  transition: gap .4s var(--ease-fluid), border-color .4s var(--ease-fluid);
}
.textlink:hover { gap: .85em; border-color: var(--terracotta); }
.textlink svg { width: 14px; height: 14px; stroke: currentColor; fill: none; flex: none; }
.info a.textlink, .showcase__head .textlink { white-space: nowrap; }

/* ---------- soft card (frameless) ----------
   text cards get a quiet cream surface + warm shadow; image-only cores become
   rounded photos with a lift. No outlines, no picture-frame. */
.bezel { background: transparent; border: 0; border-radius: var(--r-lg); padding: 0; }
.bezel__core {
  background: var(--cream);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* =====================================================================
   NAV — floating glass pill + fluid hamburger + full-screen overlay
   ===================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; justify-content: center;
  padding-top: clamp(.8rem, 2vw, 1.4rem);
  pointer-events: none;
}
.nav__inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 1rem;
  width: min(100% - 2*var(--pad), var(--maxw));
  padding: .55rem .55rem .55rem 1.25rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 var(--hi) inset, 0 12px 30px -20px rgba(38,42,28,.5);
  transition: transform .6s var(--ease-fluid), box-shadow .6s var(--ease-fluid);
}
.nav__brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
.nav__brand img { height: 26px; width: auto; }
.nav__brand span { display: none; }
.nav__links { display: none; }
.nav__spacer { flex: 1; }

/* open-now pill */
.status {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .4rem .8rem; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  background: color-mix(in srgb, var(--olive) 10%, transparent);
  color: var(--olive);
  white-space: nowrap;
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.status[data-open="true"] .status__dot { background: #4e7a3e; box-shadow: 0 0 0 0 rgba(78,122,62,.5); animation: pulse 2.4s var(--ease-fluid) infinite; }
.status[data-open="false"] { color: var(--terracotta-d); background: color-mix(in srgb, var(--terracotta) 10%, transparent); }
.status[data-open="false"] .status__dot { background: var(--terracotta); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(78,122,62,.5);} 70% { box-shadow: 0 0 0 7px rgba(78,122,62,0);} 100% { box-shadow: 0 0 0 0 rgba(78,122,62,0);} }
@media (prefers-reduced-motion: reduce) { .status__dot { animation: none !important; } }

/* hamburger */
.burger { position: relative; width: 46px; height: 46px; border-radius: var(--r-pill); background: var(--ink); display: grid; place-items: center; flex: none; transition: background-color .5s var(--ease-fluid); }
.burger span { position: absolute; width: 17px; height: 1.6px; background: var(--paper); border-radius: 2px; transition: transform .5s var(--ease-fluid), opacity .3s var(--ease-fluid); }
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(3) { transform: translateY(4px); }
body.menu-open .burger span:nth-child(1) { transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: rotate(-45deg); }

/* full-screen overlay menu */
.overlay {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  backdrop-filter: blur(30px) saturate(1.3);
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease-fluid), visibility .6s;
}
body.menu-open .overlay { opacity: 1; visibility: visible; }
.overlay__nav { display: flex; flex-direction: column; gap: .1rem; max-width: var(--maxw); margin-inline: auto; width: 100%; }
.overlay__link {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 11vw, 5rem); line-height: 1.02;
  letter-spacing: -.02em; color: var(--ink);
  padding-block: .12em;
  display: inline-flex; align-items: baseline; gap: .5rem;
  transform: translateY(28px); opacity: 0;
  transition: transform .7s var(--ease-expo), opacity .7s var(--ease-expo), color .3s;
}
.overlay__link:hover { color: var(--terracotta); }
.overlay__link .num { font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--terracotta); letter-spacing: .1em; align-self: flex-start; margin-top: .4em; }
body.menu-open .overlay__link { transform: translateY(0); opacity: 1; }
body.menu-open .overlay__link:nth-child(1) { transition-delay: .08s; }
body.menu-open .overlay__link:nth-child(2) { transition-delay: .14s; }
body.menu-open .overlay__link:nth-child(3) { transition-delay: .20s; }
body.menu-open .overlay__link:nth-child(4) { transition-delay: .26s; }
body.menu-open .overlay__link:nth-child(5) { transition-delay: .32s; }
.overlay__foot { max-width: var(--maxw); margin: 2.5rem auto 0; width: 100%; display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; color: var(--ink-soft); font-size: .9rem; }
.overlay__foot a:hover { color: var(--terracotta); }

/* =====================================================================
   MOBILE STICKY ACTION BAR — Menu · Directions · Call
   ===================================================================== */
/* The bottom counterpart to the nav pill, and built from the same glass so the
   mobile shell reads as one system at both ends rather than a dark slab pasted
   over warm paper. Menu / Directions / Call are three peer actions, so they get
   hairline separators instead of one filled pill — a filled pill among equal
   siblings reads as a selected tab, not a call to action. Hidden until the hero
   is off screen (see main.js); the noscript block in render.mjs force-shows it. */
.actionbar {
  position: fixed; left: 50%; bottom: max(.85rem, env(safe-area-inset-bottom));
  z-index: 95; display: flex; padding: 4px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 var(--hi) inset, 0 14px 34px -18px rgba(38,42,28,.55);
  transform: translateX(-50%) translateY(150%); opacity: 0; pointer-events: none;
  transition: transform .6s var(--ease-fluid), opacity .6s var(--ease-fluid);
}
.actionbar.show { transform: translateX(-50%); opacity: 1; pointer-events: auto; }
.actionbar a {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .68rem 1.1rem; border-radius: var(--r-pill);
  color: var(--ink); font-size: .85rem; font-weight: 600;
  transition: background-color .4s var(--ease-fluid);
}
.actionbar a + a::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 1px; height: 17px; background: var(--line);
}
.actionbar a svg { width: 16px; height: 16px; stroke: var(--brick); flex: none; }
.actionbar a:hover, .actionbar a:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* retires with the burger — the mobile shell switches as one unit */
@media (min-width: 760px) { .actionbar { display: none; } }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,13,10,.5) 0%, rgba(16,13,10,.12) 24%, rgba(16,13,10,.34) 54%, rgba(16,13,10,.9) 100%),
    linear-gradient(72deg, rgba(16,13,10,.74) 0%, rgba(16,13,10,.34) 42%, transparent 68%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(6.5rem, 12vw, 8rem); }
.hero h1 { color: var(--paper); max-width: 15ch; text-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.38); }
.hero h1 em { color: var(--paper); }
.hero__sub { color: color-mix(in srgb, var(--paper) 94%, transparent); font-size: clamp(1.02rem, 2vw, 1.25rem); max-width: 42ch; margin-top: 1.5rem; text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero .eyebrow { color: color-mix(in srgb, var(--paper) 82%, var(--brick-lt)); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero .eyebrow::before { background: currentColor; }
.hero__scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 1; color: var(--paper); opacity: .6; font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.hero__scroll span { width: 1px; height: 34px; background: currentColor; animation: drift 2.6s var(--ease-fluid) infinite; transform-origin: top; }
@keyframes drift { 0%,100% { transform: scaleY(.35); opacity:.3;} 50% { transform: scaleY(1); opacity:.9;} }
@media (max-width: 620px) { .hero__scroll { display: none; } }

/* =====================================================================
   GENERIC SECTIONS / MANIFESTO
   ===================================================================== */
/* full-width centered page hero (distinct from the narrow 46ch section intro) */
.page-intro { max-width: min(64rem, 100%); margin-inline: auto; text-align: center; }
.page-intro .lede { margin-inline: auto; text-align: center; }

.manifesto { text-align: center; }
.manifesto .display { max-width: 20ch; margin-inline: auto; }
.rule { width: 46px; height: 1px; background: var(--brick); margin: 2rem auto; opacity: .55; }
.two-col { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
@media (min-width: 860px) { .two-col { grid-template-columns: 1.05fr .95fr; } .two-col.flip > :first-child { order: 2; } }
/* image side of a two-col: fills the full column height so it reads as a proper
   panel beside the text, never a short strip. */
.two-col > .bezel { align-self: stretch; }
.two-col > .bezel > .bezel__core { height: 100%; }
.two-col > .bezel > .bezel__core img {
  width: 100%; height: 100%; object-fit: cover;
  min-height: clamp(20rem, 38vw, 32rem);
}
/* text side stays vertically centered against the photo on wide screens */
@media (min-width: 860px) { .two-col > :not(.bezel) { align-self: center; } }

/* craft / feature cards (asymmetric bento) */
/* =====================================================================
   THE NATURE OF THE PASTA — one wide plate, then a quiet colophon
   The photo is the whole argument (strands off the brass die, cut by hand,
   this morning) and it reads left-to-right, so it runs wide rather than
   getting cropped into a column. Everything beside it stays flat — hanging
   numerals and hairlines, no cream cards — so the photo is the only loud
   thing in the section.
   ===================================================================== */
.nature__media {
  position: relative; margin: 0;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-photo);
}
@media (min-width: 720px)  { .nature__media { aspect-ratio: 16/9; } }
@media (min-width: 1040px) { .nature__media { aspect-ratio: 1580/882; } }
.nature__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 38% center;  /* hold the die and the knife in frame when cropped */
  transform: scale(1.075);
  transition: transform 1.7s var(--ease-expo);
}
/* the section's one authored moment: the plate settles out of its own crop
   as it arrives, instead of repeating the page's translate-up entrance */
.nature__media.in img { transform: scale(1); }
.nature__media:hover img { transform: scale(1.035); transition-duration: 1.1s; }
.nature__cap {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.3rem, 3.2vw, 2.4rem);
  background: linear-gradient(0deg, rgba(20,17,14,.86), rgba(20,17,14,.42) 46%, transparent);
}
.nature__cap h3 { color: var(--paper); }

.nature__notes {
  display: grid; gap: clamp(1.6rem, 3vw, 2.2rem) var(--gutter);
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
  grid-template-columns: 1fr;
  list-style: none; padding: 0;  /* the roman numerals are the numbering */
}
@media (min-width: 640px)  { .nature__notes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .nature__notes { grid-template-columns: repeat(4, 1fr); } }
.nature__note { border-top: 1px solid var(--line); padding-top: clamp(.9rem, 1.6vw, 1.15rem); }
/* Titles run to one or two lines depending on the copy. Across the desktop
   row that would stagger the paragraphs, so subgrid puts the numerals, titles
   and paragraphs on shared baselines. Stacked layouts don't need it. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1040px) {
    .nature__notes { grid-template-rows: auto auto 1fr; }
    .nature__note { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  }
}
.nature__n {
  display: block; margin-bottom: .5rem;
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 1.15rem; line-height: 1; color: var(--brick);
}
.nature__note h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.45rem, 1.9vw, 1.7rem);
  letter-spacing: -.005em; line-height: 1.12;
  text-wrap: balance;
}
.nature__note p { color: var(--ink-soft); font-size: .95rem; margin-top: .55rem; }

@media (prefers-reduced-motion: reduce) {
  .nature__media img,
  .nature__media.in img,
  .nature__media:hover img { transform: none; transition: none; }
}

/* =====================================================================
   SIGNATURE SHOWCASE (editorial split / horizontal scroll on mobile)
   ===================================================================== */
.showcase__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem,4vw,3.5rem); }
/* Full-bleed horizontal carousel. Two things are load-bearing here:
   scroll-padding-inline keeps `snap-align: start` from snapping the
   padding-inline away (without it the first card sits flush against the
   viewport edge), and overflow-y must be stated explicitly — declaring
   only overflow-x makes the other axis compute to `auto`, which turns the
   rail into a vertical scroll container that swallows page scroll while
   the cards' reveal transform is still overflowing it. */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78%, 1fr); gap: var(--gutter); overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding-bottom: 1rem; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .rail { grid-auto-columns: minmax(42%, 1fr); } }
@media (min-width: 1040px) { .rail { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.dish { scroll-snap-align: start; }
/* Keep the reveal's travel within the rail's padding-bottom so the clip from
   overflow-y: hidden never catches the card's bottom edge mid-animation.
   Above 1040px the rail is a plain grid (overflow: visible) — full travel. */
@media (max-width: 1039px) { .rail .reveal { transform: translateY(14px); } }
.dish__media { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-photo); }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-expo); }
.dish:hover .dish__media img { transform: scale(1.05); }
.dish__badge { position: absolute; top: 1rem; left: 1rem; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--paper); background: var(--brick); padding: .42rem .72rem; border-radius: var(--r-pill); box-shadow: 0 6px 16px -6px rgba(134,40,29,.6); }
.dish__body { padding: 1.35rem .15rem 0; }
.dish__row { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; }
.dish__name { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; letter-spacing: -.005em; line-height: 1.06; }
.dish__price { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: var(--brick); white-space: nowrap; }
.dish__desc { color: var(--ink-soft); font-size: .94rem; margin-top: .6rem; line-height: 1.55; }

/* =====================================================================
   MICHELIN QUOTE BAND
   ===================================================================== */
/* The Bib Gourmand is a Michelin trademark: it ships as its own file at its own
   official red (#C60304) and is never recoloured or redrawn. Rather than float
   it on a coin, the band itself goes light — cream reads 5.75:1 against that red
   — so the mark sits directly on the surface and becomes the most saturated
   thing on the page. Hairlines and the tonal lift off --paper define the band
   without a heavy fill; --michelin appears here and nowhere else, so it never
   competes with the Republic's own brick. */
.quote {
  background: var(--cream); color: var(--ink);
  border-block: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.quote .wrap { position: relative; text-align: center; }
.quote__bib {
  display: block; height: auto;
  width: clamp(80px, 10.5vw, 124px);
  margin: 0 auto clamp(1.8rem, 3.8vw, 2.8rem);
}
.quote blockquote { font-family: var(--serif); font-weight: 340; font-style: italic; font-size: clamp(1.4rem, 3.4vw, 2.4rem); line-height: 1.35; max-width: 22ch; margin: 0 auto; letter-spacing: -.01em; color: var(--ink); }
.quote cite {
  display: inline-flex; align-items: center; gap: .9em;
  margin-top: clamp(1.9rem, 3.6vw, 2.7rem);
  font-style: normal; font-family: var(--sans);
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);  /* ink-faint only reaches 3.67:1 on cream at this size */
}
/* hairline flanks tie the attribution to the mark's colour without another fill */
.quote cite::before, .quote cite::after {
  content: ""; width: clamp(18px, 4vw, 34px); height: 1px;
  background: color-mix(in srgb, var(--michelin) 45%, transparent);
}
.quote cite b { color: var(--michelin); font-weight: 700; }

/* =====================================================================
   VISIT STRIP / INFO
   ===================================================================== */
.info-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .info-grid { grid-template-columns: repeat(4, 1fr); } }
.info { padding: 1.8rem; height: 100%; }
.info h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; color: var(--terracotta); margin-bottom: .9rem; font-weight: 700; }
.info p, .info a { font-size: 1rem; color: var(--ink); }
.info .big { font-family: var(--serif); font-size: 1.35rem; font-weight: 420; line-height: 1.3; }
.info a.textlink { font-size: .95rem; margin-top: .4rem; }

/* =====================================================================
   MENU PAGE
   ===================================================================== */
.menu-hero { padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); text-align: center; }
/* Cormorant's italic descenders (g, p) hang well below the line box, so a tight
   1.02 leading collides with whatever follows. Give the last line real room. */
.menu-hero h1 { line-height: 1.12; }
.menu-hero .lede { margin-inline: auto; margin-top: clamp(2.4rem, 4.5vw, 3.6rem); text-align: center; max-width: 48ch; }
.menu-hero .serif-note { display: block; margin-top: .5rem; }
/* Wraps rather than scrolls, so no category is ever clipped at mid-width.
   Only genuinely narrow screens fall back to a horizontal scroller. */
.catnav {
  position: sticky; top: var(--navh); z-index: 60;
  display: flex; justify-content: center;
  width: max-content; max-width: min(100% - 2*var(--pad), var(--maxw));
  margin: 1.5rem auto 0;
  padding: .5rem .75rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 var(--hi) inset, 0 12px 28px -22px rgba(38,42,28,.5);
}
.catnav::-webkit-scrollbar { display: none; }
.catnav__in { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; width: 100%; }
/* narrow screens: single row that scrolls, with the ends inset clear of the pill curve */
@media (max-width: 660px) {
  /* `safe` is load-bearing: plain `center` centres the overflow in both
     directions, parking the row mid-scroll with the first categories off the
     left edge and unreachable (scrollLeft can't go negative). `safe center`
     falls back to start alignment the moment the row overflows. */
  .catnav { overflow-x: auto; scrollbar-width: none; scroll-padding-inline: .75rem; justify-content: safe center; }
  .catnav__in { flex-wrap: nowrap; width: max-content; }
}
.catnav a {
  white-space: nowrap; padding: .5rem .95rem; border-radius: var(--r-pill);
  font-size: .84rem; font-weight: 600; color: var(--ink-soft);
  transition: background-color .4s var(--ease-fluid), color .4s var(--ease-fluid);
}
.catnav a:hover { color: var(--ink); background: var(--paper-2); }
.catnav a.active { background: var(--ink); color: var(--paper); }

.menu-cat { padding-top: clamp(3rem, 7vw, 5rem); scroll-margin-top: calc(var(--navh) + 4rem); }
.menu-cat__head { text-align: center; max-width: 46ch; margin: 0 auto clamp(2rem,4vw,3rem); }
.menu-cat__head h2 { margin-bottom: .6rem; }
.menu-cat__head p { color: var(--ink-soft); }

/* food cards grid */
.food-grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 640px) { .food-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .food-grid { grid-template-columns: repeat(3, 1fr); } }
.subhead { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.subhead span { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--olive); }

.fcard { display: flex; flex-direction: column; height: 100%; }
.fcard__media { aspect-ratio: 3/2; overflow: hidden; position: relative; border-radius: var(--r-md); box-shadow: var(--shadow-photo); }
.fcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-expo); }
.fcard:hover .fcard__media img { transform: scale(1.055); }
.fcard__body { padding: 1.15rem .1rem 0; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.fcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.fcard__name { font-family: var(--serif); font-weight: 600; font-size: 1.42rem; line-height: 1.08; letter-spacing: -.005em; }
.fcard__price { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; color: var(--brick); white-space: nowrap; }
.fcard__desc { color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.fcard__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .55rem; }
.tag { font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; padding: .28rem .55rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--olive) 12%, transparent); color: var(--olive); }
.tag--sig { background: color-mix(in srgb, var(--terracotta) 14%, transparent); color: var(--terracotta-d); }
.tag--gf { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); }

/* drink lists */
.drink-list { columns: 1; column-gap: clamp(2rem, 6vw, 5rem); max-width: 60rem; margin-inline: auto; }
@media (min-width: 760px) { .drink-list { columns: 2; } }
.drink-sub { break-inside: avoid; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--olive); margin: 1.8rem 0 .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.drink-sub:first-child { margin-top: 0; }
.drink { break-inside: avoid; padding: .75rem 0; border-bottom: 1px solid var(--line-soft); }
.drink__row { display: flex; align-items: baseline; gap: .7rem; justify-content: space-between; }
.drink__name { font-weight: 600; font-size: 1rem; }
.drink__dots { flex: 1; border-bottom: 1px dotted var(--ink-faint); transform: translateY(-3px); opacity: .5; }
.drink__price { font-family: var(--serif); font-weight: 440; color: var(--terracotta); white-space: nowrap; }
.drink__desc { color: var(--ink-soft); font-size: .85rem; margin-top: .25rem; line-height: 1.5; max-width: 52ch; }

.menu-note { text-align: center; max-width: 52ch; margin: clamp(3rem,6vw,4rem) auto 0; padding: 1.6rem; color: var(--ink-soft); font-size: .92rem; }
.menu-note strong { color: var(--ink); }

/* =====================================================================
   CRAFT PAGE
   ===================================================================== */
.subhero { padding-top: clamp(8rem, 16vw, 12rem); }
.grain-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .grain-grid { grid-template-columns: repeat(3, 1fr); } }
.grain { padding: 1.5rem; }
.grain h4 { font-family: var(--serif); font-weight: 440; font-size: 1.2rem; margin-bottom: .4rem; }
.grain p { color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }
.grain em { font-style: italic; color: var(--terracotta); }

.process { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .process { grid-template-columns: repeat(4, 1fr); } }
.step { padding: 1.8rem; height: 100%; }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--serif); font-style: italic; font-size: 2.4rem; font-weight: 600; color: var(--brick); display: block; margin-bottom: .6rem; }
.step h4 { font-family: var(--serif); font-weight: 440; font-size: 1.25rem; margin-bottom: .5rem; }
.step p { color: var(--ink-soft); font-size: .92rem; }

/* =====================================================================
   FAQ (accordion)
   ===================================================================== */
.faq { max-width: 52rem; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.4rem .2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--serif); font-weight: 440; font-size: clamp(1.1rem, 2.2vw, 1.4rem); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { position: relative; width: 20px; height: 20px; flex: none; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: var(--terracotta); transition: transform .4s var(--ease-fluid); }
.faq summary .plus::before { top: 9px; left: 0; width: 20px; height: 1.5px; }
.faq summary .plus::after { left: 9px; top: 0; height: 20px; width: 1.5px; }
.faq details[open] summary .plus::after { transform: scaleY(0); }
.faq details > div { padding: 0 .2rem 1.5rem; color: var(--ink-soft); max-width: 60ch; line-height: 1.6; }
.faq a { color: var(--terracotta); border-bottom: 1px solid currentColor; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--olive-d); color: color-mix(in srgb, var(--paper) 82%, transparent); padding-block: clamp(4rem,8vw,6rem) 8rem; }
@media (min-width: 900px) { .footer { padding-bottom: clamp(4rem,8vw,6rem); } }
.footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand .display { color: var(--paper); font-size: clamp(2rem,5vw,3rem); }
.footer__brand p { color: color-mix(in srgb, var(--paper) 60%, transparent); margin-top: 1rem; max-width: 32ch; }
.footer h5 { font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; color: var(--brick-lt); margin-bottom: 1.1rem; font-weight: 700; }
.footer li { margin-bottom: .6rem; }
.footer a:hover { color: var(--paper); }
.footer__hours span { display: flex; justify-content: space-between; gap: 1rem; max-width: 15rem; margin-bottom: .4rem; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: color-mix(in srgb, var(--paper) 50%, transparent); }
.footer__social { display: flex; gap: .6rem; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: grid; place-items: center; transition: background-color .4s var(--ease-fluid), transform .4s var(--ease-spring); }
.footer__social a:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }

/* =====================================================================
   DESKTOP NAV EXPANSION
   ===================================================================== */
/* The burger is the fallback for when the links no longer fit — not a
   "mobile" style. Thresholds are the widths at which .nav__inner can no
   longer hold its own content (brand 147 + links 296 + status 128 + gaps
   + padding), given .nav__inner = min(100vw - 2*var(--pad), var(--maxw)):
     brand + links + status          needs ~648px  → shows from 760px
     ...plus the Menu CTA            needs ~775px  → shows from 900px
   The CTA drops first below 900 because it duplicates the "Menu" link. */
.nav__cta { display: none; }

@media (min-width: 760px) {
  .nav__brand span { display: inline; }
  .nav__links { display: flex; align-items: center; gap: .3rem; }
  .nav__links a { padding: .5rem .9rem; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600; color: var(--ink-soft); transition: color .35s var(--ease-fluid), background-color .35s var(--ease-fluid); }
  .nav__links a:hover, .nav__links a.active { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .burger { display: none; }
}
@media (max-width: 759px) { .nav__status-desktop { display: none; } }
@media (min-width: 900px) { .nav__cta { display: inline-flex; } }

/* =====================================================================
   SCROLL REVEAL
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity .9s var(--ease-expo), transform .9s var(--ease-expo), filter .9s var(--ease-expo); will-change: transform, opacity; }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__media img { transform: none; }
  * { animation-duration: .001ms !important; }
}