/* ═══════════════════════════════════════════════════════
   CHEZ BERNARD — 38 Shore, Leith
   Ginger Creative, 2026

   Colour and type are the venue's own, from their Brand
   Guidelines v1.0 (June 2026) — §03 Brand Colour, §04
   Typography. Earlier versions of this file sampled the
   printed menus by eye; those guesses are gone.

   Three tints are marked "derived": the book names no
   colour for an alternating panel or a hairline rule, so
   those are mixed from two colours it does name.

   Fonts load from a <link> in the page head, not an
   @import here. An @import makes the browser fetch this
   file, parse it, and only then go looking for the fonts
   — one extra round trip of blank text that a <link>
   in the head avoids.
   ═══════════════════════════════════════════════════════ */

:root {
  /* Primary palette — Brand Guidelines §03 */
  --linen:      #F6EBD9;  /* base: backgrounds, menus, page ground */
  --bordeaux:   #570F14;  /* "Night Bordeaux" — the identity colour */
  --mahogany:   #2F1110;  /* "Rich Mahogany" — headings, editorial */
  --chalkboard: #221F20;

  /* Secondary tones — §03, the wood and linen ramps */
  --wood-dark:  #462A1E;
  --wood-deep:  #1D130E;
  --wood-olive: #7E5F3A;
  --linen-pale: #F7F1E7;

  /* Roles. Everything below this block speaks in these, so a
     palette change is this block and nothing else. */
  --paper:     var(--linen);
  --paper-2:   #EFE1C9;           /* derived: linen one step down, for panels */
  --paper-3:   var(--linen-pale);
  --ink:       var(--bordeaux);   /* links, prices, accents, the primary CTA */
  --oxblood:   var(--mahogany);   /* headings, dark bands, buttons */
  --darkest:   var(--wood-deep);  /* footer, deepest grounds */
  --rule:      #C8AF90;           /* derived: linen ↔ olive wood, halfway */
  --rule-soft: #DFCDB5;           /* derived: linen ↔ olive wood, a quarter */
  --graphite:  var(--wood-dark);  /* body copy */
  --muted:     var(--wood-olive); /* captions, tasting notes, small labels */

  /* Type on dark grounds. Linen at full strength is too bright for
     running text, so these are the steps down from it. All three
     clear 4.5:1 on --oxblood and on --darkest. */
  --on-dark:      #F0E2CC;
  --on-dark-soft: #CBB08A;
  /* Lightened from #A67F4F once Bernard went behind the footer: the baseline
     row sits where the watermark is densest and measured 4.06:1 there, under
     the line. Same olive family, one step up the ramp. Measured back at 4.6:1. */
  --on-dark-mute: #B08858;

  /* Channels, for scrims over photographs and linen at low opacity. */
  --scrim-rgb:    47, 17, 16;     /* Rich Mahogany */
  --linen-rgb:    246, 235, 217;
  --bordeaux-rgb: 87, 15, 20;

  /* Not in the brand book on purpose: open/closed is a status, not
     an identity colour, and it has to read as "open" at a glance. */
  --green:      #4E7A47;
  --green-dark: #3F6639;

  /* §04. Cormorant Garamond for H1/H2, Alegreya for body copy.
     The book's accent faces are P22 Marcel (short French phrases)
     and Adorn Roman (the "Wine Bar & Bistro" descriptor). Both are
     commercial and neither was supplied — Adorn only ever appears
     inside the supplied logo artwork, where it is already outlined,
     and Pinyon Script sits in the client's font folder as the free
     stand-in for Marcel. Nothing here needs it yet, so it is not
     loaded; add it with the copy pass that brings French phrases in.
     --script: 'Pinyon Script', 'Snell Roundhand', cursive; */
  --display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --body:    'Alegreya', Georgia, 'Times New Roman', serif;

  --page:   66rem;
  --narrow: 42rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--body);
  font-size: 17px;
  /* BODY in the hierarchy: tracking 12, i.e. 0.012em. Barely a fifth of a
     pixel at this size, but it is what the book asks for. */
  letter-spacing: .012em;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--oxblood); text-wrap: balance; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: 3px; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; }
.wrap-narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 1.5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--oxblood); color: var(--paper); padding: .75rem 1.25rem; z-index: 300; }
.skip:focus { left: 0; }

/* ── Notice bar ─────────────────────────────────────── */
/* The identity colour, at the top of every page — as in the brand
   book's own website mockup, which puts a bordeaux strip above the
   linen header rather than a black one. */
.topbar {
  background: var(--ink);
  color: var(--paper);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: .6rem 1rem;
}
.topbar a { color: var(--paper); }

/* ── Header ─────────────────────────────────────────── */
.site-head { border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; z-index: 100; }
.site-head .wrap { max-width: 76rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.15rem; padding-bottom: 1.15rem; }

.wordmark {
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oxblood);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: .35rem 1.3rem; }
.site-nav a {
  font-size: .81rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* Scoped so the generic .site-nav a rule can't win on colour. */
.site-nav a.btn-book {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: .58rem 1.15rem;
  transition: background .18s ease, color .18s ease;
}
/* Darkens rather than hollowing out: an outline is what the gift button looks like. */
.site-nav a.btn-book:hover { background: var(--oxblood); color: var(--paper); border-color: var(--oxblood); }
/* The second button: outlined where Book a table is solid, with a gift-box
   mark, so the two read as a pair without being mistaken for each other. */
.site-nav a.btn-gift {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: .58rem 1rem;
  margin-right: -.8rem;          /* sit closer to Book a table than to the links */
  transition: background .18s ease, color .18s ease;
}
.site-nav a.btn-gift:hover,
.site-nav a.btn-gift[aria-current="page"] { background: rgba(var(--bordeaux-rgb), .09); color: var(--ink); border-bottom-color: var(--ink); }
.gift-icon { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

.nav-toggle { display: none; background: none; border: 1px solid var(--rule); color: var(--oxblood); padding: .5rem .8rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

@media (max-width: 71rem) {  /* wordmark + five links + two buttons measure ~1116px; collapse before that */
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: .5rem 1.5rem 1.25rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); }
  .site-nav a.btn-gift { justify-content: center; margin: .9rem 0 0; border: 1px solid var(--ink); }
  .site-nav a.btn-book { text-align: center; margin-top: .6rem; border: 1px solid var(--ink); }
}

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .85rem 1.8rem;
  text-decoration: none;
  border: 1px solid var(--oxblood);
  transition: background .18s ease, color .18s ease;
  cursor: pointer;
}
.btn-solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-solid:hover { background: transparent; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--oxblood); }
.btn-ghost:hover { background: var(--oxblood); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--oxblood); border-color: var(--paper); }
.btn-light:hover { background: transparent; color: var(--paper); }
.btn-outline-light { background: transparent; color: var(--paper); border-color: rgba(var(--linen-rgb), .5); }
.btn-outline-light:hover { background: var(--paper); color: var(--oxblood); border-color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-row.centre { justify-content: center; }

/* ── Section furniture ──────────────────────────────── */
/* Centred, letterspaced heading flanked by rules — the device
   used throughout the venue's printed menus. */
.rule-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.85rem; }
.rule-head::before, .rule-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.rule-head h2, .rule-head h1 {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 1.12rem; }
.centre { text-align: center; }
.section { padding: 4.5rem 0; }
.section-tight { padding: 3rem 0; }

/* ── Hero ───────────────────────────────────────────── */
.hero { position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5rem 1.5rem; overflow: hidden; }
.hero img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Two layers, not one flat wash. The hero photograph is now a full room
   rather than an empty one, and a wash heavy enough to carry white type
   over all that movement also drains the life out of the picture — which
   is the whole reason for using it. So the linear pass stays light and a
   soft ellipse sits behind the type block, putting the contrast only
   where the words are and letting the edges of the room stay bright. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 62% 58% at 50% 45%,
      rgba(var(--scrim-rgb), .78), rgba(var(--scrim-rgb), .18) 72%, rgba(var(--scrim-rgb), 0) 100%),
    linear-gradient(to bottom,
      rgba(var(--scrim-rgb), .58), rgba(var(--scrim-rgb), .34) 45%, rgba(var(--scrim-rgb), .74));
}
.hero-inner { position: relative; z-index: 2; max-width: 44rem; }
.hero h1 {
  color: var(--paper);
  font-size: clamp(2.6rem, 9vw, 5rem);
  line-height: .95;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero .tagline {
  color: var(--on-dark);
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  letter-spacing: .04em;
  margin-top: 1.1rem;
}
.hero .btn-row { margin-top: 2.25rem; justify-content: center; }

/* ── Page header (interior pages) ───────────────────── */
.page-head { text-align: center; padding: 3.25rem 0 0; }
.page-head h1 { font-size: clamp(2.3rem, 7vw, 3.5rem); letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
.page-head .sub { font-style: italic; color: var(--ink); margin-top: .85rem; font-size: 1.08rem; }

.status { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.status.open .dot { background: var(--green); }
.status.open strong { color: var(--green-dark); font-weight: 400; }

/* ── Menu items with dot leaders ────────────────────── */
.items { display: flex; flex-direction: column; gap: 1rem; }
.item.hidden { display: none; }
.item-main { display: flex; align-items: baseline; gap: .6rem; }
.item-name { font-size: 1.05rem; color: var(--oxblood); }
.item-desc { font-style: italic; color: var(--muted); font-size: .95rem; }
.leader { flex: 1 1 auto; min-width: 1.25rem; border-bottom: 1px dotted var(--rule); transform: translateY(-.3em); }
.price { font-family: var(--display); font-size: 1rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tag {
  display: inline-block;
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: .1rem .38rem;
  vertical-align: .12em;
}

/* ── Filter chips ───────────────────────────────────── */
.tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--rule-soft); }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.filter .lbl { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: .35rem; }
.chip {
  font-family: var(--body);
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--graphite);
  background: transparent;
  border: 1px solid var(--rule);
  padding: .4rem .95rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.text-link { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--rule); padding: .3rem 0; cursor: pointer; font-family: var(--body); }
.text-link:hover { border-bottom-color: var(--ink); }

.note-line { display: none; text-align: center; font-style: italic; color: var(--muted); padding: 1.5rem 0 0; }
.note-line.show { display: block; }

/* ── Cards / feature blocks ─────────────────────────── */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 2.5rem 3.5rem; align-items: center; }
.split.top { align-items: start; }
.stack { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.stack.centre { align-items: center; text-align: center; }
.stack h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); letter-spacing: .04em; }

.band { background: var(--oxblood); color: var(--on-dark); padding: 4rem 0; text-align: center; }
.band h2 { color: var(--paper); font-size: clamp(1.5rem, 4.5vw, 2.2rem); letter-spacing: .18em; text-transform: uppercase; }
.band .when { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-soft); margin-top: .8rem; }
.band p.deal { font-size: 1.15rem; margin-top: 1.1rem; }
.band p.deal strong { font-family: var(--display); font-weight: 500; color: var(--paper); font-size: 1.15em; }
.band .btn-row { margin-top: 2rem; justify-content: center; }

.live-pill { display: none; margin-top: 1.15rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; border: 1px solid rgba(var(--linen-rgb), .45); padding: .4rem .9rem; }
.live-pill.on { display: inline-block; }

.frame { border: 2px solid var(--ink); padding: 2rem 1.75rem; }
.panel { background: var(--paper-2); padding: 1.5rem 1.6rem; }

/* ── Gallery ────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery .tall { grid-row: span 2; }
.gallery .tall img { aspect-ratio: 4 / 5; height: 100%; }

/* ── Footer ─────────────────────────────────────────── */
.site-foot { background: var(--darkest); color: var(--on-dark-soft); padding: 3.5rem 0 2.5rem; font-size: .92rem; margin-top: 4rem; }
.site-foot .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2.5rem; }
.site-foot h3 { color: var(--paper); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .9rem; }
.site-foot a { color: var(--on-dark-soft); text-decoration: none; }
.site-foot a:hover { color: var(--paper); text-decoration: underline; }
.site-foot p + p { margin-top: .35rem; }
.foot-base { border-top: 1px solid rgba(var(--linen-rgb), .18); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-mute); display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; }

/* ── Lightbox ───────────────────────────────────────── */
.lightbox { position: fixed; inset: 0; background: rgba(var(--scrim-rgb), .94); z-index: 250; padding: 1.5rem; overflow-y: auto; }
.lightbox[hidden] { display: none; }
.lightbox-inner { max-width: 46rem; margin: 0 auto; }
.lightbox img { border: 1px solid rgba(var(--linen-rgb), .3); width: 100%; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.lightbox-bar span { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-soft); }
.lightbox-close { background: none; border: 1px solid rgba(var(--linen-rgb), .4); color: var(--paper); font-family: var(--body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding: .45rem 1rem; cursor: pointer; }
.lightbox-close:hover { background: rgba(var(--linen-rgb), .12); }

/* ── Forms ──────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 1.15rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--graphite);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  padding: .7rem .85rem;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 2px rgba(var(--bordeaux-rgb), .16); }
.field textarea { min-height: 8rem; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.15rem; }
.form-note { font-size: .88rem; color: var(--muted); font-style: italic; }

@media (max-width: 34rem) {
  .item-main { flex-wrap: wrap; row-gap: .15rem; }
  .item-name { flex: 1 1 100%; }
  .leader { min-width: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   FOOD MENU
   Follows the architecture of the printed card: À Partager
   as one centred list, the £8 frame beside Plats Chauds,
   Planchettes and Fruits de Mer side by side.
   ═══════════════════════════════════════════════════════ */

.course { padding-top: 3.5rem; }
.course.hidden { display: none; }
.course-intro { text-align: center; font-style: italic; color: var(--muted); max-width: 38rem; margin: -.75rem auto 1.75rem; }
.sub-head { font-family: var(--display); font-size: .95rem; letter-spacing: .1em; color: var(--oxblood); margin-top: .35rem; }
.served-note { font-style: italic; color: var(--ink); font-size: .95rem; border-bottom: 1px solid var(--rule-soft); padding-bottom: .9rem; margin: 1.1rem 0 .2rem; }
.oysters { border-top: 1px solid var(--rule-soft); margin-top: 1.1rem; padding-top: 1.1rem; }
.sizes { margin-top: 1.1rem; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2.5rem 3rem; align-items: start; }

.plats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (min-width: 62rem) { .plats { grid-template-columns: 15rem minmax(0, 1fr); } }

.offer-frame { border: 2px solid var(--ink); padding: 1.5rem 1.25rem; text-align: center; }
.offer-frame .t { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.offer-frame .d { font-size: .92rem; color: var(--graphite); margin-top: .6rem; line-height: 1.5; }
.offer-frame .n { font-family: var(--display); font-size: 2.6rem; color: var(--ink); margin: .5rem 0 .2rem; font-variant-numeric: tabular-nums; }
.offer-frame .f { font-size: .88rem; font-style: italic; color: var(--muted); }

.formule {
  margin-top: 3.5rem;
  border: 2px solid var(--ink);
  padding: 2rem 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  text-align: center;
}
@media (min-width: 48rem) { .formule { grid-template-columns: minmax(0, 1fr) 12rem; text-align: left; } }
.formule h2 { font-size: clamp(1.25rem, 3.4vw, 1.7rem); letter-spacing: .18em; text-transform: uppercase; }
.formule .lead { font-style: italic; color: var(--muted); margin-top: .5rem; }
.formule .price-big { font-family: var(--display); font-size: 2rem; color: var(--ink); margin-top: .3rem; }
.formule .opts { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: 1.1rem; justify-content: center; }
@media (min-width: 48rem) { .formule .opts { justify-content: flex-start; } }
.formule .opt { font-size: 1rem; color: var(--oxblood); }
.formule .or { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .15rem .5rem; }
.formule img { width: 100%; max-width: 12rem; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════
   WINE LIST
   Built from the venue's own printed list: the red serve
   tab at the head of every page, country groupings under
   each colour, tasting note under the name, prices right.
   ═══════════════════════════════════════════════════════ */

.wine-intro {
  max-width: 40rem;
  margin: 2rem auto 0;
  text-align: center;
  font-style: italic;
  color: var(--graphite);
  font-size: 1.06rem;
}

/* The red tab, lifted straight off the printed page. */
.serve-tabs { display: flex; justify-content: center; gap: 0; margin: 2.75rem 0 0; }
.serve-tab {
  font-family: var(--display);
  font-size: .92rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: .8rem 1.75rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.serve-tab + .serve-tab { border-left: 0; }
.serve-tab:hover { background: var(--paper-2); }
.serve-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.serve-tab[aria-pressed="true"]:hover { background: var(--ink); }

.wine-block { padding-top: 3.25rem; }
.wine-block.hidden { display: none; }
.wine-block .rule-head h3 { font-size: clamp(1.05rem, 2.6vw, 1.35rem); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }

.wine-country {
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: .5rem;
  margin: 2.25rem 0 1.5rem;
}
.wine-country:first-of-type { margin-top: .5rem; }

.wine {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem 2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.wine.hidden { display: none; }
@media (min-width: 46rem) { .wine { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }

.wine-name { font-size: 1.06rem; color: var(--oxblood); font-weight: 400; }
.wine-origin { font-size: .86rem; letter-spacing: .04em; color: var(--muted); font-style: italic; margin-top: .2rem; }
.wine-note { font-size: .95rem; color: var(--graphite); margin-top: .5rem; max-width: 46ch; }
.wine-fav {
  display: inline-block;
  margin-top: .55rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: .16rem .5rem;
}

.wine-prices { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
@media (min-width: 46rem) { .wine-prices { justify-content: flex-end; min-width: 17rem; } }

.pcell { display: flex; flex-direction: column; gap: .1rem; min-width: 3.6rem; text-align: left; }
@media (min-width: 46rem) { .pcell { text-align: right; } }
.pcell .ps { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pcell .pv { font-family: var(--display); font-size: 1rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.pcell.carafe .ps, .pcell.carafe .pv { color: var(--muted); }
.pcell.carafe .pv { font-size: .92rem; }

/* ═══════════════════════════════════════════════════════
   PRIVATE HIRE
   ═══════════════════════════════════════════════════════ */

.hire-number { font-family: var(--display); font-size: clamp(2.4rem, 7vw, 3.4rem); color: var(--ink); line-height: 1; margin-top: .6rem; font-variant-numeric: tabular-nums; }
.hire-label { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: .5rem; }
.hire-number .dash { font-family: var(--body); font-weight: 300; padding: 0 .12em; }

/* ═══════════════════════════════════════════════════════
   STYLE PASS — September 2026
   The page was correct but flat: one cream tone throughout,
   a conservative type scale and photographs in polite grids.
   These add rhythm and texture without leaving the paper world.
   ═══════════════════════════════════════════════════════ */

/* ── Paper grain ──────────────────────────────────────
   A printed menu card is not a flat colour. Sits above the
   ground and below everything else, and never catches clicks. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .042;
  background-image: url("data:image/png;base64,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");
  background-size: 96px 96px;
}
body > * { position: relative; z-index: 2; }

/* ── A bigger, more editorial scale on section heads ── */
.rule-head h2, .rule-head h1 {
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  letter-spacing: .24em;
}
.rule-head { gap: 1.75rem; margin-bottom: 2.4rem; }
.stack h2 { font-size: clamp(2rem, 5.2vw, 3rem); line-height: 1.05; }
.page-head h1 { font-size: clamp(2.8rem, 8.5vw, 4.4rem); }
.eyebrow { font-size: .72rem; letter-spacing: .26em; }

/* ── The monogram as a divider ────────────────────────
   Their own mark, doing the work an anonymous rule was doing. */
.mark-rule { display: flex; align-items: center; gap: 1.5rem; padding: 3.5rem 0; }
.mark-rule::before, .mark-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.mark-rule img { width: 44px; height: auto; flex: 0 0 auto; opacity: .85; }
.mark-rule.on-dark::before, .mark-rule.on-dark::after { background: rgba(var(--linen-rgb), .28); }

/* ── Corner brackets, lifted off the printed card ───── */
.bracket { position: relative; padding: 2.75rem 2.25rem; }
.bracket::before, .bracket::after {
  content: "";
  position: absolute;
  width: 42px; height: 42px;
  border: 2px solid var(--ink);
}
.bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracket::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.bracket.on-dark::before, .bracket.on-dark::after { border-color: rgba(var(--linen-rgb), .55); }

/* ── Dark interludes ──────────────────────────────────
   Full-bleed oxblood between the cream sections, so the page
   has a pulse instead of one unbroken tone. */
.interlude { background: var(--oxblood); color: var(--on-dark); padding: 5rem 0; }
.interlude h2 { color: var(--paper); }
.interlude .eyebrow { color: var(--on-dark-soft); }
.interlude a:not(.btn) { color: var(--paper); }
.interlude .rule-head::before, .interlude .rule-head::after { background: rgba(var(--linen-rgb), .28); }

/* ── Full-bleed photograph breaks ─────────────────────
   One image allowed to fill the width and carry a line of type,
   instead of three thumbnails in a row. */
.plate-wide { position: relative; min-height: 26rem; display: flex; align-items: flex-end; overflow: hidden; }
.plate-wide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.plate-wide::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* Strong enough to carry white type over a bright daylight photograph,
     not just over the dark ones. */
  background: linear-gradient(to top, rgba(var(--scrim-rgb), .94) 0%, rgba(var(--scrim-rgb), .66) 40%, rgba(var(--scrim-rgb), .34) 100%);
}
.plate-wide .plate-text { position: relative; z-index: 2; padding: 3rem 0; }
.plate-wide .plate-text p.line {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  color: var(--paper);
  line-height: 1.25;
  max-width: 24ch;
  text-wrap: balance;
}
.plate-wide .plate-text .eyebrow { color: var(--on-dark-soft); margin-bottom: .9rem; }

/* ── Gallery: give one image room to lead ───────────── */
.gallery.feature { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@media (min-width: 52rem) {
  .gallery.feature { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 1fr; }
  .gallery.feature > :first-child { grid-row: span 2; }
  .gallery.feature > :first-child img { aspect-ratio: auto; height: 100%; }
}

/* Hero sits a little taller now that the wordmark leads it. */
.hero { min-height: 68vh; }

/* ═══════════════════════════════════════════════════════
   TYPE PASS — the brand faces, September 2026
   Cormorant Garamond replaces Bodoni Moda and Alegreya
   replaces Newsreader, on the brand book's instruction
   (§04: Cormorant for H1/H2, Alegreya for body copy).

   They are not drop-in swaps. Cormorant is a Garamond —
   small on the body, fine in the stroke — and it goes
   spindly in letterspaced uppercase at the sizes this
   page uses. So display type comes up by roughly a tenth
   and every uppercase heading carries more weight: the
   book sets headings in Bold, and 600 is as far as that
   goes before the variable face turns heavy and modern,
   which is the one thing the brief rules out.
   ═══════════════════════════════════════════════════════ */

/* HEADING in the hierarchy is Cormorant Garamond BOLD. h4 is left out: it
   carries wine names, which are the SUBHEADING role (Cormorant Regular)
   and set their own weight below. */
h1, h2, h3 { font-weight: 700; }
h4 { font-weight: 400; }

/* Tracking 100 in the book is InDesign's 1/1000 em, so 0.1em. It is
   specified against the caps settings the page illustrates ("WINE",
   "RED"), and that is where it is applied here. Sentence-case display
   headings keep their tighter fit: 0.1em between lower-case letterforms
   reads as a fault rather than a style, and the book never shows one. */
.rule-head h1, .rule-head h2, .rule-head h3,
.page-head h1, .band h2, .formule h2, .hero h1 { letter-spacing: .1em; }

.rule-head h2, .rule-head h1   { font-size: clamp(1.4rem, 3.7vw, 2.2rem); }
/* The earlier .wine-block .rule-head h3 rule carries two classes and so
   out-specifies the generic .rule-head h3 above; the tracking has to be
   restated here to reach it. */
.wine-block .rule-head h3      { font-size: clamp(1.4rem, 3.7vw, 2.2rem); letter-spacing: .1em; }
.page-head h1                  { font-size: clamp(3rem, 9vw, 4.8rem); }
.stack h2                      { font-size: clamp(2.15rem, 5.6vw, 3.3rem); }
.band h2                       { font-size: clamp(1.65rem, 4.9vw, 2.4rem); }
.formule h2                    { font-size: clamp(1.35rem, 3.7vw, 1.85rem); }
.plate-wide .plate-text p.line { font-size: clamp(1.55rem, 4vw, 2.45rem); font-weight: 500; }

/* Small display type — serve tabs, country rules, section subheads.
   All uppercase, all tracked, all too light at 400. */
/* SUBHEADING in the hierarchy: Cormorant Garamond REGULAR, tracking 0.1em.
   These were 600 while the whole scale was being nudged for Cormorant's
   light stroke; the book is explicit that a subheading is not bold. */
.wine-country, .sub-head { font-weight: 400; letter-spacing: .1em; }
.sub-head { font-size: 1.02rem; }
/* Not a role in the hierarchy — interface, not editorial. Kept heavier so a
   pressed tab reads as pressed. */
.serve-tab { font-weight: 600; }

/* Figures. Cormorant's numerals are fine-stroked, so at 500 a price
   reads lighter than the dish sitting next to it. */
.price, .pcell .pv, .band p.deal strong { font-weight: 600; }
.offer-frame .n     { font-size: 2.95rem; font-weight: 600; }
.formule .price-big { font-size: 2.3rem;  font-weight: 600; }
.hire-number        { font-size: clamp(2.7rem, 7.6vw, 3.8rem); font-weight: 600; }
/* Alegreya has no 300 — asking for one invites a synthesised face. */
.hire-number .dash  { font-weight: 400; }

/* ── Their own artwork, now that it is vector ──────────
   The logos and marks are SVG straight from the brand
   book's artwork files, so they size from CSS alone and
   stay crisp; the width/height attributes in the markup
   are only there to reserve the right box before paint. */
.wordmark img  { width: 232px; height: auto; }
/* Never squeezed by the nav: the menu collapses before it would have to be. */
.wordmark { flex-shrink: 0; }
@media (max-width: 34rem) { .wordmark img { width: 176px; } }
.hero-mark-svg { display: block; width: min(560px, 82vw); height: auto; margin: 0 auto; }
.foot-mark     { width: 58px; height: auto; margin-bottom: 1rem; opacity: .85; }

/* ── Long section headings on a phone ─────────────────
   .rule-head is a flex row: a rule, the heading, a rule.
   The heading is nowrap so the rules meet it cleanly on
   one line, which is right on a desktop and wrong on a
   390px screen — "Planning something special?" at .24em
   tracking is 495px wide and pushed the private-hire page
   157px past the viewport. Below 44rem let it wrap; the
   rules simply sit either side of a two-line heading. */
@media (max-width: 44rem) {
  .rule-head { gap: 1rem; }
  .rule-head h1, .rule-head h2, .rule-head h3 {
    white-space: normal;
    text-align: center;
    letter-spacing: .18em;
  }
}

/* ── Page titles on a phone ───────────────────────────
   .page-head h1 is one word on every page, so it cannot
   wrap its way out of trouble: "Celebrations" at 48px
   with .1em tracking is 404px wide and a 390px screen
   gives it 342px. The clamp floor was set for a desktop
   and never came down. Scale it from the viewport and
   ease the tracking, which buys about 4% on its own.
   Staff can retitle these pages from the CMS, so this
   has to hold for a longer word than the ones there now. */
@media (max-width: 44rem) {
  .page-head h1 { font-size: clamp(1.9rem, 9.4vw, 3.4rem); letter-spacing: .06em; }
}

/* ── auto-fit grids on a 320px screen ─────────────────
   repeat(auto-fit, minmax(19rem, 1fr)) means "never
   narrower than 304px", which is wider than the 272px a
   320px phone leaves after the gutters, so the track —
   and the page with it — pushed 8px off-screen. Wrapping
   the floor in min(…, 100%) lets the track collapse to
   the container when there is no room, which is what
   auto-fit was meant to do all along. Pre-dates the
   re-skin; both grids are shared across pages. */
.split { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.duo   { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }

/* ── The contact map ──────────────────────────────────
   .map-tile and .map-tile-frame carried no rules at all,
   so the iframe fell back to its intrinsic 300x150: a
   small fixed box adrift in its column on a desktop, and
   8px wider than a 320px phone could show. Give it the
   column and a shape. Also pre-dates the re-skin. */
.map-tile { width: 100%; border: 1px solid var(--rule); background: var(--paper-2); }
.map-tile-frame { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }

/* ── The wordmark draws itself in ──────────────────────
   Each letter is a separate path in the artwork, so the
   hero traces them left to right and lets the fill arrive
   behind the line. The finished state is the untouched
   logo: stroke gone, fill solid, nothing redrawn.

   The whole thing is declared INSIDE prefers-reduced-
   motion: no-preference on purpose. Written the other way
   round — animation first, then switched off — anyone who
   asks for less motion would be left with the hidden
   starting state and no wordmark at all. Here the plain
   logo is the default and the animation is the addition.

   pathLength="1" is what makes one dasharray work for
   eleven letters of wildly different outline lengths; --i
   is the letter's index, set by cb_hero_mark(). */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark-svg .hm {
    fill-opacity: 0;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation:
      hm-draw .85s cubic-bezier(.62, .02, .34, 1) forwards,
      hm-ink  .55s ease-out forwards;
    animation-delay:
      calc(var(--i) * .065s),
      calc(var(--i) * .065s + .62s);
  }
  @keyframes hm-draw { to { stroke-dashoffset: 0; } }
  @keyframes hm-ink  { to { fill-opacity: 1; stroke-opacity: 0; } }
}

/* ── The phone hero carries a brighter photograph ─────
   Below 36rem the hero swaps to the portrait frame,
   which is lit more brightly than the landscape one --
   the brightest pixel behind the wordmark measured
   4.64:1 against linen, over the line but with little
   left over. The ellipse gets a touch more weight and a
   shape that suits a tall narrow box: wider across,
   shallower down, so it hugs the type instead of
   dimming the whole picture. */
@media (max-width: 36rem) {
  .hero::after {
    background:
      radial-gradient(ellipse 90% 44% at 50% 43%,
        rgba(var(--scrim-rgb), .86), rgba(var(--scrim-rgb), .24) 76%, rgba(var(--scrim-rgb), 0) 100%),
      linear-gradient(to bottom,
        rgba(var(--scrim-rgb), .58), rgba(var(--scrim-rgb), .36) 45%, rgba(var(--scrim-rgb), .76));
  }
}

/* ── Bernard, in the footer ───────────────────────────
   §05 of the brand book: the illustration "should not
   overpower the design. It works best as a background
   detail with low opacity." Their own section dividers
   do precisely this — the drawing blown up on a dark
   ground, cropped by the page edge, barely there.

   So it is a watermark, not a picture: right-hand side,
   taller than the footer so it bleeds top and bottom,
   and faint enough that the addresses and links in front
   of it lose no contrast. It carries no information, so
   it is aria-hidden and never catches a click. */
.site-foot { position: relative; overflow: hidden; }
.foot-portrait {
  position: absolute;
  right: -7%;
  bottom: -16%;
  height: 132%;
  width: auto;
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* The columns and the baseline sit in front of it. */
.site-foot .wrap { position: relative; z-index: 1; }

@media (max-width: 46rem) {
  /* Sizing this from the width made it small enough to fit inside the footer
     whole, which turned a watermark into a figurine tucked in the corner —
     nothing like the desktop treatment, where the drawing is far bigger than
     its frame and you see a fragment of it.

     So it is sized from the footer's height again and made deliberately
     larger than the space, running off the right edge and the bottom. It
     reads as depth behind the page rather than a picture sitting on it,
     which is what §05 asks for. Fainter too: it covers more ground here, so
     it has to carry less weight to stay out of the way of the text. */
  .foot-portrait { right: -30%; bottom: -6%; top: auto; height: 88%; width: auto; opacity: .045; }
}

/* ── The 1954 photograph, signed ──────────────────────
   Bernard's own signature at the bottom right of his
   photograph, the way a mounted print carries one.

   It is NOT laid over the picture. That corner is busy
   mid-grey foliage, measured: mean 122, ranging 17 to
   199. White ink drops to 1.7:1 against the bright
   patches and dark ink to 1.1:1 against the shadows, so
   whichever colour you pick the signature half-vanishes
   somewhere across its own length.

   Tucking it under the bottom edge instead puts almost
   all of it on linen, where Night Bordeaux reads at
   12:1, and a sliver still overlaps the print so it
   belongs to the photograph rather than floating beneath
   it. No shadow, no outline, no filter — the brand book
   rules those out and they would only be a way of
   papering over a bad placement. */
.portrait { margin: 0; }
.portrait img:first-child { width: 100%; display: block; }
.portrait-sig {
  display: block;
  position: relative;
  width: 44%;
  height: auto;
  margin: -5.5% 5% 0 auto;   /* tucks up over the lower edge, right-aligned */
  pointer-events: none;
  user-select: none;
}

@media (max-width: 46rem) {
  /* On a phone the photograph runs the full width and the signature ends up
     reading as a caption beneath it rather than something written on it. Sit
     it further over the print so it looks signed, with the tail still
     crossing onto the linen where it is unambiguous.

     It can take the overlap here: the band it crosses on the right-hand side
     measures mean 130, so Night Bordeaux holds about 4.5:1 across it. The
     darker shadows are further left, which is why it stays right-aligned. */
  .portrait-sig { width: 52%; margin-top: -11%; margin-right: 6%; }
}

/* ── The notice bar must not change height ────────────
   Measured on a throttled phone: the bar is 60px while
   the fallback face is in use and 40px once Alegreya
   arrives — the line wraps in Georgia and fits in
   Alegreya. Everything below it jumped 20px at the swap,
   which was the whole of the page's 0.125 layout shift,
   over Google's 0.1 budget on its own.

   Fixed by making the line fit either face rather than
   by pinning a height: a reserved 60px would leave a
   band of empty bordeaux on every phone for the sake of
   a font that arrives a second later. Smaller type and
   tighter tracking below 30rem, which is where it wrapped. */
@media (max-width: 30rem) {
  .topbar { font-size: .68rem; letter-spacing: .08em; padding-left: .5rem; padding-right: .5rem; }
}

/* ── The map ──────────────────────────────────────────
   A picture we render and commit (tools/make-map.py),
   not an embed. Two reasons it stopped being an iframe:
   the pin, and the colour.

   The pin has to sit on the door. Absolutely positioning
   one over OpenStreetMap's embed could not do that — the
   embed's attribution bar wraps to two lines on a narrow
   screen, which moves the map inside its own frame, so
   "centre of the iframe" drifts away from "the venue" by
   an amount that changes with the viewport. Measured:
   near-perfect at 1280px, about 20px out at 390px. Our
   own image puts the venue at the exact centre by
   construction, so 50% is 50% at any width.

   The colour is graded into the image rather than
   filtered over it, which keeps control: warmed toward
   olive wood and linen, but only so far. Push it further
   and the Water of Leith turns the same colour as the
   land, on a map of a place called The Shore. */
.map-tile {
  position: relative;
  display: block;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  overflow: hidden;
}
.map-tile-img { width: 100%; height: auto; display: block; }
.map-tile:hover .map-tile-img,
.map-tile:focus-visible .map-tile-img { filter: brightness(1.03) saturate(1.06); }

/* Their own wine glass, on the spot. The tip lands on the centre of the
   picture, which is the front door. */
.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -56px 0 0 -23px;
  background: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.map-pin::after {                /* the point */
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid var(--ink);
}
.map-pin img { width: 21px; height: auto; }

@media (max-width: 34rem) { .map-pin { width: 38px; height: 38px; margin: -47px 0 0 -19px; } }

/* OpenStreetMap's licence wants the credit visible; it is also burnt into
   the image so it travels with the file. */
.map-credit { font-size: .74rem; color: var(--muted); margin-top: .45rem; }
.map-credit a { color: var(--muted); }

/* ── Enquiry forms ────────────────────────────────────
   The honeypot. Hidden from sight, from assistive tech
   and from the tab order, so only something filling the
   page in programmatically will ever put anything in it.
   Not display:none — some bots skip those. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note.is-error { color: var(--ink); font-style: normal; }
.form-privacy { font-size: .82rem; color: var(--muted); margin-top: .9rem; }
.form-privacy a { color: var(--muted); }

/* ── Booking page: the ResDiary widget ──────────────────
   Their embed code asks for full width and at least 710px; it sizes its own
   contents inside that. The frame sits on white because the widget paints
   its own white panels and looks pasted-on against linen. */
.book-frame { border: 1px solid var(--rule); background: #fff; margin-bottom: 1rem; }
.book-frame iframe { display: block; width: 100%; min-height: 710px; border: 0; }

/* ── Gift voucher: the card ─────────────────────────────
   Two cards fanned, after the gift bags in the brand book: Night Bordeaux
   in front carrying the monogram pattern faintly (the book's "subtle
   background detail, at low opacity"), linen behind with it at full ink.
   Card proportions are a real card's, 85.6 × 54mm. */
.voucher { position: relative; width: min(84%, 27rem); margin: 1.5rem auto 2.5rem; aspect-ratio: 1.586; }
.voucher-card {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(var(--scrim-rgb), .18), 0 14px 32px -12px rgba(var(--scrim-rgb), .45);
}
.voucher-back {
  background: var(--linen-pale) url(../images/pattern-dark.svg) 0 0 / 64px 64px repeat;
  border: 1px solid var(--rule-soft);
  transform: translate(7%, -8%) rotate(6deg);
}
.voucher-front {
  background: var(--bordeaux);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-3deg);
  color: var(--on-dark);
}
.voucher-front::before {
  content: ""; position: absolute; inset: 0;
  background: url(../images/pattern-light.svg) 0 0 / 64px 64px repeat;
  opacity: .08;
}
/* A gilt-edged inner rule, as on the printed cards. */
.voucher-front::after {
  content: ""; position: absolute; inset: 9px; border: 1px solid rgba(203, 176, 138, .55); border-radius: 8px;
}
.voucher-bernard { position: absolute; right: -7%; bottom: -16%; width: 34%; opacity: .14; }
.voucher-mark  { position: relative; width: 58%; }
.voucher-title {
  position: relative; margin-top: .9rem; font-family: var(--display); font-size: clamp(.8rem, 2.6vw, 1rem);
  letter-spacing: .38em; text-transform: uppercase; color: var(--on-dark);
}
.voucher-place {
  position: relative; margin-top: .35rem; font-size: clamp(.62rem, 2vw, .72rem);
  letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-soft);
}

/* The One Tree shop paints its own white cards; give them a white ground. */
.store-frame { background: #fff; border: 1px solid var(--rule); padding: 1rem .5rem; }
.store-frame iframe { display: block; width: 100%; }

/* Privacy & cookies: long-form text, so lists get their markers back. */
.legal h2 { font-size: 1.35rem; letter-spacing: .04em; margin: 2.6rem 0 .8rem; }
.legal h3 { font-size: 1.05rem; color: var(--ink); margin: 1.6rem 0 .5rem; }
.legal p + p { margin-top: .9rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: .8rem 0 1rem; }
.legal li { margin-bottom: .55rem; }
.legal code { font-size: .9em; }
.legal-date { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.foot-base a { color: inherit; }

/* ═══════════════════════════════════════════════════════
   EVENTS — homepage carousel and the What's On page
   ═══════════════════════════════════════════════════════ */

/* Six links instead of five: fold into the menu button sooner. Mirrors the
   71rem block above, for the extra width the What's On link takes. */
@media (min-width: 71.01rem) and (max-width: 79rem) {
  .nav-long .nav-toggle { display: block; }
  .nav-long .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: .5rem 1.5rem 1.25rem;
  }
  .nav-long .site-nav.open { display: flex; }
  .nav-long .site-nav a { padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); }
  .nav-long .site-nav a.btn-gift { justify-content: center; margin: .9rem 0 0; border: 1px solid var(--ink); }
  .nav-long .site-nav a.btn-book { text-align: center; margin-top: .6rem; border: 1px solid var(--ink); }
}

/* The track scrolls on its own (site.js) and by hand. It runs edge to edge,
   padded so the first card lines up with the page. A few cards that fit sit
   centred: auto margins centre them, and fall to zero once it overflows. */
.ev-track {
  display: flex; gap: 1.5rem;
  list-style: none; margin: 0;
  padding: .25rem max(1.5rem, calc((100vw - var(--page)) / 2 + 1.5rem)) 1rem;
  overflow-x: auto; scrollbar-width: none;
}
.ev-track::-webkit-scrollbar { display: none; }
.ev-track > li:first-child { margin-left: auto; }
.ev-track > li:last-child  { margin-right: auto; }
.ev-card { flex: 0 0 clamp(15rem, 72vw, 19rem); display: flex; flex-direction: column; }
.ev-card .btn { margin-top: auto; align-self: flex-start; }
.ev-card .ev-desc { margin-bottom: 1.25rem; }

.ev-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); }
.ev-noimg { display: grid; place-items: center; border: 1px solid var(--rule-soft); }
.ev-noimg img { width: 56px; height: auto; opacity: .6; }
.ev-date { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-top: 1.1rem; }
.ev-title { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; color: var(--oxblood); margin-top: .35rem; }
.ev-desc { margin-top: .55rem; }

.ev-controls { display: flex; justify-content: center; gap: .6rem; margin-top: 1.25rem; }
.ev-controls[hidden] { display: none; }
.ev-btn {
  min-width: 2.75rem; height: 2.75rem; padding: 0 1rem;
  background: none; border: 1px solid var(--rule); color: var(--oxblood);
  font-family: var(--body); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.ev-btn:hover, .ev-btn:focus-visible { border-color: var(--ink); color: var(--ink); }
.ev-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* What's On: a list by month, photo beside the words from tablet up. */
.ev-month {
  font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule); padding-bottom: .6rem; margin: 3rem 0 1.75rem;
}
.ev-month:first-child { margin-top: 0; }
.ev-row { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
@media (min-width: 40rem) {
  .ev-row { grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .ev-row .ev-date { margin-top: .2rem; }
}
.ev-row .btn-row { margin-top: 1.25rem; }
.ev-empty p + p { margin-top: .8rem; }

/* In place of an enquiry form while it can't send (see build.php). */
.form-off { border: 1px solid var(--rule); background: var(--paper); padding: 1.5rem 1.6rem; }
.form-off p { font-size: 1.05rem; }

/* Find Us: "Good to know" questions, open one at a time. */
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative;
  color: var(--oxblood); font-size: 1.08rem; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .9rem; color: var(--muted); font-size: 1.2rem; }
.faq[open] summary::after { content: "\2212"; }
.faq p { padding: 0 0 1.1rem; }
.faq p a { color: var(--oxblood); }