/* GENERATED — edit site.css / motion.css, then run: node build-css.mjs */
/* ============================================================
   TEN STREETS SOCIAL — design system
   Palette + type per the official brand pack (Aug 2026):
   beige #E8E3D6 · brass #E1B573 · near-black #201F1F · EFC blue #497CBF
   Anton = titles/H1 · Courier Prime = subheads, nav links, buttons
   Helvetica = body. Brand's 'brass text on light' rule is deliberately
   NOT followed for body copy: it measures 1.48:1 (WCAG needs 4.5:1).
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --paper:      #E8E3D6;
  --paper-soft: #DED8C8;
  --ink:        #201F1F;
  --ink-soft:   #3B3A31;
  --pine:       #27402F;
  --brass:      #E1B573;
  --brass-deep: #9E6B26;   /* 3.6:1 on brand beige - UI borders, focus rings, icons only */
  --brick:      #8C4526;   /* 5.2:1 on cream (was #A3502E at 4.17:1) */
  --efc-blue:   #497CBF;
  --white:      #FAF7F0;
  --line:       rgba(32,31,31,.16);
  --line-soft:  rgba(32,31,31,.09);
  --shadow:     0 18px 50px -18px rgba(32,31,31,.35);

  --font-display: "Anton", "Anton Fallback", "Arial Narrow", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-mono: "Courier Prime", ui-monospace, "Courier New", monospace;

  --fs-hero:  clamp(3.2rem, 9.5vw, 8.2rem);
  --fs-h1:    clamp(2.6rem, 6.5vw, 5.2rem);
  --fs-h2:    clamp(2rem, 4.6vw, 3.6rem);
  --fs-h3:    clamp(1.35rem, 2.6vw, 1.9rem);
  --fs-body:  clamp(1rem, 1.1vw, 1.11rem);
  --fs-small: .86rem;

  --space-1: clamp(1rem, 2vw, 1.5rem);
  --space-2: clamp(1.75rem, 3.5vw, 2.75rem);
  --space-3: clamp(3rem, 6.5vw, 5.5rem);
  --space-4: clamp(4.5rem, 9vw, 8rem);

  --wrap: 1240px;
  --radius: 4px;
  --header-h: 76px;
  --action-bar-h: 66px;   /* keep in sync with .action-bar a min-height + padding */
  --ease: cubic-bezier(.22,.61,.25,1);
}

@font-face{
  font-family:"Anton";
  src:url("../fonts/anton-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026;
}
@font-face{
  font-family:"Courier Prime";
  src:url("../fonts/courier-prime-latin-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026;
}
@font-face{
  font-family:"Courier Prime";
  src:url("../fonts/courier-prime-latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026;
}

/* Metrics-adjusted fallback: Arial Narrow scaled so headings occupy the same
   box before Anton arrives. Measured at 100px: Anton 1323×151, Arial Narrow
   1138×115 → size-adjust 116.3%; overrides split Anton's 1.51em line box.
   This removes the font-swap layout shift (was the last 0.015 CLS). */
@font-face{
  font-family:"Anton Fallback";
  src:local("Arial Narrow"), local("Liberation Sans Narrow"), local("Arial");
  size-adjust:116.3%;
  ascent-override:100%;
  descent-override:25%;
  line-gap-override:0%;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul[role="list"]{ list-style:none; }
button{ font:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--brass-deep); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--brass); color:var(--ink); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--white); padding:.8rem 1.4rem;
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- typography ---------- */
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.96;
  letter-spacing:.005em;
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.1; }
p{ max-width:62ch; }
.lede{ font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.55; color:var(--ink-soft); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brick); margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; width:2rem; height:2px; background:currentColor; }
.center .eyebrow::before{ display:none; }

/* ---------- layout ---------- */
.wrap{ width:min(100% - clamp(2rem,6vw,4rem), var(--wrap)); margin-inline:auto; }
.section{ padding-block:var(--space-4); position:relative; }
.section--tight{ padding-block:var(--space-3); }
.section--dark{ background:var(--ink); color:var(--paper); }
.section--dark .lede{ color:rgba(237,232,218,.78); }
.section--dark .eyebrow{ color:var(--brass); }
.section--soft{ background:var(--paper-soft); }
.center{ text-align:center; }
.center p{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;
  font-size:1.02rem; line-height:1;
  padding:1.02rem 1.9rem .92rem;
  border-radius:var(--radius);
  text-decoration:none; border:2px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  min-height:48px;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brass); color:var(--ink); }
.btn--primary:hover{ background:var(--brass-deep); color:var(--white); }
.btn--ghost{ border-color:currentColor; color:var(--ink); background:transparent; }
/* `.on-dark` is applied to the button itself as well as to containers, so it needs
   both a self and a descendant selector — the descendant form alone silently failed. */
.section--dark .btn--ghost, .on-dark .btn--ghost, .btn--ghost.on-dark, .hero .btn--ghost{ color:var(--paper); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.section--dark .btn--ghost:hover, .on-dark .btn--ghost:hover,
.btn--ghost.on-dark:hover, .hero .btn--ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--lg{ font-size:1.15rem; padding:1.2rem 2.4rem 1.08rem; }
/* Outline buttons sitting on photography need their own backdrop — a scrim alone
   can't guarantee legibility over an unpredictable image. */
.hero .btn--ghost{ background:rgba(32,31,31,.45); backdrop-filter:blur(3px); }
.hero .btn--ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hero .text-link{
  background:rgba(32,31,31,.45); backdrop-filter:blur(3px);
  padding:.5rem .75rem; border-radius:var(--radius);
}
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.text-link{
  font-weight:700; letter-spacing:.02em; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--brass); text-decoration-thickness:2px; text-underline-offset:4px;
}
.text-link:hover{ color:var(--brick); }
/* On ink backgrounds the default ink colour would render the link invisible. */
.section--dark .text-link, .hero .text-link, .on-dark .text-link{ color:var(--paper); }
.section--dark .text-link:hover, .hero .text-link:hover, .on-dark .text-link:hover{ color:var(--brass); }
/* Standalone text links (card footers, hero tertiary) need a real touch area. */
.card__body .text-link, .hero .text-link, .empty-state .text-link{
  display:inline-flex; align-items:center; min-height:44px;
}

/* ---------- announcement bar ---------- */
.announce{
  background:var(--pine); color:var(--paper);
  font-size:.9rem; text-align:center; padding:.55rem 1rem;
  letter-spacing:.02em;
}
.announce a{
  color:var(--brass); font-weight:700; text-decoration-thickness:2px; text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:44px; padding-inline:.15rem; /* thumb target */
}
.announce{ display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap; min-height:44px; padding-block:.15rem; }
@media (max-width:520px){ .announce{ font-size:.82rem; } }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(237,232,218,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 8px 30px -18px rgba(32,31,31,.4); }
.header-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--header-h);
}
.brand{
  font-family:var(--font-display); text-transform:uppercase; text-decoration:none;
  font-size:1.25rem; line-height:1; letter-spacing:.01em; color:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  min-height:48px; padding-block:.35rem;
}
.brand small{
  font-family:var(--font-body); font-weight:700; font-size:.6rem;
  letter-spacing:.34em; color:var(--brick); margin-top:.28rem;
}
.nav-desktop{ display:none; }
.nav-desktop a{
  text-decoration:none; font-weight:600; font-size:.93rem; letter-spacing:.03em;
  padding:.5rem .78rem; border-radius:var(--radius); color:var(--ink);
  transition:background .2s var(--ease);
}
.nav-desktop a:hover{ background:rgba(32,31,31,.07); }
.nav-desktop a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--brass-deep); border-radius:0; }
.header-cta{ display:none; }
.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:12px; background:none; border:0; border-radius:var(--radius);
}
.nav-toggle span{ display:block; height:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (min-width: 960px){
  .nav-desktop{ display:flex; align-items:center; gap:.15rem; }
  .header-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
}

/* dropdown */
.nav-item{ position:relative; }
.nav-item > a{ display:inline-flex; align-items:center; gap:.35rem; }
.nav-item .chev{ width:.62em; height:.62em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:230px; background:var(--white); border:1px solid var(--line-soft); border-radius:6px;
  box-shadow:var(--shadow); padding:.5rem;
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown a{ display:block; padding:.62rem .85rem; border-radius:4px; font-size:.92rem; }
.dropdown a:hover{ background:var(--paper); }
.dropdown .dd-note{ font-size:.75rem; color:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase; padding:.5rem .85rem .2rem; }

/* mobile nav panel */
.nav-mobile{
  display:none; position:fixed; inset:0; top:0; z-index:99;
  background:var(--ink); color:var(--paper);
  padding:calc(var(--header-h) + 2.5rem) 2rem 2rem;
  overflow-y:auto;
}
.nav-mobile.is-open{ display:block; }
.nav-mobile a{ text-decoration:none; }
.nav-mobile .nm-primary a{
  display:block; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2rem, 8vw, 3rem); line-height:1.16; padding:.35rem 0; color:var(--paper);
}
.nav-mobile .nm-primary a:hover{ color:var(--brass); }
.nav-mobile .nm-secondary{ margin-top:2rem; display:grid; gap:.5rem; }
.nav-mobile .nm-secondary a{ color:rgba(237,232,218,.72); font-size:1.02rem; padding:.2rem 0; }
.nav-mobile .btn{ margin-top:2.2rem; width:100%; }
body.nav-open{ overflow:hidden; }
@media (min-width:960px){ .nav-mobile{ display:none !important; } }

/* ---------- hero ---------- */
.hero{
  position:relative; display:grid; align-items:end;
  min-height:min(92svh, 940px);
  color:var(--white); overflow:hidden;
  background:var(--ink);
}
.hero__media, .hero__media picture, .hero__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
/* Two scrims: a vertical one for the header/CTA area and a horizontal one so
   left-aligned headings stay legible whatever the photograph is doing. */
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(32,31,31,.80) 0%, rgba(32,31,31,.55) 34%, rgba(32,31,31,.05) 68%),
    linear-gradient(180deg, rgba(32,31,31,.45) 0%, rgba(32,31,31,.10) 38%, rgba(32,31,31,.82) 100%);
}
@media (max-width:760px){
  .hero__media::after{
    background:linear-gradient(180deg, rgba(32,31,31,.50) 0%, rgba(32,31,31,.25) 35%, rgba(32,31,31,.88) 100%);
  }
}
/* No width here — the .wrap class on this element owns the gutter and max-width.
   Setting width:100% previously overrode it and pushed hero text to the screen edge. */
.hero__inner{ position:relative; z-index:2; padding-block:clamp(2.5rem,6vw,4.5rem); }
/* Keep hero CTAs clear of the fixed mobile action bar. */
@media (max-width:959px){
  .hero__inner{ padding-bottom:calc(var(--action-bar-h) + env(safe-area-inset-bottom) + 1.4rem); }
}
.hero__kicker{
  font-size:.85rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); margin-bottom:1.2rem; display:block;
}
.hero h1{ font-size:var(--fs-hero); max-width:13.5ch; }
.hero .lede{ color:rgba(250,247,240,.88); margin-top:1.3rem; max-width:46ch; }
.hero .btn-row{ margin-top:2.2rem; }
@media (max-width:560px){
  .hero .btn-row .btn{ flex:1 1 0; }
  .hero .btn--lg{ font-size:1rem; padding:1.05rem 1rem .95rem; }
  .hero .text-link{ flex-basis:100%; }
}
.hero--page{ min-height:min(62svh, 620px); }

/* ---------- marquee (brand motif from the current site) ---------- */
.marquee{
  overflow:hidden; white-space:nowrap; user-select:none;
  border-block:1px solid var(--line); padding-block:.85rem;
  background:var(--paper);
}
.marquee--dark{ background:var(--ink); color:var(--brass); border-color:rgba(237,232,218,.15); }
.marquee__track{ display:inline-flex; gap:2.6rem; padding-right:2.6rem; animation:marquee 36s linear infinite; }
.marquee span{
  font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem; letter-spacing:.05em;
  display:inline-flex; align-items:center; gap:2.6rem;
}
.marquee span::after{ content:"•"; color:var(--brass-deep); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ---------- split editorial ---------- */
.split{ display:grid; gap:var(--space-2); align-items:center; }
@media (min-width:920px){
  .split{ grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); }
  .split--flip > .split__media{ order:2; }
}
.split__media{ position:relative; }
.split__media img{ border-radius:6px; box-shadow:var(--shadow); width:100%; object-fit:cover; }
.split__media--stack{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.split__media--stack img:nth-child(2){ margin-top:2.2rem; }
.split__body .btn-row{ margin-top:1.8rem; }
.split__body p + p{ margin-top:1rem; }
.split__body h2 + p, .split__body h1 + p{ margin-top:1.2rem; }
.badge-note{
  display:inline-block; margin-top:1.4rem; padding:.55rem .9rem; border-left:3px solid var(--brass-deep);
  background:rgba(225,181,115,.14); font-size:.9rem; line-height:1.5; max-width:52ch;
}

/* ---------- info cards / menus ---------- */
.cards{ display:grid; gap:1.1rem; }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1080px){ .cards--4{ grid-template-columns:repeat(4,1fr);} .cards--3{ grid-template-columns:repeat(3,1fr);} }
.card{
  background:var(--white); border:1px solid var(--line-soft); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card__media{ aspect-ratio:4/3; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:1.3rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card__body h3{ font-size:1.3rem; }
.card__meta{ font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brick); }
.card__body p{ font-size:.94rem; color:var(--ink-soft); line-height:1.5; }
.card__body .text-link{ margin-top:auto; padding-top:.6rem; font-size:.9rem; }

/* menu lists (crawlable HTML menus) */
.menu-section + .menu-section{ margin-top:var(--space-2); }
.menu-section h3{ padding-bottom:.7rem; border-bottom:2px solid var(--ink); margin-bottom:1rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.menu-section h3 small{ font-family:var(--font-body); font-size:.8rem; font-weight:700; letter-spacing:.12em; color:var(--brick); text-transform:uppercase; }
.menu-list{ display:grid; gap:.85rem; }
@media(min-width:860px){ .menu-list--2col{ grid-template-columns:1fr 1fr; column-gap:3rem; } }
.menu-item{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.menu-item dt{ font-weight:700; }
.menu-item dd{ color:var(--ink-soft); font-size:.92rem; line-height:1.45; }
.menu-item .dots{ flex:1; border-bottom:2px dotted var(--line); transform:translateY(-4px); min-width:2rem; }
.menu-item .price{ font-weight:700; white-space:nowrap; }
.diet-note{
  margin-top:var(--space-2); padding:1.1rem 1.3rem; border-radius:6px;
  background:rgba(39,64,47,.08); border:1px solid rgba(39,64,47,.18);
  font-size:.94rem; max-width:78ch;
}

/* ---------- events ---------- */
.event-list{ display:grid; gap:1.1rem; }
.event{
  display:grid; gap:1.2rem; background:var(--white); border:1px solid var(--line-soft); border-radius:6px;
  padding:1.4rem; align-items:center;
}
@media(min-width:820px){ .event{ grid-template-columns:auto 1fr auto; gap:2rem; padding:1.6rem 2rem; } }
.event--past{ opacity:.62; }
.event--past .btn{ pointer-events:none; background:var(--paper-soft); color:var(--ink-soft); }
/* Reads as a deliberate editorial note rather than a "nothing here" box. */
.empty-state{
  border:1px solid var(--line); border-left:3px solid var(--brass);
  border-radius:6px; padding:clamp(1.4rem,3vw,2.2rem);
  background:rgba(225,181,115,.06);
}
.empty-state h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
.section--dark .empty-state{ border-color:rgba(237,232,218,.18); border-left-color:var(--brass); background:rgba(237,232,218,.04); }

/* ---------- quote / review ---------- */
.quote{ max-width:840px; margin-inline:auto; text-align:center; }
.quote blockquote{
  font-family:Georgia, "Times New Roman", serif; font-style:italic;
  font-size:clamp(1.3rem, 2.6vw, 1.9rem); line-height:1.45; text-wrap:balance;
}
.quote figcaption{ margin-top:1.4rem; font-size:.85rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brick); }
.section--dark .quote figcaption, .section--dark .card__meta{ color:var(--brass); }
.review{
  background:var(--white); border:1px solid var(--line-soft); border-radius:6px; padding:1.5rem;
  font-size:.95rem; line-height:1.6;
}
.review footer{ margin-top:1rem; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- visit / hours ---------- */
.hours{ width:100%; border-collapse:collapse; font-size:.97rem; }
.hours th, .hours td{ text-align:left; padding:.55rem 0; border-bottom:1px solid var(--line-soft); }
.hours td{ text-align:right; font-variant-numeric:tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td{ font-weight:700; color:var(--brick); }
.section--dark .hours tr.is-today th, .section--dark .hours tr.is-today td{ color:var(--brass); }
.hours tr.is-today th::after{
  content:"Today"; display:inline-block; margin-left:.6rem; padding:.16rem .45rem;
  font-family:var(--font-body); font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; border:1px solid currentColor; border-radius:3px; vertical-align:middle;
}
.contact-list{ display:grid; gap:.9rem; }
.contact-list a{ font-weight:600; }
.map-embed{
  border:0; width:100%; height:100%; min-height:340px; border-radius:6px; filter:grayscale(.2) contrast(1.02);
}

/* ---------- forms ---------- */
.form{ display:grid; gap:1.1rem; }
.form-grid{ display:grid; gap:1.1rem; }
@media(min-width:720px){ .form-grid--2{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.4rem; }
.field label .opt{ font-weight:400; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  width:100%; padding:.85rem 1rem; font:inherit; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius);
  transition:border-color .2s var(--ease);
  min-height:48px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass-deep); box-shadow:0 0 0 3px rgba(225,181,115,.25); }
.field .hint{ font-size:.8rem; color:var(--ink-soft); margin-top:.35rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#B3261E; }
.field .error-msg{ display:none; color:#B3261E; font-size:.82rem; font-weight:600; margin-top:.35rem; }
.field.has-error .error-msg{ display:block; }
.form-success{
  display:none; background:rgba(39,64,47,.1); border:1.5px solid var(--pine); border-radius:6px;
  padding:1.6rem;
}
.form-success.is-visible{ display:block; }
.form-success h3{ color:var(--pine); margin-bottom:.4rem; }

/* ---------- gallery strip ---------- */
.gallery-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
@media(min-width:860px){ .gallery-strip{ grid-template-columns:repeat(4,1fr);} }
.gallery-strip img{ border-radius:6px; aspect-ratio:3/4; object-fit:cover; width:100%; }
.gallery-strip img:nth-child(even){ transform:translateY(1.1rem); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem 0; font-weight:700; font-size:1.02rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-display); font-size:1.4rem; color:var(--brass-deep); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .faq-a{ padding:0 0 1.2rem; color:var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(2.4rem,5.5vw,4.4rem); max-width:20ch; margin-inline:auto; }
.cta-band .btn-row{ justify-content:center; margin-top:2rem; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:var(--paper); padding:var(--space-3) 0 7rem; }
@media(min-width:960px){ .site-footer{ padding-bottom:var(--space-3); } }
.footer-grid{ display:grid; gap:2.4rem; }
@media(min-width:860px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:3rem; } }
.footer-brand .display{ font-size:1.7rem; }
.footer-brand p{ color:rgba(237,232,218,.7); font-size:.92rem; margin-top:.9rem; max-width:34ch; }
.site-footer .footer-h{ font-size:.85rem; font-family:var(--font-body); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:1.1rem; }
.footer-links{ display:grid; gap:.55rem; }
.footer-links a{ color:rgba(237,232,218,.85); text-decoration:none; font-size:.95rem; }
.footer-links a:hover{ color:var(--brass); }
.footer-meta{
  margin-top:var(--space-2); padding-top:1.6rem; border-top:1px solid rgba(237,232,218,.14);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.8rem; color:rgba(237,232,218,.72);
}
/* Inherits the surrounding text colour so it stays legible on any background. */
.linkish{
  color:inherit; text-decoration:underline; text-decoration-color:var(--brass-deep);
  text-underline-offset:3px; text-decoration-thickness:2px;
  background:none; border:0; padding:0; font:inherit; font-weight:700; cursor:pointer;
}
.linkish:hover{ color:var(--brick); }
.footer-legal{ display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.footer-legal a, .footer-legal .linkish{
  color:rgba(237,232,218,.92); display:inline-flex; align-items:center; min-height:44px;
  padding-inline:.15rem; text-decoration:underline; text-underline-offset:3px;
}
.footer-legal a:hover, .footer-legal .linkish:hover{ color:var(--brass); }
.social-row{ display:flex; gap:.6rem; margin-top:1.1rem; }
.social-row a{
  display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid rgba(237,232,218,.25); border-radius:50%; color:var(--paper);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.social-row a:hover{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
.social-row svg{ width:18px; height:18px; }

/* ---------- mobile action bar ---------- */
.action-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  display:grid; grid-template-columns:1fr 1fr 1fr;
  background:rgba(32,31,31,.97); backdrop-filter:blur(8px);
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid rgba(237,232,218,.15);
}
.action-bar a{
  display:flex; flex-direction:column; gap:.2rem; align-items:center; justify-content:center;
  padding:.65rem .4rem .7rem; text-decoration:none; color:var(--paper);
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  min-height:56px;
}
.action-bar a svg{ width:19px; height:19px; }
.action-bar a.is-primary{ background:var(--brass); color:var(--ink); }
@media(min-width:960px){ .action-bar{ display:none; } }

/* ---------- reveal animation ----------
   Only hidden when JS is running (html.js), so a script failure can never
   leave content permanently invisible. */
/* The reveal implementation now lives in motion.css so there is one
   motion language rather than two. `.reveal` remains the authoring hook. */
@media (prefers-reduced-motion: reduce){
  .tile img, .btn{ transition:none; }
}
/* Printing captures the whole document, not the viewport, so scroll-triggered
   reveals would otherwise print as blank pages. */
@media print{
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .site-header, .action-bar, .consent, .announce, .marquee{ display:none !important; }
  .hero{ min-height:auto; }
  body{ background:#fff; color:#000; }
}

/* ---------- consent banner ---------- */
/* Anchored bottom-right so it never sits on top of the hero's Book a Table CTA,
   and lifted clear of the mobile action bar. */
.consent{
  position:fixed; z-index:120; right:1rem; left:1rem; margin-left:auto;
  bottom:calc(var(--action-bar-h) + env(safe-area-inset-bottom) + .75rem);
  background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); padding:1rem 1.1rem; max-width:400px; display:none;
}
.consent p{ font-size:.84rem; line-height:1.45; }
.consent .btn-row{ margin-top:.7rem; }
@media (min-width:960px){ .consent{ bottom:1rem; left:auto; padding:1.3rem; } }
.consent.is-visible{ display:block; }
.consent p{ font-size:.88rem; line-height:1.5; }
.consent .btn-row{ margin-top:1rem; gap:.6rem; }
.consent .btn{ font-size:.85rem; padding:.75rem 1.2rem .68rem; min-height:44px; }

/* ---------- breadcrumbs ---------- */
.crumbs{ font-size:.82rem; color:var(--ink-soft); padding-top:1.2rem; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; }
.crumbs li + li::before{ content:"/"; margin-right:.45rem; color:var(--line); }
.crumbs a{ color:inherit; }

/* ---------- match-day panel band (homepage, Phase 7) ---------- */
.matchband__grid{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (min-width:920px){ .matchband__grid{ grid-template-columns:1.1fr .9fr; } }
.matchband .lede{ color:rgba(250,247,240,.84); max-width:40ch; }
.matchband .btn-row{ margin-top:2rem; }

/* ---------- utility ---------- */
.mt-1{ margin-top:var(--space-1); } .mt-2{ margin-top:var(--space-2); } .mt-3{ margin-top:var(--space-3); }
.measure{ max-width:62ch; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- poster hero (Phase 7) ----------
   Typography-led hero for pages whose only authentic photography is below
   full-bleed quality (events: 1200px phone shot; match day: 1200px triptych).
   The type carries the scale; the photographs render small and framed, where
   their true resolution is comfortably above what the slot demands. */
.hero-poster{
  position:relative; background:var(--ink); color:var(--white); overflow:hidden;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(2.6rem,5vw,4rem);
}
.hero-poster .wrap{ position:relative; z-index:2; }
.hero-poster__grid{ display:grid; gap:clamp(2.2rem,4vw,4rem); align-items:center; }
@media (min-width:920px){ .hero-poster__grid{ grid-template-columns:1.05fr .95fr; } }
.hero-poster h1{ font-size:clamp(3rem,6vw,5.6rem); max-width:13.5ch; }
.hero-poster--compact h1{ font-size:clamp(2.6rem,4.6vw,4.4rem); max-width:17ch; }
.hero-poster .lede{ color:rgba(250,247,240,.88); margin-top:1.3rem; max-width:44ch; }
.hero-poster .btn-row{ margin-top:2.2rem; }
@media (max-width:959px){
  .hero-poster{ padding-bottom:calc(var(--action-bar-h) + env(safe-area-inset-bottom) + 2rem); }
  .hero-poster .btn-row .btn{ flex:1 1 0; }
}
/* Ghost display word — outlined, brass, purely decorative */
.hero-poster__ghost{
  position:absolute; right:-.04em; bottom:-.14em; z-index:1;
  font-family:var(--font-display); text-transform:uppercase; line-height:1;
  font-size:clamp(5rem,17vw,15rem); letter-spacing:.02em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(225,181,115,.14);
  pointer-events:none; user-select:none;
}
@supports not (-webkit-text-stroke:1px black){ .hero-poster__ghost{ display:none; } }
/* Framed single photo (events): offset brass plate behind, thin border, caption */
.hero-poster__mediaWrap{ position:relative; justify-self:center; width:min(100%,440px); }
@media (min-width:920px){ .hero-poster__mediaWrap{ justify-self:end; } }
.hero-poster__mediaWrap::before{
  content:""; position:absolute; inset:0; z-index:0;
  transform:translate(clamp(8px,1.4vw,16px), clamp(8px,1.4vw,16px));
  border:1px solid rgba(225,181,115,.28);
}
.hero-poster__media{ position:relative; z-index:1; margin:0; }
.hero-poster__mediaWrap--wide{ width:min(100%,560px); }
.hero-poster__media img{
  width:100%; height:auto; display:block;
  border:1px solid rgba(225,181,115,.4);
}
.hero-poster__cap{
  margin-top:.8rem; font-size:.78rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(225,181,115,.85);
}
/* Panel composition (match day): the source triptych presented as a deliberate
   graphic device — one tall screen panel, banner slice, benches panel. */
.hero-poster__panels{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.4vw,1.1rem);
  align-items:stretch; width:min(100%,560px); justify-self:center;
}
@media (min-width:920px){ .hero-poster__panels{ justify-self:end; } }
.hero-poster__panels figure{ margin:0; position:relative; }
.hero-poster__panels img{
  width:100%; height:100%; object-fit:cover; display:block;
  border:1px solid rgba(225,181,115,.35);
}
.hero-poster__panels .panel--a{ grid-row:span 2; }
/* the video panel's brass frame lives on the FIGURE, not the img - a frame
   under the video shows through as a seam when paint heights round */
.hero-poster__panels .video-panel{ border:1px solid rgba(225,181,115,.35); }
.hero-poster__panels .video-panel img{ border:0; }
.hero-poster__panels .panel--b{ aspect-ratio:420/304; }
.hero-poster__panels .panel--c{ aspect-ratio:374/500; }
/* film texture on framed media: matches the site grain so small sources read
   as intentional atmosphere rather than compression */
.hero-poster__media::after, .hero-poster__panels figure::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- brand typography: Courier Prime ----------
   Brand pack: "Courier prime should be used for all subheadings and links.
   Including page links on the top nav and navigation buttons."
   Applied to navigation, buttons, eyebrows and meta labels. Body copy stays
   Helvetica and display headings stay Anton, per the same page of the pack.
   The big mobile nav words keep Anton: they read as titles, not link text. */
.nav-desktop a,
.nav-mobile .nm-secondary a,
.dropdown a, .dd-note,
.btn,
.eyebrow, .hero__kicker,
.card__meta, .selector__meta,
.text-link,
.crumbs, .footer-h,
.hero-poster__cap,
.action-bar a{
  font-family:var(--font-mono);
}
/* The announcement strip stays Helvetica: Courier Prime is wide enough to wrap
   it onto two lines at 360px, which pushes the header down. It reads as a promo
   banner rather than navigation or a subheading, so it sits outside the rule. */
/* Courier Prime is wider than the Helvetica it replaces; trim the button
   tracking and size so CTAs keep their original footprint on small screens. */
.btn{ font-size:.95rem; letter-spacing:.02em; }
.btn--lg{ font-size:1rem; }

/* ---------- Phase 9: official brand pack implementation ---------- */

/* Header uses the official primary wordmark artwork, not a typed stand-in. */
.brand{ gap:.3rem; }
/* align-self stops the column flex parent stretching the logo to full width,
   which distorted its aspect ratio. */
.brand__mark{ display:block; height:54px; width:auto; align-self:flex-start; }
@media (max-width:640px){ .brand__mark{ height:42px; } }
.brand small{ margin-top:0; }

/* The announcement strip was dark green, a colour that predates the brand pack.
   Charcoal + beige is on-palette and leaves mustard free for the booking CTA,
   which must stay the most prominent thing in the header. */
.announce{ background:var(--ink); color:var(--paper); }
.announce a{ color:var(--brass); text-decoration-color:var(--brass); }

/* Footer brand moment: official wordmark in beige plus the building mark. */
.footer-mark__logo{ display:block; width:min(360px,62vw); height:auto; }
.footer-mark__icon{ display:block; width:64px; height:auto; margin-bottom:1.1rem; }

/* ---- Match Day campaign identity ----
   The pack gives Match Day one extra colour (#497CBF) and shows it as a poster:
   blue ground, black Anton, small black supporting type. Black on this blue
   measures 4.92:1, so the pack's own pairing is accessible as-is. */
.hero-poster--matchday{ background:var(--efc-blue); color:#000; }
.hero-poster--matchday h1,
.hero-poster--matchday .lede{ color:#000; }
.hero-poster--matchday .hero__kicker{ color:#000; }
.hero-poster--matchday .hero-poster__ghost{ -webkit-text-stroke-color:rgba(0,0,0,.18); }
.hero-poster--matchday .hero-poster__panels img{ border-color:rgba(0,0,0,.45); }
.hero-poster--matchday .btn--primary{ background:#000; color:var(--brass); }
.hero-poster--matchday .btn--primary:hover{ background:var(--ink); color:var(--brass); }
.hero-poster--matchday .btn--ghost{ border-color:#000; color:#000; }
.hero-poster--matchday .btn--ghost:hover{ background:#000; color:var(--brass); }

/* ============================================================
   MENUS (real printed menus, transcribed) — editorial, print-inspired.
   Black on beige, Anton section titles, letter-spaced dish names,
   flush-right prices, Courier modifiers. No cards, no pills.
   ============================================================ */

/* --- menu switcher: Breakfast / Main / Sunday / Drinks --- */
.menu-switch{
  /* sticks just below the sticky site header */
  position:sticky; top:var(--header-h); z-index:40;
  background:var(--ink); border-bottom:1px solid rgba(232,227,214,.14);
}
.menu-switch__row{
  display:flex; gap:clamp(1.2rem,3vw,2.6rem);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.menu-switch__row::-webkit-scrollbar{ display:none; }
.menu-switch a{
  font-family:var(--font-mono); font-size:.82rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  color:rgba(232,227,214,.66); padding:.85rem 0 .78rem;
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .2s var(--ease);
}
.menu-switch a:hover{ color:var(--paper); }
.menu-switch a[aria-current="page"]{ color:var(--brass); border-bottom-color:var(--brass); }

/* --- menu column --- */
.menu{ max-width:920px; margin-inline:auto; }
.menu-head{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.menu-head__title{ font-size:var(--fs-h2); }
.menu-legend{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--ink-soft); margin-top:.9rem;
}
.menu-legend--foot{ margin-top:1.2rem; }
.menu-actions{ margin-top:.55rem; display:flex; gap:1.6rem; flex-wrap:wrap; }
.menu-actions .text-link{ font-family:var(--font-mono); font-size:.85rem; }
.linkish{ background:none; border:0; padding:0; cursor:pointer; font:inherit; }

/* --- in-page category anchors --- */
.menu-cats{
  border-block:1px solid var(--line); margin-bottom:clamp(2rem,4vw,3rem);
}
.menu-cats__row{
  display:flex; gap:clamp(1.2rem,3vw,2.4rem);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.menu-cats__row::-webkit-scrollbar{ display:none; }
.menu-cats a{
  font-family:var(--font-mono); font-size:.8rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); padding:.7rem 0; white-space:nowrap;
}
.menu-cats a:hover{ color:var(--brass-deep); }

/* --- sections & items --- */
.menu-section{
  margin-bottom:clamp(2.6rem,5vw,4rem); scroll-margin-top:120px;
  /* below-fold sections skip initial style/layout work; the intrinsic size
     keeps scrollbar + anchor positions stable before first layout */
  content-visibility:auto; contain-intrinsic-size:auto 640px;
}
.menu-section__title{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,2.9rem); letter-spacing:.02em; margin-bottom:.35em;
}
.menu-section__note{
  font-size:.95rem; color:var(--ink-soft); max-width:56ch; margin-bottom:1.4rem;
}
.menu-section__items{ display:grid; }
.menu-item{
  display:grid; grid-template-columns:1fr auto; column-gap:1.2rem;
  align-items:baseline; padding:1.05rem 0;
  border-top:1px solid var(--line-soft);
}
.menu-item:first-child{ border-top:0; }
.menu-item__name{
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.45;
}
.menu-diet{
  font-family:var(--font-mono); font-weight:400; font-size:.78rem;
  /* ink-soft, not brass-deep: 0.78rem text needs 4.5:1 on beige */
  letter-spacing:.02em; text-transform:none; color:var(--ink-soft);
  white-space:nowrap;
}
.menu-item__price{
  font-family:var(--font-body); font-weight:700; font-size:1rem;
  font-variant-numeric:tabular-nums; text-align:right;
}
.menu-item__desc{
  grid-column:1; font-size:.95rem; color:var(--ink-soft);
  line-height:1.5; margin-top:.28rem; max-width:58ch;
}
.menu-item__variants{ grid-column:1; margin-top:.35rem; display:grid; gap:.22rem; }
.menu-item__variants li{
  font-size:.95rem; color:var(--ink-soft); line-height:1.5; list-style:none;
  padding-left:1em; text-indent:-1em;
}
.menu-item__variants li::before{ content:"– "; color:var(--brass-deep); }
.menu-item__vprice{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.menu-mod{
  grid-column:1 / -1; display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--font-mono); font-size:.85rem; color:var(--ink-soft);
  margin-top:.4rem;
}
.menu-mod__price{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.menu-item .menu-mod{ margin-top:.5rem; }

/* --- extras block ("want to add something extra?") --- */
.menu-extras{
  margin-top:1.4rem; padding:1.1rem 1.3rem;
  border-left:3px solid var(--brass-deep); background:rgba(225,181,115,.14);
  max-width:56ch;
}
.menu-extras__intro{
  font-family:var(--font-mono); font-size:.85rem; font-weight:700;
  letter-spacing:.02em; margin-bottom:.5rem;
}
.menu-extras .menu-mod{ margin-top:.3rem; }

/* --- editorial photo break --- */
/* overflow:hidden contains the pre-reveal 1.08 scale on the clip animation */
.menu-photo{ margin:clamp(2.2rem,4vw,3.4rem) 0; overflow:hidden; }
.menu-photo img{ width:100%; height:auto; display:block; border:1px solid var(--line-soft); }

/* --- allergy + booking moment --- */
.menu-allergy{
  margin-top:clamp(2rem,4vw,2.8rem); padding:1rem 0;
  border-block:1px solid var(--ink);
  font-weight:700; font-size:.9rem; letter-spacing:.16em; text-transform:uppercase;
}
.menu-cta{ margin-top:clamp(2.4rem,5vw,3.6rem); text-align:left; }
.menu-cta__line{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4rem); line-height:1; margin-bottom:1.1rem;
}

@media (max-width:560px){
  .menu-item{ column-gap:.9rem; padding:.95rem 0; }
  .menu-item__name{ font-size:.92rem; letter-spacing:.1em; }
  .menu-item__desc, .menu-item__variants li{ font-size:.92rem; }
  .menu-section{ scroll-margin-top:104px; }
}

/* ============================================================
   PRINT — a clean A4-style menu sheet. Everything that is not the
   menu (nav, hero, motion, booking, photos) is stripped.
   ============================================================ */
@media print{
  .announce, .site-header, .nav-mobile, .action-bar, .site-footer,
  .hero, .hero-poster, .menu-switch, .menu-cats, .menu-actions,
  .menu-photo, .menu-feature, .menu-spread, .cta-band, .menu-cta, .crumbs, .grain, .cursor-dot,
  .split__media, .btn-row, .quote, .faq, .section--dark, #cookie-banner,
  .consent{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section{ padding:0 !important; }
  .menu{ max-width:100%; }
  .menu-item{ break-inside:avoid; border-top-color:#ddd; padding:.45rem 0; }
  .menu-section{ margin-bottom:1.2rem; }
  .menu-section__title{ font-size:16pt; }
  .menu-head__title{ font-size:20pt; }
  .menu-extras{ background:none; border-left:2px solid #000; }
  .js [data-reveal], .js [data-split], .js .reveal{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
  a{ text-decoration:none; color:#000; }
}

/* ============================================================
   NEW MEDIA (Aug 2026): campaign video + portrait photography
   ============================================================ */

/* Portrait video panel - used as the Match Day hero media and the homepage
   match band panel. The poster img sits underneath; reduced motion or no-JS
   simply leaves the poster visible. */
.video-panel{ position:relative; overflow:hidden; }
.video-panel img, .video-panel video{
  display:block; width:100%; height:100%; object-fit:cover;
}
/* 1px overscan: video paint height rounds sub-pixel, which let the framed
   poster underneath show as a thin line along the bottom edge. The panel's
   overflow:hidden clips the overscan, so every edge stays seam-free at any
   DPR; the ~1px crop per edge is invisible. */
.video-panel video{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); }
@media (prefers-reduced-motion: reduce){
  .video-panel video{ display:none; }
}
/* In the match day poster hero the video takes the media column */
.hero-poster__mediaWrap--video{ width:min(100%,440px); }
.hero-poster__mediaWrap--video .video-panel{ aspect-ratio:9/16; }
.hero-poster--matchday .video-panel{ border:1px solid rgba(0,0,0,.45); }

/* Editorial portrait pair (match day photography) */
.photo-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,2vw,1.4rem); }
.photo-pair figure{ margin:0; overflow:hidden; }
.photo-pair img{ width:100%; height:100%; object-fit:cover; display:block; border:1px solid var(--line-soft); }
.section--dark .photo-pair img, .hero-poster--matchday .photo-pair img{ border-color:rgba(0,0,0,.35); }

/* Contained portrait variant of the menu photo break */
.menu-photo--portrait{ max-width:560px; margin-inline:auto; }

/* ============================================================
   POLISH PASS: editorial duo compositions on the menu pages.
   The old .gallery-strip rendered the pair as ~136px thumbnails
   lost in the section - these give the photography real scale.
   No rounded-card styling: straight edges, thin brand borders.
   ============================================================ */
.split--feature{ align-items:center; }
@media (min-width:920px){
  /* media column dominates: the food carries the section */
  .split--feature{ grid-template-columns: 2fr 3fr; }
}
.duo{ position:relative; }
.duo figure{ margin:0; overflow:hidden; }
.duo img{ width:100%; height:auto; display:block; border:1px solid var(--line-soft); }

/* BREAKFAST - offset: tall primary right, secondary overlapping lower-left */
.duo--offset{ display:grid; justify-items:end; }
.duo--offset .duo__primary{ width:min(100%, 34vw); }
.duo--offset .duo__secondary{
  width:min(58%, 17vw); justify-self:start;
  margin-top:clamp(-8rem, -9vw, -4rem); margin-left:clamp(0rem, 2vw, 2rem);
  position:relative; z-index:2;
}

/* MAIN MENU - poster: primary bleeds to the viewport edge */
.duo--poster{ display:grid; justify-items:end; }
@media (min-width:920px){
  .duo--poster .duo__primary{ width:min(100%, 40vw); }
}
/* escape the wrap only when a real gutter exists; the margin never exceeds
   the gutter, so the document cannot grow a horizontal scrollbar */
@media (min-width:1240px){
  /* +1.25rem keeps the bleed clear of the scrollbar, which 100vw includes */
  .duo--poster{ margin-right:calc((1200px - 100vw) / 2 + 1.25rem); }
}
.duo--poster .duo__secondary{
  width:min(52%, 19vw); justify-self:start;
  margin-top:clamp(-9rem, -10vw, -4rem);
  position:relative; z-index:2;
}

/* DRINKS - social: the cheers photograph leads, cocktail rides beside it */
.duo--social{ display:grid; justify-items:start; }
.duo--social .duo__primary{ width:min(100%, 36vw); }
.duo--social .duo__secondary{
  width:min(50%, 15vw); justify-self:end;
  margin-top:clamp(-14rem, -16vw, -6rem); margin-right:clamp(0rem, 1.5vw, 1.5rem);
  position:relative; z-index:2;
}

/* mobile: stacked large, deliberate overlap kept but gentler */
@media (max-width:919px){
  .duo--offset .duo__primary, .duo--poster .duo__primary, .duo--social .duo__primary{ width:92%; }
  .duo--offset .duo__secondary, .duo--poster .duo__secondary, .duo--social .duo__secondary{ width:52%; margin-top:-3rem; }
}

/* ---------- filmstrip: one consistent frame (2:3), no outliers ---------- */
.filmstrip img{
  width:clamp(190px, 15vw, 236px) !important;
  height:auto !important;
  aspect-ratio:2/3;
  object-fit:cover;
}

/* ---------- past events archive (quiet, scannable, no fake CTA) ---------- */
.archive-row{
  display:grid; grid-template-columns:110px 1fr auto; gap:clamp(1rem,2.5vw,2rem);
  align-items:baseline; padding:1.15rem 0; border-top:1px solid var(--line-soft);
}
.archive-row:last-child{ border-bottom:1px solid var(--line-soft); }
.archive-row__date{
  font-family:var(--font-mono); font-size:.82rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.archive-row__body h3{
  font-family:var(--font-body); font-weight:700; font-size:1rem;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.4;
}
.archive-row__body p{ font-size:.92rem; color:var(--ink-soft); line-height:1.5; margin-top:.2rem; max-width:52ch; }
.archive-row__meta{
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft);
  white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums;
}
.archive-row__past{
  display:inline-block; margin-left:.7rem; font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass-deep);
}
@media (max-width:640px){
  .archive-row{ grid-template-columns:1fr; gap:.25rem; align-items:start; }
  .archive-row__meta{ text-align:left; white-space:normal; }
}

/* ---------- form refinement (final pass) ----------
   Native select + native date picker are kept deliberately: OS pickers are
   the accessible, touch-correct choice (esp. iOS). Only the CLOSED states
   are branded - one height, one border, Courier labels, custom chevron. */
.field label{
  font-family:var(--font-mono); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.field input, .field select, .field textarea{
  min-height:55px; line-height:1.4;
}
.field textarea{ min-height:120px; }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23201F1F' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.05rem center; background-size:13px;
  padding-right:2.8rem; cursor:pointer;
}
.field input[type="date"]{ cursor:pointer; }
.field input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.7; cursor:pointer; padding:.35rem;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

/* ============================================================
   REFINEMENT PASS: menu-page rhythm + breakfast compositions.
   ============================================================ */
/* Two stacked --space-4 paddings (feature section bottom + menu section
   top) left ~300px of empty cream before THE MAIN MENU. Halve the
   meeting point at the source; every other section keeps --space-4. */
.section:has(.split--feature){ padding-block-end:clamp(1.75rem, 3.5vw, 3rem); }
.menu-wrap{ padding-block-start:clamp(2.75rem, 5vw, 4.25rem); }

/* Breakfast duo: the granola was a 17vw landscape thumbnail. Now a 4:3
   bowl crop at ~70% of the primary's width, overlapping its lower-left
   corner - clearly secondary, no longer accidental. */
@media (min-width:920px){
  .duo--offset .duo__primary{ width:min(100%, clamp(330px, 36vw, 560px)); }
}
.duo--offset .duo__secondary{
  width:min(82%, clamp(255px, 25vw, 390px));
  margin-top:clamp(-6.5rem, -7vw, -3.5rem); margin-left:0;
}
@media (max-width:919px){
  .duo--offset .duo__secondary{ width:min(72%, 340px); margin-top:-2.25rem; }
}

/* Benedict feature: photograph + typographic anchor side by side inside
   the menu column, instead of a lone centred portrait. */
.menu-feature{
  margin:clamp(2.4rem, 4.5vw, 3.6rem) 0;
  display:grid; gap:clamp(1.6rem, 3.5vw, 3rem); align-items:center;
}
@media (min-width:760px){
  .menu-feature{ grid-template-columns:minmax(0, 11fr) minmax(0, 9fr); }
}
.menu-feature__media{ margin:0; overflow:hidden; }
.menu-feature__media img{ width:100%; height:auto; display:block; border:1px solid var(--line-soft); }
.menu-feature__title{ font-size:clamp(2.1rem, 3.4vw, 3rem); line-height:.95; margin:.4rem 0 .9rem; }
.menu-feature__line{ font-family:var(--font-mono); font-size:.92rem; line-height:1.55; color:var(--ink-soft); max-width:36ch; }
.menu-feature__note{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.03em; color:var(--ink-soft); margin-top:1rem; }
@media (max-width:759px){
  .menu-feature__media{ max-width:440px; margin-inline:auto; width:100%; }
}

/* Flip variant (main menu): typography left, photo right, type block
   bottom-aligned against the image - related to the breakfast feature,
   not a duplicate of it. */
@media (min-width:760px){
  .menu-feature--flip{ grid-template-columns:minmax(0, 9fr) minmax(0, 11fr); }
  .menu-feature--flip .menu-feature__media{ order:2; }
  /* centred with a slight downward offset - a designed drop, not a dead zone */
  .menu-feature--flip .menu-feature__body{ order:1; padding-top:clamp(2.5rem, 7vw, 6rem); }
}

/* ---------- main menu: the wide table photograph that follows the
   cheese-pull feature. Capped at 700px so the 1366px original still covers
   a retina screen, and clearly broader than the 480px portrait above it. */
.menu-spread{
  max-width:700px; margin:clamp(1rem,2vw,1.6rem) auto clamp(2.4rem,4.5vw,3.6rem);
  overflow:hidden;
}
/* the width/height attributes describe the LANDSCAPE file; on phones the
   <picture> swaps in the 4:5 crop, so the box ratio has to swap with it or
   the portrait frame gets squashed into a 4:3 box */
.menu-spread img{
  width:100%; height:auto; display:block; border:1px solid var(--line-soft);
  aspect-ratio:4/3; object-fit:cover;
}
@media (max-width:759px){ .menu-spread img{ aspect-ratio:4/5; } }
/* the two photographs read as one food story, so the gap between them stays
   tighter than the normal feature spacing */
.menu-feature:has(+ .menu-spread){ margin-bottom:clamp(1rem,2vw,1.6rem); }
@media (max-width:759px){ .menu-spread{ max-width:none; } }

/* ============================================================
   TEN STREETS SOCIAL — motion & art-direction layer
   One coherent motion language. Everything here is additive:
   with JS off or reduced-motion on, the page renders complete
   and static. Nothing below is required to read the site.
   ============================================================ */

:root{
  /* easing — weighted, cinematic, never springy */
  --ease-out-expo:  cubic-bezier(.16,1,.3,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --ease-in-out:    cubic-bezier(.65,0,.35,1);
  --ease-out-soft:  cubic-bezier(.22,.61,.25,1);

  /* duration */
  --d-fast:   180ms;   /* micro interaction */
  --d-med:    400ms;   /* normal transition */
  --d-slow:   760ms;   /* editorial reveal */
  --d-cinema: 1100ms;  /* major reveal */

  /* stagger */
  --stagger-short: 60ms;
  --stagger-long:  110ms;

  --grain-opacity: .035;
}

/* ============ film grain — warehouse texture, barely there ============ */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-1.5%,1%) }
  40%{ transform:translate(1%,-1.5%) }
  60%{ transform:translate(-1%,-1%) }
  80%{ transform:translate(1.5%,1%) }
}

/* ============ reveal engine ============
   data-reveal values: up | mask | clip | scale | fade
   The JS orchestrator adds .is-revealed when the group enters view.
   --i supplies the stagger index.                                    */
.js [data-reveal]{ --delay: calc(var(--i, 0) * var(--stagger-short)); }
/* `.reveal` is the legacy authoring hook used across the inner pages and
   resolves to the same treatment as data-reveal="up". */
.js .reveal{ --delay: calc(var(--i, 0) * var(--stagger-short)); will-change:transform, opacity; }
.js [data-reveal="up"], .js .reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity var(--d-slow) var(--ease-out-quart) var(--delay),
             transform var(--d-slow) var(--ease-out-expo) var(--delay);
}
.js .reveal[data-delay="1"]{ transition-delay:.12s; }
.js .reveal[data-delay="2"]{ transition-delay:.24s; }
.js .reveal[data-delay="3"]{ transition-delay:.36s; }
.js .reveal.is-revealed, .js .reveal.is-in{ opacity:1; transform:none; }
.js [data-reveal="fade"]{
  opacity:0;
  transition:opacity var(--d-slow) var(--ease-out-quart) var(--delay);
}
.js [data-reveal="scale"]{
  opacity:0; transform:scale(1.04);
  transition:opacity var(--d-cinema) var(--ease-out-quart) var(--delay),
             transform var(--d-cinema) var(--ease-out-expo) var(--delay);
}
/* image clip reveal — the container wipes open, the photo settles from 1.08 */
.js [data-reveal="clip"]{
  /* overflow:hidden contains the pre-reveal 1.08 image scale, which otherwise
     widens the document on tablet widths */
  overflow:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--d-cinema) var(--ease-out-expo) var(--delay);
}
.js [data-reveal="clip"] > img,
.js [data-reveal="clip"] > picture > img{
  transform:scale(1.08);
  transition:transform 1600ms var(--ease-out-expo) var(--delay);
}
.js [data-reveal].is-revealed{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
.js [data-reveal="clip"].is-revealed > img,
.js [data-reveal="clip"].is-revealed > picture > img{ transform:scale(1); }

/* ============ masked line reveal (headings only) ============
   JS wraps each rendered line in .ln > .ln__i so lines rise
   out of an overflow mask. Text content is untouched.          */
/* Padding gives descenders room inside the mask; the negative margin cancels
   it so re-wrapping a heading into lines cannot change its height (CLS). */
.ln{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.ln__i{ display:block; }
.js [data-split] .ln__i{
  transform:translate3d(0,110%,0);
  transition:transform var(--d-cinema) var(--ease-out-expo);
  transition-delay:calc(var(--l, 0) * 90ms + var(--delay, 0ms));
}
.js [data-split].is-revealed .ln__i{ transform:none; }

/* ============ hero intro choreography ============ */
.js .hero__media{ clip-path:inset(0 0 0 0); }
.js .hero-anim .hero__media img{
  transform:scale(1.06);
  transition:transform 2400ms var(--ease-out-expo);
}
.js .hero-anim.is-ready .hero__media img{ transform:scale(1); }
/* Tracking starts at .38em (not .5em): the wider start made the kicker wrap to
   two lines and snap back as it tightened — a real 22px layout shift. nowrap
   guarantees the line count can never change mid-animation. */
.js .hero-anim .hero__kicker{
  opacity:0; transform:translate3d(0,10px,0); letter-spacing:.38em; white-space:nowrap;
  transition:opacity var(--d-slow) var(--ease-out-quart) 120ms,
             transform var(--d-slow) var(--ease-out-expo) 120ms,
             letter-spacing var(--d-cinema) var(--ease-out-expo) 120ms;
}
.js .hero-anim.is-ready .hero__kicker{ opacity:1; transform:none; letter-spacing:.3em; }
.js .hero-anim .hero__lede,
.js .hero-anim .hero .btn-row,
.js .hero-anim .hero__meta{
  opacity:0; transform:translate3d(0,16px,0);
  transition:opacity var(--d-slow) var(--ease-out-quart),
             transform var(--d-slow) var(--ease-out-expo);
}
.js .hero-anim .hero__lede{ transition-delay:520ms; }
.js .hero-anim .hero .btn-row{ transition-delay:640ms; }
.js .hero-anim .hero__meta{ transition-delay:760ms; }
.js .hero-anim.is-ready .hero__lede,
.js .hero-anim.is-ready .hero .btn-row,
.js .hero-anim.is-ready .hero__meta{ opacity:1; transform:none; }

/* hero scroll cue */
.hero__cue{
  position:absolute; left:50%; bottom:1.2rem; transform:translateX(-50%);
  display:none; align-items:center; gap:.6rem; z-index:3;
  font-size:.68rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(250,247,240,.72);
}
@media (min-width:960px){ .hero__cue{ display:flex; } }
.hero__cue span{ display:block; width:1px; height:34px; background:linear-gradient(var(--brass), transparent); animation:cueDrop 2.4s var(--ease-in-out) infinite; transform-origin:top; }
@keyframes cueDrop{ 0%{ transform:scaleY(0); opacity:0 } 40%{ transform:scaleY(1); opacity:1 } 100%{ transform:scaleY(1) translateY(34px); opacity:0 } }

/* hero meta strip — venue facts in the hero, Cutler & Co style */
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; margin-top:2rem;
  font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(250,247,240,.66);
}
.hero__meta b{ color:var(--brass); font-weight:700; }

/* ============ experience selector (signature interaction) ============ */
.selector{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); }
.selector__bg{ position:absolute; inset:0; z-index:0; }
.selector__bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity 900ms var(--ease-out-quart), transform 2200ms var(--ease-out-expo);
}
.selector__bg img.is-active{ opacity:.42; transform:scale(1); }
.selector::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(32,31,31,.72), rgba(32,31,31,.42) 45%, rgba(32,31,31,.86));
}
.selector .wrap{ position:relative; z-index:2; }
.selector__list{ list-style:none; border-top:1px solid rgba(237,232,218,.18); }
.selector__item{ border-bottom:1px solid rgba(237,232,218,.18); }
.selector__link{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  padding:clamp(1.1rem,2.6vw,1.9rem) 0; text-decoration:none; color:var(--paper);
  position:relative;
}
.selector__num{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; color:var(--brass);
  min-width:2.4rem;
}
.selector__word{
  font-family:var(--font-display); text-transform:uppercase; line-height:.92;
  font-size:clamp(2.1rem,7vw,5rem);
  transition:transform var(--d-med) var(--ease-out-expo), opacity var(--d-med) var(--ease-out-quart);
}
.selector__meta{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(237,232,218,.62); text-align:right; max-width:14ch;
}
.selector__arrow{
  display:inline-block; margin-left:.7rem; font-size:.5em; vertical-align:middle;
  opacity:0; transform:translateX(-8px);
  transition:opacity var(--d-med) var(--ease-out-quart), transform var(--d-med) var(--ease-out-expo);
}
@media (hover:hover) and (pointer:fine){
  .selector__link:hover .selector__word,
  .selector__link:focus-visible .selector__word{ transform:translateX(clamp(8px,1.4vw,22px)); }
  .selector__link:hover .selector__arrow,
  .selector__link:focus-visible .selector__arrow{ opacity:1; transform:translateX(0); }
  /* dim the siblings so the hovered row leads */
  .selector__list:hover .selector__item:not(:hover) .selector__word{ opacity:.42; }
}
@media (max-width:700px){
  .selector__link{ grid-template-columns:auto 1fr; }
  .selector__meta{ display:none; }
}

/* ============ sticky scroll story ============ */
.story{ position:relative; background:var(--ink); color:var(--paper); }
.story__inner{ display:grid; gap:2rem; }
.story__media{
  position:relative; overflow:hidden; border-radius:6px;
  aspect-ratio:4/5; background:#000;
}
.story__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05);
  transition:opacity 800ms var(--ease-out-quart), transform 1800ms var(--ease-out-expo);
}
.story__media img.is-active{ opacity:1; transform:scale(1); }
.story__chapters{ display:grid; gap:clamp(2.5rem,8vh,5rem); }
.story__chapter{
  transition:opacity var(--d-slow) var(--ease-out-quart);
  padding-block:clamp(1rem,4vh,2.5rem);
}
.story__chapter h3{
  font-size:clamp(2.4rem,6vw,4.6rem); line-height:.92;
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
}
.story__chapter h3 em{
  font-family:var(--font-body); font-style:normal; font-size:.24em;
  font-weight:700; letter-spacing:.2em; color:var(--brass);
}
.story__chapter p{ margin-top:1rem; color:rgba(237,232,218,.76); max-width:44ch; }
@media (min-width:960px){
  .story__inner{ grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:start; }
  .story__media{ position:sticky; top:calc(var(--header-h) + 3vh); aspect-ratio:4/5; }
  .story__chapters{ gap:0; }
  .story__chapter{ min-height:62vh; display:flex; flex-direction:column; justify-content:center; }
  .js .story__chapter{ opacity:.28; }
  .js .story__chapter.is-current{ opacity:1; }
}
@media (max-width:959px){
  /* Mobile drops the sticky choreography for a simple stacked sequence. */
  .story__media{ aspect-ratio:3/2; }
  .story__media img:first-child{ opacity:1; transform:none; }
  .story__chapter{ border-top:1px solid rgba(237,232,218,.16); padding-top:1.6rem; }
}

/* ============ oversize editorial type ============ */
.bigtype{
  font-family:var(--font-display); text-transform:uppercase; line-height:.84;
  letter-spacing:-.01em; font-size:clamp(3.5rem,15vw,13rem);
  margin:0; pointer-events:none;
}
.bigtype--outline{
  color:transparent; -webkit-text-stroke:1px rgba(237,232,218,.34);
}
.bandline{
  display:flex; align-items:baseline; gap:clamp(.6rem,2vw,1.6rem); flex-wrap:wrap;
  /* clear the negative leading of the display heading below - the label was
     colliding with the ascenders of "SUNDAYS" */
  margin-bottom:clamp(1.4rem, 2.6vw, 2.4rem);
}
.bandline small{
  font-family:var(--font-body); font-size:.72rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
}

/* full-bleed photographic band */
.bleed{ position:relative; overflow:hidden; background:var(--ink); }
.bleed__media{ position:absolute; inset:0; }
.bleed__media img{ width:100%; height:100%; object-fit:cover; }
.bleed__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(32,31,31,.62), rgba(32,31,31,.45) 50%, rgba(32,31,31,.8));
}
.bleed__inner{ position:relative; z-index:2; padding-block:clamp(5rem,16vh,10rem); color:var(--paper); }

/* ============ poster-style event cards ============ */
.poster{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.5rem 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit; align-items:center;
}
.section--dark .poster{ border-color:rgba(237,232,218,.18); }
.poster:last-child{ border-bottom:1px solid var(--line); }
.section--dark .poster:last-child{ border-bottom-color:rgba(237,232,218,.18); }
.poster__date{
  font-family:var(--font-display); text-transform:uppercase; line-height:.86;
  text-align:center; min-width:4.6rem;
}
.poster__date .d{ display:block; font-size:clamp(2rem,4vw,2.9rem); }
.poster__date .m{ display:block; font-size:.72rem; letter-spacing:.14em; color:var(--brick); margin-top:.3rem; }
.section--dark .poster__date .m{ color:var(--brass); }
.poster__body h3{ font-size:clamp(1.3rem,3vw,2.1rem); transition:transform var(--d-med) var(--ease-out-expo); }
.poster__body p{ font-size:.93rem; color:var(--ink-soft); margin-top:.4rem; max-width:52ch; }
.section--dark .poster__body p{ color:rgba(237,232,218,.7); }
.poster__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:.7rem;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pine);
}
.section--dark .poster__meta{ color:var(--brass); }
.poster__tag{ border:1px solid currentColor; border-radius:2px; padding:.18rem .5rem; }
@media (hover:hover){
  .poster:hover .poster__body h3{ transform:translateX(6px); }
}

/* ============ buttons & links — micro-interactions ============ */
/* The wipe sits behind the label via a negative z-index inside the button's own
   stacking context, so it works whether or not the label is wrapped in a span. */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn > span{ display:inline-flex; align-items:center; gap:.5rem; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform var(--d-med) var(--ease-out-expo);
}
.btn--primary::before{ background:var(--ink); }
.btn--ghost::before{ background:var(--ink); }
.hero .btn--ghost::before,
.section--dark .btn--ghost::before,
.bleed .btn--ghost::before,
.btn--ghost.on-dark::before{ background:var(--paper); }
@media (hover:hover){
  .btn:hover::before, .btn:focus-visible::before{ transform:scaleY(1); }
  .btn:hover{ transform:none; }              /* replaces the old lift */
  .btn--primary:hover{ color:var(--paper); }
  .btn--ghost:hover{ color:var(--paper); border-color:var(--ink); background:transparent; }
  .hero .btn--ghost:hover,
  .section--dark .btn--ghost:hover,
  .bleed .btn--ghost:hover,
  .btn--ghost.on-dark:hover{ color:var(--ink); border-color:var(--paper); background:transparent; }
}
.btn__arrow{ display:inline-block; transition:transform var(--d-med) var(--ease-out-expo); }
@media (hover:hover){ .btn:hover .btn__arrow{ transform:translateX(5px); } }

/* underline draw */
.text-link{ position:relative; text-decoration:none; }
.text-link::after{
  content:""; position:absolute; left:0; right:0; bottom:.1em; height:2px;
  background:var(--brass); transform:scaleX(0); transform-origin:right;
  transition:transform var(--d-med) var(--ease-out-expo);
}
.text-link.is-underlined::after, .card__body .text-link::after{ transform:scaleX(1); transform-origin:left; }
@media (hover:hover){
  .text-link:hover::after{ transform:scaleX(1); transform-origin:left; }
  .card__body .text-link:hover::after{ transform:scaleX(0); transform-origin:right; }
}

/* nav underline */
.nav-desktop a{ position:relative; }
.nav-desktop a::after{
  content:""; position:absolute; left:.78rem; right:.78rem; bottom:.3rem; height:2px;
  background:var(--brass-deep); transform:scaleX(0); transform-origin:right;
  transition:transform var(--d-med) var(--ease-out-expo);
}
@media (hover:hover){ .nav-desktop a:hover::after{ transform:scaleX(1); transform-origin:left; } }
.nav-desktop a[aria-current="page"]{ box-shadow:none; }
.nav-desktop a[aria-current="page"]::after{ transform:scaleX(1); }

/* ============ full-screen navigation ============ */
.nav-mobile{
  background:var(--ink);
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--d-slow) var(--ease-out-expo);
  display:block; visibility:hidden;
}
.nav-mobile.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.js .nav-mobile .nm-primary a,
.js .nav-mobile .nm-secondary a,
.js .nav-mobile .btn,
.js .nav-mobile .nm-foot{
  opacity:0; transform:translate3d(0,22px,0);
  transition:opacity var(--d-med) var(--ease-out-quart), transform var(--d-slow) var(--ease-out-expo);
}
.js .nav-mobile.is-open .nm-primary a,
.js .nav-mobile.is-open .nm-secondary a,
.js .nav-mobile.is-open .btn,
.js .nav-mobile.is-open .nm-foot{
  opacity:1; transform:none;
  transition-delay:calc(140ms + var(--i,0) * var(--stagger-short));
}
.nm-primary a{ position:relative; display:flex !important; align-items:baseline; gap:1rem; }
.nm-primary .nm-num{
  font-family:var(--font-body); font-size:.7rem; font-weight:700;
  letter-spacing:.18em; color:var(--brass); flex:0 0 auto;
}
.nm-foot{
  margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid rgba(237,232,218,.16);
  display:grid; gap:.5rem; font-size:.85rem; color:rgba(237,232,218,.7);
}
.nm-foot a{ color:rgba(237,232,218,.9); }

/* ============ magnetic CTA (desktop, subtle) ============ */
.magnetic{ transition:transform var(--d-med) var(--ease-out-expo); }

/* ============ contextual cursor ============ */
.cursor-dot{
  position:fixed; top:0; left:0; z-index:300; pointer-events:none;
  width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%;
  background:var(--brass); color:var(--ink);
  display:grid; place-items:center;
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:scale(.4);
  transition:opacity var(--d-med) var(--ease-out-quart), transform var(--d-med) var(--ease-out-expo);
}
.cursor-dot.is-visible{ opacity:1; transform:scale(1); }

/* ============ page transition veil ============ */
.veil{
  position:fixed; inset:0; z-index:400; pointer-events:none; background:var(--ink);
  transform:translateY(100%);
}
.veil.is-out{ transform:translateY(0); transition:transform 420ms var(--ease-in-out); }
.veil.is-in{ transform:translateY(-100%); transition:transform 520ms var(--ease-out-expo); }

/* ============ horizontal atmosphere band ============ */
.filmstrip{ overflow:hidden; padding-block:clamp(1.5rem,4vw,2.5rem); background:var(--paper-soft); }
.filmstrip__track{ display:flex; gap:1rem; width:max-content; animation:strip 60s linear infinite; }
.filmstrip img{
  height:clamp(150px,22vw,290px); width:auto; border-radius:4px; object-fit:cover;
  filter:saturate(.92);
  transition:filter var(--d-med) var(--ease-out-quart), transform var(--d-med) var(--ease-out-expo);
}
@media (hover:hover){ .filmstrip img:hover{ filter:saturate(1.05); transform:scale(1.02); } }
@keyframes strip{ to{ transform:translateX(-50%); } }
.filmstrip:hover .filmstrip__track{ animation-play-state:paused; }

/* ============ image hover on cards & tiles ============ */
.card__media img, .tile img{ transition:transform 900ms var(--ease-out-expo); }
@media (hover:hover){
  .card:hover .card__media img{ transform:scale(1.045); }
  .card:hover{ transform:none; box-shadow:var(--shadow); }
}

/* ============ REDUCED MOTION ============
   Everything resolves to its final state. No movement anywhere. */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal], .js .reveal,
  .js [data-reveal="up"],
  .js [data-reveal="fade"],
  .js [data-reveal="scale"],
  .js [data-reveal="clip"]{
    opacity:1 !important; transform:none !important; clip-path:none !important;
    transition:none !important;
  }
  .js [data-reveal="clip"] > img,
  .js [data-reveal="clip"] > picture > img{ transform:none !important; transition:none !important; }
  .js [data-split] .ln__i{ transform:none !important; transition:none !important; }
  .js .hero-anim .hero__media img,
  .js .hero-anim .hero__kicker,
  .js .hero-anim .hero__lede,
  .js .hero-anim .hero .btn-row,
  .js .hero-anim .hero__meta{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  /* Tracking belongs to the kicker only — applying it to the group spaced out
     the hero body copy for every reduced-motion visitor. */
  .js .hero-anim .hero__kicker{ letter-spacing:.3em; }
  .grain, .hero__cue{ display:none !important; }
  .filmstrip__track, .marquee__track{ animation:none !important; }
  .story__media img{ transition:none !important; }
  .js .story__chapter{ opacity:1 !important; }
  .cursor-dot{ display:none !important; }
  .veil{ display:none !important; }
  .selector__bg img{ transition:none !important; }
  .btn::before{ transition:none !important; }
  .nav-mobile{ transition:none !important; }
  .js .nav-mobile .nm-primary a,
  .js .nav-mobile .nm-secondary a,
  .js .nav-mobile .btn,
  .js .nav-mobile .nm-foot{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Print: motion layer must never hide content on paper. */
@media print{
  .js [data-reveal], .js .reveal, .js [data-split] .ln__i{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .grain, .cursor-dot, .veil, .filmstrip, .hero__cue{ display:none !important; }
}

/* ============================================================
   PHASE 3 — editorial compositions
   ============================================================ */

/* facts band — trust signals as typography, not icon cards */
.facts{
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1fr; gap:0;
}
.facts__item{
  padding:clamp(1.1rem,2.4vw,1.7rem) 0;
  border-top:1px solid var(--line-soft);
}
.facts__item:first-child{ border-top:0; }
.facts__item b{
  display:block; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1; letter-spacing:.01em;
}
.facts__item span{
  display:block; margin-top:.45rem; font-size:.88rem; line-height:1.45;
  color:var(--ink-soft); max-width:32ch;
}
@media (min-width:760px){
  .facts{ grid-template-columns:repeat(2,1fr); column-gap:clamp(2rem,5vw,4rem); }
  .facts__item:nth-child(2){ border-top:0; }
}
@media (min-width:1100px){
  .facts{ grid-template-columns:repeat(4,1fr); }
  .facts__item{ border-top:0; border-left:1px solid var(--line-soft); padding-left:clamp(1rem,2vw,1.8rem); }
  .facts__item:first-child{ border-left:0; padding-left:0; }
}

/* two-column section head: title left, standfirst right (King-style contrast) */
.section-head{ display:grid; gap:1.4rem; }
@media (min-width:900px){
  .section-head{ grid-template-columns:1.25fr 1fr; align-items:end; gap:clamp(2rem,5vw,5rem); }
  .section-head .lede{ padding-bottom:.4rem; }
}

/* Sunday roast — asymmetric editorial grid with overlapping detail shot */
.roast-feature__title{ margin:-.06em 0 clamp(1.5rem,4vw,3rem); }
.roast-feature__grid{ display:grid; gap:clamp(1.2rem,3vw,2.5rem); }
.roast-feature__lead img,
.roast-feature__detail img{ width:100%; height:100%; object-fit:cover; display:block; }
.roast-feature__lead{ border-radius:6px; overflow:hidden; aspect-ratio:4/5; }
.roast-feature__detail{ border-radius:6px; overflow:hidden; aspect-ratio:1/1; }
.roast-feature__body h3{ font-size:clamp(1.6rem,3.4vw,2.6rem); }
.roast-feature__body p{ margin-top:1rem; }
.roast-feature__body .btn-row{ margin-top:1.8rem; }
@media (min-width:900px){
  .roast-feature__grid{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    grid-template-areas:"lead body" "lead detail";
    align-items:start; column-gap:clamp(2rem,5vw,4.5rem);
  }
  .roast-feature__lead{ grid-area:lead; aspect-ratio:3/4; }
  .roast-feature__body{ grid-area:body; padding-top:.5rem; }
  .roast-feature__detail{
    grid-area:detail; width:min(78%, 320px); margin-top:clamp(1rem,3vw,2.5rem);
    aspect-ratio:4/5;
  }
}

/* footer wordmark — the final brand moment */
.footer-mark{
  display:block; text-decoration:none; color:var(--paper);
  padding-bottom:clamp(2rem,5vw,3.5rem); margin-bottom:clamp(2rem,5vw,3rem);
  border-bottom:1px solid rgba(237,232,218,.16);
}
.footer-mark__line{
  display:block; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.8rem,13vw,11rem); line-height:.84; letter-spacing:-.015em;
}
.footer-mark__line--alt{
  color:transparent; -webkit-text-stroke:1px rgba(237,232,218,.42);
  transition:color var(--d-slow) var(--ease-out-quart);
}
.footer-mark__cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem;
  font-size:.8rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass);
}
@media (hover:hover){
  .footer-mark:hover .footer-mark__line--alt{ color:var(--brass); -webkit-text-stroke-color:transparent; }
  .footer-mark:hover .btn__arrow{ transform:translateX(6px); }
}
.site-footer .footer-brand p{ margin-top:0; }

/* full-bleed band sizing */
.bleed__inner .bigtype{ margin:.1em 0 .35em; }
.bleed__inner .lede{ color:rgba(250,247,240,.84); max-width:40ch; }
.bleed__inner .btn-row{ margin-top:2rem; }

/* selector spacing when it follows the marquee */
.selector{ padding-block:clamp(3.5rem,9vw,7rem); }

/* quote scale-up — one large statement, King/Alinea restraint */
.quote blockquote{ font-size:clamp(1.45rem,3.4vw,2.5rem); }

/* poster status stamp */
.poster__tag--out{ color:var(--brick); border-color:currentColor; }
.section--dark .poster__tag--out{ color:var(--brass); }
.poster__meta .btn{ margin-left:.2rem; padding:.62rem 1.1rem .55rem; font-size:.85rem; min-height:40px; }
.event--past{ opacity:.6; }
.event--past .poster__body h3{ font-weight:400; }
.poster__meta{ align-items:center; }

/* the generic p{max-width:62ch} was forcing the hero meta to wrap into a column */
.hero__meta{ max-width:none; }
.hero .lede{ max-width:44ch; }

@media (max-width:560px){
  .hero__meta{ gap:.35rem 1.1rem; font-size:.68rem; }
  .hero .lede{ font-size:1.05rem; }
}

/* CTA band headline scaled up as an editorial statement */
.cta-band h2{ font-size:clamp(2.6rem,7vw,5.6rem); line-height:.9; }
.cta-band .btn-row{ margin-top:2.2rem; }

/* ---- paint-cost trims (Phase 3 perf pass) ----
   The grain layer was 4x viewport area and animating; backdrop-filter on hero
   controls forced an expensive offscreen blur on every frame. Both were costing
   first paint on throttled mobile for effects nobody consciously notices. */
.grain{ inset:0; animation-duration:12s; }
@keyframes grainShift{
  0%,100%{ transform:translate(0,0) }
  25%{ transform:translate(-1%,.6%) }
  50%{ transform:translate(.8%,-1%) }
  75%{ transform:translate(-.6%,-.6%) }
}
.hero .btn--ghost{ backdrop-filter:none; background:rgba(32,31,31,.55); }
.hero .text-link{ backdrop-filter:none; background:rgba(32,31,31,.55); }
@media (max-width:900px){ .grain{ display:none; } }

/* Secondary items in the full-screen nav are standalone tap targets, not links
   inside prose — give them a proper 44px height on small screens. */
.nav-mobile .nm-secondary a{
  display:flex; align-items:center; min-height:44px; padding-block:.1rem;
}
.nav-mobile .nm-foot a{ display:inline-flex; align-items:center; min-height:44px; }

/* Micro-label floor: uppercase tracked labels stay legible at ~11.5px+ */
@media (max-width:560px){ .hero__meta{ font-size:.74rem; } }
.nm-primary .nm-num{ font-size:.74rem; }

/* Two columns keeps 44px tap targets while lifting Book a Table above the fold
   in the full-screen menu. */
.nav-mobile .nm-secondary{ grid-template-columns:1fr 1fr; column-gap:1.2rem; }
@media (max-width:340px){ .nav-mobile .nm-secondary{ grid-template-columns:1fr; } }
/* Must clear the sticky header at scroll-top, when the announcement strip is
   still on screen (and wraps to two lines at 320px). At 1.5rem the first item,
   Food & Drink, rendered underneath the header, which paints over this panel. */
.nav-mobile{ padding-top:calc(var(--header-h) + 5.5rem); }

/* Page heroes: 12ch was orphaning single words ("A" alone on line one). */
.hero--page h1{ max-width:17ch; }
@media (max-width:700px){ .hero--page h1, .hero h1{ max-width:14ch; } }

/* story chapter links are standalone tap targets */
.story__chapter .text-link{ display:inline-flex; align-items:center; min-height:44px; }

/* the roast title sits under the SUNDAYS 12-6PM label - the display type's
   optical negative margin collided with it */
.roast-feature__title{ margin-top:0; }