/* ── Cold-load CLS fix ────────────────────────────────────────────────────────────
   Lighthouse measured CLS 0.155 on a COLD load and 0 warm — so it is font-swap reflow,
   which every first-time visitor gets and no returning one does. `display=swap` paints a
   fallback, then the webfont replaces it at different widths and everything below moves.

   These size-adjust values are MEASURED, not guessed. The same string rendered at 100px
   on canvas in each face gave:
     Alfa Slab One 3687px vs Georgia 3052px        -> 120.8%  (21% mismatch)
     Barlow Condensed 2834px vs Arial Narrow 2518  -> 112.6%  (13% mismatch)
     Karla 3075px vs Helvetica 3070px              -> 100.2%  (already matched, left alone)
   Matching the fallback to the webfont's metrics means the swap changes the glyphs without
   changing the line boxes, so nothing below them moves. */
@font-face {
  font-family: 'Alfa Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 120.8%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial Narrow'), local('Helvetica Neue');
  size-adjust: 112.6%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* Uncle Rocco — visual system, v2 (retro diner).

   WHY THIS CHANGED: v1 was competent modern-restaurant and did not look like THEIR
   restaurant. Two real cues drove the rework:
     1. The logo is a warm red brush SCRIPT — v1 paired it with austere condensed
        uppercase, which fought it.
     2. A guest review: "Love the vibe. 80s style is my favorite." The room is retro.
   So: a warm cream ground instead of clinical white, a chunky Americana slab for
   headlines to echo a diner sign, a gold trim colour for small accents, and food
   photography given considerably more room. Red #E41824 is sampled from the real logo.
*/

:root {
  --red: #E41824;
  --red-deep: #B4111B;
  --red-soft: #FDECEC;
  --red-glow: rgba(228, 24, 36, .32);

  /* retro trim */
  --gold: #E3A33C;
  --gold-soft: #FBF0DC;

  /* warm neutrals — a diner, not a dashboard */
  --ink: #241B15;
  --ink-2: #4A3B31;
  --muted: #7A6A5D;
  --line: #E9DECE;
  --cream: #FFFAF2;
  --cream-2: #FBF1E2;
  --cream-3: #F7EBD9;   /* the darker end of the cream band gradient */
  --cream-leader: #F9EFDD; /* the dotted menu leader must match the band it sits on */
  --white: #FFFFFF;

  --dark: #1C1310;
  --dark-2: #2C1F19;

  --r-lg: 20px;
  --r-md: 12px;
  --r-pill: 100px;

  /* two-rung shadow ladder, warm-tinted */
  --sh-1: 0 8px 24px rgba(60, 40, 28, .06);
  --sh-2: 0 16px 40px rgba(60, 40, 28, .10);
  --sh-accent: 0 10px 26px var(--red-glow);

  --font-display: 'Alfa Slab One', 'Alfa Fallback', Georgia, 'Times New Roman', serif;
  --font-head: 'Barlow Condensed', 'Barlow Fallback', 'Helvetica Neue', Impact, sans-serif;
  --font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --pad-section: 92px 24px;
  --pad-band: 64px 24px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  font-size: 17.5px;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { padding: var(--pad-section); }
.band { padding: var(--pad-band); }

/* ---------- type ---------- */
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.005em; line-height: 1.06; margin: 0 0 .42em; text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 4.5vw, 3.45rem); }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); }
h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.18rem, 2vw, 1.42rem); line-height: 1.18; margin: 0 0 .4em; text-transform: uppercase; letter-spacing: .015em; }
p  { margin: 0 0 1.1em; max-width: 66ch; }

.kicker {
  font-family: var(--font-head);
  font-size: 1rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--red); margin: 0 0 .8em;
  display: inline-flex; align-items: center; gap: .6rem;
}
.kicker::before { content: ''; width: 26px; height: 3px; background: var(--gold); border-radius: 2px; }
.lede { font-size: 1.16rem; color: var(--ink-2); }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 15px 32px; border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 700; font-size: 1.12rem;
  text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--sh-accent); }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.btn-on-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.32); }
.btn-on-dark:hover { background: rgba(255,255,255,.16); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- diner awning stripe — retro trim, used sparingly ---------- */
.stripe { height: 8px; background: repeating-linear-gradient(115deg, var(--red) 0 22px, #fff 22px 44px); }

/* ---------- nav ---------- */
.proofbar { background: var(--dark); color: #fff; text-align: center; padding: 10px 16px; font-size: .95rem; }
.proofbar a { color: #fff; text-decoration: none; display: inline-flex; gap: .55rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.proofbar .stars { color: var(--gold); letter-spacing: .06em; }

header.nav { position: sticky; top: 0; z-index: 60; background: rgba(255,250,242,.95); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 20px; padding: 12px 24px; max-width: var(--container); margin: 0 auto; }
.nav-logo img { height: 46px; width: auto; }
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a { text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .03em; }
.nav-links a:hover { color: var(--red); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 1.7rem; cursor: pointer; color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; padding: 44px 24px 60px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
/* The food is the product. Directional scrim so copy is legible on the LEFT while the
   photograph stays visible on the right — never a full dark wash over the food. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 78% -18%, rgba(228,24,36,.30), transparent 62%),
    radial-gradient(700px 420px at 8% 110%, rgba(227,163,60,.16), transparent 58%),
    linear-gradient(96deg, rgba(18,12,9,.95) 0%, rgba(18,12,9,.88) 38%, rgba(18,12,9,.72) 68%, rgba(18,12,9,.58) 100%);
}
.hero-in { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; }
.hero h1 { color: #fff; max-width: 14ch; }
.hero h1, .hero .lede, .hero .kicker { text-shadow: 0 2px 20px rgba(0,0,0,.45); }
.hero .lede { color: rgba(255,255,255,.92); max-width: 46ch; font-size: 1.14rem; margin-bottom: .5em; }
.hero h1 { margin-bottom: .3em; }
.hero .kicker { color: #fff; }

/* ---------- split rows ---------- */
.split { display: grid; grid-template-columns: 1.18fr .82fr; gap: 60px; align-items: center; max-width: var(--container); margin: 0 auto; }
.split img { border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.photo-pair img { border-radius: var(--r-lg); box-shadow: var(--sh-2); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split.rev .split-media { order: 2; }
.split.rev { grid-template-columns: .82fr 1.18fr; }

/* ---------- cards: food gets the room ---------- */
.grid { display: grid; gap: 28px; max-width: var(--container); margin: 0 auto; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .5s ease; }
.card:hover img { transform: scale(1.05); }
.card-body { padding: 20px 22px 24px; }
.card-body h3 { margin-bottom: .25em; display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.card-body p { font-size: .97rem; color: var(--muted); margin: 0; }

/* ---------- bands ---------- */
.dark {
  background:
    radial-gradient(820px 440px at 88% -20%, rgba(228,24,36,.22), transparent 60%),
    linear-gradient(120deg, var(--dark), var(--dark-2));
  color: #fff;
}
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark p { color: rgba(255,255,255,.82); }
.dark .kicker { color: #fff; }
.dark .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; }
.dark .card p { color: rgba(255,255,255,.76); }
.cream { background: linear-gradient(180deg, var(--cream-2), var(--cream-3)); }

/* Adjacent bands that share a tint need a visible boundary, or two sections read as one.
   Tint here is entirely class-driven (.dark and .cream are gradients, .photo-band paints its own
   image layer), so keying off the classes is sufficient. Reading background-color instead reports
   every band as transparent and produces a false mass fail. The padding bump is desktop-only:
   below 901px sections are 64px and a 116px jump would be a bigger change than the boundary is worth. */
main > section:not(.dark):not(.cream):not(.photo-band) + section:not(.dark):not(.cream):not(.photo-band),
main > .hero + section:not(.dark):not(.cream):not(.photo-band),
main > .cream + .cream { border-top: 1px solid var(--line); }
@media (min-width: 901px) {
  main > section:not(.dark):not(.cream):not(.photo-band) + section:not(.dark):not(.cream):not(.photo-band),
  main > .hero + section:not(.dark):not(.cream):not(.photo-band),
  main > .cream + .cream { padding-top: 116px; }
}

/* ---------- reviews ---------- */
.rating-strip {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-pill);
  padding: 11px 24px; box-shadow: var(--sh-1); text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink);
}
.hero .rating-strip, .dark .rating-strip { color: var(--ink); }
.rating-strip .muted { color: var(--muted); }
.rating-strip:hover { border-color: var(--gold); }
.rating-strip .stars { color: var(--gold); letter-spacing: .08em; font-size: 1.12rem; }
.review-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 30px 26px; box-shadow: var(--sh-1); position: relative;
}
/* a big quote mark in brand red — warmth with no extra asset */
.review-card::before {
  content: '\201C'; position: absolute; top: 4px; left: 22px;
  font-family: Georgia, serif; font-size: 4.2rem; line-height: 1; color: var(--red); opacity: .16;
}
.review-card blockquote { margin: 0 0 14px; font-size: 1.04rem; line-height: 1.65; position: relative; }
.review-card cite { font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; }
.review-card .src { color: var(--muted); font-size: .9rem; }

/* ---------- pills ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; margin: 0; }
.pills li {
  border: 2px solid var(--line); border-radius: var(--r-pill); padding: 9px 20px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; text-transform: uppercase;
  letter-spacing: .03em; background: var(--white);
}
.dark .pills li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 12px; background: var(--white); }
.faq summary { cursor: pointer; padding: 19px 24px; font-family: var(--font-head); font-weight: 700; font-size: 1.16rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; text-transform: uppercase; letter-spacing: .02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--red); font-size: 1.6rem; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 24px 22px; margin: 0; color: var(--ink-2); }

.notice { border-left: 4px solid var(--gold); background: var(--gold-soft); padding: 16px 20px; border-radius: var(--r-md); font-size: .97rem; }

/* ---------- sticky order bar ---------- */
.orderbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(28,19,16,.97); backdrop-filter: blur(8px);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center; justify-content: center;
  border-top: 3px solid var(--red);
}
.orderbar .btn { padding: 12px 24px; font-size: 1.04rem; }
.orderbar .who { color: #fff; font-family: var(--font-head); font-weight: 700; margin-right: auto; display: flex; flex-direction: column; line-height: 1.25; text-transform: uppercase; letter-spacing: .03em; }
.orderbar .who small { font-weight: 400; font-family: var(--font-body); text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.66); font-size: .84rem; }
body { padding-bottom: 78px; }

/* ---------- popup ---------- */
.pop-backdrop { position: fixed; inset: 0; background: rgba(20,13,10,.66); z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; }
.pop-backdrop.on { display: flex; }
.pop { background: var(--cream); border-radius: var(--r-lg); max-width: 470px; width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,.45); overflow: hidden; position: relative; }
.pop-img { height: 180px; width: 100%; object-fit: cover; }
.pop-body { padding: 28px 30px 32px; }
.pop-close { position: absolute; top: 12px; right: 14px; background: rgba(0,0,0,.55); color: #fff; border: 0; width: 34px; height: 34px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }
.pop input { width: 100%; padding: 15px 17px; border: 2px solid var(--line); border-radius: var(--r-md); font-size: 1rem; font-family: inherit; margin-bottom: 12px; background: #fff; }
.pop input:focus { outline: none; border-color: var(--red); }
.pop .fine { font-size: .84rem; color: var(--muted); margin: 12px 0 0; }

/* ---------- footer ---------- */
footer.site { background: var(--dark); color: rgba(255,255,255,.78); padding: 64px 24px 40px; }
footer.site a { color: #fff; text-decoration: none; }
footer.site a:hover { color: var(--gold); }
footer.site h3 { color: #fff; }
/* The footer brand name is an H2 so the outline never skips a level on /thank-you/ and /404.html,
   whose <main> carries an H1 and nothing else. It must still LOOK like the other footer headings,
   so it borrows the global h3 type ramp rather than the display h2 one. */
footer.site .foot-grid h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.18rem, 2vw, 1.42rem); line-height: 1.18; margin: 0 0 .4em; text-transform: uppercase; letter-spacing: .015em; color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 42px; max-width: var(--container); margin: 0 auto; }
.foot-bottom { max-width: var(--container); margin: 42px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: .9rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-map { border: 0; border-radius: var(--r-md); width: 100%; height: 190px; }

/* Footer hours. Lives on the dark band, so it is built FROM the dark palette rather than
   borrowing .notice, which is a light-section component and rendered as a glaring cream
   alert box down here — the same light-component-on-dark-band bug as the rating strip. */
/* 🛑 hoursBlock() renders in TWO places: the dark footer and the light /contact/ page. It was
   styled white-on-dark only, so on the cream contact section it was white text on cream and
   effectively invisible. Same bug class as .muted on the proof bar. Light is now the base and the
   dark surfaces override, so a new placement fails visible rather than blank. */
.hours-foot { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
/* gold on cream measured 2.11:1 and failed AA. Ink on light, gold only where the ground is dark. */
.hours-foot .hours-title {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .84rem; color: var(--ink); margin: 0 0 10px;
}
footer.site .hours-foot .hours-title, .dark .hours-foot .hours-title { color: var(--gold); }
.hours-foot dl { margin: 0; }
.hours-foot .hr-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.hours-foot dt { color: var(--ink-2); font-size: .93rem; }
.hours-foot dd {
  margin: 0; color: var(--ink); font-weight: 600; font-size: .93rem; font-variant-numeric: tabular-nums; text-align: right;
}
.hours-foot dd .dot { color: var(--gold); margin: 0 6px; }
.hours-foot .fine { margin-top: 12px; }

/* ---------- menu list ---------- */
.menu-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.menu-jump a { text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; border: 2px solid var(--line); background: var(--white); border-radius: var(--r-pill); padding: 8px 18px; }
.menu-jump a:hover { border-color: var(--red); color: var(--red); }

.menu-list { list-style: none; padding: 0; margin: 24px 0 0; max-width: 840px; }
.mi { padding: 20px 0; border-bottom: 1px solid var(--line); }
.mi:last-child { border-bottom: 0; }
.mi-head { display: flex; align-items: baseline; gap: 14px; }
.mi-head h3 { margin: 0; flex: 1; }
/* brand red on cream measured 4.13:1, just under the 4.5 AA floor. A slightly deeper red on that
   ground clears it without changing the brand colour anywhere the contrast already passes. */
.mi-price { font-family: var(--font-display); font-size: 1.18rem; color: #C21320; white-space: nowrap; }
.dark .mi-price { color: var(--gold); }
.mi p { margin: 6px 0 0; color: var(--muted); font-size: .99rem; max-width: 62ch; }
/* Was bare red uppercase text with no affordance and 8px of clearance - it read as leftover
   markup rather than a link, especially on touch where :hover never fires. */
.mi-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .82rem; color: var(--red); text-decoration: none; background: var(--white); }
.mi-link::after { content: '\2192'; font-size: .95em; }
.mi-link:hover { border-color: var(--red); text-decoration: none; }
.mi-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.dark .mi-link { background: transparent; }
.dish-price { font-family: var(--font-display); font-size: 2.2rem; color: var(--red); margin: -.2em 0 .5em; }
.card-body h3 .mi-price { font-size: 1.05rem; }

/* Menu leader dots.
   The previous version drew the dots as h3::after spanning the h3's own box - and the h3 is
   flex:1, so that box is the whole row (measured 748px against 125px of actual glyphs). The dots
   therefore ran straight THROUGH the item name. The opaque background on the h3 was meant to mask
   them, but ::after is a CHILD of the h3 and paints above its own parent's background, so that
   mask could never work at any width.
   Now the name shrinks to its text and the leader is a flex item that fills only the gap between
   the name and the price. `order` puts it between them without touching the markup. */
@media (min-width: 700px) {
  .mi-head { gap: 0; }
  .mi-head h3 { flex: 0 1 auto; }
  .mi-head h3::after { content: none; }
  .mi-head::after {
    content: ''; order: 1; flex: 1 1 auto; min-width: 26px;
    border-bottom: 2px dotted var(--line); margin: 0 10px; transform: translateY(-0.34em);
  }
  .mi-head .mi-price { order: 2; }
}

/* ---------- booking ---------- */
.book-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 24px; }
.book-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.88); }
.book-form select, .book-form input {
  padding: 14px 16px; border-radius: var(--r-md); border: 2px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08); color: #fff; font-family: var(--font-body); font-size: 1rem; min-width: 168px;
}
.book-form select:focus, .book-form input:focus { outline: none; border-color: var(--gold); }
.book-form select option { color: var(--ink); }
.book-form .btn { height: 52px; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card:hover img { transform: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--cream); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 18px; border-bottom: 1px solid var(--line); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; width: 100%; }
  .nav-toggle { display: block; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.rev .split-media { order: 0; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  section { padding: 64px 20px; }
  .hero { padding: 68px 20px 84px; }
  .orderbar .who { display: none; }
  .orderbar { justify-content: stretch; }
  .orderbar .btn { flex: 1; justify-content: center; }
  .book-form label, .book-form .btn { width: 100%; }
  .book-form select, .book-form input { width: 100%; }
}
@media (min-width: 640px) and (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- food behind the dark bands ---------- */
/* The product is the food, so the dark bands sit ON a photograph rather than on flat
   colour. Scrim is heavy enough for AA text contrast and light enough to read as food. */
.photo-band { position: relative; isolation: isolate; }
.photo-band::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg); background-size: cover; background-position: center;
}
.photo-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 460px at 84% -18%, rgba(228,24,36,.22), transparent 62%),
    linear-gradient(100deg, rgba(20,13,10,.86) 0%, rgba(20,13,10,.72) 42%, rgba(20,13,10,.52) 100%);
}

/* Light companion to .photo-band, for cream sections that keep DARK text.
   .photo-band's overlay is near-black for white type; this one lays a heavy cream wash over the
   photo so the room reads as texture behind the words without touching contrast. The element must
   NOT also carry .cream - a section's own background paints over a z-index:-2 pseudo-element, which
   would hide the photo completely. */
.photo-band-soft { position: relative; isolation: isolate; background: transparent; }
.photo-band-soft::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg); background-size: cover; background-position: center 38%;
}
.photo-band-soft::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 420px at 88% -10%, rgba(228,24,36,.10), transparent 64%),
    linear-gradient(180deg, rgba(255,250,242,.90) 0%, rgba(253,245,234,.93) 55%, rgba(253,245,234,.96) 100%);
}
@media (max-width: 700px) {
  /* Denser wash on phones: the photo is scaled up hard and the type sits closer to it. */
  .photo-band-soft::after { background: linear-gradient(180deg, rgba(255,250,242,.94), rgba(253,245,234,.96)); }
}

/* ---------- review platform links ---------- */
.platforms { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.plat {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-pill);
  padding: 11px 22px; text-decoration: none; color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 1.06rem;
  text-transform: uppercase; letter-spacing: .03em; box-shadow: var(--sh-1);
  transition: border-color .16s ease, transform .16s ease;
}
.plat:hover { border-color: var(--gold); transform: translateY(-2px); }
.plat svg { flex: 0 0 auto; }
.dark .plat { background: rgba(255,255,255,.96); }

/* ---------- video ---------- */
.vid { margin: 0; }
.vid video {
  width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block;
  border-radius: var(--r-lg); box-shadow: var(--sh-1); background: var(--dark);
}
.vid figcaption {
  margin-top: 10px; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; font-size: 1.02rem;
}

/* ---------- answer block: the passage AI search lifts ---------- */
.answer {
  background: var(--white); border-left: 5px solid var(--red);
  border-radius: var(--r-md); padding: 22px 26px; margin: 0 0 24px;
  box-shadow: var(--sh-1); max-width: 74ch;
}
.answer-lead { font-size: 1.1rem; margin: 0; color: var(--ink); }
.answer-list { margin: 14px 0 0; padding-left: 20px; }
.answer-list li { margin-bottom: 6px; color: var(--ink-2); }
.dark .answer { background: rgba(255,255,255,.07); }
.dark .answer-lead, .dark .answer-list li { color: rgba(255,255,255,.9); }

.entities { list-style: none; padding: 0; margin: 22px 0 0; max-width: 78ch; }
.entities li { padding: 13px 0; border-bottom: 1px solid var(--line); }
.entities li:last-child { border-bottom: 0; }

/* ---------- backyard/events section ---------- */
.backyard-section {
  background: linear-gradient(180deg, var(--cream), var(--cream-2));
  overflow: hidden;
}
.backyard-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 54px; align-items: center;
}
.backyard-copy { min-width: 0; }
.event-list {
  list-style: none; padding: 0; margin: 18px 0 24px;
  display: grid; gap: 12px; max-width: 64ch;
}
.event-list li {
  position: relative; padding: 14px 18px 14px 46px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.72);
}
.event-list li::before {
  content: ""; position: absolute; left: 18px; top: 1.55em; width: 13px; height: 13px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px var(--red-soft);
}
.backyard-media {
  position: relative; display: grid; grid-template-columns: 1fr .58fr;
  gap: 16px; align-items: end;
}
.backyard-media figure, .wide-photo { margin: 0; }
.backyard-media img, .wide-photo img {
  width: 100%; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.backyard-main img { aspect-ratio: 4/3; }
.backyard-detail { transform: translateY(34px); }
.backyard-detail img { aspect-ratio: 3/4; }
.backyard-media figcaption, .wide-photo figcaption {
  margin-top: 10px; color: var(--muted); font-family: var(--font-head);
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .94rem;
}
.wide-photo { margin-top: 26px; max-width: 840px; }
.wide-photo img { aspect-ratio: 16/9; }
.event-gallery {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-top: 30px;
}
.event-gallery figure { margin: 0; }
.event-gallery img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.event-gallery figcaption {
  margin-top: 9px; color: var(--muted); font-family: var(--font-head);
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .9rem;
}
.silent-disco-grid {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(220px, 280px) minmax(0, .9fr);
  gap: 28px; align-items: center;
}
.silent-disco-copy { min-width: 0; }
.event-reel { justify-self: center; width: 100%; max-width: 260px; }
.silent-disco-photos {
  display: grid; gap: 18px;
}
.silent-disco-photos figure { margin: 0; }
.silent-disco-photos img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.silent-disco-photos figure:last-child img { aspect-ratio: 16/10; }
.silent-disco-photos figcaption {
  margin-top: 9px; color: rgba(255,255,255,.72); font-family: var(--font-head);
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .88rem;
}

/* ---------- stat band: real numbers, set large ---------- */
.statband { background: var(--dark); color: #fff; padding: 44px 24px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--container); margin: 0 auto; }
.stat { text-align: center; border-right: 1px solid rgba(255,255,255,.16); }
.stat:last-child { border-right: 0; }
.stat-n {
  display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1; color: var(--gold);
}
.stat-l {
  display: block; margin-top: 8px; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; font-size: .92rem; color: rgba(255,255,255,.72);
}

/* ---------- feature dish: one plate, poster-sized ---------- */
.feature {
  position: relative; isolation: isolate; color: #fff;
  min-height: 620px; display: flex; align-items: flex-end;
  padding: 64px 24px 72px; overflow: hidden;
}
.feature::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg); background-size: cover; background-position: center;
}
.feature::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 420px at 88% 8%, rgba(228,24,36,.24), transparent 60%),
    linear-gradient(0deg, rgba(20,13,10,.92) 0%, rgba(20,13,10,.62) 42%, rgba(20,13,10,.14) 100%);
}
.feature-in { max-width: var(--container); margin: 0 auto; width: 100%; }
.feature h2 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.6rem); margin-bottom: .18em; }
.feature .kicker { color: #fff; }
.feature-desc { font-size: 1.18rem; color: rgba(255,255,255,.9); max-width: 46ch; }
.feature-price {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
  color: var(--gold); margin: 0 0 22px;
}

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .stat:nth-child(2) { border-right: 0; }
  .feature { min-height: 480px; padding: 48px 20px 56px; }
}
.feature-quote { font-size: 1.04rem; color: rgba(255,255,255,.82); font-style: italic; max-width: 44ch; margin: 0 0 14px; }


/* ---------- v3 hero: split, with a portrait video card ----------
   The clips are 720x1280 phone verticals. A full-bleed video background would crop
   them to a ribbon, so the video is a real element sized to its own aspect instead. */
.hero-split .hero-in {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.hero-copy { min-width: 0; }
.hero-split h1 { max-width: 15ch; }
.hero-split .lede { max-width: 50ch; }

.hero-proof {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 22px 0 0; font-size: 1rem; color: rgba(255,255,255,.9);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.hero-proof .stars { color: var(--gold); letter-spacing: .06em; }

/* Trust chips. One claim per <li>, each in its own bounded box, so the set reads as three
   discrete proofs rather than a dot-separated run-on line with a bare text node on the end.
   The hero sits on a photograph, so the chips take a translucent-on-dark treatment; .pills's
   default white fill is a light-section component and reads as a slab down here. */
.hero-chips { margin: 22px 0 0; }
.hero .pills li { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.38); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.hero .pills li a { color: #fff; text-decoration: none; }
.hero .pills li a:hover { color: var(--gold); }
.hero-proof a { color: #fff; font-weight: 700; }
.hero-proof .dot { opacity: .5; }

.hero-reel { position: relative; justify-self: end; width: 236px; flex: 0 0 auto; }
.hero-reel video {
  width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover; display: block;
  border-radius: 26px; background: var(--dark);
  border: 5px solid rgba(255,255,255,.9);
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
}
.reel-tag {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -14px;
  background: var(--red); color: #fff; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: .92rem; padding: 8px 18px; border-radius: var(--r-pill);
  box-shadow: var(--sh-accent);
}

/* ---------- video section: a reel strip, not a grid of players ---------- */
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: var(--container); margin: 0 auto; }
.reel { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); background: var(--dark); }
.reel video { width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover; display: block; }
.reel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px;
  background: linear-gradient(0deg, rgba(20,13,10,.92), transparent);
  color: #fff; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; font-size: .98rem; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-reel video { display: none; }
  .hero-reel { background-size: cover; background-position: center; aspect-ratio: 9/16; border-radius: 26px; }
}

@media (max-width: 900px) {
  .hero-split .hero-in { grid-template-columns: 1fr; gap: 34px; }
  .hero-reel { max-width: 250px; order: 2; }
  .reels { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}


/* ---------- v4 hero: a wall of food reels, filling the right half ----------
   Three portrait clips, staggered and tilted so the block reads as one composed object
   rather than three boxes. All muted+looping: the food should be moving, not posed. */
.hero-split .hero-in { grid-template-columns: 1fr minmax(420px, 46%); gap: 32px; }

.reel-wall {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; align-items: center; justify-self: stretch;
  min-width: 0;
}
.rw { margin: 0; position: relative; }
.rw video {
  width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover; display: block;
  border-radius: 16px; background: var(--dark);
  border: 4px solid rgba(255,255,255,.92);
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
}
.rw figcaption {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  background: var(--red); color: #fff; text-align: center; white-space: nowrap;
  /* 🛑 Sized to the LONGEST tag ("Brunch 9–4"), not the prices. Alfa Slab One is very wide:
     at the old .96rem that tag overran its card and the hero edge clipped it mid-word.
     Cards scale with the viewport, so the pill scales the same way — clamped so it never
     grows past what the narrowest card fits. Check any new REELS3 tag against this. */
  font-family: var(--font-display); font-size: clamp(.68rem, .82vw, .84rem); line-height: 1;
  padding: 8px 13px; border-radius: var(--r-pill); box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
/* stagger + tilt: the flamboyant bit */
.rw-1 { transform: translateY(-26px) rotate(-4deg); }
.rw-2 { transform: translateY(16px) rotate(2.5deg); z-index: 2; }
.rw-3 { transform: translateY(-14px) rotate(-2deg); }

@media (prefers-reduced-motion: reduce) {
  .rw video { display: none; }
  .rw { aspect-ratio: 9/16; border-radius: 16px; background-size: cover; background-position: center; }
  .rw-1, .rw-2, .rw-3 { transform: none; }
}

@media (max-width: 900px) {
  .hero-split .hero-in { grid-template-columns: minmax(0, 1fr); }
  .reel-wall { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .rw-1, .rw-2, .rw-3 { transform: none; }
  .rw figcaption { font-size: .62rem; padding: 5px 6px; }
  .backyard-grid { grid-template-columns: 1fr; gap: 32px; }
  .backyard-media { grid-template-columns: 1fr; }
  .backyard-detail { transform: none; }
  .event-gallery { grid-template-columns: 1fr 1fr; gap: 14px; }
  .silent-disco-grid { grid-template-columns: 1fr; gap: 24px; }
  .event-reel { max-width: 240px; justify-self: start; }
  .silent-disco-photos { grid-template-columns: 1fr 1fr; }
}

/* variant B — full-bleed photo, centred copy */
.hero-full .hero-in.hero-centered { display: block; text-align: center; }
.hero-full .hero-copy { margin: 0 auto; }
.hero-full h1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero-full .lede { max-width: 56ch; margin-left: auto; margin-right: auto; }
.hero-full .btn-row, .hero-full .hero-proof { justify-content: center; }
.hero-full { padding: 92px 24px 104px; }

/* variant C — one big portrait clip */
/* C: reel sized to actually fit above the sticky bar, and pulled in so the middle
   does not go dead the way it did on the first pass. */
.hero-single .hero-in { grid-template-columns: 1fr auto; gap: 40px; }
.hero-single .hero-reel { width: 232px; max-width: 232px; justify-self: end; }

/* ---------- reel section: sized sanely + a real play affordance ----------
   At a wide viewport a 4-up 9:16 grid rendered ~900px tall each and swallowed the
   screen. Cap the column so the strip stays a strip. */
/* five clips, sized to fill the container exactly so row two is never a two-card orphan */
.reels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 0 24px; }
.reel { cursor: pointer; }
.reel-play {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(228,24,36,.94); box-shadow: 0 10px 26px rgba(0,0,0,.45);
  display: grid; place-items: center; transition: transform .16s ease, opacity .16s ease;
}
.reel-play span {
  width: 0; height: 0; margin-left: 5px;
  border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.reel:hover .reel-play { transform: scale(1.08); }
.reel.playing .reel-play { opacity: 0; pointer-events: none; }
.reel.playing figcaption { opacity: 0; }
.reel figcaption { transition: opacity .2s ease; }

@media (max-width: 1040px) {
  /* the carousel: one row, swipeable, cards stay a readable size instead of shrinking */
  .reels {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 24px 4px;
  }
  .reels::-webkit-scrollbar { display: none; }
  .reel { flex: 0 0 30%; min-width: 200px; max-width: 260px; scroll-snap-align: center; }
}

@media (max-width: 900px) {
  /* a percentage basis resolves against the rail's CONTENT box (width minus 48px of
     padding), which on a 375px phone clamped the card to its 200px min. Size off the
     viewport instead so the card is the bold ~72% of screen the rail is meant to show. */
  .reel { flex: 0 0 auto; width: 72vw; min-width: 0; max-width: 300px; }
  .reel-play { width: 48px; height: 48px; }
  .reel-play span { border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; }
}

/* fine print sitting on a dark band */
.fine.on-dark { color: rgba(255,255,255,.62); margin-top: 14px; }
.fine.on-dark a { color: #fff; }


/* ---------- depth layer: progressive disclosure ----------
   NOT hidden text. The copy is in the served HTML and every crawler reads it; <details> simply
   lets the visitor choose when to see it. Hiding text from users while showing it to search
   engines is a Google spam-policy violation — this is the legitimate shape of the same idea. */
.acc { border-top: 1px solid var(--line); margin-top: 26px; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item > summary {
  cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative;
  font-family: var(--font-head); font-weight: 700; font-size: 1.12rem;
  letter-spacing: .01em; color: var(--ink);
}
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-item > summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px;
  border-right: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.acc-item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.acc-item > summary:hover { color: var(--red); }
.acc-item > summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.acc-body { padding: 0 0 22px; max-width: 74ch; }
.acc-body > :first-child { margin-top: 0; }
.acc-body p { margin: 0 0 14px; }
.acc-body p:last-child { margin-bottom: 0; }

/* on a dark band */
.dark .acc, .dark .acc-item { border-color: rgba(255,255,255,.16); }
.dark .acc-item > summary { color: #fff; }
.dark .acc-item > summary:hover { color: var(--gold); }
.dark .acc-item > summary::after { border-color: var(--gold); }
.dark .acc-body p, .dark .acc-body li { color: rgba(255,255,255,.82); }

/* tick list used across the depth modules */
.ticks { list-style: none; padding: 0; margin: 0 0 14px; max-width: 74ch; }
.ticks li { position: relative; padding: 0 0 10px 26px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 11px; height: 6px;
  border-left: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red);
  transform: rotate(-45deg);
}
.dark .ticks li::before { border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .acc-item > summary::after { transition: none; }
}


/* a real guest quote naming one dish */
.dq {
  margin: 18px 0 10px; padding: 0; border: 0;
  font-family: var(--font-display); font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.28; color: var(--ink);
}

/* a real guest sentence sitting under the dish it names */
.mi-quote { margin: 6px 0 0; font-style: italic; color: var(--ink-2); font-size: .95rem; }
/* The attribution is a <cite> in the markup, not a <span> - this selector targeted span and
   therefore never matched, so the reviewer's name inherited the quote's italic and ran on as if it
   were part of the sentence. Both are listed now; <cite> is what actually ships. */
.mi-quote cite, .mi-quote span { display: block; margin-top: 3px; font-style: normal; color: var(--ink-2); font-size: .84rem; opacity: .85; }
.mi-quote cite::before { content: '\2014\00a0'; }


/* sound toggle on a reel — only ever appears once the clip is playing, because a speaker
   icon on a still poster implies audio is already running */
.reel-sound {
  position: absolute; right: 10px; top: 10px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; cursor: pointer; z-index: 3;
  background: rgba(20,13,10,.62); backdrop-filter: blur(4px);
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.reel.playing .reel-sound { opacity: 1; pointer-events: auto; }
.reel-sound:hover { transform: scale(1.08); background: rgba(228,24,36,.92); }
.reel-sound:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; opacity: 1; pointer-events: auto; }
.reel-sound svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.reel-sound .spk { fill: #fff; stroke: none; }
/* muted by default: show the cross, hide the waves. .sound flips it. */
.reel-sound .wav { display: none; }
.reel.sound .reel-sound .mut { display: none; }
.reel.sound .reel-sound .wav { display: block; }

@media (prefers-reduced-motion: reduce) {
  .reel-sound { transition: none; }
}


/* a11y — both flagged by Lighthouse, both fixed against the measured contrast ratio.
   ⚠️ First attempt made one of them WORSE: darkening .muted globally to #6B5B4E fixed it on
   cream and dropped it to 2.81:1 on the two DARK surfaces (.proofbar and footer.site), which
   are dark without carrying the .dark class. Scoped per surface now. */
.muted { color: #6B5B4E; }                                  /* on cream: passes AA */
.dark .muted, .hero .muted,
.proofbar .muted, footer.site .muted { color: rgba(255,255,255,.82); }   /* on dark: passes AA */

/* footer.site a and .proofbar a both set text-decoration:none, which beat the underline rule
   below on source order — so an in-paragraph link was distinguishable by colour alone. */
footer.site p a, .proofbar p a, footer.site .fine a { text-decoration: underline; text-underline-offset: 2px; }
.hours-foot .fine a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.7); }
/* A link inside a paragraph must not be distinguishable by colour alone. */
.acc-body a, .lede a, section p a:not(.btn):not(.mi-link), .fine a {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.dark .acc-body a, .dark .lede a, .dark section p a:not(.btn) { text-decoration-color: rgba(255,255,255,.55); }

/* SVG stars: brand-coloured, consistent across platforms, unlike the U+2605 glyph */
.stars { display: inline-flex; align-items: center; gap: 1px; vertical-align: -2px; }
.stars svg { width: 1em; height: 1em; }
.stars svg.on { fill: var(--gold); }
.stars svg.off { fill: none; stroke: var(--gold); stroke-width: 1.6; opacity: .55; }
.proofbar .stars svg.on, footer.site .stars svg.on { fill: var(--gold); }

/* event photography grid */
.ev { margin: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); background: var(--cream-2); }
.ev img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }


/* the dark surfaces that also carry the hours block */
footer.site .hours-foot, .dark .hours-foot { border-top-color: rgba(255,255,255,.16); }
footer.site .hours-foot dt, .dark .hours-foot dt { color: rgba(255,255,255,.72); }
footer.site .hours-foot dd, .dark .hours-foot dd { color: #fff; }
footer.site .hours-foot .fine a, .dark .hours-foot .fine a { text-decoration-color: rgba(255,255,255,.7); }

footer.site .hours-foot .fine, .dark .hours-foot .fine { color: rgba(255,255,255,.66); }
footer.site .hours-foot .fine a, .dark .hours-foot .fine a { color: #fff; }
.hours-foot .fine { color: var(--ink-2); }
.hours-foot .fine a { color: var(--red); }

/* visually hidden but read by assistive tech and crawlers: used where a heading level is needed
   for a valid outline but a visible one would be redundant. NOT hidden content. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- motion: one real, restrained keyframe animation ----------
   Website Checklist r261 requires at least one @keyframes actually SERVED live: zero motion in a
   site's own CSS is the mechanical signature of a static build. This is the site's own play
   affordance, not decoration bolted on — the reel-play button breathes once so a poster frame
   reads as playable rather than as a still. It runs on chrome, never on content, so it can never
   gate anything, and it stops entirely under prefers-reduced-motion. */
@keyframes ur-play-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(228, 24, 36, .42); }
  70%  { box-shadow: 0 0 0 14px rgba(228, 24, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 24, 36, 0); }
}
.reel:not(.playing) .reel-play { animation: ur-play-pulse 3.2s ease-out 1.2s 3; }

/* ---------- print ----------
   r258: the reveal system hides sections until the observer fires. Print and PDF renderers do not
   scroll, so without this override a printed page ships blank or half-empty below the fold.
   Motion and fixed chrome are stripped too — a fixed bar repeats on every printed sheet. */
@media print {
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .reel-play { animation: none !important; }
  .orderbar, .pop-backdrop, .nav-toggle { display: none !important; }
  body { padding-bottom: 0 !important; }
  .foot-map, video { break-inside: avoid; }
}

/* ---------- breadcrumbs (r223: the visible half of BreadcrumbList) ---------- */
.crumbs { background: var(--cream); border-bottom: 1px solid var(--line); font-size: .86rem; }
.crumbs ol { list-style: none; margin: 0; padding: 9px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.crumbs li { display: flex; align-items: center; color: #6b5c56; }
.crumbs li + li::before { content: "/"; margin: 0 9px; color: #b7a9a3; }
.crumbs a { color: #6b5c56; text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--red); border-bottom-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }
@media (max-width: 600px) { .crumbs { font-size: .8rem; } .crumbs ol { padding: 7px 0; } }

/* Tappable chips.
   1. Anchor targets sit under a position:sticky header, so a bare #id jump lands the heading
      BEHIND the nav. scroll-margin-top pushes each target clear of it.
   2. .pills-link chips are links, so they get the same affordance the menu-jump chips have. */
[id] { scroll-margin-top: 96px; }
.pills-link li { padding: 0; }
.pills-link li a { display: block; padding: 8px 16px; text-decoration: none; color: inherit; border-radius: var(--r-pill); }
.pills-link li:hover { border-color: var(--red); }
.pills-link li:hover a { color: var(--red); }
.pills-link li a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }