/* ==========================================================================
   Garnish Catering — styles.css
   Palette: White #FFFFFF · Moss #5A6447 · Charcoal #2B2B2B · Burnt Orange #C35A24
   Type:    Cormorant Garamond (display) · Jost (text)
   ========================================================================== */

:root {
  --white: #ffffff;
  --moss: #5a6447;
  --moss-deep: #46503a;
  --moss-soft: #8b9478;
  --sage: #f3f4ef;
  --sage-line: #e1e4d8;
  --charcoal: #2b2b2b;
  --ink-muted: #5f6553;
  --orange: #c35a24;
  --orange-deep: #a84b1b;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --script: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;

  --measure: 62ch;
  --wrap: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --header-h: 72px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Fonts (self-hosted, subset, variable) ---------- */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("../fonts/great-vibes.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.12; color: var(--charcoal); }
h1 { font-size: clamp(2.5rem, 6.5vw, 4.5rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); }
.lede { font-size: 1.15rem; color: var(--ink-muted); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.2em; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--charcoal); color: #fff; padding: .5rem .9rem; border-radius: 3px;
}
.skip-link:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.section--tint { background: var(--sage); }
.section-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section-head p { margin-top: .75rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 500; font-size: 1rem; letter-spacing: .01em;
  padding: .85rem 1.6rem; border-radius: 3px; border: 1.5px solid transparent;
  cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn--primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn--ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn--ghost:hover { background: var(--charcoal); color: #fff; }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--light:hover { background: #fff; color: var(--moss); border-color: #fff; }
.btn--small { padding: .55rem 1.05rem; font-size: .9375rem; }

.link-arrow { font-weight: 500; color: var(--moss); border-bottom: 1px solid var(--sage-line); padding-bottom: 2px; transition: border-color .2s; }
.link-arrow:hover { border-color: var(--moss); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--moss);
  color: #fff;
  transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 12px rgba(43,43,43,.18); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .7rem; color: #fff; }
.brand__leaf { width: 40px; height: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; letter-spacing: .28em; text-transform: uppercase; }
.brand__sub { font-family: var(--sans); font-size: .58rem; letter-spacing: .38em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-top: .25rem; padding-left: .1em; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a:not(.btn) { font-weight: 500; font-size: .98rem; color: rgba(255,255,255,.88); position: relative; padding-block: .25rem; transition: color .2s var(--ease); }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: #fff; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; padding: 0; position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 11px; width: 22px; height: 1.5px; background: #fff;
  transition: transform .25s var(--ease), top .25s var(--ease), opacity .2s;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { left: 0; top: -7px; }
.nav-toggle span::after { left: 0; top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.site-header :focus-visible { outline-color: #fff; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .brand__leaf { width: 34px; }
  .brand__name { font-size: 1.15rem; }
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--moss); border-bottom: 0; box-shadow: 0 12px 20px rgba(43,43,43,.15);
    padding: .5rem var(--gutter) 1.25rem;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .25s var(--ease), opacity .2s var(--ease), visibility 0s .25s;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav a:not(.btn) { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .nav a:not(.btn)::after { display: none; }
  .nav a[aria-current="page"] { color: #fff; }
  .nav .btn { margin-top: 1rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--moss); color: #fff; }
.hero h1 { color: #fff; }
.hero .lede { color: rgba(255,255,255,.85); }
.hero .link-arrow { color: #fff; border-color: rgba(255,255,255,.45); }
.hero .link-arrow:hover { border-color: #fff; }
.hero .btn--primary { box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.12); }
.hero .wrap {
  position: relative; z-index: 1;
  min-height: calc(86svh - var(--header-h));
  max-height: 820px;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(1.5rem, 5vh, 4rem) clamp(3rem, 10vh, 7rem);
}
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 1.5rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 2.25rem; align-items: center; }
/* In flow above the headline so it never lands behind text at any aspect
   ratio. The negative margin reaches from the content column back to the
   viewport edge, and the translate pushes the stem base off the page so the
   sprig looks like it grows in from the left. */
.hero__leaf {
  display: block;
  width: clamp(160px, min(30vw, 34svh), 440px); height: auto;
  margin: 0 0 clamp(1.75rem, 4vh, 2.75rem) calc((100% - 100vw) / 2);
  color: #fff; opacity: .13; pointer-events: none;
  transform: translateX(-12%) rotate(6deg);
}
/* Short laptop screens: tighten the stack so the enquiry button stays above the fold. */
@media (min-width: 761px) and (max-height: 720px) {
  .hero .wrap { padding-top: 1rem; }
  .hero h1 { font-size: min(6.5vw, 10svh); }
  .hero .lede { margin-top: 1rem; }
  .hero__actions { margin-top: 1.5rem; }
  .hero__leaf { width: min(30vw, 20svh); margin-bottom: 1rem; }
}
@media (max-width: 760px) {
  .hero .wrap { min-height: calc(88svh - var(--header-h)); justify-content: flex-end; padding-bottom: 3.5rem; }
  .hero__leaf { width: min(64vw, 30svh); opacity: .12; }
}

/* Single orchestrated load reveal */
.reveal > * { opacity: 0; transform: translateY(14px); animation: rise .8s var(--ease) forwards; }
.reveal > :nth-child(1) { animation-delay: .15s; }
.reveal > :nth-child(2) { animation-delay: .32s; }
.reveal > :nth-child(3) { animation-delay: .48s; }
.reveal > :nth-child(4) { animation-delay: .62s; }
.hero__leaf { animation: leaf-in 1.4s var(--ease) forwards; opacity: 0; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes leaf-in { to { opacity: .13; } }
@media (max-width: 760px) { @keyframes leaf-in { to { opacity: .12; } } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal > *, .hero__leaf { animation: none; opacity: 1; transform: none; }
  .hero__leaf { opacity: .12; transform: translateX(-12%) rotate(6deg); }
  * { transition-duration: .01ms !important; }
}

/* ---------- Pillars ---------- */
.pillars { display: grid; gap: 2.5rem clamp(2rem, 6vw, 5rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pillar { border-top: 1.5px solid var(--moss); padding-top: 1.4rem; }
.pillar h3 { margin-bottom: .6rem; }
.pillar p { max-width: 42ch; margin: 0; color: var(--ink-muted); }

/* ---------- Invitation band ---------- */
.invite { background: var(--moss); color: #fff; position: relative; overflow: hidden; }
.invite .wrap { display: grid; gap: 1.75rem 3rem; grid-template-columns: 1fr auto; align-items: center; }
.invite h2 { color: #fff; max-width: 26ch; }
.invite p { color: rgba(255,255,255,.82); max-width: 48ch; margin: .9rem 0 0; }
/* Sits in the gap between the text and the button: 260px in from the content
   column's right edge clears the button (~190px) plus a little breathing room. */
.invite__leaf { position: absolute; right: calc(max(var(--gutter), (100% - var(--wrap)) / 2) + 260px); bottom: 32px; width: 240px; height: auto; color: #fff; opacity: .11; pointer-events: none; transform: rotate(-12deg); }
/* Below ~1090px the paragraph runs into the button, leaving no gap for the leaf,
   so stack the block and give the leaf the corner beside the button instead. */
@media (max-width: 1100px) {
  .invite .wrap { grid-template-columns: 1fr; }
  .invite .btn { justify-self: start; }
  .invite__leaf { right: var(--gutter); bottom: 28px; width: clamp(140px, 22vw, 220px); opacity: .1; }
}

/* ---------- Menu list (home) ---------- */
.menu-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sage-line); }
.menu-list li { border-bottom: 1px solid var(--sage-line); }
.menu-list a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem;
  padding: 1.35rem 0;
}
/* Hover slides the title with a transform (no reflow) on a long ease-out,
   and the "See menu" label warms up and grows an arrow. */
.menu-list a > span:first-child { display: block; transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.menu-list a:hover > span:first-child { transform: translateX(.6rem); }
.menu-list .name { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 500; }
.menu-list .desc { display: block; font-size: .95rem; color: var(--ink-muted); margin-top: .1rem; }
.menu-list .go { position: relative; font-size: .95rem; font-weight: 500; color: var(--moss); white-space: nowrap; transition: color .35s var(--ease); }
.menu-list .go::after { content: "\2192"; position: absolute; left: 100%; top: 0; margin-left: .4rem; opacity: 0; transform: translateX(-.4rem); transition: opacity .35s var(--ease), transform .55s cubic-bezier(.2, .8, .2, 1); }
.menu-list a:hover .go { color: var(--orange); }
.menu-list a:hover .go::after { opacity: 1; transform: none; }
.menu-list li.soon a { pointer-events: none; }
.menu-list li.soon .go { color: var(--moss-soft); }

/* ---------- Page header (inner pages) ---------- */
.page-band { background: var(--moss); color: #fff; position: relative; overflow: hidden; }
/* Sized by the band's height so it fits even the lede-less Menus band. */
.page-band__leaf { position: absolute; right: 2%; top: 50%; height: 78%; max-height: 300px; width: auto; color: #fff; opacity: .1; transform: translateY(-50%) rotate(6deg); pointer-events: none; }
.page-head { position: relative; z-index: 1; padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.75rem, 6vw, 4.5rem); }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); color: #fff; }
.page-head .lede { margin-top: 1rem; color: rgba(255,255,255,.85); }
.page-head .lede a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }
/* Narrower than this the lede runs under the leaf, so move it into the flow
   above the heading, growing in from the left like the hero sprig. */
@media (max-width: 1100px) {
  .page-band__leaf { position: static; display: block; width: clamp(150px, 28vw, 260px); height: auto; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; opacity: .12; transform: translateX(-12%) rotate(6deg); }
  .page-head { padding-top: 1.5rem; }
}

/* ---------- Menus page ---------- */
.menu-nav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--sage-line); }
.menu-nav[hidden] { display: none; }
.menu-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.menu-nav ul::-webkit-scrollbar { display: none; }
.menu-nav a { display: block; padding: .9rem .9rem; font-weight: 500; font-size: .95rem; white-space: nowrap; color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.menu-nav a:hover, .menu-nav a.is-active { color: var(--charcoal); border-bottom-color: var(--orange); }

.menus {
  background-color: var(--sage);
  background-image: linear-gradient(to bottom, var(--sage), rgba(243,244,239,0) 240px), url("../images/menu-tapestry.svg");
  background-size: auto, 480px 380px;
  background-position: 0 0, center top;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
}
@media (max-width: 760px) {
  /* Tile at twice the viewport so the half-drop's sprig centres sit on the
     left and right edges and their leaves reach out from behind the cards. */
  .menus { background-size: auto, 200% auto; }
  .menus .wrap { width: calc(100% - 3.5rem); }
}
.menus .wrap > * + * { margin-top: clamp(2rem, 5vw, 3.5rem); }
.menus--single { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.menu-card__head h1 { font-size: clamp(2.2rem, 4.5vw, 2.9rem); letter-spacing: .04em; }
.menu-card__notes { margin: 1rem auto 0; max-width: 46ch; font-size: .92rem; color: var(--charcoal); }
.menu-card__notes p { margin: 0; padding: .2rem 0; }
.menu-card__notes p:first-child { font-weight: 500; color: var(--orange); }
.menu-card__section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; font-size: 1.75rem; font-weight: 600; margin: 1.75rem 0 .5rem; padding-bottom: .5rem; border-bottom: 1.5px solid var(--moss); }
.menu-card__section small { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--orange); }
.menu-card__section:first-of-type { margin-top: 0; }
.dish__options { margin: .4rem 0 0; font-size: .98rem; color: var(--ink-muted); }
.dish__options--inline { margin-top: .3rem; }
.dish__option { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding: .25rem 0; }
.dish__note + .dish__option { margin-top: .6rem; }
.menu-card__foot-actions { display: inline-flex; align-items: center; gap: 1.25rem; }
.menu-card__foot { color: var(--ink-muted); }

.menu-card {
  background: var(--white); border: 1px solid var(--sage-line);
  box-shadow: 0 14px 40px -18px rgba(70,80,58,.16);
  max-width: 720px; margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  scroll-margin-top: calc(var(--header-h) + 64px);
}
.menu-card__head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.menu-card__head .leaf { width: 54px; height: auto; margin: 0 auto .9rem; color: var(--moss); }
.menu-card__head h2 { font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: .04em; }
.menu-card__head p { color: var(--ink-muted); margin: .5rem auto 0; max-width: 46ch; font-size: .98rem; }
#dessert-pots .menu-card__head p { max-width: 60ch; }
#sandwiches .menu-card__head p, #salads .menu-card__head p { max-width: 60ch; }
#dinner .menu-card__head p { max-width: 70ch; }
.menu-card__rule { width: 56px; height: 1.5px; background: var(--orange); margin: 1.1rem auto 0; }

.dish-list { list-style: none; margin: 0; padding: 0; }
.dish { padding: 1.15rem 0; border-top: 1px solid var(--sage); }
.dish:first-child { border-top: 0; padding-top: 0; }
.dish__name { font-family: var(--serif); font-size: clamp(1.28rem, 2.1vw, 1.5rem); font-weight: 500; line-height: 1.25; color: var(--charcoal); }
.dish--inline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1.25rem; }
.dish--inline .dish__name { flex: 1 1 16ch; }
.dish__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .35rem 1.25rem; margin-top: .4rem; }
.dish__base { font-size: .92rem; color: var(--moss); font-weight: 500; letter-spacing: .01em; }
.dish__note { font-size: .92rem; color: var(--ink-muted); flex-basis: 100%; margin: .3rem 0 0; max-width: 54ch; }
/* Price sits with the allergen codes at the end of the dish row */
.dish__end { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.dish__price { font-size: .95rem; font-weight: 500; color: var(--orange); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Phones: every dish reads the same way, top to bottom: name with the price,
   the serves or base line, the description and any options, and the allergen
   codes last on their own line. Lifting the meta and price wrappers out with
   display: contents makes each piece a flex item of the dish, so the codes can
   be ordered to the bottom whatever the dish's markup, instead of wrapping only
   when a long name or a long run of codes happens to force it. */
@media screen and (max-width: 760px) {
  .dish { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1.25rem; }
  .dish__meta, .dish__end { display: contents; }
  .dish:not(.dish--inline) > .dish__name { flex-basis: 100%; }
  .dish__note, .dish__options { flex-basis: 100%; margin-top: 0; }
  .dish .allergens { flex: 1 1 100%; order: 1; }
}

/* Allergen codes — smaller but readable; tap or hover for the name */
.allergens { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.al {
  font: 500 .8rem/1 var(--sans); letter-spacing: .02em;
  color: var(--ink-muted); background: transparent; border: 1px solid var(--sage-line); border-radius: 3px;
  padding: .28rem .42rem; cursor: help; position: relative; transition: background-color .15s, color .15s, border-color .15s;
}
.al:hover, .al:focus-visible { color: var(--charcoal); border-color: var(--moss-soft); background: var(--sage); outline: none; }
.al--none { border-style: dashed; color: var(--moss-soft); }
.al::after {
  content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translate(-50%, 4px);
  background: var(--charcoal); color: #fff; font-size: .8rem; letter-spacing: .01em; padding: .35rem .6rem; border-radius: 3px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5;
}
.al:hover::after, .al:focus-visible::after, .al:focus::after { opacity: 1; transform: translate(-50%, 0); }

.menu-card__foot { margin-top: clamp(1.5rem, 4vw, 2.25rem); padding-top: 1.25rem; border-top: 1px solid var(--sage); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; font-size: .9rem; color: var(--ink-muted); }
.menu-card__foot .btn { color: var(--charcoal); }

/* Allergen key */
.allergen-key { max-width: 720px; margin-inline: auto; }
.allergen-key summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; border-top: 1px solid var(--sage-line); border-bottom: 1px solid var(--sage-line); }
.allergen-key summary::-webkit-details-marker { display: none; }
.allergen-key summary::after { content: "+"; font-family: var(--sans); font-size: 1.4rem; font-weight: 300; color: var(--moss); transition: transform .25s var(--ease); }
.allergen-key[open] summary::after { transform: rotate(45deg); }
.allergen-key__grid { display: grid; gap: .55rem 2.5rem; grid-template-columns: 1fr 1fr; padding: 1.25rem 0 .5rem; font-size: .95rem; }
.allergen-key__grid div { display: flex; gap: .75rem; align-items: baseline; }
.allergen-key__grid > div > b { font-weight: 500; color: var(--moss); min-width: 1.6em; font-variant-numeric: tabular-nums; }
.allergen-key__grid small { display: block; color: var(--ink-muted); font-size: .86em; line-height: 1.5; margin-top: .1rem; }
.allergen-key__grid small b { font-weight: 500; color: var(--moss-soft); }
@media (max-width: 560px) { .allergen-key__grid { grid-template-columns: 1fr; } }
.allergen-key .note { font-size: .92rem; color: var(--ink-muted); margin: .75rem 0 0; }

/* ---------- About ---------- */
.about-grid { display: grid; gap: 3rem clamp(2rem, 6vw, 6rem); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.about-aside { border-left: 1.5px solid var(--moss); padding-left: 1.5rem; }
.about-aside h3 { margin-bottom: .5rem; }
.about-aside p { color: var(--ink-muted); }
.about-aside + .about-aside { margin-top: 2.25rem; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
.signature { font-family: var(--script); font-size: clamp(3rem, 7vw, 4.25rem); line-height: 1; color: var(--moss); margin-top: 1.75rem; }

.occasions { display: grid; gap: .75rem 2rem; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
@media (max-width: 760px) { .occasions { grid-template-columns: 1fr; } }
.occasions li { font-family: var(--serif); font-size: 1.35rem; padding: .7rem 0; border-bottom: 1px solid var(--sage-line); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 3rem clamp(2rem, 6vw, 6rem); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.details { border-top: 1.5px solid var(--moss); padding-top: 1.5rem; }
.details dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .9rem 1.25rem; }
.details dt { font-size: .85rem; color: var(--ink-muted); padding-top: .15rem; }
.details dd { margin: 0; font-size: 1.08rem; }
.details dd a { color: var(--charcoal); border-bottom: 1px solid var(--sage-line); transition: border-color .2s; }
.details dd a:hover { border-color: var(--moss); }
.details .note { font-size: .95rem; color: var(--ink-muted); margin: 1.5rem 0 0; }

.form { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .92rem; font-weight: 500; }
.field label span { color: var(--ink-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--charcoal); background: var(--white);
  border: 1px solid var(--sage-line); border-radius: 3px; padding: .75rem .9rem;
  transition: border-color .2s, box-shadow .2s; width: 100%; -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6447' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(90,100,71,.15); }
.field textarea { min-height: 150px; resize: vertical; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .25rem; }
.form__actions small { color: var(--ink-muted); }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* ---------- Thank you ---------- */
.thanks { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.thanks .leaf { width: 72px; height: auto; margin: 0 auto 1.5rem; color: var(--moss); }
.thanks p { max-width: 44ch; margin-inline: auto; }
.thanks .btn { margin-top: 1.25rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--moss); color: #fff; padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.site-footer .wrap { display: grid; gap: 2.5rem 3rem; grid-template-columns: auto 1fr auto; align-items: start; }
.site-footer .sticker { width: 118px; height: auto; }
.site-footer h4 { color: #fff; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; opacity: .85; margin-bottom: .5rem; }
.site-footer address { font-style: normal; line-height: 1.75; }
.site-footer a { border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .2s; }
.site-footer a:hover { border-color: #fff; }
.site-footer nav a { display: block; border: 0; line-height: 1.9; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer .foot-note { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.25rem; font-size: .85rem; opacity: .7; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }
@media (max-width: 760px) {
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .site-footer .sticker { width: 96px; grid-column: 1 / -1; }
}

.print-only { display: none; }

/* ---------- Legal pages ---------- */
/* The site's h2 is built for one heading a section; a notice like the privacy
   page has nine, so it gets its own quieter scale and a rule to separate them. */
.legal { max-width: var(--measure); }
.legal > p:first-of-type { font-size: 1.15rem; color: var(--ink-muted); }
.legal h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem); margin: 2.5rem 0 .6rem;
  padding-top: 1.25rem; border-top: 1px solid var(--sage-line);
}
.legal h2:first-of-type { margin-top: 1.75rem; }
.legal ul { margin: 0 0 1.2em; padding-left: 1.1rem; }
.legal li { margin-bottom: .45rem; }
.legal li > b { font-weight: 500; color: var(--moss); }

/* ---------- Print: menus as clean sheets ---------- */
@media print {
  .print-only { display: block; }
  span.print-only { display: inline; }
  .allergen-key { max-width: none; }
  .print-logo { width: 200px; height: auto; margin: 0 auto 1.5rem; }
  .menus .wrap > * + * { margin-top: 2rem; }
  @page { margin: 16mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-footer, .menu-nav, .page-band, .other-menus, .allergen-key summary::after, .no-print, .menu-card__foot .btn { display: none !important; }
  .menus { background: #fff; padding: 0; }
  .menu-card { border: 0; padding: 0; max-width: none; page-break-after: always; break-after: page; }
  .menu-card:last-of-type { page-break-after: auto; break-after: auto; }
  .allergen-key { page-break-inside: avoid; }
  .allergen-key summary { display: block; border: 0; padding-top: 0; }
  .al { border-color: #bbb; color: #333; }
  .al::after { display: none; }
  .dish { page-break-inside: avoid; }
}