/* ============================================================
   Mason's Restaurant - site styles
   Fonts: Oranienbaum (display), Roboto (body), Roboto Condensed (nav/buttons)
   ============================================================ */

:root {
  --brick: #B64A2C;
  --brick-dark: #9c3f25;
  --slate: #5B6979;
  --slate-dark: #4d5966;
  --charcoal: #3F4851;
  --brick-cta: #A22A0C;
  --band: #AA3917;
  --ink: #1c1c1c;
  --paper: #ffffff;
  --paper-warm: #f7f4f1;
  --line: #e3ded9;
  --font-display: 'Oranienbaum', Georgia, serif;
  --font-body: 'Roboto', Arial, sans-serif;
  --font-nav: 'Roboto Condensed', Arial, sans-serif;
  --container: 1200px;
  --container-narrow: 820px;
  --measure: 62ch;   /* comfortable line length for running copy */
  --space-section: clamp(2.25rem, 3.5vw, 2.75rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brick); }
a:hover { color: var(--brick-dark); }
ul { padding-left: 1.2rem; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--ink);
}
h1 { font-size: clamp(1.875rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.25rem); }
h3 { font-size: clamp(1.35rem, 2.8vw, 1.6rem); }
p { margin: 0 0 1em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--brick); color: #fff; padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: var(--brick);
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0.65rem 1.4rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover, .btn:focus { color: #fff; }
.btn-brick { background: var(--brick); }
.btn-brick:hover, .btn-brick:focus { background: var(--brick-dark); }
.btn-slate { background: var(--slate); }
.btn-slate:hover, .btn-slate:focus { background: var(--slate-dark); }
main .btn-brick { background: var(--slate); }
main .btn-brick:hover, main .btn-brick:focus { background: var(--slate-dark); }
.btn-outline { background: transparent; border-color: #fff; color: #fff; }
.btn-outline:hover, .btn-outline:focus { background: rgba(255,255,255,0.15); }

/* ---------- Header ---------- */
/* Sticky so Book a Table stays reachable on long pages; condenses once scrolled. */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); }
.topbar { background: var(--paper); }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  max-width: var(--container); margin: 0 auto;
  padding: 0.75rem 1rem;
  transition: padding 0.25s ease;
}
.site-header.is-stuck { box-shadow: 0 2px 14px rgba(0,0,0,0.13); }
.site-header.is-stuck .topbar-inner { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.site-header .site-logo svg { transition: width 0.25s ease, height 0.25s ease; }
.site-header.is-stuck .site-logo svg { width: 46px; height: 46px; }
/* the stacked mobile CTAs scroll away; the burger and phone icons stay */
.site-header.is-stuck .topbar-mobile-actions { display: none; }
@media (prefers-reduced-motion: reduce) {
  .topbar-inner, .site-header .site-logo svg { transition: none; }
}
.site-logo { color: var(--ink); flex: 0 0 auto; }
.site-logo svg { width: 56px; height: 56px; }
/* Mobile: logo left; icon-only contact links pushed right beside the burger, like the live site */
.site-logo { order: -1; margin-right: auto; }
.topbar-contact { display: flex; gap: 0.4rem; }
.topbar-contact .contact-link { padding: 0.5rem; }
.topbar-contact .contact-link svg { width: 22px; height: 22px; }
.topbar-contact .contact-link span:not(.sr-only) { display: none; }
.topbar-actions { display: none; }
.topbar-mobile-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
  padding: 0 1rem 0.9rem;
}
.topbar-actions .btn-brick, .topbar-mobile-actions .btn-brick { background: var(--brick-cta); }
.topbar-actions .btn-brick:hover, .topbar-mobile-actions .btn-brick:hover { background: #8a2309; }
.contact-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--ink); text-decoration: none; font-size: 0.95rem;
}
.contact-link:hover { color: var(--brick); }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 52px; height: 52px; padding: 14px;
  background: var(--brick); border: 0;
}
.nav-toggle-bar { display: block; height: 2px; width: 100%; background: #fff; transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.site-nav {
  display: none;
  background: var(--brick);
}
.site-nav.is-open { display: block; }
/* the open menu lives inside the sticky header: never let it run off a short screen */
@media (max-width: 999px) {
  .site-nav.is-open { max-height: calc(100vh - 4.5rem); overflow-y: auto; }
  @supports (height: 100dvh) {
    .site-nav.is-open { max-height: calc(100dvh - 4.5rem); }
  }
}
.nav-list {
  list-style: none; margin: 0; padding: 0.5rem 0;
  font-family: var(--font-nav); font-weight: 300; text-transform: uppercase;
}
.nav-list > li { position: relative; }
.nav-list a {
  display: block; color: #fff; text-decoration: none;
  font-size: 1.15rem; padding: 0.7rem 1.25rem;
}
.nav-list > li.active > a { text-decoration: underline; text-underline-offset: 5px; }
.nav-list a:hover, .nav-list a:focus { color: #fff; background: var(--brick-dark); }
.has-dropdown { display: flex; flex-wrap: wrap; align-items: center; }
.has-dropdown > a { flex: 1; }
.dropdown-toggle {
  width: 52px; align-self: stretch;
  background: transparent; border: 0; position: relative;
}
.dropdown-toggle span {
  display: block; width: 9px; height: 9px; margin: 0 auto;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.dropdown-toggle[aria-expanded="true"] span { transform: rotate(225deg); }
.dropdown {
  display: none; list-style: none; margin: 0; padding: 0 0 0.4rem;
  flex-basis: 100%; background: var(--brick-dark);
}
.dropdown a { font-size: 1.02rem; padding: 0.55rem 2rem; }
.has-dropdown.is-open > .dropdown { display: block; }

/* Desktop header */
@media (min-width: 1000px) {
  .topbar-inner { position: relative; justify-content: center; padding: 1rem; }
  .topbar-contact {
    display: flex; flex-direction: column; gap: 0.35rem; margin-left: 0;
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  }
  .topbar-contact .contact-link { padding: 0; }
  .topbar-contact .contact-link svg { width: 16px; height: 16px; }
  .topbar-contact .contact-link span:not(.sr-only) { display: inline; }
  .topbar-actions {
    display: flex; gap: 0.75rem;
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  }
  .topbar-actions .btn { font-size: 0.9rem; padding: 0.55rem 1.1rem; }
  .topbar-mobile-actions { display: none; }
  .site-logo { order: 0; margin-right: 0; }
  .site-logo svg { width: 76px; height: 76px; }
  .site-header.is-stuck .site-logo svg { width: 50px; height: 50px; }
  .nav-toggle { display: none; }

  .site-nav { display: block; }
  .nav-list {
    display: flex; justify-content: center; flex-wrap: wrap;
    max-width: var(--container); margin: 0 auto; padding: 0;
  }
  .nav-list a { font-size: 1.2rem; padding: 0.8rem 1.05rem; }
  /* keep all ten items on one line on smaller laptops */
  @media (max-width: 1199px) { .nav-list a { font-size: 1rem; padding: 0.8rem 0.6rem; } }
  .dropdown-toggle { display: none; }
  .has-dropdown { display: block; }
  .dropdown {
    position: absolute; top: 100%; left: 0; min-width: 240px;
    background: var(--brick); padding: 0.3rem 0; z-index: 50;
    flex-basis: auto;
  }
  .dropdown a { font-size: 1.05rem; padding: 0.55rem 1.1rem; }
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* fills the first screen below the header (the header sits in flow above it) */
  height: calc(100vh - var(--header-h, 150px)); height: calc(100svh - var(--header-h, 150px));
  min-height: 420px;
  overflow: hidden;
  background: var(--charcoal);
}
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
/* the first screen arrives rather than appears: the hero fades in and the
   picture settles from slightly large, then keeps a slow drift */
@keyframes hero-in { from { opacity: 0; } to { opacity: 1; } }
.hero { animation: hero-in 1s ease-out both; }
@keyframes hero-drift { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero-slide.is-active img, .hero:not(.hero-slider) .hero-slide img {
  animation: hero-drift 9s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
.hero:not(.hero-slider) .hero-slide { position: absolute; inset: 0; opacity: 1; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  width: 96px; height: 96px; color: #fff;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
  animation: hero-badge-in 0.8s ease-out 0.9s both;
}
.hero-badge { width: 100%; height: 100%; display: block; animation: hero-spin 16s linear infinite; }
.hero-badge text {
  fill: #fff; font-family: var(--font-nav); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.hero-badge-arrow {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
}
@keyframes hero-spin { to { transform: rotate(360deg); } }
@keyframes hero-badge-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.hero-dots {
  position: absolute; left: 50%; bottom: 0.25rem; transform: translateX(-50%);
  display: flex; gap: 0;
}
/* on the slider hero the scroll cue sits well clear of the dots row beneath it */
.hero-slider .hero-scroll { bottom: 4.75rem; }
.hero-dot {
  width: 44px; height: 44px; border: 0; padding: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.hero-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
}
.hero-dot.is-active::before { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-slide { transition: none; }
  .hero, .hero-slide img, .hero-scroll, .hero-badge { animation: none; }
}

/* ---------- Sections ---------- */
.section { padding: var(--space-section) 1rem; }
.container { max-width: var(--container); margin: 0 auto; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.text-center { text-align: center; }
.section-title { text-align: center; margin-bottom: 1.5rem; }
.section-title > p { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.section-title .eyebrow {
  display: block; font-family: var(--font-nav); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.85rem; color: var(--brick); margin-bottom: 0.5rem;
}
.section-alt { background: var(--paper-warm); }

.intro h1 + h2, .intro h1 + p { margin-top: 0.2em; }
/* The heading keeps the original's full width for presence, but running copy is
   held to a readable measure: full-width paragraphs ran to ~150 characters. */
.intro > .container-narrow { max-width: var(--container); }
.intro p:not(.tagline) { max-width: var(--measure); margin-left: auto; margin-right: auto; }
/* Editorial opener. The heading keeps the original's centred, full-width moment;
   the copy below is treated as a standfirst plus body so a five paragraph intro
   has a shape to it rather than reading as one flat block. */
.intro h1 { margin-bottom: 0.55em; }
.intro h1::after {
  content: ""; display: block; width: 3rem; height: 2px;
  background: var(--brick); margin: 0.7em auto 0;
}
/* where a subheading follows, it does the separating: no rule between the two */
.intro h1:has(+ h2)::after { display: none; }
.intro h1 + p { font-size: 1.1875rem; line-height: 1.6; color: #2b2b2b; }
.intro p:not(.tagline) { font-size: 1.0625rem; line-height: 1.7; }
.intro .button-row { margin-top: 2rem; }
.intro > .container > .btn, .intro > .container-narrow > .btn { margin-top: 1.25rem; }

@media (min-width: 800px) {
  /* long centred paragraphs are ragged on both edges and tiring to read;
     the block stays centred on the page, the words align left */
  .intro p:not(.tagline) { text-align: left; }
  /* Without a picture the intro is a single column: heading and copy share
     exactly the same width, so a full-width headline no longer sits above a
     narrower block of text. */
  .intro > .container:not(.intro-grid),
  .intro > .container-narrow:not(.intro-grid) { max-width: var(--measure); }
  .intro > .container:not(.intro-grid) p:not(.tagline),
  .intro > .container-narrow:not(.intro-grid) p:not(.tagline) { max-width: none; }
}

/* ---------- Intro with a supporting picture ----------
   Where a page supplies an introImage, the opener becomes copy alongside a
   photograph rather than a narrow column of text in a lot of empty space.
   Mobile keeps the original's text-only intro: the hero sits right above it. */
.intro-figure { display: none; }
@media (min-width: 900px) {
  .intro .intro-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(2.5rem, 5vw, 4.5rem); align-items: stretch;
    max-width: var(--container); text-align: left;
  }
  .intro-grid .tagline, .intro-grid h1 { text-align: left; }
  .intro-grid h1::after { margin-left: 0; margin-right: 0; }
  .intro-grid p:not(.tagline) { margin-left: 0; margin-right: 0; max-width: 34rem; }
  .intro-grid .button-row { justify-content: flex-start; }
  /* The picture takes its height from the copy beside it so the two columns
     finish level. It is taken out of flow to do that: left in flow, a portrait
     original drove the row to its own intrinsic height and left a gap of up to
     420px under a short paragraph. The floor only covers a very short intro. */
  .intro-figure {
    display: block; margin: 0; position: relative;
    padding: 0 1.25rem 1.25rem 0;
    min-height: 15rem;
  }
  .intro-figure::before {
    content: ""; position: absolute; right: 0; bottom: 0;
    width: 60%; height: 55%; background: var(--slate);
  }
  /* out of flow so it cannot drive the row height, and sized explicitly:
     an absolutely positioned image with auto width and height uses its own
     intrinsic size rather than its offsets, and overflows */
  .intro-figure img {
    position: absolute; top: 0; left: 0;
    width: calc(100% - 1.25rem); height: calc(100% - 1.25rem);
    object-fit: cover;
  }
}
/* small uppercase strapline above a heading, as on the original site */
.tagline {
  font-family: var(--font-nav); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0; font-size: clamp(1.125rem, 1.9vw, 1.5rem); line-height: 1.5;
  margin: 0 0 1rem; color: var(--ink);
}
/* the original sets the intro strapline in brick; it carries the colour accent */
.intro .tagline { color: var(--brick); }
.intro h1 { margin-bottom: 0.7em; }
.intro p a { text-decoration: underline; text-underline-offset: 3px; }

/* img-text 50/50 */
.img-text { display: grid; gap: 1.5rem; align-items: center; }
/* slate panel offset behind the photo's lower-right corner, as on the original */
.img-text .img-text-media { position: relative; padding: 0 1.25rem 1.25rem 0; }
.img-text .img-text-media::before {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 60%; height: 65%; background: var(--slate);
}
.img-text .img-text-media img { position: relative; width: 100%; aspect-ratio: 343 / 370; object-fit: cover; }
.img-text .img-text-content h2 {
  font-family: var(--font-nav); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.875rem, 2.8vw, 2.25rem); line-height: 1.2;
}
.img-text .img-text-content h2 { margin-top: 0; }
.img-text .btn { margin-top: 0.5rem; }
@media (min-width: 800px) {
  .img-text { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .img-text.swap .img-text-media { order: 2; }
}

/* three-cards */
.cards { display: grid; gap: 0.75rem; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { position: relative; aspect-ratio: 343 / 480; overflow: hidden; background: var(--charcoal); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-body {
  position: absolute; inset: 0; padding: 1rem;
  /* titles line up across a row whatever the copy length: content starts
     at the same height on every card (28% of width is a fifth of the card) */
  padding-top: 28%;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  text-align: center; color: #fff; background: rgba(0,0,0,0.5);
}
.card-body h3 {
  margin-bottom: 0.5em; color: #fff; font-family: var(--font-nav); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.5rem, 2.3vw, 1.875rem);
}
.card-body p { color: #fff; max-width: 30em; margin-bottom: 1rem; }
.card-body .btn {
  background: transparent; color: #f0c9bd; font-family: var(--font-body); letter-spacing: 0.06em;
  padding: 0.6rem 0.5rem; border: 0; text-decoration: none;
}
.card-body .btn:hover, .card-body .btn:focus { background: transparent; color: #fff; text-decoration: underline; }
@media (min-width: 700px) { .card { aspect-ratio: 5 / 6; } }

/* highlight band */
.highlight {
  background: var(--band); color: #fff;
  text-align: center;
}
.highlight h2, .highlight h3 { color: #fff; }
.highlight h2 { font-size: clamp(1.875rem, 3.75vw, 3rem); }
/* inline links on the dark band: brick on charcoal fails contrast */
.highlight a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.highlight a:not(.btn):hover, .highlight a:not(.btn):focus { color: #f0c9bd; }
.highlight .container-narrow > p { max-width: var(--measure); margin-left: auto; margin-right: auto; }

/* long-form reading pages (blog posts, legal): narrow the whole column so
   headings, copy and lists share one left edge at a readable measure */
.prose-page .container-narrow { max-width: 68ch; }

/* ---------- Reviews carousel ----------
   Cards in a scroll-snap row: drag or swipe on touch, arrows and a counter
   otherwise. Nineteen reviews are a real asset; the old fading slider showed
   one at a time and hid the rest. */
.testimonials { background: var(--paper-warm); text-align: center; }
.testimonial-track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 0.25rem 0 1rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.testimonial {
  flex: 0 0 min(100%, 30rem); scroll-snap-align: center;
  display: flex; flex-direction: column; text-align: left;
  background: #fff; border: 1px solid var(--line); padding: 1.6rem 1.5rem 1.4rem;
}
.testimonial-source {
  align-self: flex-start; font-family: var(--font-nav); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.72rem; color: var(--brick);
  border: 1px solid currentColor; padding: 0.2rem 0.55rem; margin-bottom: 0.9rem;
}
.testimonial blockquote { margin: 0 0 1rem; font-size: 1rem; font-style: normal; }
.testimonial-source.is-unsourced { color: var(--slate); }
.testimonial cite {
  font-style: normal; font-family: var(--font-nav); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.8rem; color: var(--slate);
}
.testimonial-nav { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.testimonial-nav button {
  width: 44px; height: 44px; border: 1px solid var(--slate); border-radius: 50%;
  background: transparent; color: var(--slate); display: grid; place-items: center;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.testimonial-nav button:hover, .testimonial-nav button:focus-visible { background: var(--slate); color: #fff; }
.testimonial-count { font-family: var(--font-nav); letter-spacing: 0.12em; font-size: 0.85rem; color: var(--slate); min-width: 4.5em; }
@media (prefers-reduced-motion: reduce) { .testimonial-track { scroll-behavior: auto; } }

/* image flurry */
.img-flurry { display: grid; grid-template-columns: repeat(2, 1fr); }
.img-flurry img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 700px) { .img-flurry { grid-template-columns: repeat(4, 1fr); } }

/* gallery grid */
.gallery-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 170; background: rgba(20,20,20,0.94);
  display: flex; align-items: center; justify-content: center; padding: 0 1rem;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(92vw, 1400px); text-align: center; touch-action: pan-y; }
.lightbox img { max-width: 100%; max-height: 82vh; width: auto; height: auto; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox figcaption { color: #fff; font-family: var(--font-nav); letter-spacing: 0.08em; font-size: 0.9rem; margin-top: 0.9rem; opacity: 0.85; }
.lightbox button {
  position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255,255,255,0.28); outline: 2px solid #fff; outline-offset: 2px; }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .lightbox-prev, .lightbox-next { top: auto; bottom: 1rem; transform: none; }
  .lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; }
  .lightbox img { max-height: 70vh; }
}
body.has-lightbox { overflow: hidden; }

/* ---------- Food menus ---------- */
/* ---------- Menus ----------
   Seven menus behind tabs. Each opens with its own header (name, the
   client's availability line, a photograph), then a course navigation, then
   the dishes laid out like a printed menu: name, dotted leader, price. */
.menu-tabs {
  display: flex; gap: 0.5rem; margin: 0 0 2rem; padding: 0 0 0.5rem; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.menu-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .menu-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.menu-tab {
  flex: 0 0 auto; scroll-snap-align: start; min-height: 44px;
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em;
  background: transparent; border: 1px solid var(--brick); color: var(--brick);
  padding: 0.5rem 1rem; white-space: nowrap;
}
.menu-tab[aria-selected="true"] { background: var(--brick); color: #fff; }
.menu-panel[hidden] { display: none; }

.menu-head { display: grid; gap: 1.5rem; align-items: start; margin: 0 auto 3rem; max-width: var(--container); }
.menu-head h3 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 0.4em; }
.menu-head h3::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--brick); margin-top: 0.5em; }
.menu-head .menu-note { text-align: left; margin: 0 0 0.6em; max-width: none; font-style: normal; font-size: 1rem; color: var(--charcoal); }
.menu-head-figure { display: none; }
@media (min-width: 800px) {
  /* the copy sits on the same baseline as the foot of the picture, and is held
     to a readable width so a two-word title is not stranded in a wide column */
  .menu-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .menu-head-copy { max-width: 26rem; padding-top: 0.25rem; }
  .menu-head-figure { display: block; margin: 0; }
  .menu-head-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
}

.course-nav {
  position: sticky; top: calc(var(--header-now, 0px) + 0.5rem); z-index: 5;
  display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none;
  background: var(--paper-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 0.35rem 0; margin: 0 auto 2.5rem; max-width: var(--container);
}
.course-nav::-webkit-scrollbar { display: none; }
/* a row that scrolls fades out at its edges so a clipped item reads as "more" */
.menu-tabs.is-scrollable, .course-nav.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent);
  padding-left: 1.5rem; padding-right: 1.5rem; scroll-padding: 0 1.5rem;
}
.menu-tabs.is-scrollable.at-end, .course-nav.is-scrollable.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem);
  mask-image: linear-gradient(to right, transparent, #000 1.5rem);
}
.menu-tabs.is-scrollable.at-start, .course-nav.is-scrollable.at-start {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.course-nav a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.85rem;
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem;
  color: var(--charcoal); text-decoration: none; white-space: nowrap;
}
.course-nav a:hover, .course-nav a:focus-visible { color: var(--brick); }
/* the course being read: a solid brick pill, the same mark as the active tab */
.course-nav a[aria-current] { color: #fff; background: var(--brick); }
.course-nav a[aria-current]:hover, .course-nav a[aria-current]:focus-visible { color: #fff; }
/* the course you jumped to flashes its rule so the eye lands in the right place */
@keyframes course-land { 0%, 40% { background: rgba(182, 74, 44, 0.12); } 100% { background: transparent; } }
.course.is-jumped { animation: course-land 1.6s ease-out 0.35s both; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .course.is-jumped { animation: none; } }
.course-nav a { border-radius: 999px; transition: background 0.25s ease, color 0.25s ease; }

.food-menu { max-width: var(--container); margin: 0 auto; }
@media (min-width: 800px) { .food-menu { columns: 2; column-gap: clamp(2.5rem, 5vw, 4.5rem); } }
.course { break-inside: avoid; margin-bottom: 3rem; scroll-margin-top: 8rem; padding: 0 0.5rem; margin-left: -0.5rem; margin-right: -0.5rem; }
.food-menu h4 {
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 1rem; margin: 0 0 0.9rem; padding-bottom: 0.5rem; color: var(--brick);
  border-bottom: 1px solid var(--brick);
}
.dish { text-align: left; margin-bottom: 1.05rem; }
.dish-name {
  display: flex; gap: 0.5rem;
  /* a long name wraps, and the leader sits on its last line rather than its first */
  align-items: baseline;
  align-items: last baseline;
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 1rem; margin-bottom: 0.15rem;
}
/* the name gives way before the leader does, so the dots always read as a run
   rather than the stub a long name used to squeeze them into */
.dish-title { order: 1; min-width: 0; }
.dish-name::after {
  content: ""; order: 2; flex: 1 1 2.5rem; min-width: 2.5rem;
  border-bottom: 1px dotted #b9b1a9; transform: translateY(-0.3em);
}
.dish-name .price { order: 3; flex: 0 0 auto; white-space: nowrap; font-family: var(--font-body); font-size: 0.95rem; }
.dish-desc { font-size: 0.92rem; color: #555; margin: 0; line-height: 1.5; }
.course .menu-note { text-align: left; margin: 0.75rem 0 1rem; max-width: none; }
.menu-note { text-align: center; font-size: 0.9rem; color: #555; font-style: italic; max-width: 46em; margin: 1.5rem auto; }
.menu-cta { text-align: center; margin-top: 2rem; }

/* ---------- Accordion (FAQs) ---------- */
.accordion { max-width: var(--container-narrow); margin: 0 auto; border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--font-display); font-weight: 400; font-size: 1.25rem;
  padding: 1rem 0.25rem;
}
.accordion-trigger::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 2px solid var(--brick); border-bottom: 2px solid var(--brick);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.accordion-trigger[aria-expanded="true"]::after { transform: rotate(225deg); }
.accordion-panel { padding: 0 0.25rem 1.25rem; }
.accordion-panel[hidden] { display: none; }

/* ---------- Forms ---------- */
.form { max-width: var(--container-narrow); margin: 0 auto; }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .form-full { grid-column: 1 / -1; } }
.form label { display: block; font-size: 0.92rem; margin-bottom: 0.3rem; font-weight: 500; }
.form input, .form select, .form textarea {
  width: 100%; padding: 0.65rem 0.75rem; font: inherit;
  border: 1px solid var(--charcoal); border-radius: 6px; background: #fff; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus,
.newsletter-form input:focus { outline: 2px solid var(--brick); outline-offset: 1px; }
.form textarea { min-height: 130px; resize: vertical; }
.form input[type="checkbox"] {
  width: auto; display: inline-block; vertical-align: middle;
  margin-right: 0.5rem; accent-color: var(--brick);
}
.form label:has(> input[type="checkbox"]) { font-weight: 400; }
.form .btn { margin-top: 1rem; }
.form-note { font-size: 0.85rem; color: #555; }
.form-confirm { font-size: 0.9rem; margin: 0; }
.form-confirm.is-error { color: var(--brick); }
.newsletter-form .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Embeds (ResDiary) ---------- */
.embed-content { max-width: 760px; margin: 0 auto; }

/* ---------- Embed placeholders (swapped for real embeds at launch) ---------- */
.embed-placeholder {
  max-width: var(--container-narrow); margin: 0 auto;
  border: 2px dashed #c9c2bb; background: #fff;
  padding: clamp(2.5rem, 8vw, 4.5rem) 1.5rem; text-align: center; color: #666;
}
.embed-placeholder p { margin: 0 0 0.4rem; }
.embed-placeholder p:last-child { margin-bottom: 0; }
.embed-placeholder-label {
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.8rem; color: var(--brick);
}

/* anchored sections must clear the sticky header */
[id] { scroll-margin-top: 7rem; }

/* ---------- Blog cards ---------- */
.post-grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
.post-card { border: 1px solid var(--line); display: flex; flex-direction: column; }
.post-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.post-card-body time { font-size: 0.85rem; color: var(--slate); text-transform: uppercase; font-family: var(--font-nav); letter-spacing: 0.08em; }
.post-card-body p { flex: 1; }

/* ---------- Info tables (festive dates, hours) ---------- */
.info-list { list-style: none; padding: 0; max-width: var(--container-narrow); margin: 0 auto; }
.info-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.info-list .info-label { font-weight: 500; }

/* ---------- Awards ---------- */
.awards-list {
  list-style: none; padding: 0; margin: 0 auto; max-width: var(--container);
  display: grid; gap: 1rem; text-align: center;
}
@media (min-width: 700px) { .awards-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .awards-list { grid-template-columns: repeat(4, 1fr); } }
.awards-list li {
  border: 1px solid var(--line); padding: 1.75rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem; justify-content: center;
}
.award-name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
.award-detail {
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.82rem; color: var(--brick);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: #e8e8e8; margin-top: var(--space-section); }
.footer-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 3rem 1rem 2rem;
  display: grid; gap: 2rem;
}
@media (min-width: 700px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px) { .footer-inner { grid-template-columns: 1.3fr 1fr 1fr 0.8fr; } }
.footer-heading {
  font-family: var(--font-nav); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 1rem; color: #fff; margin-bottom: 1rem;
}
.footer-name { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 0.4rem; color: #fff; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #f0c9bd; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.45rem; }
.footer-links a { text-decoration: none; font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; }
.newsletter-form { display: grid; gap: 0.75rem; max-width: 380px; }
.newsletter-form input {
  padding: 0.65rem 0.75rem; border: 0; border-radius: 0; font: inherit;
}
.footer-social { display: flex; gap: 1rem; margin-top: 1.5rem; }
.footer-social a { display: inline-flex; padding: 0.35rem; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center; padding: 1.25rem 1rem; font-size: 0.88rem;
}
.footer-legal p { margin: 0; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--ink); color: #fff;
  padding: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: center;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; max-width: 60em; font-size: 0.92rem; }
.cookie-banner a { color: #f0c9bd; }
.cookie-actions { display: flex; gap: 0.75rem; }
.cookie-banner .btn { font-size: 0.85rem; padding: 0.6rem 1.1rem; min-height: 44px; }
/* on preview builds the review dock sits bottom-right; keep the banner's buttons clear of it */
.cookie-banner.has-review-dock { padding-bottom: 9.5rem; }
@media (min-width: 700px) { .cookie-banner.has-review-dock { padding-bottom: 1rem; padding-right: 200px; } }

/* ---------- Promo modal ---------- */
.promo-modal {
  position: fixed; inset: 0; z-index: 160;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 1rem;
}
.promo-modal[hidden] { display: none; }
.promo-box {
  background: #fff; border: 1px solid var(--brick);
  max-width: 460px; width: 100%; padding: 2.25rem 1.75rem 1.75rem;
  text-align: center; position: relative;
}
.promo-box .eyebrow {
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 0.8rem; margin-bottom: 0.5rem; display: block;
}
.promo-box h2 { color: var(--brick); }
.promo-close {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brick); color: #fff; border: 0; font-size: 1rem; line-height: 1;
}

/* ---------- A taste of the menu (homepage) ---------- */
.taste-grid { display: grid; gap: 1.25rem 2.5rem; text-align: left; max-width: var(--container); margin: 0 auto; }
.taste-grid .dish { border-top: 1px solid var(--line); padding-top: 1rem; margin: 0; }
/* In the narrow tasting columns a long name wraps, and the price belongs on
   the first line beside it, not dropped to the last. The menus page keeps
   last-baseline, where the leader should follow the end of a long name. */
.taste-grid .dish-name { flex-wrap: nowrap; align-items: baseline; }
@media (min-width: 800px) { .taste-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.taste .button-row { margin-top: 2rem; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mb-2 { margin-bottom: 2rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1rem; }
.notice-strip {
  background: var(--brick); color: #fff; text-align: center;
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.65rem 1rem;
}
.notice-strip p { margin: 0; }

/* ---------- Wayfinder: pick the occasion ----------
   Mason's does a lot of different things and the original site buried most of
   them in the nav. This strip puts every occasion one click from the top of
   the homepage, and shows the range rather than describing it. */
.chooser {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chooser-item {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 2; background: var(--charcoal);
  text-decoration: none; color: #fff;
}
.chooser-item img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.chooser-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.1) 100%);
}
.chooser-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0.8rem 0.85rem; text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  font-family: var(--font-nav); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.9rem; line-height: 1.25;
}
.chooser-label > span {
  display: block; text-transform: none; letter-spacing: 0;
  font-size: 0.82rem; opacity: 0.85; margin-top: 0.15rem;
}
/* the global a:hover turns links brick; on a photograph the words must stay white */
.chooser-item:hover, .chooser-item:focus-visible, .chooser-item:active { color: #fff; }
.chooser-item:hover img, .chooser-item:focus-visible img { transform: scale(1.06); }
.chooser-item::after { transition: opacity 0.4s ease; }
.chooser-label { transition: transform 0.4s ease; }
.chooser-label strong { font-weight: inherit; }
.chooser-label strong::after {
  content: "\2192"; display: inline-block; margin-left: 0.45em; opacity: 0;
  transform: translateX(-0.4em); transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) {
  .chooser-item:hover .chooser-label, .chooser-item:focus-visible .chooser-label { transform: translateY(-0.3rem); }
  .chooser-item:hover .chooser-label strong::after, .chooser-item:focus-visible .chooser-label strong::after { opacity: 1; transform: none; }
  /* the wash deepens rather than lifts, so the words stay readable over a bright picture */
  .chooser-item:hover::after, .chooser-item:focus-visible::after {
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.15) 100%);
  }
}
.chooser-item:focus-visible { outline: 3px solid var(--brick); outline-offset: 2px; }
@media (min-width: 560px) { .chooser { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .chooser { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } }

/* ---------- Figures at a glance ----------
   Capacities and numbers that were buried in paragraphs, pulled out so they
   can be read in a second. Every figure comes from the client's own copy. */
.stat-strip {
  display: grid; gap: 1.25rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center; list-style: none; padding: 0; margin: 0;
}
.stat-strip .stat-figure {
  display: block; font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1; color: var(--brick);
}
.stat-strip .stat-label {
  display: block; font-family: var(--font-nav); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.82rem; margin-top: 0.5rem; color: var(--slate);
}
@media (min-width: 720px) { .stat-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.stat-strip + .info-list { margin-top: 2.25rem; }

/* ---------- Gallery filter ---------- */
.gallery-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 0.5rem; }
.gallery-filter button {
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.85rem; padding: 0.6rem 1.1rem; min-height: 44px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.gallery-filter button[aria-pressed="true"] { background: var(--brick); border-color: var(--brick); color: #fff; }
.gallery-filter button:hover { border-color: var(--brick); }
.gallery-section[hidden] { display: none; }

/* ---------- Motion ----------
   Sections settle into place as they come into view, and cards lift on hover.
   The classes are added by JavaScript, so nothing is ever hidden without it,
   and everything is switched off for anyone who prefers reduced motion. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--stagger, 0s); }
/* headings wipe up from behind a mask as their block arrives */
.reveal h1, .reveal h2 { clip-path: inset(0 0 100% 0); transform: translateY(0.5em); }
.reveal.is-visible h1, .reveal.is-visible h2 {
  clip-path: inset(-0.2em 0 -0.2em 0); transform: none;
  transition: clip-path 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--stagger, 0s) + 0.1s);
}
/* a tilted picture waiting below the fold must never widen the page */
main { overflow-x: clip; }
/* pictures come in a few degrees off and straighten as they land */
.reveal.intro-figure, .reveal.img-text-media { transform: translateY(18px) rotate(-2.5deg) scale(0.97); }
.reveal.intro-figure.is-visible, .reveal.img-text-media.is-visible {
  transform: none; transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--stagger, 0s);
}
.card img, .gallery-grid img, .img-text-media img { transition: transform 0.6s ease; }
.card:hover img, .gallery-grid img:hover { transform: scale(1.05); }
.card { transition: box-shadow 0.3s ease; }
.card:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
@media print {
  .reveal, .reveal.is-visible, .reveal h1, .reveal h2 { opacity: 1; transform: none; clip-path: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .reveal h1, .reveal h2 { clip-path: none; transform: none; transition: none; }
  .card img, .gallery-grid img, .img-text-media img, .chooser-item img, .chooser-label, .chooser-label strong::after, .chooser-item::after { transition: none; }
  .card:hover img, .gallery-grid img:hover, .chooser-item:hover img { transform: none; }
}

/* a date line above the copy, as on the client's own festive pages */
.date-line {
  font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.85rem; color: var(--brick); margin: -0.4em 0 1em;
}
/* a note that follows a button needs room to read as a separate remark */
.img-text-content .btn + .form-note { margin-top: 1.5rem; }

/* ---------- Three parallel offerings side by side ----------
   Three short blocks as full-width image-and-text bands left most of each
   row empty; as a row of three they read as the set of options they are. */
.offer-grid { display: grid; gap: 2rem 1.75rem; max-width: var(--container); margin: 0 auto; }
.offer { margin: 0; }
.offer img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1.1rem; }
.offer h2 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); margin-bottom: 0.5em; }
.offer p { margin: 0; }
@media (min-width: 760px) { .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Festive dates at a glance ----------
   Six dates read as a strip, name above and date below, the way the client's
   own site lays them out. As a two-column list the eye had to travel the
   width of the page for every row. */
.dates-strip {
  display: grid; gap: 1.75rem 1rem; list-style: none; padding: 0;
  margin: 0 auto; max-width: var(--container);
  grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center;
}
.dates-strip .date-what {
  display: block; font-family: var(--font-nav); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.85rem; color: var(--slate);
}
.dates-strip .date-when {
  display: block; margin-top: 0.4rem; font-weight: 500; color: var(--ink);
}
@media (min-width: 600px) { .dates-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dates-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* the sample-menu statement sits with the tabs so it is on screen whichever
   menu is open, not only in the page intro */
.menu-sample-note { text-align: center; margin: -1rem auto 2rem; font-style: normal; }

/* a booking calendar needs more room than a form: a month grid plus time slots
   is cramped at the 760px the enquiry forms use, and stretched at full width */
.embed-calendar { max-width: 880px; margin: 0 auto; }