/* == fonts: generated by `npm run fonts` (sites/tools/fonts.mjs), do not edit by hand == */
/* Self-hosted from Google Fonts. To change the faces, edit the URL below and
   re-run `npm run fonts`; it reads the URL back from here, and the preload
   list too (PAGE.md, "Preload what paints first").
   source: https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800&family=Playfair+Display:wght@500;600&family=Sedgwick+Ave+Display&display=swap
   preload: Mulish:400,Playfair Display:600
*/
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/mulish-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/mulish-normal-latin.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: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/mulish-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/mulish-normal-latin.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: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/mulish-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/mulish-normal-latin.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: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/mulish-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/mulish-normal-latin.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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-normal-latin.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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-normal-latin.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: 'Sedgwick Ave Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/sedgwick-ave-display-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sedgwick Ave Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/sedgwick-ave-display-400-normal-latin.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;
}
/* == end fonts == */

/* ===========================================================================
   Chef Tony Tone
   Built to concept 2 (Three Ways to Experience Tony), as Tony asked on
   5 Oct 2026: Book and Gather, no Shop, graffiti block words over big photos.
   Mockups: design/mockup/<page>-935.png, drawn by ChatGPT in the assets chat,
   9 Oct 2026.

   Every value below traces to a measurement in design/SPEC.md. If a number
   here is not in SPEC.md, it is a bug - not a preference.

   1200 MAX, NO BLEED (sites/.claude/rules/BUILD.md, "The defaults"). Sizes
   are written in 935px design pixels as `N * var(--u)`; --u renders
   them at 1200/935 at 1200 and above and shrinks below it, and the
   header, page and footer are one 1200 column. Floor a size for legibility
   with max() on the same line: max(16px, calc(17 * var(--u))).
   =========================================================================== */

:root {
  --u: min(calc(1200px / 935), 100vw / 935);

  /* --- Colour (SPEC.md, "Colour"; area-sampled, darkest 5% for text) ---- */
  --ink: #0A0A0A;          /* headings on paper (darkest #000) */
  --body: #393735;         /* body copy on paper */
  --paper: #F5F2EC;        /* cream bands */
  --black: #050605;        /* header, footer, black bands */
  --forest: #172619;       /* dark green bands */
  --moss: #2C4029;         /* the sign-up band */
  --green: #3D674F;        /* green button */
  --rust: #9C4C27;         /* rust button, card underlines */
  --gold: #E9B868;         /* GATHER, icon strokes on dark */
  --on-dark: #E8E3DA;      /* body copy on dark */
  --muted-dark: #B9B2A6;   /* small print on dark */
  --line-dark: rgba(255, 255, 255, .16);
  --line-paper: #D9D3C8;

  /* --- Type (SPEC.md, "Type"; solved from drawn widths) ----------------- */
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Mulish", "Segoe UI", system-ui, sans-serif;
  --brush: "Sedgwick Ave Display", "Playfair Display", serif;

  --f-h1: max(34px, calc(44 * var(--u)));       /* "Private Chef" 262 drawn = 50.8; -13% per the ChatGPT desktop review, 9 Oct */
  --f-h2: max(26px, calc(28.5 * var(--u)));     /* "One Chef, Many Ways..." 503 drawn = 31.3; -9% per the review */
  --f-h2s: max(24px, calc(26 * var(--u)));      /* "Your Occasion." 178 drawn = 28.4; -8% per the review */
  --f-h3: max(24px, calc(24 * var(--u)));       /* hero panel titles */
  --f-brush: calc(78.7 * var(--u));  /* BOOK 185 drawn */
  --f-lede: max(16px, calc(10.5 * var(--u)));
  --f-body: max(15px, calc(10 * var(--u)));
  --f-small: max(13px, calc(9 * var(--u)));
  --f-kicker: max(11px, calc(7.4 * var(--u)));
  --f-nav: max(13px, calc(9.2 * var(--u)));
  --f-btn: max(13px, calc(9.4 * var(--u)));

  --lh-h: 1.04;            /* h2 pitch 29.2 / 28.4 */
  --lh-body: 1.42;         /* body pitch 14.2 / 10 */
  --lh-lede: 1.5;          /* lede pitch 15.8 / 10.5 */
  --track-h: -0.02em;      /* font-match: -0.04 best at 600; eased for the optical size */
  --track-kicker: 0.32em;

  /* --- Layout ----------------------------------------------------------- */
  --gut: calc(52 * var(--u));        /* copy x = 52 on every band */
  --header-h: calc(65 * var(--u));   /* header band 0-65 */
  --btn-h: calc(27 * var(--u));      /* buttons 26-28 tall */
  --btn-px: calc(17 * var(--u));

  /* --- Rhythm (SPEC.md, "Bands") ---------------------------------------- */
  --band-pt: calc(20 * var(--u));    /* boundary to first text, split bands */
  --band-pb: calc(20 * var(--u));
  --intro-pt: calc(15 * var(--u));   /* intro 406 -> kicker 425 */
  --intro-pb: calc(16 * var(--u));
  --gap-kicker: calc(6 * var(--u));  /* kicker baseline area to h2 cap */
  --gap-h-body: calc(9 * var(--u)); /* h2 last line to first body line */
  --gap-body-btn: calc(14 * var(--u));
}

/* No bleed: one 1200 column, bands and photographs included. */
.site-header, main, .site-footer { max-width: 1200px; margin-inline: auto; }

/* A minimal reset. Everything else belongs to the design. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); }
body { margin: 0; background: var(--black); color: var(--body); font-family: var(--sans); font-size: var(--f-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
main { background: var(--paper); overflow: clip; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--paper); color: var(--ink); padding: 8px 12px; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Type ------------------------------------------------------------- */
.h1, .h2, .h2s, .h3 { font-family: var(--serif); font-weight: 600; letter-spacing: var(--track-h); line-height: var(--lh-h); color: var(--ink); text-wrap: balance; }
.h1 { font-size: var(--f-h1); line-height: 1.02; }
.h2 { font-size: var(--f-h2); }
.h2s { font-size: var(--f-h2s); }
.h3 { font-size: var(--f-h3); line-height: 1.06; }
.kicker { display: block; font-family: var(--sans); font-size: var(--f-kicker); font-weight: 700; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--ink); margin-bottom: var(--gap-kicker); }
.lede { font-size: var(--f-lede); line-height: var(--lh-lede); color: var(--body); }
.copy { font-size: var(--f-body); line-height: var(--lh-body); }
.copy + .copy { margin-top: .8em; }
.h1 + .lede, .h2 + .lede, .h2s + .lede, .h2 + .copy, .h2s + .copy, .h1 + .copy { margin-top: var(--gap-h-body); }
.on-dark, .on-dark .h1, .on-dark .h2, .on-dark .h2s, .on-dark .h3, .on-dark .kicker { color: #fff; }
.on-dark .lede, .on-dark .copy { color: var(--on-dark); }
.brush { font-family: var(--brush); font-weight: 400; font-size: var(--f-brush); line-height: .9; text-transform: uppercase; transform: rotate(-6deg); color: #fff; letter-spacing: 0; }
.brush--gold { color: var(--gold); }
/* The graffiti tags: white PNGs on transparent (ChatGPT assets chat), turned black on cream */
.script { display: block; width: max(96px, calc(130 * var(--u))); height: auto; opacity: .88; transform: rotate(-5deg); pointer-events: none; user-select: none; }
.script--ink { filter: brightness(0); opacity: .8; }
.todo { outline: 2px dashed #E2A23B; outline-offset: 2px; }

/* ---- Buttons ---------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(9 * var(--u)); min-height: max(44px, var(--btn-h)); padding: 0 max(16px, var(--btn-px)); font-family: var(--sans); font-size: var(--f-btn); font-weight: 600; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: background-color .15s, color .15s; cursor: pointer; }
.btn .arrow { font-size: 1em; line-height: inherit; }
.btn--rust { background: var(--rust); color: #fff; }
.btn--rust:hover { background: #87401F; }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: #335843; }
.btn--ghost { border-color: rgba(255, 255, 255, .85); color: #fff; background: rgba(0, 0, 0, .35); }
.btn--ghost:hover { background: #fff; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); margin-top: var(--gap-body-btn); }
.link-arrow { font-weight: 700; font-size: var(--f-small); text-decoration: none; display: inline-flex; gap: .5em; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---- Header (band 0-65) ----------------------------------------------- */
.site-header { position: relative; z-index: 20; display: flex; align-items: center; gap: calc(28 * var(--u)); height: max(64px, var(--header-h)); padding-inline: calc(60 * var(--u)) calc(40 * var(--u)); background: var(--black); color: #fff; }
.site-header .brand { flex: none; display: block; width: max(54px, calc(47 * var(--u))); }
.site-header .brand img { width: 100%; height: auto; }
.nav { flex: 1; display: flex; align-items: center; gap: calc(24 * var(--u)); min-width: 0; }
.nav__links { display: flex; gap: calc(30 * var(--u)); margin-left: calc(50 * var(--u)); }
.nav__links a { font-size: var(--f-nav); text-decoration: none; padding-block: 6px; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav__links a[aria-current="page"] { border-bottom-color: #fff; }
.nav__links a:hover { border-bottom-color: rgba(255, 255, 255, .5); }
.nav__cta { margin-left: auto; min-height: max(36px, calc(25 * var(--u))); }
.social { display: flex; gap: calc(11 * var(--u)); align-items: center; }
.social a { display: grid; place-items: center; width: max(28px, calc(16 * var(--u))); height: max(28px, calc(16 * var(--u))); }
.social img { width: max(16px, calc(13 * var(--u))); height: auto; }
.site-header .script { position: absolute; right: calc(30 * var(--u)); top: calc(10 * var(--u)); width: max(92px, calc(96 * var(--u))); }
.nav__toggle { display: none; }

/* ---- Home hero: three panels (65-405) --------------------------------- */
.tri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(2 * var(--u)); background: #3a2a1a; }
.tri__panel { position: relative; min-height: max(calc(375 * var(--u)), min(calc(100svh - max(64px, var(--header-h))), calc(640 * var(--u)))); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 0 calc(18 * var(--u)) calc(16 * var(--u)); color: #fff; isolation: isolate; overflow: hidden; }
.tri__panel > img:not(.graffiti) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tri__panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.88)); }
.tri__panel .graffiti { position: relative; width: min(66%, max(170px, calc(260 * var(--u)))); height: auto; margin-bottom: calc(6 * var(--u)); transform: rotate(-4deg); }
.tri__panel .h3 { color: #fff; }
.tri__panel p { margin-top: calc(7 * var(--u)); font-size: var(--f-lede); line-height: 1.35; color: var(--on-dark); }
.tri__panel .btn { margin-top: calc(14 * var(--u)); }
.tri__panel .script { position: absolute; top: calc(30 * var(--u)); left: calc(22 * var(--u)); text-align: left; }
.tri__panel:nth-child(n+2) .script { left: auto; right: calc(18 * var(--u)); }

/* ---- Bands ------------------------------------------------------------ */
.band { position: relative; padding: var(--band-pt) var(--gut) var(--band-pb); }
.band--paper { background: var(--paper); }
.band--forest { background: var(--forest) radial-gradient(120% 140% at 0% 50%, #1D2D1F 0%, transparent 60%); }
.band--black { background: var(--black); }
.band--moss { background: var(--moss) radial-gradient(90% 160% at 85% 50%, #3A5235 0%, transparent 70%); }
.band--forest, .band--black, .band--moss { color: var(--on-dark); }

/* Intro: centred (406-518) */
.intro { text-align: center; padding-top: var(--intro-pt); padding-bottom: var(--intro-pb); }
.intro .lede { max-width: calc(470 * var(--u)); margin-inline: auto; }
.intro .h2 { margin-inline: auto; }

/* Split: copy left, a row of cards right (519-740) */
.split { display: grid; grid-template-columns: calc(270 * var(--u)) minmax(0, 1fr); gap: calc(30 * var(--u)); align-items: center; }
.split--wide { grid-template-columns: calc(225 * var(--u)) minmax(0, 1fr); }
.split__copy .script { position: absolute; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { position: relative; aspect-ratio: 129 / 150; overflow: hidden; background: #1b1b1b; color: #fff; isolation: isolate; }
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.85)); }
.card__label { position: absolute; left: calc(10 * var(--u)); right: calc(10 * var(--u)); bottom: calc(12 * var(--u)); font-size: var(--f-small); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25; }
.card__label::after { content: ""; display: block; width: calc(35 * var(--u)); height: 2px; margin-top: calc(6 * var(--u)); background: #E07A3C; }
.card--wide { aspect-ratio: 176 / 92; }
.card--wide .card__label { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-weight: 600; font-size: max(16px, calc(14 * var(--u))); }
.card--wide .card__label::after { display: none; }

/* Steps (741-870) */
.steps { display: grid; grid-template-columns: calc(200 * var(--u)) repeat(4, minmax(0, 1fr)); align-items: center; }
.steps__lead { padding-right: calc(20 * var(--u)); }
.step { position: relative; text-align: center; padding: calc(4 * var(--u)) calc(14 * var(--u)); border-left: 1px solid var(--line-paper); }
.on-dark .step { border-left-color: var(--line-dark); }
.step img { width: calc(30 * var(--u)); min-width: 26px; height: auto; margin: 0 auto calc(10 * var(--u)); }
.step h3 { font-family: var(--sans); font-size: var(--f-small); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.on-dark .step h3 { color: #fff; }
.step p { margin-top: calc(5 * var(--u)); font-size: var(--f-small); line-height: 1.45; }
.step + .step::before { content: "\2192"; position: absolute; left: calc(-6 * var(--u)); top: 50%; transform: translate(-50%, -50%); font-size: max(14px, calc(12 * var(--u))); color: var(--ink); background: var(--paper); padding: 2px 0; }
.on-dark .step + .step::before { color: #fff; background: transparent; }

/* Feature: copy over a photo, an aside panel (872-1104) */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) calc(237 * var(--u)); padding: 0; min-height: calc(232 * var(--u)); background: var(--black); }
.feature__main { position: relative; padding: var(--band-pt) var(--gut); isolation: isolate; display: flex; flex-direction: column; justify-content: center; }
.feature__main > img, .feature__main > .ph { position: absolute; inset: 0 0 0 auto; width: 70%; height: 100%; object-fit: cover; z-index: -2; }
.feature__main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--black) 34%, rgba(5,6,5,.55) 55%, rgba(5,6,5,.1)); }
.feature__main > :not(img):not(.ph) { max-width: calc(275 * var(--u)); }
.feature__aside { background: var(--forest) radial-gradient(100% 100% at 100% 0%, #24362A 0%, transparent 70%); padding: calc(24 * var(--u)) calc(38 * var(--u)) calc(24 * var(--u)) calc(38 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.event-date { font-family: var(--serif); font-weight: 600; font-size: calc(34 * var(--u)); line-height: 1; color: #fff; }
.event-name { font-family: var(--serif); font-weight: 500; font-size: max(17px, calc(15.5 * var(--u))); line-height: 1.1; text-transform: uppercase; color: #fff; margin-top: calc(6 * var(--u)); }
.ticks { margin-top: calc(12 * var(--u)); display: grid; gap: calc(7 * var(--u)); }
.ticks li { display: flex; gap: calc(10 * var(--u)); align-items: center; font-size: var(--f-small); }
.ticks img { width: max(14px, calc(11 * var(--u))); height: auto; flex: none; }
.ticks--2 { grid-template-columns: 1fr 1fr; column-gap: calc(18 * var(--u)); }
.feature__aside .btn { margin-top: calc(14 * var(--u)); align-self: flex-start; }

/* Dishes: six small cards (1105-1262) */
.dishes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.dish img, .dish .ph { width: 100%; aspect-ratio: 95 / 93; object-fit: cover; }
.dish h3 { margin-top: calc(7 * var(--u)); font-family: var(--sans); font-weight: 700; font-size: var(--f-small); color: var(--ink); }
.dish p { font-size: var(--f-small); line-height: 1.35; }
.on-dark .dish h3 { color: #fff; }

/* Meet the chef (1263-1406) */
.meet { display: grid; grid-template-columns: calc(215 * var(--u)) minmax(0, 1fr); padding: 0; background: var(--black); color: var(--on-dark); }
.meet__photo { position: relative; min-height: calc(200 * var(--u)); }
.meet__photo > img, .meet__photo > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Tony's headshot: keep his whole head in a wide frame. */
.meet__photo > img { object-position: center 18%; }
.meet__copy { padding: calc(20 * var(--u)) var(--gut) calc(20 * var(--u)) calc(28 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.meet__copy .copy { max-width: calc(280 * var(--u)); }
.meet__copy .link-arrow { margin-top: calc(10 * var(--u)); align-self: flex-start; color: #fff; }

/* Sign-up (1407-1527) */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) calc(320 * var(--u)); gap: calc(40 * var(--u)); align-items: center; padding-block: calc(22 * var(--u)); }
.signup form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(8 * var(--u)); }
.signup .note { grid-column: 1 / -1; font-size: var(--f-small); color: var(--muted-dark); }

/* ---- Inner-page hero -------------------------------------------------- */
.page-hero { position: relative; min-height: calc(265 * var(--u)); padding: calc(40 * var(--u)) var(--gut) calc(30 * var(--u)); display: flex; flex-direction: column; justify-content: center; color: #fff; isolation: isolate; background: var(--black); }
.page-hero > img, .page-hero > .ph { position: absolute; inset: 0 0 0 auto; width: 72%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--black) 30%, rgba(5,6,5,.6) 50%, rgba(5,6,5,.05) 80%); }
.page-hero > :not(img):not(.ph):not(.script) { max-width: calc(400 * var(--u)); }
.page-hero .h1 { color: #fff; }
.page-hero .sub { font-family: var(--serif); font-weight: 600; font-size: var(--f-h2s); line-height: 1.2; letter-spacing: var(--track-h); color: #fff; margin-top: calc(6 * var(--u)); }
.page-hero .lede { color: var(--on-dark); }
.page-hero .script { position: absolute; right: calc(28 * var(--u)); top: calc(40 * var(--u)); }

/* ---- Icon row (dark band of four or six) ------------------------------ */
.icons { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: calc(18 * var(--u)); }
.icons li { text-align: center; padding: 0 calc(12 * var(--u)); border-left: 1px solid var(--line-dark); }
.icons li:first-child { border-left: 0; }
.icons img { width: calc(24 * var(--u)); min-width: 24px; margin: 0 auto calc(10 * var(--u)); }
.icons h3 { font-family: var(--serif); font-weight: 500; font-size: max(16px, calc(12.5 * var(--u))); color: #fff; }
.icons p { margin-top: calc(4 * var(--u)); font-size: var(--f-small); line-height: 1.4; }

/* ---- FAQ -------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: calc(235 * var(--u)) minmax(0, 1fr); gap: calc(40 * var(--u)); align-items: start; }
.faq__list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--u)) calc(14 * var(--u)); }
.faq details { border: 1px solid var(--line-dark); }
.faq summary { list-style: none; cursor: pointer; display: flex; gap: calc(12 * var(--u)); align-items: center; padding: calc(3 * var(--u)) calc(12 * var(--u)); min-height: 44px; font-size: var(--f-small); color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-size: 1.4em; line-height: 1; color: var(--gold); width: 1em; flex: none; }
.faq details[open] summary::before { content: "\2212"; }
.faq details p { padding: 0 calc(12 * var(--u)) calc(10 * var(--u)) calc(34 * var(--u)); font-size: var(--f-small); }

/* ---- Inquiry: photo, copy, form --------------------------------------- */
.inquiry { display: grid; grid-template-columns: calc(310 * var(--u)) calc(255 * var(--u)) minmax(0, 1fr); padding: 0; background: var(--paper); }
.inquiry__photo { position: relative; min-height: calc(175 * var(--u)); background: var(--black); }
.inquiry__photo > img, .inquiry__photo > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A photo with Tony in it keeps his head in frame. */
.inquiry__photo > img.top { object-position: center 15%; }
.inquiry__copy { padding: calc(24 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.inquiry__form { background: var(--black); padding: calc(12 * var(--u)) var(--gut) calc(12 * var(--u)) calc(14 * var(--u)); display: flex; align-items: center; }
.inquiry--light .inquiry__form { background: var(--paper); }
.facts { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(18 * var(--u)); margin-top: calc(14 * var(--u)); font-size: var(--f-small); }
.facts li { display: flex; align-items: center; gap: calc(7 * var(--u)); }
.facts img { width: max(14px, calc(11 * var(--u))); }

/* Forms (assets/forms.js; api/contact.js) */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); width: 100%; }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 4px; }
.field label { font-size: var(--f-small); color: var(--on-dark); }
.inquiry--light .field label, .band--paper .field label { color: var(--body); }
.input { width: 100%; min-height: 44px; padding: 8px 12px; background: transparent; border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-size: max(15px, calc(9.5 * var(--u))); border-radius: 0; }
.inquiry--light .input, .band--paper .input { border-color: #B9B1A3; color: var(--ink); background: #fff; }
textarea.input { min-height: calc(70 * var(--u)); resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.inquiry--light select.input { background-color: #fff; }
select.input option { color: var(--ink); }
.input::placeholder { color: rgba(255, 255, 255, .62); }
.inquiry--light .input::placeholder, .band--paper .input::placeholder { color: #77706A; }
.form .btn { width: 100%; }
.form-status { grid-column: 1 / -1; font-size: var(--f-small); min-height: 1.4em; }
.form-status[data-state="error"] { color: #F2A27C; }
.inquiry--light .form-status[data-state="error"], .band--paper .form-status[data-state="error"] { color: #9A2E0B; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Gallery grid ----------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); }
.filters button { min-height: 44px; padding: 0 calc(18 * var(--u)); background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: var(--f-small); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--rust); border-color: var(--rust); }
.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(3 * var(--u)); margin-top: calc(22 * var(--u)); }
.gallery figure { position: relative; aspect-ratio: 176 / 139; overflow: hidden; background: #191919; }
.gallery img, .gallery .ph { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { position: absolute; left: calc(10 * var(--u)); bottom: calc(8 * var(--u)); font-size: var(--f-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.gallery [hidden] { display: none; }

/* ---- Placeholder: a correctly sized box naming the missing file ------- */
.ph { display: grid; place-items: center; text-align: center; padding: 12px; background: repeating-linear-gradient(135deg, #24221F 0 14px, #2B2925 14px 28px); color: #D9D1C2; font-size: 13px; line-height: 1.35; }
.ph span { max-width: 22ch; border: 1px dashed rgba(255,255,255,.35); padding: 8px 10px; }

/* ---- Footer (1528-1683) ----------------------------------------------- */
.site-footer { background: var(--black); color: #fff; padding: calc(14 * var(--u)) var(--gut) calc(12 * var(--u)) calc(56 * var(--u)); }
.site-footer__row { display: flex; align-items: center; gap: calc(30 * var(--u)); }
.site-footer__brand { display: flex; align-items: center; gap: calc(20 * var(--u)); text-decoration: none; }
.site-footer__brand img { width: max(54px, calc(50 * var(--u))); }
.site-footer__brand .script { position: static; transform: rotate(-5deg); width: max(112px, calc(115 * var(--u))); }
.site-footer__nav { display: flex; gap: calc(28 * var(--u)); margin-left: calc(50 * var(--u)); flex-wrap: wrap; }
.site-footer__nav a { font-size: var(--f-small); text-decoration: none; padding-block: 8px; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer .social { margin-left: auto; }
.site-footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: calc(12 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px solid var(--line-dark); font-size: var(--f-small); color: var(--muted-dark); }
.site-footer__legal a { color: inherit; }
.credit a { color: inherit; }

/* ---- Plain page (privacy, 404) ---------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { font-family: var(--serif); font-weight: 600; font-size: max(20px, calc(16 * var(--u))); color: var(--ink); margin: 1.6em 0 .4em; }
.prose p, .prose li { font-size: var(--f-body); line-height: 1.6; }
.prose p + p { margin-top: .8em; }
.prose ul { list-style: disc; padding-left: 1.2em; }

/* =======================================================================
   Below 1024: the nav folds into a menu; bands keep their columns.
   Below 768: every split stacks (MOBILE.md), the tri-panels stack.
   ======================================================================= */
@media (max-width: 1023px) {
  .nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 0; cursor: pointer; order: 3; }
  .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { display: block; width: 22px; height: 2px; background: #fff; position: relative; content: ""; }
  .nav__toggle span::before { position: absolute; top: -7px; }
  .nav__toggle span::after { position: absolute; top: 7px; }
  .nav { flex: 1; justify-content: flex-end; gap: 12px; }
  .nav nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--black); border-top: 1px solid var(--line-dark); display: none; }
  .site-header.is-open nav { display: block; }
  .nav__links { flex-direction: column; gap: 0; margin: 0; padding: 8px 20px 16px; }
  .nav__links a { display: block; padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--line-dark); }
  .nav__links a[aria-current="page"] { border-bottom-color: var(--line-dark); color: var(--gold); }
  .nav__cta { margin-left: 0; order: 1; }
  .site-header .social { order: 2; }
  .site-header .script { display: none; }
}

@media (max-width: 767px) {
  :root { --gut: 20px; --band-pt: 40px; --band-pb: 40px; --intro-pt: 36px; --intro-pb: 36px; --f-brush: 64px; }
  .site-header { padding-inline: 16px; }
  .site-header .social { display: none; }
  .tri { grid-template-columns: 1fr; }
  .tri__panel { min-height: min(125vw, 560px); }
  .tri__panel .graffiti { width: 62%; }
  .split, .split--wide, .faq, .signup, .feature, .meet, .inquiry { grid-template-columns: 1fr; }
  .split { gap: 24px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .steps__lead { grid-column: 1 / -1; padding-right: 0; }
  .step { border-left: 0; padding: 0 8px; }
  .step + .step::before { display: none; }
  .feature__main { padding: 40px var(--gut) calc(max(240px, 52vw) - 20px); }
  .feature__main > img, .feature__main > .ph { inset: auto 0 0 0; width: 100%; height: max(240px, 52vw); }
  .feature__main::after { background: linear-gradient(180deg, var(--black) 55%, rgba(5,6,5,.2) 80%); }
  .feature__main > :not(img):not(.ph) { max-width: none; }
  .feature__aside { padding: 32px var(--gut); }
  .event-date { font-size: 40px; }
  .dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .meet__photo { min-height: 0; aspect-ratio: 1; max-height: 520px; }
  .meet__copy { padding: 32px var(--gut); }
  .signup form { grid-template-columns: 1fr; }
  .page-hero { min-height: 0; padding: 48px var(--gut) 240px; }
  .page-hero > img, .page-hero > .ph { inset: auto 0 0 0; width: 100%; height: 240px; }
  .page-hero::after { background: linear-gradient(180deg, var(--black) 58%, rgba(5,6,5,.15) 85%); }
  .page-hero > :not(img):not(.ph):not(.script) { max-width: none; }
  .page-hero .script, .split__copy .script, .tri__panel .script { display: none; }
  .icons { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .icons li { border-left: 0; }
  .faq__list { grid-template-columns: 1fr; }
  .inquiry__photo { min-height: 260px; }
  .inquiry__copy { padding: 36px var(--gut) 12px; }
  .inquiry__form { padding: 20px var(--gut) 40px; }
  .form { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { padding: 36px var(--gut); }
  .site-footer__row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .site-footer__nav { margin-left: 0; gap: 4px 20px; }
  .site-footer .social { margin-left: 0; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Added with Private Chef (mockup private-chef-935) ---------------- */
/* A band whose heading sits left and its copy right (565-650) */
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) calc(330 * var(--u)); gap: calc(40 * var(--u)); align-items: end; margin-right: calc(60 * var(--u)); }
.band__script { position: absolute; right: calc(22 * var(--u)); top: calc(10 * var(--u)); }
/* Menu styles: four photographs with a serif title (785-950) */
.styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
.styles img, .styles .ph { width: 100%; aspect-ratio: 138 / 92; object-fit: cover; }
.styles h3 { margin-top: calc(6 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: max(16px, calc(12.5 * var(--u))); color: var(--ink); }
.on-dark .styles h3 { color: #fff; }
.styles p { margin-top: calc(2 * var(--u)); font-size: var(--f-small); line-height: 1.35; }
/* Photo strip (1102-1225) */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
.strip img, .strip .ph { width: 100%; aspect-ratio: 114 / 100; object-fit: cover; }
/* Numbered steps on dark (962-1092) */
.steps--numbered .step { display: grid; justify-items: center; }
.steps--numbered .step img { width: calc(22 * var(--u)); min-width: 22px; margin-bottom: calc(6 * var(--u)); }
.steps--numbered .step + .step::before { top: 62%; }

@media (max-width: 767px) {
  .band-head { grid-template-columns: 1fr; margin-right: 0; gap: 12px; }
  .band__script { display: none; }
  .styles, .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
}

/* ---- Added with Menus (mockup menus-935) ------------------------------ */
.h1--m { font-size: max(32px, calc(39 * var(--u))); line-height: 1.02; }          /* "Bring People Together." 395 drawn */
.approach { display: grid; grid-template-columns: minmax(0, 1fr) calc(300 * var(--u)); gap: calc(30 * var(--u)); align-items: center; margin: 0 calc(70 * var(--u)) 0 calc(32 * var(--u)); }
.approach > p { border-left: 1px solid var(--line-paper); padding-left: calc(30 * var(--u)); }
.band-head--3 { grid-template-columns: minmax(0, 1fr) calc(320 * var(--u)) auto; margin-right: 0; margin-bottom: calc(16 * var(--u)); }
.band-head .link-arrow { color: #fff; justify-self: end; }
.mstyles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.mstyles > li { border: 1px solid var(--line-dark); background: rgba(0, 0, 0, .35); }
.mstyles > li > img, .mstyles > li > .ph { width: 100%; aspect-ratio: 209 / 100; object-fit: cover; }
.mstyles > li > div { padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); }
.mstyles h3 { font-family: var(--serif); font-weight: 500; font-size: max(18px, calc(16 * var(--u))); color: #fff; }
.mstyles p { margin-top: calc(4 * var(--u)); font-size: var(--f-small); line-height: 1.4; }
.dots { margin-top: calc(10 * var(--u)); display: grid; gap: calc(3 * var(--u)); font-size: var(--f-small); }
.dots li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #E07A3C; margin-right: calc(12 * var(--u)); vertical-align: middle; }
.kicker--small { letter-spacing: .18em; font-size: max(10px, calc(6.4 * var(--u))); }
.dishes--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: calc(5 * var(--u)); }
.dishes--8 .dish img, .dishes--8 .dish .ph { aspect-ratio: 77 / 70; }
.dishes--8 .dish h3 { text-align: center; font-weight: 600; }
.center-copy { text-align: center; }
.guests { display: grid; grid-template-columns: calc(250 * var(--u)) calc(263 * var(--u)) minmax(0, 1fr); gap: calc(30 * var(--u)); align-items: center; }
.guests__photo { width: 100%; aspect-ratio: 263 / 140; object-fit: cover; }
.checks { display: grid; gap: calc(7 * var(--u)); font-size: var(--f-small); }
.checks li::before { content: "\2713"; color: var(--rust); font-weight: 800; margin-right: calc(14 * var(--u)); }
.band--rule { border-top: 1px solid var(--line-paper); }

@media (max-width: 767px) {
  .approach, .band-head--3, .guests { grid-template-columns: 1fr; margin: 0; }
  .approach > p { border-left: 0; padding-left: 0; }
  .band-head .link-arrow { justify-self: start; }
  .mstyles { grid-template-columns: 1fr; }
  .dishes--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
}

/* ---- Added with Supper Club (mockup supper-club-935) ------------------ */
.lede--wide { max-width: calc(560 * var(--u)) !important; }
/* Upcoming event: photo left, the event panel right (441-660) */
.event { display: grid; grid-template-columns: calc(565 * var(--u)) minmax(0, 1fr); background: var(--forest); }
.event__photo { position: relative; min-height: calc(219 * var(--u)); }
.event__photo > img, .event__photo > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event__photo .script { position: absolute; left: calc(20 * var(--u)); top: calc(20 * var(--u)); }
.event__aside { padding: calc(18 * var(--u)) var(--gut) calc(18 * var(--u)) calc(30 * var(--u)); display: flex; flex-direction: column; justify-content: center; background: var(--forest) radial-gradient(100% 120% at 100% 0%, #24362A, transparent 70%); }
.intro .icons { margin-top: calc(22 * var(--u)); text-align: center; }
/* Sample courses (1130-1285) */
.courses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(7 * var(--u)); }
.courses img, .courses .ph { width: 100%; aspect-ratio: 129 / 78; object-fit: cover; }
.course__k { display: block; margin-top: calc(6 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: max(14px, calc(10 * var(--u))); color: var(--ink); }
.courses h3 { font-family: var(--serif); font-weight: 600; font-size: max(15px, calc(10.5 * var(--u))); color: var(--ink); }
.courses p { margin-top: 2px; font-size: var(--f-small); line-height: 1.3; }
/* Join: photo, then copy and form together (1397-1580) */
.inquiry--2 { grid-template-columns: calc(355 * var(--u)) minmax(0, 1fr); }
.inquiry--2 .inquiry__copy { padding-right: var(--gut); }
.form--join { grid-template-columns: 1fr 1fr calc(150 * var(--u)); margin-top: calc(12 * var(--u)); align-items: end; }
.form--join .full { grid-column: 1 / 3; }
.form--join .join__side { grid-column: 3; grid-row: 1 / span 3; align-self: start; display: grid; gap: calc(14 * var(--u)); text-align: center; }
.join__note { font-size: var(--f-small); color: var(--body); }
.form--join .form-status { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .event, .inquiry--2 { grid-template-columns: 1fr; }
  .event__photo { min-height: 260px; }
  .event__photo .script { display: none; }
  .event__aside { padding: 32px var(--gut); }
  .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .form--join { grid-template-columns: 1fr; }
  .form--join .full, .form--join .join__side { grid-column: 1; grid-row: auto; }
}

/* ---- Added with Gallery (mockup gallery-935) -------------------------- */
.mosaic { display: grid; grid-template-columns: 1.7fr 1fr 1.1fr; grid-template-rows: 1fr 1fr; gap: calc(6 * var(--u)); height: calc(160 * var(--u)); }
.mosaic > :first-child { grid-row: 1 / 3; }
.mosaic > :last-child { grid-column: 3; grid-row: 1 / 3; }
.mosaic img, .mosaic .ph { width: 100%; height: 100%; object-fit: cover; }
.strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip--3 img, .strip--3 .ph { aspect-ratio: 155 / 128; }
.strip--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(2 * var(--u)); }
.strip--6 img, .strip--6 .ph { aspect-ratio: 91 / 95; }
@media (max-width: 767px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .mosaic > * { aspect-ratio: 1; }
  .mosaic > :first-child, .mosaic > :last-child { grid-row: auto; grid-column: auto; }
  .strip--3 { grid-template-columns: 1fr; }
  .strip--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Added with About (mockup about-935) ------------------------------ */
.sub--s { font-size: max(18px, calc(19 * var(--u))) !important; }
.story { display: grid; grid-template-columns: calc(305 * var(--u)) calc(250 * var(--u)) minmax(0, 1fr); min-height: calc(263 * var(--u)); background: var(--black); }
.story__copy { padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)) var(--gut); }
.story__copy .copy { margin-top: calc(8 * var(--u)); }
.story__photo { position: relative; border-left: 1px solid rgba(255,255,255,.1); }
.story__photo > img, .story__photo > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(18 * var(--u)); text-align: center; }
.journey > li > img:first-child, .journey .ph { width: 100%; aspect-ratio: 135 / 83; object-fit: cover; }
.journey__icon { width: max(22px, calc(22 * var(--u))); margin: calc(8 * var(--u)) auto calc(4 * var(--u)); }
.journey h3 { font-family: var(--serif); font-weight: 600; font-size: max(15px, calc(11.5 * var(--u))); color: var(--ink); }
.journey p { margin-top: 3px; font-size: var(--f-small); line-height: 1.35; }
.mosaic--5 { grid-template-columns: 1.15fr 1fr 1fr .85fr .9fr; height: calc(170 * var(--u)); }
.mosaic--5 > :first-child { grid-row: 1 / 3; }
.mosaic--5 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.mosaic--5 > :nth-child(3) { grid-column: 2 / 4; grid-row: 2; }
.mosaic--5 > :nth-child(4) { grid-column: 4; grid-row: 1 / 3; }
.mosaic--5 > :last-child { grid-column: 5; grid-row: 1 / 3; }
.expect { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(26 * var(--u)); }
.expect > li > img, .expect .ph { width: 100%; aspect-ratio: 128 / 60; object-fit: cover; }
.expect h3 { display: flex; align-items: center; gap: 8px; margin-top: calc(7 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: max(14px, calc(10 * var(--u))); color: var(--ink); }
.expect h3 img { width: max(16px, calc(13 * var(--u))); }
.expect p { margin-top: 3px; font-size: var(--f-small); line-height: 1.35; }
.credit { max-width: 1200px; margin: 0 auto; background: var(--black); color: var(--muted-dark); text-align: center; font-size: var(--f-small); padding: 14px 0 0; }

@media (max-width: 767px) {
  .story { grid-template-columns: 1fr; }
  .story__copy { padding: 40px var(--gut); }
  .story__photo { min-height: 280px; border-left: 0; }
  .journey, .expect { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .mosaic--5 { grid-template-columns: 1fr 1fr; height: auto; }
  .mosaic--5 > * { grid-row: auto !important; grid-column: auto !important; aspect-ratio: 1; }
  .mosaic--5 > :last-child { grid-column: 1 / -1 !important; aspect-ratio: 2; }
}

/* ---- Added with Contact (mockup contact-935) -------------------------- */
.reach { display: grid; grid-template-columns: calc(265 * var(--u)) minmax(0, 1fr); gap: calc(125 * var(--u)); align-items: start; }
.ways { margin-top: calc(14 * var(--u)); display: grid; gap: calc(12 * var(--u)); }
.ways li { display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr); gap: calc(22 * var(--u)); align-items: start; }
.ways img { width: max(24px, calc(26 * var(--u))); }
.ways h3 { font-family: var(--serif); font-weight: 500; font-size: max(16px, calc(12 * var(--u))); color: #fff; }
.ways p { font-size: var(--f-small); line-height: 1.35; }
.ways__rule { border-top: 1px solid var(--line-dark); padding-top: calc(12 * var(--u)); }
.card-form { background: var(--paper); color: var(--body); padding: calc(24 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u)); }
.card-form .kicker, .card-form .h2s { color: var(--ink); }
.card-form .copy { color: var(--body); margin-top: calc(6 * var(--u)); }
.card-form .form { margin-top: calc(14 * var(--u)); }
.card-form .field label { color: var(--body); }
.card-form .input { border-color: #B9B1A3; color: var(--ink); background: #fff; }
.card-form .input::placeholder { color: #77706A; }
.card-form .form-status[data-state="error"] { color: #9A2E0B; }
.band--line { border-top: 1px solid var(--line-dark); }
.icons--numbered li { display: grid; justify-items: center; align-content: start; }
.icons--numbered img { width: max(26px, calc(28 * var(--u))); margin: 0 auto calc(8 * var(--u)); }
.faq-band { display: grid; grid-template-columns: calc(300 * var(--u)) minmax(0, 1fr); background: var(--paper); }
.faq-band__photo { position: relative; min-height: calc(145 * var(--u)); background: var(--black); }
.faq-band__photo > .ph, .faq-band__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faq-band__photo .script { position: absolute; left: calc(20 * var(--u)); top: calc(40 * var(--u)); }
.faq-band__list { display: grid; grid-template-columns: calc(220 * var(--u)) minmax(0, 1fr); gap: calc(26 * var(--u)); align-items: center; padding: calc(16 * var(--u)) var(--gut) calc(16 * var(--u)) calc(26 * var(--u)); }
.faq-lines details { border-bottom: 1px solid var(--line-paper); }
.faq-lines summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: pointer; font-size: var(--f-small); font-weight: 600; color: var(--ink); }
.faq-lines summary::-webkit-details-marker { display: none; }
.faq-lines summary::after { content: "+"; font-size: 1.4em; font-weight: 400; }
.faq-lines details[open] summary::after { content: "\2212"; }
.faq-lines p { padding-bottom: 10px; font-size: var(--f-small); }
.signup--contact { grid-template-columns: minmax(0, 1fr) calc(350 * var(--u)); margin-right: calc(60 * var(--u)); }
.signup--contact form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.signup__h { font-family: var(--serif); font-weight: 600; font-size: max(17px, calc(13 * var(--u))); color: #fff; }

@media (max-width: 767px) {
  .reach, .faq-band, .faq-band__list, .signup--contact { grid-template-columns: 1fr; gap: 28px; margin-right: 0; }
  .card-form { padding: 28px 20px; }
  .faq-band__photo { min-height: 260px; }
  .faq-band__photo .script { display: none; }
  .faq-band__list { padding: 36px var(--gut); }
  .icons--numbered { grid-template-columns: 1fr 1fr; }
  .signup--contact form { grid-template-columns: 1fr; }
}

/* ---- Fixes from the first full render (9 Oct 2026) -------------------- */
/* The header's script sits clear of the social icons (mockup x 825-895). */
.site-header { padding-right: calc(122 * var(--u)); }
.site-header .script { right: calc(22 * var(--u)); top: calc(10 * var(--u)); }
/* A third social icon (Instagram, 12 Oct 2026) needs 27u the mockup's two-icon
   header never had, and the nav was already full: the icons ran under the
   script. Brand-to-links, nav gap and icon gap each give a little back. */
.nav { gap: calc(16 * var(--u)); }
.nav__links { margin-left: calc(8 * var(--u)); }
.site-header .social { gap: calc(7 * var(--u)); }
/* Kickers and copy on a photo hero are light. */
.page-hero .kicker { color: #fff; }
/* The forms are drawn with their label inside the field: the label stays for
   screen readers, the placeholder carries it on screen. */
.form .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form .field { position: relative; }
.form .input { min-height: max(44px, calc(29 * var(--u))); }
/* Narrow-column headings: drawn at 24 ("Four Simple Steps" 186; "Inquire
   About Your" 214) where the band h2s are 28. */
.steps__lead .h2s, .inquiry__copy .h2s { font-size: max(24px, calc(24 * var(--u))); }
@media (min-width: 768px) { .steps { grid-template-columns: calc(220 * var(--u)) repeat(4, minmax(0, 1fr)); } }

.page-hero--404 .brush { display: block; margin-bottom: max(28px, calc(30 * var(--u))); }
.prose .h2s { margin-bottom: 4px; }

/* Below 768 a max-width written in design units is a few hundred pixels at
   most: every text measure goes back to the column. */
@media (max-width: 767px) {
  .intro .lede, .lede--wide, .meet__copy .copy, .page-hero > :not(img):not(.ph):not(.script) { max-width: none !important; }
  .site-header { padding-right: 16px; }
}

/* QA, 9 Oct 2026 */
.join__note em { font-style: normal; }
.ticks li { color: var(--on-dark); }
.gallery figure::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.92) 70%); pointer-events: none; }
.gallery figcaption { z-index: 1; }
.tri__panel::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 18%, rgba(0,0,0,.66) 52%, rgba(0,0,0,.9)); }
.tri__panel .h3, .tri__panel p, .tri__panel .btn { position: relative; z-index: 1; }

/* =======================================================================
   Tablet, 768-1023 (ChatGPT tablet review, 9 Oct 2026): the desktop column
   counts squeeze copy into one-word lines here. Intro copy goes above its
   grid, four-up becomes two-by-two, six-up three-by-two, forms one column.
   ======================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header { padding-inline: 32px; gap: 18px; }
  .nav { justify-content: flex-start; }
  .nav__cta { margin-left: auto; order: 1; }
  .site-header .social { order: 2; }
  .nav__toggle { margin-left: 4px; order: 3; }
  .split, .split--wide, .faq, .reach { grid-template-columns: 1fr; gap: 24px; }
  .band-head, .band-head--3, .approach { grid-template-columns: 1fr; gap: 12px; margin: 0; }
  .approach > p { border-left: 0; padding-left: 0; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .steps__lead { grid-column: 1 / -1; }
  .step { border-left: 0; }
  .step + .step::before { display: none; }
  .icons { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .icons[style*="--n: 4"], .icons:not([style]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icons li { border-left: 0; }
  .mstyles, .journey, .expect, .styles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .courses { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .story { grid-template-columns: 40% 60%; }
  .story__photo:nth-child(2) { display: none; }
  .inquiry, .inquiry--2 { grid-template-columns: 40% 60%; }
  .inquiry__form { grid-column: 1 / -1; padding: 24px 32px 32px; }
  .form, .form--join { grid-template-columns: 1fr; }
  .form--join .full, .form--join .join__side { grid-column: 1; grid-row: auto; }
  .faq-band { grid-template-columns: 40% 60%; }
  .faq-band__list { grid-template-columns: 1fr; gap: 16px; }
  .faq__list { grid-template-columns: 1fr; }
  .signup, .signup--contact { grid-template-columns: 1fr; gap: 20px; margin-right: 0; }
  .site-footer__row { flex-wrap: wrap; row-gap: 14px; }
  .site-footer__nav { order: 3; width: 100%; margin-left: 0; gap: 4px 24px; }
  .band__script, .page-hero .script { display: none; }
  .page-hero::after { background: linear-gradient(90deg, var(--black) 40%, rgba(5,6,5,.7) 62%, rgba(5,6,5,.1) 90%); }
}
.todo { outline-width: 1px; }

/* The script notes need open space beside them; below 1100 there is none. */
@media (max-width: 1100px) {
  .tri__panel .script, .site-header .script, .band__script, .event__photo .script, .faq-band__photo .script { display: none; }
}
/* Phone heroes: the photograph is a 3:2 band under the copy, not a strip. */
@media (max-width: 767px) {
  .page-hero { padding-bottom: calc(66vw + 24px); }
  .page-hero > img, .page-hero > .ph { height: 66vw; }
}

/* Phone (ChatGPT mobile review, 9 Oct 2026) */
@media (max-width: 767px) {
  .site-header { gap: 20px; padding-inline: 16px 8px; }
  .site-header .brand { min-height: 44px; display: flex; align-items: center; }
  .nav__toggle { width: 48px; height: 48px; }
  .nav.is-open nav, .site-header.is-open nav { padding-bottom: 8px; }
  .page-hero { padding-top: 28px; }
  .page-hero .btn-row, .feature__main .btn-row, .event__aside .btn-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .page-hero .btn-row .btn, .feature__main .btn-row .btn, .event__aside .btn-row .btn { width: 100%; }
  .page-hero .sub { margin-top: 10px; }
  .journey, .expect, .styles, .courses, .mstyles { grid-template-columns: 1fr; row-gap: 26px; }
  .journey > li > img:first-child, .journey .ph, .expect > li > img, .expect .ph, .styles img, .styles .ph, .courses img, .courses .ph { aspect-ratio: 16 / 9; }
  .icons li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .icons { row-gap: 32px; }
  .story__photo { min-height: 240px; }
  .copy + .copy { margin-top: 14px; }
  .step p, .icons p, .dish p, .styles p, .journey p, .expect p, .courses p { font-size: 14px; }
  .faq summary, .faq-lines summary, .field label { font-size: 15px; }
  .site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; width: 100%; }
  .site-footer__nav a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .site-footer .social { gap: 6px; }
  .site-footer .social a { width: 44px; height: 44px; }
  .site-footer__legal { flex-direction: column; gap: 10px; }
}
@media (max-width: 767px) { .page-hero--404 .brush { margin-bottom: 44px; } }


/* Tags sit inside photo frames whose `> img` rules size the photograph: undo that for the tag */
img.script { width: max(120px, calc(160 * var(--u))); height: auto; object-fit: contain; z-index: 1; }
.tri__panel > img.script:not(.graffiti) { width: max(130px, calc(175 * var(--u))); height: auto; object-fit: contain; z-index: 1; }
img.band__script { width: max(110px, calc(135 * var(--u))); }
img.script:not(.script--ink) { filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .5)); }
/* Band tags only show above 1100px. Keep them off the copy: reserve the corner
   beside a two-column band, and move them where a band's layout leaves room */
@media (min-width: 1101px) {
  .band > img.band__script + :is(.band-head, .signup, .approach) { margin-right: calc(165 * var(--u)); }
  .intro > img.band__script { top: auto; bottom: calc(14 * var(--u)); }
  .band > img.band__script + .approach { margin-left: 0; grid-template-columns: minmax(0, 1fr) calc(270 * var(--u)); }
  .band > img.band__script:has(+ .split--wide) { right: auto; left: var(--gut); top: calc(8 * var(--u)); }
}