/* =========================================================================
   The Little John, Hathersage
   -------------------------------------------------------------------------
   "Signboard & Paper", the site is built from the pub's own printed matter.
   Deep blue signboard panels carrying the oak-and-arrow wallpaper alternate
   with aged-cream paper panels and full-bleed photography. That three-beat
   rhythm (sign -> paper -> photograph) is the thing that makes it Little John
   rather than a hospitality template.

   Colour rule worth knowing before you edit: gold on cream is only ~2:1 and
   must never carry text. Gold is for display type and decoration on blue.
   Body copy is cream-on-blue or ink-on-cream, both comfortably above AA.
   ========================================================================= */

/* --- Fonts ------------------------------------------------------------- */

@font-face {
    font-family: 'EB Garamond';
    src: url('/assets/lj/fonts/EBGaramond-var.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('/assets/lj/fonts/EBGaramond-Italic-var.woff2') format('woff2-variations');
    font-weight: 400 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Rokkitt';
    src: url('/assets/lj/fonts/Rokkitt-var.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* --- Tokens ------------------------------------------------------------ */

:root {
    /* Brand pack */
    --blue: #0d3d4c;      /* Chatsworth Blue   */
    --gold: #c8a65f;      /* Antique Boozer Gold */
    --cream: #f4f1e8;     /* Aged Cream        */

    /* Working derivations */
    --deep: #082c37;      /* footers, scrims over photography */
    --ink: #1b2e34;       /* body text on cream */
    --ink-soft: #4a5f66;  /* secondary text on cream */
    --cream-soft: #cfd8d6;/* secondary text on blue */
    --gold-dim: #a98a4c;
    --rule: rgba(200, 166, 95, .34);
    --rule-soft: rgba(200, 166, 95, .28);  /* faded keyline: header + hero strip */
    --rule-ink: rgba(27, 46, 52, .16);

    --display: 'EB Garamond', 'Garamond', 'Times New Roman', serif;
    --body: 'Rokkitt', 'Rockwell', Georgia, serif;

    /* Fluid type, clamp so nothing needs a breakpoint to stay readable */
    --t-hero: clamp(3.2rem, 1.4rem + 5.2vw, 6rem);
    --t-h1: clamp(2.1rem, 1.3rem + 3.4vw, 4rem);
    --t-h2: clamp(1.7rem, 1.2rem + 2.1vw, 2.85rem);
    --t-h3: clamp(1.28rem, 1.05rem + 1vw, 1.65rem);
    --t-lead: clamp(1.08rem, 1rem + .4vw, 1.28rem);
    --t-body: 1.0625rem;
    --t-small: .9375rem;
    --t-eyebrow: .78rem;

    /* Leading. Unitless so the ratio holds identically at every viewport
       while the fluid font sizes change underneath it. */
    --leading: 1.5;         /* body copy and prose */
    --leading-tight: 1.4;   /* larger lead and intro text */

    --wrap: 1220px;
    --wrap-tight: 760px;
    --gutter: clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
    /* One gap step for every card-like grid. .cards and .facts previously sat
       four pixels apart on desktop and identical on mobile, which meant there
       was no single step to reason about and the next grid would invent one. */
    --gap-grid: clamp(1.25rem, .5rem + 2vw, 2.25rem);
    --section: clamp(3.75rem, 2rem + 6vw, 8rem);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Base -------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sticky header shouldn't cover the target of an in-page link */
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--body);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: var(--leading);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }

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

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }

strong { font-weight: 700; }

::selection { background: var(--gold); color: var(--deep); }

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

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

.skip {
    position: absolute; top: -100%; left: 1rem; z-index: 200;
    background: var(--gold); color: var(--deep);
    padding: .75rem 1.25rem; font-family: var(--body); font-weight: 600;
}
.skip:focus { top: 1rem; }

/* --- Layout ------------------------------------------------------------ */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* margin-inline is set here as well as on .wrap, because several pages use
   .wrap--tight on its own to pull a single block in from the panel edges. */
.wrap--tight { max-width: var(--wrap-tight); margin-inline: auto; }

.section { padding-block: var(--section); }
.section--snug { padding-block: calc(var(--section) * .62); }

/* --- Spacing and alignment --------------------------------------------- */
/* Four classes covering what forty inline styles used to do by hand. All of it
   fluid: the values they replaced were frozen pixel margins that read the same
   on a phone as on a desktop. A page should never need to set a margin. */

/* A closing link, button or note set below a block of prose. */
.tail { margin-top: clamp(1.25rem, .9rem + 1.2vw, 2rem); }

/* A module set below a heading plate or another module. */
.stacked { margin-top: clamp(2rem, 1.25rem + 2vw, 3rem); }

/* Centre a block and the text inside it. Centred prose is pulled in from the
   68ch reading measure, because a centred passage that wide loses its shape. */
.centred { text-align: center; margin-inline: auto; }
.prose.centred { max-width: 58ch; }

/* A narrower measure held in the middle of a wide panel. */
.inset { max-width: 46rem; margin-inline: auto; }

/* Panels, the three grounds the whole site is built from.
   .panel--sign  : Chatsworth Blue carrying the oak-and-arrow wallpaper
   .panel--paper : Aged Cream, for menus and long-form reading
   .panel--deep  : the darkest blue, for footers and closing statements     */

.panel { position: relative; }

.panel--paper { background: var(--cream); color: var(--ink); }

.panel--sign,
.panel--deep {
    color: var(--cream);
    overflow: hidden;
}

.panel--sign { background: var(--blue); }
.panel--deep { background: var(--deep); }

/* The wallpaper has to stay at the edge of perception, the moment it competes
   with the copy it stops reading as texture and starts reading as noise. Gold
   sits more brightly on the darker ground, so the deep panel takes less of it. */
.panel--sign::before,
.panel--deep::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/lj/pattern-gold.svg');
    background-size: 340px 295px;
    background-repeat: repeat;
    opacity: .055;
    pointer-events: none;
}

.panel--deep::before { opacity: .04; }

/* A closing facts strip sits on a quieter signboard, so the page settles rather
   than shouting on the way out. Used on the two pages that end that way, which
   is all of them that do. If you add a third, it takes this too. */
.panel--sign.is-quiet::before { opacity: .035; }
.panel--sign.is-loud::before { opacity: .085; background-size: 440px 380px; }

/* On a phone the tile is nearly as wide as the screen, which makes each rosette
   enormous. Shrink it so it stays a texture rather than a motif.             */
@media (max-width: 640px) {
    .panel--sign::before,
    .panel--deep::before,
    .drawer::before,
    .ftr::before { background-size: 210px 182px; }

    .panel--sign::before { opacity: .045; }
    .panel--deep::before { opacity: .035; }
}

.panel > .wrap { position: relative; z-index: 1; }

/* Hairline gold edge, like the border on the painted signboards */
.panel--sign.has-edge::after {
    content: '';
    position: absolute;
    inset: clamp(.75rem, 1.6vw, 1.5rem);
    border: 1px solid var(--rule);
    pointer-events: none;
}

.panel--paper.has-edge-top { border-top: 1px solid var(--rule-ink); }

/* --- Signwriter's plate ------------------------------------------------ */
/* Section headings echo the logo lockup: letterspaced small caps over a
   hairline rule, flanked by short gold strokes.                            */

.plate { margin-bottom: clamp(2rem, 1rem + 2.4vw, 3.25rem); }

/* A drinks page runs several menus one after another, each under its own
   heading. That heading needs clearly more air above it than the gap between
   two sections of the same menu — which is itself up to 4rem — or a new menu
   reads as another section of the one before it. */
.plate--group { margin-top: clamp(5rem, 3rem + 7vw, 9rem); }
.plate--centre { text-align: center; }

.plate__eyebrow {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-family: var(--body);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .9rem;
}

.plate--centre .plate__eyebrow { justify-content: center; }

.plate__eyebrow::before,
.plate__eyebrow::after {
    content: '';
    height: 1px;
    width: clamp(1.5rem, 4vw, 3rem);
    background: var(--rule);
    flex: none;
}

.plate__eyebrow::before { display: none; }
.plate--centre .plate__eyebrow::before { display: block; }

.panel--paper .plate__eyebrow { color: var(--blue); }
.panel--paper .plate__eyebrow::before,
.panel--paper .plate__eyebrow::after { background: var(--rule-ink); }

.plate__title { margin: 0; }
.plate__lead {
    font-size: var(--t-lead);
    line-height: var(--leading-tight);
    max-width: 56ch;
    margin: 1rem 0 0;
    color: var(--ink-soft);
}
.plate--centre .plate__lead { margin-inline: auto; }
.panel--sign .plate__lead,
.panel--deep .plate__lead { color: var(--cream-soft); }

/* --- Arrow rule -------------------------------------------------------- */
/* The gold arrowhead from the mood board, used as a divider and list bullet */

.arrow-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-block: clamp(2rem, 4vw, 3.5rem);
}

.arrow-rule::before,
.arrow-rule::after {
    content: '';
    height: 1px;
    flex: 1 1 auto;
    max-width: 9rem;
    background: linear-gradient(90deg, transparent, var(--rule));
}
.arrow-rule::after { background: linear-gradient(90deg, var(--rule), transparent); }

.arrow-rule img { width: 26px; opacity: .85; }

/* --- Buttons ----------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--body);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none;
    padding: .82rem 1.5rem;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    transition: background-color .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Solid gold, the primary action on any ground */
.btn--gold {
    background: var(--gold);
    color: var(--deep);
    border-color: var(--gold);
}
.btn--gold:hover { background: #d5b675; border-color: #d5b675; }

/* Outlined, the second booking journey, present but lighter */
.btn--ghost {
    color: var(--gold);
    border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--gold); background: rgba(200, 166, 95, .1); }

/* On cream, the outline switches to blue: gold-on-cream fails contrast */
.panel--paper .btn--ghost { color: var(--blue); border-color: rgba(13, 61, 76, .32); }
.panel--paper .btn--ghost:hover { border-color: var(--blue); background: rgba(13, 61, 76, .06); }

.btn--blue { background: var(--blue); color: var(--cream); border-color: var(--blue); }
.btn--blue:hover { background: var(--deep); border-color: var(--deep); }

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

/* A button never sets the width of the page. The email address on /book-a-stay
   is long enough to push the layout sideways in a narrow band around 640px, so
   the padding gives way before the line does. */
.btn { max-width: 100%; }
@media (max-width: 700px) {
    .btn { padding-inline: 1.1rem; letter-spacing: .1em; }
}

/* Quiet text link with a drawn gold arrow */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--body);
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gold);
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--rule);
    transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.arrow-link::after { content: '→'; transition: transform .25s var(--ease); }
.arrow-link:hover { border-color: var(--gold); gap: .85rem; }
.arrow-link:hover::after { transform: translateX(3px); }

.panel--paper .arrow-link { color: var(--blue); border-color: var(--rule-ink); }
.panel--paper .arrow-link:hover { border-color: var(--blue); }

/* --- Header ------------------------------------------------------------ */

.hdr {
    /* Mark height lives here so the logo box can be sized from it. */
    --hdr-mark: clamp(3rem, 2rem + 2.6vw, 4.4rem);
    --hdr-mark-stuck: calc(var(--hdr-mark) * .68);
    /* The mark is very nearly square (1554 x 1536). */
    --hdr-mark-ratio: 1.0117;

    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--blue);
    transition: background-color .35s var(--ease);
}

/* The dark wash the header wears while floating over a hero. Kept as its own
   layer because a gradient cannot interpolate to a flat colour, animating
   background alone would snap. Fading this out while background-color fades
   in gives an actual cross-dissolve to solid Chatsworth Blue. */
.hdr::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(8, 44, 55, .85), rgba(8, 44, 55, 0));
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
}

/* Keyline. Drawn as a layer rather than a border so it can be inset, and sized
   to the same content width as .wrap so it aligns with the faded rule above the
   hero strip further down the page. */
.hdr::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: calc(min(100%, var(--wrap)) - var(--gutter) * 2);
    height: 1px;
    background: var(--rule-soft);
    z-index: 2;
    pointer-events: none;
}

/* Over a hero the header floats with only the wash, then solidifies on scroll */
.hdr--over {
    position: fixed;
    inset-inline: 0;
    background-color: transparent;
}
/* Over a hero the wash is the only thing between cream nav links and the
   photograph. The old gradient reached zero by the foot of the bar, and the nav
   sits halfway down it, so on eleven of the seventeen interior pages the links
   fell below 3:1 and on /book-a-stay to 1.51:1. It now holds its strength
   through the band the nav occupies and only releases below it, so the header
   still reads as floating rather than as a solid bar.

   The scrolled state is untouched: .is-stuck fades this to nothing and brings
   in solid Chatsworth Blue, which was already right. */
.hdr--over::before {
    opacity: 1;
    background: linear-gradient(180deg,
        rgba(8, 44, 55, .78) 0%,
        rgba(8, 44, 55, .68) 42%,
        rgba(8, 44, 55, .52) 68%,
        rgba(8, 44, 55, .24) 86%,
        rgba(8, 44, 55, 0) 100%);
}

/* The mask alone could not go below .91 without dropping the links under AA, so
   the type carries some of the load instead and the mask lightens to .78. The
   same trade the door labels on the home page already make: a shadow does not
   count toward a contrast ratio but it is what actually keeps the words legible
   over a photograph.

   Scoped away from .is-stuck deliberately. Once the header solidifies there is
   nothing to fight and a shadow would just dirty the type. */
.hdr--over:not(.is-stuck) .hdr__link,
.hdr--over:not(.is-stuck) .btn--ghost {
    text-shadow: 0 1px 3px rgba(8, 44, 55, .95), 0 0 10px rgba(8, 44, 55, .7);
}
.hdr--over.is-stuck { background-color: var(--blue); }
.hdr--over.is-stuck::before { opacity: 0; }

.hdr__inner {
    position: relative;
    z-index: 1;              /* above the wash layer */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 6.6rem;
    padding-block: .7rem;
    transition: min-height .35s var(--ease);
}

.hdr.is-stuck .hdr__inner { min-height: 4.4rem; }

.hdr__logo {
    display: flex;
    align-items: center;
    flex: none;
    line-height: 0;
    /* Breathing room between the mark and the first nav link. Margin, not
       padding: padding would extend the logo's hit area across the gap, so
       clicking the empty space beside "The Pub" would silently go home. */
    margin-right: 40px;
    /* Width is pinned to the unshrunk mark. Without this the box narrows as
       the mark scales down on scroll and drags every nav link left with it. */
    width: calc(var(--hdr-mark) * var(--hdr-mark-ratio));
}

/* The mark stands alone in the bar, so it carries the identity on its own and
   is sized to make the shrink on scroll actually read. */
.hdr__mark {
    height: var(--hdr-mark);
    width: auto;
    transition: height .35s var(--ease);
}

.hdr.is-stuck .hdr__mark { height: var(--hdr-mark-stuck); }

.hdr__nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, .3rem + 1.5vw, 2.1rem);
    /* Sit the links up against the mark. An auto margin soaks up the free
       space before justify-content gets to distribute it, so the slack lands
       after the nav instead of being split either side of it. */
    margin-right: auto;
}

.hdr__link {
    font-family: var(--body);
    font-size: .87rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cream);
    padding-block: .3rem;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}
.hdr__link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.hdr__link[aria-current='page'] { color: var(--gold); border-bottom-color: var(--rule); }

.hdr__actions { display: flex; align-items: center; gap: .6rem; }
.hdr__actions .btn { padding: .68rem 1.1rem; font-size: .8rem; letter-spacing: .1em; }

/* Burger */
.hdr__burger {
    display: none;
    width: 2.75rem; height: 2.75rem;
    align-items: center; justify-content: center;
    background: none; border: 1px solid var(--rule); color: var(--cream);
    cursor: pointer;
}
.hdr__burger span {
    display: block; position: relative;
    width: 1.15rem; height: 1px; background: currentColor;
}
.hdr__burger span::before,
.hdr__burger span::after {
    content: ''; position: absolute; left: 0;
    width: 100%; height: 1px; background: currentColor;
    transition: transform .25s var(--ease);
}
.hdr__burger span::before { top: -6px; }
.hdr__burger span::after { top: 6px; }
.hdr__burger[aria-expanded='true'] span { background: transparent; }
.hdr__burger[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.hdr__burger[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Drawer */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--blue);
    padding: calc(6.5rem + 10px) var(--gutter) 1.75rem;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: .15rem;
}
.drawer.is-open { display: flex; }

.drawer::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('/assets/lj/pattern-gold.svg');
    background-size: 360px 312px;
    opacity: .06;
    pointer-events: none;
}

.drawer > * { position: relative; }

/* Down from 1.85rem, which was larger than any heading on the site and pushed
   the two booking buttons below the fold on a 640px tall phone. The top padding
   clears the header keyline by roughly 34px so the first link is not sitting on
   it. Mobile and tablet only: the drawer does not exist above 1080px. */
.drawer__link {
    font-family: var(--display);
    font-size: 1.25rem;
    letter-spacing: .01em;
    color: var(--cream);
    text-decoration: none;
    padding: .42rem 0;
    border-bottom: 1px solid rgba(200, 166, 95, .16);
}
.drawer__link:hover { color: var(--gold); }

.drawer__actions { display: grid; gap: .5rem; margin-top: .9rem; }

/* No longer pinned to the foot of the screen. With the nav at half its old
   size the panel is much shorter, and margin-top: auto was leaving 281px of
   empty blue between the buttons and the address. It sits under them now. */
.drawer__meta {
    padding-top: 1.5rem;
    font-size: var(--t-small);
    color: var(--cream-soft);
}
.drawer__meta a { color: var(--gold); }

/* The same social block the footer uses, plus the two legal links, so the
   drawer is a complete way round the site rather than nav and nothing else. */
.drawer .social { margin-top: 1.25rem; }
.drawer__legal { margin: 1.25rem 0 0; font-size: var(--t-small); }
.drawer__legal a { color: var(--cream-soft); }
.drawer__legal a:hover { color: var(--gold); }

@media (max-width: 1080px) {
    .hdr__nav { display: none; }
    .hdr__burger { display: flex; }
}

/* Book a Stay stays in the header all the way down to tablet. There is room for
   it there, 519px spare at 768px, and accommodation is half the reason anybody
   is on this site. It only drops on phones, where the burger needs the space. */
@media (max-width: 700px) {
    .hdr__actions .btn--ghost { display: none; }
}

@media (max-width: 560px) {
    .hdr__actions .btn { display: none; }
}

/* --- Hero -------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: min(94svh, 900px);
    display: flex;
    align-items: stretch;
    color: var(--cream);
    overflow: hidden;
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }

/* The hero exterior was shot on a bright winter day, bare trees, overhead
   cables and a parked car around the edges, none of which say "warm, dark oak,
   brass". Scaling in crops the frame back to the building itself, and a low
   gold wash pulls the grade towards the brand without touching the asset.     */
/* Top-aligned and unzoomed, so the whole roofline clears the header and the
   nav sits over open sky rather than gritstone. The zoom was there to crop the
   bare trees and parked cars off the edges, but it was taking ~7% off the top
   of the frame, which is exactly where the sky is. Anchoring to the top of
   the photograph recovers it; the road at the foot is cropped instead, which
   costs nothing. */
.hero__media > .ph > img {
    object-position: 50% 0%;
}

/* Interior heroes default to the top of the frame, which is what they showed
   before object-fit was applied: the image simply overflowed the bottom of the
   box. Eleven of them rely on this; the seven that set a focal point pass it as
   an inline object-position and override this. */
.phero__media > .ph > img { object-position: 50% 0%; }

/* Eat page only. The dishes are shot from overhead on a 3:2 frame, and the hero
   box is roughly 2.65:1 on a desktop, so about 400px of the photograph is cropped
   away — there is room to move within it. Sitting the crop higher up the source
   drops the plates down the frame and away from the headline, which is what the
   shot wants at desktop width. Narrow screens keep the old focal point: the box
   is proportionally much taller there, the crop range is smaller, and dropping
   the image pushes the food behind the text. Set here rather than as the
   component's inline `position` because an inline style cannot be made
   conditional on a media query. */
.phero--eat > .phero__media > .ph > img { object-position: 50% 45%; }

@media (min-width: 861px) {
    .phero--eat > .phero__media > .ph > img { object-position: 50% 25%; }
}

/* Book a stay only. room-chandelier is a portrait frame, 3285x4927, sitting in
   a hero box that is wide and short, so cover crops it hard on the vertical:
   roughly 620px of the photograph is out of view on a tablet and 1690px on a
   desktop. There is room to move, and raising the focal point lifts the image
   so more of the room below the window comes into the frame. Phones keep 52%,
   where the box is proportionally tallest and the crop range smallest. */
.phero--book-a-stay > .phero__media > .ph > img { object-position: 50% 52%; }

/* Tablet and desktop settled on the same value, so they share one rule rather
   than two identical ones. Split it again if they need to diverge. */
@media (min-width: 701px) {
    .phero--book-a-stay > .phero__media > .ph > img { object-position: 50% 72%; }
}

.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 62% 55%,
        rgba(200, 166, 95, .20) 0%,
        rgba(200, 166, 95, .09) 45%,
        rgba(13, 61, 76, .18) 100%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* A narrow viewport crops this frame horizontally, so the full height is on
   screen and only the sideways framing needs setting, aimed at the corner
   turret and the signage. No zoom: it was trimming sky off the top for
   nothing. */
@media (max-width: 700px) {
    .hero__media > .ph > img { object-position: 62% 0%; }
}

/* Three scrims: a top wash so the floating header stays legible, a heavier
   foot for the headline to sit on, and a left wash because the building in the
   hero shot is bright stone exactly where the copy falls.                    */
.hero::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 44, 55, .6) 0%, rgba(8, 44, 55, 0) 32%),
        linear-gradient(0deg, rgba(8, 44, 55, .92) 0%, rgba(8, 44, 55, .45) 42%, rgba(8, 44, 55, 0) 72%),
        linear-gradient(90deg, rgba(8, 44, 55, .72) 0%, rgba(8, 44, 55, .3) 42%, rgba(8, 44, 55, 0) 68%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Name at the top, everything else at the foot, photograph in between.
       The top padding has to clear the fixed header as well as give the
       wordmark room to breathe. */
    display: flex;
    flex-direction: column;
    /* Wordmark holds the top of the frame, copy holds the foot. */
    justify-content: space-between;
    gap: 2rem;
    padding-block: clamp(6.5rem, 4.5rem + 6vw, 7.2rem) clamp(3rem, 2rem + 5vw, 6rem);
}

/* The brand wordmark, carried at readable size now that the header only shows
   the mark. Capped in width as well as height so it never runs the full bleed
   of a wide viewport, it should read as a nameplate, not a banner.           */
.hero__wordmark {
    height: clamp(2.58rem, 1.54rem + 3.68vw, 4.83rem);
    width: auto;
    max-width: min(100%, 66rem);
    /* The hero content fills its container, so justify-content: space-between
       has no slack to distribute and falls back to flex-start, which means
       the gap here is a real lever, unlike the padding above it.
       Margin rather than padding: box-sizing is border-box globally, so
       padding would eat into the fixed height and shrink the artwork. */
    margin: 40px 0 30px;
    /* Without this the column's default stretch inflates the img box to the
       full container width; the SVG then centres its artwork inside that box
       via preserveAspectRatio and the wordmark drifts off the left margin. */
    align-self: flex-start;
    filter: drop-shadow(0 2px 14px rgba(8, 44, 55, .45));
}

/* Tablet portrait. The wordmark holds the top and the copy holds the foot, so
   the gap between them is simply whatever height is left over, and at this
   width the content is short while the hero is still 900px tall, which opened
   it to 165px. Trimming the hero height is the only lever that closes the gap
   without moving the mark. */
@media (min-width: 701px) and (max-width: 1023px) {
    .hero { min-height: min(82svh, 790px); }
}

/* Mobile only. The wordmark carries more weight on a small screen, and the
   generous gap beneath it, set for the roomier desktop composition, pushes
   the copy too far down the frame. Desktop and tablet keep their values. */
@media (max-width: 700px) {
    .hero__wordmark {
        height: clamp(3.1rem, 1.85rem + 4.42vw, 5.8rem);
        margin-bottom: 52px;
    }

    /* Group the wordmark with the copy and let the spare height sit above
       them. Under space-between the leftover space lands in this gap, so it
       grew with the handset, 32px on an SE, 99px on a 16 Pro Max, and no
       margin could control it. Anchored this way the margin below the
       wordmark is the gap, on every phone. */
    /* Anchored to the top, not the foot. flex-end fixed the gap below the
       wordmark but let its position ride down with the screen: 38px clear of
       the header on a 667px phone, 133px on a 932px one. Anchoring to the top
       pins the mark under the header at every height and puts the spare
       screen at the bottom of the photograph instead, where it costs nothing. */
    .hero__inner {
        gap: 0;
        justify-content: flex-start;
    }
}

.hero__eyebrow {
    font-family: var(--body);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .65rem;
}

/* Tracking tightens as type grows. At 96px, text tracking reads loose, and
   Garamond opens up more than most. This is the only place on the site where
   letter-spacing is negative, and it is deliberate. */
.hero__title {
    letter-spacing: -.015em;
    font-size: var(--t-hero);
    font-weight: 500;
    /* Unitless, so the two lines keep the same relationship at every width
       while the fluid size changes underneath. */
    line-height: 1.06;
    margin: 0 0 2.35rem;
    /* The break is explicit in the markup so the headline is always two lines,
       including during font swap, the fallback serif is wider than EB Garamond
       and was free to wrap it to three before the real face arrived. The measure
       only needs to be wide enough not to fight that break. */
    max-width: 18ch;
    text-shadow: 0 2px 24px rgba(8, 44, 55, .45);
}

.hero__lead {
    font-size: var(--t-lead);
    max-width: 46ch;
    margin: 0 0 3.25rem;
    line-height: var(--leading-tight);
    color: #e6e2d6;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* The same row of buttons used anywhere other than a hero. It owns its own
   space so that call sites cannot invent it: twelve pages were previously
   setting margin-top by hand, at three different values, none of which scaled
   with the viewport. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: clamp(2rem, 1.25rem + 2vw, 3rem);
}
.btn-row--centre { justify-content: center; }

/* Small standing details along the foot of the hero, the A-board lines */
.hero__strip {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.5rem);
    margin-top: clamp(2rem, 4vw, 3.25rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-soft);
    font-family: var(--body);
    /* --t-small is a flat 15px, which reads correctly against the desktop
       composition but sits too heavy in the narrower column on a phone or
       tablet. Fluid instead, reaching the desktop size around 1024px and
       easing down from there. Letter-spacing is in em so it follows. */
    font-size: clamp(.75rem, .3125rem + .977vw, .9375rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #dcd8cb;
}
.hero__strip span { display: inline-flex; align-items: center; gap: .55rem; }
.hero__strip span::before { content: ''; width: .34em; height: .34em; background: var(--gold); transform: rotate(45deg); }

/* --- Page hero --------------------------------------------------------- */
/* Interior pages. Shorter than the home hero, same spacing relationships:
   eyebrow to headline 10px, headline to lead 38px, headline leading 1.06. */

.phero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(24rem, 52vh, 34rem);
    color: var(--cream);
    overflow: hidden;
}

.phero__media { position: absolute; inset: 0; overflow: hidden; }

/* Same treatment as the doors on the home page: the photograph is shown rich
   and the wash is concentrated at the foot, behind the text only. The old rule
   carried a full-height top wash and a left wash as well, which flattened the
   whole image. The header brings its own gradient, so nothing is needed up
   there. Reaches zero at 62%, which is where the text block ends. */
.phero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(0deg,
        rgba(8, 44, 55, .94) 0%,
        rgba(8, 44, 55, .88) 12%,
        rgba(8, 44, 55, .80) 26%,
        rgba(8, 44, 55, .62) 40%,
        rgba(8, 44, 55, .50) 52%,
        rgba(8, 44, 55, .38) 62%,
        rgba(8, 44, 55, .20) 72%,
        rgba(8, 44, 55, 0) 82%);
}

.phero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Top padding clears the fixed header. */
    padding-block: clamp(7rem, 5rem + 6vw, 9rem) clamp(2.75rem, 2rem + 3vw, 4.25rem);
}

/* --- Breadcrumb bar ---------------------------------------------------- */
/* Sits below the hero on the paper ground, so it needs nothing to make it
   readable. Quiet by default; the trail is for orientation, not decoration. */

/* Deep blue rather than paper: it reads as a darker band shading out of the
   hero photograph and into the signboard panel below, rather than a white
   strip cutting between them. */
.crumbbar {
    background: var(--deep);
    border-bottom: 1px solid rgba(200, 166, 95, .18);
}

.crumbbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-block: .9rem;
    font-family: var(--body);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cream-soft);
}

.crumbbar a {
    color: var(--cream-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}
.crumbbar a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.crumbbar [aria-current] { color: var(--gold); }
.crumbbar__sep { opacity: .4; }

.phero__eyebrow {
    font-family: var(--body);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 1px 5px rgba(8, 44, 55, .9), 0 0 14px rgba(8, 44, 55, .6);
    margin: 0 0 .65rem;
}

.phero__title {
    letter-spacing: -.012em;
    font-size: var(--t-h1);
    font-weight: 500;
    line-height: 1.06;
    margin: 0 0 2.35rem;
    max-width: 18ch;
    text-shadow: 0 2px 24px rgba(8, 44, 55, .45);
}

.phero__lead {
    font-size: var(--t-lead);
    line-height: var(--leading-tight);
    max-width: 52ch;
    margin: 0;
    color: #e6e2d6;
}

/* --- Three doors ------------------------------------------------------- */
/* Eat / Drink / Stay given literally equal weight, the structural answer to
   accommodation being treated as a sub-page everywhere else.                */

.doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--deep);
}

/* The module counts its own children rather than trusting the page to declare
   how many it has. /stay runs two doors, Rooms and Cottages, and a fixed three
   columns left the last one empty. Written as an enhancement so a browser
   without :has() simply keeps the three-column default. */
.doors:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, 1fr); }

.door {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Tall enough that each photograph reads as a photograph rather than a
       sliver, at the old height the fish and chips was unidentifiable.       */
    min-height: clamp(26rem, 62vh, 42rem);
    padding: clamp(1.5rem, 2.5vw, 2.75rem);
    color: var(--cream);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}

.door__media { position: absolute; inset: 0; z-index: -2; }
.door__media > .ph > img { transition: transform .9s var(--ease); }
.door:hover .door__media > .ph > img { transform: scale(1.045); }

/* Two layers, so the photograph can stay rich while the words stay readable.

   ::before is a short band at the foot, behind the text only. It has to be
   there: over the white bedding in the Stay photograph, cream type on the bare
   image measures 1.24:1, which is invisible rather than subtle. It fades out
   entirely by 55% height, so the top half of every photograph is untouched.

   ::after is the full wash, and that is the one that only appears on hover. */
.door::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg,
        rgba(8, 44, 55, .94) 0%,
        rgba(8, 44, 55, .84) 14%,
        rgba(8, 44, 55, .70) 26%,
        rgba(8, 44, 55, .58) 36%,
        rgba(8, 44, 55, .18) 42%,
        rgba(8, 44, 55, 0) 48%);
    pointer-events: none;
}

.door::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(8, 44, 55, .85) 6%, rgba(8, 44, 55, .45) 55%, rgba(8, 44, 55, .2) 100%);
    opacity: 0;
    transition: opacity .45s var(--ease);
    pointer-events: none;
}
.door:hover::after,
.door:focus-visible::after { opacity: 1; }

.door__body { position: relative; width: 100%; }

/* These are spans (a door is one big <a>, so it can't contain block elements
   that would be invalid inside a link's phrasing content), they need making
   block explicitly or the vertical rhythm collapses.                         */
.door__label,
.door__title,
.door__text,
.door__rule { display: block; }

.door__label {
    font-family: var(--body);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
    /* Gold is a mid-tone and cannot reach AA over a photograph at this size
       without a near-opaque band, which would defeat the point of showing the
       image. Kept gold as the brand accent; the shadow lifts it off a busy
       backdrop without darkening more of the picture. */
    text-shadow: 0 1px 5px rgba(8, 44, 55, .9), 0 0 14px rgba(8, 44, 55, .6);
    margin: 0 0 .6rem;
}

.door__title {
    font-family: var(--display);
    font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.7rem);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 .55rem;
}

.door__text {
    font-size: var(--t-small);
    color: #dcd8cb;
    margin: 0 0 1.2rem;
    max-width: 34ch;
}

/* The rule draws across on hover, the only motion the door needs */
.door__rule { display: block; height: 1px; background: var(--rule); position: relative; }
.door__rule::after {
    content: '';
    position: absolute; inset: 0 100% 0 0;
    background: var(--gold);
    transition: right .55s var(--ease);
}
.door:hover .door__rule::after { right: 0; }

@media (max-width: 900px) {
    /* Both selectors, because the two-door rule above carries higher
       specificity and would otherwise survive into the stacked layout. */
    .doors,
    .doors:not(:has(> :nth-child(3))) { grid-template-columns: 1fr; }
    .door { min-height: 23rem; }
}

/* --- Editorial rows ---------------------------------------------------- */

.row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.row--flip > .row__media { order: 2; }

.row__body > *:first-child { margin-top: 0; }

.row__media { position: relative; }
.row__media img { width: 100%; }


/* A row whose columns are very different heights looks better topped out than
   centred, centring pushes the shorter column into the middle and leaves
   uneven space above and below it.                                           */
.row--top { align-items: start; }

@media (max-width: 860px) {
    .row { grid-template-columns: 1fr; }
    .row--flip > .row__media { order: 0; }
}

/* A crop that should sit lower in the frame on the narrow layouts than on the
   wide one. The x-lj.picture `position` prop writes an inline style, which no
   media query can reach, so a picture wanting this sets no prop at all and
   takes both values from here instead.                                       */
.crop-lift img { object-position: center 50%; }

@media (max-width: 1023px) {
    .crop-lift img { object-position: center 60%; }
}

/* --- Cards ------------------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    gap: var(--gap-grid);
}

.card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.card__media { display: block; overflow: hidden; margin-bottom: 1.1rem; }
.card__media > .ph > img { transition: transform .8s var(--ease); }
.card:hover .card__media > .ph > img { transform: scale(1.05); }

.card__title { font-size: var(--t-h3); margin: 0 0 .4rem; }
.card__text { font-size: var(--t-small); color: var(--ink-soft); margin: 0 0 1rem; }
.panel--sign .card__text, .panel--deep .card__text { color: var(--cream-soft); }
.card__foot { margin-top: auto; }

/* --- Facts strip ------------------------------------------------------- */
/* Short, checkable statements. Deliberately plain: this is the block answer
   engines lift, so it stays factual rather than decorative.                 */

/* Every page using this module runs exactly four facts, and three across can
   never divide four. auto-fit was picking three at several widths and stranding
   the fourth on a row of its own, so the counts are declared instead: four, two
   or one, never three. No floor value can do this, because for any minimum
   width there is always a band of container widths where exactly three fit. */
.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-grid);
}
.wrap--tight .facts { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
    .facts,
    .wrap--tight .facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .facts,
    .wrap--tight .facts { grid-template-columns: 1fr; }
}

.fact__label {
    font-family: var(--body);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .45rem;
}
.panel--paper .fact__label { color: var(--blue); }

.fact__value { font-family: var(--display); font-size: 1.35rem; line-height: 1.3; margin: 0; }
.fact__note { font-size: var(--t-small); color: var(--cream-soft); margin: .3rem 0 0; }
.panel--paper .fact__note { color: var(--ink-soft); }

/* --- Prose ------------------------------------------------------------- */

.prose { max-width: 68ch; }

/* Intro-weight prose: same size and leading as .answer, for passages that
   carry a section rather than sit inside one. */
.prose--lead {
    font-size: var(--t-lead);
    line-height: var(--leading-tight);
}
.prose > h2 { margin-top: 2.2em; }
.prose > h3 { margin-top: 1.8em; }
.prose > *:first-child { margin-top: 0; }

.prose ul { list-style: none; padding: 0; margin: 0 0 1.3em; }
.prose li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .5em;
}
.prose li::before {
    content: '';
    position: absolute;
    left: 0; top: .62em;
    width: 6px; height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
}

/* The answer-first paragraph under a heading: a plain, factual summary set
   slightly larger, so both readers and answer engines get the point early. */
.answer {
    font-size: var(--t-lead);
    line-height: var(--leading-tight);
    color: var(--ink);
    border-left: 2px solid var(--gold);
    padding-left: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: 1.6em;
}
.panel--sign .answer, .panel--deep .answer { color: #e6e2d6; }

.pullquote {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
    line-height: 1.35;
    max-width: 24ch;
    color: var(--gold);
    margin: 0;
}

/* The home page runs it centred and wider. Declared after .pullquote so the
   max-width wins: both are one class deep, so source order decides. */
.pullquote--centre { max-width: 36ch; margin-inline: auto; text-align: center; }

.panel--paper .pullquote { color: var(--blue); }

/* --- Menu ------------------------------------------------------------- */
/* Menus sit on cream, following the brand pack's own reasoning: a contrasting
   ground so they stay readable in low light. */

.listing { max-width: 46rem; margin-inline: auto; }

.listing + .listing { margin-top: clamp(2.5rem, 4vw, 4rem); }

.listing__head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--rule-ink);
    margin-bottom: 1.5rem;
}
.panel--sign .listing__head, .panel--deep .listing__head { border-bottom-color: var(--rule); }

.listing__title { font-family: var(--display); font-size: var(--t-h3); margin: 0; }

.listing__note {
    font-family: var(--body);
    font-size: var(--t-small);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 0 auto;
    white-space: nowrap;
}
.panel--sign .listing__note, .panel--deep .listing__note { color: var(--cream-soft); }

.listing__intro {
    font-size: var(--t-small);
    color: var(--ink-soft);
    margin: 0 0 1.5rem;
    max-width: 60ch;
}

/* An intro used on its own, under a menu's own heading rather than inside one
   of its sections. .inset is declared far earlier in this file, so on equal
   specificity the rules above won them: the paragraph lost its auto margins
   and sat hard left of the menus it belongs to. Two classes deep settles it,
   and the bottom margin gets the same air as a plate's. */
.listing__intro.inset {
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 1rem + 2.4vw, 3.25rem);
}
.panel--sign .listing__intro, .panel--deep .listing__intro { color: var(--cream-soft); }

.listing__item { margin-bottom: 1.25rem; }
.listing__item:last-child { margin-bottom: 0; }

/* Name and price on one line with a leader between them, the way a printed
   menu sets it. The price never wraps away from its dish. */
.listing__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    font-weight: 600;
    margin: 0;
}
.listing__name > span:first-child { flex: 0 1 auto; }

.listing__price {
    margin-left: auto;
    padding-left: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Menus that price in columns: wine by the glass or the bottle, soft drinks
   regular or large. The headings row and every price row are the same grid,
   each pushed to the right edge of the listing, so the figures land under
   their headings without either row knowing about the other. Column count
   comes from the markup, because it is three for wine and two for a pint of
   Pepsi. */
.listing__cells {
    display: grid;
    grid-template-columns: repeat(var(--menu-cols, 3), var(--menu-col));
    justify-items: end;
    gap: 0 .5rem;
}

.listing--cols { --menu-col: 4.75rem; }
@media (min-width: 861px) { .listing--cols { --menu-col: 5.5rem; } }

/* An empty cell — a wine sold only by the bottle — has no line box and so no
   baseline, and the row it sits in gets its baseline synthesised from its
   bottom edge instead. That drops the whole price row below the wine's name.
   A zero-width space gives every cell, full or empty, a real baseline. */
.listing__cells > span::before { content: "\200b"; }

/* Small caps are letterspaced, which leaves a gap after the last letter of
   each heading that the prices below it do not have. Pulling it back lines
   the two rows up on the eye rather than on the box. */
.listing--cols .listing__note span { margin-right: -.1em; }

.listing__tag {
    flex: none;
    font-family: var(--body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blue);
    border: 1px solid var(--rule-ink);
    border-radius: 2px;
    padding: .05rem .3rem;
    text-decoration: none;
    cursor: help;
}
.panel--sign .listing__tag, .panel--deep .listing__tag { color: var(--gold); border-color: var(--rule); }

.listing__desc { font-size: var(--t-small); color: var(--ink-soft); margin: .15rem 0 0; max-width: 62ch; }
.panel--sign .listing__desc, .panel--deep .listing__desc { color: var(--cream-soft); }

/* Dietary key at the foot of a menu page. */
.listing-key {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule-ink);
    font-size: var(--t-small);
    color: var(--ink-soft);
}
.listing-key + .listing__desc { margin-top: 1rem; }
.listing-key span { white-space: nowrap; }
.listing-key b { color: var(--blue); font-weight: 600; }

/* --- FAQs -------------------------------------------------------------- */

.faqs__list { border-top: 1px solid var(--rule-ink); }
.panel--sign .faqs__list, .panel--deep .faqs__list { border-top-color: var(--rule); }

.faq { border-bottom: 1px solid var(--rule-ink); }
.panel--sign .faq, .panel--deep .faq { border-bottom-color: var(--rule); }

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: var(--t-h3);
    line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.panel--sign .faq summary:hover, .panel--deep .faq summary:hover { color: var(--gold); }

/* A plus that becomes a minus. Cheaper than an icon and never loads late. */
.faq__sign {
    position: relative;
    flex: none;
    width: 1rem;
    height: 1rem;
}
.faq__sign::before,
.faq__sign::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: var(--gold);
    transition: transform .25s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq[open] .faq__sign::after { transform: rotate(0); }

.faq__body {
    padding-bottom: 1.35rem;
    max-width: 68ch;
    color: var(--ink-soft);
}
.panel--sign .faq__body, .panel--deep .faq__body { color: var(--cream-soft); }

/* --- Amenities --------------------------------------------------------- */
/* Plain, scannable, checkable. The block people read before booking. */

.amenities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: .5rem clamp(1.25rem, 3vw, 2.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.amenities li {
    position: relative;
    padding-left: 1.5rem;
    font-size: var(--t-small);
}
.amenities li::before {
    content: '';
    position: absolute;
    left: 0; top: .58em;
    width: 6px; height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
}

/* --- Crossover --------------------------------------------------------- */
/* Every page carries one: pub pages surface the rooms, room pages surface the
   bar. This is the mechanism that stops Stay feeling bolted on.             */

/* The 2px gap is a seam between two photographs, so it has to be dark like the
   one between the doors. Without a background the cream page showed through it
   as a pale hairline down the middle, on every page that carries a crossover. */
.crossover {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--deep);
}

.crossover__item {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 19rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--cream);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}
.crossover__item > .ph { z-index: -2; }
.crossover__item > .ph > img { transition: transform .9s var(--ease); }
.crossover__item::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(8, 44, 55, .88), rgba(8, 44, 55, .25));
}
.crossover__item:hover > .ph > img { transform: scale(1.04); }

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

/* --- Booking embed ----------------------------------------------------- */
/* The Stampede form is a full page rather than a fixed-height widget, so the
   frame is given a tall viewport and scrolls internally. Height is capped to
   the screen so the page around it stays navigable. */

.booking {
    max-width: 62rem;
    margin-inline: auto;
    border: 1px solid var(--rule-ink);
    background: #fff;
    overflow: hidden;
}

.booking__frame {
    display: block;
    width: 100%;
    height: min(84vh, 60rem);
    min-height: 34rem;
    border: 0;
}

.booking__fallback {
    max-width: 62rem;
    margin: 1.25rem auto 0;
    font-size: var(--t-small);
    color: var(--ink-soft);
    text-align: center;
}
.booking__fallback a { color: var(--blue); }

/* --- Figures ----------------------------------------------------------- */

.fig { margin: 0; }
.fig--full img { width: 100%; }

.fig__cap {
    font-size: var(--t-small);
    color: var(--ink-soft);
    /* A caption under a full-width photograph would otherwise run the whole
       1126px of the wrap, which is far past a comfortable measure at this size. */
    max-width: 78ch;
    margin-top: .7rem;
    padding-left: 1rem;
    border-left: 1px solid var(--rule);
}
.panel--sign .fig__cap, .panel--deep .fig__cap { color: var(--cream-soft); }

/* Full-bleed photographic band between panels */
.band { position: relative; height: clamp(18rem, 46vh, 34rem); overflow: hidden; }

/* Blur-up: the inline placeholder is painted as a background behind the real
   image, so the box is never empty and never the wrong colour while the file
   arrives. No JS involved, the image simply paints over it.                */
.ph {
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Cover contexts.
   Every image ships inside a <picture>, which sits in the flow at its natural
   ratio. Sizing only the inner <img> doesn't work, its height:100% resolves
   against a picture that is itself height:auto, so the image overflows. The
   picture has to be stretched first, then the img told to cover it.          */
/* Stretch the picture, not just the image. A <picture> is height: auto, so an
   <img> inside it sized at height: 100% resolves against nothing and the frame
   is left short. This list is every cover layout on the site; .phero__media was
   missing from it, which left interior page heroes covering 59% of their own
   area on a phone and 96% on a tablet. */
.hero__media > .ph,
.phero__media > .ph,
.door__media > .ph,
.band > .ph,
.crossover__item > .ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__media > .ph > img,
.phero__media > .ph > img,
.door__media > .ph > img,
.band > .ph > img,
.crossover__item > .ph > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Footer ------------------------------------------------------------ */

.ftr { background: var(--deep); color: var(--cream); position: relative; overflow: hidden; }
/* No wallpaper in the footer. It carries the mark, three headings, hours and a
   set of links already, and the texture underneath them was one layer too many
   at the point where the page should be settling. The signboard and deep panels
   above keep theirs. */
.ftr > .wrap { position: relative; padding-block: clamp(3rem, 5vw, 5rem); }

.ftr__top {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(200, 166, 95, .2);
}

/* Sized by height rather than width so the offset applied to the other
   columns below is exact and doesn't depend on the mark's aspect ratio. */
.ftr { --ftr-mark-h: 4.45rem; --ftr-mark-gap: 1.25rem; }
.ftr__mark { height: var(--ftr-mark-h); width: auto; margin-bottom: var(--ftr-mark-gap); }

.ftr h2, .ftr h3 {
    font-family: var(--body);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1rem;
}

address { font-style: normal; }
.ftr address { line-height: 1.65; }
.ftr a { color: var(--cream); }
.ftr a:hover { color: var(--gold); }

.ftr__links { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.ftr__links a { text-decoration: none; }
.ftr__links a:hover { text-decoration: underline; }

/* Opening hours. Lives here rather than under .ftr because the contact page
   shows the same thing, and was previously being styled by the footer. */
.hours { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.25rem; font-size: var(--t-small); }
.hours dt { color: var(--cream-soft); }
.hours dd { margin: 0; }
.hours--large { font-size: var(--t-body); }

/* The small caps label above a set of hours, where the surrounding page has no
   heading style of its own to lend it. */
.hours__title {
    font-family: var(--body);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1.25rem;
}

/* Second set of hours in the footer column. */
.ftr .hours + h3 { margin-top: 1.75rem; }

.ftr__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    font-size: var(--t-small);
    color: var(--cream-soft);
}
.ftr__bottom p { margin: 0; }

/* In the first column, under the phone and email, rather than in the bottom
   bar. It needs its own space there; in the bottom bar the flex gap gave it. */
.ftr__top .social { margin-top: calc(1.4rem + 5px); }
.social__reviews { margin: 1.1rem 0 0; font-size: var(--t-small); }
.social__icons { display: flex; gap: .9rem; }
.social__icons a { display: block; width: 1.4rem; color: var(--gold); }
.social__icons svg { width: 100%; height: auto; fill: currentColor; }

/* While the footer is in columns, drop the other two headings by the height
   of the mark plus its gap, so "Find your way" and "The bar" sit on the same
   line as "The Little John" rather than level with the icon above it. */
@media (min-width: 861px) {
    .ftr__top > :not(:first-child) {
        padding-top: calc(var(--ftr-mark-h) + var(--ftr-mark-gap));
    }
}

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

/* --- Reveal ------------------------------------------------------------ */

.has-reveal .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.has-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* --- Availability and date picker --------------------------------------- */
/* Q-Book sends X-Frame-Options: SAMEORIGIN, so it cannot be embedded the way
   the Stampede table form is. The dates are therefore chosen here and handed
   to their availability screen already filled in.

   The calendar is drawn rather than delegated to <input type="date">, because
   a native date input hands the calendar to the browser and browser calendars
   are operating system chrome: they cannot be styled at all.                */

.avail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The calendar hangs off the fields, not off the whole module, or it drops
   below the button and the panel reads as belonging to the wrong thing. */
.avail__picker { position: relative; width: 100%; display: flex; justify-content: center; }

.avail__fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.avail__field {
    flex: 1 1 13rem;
    max-width: 17rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-align: left;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--rule-ink);
    border-radius: 0;
    cursor: pointer;
    transition: border-color .25s var(--ease);
    font: inherit;
}
.avail__field:hover { border-color: var(--blue); }
.avail__field.is-active { border-color: var(--blue); box-shadow: inset 0 -2px 0 var(--gold); }

.avail__label {
    font-family: var(--body);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.avail__value {
    font-family: var(--display);
    font-size: 1.2rem;
    line-height: 1.2;
    color: rgba(27, 46, 52, .45);
}
.avail__field.is-set .avail__value { color: var(--ink); }

/* Space above the button, so it reads as the next step rather than a third
   field sitting in the same row. */
.avail__go { margin-top: 2rem; min-width: 15rem; }

/* --- the calendar itself ------------------------------------------------ */

.cal {
    position: absolute;
    top: calc(100% + .6rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    width: max-content;
    max-width: min(38rem, calc(100vw - 2rem));
    background: #fff;
    border: 1px solid var(--rule-ink);
    box-shadow: 0 18px 50px rgba(8, 44, 55, .18);
    padding: 1.1rem 1.25rem 1rem;
}
.cal[hidden] { display: none; }

.cal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .25rem;
}
.cal__nav {
    width: 2.2rem; height: 2.2rem;
    display: grid; place-items: center;
    background: none;
    border: 1px solid var(--rule-ink);
    color: var(--blue);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.cal__nav:hover:not(:disabled) { background: rgba(13, 61, 76, .06); border-color: var(--blue); }
.cal__nav:disabled { opacity: .3; cursor: default; }

.cal__months { display: flex; gap: 1.75rem; }
.cal__month { flex: 1 1 auto; }

.cal__title {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    color: var(--blue);
    margin: 0 0 .6rem;
}

.cal__grid { border-collapse: collapse; table-layout: fixed; width: 15rem; }
.cal__grid th {
    font-family: var(--body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-bottom: .45rem;
}
.cal__grid th abbr { text-decoration: none; }
.cal__grid td { padding: 0; }

.cal__day {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    font-family: var(--body);
    font-size: .95rem;
    color: var(--ink);
    cursor: pointer;
    position: relative;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.cal__day:hover:not(:disabled) { background: rgba(13, 61, 76, .08); }
.cal__day:disabled { color: rgba(27, 46, 52, .28); cursor: default; }

/* The range reads as one continuous band, so the cells carry the tint edge to
   edge rather than leaving a gap between them. */
.cal__day.is-between { background: rgba(13, 61, 76, .09); }
.cal__day.is-from,
.cal__day.is-to {
    background: var(--blue);
    color: var(--cream);
    font-weight: 600;
}
.cal__day.is-from:hover, .cal__day.is-to:hover { background: var(--deep); }

.cal__day.is-today::after {
    content: '';
    position: absolute;
    bottom: .28rem;
    width: 4px; height: 4px;
    background: var(--gold);
}
.cal__day.is-from.is-today::after, .cal__day.is-to.is-today::after { background: var(--cream); }

.cal__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: .9rem;
    padding-top: .85rem;
    border-top: 1px solid var(--rule-ink);
}
.cal__hint { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.cal__foot-actions { display: flex; align-items: center; gap: 1rem; }
.cal__link {
    background: none; border: 0; padding: 0;
    font-family: var(--body); font-size: var(--t-small);
    color: var(--ink-soft); cursor: pointer;
    text-decoration: underline; text-underline-offset: .2em;
}
.cal__link:hover { color: var(--blue); }
.cal__done { padding: .55rem 1.1rem; }

@media (max-width: 700px) {
    .cal { left: 0; transform: none; width: 100%; max-width: none; }
    .cal__months { gap: 0; }
    .cal__month + .cal__month { display: none; }
    .cal__grid { width: 100%; }
}

@media (max-width: 560px) {
    .avail__field { flex: 1 1 100%; max-width: none; }
    .avail__go { width: 100%; }
}

/* --- Cookie consent ----------------------------------------------------- */
/* A signboard panel that happens to sit at the foot of the screen, so the ask
   looks like part of the pub rather than like something bolted on by a plugin.
   It only renders at all when there is a measurement ID to consent to.        */

.consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 300;
    background: var(--blue);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -18px 44px rgba(8, 44, 55, .34);
    color: var(--cream);
    transform: translateY(100%);
    transition: transform .5s var(--ease);
}
.consent.is-in { transform: none; }
.consent[hidden] { display: none; }

/* The wallpaper, at the same weight the closing panels use, so the bar reads as
   a signboard rather than a flat strip of colour. */
.consent::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/lj/pattern-gold.svg');
    background-size: 340px 295px;
    opacity: .035;
    pointer-events: none;
}

.consent__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 3rem;
    /* 10px more than the panel rhythm would give, at the owner request:
       the bar sits against the bottom edge of the screen and needs it. */
    padding-block: calc(1.5rem + 10px);
}

.consent__body { flex: 1 1 30rem; min-width: 0; }

.consent__title {
    font-family: var(--display);
    font-size: var(--t-h3);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 .35rem;
    color: var(--gold);
}

.consent__text {
    margin: 0;
    max-width: 64ch;
    font-size: var(--t-small);
    line-height: var(--leading);
    color: var(--cream-soft);
}
.consent__text a { color: var(--cream); text-decoration-color: var(--rule); }
.consent__text a:hover { color: var(--gold); }

/* Both answers the same size, in the same place, in the same order every time.
   Refusing has to be exactly as easy as agreeing. */
.consent__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

@media (max-width: 620px) {
    .consent__inner { padding-block: calc(1.25rem + 10px); }
    .consent__actions { width: 100%; }
    .consent__actions .btn { flex: 1 1 10rem; justify-content: center; }
}

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

/* --- Print ------------------------------------------------------------- */

/* --- 404: "You've wandered off the path" ------------------------------- */
/* A Peak District fingerpost on the signboard. Every arm is a real link and
   points the way it would on the moor, alternating sides of the post.      */

.lost { min-height: min(78vh, 52rem); display: flex; align-items: center; }
.lost__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(3rem, 2rem + 4vw, 6rem);
    align-items: center;
    width: 100%;
}

.lost__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: 0 0 1.1rem;
    color: var(--gold);
    font-size: .82rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.lost__eyebrow span { display: inline-flex; align-items: center; gap: 1.1rem; }
.lost__eyebrow span + span::before {
    content: '';
    width: .34em;
    height: .34em;
    background: var(--gold);
    transform: rotate(45deg);
}

.lost__title {
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem);
    line-height: 1.06;
    letter-spacing: -.012em;
    color: var(--cream);
}

.lost__lead {
    max-width: 34rem;
    margin: 2rem 0 2.6rem;
    font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem);
    line-height: var(--leading-tight);
    color: var(--cream-soft);
}

.fingerpost {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.fingerpost__finial {
    position: relative;
    z-index: 2;
    width: clamp(3.4rem, 2.8rem + 1.6vw, 4.4rem);
    height: auto;
    margin-bottom: -.4rem;
}

.fingerpost__post {
    position: absolute;
    top: 2.5rem;
    bottom: 0;
    left: 50%;
    width: 14px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--gold-dim), var(--gold) 45%, var(--gold-dim));
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(8, 44, 55, .35);
}

.fingerpost__arms {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(.9rem, .6rem + .8vw, 1.3rem);
    width: min(100%, 34rem);
    margin-top: 1.4rem;
}

/* The board. Cream on blue, blue lettering, a gold keyline inset like the
   painted signs, and a pointed end. The square end overlaps the post.       */
.fingerpost__arm {
    --tip: 1.6rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
    width: calc(50% + 1.6rem);
    min-height: 4.6rem;
    padding: .7rem 1.2rem;
    background: var(--cream);
    color: var(--blue);
    text-decoration: none;
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .55);
    transition: transform .35s var(--ease), background-color .35s var(--ease);
}

.fingerpost__arm::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(200, 166, 95, .7);
    pointer-events: none;
}

.fingerpost__arm--right {
    justify-self: start;
    margin-left: calc(50% - 1.6rem);
    padding-right: calc(var(--tip) + 1rem);
    clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
    text-align: left;
}
.fingerpost__arm--right::after {
    clip-path: polygon(0 0, calc(100% - var(--tip) + 4px) 0, 100% 50%, calc(100% - var(--tip) + 4px) 100%, 0 100%);
}

.fingerpost__arm--left {
    justify-self: end;
    margin-right: calc(50% - 1.6rem);
    padding-left: calc(var(--tip) + 1rem);
    clip-path: polygon(var(--tip) 0, 100% 0, 100% 100%, var(--tip) 100%, 0 50%);
    text-align: right;
    align-items: flex-end;
}
.fingerpost__arm--left::after {
    clip-path: polygon(calc(var(--tip) - 4px) 0, 100% 0, 100% 100%, calc(var(--tip) - 4px) 100%, 0 50%);
}

.fingerpost__name {
    font-family: var(--display);
    font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .02em;
}

.fingerpost__note {
    font-size: .92rem;
    line-height: 1.3;
    color: var(--ink-soft);
}

.fingerpost__arm:hover,
.fingerpost__arm:focus-visible { background: #fbf8f0; }
.fingerpost__arm--right:hover,
.fingerpost__arm--right:focus-visible { transform: translateX(6px); }
.fingerpost__arm--left:hover,
.fingerpost__arm--left:focus-visible { transform: translateX(-6px); }
.fingerpost__arm:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Other ways in: a tidy index on paper, each entry waymarked in blue. */
.waymarks {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .35rem var(--gap-grid);
    max-width: 58rem;
    margin: 0 auto;
    padding: 0;
}

.waymarks a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--rule-ink);
    color: var(--blue);
    font-family: var(--display);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color .25s var(--ease), padding-left .3s var(--ease);
}
.waymarks a::before {
    content: '';
    flex: none;
    width: .38em;
    height: .38em;
    background: var(--blue);
    transform: rotate(45deg);
}
.waymarks a::after { content: '\2192'; margin-left: auto; opacity: .5; font-family: var(--body); }
.waymarks a:hover,
.waymarks a:focus-visible { padding-left: .35rem; color: var(--deep); }
.waymarks a:hover::after { opacity: 1; }

.waymarks__tail {
    max-width: 40rem;
    margin: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) auto 0;
    text-align: center;
    color: var(--ink-soft);
}
.waymarks__tail a { color: var(--blue); font-weight: 600; }

@media (max-width: 900px) {
    .lost { min-height: 0; }
    .lost__inner { grid-template-columns: 1fr; }
    .lost__copy { text-align: center; }
    .lost__eyebrow { justify-content: center; }
    .lost__lead { margin-inline: auto; }
    .lost .btn-row { justify-content: center; }
}

@media (max-width: 480px) {
    .fingerpost__arm { --tip: 1.2rem; width: calc(50% + 2.6rem); min-height: 4.2rem; padding-block: .6rem; }
    .fingerpost__arm--right { margin-left: calc(50% - 2.6rem); padding-left: 1rem; }
    .fingerpost__arm--left { margin-right: calc(50% - 2.6rem); padding-right: 1rem; }
    .fingerpost__note { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fingerpost__arm,
    .waymarks a { transition: none; }
    .fingerpost__arm--right:hover,
    .fingerpost__arm--left:hover,
    .fingerpost__arm--right:focus-visible,
    .fingerpost__arm--left:focus-visible { transform: none; }
}


/* --- Christmas -------------------------------------------------------- */
/* The seasonal block under the home hero. The deepest blue with a slow gold
   glow, so it reads as an occasion rather than another section of the page.
   The menu drops open below on a cream sheet, set exactly like /eat.        */

/* Christmas only: a deep wine burgundy in place of the blue, with the gold
   and cream unchanged. The one place the site steps outside its palette, so
   it reads as an occasion: between a rich wine and port. Gold on it
   measures 5.5:1, cream 11.2:1.         */
.xmas {
    --xmas: #641125;
    --xmas-deep: #3a0816;
    --xmas-soft: #dccfc8;
    position: relative;
    isolation: isolate;
    background: radial-gradient(ellipse 90% 80% at 30% 20%, var(--xmas), var(--xmas-deep));
}
.xmas::before { opacity: .06; }

.xmas::after {
    content: '';
    position: absolute;
    inset: clamp(.75rem, 1.6vw, 1.5rem);
    border: 1px solid var(--rule);
    pointer-events: none;
    z-index: 0;
}

/* Out-of-focus fairy lights, drawn in CSS so they cost nothing to load. */
.xmas__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 14%, rgba(232, 200, 120, .55) 0 2px, transparent 3px),
        radial-gradient(circle at 18% 72%, rgba(232, 200, 120, .35) 0 3px, transparent 5px),
        radial-gradient(circle at 31% 9%, rgba(255, 236, 190, .5) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 47% 92%, rgba(232, 200, 120, .4) 0 2px, transparent 4px),
        radial-gradient(circle at 63% 6%, rgba(255, 236, 190, .45) 0 2.5px, transparent 4px),
        radial-gradient(circle at 78% 28%, rgba(232, 200, 120, .3) 0 4px, transparent 7px),
        radial-gradient(circle at 91% 64%, rgba(255, 236, 190, .5) 0 2px, transparent 3px),
        radial-gradient(circle at 96% 12%, rgba(232, 200, 120, .4) 0 3px, transparent 5px),
        radial-gradient(circle at 4% 48%, rgba(255, 236, 190, .35) 0 1.5px, transparent 3px),
        radial-gradient(circle at 86% 88%, rgba(232, 200, 120, .35) 0 3px, transparent 6px),
        radial-gradient(ellipse 60% 50% at 85% 0%, rgba(200, 166, 95, .16), transparent 70%),
        radial-gradient(ellipse 55% 45% at 0% 100%, rgba(200, 166, 95, .12), transparent 70%);
    animation: xmas-twinkle 7s ease-in-out infinite alternate;
}

@keyframes xmas-twinkle {
    from { opacity: .65; }
    to { opacity: 1; }
}

.xmas > .wrap { position: relative; z-index: 1; }

.xmas__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
    align-items: center;
}

.xmas__media { margin: 0; position: relative; }
.xmas__media::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(244, 241, 232, .55);
    pointer-events: none;
}
.xmas__media img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }

.xmas__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: 0 0 1rem;
    color: var(--gold);
    font-size: var(--t-eyebrow, .8rem);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
}
.xmas__eyebrow span { display: inline-flex; align-items: center; gap: 1.1rem; }
.xmas__eyebrow span + span::before {
    content: '';
    width: .34em;
    height: .34em;
    background: var(--gold);
    transform: rotate(45deg);
}

.xmas__title {
    margin: 0 0 1.6rem;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(2.7rem, 1.6rem + 4vw, 5rem);
    line-height: 1.02;
    letter-spacing: -.012em;
    color: var(--cream);
}
.xmas__title em { font-style: italic; color: var(--gold); }

.xmas__copy p { color: var(--xmas-soft); }
/* The small line is a heading, not a paragraph: gold like every other on the site. */
.xmas__copy .xmas__eyebrow { color: var(--gold); }
.xmas__lead {
    font-size: var(--t-lead);
    line-height: var(--leading-tight);
    color: var(--cream) !important;
    margin-top: 0;
}

.xmas__prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 2rem 0 .7rem;
    max-width: 30rem;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.xmas__price {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: .9rem 1.1rem;
    background: var(--xmas-deep);
}
.xmas__price span {
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--xmas-soft);
}
.xmas__price b {
    font-family: var(--display);
    font-size: clamp(1.7rem, 1.4rem + .8vw, 2.2rem);
    font-weight: 500;
    color: var(--gold);
    line-height: 1.1;
}
.xmas__fizz { margin: 0 0 2rem; font-size: var(--t-small); font-style: italic; }

.xmas__actions { margin-bottom: 1.6rem; }

.xmas__toggle { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; background: transparent; }
.xmas__chev { flex: none; width: .8rem; height: .55rem; transition: transform .45s var(--ease); }
.xmas__toggle[aria-expanded="true"] .xmas__chev { transform: rotate(180deg); }

.xmas__note {
    max-width: 36rem;
    margin: 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--rule);
    font-size: var(--t-small);
}
.xmas__note a { color: var(--gold); }

/* The drawer. Grid rows animate from 0fr to 1fr, which eases the real height
   in and out without measuring it. Opacity and a short lift ride along.    */
.xmas__drawer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-.75rem);
    transition:
        grid-template-rows .75s var(--ease),
        opacity .5s var(--ease),
        transform .75s var(--ease),
        margin-top .75s var(--ease);
}
.xmas__drawer.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.xmas__drawer.no-anim { transition: none; }
.xmas__drawer-inner { min-height: 0; overflow: hidden; }

.xmas__sheet {
    position: relative;
    max-width: 58rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.25rem, .5rem + 4vw, 4.5rem);
    background: var(--cream);
    color: var(--ink);
}
.xmas__sheet::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(200, 166, 95, .55);
    pointer-events: none;
}

/* Paper colours inside the deep panel, so the sheet reads exactly like /eat. */
.xmas__sheet .plate__eyebrow { color: var(--blue); }
.xmas__sheet .plate__eyebrow::before,
.xmas__sheet .plate__eyebrow::after { background: var(--rule-ink); }
.xmas__sheet .plate__title { color: var(--blue); }
.xmas__sheet .plate__lead { color: var(--ink-soft); }
.xmas__sheet .listing__head { border-bottom-color: var(--rule-ink); }
.xmas__sheet .listing__title { color: var(--blue); }
.xmas__sheet .listing__note,
.xmas__sheet .listing__intro,
.xmas__sheet .listing__desc { color: var(--ink-soft); }
.xmas__sheet .listing__tag { color: var(--blue); border-color: var(--rule-ink); }
.xmas__sheet .listing__name { color: var(--ink); }
.xmas__sheet .listing__price { color: var(--blue); }
.xmas__sheet .btn--blue { background: var(--xmas); border-color: var(--xmas); }
.xmas__sheet .btn--blue:hover { background: var(--xmas-deep); border-color: var(--xmas-deep); }

@media (max-width: 900px) {
    /* minmax(0, 1fr), not 1fr: a plain 1fr column grows to its widest child,
       which pushed the whole section past the page's side margins. */
    .xmas__grid { grid-template-columns: minmax(0, 1fr); }
    .xmas__media { max-width: 34rem; margin-inline: auto; width: 100%; }
    .xmas__media .ph { aspect-ratio: 4 / 3 !important; }
}

@media (max-width: 480px) {
    .xmas__eyebrow { letter-spacing: .16em; gap: .35rem .7rem; }
    .xmas__eyebrow span { gap: .7rem; }
    .xmas__prices { grid-template-columns: 1fr 1fr; }
    .xmas__price { padding: .75rem .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .xmas__glow { animation: none; }
    .xmas__drawer,
    .xmas__chev { transition: none; }
}


/* Christmas menu card finishes. Same layout as /eat; only the ink changes.
   --card : cream paper printed in port, gold foil double rule, corner rosettes.
   --dark : the printed menu's look, a deep port card with gold headings.     */
.xmas__sheet--card::after,
.xmas__sheet--dark::after { inset: 9px; border: 3px double rgba(200, 166, 95, .8); }
.xmas__sheet--card::before,
.xmas__sheet--dark::before {
    content: '';
    position: absolute;
    inset: 22px;
    pointer-events: none;
    background:
        url('/assets/lj/mark-gold.svg') left top / 33px no-repeat,
        url('/assets/lj/mark-gold.svg') right top / 33px no-repeat,
        url('/assets/lj/mark-gold.svg') left bottom / 33px no-repeat,
        url('/assets/lj/mark-gold.svg') right bottom / 33px no-repeat;
    opacity: .9;
}

.xmas__sheet--card .plate__eyebrow,
.xmas__sheet--card .plate__title,
.xmas__sheet--card .listing__title,
.xmas__sheet--card .listing__price,
.xmas__sheet--card .listing-key b { color: var(--xmas); }
.xmas__sheet--card .plate__eyebrow::before,
.xmas__sheet--card .plate__eyebrow::after { background: rgba(200, 166, 95, .7); }
.xmas__sheet--card .listing__title { font-style: italic; }
.xmas__sheet--card .listing__head { border-bottom: 3px double rgba(200, 166, 95, .7); }
.xmas__sheet--card .listing__tag { color: var(--xmas); border-color: rgba(100, 17, 37, .3); }

.xmas__sheet--dark {
    background: linear-gradient(180deg, #2c0711, #22050d);
    color: var(--cream);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.xmas__sheet--dark .plate__eyebrow,
.xmas__sheet--dark .listing__title,
.xmas__sheet--dark .listing__price,
.xmas__sheet--dark .listing-key b { color: var(--gold); }
.xmas__sheet--dark .plate__eyebrow::before,
.xmas__sheet--dark .plate__eyebrow::after { background: var(--rule); }
.xmas__sheet--dark .plate__title,
.xmas__sheet--dark .listing__name { color: var(--cream); }
.xmas__sheet--dark .plate__lead,
.xmas__sheet--dark .listing__note,
.xmas__sheet--dark .listing__intro,
.xmas__sheet--dark .listing__desc,
.xmas__sheet--dark .listing-key { color: var(--xmas-soft); }
.xmas__sheet--dark .listing__head { border-bottom: 3px double var(--rule); }
.xmas__sheet--dark .listing__tag { color: var(--gold); border-color: var(--rule); }
.xmas__sheet--dark .listing-key { border-color: var(--rule); }
.xmas__sheet--dark .btn--blue { background: var(--gold); border-color: var(--gold); color: var(--deep); }
.xmas__sheet--dark .btn--blue:hover { background: #d5b675; border-color: #d5b675; }

/* On a phone the two Christmas buttons share one line: the toggle drops "the"
   and both take a little less padding and tracking (never a smaller size),
   the toggle taking whatever width is left. */
@media (max-width: 600px) {
    .xmas__actions { flex-wrap: nowrap; gap: .45rem; }
    .xmas__actions .btn {
        padding-inline: .7rem;
        letter-spacing: .05em;
        white-space: nowrap;
    }
    .xmas__toggle { flex: 1; justify-content: center; gap: .45rem; }
    .xmas__the { display: none; }

    /* The panel's gold keyline crowds a phone screen; the card keeps its own. */
    .xmas::after { display: none; }
}

/* Phones up to 400px lose the arrow to make room. Below 350px (the first iPhone
   SE) the two cannot share a line at full size, so they stack, full width. */
@media (max-width: 400px) {
    .xmas__actions .btn { padding-inline: .6rem; }
    .xmas__chev { display: none; }
}
@media (max-width: 350px) {
    .xmas__actions { flex-wrap: wrap; }
    .xmas__actions .btn { width: 100%; justify-content: center; }
}

/* On a phone the corner rosettes would crowd the small line at the top and the
   button at the foot; give both ends room to clear them. */
@media (max-width: 600px) {
    .xmas__sheet--card,
    .xmas__sheet--dark { padding-top: 4.5rem; padding-bottom: 5.75rem; }
}


@media print {
    .hdr, .drawer, .doors, .band, .crossover, .hero__actions, .btn-row, .consent { display: none !important; }
    body { background: #fff; color: #000; }
    .panel--sign, .panel--deep { background: #fff !important; color: #000 !important; }
    .panel--sign::before, .panel--deep::before, .ftr::before { display: none; }
}