/* ==========================================================================
   The Poachers Inn, Bollington
   Hand-written CSS. No framework, no CDN, no external font — the type stack
   is entirely system-native and self-hosted by definition.

   The palette is sampled from the pub's own printed menus (task 49): ivory
   paper, pure-black banner bars, antique gold rules and medallion. Hex values
   below are measured off those artworks, not invented — see the notes on each.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Black — the letter-pressed banner bars on the menus ("SERVED TUESDAY –
     FRIDAY"). Measured #000000: the printer really did use solid black, and
     softening it to a charcoal is what makes a design like this look like a
     copy of itself. */
  --ink-deep:   #000000;   /* the banner black — bands, footer, scrims */
  --ink-strong: #141414;   /* one step up, for large surfaces that sit next to it */

  /* Paper — measured off the menu sheets (#f7f6f4): a warm-neutral ivory, not
     white. The rest of the ramp is mixed toward the same hue. */
  --stone-50:  #f7f6f4;
  --stone-100: #efede8;
  --stone-200: #e3e0d9;
  --stone-300: #cbc7bc;
  --stone-400: #a9a49a;
  --stone-500: #87827a;

  /* Antique gold — the rules, flourishes and the "SAVE 50p" medallion. The
     medallion sampled #615431; the hairline rules sampled #946f23. Contrast is
     measured, not eyeballed (ratios are against --stone-50):
       --brass      4.27:1 — borders, fills and LARGE display text only
       --brass-ink  5.51:1 — passes AA, so it can carry small text and links
       --brass-light 8.04:1 on --ink-deep — for gold on the black bands */
  --brass:       #946f23;
  --brass-light: #c39a4b;
  --brass-ink:   #7d5f1f;
  --brass-deep:  #615431;  /* the medallion fill; white on it is 7.44:1 */

  /* Ink */
  --ink:       #1a1d17;
  --ink-muted: #55584e;
  /* Dark enough to clear AA (4.5:1) as real label text on white, stone-50 and
     stone-100 — it carries the "(optional)" hints, so it is not decorative. */
  --ink-faint: #696b5f;

  --white: #ffffff;

  /* Feedback */
  --danger:     #9b2c1f;
  --danger-bg:  #fdf1ef;
  --success:    #2f6b43;

  /* Type */
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --maxw: 1180px;
  --maxw-prose: 68ch;

  /* Form */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(26, 29, 23, 0.06), 0 2px 6px rgba(26, 29, 23, 0.04);
  --shadow: 0 2px 6px rgba(26, 29, 23, 0.06), 0 12px 28px rgba(26, 29, 23, 0.09);
  --shadow-lg: 0 6px 18px rgba(26, 29, 23, 0.1), 0 30px 60px rgba(26, 29, 23, 0.14);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  --header-h: 4.5rem;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Author `display` rules outrank the UA stylesheet's [hidden] { display: none },
   so any component given a display value would ignore the attribute entirely.
   This keeps `hidden` authoritative — the form's error slots depend on it. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--stone-50);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brass-ink); }

ul, ol { margin: 0; padding: 0; }

/* Focus — visible, brass, never removed */
:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--ink :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--brass-light);
}

::selection {
  background: var(--brass);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--prose { max-width: calc(var(--maxw-prose) + var(--gutter) * 2); }

.center { text-align: center; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink-strong);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::after {
  content: "";
  height: 1px;
  width: 2.5rem;
  background: var(--brass);
  opacity: 0.6;
}
.center .eyebrow { justify-content: center; }
.eyebrow--invert { color: var(--brass-light); }
.eyebrow--invert::after { background: var(--brass-light); }

.link-arrow {
  font-weight: 650;
  text-decoration: none;
  color: var(--brass-ink);
  border-bottom: 2px solid rgba(148, 111, 35, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.link-arrow:hover {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-strong);
  --btn-fg: var(--white);
  --btn-bd: var(--ink-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background-color 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn:active { transform: translateY(0); }

.btn--lg {
  padding: 0.95rem 2rem;
  font-size: 1.0625rem;
}

.btn--block { width: 100%; }

/* Gold fill, white text — the "SAVE 50p" medallion on the printed menu, which is
   where this button gets its manners. The old palette put near-black (#241905) on
   the old, lighter brass for 5.34:1; against the new deeper gold that same pairing
   is 3.75:1 and fails AA at this size. So the text is white (4.61:1) and the hover
   DARKENS to the medallion's own fill (7.44:1) instead of lightening — lightening
   the gold is what took the contrast away in the first place. */
.btn--primary {
  --btn-bg: var(--brass);
  --btn-bd: var(--brass);
  --btn-fg: var(--white);
}
.btn--primary:hover {
  --btn-bg: var(--brass-deep);
  --btn-bd: var(--brass-deep);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink-strong);
  --btn-bd: var(--stone-400);
}
.btn--outline:hover {
  --btn-bd: var(--ink-strong);
  --btn-bg: rgba(0, 0, 0, 0.06);
}

.btn--ghost {
  --btn-bg: rgba(247, 246, 244, 0.1);
  --btn-fg: var(--white);
  --btn-bd: rgba(247, 246, 244, 0.55);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  --btn-bg: rgba(247, 246, 244, 0.92);
  --btn-fg: var(--ink-deep);
  --btn-bd: rgba(247, 246, 244, 0.92);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
.center .btn-row { justify-content: center; }

/* Submit spinner */
.btn__spinner {
  display: none;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn.is-busy .btn__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. Wordmark
   -------------------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}

.wordmark__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.wordmark__place {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
  padding-left: 0.1em;
}

.wordmark__pip {
  width: 3px;
  height: 3px;
  background: var(--brass);
  transform: rotate(45deg);
  flex: none;
}

/* With the stag beside it, the lockup turns on its side: mark left, type right,
   the way the pub's own artwork stacks it. */
.wordmark--marked {
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}
.wordmark--marked .stag { --stag-w: 1.85rem; }

.wordmark__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

/* --------------------------------------------------------------------------
   6. Header + nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink-deep);
  color: var(--stone-50);
  border-bottom: 1px solid rgba(247, 246, 244, 0.1);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* On the home page the header floats over the hero. A scrim keeps the
   wordmark legible against the bright sky in the photograph even before
   any JS runs — the solid state is a progressive enhancement, not a
   prerequisite for readability. */
body.has-hero .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
}

/* The scrim is a pseudo-element half again as tall as the header so it fades
   out well below the bar itself. Painting it on the header's own background
   left a hard seam exactly where the gradient ran out of box to fade in. */
body.has-hero .site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 240%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 30%, rgba(0, 0, 0, 0.26) 58%, rgba(0, 0, 0, 0) 100%);
  transition: opacity 0.3s var(--ease);
}

body.has-hero .site-header.is-scrolled {
  background-color: var(--ink-deep);
  border-bottom-color: rgba(247, 246, 244, 0.1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
body.has-hero .site-header.is-scrolled::before { opacity: 0; }

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
}

.primary-nav__link {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  color: var(--stone-100);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.primary-nav__link:hover {
  background: rgba(247, 246, 244, 0.12);
  color: var(--white);
}
.primary-nav__link.is-current {
  color: var(--brass-light);
}

/* Same contrast story as .btn--primary: white on the gold, darkening on hover. */
.primary-nav__link--cta {
  margin-left: 0.4rem;
  background: var(--brass);
  color: var(--white);
  padding-inline: 1.15rem;
}
.primary-nav__link--cta:hover {
  background: var(--brass-deep);
  color: var(--white);
}
.primary-nav__link--cta.is-current {
  color: var(--white);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1.5px solid rgba(247, 246, 244, 0.35);
  border-radius: 999px;
  color: var(--stone-50);
  padding: 0.5rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}

.nav-toggle__bars {
  display: grid;
  gap: 3px;
  width: 16px;
}
.nav-toggle__bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 47.99em) {
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-deep);
    border-bottom: 1px solid rgba(247, 246, 244, 0.12);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .primary-nav.is-open { display: block; }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .primary-nav__link {
    display: block;
    border-radius: var(--radius);
    padding: 0.85rem 0.75rem;
    font-size: 1.05rem;
  }
  .primary-nav__link--cta {
    margin: 0.5rem 0 0;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(92svh, 780px);
  display: flex;
  align-items: flex-end;
  color: var(--stone-50);
  padding-top: calc(var(--header-h) + 2rem);
  background: var(--ink-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Two-part scrim: a broad warm darkening plus a heavier foot so the
   headline holds AA contrast over the sunlit stone. */
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Weighted to the bottom-left, where the headline actually sits — the sunlit
     stone and trees are the reason someone books, so the top and right stay
     close to the original exposure. The header carries its own scrim, so the
     top edge needs no help from here. */
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.56) 32%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.04) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.14) 45%, rgba(0, 0, 0, 0) 72%);
}

.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
}

.hero__content { max-width: 46rem; }

.hero__kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin: 0 0 1rem;
}

.hero__title {
  font-size: clamp(2.6rem, 7.5vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.hero__body {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: rgba(247, 246, 244, 0.92);
  max-width: 40rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.hero__rating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 246, 244, 0.22);
  max-width: 34rem;
}
.hero__rating-score {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--brass-light);
}
.hero__rating-meta {
  font-size: 0.9rem;
  color: rgba(247, 246, 244, 0.82);
}

/* --------------------------------------------------------------------------
   8. Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section--stone {
  background: var(--stone-100);
  border-block: 1px solid var(--stone-200);
}

.section--ink {
  background: var(--ink-strong);
  color: var(--stone-50);
  /* Two soft gold blooms on black — the warmth the printed menus get from gold
     ink on a black band. Kept low: this sits behind text. */
  background-image:
    radial-gradient(120% 90% at 15% 0%, rgba(148, 111, 35, 0.22) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(148, 111, 35, 0.14) 0%, rgba(0, 0, 0, 0) 55%);
}

.section__title {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  margin: 0 0 1rem;
}
.section__title--invert { color: var(--stone-50); }

.section__standfirst {
  font-size: 1.15rem;
  color: var(--ink-muted);
  max-width: 44ch;
  margin-inline: auto;
}

.page-head {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.page-head__title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  margin: 0;
}

.page-head__intro {
  margin-top: 1.25rem;
  max-width: var(--maxw-prose);
  font-size: 1.15rem;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   9. Features
   -------------------------------------------------------------------------- */
.features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.feature { }

.feature__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--stone-50);
  border: 1px solid var(--stone-300);
  box-shadow: inset 0 0 0 1px rgba(148, 111, 35, 0.18), var(--shadow-sm);
  color: var(--ink-strong);
  margin-bottom: 1.15rem;
}
.feature__icon svg { width: 2.15rem; height: 2.15rem; }

.feature__title {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}

.feature__body {
  font-size: 0.975rem;
  color: var(--ink-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. Split (image + text)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 56em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* A thin brass hairline inside the frame — reads as a picture mount */
.split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(148, 111, 35, 0.35);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.split__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.split__cta { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   11. Reviews
   -------------------------------------------------------------------------- */
.reviews__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.reviews {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 56em) {
  .reviews { grid-template-columns: minmax(15rem, 19rem) 1fr; }
}

.rating-badge {
  background: rgba(247, 246, 244, 0.06);
  border: 1px solid rgba(195, 154, 75, 0.4);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
}

.rating-badge__score {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 600;
  color: var(--brass-light);
  margin: 0;
}
.rating-badge__outof {
  font-size: 1.5rem;
  opacity: 0.7;
}

.rating-badge__count {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: rgba(247, 246, 244, 0.9);
}

.rating-badge__source {
  margin: 0.75rem 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 246, 244, 0.75);
}

/* The provenance caption is deliberately quiet but never hidden — the
   rating is a point-in-time fact, not a live feed, and the page says so. */
.rating-badge__asof {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(247, 246, 244, 0.65);
}

.rating-badge__link {
  display: inline-block;
  margin-top: 1.1rem;
  color: var(--brass-light);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid rgba(195, 154, 75, 0.5);
  padding-bottom: 2px;
}
.rating-badge__link:hover { color: var(--white); border-bottom-color: var(--white); }

.quotes {
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 40em) {
  .quotes { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.quote {
  background: rgba(247, 246, 244, 0.05);
  border: 1px solid rgba(247, 246, 244, 0.12);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.quote figure { margin: 0; }

.quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--stone-50);
}
.quote__text p { margin: 0; }

.quote__by {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.quote__author {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--brass-light);
}
.quote__source {
  font-size: 0.8rem;
  color: rgba(247, 246, 244, 0.65);
}

.review-links {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(247, 246, 244, 0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.review-links__label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 246, 244, 0.7);
}

.review-links__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip-link {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(247, 246, 244, 0.3);
  border-radius: 999px;
  color: var(--stone-50);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.chip-link:hover {
  background: var(--stone-50);
  border-color: var(--stone-50);
  color: var(--ink-deep);
}

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 9vw, 7rem);
  background: var(--ink-deep);
  color: var(--stone-50);
  text-align: center;
}

.cta-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.cta-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.78));
}

.cta-band__title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin: 0 0 1rem;
}

.cta-band__body {
  max-width: 46ch;
  margin-inline: auto;
  color: rgba(247, 246, 244, 0.9);
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   13. Cards, images, menus
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

.card--quiet {
  background: var(--stone-100);
  box-shadow: none;
}

.feature-image {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.feature-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.feature-image--wide img { aspect-ratio: 21 / 9; }

.menu-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.menu-card {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}

.menu-card__title {
  font-size: 1.4rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--stone-200);
}

.menu-card__note {
  margin: 1.25rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--stone-300);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-muted);
}

.empty-state {
  text-align: center;
  max-width: 44ch;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  border: 1px dashed var(--stone-400);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.empty-state__title {
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
}
.empty-state p { color: var(--ink-muted); }
.empty-state .btn { margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   14. Booking form
   -------------------------------------------------------------------------- */
.book-layout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 62em) {
  .book-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 2.25rem;
}
.fieldset:last-of-type { margin-bottom: 0; }

.fieldset__legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.15rem;
  padding: 0;
}

.fieldset__step {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--ink-strong);
  color: var(--stone-50);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
}

.field { margin-bottom: 1.15rem; }
.field:last-child { margin-bottom: 0; }

.field-row {
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 34em) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  color: var(--ink);
}

.field__optional {
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0;
}

.field__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--stone-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.field__input:hover { border-color: var(--stone-500); }
.field__input:focus {
  outline: none;
  border-color: var(--ink-strong);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.14);
}
.field__input:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 1px;
}

.field__input--select {
  appearance: none;
  /* Inline SVG chevron as a data URI — self-contained, no network request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2355584e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.7rem;
  padding-right: 2.4rem;
}

.field__input--area {
  resize: vertical;
  min-height: 5.5rem;
}

.field__input[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.field__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(155, 44, 31, 0.15);
}

.field__hint {
  margin: 0.4rem 0 0;
  font-size: 0.825rem;
  color: var(--ink-muted);
}

.field__error {
  margin: 0.4rem 0 0;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--danger);
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}
.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.12rem;
  border-radius: 50%;
  background: var(--danger);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
}

/* Alert above the form */
.form-alert {
  margin-bottom: 1.75rem;
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: #6f1f16;
  font-size: 0.95rem;
}
.form-alert p { margin: 0; }
.form-alert strong { color: var(--danger); }

/* Sittings */
.slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-height: 3rem;
}

.slots__placeholder,
.slots__empty {
  margin: 0;
  padding: 0.85rem 0;
  color: var(--ink-muted);
  font-size: 0.925rem;
}

.slots__empty {
  width: 100%;
  padding: 1.15rem;
  border: 1px dashed var(--stone-400);
  border-radius: var(--radius-sm);
  background: var(--stone-100);
  text-align: center;
}

.slots[data-state="loading"] { opacity: 0.55; }

.slots__status {
  margin: 0.6rem 0 0;
  font-size: 0.825rem;
  color: var(--ink-muted);
  min-height: 1.2em;
}

/* Each sitting is a real radio input, visually replaced by the chip label —
   keyboard and screen-reader behaviour come for free. */
.slot { position: relative; }

.slot__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.slot__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 5.25rem;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--stone-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.14s var(--ease), background-color 0.14s var(--ease), color 0.14s var(--ease), transform 0.14s var(--ease);
}

.slot__time {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.slot__left {
  font-size: 0.7rem;
  color: var(--ink-muted);
}

.slot__input:hover + .slot__label {
  border-color: var(--ink-strong);
  transform: translateY(-1px);
}

.slot__input:checked + .slot__label {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--stone-50);
}
.slot__input:checked + .slot__label .slot__left { color: rgba(247, 246, 244, 0.75); }

.slot__input:focus-visible + .slot__label {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

.slot__input:disabled + .slot__label {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--stone-100);
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
}
.slot__input:disabled:hover + .slot__label {
  border-color: var(--stone-300);
  transform: none;
}

.book-form__actions { margin-top: 2.25rem; }

.book-form__smallprint {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-muted);
  text-align: center;
}

/* Aside */
.book-aside {
  display: grid;
  gap: 1.25rem;
}

.book-aside__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.book-aside__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.book-aside__title {
  font-size: 1.2rem;
  margin: 0 0 1rem;
}

.tick-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.tick-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.925rem;
  color: var(--ink-muted);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   15. Confirmation
   -------------------------------------------------------------------------- */
.confirm { text-align: center; }

.confirm__mark {
  display: inline-grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  color: var(--success);
  margin-bottom: 1.25rem;
}
.confirm__mark svg { width: 100%; height: 100%; }

.confirm__title {
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  margin: 0 0 0.75rem;
}

.confirm__lead {
  color: var(--ink-muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.confirm__details {
  margin: 0 0 1.75rem;
  text-align: left;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  overflow: hidden;
}

.confirm__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--stone-200);
}
.confirm__row:last-child { border-bottom: 0; }
.confirm__row:nth-child(odd) { background: var(--stone-50); }

.confirm__details dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.15rem;
}
.confirm__details dd {
  margin: 0;
  font-weight: 600;
}

.confirm__ref {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--ink-strong);
  color: var(--stone-50);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.confirm__note {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.confirm .btn-row { justify-content: center; }

@media (max-width: 30em) {
  .confirm__row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --------------------------------------------------------------------------
   16. Error pages
   -------------------------------------------------------------------------- */
.page--error { display: grid; place-items: center; min-height: 60vh; }

.error__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--stone-300);
  /* line-height:1 leaves no room under the digits — the headline crowds them */
  margin: 0 0 1.25rem;
}

.error__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 1rem;
}

.error__lead {
  color: var(--ink-muted);
  font-size: 1.1rem;
  max-width: 46ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-deep);
  color: var(--stone-200);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  font-size: 0.925rem;
}

/* Flex, not a fixed grid, because the columns are conditional: the Kitchen hours
   column only exists when hours are set, and the Reviews column only when there
   are review links. A fixed five-track grid left an empty track (or misaligned
   the lot) whenever one was absent. Flex-wrap lays out however many there are —
   the brand block is allowed to run wider, and the hours block gets enough basis
   that "12:00pm – 3:00pm" stays on one line. */
.site-footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}
.site-footer__brand { flex: 1 1 100%; }
.site-footer__col { flex: 1 1 9rem; }
.site-footer__col--hours { flex: 1 1 12rem; }

@media (min-width: 44em) {
  .site-footer__brand { flex: 1 1 100%; }
}
@media (min-width: 68em) {
  .site-footer__brand { flex: 2 1 16rem; }
}

.site-footer__brand .wordmark { color: var(--stone-50); }

.site-footer__note {
  margin-top: 1.15rem;
  max-width: 38ch;
  color: rgba(227, 224, 217, 0.75);
  font-size: 0.9rem;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin: 0 0 1rem;
}

.site-footer__address {
  font-style: normal;
  line-height: 1.6;
  color: rgba(232, 224, 208, 0.85);
  max-width: 22ch;
}

.site-footer__line { margin: 0.75rem 0 0; }

.site-footer__hours { color: rgba(232, 224, 208, 0.85); }

.site-footer__list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.site-footer__link {
  color: var(--stone-200);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.site-footer__link:hover {
  color: var(--white);
  border-bottom-color: var(--brass-light);
}

.site-footer__base {
  max-width: var(--maxw);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: 1.5rem var(--gutter);
  border-top: 1px solid rgba(247, 246, 244, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: rgba(232, 224, 208, 0.6);
}
.site-footer__base p { margin: 0; }

/* --------------------------------------------------------------------------
   18. Rich text (CMS blocks, already sanitised server-side)
   -------------------------------------------------------------------------- */
.rich > *:first-child { margin-top: 0; }
.rich > *:last-child { margin-bottom: 0; }

.rich p { margin: 0 0 1em; }

.rich h2, .rich h3, .rich h4 {
  margin: 1.75em 0 0.6em;
  line-height: 1.2;
}
.rich h2 { font-size: 1.6rem; }
.rich h3 { font-size: 1.3rem; }
.rich h4 { font-size: 1.1rem; }

.rich ul, .rich ol {
  margin: 0 0 1em;
  padding-left: 1.35em;
}
.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich li { margin-bottom: 0.4em; }
.rich li::marker { color: var(--brass); }

.rich a {
  color: var(--brass-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.rich a:hover { text-decoration-thickness: 2px; }

.rich blockquote {
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-size: 1.15em;
  font-style: italic;
  color: var(--ink-muted);
}

.rich strong { font-weight: 700; }
.rich u { text-underline-offset: 2px; }

.rich--lead {
  font-size: 1.15rem;
  line-height: 1.7;
}
.rich--lead > p:first-of-type {
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--ink);
}

.rich--clamp { max-width: 46ch; }

.rich--invert,
.rich--invert p { color: rgba(247, 246, 244, 0.92); }
.rich--invert a { color: var(--brass-light); }
.rich--invert blockquote { color: rgba(247, 246, 244, 0.8); }
.rich--invert li::marker { color: var(--brass-light); }

/* --------------------------------------------------------------------------
   19. Motion
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Anything the reveal script never reaches (no JS, no IO support) must still
   be readable — the script adds .js-reveal to <html> before hiding anything. */
html:not(.js-reveal) .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   20. The printed-menu kit
   --------------------------------------------------------------------------
   Lifted from the pub's own menus and posters (task 49): the stag, the black
   letter-spaced banner bars, the hairline gold rules with a lozenge in the
   middle, the medallion, and a priced list with dotted leaders.
   -------------------------------------------------------------------------- */

/* --- The stag -------------------------------------------------------------
   Masked rather than <img> so one file recolours: black in the header, ivory in
   the footer, gold on a band. The URL is relative to THIS stylesheet, which is
   also what makes it resolve correctly behind the portal's /preview/ prefix.
   If masking were ever unsupported the mark simply does not paint — the
   wordmark next to it still names the pub, so nothing is lost but decoration. */
.stag {
  display: block;
  width: var(--stag-w, 2rem);
  aspect-ratio: 663 / 812;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("logo-stag.svg") center / contain no-repeat;
  mask: url("logo-stag.svg") center / contain no-repeat;
}

/* --- Gold rule with a lozenge --------------------------------------------- */
.rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  color: var(--brass);
}
.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.rule__pip {
  width: 7px;
  height: 7px;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}
.rule--invert { color: var(--brass-light); }
.rule--tight { margin: 1rem 0; }

/* --- Black banner bar ------------------------------------------------------
   The "SERVED TUESDAY – FRIDAY | 12:00PM – 3:00PM" device. */
.band {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  background: var(--ink-deep);
  color: var(--stone-50);
  padding: 0.6rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-align: center;
}
.band__sep {
  width: 1px;
  align-self: stretch;
  background: currentColor;
  opacity: 0.45;
}
.band--full { display: flex; width: 100%; }

/* --- Gold medallion -------------------------------------------------------- */
.medallion {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: none;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--brass-deep);       /* white on this is 7.44:1 */
  color: var(--white);
  padding: 0.5rem;
  line-height: 1.1;
  box-shadow: 0 0 0 3px var(--stone-50), 0 0 0 4px rgba(148, 111, 35, 0.5);
}
.medallion__big {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}
.medallion__small {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.92;
}

/* --- Sheet: the poster's double-line frame --------------------------------- */
.sheet {
  background: var(--white);
  border: 1px solid var(--brass);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(148, 111, 35, 0.35);
  pointer-events: none;
}
.sheet > * { position: relative; }
.sheet__head {
  text-align: center;
  margin-bottom: 0.5rem;
}
.sheet__title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sheet__stag {
  --stag-w: 2.5rem;
  margin: 0 auto 0.75rem;
  color: var(--ink-deep);
}

.sheet__lede {
  text-align: center;
  max-width: 46ch;
  margin: 0.75rem auto 0;
  color: var(--ink-muted);
}
.sheet__note {
  text-align: center;
  margin: 0.35rem 0 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-ink);
}
.sheet__foot {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

/* --- Menus filter tabs -----------------------------------------------------
   The row of menu names. Styled as the printed banner bars — black pill with
   letter-spaced caps — and the current one is filled gold. They are anchor links
   that work without JS (jump to the menu); site.js turns them into a filter. On
   a phone the row scrolls sideways rather than wrapping into a tall block. */
.menu-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.6rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 40em) {
  .menu-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
  }
}
.menu-filter__tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--ink-deep);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.menu-filter__tab:hover {
  background: var(--ink-deep);
  color: var(--stone-50);
}
.menu-filter__tab.is-current {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--white);   /* white on --brass is AA at this weight/size */
}

.menu-panels { position: relative; }
.menu-panel { scroll-margin-top: calc(var(--header-h) + 1rem); }
.menu-panel + .menu-panel { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* An offer with no priced list (Pie Night) — let the intro breathe and centre. */
.menu-panel--offer .sheet__lede { max-width: 54ch; font-size: 1.05rem; color: var(--ink); }
/* When JS drives the filter, only one panel shows and the between-panel margin
   is irrelevant; keep it tidy anyway. */
.menu-panel[hidden] { display: none; }

/* --- Priced list -----------------------------------------------------------
   Two columns from tablet up, the way the printed menu sets it — and columns
   rather than a grid so a long section flows into the next column instead of
   leaving a hole. break-inside keeps a dish and its description together. */
.bill { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }

@media (min-width: 46em) {
  .bill {
    display: block;
    columns: 2;
    column-gap: clamp(2rem, 5vw, 4rem);
    column-rule: 1px solid var(--stone-200);
  }
  .bill__section {
    break-inside: avoid-column;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  }
  .bill__section:last-child { margin-bottom: 0; }
}
.bill__item { break-inside: avoid; }

.bill__section-title {
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.35rem;
}
.bill__section-blurb {
  text-align: center;
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

.bill__items { list-style: none; display: grid; gap: 0.9rem; }

.bill__item { display: grid; gap: 0.1rem; }

/* The leader is its own element, so it can stretch without the price ever
   colliding with a long dish name. */
.bill__line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.bill__name { font-weight: 600; }
.bill__leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--stone-400);
  transform: translateY(-0.28em);
}
.bill__price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--brass-ink);   /* 5.51:1 — AA at this size */
}
.bill__desc {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-muted);
  max-width: 52ch;
}

/* Dietary marks. Green because their printed menu marks (V)/(VE) in green —
   #365a37 is sampled from it and clears AA at 7.27:1. Only V and VE exist:
   lib/menu.js will not store any other code, because a tag on a menu is a claim
   about what is in the food. */
.bill__tags { display: inline-flex; gap: 0.3rem; margin-left: 0.4rem; }
.bill__tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #365a37;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 0.28rem;
  white-space: nowrap;
}

/* --- Kitchen hours ---------------------------------------------------------
   ALWAYS labelled as the KITCHEN's hours. We do not know the bar's. */
.hours { list-style: none; display: grid; gap: 0; }
.hours__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--stone-200);
}
.hours__row:last-child { border-bottom: 0; }
.hours__day {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  flex: none;
  min-width: 6.5rem;
}
.hours__leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--stone-400);
  transform: translateY(-0.28em);
}
.hours__times {
  text-align: right;
  font-variant-numeric: tabular-nums;
  display: grid;
  gap: 0.1rem;
}
.hours__closed { color: var(--ink-faint); font-style: italic; }
.hours__row--closed .hours__day { color: var(--ink-muted); }
.hours__note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-muted);
}

/* Compact variant for the footer's dark ground. */
.hours--compact .hours__row {
  padding: 0.3rem 0;
  border-bottom-color: rgba(247, 246, 244, 0.14);
}
.hours--compact .hours__day { min-width: 5rem; font-size: 0.72rem; }
.hours--compact .hours__leader { border-bottom-color: rgba(247, 246, 244, 0.3); }
.hours--compact .hours__times { font-size: 0.85rem; }
.hours--compact .hours__closed { color: var(--stone-400); }

/* --- Suppliers ------------------------------------------------------------- */
.suppliers__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.5rem;
  margin: 1.25rem 0 0;
}
/* The rich-text block stores a plain <ul>, so style the list inside it rather
   than expecting classes — lib/sanitize.js strips every class attribute, so any
   class put in CMS HTML would vanish the first time the publican saved. */
.suppliers .rich ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin: 1.25rem 0 0;
}
.suppliers .rich li {
  font-family: var(--font-display);
  font-size: 1.05rem;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--stone-300);
  border-radius: 999px;
  background: var(--white);
}
.suppliers .rich p { text-align: center; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   21. Print
   --------------------------------------------------------------------------
   A pub menu is a thing people print. Make that come out properly.
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .skip-link,
  .btn-row,
  .book-aside { display: none !important; }

  body { background: #fff; color: #000; }
  .card { border: 1px solid #999; box-shadow: none; }
  .confirm__ref { background: none; color: #000; border: 1px solid #000; }

  /* Keep the menu readable in black and white, and never split a dish across
     two sheets of paper. */
  .sheet { border-color: #000; box-shadow: none; }
  .sheet::before { border-color: #999; }
  .bill__item { break-inside: avoid; }
  .bill__section-title { break-after: avoid; }
  .bill__price { color: #000; }
  .band { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hours__row { break-inside: avoid; }
  .feature-image, .split__media { display: none; }
}