/* ===========================================================================
   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.
   ========================================================================= */

: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;    --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:.9375rem;  /* 15  secondary body, card copy */
  --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)}
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 ---------------------------------------------- */
header{position:sticky;top:0;z-index:100;background:rgba(27,33,29,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-dk)}
.nav{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-block:var(--s3);position:relative}
.nav a{color:var(--cream);text-decoration:none}
.brand img{height:44px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(var(--s4),2.2vw,var(--s6));
  list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;min-height:24px;
  font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;
  font-weight:400;opacity:.86;padding-block:var(--s1)}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1}
.nav-actions{display:flex;gap:var(--s2);align-items:center}
.nav-cta,.nav-call{padding:var(--s3) var(--s4);font-size:var(--t-2xs)}
.nav-call{display:none;background:transparent;color:var(--cream);
  border-color:rgba(221,211,192,.55)}
.nav-call:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}

/* Mobile menu, built on <details> so it needs no JavaScript, is keyboard
   operable for free and still works with JS off. Before it existed the header
   below 860px offered only the logo and two buttons, so Menu, FAQ, Gallery and
   Our approach were unreachable on a phone. */
.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(--s3) var(--s4);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}
.navmenu>summary::after{content:"";width:9px;height:9px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.navmenu[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.navmenu[open]>summary{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.navmenu-panel{position:absolute;right:0;left:auto;top:calc(100% + var(--s1));
  z-index:120;min-width:min(78vw,270px);background:var(--charcoal-deep);
  border:1px solid var(--rule-dk);border-radius:var(--r);
  box-shadow:0 22px 48px rgba(20,24,20,.45);padding:var(--s1);list-style:none;margin:0}
.navmenu-panel li{margin:0}
.navmenu-panel li+li{border-top:1px solid rgba(221,211,192,.12)}
.navmenu-panel a{display:flex;align-items:center;min-height:var(--tap);
  padding:var(--s1) var(--s4);color:var(--cream);text-decoration:none;
  font-size:var(--t-sm);border-radius:2px}
.navmenu-panel a:hover,.navmenu-panel a:focus-visible{background:rgba(221,211,192,.14)}

@media(max-width:960px){
  .nav-links{display:none}
  .navmenu{display:block}
  .nav-call{display:inline-flex}
  .brand img{height:38px}
}
@media(max-width:560px){
  .nav-cta,.nav-call{padding:var(--s2) var(--s3);font-size:.6875rem;letter-spacing:.06em}
  .brand img{height:33px}
}

/* ---- 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,.72) 0%,rgba(20,24,20,.32) 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(--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(--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(--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);opacity:.62}

/* ---- 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(--f-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(--ink-3);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}
.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(--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:22px;height:22px;margin-top:2px;
  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)}