/* ==========================================================================
   MAISON NOIR - shared stylesheet
   Mobile-first. Single axis, centered 620px measure, drenched noir surface.
   Breakpoints tested: 360 / 768 / 1024 / 1440 / 1920.
   Gold (#B9985A) is a 1px hairline only. Never a fill, never a gradient.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surface + ink. Contrast ratios against --noir noted for auditing. */
  --noir:        #0B0B0B;
  --noir-lift:   #121212;   /* form fields, overlay scrim base */
  --noir-deep:   #060606;   /* footer, ad slot recess */
  --ivory:       #EFEAE1;   /* 15.4:1  headings, primary ink */
  --ivory-2:     #C9C3B8;   /* 10.7:1  prose */
  --ivory-3:     #9E988C;   /*  6.0:1  meta, captions, leaders */
  --gold:        #B9985A;   /*  6.9:1  hairlines, link underline, tags */

  --hair:        rgba(185, 152, 90, 0.30);  /* gold hairline, 1px use only */
  --hair-soft:   rgba(239, 234, 225, 0.12);
  --hair-dot:    rgba(158, 152, 140, 0.55); /* dotted leader */

  --focus:       #EFEAE1;

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --t-hero:  clamp(2.35rem, 8.5vw, 4.5rem);   /* 72px ceiling */
  --t-h2:    clamp(1.75rem, 5.2vw, 2.6rem);
  --t-h3:    clamp(1.35rem, 3.6vw, 1.75rem);
  --t-h4:    1.15rem;
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-caps:  0.72rem;

  /* Layout */
  --measure:      620px;
  --measure-wide: 1080px;
  --gutter:       clamp(1.25rem, 5vw, 2.5rem);
  --section-y:    clamp(4.5rem, 12vw, 9rem);
  --stack:        clamp(1.5rem, 4vw, 2.25rem);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: 1s;

  /* Semantic z-index scale. No arbitrary values anywhere in this file. */
  --z-base: 1;
  --z-sticky: 100;
  --z-totop: 200;
  --z-overlay: 300;
  --z-banner: 400;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--ivory-2);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.85;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--ivory);
  letter-spacing: 0.02em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); letter-spacing: 0.03em; }

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

ul, ol { margin: 0 0 1.35em; padding-left: 1.15em; }
li { margin-bottom: 0.5em; }

/* Focus: visible, gold-free so it reads as system chrome, not decoration. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

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

/* --------------------------------------------------------------------------
   3. SKIP LINK
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: var(--z-banner);
  background: var(--ivory);
  color: var(--noir);
  padding: 0.75rem 1.5rem;
  font-size: var(--t-caps);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--measure-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section--rule { border-top: 1px solid var(--hair); }

.center { text-align: center; }
.stack > * + * { margin-top: var(--stack); }

/* Prose column. Sentence-case Jost, capped measure for readability. */
.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 { margin-top: 2.5em; margin-bottom: 0.7em; }
.prose h3 { margin-top: 2em; margin-bottom: 0.6em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1em; }
.prose li::marker { color: var(--gold); }
.prose blockquote {
  margin: 2.5em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding-block: 1.75em;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ivory);
  text-align: center;
}
.prose blockquote p { margin: 0; }
.prose blockquote cite {
  display: block;
  margin-top: 1em;
  font-family: var(--sans);
  font-size: var(--t-caps);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ivory-3);
}

/* --------------------------------------------------------------------------
   5. TYPE UTILITIES (the caps register from the brief)
   -------------------------------------------------------------------------- */
.caps {
  font-family: var(--sans);
  font-size: var(--t-caps);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1.6;
}
.label { /* used sparingly, never above every section */
  display: block;
  font-family: var(--sans);
  font-size: var(--t-caps);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--ivory-3);
}
.lede {
  font-size: 1.0625rem;
  color: var(--ivory-2);
  max-width: 60ch;
  margin-inline: auto;
}
.meta { font-size: var(--t-small); color: var(--ivory-3); }
.hairline {
  width: 1px;
  height: clamp(3rem, 9vw, 5.5rem);
  margin: 0 auto;
  background: var(--gold);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   6. LINKS + THE ONE BUTTON
   -------------------------------------------------------------------------- */
a { color: var(--ivory); }

a.u, .prose a, .foot a, .leader a {
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
a.u:hover, .prose a:hover, .foot a:hover, .leader a:hover {
  color: var(--gold);
  border-color: var(--ivory);
}

.btn-thin {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-caps);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ivory);
  background: transparent;
  border: 1px solid var(--hair);
  padding: 1.05rem 2.1rem;
  min-height: 44px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease),
              background-color 0.5s var(--ease);
}
.btn-thin:hover, .btn-thin:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}
.btn-thin[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-thin--solid {
  background: var(--ivory);
  color: var(--noir);
  border-color: var(--ivory);
}
.btn-thin--solid:hover, .btn-thin--solid:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--noir);
}

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. HEADER (centered wordmark, links live in the overlay only)
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.hdr__in {
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.wordmark {
  grid-column: 2;
  justify-self: center;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--ivory);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.5s var(--ease);
}
.wordmark:hover { color: var(--gold); }
.wordmark span { color: var(--gold); }

.navtog {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.5rem 0.15rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--t-caps);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ivory);
  transition: color 0.4s var(--ease);
}
.navtog:hover { color: var(--gold); }
.navtog__bars { position: relative; width: 22px; height: 7px; display: block; }
.navtog__bars::before, .navtog__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease);
}
.navtog__bars::before { top: 0; }
.navtog__bars::after { bottom: 0; }
.navtog[aria-expanded="true"] .navtog__bars::before { transform: translateY(3px) rotate(45deg); }
.navtog[aria-expanded="true"] .navtog__bars::after  { transform: translateY(-3px) rotate(-45deg); }
.navtog__txt { display: none; }

.hdr__cta {
  grid-column: 3;
  justify-self: end;
  padding: 0.7rem 1.15rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------------------
   8. FULL-SCREEN OVERLAY MENU
   -------------------------------------------------------------------------- */
.navov {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--noir);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--slow) var(--ease), visibility var(--slow);
}
.navov.is-open { opacity: 1; visibility: visible; }
.navov__in {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6rem var(--gutter) 4rem;
  text-align: center;
}
.navov__close {
  position: absolute;
  top: 14px;
  right: var(--gutter);
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--ivory);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--t-caps);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  transition: color 0.4s var(--ease);
}
.navov__close:hover { color: var(--gold); }

.navov__list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 420px; }
.navov__list > li { margin: 0; border-bottom: 1px solid var(--hair-soft); }
.navov__link {
  display: block;
  padding: 0.95rem 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ivory);
  text-decoration: none;
  transition: color 0.5s var(--ease);
}
.navov__link:hover { color: var(--gold); }
.navov__link[aria-current="page"] { color: var(--gold); }
.navov__link[aria-current="page"]::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin: 0.35rem auto 0;
}

/* Overlay dropdown group */
.navdrop__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.95rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ivory);
  transition: color 0.5s var(--ease);
}
.navdrop__btn:hover { color: var(--gold); }
.navdrop__btn::after {
  content: "\002B"; /* Unicode plus. No SVG anywhere in this project. */
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--gold);
  transition: transform 0.45s var(--ease);
}
.navdrop__btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.navdrop__panel { display: none; padding: 0 0 1.1rem; }
.navdrop__panel.is-open { display: block; }
.navdrop__panel ul { list-style: none; margin: 0; padding: 0; }
.navdrop__panel li { margin: 0; }
.navdrop__panel a {
  display: block;
  padding: 0.6rem 0;
  font-family: var(--sans);
  font-size: var(--t-caps);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ivory-2);
  text-decoration: none;
  transition: color 0.4s var(--ease);
}
.navdrop__panel a:hover { color: var(--gold); }
.navdrop__panel a[aria-current="page"] { color: var(--gold); }

.navov__foot { margin-top: 2.75rem; }
.navov__foot p { margin: 0 0 0.4rem; }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. HERO (black screen, one small centered plated dish, name in thin serif)
   -------------------------------------------------------------------------- */
.hero {
  min-height: calc(100dvh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(3rem, 10vw, 6rem) var(--gutter);
}
.hero__plate {
  width: clamp(148px, 34vw, 230px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%; /* the only circle in the system: it is a plate */
  border: 1px solid var(--hair);
  margin-bottom: clamp(2rem, 6vw, 3.25rem);
}
.hero__plate img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.86) contrast(1.06); }
.hero h1 { margin-bottom: 1.1rem; }
.hero__sub { color: var(--ivory-3); margin-bottom: clamp(2rem, 6vw, 3rem); }
.hero__cta { margin-top: 0.5rem; }

/* Page hero for interior pages */
.phero { padding: clamp(3.5rem, 11vw, 7rem) 0 clamp(2.5rem, 7vw, 4rem); text-align: center; }
.phero h1 { margin-bottom: 1.15rem; }
.phero .lede { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   10. FIGURES (single dish per section, deep shadow, no props)
   -------------------------------------------------------------------------- */
.fig { margin: 0; }
.fig img {
  width: 100%;
  filter: brightness(0.88) contrast(1.05) saturate(0.92);
}
.fig figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-small);
  color: var(--ivory-3);
  text-align: center;
}
.fig--dish { max-width: 420px; margin-inline: auto; }
.fig--band img { aspect-ratio: 16 / 9; object-fit: cover; }
.fig--tall img { aspect-ratio: 3 / 4; object-fit: cover; }

/* --------------------------------------------------------------------------
   11. SIGNATURE DETAIL: dotted leader lines to prices
       Used on every page in the site. Pure CSS, no SVG.
   -------------------------------------------------------------------------- */
.leaders { list-style: none; margin: 0; padding: 0; }
.leaders > li { margin: 0 0 1.9rem; }
.leaders > li:last-child { margin-bottom: 0; }

.leader {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
}
.leader__name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: left;
}
.leader__fill {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--hair-dot);
  transform: translateY(-0.3em);
}
.leader__price {
  font-family: var(--sans);
  font-size: var(--t-caps);
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--gold);
  white-space: nowrap;
}
.leader__price--ivory { color: var(--ivory); }

/* Item body: description bullets + dietary tags */
.item__desc {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  text-align: left;
}
.item__desc li {
  position: relative;
  padding-left: 1.05rem;
  margin: 0 0 0.25rem;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ivory-2);
}
.item__desc li::before {
  content: "\00B7"; /* Unicode middle dot as the bullet glyph */
  position: absolute;
  left: 0.15rem;
  top: -0.05em;
  color: var(--gold);
  font-size: 1.2rem;
  line-height: 1.4;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.tag {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  border: 1px solid var(--hair);
  padding: 0.28rem 0.5rem 0.22rem;
  line-height: 1;
}
.tag--note { color: var(--ivory-3); border-color: var(--hair-soft); }

/* Course group: hairline-framed, not a card. Radius 0, no fill, no shadow. */
.course {
  border: 1px solid var(--hair-soft);
  border-top: 1px solid var(--hair);
  padding: clamp(1.75rem, 5vw, 2.5rem) clamp(1.25rem, 4vw, 2.25rem);
  margin-bottom: clamp(2rem, 6vw, 3rem);
}
.course:last-child { margin-bottom: 0; }
.course__head { text-align: center; margin-bottom: clamp(1.75rem, 5vw, 2.4rem); }
.course__head h3 { margin-bottom: 0.5rem; }
.course__head p { margin: 0; font-size: var(--t-small); color: var(--ivory-3); }
.course__num {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------------------
   12. GRIDS (the two documented wide exceptions)
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.grid--gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--loc { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.gcard { border-top: 1px solid var(--hair); padding-top: 1.5rem; text-align: center; }
.gcard h3 { margin-bottom: 0.75rem; }
.gcard .fig { margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   13. FORMS
   -------------------------------------------------------------------------- */
.form { max-width: var(--measure); margin-inline: auto; text-align: left; }
.field { margin-bottom: 1.75rem; }
.field > label,
.fieldset > legend {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-caps);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ivory);
  margin-bottom: 0.6rem;
}
.field__hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--ivory-3);
  margin-bottom: 0.6rem;
  line-height: 1.6;
}
.req { color: var(--gold); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 48px;
  background: var(--noir-lift);
  border: 1px solid var(--hair-soft);
  border-radius: 0;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.4s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
select {
  background-image: none;
  padding-right: 2.5rem;
  cursor: pointer;
}
.selectwrap { position: relative; }
.selectwrap::after {
  content: "\25BE"; /* Unicode caret. No SVG. */
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  pointer-events: none;
  font-size: 0.8rem;
}
input::placeholder, textarea::placeholder {
  color: #8C877E; /* 4.9:1 on --noir-lift, meets AA */
  opacity: 1;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.check { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1rem; }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 20px; height: 20px;
  margin: 0.25rem 0 0;
  accent-color: var(--gold);
  flex: 0 0 auto;
}
.check label {
  font-size: var(--t-small);
  color: var(--ivory-2);
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 0;
  font-family: var(--sans);
}

.radiorow { display: grid; gap: 0.75rem; }
.radiocard {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid var(--hair-soft);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.4s var(--ease);
}
.radiocard:hover, .radiocard:focus-within { border-color: var(--gold); }
.radiocard input { margin-top: 0.3rem; }
.radiocard span { display: block; }
.radiocard .rc-title {
  font-family: var(--sans);
  font-size: var(--t-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ivory);
}
.radiocard .rc-sub { font-size: var(--t-small); color: var(--ivory-3); line-height: 1.6; margin-top: 0.3rem; }

.fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; }

/* Inline validation */
.error {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: #E9A2A2; /* 8.1:1 on noir */
}
.field.has-error .error { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #E9A2A2; }

.formnote {
  font-size: 0.8125rem;
  color: var(--ivory-3);
  line-height: 1.7;
  margin-top: 1.25rem;
}
.formstatus {
  display: none;
  border: 1px solid var(--hair);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.75rem;
  font-size: var(--t-small);
  color: var(--ivory);
}
.formstatus.is-shown { display: block; }

/* Quantity stepper on the order page. Buttons are 44px tall via .btn-thin. */
.qty { position: relative; }
.qty__val {
  display: inline-block;
  min-width: 2.5ch;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--ivory);
}
.qty__btn { font-size: 0.95rem; letter-spacing: 0; line-height: 1; }

/* --------------------------------------------------------------------------
   14. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--hair); }
.acc__item { border-bottom: 1px solid var(--hair-soft); }
.acc__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: 0.02em;
  line-height: 1.4;
  transition: color 0.4s var(--ease);
}
.acc__btn:hover { color: var(--gold); }
.acc__btn::after {
  content: "\002B";
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--gold);
  transition: transform 0.45s var(--ease);
  line-height: 1.8;
}
.acc__btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.acc__panel { display: none; padding: 0 0 1.6rem; }
.acc__panel.is-open { display: block; }
.acc__panel p { font-size: var(--t-small); }
.acc__panel p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   15. TABLES (allergen matrix, nutrition)
   -------------------------------------------------------------------------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  min-width: 480px;
}
caption {
  caption-side: top;
  text-align: left;
  font-size: var(--t-caps);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ivory-3);
  padding-bottom: 1rem;
}
th, td { padding: 0.85rem 0.75rem; text-align: left; vertical-align: top; }
thead th {
  border-bottom: 1px solid var(--hair);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}
tbody tr + tr td { border-top: 1px solid var(--hair-soft); }
tbody th { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--ivory); }

/* --------------------------------------------------------------------------
   16. AD SLOTS
       Labeled, visually distinct, never above the main content of the fold,
       never adjacent to nav or buttons. Absent from legal pages and the 404.
   -------------------------------------------------------------------------- */
.adslot {
  max-width: var(--measure);
  margin: clamp(3rem, 9vw, 5rem) auto;
  padding-inline: var(--gutter);
}
.adslot__inner {
  border: 1px dashed var(--hair-soft);
  background: var(--noir-deep);
  padding: 1.5rem 1rem;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.adslot__label {
  font-family: var(--sans);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ivory-3);
}
.adslot__note { font-size: 0.75rem; color: #7C776F; margin: 0; }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.foot {
  background: var(--noir-deep);
  border-top: 1px solid var(--hair);
  padding: clamp(3.5rem, 10vw, 6rem) 0 2.5rem;
  font-size: var(--t-small);
}
.foot__in { max-width: var(--measure-wide); margin-inline: auto; padding-inline: var(--gutter); }
.foot__brand { text-align: center; margin-bottom: clamp(2.5rem, 7vw, 4rem); }
.foot__brand .wordmark { font-size: 1rem; }
.foot__brand p { margin: 1.1rem auto 0; max-width: 46ch; color: var(--ivory-3); }
.foot__cols {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
  border-bottom: 1px solid var(--hair-soft);
}
.foot__col h2 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col li { margin-bottom: 0.65rem; }
.foot__col a { color: var(--ivory-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color .4s var(--ease), border-color .4s var(--ease); }
.foot__col a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.foot__col address { font-style: normal; color: var(--ivory-3); line-height: 1.8; }

.foot__legal {
  padding-top: 2rem;
  text-align: center;
  color: var(--ivory-3);
  font-size: 0.8125rem;
}
.foot__legal ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  justify-content: center;
}
.foot__legal a, .foot__legal button {
  color: var(--ivory-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.8125rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.foot__legal a:hover, .foot__legal button:hover { color: var(--gold); border-bottom-color: var(--gold); }
.foot__legal p { margin: 0 auto; max-width: 62ch; }
.dns { color: var(--gold) !important; border-bottom: 1px solid var(--gold) !important; }

/* --------------------------------------------------------------------------
   18. COOKIE CONSENT
       Bottom-anchored, does not block content on load, no interstitial.
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-banner);
  background: var(--noir-lift);
  border-top: 1px solid var(--gold);
  padding: 1.35rem var(--gutter) calc(1.35rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 0.7s var(--ease);
}
.cookie.is-shown { transform: translateY(0); }
.cookie__in {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  gap: 1.1rem;
}
.cookie h2 {
  font-family: var(--sans);
  font-size: var(--t-caps);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.cookie p { font-size: 0.8125rem; margin: 0; color: var(--ivory-2); }
.cookie__btns { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cookie__btns .btn-thin { padding: 0.8rem 1.4rem; font-size: 0.65rem; letter-spacing: 0.18em; }

.cookie__prefs { display: none; border-top: 1px solid var(--hair-soft); padding-top: 1.1rem; }
.cookie__prefs.is-open { display: block; }
.cookie__prefs .check label { font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   19. BACK TO TOP
   -------------------------------------------------------------------------- */
.totop {
  position: fixed;
  right: var(--gutter);
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: var(--z-totop);
  width: 46px;
  height: 46px;
  background: rgba(11, 11, 11, 0.9);
  border: 1px solid var(--hair);
  color: var(--ivory);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0.6s, border-color 0.4s var(--ease), color 0.4s var(--ease);
  font-size: 0.85rem;
  line-height: 1;
}
/* Sentinel for the back-to-top observer. Needs real dimensions so the
   IntersectionObserver reports it reliably across browsers. */
#topSentinel { display: block; width: 100%; height: 1px; }

.totop.is-shown { opacity: 1; visibility: visible; }
.totop:hover { border-color: var(--gold); color: var(--gold); }

/* --------------------------------------------------------------------------
   20. MOTION
       Reveals enhance an already-visible default: the hidden state is scoped
       under html.js so a no-JS or headless render ships every section visible.
   -------------------------------------------------------------------------- */
html.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  will-change: opacity, transform;
}
html.js .rv.is-in { opacity: 1; transform: none; will-change: auto; }

/* Letter-by-letter title reveal. JS wraps characters; CSS animates them. */
html.js .split .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  animation: chIn 1s var(--ease) forwards;
}
@keyframes chIn { to { opacity: 1; transform: none; } }

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

/* --------------------------------------------------------------------------
   21. BREAKPOINTS
   -------------------------------------------------------------------------- */

/* 360px and below: keep the leader rows from breaking */
@media (max-width: 380px) {
  .leader { flex-wrap: wrap; }
  .leader__name { font-size: 1.08rem; }
  .leader__fill { min-width: 1rem; }
  .hdr__cta { display: none; }
  .wordmark { font-size: 0.95rem; letter-spacing: 0.3em; }
}

/* 768px: tablet */
@media (min-width: 768px) {
  .navtog__txt { display: inline; }
  .hdr__in { height: 76px; }
  .wordmark { font-size: 1.3rem; }
  .navov__link, .navdrop__btn { font-size: 2rem; }
  .navov__list { max-width: 520px; }
  .cookie__in { grid-template-columns: 1fr auto; align-items: center; }
  .cookie__prefs { grid-column: 1 / -1; }
  .leader__name { font-size: 1.3rem; }
  .grid--two { gap: 3rem; }
}

/* 1024px: laptop */
@media (min-width: 1024px) {
  .hdr__in { height: 80px; }
  .navov__link, .navdrop__btn { font-size: 2.2rem; }
  .foot__cols { grid-template-columns: repeat(4, 1fr); }
  .totop { right: 2rem; bottom: 2rem; }
}

/* 1440px: desktop. The measure never widens; the air around it does. */
@media (min-width: 1440px) {
  :root { --section-y: clamp(6rem, 10vw, 11rem); }
  .navov__list { max-width: 560px; }
}

/* 1920px: keep the single column optically centered on very wide screens */
@media (min-width: 1920px) {
  :root { --measure-wide: 1240px; }
  .hero { min-height: calc(100dvh - 80px); }
}

/* --------------------------------------------------------------------------
   22. PRINT (menus get printed by guests and by the host stand)
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #111; }
  .hdr, .navov, .cookie, .totop, .adslot, .foot__cols { display: none !important; }
  h1, h2, h3, h4 { color: #111; }
  .leader__price { color: #111; }
  .fig, .hero__plate { display: none; }
  a { color: #111; border-bottom: 0; }
}