/* ==========================================================================
   Jamrock Culinary Arts Center — design system
   Learn · Cook · Dine
   ========================================================================== */

/* Fonts, hosted on this site (all SIL Open Font License): latin only, swapped in as they arrive */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/caveat-normal-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/caveat-normal-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/dm-mono-italic-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-mono-normal-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/dm-mono-normal-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url(../fonts/fraunces-italic-300-900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/fraunces-normal-300-900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/instrument-sans-italic-400-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/instrument-sans-normal-400-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand palette. These are the only colors the site uses.
     Greens: sage (the brand green: every green band, the footer, cards) and mist (sage-cream
     backgrounds). Forest only sits behind the darkened photo on the dinners page.
     Golds: marigold (buttons, stars, classes) and honey (gold type on green).
     Food accents: tomato (Friday dinners) and forest (Monday pick-up). No blue anywhere.
     Calendar and ticket tints are mixed from these, never picked by hand. */
  --forest: #2c3f31;
  --sage: #577a40;
  --mist: #eef2e8;
  --marigold: #e2a23b;
  --honey: #f2d49b;
  --tomato: #c8643b;
  --tomato-ink: color-mix(in srgb, var(--tomato) 70%, #1e2b22); /* tomato dark enough for small text */
  --sage-ink: color-mix(in srgb, var(--sage) 88%, #1e2b22); /* sage dark enough for small text on mist */
  --ink: #1e2b22;
  --muted: #5e6a60;
  --muted-dark: #b5bfaf;
  --stone: #8a948a;
  --sand: #b8ab99;
  --oat: #efe7d9;
  --paper: #fbf7f0;
  --bone: #fffdf8;
  --line: rgba(30,43,34, .14);
  --line-dark: rgba(251,247,240, .16);

  --f-display: "Fraunces", "Iowan Old Style", "Times New Roman", serif;
  --f-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, "Cascadia Mono", monospace;
  --f-hand: "Caveat", "Segoe Print", cursive;

  --min-text: 11px; /* smallest label size; 12px on phones */
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-hero: clamp(2.5rem, 4.6vw, 4.9rem);
  --fs-h1: clamp(2.4rem, 4.2vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 3vw, 3.1rem);
  --fs-h3: clamp(1.35rem, 1.7vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.2vw, 1.25rem);
  --fs-lede: clamp(1.05rem, .98rem + .25vw, 1.2rem);

  --gutter: clamp(1rem, 3.2vw, 2.5rem);
  --maxw: 1280px;
  --gap: clamp(.9rem, 1.6vw, 1.5rem);
  --space-section: clamp(3.5rem, 6vw, 6rem);
  --r: 1rem;
  --r-lg: 1.5rem;
  --header-h: 68px;

  --ease: cubic-bezier(.65, .05, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 760px) {
  :root { --header-h: 64px; --min-text: 12px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
svg.i { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -.15em; }
.header__announce svg.i { width: 1rem; height: 1rem; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--marigold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.skip {
  position: fixed; left: 1rem; top: -5rem; z-index: 10001;
  background: var(--marigold); color: var(--ink); padding: .8rem 1.2rem; border-radius: 999px; font-weight: 600;
  transition: top .3s var(--ease);
}
.skip:focus { top: 1rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 920px; }
.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.s-dark { background: var(--forest); color: var(--paper); --line: var(--line-dark); --muted: var(--muted-dark); }
.s-ink2 { background: var(--forest); color: var(--paper); --line: var(--line-dark); --muted: var(--muted-dark); }
.s-paper { background: var(--paper); }
.s-bone { background: var(--bone); }
.s-sage { background: var(--sage); color: var(--paper); --muted: rgba(251,247,240,.82); --line: rgba(251,247,240,.24); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: var(--stack, 1.25rem); }
.center { text-align: center; }
.flex { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

/* ---------- Type ---------- */
.display, .h-hero, .h1, .h2, .h3 {
  font-family: var(--f-display);
  font-weight: 380;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  letter-spacing: -.035em;
  line-height: .95;
  text-wrap: balance;
}
.h-hero { font-size: var(--fs-hero); line-height: .9; }
.h1 { font-size: var(--fs-h1); line-height: .9; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: -.025em; line-height: 1.04; }
.h4 { font-family: var(--f-sans); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.it, .display em, .h-hero em, .h1 em, .h2 em, .h3 em {
  font-style: italic;
  font-weight: 340;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent-text, var(--sage));
}
.s-dark .it, .s-dark em, .s-ink2 em, .hero em, [data-theme="dark"] em, [data-theme="dark"] .it { --accent-text: var(--marigold); }
.s-sage em { --accent-text: var(--honey); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 2.25em; height: 1px; background: currentColor; opacity: .55; }
.eyebrow--plain::before { display: none; }
.num { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; opacity: .9; }
.lede { font-size: var(--fs-lede); line-height: 1.55; max-width: 44ch; text-wrap: pretty; }
.body-l { font-size: clamp(1rem, .97rem + .15vw, 1.08rem); line-height: 1.65; max-width: 58ch; text-wrap: pretty; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); }
.hand { font-family: var(--f-hand); font-weight: 600; }
.prose p + p { margin-top: 1em; }
.prose { max-width: 62ch; text-wrap: pretty; }
.prose .list { list-style: disc; padding-left: 1.25rem; display: grid; gap: .45rem; }
.news__fine a, .form__fine a { text-decoration: underline; text-underline-offset: 2px; }
.link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .6s var(--ease);
  padding-bottom: 2px;
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* section heading block */
.shead { display: grid; gap: 1.4rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.shead--row { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 2rem 4rem; }
.shead--center { justify-items: center; text-align: center; }
@media (max-width: 900px) { .shead--row { grid-template-columns: 1fr; } }

/* SplitText masks */
.line-mask { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.split-ready [data-split] { visibility: visible; }
html.js [data-split] { visibility: hidden; }
html.js.reduce-motion [data-split], html.js.fonts-failed [data-split] { visibility: visible; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper); --hover-bg: var(--marigold); --hover-fg: var(--ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 3rem; padding: .45rem 1.35rem; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-sans); font-weight: 600; font-size: .92rem; letter-spacing: -.005em; line-height: 1;
  white-space: nowrap; transition: color .5s var(--ease), border-color .5s var(--ease);
  border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%;
  width: 140%; aspect-ratio: 1; border-radius: 50%;
  background: var(--hover-bg);
  transform: translate(-50%, 0) scale(.2); transition: transform .75s var(--ease);
}
.btn:hover { color: var(--hover-fg); }
.btn:hover::before { transform: translate(-50%, -62%) scale(1.15); }
.btn__label { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; }
.btn__label > span { display: block; transition: transform .6s var(--ease); }
.btn__label > span + span { position: absolute; inset: 0; transform: translateY(105%); }
.btn:hover .btn__label > span:first-child { transform: translateY(-105%); }
.btn:hover .btn__label > span + span { transform: translateY(0); }
.btn__icon { width: 1.1em; height: 1.1em; flex: none; transition: transform .6s var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px) rotate(-45deg); }
.btn--marigold { --bg: var(--marigold); --fg: var(--ink); --hover-bg: var(--ink); --hover-fg: var(--paper); }
.btn--light { --bg: var(--paper); --fg: var(--ink); --hover-bg: var(--marigold); --hover-fg: var(--ink); }
.btn--ghost { --bg: transparent; --fg: currentColor; border-color: currentColor; }
.s-dark .btn--ghost, .hero .btn--ghost { --hover-bg: var(--paper); --hover-fg: var(--ink); }
.btn--ghost:not(.s-dark *) { --hover-bg: var(--ink); --hover-fg: var(--paper); }
.btn--sm { min-height: 2.4rem; padding: .35rem 1rem; font-size: .85rem; }
.btn--lg { min-height: 3.35rem; padding: .5rem 1.65rem; font-size: .98rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  white-space: nowrap;
}
.chip--solid { background: var(--ink); color: var(--paper); border-color: transparent; }
.chip--mari { background: var(--marigold); color: var(--ink); border-color: transparent; }
.dot { width: .55em; height: .55em; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.dot--live { background: var(--sage); box-shadow: 0 0 0 0 rgba(87,122,64,.55); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(87,122,64,0); } 100% { box-shadow: 0 0 0 0 rgba(87,122,64,0); } }

.arrow-link { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; }
.arrow-link svg { width: 1.1em; transition: transform .5s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }

/* ---------- Media ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--r); background: var(--oat); }
.s-dark .media { background: var(--oat); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--arch { border-radius: 999px 999px var(--r) var(--r); }
.media--pill { border-radius: 999px; }
.ratio-34 { aspect-ratio: 3 / 4; } .ratio-45 { aspect-ratio: 4 / 5; } .ratio-11 { aspect-ratio: 1; }
.ratio-43 { aspect-ratio: 4 / 3; } .ratio-169 { aspect-ratio: 16 / 9; } .ratio-23 { aspect-ratio: 2 / 3; }
.caption { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; display: flex; justify-content: space-between; gap: 1rem; }
[data-parallax] { will-change: transform; }
.media [data-parallax] { height: 118%; margin-top: -9%; }

/* ---------- Grain + cursor ---------- */
.grain {
  position: fixed; inset: -100%; z-index: 9990; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.cursor { position: fixed; left: 0; top: 0; z-index: 9995; pointer-events: none; display: none; will-change: transform; }
html.has-cursor .cursor { display: block; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor] { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
/* chef's-knife cursor: points like a normal arrow, the blade tip is the click point.
   Lifts over anything clickable (sage handle + a glint down the blade) and chops on click */
.cursor__knife { position: absolute; left: 0; top: -8px; width: 62px; height: 17px; transform-origin: 0 8px; transform: rotate(45deg) scale(.78); transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.cursor__svg { display: block; width: 62px; height: 17px; overflow: visible; filter: drop-shadow(0 0 .8px rgba(255,255,255,.95)) drop-shadow(0 2px 3px rgba(30,43,34,.35)); }
.kn-handle { fill: var(--ink); transition: fill .3s; }
.kn-glint { opacity: 0; transform: translateX(-10px) skewX(-22deg); }
.cursor.is-hover .cursor__knife { transform: rotate(36deg) scale(.86); }
.cursor.is-hover .kn-handle { fill: var(--sage); }
.cursor.is-hover .kn-glint { animation: knife-glint .75s cubic-bezier(.3,.7,.4,1) both; }
@keyframes knife-glint { 0% { opacity: .9; transform: translateX(-10px) skewX(-22deg); } 100% { opacity: 0; transform: translateX(46px) skewX(-22deg); } }
.cursor.is-down .cursor__knife { transform: rotate(62deg) scale(.76); transition-duration: .07s; }
.cursor.is-text .cursor__knife { opacity: 0; }
.cursor__label { position: absolute; left: 34px; top: 30px; padding: .42rem .7rem; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 .66rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: scale(.6) translateY(-4px); transform-origin: 0 0; transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.cursor.on-dark .cursor__label { background: var(--paper); color: var(--ink); }
.cursor.is-label .cursor__label { opacity: 1; transform: none; }
.cursor.is-hidden { opacity: 0; }

/* ---------- Preloader + page curtain ---------- */
.preloader { display: none; }
html.js.is-first .preloader {
  display: grid; position: fixed; inset: 0; z-index: 9100; background: var(--forest); color: var(--paper);
  place-items: center; overflow: hidden;
}
.preloader__inner { display: grid; justify-items: center; gap: 1.6rem; }
.preloader__hat { width: clamp(96px, 14vw, 150px); overflow: visible; }
.preloader__hat path { fill: transparent; stroke: var(--paper); stroke-width: 2.5; }
.preloader__word { width: clamp(180px, 26vw, 300px); overflow: hidden; }
.preloader__word svg { width: 100%; fill: var(--paper); }
.preloader__tag { font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .4em; text-transform: uppercase; color: var(--marigold); }
.preloader__count { position: absolute; right: var(--gutter); bottom: var(--gutter); font-family: var(--f-display); font-size: clamp(3rem, 7vw, 6rem); line-height: .8; letter-spacing: -.04em; font-variation-settings: "SOFT" 100, "WONK" 1; font-style: italic; color: var(--marigold); }
.preloader__meta { position: absolute; left: var(--gutter); bottom: var(--gutter); font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; opacity: .6; line-height: 1.8; }
.preloader__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--marigold); transform-origin: left; transform: scaleX(0); }

.curtain { position: fixed; inset: 0; z-index: 9050; pointer-events: none; display: grid; place-items: center; }
.curtain__panel { position: absolute; inset: 0; transform: translateY(101%); }
.curtain__panel--a { background: var(--sage); }
.curtain__panel--b { background: var(--forest); }
.curtain__mark { position: relative; width: 84px; opacity: 0; color: var(--paper); }
.curtain__mark path { fill: currentColor; }
html.is-entering .curtain__panel { transform: none; }
html.is-entering .curtain__mark { opacity: 1; }
html.is-entering .curtain { pointer-events: auto; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 200; color: var(--ink);
  transition: transform .7s var(--ease), color .4s;
}
.header__announce {
  display: flex; justify-content: center; align-items: center; gap: .8rem;
  min-height: 34px; padding: .35rem var(--gutter); background: var(--sage); color: var(--paper);
  font-size: .8rem; font-weight: 500; text-align: center; overflow: hidden;
  transition: min-height .5s var(--ease), padding .5s var(--ease), opacity .4s;
}
.header__announce a { display: inline-flex; gap: .55rem; align-items: center; }
/* the bar holds dated notices in order; only the first one still running shows */
.header__announce a + a { display: none; }
.header__announce strong { font-weight: 700; }
.header__announce .mono { font-size: max(.72rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; }
.header.is-scrolled .header__announce { min-height: 0; padding-block: 0; height: 0; opacity: 0; }
.header__bar {
  position: relative; height: var(--header-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  padding-inline: var(--gutter);
}
.header__bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--line); transition: opacity .5s;
}
.header.is-scrolled .header__bar::before { opacity: 1; }
.header.is-dark { color: var(--paper); }
.header.is-dark .header__bar::before { background: color-mix(in srgb, var(--sage) 92%, transparent); border-color: var(--line-dark); }
.header.is-hidden { transform: translateY(-100%); }
.header.menu-open { color: var(--paper); transform: none; }
.header.menu-open .header__bar::before { opacity: 0; }
.header.menu-open .header__announce { min-height: 0; height: 0; padding-block: 0; opacity: 0; }

.logo { display: inline-flex; align-items: center; gap: .7rem; }
.logo__hat { width: 38px; height: auto; flex: none; }
.logo__hat path { fill: currentColor; }
.logo__type { display: grid; gap: 3px; }
.logo__word { width: 100px; height: auto; }
.logo__word path { fill: currentColor; }
.logo__sub { font-family: var(--f-mono); font-size: .54rem; letter-spacing: .26em; text-transform: uppercase; opacity: .75; white-space: nowrap; }

.nav { justify-self: center; }
.nav ul { display: flex; gap: clamp(1rem, 2vw, 2.1rem); list-style: none; padding: 0; margin: 0; }
.nav a { position: relative; font-size: .88rem; font-weight: 500; padding-block: .4rem; display: inline-block; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--sage-ink); }
.header.is-dark .nav a[aria-current="page"] { color: var(--honey); }

.header__actions { display: flex; align-items: center; gap: .75rem; justify-self: end; }
.header__phone { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .04em; display: inline-flex; gap: .5rem; align-items: center; }
.header__phone svg { width: 15px; }
.header .btn--book { --bg: var(--ink); --fg: var(--paper); }
.header.is-dark .btn--book, .header.menu-open .btn--book { --bg: var(--marigold); --fg: var(--ink); --hover-bg: var(--paper); }

.burger {
  display: inline-flex; align-items: center; gap: .6rem; height: 2.5rem; padding: 0 .3rem 0 .9rem;
  border-radius: 999px; border: 1px solid currentColor; font-size: .88rem; font-weight: 600;
}
.burger__lines { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: currentColor; display: grid; place-content: center; gap: 5px; }
.burger__lines i { display: block; width: 14px; height: 1.5px; background: var(--paper); transition: transform .5s var(--ease); }
.header.is-dark .burger__lines i, .header.menu-open .burger__lines i { background: var(--ink); }
.header.menu-open .burger__lines i:first-child { transform: translateY(3.25px) rotate(45deg); }
.header.menu-open .burger__lines i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.burger__text { position: relative; overflow: hidden; height: 1.2em; }
.burger__text span { display: block; transition: transform .5s var(--ease); line-height: 1.2; }
.header.menu-open .burger__text span { transform: translateY(-100%); }

@media (max-width: 1180px) { .nav, .header__phone { display: none; } }
@media (max-width: 760px) {
  .header__bar { gap: .6rem; }
  .header .btn--book { display: none; }
  .logo__hat { width: 36px; } .logo__word { width: 94px; }
  .burger { padding-left: .8rem; height: 2.6rem; }
  .burger__lines { width: 1.85rem; height: 1.85rem; }
  .header__announce { font-size: .78rem; }
  .header__announce .hide-s { display: none; }
}

/* ---------- Full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 150; background: var(--forest); color: var(--paper);
  clip-path: circle(0% at calc(100% - 4rem) 2.5rem); visibility: hidden;
  display: grid; grid-template-rows: 1fr auto; padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  --line: var(--line-dark);
}
.menu.is-open { visibility: visible; }
.menu__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 4rem; align-items: center; min-height: 0; }
.menu__links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 1100px) { .menu__links { grid-template-columns: 1fr; } }
.menu__link {
  display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; gap: 1rem;
  padding-block: .2rem; border-bottom: 1px solid var(--line); overflow: hidden;
}
.menu__num { font-family: var(--f-mono); font-size: .75rem; opacity: .5; }
.menu__text {
  font-family: var(--f-display); font-size: clamp(1.5rem, 2.2vw, 2.3rem); line-height: 1.15; letter-spacing: -.03em; white-space: nowrap;
  font-variation-settings: "SOFT" 40, "WONK" 0; display: block; transition: transform .6s var(--ease), color .4s;
}
.menu__meta { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; opacity: .5; }
.menu__link:hover .menu__text, .menu__link[aria-current="page"] .menu__text { color: var(--marigold); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; transform: translateX(.6rem); }
.menu__preview { position: relative; aspect-ratio: 4 / 5; max-height: 64vh; border-radius: var(--r-lg); overflow: hidden; background: var(--oat); justify-self: center; width: min(100%, 360px); }
.menu__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.15); transition: opacity .6s var(--ease), transform 1.2s var(--ease-out); }
.menu__preview img.is-active { opacity: 1; transform: scale(1); }
.menu__foot { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; font-size: .92rem; }
.menu__foot .eyebrow { color: var(--marigold); margin-bottom: .4rem; display: flex; }
@media (max-width: 900px) {
  .menu { overflow-y: auto; }
  .menu__grid { grid-template-columns: 1fr; }
  .menu__preview { display: none; }
  .menu__foot { grid-template-columns: 1fr 1fr; }
  .menu__meta { display: none; }
  .menu__link { grid-template-columns: 2.4rem 1fr; }
}

/* ---------- Mobile action bar ---------- */
.mbar {
  position: fixed; left: .6rem; right: .6rem; bottom: max(.6rem, env(safe-area-inset-bottom)); z-index: 180;
  display: none; grid-template-columns: 1fr 1fr 1.4fr; gap: .4rem; padding: .4rem;
  background: color-mix(in srgb, var(--forest) 94%, transparent); color: var(--paper); border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.5);
  transform: translateY(150%); transition: transform .6s var(--ease);
}
.mbar.is-visible { transform: none; }
.mbar a, .mbar button { display: flex; align-items: center; justify-content: center; gap: .45rem; height: 3rem; border-radius: 999px; font-weight: 600; font-size: .92rem; }
.mbar svg { width: 17px; }
.mbar .mbar__primary { background: var(--marigold); color: var(--ink); }
/* the quick-action bar slides away when the footer comes up (see header() in main.js), so the footer needs no room for it */
@media (max-width: 760px) { .mbar { display: grid; } }

/* ---------- Booking drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 400; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(30,43,34,.55); opacity: 0; backdrop-filter: blur(3px); }
.drawer__panel {
  position: absolute; top: .6rem; right: .6rem; bottom: .6rem; width: min(460px, calc(100% - 1.2rem));
  background: var(--bone); color: var(--ink); border-radius: var(--r-lg); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; transform: translateX(110%);
  box-shadow: -30px 0 80px -30px rgba(0,0,0,.4);
}
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); }
.drawer__close { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .3s, transform .5s var(--ease); }
.drawer__close:hover { background: var(--ink); color: var(--paper); transform: rotate(90deg); }
.drawer__close svg { width: 16px; }
.drawer__body { overflow-y: auto; padding: 1.6rem; display: grid; gap: 1.4rem; align-content: start; overscroll-behavior: contain; }
.drawer__title { font-family: var(--f-display); font-size: clamp(1.7rem, 2.3vw, 2.1rem); line-height: 1; letter-spacing: -.03em; }
.drawer__or { display: flex; align-items: center; gap: 1rem; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.drawer__or::before, .drawer__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.drawer__quick { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 760px) {
  .drawer__panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92svh; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(105%); }
}

/* ---------- Tickets (classes / dinners) ---------- */
.ticket {
  --notch: 14px;
  position: relative; display: grid; grid-template-columns: auto 1fr; background: var(--bone); color: var(--ink);
  border-radius: var(--r); overflow: hidden;
  -webkit-mask: radial-gradient(circle var(--notch) at calc(var(--stub) + 0px) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(var(--stub) + 0px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at calc(var(--stub) + 0px) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(var(--stub) + 0px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  --stub: 5.4rem;
}
.ticket__stub {
  width: var(--stub); padding: 1.3rem .8rem; display: grid; align-content: center; justify-items: center; gap: .1rem; text-align: center;
  border-right: 2px dashed var(--line); background: var(--accent, var(--marigold)); color: var(--ink);
}
.ticket__dow { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; }
.ticket__day { font-family: var(--f-display); font-size: 2.3rem; line-height: .95; letter-spacing: -.04em; }
.ticket__mon { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; }
.ticket__body { padding: 1.25rem 1.35rem; display: grid; gap: .55rem; align-content: space-between; min-width: 0; }
.ticket__type { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.ticket__title { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.05; letter-spacing: -.02em; }
.ticket__desc { font-size: .9rem; color: var(--muted); line-height: 1.45; }
.ticket__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.ticket__price { font-family: var(--f-mono); font-size: .82rem; white-space: nowrap; }
.ticket__price strong { font-family: var(--f-display); font-size: 1.3rem; font-weight: 400; letter-spacing: -.02em; }
.ticket--class { --accent: var(--marigold); }
.ticket--dinner { --accent: var(--tomato); }
.ticket--dinner .ticket__stub { color: var(--bone); }
.ticket--camp { --accent: var(--sage); }
.ticket--pickup { --accent: var(--forest); }
.ticket--open { --accent: var(--oat); }
.ticket--holiday { --accent: var(--stone); }
.ticket--camp .ticket__stub, .ticket--pickup .ticket__stub, .ticket--holiday .ticket__stub { color: var(--bone); }
/* darker stub fills so the small white date text stays readable */
.ticket--dinner .ticket__stub { background: #a3492a; }
.ticket--pickup .ticket__stub { background: var(--ink); }

/* ---------- Cards ---------- */
.card { position: relative; border-radius: var(--r); overflow: hidden; background: var(--bone); }
.s-dark .card { background: var(--forest); }
.card__body { padding: clamp(1.25rem, 2.4vw, 2rem); display: grid; gap: .8rem; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; position: relative; }
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__item {
  display: inline-flex; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); padding-right: clamp(1.25rem, 3vw, 3rem);
  font-family: var(--f-display); font-size: clamp(1.7rem, 3.4vw, 3.6rem); line-height: 1.15; letter-spacing: -.03em;
}
.marquee__item em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.marquee__item { padding-block: .14em .22em; }
.marquee__star { width: .5em; height: .5em; flex: none; }
.marquee--outline .marquee__item { color: transparent; -webkit-text-stroke: 1.2px currentColor; }
.marquee--outline .marquee__item { -webkit-text-stroke-color: var(--ink); }
.marquee--sm .marquee__item { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.marquee-band { padding-block: clamp(.9rem, 1.8vw, 1.5rem); border-block: 1px solid var(--line); }

/* ---------- Badge (rotating) ---------- */
.badge { position: relative; width: clamp(92px, 8vw, 122px); aspect-ratio: 1; display: grid; place-items: center; }
.badge__ring { position: absolute; inset: 0; animation: spin 22s linear infinite; }
.badge__ring text { font-family: var(--f-mono); font-size: 8.2px; letter-spacing: 2.6px; text-transform: uppercase; fill: currentColor; }
.badge__center { position: relative; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--marigold); display: grid; place-items: center; color: var(--ink); }
.badge__center svg { width: 64%; }
.badge__center path { fill: currentColor; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================================
   HOME
   ========================================================================= */
.hero {
  position: relative; min-height: 100svh; background: var(--forest); color: var(--paper); overflow: hidden;
  display: grid; align-items: center; padding-top: calc(var(--header-h) + 34px + 2rem); padding-bottom: clamp(2rem, 4vw, 3rem);
  --line: var(--line-dark);
}
.hero__canvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; }
.hero__glow { position: absolute; z-index: 0; width: 70vmax; aspect-ratio: 1; right: -20vmax; top: -18vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(226,162,59,.28), rgba(226,162,59,0)); filter: blur(10px); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.hero__title { font-size: var(--fs-hero); line-height: .9; margin-bottom: 1.5rem; }
.hero__title .row { display: block; }
/* spacing on one 8px scale: the label hugs the headline, the buttons get the most room */
.hero__copy { display: grid; gap: 0; padding-bottom: clamp(0rem, 2vw, 1.5rem); }
.hero__copy > .eyebrow { margin-bottom: 1rem; }
.hero__copy > .btn-row { margin-top: 2.5rem; }
.hero__lede { color: var(--muted-dark); max-width: 46ch; }
/* prices: one row of figures */
.hero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 30rem; }
.hero__facts > div { padding-right: 1.3rem; margin-right: 1.3rem; border-right: 1px solid var(--line); }
.hero__facts > div:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.hero__facts dt { font-family: var(--f-display); font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1; letter-spacing: -.03em; }
.hero__facts dd { margin-top: .35rem; font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero__visual { position: relative; align-self: stretch; display: grid; align-items: end; }
.hero__arch { position: relative; aspect-ratio: 3 / 4; width: 100%; max-height: min(calc(100svh - var(--header-h) - 10rem), 560px); border-radius: 999px 999px var(--r) var(--r); overflow: hidden; background: var(--oat); justify-self: end; }
.hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .8s var(--ease-out, ease); }
.hero__reel.is-on { opacity: 1; }
.hero__badge { position: absolute; left: -2.4rem; bottom: 18%; z-index: 4; color: var(--paper); }
.hero__note { position: absolute; left: -3.6rem; top: -2.6rem; right: auto; justify-items: start !important; z-index: 4; font-family: var(--f-hand); font-size: clamp(1.1rem, 1.4vw, 1.4rem); color: var(--honey); transform: rotate(-4deg); line-height: 1; display: grid; justify-items: end; gap: .3rem; }
.hero__note svg { width: 70px; transform: rotate(-60deg) translate(-6px, 4px); }
.hero__foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.1rem; border-top: 1px solid var(--line-dark); font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.scroll-cue { display: inline-flex; align-items: center; gap: .8rem; }
.scroll-cue i { position: relative; width: 1px; height: 2.6rem; background: var(--line-dark); overflow: hidden; display: block; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--marigold); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (max-width: 900px) {
  /* tablets keep the photo beside the text, with a bigger share of the width */
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem; }
  .hero__copy > .eyebrow { text-wrap: balance; }
  /* the photo keeps its 3:4 arch shape, even on a phone turned sideways; the badge sits on its left edge */
  .hero__visual { --arch-w: calc(clamp(300px, 54svh, 440px) * .75); }
  .hero__arch { max-height: clamp(300px, 54svh, 440px); max-width: var(--arch-w); }
  .hero__badge { left: calc(100% - min(100%, var(--arch-w)) - 1.5rem); bottom: 6%; }
  .hero__badge.badge { width: 100px; }
  .hero__foot .hide-s { display: none; }
}
/* phones turned sideways: the photo sits too far below the note for it to point at Chef David */
@media (max-width: 900px) and (max-height: 500px) {
  .hero__note { display: none; }
}

/* manifesto */
.manifesto__text { font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.08; letter-spacing: -.03em; font-variation-settings: "SOFT" 40, "WONK" 0; text-wrap: pretty; }
.manifesto__text .word { color: rgba(30,43,34,.16); transition: color .2s; }
.manifesto__text .word.is-lit { color: var(--ink); }
.manifesto__text em .word.is-lit { color: var(--sage); }
html:not(.js) .manifesto__text .word, html.reduce-motion .manifesto__text .word { color: var(--ink); }
.manifesto__pill { display: inline-block; vertical-align: middle; width: 1.9em; height: .95em; border-radius: 999px; overflow: hidden; margin-inline: .08em; position: relative; top: -.06em; background: var(--oat); }
.manifesto__pill img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__sig { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.manifesto__sig .hand { font-size: 1.8rem; color: var(--sage); line-height: 1; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.8rem) 0 0; display: grid; gap: .8rem; align-content: start; border-right: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 1.8rem); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat__num { font-family: var(--f-display); font-size: clamp(2.6rem, 4.4vw, 4.4rem); line-height: .85; letter-spacing: -.05em; font-variation-settings: "SOFT" 60, "WONK" 1; }
.stat__num sup { font-size: .35em; vertical-align: top; position: relative; top: .25em; margin-left: .05em; color: var(--sage); }
.stat__label { font-size: .88rem; color: var(--muted); max-width: 26ch; line-height: 1.45; }
@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 0; padding-left: 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
}

/* three paths */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.path { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); overflow: hidden; background: var(--bone); min-height: 100%; isolation: isolate; transition: transform .8s var(--ease-out); }
.path__media { aspect-ratio: 4 / 3.4; overflow: hidden; position: relative; }
.path__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease-out); }
.path:hover .path__media img { transform: scale(1.12); }
.path__price { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.path__price .chip { background: var(--bone); border-color: transparent; color: var(--ink); }
.path__body { padding: clamp(1.15rem, 1.8vw, 1.6rem); display: grid; gap: .9rem; align-content: start; }
.path__title { font-family: var(--f-display); font-size: clamp(1.45rem, 1.9vw, 1.85rem); line-height: 1; letter-spacing: -.03em; }
.path__desc { color: var(--muted); }
.path__go { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 1.2rem; border-top: 1px solid var(--line); font-weight: 600; }
.path__go .circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; transition: transform .6s var(--ease), background .4s; }
.path__go .circle svg { width: 1.1rem; }
.path:hover .path__go .circle { background: var(--marigold); color: var(--ink); transform: rotate(-45deg); }
.path::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--line); pointer-events: none; }
@media (max-width: 1000px) { .paths { grid-template-columns: 1fr; } .path { grid-template-columns: 1fr 1.1fr; grid-template-rows: auto; } .path__media { aspect-ratio: auto; } }
@media (max-width: 640px) { .path { grid-template-columns: 1fr; } .path__media { aspect-ratio: 4 / 3; } }
.minor-paths { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: var(--gap); }
.minor-path { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 1.2rem 1.4rem 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: clamp(1.1rem, 1.4vw, 1.3rem); letter-spacing: -.02em; transition: padding .5s var(--ease), color .3s; }
.minor-path + .minor-path { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.minor-path small { display: block; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.minor-path svg { width: 1.3rem; flex: none; transition: transform .5s var(--ease); }
.minor-path:hover { color: var(--sage); }
.minor-path:hover svg { transform: translateX(6px) rotate(-45deg); }
@media (max-width: 900px) { .minor-paths { grid-template-columns: 1fr; } .minor-path + .minor-path { padding-left: 0; border-left: 0; } }

/* upcoming rail */
.rail { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.5rem; scrollbar-width: thin; scrollbar-color: var(--marigold) transparent; cursor: grab; }
.rail:active { cursor: grabbing; }
.rail > * { flex: 0 0 min(330px, 84vw); scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 4px; } .rail::-webkit-scrollbar-thumb { background: var(--marigold); border-radius: 4px; }
.rail .ticket { height: 100%; }
.rail-empty { padding: 2rem; border: 1px dashed var(--line); border-radius: var(--r); }

/* story (dark) */
.story { overflow: hidden; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
/* one big photo of David on the Eat This TV set, framed like a screen; the whole thing links to the episode */
.story__tv { position: relative; display: grid; gap: 1rem; color: inherit; }
.story__screen { aspect-ratio: 4 / 3; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(242,212,155,.3), 0 0 0 10px rgba(242,212,155,.07), 0 50px 90px -40px rgba(0,0,0,.65); }
.story__screen img { object-position: 50% 40%; transition: transform 1.2s var(--ease-out); }
.story__tv:hover .story__screen img { transform: scale(1.04); }
.story__badge { position: absolute; z-index: 2; left: -1.4rem; top: -1.6rem; width: 8.2rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: .15rem; text-align: center; background: var(--marigold); color: var(--ink); transform: rotate(-10deg); box-shadow: 0 16px 30px -12px rgba(0,0,0,.5), inset 0 0 0 5px var(--marigold), inset 0 0 0 6.5px rgba(30,43,34,.4); }
.story__badge small { font-family: var(--f-mono); font-size: max(.6rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; }
.story__badge b { font-family: var(--f-display); font-weight: 480; font-size: 1.3rem; line-height: .95; letter-spacing: -.03em; }
/* the reveal animates .story__play itself (main.js), so its hover grow lives on the icon to keep CSS transitions off GSAP's transform */
.story__play { position: absolute; z-index: 2; right: 1.3rem; bottom: 1.3rem; width: 4.6rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(251,247,240,.94); color: var(--sage); box-shadow: 0 0 0 10px rgba(251,247,240,.22), 0 20px 40px -14px rgba(0,0,0,.6); transition: box-shadow .5s; }
.story__play svg { width: 2rem; fill: currentColor; margin-left: .25rem; transition: transform .5s var(--ease-out); }
.story__tv:hover .story__play { box-shadow: 0 0 0 16px rgba(251,247,240,.3), 0 20px 40px -14px rgba(0,0,0,.6); }
.story__tv:hover .story__play svg { transform: scale(1.18); }
.story__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.story__cap b { color: var(--ink); font-weight: 500; }
.story__watch { display: inline-flex; align-items: center; gap: .4rem; color: var(--sage-ink); font-weight: 500; }
.story__watch svg { width: .9rem; transition: transform .4s var(--ease-out); }
.story__tv:hover .story__watch svg { transform: translate(3px, -3px); }
html.reduce-motion .story__screen img, html.reduce-motion .story__play, html.reduce-motion .story__play svg { transition: none; }
.names { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-family: var(--f-display); font-size: clamp(1.25rem, 1.9vw, 1.8rem); line-height: 1.15; letter-spacing: -.025em; }
.names span { white-space: nowrap; }
.names span:nth-child(4n+3) { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--marigold); }
.names .sep { color: var(--muted-dark); font-style: normal !important; }
@media (max-width: 900px) { .story__grid { grid-template-columns: 1fr; } .story__tv { margin-top: 1.2rem; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); position: relative; }
.steps__line { position: absolute; left: 0; right: 0; top: 1.8rem; height: 40px; z-index: 0; overflow: visible; }
.steps__line path { fill: none; stroke: var(--marigold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.step { position: relative; z-index: 1; display: grid; gap: 1rem; align-content: start; }
.step__n { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--ink); font-family: var(--f-display); font-size: 1.5rem; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.step:nth-child(2) .step__n { background: var(--marigold); border-color: var(--marigold); }
.step h3 { font-family: var(--f-display); font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 400; }
.step p { color: var(--muted); font-size: .98rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 3rem; } .steps__line { display: none; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* value */
/* price check: the headline and the review on one side, the price chart on a card on the other.
   On phones the chart comes right after the headline */
.value { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-areas: "text compare" "quote compare"; gap: 1.75rem clamp(2rem, 4vw, 4rem); align-items: start; }
.value__text { grid-area: text; align-self: end; }
.value > .compare { grid-area: compare; align-self: center; }
.value__quote { grid-area: quote; }
.compare { display: grid; gap: 1.6rem; padding: clamp(1.3rem, 2.6vw, 2.1rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.compare__title { font-family: var(--f-display); font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.compare__group { margin-bottom: -.9rem; padding-top: .3rem; font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.compare__group--us { color: var(--sage); }
.compare__row { display: grid; gap: .55rem; }
.compare__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .95rem; }
.compare__top strong { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; letter-spacing: -.02em; }
.compare__bar { height: 14px; border-radius: 999px; background: rgba(30,43,34,.08); overflow: hidden; }
.compare__bar i { display: block; height: 100%; border-radius: inherit; background: var(--stone); transform-origin: left; width: var(--w); }
.compare__row--us .compare__bar i { background: var(--marigold); }
.compare__note { font-size: .8rem; color: var(--muted); }
@media (max-width: 900px) { .value { grid-template-columns: 1fr; grid-template-areas: "text" "compare" "quote"; } }

/* collage */
.collage { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(56px, 5.6vw, 88px); gap: var(--gap); }
.collage .media:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 5; }
.collage .media:nth-child(2) { grid-column: 5 / 8; grid-row: 2 / 5; }
.collage .media:nth-child(3) { grid-column: 8 / 13; grid-row: 1 / 4; }
.collage .media:nth-child(4) { grid-column: 2 / 6; grid-row: 5 / 8; }
.collage .media:nth-child(5) { grid-column: 6 / 9; grid-row: 5 / 9; }
.collage .media:nth-child(6) { grid-column: 9 / 13; grid-row: 4 / 8; }
.collage__cap, .collage__dots { display: none; }
@media (max-width: 760px) {
  .collage { grid-auto-rows: 90px; }
  .collage .media:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 4; }
  .collage .media:nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 3; }
  .collage .media:nth-child(3) { grid-column: 8 / 13; grid-row: 3 / 6; }
  .collage .media:nth-child(4) { grid-column: 1 / 8; grid-row: 4 / 7; }
  .collage .media:nth-child(5) { grid-column: 1 / 6; grid-row: 7 / 10; }
  .collage .media:nth-child(6) { grid-column: 6 / 13; grid-row: 6 / 10; }
}

/* quotes */
.quotes { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.quotes__mark { font-family: var(--f-display); font-size: clamp(5rem, 9vw, 8.5rem); line-height: .7; color: var(--marigold); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.quotes__stage { position: relative; display: grid; min-height: 12rem; }
.quote { grid-area: 1 / 1; display: grid; gap: 2rem; align-content: start; visibility: hidden; }
.quote.is-active { visibility: visible; }
.quote__text { font-family: var(--f-display); font-size: clamp(1.3rem, 2.1vw, 2rem); line-height: 1.12; letter-spacing: -.025em; font-variation-settings: "SOFT" 50, "WONK" 0; text-wrap: pretty; }
.quote__who { display: flex; align-items: center; gap: 1rem; }
.quote__avatar { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--marigold); color: var(--ink); display: grid; place-items: center; font-family: var(--f-mono); font-size: .85rem; }
.quote__name { font-weight: 600; }
.quote__ctx { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stars { color: var(--marigold); letter-spacing: .15em; }
.quotes__nav { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.quotes__btn { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .3s, color .3s; }
.quotes__btn:hover { background: var(--ink); color: var(--paper); }
.s-dark .quotes__btn:hover { background: var(--paper); color: var(--ink); }
.quotes__btn svg { width: 1.1rem; }
.quotes__count { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; }
.quotes__progress { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; max-width: 220px; }
.quotes__progress i { position: absolute; inset: 0; background: var(--marigold); transform-origin: left; transform: scaleX(0); }
.quotes__stage { touch-action: pan-y; }
/* phones: the review sits on one card, the big quote mark tucked into its corner, and the band
   shares the gallery's cream above it so there's no seam between them */
@media (max-width: 760px) {
  .quotes-band { background: var(--paper); padding-top: 1.25rem; }
  .quotes { display: block; }
  .quotes > div { position: relative; padding: 1.5rem 1.3rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bone); box-shadow: 0 30px 60px -40px rgba(30,43,34,.35); }
  .quotes__mark { position: absolute; z-index: 1; top: 1.6rem; right: 1.2rem; font-size: 5rem; pointer-events: none; }
  .quotes__stage.mt-m { margin-top: 1.1rem; }
  .quote { gap: 1.2rem; }
  .quote__text { font-size: 1.2rem; line-height: 1.22; }
  .quote__avatar { width: 2.6rem; height: 2.6rem; font-size: .75rem; }
  .quotes__nav { margin-top: 1.4rem; gap: .6rem; }
  .quotes__btn { width: 2.9rem; height: 2.9rem; }
}

/* TV feature */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(30,43,34,0) 40%, rgba(30,43,34,.65)); }
.video__btn { width: clamp(3.8rem, 5.5vw, 5.2rem); aspect-ratio: 1; border-radius: 50%; background: var(--marigold); display: grid; place-items: center; color: var(--ink); transition: transform .6s var(--ease); }
.video__btn svg { width: 32%; margin-left: 8%; }
.video:hover .video__btn { transform: scale(1.1); }
.video__tag { position: absolute; left: 1.2rem; bottom: 1.2rem; color: var(--paper); font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; display: flex; gap: .6rem; align-items: center; }

/* home: the Eat This TV feature. The episode on one side; the title, the story and the press on the other.
   On phones: title, then the episode, then the rest */
.tv { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "video head" "video body"; grid-template-rows: auto 1fr; gap: 1.4rem clamp(2rem, 4.5vw, 4.5rem); }
.tv__head { grid-area: head; align-self: end; }
.tv__body { grid-area: body; }
.tv > .video { grid-area: video; align-self: center; }
.tv__kicker { display: inline-flex; align-items: center; gap: .65rem; }
/* the on-air light */
.tv__rec { width: .6rem; height: .6rem; border-radius: 50%; background: var(--tomato); box-shadow: 0 0 0 3px rgba(200,100,59,.18); animation: on-air 1.6s ease-in-out infinite; }
@keyframes on-air { 50% { opacity: .35; } }
.video--feature { aspect-ratio: 5 / 4; box-shadow: 0 40px 80px -46px rgba(30,43,34,.55); }
.video--feature.is-playing { aspect-ratio: 16 / 9; }
.video--feature img { object-position: 42% 30%; }
.video--feature .video__play { place-items: end start; padding: clamp(1rem, 2.2vw, 1.6rem); background: linear-gradient(180deg, rgba(30,43,34,0) 55%, rgba(30,43,34,.5)); }
.video--feature .video__btn { width: auto; aspect-ratio: auto; display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.4rem .85rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .96rem; box-shadow: 0 14px 30px -12px rgba(30,43,34,.6); }
.video--feature .video__btn svg { width: 1rem; margin: 0; }
.video--feature:hover .video__btn { transform: scale(1.05); }
.video--feature .video__tag { top: clamp(1rem, 2.2vw, 1.6rem); left: clamp(1rem, 2.2vw, 1.6rem); bottom: auto; padding: .5rem .85rem; border-radius: 999px; background: rgba(30,43,34,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* the press: three headlines with thin rules, no boxes */
.tv__also { margin: clamp(1.75rem, 3vw, 2.25rem) 0 .4rem; }
.press-list { border-top: 1px solid var(--line); }
.press-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem 1.25rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.press-item__outlet { grid-column: 1; font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.press-item__title { grid-column: 1; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.18; letter-spacing: -.015em; transition: color .3s; }
.press-item svg { grid-column: 2; grid-row: 1 / 3; width: 1.05rem; transition: transform .4s var(--ease); }
.press-item:hover .press-item__title { color: var(--sage); }
.press-item:hover svg { transform: rotate(-45deg); }
@media (max-width: 900px) {
  .tv { grid-template-columns: 1fr; grid-template-areas: "head" "video" "body"; grid-template-rows: auto; }
}
@media (max-width: 760px) {
  .video--feature { aspect-ratio: 4 / 3.4; }
  .video--feature img { object-position: 42% 16%; }
  .video--feature .video__btn { padding: .75rem 1.15rem .75rem .95rem; font-size: .9rem; }
  .video--feature .video__tag { font-size: max(.6rem, var(--min-text)); letter-spacing: .1em; }
}

.countdown { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: clamp(.8rem, 2vw, 1.6rem); }
.countdown div { display: grid; gap: .1rem; }
.countdown b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.4vw, 2.4rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.countdown span { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.countdown b.is-tick { animation: tick .45s var(--ease-out); }
@keyframes tick { from { transform: translateY(-45%); opacity: 0; } }

/* home: this season's two offers, side by side. The camp flyer and the gift certificate are
   3D objects you can grab, spin and flip (spinCards() in main.js) */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.offer { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); padding: clamp(1.3rem, 2.4vw, 2rem); border-radius: var(--r-lg); overflow: hidden; }
.offer--camp { background: var(--sage); color: var(--paper); --muted: var(--paper); }
.offer--gift { color: var(--ink); background: radial-gradient(110% 90% at 30% 20%, var(--honey) 0%, color-mix(in srgb, var(--honey) 40%, var(--oat)) 60%, var(--oat) 100%); }
.offer__obj { display: grid; justify-items: center; gap: .8rem; }
.offer__text { display: grid; gap: 1rem; justify-items: start; }
.offer__title { font-family: var(--f-display); font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.offer__sub { font-size: .95rem; opacity: .85; max-width: 32ch; }
.offer__hint { font-family: var(--f-mono); font-size: max(.6rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; }
.offer--camp .chip { border-color: rgba(251,247,240,.35); }
.offer--gift .chip { border-color: rgba(30,43,34,.22); }
.offer--camp .countdown { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; width: 100%; max-width: 17rem; }
.offer--camp .countdown div { justify-items: center; gap: .15rem; padding: .5rem .3rem .45rem; border-radius: .75rem; overflow: hidden; background: rgba(30,43,34,.16); border: 1px solid rgba(251,247,240,.24); }
.offer--camp .countdown b { font-size: clamp(1.35rem, 1.8vw, 1.7rem); }
.offer--camp .countdown span { font-size: max(.56rem, var(--min-text)); opacity: 1; }
/* the objects: they float, tilt toward the mouse, and spin when dragged */
.spin { position: relative; width: 100%; perspective: 1100px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline-offset: 8px; animation: bob 5s ease-in-out infinite; }
.spin--flyer { max-width: 200px; }
.spin--card { max-width: 300px; }
.spin.is-grabbing { cursor: grabbing; animation-play-state: paused; }
@keyframes bob { 50% { translate: 0 -7px; } }
.spin__card { position: relative; display: block; transform-style: preserve-3d; will-change: transform; }
.spin__face { transform-style: flat; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.spin .giftcard { --gc-pad: clamp(1rem, 1.8vw, 1.3rem); width: 100%; padding: calc(var(--gc-pad) * .85) var(--gc-pad); transform: none; transition: none; }
.spin .giftcard__top svg { width: 34px; }
.spin .giftcard__label { font-size: .54rem; letter-spacing: .16em; }
.spin .giftcard__amount { font-size: clamp(2.3rem, 3.4vw, 3rem); }
.spin .giftcard__bottom b { font-size: 1rem; }
.offer--gift { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.spin .spin__face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
/* the camp flyer, printed on paper */
.flyer { display: block; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--paper); box-shadow: 0 30px 50px -24px rgba(30,43,34,.6), 0 0 0 1px rgba(30,43,34,.08); }
.flyer img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.flyer--back { display: grid; align-content: center; justify-items: center; gap: .55rem; padding: 1.1rem; text-align: center; color: var(--ink); }
.flyer__kicker { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.flyer__big { font-family: var(--f-display); font-size: 2.3rem; line-height: .9; letter-spacing: -.03em; }
.flyer__line { font-size: .78rem; line-height: 1.3; }
.flyer__hand { margin-top: .3rem; font-family: var(--f-hand); font-size: 1.1rem; line-height: 1.1; color: #a3492a; }
/* the gift certificate's back */
.giftcard--back { align-content: space-between; }
.giftcard__stripe { height: 1.9rem; margin-inline: calc(var(--gc-pad, clamp(1.2rem, 3vw, 2rem)) * -1); background: rgba(30,43,34,.5); }
.giftcard__uses { margin-top: .3rem; font-family: var(--f-display); font-size: .95rem; line-height: 1.2; letter-spacing: -.01em; }
@media (max-width: 1100px) { .offers { grid-template-columns: 1fr; } }

/* visit */
.visit { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.contact-list { display: grid; border-top: 1px solid var(--line); }
.contact-item { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease); }
.contact-item:hover { padding-left: .6rem; }
.contact-item__icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
.s-dark .contact-item__icon { background: var(--marigold); color: var(--ink); }
.contact-item__icon svg { width: 1.15rem; }
.contact-item__label { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-item__value { font-family: var(--f-display); font-size: clamp(1.1rem, 1.5vw, 1.4rem); letter-spacing: -.02em; line-height: 1.15; }
.contact-item__go svg { width: 1.2rem; transition: transform .5s var(--ease); }
.contact-item:hover .contact-item__go svg { transform: translateX(5px) rotate(-45deg); }
.hours { display: grid; gap: .5rem; font-size: .95rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--line); padding-bottom: .5rem; }
@media (max-width: 900px) { .visit { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band__title { font-family: var(--f-display); font-size: clamp(2.3rem, 5.2vw, 5.2rem); line-height: .9; letter-spacing: -.04em; font-variation-settings: "SOFT" 30, "WONK" 0; }
.cta-band__title em { color: var(--marigold); }
.cta-band .btn-row { justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.cta-band__img { position: absolute; width: clamp(80px, 9vw, 140px); aspect-ratio: 3/4; border-radius: 999px; overflow: hidden; z-index: 0; opacity: .95; }
.cta-band__img img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__img--a { left: 4%; top: 14%; transform: rotate(-8deg); }
.cta-band__img--b { right: 5%; bottom: 10%; transform: rotate(7deg); }
.cta-band .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) { .cta-band__img { display: none; } }

/* ---------- Footer ----------
   Brand sage, like the banners. Text is cream (5:1 on sage) and the softer
   text is mist (4.7:1); honey is kept to large type and small marks. */
.footer { background: var(--sage); color: var(--paper); --line: rgba(251,247,240,.26); --muted: var(--paper); overflow: hidden; position: relative; }
/* top band: the sign-off beside the newsletter (each page's own closing band does the booking) */
.footer__intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 4.5vw, 3.5rem); border-bottom: 1px solid var(--line); }
.footer__lead { font-family: var(--f-display); font-size: clamp(2.3rem, 4.4vw, 4rem); line-height: .98; letter-spacing: -.035em; }
.footer__lead em { color: var(--honey); }
/* the columns */
.footer__top { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: clamp(2rem, 3.5vw, 3rem); padding-block: clamp(2.5rem, 4.5vw, 3.5rem); }
.footer h2, .footer h3, .footer__label { display: flex; align-items: center; gap: .6rem; font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); margin-bottom: 1.1rem; }
.footer h2::before, .footer h3::before, .footer__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--honey); flex: none; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer__explore ul { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.footer a:not(.btn) { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .3s; }
.footer a:not(.btn):hover { text-decoration-color: var(--honey); }
.footer__follow { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; margin-top: 1.5rem; }
.footer__handle { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .04em; color: var(--muted); }
/* newsletter */
.news { display: grid; gap: .8rem; margin-top: 1.6rem; max-width: 26rem; }
.footer .news { margin-top: 0; max-width: none; }
.news__row { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--line); }
.footer .news__row { align-items: center; gap: .5rem; padding: .35rem .35rem .35rem 1.25rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(30,43,34,.14); transition: border-color .3s, background .3s; }
.footer .news__row:focus-within { border-color: var(--paper); background: rgba(30,43,34,.22); }
.news input { background: transparent; border: 0; padding: .9rem 0; outline: none; color: var(--paper); min-width: 0; width: 100%; }
.footer .news input { padding-block: .6rem; }
.footer__intro > *, .footer__top > *, .split > *, .phero__grid > *, .value > *, .visit > *, .tv > *, .builder > *, .gift-stage > * { min-width: 0; }
.news input::placeholder { color: var(--muted-dark); }
.news button { font-weight: 600; color: var(--marigold); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; padding-left: 1rem; }
.footer .news button { min-height: 2.75rem; padding: 0 1.2rem; border-radius: 999px; background: var(--paper); color: var(--ink); transition: background .3s; }
.footer .news button:hover { background: var(--honey); }
.news button svg { width: 1rem; }
.news__fine { font-size: .8rem; color: var(--muted-dark); }
.footer .news__fine { color: var(--muted); max-width: 44ch; }
.footer .form__success { background: rgba(251,247,240,.12); border: 1px solid var(--line); }
.footer .form__error { color: var(--paper); font-weight: 600; }
/* the wordmark and the last line */
.footer__word { padding-inline: var(--gutter); margin: 0 auto; max-width: var(--maxw); }
.footer__word svg { width: 100%; height: auto; }
.footer__word path { fill: var(--paper); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.socials { display: flex; gap: .6rem; margin-top: 1.4rem; }
.footer .socials { margin-top: 0; }
.socials a { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s; }
.socials a:hover { background: var(--marigold); color: var(--ink) !important; border-color: var(--marigold); }
.footer .socials a:hover { background: var(--paper); border-color: var(--paper); }
.socials svg { width: 1.1rem; }
@media (max-width: 1000px) {
  .footer__intro { grid-template-columns: 1fr; align-items: start; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__explore { grid-column: 1 / -1; }
  .footer__explore ul { grid-template-columns: repeat(2, minmax(0, 16rem)); }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__explore ul { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   INNER PAGES
   ========================================================================= */
.phero { position: relative; padding-top: calc(var(--header-h) + 34px + clamp(2.5rem, 5vw, 4.5rem)); padding-bottom: clamp(2rem, 4vw, 3.5rem); overflow: hidden; }
.phero__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: end; }
.phero__title { font-size: var(--fs-h1); }
.phero__crumbs { display: flex; gap: .6rem; align-items: center; margin-bottom: 1.8rem; font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.phero__crumbs a:hover { color: var(--sage); }
.phero__aside { display: grid; gap: 1.6rem; padding-bottom: .6rem; }
.phero__media { margin-top: clamp(2rem, 4vw, 3rem); }
.phero__media .media { aspect-ratio: 21 / 9; max-height: 460px; width: 100%; border-radius: var(--r-lg); }
@media (max-width: 900px) { .phero__grid { grid-template-columns: 1fr; } .phero__media .media { aspect-ratio: 4 / 3; } }

/* facts row */
.facts { display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--line); }
.fact { padding: 1.5rem 1.2rem; display: grid; gap: .35rem; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.55rem); letter-spacing: -.03em; line-height: 1; }
.fact span { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } .fact { border-bottom: 1px solid var(--line); } .fact:nth-child(2n) { border-right: 0; } }

/* lineup (feature rows) */
.lineup { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.feature:nth-child(even) .feature__media { order: 2; }
.feature__media .media { aspect-ratio: 4 / 3.6; border-radius: var(--r-lg); }
.feature__day { font-family: var(--f-hand); font-size: clamp(1.4rem, 1.8vw, 1.7rem); color: var(--sage); line-height: 1; }
.feature__title { font-family: var(--f-display); font-size: clamp(1.8rem, 2.8vw, 2.7rem); line-height: .95; letter-spacing: -.035em; }
.feature__list { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.feature__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.feature__list li span:last-child { font-family: var(--f-mono); font-size: .82rem; color: var(--muted); text-align: right; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature:nth-child(even) .feature__media { order: 0; } }

/* menu explorer */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filter { padding: .7rem 1.15rem; border-radius: 999px; border: 1px solid var(--line); font-weight: 500; font-size: .92rem; transition: background .35s, color .35s, border-color .35s; display: inline-flex; gap: .5rem; align-items: center; }
.filter sup { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); opacity: .6; }
.filter:hover { border-color: currentColor; }
.filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.s-dark .filter.is-active { background: var(--marigold); color: var(--ink); border-color: var(--marigold); }
.menus { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--gap); }
.menu-card {
  color: var(--ink); --muted: #5e6a60; --line: rgba(30,43,34, .14);
  position: relative; background: var(--bone); border-radius: var(--r); padding: 1.6rem 1.25rem 1.3rem; display: grid; gap: .9rem; align-content: start; text-align: center;
  border: 1px solid var(--line); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.menu-card::before { content: ""; position: absolute; inset: .5rem; border: 1px solid var(--line); border-radius: calc(var(--r) - .4rem); pointer-events: none; }
.menu-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 60px -30px rgba(30,43,34,.35); }
.menu-card__region { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.menu-card__name { font-family: var(--f-display); font-size: 1.6rem; line-height: 1; letter-spacing: -.025em; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.menu-card__rule { width: 3rem; height: 1px; background: var(--marigold); margin-inline: auto; }
.menu-card__dishes { list-style: none; padding: 0; display: grid; gap: .4rem; font-size: .88rem; line-height: 1.35; }
.menu-card__dishes li:last-child { color: var(--sage); font-style: italic; }
.menu-card__cta { margin-top: .4rem; justify-self: center; font-weight: 600; font-size: .9rem; display: inline-flex; gap: .45rem; align-items: center; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line); transition: background .3s, color .3s; }
.menu-card__cta:hover { background: var(--ink); color: var(--paper); }
.menu-card__cta svg { width: .95rem; }
.hover-preview { position: fixed; left: 0; top: 0; width: 180px; aspect-ratio: 4 / 5; border-radius: 999px 999px 1rem 1rem; overflow: hidden; pointer-events: none; z-index: 300; opacity: 0; transform: scale(.6); }
.hover-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .hover-preview { display: none; } }

/* stacking cards */
.stack-cards { display: grid; gap: 1.5rem; }
.stack-card {
  position: sticky; top: calc(var(--header-h) + 1.5rem + var(--i, 0) * 1.1rem);
  display: grid; grid-template-columns: 1.1fr 1fr; min-height: min(60vh, 500px); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bone); border: 1px solid var(--line); transform-origin: 50% 0;
}
.stack-card:nth-child(2) { background: var(--sage); color: var(--paper); --muted: var(--paper); --line: rgba(251,247,240,.2); }
.stack-card:nth-child(3) { background: var(--forest); color: var(--paper); --muted: var(--muted-dark); --line: var(--line-dark); }
.stack-card:nth-child(4) { background: var(--oat); }
.stack-card:nth-child(5) { background: var(--marigold); color: var(--ink); --muted: rgba(30,43,34,.9); }
.stack-card__body { padding: clamp(1.4rem, 3vw, 2.5rem); display: grid; align-content: space-between; gap: 2rem; }
.stack-card__n { font-family: var(--f-display); font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: .8; letter-spacing: -.05em; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; opacity: .9; }
.stack-card__title { font-family: var(--f-display); font-size: clamp(1.55rem, 2.3vw, 2.2rem); line-height: 1; letter-spacing: -.03em; }
.stack-card__text { color: var(--muted); max-width: 42ch; margin-top: .8rem; font-size: .98rem; }
.stack-card .media { border-radius: 0; height: 100%; }
@media (max-width: 900px) { .stack-card { grid-template-columns: 1fr; min-height: 0; } .stack-card .media { aspect-ratio: 16 / 10; order: -1; } }

/* FAQ / accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; text-align: left; padding: 1.15rem 0; font-family: var(--f-display); font-size: clamp(1.08rem, 1.35vw, 1.28rem); letter-spacing: -.02em; line-height: 1.2; transition: color .3s; }
.acc__q:hover { color: var(--sage); }
.s-dark .acc__q:hover { color: var(--marigold); }
.acc__icon { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); position: relative; flex: none; transition: background .4s, transform .6s var(--ease); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .5s var(--ease); }
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__item.is-open .acc__icon { background: var(--marigold); border-color: var(--marigold); color: var(--ink); transform: rotate(180deg); }
.acc__item.is-open .acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__a { height: 0; overflow: hidden; }
html:not(.js) .acc__a { height: auto; }
.acc__a-inner { padding: 0 3.5rem 1.8rem 0; color: var(--muted); max-width: 70ch; display: grid; gap: .8rem; }
.acc__a-inner a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--marigold); text-underline-offset: 3px; }
.s-dark .acc__a-inner a { color: var(--paper); }
.faq-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.faq-nav { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: .3rem; }
.faq-nav a { padding: .55rem 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; font-weight: 500; transition: color .3s, padding .4s var(--ease); }
.faq-nav a:hover, .faq-nav a.is-active { color: var(--sage); padding-left: .4rem; }
.faq-search { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: 999px; padding: .2rem 1.1rem; margin-bottom: 1.5rem; background: var(--bone); }
.faq-search svg { width: 1.1rem; opacity: .6; }
.faq-search input { border: 0; background: transparent; padding: .8rem 0; flex: 1; outline: none; }
.faq-group + .faq-group { margin-top: clamp(3rem, 6vw, 5rem); }
.faq-group__title { font-family: var(--f-display); font-size: clamp(1.55rem, 2.3vw, 2.1rem); letter-spacing: -.03em; line-height: 1; margin-bottom: 1.5rem; scroll-margin-top: calc(var(--header-h) + 2rem); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .faq-nav { position: static; grid-template-columns: 1fr 1fr; column-gap: 1rem; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .45rem; }
.field label, .field .label { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem; border-radius: .9rem; border: 1px solid var(--line); background: var(--paper);
  outline: none; transition: border-color .3s, box-shadow .3s, background .3s; font-size: 1rem;
}
.s-dark .field input, .s-dark .field select, .s-dark .field textarea { background: var(--forest); border-color: var(--line-dark); color: var(--paper); }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--marigold); box-shadow: 0 0 0 4px rgba(226,162,59,.18); background: var(--bone); }
.s-dark .field input:focus, .s-dark .field textarea:focus, .s-dark .field select:focus { background: var(--oat); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2b22' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.6rem; }
.field__hint { font-size: .8rem; color: var(--muted); }
.stepper { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; border: 1px solid var(--line); border-radius: .9rem; overflow: hidden; background: var(--paper); }
.stepper button { height: 3.2rem; font-size: 1.3rem; transition: background .3s; }
.stepper button:hover { background: var(--marigold); }
.stepper input { border: 0 !important; text-align: center; background: transparent !important; box-shadow: none !important; padding: 0; font-family: var(--f-display); font-size: 1.4rem; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg label { cursor: pointer; position: relative; }
.seg input, .field .seg input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.seg input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--marigold); outline-offset: 2px; }
.form__fine { font-size: .8rem; color: var(--muted); }
.form__success { display: none; padding: 1.4rem; border-radius: var(--r); background: var(--sage); color: var(--paper); gap: .4rem; }
.form.is-sent .form__success { display: grid; }
.form.is-sent .form__fields { display: none; }
.form__fields { display: grid; gap: 1rem; }
.form__error { color: var(--tomato); font-size: .9rem; display: none; }
.form.is-error .form__error { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* item summary in drawer */
.summary-ticket { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--r); background: var(--paper); border: 1px dashed var(--line); }
.summary-ticket__icon { width: 3rem; height: 3rem; border-radius: 50%; background: var(--marigold); display: grid; place-items: center; }
.summary-ticket__icon svg { width: 1.3rem; }
.summary-ticket__title { font-family: var(--f-display); font-size: 1.12rem; line-height: 1.1; letter-spacing: -.02em; }
.summary-ticket__meta { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Schedule / calendar ---------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; }
.week__day { border-radius: var(--r); padding: 1rem .9rem; background: var(--bone); border: 1px solid var(--line); display: grid; gap: .6rem; align-content: start; min-height: 10.5rem; position: relative; overflow: hidden; }
.week__day::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent, var(--oat)); }
.week__dow { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.week__title { font-family: var(--f-display); font-size: 1.12rem; line-height: 1.05; letter-spacing: -.02em; }
.week__meta { font-size: .85rem; color: var(--muted); line-height: 1.4; }
.week__price { font-family: var(--f-mono); font-size: .82rem; margin-top: auto; }
.week__day.is-today { outline: 2px solid var(--marigold); outline-offset: -2px; }
@media (max-width: 1000px) { .week { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .week { grid-template-columns: 1fr 1fr; } .week__day { min-height: 0; } }

.cal { border-radius: var(--r-lg); background: var(--bone); border: 1px solid var(--line); overflow: hidden; }
.cal__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cal__month { font-family: var(--f-display); font-size: clamp(1.55rem, 2.3vw, 2.1rem); letter-spacing: -.03em; line-height: 1; }
.cal__month em { font-style: italic; }
.cal__nav { display: flex; gap: .5rem; }
.cal__btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .3s, color .3s; }
.cal__btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.cal__btn:disabled { opacity: .3; cursor: not-allowed; }
.cal__btn svg { width: 1rem; }
.cal__legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.cal__legend button { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); font-size: .82rem; font-weight: 500; transition: opacity .3s, background .3s; }
.cal__legend button[aria-pressed="false"] { opacity: .4; }
.cal__legend .dot { width: .7em; height: .7em; }
.cal__dows, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__dows div { padding: .8rem; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.cal__cell { min-height: 6.8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .6rem; display: grid; align-content: start; gap: .35rem; position: relative; }
.cal__cell:nth-child(7n) { border-right: 0; }
.cal__cell.is-out { background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(30,43,34,.03) 8px 9px); }
.cal__cell.is-past { opacity: .42; }
.cal__date { font-family: var(--f-display); font-size: 1.15rem; line-height: 1; display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; }
.cal__cell.is-today .cal__date { background: var(--marigold); color: var(--ink); }
.cal__event { display: grid; gap: .1rem; text-align: left; padding: .45rem .55rem; border-radius: .6rem; background: var(--ev, var(--oat)); font-size: .78rem; line-height: 1.25; transition: transform .3s var(--ease), box-shadow .3s; width: 100%; }
.cal__event:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(30,43,34,.5); }
.cal__event b { font-weight: 600; }
.cal__event span { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); opacity: .75; }
.ev-class { --ev: color-mix(in srgb, var(--marigold) 26%, var(--bone)); } .ev-dinner { --ev: color-mix(in srgb, var(--tomato) 22%, var(--bone)); } .ev-camp { --ev: color-mix(in srgb, var(--sage) 22%, var(--bone)); } .ev-pickup { --ev: color-mix(in srgb, var(--forest) 18%, var(--bone)); } .ev-open { --ev: transparent; border: 1px dashed var(--line); } .ev-private, .ev-holiday { --ev: color-mix(in srgb, var(--stone) 22%, var(--bone)); }
.dot-class { color: var(--marigold); } .dot-dinner { color: var(--tomato); } .dot-camp { color: var(--sage); } .dot-pickup { color: var(--forest); } .dot-open { color: var(--sand); } .dot-private, .dot-holiday { color: var(--stone); }
.cal__foot { padding: 1rem 1.6rem; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); display: flex; gap: .6rem; align-items: center; }
.agenda { display: none; }
@media (max-width: 860px) {
  .cal__dows, .cal__grid { display: none; }
  .agenda { display: grid; }
  .agenda__day { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
  .agenda__date { display: grid; justify-items: center; align-content: start; }
  .agenda__date b { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; line-height: 1; }
  .agenda__date span { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .agenda__events { display: grid; gap: .4rem; }
  .agenda__day.is-today .agenda__date b { color: var(--sage); }
}
.upcoming-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--gap); }

/* ---------- Dinners (dark) ---------- */
.flash { position: relative; min-height: 100svh; overflow: hidden; background: var(--forest); color: var(--paper); display: grid; align-items: end; padding: calc(var(--header-h) + 38px + 3rem) 0 clamp(2.5rem, 6vw, 5rem); --line: var(--line-dark); --muted: var(--muted-dark); }
.flash__base, .flash__lit { position: absolute; inset: 0; }
.flash__base img, .flash__lit img { width: 100%; height: 100%; object-fit: cover; }
.flash__base { filter: brightness(.18) saturate(.6) blur(1px); }
.flash__lit { --x: 70%; --y: 40%; --r: 22vmax;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0,0,0,.85) 35%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0,0,0,.85) 35%, transparent 100%);
  filter: saturate(1.15) contrast(1.05);
}
.flash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,43,34,.6), transparent 30%, transparent 55%, rgba(30,43,34,.92)); pointer-events: none; }
.flash .wrap { position: relative; z-index: 2; }
.flash__title { font-size: clamp(2.7rem, 6.2vw, 6.2rem); line-height: .9; }
.flash__hint { position: absolute; z-index: 3; right: var(--gutter); top: calc(var(--header-h) + 38px + 2rem); font-family: var(--f-hand); color: var(--honey); font-size: 1.5rem; transform: rotate(4deg); }

.printed { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.printed__card { background: var(--bone); color: var(--ink); padding: clamp(1.6rem, 2.4vw, 2.2rem) clamp(1.3rem, 2vw, 1.8rem); text-align: center; display: grid; gap: 1.2rem; align-content: start; position: relative; border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.printed__card:nth-child(1) { transform: rotate(-1.5deg); } .printed__card:nth-child(2) { transform: translateY(1.5rem) rotate(.8deg); } .printed__card:nth-child(3) { transform: rotate(-.5deg); }
.printed__card::before { content: ""; position: absolute; inset: .7rem; border: 1px solid rgba(30,43,34,.25); pointer-events: none; }
.printed__kicker { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.printed__title { font-family: var(--f-display); font-size: clamp(1.45rem, 1.9vw, 1.8rem); line-height: 1; letter-spacing: -.02em; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.printed__course { display: grid; gap: .2rem; }
.printed__course small { font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); letter-spacing: .24em; text-transform: uppercase; color: var(--sage); }
.printed__course span { font-family: var(--f-display); font-size: 1rem; letter-spacing: -.01em; }
.printed__orn { width: 46px; margin-inline: auto; color: var(--marigold); }
.printed__price { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 900px) { .printed { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .printed__card:nth-child(2) { transform: rotate(.8deg); } }
.series { display: grid; border-top: 1px solid var(--line); }
.series__row { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1.4rem 0; border-bottom: 1px solid var(--line); position: relative; transition: padding .5s var(--ease); }
.series__row:hover { padding-left: 1rem; }
.series__date { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold); }
.series__title { font-family: var(--f-display); font-size: clamp(1.12rem, 1.5vw, 1.4rem); letter-spacing: -.02em; line-height: 1.1; }
.series__meta { font-size: .9rem; color: var(--muted); margin-top: .3rem; }
@media (max-width: 760px) { .series__row { grid-template-columns: 1fr; gap: .4rem; } }
.specials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.special { border-radius: var(--r-lg); overflow: hidden; background: var(--forest); display: grid; grid-template-rows: auto 1fr; }
.special .media { aspect-ratio: 4 / 3; border-radius: 0; }
.special__body { padding: 1.3rem; display: grid; gap: .8rem; align-content: start; }
.special__title { font-family: var(--f-display); font-size: 1.45rem; line-height: 1; letter-spacing: -.025em; }
.special__price { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold); }
@media (max-width: 1000px) { .specials { grid-template-columns: 1fr; } .special { grid-template-columns: 1fr 1.2fr; grid-template-rows: auto; } .special .media { aspect-ratio: auto; height: 100%; } }
@media (max-width: 640px) { .special { grid-template-columns: 1fr; } .special .media { aspect-ratio: 4 / 3; } }

/* ---------- Private events ---------- */
.occasions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.occasion { position: relative; padding: 1.35rem; border-radius: var(--r); border: 1px solid var(--line); display: grid; gap: 1.8rem; align-content: space-between; min-height: 12rem; overflow: hidden; isolation: isolate; transition: color .5s; }
.occasion::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .7s var(--ease); }
.occasion:hover { color: var(--paper); }
.occasion:hover::before { transform: none; }
.occasion svg { width: 2rem; height: 2rem; color: var(--sage); transition: color .5s, transform .7s var(--ease); }
.occasion:hover svg { color: var(--marigold); transform: rotate(-8deg) scale(1.1); }
.occasion h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.28rem; line-height: 1.05; letter-spacing: -.02em; }
.occasion p { font-size: .92rem; color: var(--muted); margin-top: .5rem; transition: color .5s; }
.occasion:hover p { color: var(--muted-dark); }
@media (max-width: 1000px) { .occasions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .occasions { grid-template-columns: 1fr; } }
.formats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.format { border-radius: var(--r-lg); overflow: hidden; position: relative; min-height: 26rem; display: grid; align-content: end; padding: clamp(1.3rem, 2.4vw, 2.2rem); color: var(--paper); isolation: isolate; }
.format > .media { position: absolute; inset: 0; border-radius: 0; z-index: -2; }
.format::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgba(30,43,34,.9)); }
.format__title { font-family: var(--f-display); font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: .95; letter-spacing: -.03em; }
.format ul { margin-top: 1rem; padding: 0; list-style: none; display: grid; gap: .35rem; color: rgba(251,247,240,.85); }
.format li::before { content: "✦"; color: var(--marigold); margin-right: .6rem; font-size: .8em; }
@media (max-width: 900px) { .formats { grid-template-columns: 1fr; } .format { min-height: 28rem; } }

.builder { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.builder__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.builder__course { margin-top: 1.6rem; }
.builder__course h3 { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-ink); margin-bottom: .6rem; }
.dishes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.dish { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: .8rem; border: 1px solid var(--line); text-align: left; font-size: .86rem; line-height: 1.3; transition: background .3s, border-color .3s, color .3s, transform .4s var(--ease); }
.dish:hover { border-color: currentColor; }
.dish i { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; flex: none; font-style: normal; font-size: 1rem; line-height: 1; transition: transform .5s var(--ease), background .3s; }
.dish[aria-pressed="true"] { background: var(--marigold); color: var(--ink); border-color: var(--marigold); }
.dish[aria-pressed="true"] i { transform: rotate(45deg); background: var(--ink); color: var(--marigold); border-color: var(--ink); }
@media (max-width: 640px) { .dishes { grid-template-columns: 1fr; } }
/* phones: each course is a row that folds open (built in pages.private in main.js) */
@media (max-width: 760px) {
  .builder__course { margin-top: 0; border-bottom: 1px solid var(--line); }
  .builder__course:first-child { margin-top: 1.25rem; border-top: 1px solid var(--line); }
  .builder__course h3 { margin: 0; }
  .builder__course.is-open .dishes { padding-bottom: 1rem; }
  .builder__course:not(.is-open) .dishes { display: none; }
  .builder__fold { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); text-align: left; }
  .builder__fold small { margin-left: auto; font-size: max(.64rem, var(--min-text)); letter-spacing: .1em; color: var(--muted); }
  .builder__fold::after { content: "+"; display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); font-family: var(--f-sans); font-size: 1.1rem; letter-spacing: 0; transition: transform .4s var(--ease); }
  .builder__course.is-open .builder__fold::after { transform: rotate(45deg); }
}
.yourmenu { position: sticky; top: calc(var(--header-h) + 1.5rem); background: var(--bone); color: var(--ink); border-radius: 6px; padding: clamp(1.3rem, 2.4vw, 1.9rem); text-align: center; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); --line: rgba(30,43,34,.14); --muted: #5e6a60; }
.yourmenu::before { content: ""; position: absolute; inset: .7rem; border: 1px solid rgba(30,43,34,.22); pointer-events: none; }
.yourmenu__title { font-family: var(--f-display); font-size: 1.75rem; line-height: 1; letter-spacing: -.02em; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.yourmenu__list { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .5rem; min-height: 6rem; }
.yourmenu__list li { font-family: var(--f-display); font-size: 1.1rem; display: flex; justify-content: center; gap: .6rem; align-items: baseline; }
.yourmenu__list li small { font-family: var(--f-mono); font-size: max(.6rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; color: var(--sage); }
.yourmenu__list li button { opacity: .4; font-size: .9rem; }
.yourmenu__list li button:hover { opacity: 1; color: var(--tomato); }
.yourmenu__empty { color: var(--muted); font-size: .92rem; font-style: italic; }
.yourmenu .form { text-align: left; margin-top: 1rem; }
.yourmenu .field input, .yourmenu .field select, .yourmenu .field textarea { background: var(--paper); border-color: var(--line); color: var(--ink); }
.range { width: 100%; accent-color: var(--marigold); }
.range-out { font-family: var(--f-display); font-size: 1.6rem; }
@media (max-width: 1000px) { .builder { grid-template-columns: 1fr; } .yourmenu { position: relative; top: 0; } }

/* ---------- Chef ---------- */
.chef-hero { position: relative; min-height: 100svh; background: var(--forest); color: var(--paper); overflow: hidden; display: grid; align-items: end; padding: calc(var(--header-h) + 38px + 2rem) 0 clamp(2rem, 5vw, 4rem); --line: var(--line-dark); --muted: var(--muted-dark); }
.chef-hero__name { font-size: clamp(3.2rem, 9vw, 9.5rem); line-height: .8; letter-spacing: -.055em; position: relative; z-index: 2; }
.chef-hero__name .row { display: block; }
.chef-hero__name .row:last-child { text-align: right; }
.chef-hero__img { position: absolute; z-index: 1; left: 50%; top: 52%; width: clamp(200px, 21vw, 310px); aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border-radius: 999px 999px var(--r) var(--r); overflow: hidden; }
.chef-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.chef-hero__meta { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line-dark); }
.chef-hero__meta p { max-width: 36ch; color: var(--muted-dark); }
@media (max-width: 760px) { .chef-hero__img { position: relative; left: auto; top: auto; transform: none; margin: 0 auto 2rem; width: 70%; } .chef-hero { align-items: start; } .chef-hero__name .row:last-child { text-align: left; } .chef-hero__meta { flex-direction: column; } }

.hscroll { position: relative; overflow: hidden; }
.hscroll__track { display: flex; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--gutter); width: max-content; align-items: stretch; }
.chapter { width: clamp(270px, 27vw, 390px); flex: none; display: grid; grid-template-rows: auto auto 1fr; gap: 1.2rem; }
.chapter__when { font-family: var(--f-display); font-size: clamp(2.5rem, 4.2vw, 4.2rem); line-height: .85; letter-spacing: -.05em; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--marigold); }
.chapter__title { font-family: var(--f-display); font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.05; letter-spacing: -.025em; }
.chapter__text { color: var(--muted); }
.chapter .media { aspect-ratio: 4 / 3; margin-top: .5rem; }
.chapter--intro { width: clamp(270px, 30vw, 430px); align-content: center; display: grid; }
.hscroll__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2rem; height: 2px; background: var(--line); }
.hscroll__progress i { position: absolute; inset: 0; background: var(--marigold); transform-origin: left; transform: scaleX(0); }
@media (max-width: 900px) {
  .hscroll__track { flex-direction: column; width: auto; }
  .chapter, .chapter--intro { width: 100%; }
  .hscroll__progress { display: none; }
}

.namewall { display: grid; gap: 0; border-top: 1px solid var(--line); }
.namewall__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.namewall__name { font-family: var(--f-display); font-size: clamp(1.6rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -.04em; transition: transform .7s var(--ease), color .4s; position: relative; z-index: 1; }
.namewall__role { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); position: relative; z-index: 1; text-align: right; }
.namewall__row::before { content: ""; position: absolute; inset: 0; background: var(--marigold); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.namewall__row:hover::before { transform: scaleY(1); }
.namewall__row:hover .namewall__name { transform: translateX(1.2rem); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink); }
.namewall__row:hover .namewall__role { color: var(--ink); }

.flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); perspective: 1400px; }
.flip { position: relative; min-height: 16rem; }
.flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.flip:hover .flip__inner, .flip:focus-within .flip__inner, .flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-lg); padding: 1.6rem; display: grid; align-content: space-between; }
.flip__front { background: var(--forest); color: var(--paper); }
.flip__back { background: var(--marigold); color: var(--ink); transform: rotateY(180deg); }
.flip__q { font-family: var(--f-display); font-size: clamp(1.3rem, 1.8vw, 1.65rem); line-height: 1.02; letter-spacing: -.025em; }
.flip__a { font-family: var(--f-display); font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.2; letter-spacing: -.015em; }
.flip__hint { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; opacity: .6; display: flex; gap: .5rem; align-items: center; }
@media (max-width: 900px) { .flips { grid-template-columns: 1fr; } .flip { min-height: 16rem; } }

.bloom { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; }
.bloom__a { grid-column: 1 / 6; }
.bloom__b { grid-column: 7 / 13; }
@media (max-width: 900px) { .bloom__a, .bloom__b { grid-column: 1 / -1; } }
.quote-xl { font-family: var(--f-display); font-size: clamp(1.55rem, 2.7vw, 2.6rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.quote-xl cite { display: block; margin-top: 1.5rem; font-family: var(--f-mono); font-style: normal; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.press-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--gap); }
.press-card { display: grid; gap: 1rem; align-content: space-between; padding: 1.4rem; border-radius: var(--r); border: 1px solid var(--line); min-height: 12.5rem; transition: background .4s, color .4s, transform .6s var(--ease-out); }
.press-card:hover { background: var(--ink); color: var(--paper); transform: translateY(-6px); --muted: var(--muted-dark); }
.press-card__outlet { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.press-card:hover .press-card__outlet { color: var(--marigold); }
.press-card__title { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.08; letter-spacing: -.02em; }
.press-card__date { font-size: .85rem; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.press-card__date svg { width: 1.1rem; transition: transform .5s var(--ease); }
.press-card:hover .press-card__date svg { transform: rotate(-45deg); }

/* ---------- Teen camp ---------- */
.camp-hero { background: var(--forest); color: var(--paper); --line: var(--line-dark); --muted: var(--muted-dark); }
.days { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.day { border-radius: var(--r-lg); overflow: hidden; background: var(--bone); display: grid; grid-template-rows: auto 1fr; }
.day .media { aspect-ratio: 16 / 10; border-radius: 0; }
.day__body { padding: clamp(1.3rem, 2.2vw, 2rem); display: grid; gap: 1rem; align-content: start; }
.day__flag { display: inline-flex; gap: 3px; height: .75rem; }
.day__flag i { width: .9rem; display: block; }
.day__title { font-family: var(--f-display); font-size: clamp(1.55rem, 2.2vw, 2.1rem); line-height: .98; letter-spacing: -.03em; }
.day ul { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.day li { padding: .75rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .8rem; }
.day li::before { content: "✦"; color: var(--marigold); }
@media (max-width: 900px) { .days { grid-template-columns: 1fr; } }
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); max-width: 820px; margin-inline: auto; }
.price-card { border-radius: var(--r-lg); padding: clamp(1.5rem, 2.6vw, 2.2rem); border: 1px solid var(--line); display: grid; gap: 1.2rem; align-content: start; position: relative; background: var(--bone); }
.price-card--best { background: var(--forest); color: var(--paper); border-color: var(--forest); --muted: var(--muted-dark); --line: var(--line-dark); }
.price-card__flag { position: absolute; top: 1.4rem; right: 1.4rem; }
.price-card__amount { font-family: var(--f-display); font-size: clamp(2.7rem, 4.2vw, 3.9rem); line-height: .85; letter-spacing: -.05em; }
.price-card__amount sup { font-size: .4em; vertical-align: top; position: relative; top: .3em; }
.price-card ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.price-card li { display: flex; gap: .6rem; }
.price-card li::before { content: "✓"; color: var(--marigold); font-weight: 700; }
@media (max-width: 760px) { .pricing { grid-template-columns: 1fr; } }

/* ---------- Gift ---------- */
.gift-stage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.giftcard-wrap { perspective: 1200px; display: grid; place-items: center; padding: 2rem 0; }
.giftcard {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; width: min(100%, 440px); aspect-ratio: 1.6; border-radius: 1.4rem; padding: clamp(1.2rem, 3vw, 2rem);
  /* brand sage, lit softly from the top-left corner */
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sage) 90%, var(--paper)) 0%, var(--sage) 55%, color-mix(in srgb, var(--sage) 88%, var(--ink)) 100%);
  color: var(--paper); transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  box-shadow: 0 50px 90px -40px rgba(30,43,34,.6), inset 0 0 0 1px rgba(251,247,240,.18);
  display: grid; grid-template-rows: auto 1fr auto; transition: transform .2s ease-out; overflow: hidden;
}
.giftcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(226,162,59,.3), transparent 45%),
              linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%);
  mix-blend-mode: screen; }
.giftcard__top { display: flex; justify-content: space-between; align-items: start; transform: translateZ(30px); }
.giftcard__top svg { width: 48px; flex: none; } .giftcard__top svg path { fill: var(--honey); }
.giftcard__label { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; opacity: .9; text-align: right; }
.giftcard__amount { align-self: center; font-family: var(--f-display); font-size: clamp(2.7rem, 5.2vw, 4.3rem); line-height: .9; letter-spacing: -.05em; transform: translateZ(50px); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--honey); }
.giftcard__bottom { display: flex; justify-content: space-between; align-items: end; gap: 1rem; transform: translateZ(30px); font-size: .9rem; }
.giftcard__bottom small { display: block; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.giftcard__bottom b { font-family: var(--f-display); font-weight: 400; font-size: 1.2rem; }
.giftcard__flower { position: absolute; right: -2.5rem; bottom: -2.5rem; width: 12rem; opacity: .14; transform: translateZ(10px); }
.amounts { display: flex; flex-wrap: wrap; gap: .5rem; }
.amount { display: grid; gap: .1rem; text-align: left; padding: .9rem 1.1rem; border-radius: 1rem; border: 1px solid var(--line); min-width: 9rem; transition: background .3s, color .3s, border-color .3s; }
.amount b { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.amount span { font-size: .78rem; color: var(--muted); }
.amount[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.amount[aria-pressed="true"] span { color: var(--muted-dark); }
@media (max-width: 900px) { .gift-stage { grid-template-columns: 1fr; } }
.ideas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.idea { display: grid; gap: .8rem; align-content: start; }
.idea .media { aspect-ratio: 4 / 5; }
.idea h3 { font-family: var(--f-display); font-size: 1.28rem; line-height: 1.05; font-weight: 400; letter-spacing: -.02em; }
.idea p { color: var(--muted); font-size: .95rem; }
@media (max-width: 1000px) { .ideas { grid-template-columns: 1fr 1fr; } }

/* ---------- Gallery ---------- */
.masonry { columns: 4 280px; column-gap: var(--gap); }
.masonry__item { break-inside: avoid; margin-bottom: var(--gap); display: block; width: 100%; position: relative; border-radius: var(--r); overflow: hidden; background: var(--oat); }
.masonry__item img { width: 100%; transition: transform 1.2s var(--ease-out), filter .6s; }
.masonry__item:hover img { transform: scale(1.06); }
.masonry__item figcaption { position: absolute; left: .8rem; bottom: .8rem; right: .8rem; padding: .45rem .75rem; border-radius: 999px; background: rgba(30,43,34,.72); color: var(--paper); font-size: .78rem; backdrop-filter: blur(6px); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); width: fit-content; }
.masonry__item:hover figcaption, .masonry__item:focus-visible figcaption { opacity: 1; transform: none; }
.lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(30,43,34,.94); display: none; grid-template-rows: auto 1fr auto; color: var(--paper); }
.lightbox.is-open { display: grid; }
.lightbox__top, .lightbox__bottom { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); gap: 1rem; }
.lightbox__stage { position: relative; display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .8rem; }
.lightbox__btn { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; transition: background .3s, color .3s; }
.lightbox__btn:hover { background: var(--paper); color: var(--ink); }
.lightbox__btn svg { width: 1.1rem; }

/* ---------- Contact ---------- */
.big-contact { display: grid; border-top: 1px solid var(--line); }
.big-contact a { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 1.5rem; padding: clamp(1.2rem, 2.4vw, 2rem) 0; border-bottom: 1px solid var(--line); position: relative; isolation: isolate; overflow: hidden; }
.big-contact a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--marigold); transform: translateY(101%); transition: transform .7s var(--ease); }
.big-contact a:hover::before { transform: none; }
.big-contact a:hover { color: var(--ink); }
.big-contact__label { font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; padding-left: .3rem; }
.big-contact__value { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.9rem); line-height: 1; letter-spacing: -.04em; transition: transform .7s var(--ease); }
.big-contact a:hover .big-contact__value { transform: translateX(1rem); }
.big-contact__go { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; margin-right: .3rem; transition: transform .7s var(--ease); }
.big-contact a:hover .big-contact__go { transform: rotate(-45deg); }
.big-contact__go svg { width: 1.2rem; }
.big-contact a > * { min-width: 0; }
.big-contact__value { overflow-wrap: anywhere; }
@media (max-width: 760px) { .big-contact a { grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1rem; } .big-contact__label { grid-column: 1 / -1; } .big-contact__value { font-size: 1.65rem; } .big-contact__go { width: 3rem; height: 3rem; } }
.map { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--oat); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) sepia(.15); }
.map__poster { position: absolute; inset: 0; }
.map__poster img { width: 100%; height: 100%; object-fit: cover; }
.map__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }

/* 404 */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; background: var(--forest); color: var(--paper); padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem; }
.lost__code { font-family: var(--f-display); font-size: clamp(6rem, 16vw, 13rem); line-height: .8; letter-spacing: -.06em; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--marigold); }

/* ---------- Motion helpers (initial states only when JS + motion allowed) ---------- */
html.js:not(.reduce-motion) [data-reveal] { opacity: 0; transform: translateY(40px); }
html.js:not(.reduce-motion) [data-reveal-img] { clip-path: inset(100% 0 0 0); }
html.js:not(.reduce-motion) [data-stagger] > * { opacity: 0; transform: translateY(40px); }
html.js:not(.reduce-motion) [data-intro] [data-hero-in] { opacity: 0; }
html.js:not(.reduce-motion) [data-intro] [data-intro-img] { clip-path: inset(100% 0 0 0); }

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html.reduce-motion .grain { display: none; }
.motion-toggle { font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--marigold); text-underline-offset: 3px; }
.motion-toggle:hover { color: var(--marigold); }
.footer .motion-toggle { text-decoration-color: var(--honey); }
.footer .motion-toggle:hover { color: var(--honey); }
.badge::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 20px 40px -15px rgba(0,0,0,.45); }
@media print {
  .header, .mbar, .drawer, .cursor, .grain, .curtain, .preloader, .menu { display: none !important; }
  body { background: #fff; }
}

/* ---------- Specials line (under the home hero) ---------- */
.specials-line { position: relative; z-index: 2; background: var(--sage); color: var(--paper); border-block: 1px solid rgba(30,43,34,.18); box-shadow: inset 0 4px 0 -3px rgba(251,247,240,.35), inset 0 -4px 0 -3px rgba(251,247,240,.35); padding-block: .85rem; }
.specials-line .marquee { overflow: hidden; }
.specials-line__item { display: inline-flex; align-items: center; gap: 1.1rem; padding-right: 1.1rem; white-space: nowrap; font-size: .9rem; line-height: 1.4; }
.specials-line__label { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .2em; text-transform: uppercase; color: var(--honey); }
.specials-line .sep { color: var(--honey); font-weight: 700; opacity: .8; }
.specials-line .tk { display: inline-flex; align-items: baseline; gap: .6em; font-family: var(--f-display); font-size: 1rem; letter-spacing: -.01em; color: var(--paper); text-transform: none; padding: .1rem 0; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.specials-line .tk b { font-family: var(--f-mono); font-weight: 500; font-size: max(.68rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--honey); }
.specials-line .tk i { font-family: var(--f-mono); font-style: normal; font-size: max(.68rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: rgba(251,247,240,.72); }
.specials-line button.tk:hover { border-color: currentColor; color: var(--honey); }
html { overflow-x: clip; }

/* =========================================================================
   LIGHT & AIRY THEME
   Cream + soft sage-cream backgrounds, deep green-black type,
   sage and gold accents. Every green band, the footer included, is
   the brand sage; the candle-lit photo hero on the dinners page is the
   one dark area.
   ========================================================================= */

/* former dark sections are now soft sage-cream */
.s-dark, .s-ink2 { background: var(--mist); color: var(--ink); --line: rgba(30,43,34,.14); --muted: #5e6a60; }
.s-ink2 { background: var(--mist); }
.s-dark em, .s-dark .it, .s-ink2 em, .s-ink2 .it, .hero em, .chef-hero em, .camp-hero em, .lost em, .menu em { --accent-text: var(--sage); }
[data-theme="dark"] em, [data-theme="dark"] .it { --accent-text: var(--marigold); }
.footer em { --accent-text: var(--honey); }
.s-dark .card, .s-ink2 .card { background: var(--bone); }
.s-dark .media, .s-ink2 .media { background: var(--oat); }
.s-dark .btn--light, .s-ink2 .btn--light { --bg: var(--ink); --fg: var(--paper); --hover-bg: var(--marigold); --hover-fg: var(--ink); }
.s-dark .btn--ghost, .s-ink2 .btn--ghost, .hero .btn--ghost, .chef-hero .btn--ghost, .camp-hero .btn--ghost, .lost .btn--ghost { --hover-bg: var(--ink); --hover-fg: var(--paper); }
.s-dark .quotes__btn:hover { background: var(--ink); color: var(--paper); }
.s-dark .acc__q:hover { color: var(--sage); }
.s-dark .acc__a-inner a { color: var(--ink); }
.s-dark .field input, .s-dark .field select, .s-dark .field textarea { background: var(--bone); border-color: var(--line); color: var(--ink); }
.s-dark .field input:focus, .s-dark .field textarea:focus, .s-dark .field select:focus { background: #fff; }
.s-dark .filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.special { background: var(--bone); }
.flip__front { background: var(--sage); color: var(--paper); }
.series__date, .special__price, .menu__foot .eyebrow { color: var(--sage); }
.chapter__when { color: var(--sage); }
.names span:nth-child(4n+3) { color: var(--sage-ink); }
.names .sep { color: var(--muted); }
.price-card--best { background: var(--sage); border-color: var(--sage); --muted: rgba(251,247,240,.85); }
.stack-card:nth-child(3) { background: var(--mist); color: var(--ink); --muted: #5e6a60; --line: rgba(30,43,34,.14); }
.printed__card { box-shadow: 0 30px 60px -32px rgba(30,43,34,.35); }
.yourmenu { box-shadow: 0 40px 80px -44px rgba(30,43,34,.4); }
.cta-band__title em { color: var(--sage); }

/* home hero */
.hero { background: var(--mist); color: var(--ink); --line: rgba(30,43,34,.14); --muted: #5e6a60; }
.hero__lede { color: var(--muted); }
.hero__foot { border-top-color: var(--line); color: var(--muted); }
.scroll-cue i { background: var(--line); }
.hero__note { color: var(--sage); }
.hero__glow { background: radial-gradient(closest-side, rgba(226,162,59,.2), rgba(226,162,59,0)); }
.hero__arch { background: var(--oat); box-shadow: 0 40px 80px -44px rgba(30,43,34,.4); }
.badge::before { background: var(--sage); }

/* chef, teen camp, 404 heroes */
.chef-hero { background: var(--mist); color: var(--ink); --line: rgba(30,43,34,.14); --muted: #5e6a60; }
.chef-hero__meta { border-top-color: var(--line); }
.chef-hero__meta p { color: var(--muted); }
.camp-hero { background: var(--mist); color: var(--ink); --line: rgba(30,43,34,.14); --muted: #5e6a60; }
.lost { background: var(--mist); color: var(--ink); }
.lost__code { color: var(--sage); }
/* every page opens on sage mist, same as the home page */
.phero { background: var(--mist); }

/* full-screen menu */
.menu { background: var(--mist); color: var(--ink); --line: rgba(30,43,34,.14); }
.menu__link:hover .menu__text, .menu__link[aria-current="page"] .menu__text { color: var(--sage); }
.menu__preview { background: var(--oat); }
.header.menu-open { color: var(--ink); }
.header.menu-open .burger__lines i { background: var(--paper); }

/* preloader + page curtain */
html.js.is-first .preloader { background: var(--mist); color: var(--ink); }
.preloader__hat path { stroke: var(--ink); }
.preloader__word svg { fill: var(--ink); }
.preloader__tag { color: var(--sage); }
.curtain__panel--b { background: var(--mist); }
.curtain__mark { color: var(--ink); }

/* the phone's quick-action bar is brand sage too, with a cream edge so it stands out over the green banners */
.mbar { background: color-mix(in srgb, var(--sage) 95%, transparent); box-shadow: inset 0 0 0 1px rgba(251,247,240,.22), 0 18px 40px -12px rgba(30,43,34,.5); }

/* newsletter form works on light and on sage */
.news input { color: inherit; }
.news input::placeholder { color: var(--muted); }
.news button { color: var(--sage); }
.news__fine { color: var(--muted); }
.footer .news button { color: var(--ink); }
.footer .news input::placeholder { color: var(--muted); }

/* =========================================================================
   HOME HERO ON PHONES: photo first, everything fits on one screen
   ========================================================================= */
.show-m { display: none; }
@media (max-width: 760px) {
  .hide-m { display: none; }
  .show-m { display: inline; }
  body[data-page="home"] .hero {
    min-height: 100svh; align-items: start;
    padding-top: calc(var(--header-h) + 34px + .75rem); padding-bottom: 1.25rem;
  }
  .hero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__visual { order: -1; width: 100%; max-width: none; margin: 0; justify-self: stretch; }
  .hero__arch { width: 100%; height: min(44svh, 390px); max-height: none; max-width: none; aspect-ratio: auto; border-radius: 999px 999px 1.1rem 1.1rem; }
  .hero__arch img { object-position: 50% 22%; }
  .hero__badge.badge { width: 78px; left: auto; right: .6rem; bottom: -.9rem; }
  .hero__note { display: none; }
  .hero .eyebrow { display: none; }
  .hero__copy { padding-bottom: 0; }
  .hero__title { font-size: clamp(2.05rem, 9.4vw, 2.6rem); line-height: .98; margin-bottom: .9rem; }
  .hero__lede { font-size: 1rem; line-height: 1.5; }
  .hero .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.5rem; }
  .hero .btn-row .btn { width: 100%; min-height: 3.25rem; padding-inline: .75rem; font-size: .9rem; }
  .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; margin-top: 1rem; padding-top: .75rem; }
  .hero__facts > div { padding-right: .6rem; margin-right: .6rem; }
  .hero__facts dt { font-size: 1.25rem; }
  .hero__facts dd { font-size: max(.56rem, var(--min-text)); letter-spacing: .08em; }
  .hero__foot { display: none; }
}
/* short phones (iPhone SE etc.) */
@media (max-width: 760px) and (max-height: 720px) {
  .hero__arch { height: 30svh; }
  .hero__title { font-size: clamp(1.9rem, 8.6vw, 2.3rem); }
}
@media (max-width: 760px) and (min-height: 721px) and (max-height: 830px) {
  .hero__arch { height: 37svh; }
}

/* tighter spacing around the specials line */
body[data-page="home"] .hero { padding-bottom: 1.6rem; }
.hero__foot { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.specials-line + .section { padding-top: clamp(2.5rem, 4.5vw, 3.75rem); }
@media (max-width: 760px) {
  /* on phones the hero ends right after its content instead of stretching to a full screen */
  body[data-page="home"] .hero { min-height: 0; padding-bottom: 1.4rem; }
}
@media (min-width: 761px) {
  /* hero content stays centered, the info row hugs the bottom, and the hero stops just short
     of a full screen so the specials line shows at the bottom of the first view */
  body[data-page="home"] .hero { align-items: stretch; min-height: min(calc(100svh - 57px), 800px); }
  body[data-page="home"] .hero > .wrap { display: flex; flex-direction: column; }
  body[data-page="home"] .hero__inner { margin-block: auto; }
}

/* ---------- Home schedule: next nights + the full month ---------- */
.home-schedule__cal { box-shadow: 0 34px 70px -46px rgba(30,43,34,.3); }
/* the chef's numbers sit in the same sage-cream block as his story */
.story + .home-stats { padding-top: 0; }

/* compact month for phones: tap a day, its events show underneath */
.cal__mini, .cal__dayview { display: none; }
.cal__mday { position: relative; height: clamp(2.9rem, 12vw, 4.2rem); min-width: 0; border-radius: .75rem; display: grid; place-content: center; justify-items: center; gap: .3rem; font-family: var(--f-display); font-size: 1.05rem; line-height: 1; color: var(--ink); transition: background .25s, color .25s; }
.cal__mday b { font-weight: 400; }
.cal__mday.is-out { pointer-events: none; }
.cal__mday:disabled { opacity: .32; cursor: default; }
.cal__mday:not(:disabled):not(.is-out):not(.is-sel):hover { background: var(--oat); }
.cal__mday.is-today { box-shadow: inset 0 0 0 1.5px var(--marigold); }
.cal__mday.is-sel { background: var(--ink); color: var(--paper); }
.cal__mdots { display: flex; gap: 3px; height: 6px; }
.cal__mdots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cal__dayview-h { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cal__dayview .cal__event { font-size: .95rem; padding: .8rem .95rem; border-radius: .8rem; }
.cal__dayview .cal__event span { font-size: max(.72rem, var(--min-text)); }
.cal__dayview-empty { font-size: .92rem; color: var(--muted); }
@media (max-width: 860px) {
  .cal--compact .cal__head { display: grid; grid-template-columns: 1fr auto; padding: 1.1rem 1.2rem; }
  .cal--compact .cal__month { font-size: clamp(1.4rem, 5.6vw, 1.9rem); }
  /* filters become one swipeable row instead of three stacked rows */
  .cal--compact .cal__legend { grid-column: 1 / -1; order: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1.2rem; padding-inline: 1.2rem; }
  .cal--compact .cal__legend::-webkit-scrollbar { display: none; }
  .cal--compact .cal__legend button { flex: none; padding: .4rem .7rem; font-size: .78rem; }
  .cal--compact .cal__dows { display: grid; padding: .2rem .6rem 0; }
  .cal--compact .cal__dows div { padding: .65rem 0 .35rem; text-align: center; font-size: max(.6rem, var(--min-text)); letter-spacing: .1em; border-bottom: 0; }
  .cal--compact .agenda { display: none; }
  .cal--compact .cal__mini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; padding: .2rem .6rem .9rem; }
  .cal--compact .cal__dayview { display: grid; gap: .55rem; padding: 1.1rem 1.2rem 1.3rem; border-top: 1px solid var(--line); background: var(--paper); }
  .cal--compact .cal__foot { padding: 1rem 1.2rem; align-items: flex-start; }
}

/* =========================================================================
   PHONES: shorter pages, compact cards, and swipe rows for long lists
   ========================================================================= */
.path__meta, .swipe-bar { display: none; }
@media (max-width: 760px) {
  :root { --space-section: 2.9rem; }
  .shead { margin-bottom: 1.5rem; }

  /* tap targets of at least ~40px */
  .arrow-link { padding-block: .55rem; }
  .phero__crumbs a { display: inline-block; padding-block: .6rem; }
  .footer ul { gap: .1rem; }
  .footer ul a { display: inline-block; padding-block: .45rem; }

  /* long lists become one swipeable row; the next card peeks in from the right */
  .menus, .stack-cards, .printed, .specials, .flips, .upcoming-list, .collage, .lineup, .days, .series, .press-cards, .offers {
    display: flex; gap: .8rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) .5rem; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .menus::-webkit-scrollbar, .stack-cards::-webkit-scrollbar, .printed::-webkit-scrollbar, .specials::-webkit-scrollbar,
  .flips::-webkit-scrollbar, .upcoming-list::-webkit-scrollbar, .collage::-webkit-scrollbar,
  .lineup::-webkit-scrollbar, .days::-webkit-scrollbar, .series::-webkit-scrollbar, .press-cards::-webkit-scrollbar, .offers::-webkit-scrollbar { display: none; }
  .menus > *, .stack-cards > *, .printed > *, .specials > *, .flips > *, .upcoming-list > *, .collage > *,
  .lineup > *, .days > *, .series > *, .press-cards > *, .offers > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  /* the two offers swipe; each stacks its 3D object over the words */
  .offers { padding-block: .9rem 1rem; }
  .offer { grid-template-columns: 1fr; align-content: start; gap: 1rem; padding: 1.25rem; }
  .spin--flyer { max-width: 150px; }
  .spin--card { max-width: 250px; }
  .offer__title { font-size: 1.5rem; }

  /* the weekly classes swipe as cards: photo on top, details below */
  .feature { gap: 0; align-items: start; align-content: start; background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
  .feature__media .media { aspect-ratio: 4 / 3; border-radius: 0; }
  .feature > .stack { --stack: 1rem !important; padding: 1.25rem 1.2rem 1.4rem; }
  .feature__title { font-size: 1.7rem; }
  .feature .body-l { font-size: 1rem; }
  .feature__list li { padding-block: .65rem; }
  /* the dinner club dates swipe as small cards */
  .series { border-top: 0; }
  .series > .series__row { flex-basis: 70%; align-content: start; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bone); }
  .series__row:hover { padding-left: 1.2rem; }
  .swipe-bar { display: flex; align-items: center; gap: .75rem; margin-top: .8rem; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .swipe-bar i { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
  .swipe-bar b { position: absolute; inset: 0; background: var(--marigold); transform-origin: left; transform: scaleX(0); transition: transform .2s linear; }
  .swipe-bar.is-off { display: none; }

  /* filter chips in one swipeable line */
  .filters, .builder__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); margin-bottom: 1.25rem; scrollbar-width: none; }
  .filters::-webkit-scrollbar, .builder__tabs::-webkit-scrollbar { display: none; }
  .builder__tabs > * { flex: none; }
  .yourmenu { position: relative; top: auto; }
  .yourmenu__list { min-height: 0; margin: .9rem 0; }
  .filter { flex: none; padding: .6rem 1rem; font-size: .88rem; }

  /* home: "Choose your night" as three compact rows */
  .paths { gap: .65rem; }
  .path { grid-template-columns: 6.6rem 1fr; grid-template-rows: auto; border-radius: var(--r); }
  .path__media { aspect-ratio: auto; height: 100%; min-height: 6.9rem; }
  .path__price, .path .num { display: none; }
  .path__body { padding: .9rem 1rem .85rem; gap: .35rem; align-content: center; }
  .path__title { font-size: 1.22rem; }
  .path__meta { display: block; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
  .path__desc { display: none; }
  .path__go { margin-top: .3rem; padding-top: 0; border-top: 0; font-size: .86rem; }
  .path__go .circle { width: 1.9rem; height: 1.9rem; }
  .minor-path { padding-block: 1.05rem; }

  /* home: smaller TV badge and play button, shorter promos and storefront */
  .story__badge { width: 5.8rem; left: .2rem; top: -1.3rem; }
  .story__badge b { font-size: 1.1rem; }
  .story__play { width: 3.8rem; right: 1rem; bottom: 1rem; }
  /* "From the kitchen": a centred carousel (kitchenCarousel() in main.js tilts and shrinks the neighbours) */
  .collage { gap: .3rem; padding: .9rem 14vw 1.1rem; scroll-padding-inline: 0; }
  .collage > .media { flex-basis: 72vw; aspect-ratio: 4 / 5; height: auto; scroll-snap-align: center; box-shadow: 0 24px 44px -26px rgba(30,43,34,.55); will-change: transform; }
  .collage__cap { display: block; min-height: 2.4em; margin-top: .3rem; text-align: center; font-family: var(--f-hand); font-size: 1.2rem; line-height: 1.15; color: var(--sage); text-wrap: balance; }
  .collage__dots { display: flex; justify-content: center; gap: .45rem; margin-top: .5rem; }
  .collage__dots button { position: relative; width: .5rem; height: .5rem; padding: 0; border-radius: 999px; background: var(--line); transition: width .4s var(--ease), background .4s; }
  .collage__dots button::after { content: ""; position: absolute; inset: -.8rem -.3rem; }
  .collage__dots button.is-on { width: 1.6rem; background: var(--marigold); }
  .visit .media { max-width: none !important; aspect-ratio: 5 / 4; }
  /* home: the four numbers as a tight 2×2 of small cards with short labels */
  .home-stats .stats { gap: .5rem; border-top: 0; }
  .home-stats .stat { gap: .4rem; padding: .95rem 1rem 1rem; border: 0; border-radius: var(--r); background: var(--bone); }
  .home-stats .stat__num { font-size: 2.3rem; }
  .home-stats .stat__label { font-size: .8rem; line-height: 1.35; text-wrap: balance; }

  /* classes */
  .feature__media .media { aspect-ratio: 16 / 10; }
  .menus > * { flex-basis: 80%; }
  .stack-card { position: relative; top: auto; min-height: 0; }
  .stack-card .media { aspect-ratio: 16 / 11; }
  .stack-card__body { gap: .8rem; padding: 1.2rem; }
  .stack-card__n { font-size: 2.4rem; }

  /* schedule: the week as a tidy list */
  .week { grid-template-columns: 1fr; gap: .45rem; }
  .week__day { grid-template-columns: 5rem 1fr; grid-template-rows: auto; align-items: center; column-gap: .75rem; row-gap: .15rem; min-height: 0; padding: .85rem 1rem .85rem 1.15rem; }
  .week__day::after { top: 0; bottom: 0; left: 0; right: auto; width: 4px; height: auto; }
  .week__dow { grid-row: 1 / span 3; }
  .week__title { grid-column: 2; font-size: 1.05rem; }
  .week__meta { grid-column: 2; font-size: .8rem; }
  .week__price { grid-column: 2; margin-top: .1rem; font-size: max(.72rem, var(--min-text)); color: var(--sage); }
  .upcoming-list > * { flex-basis: 86%; }
  .upcoming-list .ticket { --stub: 4.3rem; }
  .upcoming-list .ticket__body { padding: 1rem; }
  .upcoming-list .ticket__foot { flex-wrap: wrap; gap: .5rem; }
  .upcoming-list .ticket__price strong { font-size: 1.15rem; }

  /* dinners: straight menu cards inside the swipe row */
  .printed > .printed__card:nth-child(n) { transform: none; }

  /* private events: occasions two by two, tighter dish buttons */
  .occasions { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .occasion { min-height: 0; padding: 1rem .95rem; gap: .7rem; align-content: start; }
  .occasion svg { width: 1.6rem; height: 1.6rem; }
  .occasion h3 { font-size: 1.05rem; }
  .occasion p { font-size: .8rem; line-height: 1.4; margin-top: .3rem; }
  .dish { padding: .55rem .8rem; }

  /* gallery: two columns */
  .masonry { columns: 2; column-gap: .6rem; }
  .masonry__item { margin-bottom: .6rem; border-radius: .75rem; }

  /* footer: the page list in two columns */
  .footer__bottom a, .footer__bottom button { display: inline-block; padding-block: .65rem; }
  .footer__intro { gap: 2rem; padding-block: 3rem 2.25rem; }
  .footer__lead { font-size: clamp(2.2rem, 11vw, 2.8rem); }
  .footer .news button { padding-inline: 1rem; }
  .footer__top { gap: 1.75rem; padding-block: 2.25rem; }
  .footer__explore ul { column-gap: 1rem; }
}
/* chef timeline: a native sideways swipe on phones and small tablets */
@media (max-width: 900px) {
  .hscroll__track { flex-direction: row; width: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: .5rem; scrollbar-width: none; }
  .hscroll__track::-webkit-scrollbar { display: none; }
  .hscroll__track > * { scroll-snap-align: start; }
  .chapter, .chapter--intro { width: min(80vw, 360px); }
  .chapter--intro { width: min(64vw, 280px); grid-template-rows: none; align-content: center; }
  .hscroll > .swipe-bar { display: flex; align-items: center; gap: .75rem; margin: .8rem var(--gutter) 0; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .hscroll > .swipe-bar i { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
  .hscroll > .swipe-bar b { position: absolute; inset: 0; background: var(--marigold); transform-origin: left; transform: scaleX(0); transition: transform .2s linear; }
  .hscroll > .swipe-bar.is-off { display: none; }
}

/* ---------- Calendar "Your pick" panel: text or email Chef David in one tap ---------- */
.cal__book { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.6rem; padding: 1.35rem 1.6rem; border-top: 1px solid var(--line); background: var(--paper); }
.cal__book-label { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.cal__book-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.05; letter-spacing: -.02em; margin-top: .3rem; }
.cal__book-when { margin-top: .3rem; font-size: .88rem; color: var(--muted); }
.cal__book-opts { display: grid; gap: .6rem; min-width: 0; }
.cal__seats { display: flex; align-items: center; gap: .55rem; }
.cal__seats-label { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: .2rem; }
.cal__seats button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bone); font-size: 1.25rem; line-height: 1; display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s; }
.cal__seats button:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cal__seats button:disabled { opacity: .35; cursor: not-allowed; }
.cal__seats output { min-width: 1.7rem; text-align: center; font-family: var(--f-display); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cal__seats-total { margin-left: auto; font-family: var(--f-mono); font-size: .78rem; color: var(--muted); white-space: nowrap; }
.cal__name { width: 100%; min-width: 0; height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bone); color: var(--ink); font: inherit; font-size: .92rem; }
.cal__name:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 4px rgba(226,162,59,.18); }
.cal__book-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cal__book-foot { grid-column: 1 / -1; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.cal__book-foot a, .cal__book-online { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cal__book-empty { grid-column: 1 / -1; font-size: .92rem; color: var(--muted); }
.cal__event.is-picked { box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 1100px) { .cal__book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cal__book-actions { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .cal__book { grid-template-columns: 1fr; gap: .9rem; padding: 1.15rem 1.2rem 1.25rem; }
  .cal__book-actions { display: grid; grid-template-columns: 1fr; }
  .cal--compact .cal__dayview.is-solo { display: none; }
  .cal__book-actions .btn { justify-content: center; padding-inline: .8rem; min-height: 3rem; }
  .cal__book-online { display: inline-block; padding-block: .4rem; }
}

/* ---------- How a class works: a scroll-drawn timeline on phones ---------- */
.steps__rail, .step__k { display: none; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: .9rem; }
  .steps__line { display: none; }
  .steps__rail { display: block; position: absolute; left: 1.4rem; top: 1.4rem; bottom: 3rem; width: 2px; margin-left: -1px; border-radius: 2px; overflow: hidden; background: var(--line); }
  .steps__rail i { position: absolute; inset: 0; background: var(--marigold); transform-origin: top; transform: scaleY(0); }
  .step { grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: .9rem; row-gap: 0; align-items: start; }
  .step::before { content: ""; position: absolute; z-index: -1; left: 3.7rem; right: 0; top: 0; bottom: 0; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); transition: border-color .5s, box-shadow .5s; }
  .step:nth-child(n) .step__n { grid-row: 1 / span 3; width: 2.8rem; height: 2.8rem; font-size: 1.3rem; background: var(--bone); border-color: var(--line); color: var(--muted); transition: background .45s, border-color .45s, color .45s; }
  .step__k { display: block; grid-column: 2; padding: .85rem 1rem 0; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; color: var(--sage); }
  .step h3 { grid-column: 2; padding: .25rem 1rem 0; font-size: 1.2rem; line-height: 1.1; }
  .step p { grid-column: 2; padding: .35rem 1rem .95rem; font-size: .88rem; line-height: 1.5; }
  .step.is-on .step__n { background: var(--marigold); border-color: var(--marigold); color: var(--ink); animation: step-pop .9s var(--ease-out); }
  .step.is-on::before { border-color: rgba(226,162,59,.55); box-shadow: 0 18px 34px -26px rgba(30,43,34,.35); }
}
@keyframes step-pop { 0% { box-shadow: 0 0 0 0 rgba(226,162,59,.55); transform: scale(.86); } 55% { transform: scale(1.1); } 100% { box-shadow: 0 0 0 14px rgba(226,162,59,0); transform: scale(1); } }
html.reduce-motion .step.is-on .step__n { animation: none; }

/* Recipes page */
.recipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media head" "ing steps"; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.recipe__media { grid-area: media; }
.recipe__media .media { aspect-ratio: 4 / 3; }
.recipe__head { grid-area: head; align-self: center; }
.recipe__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.recipe__facts div { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: calc(var(--r) * .75); }
.recipe__facts dt { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.recipe__facts dd { margin: .2rem 0 0; font-weight: 600; }
.recipe__tip { padding: 1rem 1.2rem; border-left: 4px solid var(--marigold); background: var(--mist); border-radius: 0 calc(var(--r) * .75) calc(var(--r) * .75) 0; line-height: 1.5; }
.recipe__ing { grid-area: ing; padding: clamp(1.4rem, 2.6vw, 2rem); display: grid; gap: 1rem; }
.recipe__ing ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.recipe__ing li { display: flex; gap: .7rem; align-items: baseline; }
.recipe__ing li::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--marigold); transform: translateY(-.1rem); }
.recipe__steps { grid-area: steps; display: grid; gap: 1.1rem; }
.recipe__steps ol { list-style: none; padding: 0; counter-reset: step; display: grid; gap: .9rem; }
.recipe__steps li { counter-increment: step; display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; align-items: start; line-height: 1.5; }
.recipe__steps li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sage); color: var(--paper); font-family: var(--f-display); font-size: .95rem; }
.recipe__src { font-size: .9rem; }
.recipe__src a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) {
  .recipe { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "head" "ing" "steps"; }
}
@media (max-width: 520px) {
  .recipe__facts { grid-template-columns: 1fr 1fr; }
  .recipe__facts div:last-child { grid-column: span 2; }
}

/* meals page (meals-and-catering version) */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; align-items: center; gap: .7rem; font-size: 1.02rem; }
.ticks svg { width: 1.15rem; flex: none; color: var(--sage); }
.signup-card { background: var(--bone); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.4rem, 3vw, 2.2rem); }
.signup-card .form__fields { display: grid; gap: 1rem; }
.signup-card__title { font-family: var(--f-display); font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -.02em; line-height: 1.1; }
.minor-path--wide { border-top: 1px solid var(--line); padding-left: 0; }
@media (max-width: 900px) { .split .signup-card { margin-top: .5rem; } }

/* ---- bolder meals & catering (meals-and-catering version) ---- */
/* next pick-up chip */
.pickup-clock { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(30,43,34,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); margin-bottom: 1.4rem; }
.pickup-clock__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--marigold); animation: pickpulse 2s infinite; }
@keyframes pickpulse { 0% { box-shadow: 0 0 0 0 rgba(226,162,59,.6); } 70% { box-shadow: 0 0 0 10px rgba(226,162,59,0); } 100% { box-shadow: 0 0 0 0 rgba(226,162,59,0); } }
.pickup-clock__label { color: var(--honey); }
.pickup-clock__left { color: var(--marigold); }
.pickup-clock__left:empty { display: none; }


/* chalkboard menu */
.menuboard { position: relative; background: var(--sage); background-image: radial-gradient(ellipse at 30% 15%, rgba(251,247,240,.10), transparent 60%); color: var(--paper); border-radius: 18px; padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 3rem); box-shadow: inset 0 0 0 10px var(--oat), inset 0 0 0 12px rgba(30,43,34,.18), 0 30px 60px -30px rgba(30,43,34,.45); transform: rotate(-1.5deg); text-align: center; }
.menuboard__kicker { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; color: var(--honey); }
.menuboard__title { font-family: var(--f-hand); font-weight: 700; font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; margin: .6rem 0 1rem; color: var(--paper); }
.menuboard__line { font-family: var(--f-hand); font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: rgba(251,247,240,.86); line-height: 1.2; }
.menuboard__btn { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem; padding: .85rem 1.4rem; border-radius: 999px; background: var(--marigold); color: var(--ink); font-weight: 600; transition: transform .4s var(--ease), background .3s; }
.menuboard__btn:hover { transform: translateY(-2px); background: var(--honey); }
.menuboard__btn svg { width: 1.1rem; }
.menuboard__foot { margin-top: 1.2rem; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .08em; color: rgba(251,247,240,.8); }
.menuboard__tape { position: absolute; top: -12px; width: 90px; height: 26px; background: rgba(242,212,155,.8); }
.menuboard__tape--l { left: 16%; transform: rotate(-6deg); }
.menuboard__tape--r { right: 16%; transform: rotate(5deg); }

.ticks--big li { font-family: var(--f-display); font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -.01em; line-height: 1.25; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.ticks--big svg { width: 1.5rem; margin-top: .1rem; color: var(--sage); }
.s-sage .ticks--big svg { color: var(--honey); }

/* meal prep cards */
.mealprep .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; margin-top: .6rem; }
.mealprep .seg button { font: inherit; font-size: .86rem; font-weight: 600; color: var(--muted); padding: .55rem 1.1rem; border-radius: 999px; transition: background .3s, color .3s; }
.mealprep .seg button[aria-pressed="true"] { background: var(--marigold); color: var(--ink); }
.macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.macro { border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; display: grid; gap: .8rem; align-content: start; background: rgba(251,247,240,.07); transition: border-color .4s, background .4s; }
.macro.is-large { border-color: var(--honey); background: rgba(242,212,155,.12); }
.macro__name { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.15; min-height: 2.4em; }
.macro__big { display: flex; align-items: baseline; gap: .5rem; }
.macro__big b { font-family: var(--f-display); font-weight: 400; font-size: clamp(3.4rem, 6vw, 5rem); line-height: .85; letter-spacing: -.05em; color: var(--honey); display: inline-block; }
.macro__big span { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.macro__cal { font-size: .95rem; }
.macro__cal b { font-weight: 600; display: inline-block; }
.macro__sides { font-size: .85rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .8rem; }
.macro b.is-tick { animation: tick .45s var(--ease-out); }
.macros__note { margin-top: 1rem; font-size: .82rem; color: var(--muted); }
.signup-card { color: var(--ink); --muted: #5e6a60; --line: rgba(30,43,34,.14); }
.signup-card--wide { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.signup-card__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end; }

/* feeding-a-crowd card */
.crowd { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r); overflow: hidden; background: var(--sage); color: var(--paper); --line: var(--line-dark); }
.crowd__media { overflow: hidden; }
.crowd__media img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; transition: transform 1.2s var(--ease); }
.crowd:hover .crowd__media img { transform: scale(1.05); }
.crowd__body { padding: clamp(1.6rem, 4vw, 3rem); display: grid; gap: 1rem; align-content: center; }
.crowd__body .eyebrow { color: var(--honey); }
.crowd__title { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.03em; }
.crowd__title em { color: var(--honey); }
.crowd .path__go .circle { background: var(--paper); color: var(--ink); }

/* home: next pick-up band */
.pickup-band { background: var(--sage); color: var(--paper); padding-block: clamp(1.6rem, 3.5vw, 2.6rem); --line: rgba(251,247,240,.24); --muted: rgba(251,247,240,.82); }
.pickup-band .pickup-clock { background: rgba(251,247,240,.12); border-color: rgba(251,247,240,.3); }
.pickup-band__inner { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem 2rem; align-items: center; }
.pickup-band .eyebrow { color: var(--honey); }
.pickup-band__title { font-family: var(--f-display); font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -.035em; line-height: 1; margin-top: .4rem; }
.pickup-band__title em { color: var(--honey); }
.pickup-band .pickup-clock { margin: 0; }
.s-sage .eyebrow { color: var(--honey); }
.weddings__media { background: var(--oat); }

/* catering: weddings feature */
.weddings__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; }
.weddings__media img { width: 100%; height: 100%; object-fit: cover; }
.weddings__title { font-size: clamp(2.4rem, 5vw, 4.4rem); }

@media (max-width: 1000px) {
  .macros { grid-template-columns: 1fr 1fr; }
  .pickup-band__inner { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 760px) {
  .crowd { grid-template-columns: 1fr; }
  .crowd__media img { min-height: 210px; }
  .menuboard { transform: rotate(-1deg); }
  .weddings__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .macros { grid-template-columns: 1fr; }
  .macro__name { min-height: 0; }
  .signup-card__row { grid-template-columns: 1fr; }
}


.stack > .ticks--big { margin-top: .8rem; }

.pickup-band .pickup-clock__left, .pickup-band .pickup-clock__dot { color: var(--honey); }
.pickup-band .pickup-clock__dot { background: var(--honey); }
.s-sage .dot--live { background: var(--honey); }

/* meals hero: an "on the menu" card instead of a photo, stacked on a sage card */
.hero--meals .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hero--meals .hero__visual { align-items: center; }
.pass { position: relative; width: 100%; max-width: 31rem; justify-self: end; }
.pass__back { position: absolute; inset: 1.4rem -1.1rem -1.1rem 1.4rem; border-radius: var(--r-lg); background: var(--sage); transform: rotate(2.5deg); }
.pass__card { position: relative; background: var(--bone); border-radius: var(--r-lg); padding: 1.3rem clamp(1.2rem, 2.4vw, 1.75rem) 1.1rem; box-shadow: 0 40px 80px -44px rgba(30,43,34,.5); }
.pass__head, .pass__foot { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pass__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.pass__head span:first-child { display: inline-flex; align-items: center; gap: .6rem; color: var(--sage); }
.pass__head svg { width: 1.7rem; height: auto; fill: currentColor; }
.pass__list { list-style: none; margin: 0; padding: 0; }
.pass__item + .pass__item { border-top: 1px dashed rgba(30,43,34,.18); }
.pass__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .2rem; align-items: center; padding: 1.05rem 0; color: inherit; }
.pass__when, .pass__what, .pass__note { grid-column: 1; }
.pass__when { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pass__what { font-family: var(--f-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: -.02em; line-height: 1.1; transition: color .3s; }
.pass__note { font-size: .88rem; line-height: 1.4; color: var(--muted); }
.pass__tag { grid-column: 2; grid-row: 1 / span 3; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 999px; background: var(--mist); color: var(--sage); font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pass__tag--live { background: var(--sage); color: var(--paper); }
.pass__tag--live .pickup-clock__dot { background: var(--honey); }
.pass__tag--tomato { background: rgba(200,100,59,.14); color: var(--tomato-ink); }
.pass__link:hover .pass__what, .pass__link:focus-visible .pass__what { color: var(--sage); }
.pass__foot { padding-top: .85rem; border-top: 1px solid var(--line); }
.hero--meals .hero__note { left: -4.2rem; top: -2.6rem; color: var(--sage); }
@media (max-width: 760px) {
  /* phones: headline first, then the card */
  .hero--meals .hero__inner { grid-template-columns: 1fr; }
  .hero--meals .hero__visual { order: 0; }
  .pass { max-width: none; margin: .5rem 0 1.2rem; }
  .pass__back { inset: .9rem -.5rem -.7rem .9rem; }
}
@media (max-width: 560px) { .hero--meals .btn-row { grid-template-columns: 1fr; } }
@media (max-width: 400px) {
  .pass__row { grid-template-columns: minmax(0, 1fr); }
  .pass__tag { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
}

/* meals: Thanksgiving pick-up menu card (same look as the Thanksgiving post) */
.holiday__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.holiday .eyebrow { color: var(--tomato-ink); }
.holiday__facts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.holiday__facts > div { border-radius: var(--r); padding: 1rem 1.2rem 1.1rem; background: var(--sage); color: var(--paper); }
.holiday__facts > div + div { background: var(--oat); color: var(--ink); }
.holiday__facts dt { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: var(--honey); }
.holiday__facts > div + div dt { color: var(--tomato-ink); }
.holiday__facts dd { margin: .35rem 0 0; font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.05; }
.holiday__facts dd span { display: block; margin-top: .3rem; font-family: var(--f-sans); font-size: .85rem; letter-spacing: 0; opacity: .88; }
.tgmenu { background: var(--bone); border-radius: var(--r-lg); padding: .5rem clamp(1.1rem, 3vw, 2rem) 1.4rem; box-shadow: 0 40px 80px -44px rgba(30,43,34,.4); }
.tgmenu__list { list-style: none; margin: 0; padding: 0; }
.tgmenu__list li { display: grid; grid-template-columns: 2.2rem auto minmax(1rem, 1fr) auto; align-items: center; column-gap: .9rem; padding: 1rem 0; border-bottom: 1px dashed rgba(30,43,34,.16); }
.tgmenu__n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--mist); color: var(--sage); font-family: var(--f-display); font-style: italic; font-size: 1.1rem; }
.tgmenu__what { display: grid; gap: .15rem; min-width: 0; }
.tgmenu__what b { font-family: var(--f-display); font-weight: 420; font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -.02em; line-height: 1.1; }
.tgmenu__what small { font-size: .85rem; color: var(--muted); }
.tgmenu__dots { align-self: end; margin-bottom: .6rem; border-bottom: 2px dotted rgba(30,43,34,.22); }
.tgmenu__price { font-family: var(--f-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.03em; color: var(--tomato); }
.tgmenu__pay { margin-top: .6rem; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Thanksgiving photos: a collage (turkey big, plated dinner and ham on its corners) with the order-by stamp */
.holiday__photos { position: relative; width: 100%; max-width: 32rem; justify-self: end; margin-bottom: 4.5rem; }
.holiday__snap { position: relative; margin: 0; border-radius: 1.1rem; overflow: hidden; border: 7px solid var(--bone); background: var(--oat); box-shadow: 0 24px 44px -26px rgba(30,43,34,.55); }
.holiday__snap img { width: 100%; height: 100%; object-fit: cover; }
.holiday__snap--main { width: 84%; margin-left: 9%; aspect-ratio: 5 / 4; transform: rotate(1.5deg); }
.holiday__snap--a, .holiday__snap--b { position: absolute; z-index: 3; width: 40%; aspect-ratio: 1; }
.holiday__snap--a { left: -3%; bottom: -16%; transform: rotate(-5deg); }
.holiday__snap--b { right: -3%; bottom: -20%; transform: rotate(4deg); }
.holiday__stamp { position: absolute; z-index: 5; right: -1.2rem; top: -2.4rem; width: 7.2rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: .15rem; background: color-mix(in srgb, var(--tomato) 82%, var(--ink)); color: var(--bone); transform: rotate(-10deg); box-shadow: 0 16px 30px -14px rgba(30,43,34,.55), inset 0 0 0 5px color-mix(in srgb, var(--tomato) 82%, var(--ink)), inset 0 0 0 6.5px rgba(251,247,240,.75); }
.holiday__stamp small { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.holiday__stamp b { font-family: var(--f-display); font-weight: 480; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1; }
/* the menu card: the four dinners, then the sides every order comes with */
.holiday .tgmenu { margin-top: clamp(2.2rem, 4.5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(.6rem, 2vw, 1.4rem) clamp(1.1rem, 3vw, 2.25rem) clamp(1.1rem, 2.4vw, 1.75rem); }
.tgmenu__extras { display: grid; gap: .8rem; }
.tgmenu__label { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tgsides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .8rem; }
.tgsides li { display: grid; justify-items: center; gap: .5rem; text-align: center; font-family: var(--f-display); font-size: 1rem; line-height: 1.15; letter-spacing: -.01em; }
.tgsides img { width: min(5.6rem, 100%); aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; border: 4px solid var(--bone); box-shadow: 0 0 0 1.5px rgba(226,162,59,.6), 0 14px 26px -16px rgba(30,43,34,.55); }
.tgmenu__extras .tgmenu__pay { margin-top: .2rem; }
.tgmenu__note { font-size: .78rem; color: var(--muted); }
@media (max-width: 900px) {
  .holiday__grid { grid-template-columns: 1fr; }
  .holiday__photos { justify-self: center; margin-top: 1.5rem; }
  .holiday .tgmenu { grid-template-columns: 1fr; }
  .tgsides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* phones: the three photos side by side */
  .holiday__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; max-width: none; margin: 2rem 0 0; }
  .holiday__snap, .holiday__snap--a, .holiday__snap--b, .holiday__snap--main { position: relative; inset: auto; width: auto; margin: 0; aspect-ratio: 4 / 5; border-width: 4px; border-radius: .8rem; transform: rotate(-1.5deg); }
  .holiday__snap--main { transform: rotate(1.5deg) translateY(.4rem); }
  .tgsides img { width: min(4.6rem, 100%); }
  .holiday__stamp { width: 5.2rem; right: -.3rem; top: -1.9rem; }
  .holiday__stamp small { font-size: .52rem; }
  .holiday__stamp b { font-size: 1.35rem; }
}
@media (max-width: 560px) { .tgsides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* home: Thanksgiving card under the Monday pick-up band */
.tgpromo { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); border-radius: var(--r-lg); background: var(--bone); box-shadow: 0 40px 80px -48px rgba(30,43,34,.45); }
.tgpromo__media { position: relative; overflow: hidden; min-height: 340px; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.tgpromo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tgpromo__body { display: grid; gap: 1rem; align-content: center; padding: clamp(1.6rem, 4vw, 3rem); }
.tgpromo .eyebrow { color: var(--tomato-ink); }
.tgpromo__title { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.02; }
.tgpromo__title em { color: var(--sage); }
.tgpromo .btn-row { margin-top: .4rem; }
.tgpromo .holiday__stamp { right: 1.4rem; top: -2rem; }
@media (max-width: 760px) {
  .tgpromo { grid-template-columns: 1fr; }
  .tgpromo__media { min-height: 0; height: 230px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .tgpromo .holiday__stamp { right: .8rem; top: -1.4rem; }
}
@media (max-width: 480px) {
  .tgmenu__list li { grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: .75rem; }
  .tgmenu__n { width: 2rem; height: 2rem; font-size: 1rem; }
  .tgmenu__dots { display: none; }
}

/* small phones: room for the longer "Chef David" button labels */
@media (max-width: 380px) { .btn--lg { padding-inline: 1.15rem; } }

/* contrast on the sage bands: small text is cream (gold stays for big headlines, lines and icons) */
.s-sage, .pickup-band { --muted: var(--paper); }
.s-sage .eyebrow, .crowd__body .eyebrow, .pickup-band .eyebrow { color: var(--paper); }
.s-sage .eyebrow::before, .crowd__body .eyebrow::before, .pickup-band .eyebrow::before { background: var(--honey); opacity: 1; }
.s-sage .macro, .s-sage .macro.is-large { background: transparent; }
.pickup-band .pickup-clock { background: transparent; }
.pickup-band .pickup-clock__label, .pickup-band .pickup-clock__left { color: var(--paper); }
/* calendar: switched-off filters and past days stay readable */
.cal__legend button[aria-pressed="false"] { opacity: 1; color: var(--muted); }
.cal__legend button[aria-pressed="false"] .dot { opacity: .35; }
.cal__cell.is-past { opacity: .72; }

/* after teen camp leaves the home page, the gift card takes the full row */
.offers > .offer:only-child { grid-column: 1 / -1; }

/* dinners: Dinner Club "next series" card (replaces the old 2025 schedule) */
.club-next { align-self: center; display: grid; gap: .7rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--r-lg); background: var(--bone); color: var(--ink); box-shadow: 0 30px 60px -40px rgba(30,43,34,.45); --muted: #5e6a60; }
.club-next__kicker, .club-next__label { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.club-next__title { font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.03em; line-height: 1.05; }
.club-next__text { color: var(--muted); }
.club-next__label { margin-top: .6rem; padding-top: 1rem; border-top: 1px solid rgba(30,43,34,.14); color: var(--muted); }
.club-next__past { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.club-next__past li { padding: .4rem .8rem; border-radius: 999px; background: var(--mist); font-size: .85rem; }

/* moving strip: a pause button, since anything that keeps moving must be stoppable */
.marquee__pause { position: absolute; right: max(.6rem, env(safe-area-inset-right)); top: 50%; translate: 0 -50%; z-index: 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--sage); color: var(--paper); box-shadow: 0 0 0 1px rgba(251,247,240,.45), -16px 0 18px 8px var(--sage); transition: color .3s; }
.marquee__pause svg { width: .85rem; height: .85rem; fill: currentColor; }
.marquee__pause:hover, .marquee__pause[aria-pressed="true"] { color: var(--honey); }

/* phones: comfortable tap sizes */
@media (max-width: 760px) {
  .header__announce { padding-block: 0; }
  .header__announce a { min-height: 34px; }
  .collage__dots { gap: .9rem; }
  .collage__dots button::after { inset: -1rem -.7rem; }
  .specials-line .tk { padding-block: .55rem; }
  .footer__handle, .news__fine a { display: inline-block; padding-block: .55rem; }
  .marquee__pause { width: 2.75rem; height: 2.75rem; }
}

/* footer: Hours and Explore fold up on phones (open, and not clickable, everywhere else) */
.footer__fold > summary { list-style: none; }
.footer__fold > summary::-webkit-details-marker { display: none; }
@media (min-width: 761px) {
  .footer__fold > summary { pointer-events: none; }
}
@media (max-width: 760px) {
  .footer__top { gap: 0; padding-block: 1.25rem 1.5rem; }
  .footer__top > div { padding-block: 1rem 1.25rem; }
  .footer__fold { border-top: 1px solid var(--line); }
  .footer__fold > summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; cursor: pointer; }
  .footer__fold > summary h2 { margin: 0; }
  .footer__fold > summary::after { content: ""; width: .6rem; height: .6rem; margin-right: .35rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-25%); transition: transform .3s var(--ease); }
  .footer__fold[open] > summary::after { transform: rotate(-135deg) translateY(-25%); }
  .footer__fold > ul { padding-bottom: 1.1rem; }
  .footer__fold:last-child { border-bottom: 1px solid var(--line); }
}

/* Slow-connection safety net: if the animation scripts haven't started 1.2s after the page shows,
   the top of the page fades in on its own. main.js adds .intro-run when it arrives in time, which
   cancels this before it starts, so normal visits see the full intro exactly as before. */
@keyframes intro-fallback { from { visibility: visible; opacity: 0; transform: translateY(14px); } to { visibility: visible; opacity: 1; transform: none; } }
@keyframes intro-fallback-img { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
html.js:not(.reduce-motion):not(.intro-run) [data-intro] [data-hero-in],
html.js:not(.reduce-motion):not(.intro-run) [data-intro] [data-split] { animation: intro-fallback .8s var(--ease-out) 1.2s both; }
html.js:not(.reduce-motion):not(.intro-run) [data-intro] [data-intro-img] { animation: intro-fallback-img 1.1s var(--ease-out) 1.2s both; }

/* home: Chef David's numbers inside his story (replaces the separate numbers band) */
.story__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: .4rem 0 .2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.story__facts dt { font-family: var(--f-display); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; letter-spacing: -.03em; color: var(--sage); }
.story__facts dd { margin: .3rem 0 0; font-size: .88rem; line-height: 1.35; color: var(--muted); }

/* classes & dinners: the Crave Wine Co. line under the Friday sample menus */
.fri-note { max-width: 46ch; margin: clamp(1.4rem, 3vw, 2rem) auto 0; text-align: center; color: var(--muted); }

/* =========================================================================
   WOW PASS 1 (Nov 2, night): home page
   ========================================================================= */

/* Three ways: big photo panels. Hover one and it opens up; Meals leads by default */
.ways { display: flex; gap: var(--gap); height: clamp(460px, 64vh, 640px); }
.way { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r-lg); overflow: hidden; color: var(--paper); isolation: isolate; transition: flex-grow .8s var(--ease-out), transform .6s var(--ease-out); box-shadow: 0 40px 70px -46px rgba(30,43,34,.6); }
.ways:not(:hover):not(:focus-within) .way:first-child, .way:hover, .way:focus-visible { flex-grow: 1.85; }
.way > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.08); transition: transform 1.6s var(--ease-out); }
.way:hover > img, .way:focus-visible > img { transform: scale(1); }
/* forest shading under the words, never black */
.way::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(44,63,49,.94) 0%, rgba(44,63,49,.62) 32%, rgba(44,63,49,.08) 62%, rgba(44,63,49,0) 100%); }
.way__num { position: absolute; top: .4rem; left: 1.1rem; font-family: var(--f-display); font-weight: 400; font-size: clamp(4rem, 7vw, 6.5rem); line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(251,247,240,.85); }
.way__stamp { position: absolute; top: 1.2rem; right: 1.2rem; width: 6.2rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: .1rem; transform: rotate(-10deg); transition: transform .8s var(--ease-out); color: var(--bone); }
.way:hover .way__stamp { transform: rotate(4deg) scale(1.06); }
.way__stamp small { font-family: var(--f-mono); font-size: max(.6rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; }
.way__stamp b { font-family: var(--f-display); font-weight: 480; font-size: 1.6rem; line-height: 1; letter-spacing: -.03em; }
.way__stamp--tomato b { font-size: 1.28rem; }
.way__stamp--tomato { background: color-mix(in srgb, var(--tomato) 82%, var(--ink)); box-shadow: 0 14px 26px -12px rgba(30,43,34,.6), inset 0 0 0 4px color-mix(in srgb, var(--tomato) 82%, var(--ink)), inset 0 0 0 5.5px rgba(251,247,240,.7); }
.way__stamp--marigold { background: var(--marigold); color: var(--ink); box-shadow: 0 14px 26px -12px rgba(30,43,34,.6), inset 0 0 0 4px var(--marigold), inset 0 0 0 5.5px rgba(30,43,34,.45); }
.way__stamp--sage { background: var(--sage); box-shadow: 0 14px 26px -12px rgba(30,43,34,.6), inset 0 0 0 4px var(--sage), inset 0 0 0 5.5px rgba(251,247,240,.7); }
.way__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .55rem; padding: clamp(1.2rem, 2.2vw, 2rem); }
.way__kicker { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--honey); }
.way__title { font-family: var(--f-display); font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1; letter-spacing: -.035em; }
.way__desc { max-width: 36ch; color: rgba(251,247,240,.9); line-height: 1.5; }
.way__go { display: inline-flex; align-items: center; gap: .6rem; margin-top: .4rem; font-weight: 600; }
.way__go svg { width: 1.1rem; transition: transform .5s var(--ease-out); }
.way:hover .way__go svg { transform: translateX(6px); }
/* desktop: the story slides up when a panel opens */
@media (min-width: 761px) {
  .way__desc, .way__go { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .6s var(--ease-out); }
  .ways:not(:hover):not(:focus-within) .way:first-child :is(.way__desc, .way__go), .way:hover :is(.way__desc, .way__go), .way:focus-visible :is(.way__desc, .way__go) { opacity: 1; transform: none; transition-delay: .18s; }
}
@media (max-width: 1000px) and (min-width: 761px) { .way__stamp { width: 5rem; } .way__stamp b { font-size: 1.3rem; } }
@media (max-width: 760px) {
  .ways { flex-direction: column; height: auto; }
  .way { min-height: 380px; }
  .way__num { font-size: 4.2rem; }
  .way__stamp { width: 5.2rem; }
  .way__stamp b { font-size: 1.35rem; }
}
html.reduce-motion .way, html.reduce-motion .way > img, html.reduce-motion .way__stamp { transition: none; }

/* Monday pick-up: a turning plate with the pick-up time circling it, and a big live countdown */
.pickup-band { padding-block: clamp(2.4rem, 5vw, 4rem); overflow: hidden; }
.pickup-band__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem clamp(2rem, 4vw, 3.5rem); }
.plate { position: relative; width: clamp(170px, 18vw, 240px); aspect-ratio: 1; }
.plate__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: plate-spin 26s linear infinite; }
.plate__ring text { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; fill: var(--honey); }
.plate__dish { position: absolute; inset: 17%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px var(--bone), 0 0 0 7px rgba(30,43,34,.15), 0 24px 40px -16px rgba(30,43,34,.65); animation: plate-spin 60s linear infinite reverse; }
.plate__dish img { width: 100%; height: 100%; object-fit: cover; }
@keyframes plate-spin { to { transform: rotate(360deg); } }
html.reduce-motion .plate__ring, html.reduce-motion .plate__dish { animation: none; }
.pickup-count { display: grid; gap: .6rem; margin-top: 1.1rem; }
.pickup-count__when { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--honey); }
.pickup-count__digits { display: flex; gap: .6rem; }
.pickup-count__digits[hidden] { display: none; }
.pickup-count__digits > span { display: grid; justify-items: center; min-width: 4.4rem; padding: .55rem .7rem .5rem; border-radius: .9rem; background: rgba(251,247,240,.1); border: 1px solid rgba(251,247,240,.28); overflow: hidden; }
.pickup-count__digits b { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.04em; color: var(--paper); display: inline-block; }
.pickup-count__digits b.is-tick { animation: tick .5s var(--ease-out); }
.pickup-count__digits small { font-family: var(--f-mono); font-size: max(.6rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--honey); margin-top: .3rem; }
.pickup-count__now { font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--honey); }
@media (max-width: 1000px) {
  .pickup-band__inner { grid-template-columns: auto minmax(0, 1fr); }
  .pickup-band__inner > .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .pickup-band__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pickup-band__inner > .btn { justify-self: stretch; }
  .pickup-band .eyebrow { justify-content: center; }
  .pickup-count { justify-items: center; }
  .plate { width: 200px; }
}
/* countdown text on sage is cream for contrast; gold stays on the big title and the ring */
.pickup-count__when, .pickup-count__now, .pickup-count__digits small { color: var(--paper); }
/* the digit boxes sit on plain sage so their labels keep full contrast */
.pickup-count__digits > span { background: transparent; }

/* Friday dinners: one real photo of guests at a Jamrock dinner, above the sample menus (Nov 2) */
.fri-photo { max-width: 1180px; margin: 0 auto clamp(2rem, 4vw, 3rem); aspect-ratio: 21 / 9; border-radius: var(--r-lg); }
@media (max-width: 760px) { .fri-photo { aspect-ratio: 4 / 3; } }

/* Meal prep: the core five, each with its photo (Nov 3) */
.macros { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.macro { padding: 0 0 1.2rem; overflow: hidden; gap: .7rem; }
.macro > :not(.macro__photo) { padding-inline: 1.1rem; }
.macro__photo { aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.macro__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.macro:hover .macro__photo img { transform: scale(1.05); }
.macro__name { font-size: 1.12rem; min-height: 2.5em; }
.macro__big b { font-size: clamp(2.6rem, 3.6vw, 3.4rem); }
html.reduce-motion .macro__photo img { transition: none; }
@media (max-width: 1100px) { .macros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .macros { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .macro > :not(.macro__photo) { padding-inline: .8rem; }
  .macro__name { font-size: 1rem; min-height: 2.4em; }
  .macro__big b { font-size: 2.3rem; }
  .macro__sides { font-size: .8rem; }
}
@media (max-width: 640px) { .macro:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); } }

/* Meal prep picker (Nov 3): big overhead photo of the chosen box, the five as a menu, live macro bars.
   Small text on the sage band stays cream (honey only on big numbers and icons) for contrast. */
.picker { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: center; margin-top: clamp(1.8rem, 3.5vw, 3rem); }
.picker__stage { position: relative; aspect-ratio: 1; max-width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px rgba(242,212,155,.25), 0 0 0 12px rgba(251,247,240,.06), 0 50px 90px -40px rgba(30,43,34,.7); }
.picker__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease-out), transform 1.2s var(--ease-out); }
.picker__shot.is-on { opacity: 1; transform: none; }
.picker__shot img { width: 100%; height: 100%; object-fit: cover; }
.picker__stamp { position: absolute; z-index: 2; right: 1.4rem; top: 1.4rem; width: 7.2rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; background: var(--marigold); color: var(--ink); transform: rotate(8deg); box-shadow: 0 16px 30px -12px rgba(30,43,34,.55), inset 0 0 0 5px var(--marigold), inset 0 0 0 6.5px rgba(30,43,34,.4); }
.picker__stamp b { font-family: var(--f-display); font-weight: 450; font-size: 2.6rem; line-height: .9; letter-spacing: -.04em; }
.picker__stamp small { font-family: var(--f-mono); font-size: max(.6rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; }
.picker__caption { position: absolute; z-index: 2; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; margin: 0; }
.picker__caption span { display: inline-block; padding: .55rem 1.05rem; border-radius: 999px; background: rgba(251,247,240,.94); color: var(--ink); font-family: var(--f-display); font-size: 1.1rem; letter-spacing: -.01em; box-shadow: 0 10px 24px -14px rgba(30,43,34,.5); }
.picker__hint { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); margin: 0 0 .8rem; }
.picker__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.pick { width: 100%; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .5rem 1.15rem .5rem .5rem; border-radius: 999px; border: 1px solid rgba(251,247,240,.2); color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; transition: background .35s, border-color .35s, color .35s, transform .35s var(--ease-out); }
.pick:hover { background: rgba(251,247,240,.08); transform: translateX(4px); }
.pick.is-on { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: none; }
.pick__thumb { width: 3.4rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--paper); }
.pick__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.pick__name { font-family: var(--f-display); font-size: 1.12rem; letter-spacing: -.015em; line-height: 1.15; display: grid; gap: .2rem; }
.pick__name small { font-family: var(--f-mono); font-size: max(.62rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; }
.pick.is-on .pick__name small { color: var(--sage); }
.pick__p { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); white-space: nowrap; }
.pick__p b { font-family: var(--f-display); font-weight: 450; font-size: 1.7rem; letter-spacing: -.03em; color: var(--honey); }
.pick.is-on .pick__p b { color: var(--sage); }
.picker__detail { margin-top: 1.4rem; padding: 1.3rem 1.4rem; border-radius: var(--r); background: rgba(251,247,240,.07); border: 1px solid rgba(251,247,240,.16); display: grid; gap: 1rem; }
.bars { display: grid; gap: .7rem; }
.bar { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 3.8rem; align-items: center; gap: .9rem; }
.bar__label { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; }
.bar__track { height: .7rem; border-radius: 999px; background: rgba(251,247,240,.16); overflow: hidden; }
.bar__track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--honey); transition: width .9s var(--ease-out); }
.bar--c .bar__track i { background: var(--paper); }
.bar--f .bar__track i { background: var(--marigold); }
.bar em { font-style: normal; text-align: right; font-size: .95rem; }
.bar em b { font-family: var(--f-display); font-weight: 450; font-size: 1.3rem; }
.picker__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; font-size: .95rem; padding-top: .9rem; border-top: 1px solid rgba(251,247,240,.16); }
.picker__facts b { font-family: var(--f-display); font-weight: 450; font-size: 1.3rem; }
.picker__inside { margin: 0; display: grid; gap: .25rem; font-size: .95rem; }
.picker__inside-label { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; }
.picker b.is-tick { display: inline-block; animation: tick .45s var(--ease-out); }
.prep-perks { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.prep-perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; padding-top: 1rem; border-top: 1px solid rgba(251,247,240,.22); font-size: .92rem; }
.prep-perks svg { width: 1.6rem; height: 1.6rem; color: var(--honey); }
.prep-perks b { display: block; font-family: var(--f-display); font-weight: 450; font-size: 1.12rem; margin-bottom: .15rem; }
html.reduce-motion .picker__shot, html.reduce-motion .pick, html.reduce-motion .bar__track i, html.reduce-motion .pick__thumb img { transition: none; }
@media (max-width: 900px) {
  .picker { grid-template-columns: 1fr; }
  .prep-perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .picker__stamp { width: 6.4rem; right: .9rem; top: .9rem; }
  .picker__stamp small { letter-spacing: .08em; }
  .picker__stamp b { font-size: 2rem; }
  .picker__caption span { font-size: 1rem; }
  .pick { grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: .7rem; padding-right: .9rem; }
  .pick__thumb { width: 2.8rem; }
  .pick__name { font-size: 1rem; }
  .pick__p b { font-size: 1.4rem; }
  .bar { grid-template-columns: 3.9rem minmax(0, 1fr) 3.4rem; gap: .6rem; }
  .prep-perks { grid-template-columns: 1fr; }
}

/* Meal prep on light mist instead of solid green (Chris, Nov 3): green becomes the accent */
.s-mist { background: var(--mist); }
.s-mist .picker__stage { box-shadow: 0 0 0 1px rgba(30,43,34,.08), 0 50px 90px -46px rgba(30,43,34,.45); }
.s-mist .picker__hint { color: var(--muted); }
.s-mist .pick { border-color: rgba(30,43,34,.14); background: var(--bone); }
.s-mist .pick:hover { background: var(--paper); border-color: rgba(87,122,64,.5); }
.s-mist .pick.is-on { background: var(--sage); color: var(--paper); border-color: var(--sage); box-shadow: 0 18px 36px -24px rgba(44,63,49,.7); }
.s-mist .pick__name small { color: var(--muted); }
.s-mist .pick.is-on .pick__name small { color: var(--paper); }
.s-mist .pick__p b { color: var(--sage); }
.s-mist .pick.is-on .pick__p b { color: var(--paper); }
.s-mist .pick__thumb { box-shadow: 0 0 0 2px var(--paper); }
.s-mist .picker__detail { background: var(--bone); border-color: rgba(30,43,34,.1); box-shadow: 0 24px 50px -36px rgba(30,43,34,.4); }
.s-mist .bar__label, .s-mist .picker__inside-label { color: var(--muted); }
.s-mist .bar__track { background: rgba(30,43,34,.08); }
.s-mist .bar--p .bar__track i { background: var(--sage); }
.s-mist .bar--c .bar__track i { background: var(--marigold); }
.s-mist .bar--f .bar__track i { background: var(--tomato); }
.s-mist .picker__facts { border-top-color: rgba(30,43,34,.1); }
.s-mist .picker__facts b { color: var(--sage); }
.s-mist .prep-perks li { border-top-color: rgba(30,43,34,.14); color: var(--muted); }
.s-mist .prep-perks b { color: var(--ink); }
.s-mist .prep-perks svg { color: var(--sage); }

/* Footer, compact (Chris, Nov 3: "so unnecessarily big"). On computers the sign-up and the link columns share one row
   instead of two stacked tiers; phones just lose some padding. */
@media (min-width: 1001px) {
  .footer > .wrap:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(2.5rem, 4vw, 4rem); padding-block: 3rem 2.2rem; }
  .footer__intro { grid-template-columns: 1fr; align-items: start; gap: 1.1rem; padding: 0; border-bottom: 0; }
  .footer__lead { font-size: clamp(1.9rem, 2.3vw, 2.35rem); }
  .footer__top { padding: 0; gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  .footer ul { gap: .35rem; }
  .footer__follow { margin-top: .4rem; }
  .footer__bottom { padding-block: 1.1rem; }
}
@media (max-width: 760px) {
  .footer__intro { gap: 1.4rem; padding-block: 2.4rem 1.6rem; }
  .footer__top { gap: 1.2rem; padding-block: 1.6rem; }
  .footer__bottom { padding-block: 1rem; gap: .2rem 1rem; }
}
@media (min-width: 1001px) {
  .footer > .wrap:first-child { grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.4fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.55fr); }
  .footer__top li, .footer__top p { font-size: .95rem; }
  .footer__explore ul { column-gap: 1rem; }
}
@media (max-width: 760px) {
  .footer__follow { flex-wrap: nowrap; gap: .6rem; margin-top: 1rem; }
  .footer .socials a { width: 2.6rem; height: 2.6rem; }
  .footer__handle { font-size: .74rem; white-space: nowrap; }
  .footer .news__fine { font-size: .8rem; line-height: 1.45; }
}

/* the social links now sit under the address in the Visit column, so both halves of the footer end level */
.footer__top .footer__follow { margin-top: 1.2rem; gap: .6rem .9rem; }
/* social links live in the bottom bar now (between the copyright and Motion) */
.footer__bottom { align-items: center; }
.footer__bottom .footer__follow { margin: 0; gap: .5rem .8rem; flex-wrap: nowrap; }
.footer__bottom .socials a { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; }
.footer__bottom .socials svg { width: 1rem; height: 1rem; }
.footer__bottom .footer__handle { font-size: max(.72rem, var(--min-text)); }
@media (min-width: 1001px) {
  .footer__intro .form__fields { gap: .7rem; }
  .footer__intro .footer__label { margin: 0; }
  .footer__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.4fr); }
}
/* "Cook with Chef David. / Or let him cook for you." is longer than the old line: keep it to two lines everywhere */
@media (min-width: 1001px) { .footer__lead { font-size: clamp(1.75rem, 2.2vw, 2.02rem); } }
@media (max-width: 760px) { .footer__lead { font-size: clamp(1.6rem, 7.4vw, 2rem); } }



/* ==========================================================================
   Home v5 (Nov 3). Chris on v4: "everything is just white", the hero had to go, keep the credentials, the
   ticket rail and Four ways, footer not white either. So the rail lives in a green hero over his kitchen photo,
   and the page alternates: green hero, mist credentials, light Four ways, green chef, light Visit, green footer.
   v4 styles are in scratchpad backup-home-v4/main.css.
   ========================================================================== */

/* Hero: brand green over his kitchen, cream headline, this week's tickets on the rail along the bottom */
.hz { position: relative; overflow: hidden; padding-top: calc(var(--header-h) + 34px + clamp(2.5rem, 6vw, 4.5rem)); background: var(--sage); color: var(--paper); }
.hz__bg { position: absolute; inset: 0; z-index: 0; }
.hz__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(.35) contrast(1.05); }
.hz__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(87, 122, 64, .84) 0%, rgba(87, 122, 64, .9) 55%, rgba(74, 104, 54, .96) 100%); }
.hz__head { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.hz__eyebrow { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; }
.hz__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.7rem, 6.4vw, 6.8rem); line-height: .92; letter-spacing: -.045em; font-variation-settings: "SOFT" 30, "WONK" 0; text-wrap: balance; }
.hz__title em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--honey); white-space: nowrap; }
.hz__lede { max-width: 46ch; margin-inline: auto; font-size: var(--fs-lede); line-height: 1.55; }
.hz__btns { justify-content: center; }
.hz .btn--ghost { --hover-bg: var(--paper); --hover-fg: var(--ink); }
.hz__rail { position: relative; z-index: 1; margin-top: clamp(2.8rem, 5vw, 4rem); }
.hz__railhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; margin-bottom: 1.1rem; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; }
.hz__railhead a { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: 2px; border-bottom: 1px solid currentColor; color: var(--paper); }
.hz__railhead svg { width: 1rem; }

/* v6: the rail on its own green band under the original hero */
.hz-rail { position: relative; overflow: hidden; padding-top: clamp(2.4rem, 4vw, 3.2rem); background: linear-gradient(180deg, var(--sage), #4f7039); color: var(--paper); }
.hz-rail .hz__rail { margin-top: 0; }

/* The rail and its tickets */
.rl__scroll { overflow-x: auto; padding-bottom: clamp(2.5rem, 4vw, 3.5rem); scrollbar-width: none; }
.rl__scroll::-webkit-scrollbar { display: none; }
.rl__tickets { position: relative; list-style: none; display: flex; gap: clamp(.9rem, 1.6vw, 1.4rem); width: max-content; margin: 0 auto; padding: 0 var(--gutter); }
.rl__tickets::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 16px; border-radius: 999px; background: linear-gradient(#eef1ea, #b3bcae 55%, #dbe0d7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 5px 10px rgba(20, 30, 22, .3); }
.rt { flex: none; width: clamp(11.5rem, 15vw, 13rem); padding-top: 9px; color: var(--ink); transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 0; filter: drop-shadow(0 16px 16px rgba(20, 30, 22, .28)); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.rt:hover, .rt:focus-within { transform: rotate(0deg) translateY(4px); }
.rt--class { --dot: var(--sage); } .rt--dinner { --dot: var(--tomato); } .rt--pickup { --dot: var(--marigold); } .rt--camp { --dot: var(--honey); }
.rt__paper { display: flex; flex-direction: column; gap: .45rem; min-height: 15.5rem; padding: 1.2rem 1.05rem 1.6rem; background: var(--bone); color: var(--ink); font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); line-height: 1.45;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; }
.rt__head { display: flex; justify-content: space-between; gap: .5rem; padding-bottom: .6rem; border-bottom: 1px dashed rgba(30, 43, 34, .35); font-size: max(.62rem, var(--min-text)); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.rt__head span:first-child::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: var(--dot, var(--sage)); vertical-align: .05em; }
.rt__when { margin-top: .3rem; font-family: var(--f-display); font-size: 1.55rem; line-height: 1; letter-spacing: -.03em; }
.rt__when b { font-weight: 400; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--sage-ink); }
.rt__title { font-family: var(--f-display); font-size: 1.1rem; line-height: 1.15; letter-spacing: -.01em; }
.rt__meta { color: var(--muted); }
.rt__go { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .7rem; border-top: 1px dashed rgba(30, 43, 34, .35); font-family: var(--f-sans); font-size: .85rem; font-weight: 600; }
.rt__go svg { width: 1rem; transition: transform .4s var(--ease-out); }
.rt:hover .rt__go svg { transform: translateX(3px); }
html.reduce-motion .rt { transition: none; }

/* The résumé in one quiet line, on mist so it bridges the green hero and the light page */
.hm-creds { background: var(--mist); }
.hm-creds__row { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.45rem; }
.hm-creds__row li { display: grid; gap: .2rem; }
.hm-creds__row b { font-family: var(--f-display); font-weight: 400; font-style: italic; font-size: clamp(1.1rem, 1.4vw, 1.3rem); letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--sage-ink); }
.hm-creds__row span { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Four ways: menu rows on the left, one big photo on the right that changes with the row */
.hm-svc__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.hm-svc__rows { list-style: none; padding: 0; margin-top: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid var(--line); }
.hm-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; grid-template-areas: "when name go" ". desc go"; gap: .5rem 1.5rem; align-items: center; padding-block: clamp(1.3rem, 2vw, 1.8rem); border-bottom: 1px solid var(--line); color: var(--ink); transition: opacity .45s var(--ease-out); }
.hm-row__img { display: none; }
.hm-row__when { grid-area: when; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hm-row__name { grid-area: name; font-family: var(--f-display); font-size: clamp(1.8rem, 2.9vw, 2.9rem); line-height: 1; letter-spacing: -.035em; font-variation-settings: "SOFT" 30, "WONK" 0; transition: transform .6s var(--ease-out), color .4s; }
.hm-row__desc { grid-area: desc; max-width: 46ch; color: var(--muted); font-size: .98rem; line-height: 1.5; }
.hm-row__go { grid-area: go; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: 50%; transition: background .4s, border-color .4s, transform .5s var(--ease-out); }
.hm-row__go svg { width: 1.1rem; }
.hm-row.is-on .hm-row__name { transform: translateX(.5rem); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--sage-ink); }
.hm-row.is-on .hm-row__go { background: var(--marigold); border-color: var(--marigold); transform: rotate(-45deg); }
@media (hover: hover) { .hm-svc__rows:hover .hm-row:not(.is-on) { opacity: .5; } }
.hm-svc__stage { position: sticky; top: calc(var(--header-h) + 1.5rem); width: 100%; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 3rem); margin-top: .5rem; border-radius: var(--r-lg); overflow: hidden; background: var(--mist); }
.hm-svc__shot { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease) .9s; }
.hm-svc__shot.is-on { z-index: 2; clip-path: inset(0 0 0 0); transition-delay: 0s; }
.hm-svc__shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease-out) .9s; }
.hm-svc__shot.is-on img { transform: scale(1); transition-delay: 0s; }
.hm-svc__tag { position: absolute; z-index: 3; left: 1rem; bottom: 1rem; padding: .55rem .95rem; border-radius: 999px; background: var(--bone); color: var(--ink); font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; }
html.reduce-motion .hm-svc__shot, html.reduce-motion .hm-svc__shot img, html.reduce-motion .hm-row__name { transition: none; }

/* The chef, on a green band: the enhanced portrait with the play button in the middle */
.hm-chef { background: var(--sage); color: var(--paper); --line: var(--line-dark); }
.hm-chef .eyebrow, .hm-chef .muted, .hm-chef .arrow-link { color: var(--paper); }
.hm-chef .h2 em { --accent-text: var(--honey); }
.hm-chef__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hm-chef__tv { position: relative; display: block; border-radius: var(--r-lg); }
.hm-chef__screen { display: block; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--r-lg); background: var(--forest); box-shadow: 0 40px 70px -40px rgba(20, 30, 22, .55); }
.hm-chef__screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hm-chef__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(4.4rem, 6.5vw, 6rem); aspect-ratio: 1; margin: calc(clamp(4.4rem, 6.5vw, 6rem) / -2) 0 0 calc(clamp(4.4rem, 6.5vw, 6rem) / -2); border-radius: 50%; background: var(--marigold); color: var(--ink); box-shadow: 0 0 0 10px rgba(226, 162, 59, .32), 0 20px 40px -12px rgba(20, 30, 22, .5); }
.hm-chef__play svg { width: 38%; margin-left: 8%; fill: currentColor; transition: transform .4s var(--ease-out); }
.hm-chef__tv:hover .hm-chef__play svg { transform: scale(1.15); }
.hm-chef__text { display: grid; gap: 1.4rem; justify-items: start; }
.hm-chef__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

/* Contact rows: green emblems with a marigold ring instead of black dots (every page that has them) */
.contact-item__icon { position: relative; background: var(--sage); color: var(--paper); box-shadow: 0 0 0 4px var(--bone), 0 0 0 5.5px var(--marigold); transition: background .4s, color .4s, transform .6s var(--ease-out); }
.contact-item:hover .contact-item__icon { background: var(--marigold); color: var(--ink); transform: rotate(-12deg) scale(1.06); }

/* Footer: brand green again, now that the hero is green too, in the lighter v4 layout */
.sf { position: relative; background: var(--sage); color: var(--paper); --line: rgba(251, 247, 240, .24); }
.sf__main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.35fr); gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 3.5vw, 3rem); }
.sf__brand { display: grid; gap: 1.2rem; align-content: start; justify-items: start; }
.sf__logo { color: var(--paper); }
.sf .logo__sub { opacity: 1; }
.sf__lead { max-width: 18ch; font-family: var(--f-display); font-size: clamp(1.55rem, 1.9vw, 1.85rem); line-height: 1.12; letter-spacing: -.02em; }
.sf__lead em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--honey); }
.sf__h { display: block; margin-bottom: 1rem; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.sf__h::before { content: ""; display: inline-block; width: .42rem; height: .42rem; margin-right: .55rem; border-radius: 50%; background: var(--honey); vertical-align: .1em; }
.sf__col ul { list-style: none; display: grid; gap: .55rem; padding: 0; font-size: .95rem; }
.sf__col a { color: var(--paper); transition: color .3s; }
.sf__col a:hover { color: var(--honey); }
.sf__links { grid-template-columns: auto auto; justify-content: start; column-gap: 2.4rem; white-space: nowrap; }
.sf__socials { margin-top: 1.3rem; }
.sf .socials a { color: var(--paper); }
.sf__fold > summary { list-style: none; }
.sf__fold > summary::-webkit-details-marker { display: none; }
.sf__news { width: 100%; max-width: 24rem; margin-top: .4rem; }
.sf .news__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: .3rem .3rem .3rem 1.1rem; border: 1px solid rgba(251, 247, 240, .4); border-radius: 999px; background: rgba(30, 43, 34, .16); }
.sf .news input { padding: .55rem 0; color: var(--paper); }
.sf .news input::placeholder { color: rgba(251, 247, 240, .85); }
.sf .news button { padding: .65rem 1.1rem; border-radius: 999px; background: var(--marigold); color: var(--ink); font-size: .88rem; transition: background .3s; }
.sf .news button:hover { background: var(--paper); }
.sf .news__fine { margin-top: .6rem; font-size: .78rem; color: var(--paper); }
.sf__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; padding-block: 1.4rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--paper); }
.sf__bottom a { color: inherit; }
.sf .motion-toggle { text-decoration-color: var(--honey); }
.sf__end { display: inline-flex; align-items: center; gap: 1.4rem; }

/* Laptops and tablets */
@media (max-width: 1000px) {
  .sf__main { grid-template-columns: 1fr 1fr 1fr; }
  .sf__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hm-svc__grid, .hm-chef__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-svc__stage { display: none; }
  .hm-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "img img" "when go" "name go" "desc desc"; gap: .45rem 1rem; }
  .hm-row__img { display: block; grid-area: img; aspect-ratio: 16 / 10; margin-bottom: .8rem; overflow: hidden; border-radius: var(--r); }
  .hm-row__img img { width: 100%; height: 100%; object-fit: cover; }
  .hm-row.is-on .hm-row__name { transform: none; font-style: normal; font-variation-settings: "SOFT" 30, "WONK" 0; color: inherit; }
  .hm-row.is-on .hm-row__go { transform: none; background: transparent; border-color: var(--line); }
}

/* Phones */
@media (max-width: 760px) {
  .hz { padding-top: calc(var(--header-h) + 34px + 2.2rem); }
  .hz__head { gap: 1.2rem; }
  .hz__title { font-size: clamp(2.45rem, 11vw, 3.4rem); }
  .hz__railhead { justify-content: center; text-align: center; }
  .rt { width: 11.5rem; }
  .hm-creds__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
  .sf__main { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sf__brand { padding-bottom: 2rem; }
  .sf__col { padding-block: 1.1rem; border-top: 1px solid var(--line); }
  .sf__fold > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  .sf__fold > summary .sf__h { margin: 0; }
  .sf__fold > summary::after { content: ""; width: .55rem; height: .55rem; margin-right: .3rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s; }
  .sf__fold[open] > summary { margin-bottom: 1rem; }
  .sf__fold[open] > summary::after { transform: rotate(-135deg); }
  .sf__bottom { flex-direction: column; align-items: flex-start; }
  .sf__bottom a, .sf__bottom .motion-toggle { display: inline-block; padding-block: .45rem; }
}

/* ==========================================================================
   Home v7 (Nov 3). No section labels; "This week at Jamrock" as a handwritten note whose arrow draws itself;
   a career timeline in the chef band; a marigold catering band with three prints; his Instagram photos;
   Visit on mist with a live "today" chip; and a footer in two even rows. v6 is in scratchpad backup-home-v6.
   ========================================================================== */

/* "This week at Jamrock", handwritten, with an arrow that draws down toward the tickets */
.hz__railhead { align-items: flex-end; }
.rail-note { display: inline-flex; align-items: flex-start; gap: .35rem; margin: 0; font-family: var(--f-hand); font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--honey); transform: rotate(-3deg); transform-origin: 0 100%; }
.rail-note__text { display: inline-block; padding: .05em .1em .15em 0; }
.rail-note__arrow { flex: none; width: clamp(3.6rem, 5vw, 5rem); margin-top: .55em; }

/* Ink button for the marigold band */
.btn--ink { --bg: var(--ink); --fg: var(--paper); --hover-bg: var(--paper); --hover-fg: var(--ink); }

/* Chef band: his whole career as a line that fills in as you scroll */
.tl { --p: 1; position: relative; list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.3rem; margin-top: clamp(3rem, 5vw, 4.5rem); padding: 2.4rem 0 0; }
.tl::before, .tl::after { content: ""; position: absolute; left: 0; right: 0; top: .5rem; height: 2px; border-radius: 2px; }
.tl::before { background: rgba(251, 247, 240, .28); }
.tl::after { background: var(--honey); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.tl li { position: relative; display: grid; gap: .4rem; align-content: start; }
.tl li::before { content: ""; position: absolute; left: 0; top: -2.4rem; width: 1.05rem; height: 1.05rem; border: 2px solid var(--honey); border-radius: 50%; background: var(--sage); }
.tl b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.35rem, 1.75vw, 1.8rem); line-height: 1; letter-spacing: -.03em; color: var(--paper); }
.tl li:nth-child(odd) b { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.tl span { font-size: .88rem; line-height: 1.4; color: var(--paper); }

/* Catering: marigold band, three prints fanned out on the right */
.hm-cater { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem); background: var(--marigold); color: var(--ink); }
.hm-cater__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.hm-cater__text { display: grid; gap: 1.5rem; justify-items: start; }
.hm-cater__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.5rem, 4.8vw, 4.8rem); line-height: .95; letter-spacing: -.04em; font-variation-settings: "SOFT" 30, "WONK" 0; text-wrap: balance; }
.hm-cater__title em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--forest); }
.hm-cater__lede { max-width: 42ch; font-size: var(--fs-lede); line-height: 1.55; }
.hm-cater__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.hm-cater__call { padding-bottom: 2px; border-bottom: 1.5px solid currentColor; font-weight: 600; color: var(--ink); }
.hm-cater__prints { position: relative; height: clamp(330px, 34vw, 470px); }
.hm-print { position: absolute; width: 50%; margin: 0; padding: .6rem .6rem 2.4rem; background: var(--bone); box-shadow: 0 30px 50px -25px rgba(30, 43, 34, .5); }
.hm-print img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.hm-print--1 { left: 0; top: 10%; transform: rotate(-8deg); }
.hm-print--2 { left: 25%; top: 0; z-index: 2; transform: rotate(3deg); }
.hm-print--3 { right: 0; top: 16%; transform: rotate(9deg); }

/* Straight from his kitchen: one big photo and four small ones, all linking to his Instagram */
.hm-gram { background: var(--paper); }
.hm-gram__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.2rem 2rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.hm-gram__head .btn svg { width: 1.1rem; }
.hm-gram__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 250px); gap: clamp(.6rem, 1.2vw, 1rem); }
.hm-gram__big { grid-column: span 2; grid-row: span 2; }
.hm-gram__grid a { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--r); background: var(--mist); }
.hm-gram__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hm-gram__grid a::after { content: ""; position: absolute; inset: 0; background: rgba(87, 122, 64, .3); opacity: 0; transition: opacity .4s; }
.hm-gram__grid a:hover img { transform: scale(1.06); }
.hm-gram__grid a:hover::after { opacity: 1; }
html.reduce-motion .hm-gram__grid img { transition: none; }

/* Visit: on mist, a live "today" chip on the storefront and a handwritten note under it */
.hm-visit { background: var(--mist); }
.hm-visit .contact-item__icon { box-shadow: 0 0 0 4px var(--mist), 0 0 0 5.5px var(--marigold); }
.hm-visit__photo { position: relative; width: 100%; max-width: 520px; }
.hm-visit__today { position: absolute; z-index: 2; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: .55rem; max-width: calc(100% - 2rem); padding: .55rem .95rem; border-radius: 999px; background: var(--bone); color: var(--ink); font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 24px -12px rgba(30, 43, 34, .45); }
.hm-visit__note { display: flex; align-items: flex-start; gap: .3rem; margin: .9rem 0 0 .4rem; font-family: var(--f-hand); font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--sage-ink); transform: rotate(-3deg); }
.hm-visit__note svg { width: 3.2rem; transform: scaleY(-1); }

/* Footer: logo and slogan beside the signup, then four even columns */
.sf__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; padding-block: clamp(3rem, 5vw, 4rem) clamp(2rem, 3.5vw, 2.8rem); border-bottom: 1px solid var(--line); }
.sf__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem; }
.sf__news { justify-self: end; width: 100%; max-width: 30rem; margin: 0; }
.sf__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, .75fr); gap: clamp(1.5rem, 3vw, 3rem); padding-block: clamp(2.2rem, 4vw, 3rem); }
.sf__links { column-gap: 1.4rem; }
.sf__socials { margin-top: 0; }
.sf__handle { display: inline-block; margin-top: .9rem; font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .06em; color: var(--paper); }
.sf__handle:hover { color: var(--honey); }

@media (max-width: 1000px) {
  .sf__top { grid-template-columns: minmax(0, 1fr); }
  .sf__news { justify-self: start; }
  .sf__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sf__brand { grid-column: auto; }
}
@media (max-width: 900px) {
  .hm-cater__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-cater__prints { height: clamp(260px, 62vw, 380px); }
  .hm-print { width: 46%; padding: .45rem .45rem 1.8rem; }
  .hm-print--1 { left: 2%; }
  .hm-print--2 { left: 27%; }
  .hm-print--3 { right: 2%; }
  .tl { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; padding: 0 0 0 2.2rem; }
  .tl::before, .tl::after { left: .5rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .tl::after { transform: scaleY(var(--p)); transform-origin: 50% 0; }
  .tl li::before { left: -2.2rem; top: .15rem; }
  .tl li { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: 1rem; }
}
@media (max-width: 760px) {
  .rail-note { font-size: 2rem; }
  .rt { width: 10.25rem; }
  .rt__paper { min-height: 14rem; }
  .hm-gram__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 42vw; }
  .hm-gram__big { grid-column: span 2; grid-row: span 1; }
  .sf__main { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: .5rem 1rem; }
  .sf__brand { flex-direction: column; align-items: flex-start; }
}

/* Nov 3 (v8): the five credentials sit on the hero's bottom line instead of a strip under the rail.
   That line is hidden on phones, so the credentials version shows there as a two-column grid. */
.hero__creds { list-style: none; margin-bottom: 0; padding: 1.1rem 0 0; }
.hero__creds b { text-transform: none; }
@media (max-width: 760px) {
  .hero__foot.hero__creds { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
}

/* ==========================================================================
   Home v9 (Nov 3). Chris on v8: not sure about the marigold catering band, and the kitchen gallery was "very basic".
   Catering is now the green-washed photo look he called "almost cool" on the v5 hero; the gallery is two rows that
   glide in opposite directions with scroll and open full screen. v8 is in scratchpad backup-home-v8.
   ========================================================================== */

/* Catering on a green-washed photo */
.hm-cater { background: var(--sage); color: var(--paper); }
.hm-cater__bg { position: absolute; inset: 0; z-index: 0; }
.hm-cater__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
.hm-cater__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(87, 122, 64, .95) 0%, rgba(87, 122, 64, .88) 50%, rgba(74, 104, 54, .9) 100%); }
.hm-cater__grid { position: relative; z-index: 1; }
.hm-cater__title em { color: var(--honey); }
.hm-cater__call { color: var(--paper); }

/* The gallery: two rows of his photos, moving opposite ways as you scroll */
.hm-gal { overflow: hidden; background: var(--paper); }
.hm-gal__rows { display: grid; gap: clamp(.8rem, 1.4vw, 1.2rem); }
.hm-gal__row { list-style: none; display: flex; gap: clamp(.8rem, 1.4vw, 1.2rem); width: max-content; margin: 0; padding: 0; will-change: transform; }
.hm-gal__row:first-child { margin-left: var(--gutter); }
.hm-gal__row:last-child { margin-left: -14vw; }
.hm-gal__item { position: relative; display: block; height: clamp(190px, 22vw, 330px); padding: 0; overflow: hidden; border: 0; border-radius: var(--r-lg); background: var(--mist); cursor: zoom-in; }
.hm-gal__item--w { aspect-ratio: 4 / 3; }
.hm-gal__item--s { aspect-ratio: 1; }
.hm-gal__item--t { aspect-ratio: 3 / 4; }
.hm-gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hm-gal__item:hover img { transform: scale(1.06); }
.hm-gal__item:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
.hm-gal__cap { position: absolute; left: .8rem; bottom: .8rem; padding: .4rem .75rem; border-radius: 999px; background: rgba(251, 247, 240, .95); color: var(--ink); font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease-out); }
.hm-gal__item:hover .hm-gal__cap, .hm-gal__item:focus-visible .hm-gal__cap { opacity: 1; transform: none; }
@media (hover: none) { .hm-gal__cap { opacity: 1; transform: none; } }
html.reduce-motion .hm-gal__item img, html.reduce-motion .hm-gal__cap { transition: none; }

/* Full-screen photo viewer for the gallery */
.lbx { position: fixed; inset: 0; z-index: 9000; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.5rem, 2vw, 1.5rem); padding: clamp(4rem, 6vw, 5rem) clamp(.75rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem); background: rgba(30, 43, 34, .94); color: var(--paper); opacity: 0; transition: opacity .35s; touch-action: pan-y; }
.lbx[hidden] { display: none; }
.lbx.is-open { opacity: 1; }
.lbx__fig { display: grid; justify-items: center; gap: .9rem; min-width: 0; margin: 0; }
.lbx__fig img { max-width: 100%; max-height: calc(100svh - 10rem); border-radius: var(--r); object-fit: contain; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.lbx__fig figcaption { font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.lbx__count { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .1em; opacity: .85; }
.lbx button { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(251, 247, 240, .45); border-radius: 50%; color: var(--paper); transition: background .3s, color .3s; }
.lbx button:hover, .lbx button:focus-visible { background: var(--paper); color: var(--ink); }
.lbx button svg { width: 1.2rem; }
.lbx__close { position: absolute; top: clamp(1rem, 3vw, 1.75rem); right: clamp(1rem, 3vw, 1.75rem); }
.lbx__prev svg { transform: rotate(180deg); }
@media (max-width: 760px) {
  .lbx { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; padding-inline: .75rem; }
  .lbx .lbx__prev, .lbx .lbx__next { display: none; }
  .hm-gal__row:last-child { margin-left: -40vw; }
}

/* ==========================================================================
   Home v10 (Nov 3). Four ways: a highlight that slides to the active row, rows that step forward on their own with
   a gold countdown line, a deck of cards behind the photo, and a facts card on it. The chef timeline's stops light
   up as the gold line reaches them (the section holds still for it on computers). v9 is in scratchpad backup-home-v9.
   ========================================================================== */
.hm-svc__list { position: relative; isolation: isolate; }
.hm-svc__hl { position: absolute; z-index: -1; top: 0; left: -1.2rem; right: -1.2rem; height: 0; border-radius: var(--r); background: var(--mist); opacity: 0; pointer-events: none; transition: transform .6s var(--ease-out), height .6s var(--ease-out), opacity .4s; }
.hm-svc__list.is-auto .hm-svc__hl, .hm-svc__list:hover .hm-svc__hl { opacity: 1; }
.hm-row { position: relative; }
.hm-row__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--marigold); transform: scaleX(0); transform-origin: 0 50%; }
.hm-row.is-run .hm-row__bar { animation: svc-bar var(--step, 5200ms) linear forwards; }
.hm-svc__list.is-held .hm-row__bar { animation-play-state: paused; }
@keyframes svc-bar { to { transform: scaleX(1); } }
.hm-svc__deck { position: sticky; top: calc(var(--header-h) + 1.5rem); margin-top: .5rem; }
.hm-svc__deck::before, .hm-svc__deck::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); transition: transform .9s var(--ease-out); }
.hm-svc__deck::before { background: var(--mist); transform: translate(16px, 12px) rotate(calc(3deg + var(--deck, 0) * 1.3deg)); }
.hm-svc__deck::after { background: rgba(87, 122, 64, .2); transform: translate(-12px, 16px) rotate(calc(-2.5deg - var(--deck, 0) * 1deg)); }
.hm-svc__deck .hm-svc__stage { position: relative; z-index: 1; top: auto; margin-top: 0; box-shadow: 0 30px 60px -40px rgba(30, 43, 34, .55); }
.hm-svc__deck.is-swap .hm-svc__stage { animation: deck-swap .7s var(--ease-out); }
@keyframes deck-swap { from { transform: scale(.985) rotate(-.4deg); } }
.hm-svc__card { position: absolute; z-index: 3; left: 1rem; right: 1rem; bottom: 1rem; display: grid; gap: .25rem; padding: .9rem 1.1rem; border-radius: var(--r); background: rgba(255, 253, 248, .96); color: var(--ink); box-shadow: 0 14px 30px -18px rgba(30, 43, 34, .5); }
.hm-svc__card-when { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink); }
.hm-svc__card-facts { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.2; letter-spacing: -.01em; }
.hm-svc__deck.is-swap .hm-svc__card { animation: card-in .6s var(--ease-out); }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
html.reduce-motion .hm-svc__hl, html.reduce-motion .hm-svc__deck::before, html.reduce-motion .hm-svc__deck::after { transition: none; }
html.reduce-motion .hm-row__bar, html.reduce-motion .hm-svc__deck .hm-svc__stage, html.reduce-motion .hm-svc__card { animation: none !important; }

/* timeline stops light up as the gold line reaches them (main.js tweens --lit from 0 to 1) */
.tl li { --lit: 1; }
.tl li::before { background: color-mix(in srgb, var(--honey) calc(var(--lit) * 100%), var(--sage)); box-shadow: 0 0 0 calc(var(--lit) * 5px) rgba(242, 212, 155, .22); }

@media (max-width: 900px) {
  .hm-svc__hl, .hm-svc__deck { display: none; }
}

/* ==========================================================================
   Home v12 (Nov 3): the phone pass. Chris: "doesn't convert to mobile well". Credentials become a gliding green
   banner, the rail's tickets slide with scroll, Four ways becomes a sticky-photo story, the chef photo goes edge to
   edge (timeline stays on the Chef page), the gallery swipes, catering shows its prints first, Visit reads top to
   bottom, and the footer is shorter. v11 is in scratchpad backup-home-v11.
   ========================================================================== */
.hero__creds .hero__dup, .hm-gal__hint { display: none; }

/* Catering: the kinds of events, as tags (all sizes) */
.hm-cater__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.hm-cater__tags li { padding: .45rem .85rem; border: 1px solid rgba(251, 247, 240, .55); border-radius: 999px; color: var(--paper); font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 760px) {
  /* hero: the five credentials as a slim green banner gliding sideways */
  .hero > .wrap, .hero__inner, .hero__copy { min-width: 0; }
  .hero__credwrap { min-width: 0; max-width: none; margin: 1.6rem calc(var(--gutter) * -1) 0; overflow: hidden; contain: inline-size; background: var(--sage); }
  .hero__foot.hero__creds { display: flex; flex-wrap: nowrap; gap: 0; width: max-content; margin: 0; padding: .85rem 0; border: 0; animation: cred-glide 34s linear infinite; }
  .hero__credwrap:active .hero__creds { animation-play-state: paused; }
  .hero__creds li { display: flex; align-items: baseline; gap: .5rem; padding-inline: 1rem; white-space: nowrap; }
  .hero__creds li::after { content: "\2726"; margin-left: 1rem; color: var(--honey); font-size: .7rem; }
  .hero__creds b { color: var(--paper); font-size: 1.05rem; }
  .hero__creds span { color: var(--paper); font-size: max(.66rem, var(--min-text)); }
  .hero__creds .hero__dup { display: flex; }
  html.reduce-motion .hero__foot.hero__creds { animation: none; }
  html.reduce-motion .hero__credwrap { overflow-x: auto; }

  /* rail: no scroll box; main.js slides the tickets across as you scroll */
  .rl__scroll { overflow: hidden; }
  html.reduce-motion .rl__scroll { overflow-x: auto; }
  .rt { width: 11rem; }

  /* four ways: the photo sticks to the top while the four ways scroll under it and swap it */
  .hm-svc__grid { gap: 1.3rem; }
  .hm-svc__list { display: contents; }
  #svc-title { order: 1; }
  .hm-svc__deck { display: block; order: 2; position: sticky; z-index: 2; top: 0; align-self: start; margin: calc(-1 * (var(--header-h) + .6rem)) calc(var(--gutter) * -1) 0; padding: calc(var(--header-h) + .6rem) var(--gutter) .9rem; background: linear-gradient(var(--paper) 88%, rgba(244, 239, 230, 0)); }
  .hm-svc__deck::before, .hm-svc__deck::after { inset: calc(var(--header-h) + .6rem) var(--gutter) .9rem; }
  .hm-svc__deck::before { transform: translate(8px, 8px) rotate(calc(2deg + var(--deck, 0) * 1deg)); }
  .hm-svc__deck::after { transform: translate(-6px, 10px) rotate(calc(-1.5deg - var(--deck, 0) * .8deg)); }
  .hm-svc__deck .hm-svc__stage { display: block; height: min(40vh, 340px); aspect-ratio: auto; max-height: none; }
  .hm-svc__card { left: .7rem; right: .7rem; bottom: .7rem; padding: .7rem .9rem; }
  .hm-svc__card-facts { font-size: 1rem; }
  .hm-svc__rows { order: 3; margin-top: 0; }
  .hm-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when go" "name go" "desc desc"; padding-block: 2.1rem; }
  .hm-row__img { display: none; }
  .hm-row::before { content: ""; position: absolute; left: -.85rem; top: 2.1rem; bottom: 2.1rem; width: 3px; border-radius: 3px; background: var(--marigold); transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--ease-out); }
  .hm-row.is-on::before { transform: scaleY(1); }
  .hm-row.is-on .hm-row__name { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--sage-ink); }
  .hm-row.is-on .hm-row__go { background: var(--marigold); border-color: var(--marigold); }
  .hm-svc__rows li:last-child .hm-row { margin-bottom: 12vh; }

  /* chef: photo edge to edge at the top of the green band; the history timeline lives on the Chef page */
  .hm-chef { padding-top: 0; }
  .hm-chef .tl { display: none; }
  .hm-chef__tv { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .hm-chef__screen { aspect-ratio: 4 / 3.7; border-radius: 0; box-shadow: none; }
  .hm-chef__links { flex-direction: column; align-items: stretch; }
  .hm-chef__links .btn, .hm-chef__links .arrow-link { justify-content: center; }

  /* gallery: swipe through all twelve */
  .hm-gram__head { align-items: center; }
  .hm-gal__hint { display: block; margin: 0; font-family: var(--f-hand); font-size: 1.5rem; font-weight: 600; color: var(--sage-ink); transform: rotate(-2deg); }
  .hm-gal__rows { overflow-x: auto; padding: 0 var(--gutter) .6rem; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .hm-gal__rows::-webkit-scrollbar { display: none; }
  .hm-gal__row, .hm-gal__row:first-child, .hm-gal__row:last-child { margin-left: 0; }
  .hm-gal__item { height: 46vw; scroll-snap-align: start; }

  /* catering: the prints first, then the words and a full-width button */
  .hm-cater__prints { order: -1; }
  .hm-cater__cta { flex-direction: column; align-items: stretch; }
  .hm-cater__cta .btn { justify-content: center; }
  .hm-cater__call { align-self: center; }

  /* visit: title and words, then the storefront, then the three ways to reach him */
  .hm-visit .visit { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .hm-visit .visit > .stack { display: contents; }
  .hm-visit .visit > .stack > * { margin-top: 0; }
  #visit-title { order: 1; }
  .hm-visit .visit > .stack > p { order: 2; }
  .hm-visit__photo { order: 3; max-width: none; }
  .hm-visit .contact-list { order: 4; }

  /* footer: shorter on phones */
  .sf__top { gap: 1.1rem; padding-block: 2.2rem 1.5rem; }
  .sf__brand { gap: .8rem; }
  .sf__lead { max-width: none; font-size: 1.3rem; }
  .sf__lead em { color: var(--paper); }
  .sf .news__fine { font-size: .74rem; }
  .sf__main { padding-block: 0 .3rem; }
  .sf__col { padding-block: .8rem; }
  .sf__col:first-child ul { gap: .25rem; font-size: .9rem; }
  .sf__col:first-child .sf__h { margin-bottom: .6rem; }
  .sf__col:last-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
  .sf__col:last-child .sf__h { margin: 0; }
  .sf__handle { margin-top: 0; }
  .sf .socials a { width: 2.5rem; height: 2.5rem; }
  .sf__bottom { gap: .1rem; padding-block: .9rem 1.3rem; font-size: .76rem; }
}

/* ==========================================================================
   Home v13 (Nov 3): Chris on the v12 phone pass. Banner frozen (its keyframes were missing) with a gap under it;
   sliding tickets hid the first and last; hated the sticky Four ways photo and the edge-to-edge chef photo;
   didn't get "Fresh off the pass" / "swipe for more"; uneven catering pills; no "come say hi" or tonight pill.
   v12 is in scratchpad backup-home-v12.
   ========================================================================== */
@keyframes cred-glide { to { transform: translateX(-50%); } }
@keyframes gal-loop { to { transform: translateX(-50%); } }
.hm-gal__clone, .hm-chef__facts { display: none; }
.hm-chef__watch svg { width: 1rem; }

@media (max-width: 760px) {
  /* banner sits right on the green rail band: no gap, a shade deeper so it reads as its own strip */
  section.hero.hero { padding-bottom: 0; }
  .hero__credwrap { margin-bottom: 0; background: var(--sage-ink); }


  /* four ways: cards that stack over each other as you scroll (no sticky photo) */
  .hm-svc__list { display: block; }
  .hm-svc .hm-svc__deck { display: none; }
  .hm-svc__rows { display: grid; gap: 1.1rem; margin-top: 1.6rem; border-top: 0; }
  .hm-svc__rows > li { position: sticky; top: calc(var(--header-h) + .8rem); }
  .hm-svc__rows > li:nth-child(2) { top: calc(var(--header-h) + 1.7rem); }
  .hm-svc__rows > li:nth-child(3) { top: calc(var(--header-h) + 2.6rem); }
  .hm-svc__rows > li:nth-child(4) { top: calc(var(--header-h) + 3.5rem); }
  .hm-svc__rows li:last-child .hm-row { margin-bottom: 0; }
  .hm-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "img img" "when go" "name go" "desc desc"; gap: .35rem 1rem; padding: .9rem .9rem 1.4rem; border: 0; border-radius: var(--r-lg); background: var(--bone); box-shadow: 0 -12px 30px -16px rgba(30, 43, 34, .4); }
  .hm-row::before, .hm-row__bar { display: none; }
  .hm-row__img { display: block; grid-area: img; aspect-ratio: 16 / 10; margin-bottom: .75rem; overflow: hidden; border-radius: var(--r); }
  .hm-row__img img { width: 100%; height: 100%; object-fit: cover; }
  .hm-row__name { font-size: 1.9rem; }
  .hm-row.is-on .hm-row__name { transform: none; font-style: normal; font-variation-settings: "SOFT" 30, "WONK" 0; color: inherit; }
  .hm-row.is-on .hm-row__go { transform: none; background: transparent; border-color: currentColor; }
  .hm-row__go { border-color: currentColor; }
  .hm-svc__rows > li:nth-child(1) .hm-row { background: var(--sage); color: var(--paper); }
  .hm-svc__rows > li:nth-child(1) .hm-row__when, .hm-svc__rows > li:nth-child(1) .hm-row__desc { color: var(--paper); }
  .hm-svc__rows > li:nth-child(3) .hm-row { background: var(--mist); }
  .hm-svc__rows > li:nth-child(4) .hm-row { background: var(--sage-ink); color: var(--paper); }
  .hm-svc__rows > li:nth-child(4) .hm-row__when, .hm-svc__rows > li:nth-child(4) .hm-row__desc { color: var(--paper); }

  /* chef: a rounded photo again, three numbers, two proper buttons */
  .hm-chef { padding-top: var(--space-section); }
  .hm-chef__tv { margin-inline: 0; border-radius: var(--r-lg); }
  .hm-chef__screen { aspect-ratio: 4 / 3.5; border-radius: var(--r-lg); box-shadow: 0 30px 50px -30px rgba(20, 30, 22, .55); }
  .hm-chef__facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 0; padding: 1rem 0; border-block: 1px solid rgba(251, 247, 240, .3); }
  .hm-chef__facts li { display: grid; gap: .3rem; padding-inline: .7rem; border-left: 1px solid rgba(251, 247, 240, .3); }
  .hm-chef__facts li:first-child { padding-left: 0; border-left: 0; }
  .hm-chef__facts b { font-family: var(--f-display); font-weight: 400; font-style: italic; font-size: 2rem; line-height: 1; color: var(--honey); font-variation-settings: "SOFT" 100, "WONK" 1; }
  .hm-chef__facts span { font-size: .78rem; line-height: 1.3; color: var(--paper); }
  .hm-chef__links { display: grid; width: 100%; gap: .7rem; }
  .hm-chef__links .btn { width: 100%; justify-content: center; }

  /* gallery: both rows glide on their own (opposite ways) so every photo comes past; touch to hold */
  .hm-gal__rows { overflow: hidden; padding: 0; scroll-snap-type: none; }
  .hm-gal__row, .hm-gal__row:first-child, .hm-gal__row:last-child { gap: .8rem; margin-left: 0; padding-right: .8rem; animation: gal-loop 70s linear infinite; }
  .hm-gal__row:last-child { animation-duration: 82s; animation-direction: reverse; }
  .hm-gal__rows:active .hm-gal__row { animation-play-state: paused; }
  .hm-gal__clone { display: block; }
  .hm-gal__item { height: 44vw; }
  html.reduce-motion .hm-gal__rows { overflow-x: auto; }
  html.reduce-motion .hm-gal__row { animation: none; }
  html.reduce-motion .hm-gal__clone { display: none; }

  /* catering pills: an even two-by-two */
  .hm-cater__tags { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .hm-cater__tags li { text-align: center; padding-inline: .5rem; }

  /* visit: a bigger, warmer title */
  #visit-title { font-size: clamp(2.3rem, 10vw, 2.9rem); line-height: 1; letter-spacing: -.035em; }
  .hm-visit .visit > .stack > p { font-size: 1.02rem; color: var(--ink); }
  .hm-visit__photo { margin-top: .4rem; }
}

/* ==========================================================================
   Home v14 (Nov 3): white credentials banner with chef-hat separators, the single ticket rail back (pinned and
   sliding on phones), swipeable gallery without name pills, centered catering buttons, a "week at Jamrock" card in
   Visit, and prepared-meal reheating steps on the Meals page. v13 is in scratchpad backup-home-v13.
   ========================================================================== */
.hm-gal__cap { display: none; }

/* Visit: a short line and a week-at-a-glance card */
.hm-visit__lede { max-width: 46ch; font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.hm-week { list-style: none; margin: 0; padding: .4rem 1.2rem; border-radius: var(--r); background: var(--bone); box-shadow: 0 18px 40px -30px rgba(30, 43, 34, .45); }
.hm-week li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: .75rem; border-bottom: 1px dashed rgba(30, 43, 34, .2); }
.hm-week li:last-child { border-bottom: 0; }
.hm-week b { font-family: var(--f-display); font-weight: 400; font-style: italic; font-size: 1.25rem; line-height: 1; color: var(--sage-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
.hm-week span { font-size: .95rem; line-height: 1.4; }
.hm-week i { font-style: normal; font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--sage-ink); }

/* Meals page: reheating steps for the chosen meal */
.picker__reheat { display: grid; gap: .45rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.picker__how { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .8rem; margin: 0; font-size: .93rem; line-height: 1.45; }
.picker__how b { font-family: var(--f-mono); font-weight: 500; font-size: max(.68rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; padding-top: .15rem; }
.picker__tip { margin: 0; font-family: var(--f-hand); font-size: 1.35rem; line-height: 1.15; }

/* Meals page: how to warm up a Monday dinner */
.warm { max-width: 980px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--mist); }
.warm__title { margin: 0 0 1rem; font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.02em; }
.warm__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 2rem; }
.warm__ways p { display: grid; gap: .35rem; margin: 0; font-size: .95rem; line-height: 1.5; }
.warm__ways b { font-family: var(--f-mono); font-weight: 500; font-size: max(.7rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink); }

@media (max-width: 760px) {
  /* banner: white, with little chef hats between the credentials */
  .hero__credwrap { background: var(--bone); border-block: 1px solid var(--line); }
  .hero__creds b { color: var(--sage-ink); }
  .hero__creds span { color: var(--muted); }
  .hero__creds li::after { content: ""; flex: none; align-self: center; width: 1.05rem; height: 1.05rem; margin-left: 1.1rem; background: var(--sage);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M6 13.9A4 4 0 0 1 7.5 6a5 5 0 0 1 9 0A4 4 0 0 1 18 13.9V21H6z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M6 13.9A4 4 0 0 1 7.5 6a5 5 0 0 1 9 0A4 4 0 0 1 18 13.9V21H6z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E") center / contain no-repeat; }

  /* the rail: one row of tickets again; main.js holds the band still and slides them across */
  .rl__scroll { overflow: visible; padding-bottom: 2.2rem; }
  .hm-week li { grid-template-columns: 4.9rem minmax(0, 1fr); }
  .hm-week b { white-space: nowrap; }

  /* gallery: each row swipes on its own and glides when you let go */
  .hm-gal__rows { overflow: visible; padding: 0; }
  .hm-gal__row, .hm-gal__row:first-child, .hm-gal__row:last-child { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 .8rem 0 0; animation: none; }
  .hm-gal__row::-webkit-scrollbar { display: none; }
  .hm-gal__row li { flex: none; }

  /* catering: buttons centered */
  .hm-cater__text .hm-cater__cta { justify-self: stretch; width: 100%; align-items: center; }
  .hm-cater__cta .btn { width: 100%; justify-content: center; }

  /* visit: the week card sits under the line, above the photo */
  .hm-week { order: 2; }
  .hm-week li { grid-template-columns: 4rem minmax(0, 1fr); }

  .warm__ways { grid-template-columns: minmax(0, 1fr); }
  .picker__how { grid-template-columns: 5rem minmax(0, 1fr); }
}

/* Nov 3 (v15): no credentials banner on phones (Chris: "looks horrendous"); the computer keeps its credentials line. */
@media (max-width: 760px) {
  .hero__credwrap { display: none; }
  section.hero.hero { padding-bottom: 1.6rem; }
}

/* ==========================================================================
   Classes v4 (Nov 3): the hero fits one screen on a computer (no week boxes), with a fan of three arches on
   phones; a smaller date-night price; "How a class goes" as three tall photo cards under a 6–8pm line (stacking
   on phones); Friday dinners over the dinner photo with café lights and a menu that flips through the samples;
   the private-class menus kept inside the page; the next three nights as one list at the end.
   Earlier versions are in scratchpad backup-classes-v1.
   ========================================================================== */
.cx-fri em { --accent-text: var(--honey); }

/* Hero: words, buttons, then the arches filling the rest of the screen */
.cx-hero { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100svh; min-height: 720px; max-height: 1000px; overflow-x: clip; padding-top: calc(var(--header-h) + 34px + clamp(1.4rem, 4vh, 3rem)); padding-bottom: clamp(1.4rem, 3.5vh, 2.6rem); background: var(--mist); color: var(--ink); --muted: #5e6a60; --line: rgba(30, 43, 34, .14); }
.cx-hero::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 18px; background: radial-gradient(circle at 18px 0, var(--mist) 17.5px, transparent 18.5px) 0 0 / 36px 18px repeat-x; pointer-events: none; }
.cx-hero__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cx-hero__canvas { display: block; width: 100%; height: 100%; }
.cx-hero__glow { position: absolute; width: 64vmax; aspect-ratio: 1; right: -20vmax; top: -24vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 162, 59, .2), rgba(226, 162, 59, 0)); }
.cx-hero__grid { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cx-hero__grid > * { position: relative; z-index: 2; }
.cx-hero__title { margin: 0; font-family: var(--f-display); font-weight: 380; font-size: clamp(2.8rem, min(5.4vw, 9.2vh), 5.5rem); line-height: .92; letter-spacing: -.04em; font-variation-settings: "SOFT" 30, "WONK" 0; text-wrap: balance; }
.cx-hero__title em { display: block; }
.cx-hero__lede { max-width: 46ch; margin: clamp(.8rem, 2.2vh, 1.4rem) auto clamp(1.1rem, 2.8vh, 1.8rem); font-size: var(--fs-lede); line-height: 1.55; text-wrap: pretty; }
.cx-hero .btn-row { justify-content: center; }
.cx-hero .btn--ghost { --hover-bg: var(--ink); --hover-fg: var(--paper); }

/* five arch photos, tallest in the middle, sized to whatever height is left (main.js raises them in) */
.cx-arches { flex: 1; min-height: 200px; max-height: 440px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(.6rem, 1.4vw, 1.1rem); width: 100%; margin-top: clamp(1.4rem, 3.5vh, 2.6rem); }
.cx-arches__a { flex: none; height: 74%; max-width: 17%; aspect-ratio: 3 / 4.1; overflow: hidden; border: 5px solid var(--bone); border-radius: 999px 999px 1rem 1rem; background: var(--oat); box-shadow: 0 30px 50px -30px rgba(20, 30, 22, .7); }
.cx-arches__a:nth-child(2), .cx-arches__a:nth-child(4) { height: 88%; max-width: 19%; }
.cx-arches__a:nth-child(3) { height: 100%; max-width: 22%; }
.cx-arches__a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cx-arches__a:nth-child(3) img { object-position: 45% 40%; }

/* Shared section head */
.cx-head { display: grid; gap: .9rem; max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cx-head--row { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); align-items: end; gap: 1rem 3rem; }
.cx-head--row > div { display: grid; gap: .9rem; }
.cx-head__lede { margin: 0; max-width: 46ch; font-size: var(--fs-lede); line-height: 1.55; text-wrap: pretty; }

/* The three classes */
.cx-classes { position: relative; z-index: 1; padding-block: calc(var(--space-section) + .8rem) var(--space-section); background: var(--paper); }
.cx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; }
.cx-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--bone); box-shadow: 0 30px 60px -38px rgba(30, 43, 34, .5); }
.cx-card:nth-child(2) { z-index: 2; }
.cx-card__img { position: relative; aspect-ratio: 4 / 3.1; overflow: hidden; background: var(--oat); }
.cx-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.cx-card:hover .cx-card__img img { transform: scale(1.06); }
.cx-stamp { position: absolute; right: .9rem; top: .9rem; display: grid; place-items: center; align-content: center; width: 4.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--marigold); color: var(--ink); font-family: var(--f-display); font-style: italic; font-size: 1.5rem; line-height: 1; font-variation-settings: "SOFT" 100, "WONK" 1; rotate: -9deg; box-shadow: 0 12px 22px -12px rgba(20, 30, 22, .6); transition: rotate .7s var(--ease-out), scale .7s var(--ease-out); }
.cx-stamp::after { content: ""; position: absolute; inset: .3rem; border: 1px dashed rgba(30, 43, 34, .5); border-radius: 50%; }
.cx-stamp small { margin-bottom: .15rem; font-family: var(--f-mono); font-style: normal; font-size: max(.58rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; }
.cx-stamp--honey { background: var(--honey); }
.cx-card:hover .cx-stamp { rotate: 8deg; scale: 1.08; }
.cx-card__body { display: flex; flex: 1; flex-direction: column; gap: .8rem; padding: 1.3rem 1.4rem 1.4rem; }
.cx-card__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1.02; letter-spacing: -.03em; }
.cx-card__desc { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.cx-card__make { list-style: none; display: grid; gap: .45rem; margin: 0; padding: .85rem 0 0; border-top: 1px dashed rgba(30, 43, 34, .2); }
.cx-card__make li { display: flex; align-items: baseline; gap: .6rem; font-size: .93rem; line-height: 1.35; }
.cx-card__make li::before { content: ""; flex: none; width: .42rem; height: .42rem; border-radius: 50%; background: var(--sage); translate: 0 -.1rem; }
.cx-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .6rem; }
.cx-card__price { font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .06em; color: var(--sage-ink); }

/* Date night: a ticket with a tear-off stub */
.cx-date { margin-top: clamp(1.6rem, 3vw, 2.4rem); filter: drop-shadow(0 22px 26px rgba(30, 43, 34, .16)); }
.cx-date__in { display: grid; grid-template-columns: auto minmax(0, 1fr) 11.5rem; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); padding: 1rem 1rem 1rem 1.1rem; border-radius: var(--r-lg); background: var(--bone);
  -webkit-mask: radial-gradient(circle at calc(100% - 12.5rem) 0, transparent .75rem, #000 calc(.75rem + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - 12.5rem) 100%, transparent .75rem, #000 calc(.75rem + .5px)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at calc(100% - 12.5rem) 0, transparent .75rem, #000 calc(.75rem + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - 12.5rem) 100%, transparent .75rem, #000 calc(.75rem + .5px)) bottom / 100% 51% no-repeat; }
.cx-date__img { width: clamp(5rem, 8vw, 6.6rem); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--oat); }
.cx-date__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cx-date__kicker { margin: 0 0 .15rem; font-family: var(--f-hand); font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--sage-ink); }
.cx-date__title { margin: 0; font-family: var(--f-display); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.cx-date__title em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--sage-ink); }
.cx-date__sub { margin: .45rem 0 0; font-size: .95rem; color: var(--muted); }
.cx-date__stub { display: grid; justify-items: center; gap: .5rem; align-self: stretch; align-content: center; padding-left: 1rem; border-left: 2px dashed rgba(30, 43, 34, .2); text-align: center; }
.cx-date__price { display: flex; align-items: baseline; gap: .35rem; margin: 0; font-family: var(--f-display); font-size: 1.6rem; line-height: 1; letter-spacing: -.03em; }
.cx-date__price span { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cx-date__gift { font-size: .84rem; color: var(--sage-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Emblems (shared): a round seal with a hand-drawn icon that draws itself in as it scrolls into view (data-draw)
   and keeps moving a little: steam rises, apron ties swing. Used on Classes, Meals and Catering. */
.emb__tag { position: absolute; left: 50%; bottom: -.75rem; translate: -50% 0; padding: .32rem .85rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 16px -8px rgba(20, 30, 22, .6); }
@keyframes emb-pop { 40% { scale: 1.14; } }
.emb__steam path { animation: emb-steam 2.8s ease-in-out infinite; }
.emb__steam path:nth-child(2) { animation-delay: -.95s; }
.emb__steam path:nth-child(3) { animation-delay: -1.9s; }
@keyframes emb-steam { 0% { opacity: 0; translate: 0 7px; } 40% { opacity: 1; } 100% { opacity: 0; translate: 0 -9px; } }
.emb__tie { transform-box: fill-box; animation: emb-tie 1.6s ease-in-out infinite alternate; }
.emb__tie--l { transform-origin: 100% 0; }
.emb__tie--r { transform-origin: 0 0; animation-delay: -.8s; }
@keyframes emb-tie { from { rotate: -14deg; } to { rotate: 14deg; } }
.emb__spin { transform-box: fill-box; transform-origin: center; animation: emb-spin 9s linear infinite; }
@keyframes emb-spin { to { rotate: 360deg; } }
.emb__bob { animation: emb-bob 2.4s ease-in-out infinite alternate; }
@keyframes emb-bob { from { translate: 0 -2px; } to { translate: 0 3px; } }
html.reduce-motion .emb__steam path, html.reduce-motion .emb__tie, html.reduce-motion .emb__spin, html.reduce-motion .emb__bob, html.reduce-motion .emb__words, html.reduce-motion .emb::before, html.reduce-motion .emb .emb__svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .emb__steam path, .emb__tie, .emb__spin, .emb__bob, .emb__words { animation: none; } }

/* How a class goes: three emblems joined by a dashed line */
.cx-night { padding-block: var(--space-section); background: var(--mist); }
.cx-night__head { display: grid; justify-items: center; gap: .9rem; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); text-align: center; }
.cx-night__lede { max-width: 44ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.cx-embs { --emb: clamp(10rem, 13vw, 12rem); position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 4vw, 3rem); margin: 0; padding: 0; text-align: center; }
.cx-embs::before { content: ""; position: absolute; left: 18%; right: 18%; top: calc(var(--emb) / 2); border-top: 2px dashed rgba(30, 43, 34, .25); }
.cx-emb { position: relative; display: grid; justify-items: center; align-content: start; gap: .5rem; }
.cx-emb h3 { margin: .8rem 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 2rem); letter-spacing: -.03em; }
.cx-emb p { max-width: 30ch; margin: 0; line-height: 1.55; color: var(--muted); }

/* Friday dinners: an invitation that slides out of an envelope (sizes in em so the whole thing scales on phones) */
.cx-fri { position: relative; overflow: hidden; padding-block: calc(var(--space-section) + 3rem) var(--space-section); background: linear-gradient(180deg, #4b6a37, #43603a); color: var(--paper); --muted: rgba(251, 247, 240, .9); --line: rgba(251, 247, 240, .24); }
.cx-fri__glow { position: absolute; width: 70vmax; aspect-ratio: 1; right: -26vmax; top: -30vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 212, 155, .22), rgba(242, 212, 155, 0)); pointer-events: none; animation: cx-flicker 5s ease-in-out infinite alternate; }
@keyframes cx-flicker { 0% { opacity: .75; scale: 1; } 40% { opacity: 1; scale: 1.03; } 70% { opacity: .85; scale: 1.01; } 100% { opacity: 1; scale: 1.04; } }
.cx-lights { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 110px; pointer-events: none; }
.cx-lights svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-lights path { fill: none; stroke: rgba(20, 30, 22, .6); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cx-bulb { position: absolute; width: 10px; height: 14px; translate: -50% 0; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 50% 38%, #fff7df, var(--honey) 55%, var(--marigold)); box-shadow: 0 0 10px 3px rgba(242, 212, 155, .55), 0 0 28px 8px rgba(226, 162, 59, .25); animation: cx-twinkle 3.2s ease-in-out infinite alternate; }
.cx-bulb::before { content: ""; position: absolute; left: 50%; top: -4px; width: 5px; height: 5px; translate: -50% 0; border-radius: 1px; background: #26382b; }
@keyframes cx-twinkle { from { opacity: .5; } to { opacity: 1; } }
.cx-fri__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.cx-fri__intro { display: grid; justify-items: start; gap: 1.1rem; }
.cx-fri__lede { max-width: 42ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; }
.cx-fri__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.cx-fri__chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem .45rem .65rem; border: 1px solid rgba(251, 247, 240, .35); border-radius: 999px; background: rgba(30, 43, 34, .28); font-size: .88rem; font-weight: 600; }
.cx-fri__chips svg { width: 1.1rem; height: 1.1rem; color: var(--honey); }
.cx-fri .btn--ghost { --hover-bg: var(--paper); --hover-fg: var(--ink); }
.cx-fri__note { max-width: 46ch; margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.cx-env { position: relative; width: 30em; max-width: 100%; height: 39em; margin-inline: auto; font-size: min(16px, calc((100vw - 2 * var(--gutter)) / 30)); perspective: 1600px; }
.cx-env__back, .cx-env__pocket, .cx-env__flap { position: absolute; left: 0; right: 0; bottom: 0; height: 15em; }
.cx-env__back { z-index: 1; border-radius: .5em; background: #e6dcc8; box-shadow: 0 44px 60px -34px rgba(10, 20, 12, .85); }
.cx-env__pocket { z-index: 3; border-radius: 0 0 .5em .5em; background: linear-gradient(170deg, #f8f1e4 0%, #efe4cf 55%, #e6d8bf 100%); box-shadow: inset 0 -.6em 1.2em -.6em rgba(120, 90, 50, .25); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.cx-env__flap { z-index: 0; border-radius: .5em .5em 0 0; background: linear-gradient(180deg, #efe4cf, #e2d5bc); clip-path: polygon(0 0, 100% 0, 50% 58%); transform-origin: 50% 0; transform: rotateX(180deg); }
.cx-env__seal { position: absolute; z-index: 5; left: 50%; bottom: calc(15em * .42 - 1.9em); display: grid; place-items: center; width: 3.8em; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #86a86c, var(--sage) 55%, #3e5a2c); color: var(--paper); box-shadow: 0 6px 12px -4px rgba(20, 10, 5, .5), inset 0 -3px 0 rgba(0, 0, 0, .15); opacity: 0; }
.cx-env__seal svg { width: 62%; }
.cx-env__card { position: absolute; z-index: 2; left: 50%; bottom: 10.5em; width: 26em; display: grid; justify-items: center; gap: .7em; padding: 1.7em 1.5em 2.6em; border-radius: .4em; background: var(--bone); color: var(--ink); text-align: center; translate: -50% 0; rotate: -1.5deg; transform-origin: 50% 100%; box-shadow: 0 30px 50px -30px rgba(10, 20, 12, .75); --muted: #5e6a60; }
.cx-env__card::before { content: ""; position: absolute; inset: .6em; border: 1px solid rgba(87, 122, 64, .45); border-radius: .2em; pointer-events: none; }
.cx-env__invite { margin: 0; font-family: var(--f-hand); font-size: 2em; font-weight: 600; line-height: 1; color: var(--sage-ink); }
.cx-env__what { margin: -.2em 0 .2em; font-family: var(--f-mono); font-size: max(.72em, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink); }
.cx-env .cx-carte__tabs { display: flex; gap: .25em; padding: .25em; border-radius: 999px; background: var(--mist); }
.cx-env .cx-carte__tabs button { padding: .45em .95em; border-radius: 999px; color: var(--ink); font-size: max(.86em, var(--min-text)); font-weight: 600; transition: background .3s, color .3s; }
.cx-env .cx-carte__tabs button[aria-selected="true"] { background: var(--sage-ink); color: var(--paper); }
.cx-env .cx-carte__tabs button:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.cx-env .cx-carte__paper { display: grid; justify-items: center; min-height: 15em; align-content: start; }
.cx-carte__menu { display: grid; justify-items: center; gap: .75em; }
.cx-carte__menu.is-in { animation: cx-menu-in .5s var(--ease-out); }
@keyframes cx-menu-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.cx-carte__kicker { margin: 0; font-family: var(--f-mono); font-size: max(.66em, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: var(--sage-ink); }
.cx-carte__title { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.75em; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.cx-carte__orn { width: 3.4em; color: var(--marigold); }
.cx-carte__course { display: grid; gap: .15em; margin: 0; font-family: var(--f-display); font-size: 1.08em; line-height: 1.25; }
.cx-carte__course small { font-family: var(--f-mono); font-size: max(.6em, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cx-carte__price { margin: .4em 0 0; padding-top: .9em; border-top: 1px dashed rgba(87, 122, 64, .45); font-family: var(--f-mono); font-size: max(.66em, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink); }

/* Pick a night: the next two weeks over drifting petals (replaces the month calendar) */
.cx-pick { position: relative; overflow: hidden; padding-block: var(--space-section); background: var(--paper); text-align: center; }
.cx-pick__sky { position: absolute; inset: 0; pointer-events: none; }
.cx-pick__canvas { display: block; width: 100%; height: 100%; }
.cx-pick__in { position: relative; display: grid; justify-items: center; }
.cx-pick__title { margin: 0; font-family: var(--f-display); font-weight: 380; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: .95; letter-spacing: -.04em; text-wrap: balance; }
.cx-pick__title em { display: block; font-style: italic; font-weight: 340; color: var(--sage); font-variation-settings: "SOFT" 100, "WONK" 1; }
.cx-pick__lede { max-width: 46ch; margin: 1.1rem auto 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.cx-pick__or { margin: 1.6rem 0 0; color: var(--muted); }
.cx-pick__or a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Private classes: the cuisines as round photos, then a shelf of that cuisine's menus, four at a time */
.cx-group { padding-block: var(--space-section); background: var(--paper); }
.cx-group__head { display: grid; justify-items: center; gap: .9rem; max-width: 48rem; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.cx-group__intro { display: grid; justify-items: center; gap: 1.2rem; }
.cx-group__intro p { max-width: 54ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.cx-cuisines { display: flex; justify-content: center; gap: clamp(.8rem, 2.4vw, 2.2rem); padding: .6rem 0 1rem; }
.cx-cuisine { display: grid; justify-items: center; gap: .45rem; flex: none; width: 6.8rem; color: var(--ink); text-align: center; }
.cx-cuisine__img { width: 5.8rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--oat); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--line), 0 16px 26px -16px rgba(30, 43, 34, .6); transition: box-shadow .4s, scale .5s var(--ease-out); }
.cx-cuisine__img img { width: 100%; height: 100%; object-fit: cover; }
.cx-cuisine:hover .cx-cuisine__img { scale: 1.06; }
.cx-cuisine[aria-selected="true"] .cx-cuisine__img { scale: 1.08; box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--marigold), 0 18px 28px -16px rgba(30, 43, 34, .6); }
.cx-cuisine b { margin-top: .3rem; font-size: .95rem; font-weight: 600; line-height: 1.15; }
.cx-cuisine small { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .06em; color: var(--muted); }
.cx-cuisine[aria-selected="true"] small { color: var(--sage-ink); }
.cx-cuisine:focus-visible { outline: 2px solid var(--marigold); outline-offset: 4px; border-radius: 1rem; }
.cx-shelf { margin-top: clamp(1.2rem, 3vw, 1.8rem); }
.cx-shelf__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.cx-shelf__count { margin: 0; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink); }
.cx-shelf__nav { display: flex; gap: .5rem; }
.cx-shelf__btn { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); border-radius: 50%; background: var(--bone); color: var(--ink); transition: background .3s, color .3s, opacity .3s; }
.cx-shelf__btn:hover { background: var(--ink); color: var(--paper); }
.cx-shelf__btn:disabled { opacity: .35; pointer-events: none; }
.cx-shelf__btn svg { width: 1.1rem; height: 1.1rem; }
.cx-shelf__row { --gap: 1.2rem; display: flex; gap: var(--gap); overflow-x: auto; margin: 0 -.6rem; padding: .9rem .6rem 2rem; scroll-snap-type: x mandatory; scroll-padding-inline: .6rem; scrollbar-width: none; }
.cx-shelf__row::-webkit-scrollbar { display: none; }
.cx-menu { position: relative; flex: 0 0 calc((100% - 3 * var(--gap)) / 4); display: flex; flex-direction: column; align-items: center; gap: .7rem; overflow: hidden; padding: 2rem 1.2rem 1.4rem; border-radius: var(--r-lg); background: var(--bone); text-align: center; scroll-snap-align: start; box-shadow: 0 22px 34px -28px rgba(30, 43, 34, .55), inset 0 0 0 1px rgba(30, 43, 34, .06); transition: translate .5s var(--ease-out); }
.cx-menu:hover { translate: 0 -5px; }
.cx-menu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .55rem; background: var(--fam, var(--sage)); }
.cx-menu__region { margin: 0; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; color: var(--sage-ink); }
.cx-menu__name { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.65rem; line-height: 1.02; letter-spacing: -.03em; font-variation-settings: "SOFT" 100, "WONK" 1; text-wrap: balance; }
.cx-menu__rule { width: 2.4rem; height: 2px; border-radius: 2px; background: var(--fam, var(--sage)); }
.cx-menu__dishes { list-style: none; display: grid; gap: .35rem; margin: 0 0 .6rem; padding: 0; font-family: var(--f-display); font-size: .98rem; line-height: 1.25; }
.cx-menu__dishes li:last-child { font-style: italic; color: var(--sage-ink); }
.cx-menu .btn { margin-top: auto; }

/* Questions */
.cx-faq { padding-block: var(--space-section); background: var(--mist); }
.cx-faq__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cx-faq__side { display: grid; gap: 1rem; }
.cx-quote { margin: .6rem 0 0; padding: 1.4rem 1.5rem; border-radius: var(--r-lg); background: var(--bone); }
.cx-quote p { margin: 0; font-family: var(--f-display); font-size: 1.25rem; line-height: 1.32; letter-spacing: -.015em; }
.cx-quote footer { margin-top: .8rem; font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-ink); }
.cx-faq__all { margin-top: 1.3rem; }

/* The night list (in Pick a night) */
.cx-nights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); width: min(100%, 1060px); margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: left; }
.cx-nights:has(> :only-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.cx-week { position: relative; display: grid; align-content: start; padding: .5rem .5rem .6rem; border-radius: var(--r-lg); background: var(--bone); box-shadow: 0 34px 60px -42px rgba(30, 43, 34, .55), inset 0 0 0 1px rgba(30, 43, 34, .06); rotate: -.8deg; transition: rotate .6s var(--ease-out), translate .6s var(--ease-out); }
.cx-week:nth-child(2) { rotate: .9deg; }
.cx-week:hover { rotate: 0deg; translate: 0 -4px; }
.cx-week::before { content: ""; position: absolute; left: 50%; top: -.8rem; width: 6.5rem; height: 1.6rem; translate: -50% 0; rotate: -3deg; background: rgba(242, 212, 155, .78); box-shadow: 0 2px 6px -3px rgba(30, 43, 34, .35); }
.cx-week:nth-child(2)::before { rotate: 4deg; background: rgba(140, 170, 120, .55); }
.cx-week__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; margin: 0; padding: 1.1rem 1rem .7rem; border-bottom: 1px dashed rgba(30, 43, 34, .18); }
.cx-week__h b { font-family: var(--f-hand); font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--sage-ink); }
.cx-week__h span { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cx-week__list { list-style: none; margin: 0; padding: 0; }
.cx-week__list li + li { border-top: 1px dashed rgba(30, 43, 34, .12); }
.cx-nightrow { display: grid; grid-template-columns: 3.8rem minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; width: 100%; padding: .9rem 1rem; border-radius: var(--r); color: var(--ink); text-align: left; transition: background .3s; }
.cx-nightrow:hover, .cx-nightrow:focus-visible { background: var(--mist); }
.cx-nightrow:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
.cx-cal { display: grid; overflow: hidden; width: 3.8rem; border-radius: .6rem; background: var(--paper); text-align: center; box-shadow: 0 8px 16px -10px rgba(30, 43, 34, .6), inset 0 0 0 1px var(--line); transition: rotate .4s var(--ease-out); }
.cx-nightrow:hover .cx-cal { rotate: -6deg; }
.cx-cal small { font-family: var(--f-mono); font-size: max(.6rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; }
.cx-cal small:first-child { padding: .22rem 0; background: var(--sage-ink); color: var(--paper); }
.cx-cal b { padding-top: .2rem; font-family: var(--f-display); font-weight: 500; font-size: 1.75rem; line-height: 1; }
.cx-cal small:last-child { padding: .1rem 0 .35rem; color: var(--muted); }
.cx-nightrow--dinner .cx-cal small:first-child { background: var(--marigold); color: var(--ink); }
.cx-nightrow__what { display: grid; gap: .15rem; }
.cx-nightrow__what b { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.02em; }
.cx-nightrow__meta { font-size: .88rem; color: var(--muted); }
.cx-nightrow__meta > span:not(.sr-only) { white-space: nowrap; }
.cx-nightrow__go { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .86rem; font-weight: 600; white-space: nowrap; transition: background .3s, color .3s; }
.cx-nightrow__go svg { width: 1rem; transition: translate .4s var(--ease-out); }
.cx-nightrow:hover .cx-nightrow__go { background: var(--marigold); color: var(--ink); }
.cx-nightrow:hover .cx-nightrow__go svg { translate: 3px 0; }

html.reduce-motion .cx-bulb, html.reduce-motion .cx-fri__glow { animation: none; }
@media (prefers-reduced-motion: reduce) { .cx-bulb, .cx-fri__glow { animation: none; } }

@media (max-width: 1080px) {
  .cx-menu { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}

@media (max-width: 760px) {
  /* hero: the words, then three arches fanned out */
  .cx-hero { height: auto; min-height: 0; max-height: none; padding-top: calc(var(--header-h) + 34px + 1.8rem); padding-bottom: 2.6rem; }
  .cx-hero__title { font-size: clamp(2.4rem, 11vw, 3rem); }
  .cx-hero__lede { margin: 1.1rem auto 1.4rem; font-size: 1.02rem; }
  .cx-arches { flex: none; position: relative; height: 290px; min-height: 0; max-height: none; margin-top: 2rem; }
  .cx-arches__a { position: absolute; bottom: 0; left: 50%; max-width: none; border-width: 4px; }
  .cx-arches__a:nth-child(1), .cx-arches__a:nth-child(5) { display: none; }
  .cx-arches__a:nth-child(2) { height: 80%; max-width: none; translate: -104% 0; rotate: -9deg; transform-origin: 100% 100%; }
  .cx-arches__a:nth-child(4) { height: 80%; max-width: none; translate: 4% 0; rotate: 9deg; transform-origin: 0 100%; }
  .cx-arches__a:nth-child(3) { z-index: 2; height: 100%; max-width: none; translate: -50% 0; box-shadow: 0 30px 50px -24px rgba(20, 30, 22, .75); }

  /* classes: on phones the cards stick and stack over each other as you scroll (main.js shrinks the one underneath) */
  .cx-cards { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .cx-card { position: sticky; top: calc(var(--header-h) + .8rem); transform-origin: 50% 0; box-shadow: 0 -14px 30px -18px rgba(30, 43, 34, .45); }
  .cx-card:nth-child(2) { top: calc(var(--header-h) + 1.8rem); }
  .cx-card:nth-child(3) { top: calc(var(--header-h) + 2.8rem); z-index: 3; }
  .cx-card::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: .55rem; background: var(--sage); }
  .cx-card:nth-child(2)::before { background: var(--marigold); }
  .cx-card:nth-child(3)::before { background: var(--honey); }
  .cx-card__img { aspect-ratio: 16 / 9; }
  .cx-date__in { grid-template-columns: auto minmax(0, 1fr); -webkit-mask: none; mask: none; padding: 1rem; }
  .cx-date__img { width: 4.4rem; align-self: start; }
  .cx-date__stub { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: .5rem 1rem; padding: .9rem 0 0; border-left: 0; border-top: 2px dashed rgba(30, 43, 34, .2); text-align: left; }
  .cx-date__stub .btn { justify-self: end; }
  .cx-date__gift { grid-column: 1 / -1; justify-self: center; }

  /* how a class goes: the emblems become cards that stick and stack over each other as you scroll */
  .cx-embs { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .cx-embs::before { display: none; }
  .cx-emb { position: sticky; top: calc(var(--header-h) + .8rem); padding: 1.8rem 1.2rem 1.9rem; border-radius: var(--r-lg); background: var(--bone); box-shadow: 0 -14px 30px -18px rgba(30, 43, 34, .4); transform-origin: 50% 0; }
  .cx-emb:nth-child(2) { top: calc(var(--header-h) + 1.8rem); }
  .cx-emb:nth-child(3) { top: calc(var(--header-h) + 2.8rem); }
  .cx-embs { --emb: 9.6rem; }
  .cx-emb .emb { margin-bottom: 1rem; }

  /* friday: words, then the envelope */
  .cx-fri { padding-top: calc(var(--space-section) + 2.2rem); }
  .cx-lights { height: 70px; }
  .cx-fri__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .cx-fri .btn-row, .cx-fri .btn { width: 100%; }

  .cx-head--row { grid-template-columns: minmax(0, 1fr); }

  /* private classes: the six cuisines as a 3 x 2 grid; the menus as a deck the arrows flip through (no swiping) */
  .cx-group__intro .btn { width: 100%; }
  .cx-cuisines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; gap: 1.1rem .6rem; padding: .7rem 0 1rem; }
  .cx-cuisine { width: 5.2rem; }
  .cx-cuisine__img { width: 4.5rem; }
  .cx-shelf__bar { margin-bottom: .2rem; }
  .cx-shelf__row { display: grid; overflow: visible; margin: 0; padding: .9rem 0 3rem; }
  .cx-menu { grid-area: 1 / 1; visibility: hidden; transform-origin: 50% 100%; transition: translate .5s var(--ease-out), scale .5s var(--ease-out), opacity .5s; }
  .cx-menu.is-top { z-index: 3; visibility: visible; }
  .cx-menu.is-next { z-index: 2; visibility: visible; translate: 0 1rem; scale: .95; opacity: .85; }
  .cx-menu.is-next2 { z-index: 1; visibility: visible; translate: 0 2rem; scale: .9; opacity: .6; }
  .cx-shelf + .swipe-bar, .cx-shelf__row + .swipe-bar { display: none; }

  .cx-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }

  /* pick a night: one column, each night on two lines */
  .cx-pick__title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .cx-nights { grid-template-columns: minmax(0, 1fr); }
  .cx-nightrow { grid-template-columns: 3.4rem minmax(0, 1fr); gap: .3rem 1rem; padding: .9rem .7rem; }
  .cx-cal { grid-row: 1 / span 2; width: 3.4rem; }
  .cx-cal b { font-size: 1.5rem; }
  .cx-nightrow__go { grid-column: 2; justify-self: start; padding: .4rem .85rem; }
}

/* ==========================================================================
   Meals (v2 hero and tickets, v3 the rest, Nov 3): the hero on one screen with a live countdown and five plates;
   the three ways as tickets on a rail (stacking cards on phones); Thanksgiving photo cards with price tags; pick-up
   as four emblems; the prepared-meals picker with macro rings; questions; one kitchen board at the end.
   v1 styles (.hero--meals, .pass, .holiday, .steps, .collage, .crowd, .cta-band) stay for other pages.
   ========================================================================== */
.mx-tg em { --accent-text: var(--honey); }

/* Hero */
.mx-hero { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100svh; min-height: 720px; max-height: 1000px; overflow-x: clip; padding-top: calc(var(--header-h) + 34px + clamp(1.4rem, 4vh, 3rem)); padding-bottom: clamp(1.2rem, 3vh, 2.2rem); background: var(--mist); color: var(--ink); --muted: #5e6a60; --line: rgba(30, 43, 34, .14); }
.mx-hero::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 18px; background: radial-gradient(circle at 18px 0, var(--mist) 17.5px, transparent 18.5px) 0 0 / 36px 18px repeat-x; pointer-events: none; }
.mx-hero__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mx-hero__canvas { display: block; width: 100%; height: 100%; }
.mx-hero__glow { position: absolute; width: 64vmax; aspect-ratio: 1; left: -22vmax; top: -26vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 162, 59, .2), rgba(226, 162, 59, 0)); }
.mx-hero__grid { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mx-hero__grid > * { position: relative; z-index: 2; }
.mx-hero__title { margin: 0; font-family: var(--f-display); font-weight: 380; font-size: clamp(2.8rem, min(5.4vw, 9vh), 5.4rem); line-height: .92; letter-spacing: -.04em; font-variation-settings: "SOFT" 30, "WONK" 0; text-wrap: balance; }
.mx-hero__title em { display: block; }
.mx-hero__lede { max-width: 44ch; margin: clamp(.8rem, 2vh, 1.3rem) auto clamp(.9rem, 2vh, 1.3rem); font-size: var(--fs-lede); line-height: 1.55; text-wrap: pretty; }
.mx-next { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .6rem; margin: 0 0 clamp(1rem, 2.4vh, 1.5rem); padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bone); font-size: .9rem; box-shadow: 0 12px 24px -20px rgba(30, 43, 34, .5); }
.mx-next > span:nth-child(2) { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-ink); }
.mx-next b { font-weight: 600; }
.mx-next__left { padding: .15rem .55rem; border-radius: 999px; background: var(--marigold); font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); }
.mx-hero .btn-row { justify-content: center; }
.mx-hero .btn--ghost { --hover-bg: var(--ink); --hover-fg: var(--paper); }
/* five plates on the table edge, the middle one biggest; each turns a little when you point at it */
.mx-plates { flex: 1; min-height: 190px; max-height: 400px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(.4rem, 1.4vw, 1.2rem); width: 100%; margin-top: clamp(1.2rem, 3vh, 2.2rem); }
.mx-plates__p { flex: none; height: 62%; max-width: 17%; aspect-ratio: 1; padding: clamp(6px, .8vw, 12px); border-radius: 50%; background: radial-gradient(circle, var(--bone) 62%, #f1ece2 64%, var(--bone) 70%); box-shadow: 0 34px 40px -28px rgba(20, 30, 22, .6), inset 0 0 0 1px rgba(30, 43, 34, .07); transition: rotate 1.4s var(--ease-out), translate .6s var(--ease-out); }
.mx-plates__p:nth-child(2), .mx-plates__p:nth-child(4) { height: 80%; max-width: 21%; }
.mx-plates__p:nth-child(3) { height: 100%; max-width: 27%; }
.mx-plates__p img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mx-plates__p:hover { rotate: 28deg; translate: 0 -6px; }

/* Three ways: tickets hanging from a steel rail, swaying a little */
.mx-ways { position: relative; z-index: 1; padding-block: calc(var(--space-section) + .8rem) var(--space-section); background: var(--paper); }
.mx-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); padding-top: 2.2rem; }
.mx-rail::before { content: ""; position: absolute; left: -1.5rem; right: -1.5rem; top: .8rem; height: 14px; border-radius: 7px; background: linear-gradient(#eef1ea, #b3bcae 55%, #dbe0d7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 5px 10px rgba(20, 30, 22, .22); }
.mx-ticket { position: relative; display: grid; align-content: start; gap: .45rem; padding: 1rem 1rem 2.1rem; background: var(--bone); color: var(--ink); transform-origin: 50% -1.4rem; animation: mx-sway 5.5s ease-in-out infinite alternate; filter: drop-shadow(0 22px 22px rgba(30, 43, 34, .18));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x; }
.mx-ticket:nth-child(2) { animation-delay: -2s; }
.mx-ticket:nth-child(3) { animation-delay: -4s; }
.mx-ticket::before { content: ""; position: absolute; left: 50%; top: 0; width: 3.2rem; height: .55rem; translate: -50% 0; border-radius: 0 0 .3rem .3rem; background: var(--sage-ink); }
@keyframes mx-sway { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
.mx-ticket:hover { animation-play-state: paused; }
.mx-ticket__img { display: block; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: .5rem; border-radius: .5rem; background: var(--oat); }
.mx-ticket__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.mx-ticket:hover .mx-ticket__img img { scale: 1.06; }
.mx-ticket__when { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-ink); }
.mx-ticket__what { font-family: var(--f-display); font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.05; letter-spacing: -.03em; }
.mx-ticket__note { font-size: .93rem; line-height: 1.5; color: var(--muted); }
.mx-ticket__tag { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem; padding: .35rem .8rem; border-radius: 999px; background: var(--mist); font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .06em; }
.mx-ticket__tag--live { background: var(--marigold); }
.mx-ticket__tag--ink { background: var(--sage-ink); color: var(--paper); }

/* Thanksgiving (v3): green with falling leaves; the dates on one ticket; three photo cards with swinging price tags */
.mx-tg { position: relative; overflow: hidden; padding-block: var(--space-section); background: linear-gradient(180deg, #4b6a37, #43603a); color: var(--paper); --muted: rgba(251, 247, 240, .9); --line: rgba(251, 247, 240, .24); }
.mx-tg__sky { position: absolute; inset: 0; pointer-events: none; }
.mx-tg__canvas { display: block; width: 100%; height: 100%; }
.mx-tg .wrap { position: relative; }
.mx-tg__head { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.mx-tg__lede { max-width: 44ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; }
.mx-tg__dates { display: grid; grid-template-columns: repeat(3, auto); overflow: hidden; margin: .8rem 0 0; border-radius: var(--r-lg); background: var(--bone); color: var(--ink); box-shadow: 0 30px 50px -34px rgba(10, 20, 12, .7); --muted: #5e6a60; }
.mx-tg__dates > div { display: grid; gap: .2rem; padding: 1rem 1.8rem 1.05rem; text-align: center; }
.mx-tg__dates > div + div { border-left: 2px dashed rgba(30, 43, 34, .2); }
.mx-tg__dates small { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mx-tg__dates b { font-family: var(--f-display); font-weight: 450; font-size: 1.4rem; line-height: 1.1; letter-spacing: -.02em; }
.mx-tg__dates span { font-size: .88rem; color: var(--muted); }
.mx-tg__dates .mx-tg__due { background: var(--marigold); --muted: #3a3324; }
.mx-tg__due span { justify-self: center; padding: .1rem .6rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; }
.mx-opts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.2rem); margin: clamp(2.8rem, 5vw, 4rem) 0 0; padding: 0; }
.mx-opt { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--bone); color: var(--ink); box-shadow: 0 40px 60px -38px rgba(10, 20, 12, .85); --muted: #5e6a60; transition: translate .5s var(--ease-out); }
.mx-opt:hover { translate: 0 -6px; }
.mx-opt__img { overflow: hidden; aspect-ratio: 5 / 4; margin: .6rem .6rem 0; border-radius: calc(var(--r-lg) - .4rem); background: var(--oat); }
.mx-opt__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.mx-opt:hover .mx-opt__img img { scale: 1.06; }
.mx-opt__body { display: grid; align-content: start; gap: .4rem; padding: 1.1rem 1.3rem 1.4rem; }
.mx-opt__for { margin: 0; font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-ink); }
.mx-opt__name { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.05; letter-spacing: -.03em; }
.mx-opt__sub { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--muted); }
.mx-opt .btn { justify-self: start; margin-top: .7rem; }
/* the price tag hangs off the top corner on a string and swings */
.mx-opt__tag { position: absolute; z-index: 2; right: 1.4rem; top: -1.3rem; display: grid; justify-items: center; gap: .15rem; min-width: 5rem; margin: 0; padding: 1.5rem .8rem .7rem; background: var(--marigold); color: var(--ink); clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); transform-origin: 50% 0; animation: mx-swing 3.4s ease-in-out infinite alternate; }
.mx-opt__tag::before { content: ""; position: absolute; left: 50%; top: .6rem; width: .55rem; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: #43603a; }
.mx-opt__tag b { font-family: var(--f-display); font-weight: 500; font-size: 1.75rem; line-height: 1; letter-spacing: -.03em; }
.mx-opt__tag small { font-family: var(--f-mono); font-size: max(.6rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; }
.mx-opt:nth-child(2) .mx-opt__tag { background: var(--honey); animation-delay: -1.1s; }
.mx-opt:nth-child(3) .mx-opt__tag { background: var(--paper); animation-delay: -2.3s; }
@keyframes mx-swing { from { rotate: -6deg; } to { rotate: 6deg; } }
.mx-tg__with { display: grid; justify-items: center; gap: 1.3rem; margin-top: clamp(2.8rem, 5vw, 3.8rem); }
.mx-tg__with-h { margin: 0; font-family: var(--f-hand); font-size: clamp(1.8rem, 2.8vw, 2.3rem); font-weight: 600; line-height: 1; color: var(--honey); }
.mx-sides { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 9.5rem)); justify-content: center; gap: clamp(1rem, 3vw, 2.8rem); margin: 0; padding: 0; }
.mx-sides li { display: grid; justify-items: center; gap: .75rem; text-align: center; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.mx-sides img { width: clamp(6rem, 9vw, 8rem); aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--bone), 0 22px 30px -18px rgba(10, 20, 12, .8); transition: rotate .8s var(--ease-out); }
.mx-sides li:hover img { rotate: 20deg; }
.mx-tg__fine { margin: clamp(2.4rem, 4vw, 3rem) 0 0; font-size: .9rem; text-align: center; color: var(--muted); }
.mx-tg__fine a { color: var(--paper); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* How pick-up works (v3): four emblems on a line of marching dashes, then how to warm it up */
.mx-how { padding-block: var(--space-section); background: var(--mist); }
.mx-how__head { display: grid; justify-items: center; gap: .9rem; margin-bottom: clamp(2.4rem, 4.5vw, 3.4rem); text-align: center; }
.mx-how__lede { max-width: 46ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.mx-steps { --emb: clamp(9rem, 11vw, 10.5rem); position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.6vw, 2.2rem); margin: 0; padding: 0; text-align: center; }
.mx-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: calc(var(--emb) / 2 - 1px); height: 2px; background: repeating-linear-gradient(90deg, rgba(30, 43, 34, .3) 0 8px, transparent 8px 16px); animation: mx-march 1.1s linear infinite; }
@keyframes mx-march { to { background-position: 16px 0; } }
.mx-step { position: relative; display: grid; justify-items: center; align-content: start; gap: .45rem; }
.mx-step h3 { margin: .7rem 0 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 1.9vw, 1.7rem); letter-spacing: -.03em; }
.mx-step p { max-width: 26ch; margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.emb__dots circle { animation: emb-dot 1.4s ease-in-out infinite; }
.emb__dots circle:nth-child(2) { animation-delay: .18s; }
.emb__dots circle:nth-child(3) { animation-delay: .36s; }
@keyframes emb-dot { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -5px; } }
.mx-warm { display: grid; justify-items: center; gap: 1.2rem; margin-top: clamp(3rem, 6vw, 4.4rem); }
.mx-warm__h { margin: 0; font-family: var(--f-hand); font-size: clamp(1.8rem, 2.8vw, 2.3rem); font-weight: 600; line-height: 1; color: var(--sage-ink); }
.mx-warm__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: center; gap: 1.2rem; width: 100%; }
.mx-warm__c { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.1rem; padding: 1rem 1.4rem 1rem 1rem; border-radius: var(--r-lg); background: var(--bone); box-shadow: 0 26px 40px -30px rgba(30, 43, 34, .6), inset 0 0 0 1px rgba(30, 43, 34, .06); }
.mx-warm__emb { --emb: 5.6rem; margin: 0; }
.mx-warm__c h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -.02em; }
.mx-warm__c p { margin: .2rem 0 0; font-family: var(--f-mono); font-size: max(.78rem, var(--min-text)); letter-spacing: .04em; color: var(--sage-ink); }
.mx-warm__note { max-width: 52ch; margin: 0; font-size: .92rem; line-height: 1.5; text-align: center; color: var(--muted); }

/* Prepared meals (v3): the five meals in a row, the photo, and a panel with macro rings and how to reheat */
@property --mp { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.mx-prep { position: relative; overflow: hidden; padding-block: var(--space-section); background: var(--paper); }
.mx-prep__glow { position: absolute; width: 60vmax; aspect-ratio: 1; right: -26vmax; top: -12vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 162, 59, .16), rgba(226, 162, 59, 0)); pointer-events: none; }
.mx-prep .wrap { position: relative; }
.mx-prep__head { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.mx-prep__lede { max-width: 50ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.mp { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "picks picks" "stage panel"; gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.6rem, 4vw, 3.6rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
.mp__picks { grid-area: picks; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.mp .pick { display: grid; grid-template-columns: none; justify-items: center; align-content: start; gap: .55rem; height: 100%; padding: 1rem .7rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bone); color: var(--ink); text-align: center; transform: none; transition: background .35s, border-color .35s, color .35s, translate .4s var(--ease-out), box-shadow .35s; }
.mp .pick:hover { background: var(--bone); translate: 0 -4px; transform: none; }
.mp .pick.is-on { border-color: var(--sage-ink); background: var(--sage-ink); color: var(--paper); box-shadow: 0 24px 34px -22px rgba(30, 43, 34, .8); }
.mp .pick__thumb { width: 4.8rem; box-shadow: 0 0 0 3px var(--paper), 0 12px 20px -12px rgba(30, 43, 34, .7); transition: box-shadow .35s, rotate .8s var(--ease-out); }
.mp .pick:hover .pick__thumb { rotate: 24deg; }
.mp .pick.is-on .pick__thumb { box-shadow: 0 0 0 3px var(--marigold), 0 12px 20px -12px rgba(0, 0, 0, .7); }
.mp .pick__name { justify-items: center; font-size: 1.02rem; line-height: 1.15; }
.mp .pick__name small { color: var(--muted); }
.mp .pick.is-on .pick__name small { color: var(--paper); }
.mp .pick__p b { font-size: 1.35rem; color: var(--sage-ink); }
.mp .pick.is-on .pick__p b { color: var(--paper); }
.mp__stage { grid-area: stage; position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: #ece9e4; box-shadow: 0 50px 80px -46px rgba(30, 43, 34, .7); }
.mp__panel { grid-area: panel; display: grid; align-content: start; gap: 1.2rem; }
.mp__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.mp__label { margin: 0; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink); }
.mp .seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bone); }
.mp .seg button { padding: .5rem 1.05rem; border-radius: 999px; color: var(--muted); font-size: .86rem; font-weight: 600; transition: background .3s, color .3s; }
.mp .seg button[aria-pressed="true"] { background: var(--marigold); color: var(--ink); }
.mp__name { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.mp__inside { margin: -.4rem 0 0; line-height: 1.5; color: var(--muted); }
.mp__rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; padding: 1.3rem 1rem 1.1rem; border-radius: var(--r-lg); background: var(--bone); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .06); }
.mp-macro { display: grid; justify-items: center; gap: .55rem; margin: 0; }
.mp-ring { --c: var(--sage); display: grid; place-content: center; justify-items: center; width: min(100%, 6.8rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--bone) 77%, transparent 78%), conic-gradient(var(--c) var(--mp), rgba(30, 43, 34, .1) 0); transition: --mp 1.2s var(--ease-out); }
.mp-ring--c { --c: var(--marigold); }
.mp-ring--f { --c: var(--forest); }
.mp__rings.is-wait .mp-ring { --mp: 0% !important; }
.mp-ring b { font-family: var(--f-display); font-weight: 450; font-size: 2rem; line-height: 1; letter-spacing: -.03em; }
.mp-ring small { font-family: var(--f-mono); font-size: max(.62rem, var(--min-text)); color: var(--muted); }
.mp-macro figcaption { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-ink); }
.mp__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.mp__facts > span { display: inline-flex; align-items: baseline; gap: .35rem; padding: .45rem .95rem; border-radius: 999px; background: var(--mist); font-size: .9rem; }
.mp__facts b { font-family: var(--f-display); font-weight: 450; font-size: 1.15rem; }
.mp__reheat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.mp__how { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; margin: 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r); font-size: .9rem; line-height: 1.45; }
.mp__how svg { width: 1.6rem; height: 1.6rem; color: var(--sage-ink); }
.mp__how b { display: block; margin-bottom: .15rem; font-family: var(--f-mono); font-weight: 500; font-size: max(.68rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; }
.mp__tip { grid-column: 1 / -1; margin: 0; font-family: var(--f-hand); font-size: 1.45rem; line-height: 1.15; color: var(--sage-ink); }
.mx-prep .prep-perks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
.mx-prep .prep-perks li { grid-template-columns: none; justify-items: start; gap: .8rem; padding: 1.2rem 1.2rem 1.3rem; border: 0; border-radius: var(--r-lg); background: var(--bone); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .06); }
.mx-prep .prep-perks svg { box-sizing: content-box; width: 1.4rem; height: 1.4rem; padding: .55rem; border-radius: 50%; background: var(--mist); color: var(--sage-ink); }
.mx-prep .prep-perks b { color: var(--ink); }
.mx-prep .signup-card { border: 0; border-top: .45rem solid var(--marigold); box-shadow: 0 30px 50px -36px rgba(30, 43, 34, .6); }

/* Questions */
.mx-faq { padding-block: var(--space-section); background: var(--mist); }
.mx-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.mx-faq__side { display: grid; justify-items: start; gap: 1rem; }

/* The end (v3): all three ways on one kitchen board; the words flip into place */
.mx-end { position: relative; overflow: hidden; padding-block: var(--space-section); background: var(--paper); text-align: center; }
.mx-end__sky { position: absolute; inset: 0; pointer-events: none; }
.mx-end__canvas { display: block; width: 100%; height: 100%; }
.mx-end__in { position: relative; display: grid; justify-items: center; gap: 1.6rem; }
.mx-end__title { margin: 0; font-family: var(--f-display); font-weight: 380; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: .95; letter-spacing: -.04em; }
.mx-end__title em { display: block; font-style: italic; font-weight: 340; color: var(--sage); font-variation-settings: "SOFT" 100, "WONK" 1; }
.mx-board { width: min(100%, 880px); padding: .5rem .6rem .6rem; border-radius: var(--r-lg); background: var(--sage); color: var(--paper); text-align: left; box-shadow: 0 44px 70px -40px rgba(30, 43, 34, .85), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mx-board__h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin: 0; padding: .75rem .8rem .85rem; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.mx-board__live { display: inline-flex; align-items: center; gap: .5rem; }
.mx-board__live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 4px rgba(242, 212, 155, .25); animation: mx-blink 1.6s ease-in-out infinite; }
@keyframes mx-blink { 50% { opacity: .35; } }
.mx-board__rows { list-style: none; display: grid; gap: .45rem; margin: 0; padding: 0; }
.mx-board__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1.2rem; padding: 1rem 1.1rem; border-radius: calc(var(--r-lg) - .3rem); background: rgba(30, 43, 34, .18); }
.mx-board__what { display: grid; gap: .2rem; }
.mx-board__what b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.1; letter-spacing: -.02em; }
.mx-board__what small { font-size: .88rem; color: var(--paper); }
.mx-board__flap { display: inline-flex; justify-content: flex-end; }
.mx-end__or { max-width: 52ch; margin: 0; color: var(--muted); }
.mx-end__or a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

html.reduce-motion .mx-ticket, html.reduce-motion .mx-opt__tag, html.reduce-motion .mx-steps::before, html.reduce-motion .emb__dots circle, html.reduce-motion .mx-board__live::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .mx-ticket, .mx-opt__tag, .mx-steps::before, .emb__dots circle, .mx-board__live::before { animation: none; } }

@media (max-width: 1080px) and (min-width: 761px) {
  .mx-rail { gap: 1rem; }
  .mx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; }
  .mx-steps::before { display: none; }
  .mp__picks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
  .mp .pick__name small, .mp .pick__p { display: none; }
  .mx-prep .prep-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .mx-hero { height: auto; min-height: 0; max-height: none; padding-top: calc(var(--header-h) + 34px + 1.8rem); padding-bottom: 2.6rem; }
  .mx-hero__title { font-size: clamp(2.4rem, 11vw, 3rem); }
  .mx-hero__lede { margin: 1rem auto 1.1rem; font-size: 1.02rem; }
  .mx-next { font-size: .84rem; }
  .mx-plates { flex: none; position: relative; height: 230px; min-height: 0; max-height: none; margin-top: 1.8rem; }
  .mx-plates__p { position: absolute; bottom: 0; left: 50%; max-width: none; }
  .mx-plates__p:nth-child(1), .mx-plates__p:nth-child(5) { display: none; }
  .mx-plates__p:nth-child(2) { height: 72%; max-width: none; translate: -118% 0; }
  .mx-plates__p:nth-child(4) { height: 72%; max-width: none; translate: 18% 0; }
  .mx-plates__p:nth-child(3) { z-index: 2; height: 100%; max-width: none; translate: -50% 0; }

  /* three ways: the tickets stick and stack over each other as you scroll (main.js shrinks the one underneath) */
  .mx-rail { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-top: 0; }
  .mx-rail::before, .mx-ticket::before { display: none; }
  .mx-ticket { position: sticky; top: calc(var(--header-h) + .8rem); padding-bottom: 1.9rem; animation: none; transform-origin: 50% 0; filter: none; box-shadow: 0 -14px 30px -18px rgba(30, 43, 34, .45); }
  .mx-ticket:nth-child(2) { top: calc(var(--header-h) + 1.8rem); }
  .mx-ticket:nth-child(3) { top: calc(var(--header-h) + 2.8rem); }

  /* thanksgiving: the date ticket stays one row; the three cards stick and stack; the sides stay four across */
  .mx-tg__dates { width: 100%; }
  .mx-tg__dates > div { padding: .8rem .35rem .85rem; }
  .mx-tg__dates b { font-size: 1.02rem; }
  .mx-tg__dates span { font-size: .78rem; }
  .mx-tg__due span { padding: .1rem .4rem; }
  .mx-opts { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .mx-opt { position: sticky; top: calc(var(--header-h) + 1.6rem); transform-origin: 50% 0; box-shadow: 0 -14px 30px -18px rgba(10, 20, 12, .6); }
  .mx-opt:nth-child(2) { top: calc(var(--header-h) + 2.6rem); }
  .mx-opt:nth-child(3) { top: calc(var(--header-h) + 3.6rem); }
  .mx-opt__img { aspect-ratio: 16 / 10; }
  .mx-opt__tag { right: 1rem; min-width: 4.2rem; padding: 1.3rem .6rem .55rem; }
  .mx-opt__tag b { font-size: 1.45rem; }
  .mx-opt .btn { width: 100%; }
  .mx-sides { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .mx-sides li { gap: .55rem; font-size: max(.78rem, var(--min-text)); }
  .mx-sides img { width: 4.4rem; box-shadow: 0 0 0 3px var(--bone), 0 14px 20px -12px rgba(10, 20, 12, .8); }

  /* how it works: the four steps as a 2 x 2 grid; the two ways to warm it side by side */
  .mx-steps { --emb: 7.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem .8rem; }
  .mx-steps::before { display: none; }
  .mx-steps .emb__words { font-size: 12px; }
  .mx-step h3 { margin-top: .5rem; font-size: 1.25rem; }
  .mx-step p { font-size: .88rem; }
  .mx-warm__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .mx-warm__c { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .6rem; padding: 1.1rem .7rem 1.2rem; text-align: center; }
  .mx-warm__emb { --emb: 4.8rem; }
  .mx-warm__c h3 { font-size: 1.3rem; }

  /* prepared meals: the five meals as a row of round photos above the picture; the names show in the panel */
  .mp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "picks" "stage" "panel"; gap: 1.2rem; }
  .mp__picks { gap: .3rem; }
  .mp .pick, .mp .pick:hover, .mp .pick.is-on { padding: .3rem 0; border: 0; background: transparent; box-shadow: none; translate: none; }
  .mp .pick__thumb { width: 100%; max-width: 3.9rem; }
  .mp .pick.is-on .pick__thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--marigold); }
  .mp .pick__name, .mp .pick__p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mp__stage { aspect-ratio: 1; }
  .mp__rings { gap: .4rem; padding: 1rem .5rem .9rem; }
  .mp-ring { width: min(100%, 5.6rem); }
  .mp-ring b { font-size: 1.55rem; }
  .mp__reheat { grid-template-columns: minmax(0, 1fr); }
  .mx-prep .prep-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .mx-prep .prep-perks li { padding: 1rem .9rem 1.1rem; font-size: .86rem; }

  .mx-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }

  /* the board: each line is the name, then its flap and button side by side */
  .mx-board { padding: .4rem .4rem .5rem; }
  .mx-board__row { grid-template-columns: minmax(0, 1fr) auto; gap: .7rem .6rem; padding: .9rem .8rem; }
  .mx-board__what { grid-column: 1 / -1; }
  .mx-board__flap { min-width: 0; font-size: max(.78rem, var(--min-text)); }
}

/* ==========================================================================
   Catering (v2 hero, v3 the rest, Nov 3): hero on one screen with three photos side by side; weddings on green;
   what we cater as eight animated emblems; four step cards (dealt out on a computer, stacking on phones); the menu
   builder on a gingham tablecloth; questions as a text thread; a place card at the end.
   ========================================================================== */
.kt-wed em { --accent-text: var(--honey); }

/* Hero */
.kt-hero { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100svh; min-height: 720px; max-height: 1000px; overflow-x: clip; padding-top: calc(var(--header-h) + 34px + clamp(1.4rem, 4vh, 3rem)); padding-bottom: clamp(1.6rem, 4vh, 2.8rem); background: var(--mist); color: var(--ink); --muted: #5e6a60; --line: rgba(30, 43, 34, .14); }
.kt-hero::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 18px; background: radial-gradient(circle at 18px 0, var(--mist) 17.5px, transparent 18.5px) 0 0 / 36px 18px repeat-x; pointer-events: none; }
.kt-hero__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kt-hero__canvas { display: block; width: 100%; height: 100%; }
.kt-hero__glow { position: absolute; width: 64vmax; aspect-ratio: 1; right: -22vmax; top: -26vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 162, 59, .2), rgba(226, 162, 59, 0)); }
.kt-hero__grid { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kt-hero__grid > * { position: relative; z-index: 2; }
.kt-hero__title { max-width: 16ch; margin: 0; font-family: var(--f-display); font-weight: 380; font-size: clamp(2.7rem, min(5vw, 8.4vh), 5.1rem); line-height: .94; letter-spacing: -.04em; font-variation-settings: "SOFT" 30, "WONK" 0; text-wrap: balance; }
.kt-hero__title em { display: block; }
.kt-hero__lede { max-width: 48ch; margin: clamp(.8rem, 2vh, 1.3rem) auto clamp(1.1rem, 2.6vh, 1.7rem); font-size: var(--fs-lede); line-height: 1.55; text-wrap: pretty; }
.kt-hero .btn-row { justify-content: center; }
.kt-hero .btn--ghost { --hover-bg: var(--ink); --hover-fg: var(--paper); }
/* three photos side by side, the middle one tallest, each with a little label */
.kt-trio { flex: 1; min-height: 200px; max-height: 420px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(.8rem, 1.8vw, 1.5rem); width: 100%; margin-top: clamp(1.4rem, 3.5vh, 2.6rem); }
.kt-trio__c { position: relative; flex: none; height: 80%; aspect-ratio: 1 / 1.08; overflow: hidden; margin: 0; border: 6px solid var(--bone); border-radius: 1.4rem; background: var(--oat); box-shadow: 0 34px 50px -30px rgba(20, 30, 22, .7); transition: translate .6s var(--ease-out); }
.kt-trio__c:nth-child(2) { height: 100%; aspect-ratio: 5 / 4; }
.kt-trio__c:hover { translate: 0 -8px; }
.kt-trio__c img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.kt-trio__c:hover img { scale: 1.05; }
.kt-trio__c figcaption { position: absolute; left: .7rem; bottom: .7rem; padding: .32rem .8rem; border-radius: 999px; background: rgba(251, 247, 240, .94); color: var(--ink); font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 18px -10px rgba(20, 30, 22, .6); }

/* Weddings: the photo is a plain rounded card now (arches are for heroes only) */
.kt-wed { position: relative; z-index: 1; padding-block: calc(var(--space-section) + .8rem) var(--space-section); background: var(--sage); color: var(--paper); --muted: rgba(251, 247, 240, .9); --line: rgba(251, 247, 240, .24); }
.kt-wed__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.kt-wed__photo { position: relative; justify-self: center; width: min(100%, 440px); }
.kt-wed__pic { aspect-ratio: 4 / 5; overflow: hidden; border: 6px solid var(--paper); border-radius: var(--r-lg); background: var(--oat); rotate: -2deg; box-shadow: 0 44px 70px -40px rgba(10, 20, 12, .75); }
.kt-wed__pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); transform-origin: 50% 84%; }
.kt-badge { position: absolute; z-index: 2; left: -1.6rem; bottom: 10%; display: grid; place-items: center; align-content: center; width: 7.4rem; aspect-ratio: 1; margin: 0; border-radius: 50%; background: var(--honey); color: var(--ink); text-align: center; rotate: -10deg; box-shadow: 0 18px 30px -16px rgba(10, 20, 12, .7); }
.kt-badge::after { content: ""; position: absolute; inset: .4rem; border: 1px dashed rgba(30, 43, 34, .45); border-radius: 50%; }
.kt-badge small { font-family: var(--f-mono); font-size: max(.6rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; }
.kt-badge b { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 2.1rem; line-height: 1; font-variation-settings: "SOFT" 100, "WONK" 1; }
.kt-wed__text { display: grid; justify-items: start; gap: 1.1rem; }
.kt-wed__lede { max-width: 46ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; }
.kt-ticks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.4rem; margin: .3rem 0 .4rem; padding: 0; }
.kt-ticks li { display: flex; align-items: center; gap: .7rem; font-size: .95rem; line-height: 1.35; }
.kt-ticks svg { flex: none; width: 2.4rem; height: 2.4rem; padding: .58rem; border-radius: 50%; background: rgba(251, 247, 240, .14); color: var(--honey); }
.kt-wed .btn--ghost { --hover-bg: var(--paper); --hover-fg: var(--ink); }

/* What we cater: eight animated emblems, each with a ring of words turning around it */
.kt-occ { padding-block: var(--space-section); background: var(--paper); }
.kt-occ__grid { --emb: clamp(8.4rem, 10vw, 9.6rem); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.2rem) clamp(1rem, 2.4vw, 2rem); margin: clamp(.6rem, 1.5vw, 1rem) 0 0; padding: 0; }
.kt-occ__c { display: grid; justify-items: center; align-content: start; gap: .45rem; text-align: center; }
.kt-occ__c .emb { margin-bottom: .7rem; }
.kt-occ__c .emb__svg { width: 70%; height: 70%; }
.kt-occ__c h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.45rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.kt-occ__c p { max-width: 26ch; margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.emb__twinkle > * { transform-box: fill-box; transform-origin: center; animation: emb-twinkle 1.8s ease-in-out infinite; }
.emb__twinkle > *:nth-child(2) { animation-delay: -.6s; }
.emb__twinkle > *:nth-child(3) { animation-delay: -1.2s; }
@keyframes emb-twinkle { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: .7; } }
.emb__flame path { transform-box: fill-box; transform-origin: 50% 100%; animation: emb-flame .9s ease-in-out infinite alternate; }
.emb__flame path:nth-child(2) { animation-delay: -.3s; }
.emb__flame path:nth-child(3) { animation-delay: -.6s; }
@keyframes emb-flame { from { scale: .85 1; rotate: -6deg; } to { scale: 1.1 1.15; rotate: 6deg; } }

/* How catering works: four colored step cards, dealt out on a computer, stacking on phones */
.kt-how { padding-block: var(--space-section); background: var(--mist); }
.kt-how__head { display: grid; justify-items: center; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }
.kt-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); margin: 0; padding: 0; }
.kt-step { --bg: var(--sage); --fg: var(--paper); --ic-bg: var(--paper); --ic-fg: var(--sage-ink); --chip: var(--sage-ink); position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; gap: .6rem; min-height: 20rem; padding: 1.5rem 1.4rem 1.3rem; overflow: hidden; border-radius: var(--r-lg); background: var(--bg); color: var(--fg); box-shadow: 0 30px 50px -34px rgba(30, 43, 34, .7); }
.kt-step::after { content: ""; position: absolute; right: -3.2rem; bottom: -3.2rem; width: 9rem; aspect-ratio: 1; border: 2px dashed currentColor; border-radius: 50%; opacity: .18; animation: emb-spin 30s linear infinite; }
.kt-step:nth-child(2) { --bg: var(--marigold); --fg: var(--ink); --ic-bg: var(--ink); --ic-fg: var(--marigold); --chip: rgba(30, 43, 34, .12); }
.kt-step:nth-child(3) { --bg: var(--honey); --fg: var(--ink); --ic-bg: var(--ink); --ic-fg: var(--honey); --chip: rgba(30, 43, 34, .1); }
.kt-step:nth-child(4) { --bg: var(--bone); --fg: var(--ink); --ic-bg: var(--sage); --ic-fg: var(--paper); --chip: var(--mist); }
.kt-step__n::before { content: attr(data-n); }
.kt-step__n { position: absolute; right: 1rem; top: .4rem; font-family: var(--f-display); font-style: italic; font-size: 4.6rem; line-height: 1; opacity: .22; font-variation-settings: "SOFT" 100, "WONK" 1; }
.kt-step__ic { display: grid; place-items: center; width: 3.4rem; aspect-ratio: 1; margin-bottom: .6rem; border-radius: 50%; background: var(--ic-bg); color: var(--ic-fg); box-shadow: 0 10px 20px -12px rgba(20, 30, 22, .6); }
.kt-step__ic svg { width: 1.5rem; height: 1.5rem; }
.kt-step__chip { justify-self: start; padding: .25rem .7rem; border-radius: 999px; background: var(--chip); font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; }
.kt-step h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1.05; letter-spacing: -.03em; }
.kt-step p { margin: 0; font-size: .93rem; line-height: 1.5; }
.kt-step__foot { position: relative; z-index: 1; padding-top: .9rem; border-top: 1px dashed currentColor; font-size: .88rem; font-weight: 600; }
.kt-step__foot a { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kt-step__foot svg { width: .95rem; height: .95rem; transition: translate .4s var(--ease-out); }
.kt-step__foot a:hover svg { translate: 3px 0; }

/* Menu builder: a gingham tablecloth; the dishes on a cream board, your menu card beside it */
.kt-builder { background-color: #fbf4e6; background-image: linear-gradient(90deg, rgba(226, 162, 59, .12) 50%, transparent 50%), linear-gradient(rgba(226, 162, 59, .12) 50%, transparent 50%); background-size: 46px 46px; color: var(--ink); --line: rgba(30, 43, 34, .16); --muted: #5e6a60; }
.kt-builder__head { display: grid; justify-items: center; gap: .9rem; max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.kt-builder__head .h2 { padding: .1rem .8rem; background: #fbf4e6; box-shadow: 0 0 30px 20px #fbf4e6; }
.kt-builder__lede { max-width: 50ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); background: #fbf4e6; box-shadow: 0 0 24px 18px #fbf4e6; }
.kt-board { padding: clamp(1.2rem, 2.4vw, 1.8rem); border-radius: var(--r-lg); background: var(--bone); box-shadow: 0 40px 70px -46px rgba(30, 43, 34, .55), inset 0 0 0 1px rgba(30, 43, 34, .06); }
.kt-board__k { margin: 0 0 .7rem; font-family: var(--f-hand); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--sage-ink); }
.kt-builder .filter { border-color: var(--line); background: var(--paper); color: var(--ink); }
.kt-builder .filter:hover { border-color: var(--ink); }
.kt-builder .filter.is-active { border-color: var(--sage-ink); background: var(--sage-ink); color: var(--paper); }
.kt-builder .builder__course h3 { color: var(--sage-ink); }
.kt-builder .dish { border-color: var(--line); background: var(--paper); color: var(--ink); }
.kt-builder .dish:hover { border-color: var(--sage-ink); translate: 0 -2px; }
.kt-builder .dish[aria-pressed="true"] { border-color: var(--marigold); background: var(--marigold); color: var(--ink); }
.kt-builder .yourmenu { border-radius: .5rem; box-shadow: 0 50px 80px -44px rgba(30, 43, 34, .6); rotate: .6deg; }

/* Questions: a text thread with Chef David; his answer types in when you tap a question */
.kt-faq { padding-block: var(--space-section); background: var(--mist); }
.kt-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.kt-faq__side { position: sticky; top: calc(var(--header-h) + 3rem); display: grid; justify-items: start; gap: 1rem; }
.kt-faq__lede { max-width: 36ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.kt-faq__side .btn-row { align-items: center; gap: 1.2rem; }
.kt-chat { overflow: hidden; border-radius: 1.8rem; background: var(--bone); box-shadow: 0 50px 80px -50px rgba(30, 43, 34, .6), inset 0 0 0 1px rgba(30, 43, 34, .07); }
.kt-chat__bar { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem; background: var(--sage-ink); color: var(--paper); }
.kt-chat__av { display: grid; place-items: center; width: 2.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--sage-ink); }
.kt-chat__av svg { width: 62%; }
.kt-chat__who { display: grid; line-height: 1.2; }
.kt-chat__who b { font-weight: 600; }
.kt-chat__who small { font-size: .82rem; color: rgba(251, 247, 240, .9); }
.kt-chat__body { display: grid; gap: .7rem; padding: 1.3rem 1.1rem 1.5rem; border: 0; background: radial-gradient(circle at 1px 1px, rgba(30, 43, 34, .07) 1px, transparent 1.5px) 0 0 / 18px 18px, #f3f1ea; }
.kt-msg { display: grid; border: 0; }
.kt-msg .acc__q { justify-self: end; display: inline-flex; gap: .7rem; width: auto; max-width: 88%; padding: .7rem .8rem .7rem 1.1rem; border: 1.5px solid var(--sage); border-radius: 1.3rem 1.3rem .35rem 1.3rem; background: var(--paper); color: var(--sage-ink); font-size: 1.02rem; text-align: left; transition: background .3s, color .3s, translate .3s var(--ease-out); }
.kt-msg .acc__q:hover { translate: -3px 0; color: var(--sage-ink); }
.kt-msg.is-open .acc__q { background: var(--sage); color: var(--paper); }
.kt-msg .acc__icon { width: 1.6rem; height: 1.6rem; border-color: currentColor; }
.kt-msg .acc__icon::before, .kt-msg .acc__icon::after { width: 9px; }
.kt-msg .acc__a-inner { position: relative; display: block; max-width: none; padding: .7rem 0 .2rem; }
.kt-msg .acc__a-inner p { width: fit-content; max-width: 88%; margin: 0; padding: .8rem 1.1rem; border-radius: 1.3rem 1.3rem 1.3rem .35rem; background: var(--paper); color: var(--ink); font-size: .96rem; line-height: 1.5; box-shadow: 0 10px 20px -16px rgba(30, 43, 34, .5); }
.kt-typing { position: absolute; left: 0; top: .7rem; display: inline-flex; gap: .3rem; padding: .95rem 1.1rem; border-radius: 1.3rem 1.3rem 1.3rem .35rem; background: var(--paper); opacity: 0; }
.kt-typing i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--sage); animation: emb-dot 1s ease-in-out infinite; }
.kt-typing i:nth-child(2) { animation-delay: .15s; }
.kt-typing i:nth-child(3) { animation-delay: .3s; }
.kt-msg.is-open .kt-typing { animation: kt-typing 1s ease forwards; }
.kt-msg.is-open .acc__a-inner p { animation: kt-say .45s .85s var(--ease-out) both; }
@keyframes kt-typing { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kt-say { from { opacity: 0; translate: 0 8px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* The end: a place card stands up on the table next to the ways to get started */
.kt-end { position: relative; overflow: hidden; padding-block: var(--space-section); background: var(--paper); }
.kt-end__sky { position: absolute; inset: 0; pointer-events: none; }
.kt-end__canvas { display: block; width: 100%; height: 100%; }
.kt-end__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.kt-place { position: relative; justify-self: center; width: min(100%, 26rem); padding-bottom: 2.4rem; perspective: 1200px; }
.kt-place::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 1.2rem; height: 1.8rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 43, 34, .3), rgba(30, 43, 34, 0)); }
.kt-place__card { position: relative; z-index: 1; display: grid; justify-items: center; gap: .3rem; padding: 2rem 1.6rem 2.2rem; border-radius: .4rem; background: linear-gradient(180deg, var(--bone), #f2ead9); color: var(--ink); text-align: center; transform-origin: 50% 100%; transform: rotateX(10deg); box-shadow: 0 2px 0 #e2d6bf, 0 30px 40px -30px rgba(30, 43, 34, .7); }
.kt-place__card::before { content: ""; position: absolute; inset: .6rem; border: 1px solid rgba(87, 122, 64, .45); border-radius: .2rem; pointer-events: none; }
.kt-place__hat { width: 3rem; color: var(--sage); }
.kt-place__k { margin: .3rem 0 0; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .2em; text-transform: uppercase; color: #5e6a60; }
.kt-place__name { margin: 0; font-family: var(--f-hand); font-size: clamp(3rem, 5vw, 3.8rem); font-weight: 600; line-height: 1; color: var(--sage-ink); }
.kt-place__by { margin: .4rem 0 0; padding-top: .6rem; border-top: 1px dashed rgba(87, 122, 64, .5); font-family: var(--f-display); font-style: italic; font-size: 1.05rem; }
.kt-end__text { display: grid; justify-items: start; gap: 1.2rem; }
.kt-end__text .mx-end__title em { display: block; }
.kt-end__lede { max-width: 42ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.kt-end__hol { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; max-width: 48ch; margin: .4rem 0 0; padding: 1rem 1.1rem; border-radius: var(--r-lg); background: var(--bone); font-size: .92rem; line-height: 1.5; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .07); }
.kt-end__hol b { color: var(--ink); }
.kt-end__hol a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.kt-end__hol-ic { display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border-radius: 50%; background: var(--sage-ink); color: var(--paper); }
.kt-end__hol-ic svg { width: 1.2rem; height: 1.2rem; }

html.reduce-motion .emb__twinkle > *, html.reduce-motion .emb__flame path, html.reduce-motion .kt-step::after, html.reduce-motion .kt-typing i { animation: none; }
html.reduce-motion .kt-msg.is-open .kt-typing { animation: none; opacity: 0; }
html.reduce-motion .kt-msg.is-open .acc__a-inner p { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .emb__twinkle > *, .emb__flame path, .kt-step::after, .kt-typing i { animation: none; }
  .kt-msg.is-open .kt-typing { animation: none; opacity: 0; }
  .kt-msg.is-open .acc__a-inner p { animation: none; }
}

@media (max-width: 1080px) and (min-width: 761px) {
  .kt-occ__grid, .kt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-ticks { grid-template-columns: minmax(0, 1fr); }
  .kt-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .kt-faq__side { position: static; }
}

@media (max-width: 760px) {
  .kt-hero { height: auto; min-height: 0; max-height: none; padding-top: calc(var(--header-h) + 34px + 1.8rem); padding-bottom: 2.6rem; }
  .kt-hero__title { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }
  .kt-hero__lede { margin: 1rem auto 1.3rem; font-size: 1.02rem; }
  /* the three photos stay side by side, sized by width */
  .kt-trio { flex: none; display: grid; grid-template-columns: 1fr 1.45fr 1fr; align-items: end; gap: .5rem; max-height: none; min-height: 0; margin-top: 2rem; }
  .kt-trio__c, .kt-trio__c:nth-child(2) { height: auto; width: 100%; border-width: 4px; border-radius: 1rem; }
  .kt-trio__c { aspect-ratio: 3 / 4; }
  .kt-trio__c:nth-child(2) { aspect-ratio: 4 / 5; }
  .kt-trio__c figcaption { left: 50%; bottom: .4rem; translate: -50% 0; padding: .2rem .5rem; font-size: max(.6rem, var(--min-text)); letter-spacing: .04em; white-space: nowrap; }
  .kt-trio__c:not(:nth-child(2)) figcaption { display: none; }

  .kt-wed__grid { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .kt-wed__photo { width: min(100%, 320px); }
  .kt-badge { left: -.6rem; width: 6.2rem; }
  .kt-badge b { font-size: 1.8rem; }
  .kt-ticks { grid-template-columns: minmax(0, 1fr); }
  .kt-wed .btn-row, .kt-wed .btn { width: 100%; }

  /* the eight emblems as a 2-column grid */
  .kt-occ__grid { --emb: 7.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .8rem; }
  .kt-occ__grid .emb__words { font-size: 12.5px; }
  .kt-occ__c h3 { font-size: 1.12rem; }
  .kt-occ__c p { font-size: .84rem; }

  /* the step cards stick and stack over each other as you scroll (main.js shrinks the one underneath) */
  .kt-steps { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .kt-step { position: sticky; top: calc(var(--header-h) + .8rem); min-height: 16rem; transform-origin: 50% 0; }
  .kt-step:nth-child(2) { top: calc(var(--header-h) + 1.7rem); }
  .kt-step:nth-child(3) { top: calc(var(--header-h) + 2.6rem); }
  .kt-step:nth-child(4) { top: calc(var(--header-h) + 3.5rem); }

  .kt-builder { background-size: 34px 34px; }
  .kt-board { padding: 1rem .8rem; }

  .kt-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .kt-faq__side { position: static; }
  .kt-chat { border-radius: 1.4rem; }
  .kt-chat__body { padding: 1rem .7rem 1.2rem; }
  .kt-msg .acc__q { max-width: 94%; font-size: .96rem; }
  .kt-msg .acc__a-inner p { max-width: 94%; font-size: .92rem; }

  .kt-end__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .kt-place { width: min(100%, 20rem); }
  .kt-end__text { justify-items: center; text-align: center; }
  .kt-end .btn-row, .kt-end .btn { width: 100%; }
  .kt-end__hol { text-align: left; }
}

/* ==========================================================================
   Chef David v3 and Contact v2 (Nov 3). Chef: a magazine hero with counters, the quote, a passport page that gets
   stamped, matchbook stories, a seed packet on green, newspaper clippings, a signed ending. Contact: four colored
   ways to reach him, then the form beside the storefront and the hours.
   ========================================================================== */
.ch-bloom em { --accent-text: var(--honey); }

/* shared hero shell (same as the other pages) */
.ch-hero, .co-hero { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100svh; min-height: 720px; max-height: 1000px; overflow-x: clip; padding-top: calc(var(--header-h) + 34px + clamp(1.4rem, 4vh, 3rem)); padding-bottom: clamp(1.6rem, 4vh, 2.8rem); background: var(--mist); color: var(--ink); --muted: #5e6a60; --line: rgba(30, 43, 34, .14); }
.ch-hero::after, .co-hero::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 18px; background: radial-gradient(circle at 18px 0, var(--mist) 17.5px, transparent 18.5px) 0 0 / 36px 18px repeat-x; pointer-events: none; }
.ch-hero__sky, .co-hero__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ch-hero__canvas, .co-hero__canvas, .ch-end__canvas { display: block; width: 100%; height: 100%; }
.ch-hero__glow, .co-hero__glow { position: absolute; width: 64vmax; aspect-ratio: 1; right: -22vmax; top: -26vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 162, 59, .2), rgba(226, 162, 59, 0)); }
.ch-hero__grid, .co-hero__grid { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ch-hero__grid > *, .co-hero__grid > * { position: relative; z-index: 2; }

/* Chef hero (v3): his name big on the left with four numbers that count up; the portrait arch on the right with a
   turning emblem */
.ch-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "text art" "count art"; align-items: center; gap: 1.6rem clamp(2rem, 5vw, 5rem); text-align: left; }
.ch-hero__text { grid-area: text; display: grid; justify-items: start; }
.ch-hero__kick { margin: 0 0 1rem; font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; color: var(--sage-ink); }
.ch-hero__name { margin: 0; font-family: var(--f-display); font-weight: 360; font-size: clamp(3.8rem, min(8.6vw, 14vh), 8.8rem); line-height: .84; letter-spacing: -.05em; font-variation-settings: "SOFT" 30, "WONK" 0; }
.ch-hero__name em { display: block; padding-left: .5em; }
.ch-hero__lede { max-width: 40ch; margin: clamp(1rem, 2.4vh, 1.6rem) 0 clamp(1.1rem, 2.6vh, 1.6rem); font-size: var(--fs-lede); line-height: 1.55; }
.ch-hero__lede em { font-style: italic; }
.ch-hero .btn--ghost { --hover-bg: var(--ink); --hover-fg: var(--paper); }
.ch-count { grid-area: count; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: end; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--line); }
.ch-count li { display: grid; align-content: start; gap: .3rem; padding-right: .8rem; }
.ch-count li + li { padding-left: .9rem; border-left: 1px dashed rgba(30, 43, 34, .2); }
.ch-count b { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, min(3.4vw, 5.6vh), 3.2rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--sage-ink); }
.ch-count span { font-size: .82rem; line-height: 1.35; color: var(--muted); }
.ch-hero__art { grid-area: art; position: relative; align-self: stretch; display: grid; place-items: end center; min-height: 0; }
.ch-hero__arch { position: relative; height: 100%; max-height: 700px; aspect-ratio: 3 / 3.9; max-width: 100%; overflow: hidden; border: 6px solid var(--bone); border-radius: 999px 999px 1.4rem 1.4rem; background: var(--oat); box-shadow: 0 44px 70px -40px rgba(20, 30, 22, .75); }
.ch-hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.ch-hero__emb { --emb: clamp(8rem, 10vw, 9.6rem); position: absolute; left: 2%; bottom: 8%; margin: 0; }
.ch-hero__hat { width: 52%; color: var(--ink); }

/* The quote, big and wide */
.ch-quote { padding-block: var(--space-section); background: var(--paper); }
.ch-quote__q { margin: 0 auto; text-align: center; }
.ch-quote__q p { max-width: 19ch; margin: 0 auto; font-family: var(--f-display); font-weight: 380; font-size: clamp(2.2rem, 4.8vw, 4.6rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.ch-quote__q em { font-style: italic; color: var(--sage); font-variation-settings: "SOFT" 100, "WONK" 1; }
.ch-quote__q cite { display: block; margin-top: 1.4rem; font-family: var(--f-hand); font-size: 1.8rem; font-style: normal; font-weight: 600; color: var(--sage-ink); }

/* The passport: a two-page spread that gets stamped as you scroll */
.ch-pass { padding-block: var(--space-section); background: var(--mist); }
.ch-pass__head { display: grid; justify-items: center; gap: .9rem; max-width: 46rem; margin: 0 auto clamp(2.4rem, 4.5vw, 3.4rem); text-align: center; }
.ch-pass__lede { max-width: 50ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.ch-book { position: relative; padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.6rem, 3.4vw, 3rem) clamp(4.6rem, 7vw, 5.6rem); border-radius: 1rem; background: repeating-radial-gradient(circle at 18% 120%, transparent 0 15px, rgba(80, 113, 60, .07) 15px 16px), repeating-radial-gradient(circle at 82% -20%, transparent 0 19px, rgba(87, 122, 64, .06) 19px 20px), #f7f0e1; color: var(--ink); box-shadow: 0 0 0 10px var(--sage-ink), 0 60px 90px -50px rgba(30, 43, 34, .8); }
.ch-book::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 60px; translate: -50% 0; background: linear-gradient(90deg, rgba(30, 43, 34, 0), rgba(30, 43, 34, .12) 48%, rgba(30, 43, 34, .2) 50%, rgba(30, 43, 34, .12) 52%, rgba(30, 43, 34, 0)); pointer-events: none; }
.ch-book__k { position: absolute; left: clamp(1.6rem, 3.4vw, 3rem); right: clamp(1.6rem, 3.4vw, 3rem); top: 1rem; display: flex; justify-content: space-between; margin: 0; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .2em; text-transform: uppercase; color: #6d6656; }
.ch-stamps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1rem; margin: 0; padding: 0; }
.ch-stamp { --ink-c: var(--sage-ink); position: relative; justify-self: center; align-self: center; display: grid; place-content: center; justify-items: center; gap: .25rem; color: var(--ink-c); text-align: center; text-transform: uppercase; translate: var(--x) var(--y); rotate: var(--r); mix-blend-mode: multiply; opacity: .9; }
.ch-stamp--sage { --ink-c: var(--sage); }
.ch-stamp--ink { --ink-c: #2f3a32; }
.ch-stamp__top, .ch-stamp__what { font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); font-weight: 500; letter-spacing: .14em; line-height: 1.25; }
.ch-stamp__place { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; line-height: 1; letter-spacing: -.01em; }
.ch-stamp--round { width: 10.5rem; aspect-ratio: 1; padding: 1.2rem; border: 3px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--book, #f7f0e1), inset 0 0 0 5.5px currentColor; }
.ch-stamp--rect { width: 12rem; min-height: 7.6rem; padding: 1rem 1.1rem; border: 3px double currentColor; border-width: 5px; border-radius: .5rem; }
.ch-stamp--rect .ch-stamp__place { font-size: 1.45rem; }
.ch-stamp--oval { width: 12.4rem; aspect-ratio: 1.55; padding: 1rem 1.4rem; border: 2.5px dashed currentColor; border-radius: 50%; }
.ch-stamp--big { grid-column: 3 / 5; width: 13rem; aspect-ratio: 1; padding: 1.6rem; border: 4px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 6px #f7f0e1, inset 0 0 0 8px currentColor; }
.ch-stamp--big .ch-stamp__place { font-family: var(--f-hand); font-size: 2.6rem; text-transform: none; }
.ch-stamp--big::after { content: "★ ★ ★"; position: absolute; bottom: 1.1rem; font-size: .6rem; letter-spacing: .3em; }
.ch-book__sig { position: absolute; left: clamp(1.6rem, 3.4vw, 3rem); bottom: 2.6rem; display: grid; gap: .1rem; margin: 0; }
.ch-book__sig small { font-family: var(--f-mono); font-size: max(.62rem, var(--min-text)); letter-spacing: .2em; text-transform: uppercase; color: #6d6656; }
.ch-book__sig span { font-family: var(--f-hand); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--ink); }
.ch-book__mrz { position: absolute; left: clamp(1.6rem, 3.4vw, 3rem); right: clamp(1.6rem, 3.4vw, 3rem); bottom: .9rem; overflow: hidden; margin: 0; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .32em; white-space: nowrap; color: #8a8270; }

/* Stories: three matchbooks; tap one and the cover flips up to show the story */
.ch-stories { padding-block: var(--space-section); background: var(--paper); }
.ch-matches { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 17.5rem)); justify-content: center; gap: clamp(1.4rem, 4vw, 3.4rem); margin: clamp(.6rem, 2vw, 1.2rem) 0 0; padding: 4rem 0 0; }
.ch-match { --c: var(--sage); --fg: var(--paper); position: relative; height: 23rem; perspective: 1300px; }
.ch-match:nth-child(2) { --c: var(--forest); }
.ch-match:nth-child(3) { --c: var(--marigold); --fg: var(--ink); }
.ch-match__inside { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto auto; overflow: hidden; border-radius: .6rem; background: var(--bone); box-shadow: 0 34px 50px -30px rgba(30, 43, 34, .65), inset 0 0 0 1px rgba(30, 43, 34, .06); }
.ch-match__story { display: grid; align-content: start; gap: .7rem; padding: 1.5rem 1.4rem 1rem; }
.ch-match__story p { margin: 0; font-family: var(--f-display); font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; }
.ch-match__story small { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ch-match__sticks { height: 4.2rem; background: radial-gradient(ellipse 7px 10px at 12px 11px, var(--marigold) 96%, transparent 100%) 6px 0 / 24px 100% repeat-x, linear-gradient(90deg, transparent 8px, #e3d3b4 8px 16px, transparent 16px) 6px 14px / 24px 100% repeat-x; }
.ch-match__strip { height: 1.5rem; background: repeating-linear-gradient(45deg, #43603a 0 2px, #2f4528 2px 4px); }
.ch-match__btn { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(100% - 1.5rem); padding: 0; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform 1s var(--ease-out); }
.ch-match__cover, .ch-match__back { position: absolute; inset: 0; border-radius: .6rem .6rem .25rem .25rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ch-match__cover { display: grid; place-content: center; justify-items: center; gap: .4rem; overflow: hidden; padding: 1.4rem; background: var(--c); color: var(--fg); text-align: center; box-shadow: 0 20px 34px -24px rgba(20, 30, 22, .7); }
.ch-match__burst { position: absolute; left: 50%; top: 46%; width: 15rem; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(currentColor 0 4deg, transparent 4deg 12deg); opacity: .12; animation: emb-spin 40s linear infinite; }
.ch-match__no { position: absolute; top: 1rem; left: 0; right: 0; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .2em; }
.ch-match__cover small { position: relative; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; }
.ch-match__cover b { position: relative; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 2.6rem; line-height: .95; letter-spacing: -.03em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.ch-match__strike { position: absolute; bottom: 1rem; left: 0; right: 0; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; }
.ch-match__back { display: grid; place-content: center; justify-items: center; gap: .5rem; background: #efe5cf; color: #3a5530; transform: rotateX(180deg); }
.ch-match__back svg { width: 3rem; }
.ch-match__back small { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; }
.ch-match__btn:focus-visible { outline: 3px solid var(--marigold); outline-offset: 4px; border-radius: .6rem; }
.ch-match.is-open .ch-match__btn { transform: rotateX(-112deg); }
@media (hover: hover) { .ch-match:hover .ch-match__btn { transform: rotateX(-112deg); } }

/* The flower farmer: a seed packet on green with petals falling */
.ch-bloom { position: relative; overflow: hidden; padding-block: var(--space-section); background: var(--sage); color: var(--paper); --muted: rgba(251, 247, 240, .9); }
.ch-bloom__sky { position: absolute; inset: 0; pointer-events: none; }
.ch-bloom__canvas { display: block; width: 100%; height: 100%; }
.ch-bloom__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.ch-bloom__text { display: grid; justify-items: start; gap: 1.1rem; }
.ch-bloom__text p:not(.eyebrow) { max-width: 48ch; margin: 0; line-height: 1.6; }
.ch-packet { position: relative; justify-self: center; width: min(100%, 22rem); padding: 0 0 3rem 2rem; }
.ch-packet__front { position: relative; display: grid; gap: .8rem; margin: 0; padding: 2rem 1.4rem 1.4rem; background: #f6eedc; color: var(--ink); rotate: 4deg; box-shadow: 0 50px 70px -40px rgba(10, 20, 12, .85); -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 50% no-repeat; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 50% no-repeat; transition: rotate .8s var(--ease-out); }
.ch-packet:hover .ch-packet__front { rotate: 0deg; }
.ch-packet__k { display: flex; justify-content: space-between; margin: 0; padding-bottom: .5rem; border-bottom: 1px solid rgba(30, 43, 34, .3); font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: var(--sage-ink); }
.ch-packet__t { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem, 3.6vw, 3.1rem); line-height: .9; letter-spacing: -.04em; }
.ch-packet__t em { display: block; font-style: italic; color: var(--sage-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
.ch-packet__img { overflow: hidden; aspect-ratio: 1; border-radius: .3rem; background: var(--oat); }
.ch-packet__img img { width: 100%; height: 100%; object-fit: cover; }
.ch-packet__f { display: flex; justify-content: space-between; gap: .6rem; font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: #5e6a60; }
.ch-packet__crepe { position: absolute; left: -1rem; bottom: 0; width: 9.5rem; aspect-ratio: 1; overflow: hidden; border: 5px solid var(--paper); border-radius: 50%; box-shadow: 0 24px 34px -18px rgba(10, 20, 12, .8); }
.ch-packet__crepe img { width: 100%; height: 100%; object-fit: cover; }

/* Press: newspaper clippings taped to the page */
.ch-press { padding-block: var(--space-section); background: var(--mist); }
.ch-clips { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: auto; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
.ch-clip { position: relative; display: grid; gap: .8rem; padding: 1.5rem 1.4rem 1.3rem; background: #fbf8f1; color: var(--ink); box-shadow: 0 30px 44px -32px rgba(30, 43, 34, .7); rotate: -1.2deg; transition: rotate .5s var(--ease-out), translate .5s var(--ease-out); }
.ch-clip:nth-child(even) { rotate: 1.4deg; }
.ch-clip:hover { rotate: 0deg; translate: 0 -5px; }
.ch-clip::before { content: ""; position: absolute; left: 50%; top: -.75rem; width: 5.5rem; height: 1.5rem; translate: -50% 0; rotate: -3deg; background: rgba(242, 212, 155, .78); box-shadow: 0 2px 5px -2px rgba(30, 43, 34, .3); }
.ch-clip--lead { grid-row: span 2; padding: 2rem 1.8rem 1.6rem; }
.ch-clip__mast { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .8rem; padding-bottom: .55rem; border-bottom: 3px double rgba(30, 43, 34, .6); }
.ch-clip__mast b { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; }
.ch-clip__mast small { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ch-clip__title { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; line-height: 1.12; letter-spacing: -.02em; }
.ch-clip--lead .ch-clip__title { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.02; }
.ch-clip__cols { display: block; height: 3.2rem; background: repeating-linear-gradient(180deg, rgba(30, 43, 34, .13) 0 2px, transparent 2px 9px); -webkit-mask: linear-gradient(90deg, #000 0 47%, transparent 47% 53%, #000 53%); mask: linear-gradient(90deg, #000 0 47%, transparent 47% 53%, #000 53%); }
.ch-clip--lead .ch-clip__cols { height: 9rem; }
.ch-clip__go { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; color: var(--sage-ink); }
.ch-clip__go svg { width: .95rem; height: .95rem; }

/* The end: a photo, the invitation and his signature writing itself */
.ch-end { position: relative; overflow: hidden; padding-block: var(--space-section); background: var(--paper); }
.ch-end__sky { position: absolute; inset: 0; pointer-events: none; }
.ch-end__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.ch-end__pic { overflow: hidden; aspect-ratio: 5 / 4; border: 6px solid var(--bone); border-radius: var(--r-lg); background: var(--oat); rotate: -1.5deg; box-shadow: 0 44px 70px -40px rgba(30, 43, 34, .7); }
.ch-end__pic img { width: 100%; height: 100%; object-fit: cover; }
.ch-end__text { display: grid; justify-items: start; gap: 1.2rem; }
.ch-end__text .mx-end__title em { display: block; }
.ch-end__lede { max-width: 40ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.ch-sig { display: grid; gap: .1rem; margin: .6rem 0 0; }
.ch-sig small { font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: var(--muted); }
.ch-sig__name { display: block; font-family: var(--f-hand); font-size: clamp(3.4rem, 6vw, 4.6rem); font-weight: 600; line-height: 1; color: var(--sage-ink); clip-path: inset(0 0 0 0); transition: clip-path 1.8s cubic-bezier(.5, 0, .3, 1); }
.ch-sig.is-wait .ch-sig__name { clip-path: inset(0 100% 0 0); }

html.reduce-motion .ch-match__burst { animation: none; }
@media (prefers-reduced-motion: reduce) { .ch-match__burst { animation: none; } .ch-match__btn { transition: none; } }

/* Contact hero: four colored ways to reach him */
.co-hero__title { margin: 0; font-family: var(--f-display); font-weight: 380; font-size: clamp(2.8rem, min(5.6vw, 9.4vh), 5.6rem); line-height: .92; letter-spacing: -.04em; font-variation-settings: "SOFT" 30, "WONK" 0; }
.co-hero__title em { display: block; }
.co-hero__lede { max-width: 48ch; margin: clamp(.8rem, 2vh, 1.3rem) auto clamp(1.6rem, 4vh, 2.6rem); font-size: var(--fs-lede); line-height: 1.55; }
.co-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); width: 100%; max-width: 72rem; margin-top: auto; text-align: left; }
.co-tile { --bg: var(--sage); --fg: var(--paper); position: relative; display: grid; align-content: end; gap: .3rem; min-height: clamp(11rem, 26vh, 15rem); padding: 1.3rem 1.3rem 1.4rem; overflow: hidden; border-radius: var(--r-lg); background: var(--bg); color: var(--fg); box-shadow: 0 30px 50px -34px rgba(20, 30, 22, .6); transition: translate .5s var(--ease-out), rotate .5s var(--ease-out); }
.co-tile:nth-child(2) { --bg: var(--marigold); --fg: var(--ink); }
.co-tile:nth-child(3) { --bg: var(--honey); --fg: var(--ink); }
.co-tile:nth-child(4) { --bg: var(--bone); --fg: var(--ink); }
.co-tile:hover { translate: 0 -8px; rotate: -1deg; }
.co-tile svg { position: absolute; left: 1.3rem; top: 1.3rem; width: 2.2rem; height: 2.2rem; transition: rotate .6s var(--ease-out), scale .6s var(--ease-out); }
.co-tile:hover svg { rotate: -12deg; scale: 1.15; }
.co-tile__k { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; }
.co-tile__v { font-family: var(--f-display); font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.co-tile:nth-child(3) .co-tile__v { font-size: clamp(1rem, 1.4vw, 1.3rem); overflow-wrap: normal; }

/* Contact: the form beside the storefront and hours */
.co-main { position: relative; z-index: 1; padding-block: calc(var(--space-section) + .8rem) var(--space-section); background: var(--paper); }
.co-main__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.co-form { display: grid; gap: 1rem; }
.co-form__card { margin-top: .6rem; padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--bone); box-shadow: 0 30px 50px -40px rgba(30, 43, 34, .55), inset 0 0 0 1px rgba(30, 43, 34, .06); }
.co-side { display: grid; gap: 1.2rem; }
.co-side .map { border-radius: var(--r-lg); overflow: hidden; }
.co-note { margin: 0; font-family: var(--f-hand); font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--sage-ink); text-align: center; rotate: -1.5deg; }
.co-hours { display: grid; padding: .6rem 1.3rem; border-radius: var(--r-lg); background: var(--mist); }
.co-hours__title { margin: .5rem 0 .3rem; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink); }
.co-hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px dashed rgba(30, 43, 34, .16); font-size: .95rem; }
.co-hours b { font-family: var(--f-mono); font-weight: 500; font-size: .86rem; text-align: right; }

@media (max-width: 1080px) and (min-width: 761px) {
  .ch-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .ch-count { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
  .ch-count li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ch-stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-stamp--big { grid-column: 1 / -1; }
  .ch-book::before { display: none; }
  .ch-matches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .ch-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .ch-hero, .co-hero { height: auto; min-height: 0; max-height: none; padding-top: calc(var(--header-h) + 34px + 1.8rem); padding-bottom: 2.6rem; }
  /* chef hero: name, words, the portrait, then the numbers as a 2 x 2 grid */
  .ch-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "text" "art" "count"; gap: 1.8rem; text-align: center; }
  .ch-hero__text { justify-items: center; }
  .ch-hero__name { font-size: clamp(3.4rem, 17vw, 4.6rem); }
  .ch-hero__name em { padding-left: 0; }
  .ch-hero__lede { margin-inline: auto; font-size: 1.02rem; }
  .ch-hero .btn-row { justify-content: center; }
  .ch-hero__art { height: 380px; }
  .ch-hero__arch { height: 100%; border-width: 4px; }
  .ch-hero__emb { --emb: 7rem; left: 0; bottom: 4%; }
  .ch-hero__emb .emb__words { font-size: 13px; }
  .ch-count { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 0; text-align: left; }
  .ch-count li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ch-count b { font-size: 2.3rem; }

  .ch-quote__q p { font-size: clamp(2rem, 9vw, 2.6rem); }

  /* the passport: one page, the stamps two across */
  .ch-book { padding: 2.8rem 1rem 6.4rem; box-shadow: 0 0 0 7px var(--sage-ink), 0 40px 60px -40px rgba(30, 43, 34, .8); }
  .ch-book::before { display: none; }
  .ch-book__k { left: 1rem; right: 1rem; letter-spacing: .12em; }
  .ch-stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .6rem; }
  .ch-stamp { translate: 0 0; }
  .ch-stamp--round { width: 8.8rem; padding: .8rem; }
  .ch-stamp--rect { width: 100%; max-width: 9.8rem; min-height: 6.6rem; padding: .7rem .5rem; }
  .ch-stamp--oval { width: 100%; max-width: 10rem; padding: .7rem .8rem; }
  .ch-stamp__place, .ch-stamp--rect .ch-stamp__place { font-size: 1.08rem; }
  .ch-stamp__top, .ch-stamp__what { letter-spacing: .06em; }
  .ch-stamp--big { grid-column: 1 / -1; width: 11rem; }
  .ch-book__sig { left: 1rem; bottom: 2.4rem; }
  .ch-book__mrz { left: 1rem; right: 1rem; letter-spacing: .18em; }

  /* matchbooks: they stick and stack over each other as you scroll (main.js); tap to open */
  .ch-matches { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.4rem; padding-top: 3rem; }
  .ch-match { position: sticky; top: calc(var(--header-h) + 3.4rem); width: min(100%, 18rem); height: 21rem; transform-origin: 50% 0; }
  .ch-match:nth-child(2) { top: calc(var(--header-h) + 4.4rem); }
  .ch-match:nth-child(3) { top: calc(var(--header-h) + 5.4rem); }

  .ch-bloom__grid { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .ch-packet { width: min(100%, 18rem); padding: 0 0 2.4rem 1.6rem; }
  .ch-packet__crepe { width: 7.4rem; left: -.4rem; }

  /* clippings: the lead story across the top, the rest two across */
  .ch-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .8rem; }
  .ch-clip--lead { grid-column: 1 / -1; grid-row: auto; }
  .ch-clip { padding: 1.2rem .9rem 1rem; }
  .ch-clip__mast b { font-size: .86rem; }
  .ch-clip__title { font-size: 1.05rem; }
  .ch-clip--lead .ch-clip__title { font-size: 1.6rem; }
  .ch-clip__cols { height: 2rem; }
  .ch-clip--lead .ch-clip__cols { height: 4rem; }
  .ch-clip__go { font-size: .8rem; }

  .ch-end__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ch-end__text { justify-items: center; text-align: center; }
  .ch-end .btn-row, .ch-end .btn { width: 100%; }

  .co-hero__lede { margin: 1rem auto 1.6rem; font-size: 1.02rem; }
  .co-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .co-tile { min-height: 9.5rem; padding: 1rem; }
  .co-tile svg { left: 1rem; top: 1rem; width: 1.8rem; height: 1.8rem; }
  .co-tile__v { font-size: 1.12rem; }
  .co-tile:nth-child(3) .co-tile__v { font-size: 1rem; }
  .co-main__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Shared FAQ (round 6, Nov 3): questions as tabs, one big answer card. Classes, Meals and Catering.
   ========================================================================== */
.qa-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; gap: 1.4rem 3rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.qa-head > div { display: grid; gap: .9rem; justify-items: start; }
.qa-head__lede { max-width: 42ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.qa-quote { position: relative; margin: 0; padding: 1.2rem 1.4rem 1.1rem 3.2rem; border-radius: var(--r-lg); background: var(--bone); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .06); }
.qa-quote::before { content: "“"; position: absolute; left: .9rem; top: .2rem; font-family: var(--f-display); font-size: 3.6rem; line-height: 1; color: var(--marigold); }
.qa-quote p { margin: 0; font-family: var(--f-display); font-size: 1.08rem; line-height: 1.4; }
.qa-quote footer { margin-top: .6rem; font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qa { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.qa:not(.is-ready) { grid-template-columns: minmax(0, 1fr); }
.qa:not(.is-ready) .qa__list { display: none; }
.qa:not(.is-ready) .qa__panels { display: grid; gap: 1rem; }
.qa__list { display: grid; gap: .55rem; }
.qa__q { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .9rem; width: 100%; padding: .85rem 1.2rem .85rem .9rem; border: 1px solid var(--line); border-radius: 1.2rem; background: transparent; color: var(--ink); text-align: left; transition: background .35s, border-color .35s, color .35s, translate .4s var(--ease-out); }
.qa__q:hover { border-color: rgba(30, 43, 34, .3); background: var(--bone); translate: 4px 0; }
.qa__q:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
.qa__n { font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .08em; color: var(--muted); }
.qa__ic { display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border-radius: 50%; background: var(--bone); color: var(--sage-ink); box-shadow: inset 0 0 0 1px var(--line); transition: background .35s, color .35s, rotate .6s var(--ease-out); }
.qa__ic svg { width: 1.15rem; height: 1.15rem; }
.qa__t { font-family: var(--f-display); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.2; letter-spacing: -.015em; }
.qa__s { display: none; }
.qa__q[aria-selected="true"] { border-color: var(--sage); background: var(--sage); color: var(--paper); translate: 8px 0; box-shadow: 0 18px 30px -22px rgba(30, 43, 34, .8); }
.qa__q[aria-selected="true"] .qa__n { color: rgba(251, 247, 240, .9); }
.qa__q[aria-selected="true"] .qa__ic { background: var(--honey); color: var(--ink); box-shadow: none; rotate: -12deg; }
.qa__q[aria-selected="true"]::after { content: ""; position: absolute; right: -.55rem; top: 50%; width: 1.1rem; height: 1.1rem; translate: 0 -50%; rotate: 45deg; border-radius: .2rem; background: var(--sage); }
.qa__stage { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: 1rem; }
.qa__panels { position: relative; min-height: var(--qa-h, 0); }
.qa__a { position: relative; overflow: hidden; display: grid; align-content: start; gap: .7rem; min-height: var(--qa-h, 0); padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: 1.8rem; background: var(--bone); box-shadow: 0 40px 70px -48px rgba(30, 43, 34, .65), inset 0 0 0 1px rgba(30, 43, 34, .06); }
.qa__a:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
.qa__a::after { content: ""; position: absolute; right: -4rem; bottom: -4rem; width: 13rem; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(87, 122, 64, .25); animation: emb-spin 40s linear infinite; pointer-events: none; }
.qa__badge { position: relative; display: grid; place-items: center; width: 4.6rem; aspect-ratio: 1; margin-bottom: .4rem; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #7d9c66, var(--sage) 50%, #46632f); color: var(--honey); box-shadow: 0 16px 24px -14px rgba(30, 43, 34, .7), 0 0 0 5px rgba(87, 122, 64, .16); }
.qa__badge::before { content: ""; position: absolute; inset: -.6rem; border: 1.5px dashed rgba(87, 122, 64, .45); border-radius: 50%; animation: emb-spin 18s linear infinite; }
.qa__badge svg { width: 2rem; height: 2rem; }
.qa__k { margin: 0; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink); }
.qa__h { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.qa__p { max-width: 46ch; margin: .2rem 0 0; font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.6; color: var(--muted); }
.qa__p a, .qa__more a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--marigold); text-underline-offset: 3px; }
.qa__more { margin: 0; padding: 0 .4rem; font-size: .95rem; color: var(--muted); }
html.reduce-motion .qa__a::after, html.reduce-motion .qa__badge::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .qa__a::after, .qa__badge::before { animation: none; } }
@media (max-width: 900px) {
  .qa-head { grid-template-columns: minmax(0, 1fr); }
  .qa { grid-template-columns: minmax(0, 1fr); }
  .qa__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .qa__q, .qa__q:hover, .qa__q[aria-selected="true"] { grid-template-columns: auto minmax(0, 1fr); gap: .6rem; padding: .7rem .8rem; translate: none; }
  .qa__q[aria-selected="true"]::after { right: auto; left: 50%; top: auto; bottom: -.5rem; translate: -50% 0; }
  .qa__n { display: none; }
  .qa__ic { width: 2rem; }
  .qa__ic svg { width: 1rem; height: 1rem; }
  .qa__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .qa__s { display: block; font-size: .92rem; font-weight: 600; line-height: 1.2; }
  .qa__stage { position: static; margin-top: .4rem; }
  .qa__a { border-radius: 1.4rem; }
  .qa__badge { width: 3.8rem; }
}

/* Classes, round 6: a spark runs along How a class goes; faint step numbers; envelope extras; the night filter and
   week strips; private classes sit on paper between green and mist now that Pick a night closes the page */
.cx-embs::before { border-top: 0; height: 2px; top: calc(var(--emb) / 2 - 1px); background: repeating-linear-gradient(90deg, rgba(30, 43, 34, .32) 0 8px, transparent 8px 16px); animation: mx-march 1.1s linear infinite; }
.cx-embs::after { content: ""; position: absolute; z-index: 0; left: 18%; top: calc(var(--emb) / 2 - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 5px rgba(226, 162, 59, .22), 0 0 18px 4px rgba(226, 162, 59, .5); animation: cx-spark 5s cubic-bezier(.65, 0, .35, 1) infinite; pointer-events: none; }
@keyframes cx-spark { 0% { left: 18%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(82% - 14px); opacity: 0; } }
.cx-emb { z-index: 1; }
.cx-emb__n { position: absolute; z-index: -1; left: 50%; top: -1.6rem; translate: -50% 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(9rem, 14vw, 12rem); line-height: 1; color: rgba(87, 122, 64, .1); font-variation-settings: "SOFT" 100, "WONK" 1; pointer-events: none; }
html.reduce-motion .cx-embs::before { animation: none; }
html.reduce-motion .cx-embs::after { display: none; }
@media (prefers-reduced-motion: reduce) { .cx-embs::after { display: none; } .cx-embs::before { animation: none; } }

.cx-env { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); }
.cx-env__glow { position: absolute; z-index: 0; left: 50%; top: 45%; width: 34em; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 212, 155, .35), rgba(242, 212, 155, 0)); opacity: .9; animation: cx-flicker 4s ease-in-out infinite alternate; pointer-events: none; }
.cx-env__back { background: repeating-linear-gradient(45deg, rgba(87, 122, 64, .16) 0 .45em, transparent .45em 1em), #e9dfcb; }
.cx-env__flap { background: repeating-linear-gradient(45deg, rgba(87, 122, 64, .14) 0 .45em, transparent .45em 1em), linear-gradient(180deg, #efe4cf, #e2d5bc); }
.cx-env__to { position: absolute; left: 1.3em; bottom: 1.1em; font-family: var(--f-hand); font-size: 1.55em; font-weight: 600; line-height: 1; color: var(--sage-ink); rotate: -3deg; }
.cx-env__stamp { position: absolute; right: 1.3em; bottom: 1.1em; display: grid; justify-items: center; align-content: center; gap: .1em; width: 4.2em; height: 5em; padding: .4em; background: var(--sage); color: var(--honey); rotate: 4deg; -webkit-mask: radial-gradient(circle .3em, #0000 96%, #000) -.3em -.3em / .9em .9em round, linear-gradient(#000 0 0) .45em .45em / calc(100% - .9em) calc(100% - .9em) no-repeat; mask: radial-gradient(circle .3em, #0000 96%, #000) -.3em -.3em / .9em .9em round, linear-gradient(#000 0 0) .45em .45em / calc(100% - .9em) calc(100% - .9em) no-repeat; }
.cx-env__stamp svg { width: 1.9em; }
.cx-env__stamp small { font-family: var(--f-mono); font-size: max(.48em, 9px); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
.cx-env__stamp b { font-family: var(--f-display); font-style: italic; font-size: 1.2em; line-height: 1; color: var(--paper); }
.cx-env__post { position: absolute; right: 3.6em; bottom: 2.3em; width: 7em; opacity: .55; rotate: -10deg; }
.cx-env__post svg { width: 100%; fill: none; stroke: var(--sage-ink); stroke-width: 1.6; }
.cx-env__post text { fill: var(--sage-ink); stroke: none; font-family: var(--f-mono); font-size: 6.5px; letter-spacing: .4px; }
.cx-burst { position: absolute; z-index: 7; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.cx-burst i { position: absolute; left: 0; top: 0; width: .7em; height: 1em; border-radius: 50% 50% 50% 0; }

.cx-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 1.6rem; }
.cx-filter button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bone); color: var(--ink); font-size: .9rem; font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.cx-filter button i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--dot, var(--sage)); }
.cx-filter button[aria-pressed="true"] { border-color: var(--sage-ink); background: var(--sage-ink); color: var(--paper); }
.cx-filter button:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.cx-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; margin: .2rem 0 .3rem; padding: .7rem .8rem .5rem; }
.cx-strip span { display: grid; justify-items: center; gap: .25rem; padding: .35rem 0 .45rem; border-radius: .7rem; font-family: var(--f-mono); font-size: max(.62rem, var(--min-text)); color: var(--muted); }
.cx-strip b { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; line-height: 1; color: var(--ink); }
.cx-strip i { display: flex; gap: 2px; height: .45rem; }
.cx-strip i::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dot, transparent); }
.cx-strip .is-on { background: var(--mist); }
.cx-strip .is-today { box-shadow: inset 0 0 0 2px var(--marigold); }
.cx-strip .is-past { opacity: .4; }
.cx-week__list li[hidden], .cx-week[hidden] { display: none; }
.cx-nightrow { transition: background .3s, translate .4s var(--ease-out); }
.cx-nightrow:hover { translate: 4px 0; }
.cx-nightrow:hover .cx-cal { rotate: -8deg; translate: 0 -3px; }

@media (max-width: 760px) {
  .cx-embs::after, .cx-emb__n { display: none; }
  .cx-env__post { right: 3em; width: 6em; }
  .cx-strip { padding: .5rem .3rem .3rem; gap: .15rem; }
}

/* Meals, round 6 ------------------------------------------------------------------------------------------------ */
/* the plates grow under the pointer, their neighbours a little, the rest shrink */
@media (hover: hover) and (min-width: 761px) {
  .mx-plates__p { transition: height .55s var(--ease-out), max-width .55s var(--ease-out), rotate 1.4s var(--ease-out), translate .6s var(--ease-out); }
  .mx-plates:hover .mx-plates__p { height: 60%; max-width: 16%; }
  .mx-plates:hover .mx-plates__p:has(+ .mx-plates__p:hover), .mx-plates:hover .mx-plates__p:hover + .mx-plates__p { height: 78%; max-width: 21%; }
  .mx-plates:hover .mx-plates__p:hover { height: 100%; max-width: 28%; }
}
/* whole photos: the photo fits inside the frame and a blurred copy of itself fills the rest */
.fit { position: relative; overflow: hidden; background: var(--oat); }
.fit__bg { position: absolute; inset: -14%; filter: blur(22px) saturate(1.15); opacity: .9; }
.fit__bg img { width: 100%; height: 100%; object-fit: cover; }
.fit > img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(20, 30, 22, .35)); }
.mx-ticket:hover .mx-ticket__img img, .mx-opt:hover .mx-opt__img img { scale: 1; }
.mx-ticket:hover .mx-ticket__img > img, .mx-opt:hover .mx-opt__img > img { scale: 1.04; }
/* the paper roll each ticket unrolls from */
.mx-ticket__roll { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 20px; border-radius: 10px; background: linear-gradient(180deg, #ddd5c4 0%, #fffdf8 38%, #f3ecdf 62%, #cfc6b3 100%); box-shadow: 0 8px 12px -6px rgba(30, 43, 34, .45); opacity: 0; pointer-events: none; }
/* turkey plates: both prices */
.mx-opt__prices { list-style: none; display: grid; gap: .3rem; margin: .4rem 0 0; padding: .6rem .8rem; border-radius: .8rem; background: var(--mist); }
.mx-opt__prices li { display: flex; align-items: baseline; gap: .5rem; font-size: .95rem; }
.mx-opt__prices i { flex: 1; border-bottom: 1.5px dotted rgba(30, 43, 34, .3); translate: 0 -.25rem; }
.mx-opt__prices b { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; }
/* the sides orbit a plate */
.mx-orbit { --R: 12.5rem; --item: 7.4rem; position: relative; width: min(100%, calc(var(--R) * 2 + var(--item) + 2rem)); aspect-ratio: 1; margin: clamp(2.6rem, 5vw, 3.6rem) auto 0; }
.mx-orbit::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--R) * 2); aspect-ratio: 1; translate: -50% -50%; border: 2px dashed rgba(242, 212, 155, .45); border-radius: 50%; animation: emb-spin 90s linear infinite reverse; }
.mx-orbit__plate { position: absolute; left: 50%; top: 50%; display: grid; place-content: center; justify-items: center; width: calc(var(--R) * 1.05); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, var(--bone) 60%, #efe7d9 62%, var(--bone) 68%); color: var(--ink); text-align: center; box-shadow: 0 40px 60px -30px rgba(10, 20, 12, .85), inset 0 0 0 1px rgba(30, 43, 34, .06); }
.mx-orbit__k { margin: 0; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: #5e6a60; }
.mx-orbit__h { margin: .1rem 0; font-family: var(--f-hand); font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 600; line-height: 1; color: var(--sage-ink); }
.mx-orbit__n { margin: 0; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--ink); }
.mx-orbit__ring { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; animation: emb-spin 60s linear infinite; }
.mx-orbit__ring li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--a) * 90deg - 45deg)) translate(var(--R)) rotate(calc(var(--a) * -90deg + 45deg)); }
.mx-orbit__i { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: .55rem; width: 9rem; translate: -50% calc(var(--item) / -2); text-align: center; animation: emb-spin 60s linear infinite reverse; }
.mx-orbit__i img { width: var(--item); aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--bone), 0 22px 30px -16px rgba(10, 20, 12, .85); transition: scale .5s var(--ease-out); }
.mx-orbit__i b { font-size: .95rem; line-height: 1.25; }
.mx-orbit:hover .mx-orbit__ring, .mx-orbit:hover .mx-orbit__i, .mx-orbit:hover::before { animation-play-state: paused; }
.mx-orbit__i:hover img { scale: 1.08; }
html.reduce-motion .mx-orbit__ring, html.reduce-motion .mx-orbit__i, html.reduce-motion .mx-orbit::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .mx-orbit__ring, .mx-orbit__i, .mx-orbit::before { animation: none; } }
/* warm-up: what it's for */
.mx-warm__lede { max-width: 52ch; margin: -.4rem 0 .4rem; font-size: 1rem; line-height: 1.55; text-align: center; color: var(--muted); }
/* the nutrition card under the rings */
.mp-label { display: grid; gap: .1rem; padding: 1rem 1.2rem 1.1rem; border: 2px solid var(--ink); border-radius: .6rem; background: var(--bone); color: var(--ink); }
.mp-label__h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0; padding-bottom: .35rem; border-bottom: 7px solid var(--ink); }
.mp-label__h b { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.mp-label__h span { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mp-label__cal { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: .3rem 0 .35rem; border-bottom: 4px solid var(--ink); }
.mp-label__cal span { font-weight: 800; font-size: 1.15rem; }
.mp-label__cal b { font-family: var(--f-display); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.mp-label__row { display: flex; justify-content: space-between; margin: 0; padding: .35rem 0; border-bottom: 1px solid rgba(30, 43, 34, .35); font-size: .95rem; }
.mp-label__row span { font-weight: 700; }
.mp-label__row--in span { padding-left: 1.2rem; font-weight: 400; }
.mp-label__src { margin: .5rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
/* the four promises as emblems */
.mp-perks { --emb: clamp(7.6rem, 9vw, 8.8rem); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin: clamp(2.6rem, 5vw, 3.6rem) 0 0; padding: 0; text-align: center; }
.mp-perks li { display: grid; justify-items: center; align-content: start; gap: .35rem; }
.mp-perks .emb { margin-bottom: .6rem; }
.mp-perks .emb__words { font-size: 11px; }
.mp-perks h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; letter-spacing: -.02em; }
.mp-perks p { max-width: 24ch; margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
/* the waitlist as a ticket: a marigold stub, a perforated edge, the form on the right */
.mp-wait { position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); margin-top: clamp(2.4rem, 4vw, 3.2rem); border-radius: 1.4rem; background: var(--bone); box-shadow: 0 40px 70px -46px rgba(30, 43, 34, .65), inset 0 0 0 1px rgba(30, 43, 34, .06); }
.mp-wait::before, .mp-wait::after { content: ""; position: absolute; left: 15rem; width: 1.6rem; height: 1.6rem; translate: -50% 0; border-radius: 50%; background: var(--paper); }
.mp-wait::before { top: -.8rem; }
.mp-wait::after { bottom: -.8rem; }
.mp-wait__stub { display: grid; align-content: center; justify-items: start; gap: .35rem; padding: 1.8rem 1.6rem; border-right: 2px dashed rgba(30, 43, 34, .22); border-radius: 1.4rem 0 0 1.4rem; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 10px, transparent 10px 20px), var(--marigold); color: var(--ink); }
.mp-wait__stub small { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; }
.mp-wait__stub b { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 2.2rem; line-height: .95; letter-spacing: -.03em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.mp-wait__stub span { font-size: .9rem; font-weight: 600; }
.mp-wait__form { padding: 1.8rem clamp(1.4rem, 3vw, 2.4rem); }
.mp-wait__title { margin: 0 0 .4rem; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; letter-spacing: -.03em; }
.mp-wait__title em { font-style: italic; color: var(--sage); font-variation-settings: "SOFT" 100, "WONK" 1; }
.mp-wait__row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 1rem; }
.mp-wait .field input { background: var(--paper); border-color: var(--line); color: var(--ink); }
/* split-flap tiles on the board */
.mx-tiles { display: inline-flex; gap: 3px; perspective: 400px; }
.mx-tile { position: relative; display: grid; place-items: center; width: 1.3em; height: 1.75em; border-radius: .25em; background: linear-gradient(180deg, var(--forest) 0 50%, color-mix(in srgb, var(--forest) 86%, var(--sage)) 50% 100%); color: var(--honey); font-family: var(--f-mono); font-size: max(.95rem, var(--min-text)); font-weight: 500; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .25); }
.mx-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .45); }
.mx-tile--gap { width: .45em; background: none; box-shadow: none; }
.mx-tile--gap::after { display: none; }
.mx-tile.is-flip { animation: mx-flip .16s ease-in-out; }
@keyframes mx-flip { 50% { transform: rotateX(90deg); } }

@media (max-width: 1080px) and (min-width: 761px) {
  .mp-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}
@media (max-width: 760px) {
  .mx-orbit { --R: 7.7rem; --item: 3.9rem; width: min(100%, 22rem); }
  .mx-orbit__plate { width: 6.8rem; }
  .mx-orbit__k { font-size: max(.6rem, var(--min-text)); letter-spacing: .1em; }
  .mx-orbit__i { width: 5.6rem; gap: .3rem; }
  .mx-orbit__i b { font-size: max(.74rem, var(--min-text)); }
  .mx-orbit__h { font-size: 1.35rem; }
  .mx-orbit__n { font-size: .82rem; }
  .mp-perks { --emb: 7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .8rem; }
  .mp-perks .emb__words { font-size: 12.5px; }
  .mp-perks h3 { font-size: 1.1rem; }
  .mp-perks p { font-size: .84rem; }
  .mp-wait { grid-template-columns: minmax(0, 1fr); }
  .mp-wait::before, .mp-wait::after { display: none; }
  .mp-wait__stub { border-right: 0; border-bottom: 2px dashed rgba(30, 43, 34, .22); border-radius: 1.4rem 1.4rem 0 0; padding: 1.3rem 1.3rem 1.2rem; }
  .mp-wait__stub b { font-size: 1.8rem; }
  .mp-wait__form { padding: 1.3rem 1.1rem 1.4rem; }
  .mp-wait__row { grid-template-columns: minmax(0, 1fr); }
  .mx-tile { width: 1.1em; height: 1.55em; font-size: max(.8rem, var(--min-text)); }
}

/* Catering, round 6 --------------------------------------------------------------------------------------------- */
/* weddings: a small canapé photo instead of the sticker, and the night from rehearsal to dessert */
.kt-wed__inset { position: absolute; z-index: 2; left: -2rem; bottom: 8%; width: 9.5rem; aspect-ratio: 1; overflow: hidden; border: 5px solid var(--paper); border-radius: 50%; rotate: -6deg; box-shadow: 0 24px 34px -18px rgba(10, 20, 12, .75); }
.kt-wed__inset img { width: 100%; height: 100%; object-fit: cover; }
.kt-flow { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; width: 100%; margin: .6rem 0 .2rem; padding: 0; }
.kt-flow::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 1.5rem; height: 2px; background: repeating-linear-gradient(90deg, rgba(242, 212, 155, .8) 0 8px, transparent 8px 14px); transform-origin: 0 50%; transform: scaleX(var(--flow, 1)); }
.kt-flow li { position: relative; display: grid; justify-items: center; gap: .5rem; text-align: center; }
.kt-flow span { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--sage-ink); box-shadow: 0 0 0 5px rgba(251, 247, 240, .18), 0 12px 18px -10px rgba(10, 20, 12, .7); transition: scale .4s var(--ease-out), rotate .6s var(--ease-out); }
.kt-flow li:hover span { scale: 1.12; rotate: -10deg; }
.kt-flow svg { width: 1.3rem; height: 1.3rem; }
.kt-flow b { font-size: .92rem; line-height: 1.25; }
.kt-wed__note { max-width: 44ch; margin: 0; font-size: .95rem; line-height: 1.5; }

/* how it works: big emblems on a turning sunburst at the top of each card */
.kt-step { grid-template-rows: auto auto auto 1fr auto; min-height: 25rem; }
.kt-step__n { z-index: 2; }
.kt-step__art { position: relative; display: grid; place-items: center; height: 10rem; margin: -1.5rem -1.4rem .6rem; overflow: hidden; }
.kt-step__art::before { content: ""; position: absolute; left: 50%; top: 55%; width: 34rem; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(currentColor 0 4deg, transparent 4deg 13deg); opacity: .09; animation: emb-spin 60s linear infinite; }
.kt-step__art .emb { --emb: 7.6rem; margin: 1rem 0 0; }
.kt-step__art .emb__words { font-size: 12px; }
.kt-step:hover .kt-step__art .emb { rotate: -8deg; scale: 1.08; }
html.reduce-motion .kt-step__art::before { animation: none; }

/* the builder */
.kb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start; }
.kb__k { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; font-family: var(--f-hand); font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--sage-ink); }
.kb__k span { display: grid; place-items: center; flex: none; width: 1.9rem; aspect-ratio: 1; border-radius: 50%; background: var(--marigold); color: var(--ink); font-family: var(--f-mono); font-size: .9rem; font-weight: 500; }
.kb__left > .kb__k:not(:first-child) { margin-top: 1.9rem; }
.kb__k--card { justify-content: center; margin: .4rem 0 .2rem; }
.kb__cuisines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.kb-cuisine { display: grid; justify-items: center; align-content: start; gap: .35rem; padding: .8rem .4rem .8rem; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--paper); color: var(--ink); text-align: center; transition: border-color .3s, background .3s, color .3s, translate .4s var(--ease-out), box-shadow .3s; }
.kb-cuisine:hover { translate: 0 -3px; border-color: rgba(30, 43, 34, .3); }
.kb-cuisine:focus-visible, .kb-course:focus-visible, .kb-step:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.kb-cuisine[aria-pressed="true"] { border-color: var(--sage-ink); background: var(--sage-ink); color: var(--paper); box-shadow: 0 18px 26px -18px rgba(30, 43, 34, .8); }
.kb-cuisine__img { width: 4.3rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px var(--bone), 0 10px 16px -10px rgba(30, 43, 34, .6); transition: rotate .7s var(--ease-out), box-shadow .3s; }
.kb-cuisine:hover .kb-cuisine__img { rotate: 18deg; }
.kb-cuisine[aria-pressed="true"] .kb-cuisine__img { box-shadow: 0 0 0 3px var(--marigold), 0 10px 16px -10px rgba(0, 0, 0, .6); }
.kb-cuisine__img img { width: 100%; height: 100%; object-fit: cover; }
.kb-cuisine b { font-size: .88rem; line-height: 1.15; }
.kb-cuisine small { font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); line-height: 1.3; color: var(--muted); }
.kb-cuisine small em { font-style: normal; font-weight: 500; color: var(--sage-ink); }
.kb-cuisine[aria-pressed="true"] small, .kb-cuisine[aria-pressed="true"] small em { color: var(--paper); }
.kb__courses { display: flex; gap: .3rem; margin: 0 0 1rem; padding: .3rem; border-radius: 999px; background: var(--mist); }
.kb-course { flex: 1; display: grid; justify-items: center; gap: .1rem; padding: .55rem .6rem; border-radius: 999px; color: var(--ink); font-size: .95rem; font-weight: 600; transition: background .3s, box-shadow .3s; }
.kb-course span { font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); font-weight: 400; color: var(--muted); }
.kb-course[aria-pressed="true"] { background: var(--paper); box-shadow: 0 6px 14px -8px rgba(30, 43, 34, .5); }
.kb .dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kb .dish { min-height: 3.2rem; }
.kb-fly { position: fixed; z-index: 400; padding: .55rem .9rem; border-radius: .8rem; background: var(--marigold); color: var(--ink); font-size: .86rem; font-weight: 600; line-height: 1.25; pointer-events: none; box-shadow: 0 14px 24px -12px rgba(30, 43, 34, .6); }
.kb-peek { display: none; }
.kb-peek[hidden] { display: none !important; }
.kb__card .yourmenu__list { display: grid; gap: 1rem; min-height: 0; text-align: center; }
.kb__card .yourmenu__list > li { display: block; }
.yourmenu__course > small { display: block; margin-bottom: .35rem; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; color: var(--sage-ink); }
.yourmenu__course ul { list-style: none; display: grid; gap: .2rem; margin: 0; padding: 0; }
.yourmenu__course ul li { display: flex; justify-content: center; align-items: baseline; gap: .5rem; padding: .15rem .5rem; border-radius: .45rem; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.25; }
.yourmenu__course button { opacity: .45; font-size: .95rem; }
.yourmenu__course button:hover { opacity: 1; color: var(--sage-ink); }
.kb__count { min-height: 1.2em; margin: .2rem 0 0; font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kb-guests__row { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; gap: .6rem; }
.kb-step { display: grid; place-items: center; width: 2.3rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.2rem; line-height: 1; transition: background .3s, color .3s; }
.kb-step:hover { background: var(--ink); color: var(--paper); }
.kb-guests .range-out { min-width: 2ch; text-align: center; font-family: var(--f-display); font-size: 1.7rem; line-height: 1; }
.kb-plates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .7rem; }
.kb-plates i { width: .85rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--bone) 42%, var(--oat) 46%, var(--bone) 62%); box-shadow: 0 0 0 1.5px rgba(30, 43, 34, .28); }

/* the end: a table setting drawn around the place card */
.kt-place__set { position: absolute; z-index: 0; left: 50%; top: 52%; width: 150%; max-width: none; translate: -50% -50%; overflow: visible; fill: none; stroke: var(--sage-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.kt-place__card { z-index: 1; }

@media (max-width: 1080px) and (min-width: 761px) {
  .kb { grid-template-columns: minmax(0, 1fr); }
  .kb__cuisines { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .kt-wed__inset { left: -.6rem; width: 6.6rem; }
  .kt-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
  .kt-flow span { width: 2.6rem; }
  .kt-flow b { font-size: max(.74rem, var(--min-text)); }
  .kt-flow::before { top: 1.3rem; }
  .kt-step { min-height: 0; }
  .kt-step__art { height: 8.6rem; }
  .kt-step__art .emb { --emb: 6.8rem; }
  .kb { grid-template-columns: minmax(0, 1fr); }
  .kb__cuisines { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .kb-cuisine__img { width: 3.6rem; }
  .kb .dishes { grid-template-columns: minmax(0, 1fr); }
  .kb-peek { position: sticky; bottom: 5.6rem; z-index: 5; display: flex; align-items: center; justify-content: center; gap: .5rem; width: fit-content; margin: 1rem auto 0; padding: .7rem 1.2rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .92rem; font-weight: 600; box-shadow: 0 16px 26px -14px rgba(30, 43, 34, .8); }
  .kb-peek svg { width: 1rem; height: 1rem; rotate: 90deg; }
  .kt-place__set { width: 135%; }
}

/* ==========================================================================
   Coins (round 7, Nov 3): every emblem is a struck gold coin. A reeded edge, a raised rim, the words engraved around it
   (they stay still), a detailed raised picture in the middle, and a shine that sweeps across every few seconds. One gold
   finish everywhere. Classes, Meals and Catering.
   ========================================================================== */
.emb { position: relative; isolation: isolate; display: grid; place-items: center; width: var(--emb, clamp(10rem, 13vw, 12rem)); aspect-ratio: 1; margin: 0 auto 1.4rem; border-radius: 50%; color: #6b470e; background: linear-gradient(115deg, transparent 38%, rgba(255, 252, 240, .75) 49%, transparent 60%) 180% 0 / 260% 100% no-repeat, radial-gradient(circle at 34% 28%, #fff6dc 0%, #f4d99f 20%, #e6ab45 50%, #c08626 78%, #93621a 100%); box-shadow: 0 26px 36px -22px rgba(60, 40, 10, .55), 0 0 0 2px #a5741e, inset 0 2px 2px rgba(255, 250, 230, .85), inset 0 -5px 7px rgba(90, 55, 10, .35); animation: coin-shine 7s ease-in-out infinite; transition: scale .7s var(--ease-out), rotate .7s var(--ease-out); }
@keyframes coin-shine { 0%, 60% { background-position: 180% 0, 0 0; } 80%, 100% { background-position: -80% 0, 0 0; } }
/* the reeded edge */
.emb::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 245, 215, .6) 0 .9deg, rgba(110, 70, 15, .5) .9deg 1.8deg); -webkit-mask: radial-gradient(closest-side, transparent 91.5%, #000 92.5%); mask: radial-gradient(closest-side, transparent 91.5%, #000 92.5%); pointer-events: none; }
/* the raised rim between the words and the picture */
.emb::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 38% 30%, rgba(255, 250, 230, .45), rgba(255, 250, 230, 0) 62%); box-shadow: 0 0 0 2.5px rgba(122, 81, 16, .55), 0 0 0 4.5px rgba(255, 244, 214, .6), inset 0 4px 6px rgba(90, 55, 10, .32), inset 0 -2px 3px rgba(255, 248, 225, .7); pointer-events: none; }
.emb__words { position: absolute; inset: 3.5%; width: 93%; height: 93%; overflow: visible; fill: #6b470e; font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; text-transform: uppercase; filter: drop-shadow(0 1px 0 rgba(255, 246, 220, .8)); animation: none; }
.emb__svg { position: relative; z-index: 1; width: 50%; height: 50%; overflow: visible; fill: none; stroke: #6b470e; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1.3px 0 rgba(255, 246, 220, .85)) drop-shadow(0 -1px 0 rgba(90, 55, 10, .35)); }
.emb__svg .d { stroke-width: 1.9; }
.emb__svg rect.d, .emb__svg circle.d { fill: none; }
.emb__tag { clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); padding-inline: 1.2rem; background: var(--sage-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .emb:hover, *:hover > .emb { rotate: -6deg; scale: 1.05; }
  .emb:hover .emb__svg, *:hover > .emb .emb__svg { animation: emb-pop .7s var(--ease-out); }
}
@keyframes emb-pop { 40% { scale: 1.1; } }
html.reduce-motion .emb { animation: none; }
@media (prefers-reduced-motion: reduce) { .emb { animation: none; } }

/* no more moving dashed circles: a still, solid gold line between steps; still rings in the FAQ */
.cx-embs::before, .mx-steps::before { border-top: 0; background: linear-gradient(90deg, rgba(192, 134, 38, 0), rgba(192, 134, 38, .55) 12%, rgba(192, 134, 38, .55) 88%, rgba(192, 134, 38, 0)); animation: none; }
.qa__a::after { display: none; }
.qa__badge::before { border: 1.5px solid rgba(87, 122, 64, .3); animation: none; }
.qa__badge { background: radial-gradient(circle at 34% 28%, #fff6dc 0%, #f4d99f 20%, #e6ab45 50%, #c08626 78%, #93621a 100%); color: #6b470e; box-shadow: 0 14px 22px -14px rgba(60, 40, 10, .6), 0 0 0 2px #a5741e, inset 0 2px 2px rgba(255, 250, 230, .85); }

/* round 7: coin pictures a little bigger; the FAQ answer card fills the height of the question list (no empty space)
   and the FAQ sections are a little tighter; Pick a night is one longer card */
.emb__svg { width: 56%; height: 56%; }
.qa-head { align-items: end; }
.cx-faq, .mx-faq, .kt-faq { padding-block: clamp(4.5rem, 8vw, 6.5rem); }
.qa { align-items: stretch; }
.qa__stage { position: static; grid-template-rows: minmax(0, 1fr) auto; }
.qa__panels { display: grid; }
.qa__a { height: 100%; align-content: center; }
.cx-nights { grid-template-columns: minmax(0, 1fr); width: min(100%, 860px); }
.cx-week--one { rotate: -.4deg; }
.cx-week--one .cx-strip { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: .25rem; padding: .8rem .9rem .5rem; }
.cx-strip span:nth-child(7) { margin-right: .3rem; }
.cx-week__div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .9rem 1rem .35rem; border-top: 1px dashed rgba(30, 43, 34, .16); }
.cx-week__list .cx-week__div + li { border-top: 0; }
.cx-week__div span { font-family: var(--f-hand); font-size: 1.45rem; font-weight: 600; line-height: 1; color: var(--sage-ink); }
.cx-week__div small { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) {
  .cx-week--one .cx-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: .4rem; }
  .cx-strip span:nth-child(7) { margin-right: 0; }
  .qa__a { align-content: start; }
}

/* Meals, round 7 ------------------------------------------------------------------------------------------------ */
/* square photo frames */
.mx-ticket__img { aspect-ratio: 1; }
.mx-opt__img { aspect-ratio: 1; }
.mx-ticket__img img, .mx-opt__img img { width: 100%; height: 100%; object-fit: cover; }

/* every order comes with: a plated dinner with its words engraved around it, the sides circling on a still line */
.mx-orbit::before { border: 1.5px solid rgba(242, 212, 155, .35); animation: none; }
.mx-orbit__plate { width: calc(var(--R) * 1.15); background: radial-gradient(circle, var(--bone) 0 63%, #efe5d1 64%, var(--bone) 70%); }
.mx-orbit__words { position: absolute; inset: 3%; width: 94%; height: 94%; overflow: visible; fill: var(--sage-ink); font-family: var(--f-mono); font-size: 7.5px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; }
.mx-orbit__photo { width: 72%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper), 0 10px 18px -10px rgba(20, 30, 22, .6); }
.mx-orbit__photo img { width: 100%; height: 100%; object-fit: cover; scale: 1.25; }
.mx-orbit__i b { padding: .3rem .75rem; border-radius: 999px; background: var(--bone); color: var(--ink); font-size: .86rem; box-shadow: 0 8px 14px -8px rgba(10, 20, 12, .6); }

/* Thanksgiving: warming it up */
.mx-reheat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; max-width: 980px; margin: clamp(2.6rem, 5vw, 3.6rem) auto 0; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 1.6rem; background: var(--bone); color: var(--ink); box-shadow: 0 40px 70px -44px rgba(10, 20, 12, .85); --muted: #5e6a60; }
.mx-reheat__therm { display: grid; justify-items: center; gap: .2rem; width: 7rem; text-align: center; }
.mx-reheat__therm svg { width: 3.4rem; overflow: visible; }
.mx-reheat__therm .t-glass { fill: var(--paper); stroke: var(--sage-ink); stroke-width: 3; }
.mx-reheat__therm .t-fill { fill: var(--marigold); transform-box: fill-box; transform-origin: 50% 100%; }
.mx-reheat__therm .t-bulb { fill: var(--marigold); }
.mx-reheat__therm .t-ticks { stroke: var(--sage-ink); stroke-width: 2.5; stroke-linecap: round; }
.mx-reheat__therm b { font-family: var(--f-display); font-weight: 500; font-size: 1.8rem; line-height: 1; letter-spacing: -.03em; }
.mx-reheat__therm small { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mx-reheat__body { display: grid; gap: .5rem; }
.mx-reheat__k { margin: 0; font-family: var(--f-hand); font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--sage-ink); }
.mx-reheat__h { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; letter-spacing: -.03em; }
.mx-reheat__h em { font-style: italic; color: var(--sage); font-variation-settings: "SOFT" 100, "WONK" 1; }
.mx-reheat__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.6rem; margin: .5rem 0 0; padding: 0; }
.mx-reheat__list li { display: grid; gap: .1rem; padding: .6rem 0; border-top: 1px dashed rgba(30, 43, 34, .18); }
.mx-reheat__list b { font-size: .98rem; }
.mx-reheat__list span { font-size: .9rem; line-height: 1.45; color: var(--muted); }
.mx-reheat__note { margin: .3rem 0 0; font-size: .9rem; color: var(--muted); }

/* prepared meals: the photo of all five; tap a box and a spotlight lands on it */
.mp { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "photo panel"; align-items: start; }
.mp__photo { grid-area: photo; position: sticky; top: calc(var(--header-h) + 1.5rem); overflow: hidden; aspect-ratio: 640 / 794; border-radius: var(--r-lg); background: #ece9e4; box-shadow: 0 50px 80px -46px rgba(30, 43, 34, .7); }
.mp__photo > img { width: 100%; height: 100%; object-fit: cover; }
.mp-spot { position: absolute; z-index: 1; left: 8%; top: 22.6%; width: 27.8%; height: 32.5%; border-radius: 1rem; box-shadow: 0 0 0 9999px rgba(20, 30, 22, .4), 0 0 0 3px var(--marigold), 0 0 34px 8px rgba(226, 162, 59, .55); transition: left .6s var(--ease-out), top .6s var(--ease-out), width .6s var(--ease-out), height .6s var(--ease-out); pointer-events: none; }
.mp__photo:has(li:nth-child(2) .pick.is-on) .mp-spot { left: 36.6%; top: 22.6%; width: 28.2%; height: 32.5%; }
.mp__photo:has(li:nth-child(3) .pick.is-on) .mp-spot { left: 65.4%; top: 22.6%; width: 27.8%; height: 32.5%; }
.mp__photo:has(li:nth-child(4) .pick.is-on) .mp-spot { left: 21.3%; top: 54.8%; width: 29%; height: 33.3%; }
.mp__photo:has(li:nth-child(5) .pick.is-on) .mp-spot { left: 50.7%; top: 54.8%; width: 28.8%; height: 33.3%; }
.mp__picks { position: absolute; inset: 0; z-index: 2; display: block; margin: 0; padding: 0; list-style: none; }
.mp__picks li { position: absolute; }
.mp__picks li:nth-child(1) { left: 8%; top: 22.6%; width: 27.8%; height: 32.5%; }
.mp__picks li:nth-child(2) { left: 36.6%; top: 22.6%; width: 28.2%; height: 32.5%; }
.mp__picks li:nth-child(3) { left: 65.4%; top: 22.6%; width: 27.8%; height: 32.5%; }
.mp__picks li:nth-child(4) { left: 21.3%; top: 54.8%; width: 29%; height: 33.3%; }
.mp__picks li:nth-child(5) { left: 50.7%; top: 54.8%; width: 28.8%; height: 33.3%; }
.mp .pick, .mp .pick:hover, .mp .pick.is-on { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 1rem; background: transparent; box-shadow: none; translate: none; transform: none; cursor: pointer; }
.mp .pick:hover:not(.is-on) { box-shadow: inset 0 0 0 2px rgba(255, 253, 248, .85); }
.mp .pick:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
.pick__pin { position: absolute; left: .4rem; top: .4rem; display: grid; place-items: center; width: 1.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--bone); color: var(--ink); font-family: var(--f-mono); font-size: .8rem; font-weight: 500; box-shadow: 0 6px 12px -6px rgba(20, 30, 22, .7); transition: background .3s, scale .4s var(--ease-out); }
.mp .pick.is-on .pick__pin { background: var(--marigold); scale: 1.12; }
.mp .pick__name, .mp .pick__p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mp__hint { position: absolute; z-index: 3; left: 50%; bottom: 3%; translate: -50% 0; margin: 0; padding: .35rem .9rem; border-radius: 999px; background: rgba(255, 253, 248, .92); font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); box-shadow: 0 8px 16px -10px rgba(20, 30, 22, .6); }
.mp__top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.1rem; }
.mp__zoom { position: relative; width: 7rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #ece9e4; box-shadow: 0 0 0 4px var(--bone), 0 0 0 6px var(--marigold), 0 18px 26px -16px rgba(30, 43, 34, .7); }
.mp__zoom .picker__shot img { object-position: 50% 50%; scale: 1.35; }
.mp__title { display: grid; gap: .3rem; }
.mp__panel .seg { justify-self: start; }
.mp__cols { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; }
.mp-ingr { display: grid; gap: .3rem; padding: 1rem 1.1rem 1.1rem; border-radius: .9rem; background: var(--bone); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .08); }
.mp-ingr__h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .3rem; }
.mp-ingr__h b { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; }
.mp-ingr__h span { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mp-ingr__list { list-style: none; display: grid; gap: .1rem; margin: 0; padding: 0; }
.mp-ingr__list li { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; font-size: .92rem; line-height: 1.35; }
.mp-ingr__list i { flex: 1; min-width: 1rem; border-bottom: 1.5px dotted rgba(30, 43, 34, .3); translate: 0 -.25rem; }
.mp-ingr__list b { font-family: var(--f-mono); font-weight: 500; font-size: .82rem; white-space: nowrap; }
.mp-ingr__al { margin: .4rem 0 0; padding-top: .55rem; border-top: 1px solid rgba(30, 43, 34, .14); font-size: .85rem; line-height: 1.45; color: var(--muted); }

/* the waitlist ticket: straight, centered, a serial number and a barcode on the stub */
.mp-wait { max-width: 980px; margin-inline: auto; transition: translate .5s var(--ease-out), box-shadow .5s; }
.mp-wait:hover { translate: 0 -4px; }
.mp-wait__stub { position: relative; overflow: hidden; }
.mp-wait__stub::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 252, 240, .45) 50%, transparent 62%) 180% 0 / 260% 100% no-repeat; animation: coin-shine 7s ease-in-out infinite; pointer-events: none; }
.mp-wait__code { display: block; width: 100%; height: 2rem; margin-top: .7rem; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: .75; }
.mp-wait__stub em { font-family: var(--f-mono); font-style: normal; font-size: max(.72rem, var(--min-text)); letter-spacing: .2em; }

/* the ending: words left, board right, tighter */
.mx-end { padding-block: clamp(4.5rem, 8vw, 6.5rem); text-align: left; }
.mx-end__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; justify-items: stretch; gap: clamp(2rem, 5vw, 4rem); }
.mx-end__text { display: grid; gap: 1rem; }
.mx-end__lede { max-width: 34ch; margin: 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.mx-end__in .mx-board { width: 100%; }

@media (max-width: 1080px) and (min-width: 761px) {
  .mp__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .mx-orbit__plate { width: 8rem; }
  .mx-orbit__words { font-size: 9px; }
  .mx-orbit__i b { padding: .2rem .5rem; font-size: max(.72rem, var(--min-text)); }
  .mx-reheat { grid-template-columns: minmax(0, 1fr); }
  .mx-reheat__therm { grid-template-columns: auto auto; grid-auto-flow: column; align-items: center; justify-content: start; gap: .8rem; width: auto; text-align: left; }
  .mx-reheat__therm svg { width: 2rem; grid-row: span 2; }
  .mx-reheat__list { grid-template-columns: minmax(0, 1fr); }
  .mp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "panel"; }
  .mp__photo { position: relative; top: auto; }
  .pick__pin { width: 1.45rem; font-size: .72rem; left: .25rem; top: .25rem; }
  .mp__zoom { width: 5.2rem; }
  .mp__cols { grid-template-columns: minmax(0, 1fr); }
  .mx-end { text-align: center; }
  .mx-end__in { grid-template-columns: minmax(0, 1fr); }
  .mx-end__text { justify-items: center; }
}

/* Catering, round 7 --------------------------------------------------------------------------------------------- */
/* weddings: a sample reception menu, printed */
.kt-menu { position: relative; display: grid; justify-items: center; gap: .55rem; width: min(100%, 30rem); margin: .4rem 0 .4rem; padding: 1.6rem 1.6rem 1.4rem; border-radius: .4rem; background: var(--bone); color: var(--ink); text-align: center; rotate: -1deg; box-shadow: 0 34px 50px -30px rgba(10, 20, 12, .8); --muted: #5e6a60; transition: rotate .6s var(--ease-out); }
.kt-menu:hover { rotate: 0deg; }
.kt-menu::before { content: ""; position: absolute; inset: .55rem; border: 1px solid rgba(87, 122, 64, .4); border-radius: .2rem; pointer-events: none; }
.kt-menu__k { margin: 0; font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; color: var(--sage-ink); }
.kt-menu__t { margin: 0 0 .2rem; font-family: var(--f-display); font-size: 1.9rem; line-height: 1; letter-spacing: -.02em; }
.kt-menu__t em { font-style: italic; color: var(--sage); font-variation-settings: "SOFT" 100, "WONK" 1; }
.kt-menu__c { display: grid; gap: .15rem; padding-top: .5rem; border-top: 1px dashed rgba(87, 122, 64, .35); width: 100%; }
.kt-menu__c small { font-family: var(--f-mono); font-size: max(.62rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kt-menu__c p { margin: 0; font-family: var(--f-display); font-size: 1.02rem; line-height: 1.35; }
.kt-menu__c em { font-family: var(--f-hand); font-size: 1.15rem; font-style: normal; color: var(--sage-ink); }
.kt-menu__f { margin: .3rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--muted); }

/* how it works: one look for all four cards (cream, the coin on a sage header); nothing turning */
.kt-step, .kt-step:nth-child(2), .kt-step:nth-child(3), .kt-step:nth-child(4) { --bg: var(--bone); --fg: var(--ink); --chip: var(--mist); }
.kt-step::after { display: none; }
.kt-step__art { background: radial-gradient(circle at 50% 75%, rgba(242, 212, 155, .4), rgba(242, 212, 155, 0) 60%), var(--sage); }
.kt-step__art::before { display: none; }
.kt-step__n { color: var(--paper); opacity: .45; }
.kt-step__foot a { color: var(--sage-ink); }

/* the builder on a green band (no more gingham); a more compact menu card */
.kt-builder { background: radial-gradient(circle at 12% 0%, rgba(242, 212, 155, .18), rgba(242, 212, 155, 0) 45%), radial-gradient(circle at 92% 100%, rgba(30, 43, 34, .18), rgba(30, 43, 34, 0) 50%), var(--sage); color: var(--paper); }
.kt-builder__head .h2, .kt-builder__lede { padding: 0; background: none; box-shadow: none; }
.kt-builder__head .eyebrow, .kt-builder__head .h2 { color: var(--paper); }
.kt-builder__head .h2 em { color: var(--honey); }
.kt-builder__lede { color: var(--paper); }
.kt-board, .kb__card { color: var(--ink); --line: rgba(30, 43, 34, .16); --muted: #5e6a60; }
.kb { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); }
.kb__card { padding: 1.4rem 1.3rem 1.4rem; }
.kb__card .yourmenu__title { font-size: 1.5rem; }
.kb__card .yourmenu__list { margin: .7rem 0; }
.kb__card .yourmenu__empty { margin: .2rem 0 .4rem; font-size: .88rem; }
.kb__card .form__fields { gap: .7rem; }
.kb__card .field input, .kb__card .field select { padding-block: .55rem; }
.kb__card .field textarea { min-height: 4.4rem; }
.kb__card .btn--lg { min-height: 3rem; }

/* Meals: the ending's title fits on two lines */
.mx-end__text .mx-end__title { font-size: clamp(2.3rem, 3.8vw, 3.4rem); }

@media (max-width: 760px) {
  .kt-menu { padding: 1.3rem 1.1rem 1.2rem; }
  .kt-menu__c p { font-size: .95rem; }
}

/* round 7: on phones each board line is the name, then the tiles on their own line, then the button */
@media (max-width: 760px) {
  .mx-board__row { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .6rem; }
  .mx-board__flap { grid-column: 1; justify-content: flex-start; max-width: 100%; }
  .mx-tiles { gap: 2px; }
  .mx-tile { width: 1.05em; height: 1.5em; font-size: max(.78rem, var(--min-text)); }
  .mx-tile--gap { width: .35em; }
}

/* ==========================================================================
   Chef David, round 8 (Nov 4)
   ========================================================================== */
/* hero: the coin sits on the corner of the portrait; the portrait leans toward the pointer */
.ch-hero__emb.emb { position: absolute; z-index: 3; left: 2%; bottom: 7%; margin: 0; }
.ch-hero__hat { position: relative; z-index: 1; display: grid; width: 50%; color: #6b470e; filter: drop-shadow(0 1.3px 0 rgba(255, 246, 220, .85)); }
.ch-hero__hat svg { width: 100%; height: auto; }
.ch-hero__arch { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--ease-out); }

/* the quote: a big gold quote mark and his face by the name */
.ch-quote { position: relative; overflow: hidden; }
.ch-quote__q { position: relative; }
.ch-quote__mark { position: absolute; left: 50%; top: -3.4rem; translate: -50% 0; font-family: var(--f-display); font-size: clamp(10rem, 18vw, 15rem); line-height: 1; color: rgba(226, 162, 59, .22); pointer-events: none; }
.ch-quote__q p { position: relative; }
.ch-quote__q cite { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.8rem; font-family: var(--f-body, inherit); font-style: normal; text-align: left; }
.ch-quote__face { flex: none; width: 4.2rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--marigold); }
.ch-quote__face img { width: 100%; height: 100%; object-fit: cover; scale: 2.6; transform-origin: 48% 21%; }
.ch-quote__q cite b { display: block; font-family: var(--f-hand); font-size: 1.8rem; font-weight: 600; line-height: 1; color: var(--sage-ink); }
.ch-quote__q cite small { font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* the passport: closed at first, the cover swings open, then the stamps land */
.ch-book { perspective: 2400px; }
.ch-book__cover { display: none; position: absolute; z-index: 6; top: -10px; bottom: -10px; left: 50%; right: -10px; transform-origin: 0 50%; transform-style: preserve-3d; }
.ch-book.is-closed .ch-book__cover { display: block; }
.ch-book__front, .ch-book__inside { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ch-book__front { display: grid; place-content: center; justify-items: center; gap: .9rem; border-radius: 0 1.1rem 1.1rem 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 55%), repeating-linear-gradient(35deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 6px), var(--sage-ink); color: var(--honey); box-shadow: inset 0 0 0 2px rgba(242, 212, 155, .35), inset 0 0 0 10px var(--sage-ink), inset 0 0 0 11px rgba(242, 212, 155, .3), inset 14px 0 22px -8px rgba(0, 0, 0, .4), 0 40px 60px -30px rgba(10, 20, 12, .8); }
.ch-book__crest.emb { --emb: 7rem; margin: 0; }
.ch-book__front b { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; background: linear-gradient(115deg, #c08626 20%, #fff3cf 45%, #e6ab45 55%, #a5741e 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-book__front small { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .3em; text-transform: uppercase; color: var(--honey); }
.ch-book__inside { border-radius: 1.1rem 0 0 1.1rem; background: repeating-radial-gradient(circle at 82% -20%, transparent 0 19px, rgba(200, 160, 60, .08) 19px 20px), #f3ead6; transform: rotateY(180deg); }
.ch-book__id { position: absolute; left: clamp(1.6rem, 3.4vw, 3rem); bottom: 2.6rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 1rem; width: min(44%, 24rem); }
.ch-book__photo { width: 5.2rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: .3rem; background: var(--oat); filter: sepia(.25) saturate(.85); box-shadow: 0 0 0 1px rgba(30, 43, 34, .25); }
.ch-book__photo img { width: 100%; height: 100%; object-fit: cover; scale: 1.9; transform-origin: 48% 24%; }
.ch-book__id dl { display: grid; gap: .35rem; margin: 0; }
.ch-book__id dt { font-family: var(--f-mono); font-size: max(.58rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: #6d6656; }
.ch-book__id dd { margin: 0; font-family: var(--f-mono); font-size: max(.8rem, var(--min-text)); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.ch-book__id dd.ch-book__sign { font-family: var(--f-hand); font-size: 1.7rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1; color: var(--sage-ink); }
.ch-book { padding-bottom: clamp(5.2rem, 7.4vw, 6rem); }

/* matchbooks: gold-foil titles, and a match lights when one opens */
.ch-match__cover b { background: linear-gradient(115deg, currentColor 40%, #fff3cf 50%, currentColor 60%) 180% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: coin-shine 7s ease-in-out infinite; }
.ch-match__sticks { position: relative; }
.ch-match__sticks::before { content: ""; position: absolute; left: 10px; top: -15px; width: 16px; height: 24px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 74%, #fff6dc 0 18%, #f2d49b 34%, #e2a23b 58%, rgba(226, 162, 59, 0) 72%); opacity: 0; transform-origin: 50% 100%; filter: drop-shadow(0 0 6px rgba(242, 212, 155, .9)); }
.ch-match.is-open .ch-match__sticks::before { animation: ch-light .45s ease-out .55s forwards, ch-flicker .16s ease-in-out 1s infinite alternate; }
@media (hover: hover) { .ch-match:hover .ch-match__sticks::before { animation: ch-light .45s ease-out .55s forwards, ch-flicker .16s ease-in-out 1s infinite alternate; } }
@keyframes ch-light { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
@keyframes ch-flicker { from { scale: .92 1.06; rotate: -4deg; } to { scale: 1.06 .94; rotate: 4deg; } }

/* the seed packet turns over (hover on a computer, the button anywhere) */
.ch-packet__card { position: relative; transform-style: preserve-3d; rotate: 4deg; transition: transform 1s var(--ease-out), rotate .8s var(--ease-out); }
.ch-packet__front { rotate: 0deg !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ch-packet.is-flipped .ch-packet__card { transform: rotateY(180deg); rotate: -3deg; }
@media (hover: hover) { .ch-packet:hover .ch-packet__card { rotate: 0deg; } }
.ch-packet__back { position: absolute; inset: 0; display: grid; align-content: start; gap: .8rem; padding: 2rem 1.4rem 1.4rem; background: #f6eedc; color: var(--ink); transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 50% no-repeat; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 50% no-repeat; }
.ch-packet__back dl { display: grid; gap: .7rem; margin: 0; }
.ch-packet__back dt { font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink); }
.ch-packet__back dd { margin: .1rem 0 0; font-family: var(--f-display); font-size: 1.05rem; line-height: 1.3; }
.ch-packet__turn { display: inline-flex; align-items: center; gap: .5rem; margin: 1.4rem 0 0 2rem; padding: .55rem 1.1rem; border: 1px solid rgba(251, 247, 240, .5); border-radius: 999px; color: var(--paper); font-size: .9rem; font-weight: 600; transition: background .3s, color .3s; }
.ch-packet__turn svg { width: 1rem; height: 1rem; }
.ch-packet__turn:hover { background: var(--paper); color: var(--ink); }
.ch-packet__turn:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }
.ch-bloom__art { position: absolute; z-index: 0; right: -4.5rem; top: -3rem; width: 12rem; fill: none; stroke: rgba(242, 212, 155, .7); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ch-packet__card, .ch-packet__crepe { z-index: 1; }

/* press: a featured stamp, and the TV */
.ch-clip__stamp { position: absolute; right: 1rem; top: 1rem; display: grid; place-items: center; width: 5.4rem; aspect-ratio: 1; border: 2.5px solid var(--sage); border-radius: 50%; color: var(--sage); font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; rotate: 14deg; box-shadow: inset 0 0 0 3px #fbf8f1, inset 0 0 0 4.5px var(--sage); mix-blend-mode: multiply; }
.ch-clip--lead .ch-clip__mast { padding-right: 5.6rem; }
.ch-tv { gap: .7rem; }
.ch-tv__screen { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 10px solid var(--sage-ink); border-radius: 1.4rem / 1.1rem; background: var(--forest); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3), 0 12px 20px -14px rgba(20, 30, 22, .7); }
.ch-tv__screen img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05); }
.ch-tv__screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .25)); pointer-events: none; }
.ch-tv__play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 3.4rem; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--marigold); color: var(--ink); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .6); transition: scale .4s var(--ease-out); }
.ch-tv__play svg { width: 1.3rem; height: 1.3rem; }
.ch-tv:hover .ch-tv__play { scale: 1.12; }

/* the ending: polaroids, a stool, a signed letter */
.ch-end { padding-block: clamp(5rem, 9vw, 7.5rem); background: radial-gradient(circle at 72% 30%, rgba(242, 212, 155, .28), rgba(242, 212, 155, 0) 50%), var(--paper); }
.ch-end__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.ch-end__photos { position: relative; height: clamp(22rem, 32vw, 27rem); }
.ch-pola { position: absolute; width: clamp(11.5rem, 17vw, 14.5rem); margin: 0; padding: .7rem .7rem 2.8rem; background: #fffdf8; box-shadow: 0 30px 44px -26px rgba(30, 43, 34, .65), 0 0 0 1px rgba(30, 43, 34, .06); transition: rotate .6s var(--ease-out), translate .6s var(--ease-out), scale .6s var(--ease-out); }
.ch-pola::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -.7rem; width: 5rem; height: 1.4rem; translate: -50% 0; rotate: -4deg; background: rgba(242, 212, 155, .8); box-shadow: 0 2px 5px -2px rgba(30, 43, 34, .3); }
.ch-pola__img { display: block; overflow: hidden; aspect-ratio: 1; background: var(--oat); }
.ch-pola__img img { width: 100%; height: 100%; object-fit: cover; }
.ch-pola--1 .ch-pola__img img { scale: 1.9; transform-origin: 32% 96%; }
.ch-pola figcaption { position: absolute; left: 0; right: 0; bottom: .55rem; text-align: center; font-family: var(--f-hand); font-size: 1.4rem; font-weight: 600; line-height: 1; color: var(--ink); }
.ch-pola--1 { left: 0; top: 12%; rotate: -9deg; z-index: 1; }
.ch-pola--2 { left: 30%; top: 0; rotate: 3deg; z-index: 2; }
.ch-pola--3 { left: 58%; top: 18%; rotate: 11deg; z-index: 1; }
.ch-pola:hover { z-index: 3; rotate: 0deg; scale: 1.06; translate: 0 -6px; }
.ch-end__text { display: grid; justify-items: start; gap: 1.1rem; }
.ch-stool { width: 4.6rem; overflow: visible; fill: none; stroke: var(--sage-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ch-letter { position: relative; display: grid; gap: .2rem; width: min(100%, 27rem); margin-top: .8rem; padding: 1.4rem 1.8rem 1.1rem; border-radius: .4rem; background: repeating-linear-gradient(180deg, transparent 0 2.05rem, rgba(87, 122, 64, .14) 2.05rem calc(2.05rem + 1px)), var(--bone); box-shadow: 0 30px 44px -30px rgba(30, 43, 34, .6), 0 0 0 1px rgba(30, 43, 34, .06); rotate: -1.2deg; }
.ch-letter__k { margin: 0; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--muted); }
.ch-letter .ch-sig { margin: 0; }
.ch-letter .ch-sig__name { font-size: clamp(3rem, 4.6vw, 3.9rem); color: var(--sage-ink); white-space: nowrap; }
.ch-sig__swash { width: 15rem; max-width: 100%; margin-top: -.6rem; fill: none; stroke: var(--marigold); stroke-width: 3; stroke-linecap: round; }
.ch-letter__seal.emb { --emb: 5rem; position: absolute; right: -1.8rem; top: -1.8rem; margin: 0; rotate: 12deg; }

@media (max-width: 760px) {
  .ch-quote__mark { top: -2.2rem; }
  .ch-quote__q cite { margin-top: 1.4rem; }
  .ch-book__cover { display: none !important; }
  .ch-book__id { position: static; width: auto; margin-top: 1.6rem; grid-template-columns: auto minmax(0, 1fr); }
  .ch-book { padding-bottom: 3.4rem; }
  .ch-bloom__art { right: -2rem; top: -2rem; width: 8rem; }
  .ch-packet__turn { margin-left: 1.6rem; }
  .ch-clip__stamp { width: 4.2rem; right: .6rem; top: .6rem; font-size: max(.58rem, var(--min-text)); }
  .ch-clip--lead .ch-clip__mast { padding-right: 4.4rem; }
  .ch-tv { grid-column: 1 / -1; }
  .ch-end__grid { grid-template-columns: minmax(0, 1fr); }
  .ch-end__photos { height: 16rem; }
  .ch-pola { width: 9.4rem; padding: .5rem .5rem 2.1rem; }
  .ch-pola figcaption { font-size: 1.08rem; bottom: .4rem; }
  .ch-pola--1 { left: 0; }
  .ch-pola--2 { left: calc(50% - 4.7rem); }
  .ch-pola--3 { left: auto; right: 0; }
  .ch-end__text { justify-items: center; text-align: center; }
  .ch-letter { justify-items: start; text-align: left; }
  .ch-letter__seal.emb { --emb: 4rem; right: -.8rem; top: -1.4rem; }
}

/* Contact, round 8 ---------------------------------------------------------------------------------------------- */
.co-today { display: inline-flex; align-items: center; gap: .55rem; margin: calc(clamp(1.6rem, 4vh, 2.6rem) * -.55) auto clamp(1.4rem, 3.4vh, 2.2rem); padding: .45rem 1rem .45rem .75rem; border-radius: 99px; background: var(--bone); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .1), 0 12px 24px -18px rgba(30, 43, 34, .5); font-size: .92rem; }
.co-today::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px rgba(87, 122, 64, .2); animation: co-live 2.4s ease-in-out infinite; }
.co-today b { font-weight: 600; }
@keyframes co-live { 50% { box-shadow: 0 0 0 7px rgba(87, 122, 64, 0); } }

/* Find us: the live map on a green band */
.co-find { position: relative; padding-block: calc(var(--space-section) + 1.2rem) var(--space-section); background: radial-gradient(circle at 10% 0%, rgba(242, 212, 155, .2), rgba(242, 212, 155, 0) 45%), radial-gradient(circle at 95% 100%, rgba(30, 43, 34, .2), rgba(30, 43, 34, 0) 50%), var(--sage); color: var(--paper); }
.co-find__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.co-find__text { display: grid; gap: 1.1rem; justify-items: start; }
.co-find .eyebrow, .co-find .h2 { color: var(--paper); margin: 0; }
.co-find .h2 em { color: var(--honey); }
.co-find__lede { margin: 0; max-width: 34ch; font-size: var(--fs-lede); line-height: 1.5; }
.co-addr { display: grid; gap: .5rem; width: 100%; max-width: 30rem; padding: 1.2rem 1.3rem 1.3rem; border-radius: var(--r-lg); background: var(--bone); color: var(--ink); box-shadow: 0 30px 50px -34px rgba(10, 20, 12, .8); }
.co-addr__k, .co-drive__k { margin: 0; font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; }
.co-addr__k { color: var(--sage-ink); }
.co-addr__v { margin: 0; font-family: var(--f-display); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; letter-spacing: -.02em; }
.co-addr__btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.co-addr__btns .btn--light { box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .2); }
.co-addr__btns .btn--light svg { display: none; }
.co-addr__btns .btn--light.is-copied svg { display: block; }
.co-drive { display: grid; gap: .6rem; width: 100%; max-width: 30rem; }
.co-drive ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.co-drive li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .25rem; padding: .7rem .75rem .75rem; border-radius: .9rem; background: rgba(255, 253, 248, .1); box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .22); }
.co-drive b { font-family: var(--f-display); font-size: 1.7rem; font-weight: 400; line-height: 1; color: var(--honey); }
.co-drive small { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .08em; }
.co-drive span { grid-column: 1 / -1; margin-top: .3rem; font-size: .84rem; line-height: 1.2; }

.co-map { position: relative; }
.co-map__frame { position: relative; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 1.6rem; background: var(--oat); box-shadow: 0 0 0 10px var(--bone), 0 50px 70px -40px rgba(10, 20, 12, .9); rotate: 1deg; transition: rotate .7s var(--ease-out); }
.co-map:hover .co-map__frame { rotate: 0deg; }
.co-map__frame::before { content: "Loading the map…"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #5e6a60; }
.co-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(.42) saturate(1.25) contrast(.94) brightness(1.04); }
.co-map__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .12), inset 0 0 60px rgba(87, 122, 64, .22); pointer-events: none; }
.co-map__shield { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 1.1rem; border: 0; background: none; cursor: pointer; }
.co-map__shield span { padding: .5rem .95rem; border-radius: 99px; background: rgba(30, 43, 34, .82); color: var(--paper); font-size: .82rem; opacity: 0; translate: 0 8px; transition: opacity .3s, translate .3s var(--ease-out); }
.co-map__shield:hover span, .co-map__shield:focus-visible span { opacity: 1; translate: 0 0; }
.co-map__pin.emb { --emb: 7.5rem; position: absolute; z-index: 3; right: -1.6rem; top: -2.4rem; margin: 0; rotate: 10deg; }
.co-map__card { position: absolute; z-index: 3; left: -1.4rem; bottom: 1.6rem; display: grid; gap: .15rem; max-width: 19rem; padding: .85rem 1.1rem .9rem; border-radius: 1rem; background: var(--bone); color: var(--ink); rotate: -2deg; box-shadow: 0 24px 40px -22px rgba(10, 20, 12, .75); pointer-events: none; }
.co-map__card b { font-family: var(--f-display); font-size: 1.12rem; font-weight: 500; line-height: 1.15; }
.co-map__card span { font-size: .82rem; color: #5e6a60; }

/* the form */
.co-to { display: flex; align-items: center; gap: .9rem; margin: -.2rem 0 1.3rem; padding-bottom: 1.1rem; border-bottom: 1px dashed rgba(30, 43, 34, .18); }
.co-to__face { flex: none; width: 3.6rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px var(--bone), 0 0 0 5px var(--marigold); }
.co-to__face img { width: 100%; height: 100%; object-fit: cover; scale: 2.6; transform-origin: 48% 21%; }
.co-to p { display: grid; margin: 0; line-height: 1.2; }
.co-to__k { font-family: var(--f-mono); font-size: max(.66rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; color: var(--sage-ink); }
.co-to b { font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em; }
.co-to small { font-size: .84rem; color: #5e6a60; }
.co-topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.co-topics legend { margin-bottom: .55rem; padding: 0; font-size: .9rem; font-weight: 500; }
.co-topics__list { display: flex; flex-wrap: wrap; gap: .45rem; }
.co-topics label { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem .55rem .7rem; border-radius: 99px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .16); font-size: .9rem; cursor: pointer; transition: background .25s, box-shadow .25s, color .25s, translate .3s var(--ease-out); }
.co-topics label:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .4); }
.co-topics input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.co-topics label svg { width: 1.1rem; height: 1.1rem; color: var(--sage-ink); transition: rotate .4s var(--ease-out), color .25s; }
.co-topics label:has(input:checked) { background: var(--sage); color: var(--paper); box-shadow: 0 10px 18px -12px rgba(30, 43, 34, .7); }
.co-topics label:has(input:checked) svg { color: var(--honey); rotate: -10deg; }
.co-topics label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.co-topics__tip { margin: .6rem 0 0; min-height: 1.3em; font-size: .86rem; color: #5e6a60; }
.co-topics__tip a { color: var(--sage-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.co-topics__tip:empty { display: none; }

/* this week at Jamrock */
.co-side { position: sticky; top: calc(var(--header-h) + 2rem); }
.co-week { display: grid; gap: 1rem; padding: 1.4rem 1.4rem 1.3rem; border-radius: var(--r-lg); background: var(--mist); }
.co-week__k { margin: 0; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink); }
.co-week__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.co-week__days button { position: relative; display: grid; justify-items: center; gap: .3rem; padding: .7rem 0 .6rem; border: 0; border-radius: .8rem; background: var(--bone); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .1); cursor: pointer; transition: background .25s, color .25s, translate .3s var(--ease-out); }
.co-week__days button:hover { translate: 0 -2px; }
.co-week__days small { font-family: var(--f-mono); font-size: max(.7rem, var(--min-text)); letter-spacing: .08em; text-transform: uppercase; }
.co-week__days i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--marigold); }
.co-week__days button:not(:has(i))::after { content: ""; width: .4rem; height: .4rem; }
.co-week__days button[aria-pressed="true"] { background: var(--sage); color: var(--paper); }
.co-week__days button[aria-pressed="true"] i { background: var(--honey); }
.co-week__days button.is-today::before { content: "Today"; position: absolute; left: 50%; top: -.75rem; translate: -50% 0; padding: .1rem .4rem; border-radius: 99px; background: var(--marigold); color: var(--ink); font-family: var(--f-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.co-week__day { display: grid; gap: .35rem; padding: 1.1rem 1.15rem 1.15rem; border-radius: 1rem; background: var(--bone); box-shadow: 0 20px 34px -26px rgba(30, 43, 34, .55); }
.co-week__when { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink); }
.co-week__when b { font-weight: 500; color: var(--ink); }
.co-week__what { margin: 0; font-family: var(--f-display); font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; }
.co-week__text { margin: 0; font-size: .95rem; line-height: 1.5; color: #4c574e; }
.co-week__go { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; margin-top: .2rem; font-weight: 600; color: var(--sage-ink); text-decoration: underline; text-underline-offset: 4px; }
.co-week__go svg { width: 1rem; height: 1rem; transition: translate .3s var(--ease-out); }
.co-week__go:hover svg { translate: 4px 0; }
.co-week__foot { margin: 0; font-size: .86rem; line-height: 1.5; color: #4c574e; }
.co-week__foot b { color: var(--ink); font-weight: 600; }

@media (max-width: 1080px) {
  .co-find__grid { grid-template-columns: minmax(0, 1fr); }
  .co-map { margin: 1.4rem .6rem 0; }
  .co-side { position: static; }
}
@media (max-width: 760px) {
  .co-today { margin: -.4rem auto 1.4rem; font-size: .86rem; text-align: left; }
  .co-find { padding-block: 4.2rem 4rem; }
  .co-drive ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-addr__btns .btn { flex: 1 1 auto; justify-content: center; }
  .co-map { margin: 2.2rem .4rem 0; }
  .co-map__frame { aspect-ratio: 4 / 5; box-shadow: 0 0 0 7px var(--bone), 0 40px 60px -36px rgba(10, 20, 12, .9); }
  .co-map__pin.emb { --emb: 5.6rem; right: -.9rem; top: -2rem; }
  .co-map__card { left: -.6rem; bottom: 1rem; max-width: 15rem; }
  .co-map__shield span { opacity: 1; translate: 0 0; }
  .co-topics__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-topics label { font-size: .86rem; padding: .6rem .7rem; }
  .co-week { padding: 1.1rem .9rem 1rem; }
  .co-week__days { gap: .2rem; }
  .co-week__days button { padding: .6rem 0 .5rem; border-radius: .6rem; }
  .co-week__days small { font-size: max(.62rem, var(--min-text)); letter-spacing: .02em; }
}
html.reduce-motion .co-today::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .co-today::before { animation: none; } }

/* coins: no hover transition while GSAP rolls a coin in (see COIN_IN in main.js) */
.emb.emb--in { transition: none; }
@media (max-width: 760px) { .co-map__card { display: none; } }
.co-map__card { bottom: 4.4rem; }

/* Home, round 8 ------------------------------------------------------------------------------------------------- */
/* hero: no Mon / Any day / $60; a slightly shorter arch so the copy sits centered and the credentials come up */
@media (min-width: 761px) {
  body[data-page="home"] .hero__arch { max-height: min(calc(100svh - var(--header-h) - 14rem), 500px); }
  body[data-page="home"] .hero__copy { padding-bottom: 0; }
  body[data-page="home"] .hero__copy > .btn-row { margin-top: 2.2rem; }
  body[data-page="home"] .hero { min-height: min(calc(100svh - 57px), 760px); }
  body[data-page="home"] .hero__foot { margin-top: clamp(1.2rem, 2.4vw, 2rem); }
}
@media (max-width: 760px) {
  body[data-page="home"] .hero .btn-row { margin-top: 1.6rem; }
}

/* the career as a tasting menu */
.hm-tm { padding-block: var(--space-section); background: radial-gradient(circle at 8% 0%, rgba(242, 212, 155, .18), rgba(242, 212, 155, 0) 42%), radial-gradient(circle at 96% 100%, rgba(30, 43, 34, .2), rgba(30, 43, 34, 0) 50%), var(--sage); color: var(--paper); }
.hm-tm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); }
.hm-tm__side { display: grid; gap: 1.3rem; justify-items: start; }
.hm-tm .h2 { margin: 0; color: var(--paper); }
.hm-tm .h2 em { color: var(--honey); }
.hm-tm__lede { margin: 0; max-width: 34ch; font-size: var(--fs-lede); line-height: 1.5; }
.hm-tm__photo { position: relative; width: 100%; margin: .4rem 0 0; aspect-ratio: 16 / 11; border-radius: var(--r-lg); overflow: hidden; background: var(--oat); box-shadow: 0 0 0 8px var(--bone), 0 44px 60px -38px rgba(10, 20, 12, .85); rotate: -1.2deg; }
.hm-tm__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; }
.hm-tm__photo figcaption { position: absolute; right: .9rem; bottom: .8rem; padding: .3rem .8rem .35rem; border-radius: 99px; background: var(--bone); color: var(--sage-ink); font-family: var(--f-hand); font-size: 1.25rem; font-weight: 600; line-height: 1; rotate: -3deg; }
.hm-tm__links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }
.hm-tm__card { position: relative; display: grid; justify-items: center; padding: 2.4rem clamp(1.6rem, 3vw, 2.6rem) 2rem; border-radius: .5rem; background: var(--bone); color: var(--ink); text-align: center; box-shadow: 0 50px 70px -40px rgba(10, 20, 12, .85); rotate: 1deg; transition: rotate .7s var(--ease-out); }
.hm-tm__card:hover { rotate: 0deg; }
.hm-tm__card::before { content: ""; position: absolute; inset: .7rem; border: 1px solid rgba(87, 122, 64, .45); border-radius: .25rem; box-shadow: inset 0 0 0 3px var(--bone), inset 0 0 0 4px rgba(87, 122, 64, .25); pointer-events: none; }
.hm-tm__seal.emb { --emb: 6.4rem; position: absolute; right: -2rem; top: -2.2rem; margin: 0; rotate: 12deg; z-index: 2; }
.hm-tm__k { margin: 0; font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .2em; text-transform: uppercase; color: var(--sage-ink); }
.hm-tm__t { margin: .35rem 0 0; font-family: var(--f-display); font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.03em; }
.hm-tm__t em { font-style: italic; color: var(--sage); font-variation-settings: "SOFT" 100, "WONK" 1; }
.hm-tm__sub { margin: .5rem 0 .2rem; font-family: var(--f-hand); font-size: 1.35rem; font-weight: 600; line-height: 1; color: #8a5a12; }
.hm-tm__list { display: grid; width: 100%; margin: .8rem 0 0; padding: 0; list-style: none; }
.hm-tm__list li { position: relative; display: grid; gap: .1rem; padding: .75rem .4rem; border-top: 1px dashed rgba(87, 122, 64, .32); transition: background .3s; }
.hm-tm__list li:first-child { border-top: 0; }
.hm-tm__list li:hover { background: rgba(242, 212, 155, .28); }
.hm-tm__list small { font-family: var(--f-mono); font-size: max(.62rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; color: #5e6a60; }
.hm-tm__list b { font-family: var(--f-display); font-size: 1.32rem; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.hm-tm__list span { font-family: var(--f-display); font-style: italic; font-size: .98rem; line-height: 1.35; color: #4c574e; }
.hm-tm__list li:nth-child(4) b { color: var(--sage-ink); }
.hm-tm__f { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid rgba(87, 122, 64, .3); width: 100%; font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; color: #5e6a60; }

/* prepared meals, coming soon */
.hm-soon { padding-block: clamp(3.2rem, 6vw, 5rem); background: color-mix(in srgb, var(--honey) 55%, var(--paper)); }
.hm-soon__card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.6rem, 4vw, 3.4rem); max-width: 62rem; margin: 0 auto; padding: clamp(1rem, 1.6vw, 1.3rem); border-radius: calc(var(--r-lg) + .4rem); background: var(--bone); box-shadow: 0 40px 60px -42px rgba(90, 60, 10, .55); }
.hm-soon__photo { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--oat); }
.hm-soon__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.hm-soon__card:hover .hm-soon__photo img { scale: 1.04; }
.hm-soon__text { display: grid; gap: .8rem; justify-items: start; padding: .6rem clamp(.4rem, 2vw, 1.6rem) .6rem 0; }
.hm-soon__stamp { margin: 0; rotate: -4deg; }
.hm-soon__stamp span { display: inline-block; padding: .35rem .8rem .3rem; border: 2px solid var(--sage-ink); border-radius: .4rem; box-shadow: inset 0 0 0 2px var(--bone), inset 0 0 0 3px var(--sage-ink); color: var(--sage-ink); font-family: var(--f-mono); font-size: max(.74rem, var(--min-text)); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hm-soon__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.hm-soon__title em { font-style: italic; color: var(--sage); font-variation-settings: "SOFT" 100, "WONK" 1; }
.hm-soon__lede { margin: 0; font-size: 1.02rem; line-height: 1.5; color: #4c574e; }
.hm-soon__menu { margin: 0; font-family: var(--f-display); font-style: italic; font-size: .98rem; line-height: 1.5; color: var(--sage-ink); }
.hm-soon .btn { margin-top: .3rem; }

@media (max-width: 900px) {
  .hm-tm__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-tm__card { margin: 1rem .4rem 0; }
}
@media (max-width: 760px) {
  .hm-tm__photo { aspect-ratio: 4 / 3; box-shadow: 0 0 0 6px var(--bone), 0 34px 50px -30px rgba(10, 20, 12, .85); }
  .hm-tm__links { width: 100%; }
  .hm-tm__links .btn { flex: 1 1 100%; justify-content: center; }
  .hm-tm__card { padding: 2rem 1.2rem 1.6rem; rotate: 0deg; }
  .hm-tm__seal.emb { --emb: 5rem; right: -.7rem; top: -1.8rem; }
  .hm-tm__list b { font-size: 1.18rem; }
  .hm-tm__list span { font-size: .92rem; }
  .hm-soon__card { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .hm-soon__photo { aspect-ratio: 16 / 10; }
  .hm-soon__text { padding: 0 .5rem .6rem; }
  .hm-soon .btn { width: 100%; justify-content: center; }
}
@media (min-width: 761px) { .hm-tm__card { padding-top: 2rem; padding-bottom: 1.7rem; } .hm-tm__list li { padding-block: .56rem; } .hm-tm__list b { font-size: 1.24rem; } .hm-tm__list { margin-top: .5rem; } }
/* the first polaroid is now the dinner table (the cropped sign read "OCK") */
.ch-pola--1 .ch-pola__img img { scale: 1; transform-origin: 50% 50%; object-position: 40% 50%; }
.co-map__shield { padding-bottom: 3rem; }

/* ==========================================================================
   Round 9 (Nov 4): bug check and phone pass. Same designs, sized for a phone.
   ========================================================================== */
/* bug: a round 7 rule kept the catering builder in two squeezed columns below 1080px */
@media (max-width: 1080px) { .kb { grid-template-columns: minmax(0, 1fr); } }


/* bug: teen camp's facts ended in an empty half cell on phones and tablets */
@media (max-width: 900px) { .fact:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; } }

@media (max-width: 760px) {
  /* bug: "Featured" was wider than its circle */
  .ch-clip__stamp { width: 4.9rem; letter-spacing: .05em; }
  .ch-clip--lead .ch-clip__mast { padding-right: 5rem; }
  /* bug: the third BenitoLink clipping sat alone in a half column */
  .ch-clips > .ch-clip:nth-child(4) { grid-column: 1 / -1; }

  /* no sideways rows: teen camp's two days stack, and its photos stay an overlapping collage */
  .days { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
  .days > * { flex: none; }
  .days + .swipe-bar { display: none !important; }
  .collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 46px !important; gap: .5rem; overflow: visible; margin-inline: 0; padding: .4rem 0 0; scroll-snap-type: none; }
  .collage > .media { flex: none; aspect-ratio: auto; height: auto; box-shadow: 0 20px 34px -22px rgba(30, 43, 34, .5); }
  .collage__cap, .collage__dots { display: none !important; }

  /* type: smaller titles, ledes and display numbers */
  :root { --fs-h2: 1.72rem; --fs-lede: 1rem; }
  .h2 { font-size: var(--fs-h2); }
  .h-hero.hero__title { font-size: 2.15rem; }
  .cx-hero__title, .mx-hero__title, .kt-hero__title, .co-hero__title { font-size: clamp(1.95rem, 9vw, 2.2rem); }
  .phero__title, .phero .h1 { font-size: 2.1rem; }
  .ch-hero__name { font-size: clamp(2.9rem, 14vw, 3.5rem); }
  .cx-pick__title, .mx-end__title, .mx-end__text .mx-end__title, .hm-cater__title, .cta-band__title { font-size: clamp(1.85rem, 8.4vw, 2.1rem); }
  #visit-title { font-size: 2rem; }
  .hm-tm__t { font-size: 1.65rem; }
  .kt-menu__t { font-size: 1.6rem; }
  .hm-soon__title { font-size: 1.55rem; }
  .cx-head__lede, .qa-head__lede, .mx-hero__lede, .cx-hero__lede, .kt-hero__lede, .co-hero__lede, .ch-hero__lede, .hm-tm__lede, .hm-cater__lede, .co-find__lede { font-size: 1rem; }

  /* one alignment on Meals, Classes and Catering: section heads centered, like their heroes and endings */
  .cx-head, .qa-head { justify-items: center; margin-inline: auto; text-align: center; }
  .qa-head > div { justify-items: center; }

  /* coins a size down */
  .cx-emb .emb { --emb: 7.4rem; }
  .cx-emb { padding: 1.4rem 1rem 1.5rem; }
  .mx-step .emb { --emb: 6.6rem; }
  .mp-perks .emb, .kt-occ__c .emb { --emb: 6.2rem; }
  .kt-step__art { height: 7.6rem; }
  .kt-step__art .emb { --emb: 6rem; }

  /* shorter photos and tighter cards */
  .mx-ticket__img { aspect-ratio: 4 / 3; }
  .mx-opt__img { aspect-ratio: 5 / 4; }
  .kt-wed__pic { aspect-ratio: 1; }
  .hm-tm__photo { aspect-ratio: 16 / 10; }
  .hm-tm__card { padding: 1.7rem 1rem 1.3rem; }
  .hm-tm__list li { padding-block: .5rem; }
  .hm-tm__list b { font-size: 1.08rem; }
  .hm-tm__list span { font-size: .86rem; }
  .hm-tm__f { margin-top: .6rem; }
  .ch-match { width: min(100%, 16.5rem); height: 19rem; }

  /* the class-night filter fits on one line */
  .cx-filter { flex-wrap: nowrap; gap: .35rem; }
  .cx-filter button { padding: .5rem .75rem; font-size: .84rem; white-space: nowrap; }

  /* bigger tap targets */
  .sf__col ul a { display: inline-block; padding-block: .3rem; }
  .sf__col ul { gap: .2rem; }
  .kb-step { width: 2.75rem; }
}
@media (max-width: 370px) {
  .cx-filter button { padding: .45rem .6rem; font-size: .8rem; }
}
@media (max-width: 760px) {
  /* round 9: the roomier sections match the rest of the phone spacing */
  .cx-faq, .mx-faq, .kt-faq, .mx-end, .ch-end { padding-block: 3.2rem; }
  .hm-cater { padding-block: 3.4rem; }
  .co-find { padding-block: 3.4rem 3.2rem; }
}

/* round 9: the active FAQ category (and its count) in the darker green, readable on cream */
.faq-nav a:hover, .faq-nav a.is-active { color: var(--sage-ink); }
.faq-nav a .num { opacity: 1; }

/* round 10 (Nov 4): the home hero fills the screen again with the bigger photo (Chris: the next band peeked in at the
   bottom; "I liked that it was a little bit bigger") */
@media (min-width: 761px) {
  body[data-page="home"] .hero { min-height: max(100svh, 640px); }
  body[data-page="home"] .hero__arch { max-height: min(calc(100svh - var(--header-h) - 11rem), 600px); }
}

/* ==========================================================================
   Home, round 10: the chef section back, made better; prepared meals coming soon, bigger
   ========================================================================== */
/* the TV: a broadcast screen */
.hm-chef__tv { transition: rotate .7s var(--ease-out), translate .7s var(--ease-out); }
.hm-chef__tv:hover { rotate: -.6deg; translate: 0 -4px; }
.hm-chef__screen { position: relative; aspect-ratio: 16 / 10.5; box-shadow: 0 0 0 8px var(--bone), 0 0 0 9px rgba(30, 43, 34, .12), 0 50px 70px -40px rgba(10, 20, 12, .85); }
.hm-chef__screen img { object-position: 72% 42%; }
.hm-chef__screen::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(10, 20, 12, .07) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(10, 20, 12, .38)); pointer-events: none; }
.hm-tv__bug { position: absolute; z-index: 2; left: 1.1rem; top: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-radius: .45rem; background: rgba(20, 30, 22, .74); color: var(--paper); font-family: var(--f-mono); font-size: max(.68rem, var(--min-text)); letter-spacing: .16em; text-transform: uppercase; }
.hm-tv__bug i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 0 rgba(226, 162, 59, .6); animation: hm-onair 2s ease-in-out infinite; }
@keyframes hm-onair { 50% { box-shadow: 0 0 0 6px rgba(226, 162, 59, 0); } }
.hm-tv__third { position: absolute; z-index: 2; left: 1.1rem; bottom: 1.2rem; display: grid; gap: .1rem; padding: .55rem 1.1rem .6rem .9rem; border-left: 4px solid var(--marigold); border-radius: 0 .45rem .45rem 0; background: rgba(251, 247, 240, .95); color: var(--ink); box-shadow: 0 14px 24px -14px rgba(10, 20, 12, .7); }
.hm-tv__third b { font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; line-height: 1.1; }
.hm-tv__third small { font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; color: #5e6a60; }
.hm-chef__play { z-index: 3; }
.hm-chef__play::before, .hm-chef__play::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--marigold); border-radius: 50%; animation: hm-ring 2.6s ease-out infinite; pointer-events: none; }
.hm-chef__play::after { animation-delay: 1.3s; }
@keyframes hm-ring { from { scale: 1; opacity: .85; } to { scale: 1.9; opacity: 0; } }
html.reduce-motion .hm-chef__play::before, html.reduce-motion .hm-chef__play::after, html.reduce-motion .hm-tv__bug i { animation: none; }
@media (prefers-reduced-motion: reduce) { .hm-chef__play::before, .hm-chef__play::after, .hm-tv__bug i { animation: none; } }

/* the three numbers as gold coins */
.hm-medals { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; margin: .3rem 0; padding: 0; }
.hm-medals li { display: grid; justify-items: center; align-content: start; gap: .7rem; text-align: center; }
.hm-medal.emb { --emb: 6.6rem; margin: 0; }
.hm-medal b { position: relative; z-index: 1; font-family: var(--f-display); font-size: 2.3rem; font-weight: 500; line-height: 1; letter-spacing: -.03em; color: #6b470e; text-shadow: 0 1px 0 rgba(255, 246, 220, .85), 0 -1px 0 rgba(90, 55, 10, .25); }
.hm-medals li > span:last-child { max-width: 11rem; font-size: .9rem; line-height: 1.3; color: var(--paper); }

/* the timeline: gold coins along the line */
.hm-chef .tl li::before { width: 1.25rem; height: 1.25rem; top: -2.55rem; border: 0; background: radial-gradient(circle at 34% 28%, #fff6dc 0%, #f4d99f 22%, #e6ab45 55%, #b07a20 100%); box-shadow: 0 0 0 2px #a5741e, 0 0 0 calc(var(--lit) * 7px) rgba(242, 212, 155, .22); opacity: calc(.4 + var(--lit) * .6); }
.hm-chef .tl b { color: var(--honey); }

/* prepared meals, coming soon: a full band */
.hm-soon { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 8vw, 7rem); background: color-mix(in srgb, var(--honey) 62%, var(--paper)); }
.hm-soon__glow { position: absolute; right: -10vw; top: -20%; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 253, 248, .7), rgba(255, 253, 248, 0)); pointer-events: none; }
.hm-soon__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hm-soon__text { display: grid; gap: 1.2rem; justify-items: start; padding: 0; }
.hm-soon__title { margin: 0; font-family: var(--f-display); font-weight: 380; font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.hm-soon__title em { font-style: italic; color: var(--sage-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
.hm-soon__lede { margin: 0; max-width: 40ch; font-size: var(--fs-lede); line-height: 1.55; color: #3f4a41; }
.hm-soon__facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; width: 100%; max-width: 32rem; margin: .2rem 0; padding: 0; }
.hm-soon__facts li { display: grid; gap: .25rem; padding: .85rem .9rem .9rem; border-radius: 1rem; background: rgba(255, 253, 248, .7); box-shadow: inset 0 0 0 1px rgba(139, 94, 23, .14); }
.hm-soon__facts b { font-family: var(--f-display); font-size: 2rem; font-weight: 400; line-height: 1; color: var(--sage-ink); }
.hm-soon__facts span { font-size: .84rem; line-height: 1.3; color: #3f4a41; }
.hm-soon__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: .3rem; }
.hm-soon__more { font-weight: 600; color: var(--sage-ink); text-decoration: underline; text-underline-offset: 4px; }
.hm-soon__stamp { margin: 0; rotate: -4deg; }
.hm-soon__stamp span { background: rgba(255, 253, 248, .6); }

/* the hand of five boxes */
.hm-soon__fan { list-style: none; position: relative; display: flex; justify-content: center; align-items: flex-end; margin: 0; padding: 2.4rem 0 1rem; }
.hm-soon__fan li { --d: calc(var(--i) - 2); position: relative; z-index: calc(5 - max(var(--d), -1 * var(--d))); flex: 0 0 auto; width: clamp(8.4rem, 12.5vw, 11.5rem); margin-inline: clamp(-2.6rem, -2.6vw, -1.4rem); }
.hm-soon__meal { display: grid; gap: .45rem; padding: .55rem .55rem .8rem; border-radius: 1rem; background: var(--bone); box-shadow: 0 30px 40px -26px rgba(90, 60, 10, .65), 0 0 0 1px rgba(139, 94, 23, .1); text-align: center; rotate: calc(var(--d) * 7deg); translate: 0 calc(max(var(--d), -1 * var(--d)) * 1.3rem); transition: rotate .5s var(--ease-out), translate .5s var(--ease-out), scale .5s var(--ease-out); cursor: default; }
.hm-soon__fan li:hover { z-index: 6; }
.hm-soon__fan li:hover .hm-soon__meal { rotate: 0deg; translate: 0 -1.2rem; scale: 1.06; }
.hm-soon__box { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: .7rem; background: var(--oat); }
.hm-soon__box img { width: 100%; height: 100%; object-fit: cover; scale: 1.25; }
.hm-soon__meal b { font-family: var(--f-display); font-size: 1rem; font-weight: 500; line-height: 1.15; color: var(--ink); }
.hm-soon__meal small { font-family: var(--f-mono); font-size: max(.64rem, var(--min-text)); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink); }
.hm-soon__names { display: none; }

@media (max-width: 1080px) {
  .hm-soon__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-soon__fan { order: -1; padding-top: 1rem; }
}
@media (max-width: 900px) {
  .hm-medal.emb { --emb: 5.4rem; }
  .hm-medal b { font-size: 1.9rem; }
}
@media (max-width: 760px) {
  .hm-chef .tl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; margin-top: 2.6rem; padding: 0; }
  .hm-chef .tl::before, .hm-chef .tl::after { display: none; }
  .hm-chef .tl li { display: grid; grid-template-columns: none; gap: .3rem; padding-left: 1.7rem; }
  .hm-chef .tl li::before { left: 0; top: .15rem; width: 1rem; height: 1rem; }
  .hm-chef .tl b { font-size: 1.3rem; }
  .hm-chef .tl span { font-size: .84rem; }
  .hm-tv__bug { left: .7rem; top: .7rem; padding: .3rem .55rem; }
  .hm-tv__third { left: .7rem; bottom: .8rem; padding: .4rem .8rem .45rem .7rem; }
  .hm-tv__third b { font-size: 1rem; }
  .hm-medals { gap: .5rem; }
  .hm-medal.emb { --emb: 5rem; }
  .hm-medal b { font-size: 1.7rem; }
  .hm-medals li > span:last-child { font-size: .8rem; }
  .hm-soon { padding-block: 3.6rem 3.4rem; }
  .hm-soon__title { font-size: 2.1rem; }
  .hm-soon__fan { padding: .4rem 0 0; }
  .hm-soon__fan li { width: 6.6rem; margin-inline: -1.45rem; }
  .hm-soon__meal { padding: .35rem .35rem .4rem; border-radius: .8rem; rotate: calc(var(--d) * 8deg); translate: 0 calc(max(var(--d), -1 * var(--d)) * .9rem); }
  .hm-soon__meal b, .hm-soon__meal small { display: none; }
  .hm-soon__names { display: block; margin: .4rem 0 0; font-family: var(--f-display); font-style: italic; font-size: .95rem; line-height: 1.5; color: var(--sage-ink); text-align: center; }
  .hm-soon__facts { gap: .4rem; }
  .hm-soon__facts li { padding: .7rem .6rem .75rem; }
  .hm-soon__facts b { font-size: 1.6rem; }
  .hm-soon__facts span { font-size: .76rem; }
  .hm-soon__cta { width: 100%; }
  .hm-soon__cta .btn { width: 100%; justify-content: center; }
  .hm-soon__more { margin-inline: auto; }
}
/* round 10: the fan shows the photos; a card's name and protein appear on it when you point at it; the five names run
   underneath (the overlapping cards were cutting the names off) */
.hm-soon__fan li { width: clamp(8.6rem, 13vw, 12rem); }
.hm-soon__meal { position: relative; padding: .55rem; }
.hm-soon__tag { position: absolute; left: .55rem; right: .55rem; bottom: .55rem; display: grid; gap: .1rem; padding: .5rem .5rem .55rem; border-radius: .55rem; background: rgba(255, 253, 248, .96); box-shadow: 0 10px 18px -12px rgba(30, 43, 34, .6); opacity: 0; translate: 0 8px; transition: opacity .3s, translate .4s var(--ease-out); }
.hm-soon__fan li:hover .hm-soon__tag, .hm-soon__fan li:focus-within .hm-soon__tag { opacity: 1; translate: 0 0; }
.hm-soon__names { display: block; grid-column: 1 / -1; margin: -1rem 0 0; font-family: var(--f-display); font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--sage-ink); text-align: center; }
@media (min-width: 1081px) { .hm-soon__names { grid-column: 2; } }
@media (max-width: 760px) { .hm-soon__tag { display: none; } .hm-soon__meal { padding: .35rem; } .hm-soon__names { margin: .2rem 0 0; font-size: .95rem; } }
/* round 10: tighter. The fan and its names stay together; less padding; phone cards fit the screen */
.hm-soon { padding-block: clamp(3.4rem, 5.5vw, 4.8rem); }
.hm-soon__hand { display: grid; gap: .4rem; }
.hm-soon__names { grid-column: auto !important; margin: 0; }
.hm-soon__fan { padding: 1.6rem 0 .6rem; }
@media (max-width: 1080px) { .hm-soon__hand { order: -1; } }
@media (max-width: 760px) {
  .hm-soon { padding-block: 2.8rem 3rem; }
  .hm-soon__grid { gap: 1.4rem; }
  .hm-soon__text { gap: 1rem; }
  .hm-soon__fan { padding: .2rem 0 .4rem; }
  .hm-soon__fan li { width: 5.9rem; margin-inline: -1.5rem; }
}
.hm-soon__fan { padding-bottom: 3.6rem; }
@media (max-width: 760px) { .hm-soon__fan { padding-bottom: 2.6rem; } }

/* ==========================================================================
   Chef page, round 10 (Nov 4)
   ========================================================================== */
/* round 11: the original section colors (Chris didn't ask for new ones); only the spacing stays tighter */
.ch-quote { padding-block: clamp(3.4rem, 6vw, 5rem); }
.ch-stories, .ch-press { padding-block: clamp(3.4rem, 5.6vw, 4.8rem); }

/* matchbooks: a drawing per story, a printed border, a staple and the fold line */
.ch-match__cover b { background: linear-gradient(115deg, transparent 40%, #fff3cf 50%, transparent 60%) 180% 0 / 260% 100% no-repeat, linear-gradient(currentColor, currentColor); -webkit-background-clip: text; background-clip: text; }
.ch-match__burst { opacity: .07; }
.ch-match__cover { padding-bottom: 3.2rem; }
.ch-match__cover::before { content: ""; position: absolute; inset: .6rem .6rem 2.6rem; border: 1px solid currentColor; border-radius: .35rem; opacity: .35; pointer-events: none; }
.ch-match__art { position: relative; width: 5.2rem; margin-bottom: .2rem; }
.ch-match__art svg { display: block; width: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ch-match__art .d { stroke-width: 1.5; opacity: .8; }
.ch-match__strike { bottom: 2.9rem; }
.ch-match__fold { position: absolute; left: 0; right: 0; bottom: 0; height: 2.2rem; display: grid; place-items: center; border-top: 1px dashed currentColor; background: rgba(0, 0, 0, .1); font-family: var(--f-mono); font-size: max(.56rem, var(--min-text)); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.ch-match__fold::before { content: ""; position: absolute; left: 50%; top: .55rem; width: 1.6rem; height: .35rem; translate: -50% 0; border-radius: 2px; background: linear-gradient(180deg, #f1efe9, #a9a59b); box-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.ch-match__fold { padding-top: .5rem; }
@media (min-width: 761px) {
  .ch-matches { padding-top: 3.2rem; }
  .ch-match { rotate: var(--tilt, 0deg); transition: rotate .6s var(--ease-out); }
  .ch-match:nth-child(1) { --tilt: -3deg; }
  .ch-match:nth-child(2) { --tilt: 1.5deg; margin-top: 1.2rem; }
  .ch-match:nth-child(3) { --tilt: 3.5deg; }
  .ch-match:hover { rotate: 0deg; }
  .ch-match.is-landing { transition: none; }
}

/* flower farmer: tighter, the packet a touch bigger and tilted, the crêpe hangs off its corner */
.ch-bloom { padding-block: clamp(3.6rem, 6vw, 5rem); }
.ch-bloom__grid { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4.5rem); }
.ch-packet { width: min(100%, 23rem); padding: 0 0 1.6rem; }
.ch-packet .ch-packet__front { rotate: 3deg !important; transition: rotate .7s var(--ease-out); }
.ch-packet:hover .ch-packet__front { rotate: 0deg !important; }
.ch-packet__crepe { width: 7.4rem; left: -3.4rem; bottom: -1.2rem; z-index: 2; }

/* press: four clippings, the last one wide */
@media (min-width: 761px) {
  }

/* Pull up a stool: the title, then one line of twine */
.ch-end { padding-block: clamp(3.6rem, 6vw, 5rem); }
.ch-end__in { position: relative; display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.ch-end__in .ch-end__text { justify-items: center; gap: .9rem; text-align: center; }
.ch-end__in .mx-end__title em { display: inline; }
.ch-end__in .ch-end__lede { margin-inline: auto; }
.ch-end__in .ch-stool { width: 4.2rem; }
.ch-line { position: relative; }
.ch-line__rope { position: absolute; left: -3%; top: 0; width: 106%; height: 80px; overflow: visible; fill: none; stroke: #b48c58; stroke-width: 2.4; stroke-linecap: round; }
.ch-line__items { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: clamp(1rem, 2.6vw, 2.2rem); align-items: start; margin: 0; padding: 0; }
.ch-line__item { position: relative; display: grid; justify-items: center; padding-top: calc(var(--y) + .6rem); }
.ch-line__item > .ch-pola, .ch-line__item > .ch-letter { transform-origin: 50% 0; rotate: var(--r); transition: rotate .7s var(--ease-out); }
.ch-line__item:hover > .ch-pola, .ch-line__item:hover > .ch-letter { rotate: calc(var(--r) * -.5); }
.ch-peg { position: absolute; z-index: 3; left: 50%; top: calc(var(--y) - 1.05rem); width: .8rem; height: 2.3rem; translate: -50% 0; border-radius: .2rem; background: linear-gradient(90deg, #b98f5c, #e8d1ab 50%, #b98f5c); box-shadow: 0 4px 5px -3px rgba(40, 25, 5, .5); }
.ch-peg::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 2px; background: #8d6a3c; }
.ch-line .ch-pola { position: relative; left: auto; right: auto; top: auto; width: 100%; max-width: 15rem; z-index: 1; }
.ch-line .ch-pola::before { display: none; }
.ch-line .ch-pola:hover { scale: 1.04; translate: none; }
.ch-line .ch-letter { width: 100%; margin: 0; }
.ch-line .ch-letter .ch-sig__name { font-size: clamp(2.6rem, 3.6vw, 3.4rem); }

@media (max-width: 1080px) and (min-width: 761px) {
  .ch-line__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ch-line__item--letter { grid-column: 1 / -1; justify-self: center; width: min(100%, 26rem); padding-top: 1rem; }
  .ch-line__item--letter .ch-peg { display: none; }
}
@media (max-width: 760px) {
  .ch-quote { padding-block: 3rem; }
  .ch-stories, .ch-press, .ch-bloom, .ch-end { padding-block: 3rem; }
  .ch-match__art { width: 4.4rem; }
  .ch-bloom__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ch-packet { width: min(100%, 19.5rem); padding: 0 0 1.2rem; }
  .ch-packet__crepe { width: 5.6rem; left: -1.1rem; bottom: -1rem; }
  .ch-line__rope { height: 46px; left: -4%; width: 108%; }
  .ch-line__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
  .ch-line__item { padding-top: calc(var(--y) * .58 + .4rem); }
  .ch-peg { top: calc(var(--y) * .58 - .8rem); width: .6rem; height: 1.7rem; }
  .ch-line .ch-pola { padding: .35rem .35rem 1.7rem; }
  .ch-line .ch-pola figcaption { font-size: .82rem; bottom: .35rem; }
  .ch-line__item--letter { grid-column: 1 / -1; justify-self: center; width: min(100%, 22rem); padding-top: 1.2rem; }
  .ch-line__item--letter .ch-peg { display: none; }
}
.ch-match__fold { height: 2.5rem; padding-top: 1.05rem; }
.ch-match__fold::before { top: .4rem; }
.ch-match__cover::before { bottom: 2.9rem; }
.ch-match__strike { bottom: 3.2rem; }
@media (max-width: 760px) {
  /* the crêpe sits on the packet's left corner, so both captions sit on the right */
  .ch-packet__f { flex-direction: column; align-items: flex-end; gap: .15rem; text-align: right; }
}
.ch-packet__f { flex-direction: column; align-items: flex-end; gap: .15rem; text-align: right; }
@media (min-width: 761px) {
  /* the text and the packet sit together in the middle, no gap between them */
  .ch-bloom__grid { grid-template-columns: minmax(0, 34rem) auto; justify-content: center; gap: clamp(2.5rem, 5vw, 5rem); }
}

/* Contact hero, round 10: two columns, the photo in an arch, warm oat */
.co-hero { background: var(--oat); }
.co-hero::after { background: radial-gradient(circle at 18px 0, var(--oat) 17.5px, transparent 18.5px) 0 0 / 36px 18px repeat-x; }
.co-hero__grid.co-hero__grid--split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "copy art" "tiles tiles"; align-items: center; gap: clamp(1.2rem, 3vh, 2.2rem) clamp(2rem, 5vw, 5rem); text-align: left; }
.co-hero__copy { grid-area: copy; display: grid; justify-items: start; }
.co-hero__kick { margin: 0 0 1rem; font-family: var(--f-mono); font-size: max(.72rem, var(--min-text)); letter-spacing: .18em; text-transform: uppercase; color: var(--sage-ink); }
.co-hero__grid--split .co-hero__lede { max-width: 44ch; margin: clamp(.9rem, 2vh, 1.3rem) 0 clamp(1rem, 2.4vh, 1.6rem); }
.co-hero__grid--split .co-today { margin: 0; }
.co-hero__art { grid-area: art; position: relative; align-self: stretch; display: grid; place-items: end center; min-height: 0; }
.co-hero__arch { position: relative; height: 100%; max-height: 540px; aspect-ratio: 3 / 3.7; max-width: 100%; overflow: hidden; border: 6px solid var(--bone); border-radius: 999px 999px 1.4rem 1.4rem; background: var(--oat); box-shadow: 0 44px 70px -40px rgba(30, 43, 34, .55); }
.co-hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 42%; }
.co-hero__emb.emb { --emb: clamp(7rem, 9vw, 8.6rem); position: absolute; z-index: 3; left: 2%; bottom: 6%; margin: 0; rotate: -8deg; }
.co-hero__grid--split .co-tiles { grid-area: tiles; margin-top: 0; }
.co-hero__grid--split .co-tile { min-height: clamp(7.4rem, 15vh, 9.6rem); }
@media (max-width: 760px) {
  .co-hero__grid.co-hero__grid--split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "art" "copy" "tiles"; gap: 1.4rem; text-align: center; }
  .co-hero__copy { justify-items: center; }
  .co-hero__kick { margin-bottom: .7rem; }
  .co-hero__grid--split .co-hero__lede { margin: .9rem auto 1.1rem; }
  .co-hero__grid--split .co-today { margin: 0 auto; }
  .co-hero__art { height: 16rem; }
  .co-hero__arch { height: 100%; border-width: 4px; aspect-ratio: 3 / 3.3; }
  .co-hero__emb.emb { --emb: 5.4rem; left: calc(50% - 8.6rem); bottom: 1%; }
  .co-hero__grid--split .co-tile { min-height: 8.2rem; }
}
.co-hero__grid--split .co-tile { padding-top: 3.9rem; }
@media (max-width: 760px) { .co-hero__grid--split .co-tile { padding-top: 3.3rem; min-height: 0; } }

/* ==========================================================================
   Round 10 (Nov 4): tighten everything. Chris: "some sections have so much empty space ... cut it out ... tighten
   everything up." Less space between sections on computers, and the gaps the empty-space audit found are closed.
   ========================================================================== */
:root { --space-section: clamp(3.2rem, 5.2vw, 5.2rem); }
@media (max-width: 760px) { :root { --space-section: 2.9rem; } }
.cx-faq, .mx-faq, .kt-faq, .mx-end { padding-block: clamp(3.2rem, 5.2vw, 5rem); }
.hm-cater { padding-block: clamp(3.4rem, 5.6vw, 5rem); }
.hm-chef .tl { margin-top: clamp(1.6rem, 2.6vw, 2.4rem); }
.mx-orbit { margin-top: 1.4rem; }
.cx-group { padding-bottom: clamp(2.8rem, 4.4vw, 4rem); }
@media (max-width: 760px) {
  .cx-faq, .mx-faq, .kt-faq, .mx-end, .ch-end { padding-block: 2.9rem; }
  .hm-cater { padding-block: 2.9rem; }
  .ch-matches { padding-top: 1.6rem; }
  .mx-orbit { margin-top: 1rem; }
}
.hm-cater__prints { height: clamp(320px, 29vw, 420px); }
@media (max-width: 900px) { .hm-cater__prints { height: clamp(240px, 58vw, 360px); } }
/* round 10: no wide empty sides on computers. Meals: the sides wheel and the reheating card share a row. Classes: the
   next-two-weeks card sits beside its heading instead of under it. */
@media (min-width: 1081px) {
  .mx-tg > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .mx-tg > .wrap > * { grid-column: 1 / -1; }
  .mx-tg > .wrap > .mx-orbit { grid-column: 1; margin: 2.4rem auto 0; }
  .mx-tg > .wrap > .mx-reheat { grid-column: 2; margin: 2.4rem 0 0; max-width: none; grid-template-columns: minmax(0, 1fr); }
  .mx-tg > .wrap > .mx-reheat .mx-reheat__therm { display: none; }

  .cx-pick { text-align: left; }
  .cx-pick__in { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "title nights" "lede nights" "filter nights" "or nights" ". nights"; column-gap: clamp(2.5rem, 5vw, 5rem); justify-items: start; align-items: start; }
  .cx-pick__title { grid-area: title; }
  .cx-pick__lede { grid-area: lede; margin-left: 0; }
  .cx-pick__in .cx-filter { grid-area: filter; justify-content: flex-start; }
  .cx-pick__in .cx-nights { grid-area: nights; width: 100%; margin: 0; }
  .cx-pick__or { grid-area: or; }
}
/* round 10: readable on the honey band and on the green */
.hm-soon__more, .hm-soon__names { color: #3d5a2c; }
@media (max-width: 760px) { .hm-chef .tl b { font-size: 1.55rem; } }

/* ==========================================================================
   Chef page, round 11 (Nov 4)
   ========================================================================== */
/* the passport: stamps only, no ID block or code line, so its bottom is tighter */
.ch-book, .ch-book.ch-book { padding-bottom: clamp(2.2rem, 4vw, 3.4rem); }
/* press: five clippings in two rows again; Eat This TV is a clipping like the rest, no photo */
.ch-clip--tv .ch-clip__mast b { letter-spacing: .06em; }
/* flower farmer: smaller packet, so the text and the packet are the same height */
@media (min-width: 761px) {
  .ch-bloom { padding-block: clamp(3rem, 5vw, 4.2rem); }
  .ch-packet { width: min(100%, 19rem); }
  .ch-packet__crepe { width: 6.4rem; left: -3rem; bottom: -1rem; }
  .ch-bloom__grid { grid-template-columns: minmax(0, 36rem) auto; }
}
@media (max-width: 760px) {
  .ch-bloom__grid { gap: 1.6rem; }
  .ch-packet { width: min(100%, 17.5rem); }
}
/* Pull up a stool: the twine runs from one edge of the screen to the other */
.ch-end { overflow: hidden; }
.ch-line__rope { left: calc(50% - 50vw); width: 100vw; }
@media (max-width: 760px) { .ch-line__rope { left: calc(50% - 50vw); width: 100vw; } }
@media (max-width: 760px) { .ch-clips > .ch-clip:nth-child(4) { grid-column: auto; } }

/* ==========================================================================
   Home, round 11 (Nov 4): tighter. Chris: the Eat This TV section, the meals section and Pull up a stool had a lot
   of empty space; no tan behind the meals; crop the tall storefront photo top and bottom.
   ========================================================================== */
.hm-chef { padding-block: clamp(2.8rem, 4.4vw, 4rem); }
.hm-chef__screen { aspect-ratio: 16 / 12; }
.hm-chef__text { gap: 1.1rem; }
.hm-medal.emb { --emb: 5.6rem; }
.hm-medal b { font-size: 2rem; }
.hm-medals { margin: 0; }
.hm-chef .tl { margin-top: 1.4rem; padding-top: 2.1rem; }

.hm-soon { padding-block: clamp(2.8rem, 4.4vw, 4rem); background: var(--paper); }
.hm-soon__glow { display: none; }
.hm-soon__text { gap: .9rem; }
.hm-soon__title { font-size: clamp(2.2rem, 3.4vw, 3.3rem); }
.hm-soon__facts li { padding: .7rem .8rem .75rem; background: var(--bone); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .1); }
.hm-soon__facts b { font-size: 1.7rem; }
.hm-soon__stamp span { background: var(--bone); }
.hm-soon__fan { padding-top: .8rem; }
.hm-soon__fan li { width: clamp(8.6rem, 13.5vw, 12.4rem); }

.hm-visit { padding-block: clamp(2.8rem, 4.4vw, 4rem); }
.hm-visit__photo .media.ratio-34 { aspect-ratio: 1 / 1.08; }
.hm-visit__photo .media img { object-position: 50% 48%; }
@media (max-width: 760px) {
  .hm-chef, .hm-soon, .hm-visit { padding-block: 2.6rem; }
  .hm-chef__screen { aspect-ratio: 4 / 3.3; }
  .hm-medal.emb { --emb: 4.8rem; }
  .hm-soon__fan li { width: 5.9rem; }
}
/* round 11: the inside of the passport cover is the same paper as the pages, so nothing flashes as it fades */
.ch-book__inside { background: repeating-radial-gradient(circle at 18% 120%, transparent 0 15px, rgba(80, 113, 60, .07) 15px 16px), repeating-radial-gradient(circle at 82% -20%, transparent 0 19px, rgba(87, 122, 64, .06) 19px 20px), #f7f0e1; }
.co-hero__arch img { object-position: 100% 40%; }
@media (max-width: 760px) { .co-hero__arch { aspect-ratio: 3 / 3.7; } }

/* ==========================================================================
   Home career timeline, round 12 (Nov 4): the line runs center to center behind the coins and fills by itself
   ========================================================================== */
@media (min-width: 901px) {
  .hm-chef .tl { --g: 1.3rem; --e: calc((100% - 7 * var(--g)) / 16); gap: 1.2rem var(--g); margin-top: 1.8rem; padding: 0; }
  .hm-chef .tl::before, .hm-chef .tl::after { z-index: 0; top: calc(.95rem - 1.5px); left: var(--e); right: auto; height: 3px; border-radius: 3px; }
  .hm-chef .tl::before { width: calc(100% - 2 * var(--e)); background: rgba(251, 247, 240, .2); }
  .hm-chef .tl::after { width: calc((100% - 2 * var(--e)) * var(--p)); transform: none; background: linear-gradient(90deg, #c08626, var(--honey)); box-shadow: 0 0 10px rgba(242, 212, 155, .45); }
  .hm-chef .tl li { z-index: 1; justify-items: center; gap: .35rem; padding-top: 2.75rem; text-align: center; }
  .hm-chef .tl li::before { z-index: 2; left: 50%; top: 0; width: 1.9rem; height: 1.9rem; translate: -50% 0; }
  .hm-chef .tl li::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 0; width: 1.9rem; height: 1.9rem; translate: -50% 0; border: 2px solid var(--honey); border-radius: 50%; opacity: 0; pointer-events: none; }
  .tl__spark { position: absolute; z-index: 1; top: .95rem; left: calc(var(--e) + (100% - 2 * var(--e)) * var(--p)); width: .75rem; height: .75rem; translate: -50% -50%; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 8px 3px rgba(255, 236, 190, .9), 0 0 22px 8px rgba(226, 162, 59, .55); opacity: 0; transition: opacity .3s; pointer-events: none; }
  .hm-chef .tl.is-running .tl__spark { opacity: 1; }
  .hm-chef .tl.is-done::after { background: linear-gradient(90deg, #c08626 0%, var(--honey) 40%, #fff6dc 50%, var(--honey) 60%, var(--honey) 100%) 200% 0 / 260% 100% no-repeat, var(--honey); animation: tl-shine 1.5s ease-in-out .15s 1 both; }
}
@keyframes tl-shine { from { background-position: 200% 0, 0 0; } to { background-position: -110% 0, 0 0; } }

/* the coins: little struck gold coins with a rim */
.hm-chef .tl li::before { border: 0; border-radius: 50%; opacity: 1; background: radial-gradient(circle at 34% 28%, #fff6dc 0 12%, #f4d99f 26%, #e6ab45 58%, #b07a20 100%); box-shadow: 0 0 0 2px #a5741e, inset 0 0 0 3px rgba(255, 246, 220, .5), inset 0 0 0 4.5px rgba(165, 116, 30, .55), 0 8px 12px -6px rgba(10, 20, 12, .65); }
/* waiting to light: smaller and dull, the words dimmed (still readable) */
.hm-chef .tl.is-armed li:not(.is-lit)::before { scale: .72; filter: grayscale(.65) brightness(.8); opacity: .75; }
.hm-chef .tl.is-armed li > * { transition: opacity .6s, translate .6s var(--ease-out); }
.hm-chef .tl.is-armed li:not(.is-lit) > * { opacity: .45; translate: 0 5px; }
.hm-chef .tl li.is-lit::before { animation: tl-pop .65s var(--ease-out); }
.hm-chef .tl li.is-lit::after { animation: tl-ring 1.1s ease-out; }
@keyframes tl-pop { 0% { scale: .72; } 50% { scale: 1.35; } 100% { scale: 1; } }
@keyframes tl-ring { from { scale: 1; opacity: .9; } to { scale: 2.7; opacity: 0; } }

@media (max-width: 760px) {
  .hm-chef .tl li::before { left: 0; top: .1rem; width: 1.15rem; height: 1.15rem; translate: none; }
  .hm-chef .tl li::after { content: ""; position: absolute; left: 0; top: .1rem; width: 1.15rem; height: 1.15rem; border: 2px solid var(--honey); border-radius: 50%; opacity: 0; pointer-events: none; }
}
html.reduce-motion .hm-chef .tl li::before, html.reduce-motion .hm-chef .tl li::after, html.reduce-motion .hm-chef .tl::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .hm-chef .tl li::before, .hm-chef .tl li::after, .hm-chef .tl::after { animation: none; } }

/* Classes "Pick a night", round 12: one small card for the next 7 days; the words centered beside it on computers */
.cx-week--seven .cx-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; padding: .7rem .9rem .5rem; }
.cx-week--seven .cx-strip span:nth-child(7) { margin-right: 0; }
.cx-week--seven .cx-week__h span:empty { display: none; }
@media (min-width: 1081px) {
  .cx-pick { padding-block: clamp(3.4rem, 5vw, 4.6rem); }
  .cx-pick__in { grid-template-columns: minmax(0, 30rem) minmax(0, 33rem); grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: ". nights" "title nights" "lede nights" "filter nights" "or nights" ". nights"; justify-content: center; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .cx-pick__title { font-size: clamp(2.6rem, 3.8vw, 3.6rem); }
  .cx-pick__in .cx-filter { margin-top: 1.2rem; }
  .cx-pick__or { margin-top: 1.2rem; }
}

/* ==========================================================================
   Matchbooks, round 12 (Nov 4): a picture medal, a printed label, a pattern per book, a real striker, full names
   ========================================================================== */
.ch-match__cover { gap: .7rem; padding: 2.4rem 1.2rem 3.6rem; }
.ch-match:nth-child(1) .ch-match__cover { background: repeating-linear-gradient(45deg, rgba(255, 253, 248, .06) 0 1.5px, transparent 1.5px 13px), repeating-linear-gradient(-45deg, rgba(255, 253, 248, .06) 0 1.5px, transparent 1.5px 13px), var(--c); }
.ch-match:nth-child(2) .ch-match__cover { background: radial-gradient(circle, rgba(255, 253, 248, .09) 1.4px, transparent 1.8px) 0 0 / 12px 12px, var(--c); }
.ch-match:nth-child(3) .ch-match__cover { background: repeating-linear-gradient(90deg, rgba(30, 43, 34, .06) 0 6px, transparent 6px 16px), var(--c); }
.ch-match__burst { opacity: .05; }
.ch-match__art { display: grid; place-items: center; width: 4.6rem; aspect-ratio: 1; margin: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px currentColor, 0 0 0 5px rgba(255, 253, 248, .08), 0 0 0 6.5px currentColor; }
.ch-match__art svg { width: 66%; }
.ch-match__label { position: relative; display: grid; justify-items: center; gap: .3rem; width: 100%; padding: .8rem .6rem .85rem; border-radius: .45rem; background: #fbf5e6; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, .22), inset 0 0 0 4px #fbf5e6, inset 0 0 0 5px rgba(30, 43, 34, .16), 0 8px 14px -10px rgba(10, 20, 12, .6); }
.ch-match__label small { color: var(--sage-ink); }
.ch-match:nth-child(3) .ch-match__label small { color: #8a5a12; }
/* the name: no more clipped letters (the shine used to stop at the text box and cut the tails of y and g) */
.ch-match__cover .ch-match__label b { display: block; padding: .02em .14em .16em; font-size: clamp(1.75rem, 2.2vw, 2.15rem); line-height: 1; text-wrap: balance; color: var(--ink); background: linear-gradient(115deg, transparent 40%, rgba(226, 162, 59, .55) 50%, transparent 60%) 180% 0 / 260% 100% no-repeat, linear-gradient(var(--ink), var(--ink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ch-match__strike { bottom: 3.05rem; }
/* the striker: brown and gritty, like the real thing */
.ch-match__strip { height: 1.6rem; background: radial-gradient(circle, rgba(255, 236, 200, .22) .7px, transparent 1.1px) 0 0 / 5px 5px, radial-gradient(circle, rgba(0, 0, 0, .3) .8px, transparent 1.2px) 2px 3px / 6px 6px, linear-gradient(180deg, #6b4a2b, #4f3520); }
/* the inside of the cover reads the right way up when it's open */
.ch-match__back { background: radial-gradient(circle at 50% 40%, #fbf5e6, #efe3c8); }
.ch-match__backin { display: grid; justify-items: center; gap: .35rem; rotate: 180deg; color: #3a5530; }
.ch-match__backin svg { width: 3.2rem; }
.ch-match__backin small { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.ch-match__backin em { font-family: var(--f-mono); font-style: normal; font-size: max(.6rem, var(--min-text)); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 760px) {
  .ch-match__cover { gap: .55rem; padding: 2.2rem 1rem 3.4rem; }
  .ch-match__art { width: 3.9rem; }
  .ch-match__cover .ch-match__label b { font-size: 1.7rem; }
}

/* Pull up a stool: the twine in front of the cards (the pegs on top), so it shows all the way across; the seal moves
   to the letter's bottom corner so the twine doesn't run over it */
.ch-line__rope { z-index: 2; pointer-events: none; }
.ch-line .ch-pola, .ch-line .ch-letter { position: relative; z-index: 1; }
.ch-peg { z-index: 3; }
.ch-line .ch-letter__seal.emb { top: auto; bottom: -1.5rem; right: -1.2rem; }
.ch-match__backin { rotate: none; scale: 1 -1; }
.ch-match__backin { rotate: none; scale: none; }
.ch-line__rope { max-width: none; }

/* ==========================================================================
   Meals, prepared meals, round 12: the photo and the reheating card on the left, the meal on the right; both end together
   ========================================================================== */
.mx-prep__head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.mp { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "left panel"; }
.mp__left { grid-area: left; position: sticky; top: calc(var(--header-h) + 1.2rem); display: grid; gap: 1rem; align-self: start; }
.mp__left .mp__photo { position: relative; top: auto; grid-area: auto; }
.mp__label { display: flex; align-items: center; gap: .8rem; }
.mp__step { display: inline-flex; gap: .3rem; }
.mp__step button { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(30, 43, 34, .2); border-radius: 50%; background: var(--bone); color: var(--ink); cursor: pointer; transition: background .25s, color .25s, translate .3s var(--ease-out); }
.mp__step button:hover { background: var(--sage); color: var(--paper); translate: 0 -2px; }
.mp__step button:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.mp__step svg { width: .95rem; height: .95rem; }
@media (max-width: 900px) {
  .mp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "panel" "reheat"; }
  .mp__left { display: contents; }
  .mp__left .mp__photo { grid-area: photo; }
  .mp__left .mp__reheat { grid-area: reheat; }
  .mp__step button { width: 2.5rem; height: 2.5rem; }
}

/* Catering weddings, round 12: no sample menu (Chris); a square photo so the words and the photo balance */
.kt-wed { padding-block: clamp(3.4rem, 5.4vw, 4.8rem); }
.kt-wed__pic { aspect-ratio: 1; }
.kt-wed__text { gap: 1.1rem; }

/* ==========================================================================
   Contact, round 12: the whole photo, centered; one wide form card with no empty column
   ========================================================================== */
.co-hero__art { place-items: center; }
.co-hero__arch { width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; border-radius: 1.6rem; rotate: 1.2deg; }
.co-hero__arch img { object-position: 50% 50%; }

.co-main { padding-block: clamp(3.2rem, 5vw, 4.6rem); }
.co-main__grid { grid-template-columns: minmax(0, 1fr); width: min(100%, 68rem); margin-inline: auto; }
.co-form { justify-items: center; text-align: center; gap: .8rem; }
.co-form__card { width: 100%; text-align: left; }
@media (min-width: 901px) {
  .co-form__card { padding: 1.8rem 2rem 2rem; }
  .co-form .form__fields { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 1rem 2.4rem; }
  .co-form .form__fields > .co-topics { grid-column: 1; grid-row: 1 / span 5; }
  .co-form .form__fields > :not(.co-topics) { grid-column: 2; }
  .co-form .co-topics__list { gap: .5rem; }
  .co-form .field textarea { min-height: 6.4rem; }
}
@media (max-width: 760px) {
  .co-hero__arch { rotate: 0deg; border-width: 4px; }
  .co-hero__art { height: auto; }
}
@media (min-width: 901px) {
  .co-form .form__fields { grid-template-areas: "topics row" "topics email" "topics msg" "heard btn"; }
  .co-form .form__fields > .co-topics { grid-area: topics; grid-row: auto; grid-column: auto; }
  .co-form .form__fields > .form__row { grid-area: row; grid-column: auto; }
  .co-form .form__fields > .field:has(#c-email) { grid-area: email; grid-column: auto; }
  .co-form .form__fields > .field:has(#c-msg) { grid-area: msg; grid-column: auto; }
  .co-form .form__fields > .field:has(#c-heard) { grid-area: heard; grid-column: auto; }
  .co-form .form__fields > button { grid-area: btn; grid-column: auto; align-self: end; }
}
@media (min-width: 901px) {
  .co-form .form__fields > .co-topics { grid-area: topics; }
  .co-form .form__fields > .form__row { grid-area: row; }
  .co-form .form__fields > .field:has(#c-email) { grid-area: email; }
  .co-form .form__fields > .field:has(#c-msg) { grid-area: msg; }
  .co-form .form__fields > .field:has(#c-heard) { grid-area: heard; }
  .co-form .form__fields > button { grid-area: btn; align-self: end; }
}