/* ================================================
   Fonts
   ================================================ */
@font-face {
    font-family: 'Dia';
    src: url('/assets/fonts/Dia-Regular.woff2') format('woff2'),
         url('/assets/fonts/Dia-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dia';
    src: url('/assets/fonts/Dia-Bold.woff2') format('woff2'),
         url('/assets/fonts/Dia-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ================================================
   Custom properties
   ================================================ */
:root {
    --teal:       #053833;
    --leaf:       #044E33;
    --leaf-mid:   #054333;
    --cream:      #F2F6F5;
    --cream-rgb:  242, 246, 245; /* RGB of --cream; overridden at runtime by theme_style_tag() from the admin "Text colour". Drives every rgba(var(--cream-rgb), α) usage. */
    --teal-white: #F2F6F5;
    --teal-rgb:     5, 56, 51; /* RGB of --teal, for rgba() washes on cream surfaces */
    --accent:       #5dcaa5; /* leaf green — primary CTAs, matches the admin */
    --accent-hover: #7ad9bb;

    --page-pad:     1.375rem; /* 22px */
    --radius-card:  0.875rem; /* 14px */
    --radius-btn:   11px;     /* action buttons — matches the admin */
    --radius-field: 0.75rem;  /* 12px — form inputs */
    --radius-pill:  999px;

    /* ---- Type scale — FIVE sizes, the whole site (spec: Alasdair 07-05) --
       display  2rem     page titles (Vouchers, Events)    h1, letter-spacing 0
       heading  1.5rem   menu tabs, event titles, landing
                         links, £ amount pills, summary total
       btn      1.25rem  the one button size (Pay, Book)
       body     1rem     everything — copy, dishes, prices,
                         labels, inputs, nav, strips        p (= 16px, iOS-safe)
       small    0.9rem   caps labels (+ --track-caps) and
                         footer/meta/small print (+ --track-slight)   h2/h3/h4
       Bare h1-h4 and p carry these as element defaults (see "Type defaults");
       components only declare what deliberately differs.
       Weights: 400 everywhere — the wordmark's MARCH is the site's ONLY 700
       (semantic <strong> in content keeps its bold).
       Deliberate exceptions: the homepage wordmark + address keep their giant
       fluid lockup; dietary/wine-size badges are 0.55em glyphs. */
    --fs-display: 2rem;
    --fs-heading: 1.5rem;
    --fs-btn:     1.25rem;
    --fs-body:    1rem;
    --fs-small:   0.9rem;

    --track-slight: 0.04em; /* gentle spacing on small non-caps text */
    --track-caps:   0.1em;  /* standard uppercase tracking */

    --lh-heading: 1.2;
    --lh-compact: 1.5;
    --lh-body:    1.6;

    /* ---- Text colour — cream, or ONE "slight opacity" step ---------------
       full   var(--cream)   headings, dish names, values, active states
       soft   0.75           the dimmed voice: labels, prices, copy, meta
       ghost  0.3            functional dim states ONLY — idle menu tabs,
                             placeholders, separators (not for copy)
       Use these for TEXT; borders/washes keep raw rgba(var(--cream-rgb), α).
       Composite links that fade text + underline together still use opacity. */
    --ink-soft:  rgba(var(--cream-rgb), 0.75);
    --ink-ghost: rgba(var(--cream-rgb), 0.3);
}

/* ================================================
   Reset & base
   ================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    background: var(--teal);
}

/* Everything on the site is sized in rem off this root, so mid-size desktops
   get one proportional notch down rather than per-element tweaks. Anchors:
   15px at a default-scaled MacBook (~1470 logical px), the full 16px from
   ~1700px up, floor of 14.5px below ~1360px. Phones/tablets stay 16px. */
@media (min-width: 1024px) {
    html { font-size: clamp(14.5px, 8.6px + 0.435vw, 16px); }
}

body {
    font-family: 'Dia', sans-serif;
    font-weight: 400;
    min-height: 100svh;
    color: var(--cream);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Type defaults — bare tags carry the system -------------------------
   h1 = 2rem display title, h2/h3/h4 = one caps-label voice (0.9rem, 0.1em,
   soft), p = 1rem body copy. Everything renders Regular — the browser's
   default heading bold was sneaking onto classless tags (the site's only
   bold is the wordmark's MARCH; semantic <strong> keeps its bold).
   Components override only what deliberately differs. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

h1 {
    font-size: var(--fs-display);
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--cream);   /* page titles stay full-strength even inside a softened wrapper */
    margin-bottom: 0.75rem;
}

h2, h3, h4 {
    font-size: var(--fs-small);
    line-height: var(--lh-heading);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
}

p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Form controls don't inherit type by default — make them */
button, input, textarea, select {
    font-family: inherit;
    letter-spacing: inherit;
}

/* Site-wide leaf pattern — a layer just above the teal base but BEHIND all
   content (so it textures the background without muddying photos or text).
   Rendered into the page only when settings.site_pattern is on; size/repeat/
   opacity/position come from theme_style_tag(). position = absolute (scrolls
   with the page) or fixed (pinned to the viewport, parallax). The teal base
   lives on html; .home and .events-split are transparent so this shows
   through them, and body is position:relative so the absolute layer spans the
   full page height. */
.site-pattern {
    position: var(--site-pattern-position, absolute);
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url('/assets/images/leaf-bg.svg');
    background-position: var(--site-pattern-anchor, top center);
    background-size: var(--site-pattern-size, cover);
    background-repeat: var(--site-pattern-repeat, no-repeat);
    opacity: var(--site-pattern-opacity, 0.4);
}



a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

/* ================================================
   Accessibility — skip link + visible keyboard focus
   ================================================ */
.skip-link {
    position: absolute;
    left: 0.75rem;
    top: -4rem;
    z-index: 1000;
    padding: 0.65rem 1.1rem;
    background: var(--cream);
    color: var(--teal);
    border-radius: 0.4rem;
    font-size: var(--fs-small);
    letter-spacing: var(--track-slight);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; }

/* Visible focus ring for keyboard users only (mouse clicks don't trigger it).
   currentColor adapts to context: cream text on teal → cream ring; teal text
   on a cream button → teal ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    /* no border-radius here — it reshapes the ELEMENT, not the outline
       (squared off every focused input); outlines follow the element's
       own radius in modern browsers */
}

/* ================================================
   Wordmark — always inline, uppercase
   Sized per context via parent selector
   ================================================ */
.wordmark {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.3em;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    line-height: 1;
}

.wordmark__five  { font-weight: 400; }
.wordmark__march { font-weight: 700; }

/* Interior site header: small */
.site-header .wordmark {
    font-size: var(--fs-body);
}

/* ================================================
   Buttons — ONE action style at ONE size (--fs-btn),
   same voice as the admin: solid leaf-green accent,
   teal text, 11px radius. Used by the voucher Pay
   button and the event Book CTA.
   .btn        the button
   .btn--full  stretches to its container (checkout)
   Icon controls (burger, nav close) and the consent
   toast chip keep their own minimal styling.
   ================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: var(--fs-btn);
    letter-spacing: 0;
    color: var(--teal);
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-btn);
    padding: 0.85rem 1.2rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
}

.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.55; cursor: default; }

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

/* ================================================
   Hairline divider
   ================================================ */
.hairline {
    border: none;
    border-top: 1px solid rgba(var(--cream-rgb), 0.2);
    margin: 0.85rem 0;
}

/* ================================================
   Homepage — split screen: photo (left) over a solid
   teal field (right). Wordmark, address and opening
   hours straddle the seam. Pattern background to be
   layered onto the teal panel later.
   ================================================ */
.home {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: transparent;
    color: var(--cream);
}

/* Mobile: the shared site header (wordmark + burger) sits above; inside the
   poster the four landing links sandwich the inset hero — Book/Menu above,
   Vouchers/Contact below — then hours and the address at the foot. DOM order
   differs, so flex `order` does the arranging. The big centred wordmark is a
   desktop-only device (the header carries the brand on mobile). */
.home__wordmark      { display: none; }
.home__links--top    { order: 1; }
.home__photo         { order: 2; }
.home__links--bottom { order: 3; }
.home__address       { order: 4; }

.home__links-nav { display: contents; }

.home__photo {
    position: relative;   /* img fills via absolute inset — a % height on a
                             flex-shrunk figure is unreliable in Safari and
                             let the photo spill over the links below */
    flex: 1 1 0;
    min-height: 12.5rem;  /* the hero never vanishes; tiny screens scroll instead */
    margin: 0.3rem var(--page-pad);   /* inset, not edge to edge */
    background: rgba(0, 0, 0, 0.12);
}

.home__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Link pairs at the hero's corners — big, plain, tappable, with air */
.home__links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1.5rem;
    flex-wrap: wrap;
    padding: 0.65rem var(--page-pad);
}

/* Landing links marked desktop-only disappear on phones (screen space). */
@media (max-width: 760px) {
    .home__links a.home__link--desktop { display: none; }
}

.home__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-heading);
    letter-spacing: 0.005em;
    color: rgba(var(--cream-rgb), 0.92);
    transition: color 0.3s cubic-bezier(.22, .61, .36, 1);
}

.home__links a:hover { color: var(--cream); }

/* Bottom pair is the last thing on the mobile poster — generous space
   beneath it, clear of the iPhone home indicator */
.home__links--bottom {
    padding-bottom: max(1.6rem, calc(env(safe-area-inset-bottom) + 0.75rem));
}

/* Address is a desktop-poster element — the mobile landing stays minimal
   (header, links, hero; the address lives on the contact page). */
.home__address {
    display: none;
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--cream);
    text-align: center;
    padding: 0.9rem var(--page-pad) max(1.1rem, env(safe-area-inset-bottom));
}


/* Wrapper around hours + nav. On mobile it's transparent (display:contents)
   so the stacked flow is unchanged; on desktop it becomes the positioned
   group that holds the hours directly above the vertical nav. */
.home__menu { display: contents; }

/* ---- Tablet / desktop: 50/50 split with positioned overlays ---- */
@media (min-width: 768px) {
    /* The poster carries its own giant wordmark — no site header up here */
    body.is-home .site-header { display: none; }

    .home__photo {
        position: absolute;
        inset: 0 50% 0 0;
        margin: 0;
        z-index: 0;
    }

    .home__wordmark,
    .home__menu,
    .home__address { z-index: 2; }

    .home__wordmark {
        display: flex;
        justify-content: center;
        position: absolute;
        top: clamp(1.75rem, 4.5vh, 3.25rem);
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: clamp(2.5rem, 4.5vw, 4rem);
        padding: 0;
    }

    /* Hours sit directly above the vertical nav, the pair centred together
       on the right half of the split. */
    .home__menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;   /* matches the link gap so both groups read as one column */
        position: absolute;
        top: 50%;
        left: 54%;
        transform: translateY(-50%);
    }


    /* The two link groups read as one stacked column beside the hours */
    .home__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 0;
    }


    .home__links a {
        min-height: 0;
        color: rgba(var(--cream-rgb), 0.88);
    }

    .home__address {
        display: block;
        position: absolute;
        left: 50%;
        bottom: clamp(4rem, 11vh, 6.5rem);
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: clamp(1.5rem, 3vw, 2.5rem);
        padding: 0;
    }
}

@media (min-width: 1200px) {
    .home__menu { left: 53%; }
}


/* ================================================
   Interior page shell — mobile first
   ================================================ */
.site-header {
    padding: 1.25rem var(--page-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

/* Cabbage mark, centred in the header (decorative, never blocks clicks) */
.site-header__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 2.5rem;
    width: auto;
    pointer-events: none;
}

/* Burger toggle — visible on mobile, hidden on desktop. The glyph is small
   but the button keeps a 44px hit area (WCAG tap-target minimum). */
.site-nav-toggle {
    background: none;
    border: none;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    margin: -0.5rem -0.75rem -0.5rem 0;  /* soak up the extra hit area so the glyph stays put */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* Full-screen nav overlay — mobile default */
.site-nav {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: var(--teal) url('/assets/images/leaf-bg.svg') center / cover no-repeat;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.site-header.nav-open .site-nav {
    opacity: 1;
    pointer-events: all;
}

/* .site-header is position:relative + z-index:1, which makes it a stacking
   context — so .site-nav's z-index:200 only orders it INSIDE the header and
   cannot lift it above later siblings. On /book/ the booking widget wrapper is
   also z-index:1 and comes later in the DOM, so it won out and the open menu
   rendered underneath it: the overlay appeared but every link was unclickable.
   Lift the whole header while the menu is open, rather than raising it
   permanently, which would put it above the voucher page's payment overlay. */
.site-header.nav-open {
    z-index: 300;
}

.site-nav a {
    font-size: var(--fs-body);
    font-weight: 400;
    color: var(--cream);
    opacity: 0.7;
    transition: opacity 0.12s;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { opacity: 1; }

/* Close button inside the overlay */
.site-nav-close {
    position: absolute;
    top: 0.75rem;
    right: calc(var(--page-pad) - 0.75rem);
    background: none;
    border: none;
    color: var(--cream);
    opacity: 0.65;
    cursor: pointer;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.site-nav-close:hover { opacity: 1; }

.site-main {
    padding: 2.5rem var(--page-pad);
    max-width: 60rem;
    margin: 0 auto;
    min-height: calc(100vh - 10rem);
    min-height: calc(100svh - 10rem);
    width: 100%;
}

/* Sticky footer on short pages: the body flexes, main grows, the footer
   sits at the viewport bottom even when the menu is five lines long. */
body.has-footer { display: flex; flex-direction: column; }
body.has-footer main { flex: 1 0 auto; }

.site-footer {
    padding: 1.6rem var(--page-pad);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem 1.75rem;
    font-size: var(--fs-small);
    line-height: var(--lh-compact);
    letter-spacing: var(--track-slight);
    opacity: 0.75;
}

.site-footer__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
}
.site-footer__contact a { border-bottom: 1px solid rgba(var(--cream-rgb), 0.25); overflow-wrap: anywhere; }
.site-footer__links { white-space: nowrap; }
.footer-link { transition: opacity 0.12s; }
.footer-link:hover { opacity: 0.7; }

/* Desktop — inline nav, no overlay (interior pages only) */
@media (min-width: 640px) {
    .site-nav-toggle { display: none; }

    .site-header .site-nav {
        position: static;
        flex-direction: row;
        gap: 1.25rem;
        background: none;
        font-size: var(--fs-body);
        letter-spacing: var(--track-caps);
        opacity: 0.65;
        pointer-events: auto;
        transition: none;
        z-index: auto;
    }

    .site-header .site-nav a {
        font-size: var(--fs-body);
        opacity: 1;
    }

    .site-header .site-nav-close { display: none; }
}

@media (min-width: 1024px) {
    .site-header { padding: 1.5rem 2rem; }
    .site-main   { padding: 4rem 2rem; }
    .site-footer { padding: 1.5rem 2rem; }
}

/* ================================================
   Announcement strip
   ================================================ */
.announcement-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem var(--page-pad);
    background: var(--leaf);
    color: var(--cream);
    font-size: var(--fs-body);
    letter-spacing: var(--track-caps);
    text-decoration: none;
    transition: opacity 0.12s;
}

.announcement-strip:hover { opacity: 0.85; }

.announcement-strip__arrow {
    font-size: var(--fs-small);
    line-height: 1;
}

/* Newsletter strip — sits at the foot of every page; links to /signup/ */
.newsletter-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem var(--page-pad);
    background: var(--leaf);
    color: var(--cream);
    font-size: var(--fs-body);
    letter-spacing: var(--track-caps);
    text-decoration: none;
    border-top: 1px solid var(--leaf-mid);
    transition: opacity 0.12s;
}

.newsletter-strip:hover { opacity: 0.85; }

.newsletter-strip__arrow {
    font-size: var(--fs-small);
    line-height: 1;
}

/* Newsletter sign-up page (embedded provider form) */
.signup-form {
    max-width: 40rem;
    margin: 0 auto;
}

.signup-form iframe {
    width: 100%;
    height: 1400px;
    border: 0;
    display: block;
}

/* ================================================
   Common interior page elements
   (page-subtitle / page-intro live in the "Interior
   page common elements" section below)
   ================================================ */
.page-note {
    font-size: var(--fs-small);
    color: var(--ink-soft);
    line-height: var(--lh-body);
    margin-top: 1.25rem;
    max-width: 36rem;
}

/* ================================================
   Voucher purchase page
   ================================================ */
.voucher__wrap {
    /* The panel is a column flex container, and auto cross-axis margins stop a
       flex item stretching — without an explicit width this sizes to its own
       content, so hiding the summary note mid-typing collapsed the whole form
       by ~100px. width:100% pins it to the panel, max-width still caps it. */
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
}

.voucher__head {
    margin-bottom: 3rem;
}

.voucher__intro {
    font-size: var(--fs-body);
    color: var(--ink-soft);
    line-height: var(--lh-compact);
}

.voucher__section {
    margin-bottom: 2.75rem;
}

.voucher__section--checkout {
    padding-top: 2.75rem;
    border-top: 1px solid rgba(var(--cream-rgb), 0.12);
}

/* Step labels (Amount, Recipient, "Or pay by card"…) are bare h2s —
   the element default carries the voice, this just spaces them */
.voucher__form h2 {
    margin-bottom: 1.1rem;
}

.voucher__optional {
    font-size: var(--fs-small);
    letter-spacing: var(--track-slight);
    text-transform: none;   /* stays lowercase inside the caps step label,
                               which already carries the soft ink */
}

/* — Amount pills — 2×2 grid of big targets on phones, a row on desktop */
.voucher__amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .voucher__amounts {
        display: flex;
        gap: 0.625rem;
        flex-wrap: wrap;
    }
}

.voucher__amount {
    cursor: pointer;
}

.voucher__amount input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.voucher__amount-face {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.05rem 2rem;
    border: 1px solid rgba(var(--cream-rgb), 0.3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-heading);
    color: var(--ink-soft);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
}

.voucher__amount:hover .voucher__amount-face {
    border-color: rgba(var(--cream-rgb), 0.6);
    color: var(--cream);
}

.voucher__amount input:checked + .voucher__amount-face {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--teal);
}

/* — Form fields — */
.voucher__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.voucher__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Sentence case, matched to the caps step labels' 0.75 so the field labels
   sit a step behind whatever's typed into the fields */
.voucher__label {
    font-size: var(--fs-body);
    color: var(--ink-soft);
}

.voucher__input {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(var(--cream-rgb), 0.3);
    border-radius: var(--radius-field);
    height: 3.5rem;
    padding: 0 1.1rem;
    font-family: 'Dia', sans-serif;
    font-size: var(--fs-body);
    color: var(--cream);
    outline: none;
    transition: border-color 0.15s;
    -webkit-appearance: none;
}

.voucher__input:focus {
    border-color: rgba(var(--cream-rgb), 0.7);
}

.voucher__input::placeholder {
    color: var(--ink-ghost);
}

.voucher__input--textarea {
    resize: vertical;
    height: auto;
    min-height: 5rem;
    padding: 0.875rem 1.1rem;
    line-height: var(--lh-body);
}

/* — Order summary — */
.voucher__summary {
    background: var(--cream);
    border-radius: var(--radius-card);
    padding: 1.35rem 1.5rem;
    margin-bottom: 2rem;
}

.voucher__summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--fs-heading);
    color: var(--teal);
}

/* Recap rows: To / From / Message under the price line */
.voucher__summary-details {
    margin: 0.85rem 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid rgba(var(--teal-rgb), 0.15);
    display: grid;
    gap: 0.45rem;
}

.voucher__summary-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
    font-size: var(--fs-body);
}

.voucher__summary-row dt { color: rgba(var(--teal-rgb), 0.75); }
.voucher__summary-row dd { margin: 0; color: rgba(var(--teal-rgb), 0.75); overflow-wrap: anywhere; }

.voucher__summary-note {
    font-size: var(--fs-body);
    color: rgba(var(--teal-rgb), 0.75);
    margin-top: 0.6rem;
}

/* — Agree-to-terms gate — every payment method checks it before starting */
.voucher__agree {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-soft);
    cursor: pointer;
}

.voucher__agree input {
    width: 20px;
    height: 20px;
    margin-top: 0.15em;
    flex: none;
    cursor: pointer;
}

.voucher__agree a { color: var(--cream); text-decoration: underline; text-underline-offset: 0.25em; }

/* — Inline card form (PayPal hosted card fields) — straight on the teal,
   matching the site's outlined fields. The iframe inputs get the same
   treatment via the CardFields style object in the template. */
.voucher__card {
    margin-bottom: 0.875rem;
}

/* OUR divs draw the outlined box (pixel-identical widths with the postcode
   and Pay button); PayPal's iframe inputs inside are stripped bare via the
   CardFields style object. :focus-within catches focus inside the iframe.
   FIXED height (not min-) so the iframes match the postcode exactly —
   PayPal's default iframe sizing runs taller than the content needs. */
.voucher__card-field {
    border: 1px solid rgba(var(--cream-rgb), 0.3);
    border-radius: var(--radius-field);
    height: 3.5rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s;
}

.voucher__card-field iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.voucher__card-field:focus-within {
    border-color: rgba(var(--cream-rgb), 0.7);
}

.voucher__card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
}

.voucher__card-postcode {
    grid-column: 1 / -1;
    background: transparent;
    border: 1px solid rgba(var(--cream-rgb), 0.3);
    border-radius: var(--radius-field);
    height: 3.5rem;
    padding: 0 1.1rem;
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--cream);
    transition: border-color 0.15s;
    -webkit-appearance: none;
}

.voucher__card-postcode::placeholder { color: var(--ink-ghost); }

.voucher__card-postcode:focus {
    outline: none;
    border-color: rgba(var(--cream-rgb), 0.7);
}

/* The Pay button is a stock .btn .btn--full — this only adds the gap above */
.voucher__card-pay {
    margin-top: 0.75rem;
}

/* — Wallet buttons (Apple Pay / Google Pay) — rendered by the vendor SDKs,
   shown only on eligible devices once the PayPal account features are on.
   Pill radius matches the PayPal button stack below. */
.voucher__wallets {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.875rem;
}

.voucher__wallets apple-pay-button {
    display: block;
    width: 100%;
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 45px;
    --apple-pay-button-border-radius: 22px;
}

.voucher__gpay { width: 100%; }
.voucher__gpay button { width: 100% !important; border-radius: 22px !important; }

/* — PayPal checkout — the SDK renders its own buttons straight onto the teal
   (gold is approved on dark backgrounds; the wallets above are black). */
.voucher__paypal {
    margin-bottom: 0.875rem;
    min-height: 6.5rem;   /* ≈ the rendered button stack — stops the page jumping while the SDK loads */
}

/* Inline validation/payment problem — shown above the buttons */
.voucher__error {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #f2c4bc;
    border-left: 2px solid rgba(242, 196, 188, 0.6);
    padding-left: 0.875rem;
    margin-bottom: 1.25rem;
}

/* Payments not configured yet */
.voucher__notice {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-soft);
}

/* Success panel — replaces the form after a completed payment */
/* Held over the page from payment approval until the done panel or an error:
   capture waits on PayPal plus two email sends, and the payment window has
   already closed by then, so without this the buyer stares at a dead form. */
.voucher__pending {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    background: rgba(var(--teal-rgb), 0.94);
}

.voucher__pending[hidden] { display: none; }

.voucher__pending p {
    max-width: 22rem;
    margin: 1.5rem auto 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--cream);
}

.voucher__spinner {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid rgba(var(--cream-rgb), 0.25);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: voucher-spin 0.8s linear infinite;
}

@keyframes voucher-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .voucher__spinner { animation-duration: 2.4s; }
}

.voucher__done {
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 34rem;
    margin: 0 auto;
    background: rgba(var(--cream-rgb), 0.05);
    border-radius: var(--radius-card);
}

.voucher__done-eyebrow {
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}

.voucher__done h2 {
    color: var(--cream);
    margin-bottom: 0.5rem;
}

.voucher__done-lead {
    font-size: var(--fs-btn);
    line-height: var(--lh-compact);
    color: var(--cream);
    margin: 0 0 1.25rem;
}

.voucher__done-msg {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-soft);
    max-width: 28rem;
    margin: 0 auto 1.75rem;
}

.voucher__done-ref {
    font-size: var(--fs-small);
    letter-spacing: var(--track-slight);
    color: var(--ink-soft);
    padding-top: 1.25rem;
    border-top: 1px solid rgba(var(--cream-rgb), 0.12);
}

.voucher__done-ref strong {
    color: var(--cream);
}

.voucher__microcopy {
    font-size: var(--fs-small);
    letter-spacing: var(--track-slight);
    text-align: center;
    color: var(--ink-soft);
    line-height: var(--lh-body);
}

@media (max-width: 480px) {
    .voucher__row {
        grid-template-columns: 1fr;
    }
}

.page-empty {
    font-size: var(--fs-body);
    color: var(--ink-soft);
    margin-top: 1.5rem;
}

.page-photo {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin: 1.5rem 0;
}

.page-photo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ================================================
   Prose (privacy, terms)
   ================================================ */
/* h2/h3 carry the element default (caps label voice) — only spacing here */
.prose h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.prose h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.prose p,
.prose li {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-soft);
    max-width: 38rem;
}

.prose ul {
    padding-left: 1.25rem;
    margin: 0.75rem 0;
}

.prose li { margin-bottom: 0.375rem; }

.prose a {
    border-bottom: 1px solid rgba(var(--cream-rgb), 0.35);
    transition: border-color 0.12s;
}

.prose a:hover { border-color: rgba(var(--cream-rgb), 0.8); }

/* ================================================
   Placeholder pages
   ================================================ */
.placeholder__eyebrow {
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1rem;
}

.placeholder__note {
    font-size: var(--fs-small);
    color: var(--ink-soft);
    margin-top: 0.5rem;
}

.placeholder__back {
    display: inline-block;
    margin-top: 2.5rem;
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    opacity: 0.55;
    border-bottom: 1px solid rgba(var(--cream-rgb), 0.3);
    padding-bottom: 0.15rem;
    transition: opacity 0.12s;
}

.placeholder__back:hover { opacity: 1; }

/* ================================================
   Interior page common elements
   ================================================ */
.page-intro {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-soft);
    margin-bottom: 2rem;
}

/* (Page titles are bare h1s — the element default carries them.) */

.page-subtitle {
    margin-top: 0.6rem;
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: var(--lh-body);
    margin-bottom: 2rem;
}

.inline-link {
    border-bottom: 1px solid rgba(var(--cream-rgb), 0.4);
    transition: border-color 0.12s;
}

.inline-link:hover {
    border-color: rgba(var(--cream-rgb), 0.85);
}

.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    opacity: 0.55;
    transition: opacity 0.12s;
}

.back-link:hover { opacity: 1; }

/* ================================================
   Status pill
   ================================================ */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 2rem;
}

.status-pill__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-pill--open .status-pill__dot  { background: #5DB87A; }
.status-pill--closed .status-pill__dot { background: rgba(var(--cream-rgb), 0.3); }

/* ================================================
   Booking terms accordion
   ================================================ */
/* Editorial rows: sentence-case title with the chevron sitting right beside it */
.booking-terms {
    margin-bottom: 0.75rem;
}

/* On the voucher page the accordion needs clear air before the Amount step */
.voucher .booking-terms { margin-bottom: 2.5rem; }

.booking-terms__toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 0;
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.12s;
}

.booking-terms__toggle:hover { color: var(--cream); }

.booking-terms__toggle::-webkit-details-marker { display: none; }

.booking-terms__toggle::after {
    content: '';
    width: 10px;
    height: 10px;
    margin-top: -5px;   /* optical centre once rotated */
    border-right: 1.5px solid rgba(var(--cream-rgb), 0.75);
    border-bottom: 1.5px solid rgba(var(--cream-rgb), 0.75);
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.booking-terms__toggle:hover::after {
    border-color: var(--cream);
}

.booking-terms[open] .booking-terms__toggle::after {
    margin-top: 5px;
    transform: rotate(225deg);
}

.booking-terms__body {
    padding-bottom: 1.5rem;
}

/* Headings, lists, paragraphs and links inside a terms section — styled by tag
   so the rich-text editor's class-less output renders correctly. The h3/h4
   voice comes from the element default; only spacing here. */
.booking-terms__body h3,
.booking-terms__body h4 {
    margin: 1.4rem 0 0.5rem;
}
.booking-terms__body > :first-child { margin-top: 0; }

/* Grouped sections inside the body — air between groups, none above the first */
.booking-terms__section + .booking-terms__section { margin-top: 1.75rem; }
.booking-terms__section > :first-child { margin-top: 0; }

.booking-terms__list,
.booking-terms__body ul,
.booking-terms__body ol {
    list-style: disc;
    padding-left: 1.1rem;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.booking-terms__body ol { list-style: decimal; }

.booking-terms__list li,
.booking-terms__body li,
.booking-terms__prose,
.booking-terms__body p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-soft);
}
.booking-terms__body p { margin: 0.5rem 0; }

.booking-terms__body a {
    border-bottom: 1px solid rgba(var(--cream-rgb), 0.35);
    transition: border-color 0.12s;
}
.booking-terms__body a:hover { border-color: rgba(var(--cream-rgb), 0.8); }

/* ================================================
   Booking embed
   ================================================ */
.book-page {
    padding-top: 1rem;
}

/* The widget is themed cream in ResDiary's settings — round its corners so
   it reads as a card on the teal, like the voucher summary. Only the iframe
   variant may clip: the embedded (HTTPS) variant renders straight into the
   page and its time dropdown hangs BELOW the widget's bottom edge, so
   overflow:hidden on #rd-widget-frame was chopping the list to two rows. */
.booking-embed iframe,
#rd-widget-frame {
    border-radius: var(--radius-card);
}
.booking-embed iframe { overflow: hidden; }

/* One stacking context for the whole widget: its internal z-indexes (form
   fields, pickers, modals up to z-1050) otherwise bleed through the mobile
   nav overlay (z-200). isolation flattens them all beneath it. */
.booking-embed {
    position: relative;
    isolation: isolate;
    z-index: 1;
}

/* ResDiary caps the time list at 250px (~7 rows); give it more room — but ONLY
   on pointer devices. Capping .drop-list isn't capping ResDiary's own scroll
   container, and on touch that left the list taller than the thing that
   actually scrolls: swipes did nothing and buyers were stranded at 20:15,
   able to reach later times only by dragging the widget's custom scrollbar.
   Phones keep ResDiary's native sizing, which scrolls correctly. */
@media (min-width: 768px) and (pointer: fine) {
    #rd-widget-frame .drop-list.drop-list-no-headers {
        max-height: min(480px, 55vh);
        overscroll-behavior: contain;
    }
}

.booking-embed iframe {
    display: block;
    width: 100%;
    min-height: 710px;
    border: none;
}

.booking-embed__placeholder {
    color: var(--ink-soft);
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}

/* ================================================
   Contact page
   ================================================ */
.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* Block headings (Address / Get in touch / Hours) are bare h2s */
.contact-block h2 {
    margin-bottom: 0.75rem;
}

.contact-placeholder { color: var(--ink-soft); font-size: var(--fs-small); }

.contact-map-wrap {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.contact-map {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 200px;
    border: none;
    opacity: 0.85;
}

.contact-page {
    padding-bottom: 2.5rem;
    flex: 0 0 auto;
}

.contact-block p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.contact-block p + p { margin-top: 0.4rem; }

/* Hours table */
.hours-table {
    border-collapse: collapse;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.hours-table td {
    padding: 0.15rem 0;
    vertical-align: top;
}

/* td-qualified: the .hours-table td padding shorthand outranks a bare
   class selector and was zeroing this gap */
td.hours-table__day {
    padding-right: 2.75rem;
    color: var(--ink-soft);
}

/* .hours-table__time inherits full cream */

@media (min-width: 640px) {
    .contact-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Viewport-fit pages — body fills at least 100vh, strip + content stack */
body.is-locked {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

body.is-locked .announcement-strip,
body.is-locked .newsletter-strip,
body.is-locked .site-header {
    flex: 0 0 auto;
}

body.is-locked .home,
body.is-locked .site-main,
body.is-locked .events-split,
body.is-locked .contact-map-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

body.is-locked .site-main {
    padding: 1.5rem var(--page-pad);
}

/* ================================================
   Page-load stagger animation
   Applied to children of any .stagger container
   ================================================ */
.stagger > * {
    opacity: 0;
    transform: translateY(8px);
    animation: rise 0.7s cubic-bezier(.22, .61, .36, 1) forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.04s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.20s; }
.stagger > *:nth-child(4) { animation-delay: 0.28s; }
.stagger > *:nth-child(5) { animation-delay: 0.36s; }
.stagger > *:nth-child(6) { animation-delay: 0.44s; }
.stagger > *:nth-child(7) { animation-delay: 0.52s; }
.stagger > *:nth-child(8) { animation-delay: 0.60s; }

@keyframes rise {
    to { opacity: 1; transform: translateY(0); }
}

/* Soft fade-in for the whole page on load */
.page-fade {
    opacity: 0;
    animation: fade-in 0.5s cubic-bezier(.22, .61, .36, 1) 0.05s forwards;
}

@keyframes fade-in {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .stagger > *,
    .page-fade {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ================================================
   Terms page
   ================================================ */
.terms-page .page-intro {
    margin-bottom: 2.5rem;
}

.terms-section {
    margin-bottom: 2.25rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid rgba(var(--cream-rgb), 0.08);
}

.terms-section:last-child {
    border-bottom: none;
}

/* h2 carries the element default (caps label voice) — only spacing here */
.terms-section h2 {
    margin-bottom: 0.9rem;
}

.terms-section p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-soft);
    margin-bottom: 0.75rem;
}

.terms-section p:last-child { margin-bottom: 0; }

/* ================================================
   Events page — homepage-style split
   ================================================ */
.events-split {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: transparent;
    overflow: hidden;
}

.events-split__photo {
    position: relative;   /* img fills via absolute inset — a % height on a
                             flex-sized figure is unreliable in Safari and the
                             image rendered natural-size (top slice only),
                             ignoring object-fit/position entirely */
    flex: 1 1 0;
    min-height: 30vh;
    overflow: hidden;
}

.events-split__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events-split__panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;
    padding: 2rem var(--page-pad);
}


.events-split__intro {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Bare h1 + p carry the type; the copy just takes the soft ink */
.events-split__intro p {
    color: var(--ink-soft);
}

.events-split__list {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(var(--cream-rgb), 0.12);
}

/* Event card */
.event-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.event-card + .event-card {
    padding-top: 3.5rem;
    border-top: 1px solid rgba(var(--cream-rgb), 0.12);
}

/* Photo gallery — 1 = full width, even counts pair into 2 columns,
   odd counts run the first photo full width then pair the rest. */
.event-card__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.event-card__gallery.is-odd .event-card__photo:first-child {
    grid-column: 1 / -1;
}

.event-card__photo {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.event-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-card__date {
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Copy inside a card (when-line, description, small print) is soft */
.event-card p {
    color: var(--ink-soft);
}

.event-card__when {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
}

/* Event titles are bare h2s — sentence case at heading size, not the caps voice */
.event-card h2 {
    font-size: var(--fs-heading);
    letter-spacing: 0;
    text-transform: none;
    line-height: var(--lh-heading);
    color: var(--cream);
}

.event-card__small {
    font-size: var(--fs-small);
}

/* (Structured event menus scrapped 2026-07-05 — a PDF via menu_url or plain
   text in the description replaces the old .event-card__menu list.) */

.event-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem 1.5rem;
    margin-top: 1.25rem;
}

/* Book and View menu are both stock .btn — no bespoke rule needed */

/* Header becomes transparent and floats over the split on the events and
   vouchers pages — the photo bleeds to the very top edge. The header is
   pinned to EXACTLY 4rem so the split's -4rem pull is always flush (its
   natural height drifts with the burger's 44px tap target). */
body.page--events .site-header,
body.page--vouchers .site-header {
    background: transparent;
    position: relative;
    z-index: 10;
    height: 4rem;
    padding-top: 0;
    padding-bottom: 0;
}

body.page--events .events-split,
body.page--vouchers .events-split {
    margin-top: -4rem;
}

body.page--events .events-split__panel,
body.page--vouchers .events-split__panel {
    padding-top: 5rem;
}

/* Vouchers: the candlelit table sits ~2/3 down the portrait source (the true
   bottom is dark floor) — centre the crop window on that band */
body.page--vouchers .events-split__photo img { object-position: center 66%; }

/* Desktop: photo fills left half of the events-split container */
@media (min-width: 768px) {
    .events-split__photo {
        position: absolute;
        inset: 0 50% 0 0;
        min-height: 0;
        z-index: 0;
    }

    /* The panel spans the FULL width and scrolls; its content is held in the
       right half by the left padding. Because the scroll area also covers the
       (fixed) photo on the left, the wheel scrolls the panel wherever the
       cursor sits — not just over the right half. */
    .events-split__panel {
        position: absolute;
        inset: 0;
        z-index: 1;
        padding: 3rem clamp(2rem, 5vw, 4rem);
        padding-left: calc(50% + clamp(2rem, 5vw, 4rem));
        display: flex;
        flex-direction: column;
        /* This panel is the scroll container and its content box is what the
           form sits in, so a scrollbar appearing mid-keystroke (e.g. when the
           voucher summary's To line wraps as an email is typed) would jump the
           form narrower. Reserve the space permanently: scroll (not auto) does
           it in every browser, the gutter keeps it tidy where supported. */
        overflow-y: scroll;
        scrollbar-gutter: stable;
    }
}

/* ================================================
   404 page
   ================================================ */
.page-404 {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.page-404__eyebrow {
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

.page-404__message {
    font-size: var(--fs-body);
    color: var(--ink-soft);
    margin-bottom: 2.5rem;
    max-width: 28rem;
    line-height: var(--lh-body);
}

.page-404__link {
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    opacity: 0.55;
    border-bottom: 1px solid rgba(var(--cream-rgb), 0.3);
    padding-bottom: 0.2rem;
    transition: opacity 0.12s;
}

.page-404__link:hover { opacity: 1; }

/* ---- Booking confirmation (mirrors the 404 page's centred layout) ---- */
.page-confirm {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
/* Matches the voucher success panel: accent eyebrow, full-strength lead, the
   detail a step softer, and the whole thing on a faint card. */
.page-confirm__inner {
    max-width: 34rem;
    padding: 3rem 1.5rem;
    background: rgba(var(--cream-rgb), 0.05);
    border-radius: var(--radius-card);
}
.page-confirm__eyebrow { font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.page-confirm h1 { color: var(--cream); margin-bottom: 0.75rem; }
.page-confirm__lead { font-size: var(--fs-btn); line-height: var(--lh-compact); color: var(--cream); margin: 0 auto 1rem; max-width: 26rem; }
.page-confirm__message { font-size: var(--fs-body); color: var(--ink-soft); margin: 0 auto 2rem; max-width: 26rem; line-height: var(--lh-body); }
.page-confirm__links { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; padding-top: 1.5rem; border-top: 1px solid rgba(var(--cream-rgb), 0.12); }
.page-confirm__links a { font-size: var(--fs-small); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--cream); opacity: 0.75; border-bottom: 1px solid rgba(var(--cream-rgb), 0.3); padding-bottom: 0.2rem; transition: opacity 0.12s; }
.page-confirm__links a:hover { opacity: 1; }

/* ================================================
   Menu page (consolidated, tabbed)
   ================================================ */
.menu {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.75rem var(--page-pad) 3rem;
    width: 100%;
    position: relative;
}

.menu__deco {
    display: none;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
}

.menu__deco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile photo — single starred image above the dishes, full natural height */
.menu__mobile-img {
    margin: 0 0 1.75rem;
}
.menu__mobile-img img {
    width: 100%;
    height: auto;
    display: block;
}


.menu__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1.75rem;
    margin-bottom: 2.5rem;
}

.menu__tabs a {
    flex: 0 0 auto;
    font-size: var(--fs-heading);
    font-weight: 400;
    letter-spacing: 0;
    line-height: var(--lh-compact);
    color: var(--ink-ghost);
    padding: 0.15rem 0;
    transition: color 0.25s cubic-bezier(.22, .61, .36, 1);
    -webkit-tap-highlight-color: transparent;
}

.menu__tabs a:hover { color: var(--ink-soft); }

.menu__tabs a.is-active { color: var(--cream); }

.menu__panel-photo {
    margin: 0 calc(var(--page-pad) * -1) 1.75rem;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.menu__panel-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 880px) {
    .menu__panel-photo { display: none; }
}

.menu__panel-sub {
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
}


.menu__panels {
    position: relative;
}

.menu__panel {
    display: none;
    opacity: 0;
    transform: translateY(6px);
}

.menu__panel.is-active {
    display: block;
    animation: panel-fade 0.4s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes panel-fade {
    to { opacity: 1; transform: translateY(0); }
}

.menu__section + .menu__section { margin-top: 2rem; }

.menu__section-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.menu__section-label {
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

.menu__section-rule {
    flex: 1;
    height: 1px;
    background: rgba(var(--cream-rgb), 0.14);
}

.menu__dishes {
    list-style: none;
}

.menu__dish {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
    padding: 0.75rem 0;
}

.menu__dish-main {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.menu__dish-desc {
    font-size: var(--fs-body);
    line-height: var(--lh-compact);
    color: var(--cream);
}

.menu__dish-price {
    font-size: var(--fs-body);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-slight);
}
.menu__dish-half { color: var(--ink-soft); }

.menu__dish-flags {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    vertical-align: middle;
}

.menu__dish-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border: 1px solid rgba(var(--cream-rgb), 0.3);
    border-radius: 50%;
    font-size: 0.55em;
    letter-spacing: var(--track-slight);
    color: var(--ink-soft);
    line-height: 1;
}

/* Separator / break between dish groups */
.menu__sep {
    height: 1.25rem;
    list-style: none;
}

/* Labelled section heading (e.g. "To share", "Sparkling") — the label itself
   is a bare h2 inside the row; this row only places it in the list */
.menu__section {
    list-style: none;
    margin: 1.75rem 0 0.5rem;
}
.menu__section:first-child { margin-top: 0; }

/* Menu note at the top of a panel (e.g. "£15pp · £19pp with drinks") */
.menu__note {
    margin: 0 0 1.5rem;
    font-size: var(--fs-body);
    color: var(--ink-soft);
    letter-spacing: var(--track-slight);
}
.menu__note--bottom { margin: 1.5rem 0 0; }

/* ---------- Wine variant ---------- */
/* The size columns (125/175/500/Btl) sit in line with each section label
   (Sparkling, Rosé…) — same grid as the wine rows so everything aligns. */
.menu__wine-header,
.menu__section--wine {
    display: grid;
    grid-template-columns: 1fr repeat(4, 2.75rem);
    gap: 0.5rem;
    align-items: baseline;
}

.menu__wine-header { padding: 0.5rem 0 0.4rem; }

.menu__wine-size {
    font-size: var(--fs-small);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: right;
}

.menu__wines {
    list-style: none;
}

.menu__wine {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem 0;
}

.menu__wine-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.menu__wine-name {
    font-size: var(--fs-body);
    line-height: var(--lh-compact);
    color: var(--cream);
}

.menu__wine-producer { color: var(--ink-soft); }

.menu__wine-vintage {
    font-size: var(--fs-small);
    color: var(--ink-soft);
}

.menu__wine-sub {
    font-size: var(--fs-small);
    color: var(--ink-soft);
    letter-spacing: var(--track-slight);
}

.menu__wine-prices {
    display: grid;
    grid-template-columns: repeat(4, 2.75rem);
    gap: 0.5rem;
    text-align: right;
}

.menu__wine-price {
    font-size: var(--fs-small);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
/* (Missing sizes render as empty cells — no dashes.) */

/* ---------- Tabs + wine grid adjust on narrow viewports ---------- */
@media (max-width: 540px) {
    .menu__tabs {
        gap: 0.1rem 1.25rem;
    }

    /* Tighter price columns give the wine names room to breathe on phones */
    .menu__wine-header,
    .menu__section--wine {
        grid-template-columns: 1fr repeat(4, 2.2rem);
        gap: 0.35rem;
    }

    .menu__wine-prices {
        grid-template-columns: repeat(4, 2.2rem);
        gap: 0.35rem;
    }
}

@media (min-width: 880px) {
    .menu {
        max-width: 42rem;
        padding-top: 2.5rem;
        padding-bottom: 4rem;
    }


    .menu__head {
        margin-bottom: 2rem;
    }

    .menu__tabs {
        margin-bottom: 2.5rem;
    }


    .menu__wine-header,
    .menu__section--wine {
        grid-template-columns: 1fr repeat(4, 3.25rem);
    }

    .menu__wine-prices {
        grid-template-columns: repeat(4, 3.25rem);
    }
}

@media (min-width: 1200px) {
    .menu__deco {
        width: calc(50vw - 28rem);
        aspect-ratio: 3 / 4;
    }

    /* All three slots in one gutter → keep full size, but stack them from the
       top with a fixed gap instead of pinning them top/centre/bottom (which
       makes them meet in the middle). Photo height = width × 4/3; gap = 2.5rem. */
    .menu__deco--l-mid.is-crowded,
    .menu__deco--r-mid.is-crowded {
        top: calc(2.5rem + (50vw - 28rem) * 4 / 3 + 2.5rem);
        transform: none;
    }
    .menu__deco--l-bot.is-crowded,
    .menu__deco--r-bot.is-crowded {
        top: calc(2.5rem + ((50vw - 28rem) * 4 / 3 + 2.5rem) * 2);
        bottom: auto;
    }

    .menu__deco.is-active {
        display: block;
    }

    /* Left gutter */
    .menu__deco--l-top,
    .menu__deco--l-mid,
    .menu__deco--l-bot { left: calc(50% - 50vw + 2rem); }

    /* Right gutter */
    .menu__deco--r-top,
    .menu__deco--r-mid,
    .menu__deco--r-bot { right: calc(50% - 50vw + 2rem); }

    /* Vertical bands */
    .menu__deco--l-top,
    .menu__deco--r-top { top: 2.5rem; }
    .menu__deco--l-mid,
    .menu__deco--r-mid { top: 50%; transform: translateY(-50%); }
    .menu__deco--l-bot,
    .menu__deco--r-bot { bottom: 4rem; }

    /* Desktop uses the gutter photos, not the inline mobile ones */
    .menu__mobile-img { display: none; }
}

/* ---- Cookie / privacy notice ------------------------------------------ */
/* Named .site-consent (not .cookie-*) so consent/annoyance blocker extensions
   don't auto-hide it with user-origin display:none !important. */
/* Small, unobtrusive toast tucked into the bottom-left corner. */
.site-consent {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.6rem 0.75rem;
    background: var(--leaf, #044E33);
    color: var(--cream, #F2F6F5);
    border-radius: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    font-size: var(--fs-small);
    line-height: var(--lh-compact);
}
.site-consent[hidden] { display: none; }
.site-consent__text { margin: 0; opacity: 0.9; font-size: inherit; line-height: inherit; }
.site-consent__text a { color: inherit; text-decoration: underline; }
.site-consent__accept {
    align-self: flex-end;
    flex: none;
    border: 1px solid rgba(var(--cream-rgb), 0.4);
    background: transparent;
    color: inherit;
    padding: 0.2rem 0.6rem;
    border-radius: 0.3rem;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-small);
    white-space: nowrap;
}
.site-consent__accept:hover { background: rgba(var(--cream-rgb), 0.14); }


/* ================================================
   Page transitions + image fade-ins
   ================================================ */

/* Quiet cross-fade between pages on browsers with cross-document view
   transitions (Chrome 126+, Safari 18+); everyone else keeps the instant
   swap. Menu tab flicks are same-page JS, so they aren't affected. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.18s; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

/* Menu photos fade in as they finish loading; cached ones appear instantly.
   .is-loading is only ever set by JS, so without JS nothing is hidden. */
.menu__deco img,
.menu__mobile-img img { transition: opacity 0.45s ease; }
.menu__deco img.is-loading,
.menu__mobile-img img.is-loading { opacity: 0; }