/* WHELAN'S PUBS - the stylesheet every venue page shares (whelans.js is its
   script). Hand-written since 2026-09-19; until then this was the inline
   <style> of a template the NomNom server rendered per pub, which is why the
   notes below talk about "the New Inn page" when they give measured ratios.
   The hub (../index.html) and Grace's holding page keep their own styles.
   The page is published as authored (launched.txt), so everything here is
   readable in the browser - keep comments to design reasoning. */
:root{
  /* THE GROUP'S OWN COLOURS. Their page is black bars top and bottom, white and
     light-grey bands between, and one accent used on every link and rule:
     rgb(194,190,88), an olive gold. That gold is --gold here, exactly. The
     black is theirs too. Everything else is a step of one of those.

     The gold is a NON-TEXT colour on light grounds (1.9:1 on white) and a very
     good text colour on black (10.1:1) — so it is used raw on the dark bands
     and for rules, dots and borders on the light ones, and its darkened twin
     --gold-deep carries small text on light. Keep the split.

     Ratios below are MEASURED on the New Inn page, not guessed — keep them
     accurate if a colour ever moves.
       --ink on #fff ................. 17.4:1   (--paper: 15.4:1)
       --soft on #fff .................  6.8:1   (--paper:  6.1:1)
       --gold-deep on #fff ............  5.6:1   (--paper:  5.05:1)
       --cream on --black ............. 17.2:1   (--black-2: 15.8:1)
       --gold on --black .............. 10.1:1   (--black-2:  9.3:1)
       --black on --gold (buttons) .... 10.1:1
       --cream on --black-3 (footer) .. 17.5:1                                */
  --black:#0B0B0B;        /* THEIRS - nav, hero panel, dark bands */
  --black-2:#161616;      /* cards on the dark bands */
  --black-3:#080808;      /* footer */
  --gold:#C2BE58;         /* THEIRS, exactly - rgb(194,190,88) */
  --gold-2:#D3CF6C;       /* button hover */
  --gold-deep:#6E6A1E;    /* small text and eyebrows on light */
  --paper:#F3F3F1;        /* alternate band; theirs is #F3F3F3, warmed a hair */
  --white:#FFFFFF;
  --cream:#F2F0E6;        /* text on the dark bands */
  --ink:#151515;          /* body and headings on light */
  --soft:#5B5B57;         /* secondary copy on light */
  --line:rgba(21,21,21,.14);
  --line-dark:rgba(242,240,230,.14);
  --gold-line:rgba(194,190,88,.45);
  --display:'Della Respira',Copperplate,'Copperplate Gothic Light',Georgia,serif;
  --body:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
  --navh:64px;            /* rewritten from JS with the bar's real height */
  --ease:cubic-bezier(.2,.7,.2,1);
  /* THE HERO PHOTOGRAPH'S CEILING, shared by settle and heroDrift so the two
     cannot drift apart. It is a ceiling and not a taste setting: several pubs
     have a hero far smaller than the panel it fills (the College Arms is
     500x375, already upscaled about 1.9x before any zoom), so the rule is that
     the page NEVER paints the hero larger than it already did on load. Raise
     this and every venue's photograph gets softer, the smallest ones visibly. */
  --hero-zoom:1.07;
  --hero-drift:14s;       /* ONE pass; it alternates, so a round trip is 28s */
  /* THE ONE ORNAMENT: the small gold diamond from the hero rule, as an SVG data
     URI so eyebrows, menu headings and seams can all wear it with no markup. */
  --diamond:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M4%200%208%204%204%208%200%204z'%20fill='%23C2BE58'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-deep)}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
body > section{padding:clamp(3.4rem,7vw,6rem) 0}
body > section[id]{scroll-margin-top:calc(var(--navh) + 1rem)}

body > section,.footer{position:relative}
body > section::before{content:"";position:absolute;left:50%;top:0;
  width:min(240px,44vw);height:1px;transform:translate(-50%,-.5px);pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 42%,transparent 42%,
    transparent 58%,var(--gold) 58%,var(--gold) 82%,transparent)}
body > section::after,.footer::after{content:"";position:absolute;left:50%;top:0;width:8px;height:8px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--gold);pointer-events:none;z-index:2}

h2{font-family:var(--display);font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;font-size:clamp(1.7rem,3.9vw,2.6rem);
  line-height:1.14;margin:0 0 1rem;text-wrap:balance;max-width:26ch}
h3{font-family:var(--display);font-weight:400;letter-spacing:.05em;
  text-transform:uppercase;font-size:1.05rem;line-height:1.35;margin:0 0 .5rem}
p{margin:0 0 1.1rem}

.eyebrow{display:flex;align-items:center;gap:.7rem;font-size:.66rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);
  font-weight:700;margin:0 0 .8rem}
.eyebrow::before{content:"";width:38px;height:7px;flex:0 0 auto;
  background:var(--diamond) right center/7px 7px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 50%/28px 1px no-repeat}
.on-dark .eyebrow{color:var(--gold)}
.lead{font-size:1.08rem;color:var(--soft);max-width:62ch;text-wrap:pretty}
.on-dark .lead{color:rgba(242,240,230,.86)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.7rem;border-radius:2px;text-decoration:none;font-weight:700;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--body);border:1px solid transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,
    box-shadow .25s ease,transform .25s var(--ease)}
.btn-primary{background:var(--gold);color:var(--black);border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-2);border-color:var(--gold-2);
  box-shadow:0 10px 26px -12px rgba(194,190,88,.85);transform:translateY(-1px)}
.btn-ghost{border-color:rgba(242,240,230,.5);color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(194,190,88,.06)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* Every button LIFTS 2px under the pointer (the house set). Pointer devices
   only, never under reduced motion. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-2px)}
}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.nav{position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(11,11,11,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(194,190,88,.18);transition:border-color .3s ease}
.nav.stuck{border-bottom-color:rgba(194,190,88,.4)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  gap:1.4rem;padding:.8rem 0;transition:padding .3s var(--ease)}
.nav.stuck .nav-inner{padding:.5rem 0}
.nav-mark{display:flex;flex-direction:column;line-height:1;text-decoration:none;
  color:var(--cream)}
.nav-mark b{font-family:var(--display);font-weight:400;font-size:1.02rem;
  letter-spacing:.18em;text-transform:uppercase;transition:font-size .3s var(--ease)}
.nav.stuck .nav-mark b{font-size:.94rem}
.nav-mark span{font-size:.54rem;letter-spacing:.32em;text-transform:uppercase;
  margin-top:.34rem;color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:1.7rem;list-style:none;
  margin:0;padding:0}
.nav-links a{position:relative;color:var(--cream);text-decoration:none;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.9;
  padding-bottom:3px}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a:not(.btn):hover::after,.nav-links a.is-here::after{transform:scaleX(1)}
.nav.stuck .nav-links a{color:var(--cream)}
.nav-inner > .btn{padding:.8rem 1.4rem}
.ham{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.ham span{display:block;width:24px;height:2px;background:var(--gold);margin:5px 0}
.nav-book{display:none}

.hero{position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  min-height:min(92vh,820px);background:var(--black);color:var(--cream)}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:calc(4.6rem + 3vw) clamp(1.25rem,5vw,4.5rem) clamp(2.6rem,5vw,4rem)
    max(1.25rem,calc((100vw - var(--wrap)) / 2))}
.hero-kicker{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 1.4rem}
.hero-mark{font-family:var(--display);color:var(--cream);margin:0;
  font-size:clamp(2.7rem,6.6vw,5.3rem);line-height:.98;letter-spacing:.06em;
  text-transform:uppercase}
.hero-the{display:block;font-family:var(--body);font-weight:700;color:var(--gold);
  font-size:clamp(.66rem,1.5vw,.8rem);letter-spacing:.5em;margin:0 0 .55rem .1em}
.hero-by{display:block;font-family:var(--body);font-weight:700;
  font-size:clamp(.66rem,1.5vw,.8rem);letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);margin-top:1.15rem}
.hero-rule{display:flex;align-items:center;gap:.8rem;margin:1.9rem 0}
.hero-rule::before,.hero-rule::after{content:"";height:1px;background:var(--gold);flex:0 0 auto}
.hero-rule::before{width:56px}
.hero-rule::after{width:14px}
.hero-rule i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);display:block}
.hero-tag{color:var(--cream);font-weight:300;
  font-size:clamp(1.06rem,2.2vw,1.36rem);line-height:1.5;max-width:36ch;
  margin:0 0 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.hero-cta .btn{padding:1rem 1.9rem;font-size:.78rem}
.status{text-wrap:balance;display:inline-flex;align-items:center;gap:.6rem;color:var(--cream);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  margin:1.7rem 0 0;padding:.5rem .95rem .5rem .8rem;
  border:1px solid rgba(194,190,88,.4);border-radius:999px;align-self:flex-start}
.dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.dot:not(.off)::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--gold);animation:pulse 2.4s ease-out infinite}
.dot.off{background:rgba(242,240,230,.45)}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.hero-photo{position:relative;min-height:420px;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 40%;transform-origin:50% 40%}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,#0B0B0B 0,rgba(11,11,11,.55) 5%,rgba(11,11,11,0) 20%),
    linear-gradient(180deg,rgba(11,11,11,.28) 0,rgba(11,11,11,0) 16%),
    linear-gradient(0deg,rgba(11,11,11,.4) 0,rgba(11,11,11,0) 26%)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes settle{from{transform:scale(var(--hero-zoom))}to{transform:scale(1)}}
/* The continuous drift, in and out between the same two values settle moves
   through. ALTERNATE rather than a rewind: with one photograph there is nothing
   to cut to, so it breathes instead of snapping back.

   EASE-IN-OUT, and this is the opposite of the Rafferty's hero on purpose.
   There each frame fades out at its widest and never reverses, so linear is
   right; here the direction turns at both ends, and linear reverses velocity
   instantly and reads as a bounce. Easing holds it still for a moment at each
   extreme, which is what makes it read as drift rather than as a loop. */
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(var(--hero-zoom))}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.hero-copy > *{animation:rise .8s var(--ease) both}
.hero-copy > .hero-kicker{animation-delay:.12s}
.hero-copy > .hero-mark{animation-delay:.24s}
.hero-copy > .hero-rule{animation-delay:.4s}
.hero-copy > .hero-tag{animation-delay:.52s}
.hero-copy > .hero-cta{animation-delay:.64s}
.hero-copy > .status{animation-delay:.8s}
.hero-rule::before{transform-origin:right center;animation:draw .7s .5s var(--ease) both}
.hero-rule::after{transform-origin:left center;animation:draw .7s .5s var(--ease) both}
/* THREE ANIMATIONS, AND THE THIRD IS SEPARATED IN TIME, NOT LAYERED. Two
   animations cannot both drive transform on one element - the LAST one listed
   wins outright for as long as it is in effect - so settle and heroDrift never
   overlap: heroDrift is delayed by exactly settle's own duration and has no
   backwards fill, so it contributes nothing until settle has finished and then
   takes over from the scale(1) settle leaves behind. THE 3s IS SETTLE'S
   DURATION, TWICE. Change one and the other must follow, or the entrance is
   either cut short or the photograph sits still past the end of it.

   Under prefers-reduced-motion the sheet kills every animation and transform
   goes unset - scale 1, the photograph visible and still, exactly as today.
   That is the template rule about starting values living inside the keyframes;
   nothing here sets a transform outside them. */
.hero-photo > img{animation:fadein 1.1s ease-out both,settle 3s var(--ease) both,
  heroDrift var(--hero-drift) 3s ease-in-out infinite alternate}

/* ---------- THE SLIDESHOW: several photographs, crossfaded, zooming and panning ----------
   Added 2026-09-19 - the house effect every site carries (sites/CLAUDE.md,
   "The house effects"). A pub with one photograph worth showing keeps the
   lone <img> and the settle/heroDrift pair above; a pub with more carries
   <div class="hero-frames" data-n="N"> instead, one <picture> per frame, the
   first being the photograph the page always led with (it is the LCP, and
   the still frame under reduced motion).

   THIS HERO IS A PANE, NOT A FULL-BLEED BACKGROUND, so it moves further than
   the house default: edge speed scales with the box, and the house 1.12 in a
   half-width pane crawled at a few px/s. --kz 1.18 with pans that grow from
   zero (bounded by (s-1)/(2s), 7.6% at 1.18) keeps the edges moving at a
   pace that reads as motion - MEASURED with tools/hero-measure.js heroMotion
   on '.hero-photo', see ./CLAUDE.md. A frame whose file is already upscaled
   in the pane takes a gentler --kz on its <picture> (the ceiling rule this
   template always kept for the College Arms).

   No text sits on the photograph except, on a phone, the foot of the copy
   (.hero-copy's negative margin), which the pane's own ::before fade carries.
   The frames sit at z-index 0, UNDER that fade.

   TIMING BY FRAME COUNT, from data-n (the page sets it; there is no script):
   the cycle is about 7.5s a frame, each frame is up for 100/N % of it and
   fades six points later, and the delays are cycle x -(0.06 + (N-n)/N) -
   the (N-n) is not a typo, n/N plays them in reverse. :nth-child, not
   classes, so nothing has to be named per page. */
.hero-frames{position:absolute;inset:0;z-index:0;overflow:hidden;
  animation:fadein 1.1s ease-out both}
.hero-frames > picture{position:absolute;inset:0;display:block;opacity:0;
  will-change:transform,opacity;
  animation:heroKen4 var(--hero-cycle) linear infinite;
  animation-delay:calc(var(--hero-cycle) * -0.06)}
/* THE STILL FRAME: under reduced motion the sheet kills every animation and
   this is what is left - the photograph the page always led with. */
.hero-frames > picture:first-child{opacity:1}
.hero-frames img{object-position:var(--fx,50%) var(--fy,40%)}
.hero-frames > picture:nth-child(1){--px:2.6%;--py:.8%}
.hero-frames > picture:nth-child(2){--px:-2.8%;--py:.6%}
.hero-frames > picture:nth-child(3){--px:2.6%;--py:-.8%}
.hero-frames > picture:nth-child(4){--px:-2.4%;--py:.8%}
/* ON A PHONE the pane is a 4:3 box the width of the screen - about 375x281 -
   and edge speed scales with the box, so the same move would crawl at 5-6px/s.
   It zooms further and pans twice as far there. !important because a frame's
   gentler --kz is set on the <picture> itself, and on a box this small no
   file is enlarged, so the ceiling it protects does not apply. The pan bound
   at 1.24 is 9.7%; the largest pan here is 5.6%. */
@media(max-width:600px){
  .hero-frames > picture{--kz:1.24!important;--pm:2}
}
.hero-frames[data-n="4"]{--hero-cycle:30s}
.hero-frames[data-n="4"] > picture:nth-child(2){animation-delay:calc(var(--hero-cycle) * -0.81)}
.hero-frames[data-n="4"] > picture:nth-child(3){animation-delay:calc(var(--hero-cycle) * -0.56)}
.hero-frames[data-n="4"] > picture:nth-child(4){animation-delay:calc(var(--hero-cycle) * -0.31)}
.hero-frames[data-n="3"]{--hero-cycle:24s}
.hero-frames[data-n="3"] > picture{animation-name:heroKen3}
.hero-frames[data-n="3"] > picture:nth-child(2){animation-delay:calc(var(--hero-cycle) * -0.7267)}
.hero-frames[data-n="3"] > picture:nth-child(3){animation-delay:calc(var(--hero-cycle) * -0.3933)}
.hero-frames[data-n="2"]{--hero-cycle:16s}
.hero-frames[data-n="2"] > picture{animation-name:heroKen2}
.hero-frames[data-n="2"] > picture:nth-child(2){animation-delay:calc(var(--hero-cycle) * -0.56)}
/* Linear on purpose - eased, a Ken Burns move reads as stopping and starting.
   The rewind to scale 1 happens while the frame is invisible. */
@keyframes heroKen4{
  0%   {opacity:0;transform:scale(1) translate(0,0)}
  6%   {opacity:1}
  25%  {opacity:1}
  31%  {opacity:0;transform:scale(var(--kz,1.18)) translate(calc(var(--px,0%) * var(--pm,1)),calc(var(--py,0%) * var(--pm,1)))}
  50%  {transform:scale(1) translate(0,0)}
  100% {opacity:0;transform:scale(1) translate(0,0)}
}
@keyframes heroKen3{
  0%     {opacity:0;transform:scale(1) translate(0,0)}
  6%     {opacity:1}
  33.33% {opacity:1}
  39.33% {opacity:0;transform:scale(var(--kz,1.18)) translate(calc(var(--px,0%) * var(--pm,1)),calc(var(--py,0%) * var(--pm,1)))}
  60%    {transform:scale(1) translate(0,0)}
  100%   {opacity:0;transform:scale(1) translate(0,0)}
}
@keyframes heroKen2{
  0%   {opacity:0;transform:scale(1) translate(0,0)}
  6%   {opacity:1}
  50%  {opacity:1}
  56%  {opacity:0;transform:scale(var(--kz,1.18)) translate(calc(var(--px,0%) * var(--pm,1)),calc(var(--py,0%) * var(--pm,1)))}
  78%  {transform:scale(1) translate(0,0)}
  100% {opacity:0;transform:scale(1) translate(0,0)}
}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

.story{background:var(--white)}
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(2rem,5vw,4.2rem);align-items:center}
.story-figure{position:relative}
.story-figure img{border-radius:2px}
.est{position:absolute;right:-14px;bottom:-22px;background:var(--black);
  color:var(--cream);padding:1rem 1.3rem;text-align:center;
  border:1px solid rgba(194,190,88,.5);z-index:2}
.est b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1;
  color:var(--gold);letter-spacing:.06em}
.est span{display:block;font-size:.54rem;letter-spacing:.28em;
  text-transform:uppercase;margin-top:.4rem}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.facts div b{display:block;font-family:var(--display);font-size:.9rem;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.2rem}
.facts div span{font-size:.85rem;color:var(--soft);line-height:1.45;display:block}
.dress{margin-top:1.6rem;font-size:.9rem;color:var(--soft);
  border-left:2px solid var(--gold);padding:.6rem 1rem;background:var(--paper)}
.dress strong{color:var(--ink);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem}

.food{background:var(--paper)}
.food-grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem);align-items:start}
.food-shots{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.food-shots figure{margin:0;min-width:0}
.food-shots figure{background:var(--white);padding:6px;overflow:hidden;
  box-shadow:0 18px 40px -30px rgba(11,11,11,.55)}
.food-shots img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;border-radius:1px}
.food-shots figure:first-child{grid-column:span 2}
.food-shots figure:first-child img{aspect-ratio:2/1}
.times{list-style:none;margin:1.6rem 0 0;padding:0;border-top:2px solid var(--gold);max-width:26rem}
.times li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.96rem}
.times li b{font-family:var(--display);font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;font-size:.9rem}
.times li span{font-variant-numeric:tabular-nums}
.tags{display:flex;flex-wrap:wrap;gap:.35rem 0;margin:1.5rem 0 0;padding:0;list-style:none}
.tags li{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--gold-deep);display:flex;align-items:center}
.tags li + li::before{content:"";width:5px;height:5px;background:var(--gold);
  transform:rotate(45deg);margin:0 .8rem;flex:0 0 auto}

.menus{background:var(--paper)}
.msearch{position:relative;display:flex;align-items:center;gap:1rem;margin:1.8rem 0 0;max-width:600px}
.msearch::before{content:"";position:absolute;left:1rem;top:50%;width:14px;height:14px;
  transform:translateY(-50%);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236E6A1E'%20stroke-width='2.2'%20stroke-linecap='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M20%2020l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.msearch-in{flex:1;min-width:0;font:inherit;font-size:.98rem;padding:.85rem 1rem .85rem 2.6rem;
  border:1px solid var(--line);border-radius:2px;background:var(--white);color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease}
.msearch-in::placeholder{color:var(--soft)}
.msearch-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,190,88,.35)}
.msearch-count{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);white-space:nowrap}
.menus.is-searching .mitem{opacity:.28;transition:opacity .25s ease}
.menus.is-searching .mitem.hit{opacity:1}
.menus.is-searching .mgroup.nohit{display:none}
.mtab .mhits{display:inline-block;min-width:1.5em;margin-left:.5em;padding:.05em .4em;
  border-radius:2px;background:var(--gold);color:var(--black);font-family:var(--body);
  font-size:.62rem;font-weight:700;letter-spacing:0;vertical-align:.15em}
.mtab .mhits:empty{display:none}
.menu-tabs{position:sticky;top:var(--navh);z-index:5;display:flex;flex-wrap:wrap;gap:0 2.2rem;
  margin:1.6rem 0 2rem;padding:.2rem 0 0;border-bottom:1px solid var(--line);
  background:var(--paper)}
.mtab{position:relative;appearance:none;font-family:var(--display);font-weight:400;font-size:.92rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.95rem 0 .85rem;
  border:0;background:transparent;color:var(--soft);cursor:pointer;min-height:44px;
  transition:color .2s ease}
.mtab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.mtab:hover{color:var(--ink)}
.mtab.is-on{color:var(--ink)}
.mtab.is-on::after{transform:scaleX(1)}
.mtab:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
/* Match the VALUE (2026-09-23): whelans.js shuts panels with hidden="until-found"
   so find-in-page reaches a dish on a shut tab, and a bare [hidden] rule put
   display:none straight back - no pub's closed menus could be searched. An
   until-found panel is content-visibility:hidden (searchable, not drawn) but it
   keeps its BOX, and this panel is a card: without the second rule every shut
   tab would draw an empty bordered, shadowed card. Its animation goes too, so
   the settle-in still plays as the panel opens. */
.mpanel[hidden]:not([hidden="until-found" i]){display:none}
.mpanel[hidden="until-found" i]{padding:0;border:0;background:none;box-shadow:none;animation:none}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mpanel{position:relative;background-color:var(--white);
  background-image:var(--diamond),var(--diamond),var(--diamond),var(--diamond);
  background-repeat:no-repeat;background-size:8px 8px;
  background-position:14px 14px,calc(100% - 14px) 14px,14px calc(100% - 14px),calc(100% - 14px) calc(100% - 14px);
  border:1px solid rgba(194,190,88,.55);
  padding:clamp(1.6rem,4.5vw,3.2rem) clamp(1.1rem,4vw,3rem);
  box-shadow:0 30px 60px -44px rgba(11,11,11,.5);
  animation:panelIn .38s var(--ease) both}
.mhead{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
  margin-bottom:.6rem}
.mhead h3{margin:0;font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:.14em}
.mhead .msub{display:flex;align-items:center;gap:.7rem;font-size:.64rem;letter-spacing:.32em;
  text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.mhead .msub::before,.mhead .msub::after{content:"";width:26px;height:1px;background:var(--gold)}
.msub{color:var(--soft);font-size:.95rem;margin:0 0 1.8rem;max-width:66ch}
.mpanel > .msub{text-align:center;margin:0 auto 2.4rem;font-style:italic;font-size:1rem}
.mgroup{margin-bottom:2.4rem}
.mgroup > h4{display:flex;align-items:center;gap:.8rem;font-family:var(--display);font-weight:400;
  font-size:.98rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 1rem}
.mgroup > h4::before{content:"";width:7px;height:7px;flex:0 0 auto;background:var(--gold);
  transform:rotate(45deg)}
.mgroup > h4::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,var(--gold),rgba(194,190,88,0))}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 2.8rem;
  list-style:none;margin:0;padding:0}
.mlist.one{grid-template-columns:1fr;max-width:640px}
.mitem{padding:.7rem 0;border-bottom:1px solid rgba(21,21,21,.07);font-size:.96rem;line-height:1.5}
.mrow{display:flex;align-items:baseline;justify-content:flex-start;gap:0}
.mname{order:1;flex:0 1 auto;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  font-size:.88rem;color:var(--ink)}
.mrow::after{content:"";order:2;flex:1 1 1.5rem;min-width:1.5rem;margin:0 .55rem .3em;
  align-self:flex-end;border-bottom:1px dotted rgba(110,106,30,.55)}
/* A PRICE MAY SHRINK AND WRAP (2026-09-19). It was flex:0 0 auto, so a
   multi-price line - "£9.95 chicken / £11.95 prawn / £9.50 vegetable + tofu /
   £9.95 beef" on Uxbridge - could not shrink, forced its row to 479px, and
   widened the whole page to 612px on a 375px phone: the fixed bar grew with
   it and the burger slid off the screen. Found by the house-effects sweep;
   the rendered original had it too. A short price is unchanged. */
.mprice{order:3;flex:0 1 auto;min-width:0;text-align:right;font-family:var(--display);font-weight:400;font-size:1rem;
  letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.mrow:not(:has(.mprice))::after{display:none}
.mdesc{display:block;font-size:.88rem;color:var(--soft);font-weight:300;line-height:1.5}
.mopt{display:block;font-size:.8rem;color:var(--gold-deep);font-weight:700;margin-top:.15rem}
.veg{display:inline-block;font-size:.58rem;letter-spacing:.1em;font-weight:700;
  color:var(--gold-deep);border:1px solid var(--gold);padding:.1rem .38rem;
  border-radius:999px;margin-left:.45rem;vertical-align:.12em}
.mnote{position:relative;display:block;font-style:italic;font-size:.9rem;color:var(--soft);
  margin:0 0 1.3rem;text-align:center;padding:0 76px;max-width:66ch;margin-inline:auto}
.mnote::before,.mnote::after{content:"";position:absolute;top:.8em;width:60px;height:1px;background:var(--gold)}
.mnote::before{left:0}
.mnote::after{right:0}
.mnote strong{color:var(--ink);font-style:normal}
.mprice-set{font-family:var(--display);font-style:normal;font-size:1.15rem;color:var(--ink);
  letter-spacing:.04em;margin-left:.4rem}

.sport{background:var(--black);color:var(--cream);overflow-x:clip}
.sport h2{color:var(--cream)}
.sport-grid{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4rem);align-items:center}
.sport-figure{position:relative;margin:0;overflow:hidden;border-radius:2px}
.sport-figure img{width:100%;height:100%;object-fit:cover}
.sport-figure figcaption{position:absolute;left:1rem;bottom:1rem;z-index:2;color:var(--gold);
  background:var(--black);border:1px solid rgba(194,190,88,.55);padding:.5rem .8rem;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700}
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
.scard{position:relative;overflow:hidden;background:var(--black-2);padding:1.5rem 1.35rem;
  border:1px solid var(--line-dark);border-top:2px solid var(--gold);
  transition:transform .35s var(--ease),border-color .35s ease}
.scard:hover{transform:translateY(-4px);border-color:rgba(194,190,88,.35);border-top-color:var(--gold)}
.scard::before{content:attr(data-n) / "";position:absolute;right:.7rem;top:.2rem;
  font-family:var(--display);font-size:3.2rem;line-height:1;color:rgba(194,190,88,.1);pointer-events:none}
.scard h3{display:flex;align-items:center;gap:.6rem;color:var(--gold);font-size:.9rem;margin-bottom:.6rem}
.scard h3::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:0 0 auto}
.scard p{color:rgba(242,240,230,.84);font-size:.9rem;margin:0}
.snote{margin:1.6rem 0 0;font-size:.9rem;color:rgba(242,240,230,.72);max-width:70ch}
/* auto-fit, NOT a fixed 1fr 1fr: dropping the "watch our socials" placeholder
   cards (2026-09-02) left several pubs with a single card, which in a fixed
   two-column grid sat in the left half of a full-width bordered box looking
   like something had failed to load. Counts here are 1, 2 or 4, all of which
   fill their rows at this track size. */
.music{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:1.4rem;background:var(--black-2);
  border:1px solid rgba(194,190,88,.35)}
/* FOLLOW US FOR WHAT'S ON. Sits under the music cards, on the dark sport
   band. Deliberately NOT a second .music card: it is the one control in this
   band, so it reads as an action rather than a fourth fact. The buttons are
   the gold pill the rest of the site uses for a primary action, and they
   carry the 44px floor because on a phone this is the only thing here to
   tap. Contrast, measured on --black-2: gold fill #C2BE58 with --black text
   is 10.1:1; the lead paragraph at rgba(242,240,230,.84) is 12.4:1. */
.ent-follow{margin-top:1.4rem;padding:1.25rem 1.5rem;background:var(--black-2);
  border:1px solid rgba(194,190,88,.35)}
/* Butt it against the cards ONLY when there are cards. The Spread Eagle's
   single card was the "keep an eye on our socials" placeholder this band
   replaces, so it now has none - and an unconditional border-top:0 would
   leave its follow band open along the top edge. */
.music + .ent-follow{margin-top:0;border-top:0}
.ent-follow-lead{margin:0 0 1rem;color:rgba(242,240,230,.84);font-size:.95rem;line-height:1.6}
.ent-follow-links{display:flex;flex-wrap:wrap;gap:.7rem}
.ent-social{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 1.4rem;background:var(--gold);color:var(--black);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  text-decoration:none;border-radius:999px;transition:background .3s ease}
.ent-social:hover{background:var(--gold-2)}
.mcard{padding:1.5rem 1.5rem 1.4rem}
.mcard + .mcard{border-left:1px solid rgba(194,190,88,.35)}
.mcard b{display:flex;align-items:center;gap:.6rem;font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:.55rem}
.mcard b::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.mcard p{color:var(--cream);font-family:var(--display);font-size:1.15rem;line-height:1.35;margin:0}

.func{background:var(--paper)}
.func-hero{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;margin-bottom:2.6rem}
.func-hero img{border-radius:2px}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.room{position:relative;background:var(--white);border:1px solid var(--line);padding:2rem 1.5rem 1.7rem;
  border-top:3px solid var(--gold);transition:transform .35s var(--ease),box-shadow .35s ease}
.room:hover{transform:translateY(-4px);box-shadow:0 26px 50px -36px rgba(11,11,11,.5)}
.room::before{content:"";position:absolute;left:50%;top:-3px;width:9px;height:9px;background:var(--gold);
  transform:translate(-50%,-50%) rotate(45deg)}
.room .num{font-family:var(--display);font-size:3.6rem;line-height:1;
  color:var(--ink);letter-spacing:.02em;display:block;margin-bottom:.35rem;font-variant-numeric:tabular-nums}
.room .num .cnt{display:inline-block;text-align:left}
.room .num small{font-family:var(--body);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-left:.4rem}
.room .num.sub{font-size:1.5rem;color:var(--soft)}
.room .num.word{font-size:1.5rem;padding-top:.5rem}
.room h3{font-size:.98rem;margin:.9rem 0 .5rem;padding-top:.9rem;border-top:1px solid var(--line)}
.room p{font-size:.92rem;color:var(--soft);margin:0}
.func-cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:2rem}
.func-cta p{margin:0;font-size:.92rem;color:var(--soft)}

.gallery{background:var(--white);padding-bottom:clamp(2rem,4vw,3rem)}
.grail{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;
  margin-top:2.4rem}
.grail img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  border-radius:2px}
.grail figure{margin:0;min-width:0;position:relative;overflow:hidden;border-radius:2px}
.grail figure:first-child{grid-column:span 2}
.grail figure:first-child img{aspect-ratio:3/2}
/* THE PHOTOGRAPHS LEAN IN UNDER THE POINTER (2026-09-19) - to 105% over 1.2s,
   the house standard (sites/CLAUDE.md). Until then this page had three
   different zooms (1.03 to 1.04, 1.4 to 1.6s) on three kinds of photo, on
   touch screens too, and none on the story, function and find-us photos.
   Every photograph that is not already clipped by its own figure sits in a
   .ph box that clips it and ONLY it - inside the food shots' white mat, and
   short of the story photo's "Established" badge, which hangs outside its
   box on purpose. (hover:hover) keeps it off touch screens, where a tap
   leaves it stuck half-zoomed; it is off under reduced motion too. */
.ph{overflow:hidden;border-radius:2px}
.ph > img{display:block;width:100%}
.ph > img,.sport-figure img,.grail img{transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .ph:hover > img,.sport-figure:hover img,.grail figure:hover img{transform:scale(1.05)}
}
.grail figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1rem .9rem;
  color:var(--cream);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  background:linear-gradient(180deg,rgba(11,11,11,0),rgba(11,11,11,.78));pointer-events:none}
.grail figcaption::before{content:"";display:block;width:26px;height:1px;background:var(--gold);margin-bottom:.5rem}
.lbtn{all:unset;display:block;width:100%;cursor:zoom-in}
.lbtn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lb{border:0;padding:0;margin:0;background:transparent;max-width:none;max-height:none;
  width:100vw;height:100dvh;color:var(--cream)}
.lb::backdrop{background:rgba(8,8,8,.95)}
.lb[open]{animation:lbIn .25s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-stage{height:100%;display:grid;place-items:center;padding:3.6rem 3.8rem 1.6rem}
.lb figure{margin:0;text-align:center}
.lb img{max-width:min(92vw,1000px);max-height:76vh;width:auto;height:auto;
  margin-inline:auto;padding:6px;background:#0B0B0B;border:1px solid rgba(194,190,88,.35)}
.lb figcaption{font-size:.86rem;max-width:64ch;margin:.9rem auto 0;color:rgba(242,240,230,.86)}
.lb figcaption::before{content:"";display:block;width:36px;height:1px;background:var(--gold);margin:0 auto .7rem}
.lb-x,.lb-prev,.lb-next{position:fixed;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(11,11,11,.6);border:1px solid rgba(194,190,88,.5);color:var(--gold);
  font-size:1.5rem;line-height:1;display:grid;place-items:center;transition:border-color .2s}
.lb-x:hover,.lb-prev:hover,.lb-next:hover{border-color:var(--gold)}
.lb-x{top:1rem;right:1rem}
.lb-prev{left:.8rem;top:50%;transform:translateY(-50%)}
.lb-next{right:.8rem;top:50%;transform:translateY(-50%)}
body:has(.lb[open]){overflow:hidden}

.book{color:var(--cream);isolation:isolate;
  background:radial-gradient(58% 46% at 50% 46%,rgba(194,190,88,.16),rgba(194,190,88,0) 72%),var(--black)}
.book h2{color:var(--cream);margin-inline:auto}
#book{scroll-margin-top:5.5rem}
.bookpanel{width:100%;max-width:480px;margin:2rem auto 0;text-align:left;
  background:#fff;color:#1F2429;border:1px solid rgba(194,190,88,.35);
  border-radius:10px;padding:clamp(1.1rem,3vw,1.9rem);
  box-shadow:0 24px 54px -30px rgba(0,0,0,.9)}
.book-stage{position:relative;max-width:480px;margin:2.4rem auto 0}
.book-stage .bookpanel{margin-top:0}
.book-stage::before{content:"";position:absolute;inset:-14px;border:1px solid rgba(194,190,88,.45);
  border-radius:16px;pointer-events:none}
.book-stage::after{content:"";position:absolute;left:50%;top:-14px;width:9px;height:9px;
  background:var(--gold);transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
.book-loading{display:grid;place-items:center;gap:.9rem;padding:2.6rem 1.5rem;
  color:#5B5B57;font-size:.9rem;text-align:center}
.book-loading::before{content:"";width:30px;height:30px;border-radius:50%;
  border:3px solid rgba(11,11,11,.14);border-top-color:#0B0B0B;
  animation:bookspin .8s linear infinite}
@keyframes bookspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.book-loading::before{animation:none}}
.book-fallback{text-align:center;padding:1rem 0 .4rem}
.book-fallback p{color:#5B5B57;font-size:.92rem;margin:0 0 1rem}
.book-ring{text-align:center;padding:.4rem 0 .2rem}
.book-ring-label{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
  color:#6E6A1E;margin:0 0 .8rem}
.book-ring-tel{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;
  padding:1rem 1.6rem;text-transform:none;width:100%}
.book-ring-hours{color:#5B5B57;font-size:.9rem;margin:1.1rem 0 .3rem}
.book-ring-alt{color:#5B5B57;font-size:.88rem;margin:0}
.book-ring-alt a{color:#6E6A1E}
.book-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  max-width:880px;margin:3rem auto 0;text-align:left;
  border:1px solid rgba(194,190,88,.28);background:rgba(22,22,22,.75)}
.book-notes div{padding:1.2rem 1.3rem 1.1rem;font-size:.86rem;color:rgba(242,240,230,.8)}
.book-notes div + div{border-left:1px solid rgba(194,190,88,.28)}
.book-notes b{display:flex;align-items:center;gap:.55rem;color:var(--gold);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;margin-bottom:.35rem}
.book-notes b::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex:0 0 auto}

/* NEUTRALISERS. The scoped sheet is the booking PAGE's stylesheet with every
   rule pushed under the container class, so its body rule lands on our
   container. DOUBLED SELECTOR, load-bearing: it wins on specificity rather
   than depending on load order. */
.nn-bw.wh-bookwidget{min-height:0;overflow:visible;padding:0;
  background:transparent !important;font-size:15px}
.nn-bw.wh-bookwidget #bookingHeading{display:none}
.nn-bw.wh-bookwidget .container{padding:0;box-shadow:none;border-radius:0;
  background:transparent;margin-bottom:0;max-width:440px}
.nn-bw.wh-bookwidget .page-wrapper{max-width:440px}
.nn-bw.wh-bookwidget #progressLine{max-width:100%}
.nn-bw.wh-bookwidget .step{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.nn-bw.wh-bookwidget .calendar-day{aspect-ratio:auto;min-height:44px}

.find{background:var(--white)}
.find-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,3.6rem);align-items:start}
.info{margin:0}
.info dt{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;margin-top:1.5rem}
.info dt:first-child{margin-top:0}
.info dd{margin:.4rem 0 0;font-size:1rem}
.info dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.info dd a:hover{border-bottom-color:var(--gold)}
.hours{list-style:none;margin:.4rem 0 0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:1.5rem;
  padding:.42rem 0;border-bottom:1px dotted var(--line);font-size:.96rem;
  max-width:24rem}
.hours li b{font-weight:700}
/* TODAY, on the visitor's clock: whelans.js stamps data-today on the rows of
   the opening hours and the food times whose data-days include today. An
   attribute, so it is found by the script and never by a class. --black on
   --gold is 10.1:1. */
.hours li[data-today] b::after,.times li[data-today] b::after{content:"Today";display:inline-block;
  margin-left:.6rem;padding:.12rem .5rem;border-radius:999px;background:var(--gold);color:var(--black);
  font-family:var(--body);font-weight:700;font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;vertical-align:.18em}
.hours-note{font-size:.83rem;color:var(--soft);margin:.9rem 0 0;max-width:34rem}
.policy{list-style:none;margin:.4rem 0 0;padding:0;font-size:.92rem;color:var(--soft)}
.policy li{padding:.35rem 0 .35rem 1.1rem;position:relative}
.policy li::before{content:"";position:absolute;left:0;top:.95rem;width:5px;height:5px;
  background:var(--gold);transform:rotate(45deg)}
.mapcard{position:relative;isolation:isolate;border-radius:2px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(150deg,#E9E8E0,#D8D7CC);
  min-height:320px;display:grid;place-items:center;box-shadow:0 30px 60px -38px rgba(0,0,0,.45)}
.mapcard img{width:100%;height:100%;object-fit:cover}
.mapcard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,11,.08),rgba(11,11,11,.02))}
.mapcard:not(:has(img)){background:
  repeating-linear-gradient(0deg,rgba(21,21,21,.06) 0 1px,transparent 1px 30px),
  repeating-linear-gradient(90deg,rgba(21,21,21,.06) 0 1px,transparent 1px 30px),
  linear-gradient(150deg,#E9E8E0,#D8D7CC)}
.map-plate{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;display:flex;align-items:center;gap:.7rem;
  background:var(--black);color:var(--cream);padding:.75rem 1rem;border:1px solid rgba(194,190,88,.55);
  font-size:.82rem;line-height:1.35;border-radius:2px}
.map-plate b{display:block;font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;
  font-size:.78rem;color:var(--gold)}
.findshot{margin:1.4rem 0 0}
.findshot figcaption{font-size:.83rem;color:var(--soft);margin-top:.7rem}

.footer{background:var(--black-3);color:rgba(242,240,230,.78);overflow:hidden;
  padding:clamp(3rem,6vw,4.4rem) 0 2rem;font-size:.9rem;
  border-top:1px solid rgba(194,190,88,.3)}
.footer::before{content:attr(data-est) / "";position:absolute;right:-.04em;bottom:-.24em;pointer-events:none;
  user-select:none;font-family:var(--display);font-size:clamp(9rem,22vw,18rem);line-height:1;
  color:rgba(194,190,88,.055);letter-spacing:.02em;z-index:0}
.footer .wrap{position:relative;z-index:1}
.footer-lockup{text-align:center;padding-bottom:2.2rem;margin-bottom:2.2rem;
  border-bottom:1px solid rgba(242,240,230,.12)}
.footer-mark{font-family:var(--display);font-size:clamp(1.9rem,4vw,3rem);color:var(--cream);
  line-height:1;letter-spacing:.24em;text-transform:uppercase;margin:0}
.footer-mark span{display:block;font-family:var(--body);font-size:.62rem;
  letter-spacing:.42em;margin-top:.7rem;color:var(--gold)}
.footer-lockup .hero-rule{justify-content:center;margin:1.2rem 0 0;animation:none}
.footer-lockup .hero-rule::before,.footer-lockup .hero-rule::after{width:40px;animation:none}
.footer-top{display:grid;grid-template-columns:1fr 2.4fr;gap:2.5rem;align-items:start;
  padding-bottom:1.9rem;border-bottom:1px solid rgba(242,240,230,.12)}
.footer-tag{margin:0;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(242,240,230,.62)}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin:0}
.footer-cols dt{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:.5rem}
.footer-cols dd{margin:0;line-height:1.6}
.footer a{color:rgba(242,240,230,.86)}
.footer-cols a{text-decoration:none;border-bottom:1px solid rgba(194,190,88,.35)}
.footer-cols a:hover{border-bottom-color:var(--gold)}
.social{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.social a{display:inline-block;text-decoration:none;color:var(--cream);border:1px solid rgba(194,190,88,.4);
  padding:.5rem .8rem;border-radius:2px;transition:border-color .2s,color .2s}
.social a:hover{border-color:var(--gold);color:var(--gold)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:1.2rem;
  justify-content:space-between;align-items:center;padding-top:1.5rem;
  font-size:.8rem;color:rgba(242,240,230,.6)}
.totop{color:var(--gold);text-decoration:none;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.footer .credit{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;transition:color .2s}
.footer .credit:hover{color:var(--cream)}
.credit img{height:19px;width:auto;opacity:.85;transition:opacity .2s}
.footer .credit:hover img{opacity:1}

.bookbar{display:none}

@media(max-width:960px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:var(--navh)}
  /* width:100% IS LOAD-BEARING, not a tidy-up. An element with an
     aspect-ratio does NOT stretch to fill its grid column: `normal`
     alignment resolves to `start` for it, so its width is DERIVED from
     its height. max-height:58vh then capped the height and, through the
     4/3 ratio, capped the WIDTH with it - 634px of photo in a 940px
     viewport, with 306px of black beside it. Reported 2026-09-04 at the
     width where the burger appears. A definite width makes the ratio
     compute the height instead of the reverse, so the cap crops the
     photo (object-fit:cover) rather than shrinking the box. */
  .hero-photo{order:-1;min-height:0;width:100%;aspect-ratio:4/3;max-height:58vh}
  .hero-photo img{position:absolute}
  /* THE FOOT OF THE PHOTO CARRIES THE KICKER on a phone - .hero-copy's
     negative margin lifts it about 38px into the pane - so the fade is at
     least .86 dark to 16% up. It was .7 at 10%, which let a bright frame
     take the gold kicker to 3.3:1 (measured 2026-09-19, every pub failing at
     375 once four photographs passed behind it). */
  .hero-photo::before{background:
    linear-gradient(0deg,#0B0B0B 0,rgba(11,11,11,.86) 16%,rgba(11,11,11,0) 46%),
    linear-gradient(180deg,rgba(11,11,11,.3) 0,rgba(11,11,11,0) 22%)}
  .hero-copy{padding:0 1.25rem 2.8rem;margin-top:-2.4rem}
  .story-grid,.food-grid,.find-grid,.sport-grid,.func-hero{grid-template-columns:1fr}
  .scards{grid-template-columns:1fr 1fr}
  .rooms{grid-template-columns:1fr}
  .book-notes{grid-template-columns:1fr}
  .book-notes div + div{border-left:0;border-top:1px solid rgba(194,190,88,.28)}
  .book-stage::before{inset:-10px;border-radius:14px}
  .book-stage::after{top:-10px}
  .grail{grid-template-columns:repeat(2,1fr)}
  .grail figure:first-child{grid-column:span 2}
  .est{right:12px;bottom:-18px}
  .footer-top{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  /* The count line can now grow to say that every match is on some other
     menu, and that is far too long to sit beside the input on a phone:
     .msearch-count is nowrap and the input is flex:1 with min-width:0, so a
     long count squeezes the box the guest is typing into rather than wrapping.
     Give the input the whole first line and let the count have its own, and
     collapse it when empty so an idle search box costs no extra height. */
  .msearch{flex-wrap:wrap;gap:.6rem 1rem}
  .msearch-in{flex:1 1 100%}
  .msearch-count{white-space:normal}
  .msearch-count:empty{display:none}

  /* THE MENU SELECTOR ON A PHONE IS WRAPPING BUTTONS, NOT A SIDEWAYS SCROLLER.
     It used to bleed to both screen edges (margin:1.4rem -1.25rem) and scroll
     horizontally, and two things were wrong with that. It sat hard against the
     glass with no gutter, because scroll-snap-align:start snapped the first tab
     to the scrollport edge on load and ate the strip's own 20px of padding - so
     the page's left margin simply vanished at the menu, measured, not guessed.
     And with seven tabs (the Elm Tree) it was 1125px of content in a 375px
     viewport: two thirds of that venue's menus off-screen behind an underline
     rail that gives no hint anything is there. Buttons wrap inside the page's
     own gutters instead, and every menu the venue has is visible at once.
     NOT sticky here, deliberately: seven of these wrap to four rows on a 375px
     screen, and pinning that under the nav would hold a quarter of the viewport
     for the whole scroll, on top of the Book bar already fixed to the bottom. */
  .menu-tabs{position:static;flex-wrap:wrap;gap:.55rem;margin:1.4rem 0 1.8rem;
    padding:0;border-bottom:0;background:transparent}
  /* flex GROW, so each row fills the width and the last row is never a lone
     stub - at 320px the longest labels only fit one per row and this makes
     that read as a stacked list rather than a ragged column. The white fill,
     the --line hairline and the 2px radius are deliberately the search input's
     directly above: these read as siblings of that control, which is what they
     are. State is carried by the FILL, not the hairline. */
  .mtab{flex:1 1 auto;max-width:100%;white-space:normal;text-align:center;
    font-size:.78rem;letter-spacing:.1em;padding:.7rem 1rem;
    border:1px solid var(--line);border-radius:2px;background:var(--white);
    transition:color .2s ease,background .2s ease,border-color .2s ease}
  .mtab::after{display:none}
  .mtab:hover{border-color:var(--gold)}
  .mtab.is-on{background:var(--gold);border-color:var(--gold);color:var(--black)}
  /* The hit badge is gold, which reads on the page's own paper and disappears
     completely on the gold ACTIVE button. Flip it there. */
  .mtab.is-on .mhits{background:var(--black);color:var(--gold)}
  /* THE DRAWER'S HEIGHT IS EXPLICIT, AND bottom:0 WOULD BE A BUG.
     .nav carries backdrop-filter, which makes it the containing block for
     its position:fixed descendants - so bottom:0 resolves against the 69px
     NAV BAR, not the viewport. The panel then paints its background across
     69px while the links overflow out of the bottom of it, over the hero,
     with nothing behind them. It reads as a transparent drawer; it is
     actually a 69px-tall one. Reported off the live Foundry page 2026-09-01.
     top:0 and right:0 are still correct either way (the nav is pinned to the
     viewport top and spans its full width), so only the height had to change
     - and an explicit height is right whether or not the nav filters. */
  .nav-links{position:fixed;top:0;right:0;bottom:auto;left:auto;
    height:100vh;height:100dvh;width:min(78vw,320px);
    background:rgba(11,11,11,.98);-webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);flex-direction:column;justify-content:center;
    align-items:center;gap:2rem;transform:translateX(100%);
    overflow-y:auto;
    border-left:1px solid rgba(194,190,88,.3)}
  .nav-links{visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
  .nav-links.open{transform:translateX(0);visibility:visible;
    transition:transform .3s ease,visibility 0s linear 0s}
  /* 44px TAP TARGETS. Measured 22px tall on the live page (2026-09-01 QA
     pass) - the house floor is 44 and WCAG 2.5.8's minimum is 24, so the
     drawer's six links were the smallest controls on the site, and the only
     navigation a phone has. The hover underline (::after, bottom:0) now sits
     at the foot of the 44px box rather than under the glyphs; it is
     hover-only decoration inside a touch drawer, so nothing is lost. */
  .nav-links a,.nav.stuck .nav-links a{color:var(--cream);font-size:1rem;opacity:.95;
    min-height:44px;display:inline-flex;align-items:center}
  .ham{display:block;z-index:70}
  .nav .btn{display:none}
  .nav-book{display:block}
  .nav .nav-book .btn,
  .nav.stuck .nav-book .btn{display:inline-flex;color:#0B0B0B}
  .bookbar{display:flex;align-items:center;gap:.9rem;position:fixed;left:0;right:0;bottom:0;
    z-index:50;background:rgba(11,11,11,.96);color:var(--cream);
    border-top:1px solid rgba(194,190,88,.45);
    padding:.55rem 1.25rem calc(.55rem + env(safe-area-inset-bottom));
    transform:translateY(105%);transition:transform .3s var(--ease)}
  .bookbar.is-on{transform:translateY(0)}
  .nav.open ~ .bookbar{transform:translateY(105%)}
  .bookbar-tel{flex:1 1 auto;color:var(--cream);text-decoration:none;font-weight:700;
    font-size:1rem;letter-spacing:.04em;line-height:1.15;min-height:44px;
    display:flex;flex-direction:column;justify-content:center}
  .bookbar-tel small{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
    color:var(--gold);margin-bottom:.2rem}
  .bookbar .btn{flex:0 0 auto}
  body.bookbar-on .footer{padding-bottom:calc(2rem + 74px + env(safe-area-inset-bottom))}
}
@media(max-width:700px){
  .mlist{grid-template-columns:1fr}
  .mnote{padding:0 34px}
  .mnote::before,.mnote::after{width:24px}
  .facts{grid-template-columns:1fr;gap:1rem}
  .scards{grid-template-columns:1fr 1fr;gap:.7rem}
  .scard{padding:1.2rem 1rem}
  .music{grid-template-columns:1fr}
  .mcard + .mcard{border-left:0;border-top:1px solid rgba(194,190,88,.35)}
  .footer-cols{grid-template-columns:1fr}
  .lb-stage{padding:3.6rem 1rem 1.2rem}
  .lb-prev,.lb-next{top:auto;bottom:1rem;transform:none}
  body{font-size:16px}
}
@media(max-width:480px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}