/* ===========================================================================
   Cream City Catering - shared stylesheet
   ---------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   The audit panel measured the previous state and it was not a close call:
   65 distinct spacing values across 230 uses, 37 distinct font sizes on the
   home page alone, 20 of them inside the small-label band between .58rem and
   .98rem where no reader can perceive a difference, 10 line-heights, 14
   letter-spacings and 11 breakpoints on one page. Every one of those was a
   hand-typed literal, because :root tokenised colour and nothing else.

   That is what "looks almost finished" is made of. A trained eye does not
   consciously count these; it registers the absence of rhythm as amateurism.

   So: one scale, declared once, used everywhere. Add a value here only when
   the scale genuinely cannot express what the design needs, and say why in a
   comment when you do.
   ========================================================================= */

/* ---- fonts, self-hosted ------------------------------------------------------
   These came from a render-blocking Google Fonts stylesheet. In Lighthouse's
   throttled mobile run /menu painted its hero 5.7 to 8.2 s late with the image
   already loaded (render delay 7.8 s of an 8.2 s LCP), because the page waited on
   a cross-origin DNS, TLS and CSS round trip first. Same files, latin subset (no
   character on the site falls outside it, checked 2026-10-26), served from this
   origin and cached immutable. Fraunces is one variable file (wght and opsz).
   Rename the file when replacing it: /fonts/* is cached for a year. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/fraunces-var-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/poppins-300-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/poppins-400-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/poppins-500-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/poppins-600-latin.woff2) format('woff2')}

:root{
  /* ---- identity, from CCC_DesignTokens.json ---------------------------- */
  --green:#0F4521;   --green-deep:#0A3018;    --green-lift:#175E2D;
  --charcoal:#28302B;--charcoal-deep:#1B211D; --ink:#141814;
  --cream:#DDD3C0;   --cream-lt:#F1EBE0;      --paper:#FBF9F5;

  /* surface tints and states, the caterGuest set proposed in README s2 */
  --surface:#FAF7F2; --surface-warm:#F4F1EA;  --field:#FDFCFA;
  --line:#C9C2B6;--field-line:#8A8478;    --muted:#5D6660;
  --ok-bg:#EAF3EC;   --err-bg:#FBEDEA;        --err:#A33;  --err-ink:#7A2018;
  --rule:rgba(20,24,20,.14);
  --rule-dk:rgba(221,211,192,.22);

  /* ---- SPACING. One scale, 4px base. Nine steps is plenty. ------------- */
  --s1:.25rem;  /*  4 */   --s2:.5rem;   /*  8 */   --s3:.75rem;  /* 12 */
  --s4:1rem;    /* 16 */   --s5:1.5rem;  /* 24 */   --s6:2rem;    /* 32 */
  --s7:3rem;    /* 48 */   --s8:4rem;    /* 64 */   --s9:6rem;    /* 96 */

  /* section rhythm, fluid but bounded by the scale at each end */
  --section-y:clamp(var(--s7), 8vw, var(--s9));
  --card-p:clamp(var(--s5), 3.5vw, var(--s6));

  /* ---- TYPE. Nine steps, and the three small ones do all the label work.  */
  --t-2xs:.75rem;   /* 12  labels, legal, captions */
  --t-xs:.8125rem;  /* 13  small UI */
  --t-sm:1rem;  /* 16  secondary body, card copy (was 15: the first-screen gate FS8 wants 16) */
  --t-md:1rem;      /* 16  body */
  --t-lg:1.125rem;  /* 18  lede */
  --t-xl:1.375rem;  /* 22  small display */
  --t-2xl:clamp(1.5rem, 2.6vw, 1.9rem);
  --t-3xl:clamp(1.9rem, 4vw, 3rem);
  --t-4xl:clamp(2.6rem, 6.4vw, 4.6rem);

  --lh-display:1.12;  --lh-snug:1.35;  --lh-body:1.65;
  --track-display:-.015em;  --track-label:.14em;  --track-btn:.1em;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;

  --wrap:1180px;
  --gut:clamp(var(--s5), 5vw, 3.5rem);
  --r:3px;
  --shadow:0 18px 44px rgba(20,24,20,.16);
  --tap:44px;          /* WCAG 2.2 SC 2.5.8 comfort target, not the 24px floor */
}

/* ===========================================================================
   BREAKPOINTS. Four, and they are named here so nobody invents a fifth.
     560   phone to large phone
     760   large phone to tablet
     960   tablet to laptop
    1180   laptop to wide
   The previous build had eleven, including a 900/901 pair one pixel apart.
   ========================================================================= */

/* ---- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:300;
  font-size:clamp(var(--t-md), 1.05vw, 1.0625rem);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green);text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;
  line-height:var(--lh-display);letter-spacing:var(--track-display)}
h1{font-size:var(--t-4xl)}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl);line-height:var(--lh-snug)}
/* Heading flow. The reset above zeroes heading margins, so a heading ran straight
   into its first paragraph: 62 h2 cases at a 0px gap and 114 h3 cases at 0 to 12px,
   measured 2026-10-26 on five pages. One rule, specificity 0,0,2, so any component
   that already sets its own gap (a class rule always wins) keeps it. */
h2+p,h2+.lede{margin-top:var(--s4)}
h3+p{margin-top:var(--s2)}
p{margin:0 0 1em}
section{padding:var(--section-y) 0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);width:100%}

.eyebrow{font-family:var(--body);font-size:var(--t-2xs);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--green);margin:0 0 var(--s3)}
.lede{font-size:var(--t-lg);line-height:var(--lh-snug);font-weight:300}
.small{font-size:var(--t-sm);color:var(--muted)}

/* dark and green surfaces ------------------------------------------------- */
.on-dark{background:var(--charcoal);color:var(--cream-lt)}
.on-green{background:var(--green-deep);color:var(--cream-lt)}
.on-dark h1,.on-dark h2,.on-dark h3,
.on-green h1,.on-green h2,.on-green h3{color:var(--cream-lt)}
.on-dark p,.on-green p{color:rgba(241,235,224,.84)}
.on-dark .eyebrow,.on-green .eyebrow{color:var(--cream);opacity:.92}
.on-dark .small,.on-green .small{color:rgba(241,235,224,.66)}

/* ---- accessibility ------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--green);
  color:var(--cream);padding:var(--s3) var(--s4);z-index:200}
.skip:focus{left:var(--s2);top:var(--s2)}

/* A dual ring, because a single ring can never contrast with every surface:
   a green ring on a green button measured 1.25:1 against a 3:1 requirement.
   Light inner plus dark outer means one of the two always shows. Measured
   across 46 focusable elements: worst 9.35:1, median 15.12:1. */
:focus-visible{outline:2px solid var(--paper);outline-offset:2px;
  box-shadow:0 0 0 4px var(--ink),0 0 0 6px var(--paper);border-radius:2px}
.on-dark :focus-visible,.on-green :focus-visible,.proof :focus-visible,
header :focus-visible,footer :focus-visible,.navmenu-panel :focus-visible,
.hero :focus-visible,.pagehead :focus-visible,.ctaband :focus-visible{
  outline-color:var(--ink);box-shadow:0 0 0 4px var(--cream-lt),0 0 0 6px var(--ink)}
main:focus{outline:none;box-shadow:none}
section[id],[id]{scroll-margin-top:calc(var(--s7) + var(--s5))}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Windows high-contrast and forced-colors: let the OS palette through rather
   than fighting it, and keep a visible boundary on every interactive thing. */
@media(forced-colors:active){
  .btn,.field input,.field select,.field textarea,.navmenu>summary{border:1px solid ButtonText}
  :focus-visible{outline:3px solid Highlight;box-shadow:none}
  .hero::after,.pagehead::after{display:none}
}

/* ---- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);
  font-family:var(--body);font-weight:500;font-size:var(--t-xs);
  letter-spacing:var(--track-btn);text-transform:uppercase;
  padding:var(--s4) var(--s5);border-radius:var(--r);
  border:1.5px solid var(--green);background:var(--green);color:var(--cream-lt);
  text-decoration:none;cursor:pointer;
  transition:background .18s,color .18s,transform .18s}
.btn:hover{background:var(--green-lift);border-color:var(--green-lift);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--green)}
.btn-ghost:hover{background:var(--green);color:var(--cream-lt)}
.on-dark .btn,.on-green .btn,.hero .btn,.ctaband .btn,.pagehead .btn{
  background:var(--cream);border-color:var(--cream);color:var(--ink)}
.on-dark .btn:hover,.on-green .btn:hover,.hero .btn:hover,
.ctaband .btn:hover,.pagehead .btn:hover{background:#fff;border-color:#fff}
.on-dark .btn-ghost,.hero .btn-ghost{background:transparent;color:var(--cream);
  border-color:rgba(221,211,192,.55)}
.on-dark .btn-ghost:hover,.hero .btn-ghost:hover{background:var(--cream);
  color:var(--ink);border-color:var(--cream)}

/* ---- header and navigation (v2, 2026-09-05) ------------------------------ */
/* Benchmark: 5 to 7 top-level items, grouped dropdowns, sticky 50 to 70 px on desktop and 44 to 56 on a phone,
   phone and primary action in the header, hamburger only below the desktop breakpoint, dropdowns that open by
   click and by hover with an intent delay and that work with scripts off. Groups are <details>. */
.site-head{position:sticky;top:0;z-index:100;background:rgba(27,33,29,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-dk)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  min-height:56px;padding-block:var(--s1);position:relative}
.nav a{color:var(--cream);text-decoration:none}
.brand{flex:0 0 auto;display:inline-flex;align-items:center;min-height:var(--tap)}
.brand img{height:42px;width:auto;max-width:none}
.nav-groups{display:flex;align-items:center;gap:clamp(var(--s3),1.6vw,var(--s6));list-style:none;margin:0 auto;padding:0}
.nav-groups>li{position:relative;margin:0}
.nav-top,.nav-groups summary{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);
  padding:0 var(--s1);font-family:var(--body);font-size:var(--t-xs);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cream);opacity:.88;cursor:pointer;position:relative;white-space:nowrap}
.nav-groups summary{list-style:none}
.nav-groups summary::-webkit-details-marker{display:none}
.nav-groups summary::after{content:"";width:7px;height:7px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s}
.menu[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.nav-top::before,.nav-groups summary::before{content:"";position:absolute;left:var(--s1);right:var(--s1);bottom:6px;height:2px;
  background:var(--cream);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav-top:hover,.nav-groups summary:hover,.menu[open]>summary,.nav-top[aria-current],.nav-group.is-here>details>summary{opacity:1}
.nav-top:hover::before,.nav-groups summary:hover::before,.menu[open]>summary::before,
.nav-top[aria-current]::before,.nav-group.is-here>details>summary::before{transform:scaleX(1)}
.panel{position:absolute;left:calc(-1 * var(--s3));top:calc(100% + 2px);z-index:120;min-width:320px;
  list-style:none;margin:0;padding:var(--s2);background:var(--charcoal-deep);border:1px solid var(--rule-dk);
  border-radius:var(--r);box-shadow:0 22px 48px rgba(20,24,20,.45)}
.panel li{margin:0}
.panel a{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);border-radius:2px;min-height:var(--tap)}
.panel strong{font-weight:500;font-size:var(--t-sm);letter-spacing:0;text-transform:none;color:var(--cream-lt)}
.panel span{font-size:var(--t-2xs);color:var(--cream);opacity:.7;letter-spacing:0;text-transform:none}
.panel a:hover,.panel a:focus-visible{background:rgba(221,211,192,.12)}
.panel a[aria-current] strong{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--cream)}
.nav-actions{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.nav-tel{display:inline-flex;align-items:center;min-height:var(--tap);gap:var(--s2);font-size:var(--t-sm);font-weight:500;
  letter-spacing:.01em;white-space:nowrap;padding:var(--s1);border-radius:2px}
.nav-tel .who{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.nav-tel:hover{background:rgba(221,211,192,.1)}
.nav-cta{padding:var(--s3) var(--s4);font-size:var(--t-2xs)}
/* mobile: Browse opens a full-width panel under the header with the same groups as headed lists */
.navmenu{display:none;position:static}
.navmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);font-family:var(--body);font-weight:500;font-size:var(--t-2xs);letter-spacing:var(--track-btn);
  text-transform:uppercase;padding:var(--s2) var(--s3);border:1.5px solid rgba(221,211,192,.55);border-radius:var(--r);
  color:var(--cream);background:transparent}
.navmenu>summary::-webkit-details-marker{display:none}
.bars{width:16px;height:12px;position:relative;display:inline-block}
.bars::before,.bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  box-shadow:0 5px 0 currentColor}
.bars::before{top:0}.bars::after{top:10px;box-shadow:none}
.navmenu[open]>summary{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.navmenu-panel{position:absolute;left:0;right:0;top:100%;z-index:120;max-height:calc(100vh - 64px);overflow:auto;
  background:var(--charcoal-deep);border-top:1px solid var(--rule-dk);border-bottom:1px solid var(--rule-dk);
  box-shadow:0 22px 48px rgba(20,24,20,.45);list-style:none;margin:0;padding:var(--s3) var(--s4) var(--s5);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3) var(--s6)}
.navmenu-panel li{margin:0}
.navmenu-panel ul{list-style:none;margin:0;padding:0}
.m-label{margin:0 0 var(--s1);padding:var(--s2) var(--s2) 0;font-size:var(--t-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream);opacity:.6}
.navmenu-panel a{display:flex;align-items:center;min-height:var(--tap);padding:var(--s1) var(--s2);
  color:var(--cream-lt);font-size:var(--t-md);border-radius:2px}
.navmenu-panel a:hover,.navmenu-panel a:focus-visible{background:rgba(221,211,192,.12)}
.navmenu-panel a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.m-contact{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  padding-top:var(--s3);border-top:1px solid rgba(221,211,192,.14)}
.m-contact a:first-child{font-weight:500}
.m-contact .btn{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.m-contact .btn:hover{background:var(--cream-lt)}
@media(max-width:1180px){
  .nav{gap:var(--s3)}
  .nav-groups{gap:var(--s3)}
  .nav-tel .who{display:none}
  .brand img{height:38px}
  .nav-cta{padding:var(--s3) var(--s3)}
}
@media(max-width:1023px){
  .nav{min-height:48px;padding-block:0;gap:var(--s3)}
  .nav-groups,.nav-tel{display:none}
  .navmenu{display:block}
  .brand img{height:34px}
  .nav-cta,.navmenu>summary{min-height:var(--tap);padding-block:0;line-height:1}
  .navmenu-panel{max-height:calc(100vh - 52px)}
}
@media(max-width:400px){
  .nav-cta{display:none}
  .brand img{height:32px}
}
@media(prefers-reduced-motion:reduce){
  .nav-groups summary::after,.nav-top::before,.nav-groups summary::before{transition:none}
}

/* ---- hero ---------------------------------------------------------------- */
.hero{position:relative;min-height:clamp(560px,88svh,860px);display:grid;
  align-items:end;color:var(--cream-lt);overflow:hidden;background:var(--charcoal-deep)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(20,24,20,.80) 0%,rgba(20,24,20,.70) 34%,
    rgba(20,24,20,.86) 82%,rgba(20,24,20,.95) 100%)}
.hero-body{position:relative;z-index:2;padding-block:clamp(var(--s7),9vw,var(--s8))}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--cream);display:block}
.hero .lede{max-width:56ch;margin-top:var(--s5);color:rgba(241,235,224,.9)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--rule-dk);
  font-size:var(--t-2xs);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(241,235,224,.66)}

/* ---- layout helpers ------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(var(--s6),5vw,var(--s8));align-items:center}
@media(max-width:960px){.split{grid-template-columns:1fr}}
.figure{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.figure img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}

/* proof strip: three statements, not four fake statistics. The previous
   version put "20+" in a numeral slot with nothing behind it. */
.proof{background:var(--green);color:var(--cream-lt);padding-block:clamp(var(--s5),4vw,var(--s6))}
.proof ul{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s5) var(--s6);list-style:none;margin:0;padding:0;text-align:center}
.proof li strong{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(var(--t-md),1.9vw,var(--t-xl));line-height:var(--lh-snug)}
.proof li span{display:block;margin-top:var(--s2);font-size:var(--t-2xs);
  letter-spacing:var(--track-label);text-transform:uppercase;opacity:.78;line-height:1.4}
@media(max-width:760px){
  .proof ul{grid-template-columns:1fr;gap:var(--s4);text-align:left}
}

/* ---- service style cards -------------------------------------------------
   Two across, never four. Four across inside a 1180px wrap can never give the
   body copy more than about 25 characters per line, and at 1024px it is 20.
   That is a third of a legal measure, on the first content block below the
   fold. The arithmetic does not care how nice four looks.                     */
.styles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);margin-top:var(--s7)}
@media(max-width:760px){.styles{grid-template-columns:1fr}}
.style{background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s}
.style:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.style img{aspect-ratio:5/4;object-fit:cover;width:100%;height:auto}
.style-body{padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;flex:1}
.style-body h3{margin-bottom:var(--s2)}
.style-body p{font-size:var(--t-sm);line-height:var(--lh-body);
  color:var(--muted);margin-bottom:var(--s4);max-width:60ch}
.style-tag{margin-top:auto;font-size:var(--t-2xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--green);font-weight:500}

/* ---- tables -------------------------------------------------------------- */
.tablewrap{overflow-x:auto;margin-top:var(--s6);border:1px solid var(--rule);
  border-radius:var(--r);background:#fff}
/* Every rule here is scoped to .tablewrap, and that scoping is the fix for a
   measured bug rather than a stylistic preference.

   These began as bare `table`, `th`, `td` selectors, which is harmless on a
   page whose markup you wrote all of. This page embeds Tripleseat's booking
   form, and Tripleseat injects a jQuery UI datepicker built out of a <table>.
   That calendar inherited `min-width:660px` from the one rule below and
   rendered a 204px widget at 660px, pushing the document to a scrollWidth of
   1217 against a clientWidth of 1128 and giving the whole home page a
   horizontal scrollbar. Measured on the live page, not guessed: the overflow
   probe named the offending nodes as TR elements 660px wide inside
   ui-datepicker-calendar.

   The site has exactly one real table and it already sits in .tablewrap, so
   scoping costs nothing and closes the whole class of collision. Bare element
   selectors stopped being safe the moment this page started hosting somebody
   else's markup. */
.tablewrap table{border-collapse:collapse;width:100%;min-width:660px;font-size:var(--t-sm)}
.tablewrap caption{text-align:left;padding:var(--s4) var(--s5) var(--s1);
  font-size:var(--t-2xs);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--muted);font-weight:500}
.tablewrap th,.tablewrap td{padding:var(--s3) var(--s5);text-align:left;
  border-bottom:1px solid var(--rule);vertical-align:top}
.tablewrap thead th{background:var(--charcoal);color:var(--cream-lt);font-weight:500;
  font-size:var(--t-2xs);letter-spacing:var(--track-btn);text-transform:uppercase;border-bottom:0}
.tablewrap tbody tr:nth-child(even){background:var(--surface)}
.tablewrap tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
.tablewrap tbody tr:last-child th,.tablewrap tbody tr:last-child td{border-bottom:0}

/* Second line of defence on the same bug. If a future rule leaks again, the
   calendar still cannot push the page sideways. */
#ui-datepicker-div{max-width:calc(100vw - 16px);box-sizing:border-box;z-index:9999}
#ui-datepicker-div table{min-width:0;width:100%}

/* drop-off and pick-up: deliberately NOT rows in the comparison table above,
   because nobody serves. Two different kinds of thing must not share a grid. */
.lighter{margin-top:clamp(var(--s6),5vw,var(--s8));padding:var(--card-p);
  background:var(--surface-warm);border-radius:var(--r);border:1px solid var(--rule)}
.lighter h3{font-family:var(--display);font-size:var(--t-2xl);font-weight:400;
  margin-bottom:var(--s3)}
.lighter>p{max-width:62ch;color:var(--muted);font-size:var(--t-sm)}
.lighter-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s5) clamp(var(--s6),4vw,var(--s7));margin-top:var(--s6)}
@media(max-width:760px){.lighter-grid{grid-template-columns:1fr}}
.lighter-item h4{font-family:var(--body);font-size:var(--t-md);font-weight:500;
  letter-spacing:0;margin:0 0 var(--s2);padding-top:var(--s3);
  border-top:2px solid var(--green)}
.lighter-item p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--muted);margin:0}
.lighter-note{margin:var(--s6) 0 0!important;font-size:var(--t-xs);color:var(--muted);
  padding-top:var(--s4);border-top:1px solid var(--rule)}

/* ---- gallery ------------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s6)}
.gallery a{display:block;overflow:hidden;border-radius:var(--r)}
.gallery img{aspect-ratio:1;object-fit:cover;width:100%;height:auto;
  border-radius:var(--r);transition:transform .4s ease}
.gallery a:hover img{transform:scale(1.05)}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{max-width:820px;margin-top:var(--s6)}
details{border-bottom:1px solid var(--rule);padding:var(--s1) 0}
summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s6) var(--s4) 0;
  position:relative;font-family:var(--display);font-size:var(--t-xl);
  line-height:var(--lh-snug);min-height:var(--tap);display:flex;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:var(--s1);top:50%;
  transform:translateY(-50%);font-family:var(--body);font-weight:300;
  font-size:1.5rem;color:var(--green);line-height:1}
details[open] summary::after{content:"\2013"}
details p{padding:0 var(--s6) var(--s3) 0;margin:0 0 var(--s2);
  color:var(--muted);font-size:var(--t-sm);max-width:74ch}

/* ---- forms --------------------------------------------------------------- */
.quote{background:var(--cream-lt)}
@media(min-width:961px){.quote .split{grid-template-columns:.85fr 1.15fr}}
.form-card{background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:var(--card-p);box-shadow:var(--shadow)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:var(--t-2xs);letter-spacing:.11em;
  text-transform:uppercase;font-weight:500;margin-bottom:var(--s2);color:var(--charcoal)}
.field .req{color:var(--err);margin-left:2px}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);
  font-size:var(--t-md);font-weight:300;padding:var(--s3) var(--s3);
  border:1px solid var(--field-line);border-radius:var(--r);background:var(--field);color:var(--ink)}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green);background:#fff}
.field [aria-invalid="true"]{border-color:var(--err);background:var(--err-bg)}
.field .hint{display:block;margin-top:var(--s1);font-size:var(--t-xs);
  color:var(--muted);letter-spacing:0;text-transform:none;font-weight:300}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}
.form-status{margin-top:var(--s4);padding:var(--s3) var(--s4);
  border-radius:var(--r);font-size:var(--t-sm);display:none}
.form-status.ok{display:block;background:var(--ok-bg);border:1px solid var(--green);
  color:var(--green-deep)}
.form-status.err{display:block;background:var(--err-bg);border:1px solid var(--err);
  color:var(--err-ink)}

/* Tripleseat's embed arrives with no CSS of its own: browser-default inputs,
   Times labels, a grey button. Everything here makes it read as part of this
   site. Hooks were read off the rendered DOM, not guessed. */
.ts-card{padding-block:var(--card-p)}
#tripleseat_embed_form_inline{font-family:var(--body);font-weight:300;color:var(--ink)}
#tripleseat_embed_form_inline h2,
#tripleseat_embed_form_inline .row_contact_header,
#tripleseat_embed_form_inline .row_details_header{
  font-family:var(--display);font-weight:400;font-size:var(--t-xl);
  line-height:var(--lh-snug);letter-spacing:-.01em;color:var(--ink);
  margin:var(--s6) 0 var(--s4);padding-top:var(--s5);border-top:1px solid var(--rule)}
#tripleseat_embed_form_inline h2:first-of-type,
#tripleseat_embed_form_inline .row_contact_header:first-of-type{
  margin-top:0;padding-top:0;border-top:0}
#tripleseat_embed_form_inline .tripleseat_field_section{display:block;width:100%}
#tripleseat_embed_form_inline .tripleseat_field{display:block;width:100%;margin-bottom:var(--s4)}
#tripleseat_embed_form_inline .tripleseat_field_section:has(.ts_extension){
  display:flex;gap:0 var(--s4);align-items:flex-start}
#tripleseat_embed_form_inline .tripleseat_field_section:has(.ts_extension) .ts_phone_number{flex:1 1 auto}
#tripleseat_embed_form_inline .tripleseat_field_section:has(.ts_extension) .ts_extension{flex:0 0 6.5rem}
#tripleseat_embed_form_inline label{display:block;font-family:var(--body);
  font-size:var(--t-2xs);letter-spacing:.11em;text-transform:uppercase;
  font-weight:500;margin-bottom:var(--s2);color:var(--charcoal)}
#tripleseat_embed_form_inline label .required{color:var(--err);margin-left:2px}
#tripleseat_embed_form_inline input[type=text],
#tripleseat_embed_form_inline input[type=email],
#tripleseat_embed_form_inline input[type=tel],
#tripleseat_embed_form_inline input[type=number],
#tripleseat_embed_form_inline input.text,
#tripleseat_embed_form_inline select,
#tripleseat_embed_form_inline textarea,
#tripleseat_embed_form_inline .timeselect_input{
  width:100%;max-width:100%;box-sizing:border-box;font-family:var(--body);
  font-size:var(--t-md);font-weight:300;line-height:1.4;padding:var(--s3);
  border:1px solid var(--field-line);border-radius:var(--r);background:var(--field);color:var(--ink)}
#tripleseat_embed_form_inline textarea{min-height:118px;resize:vertical}
#tripleseat_embed_form_inline select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--charcoal) 50%),
                   linear-gradient(135deg,var(--charcoal) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
#tripleseat_embed_form_inline input:focus,
#tripleseat_embed_form_inline select:focus,
#tripleseat_embed_form_inline textarea:focus{border-color:var(--green);background:#fff}
#tripleseat_embed_form_inline input[type=submit],
#tripleseat_embed_form_inline #lead_submit,
#tripleseat_embed_form_inline .button{
  width:100%;margin-top:var(--s5);font-family:var(--body);font-weight:500;
  font-size:var(--t-xs);letter-spacing:var(--track-btn);text-transform:uppercase;
  padding:var(--s4) var(--s5);min-height:48px;border-radius:var(--r);
  border:1.5px solid var(--green);background:var(--green);color:var(--cream-lt);
  cursor:pointer;transition:background .18s}
#tripleseat_embed_form_inline input[type=submit]:hover,
#tripleseat_embed_form_inline #lead_submit:hover,
#tripleseat_embed_form_inline .button:hover{
  background:var(--green-lift);border-color:var(--green-lift)}
#tripleseat_embed_form_inline input[name=website]{position:absolute;left:-9999px}
#tripleseat_embed_form_inline .col-sm-4,
#tripleseat_embed_form_inline .control-label{width:auto;float:none;padding:0;text-align:left}
#tripleseat_embed_form_inline .form-control{box-shadow:none}
#tripleseat_embed_form_inline .error,
#tripleseat_embed_form_inline .field_with_errors input{
  border-color:var(--err);background:var(--err-bg)}
.timeselect{font-family:var(--body);font-size:var(--t-sm);border:1px solid var(--field-line);
  border-radius:var(--r);background:#fff;box-shadow:var(--shadow);z-index:130}
#tripleseat_link{display:inline-flex;align-items:center;min-height:24px;
  margin-top:var(--s4);font-size:var(--t-2xs);color:var(--muted);
  text-decoration:none;letter-spacing:.04em}
#tripleseat_link:hover{text-decoration:underline}

/* ---- contact ------------------------------------------------------------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s6)}
@media(max-width:760px){.contact-cards{grid-template-columns:1fr}}
.ccard{border:1px solid var(--rule-dk);border-radius:var(--r);padding:var(--s5)}
.ccard h3{font-size:var(--t-md);margin-bottom:var(--s2)}
.ccard a{color:var(--cream-lt);display:inline-flex;align-items:center;min-height:24px;
  padding-block:2px}
.ccard-person{border-color:rgba(221,211,192,.4);background:rgba(221,211,192,.05)}
.ccard-role{font-size:var(--t-2xs)!important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream)!important;opacity:.72;margin-bottom:var(--s3)!important}

/* ---- footer -------------------------------------------------------------- */
footer{background:var(--ink);color:rgba(241,235,224,.72);
  padding:clamp(var(--s7),6vw,var(--s8)) 0 var(--s6);font-size:var(--t-xs)}
footer a{color:rgba(241,235,224,.86);text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px;padding-block:2px}
footer a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6);
  padding-bottom:var(--s6);border-bottom:1px solid var(--rule-dk)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:var(--s5)}}
.foot-grid h3{font-family:var(--body);font-size:var(--t-2xs);
  letter-spacing:var(--track-label);text-transform:uppercase;
  margin:0 0 var(--s3);color:var(--cream)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:var(--s2)}
.foot-logo{height:52px;width:auto;margin-bottom:var(--s4)}
.legal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between;
  padding-top:var(--s4);font-size:var(--t-2xs)}

/* ---- menu page ----------------------------------------------------------- */
.pagehead{position:relative;color:var(--cream-lt);background:var(--charcoal-deep);
  overflow:hidden;padding:clamp(var(--s8),10vw,7.5rem) 0 clamp(var(--s7),7vw,var(--s9))}
.pagehead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.pagehead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,20,.72),rgba(20,24,20,.92))}
.pagehead .wrap{position:relative;z-index:2}
.pagehead .lede{max-width:58ch;color:rgba(241,235,224,.88);margin-top:var(--s4)}

.jump{position:sticky;top:70px;z-index:60;background:rgba(251,249,245,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.jump ul{display:flex;gap:var(--s1);list-style:none;margin:0;padding:var(--s3) 0;
  overflow-x:auto;scrollbar-width:thin}
.jump a{display:inline-flex;align-items:center;min-height:var(--tap);white-space:nowrap;
  font-size:var(--t-2xs);letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  text-decoration:none;color:var(--charcoal);border:1px solid var(--rule);
  border-radius:99px;padding:0 var(--s4);transition:background .16s,color .16s}
.jump a:hover{background:var(--green);color:var(--cream-lt);border-color:var(--green)}

.msec{padding:clamp(var(--s7),5.5vw,var(--s8)) 0;border-bottom:1px solid var(--rule)}
.msec:last-of-type{border-bottom:0}
.msec-head{max-width:62ch;margin-bottom:var(--s6)}
.msec-head h2{margin-bottom:var(--s3)}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(var(--s6),4vw,var(--s7))}
@media(max-width:760px){.items{grid-template-columns:1fr}}
.item{padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
/* every column's last item, so no grid ends on a hanging half-rule */
.items>.item:nth-last-child(-n+2):nth-child(2n+1),
.items>.item:last-child{border-bottom:0}
@media(max-width:760px){.items>.item:last-child{border-bottom:0}
  .items>.item:nth-last-child(2){border-bottom:1px solid var(--rule)}}
.item h3{font-family:var(--body);font-size:var(--t-md);font-weight:500;
  letter-spacing:0;line-height:var(--lh-snug);margin-bottom:var(--s1)}
.item p{margin:0;font-size:var(--t-sm);line-height:var(--lh-body);
  color:var(--muted);max-width:62ch}
.veg{display:inline-block;margin-left:var(--s2);font-family:var(--body);
  font-size:.5625rem;font-weight:600;letter-spacing:.1em;color:var(--green);
  border:1px solid var(--green);border-radius:99px;padding:1px 6px;
  vertical-align:middle;text-transform:uppercase}
.plain{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(var(--s6),4vw,var(--s7))}
@media(max-width:760px){.plain{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.plain{grid-template-columns:1fr}}
.plain .item p{display:none}

.boards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);margin-top:var(--s2)}
@media(max-width:760px){.boards{grid-template-columns:1fr}}
.board{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5)}
.board h3{font-family:var(--display);font-size:var(--t-xl);font-weight:400;margin-bottom:var(--s3)}
.board ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1)}
.board li{font-size:var(--t-xs);background:var(--surface-warm);border-radius:99px;
  padding:2px var(--s3);color:var(--charcoal)}

.note{background:var(--surface-warm);border-left:3px solid var(--green);
  border-radius:var(--r);padding:var(--s4) var(--s5);margin-top:var(--s6);font-size:var(--t-sm)}
.note strong{font-weight:500}
.ctaband{background:var(--green-deep);color:var(--cream-lt);text-align:center}
.ctaband h2{color:var(--cream-lt);margin-bottom:var(--s4)}
.ctaband p{color:rgba(241,235,224,.84);max-width:56ch;margin-inline:auto}
.ctaband .btn{margin-top:var(--s5)}
.ctaband a[href^="tel"]{padding-block:var(--s1);display:inline-block}

/* ---- print ---------------------------------------------------------------
   A couple printing the menu for a tasting, or an assistant printing the quote
   details, should get the words and the phone number, not the hero photo and
   the navigation. */
@media print{
  :root{--paper:#fff;--ink:#000;--muted:#5d6660;--rule:#c9c2b6}
  *{background:transparent!important;color:#000!important;box-shadow:none!important;
    text-shadow:none!important;transition:none!important}
  body{font-size:11pt;line-height:1.45;background:#fff}
  header,.jump,.hero,.proof,.gallery,.styles img,.figure,.pagehead img,
  .btn,form,#ts-slot,.form-card,.hero-cta,.hero-meta,.skip,.navmenu{display:none!important}
  .pagehead,.ctaband,.on-dark,.on-green,.quote{padding:0!important}
  section{padding:.6cm 0!important;break-inside:auto}
  .wrap{max-width:none;padding-inline:0}
  h1{font-size:22pt}h2{font-size:15pt}h3{font-size:11.5pt}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .item,.style,.board,.ccard,details{break-inside:avoid;page-break-inside:avoid}
  .items,.plain,.foot-grid,.legal,.lighter-grid{display:block}
  .item{border-bottom:1px solid #c9c2b6}
  table{min-width:0}
  th,td{border:1px solid #c9c2b6;padding:4pt 6pt;font-size:9.5pt}
  thead th{background:#f4f1ea!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tablewrap{overflow:visible;border:0}
  details{display:block}details>summary{list-style:none}
  details p{display:block!important;padding:0 0 6pt 0}
  a[href^="http"]::after,a[href^="tel"]::after,a[href^="mailto"]::after{
    content:" (" attr(href) ")";font-size:8.5pt;color:#5d6660!important}
  a[href^="#"]::after{content:""}
  footer{border-top:1px solid #c9c2b6;padding-top:.4cm}
  @page{margin:1.6cm 1.4cm}
}

/* ---- 404 -----------------------------------------------------------------
   Its own layout, because it is the only page that centres a short message in
   the viewport rather than stacking full-width sections. */
body.page-404{display:flex;flex-direction:column;min-height:100vh}
body.page-404 main{flex:1;display:flex;align-items:center;
  padding-block:clamp(var(--s7),10vw,var(--s9))}
body.page-404 h2{font-family:var(--body);font-size:var(--t-2xs);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green);
  margin:0 0 var(--s4);line-height:var(--lh-body)}
body.page-404 p{max-width:56ch}
body.page-404 footer{padding:var(--s6) 0 var(--s5)}
.cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.where{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule)}
.where ul{list-style:none;margin:var(--s3) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6)}
.where a{display:inline-flex;align-items:center;min-height:24px;font-size:var(--t-sm)}

/* A numbered step inside a section is structurally an h3, because skipping a
   level breaks the outline screen-reader users navigate by. It should still
   look like the small label it is, not like a section heading. */
.lighter-item h4,.lighter-item h3.step{font-family:var(--body);font-size:var(--t-md);
  font-weight:500;letter-spacing:0;line-height:var(--lh-snug);
  margin:0 0 var(--s2);padding-top:var(--s3);border-top:2px solid var(--green)}

/* ---------- TEAM ----------------------------------------------------------
   Two-up and no further. These are portraits at a 0.62 ratio, and a third
   column would shrink each face below the size where a reader registers it as
   a person rather than a thumbnail. The bio column carries running prose, so
   it lives under the same measure ceiling as every other body text on the
   site rather than getting its own narrower one.                          */
.team-grid{display:grid;gap:var(--s7);grid-template-columns:1fr;margin-top:var(--s6)}
@media(min-width:760px){.team-grid{grid-template-columns:1fr 1fr;gap:var(--s8)}}

.tmember{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:460px){
  /* Below this the portrait beside the text leaves the text at roughly 20
     characters a line, so the photo goes back on top instead. */
  .tmember{grid-template-columns:minmax(0,148px) minmax(0,1fr);gap:var(--s5);align-items:start}
}
@media(min-width:760px){.tmember{grid-template-columns:1fr;gap:var(--s5)}}
@media(min-width:1000px){.tmember{grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:var(--s5)}}

.tmember img{
  width:100%;height:auto;display:block;border-radius:3px;
  aspect-ratio:.62;object-fit:cover;object-position:50% 22%;
  background:var(--cream-lt);
  box-shadow:0 1px 2px rgba(0,0,0,.10),0 8px 22px -12px rgba(0,0,0,.30);
}
.tmember-name{font-family:var(--display);font-size:var(--t-xl);
  line-height:var(--lh-snug);margin:0}
.tmember-role{font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:var(--s1) 0 var(--s3)}
.tmember-contact{font-size:var(--t-sm);margin:0 0 var(--s4);line-height:var(--lh-snug)}
.tmember-contact a{word-break:break-word;display:inline-block;min-height:24px;padding-block:2px}
.tmember-bio{font-size:var(--t-sm);line-height:var(--lh-body);max-width:52ch}
.tmember-bio p{margin:0 0 var(--s4)}
.tmember-bio p:last-child{margin-bottom:0}


/* ---------- TRIPLESEAT EMBED ------------------------------------------------
   Their form is the most important interactive thing on this site, it arrives
   with its own stylesheet, and it does not render into the container you tell
   it to. Both facts below were read off the live DOM after a first attempt at
   this block silently matched nothing.

   1. THE CONTAINER ID. The markup asks Tripleseat to render into
      #tripleseat_embed_form. In inline mode it actually builds
      #tripleseat_embed_form_inline and puts every field in there. A selector
      written against the id in our own HTML matches zero elements and fails
      quietly, which is how the first version of this block shipped looking
      correct and measuring unchanged. The prefix selector below covers both.

   2. THE RING. This site's focus ring is a PAIR: a light 2px outline sitting
      inside a dark 4px shadow, so that one of the two always contrasts with
      whatever is behind it. Tripleseat sets box-shadow on .form-control, which
      removes the dark half and leaves the pale half alone on a near-white
      field. Measured at 1.05:1 where WCAG 2.2 SC 2.4.11 asks 3:1. A keyboard
      user could not tell which field they were in, on the booking form. These
      fields are light, so the ring is inverted to dark-on-light rather than
      restoring a pair that their stylesheet can break again.                */
[id^="tripleseat_embed_form"] .form-control:focus,
[id^="tripleseat_embed_form"] input:focus,
[id^="tripleseat_embed_form"] select:focus,
[id^="tripleseat_embed_form"] textarea:focus,
[id^="tripleseat_embed_form"] button:focus,
[id^="tripleseat_embed_form"] a:focus{
  outline:2px solid var(--ink)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px var(--cream-lt),0 0 0 6px var(--ink)!important;
  border-color:var(--ink)!important;
}

/* Their attribution link. The markup carries a static #tripleseat_link as a
   fallback; their script sets that one to display:none and injects its own,
   with no id and no class, so the padding written against our id was styling
   a hidden element while the visible one stayed at 355x22 against the 24px
   minimum in SC 2.5.8. Target it by where it points instead. */
#tripleseat_link,
[id^="tripleseat_embed_form"] a[href*="tripleseat.com"],
.ts-card a[href*="tripleseat.com"]{
  display:inline-block;padding-block:var(--s1);min-height:24px;line-height:1.5;
}

/* ---------- WEDDING GUIDE: budget tool and planning checklist --------------
   Two interactive blocks. Both have to work on a phone held in one hand at a
   venue tour, which is the actual moment somebody opens a page like this, so
   every control is at least 44px tall and nothing depends on hover.        */

/* --- budget calculator --- */
.calc{background:var(--surface-warm);border:1px solid var(--rule);
  border-radius:var(--r);padding:var(--card-p);margin-top:var(--s6)}
.calc-inputs{display:grid;gap:var(--s5);grid-template-columns:1fr;margin-bottom:var(--s6)}
@media(min-width:620px){.calc-inputs{grid-template-columns:1fr 1fr}}
.calc-field label{display:block;font-size:var(--t-2xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:var(--s2)}
.calc-field input{width:100%;min-height:48px;padding:var(--s3) var(--s4);
  font:inherit;font-size:var(--t-lg);background:var(--field);
  border:1px solid var(--field-line);border-radius:3px;color:var(--ink)}
.calc-hint{font-size:var(--t-2xs);color:var(--muted);margin-top:var(--s2)}

.calc-head{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:baseline;
  justify-content:space-between;padding-bottom:var(--s4);
  border-bottom:2px solid var(--ink);margin-bottom:var(--s2)}
.calc-perguest{font-family:var(--display);font-size:var(--t-2xl);line-height:1.1}
.calc-perguest small{display:block;font-family:var(--body);font-size:var(--t-2xs);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);
  font-weight:500;margin-top:var(--s1)}

/* A list, not a table. The comparison table on the home page needs columns
   because it compares five things across five axes; this compares one number
   per row and a table would only add borders. */
.calc-rows{list-style:none;margin:0;padding:0}
.calc-rows li{display:grid;grid-template-columns:1fr auto;gap:var(--s3) var(--s4);
  align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.calc-rows li:last-child{border-bottom:0}
.calc-rows .cat{font-weight:500}
.calc-rows .pct{font-size:var(--t-2xs);color:var(--muted);display:block;font-weight:400}
.calc-rows .amt{font-variant-numeric:tabular-nums;font-size:var(--t-lg);white-space:nowrap}
.calc-rows li.total{border-top:2px solid var(--ink);border-bottom:0;margin-top:var(--s3);
  padding-top:var(--s4);font-weight:500}

.calc-note{margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:3px;
  background:var(--ok-bg);border-left:3px solid var(--green);font-size:var(--t-sm);
  line-height:var(--lh-body)}
.calc-note.tight{background:var(--err-bg);border-left-color:var(--err)}
.calc-note strong{font-weight:600}

/* --- planning checklist --- */
.phase{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  margin-top:var(--s5);overflow:hidden}
.phase > summary{cursor:pointer;list-style:none;padding:var(--s5) var(--card-p);
  display:flex;gap:var(--s4);align-items:baseline;justify-content:space-between;
  min-height:48px;font-family:var(--display);font-size:var(--t-xl)}
.phase > summary::-webkit-details-marker{display:none}
.phase > summary::after{content:"+";font-family:var(--body);font-size:var(--t-xl);
  color:var(--muted);line-height:1}
.phase[open] > summary::after{content:"\2212"}
.phase > summary:hover{background:var(--surface)}
.phase-when{display:block;font-family:var(--body);font-size:var(--t-2xs);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);
  font-weight:500;margin-bottom:var(--s1)}
.phase-body{padding:0 var(--card-p) var(--s5)}
.tasks{list-style:none;margin:0;padding:0}
.tasks li{border-top:1px solid var(--rule)}
.tasks label{display:flex;gap:var(--s4);align-items:flex-start;
  padding:var(--s4) 0;min-height:44px;cursor:pointer;line-height:var(--lh-body)}
.tasks input[type=checkbox]{flex:0 0 auto;width:24px;height:24px;margin-top:1px;
  accent-color:var(--green);cursor:pointer}
.tasks input:checked + span{color:var(--muted);text-decoration:line-through}
.task-why{display:block;font-size:var(--t-2xs);color:var(--muted);margin-top:var(--s1);
  text-decoration:none}
.progress{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s6);
  padding:var(--s4) var(--s5);background:var(--surface-warm);border-radius:3px;
  font-size:var(--t-sm)}
.progress-bar{flex:1;height:8px;background:var(--cream);border-radius:4px;overflow:hidden}
.progress-bar i{display:block;height:100%;width:0;background:var(--green);
  transition:width .25s ease}
@media(prefers-reduced-motion:reduce){.progress-bar i{transition:none}}
.progress-num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}

/* ---------- A LIGHT CARD ON A DARK SECTION ---------------------------------
   .on-dark repaints every heading and paragraph inside it cream, which is
   right for text sitting directly on the charcoal and wrong for text inside a
   pale card that happens to be nested there. On the wedding guide that put
   "Send me the tracker" at 1.19:1 against its own card, measured on the live
   page, which is not a near miss, it is invisible.

   Reset by container rather than by page, so the next light card dropped into
   a dark section inherits the fix instead of repeating the bug.            */
.on-dark .form-card,.on-green .form-card,
.on-dark .calc,.on-green .calc{color:var(--ink)}
.on-dark .form-card h1,.on-dark .form-card h2,.on-dark .form-card h3,
.on-dark .form-card h4,.on-green .form-card h1,.on-green .form-card h2,
.on-green .form-card h3,.on-green .form-card h4{color:var(--ink)}
.on-dark .form-card p,.on-green .form-card p{color:var(--ink)}
.on-dark .form-card .form-msg,.on-green .form-card .form-msg{color:var(--ink)}
.on-dark .form-card label,.on-green .form-card label{color:var(--muted)}
.on-dark .form-card a,.on-green .form-card a{color:var(--green)}

/* The ring follows the surface, not the section. Inside a pale card the
   dark-context ring is the wrong one and would repeat the same mistake at the
   focus layer. */
.on-dark .form-card :focus-visible,.on-green .form-card :focus-visible{
  outline:2px solid var(--paper);outline-offset:2px;
  box-shadow:0 0 0 4px var(--ink),0 0 0 6px var(--paper);
}

/* ---------- LINKS ON A DARK SECTION ----------------------------------------
   The base link colour is brand green, which is 1.22:1 against the charcoal
   and therefore unreadable. There was no rule for this because until now every
   link inside an .on-dark section happened to sit inside a pale card, so the
   bug had nowhere to appear. The transportation and rehearsal dinner pages put
   a phone number and an email address straight onto the dark, and the probe
   measured both at 1.22:1 on the live page.

   Scoped so a link inside a pale card nested in a dark section keeps the green
   it should have; the rule above this one already handles that case, and the
   :not() here stops the two fighting.                                      */
.on-dark a:not(.btn),.on-green a:not(.btn),.hero a:not(.btn){
  color:var(--cream-lt);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.on-dark a:not(.btn):hover,.on-green a:not(.btn):hover,.hero a:not(.btn):hover{
  color:#fff;text-decoration-thickness:2px;
}
.on-dark strong,.on-green strong,.hero strong{color:var(--cream-lt)}
.on-dark .form-card a:not(.btn),.on-green .form-card a:not(.btn){
  color:var(--green);text-decoration:underline;
}
.on-dark .form-card strong,.on-green .form-card strong{color:var(--ink)}

/* Three team members, not two. A third narrow column would put running prose at
   about 28 characters a line, so above the two-up breakpoint the grid becomes a
   single column of full-width rows: portrait left, bio right. That is what the
   .tmember rule already does at 1000px and up, so the only change needed is to
   stop forcing two columns. */
@media(min-width:760px){.team-grid{grid-template-columns:1fr;gap:var(--s8)}}
@media(min-width:1000px){
  .tmember{grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:var(--s6)}
  .tmember-bio{max-width:68ch}
}

/* A heading that exists for the outline and not for the eye. Needed where a
   section is a single full-bleed photograph: the heading order has to stay
   unbroken for anyone navigating by headings, and there is nothing to print. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- IMAGE-LED SERVICE PAGE -----------------------------------------
   Built to Cater_ImageLedServicePage_SPEC_v1.0. The rules that shaped this
   block: an image has to be in the first viewport (S6) and the CTA has to be
   in it too, at 390px as well as on a desktop (S8), which is the single most
   cited hero failure in the benchmark. So the hero is a photograph with the
   copy over it rather than a photograph below the copy, because stacking them
   pushes the button off a phone screen.                                    */
.photohero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(78vh,620px);display:grid;align-items:end}
.photohero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2}
/* The scrim is not decoration. White text on an unknown photograph fails
   contrast somewhere in the frame, every time. This makes the bottom third
   dark enough that the measurement holds regardless of the image. */
.photohero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,24,20,.76) 0%,rgba(20,24,20,.84) 45%,rgba(20,24,20,.94) 100%)}
.photohero-copy{padding-block:var(--s7) var(--s8)}
.photohero-copy h1{margin-bottom:var(--s4)}
.photohero-copy .lede{max-width:34ch;margin-bottom:var(--s6)}
@media(max-width:520px){
  .photohero{min-height:min(72vh,560px)}
  .photohero-copy{padding-block:var(--s6) var(--s6)}
  .photohero-copy .lede{margin-bottom:var(--s5)}
}

/* Three shots with captions. The caption carries the selling, so the picture
   is not decoration sitting next to a paragraph doing the actual work. */
.shots{display:grid;gap:var(--s5);grid-template-columns:1fr;margin-top:var(--s6)}
@media(min-width:700px){.shots{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}
.shots figure{margin:0}
.shots img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--r);display:block}
.shots figcaption{margin-top:var(--s3);font-size:var(--t-sm);
  line-height:var(--lh-snug);color:var(--ink)}
.on-green .shots figcaption,.on-dark .shots figcaption{color:var(--cream-lt)}

/* Six facts as six facts, not six paragraphs. This is the block that replaced
   about four hundred words. */
.specs{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s5);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.specs{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.specs li{display:flex;flex-direction:column;gap:var(--s1);
  padding-top:var(--s4);border-top:2px solid currentColor}
.specs strong{font-family:var(--display);font-size:var(--t-2xl);
  line-height:1.05;font-weight:400}
.specs span{font-size:var(--t-2xs);letter-spacing:var(--track-label);
  text-transform:uppercase;opacity:.86}

/* The eyebrow on a dark page head measured 1.48:1, against a 4.5 minimum. The
   .pagehead sets cream text on charcoal, but .eyebrow carries its own muted
   colour that was chosen for a light surface and follows it onto the dark one.
   Same class of bug as the links on .on-dark: a colour that is correct in one
   container and invisible in another. */
.pagehead .eyebrow{color:var(--cream);opacity:1}

/* Captions on the split-layout figures. Four of five service pages had no
   captions at all, which is not how M1 gets passed. Same treatment as .shots. */
.figure{overflow:visible;box-shadow:none}
.figure img{border-radius:var(--r);box-shadow:var(--shadow)}
.figure figcaption{margin-top:var(--s3);font-size:var(--t-sm)}
.on-green .figure figcaption,.on-dark .figure figcaption{color:var(--cream-lt)}

/* Gallery captions: the best photographs on the site had none. */
.gallery figure{margin:0}
.gallery figcaption{margin-top:var(--s2);font-size:var(--t-sm)}
.on-dark .gallery figcaption,.on-green .gallery figcaption{color:var(--cream-lt)}

/* The quote column blew out to 388px on a 375px viewport because a grid item's
   default min-width is auto, so the Tripleseat form inside it set the column's
   width instead of the viewport doing so. Measured live at 390px, 2026-09-04. */
.split>*{min-width:0}
.ts-card{overflow-x:auto}

/* The embedded datepicker and time list, measured open at 390px on 2026-09-04:
   prev/next arrows 22px, day cells a hair under 24, and the highlighted time
   row white on rgb(71,128,162), which is 4.31:1 against a 4.5 minimum. These
   are Tripleseat's widgets in our DOM, so our stylesheet can reach them. */
#ui-datepicker-div .ui-datepicker-prev,#ui-datepicker-div .ui-datepicker-next{width:28px;height:28px;top:4px}
div.timeselect a{display:block;min-height:26px;line-height:26px}
div.timeselect a.hover,div.timeselect a:hover{background:var(--green-deep)!important;color:var(--cream-lt)!important}
#ui-datepicker-div .ui-datepicker-buttonpane button{min-height:28px;padding:.3em .8em}
#ui-datepicker-div td a,#ui-datepicker-div td span{min-width:28px;min-height:28px;line-height:28px}

/* Classes the markup used and the stylesheet never defined, found by a blind
   reader on 2026-09-04: the food-truck menu cards stacked as plain blocks. */
.grid3{display:grid;gap:var(--s5);grid-template-columns:repeat(3,1fr);margin-top:var(--s6)}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}
.card-lite{padding:var(--s5);border:1px solid var(--rule);border-radius:var(--r)}
.card-lite h3{margin-top:0}
.btn-lg{padding:.95em 1.6em;font-size:var(--t-md)}
.nav-tel{font-weight:500;white-space:nowrap}
.share{font-weight:500;color:var(--green);margin-top:calc(-1*var(--s2))}
.on-green .share,.on-dark .share{color:var(--cream-lt)}
.asks{padding-left:1.1em;margin:var(--s3) 0 0}.asks li{margin:.4em 0}
.form-status.err,.form-msg.err{display:block;background:var(--err-bg);border:1px solid var(--err);
  color:var(--err-ink)}

/* ---- Typography pass, 2026-09-04. Measured by ccc_visual_probe.py at 390/768/1280. ----
   T3 widows: balance headings, pretty-wrap prose (CSS Text 4). T6: WCAG 1.4.12 wants body
   copy to survive 1.5 line height; the lede sat at 1.35. T1: FAQ answers ran 90 to 91
   characters a line at 768 and 1280 (Butterick: 45 to 75). T5: the contact cards and the
   footer ran past a 768 viewport on a long address. T2: the NM badge was 9px. */
h1,h2,h3{text-wrap:balance}
p,li,figcaption,summary{text-wrap:pretty}
.lede{line-height:1.5}
main p,main li{max-width:72ch}
.faq p{max-width:68ch}
.ctaband p,.ctaband .lede{margin-inline:auto}
.share{margin:var(--s2) 0 var(--s3)}
.veg{font-size:var(--t-2xs);line-height:1.2}
.lighter-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ccard{min-width:0;overflow-wrap:anywhere}
.foot-grid>*{min-width:0;overflow-wrap:anywhere}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
@media(max-width:960px){.contact-cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.contact-cards{grid-template-columns:1fr}}
.nb{white-space:nowrap}
.item h3{text-wrap:pretty}
/* Primary nav: at 1280 four of seven labels wrapped to two lines (seen in the pass-3
   screenshot of the wedding guide). Labels never wrap; the row compresses instead. */

/* Off-site page, 2026-09-04: four service styles in one row on desktop, two on a tablet, one on a phone. */
.styles4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.styles4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.styles4{grid-template-columns:1fr}}

/* ---------- OFF-SITE SHOWSTOPPER, 2026-09-05 -----------------------------------
   Bobby: "you're missing the best part, the food ... make the mechanics create a
   feeling with the viewer." The page leads with photographs at full opacity and the
   copy is cut to caption them. Three new layouts and one motion system.            */

/* the plates: a nine-tile editorial grid, one dish at double size */
.plates{background:var(--surface-warm)}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s6)}
.mosaic .tile{margin:0;min-width:0}
.mosaic .tile.big{grid-column:span 2;grid-row:span 2}
.mosaic .tile a{display:block;overflow:hidden;border-radius:var(--r);background:var(--cream)}
.mosaic .tile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
/* the double tile fills its two-row area so its bottom edge meets the row beside it;
   the caption row is auto, the picture takes the rest */
.mosaic .tile.big{display:grid;grid-template-rows:minmax(0,1fr) auto}
.mosaic .tile.big a{min-height:0}
.mosaic .tile.big img{height:100%;aspect-ratio:auto}
.mosaic .tile a:hover img,.mosaic .tile a:focus-visible img{transform:scale(1.035)}
.mosaic figcaption{margin-top:var(--s2);font-size:var(--t-sm);line-height:var(--lh-snug);color:var(--ink)}
@media(max-width:960px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic .tile.big{grid-column:span 2;grid-row:auto}
}
@media(max-width:560px){.mosaic{gap:var(--s2)}.mosaic figcaption{font-size:var(--t-xs)}}

/* six courses: a printed menu card each; on a phone the cards flip sideways */
.courses-sec{background:var(--cream-lt)}
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s6)}
.course{background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:var(--s5) var(--s5) var(--s4);display:flex;flex-direction:column;min-width:0}
.course h3{font-family:var(--display);font-size:var(--t-xl);font-weight:400;
  padding-bottom:var(--s3);border-bottom:2px solid var(--green);margin-bottom:var(--s2)}
.course ul{list-style:none;margin:0;padding:0;flex:1}
.course li{padding:var(--s2) 0;border-bottom:1px solid var(--rule);font-size:var(--t-sm);
  line-height:var(--lh-snug);color:var(--ink)}
.course li:last-child{border-bottom:0}
.course a{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);margin-top:var(--s3);
  font-size:var(--t-2xs);letter-spacing:var(--track-label);text-transform:uppercase;
  font-weight:500;color:var(--green);text-decoration:none}
.course a:hover,.course a:focus-visible{text-decoration:underline}
@media(max-width:960px){.courses{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .courses{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s4);
    padding:var(--s1) var(--s1) var(--s4);margin-inline:calc(-1*var(--s1));
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .course{flex:0 0 min(78vw,320px);scroll-snap-align:start}
}

/* the moment: a portrait beside one line, on charcoal */
.moment{background:var(--charcoal)}
.moment .lede{color:rgba(241,235,224,.84);max-width:38ch}
.figure.portrait img{aspect-ratio:5/6;height:auto;object-position:50% 30%}

/* service style cards on this page sit two-up, as on the home page */
.serve .styles{margin-top:var(--s6)}

/* photographs full size on the hero of this page: the v1 head dimmed the room to 42% */
.photohero.on-dark .photohero-bg{opacity:1}

/* ---- motion. Three gates: html.js, no-preference, and a 4s fallback in the script. */
@media(prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(14px);
    transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
    transition-delay:calc(min(var(--i,0),7)*60ms)}
  html.js .reveal.in{opacity:1;transform:none}
  .photohero-bg.kb{animation:kb 9s cubic-bezier(.2,.6,.2,1) both;transform-origin:50% 40%}
  @keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
  .style{transition:box-shadow .25s,transform .25s}
}

/* Corporate and the other service pages, 2026-09-05: a four-card strip on a desktop, two on a tablet,
   the same sideways flip on a phone. The moment band also takes a landscape figure. */
.courses.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.courses.four{grid-template-columns:repeat(2,1fr)}}
.moment .figure:not(.portrait) img{aspect-ratio:4/3;height:auto}

/* Third Street Retreat, 2026-09-05: the brand mark sits above the eyebrow on its hero. */
.brandmark{display:block;width:min(320px,64vw);height:auto;margin-bottom:var(--s4)}