@charset "UTF-8";
/* ==========================================================================
   K Kitchen Catering Ltd, design system
   World: the kankotri, a Gujarati wedding invitation card.
   Deep sindoor ground, real gold foil rules, uncoated ivory cotton planes,
   letterpress deboss, tipped-in photographs, leaves that stack.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Sindoor red, the card stock. Carries the large regions. */
  --red-900: #3F0A11;
  --red-800: #5E1018;
  --red-700: #7C1720;   /* primary ground */
  --red-600: #97202A;
  --red-500: #B32B33;

  /* Bottle green, the secondary leaf. */
  --green-900: #0F2A20;
  --green-800: #163A2C;
  --green-700: #1E4636;

  /* Gold foil. Not a flat yellow: a range that can catch light. */
  --gold-100: #F8ECC8;
  --gold-200: #EFDCA4;
  --gold-300: #E3C46A;  /* gold TEXT on red, 6.4:1 */
  --gold-500: #C9A227;  /* rules, foil blocking */
  --gold-700: #9A7B18;
  --gold-900: #6B5410;

  /* Uncoated cotton paper, the content planes. */
  --paper:      #F8F2E6;
  --paper-2:    #F1E8D6;
  --paper-3:    #E8DCC4;
  --paper-edge: #D9C9A9;

  /* Letterpress ink. */
  --ink:      #2A1D18;
  --ink-soft: #5A473D;
  --ink-mute: #6F5B4E;

  /* Semantic */
  --bg: var(--paper);
  --fg: var(--ink);
  --rule: color-mix(in srgb, var(--gold-500) 45%, transparent);
  --rule-strong: var(--gold-500);
  --focus: #1E5FC4;
  /* Darkened from WhatsApp brand green: white on #1E9E58 is 3.47:1,
     which fails AA for these small uppercase labels. This is 5.4:1. */
  --whatsapp: #157A43;
  --whatsapp-dark: #0F6234;

  /* Type */
  --ff-display: "Cinzel", "Cinzel Fallback", Georgia, "Times New Roman", serif;
  --ff-body: "Hind Vadodara", "HV Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale. Mobile first, capped so laptops stay composed. */
  --fs-micro: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --fs-small: clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem);
  --fs-body:  clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-lead:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h4:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h3:    clamp(1.375rem, 1.24rem + 0.7vw, 1.875rem);
  --fs-h2:    clamp(1.75rem, 1.45rem + 1.5vw, 3rem);
  --fs-h1:    clamp(2.25rem, 1.75rem + 2.5vw, 3.9rem);

  /* Spacing, one rhythm throughout */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  --wrap: 74rem;
  --wrap-wide: 86rem;
  --wrap-narrow: 46rem;
  /* The floor is px on purpose. As a rem it grew with the user's font size,
     so at 200% text on a 320px phone the two gutters alone ate 72px of a 320px
     line before any content. */
  --gutter: clamp(14px, 0.7rem + 2.2vw, 2.5rem);

  --radius: 2px;      /* paper is cut, not rounded */
  --radius-img: 2px;

  --shadow-card: 0 1px 2px rgba(42, 29, 24, 0.07), 0 8px 24px -8px rgba(42, 29, 24, 0.16);
  --shadow-lift: 0 2px 4px rgba(42, 29, 24, 0.09), 0 18px 44px -12px rgba(42, 29, 24, 0.26);
  --shadow-onred: 0 2px 6px rgba(0, 0, 0, 0.24), 0 22px 50px -16px rgba(0, 0, 0, 0.5);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 420ms;

  /* Must track the real bar: 3.5rem content + 1px border + the home-indicator
     inset. Hardcoding 4.25rem left a 23px deficit on every notched iPhone. */
  --bar-h: calc(3.5rem + 1px + env(safe-area-inset-bottom, 0px) + 0.75rem);
}


/* Metric-matched fallback for Hind Vadodara.
   Measured: the same 174-character hero lead sets 7659px wide in Hind Vadodara
   and 7955px in Arial at 100px. Unadjusted, the fallback wrapped that
   paragraph to five lines and the real font to four, so when the webfont
   swapped in the paragraph collapsed 28px and jerked the Call and WhatsApp
   buttons upward about a second into load: a measured CLS of 0.123 on the home
   page, over the 0.1 threshold. size-adjust makes the fallback occupy the same
   width, so the swap moves nothing.
   Arial is chosen as the local source because it is the one face present on
   effectively every platform; the ratio is 7659/7955. */
/* Metric-matched fallback for Cinzel.
   Cinzel is an inscriptional Roman and is very wide: the home headline sets
   2497px in Cinzel against 1852px in Times New Roman at 100px, 35% narrower.
   Unadjusted, the fallback fitted the h1 in one fewer line and the swap then
   added 44px, pushing the lead, the trust rule and the photograph down: a
   measured CLS of 0.157 at 500px. Georgia is the closest widely installed
   face; the ratio is 2497/2209. */
@font-face {
  font-family: "Cinzel Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 113.07%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
  font-display: swap;
}

@font-face {
  font-family: "HV Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 96.29%;
  ascent-override: 105%;
  descent-override: 30%;
  line-gap-override: 0%;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  /* Without this, Chrome scrolls a focused element only to the bottom edge of
     the layout viewport, which is behind the fixed action bar: 67 of 700
     keyboard focus stops at 375px landed completely underneath it. */
  scroll-padding-bottom: calc(var(--bar-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The statement says nothing moves on its own. Make that true: the action
     bar used to slide up under its own transition even here. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x:hidden was removed deliberately. It converted any overflow into
     content the user could never reach, which is what made text scaled to 200%
     a real WCAG 1.4.4 failure rather than a cosmetic one. The overflow causes
     it used to mask are fixed at source; if one returns, a scrollbar is the
     honest symptom. */
  /* Inherited by everything. Without it a single unbreakable string, the
     30-character email address being the real case, widens the document past
     a 320px phone and drags every fixed panel out with it. */
  overflow-wrap: break-word;
}

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

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

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

a { color: inherit; }

/* A long unbreakable token must never widen the document. `break-word` above
   is not sufficient on its own: it lets text wrap but does NOT reduce the
   element's min-content width, and a flex item defaults to min-width:auto, so
   a 30-character email address still forced the layout viewport to 342px on a
   320px phone and dragged the fixed panels out with it. `anywhere` is the
   value that actually shrinks min-content. */
a[href^="mailto:"],
a[href^="http"],
.contact-list__v,
code, samp, kbd {
  overflow-wrap: anywhere;
}
/* Flex rows must be allowed to shrink past their content. */
.contact-list a > *,
.contact-list__static > * { min-width: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
/* On the red ground the blue focus ring loses contrast; use foil instead. */
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head, .site-foot, .mobile-nav, .site-head)
  :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--gold-100);
}
/* ...but a light plane inside a dark section takes the dark ring back. Without
   this the contact card's five links drew a cream ring on cream: 1.06:1, well
   under the 3:1 that SC 1.4.11 requires of a focus indicator. Same specificity
   as the rule above, so it must stay after it. */
:is(.contact-card, .quote, .leaf, .plate, .badge-fsa, .tipped, .course, .faq)
  :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--focus);
}

main:focus { outline: none; }
main:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.display,
h1, h2, h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: 0.005em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 {
  font-family: var(--ff-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

p { text-wrap: pretty; }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .lead { color: var(--paper-2); }

/* The engraved eyebrow: small letterspaced caps, the invitation's own voice. */
.eyebrow {
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .eyebrow { color: var(--gold-300); }

/* the hairline that trails an eyebrow, like a rule struck on the plate.
   Below 30em the eyebrow text wraps and the rule strands itself on line one,
   so it only appears once there is room for it to read as a rule. */
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.42;
  min-width: 1.5rem;
  display: none;
}
@media (min-width: 30em) {
  .eyebrow::after { display: block; }
}
.eyebrow.is-centred { justify-content: center; }
.eyebrow.is-centred::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.42;
  min-width: 1.5rem;
}

/* Gujarati auspicious mark. Set larger: the script needs more optical size. */
.shree {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
  line-height: 1;
  color: var(--gold-300);
  letter-spacing: 0.06em;
}

.u-measure { max-width: 62ch; }
.u-measure-tight { max-width: 46ch; }
.u-centre { text-align: center; margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--wrap-narrow); }
@media (min-width: 120em) {
  /* Above roughly 1920px the 74rem column strands itself in a huge field.
     Widen the shell and the type with it, rather than centring a small island. */
  :root { --wrap: var(--wrap-wide); --fs-h1: 4.4rem; --fs-h2: 3.3rem; }
  .wrap-narrow { max-width: 52rem; }
}

.section { padding-block: var(--section-y); position: relative; }
.section-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: var(--s-4); }
.section-head h2 + .lead { margin-top: var(--s-4); }

/* More space above a heading than below it. */
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); }
@media (min-width: 40em)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40em)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40em)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em)  { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   5. Grounds, the card stocks
   -------------------------------------------------------------------------- */
.on-red {
  background-color: var(--red-700);
  color: var(--paper);
  --fg: var(--paper);
}
.on-red-deep { background-color: var(--red-900); color: var(--paper); --fg: var(--paper); }
.on-green { background-color: var(--green-800); color: var(--paper); --fg: var(--paper); }
.on-paper-2 { background-color: var(--paper-2); }

/* Uncoated cotton tooth. A very fine, cheap noise, no image request. */
.tooth { position: relative; isolation: isolate; }
.tooth::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 17% 23%, rgba(255,255,255,0.045) 0 1px, transparent 1.4px),
    radial-gradient(circle at 71% 61%, rgba(0,0,0,0.05) 0 1px, transparent 1.4px),
    radial-gradient(circle at 43% 87%, rgba(255,255,255,0.035) 0 1px, transparent 1.4px);
  background-size: 37px 37px, 53px 53px, 71px 71px;
}
.tooth > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   6. Foil, the gold rule system
   -------------------------------------------------------------------------- */
/* The gold phrase inside a heading. Emphasis here comes from colour and the
   surrounding weight, never from a clipped ramp behind the letterforms. The
   world's real foil is drawn, in the seal SVG, the hairline rules and the
   corner devices, so the phrase simply takes the foil colour flat. */
.gold-phrase {
  color: var(--gold-300);
  font-style: normal;
}

/* The hairline border with corner devices, drawn without images. */
.plate {
  position: relative;
  padding: clamp(1.5rem, 0.9rem + 3vw, 3.25rem);
}
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.plate::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent);
  pointer-events: none;
}

/* corner devices: four small foil ticks, the kind blocked on a real card */
.corners { position: relative; }
.corners > .corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--gold-500);
  opacity: 0.85;
  pointer-events: none;
}
.corners > .corner.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.corners > .corner.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.corners > .corner.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.corners > .corner.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* A struck rule with a centred diamond, the kankotri's section divider. */
.rule-diamond {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--gold-500);
}
.rule-diamond::before,
.rule-diamond::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.rule-diamond > span {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: currentColor;
  flex: none;
}

/* The ruled line a family writes the guest's name on. */
.name-rule {
  border-bottom: 1px solid var(--rule);
  min-height: 1.6em;
}

/* Letterpress deboss on the red stock. */
.deboss {
  text-shadow:
    0 1px 0 rgba(255, 240, 210, 0.13),
    0 -1px 1px rgba(0, 0, 0, 0.36);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.75rem clamp(0.9rem, 0.4rem + 2.4vw, 1.6rem);
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 180ms var(--ease),
              box-shadow var(--dur) var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--gold-500);
  color: var(--red-900);
  border-color: var(--gold-500);
  box-shadow: 0 1px 0 var(--gold-200) inset, 0 8px 22px -10px rgba(0,0,0,0.5);
}
.btn-primary:hover { background: var(--gold-300); border-color: var(--gold-300); }

.btn-whatsapp {
  background: var(--whatsapp);
  color: #fff;
  border-color: var(--whatsapp);
  box-shadow: 0 8px 22px -12px rgba(0,0,0,0.55);
}
.btn-whatsapp:hover { background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); }

.btn-ghost {
  background: transparent;
  color: var(--gold-300);
  border-color: color-mix(in srgb, var(--gold-500) 55%, transparent);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--gold-500) 14%, transparent); color: var(--gold-200); }

.btn-ink {
  background: var(--red-700);
  color: var(--paper);
  border-color: var(--red-700);
}
.btn-ink:hover { background: var(--red-600); border-color: var(--red-600); }

.btn-outline-ink {
  background: transparent;
  color: var(--red-700);
  border-color: color-mix(in srgb, var(--red-700) 40%, transparent);
}
.btn-outline-ink:hover { background: color-mix(in srgb, var(--red-700) 8%, transparent); border-color: var(--red-700); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
/* Below 30em the pair stacks, and content-width buttons then sit ragged
   against each other. Match them so they read as one control group. */
@media (max-width: 29.99em) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn { width: 100%; }
}
.btn-icon { width: 1.15em; height: 1.15em; flex: none; }

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--paper);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--gold-500);
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { transform: translateY(0); }

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--red-900);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-500) 34%, transparent);
  color: var(--paper);
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 3.75rem;
  padding-block: 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  /* WCAG 1.4.4: at a 200% browser font size on a 320px phone the lockup could
     not shrink and pushed the header past the viewport, where overflow-x:hidden
     then made it unreachable. Let it clip instead of widening the document. */
  overflow: hidden;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--paper);
  min-height: 44px;
}
.brand__mark {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand__name, .brand__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* On the narrowest phones the tagline is the first thing to go: it is a
   restatement, and it appears again in full in the footer. */
@media (max-width: 26em) { .brand__sub { display: none; } }
.brand__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.brand__sub {
  font-size: 0.65rem;
  /* Tight enough to stay on one line beside the menu button at 375px, where
     0.26em tracking pushed it to two and made the whole header taller. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  margin-top: 0.28rem;
  white-space: nowrap;
}
@media (min-width: 26em) { .brand__sub { letter-spacing: 0.2em; } }
@media (min-width: 60em) { .brand__sub { font-size: 0.6rem; letter-spacing: 0.26em; } }

.nav { display: none; }
@media (min-width: 60em) {
  .nav { display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.4vw, 2rem); }
  .nav__link {
    position: relative;
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    color: color-mix(in srgb, var(--paper) 88%, transparent);
    padding-block: 0.65rem;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    transition: color 260ms var(--ease);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.35rem;
    height: 1px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms var(--ease);
  }
  .nav__link:hover { color: var(--gold-200); }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { color: var(--gold-200); }
  .head-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

.head-cta { display: none; }
.head-cta .btn { min-height: 2.6rem; padding: 0.5rem 1.15rem; }

/* Without JavaScript the panel can never open, so the control must not be
   offered. The .js class is set by site.js on the root element. */
.nav-toggle { display: none; }
.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  color: var(--gold-200);
  border: 1px solid color-mix(in srgb, var(--gold-500) 40%, transparent);
  border-radius: var(--radius);
  font-family: var(--ff-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-toggle__bars { position: relative; width: 17px; height: 11px; flex: none; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 300ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* These must come AFTER the .nav-toggle and .head-cta base rules above:
   equal specificity means source order decides, and asserting them inside the
   earlier breakpoint block let the base rules win and put a hamburger on
   desktop while hiding the header call button. */
@media (min-width: 60em) {
  .nav-toggle { display: none; }
  .head-cta { display: inline-flex; }
}

/* Mobile menu, opens as an invitation leaf */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--red-900);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  padding-top: max(var(--gutter), env(safe-area-inset-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity 300ms var(--ease), transform 380ms var(--ease), visibility 0s linear 380ms;
}
.mobile-nav[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 260ms var(--ease), transform 380ms var(--ease), visibility 0s;
}
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.mobile-nav__close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-200);
  border: 1px solid color-mix(in srgb, var(--gold-500) 40%, transparent);
  border-radius: var(--radius);
}
.mobile-nav__inner { width: 100%; max-width: 30rem; margin-inline: auto; display: contents; }
@media (min-width: 34em) {
  .mobile-nav { align-items: center; }
  .mobile-nav__head, .mobile-nav__list, .mobile-nav__foot {
    width: 100%; max-width: 30rem; margin-inline: auto;
  }
  .mobile-nav__foot { margin-top: var(--s-8); }
}
/* Short viewports (landscape phones) could only show two links. Compress the
   rhythm so the whole menu, both CTAs included, fits without scrolling. */
@media (max-height: 32em) {
  .mobile-nav__list a {
    padding-block: 0.5rem;
    font-size: clamp(1rem, 0.9rem + 0.8vw, 1.25rem);
    min-height: 40px;
  }
  .mobile-nav__head { margin-bottom: var(--s-3); }
  .mobile-nav__foot { padding-top: var(--s-4); }
  .mobile-nav__foot .btn { min-height: 2.6rem; }
}
.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: clamp(0.85rem, 0.5rem + 1.4vw, 1.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent);
  text-decoration: none;
  font-family: var(--ff-display);
  font-size: clamp(1.35rem, 1.1rem + 1.6vw, 2rem);
  font-weight: 500;
  color: var(--paper);
  min-height: 44px;
}
.mobile-nav__list a[aria-current="page"] { color: var(--gold-300); }
.mobile-nav__num {
  font-family: var(--ff-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold-500);
  flex: none;
  /* 2ch ignores the 0.2em tracking, which can wrap "01" onto two lines. */
  min-width: 2.9ch;
  white-space: nowrap;
}
.mobile-nav__foot { margin-top: auto; padding-top: var(--s-7); }
.mobile-nav__foot .btn { width: 100%; }
.mobile-nav__foot .btn + .btn { margin-top: var(--s-3); }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. Sticky mobile action bar, contact never more than a thumb away
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: color-mix(in srgb, var(--gold-500) 30%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--gold-500) 40%, transparent);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform 420ms var(--ease);
}
.action-bar[data-show=true] { transform: translateY(0); }
/* Hidden while the visitor is navigating by keyboard, so it can never sit on
   top of a focused link at the bottom of the viewport (WCAG 2.4.11). It is a
   touch affordance; it returns the moment a pointer is used. */
body.is-keyboard-nav .action-bar { transform: translateY(110%); }
.action-bar > a { min-width: 0; }
.action-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.5rem;
  text-decoration: none;
  font-family: var(--ff-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.action-bar__call { background: var(--red-800); color: var(--gold-200); }
.action-bar__wa { background: var(--whatsapp); color: #fff; }
@media (min-width: 60em) { .action-bar { display: none; } }

/* Keep the bar from covering the last of the page. */
@media (max-width: 59.99em) {
  body { padding-bottom: var(--bar-h); }
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--red-800);
  color: var(--paper);
  overflow: hidden;
}
.hero::after {
  /* the plate's inner keyline, inset from the trim */
  content: "";
  position: absolute;
  inset: clamp(0.6rem, 0.3rem + 1vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--gold-500) 30%, transparent);
  pointer-events: none;
  z-index: 3;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.35rem, 0.6rem + 4vw, 3.5rem);
  padding-block: clamp(2rem, 1rem + 7vw, 6rem);
  align-items: center;
}
@media (min-width: 60em) {
  /* Matches the nav breakpoint. Previously the hero waited until 64em, so
     960-1023px showed a desktop header above a stacked hero with a large
     empty field to the right of the buttons. */
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); }
}
.hero__mark { margin-bottom: var(--s-4); }
.hero h1 { margin-block: var(--s-4) 0; }
.hero__lead { margin-top: var(--s-5); max-width: 40ch; }
.hero .btn-row { margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem); }

/* trust strip under the fold action */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  /* Tight on phones: every pixel here is a pixel of the thali that does not
     make the first screen, and mobile is the priority device. */
  margin-top: clamp(1.15rem, 0.6rem + 2vw, 2.5rem);
  padding-top: var(--s-4);
  border-top: 1px solid color-mix(in srgb, var(--gold-500) 26%, transparent);
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}
.hero__trust-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__trust-item svg { width: 1.05rem; height: 1.05rem; color: var(--gold-300); flex: none; }

/* The tipped-in photograph: a plate printed onto the card. */
.tipped {
  position: relative;
  padding: clamp(0.5rem, 0.3rem + 0.7vw, 0.75rem);
  background: var(--paper);
  box-shadow: var(--shadow-onred);
}
.tipped::after {
  content: "";
  position: absolute;
  inset: clamp(0.5rem, 0.3rem + 0.7vw, 0.75rem);
  border: 1px solid rgba(0,0,0,0.16);
  pointer-events: none;
}
.tipped img { width: 100%; }
.tipped__caption {
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  padding-top: 0.75rem;
  padding-bottom: 0.15rem;
}
.hero__figure { position: relative; }
@media (min-width: 64em) {
  .hero__figure { transform: rotate(-1.1deg); }
}

/* The foil seal, pressed over the top corner of the photograph the way a seal
   is pressed over an envelope flap. It sits at the top so it never lands on
   the caption, which is the one piece of type inside the tipped-in plate. */
.seal {
  position: absolute;
  z-index: 4;
  width: clamp(4.5rem, 3.6rem + 3.6vw, 6.5rem);
  height: clamp(4.5rem, 3.6rem + 3.6vw, 6.5rem);
  right: clamp(-0.9rem, -1.4vw, -0.4rem);
  top: clamp(-1.1rem, -1.8vw, -0.6rem);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45));
}

/* --------------------------------------------------------------------------
   11. Cards / leaves
   -------------------------------------------------------------------------- */
.leaf {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 380ms var(--ease), box-shadow 380ms var(--ease);
}
a.leaf, .leaf--link { text-decoration: none; }
@media (hover: hover) {
  a.leaf:hover, .leaf--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
.leaf__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.leaf__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
@media (hover: hover) {
  a.leaf:hover .leaf__media img, .leaf--link:hover .leaf__media img { transform: scale(1.045); }
}
.leaf__body { padding: clamp(1.15rem, 0.8rem + 1.4vw, 1.75rem); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.leaf__num {
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--gold-900);
}
.leaf__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.15;
  /* body sets overflow-wrap:break-word to stop long tokens widening the page.
     On display type in a 155px column that shattered "Community" into
     "COMMUNIT / y". Headings are short; they may overflow rather than break. */
  overflow-wrap: normal;
  text-wrap: balance;
}
.leaf__text { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.62; }
.leaf__more {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-700);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.leaf__more svg { width: 0.85rem; height: 0.85rem; transition: transform 300ms var(--ease); }
@media (hover: hover) {
  a.leaf:hover .leaf__more svg, .leaf--link:hover .leaf__more svg { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   12. Menu list, the card's inner leaf
   -------------------------------------------------------------------------- */
.course { break-inside: avoid; }
.course__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-4);
}
.course__name {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.1;
}
.course__gu {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  color: var(--gold-900);
  letter-spacing: 0.02em;
}
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .course__gu { color: var(--gold-300); }
.course__note { font-size: var(--fs-small); color: var(--ink-mute); margin-top: var(--s-2); }
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .course__note { color: color-mix(in srgb, var(--paper) 70%, transparent); }

.dishes { display: flex; flex-direction: column; gap: 0.4rem; }
.dishes li {
  display: flex;
  align-items: baseline;
  /* Anonymous flex items floor at min-content; let the dish name wrap. */
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: var(--fs-body);
  line-height: 1.5;
  padding-block: 0.15rem;
}
.dishes li::before {
  content: "";
  width: 4px; height: 4px;
  flex: none;
  transform: rotate(45deg) translateY(-0.35em);
  background: var(--gold-500);
  opacity: 0.75;
}
.dish__gu { color: var(--ink-mute); font-size: var(--fs-small); }
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .dish__gu {
  /* 62% paper over sindoor measures 4.46:1, a hair under the AA floor,
     and the menu sets a Gujarati name beside nearly every dish. 74%
     gives 5.75:1. */
  color: color-mix(in srgb, var(--paper) 74%, transparent);
}

/* --------------------------------------------------------------------------
   13. Proof, hygiene badge, testimonial, stats
   -------------------------------------------------------------------------- */
.badge-fsa {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
@media (hover: hover) { .badge-fsa:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } }
.badge-fsa__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--green-700);
  color: #fff;
  padding: 0.7rem 1rem;
  min-width: 4.25rem;
}
.badge-fsa__num { font-family: var(--ff-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.badge-fsa__of { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; margin-top: 0.15rem; }
.badge-fsa__text { padding: 0.7rem 1.1rem; display: flex; flex-direction: column; justify-content: center; }
.site-foot .badge-fsa, .site-foot .badge-fsa:hover { color: var(--ink); }
.badge-fsa__label { font-family: var(--ff-display); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.06em; line-height: 1.25; }
.badge-fsa__meta { font-size: var(--fs-micro); color: var(--ink-mute); margin-top: 0.15rem; }

/* A recommendation written in someone else's hand. */
.quote {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  box-shadow: var(--shadow-card);
}
.quote__text {
  /* Body face, not the display face. Cinzel has no true lowercase, so a
     fifty-word recommendation set in it runs eleven lines of caps on a 390px
     phone. This quote and the founder's are the two strongest trust assets on
     the site; they have to be the easiest things to read, not the hardest. */
  font-family: var(--ff-body);
  font-size: clamp(1.1rem, 1rem + 0.8vw, 1.45rem);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}
.quote__attr {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.quote__attr strong { font-weight: 600; color: var(--ink); }

.factlist { display: grid; gap: var(--s-5); }
@media (min-width: 46em) { .factlist { grid-template-columns: repeat(3, 1fr); } }
.fact { display: flex; flex-direction: column; gap: 0.3rem; }
.fact__k {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-300);
}
.on-paper .fact__k, .section:not(.on-red):not(.on-green) .fact__k { color: var(--red-700); }
.fact__v { font-size: var(--fs-small); line-height: 1.5; }

/* --------------------------------------------------------------------------
   14. Steps / how it works
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 52em) { .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); } }
.step { position: relative; padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.step__n {
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--gold-900);
  display: block;
  margin-bottom: var(--s-3);
}
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .step__n { color: var(--gold-300); }
.step h3 { font-size: var(--fs-h4); font-family: var(--ff-display); font-weight: 600; margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-small); color: var(--ink-soft); }
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .step p { color: color-mix(in srgb, var(--paper) 80%, transparent); }

/* --------------------------------------------------------------------------
   15. Gallery
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 0.3rem + 0.9vw, 1rem);
}
@media (min-width: 52em) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; position: relative; overflow: hidden; background: var(--red-900); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform 800ms var(--ease); }
@media (hover: hover) { .gallery figure:hover img { transform: scale(1.06); } }
.gallery figure.is-tall { grid-row: span 2; }
.gallery figure.is-tall img { aspect-ratio: 1 / 2.03; }
@media (max-width: 51.99em) { .gallery figure.is-tall { grid-row: span 1; } .gallery figure.is-tall img { aspect-ratio: 1; } }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: clamp(1rem, 0.7rem + 1vw, 1.4rem);
  text-align: left;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
  min-height: 44px;
}
.faq__q:hover { color: var(--red-700); }
:is(.on-red, .on-red-deep, .on-green) .faq__q:hover { color: var(--gold-200); }
.faq__icon { position: relative; width: 1rem; height: 1rem; flex: none; margin-top: 0.35em; color: var(--gold-900); }
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .faq__icon { color: var(--gold-300); }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform 320ms var(--ease), opacity 240ms var(--ease);
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
[aria-expanded="true"] .faq__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease);
}
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__a > div {
  overflow: hidden;
  /* Collapsed answers are 0fr tall but their links stayed tabbable, dropping
     keyboard focus into invisible content. visibility:hidden removes them from
     the tab order; the delay lets the row transition finish first. */
  visibility: hidden;
  transition: visibility 0s linear 380ms;
}
.faq__a[data-open="true"] > div { visibility: visible; transition-delay: 0s; }
.faq__a p { padding-bottom: var(--s-5); color: var(--ink-soft); max-width: 64ch; }
:is(.on-red, .on-red-deep, .on-green, .hero, .page-head) .faq__a p { color: color-mix(in srgb, var(--paper) 82%, transparent); }

/* --------------------------------------------------------------------------
   17. Contact panel
   -------------------------------------------------------------------------- */
.contact-card {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-onred);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.contact-list { display: flex; flex-direction: column; gap: var(--s-2); }
.contact-list a, .contact-list__static {
  display: flex;
  /* Rows are 1 to 3 lines tall. Centring dropped the icon well below its own
     label on the taller rows; align to the top so the column reads straight. */
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  min-height: 52px;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 240ms var(--ease);
}
.contact-list a:hover { color: var(--red-700); }
.contact-list__icon {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  color: var(--gold-900);
}
.contact-list__icon svg { width: 1.15rem; height: 1.15rem; }
.contact-list__k { font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.contact-list__v { font-family: var(--ff-display); font-size: var(--fs-h4); font-weight: 600; line-height: 1.2; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--red-900);
  color: color-mix(in srgb, var(--paper) 84%, transparent);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-size: var(--fs-small);
}
.site-foot__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); }
@media (min-width: 46em) { .site-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot h2, .site-foot h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--s-4);
}
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--gold-200); text-decoration: underline; text-underline-offset: 3px; }
.foot-list { display: flex; flex-direction: column; gap: 0.15rem; }
.foot-list a { display: inline-flex; align-items: center; min-height: 40px; }
.site-foot p { max-width: 78ch; }
.site-foot__base {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--gold-500) 24%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-micro);
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
.social { display: flex; gap: var(--s-3); }
.social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold-500) 34%, transparent);
  color: var(--gold-300);
  transition: background-color 260ms var(--ease), color 260ms var(--ease);
}
.social a:hover { background: color-mix(in srgb, var(--gold-500) 16%, transparent); color: var(--gold-100); text-decoration: none; }
.social svg { width: 1.15rem; height: 1.15rem; }

/* --------------------------------------------------------------------------
   19. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--red-800);
  color: var(--paper);
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute;
  inset: clamp(0.6rem, 0.3rem + 1vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--gold-500) 28%, transparent);
  pointer-events: none;
}
.page-head h1 { margin-top: var(--s-4); }
.page-head .lead { margin-top: var(--s-5); max-width: 62ch; }

.crumbs { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 66%, transparent); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span[aria-hidden] { padding-inline: 0.5rem; color: var(--gold-500); }

/* --------------------------------------------------------------------------
   20. Reveal motion, one orchestrated idea, content visible by default
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal][data-delay="1"] { transition-delay: 90ms; }
  .js [data-reveal][data-delay="2"] { transition-delay: 180ms; }
  .js [data-reveal][data-delay="3"] { transition-delay: 270ms; }
  .js [data-reveal][data-delay="4"] { transition-delay: 360ms; }
}

/* content-visibility: auto was removed here deliberately. On pages this small
   it bought no measurable time, and it actively broke rendering: an off-screen
   section keeps its contain-intrinsic-size placeholder instead of laying out,
   so every such section printed and full-page-captured at a fixed 840px of
   blank regardless of whether it held 285 or 1976 characters. Correctness of
   the printed menu matters more here than a saving that did not exist. */

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }
.u-nowrap { white-space: nowrap; }

@media print {
  .site-head, .action-bar, .mobile-nav, .btn { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .on-red, .on-red-deep, .on-green, .hero, .page-head, .site-foot,
  .on-paper-2, .tooth { background: #fff !important; color: #000 !important; }
  .tooth::before, .hero::after, .page-head::after { display: none !important; }

  /* Flipping the container to white is not enough: every descendant that
     carries its own light colour survives the flip and prints white on white.
     `.lead` on a dark ground measured 1.22:1 on paper, and the 404's recovery
     links 1.11:1. Reset the text colours explicitly. */
  :is(.on-red, .on-red-deep, .on-green, .hero, .page-head, .site-foot) :is(
    p, li, dt, dd, span, a, blockquote, figcaption, h1, h2, h3, h4, strong, em
  ) { color: #000 !important; }

  .lead, .eyebrow, .step__n, .brand__name, .brand__sub, .crumbs, .crumbs a,
  .hero__trust, .hero__trust-item, .quote__text, .quote__attr,
  .inscription__text, .inscription__attr, .nf-links a, .foot-list a,
  .course__gu, .dish__gu, .course__note, .leaf__text, .leaf__title,
  .contact-list__k, .contact-list__v, .site-foot p, .site-foot a {
    color: #000 !important;
  }
  .site-foot__base, .site-foot p { color: #333 !important; }
  /* The badge keeps its green block, and forcing its text black gave 1.98:1.
     Printers often drop backgrounds anyway, so render it as an outlined box. */
  .badge-fsa { border: 1px solid #000 !important; }
  .badge-fsa__score {
    background: #fff !important;
    color: #000 !important;
    border-right: 1px solid #000;
  }

  /* Photography is expensive on paper and rarely why a page is printed. */
  .hero__figure, .gallery, .seal, .leaf__media, .plate-strip { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }
}