/* CHRISTMAS 2026 - the page (12 Sep 2026). Dark and candlelit (Nuo): a near-black warm ground, Sandstone type, the
   warm photographs doing the work and Neon Orange as the season's one accent. The festive blocks themselves
   (menus, tabs, packages, extras) are in festive.css, shared with Menus and Private Hire; this file is the page
   around them - nav, hero, ticker, intro, venues, the booking split, the FAQ - and the dark-ground overrides of
   the prototype's shared components (the nav's solid state, the neon hover tokens, the footer's join). */
@font-face{font-family:"Graphik";src:local("Graphik Regular"),local("Graphik-Regular");font-weight:400}
@font-face{font-family:"Graphik";src:local("Graphik Medium"),local("Graphik-Medium");font-weight:500}
@font-face{font-family:"Solina";src:local("Solina Book"),local("Solina-Book");font-weight:300}
:root{--sand:#F2ECE9;--ink:#000;--blue:#1847E8;--orange:#F36F23;--pink:#FF3CA0;--dgreen:#C3E1CC;--green:#0F4A2C;   /* --green: V2 dark green, sampled - see page.css */
  --head:"Graphik","Inter",Arial,sans-serif;--body:"Solina","Figtree",Arial,sans-serif;--nav:72px;--pad:40px;--ease:cubic-bezier(.2,.8,.2,1);--accent:#F36F23;--accent-ink:#000}
/* --accent-ink is BLACK on Neon Orange, which is not in the V2 colour-combination table (slide 42 approves Neon
   Green, White and Neon Blue on orange). Kept deliberately (brand audit, 12 Sep 2026): white on #F36F23 measures
   2.9:1, under the 4.5:1 text floor, and these are buttons people read. Accessibility beats the table here. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* NO WIDE-SCREEN CAP: --pad stays put at every width and the page runs full-bleed to 3440px and beyond (Nuo,
   13 Sep 2026, reversing his own instruction of that morning). page.css carries the reasoning and the measured cost. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* the page IS the dark ground: body carries it so the footer, the nav and every block join without a seam */
body.xmas{background:var(--fx-bg,#0B0908);color:var(--fx-ink,#F2ECE9);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* footer.js's neon-hover tokens are the sand-ground inks by default (Neon Blue on this black is 2.9:1). One accent for
   the season, so all four are the season's orange (about 7:1 here). Nuo's choice of a single neon, 12 Sep 2026. */
body.xmas{--n1:#F36F23;--n2:#F36F23;--n3:#F36F23;--n4:#F36F23;--dgf-bg:#000;--dgf-ink:#F2ECE9;--btn:#fff;--btn-hover:#F36F23}   /* buttons white, Neon Orange on hover (Nuo, 3 Oct 2026) */   /* the black footer stays on Christmas (Nuo, 2 Oct 2026); footer.js reads these. The footer's own hover neons are footer.dgf.dark's true neons, set on the footer element - as they were before 2 Oct, when footer.dgf sat in that same list; this body set never reached the footer */
a{color:inherit;text-decoration:none}
img{display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.caps{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02}
.k{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:var(--fx-acc)}
.k.mute{color:var(--fx-mute)}
section{padding:0 var(--pad)}
section[id]{scroll-margin-top:calc(var(--nav) + 16px)}
h2.caps{font-size:clamp(32px,3.4vw,54px);letter-spacing:-0.025em;margin:0}
.sub{font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--fx-mute);max-width:56ch;hyphens:auto;-webkit-hyphens:auto}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:34px}
.hd .k{display:block;margin-bottom:12px}
.hd .sub{margin:0}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.pill{font-family:var(--head);font-size:14px;letter-spacing:-0.01em;padding:12px 20px;border:2px solid var(--fx-ink);border-radius:999px;background:transparent;color:var(--fx-ink);display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
/* outlines only - V2 slide 79 (13 Sep 2026). The .fill pill is an orange OUTLINE with WHITE text: the slide's "text in
   accent neon black or black" reads for a light ground, and this page has none - body.xmas is --fx-bg, so the
   morning's black text was black on black in the hero ("Plan a party"), the booking split ("Start an enquiry →") and
   the form ("Send the enquiry"). Nuo, 13 Sep 2026: "white font everywhere where the background is dark". Orange as
   TEXT would pass here (about 7:1 on this black) but is 2.9:1 on Sandstone, which is why the outline carries it. */
@media (hover:hover){.pill:hover{background:transparent;color:var(--fx-ink);border-color:var(--fx-acc)}}
.pill.fill{background:transparent;border-color:var(--fx-acc);color:#fff}
@media (hover:hover){.pill.fill:hover{background:transparent;border-color:var(--fx-ink);color:var(--fx-ink)}}
.pill.sand{background:var(--sand);border-color:var(--sand);color:#000}
@media (hover:hover){.pill.sand:hover{background:#fff;border-color:#fff}}
.pill.ghost{border-color:var(--fx-line2)}
@media (hover:hover){.pill.ghost:hover{background:transparent;border-color:var(--fx-ink);color:var(--fx-ink)}}
.pill.big{font-size:18px;padding:18px 32px}
.pill.sm{font-size:12px;padding:8px 14px}

/* ---- nav: over the hero as every page; its solid state is dark here, not sand ---- */
/* --nav-ink-solid: footer.js's burger goes black once the nav is .solid - right on a Sandstone bar, invisible on this
   rgba(11,9,8,.88) one (measured 13 Sep 2026; the Book pill below had the same fault fixed a day earlier and the burger,
   drawn by footer.js, was missed). The variable is footer.js's; this page sets it to the season's ink. */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);transition:background .35s,box-shadow .35s;--nav-ink-solid:var(--fx-ink)}
.nav .logo{height:24px;width:auto}.nav .logo.dark{display:none}
.nav ul{display:flex;gap:28px;list-style:none;font-family:var(--head);text-transform:uppercase;font-size:13px;letter-spacing:.02em;color:#fff;white-space:nowrap}
.nav ul .here{border-bottom:2px solid currentColor;padding-bottom:2px}
.nav .book{flex:0 0 auto;font-family:var(--head);font-size:14px;padding:12px 20px;border:2px solid #fff;border-radius:999px;color:#fff;background:transparent;white-space:nowrap;transition:all .25s}
.nav.solid{background:rgba(11,9,8,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(242,236,233,.1)}
.nav.solid .logo.light{display:block}.nav.solid .logo.dark{display:none}
.nav.solid ul{color:var(--fx-ink)}
.nav.solid .book{border-color:var(--fx-acc);background:transparent;color:#fff}   /* the solid nav is rgba(11,9,8,.88): the same black-on-black as .pill.fill above, fixed the same day */
/* footer.js opens the mobile menu on the sand and swaps to the black logo; the nav over it must not stay dark */
body.mopen .nav{background:#F2ECE9;backdrop-filter:none;--menu-pill:#000}   /* --menu-pill: the Book pill on the sand menu; the accent (Neon Orange) is 2.9:1 there (13 Sep 2026) */
/* the floating bottom-right Plan-a-party (.fab) went on 13 Sep 2026 - the fixed nav carries the one CTA. pulse stays
   for the kicker's ember dot */
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.55}}

/* ---- hero: a candlelit photograph, embers rising through it, the title arriving line by line ---- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#0B0908;color:var(--fx-ink);padding:0}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;animation:drift 40s ease-in-out infinite alternate;transform-origin:50% 55%;filter:saturate(1.05) contrast(1.02)}
/* ONE SLOW DRIFT FOR EVERY HERO PHOTOGRAPH (Nuo, 13 Oct 2026: "the hero image zooms in rapidly at the start, can we stop that? Or let it zoom in very slowly and smoothly? ... make everything consistent!"): from rest (scale 1, exactly as first painted) to 1.03 and back, 40s each way, ease-in-out - the Christmas 30 Sep cap of 1.03 is now everyone's. The rapid zoom was motion.js setting scale 1.08 on the image a moment after load; that is gone. */
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.03)}}
/* the shade is heavier in the lower two fifths, where the copy sits, after the 12 Sep render put the paragraph over
   the bright turkey; the food stays lit in the upper half */
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,9,8,.5) 0%,rgba(11,9,8,.06) 30%,rgba(11,9,8,.5) 60%,rgba(11,9,8,.9) 86%,var(--fx-bg) 100%),radial-gradient(ellipse at 20% 80%,rgba(11,9,8,.6),rgba(11,9,8,0) 55%)}
.hero .kk{text-shadow:0 1px 14px rgba(11,9,8,.8)}
.hero canvas.embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.9}
.hero .copy{position:absolute;left:var(--pad);right:var(--pad);bottom:76px;display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:end}
.hero .kk{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;opacity:0;animation:fade 1s .3s var(--ease) forwards}
.hero .kk i{width:8px;height:8px;border-radius:50%;background:var(--fx-acc);animation:pulse 1.8s ease-in-out infinite;box-shadow:0 0 12px rgba(243,111,35,.8)}
.hero h1{font-size:clamp(46px,7.2vw,116px);letter-spacing:-0.03em;line-height:.96}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .l span{display:inline-block;transform:translateY(110%);animation:rise .95s var(--ease) forwards}
.hero h1 .l:nth-child(2) span{animation-delay:.14s}
.hero h1 .l:nth-child(2){color:var(--fx-acc)}
@keyframes rise{to{transform:none}}
/* the side holds the two pills alone since 13 Sep 2026 (the paragraph above them went - Nuo) */
.hero .side{display:flex;flex-direction:column;align-items:flex-end;gap:18px;opacity:0;animation:fade 1s .7s var(--ease) forwards}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.hero .acts .pill.big{min-width:200px;justify-content:center}
@keyframes fade{to{opacity:1}}
.hero .cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:22px;height:22px;opacity:.9;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* the ticker strip's rules were deleted on 23 Sep 2026 (Nuo: "prue hates these strips, delete them everywhere!") */

/* ---- intro: the letter, the numbers, and the two ways in ---- */
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;padding:104px var(--pad) 96px;align-items:start}
.intro .lede{font-size:clamp(20px,1.7vw,26px);line-height:1.35;letter-spacing:-0.01em;color:var(--fx-ink);margin-bottom:22px}   /* ragged-left, so no hyphenation: "tur-key" showed in the 12 Sep render */
.intro p.body{font-size:clamp(15px,1.1vw,18px);line-height:1.55;color:var(--fx-mute);margin-bottom:18px;hyphens:auto;-webkit-hyphens:auto;max-width:60ch}
.intro .sign{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:var(--fx-mute);margin-top:26px}
.nums{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:20px}
.num{border-top:2px solid var(--fx-acc);padding-top:14px}
.num b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(32px,3.2vw,56px);letter-spacing:-0.03em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.num span{font-family:var(--head);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;color:var(--fx-mute);display:block;margin-top:10px}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.intro.one{display:block}.intro.one .ways{margin-top:0;gap:20px}   /* Nuo, 26 Sep 2026: the two ways to book use the full page width */
.way{border:1px solid var(--fx-line2);border-radius:18px;padding:22px 22px 20px;background:var(--fx-bg2);display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .35s var(--ease)}
@media (hover:hover){.way:hover{border-color:rgba(242,236,233,.45);transform:translateY(-3px)}}
.way .k{color:var(--fx-mute)}
.way h3{font-size:clamp(19px,1.6vw,23px)}
.way p{font-size:14.5px;line-height:1.5;color:var(--fx-mute);margin:0;hyphens:auto;-webkit-hyphens:auto}
.way .pill{align-self:flex-start;margin-top:auto}
@media (max-width:1020px){.intro{grid-template-columns:1fr;gap:44px;padding:80px var(--pad) 72px}}
@media (max-width:560px){.ways{grid-template-columns:1fr}.nums{grid-template-columns:1fr 1fr}}

/* ---- the blocks' sections: one rhythm ---- */
.blk{padding:0 var(--pad) 104px}
.blk.tight{padding-bottom:88px}
.blk .hd .right{text-align:right;flex:0 0 auto}
.blk .hd .right b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(34px,3.4vw,54px);letter-spacing:-0.03em;line-height:1}
.blk .hd .right span{display:block;font-family:var(--head);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;color:var(--fx-mute);margin-top:8px}
.blk .foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;color:var(--fx-mute);font-size:13.5px}
.blk .foot a{text-decoration:underline;text-underline-offset:3px;color:var(--fx-ink)}
/* a photograph strip between two dark blocks, so the page breathes */
.strip{height:min(56vh,520px);position:relative;overflow:hidden;margin:0 0 104px;padding:0}
.strip img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--fx-bg) 0%,rgba(11,9,8,0) 22%,rgba(11,9,8,0) 78%,var(--fx-bg) 100%)}
.strip .cap{position:absolute;left:var(--pad);bottom:26px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:rgba(242,236,233,.8);z-index:1}

/* ---- where to have it: the guest stepper and the venue cards ---- */
.venues .top{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin-bottom:34px}
.slider{border:1px solid var(--fx-line2);border-radius:18px;padding:22px 24px 20px;background:var(--fx-bg2)}
.slider .out{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.slider .out b{font-family:var(--head);font-weight:400;font-size:clamp(34px,3.4vw,54px);letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums}
.slider .out b small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fx-mute);margin-left:10px;font-weight:400}
.slider .fit{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--fx-acc)}
.slider input[type=range]{width:100%;accent-color:var(--fx-acc);margin:4px 0 6px;min-height:24px} /* the guest slider was a 16px strip; a thumb needs 24 (25 Sep 2026) */
.slider .note{font-size:13px;color:var(--fx-mute);line-height:1.45}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}   /* as many 4:5 cards a row as fit at 240px, gap 16 like the landing page (Nuo, 30 Sep 2026) */
.vcard{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--fx-bg2);color:#fff;display:block;transition:opacity .4s,filter .4s,transform .35s var(--ease)}
.vcard img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);transform:scale(1.02)}
@media (hover:hover){.vcard:hover img.ph{transform:scale(1.07)}}
.vcard .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,9,8,.1) 0%,rgba(11,9,8,0) 30%,rgba(11,9,8,.85) 100%)}
.vcard .fl{position:absolute;top:14px;right:14px;width:18px;height:18px;opacity:.95}
.vcard .room{position:absolute;top:14px;left:14px;font-family:var(--head);text-transform:uppercase;font-size:10px;letter-spacing:.1em;background:rgba(11,9,8,.55);backdrop-filter:blur(6px);padding:5px 9px;border-radius:999px;color:var(--fx-acc2)}
.vcard .body{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:8px}
.vcard .name{font-family:var(--head);font-weight:400;font-size:clamp(18px,1.5vw,22px);letter-spacing:-0.02em;line-height:1.05}
.vcard .area{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.7)}   /* 11px: the floor for a name (was 10) */
.vcard .caps2{display:flex;gap:16px;margin-top:2px}
.vcard .caps2 div b{display:block;font-family:var(--head);font-weight:400;font-size:22px;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums}
.vcard .caps2 div span{display:block;font-family:var(--head);text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.7);margin-top:4px}   /* 10px: the annotation floor (was 9.5) */
.vcard .blurb{font-size:13px;line-height:1.4;color:rgba(255,255,255,.82);max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .35s}
@media (hover:hover){.vcard:hover .blurb,.vcard:focus-visible .blurb{max-height:80px;opacity:1}}
.vcard .sect{font-size:11.5px;color:rgba(255,255,255,.7)}
/* a venue outside the chosen party size is dimmed, not erased: at opacity .32 its name read 2.9:1 and its area 2.0:1 over
   the card's darkest ground (measured 13 Sep 2026), and the .7-alpha captions went with it. .6 keeps the name at ~5.7:1
   and the captions above 4.5:1 on the card's gradient, and the desaturation still says "not this one" (Nuo, 13 Sep: a
   4.5:1 floor for every word on a dark ground, dimmed items included). */
.vcard.dim{opacity:.6;filter:saturate(.35)}
@media (hover:hover){.vcard.dim:hover,.vcard.dim:focus-visible{opacity:.9}}
.vcard.dim .area,.vcard.dim .caps2 div span,.vcard.dim .sect{color:#fff}
.venues .note{margin-top:20px;font-size:13.5px;color:var(--fx-mute);max-width:70ch;line-height:1.5}
@media (max-width:1020px){.venues .top{grid-template-columns:1fr;gap:24px}}
@media (max-width:760px){.vgrid{grid-template-columns:1fr 1fr;gap:10px}.vcard .blurb{display:none}.vcard .caps2 div b{font-size:18px}}

/* ---- get it in the diary: a table, or a party ---- */
.book{padding:0 var(--pad) 104px}
.book .frame{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;align-items:stretch}
.book .panel{border:1px solid var(--fx-line2);border-radius:24px;padding:36px 36px 32px;background:var(--fx-bg2);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px}
.book .panel::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 0% 100%,rgba(243,111,35,.12),rgba(243,111,35,0) 55%);pointer-events:none}
.book .panel>*{position:relative}
.book .panel h3{font-size:clamp(24px,2.2vw,34px)}
.book .panel p{color:var(--fx-mute);font-size:15px;line-height:1.5;margin:0;hyphens:auto;-webkit-hyphens:auto}
/* the site links fill the card's free height: equal-width pills, rows share the space evenly (Nuo, 30 Sep 2026) */
.places{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;flex:1 1 auto;align-content:stretch}
.places a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;font-family:var(--head);font-size:clamp(15px,1.25vw,18px);letter-spacing:-0.01em;line-height:1.2;padding:10px 12px;border:1.5px solid var(--fx-line2);border-radius:999px;color:var(--fx-ink);transition:background .2s,border-color .2s,color .2s}
@media (max-width:1400px){.places{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.places{grid-template-columns:1fr}}
@media (hover:hover){.places a:hover{background:var(--fx-ink);border-color:var(--fx-ink);color:var(--fx-bg)}}
.book .fine{font-size:12.5px;color:var(--fx-mute)}
.book .pdfs{margin-top:auto;padding-top:18px;border-top:1px solid var(--fx-line)}
/* the compact enquiry */
.enq form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.enq label{display:flex;flex-direction:column;gap:6px;font-family:var(--head);font-size:12px;letter-spacing:.02em;color:var(--fx-mute)}
.enq label.wide{grid-column:1/-1}
.enq label em{font-style:normal;opacity:.8}   /* "(optional)": .6 on the muted label read 3.1:1 (13 Sep 2026); .8 clears 4.5 */
.enq input,.enq select,.enq textarea{background:rgba(0,0,0,.3);border:1px solid var(--fx-line2);border-radius:12px;padding:12px 14px;color:var(--fx-ink);font-family:var(--body);font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s;min-height:44px}
.enq input:focus,.enq select:focus,.enq textarea:focus{border-color:var(--fx-acc);box-shadow:0 0 0 3px rgba(243,111,35,.18)}
.enq select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fx-mute) 50%),linear-gradient(135deg,var(--fx-mute) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.enq select option{background:#151110;color:#F2ECE9}
.enq textarea{min-height:92px;resize:vertical}
.enq .chips{display:flex;flex-wrap:wrap;gap:8px}
.enq .chips button{font-family:var(--head);font-size:13px;padding:9px 14px;border:1.5px solid var(--fx-line2);border-radius:999px;background:transparent;color:var(--fx-ink);transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
@media (hover:hover){.enq .chips button:hover{border-color:var(--fx-ink)}}
.enq .chips button.on{background:var(--fx-acc);border-color:var(--fx-acc);color:#000}
.enq .num{display:inline-flex;align-items:stretch;border:1px solid var(--fx-line2);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.3)}
.enq .num button{background:none;border:0;color:var(--fx-ink);width:44px;font-size:18px}
@media (hover:hover){.enq .num button:hover{background:rgba(242,236,233,.08)}}
.enq .num input{border:0;background:none;text-align:center;width:72px;border-radius:0;font-family:var(--head);font-size:16px;-moz-appearance:textfield}
.enq .num input::-webkit-inner-spin-button,.enq .num input::-webkit-outer-spin-button{-webkit-appearance:none}
.enq .table{grid-column:1/-1;display:none;border:1px dashed var(--fx-line2);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--fx-mute)}
.enq .table.on{display:block}
.enq .table b{color:var(--fx-acc);font-family:var(--head);font-weight:500;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;display:block;margin-bottom:4px}
.enq .row{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.enq .err{grid-column:1/-1;color:var(--fx-acc2);font-size:14px;min-height:1.2em}
.enq .quick{font-size:13px;color:var(--fx-mute)}
.enq .quick a{text-decoration:underline;text-underline-offset:3px;color:var(--fx-ink)}
.enq .done{display:none;text-align:center;padding:24px 0 8px}
.enq .done.on{display:block}
.enq .done img{width:40px;height:40px;margin:0 auto 14px}
.enq .done h4{font-family:var(--head);font-weight:400;font-size:24px;letter-spacing:-0.02em;margin-bottom:8px}
.enq .done p{font-size:15px}
@media (max-width:1020px){.book .frame{grid-template-columns:1fr}}
@media (max-width:560px){.book .panel{padding:26px 20px 24px}.enq form{grid-template-columns:1fr}}

/* ---- good to know ---- */
.faq{padding:0 var(--pad) 104px}
.faq h2{margin-bottom:34px}
.faq .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:0}
.faq .grid>div{padding:20px 0;border-top:1px solid var(--fx-line)}
.faq dt{font-family:var(--head);font-weight:400;font-size:17px;letter-spacing:-0.01em;margin-bottom:8px}
.faq dd{margin:0;font-size:15px;line-height:1.5;color:var(--fx-mute);hyphens:auto;-webkit-hyphens:auto}
@media (max-width:860px){.faq .grid{grid-template-columns:1fr}}
/* the pack, as a download row */
.pdfs{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pdfs .k{margin-right:6px}

/* ---- phone ---- */
@media (max-width:860px){
  :root{--pad:20px;--nav:60px}
  body.xmas{font-size:16px}
  .nav ul{display:none}.nav .book{padding:10px 16px;font-size:13px}   /* the burger takes over (footer.js DG_MOBILE), as on every page */
  .hero{min-height:560px}
  .hero .copy{grid-template-columns:1fr;gap:22px;bottom:64px}
  .hero .side{align-items:flex-start}.hero .acts{justify-content:flex-start}
  .hero .acts .pill.big{min-width:0;font-size:15px;padding:14px 22px}
  .hd{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
  .blk .hd .right{text-align:left}
  .blk,.book,.faq{padding-bottom:72px}
  .strip{height:38vh;margin-bottom:72px}
  .nums{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .hero img.bg,.hero .cue,.hero .kk i{animation:none}
  .hero h1 .l span,.hero .kk,.hero .side{animation:none;transform:none;opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
}

/* == PRUE PASS 23 SEP 2026 == - the shared rules that every first-parse stylesheet carries (the same text in each; the
   harness audit_prototype_caps.js asserts the marker is in at least one first-parse sheet of every page).
   1. ALL CAPS HEADINGS. Prue, 22 Sep 2026: "I like the capital font a lot more than the other font... wherever we can
      get more caps"; "I reckon all this should be caps". REVERSES the 11 Sep Title Case decision (page.css TYPE note:
      "dense caps everywhere is the strongest corporate-chain signal"). Her judgement, recorded with the argument it
      overruled in _Supporting/docs/2026-09-23-prototype-prue-tom-pass.md. Typed copy stays Title Case and the
      transform sets the caps (brand-voice rule 9). Body, buttons, table headers, tile taglines are untouched; the
      expander labels (Menu, What's On, FAQ) are headings and take it. Tracking -0.03em between the deck's print -7%
      and the old -0.02em; per-element rules with more specificity keep their own.
   2. BOOK IS A BUTTON, NOT A CAPSULE. Prue, 22 Sep: "book a table... it's too circular"; "maybe this can just be
      Book". Label "Book" everywhere; 8px corners on the Book controls only - the deck's web button (slide 79) is
      still a pill and every other pill keeps its 999px.
   3. GREEN PAGES LINK. Nuo, 23 Sep, twice. First "something more visible like pastel green", built as dark green text on
      a Dust Green band; then, on seeing it: "do not show link to green pages like this! Make it look the same as other
      links, only when the mouse hovers over it the font should become pastel green". So: AT REST IDENTICAL to its
      neighbours; ON HOVER (and keyboard focus) the text and the underline bar go Dust Green #C3E1CC. Dust Green as text
      on the solid Sandstone bar is 1.2:1 - his ruling, for a transient hover state, recorded. The footer and the phone
      drawer do the same (footer.js). The nav's per-link bar colour is inline (DG_NAVBAR), so the ::after rule below
      carries an attribute selector to outrank it.
   4. ACCENT SWITCH - RETIRED 12 Oct 2026 (Nuo, audit decision 12). The ?accent=blue|neon|dark trial of 23 Sep and its
      html[data-accent] rules are gone; no pick was recorded, so every page keeps the accent its own sheet sets. */
h1,h2,h3,.caps,.xp>summary h2,.xp>summary h3{text-transform:uppercase}
h1,h2,h3,.caps{letter-spacing:-0.03em}
.nav .book,button.book,.card .bk:not(.walk),.mapcard .mcbk,.pill[data-book]{border-radius:8px}
.nav ul li a[href*="green-pages"]:hover,.nav ul li a[href*="green-pages"]:focus-visible{color:#C3E1CC}
.nav ul li a[href*="green-pages"]::after{background:#C3E1CC}
/* 5. PASTEL SURFACES - BUILT AND REVERTED THE SAME AFTERNOON (23 Sep 2026). Section grounds in Dust Green / Dust Blue / Dust
      Orange / Dust Pink / Peggy Jean Green went on the home page and five section pages at 15:00; Nuo, on the live page: "I
      fucking hate the pastel background colours here! revert back to the same background colour for the entire page!" So:
      one ground, Sandstone, everywhere. The idea is Prue's liking for the pastel range; if it comes back it is a per-page
      class and a rule here, not a redesign. */

/* == E9 ONE BUTTON (Nuo, 24 Sep 2026, elegance pass) == every button in copy on the prototype is the same object: outline,
   8px corners, 13px caps in the head face, a 1.5px rule, no fill. Colour is the context's through currentColor (ink on
   Sandstone, white on a photograph); the tinted and filled variants (.fill .blue .sand .light) lose their tint. Floating
   chrome - the Map fab, dialog close buttons, the tour's Close - is not a button in copy and keeps its shape. The same
   text sits in every first-parse stylesheet, cards.css and collection.css; audit_prototype_caps.js checks each carries it. */
.pill,.nav .book,button.book,.card .bk:not(.walk),.mapcard .mcbk,.place .go,.place .bk,.ev .go,.enq .chips button,.chips button,.guide button,.railnav button{border-radius:8px;font-family:var(--head);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;border-width:1.5px;border-style:solid;background:transparent;box-shadow:none}
.pill.fill,.pill.blue,.pill.sand,.pill.light,.pill.dark,.nav .book,.card .bk:not(.walk),.place .go,.place .bk{color:inherit;border-color:currentColor;background:transparent}
.nav .book{color:#fff;border-color:currentColor}.nav.solid .book{color:var(--ink,#000);border-color:currentColor}   /* the bar's Book: white over a photograph, ink on the Sandstone bar - the one place inherit is wrong (the bar's own colour is ink while its links are white) */
@media (hover:hover){.pill:hover,.nav .book:hover,.card .bk:not(.walk):hover{background:transparent;color:inherit;border-color:currentColor;opacity:.7}}
/* == BUTTONS: BLACK, BLUE ON HOVER 3 OCT 2026 == Nuo: "on all the pages, make all the buttons show as black font with black border, turn
   them blue when the mouse hovers over them; except the art page on black: white, neon green on hover; and the christmas page on
   black: white, neon orange on hover". REVERSES the 2 Oct orange-accent block (kept above as the record). Shape, size, caps and no
   fill stand (E9). Light ground: ink rule and label; on hover Neon Orange #F36F23 (Nuo, 3 Oct 2026, 11:45 - was Neon Blue from that morning). A button over a photograph, on a card or on a dark
   bar stays white. art.css and christmas.css set --btn / --btn-hover on body for their black grounds. */
body .pill:not(.light),body .pill.fill,body .pill.blue,body .pill.dark,body .panel.dg .pill,body button.book,body .nav.solid .book,body .mapcard .mcbk,body .ev .go,body .enq .chips button,body .chips button,body .guide button,body .railnav button,body .cats .mchip,body .cats .cpill:not(.here){color:var(--btn,#000);border-color:var(--btn,#000)}   /* `body` prefix: out-ranks a page's own two-class pill rules (About's .pledge .bc a.pill, .lam a.pill) so one rule holds everywhere */
.nav:not(.solid) .book,.place .go,.place .bk,.hero .pill,.card .bk:not(.walk),.pill.light{color:#fff;border-color:currentColor}
@media (hover:hover){body .pill:hover,body .nav.solid .book:hover,body button.book:hover,body .cats .mchip:hover,body .cats .cpill:not(.here):hover,body .gbtn:hover{color:var(--btn-hover,#F36F23);border-color:var(--btn-hover,#F36F23);opacity:1;background:transparent}
.nav:not(.solid) .book:hover,.place .go:hover,.place .bk:hover,.hero .pill:hover,.card .bk:not(.walk):hover,.pill.light:hover{color:var(--btn-hover,#F36F23);border-color:var(--btn-hover,#F36F23)}}

/* == ONE PAGE OF CLOSED ROWS (Nuo, 26 Sep 2026: "overall this page is way too busy, make it more minimalist like other pages!")
   christmas.js explains the shape. The rows are expand.css's .xp.dark; the blocks inside lose their own section padding
   because the row already carries the gutter. == */
.xps{padding:0 0 96px}
.xps .xp{--ink:var(--fx-ink)}
.xps .xp[open]{border-top-color:var(--fx-ink)}
.xps .blk,.xps .book,.xps .faq{padding:0}
.xps .sub.lead{margin:0 0 28px}
.xps .venues .top{margin-bottom:28px}
.strip{margin-bottom:56px}
/* the menu cards: title and price, the dishes behind one button */
.fx-fold>summary{list-style:none;cursor:pointer}
.fx-fold>summary::-webkit-details-marker{display:none}
.fx-menu>.fx-fold>summary{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;margin:4px 0 2px;border:1.5px solid currentColor;border-radius:8px;font-family:var(--head);text-transform:uppercase;font-size:13px;letter-spacing:.06em;margin-top:22px}
.xps .fx-menus{align-items:start}
.fx-menu>.fx-fold[open]>summary span{font-size:0}.fx-menu>.fx-fold[open]>summary span::after{content:"Hide the menu";font-size:13px}
.fx-menu>.fx-fold[open]>summary{margin-bottom:22px}
/* the party lists: each a closed row with its count */
.fx-grp.fx-fold{padding:0;border-top:1px solid var(--fx-line)}
.fx-grp.fx-fold>summary{padding:14px 0;margin:0;min-height:24px}
.fx-grp.fx-fold[open]>summary{padding-bottom:6px}
.fx-grp.fx-fold .fx-dishes{padding-bottom:12px}

/* BOOK ON A DARK BAR IS WHITE (Nuo, 29 Sep 2026: "use white font and outline for the book button on dark background everywhere").
   The shared PRUE rule above sets .nav.solid .book to ink - right on the Sandstone bars, black on black here. Last in the file so it
   wins at equal specificity; the open phone menu (footer.js body.mopen, more specific) and the neon hover (.dgp.dgp) keep theirs. */
.nav.solid .book{color:#fff;border-color:#fff}

/* == CLEAN-UP 30 SEP 2026 == (Nuo). The hero carries the landing page's tagline (.hline, index.html's rules) and nothing else but
   the kicker, which moves to the bottom left, level with the scroll cue. */
.hero .hline{position:absolute;left:var(--pad);right:var(--pad);bottom:64px;z-index:3;margin:0;text-align:center;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);letter-spacing:.06em;line-height:1.3;color:#fff;text-wrap:balance}
.hero .hline .tg-w{white-space:nowrap}
.hero .hline.tg-arm .tg-l{opacity:0}
.hero .hline.tg-in .tg-l{animation:tgIn .5s ease var(--d) backwards}
@keyframes tgIn{from{opacity:0}to{opacity:1}}
/* (the tagline's colour wave and its halo were deleted 12 Oct 2026 - Prue does not like the glow; the letters still arrive white) */
.hero .hkick{position:absolute;left:var(--pad);bottom:24px;z-index:3;margin:0}
/* the two menu leads: the full width, letters in once when first seen */
.xps .sub.lead.ll{max-width:none}
.lead.ll .ll-w{white-space:nowrap}
.lead.ll.ll-arm .ll-l{opacity:0}
.lead.ll.ll-in .ll-l{animation:tgIn .4s ease var(--d) backwards}
/* the party menu's group names (Meat & Poultry, Fish & Seafood, Vegetarian, Sweet, and the buns and bowls): the head face at
   reading size, the count beside them stays small (Nuo: "use larger font size for: Meat & Poultry, Fish & seafood, Vegetarian, Sweet") */
.fx-grp > .fx-k{font-size:clamp(17px,1.4vw,22px);letter-spacing:.02em;align-items:baseline}
.fx-grp > .fx-k em{font-size:12px;letter-spacing:.08em}
@media (max-width:860px){.hero .hline{bottom:56px;font-size:18px;letter-spacing:.04em}.hero .hkick{bottom:22px;max-width:40%}}
/* == THE TWO WAYS TO BOOK, 30 SEP 2026 == (Nuo: "move the buttons to the right aligned with the large text, match the spacing for the
   site cards on large screens"). Each card is a two-column grid: the kicker and the heading on the left, the pill on the heading's
   row at the right edge, centred on it; any paragraph runs under both. The gap between the two cards is the landing page's card gap:
   16px to 1440, +1px per 15px of screen, 48px from 1920. On a narrow phone (560px and under) the pill drops under the heading. */
.intro.one .ways{gap:16px}
@media (min-width:1441px){.intro.one .ways{gap:clamp(16px, calc(16px + (100vw - 1440px) / 15), 48px)}}
@media (min-width:561px){
  .way{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:12px;align-items:center}
  .way > h3{grid-column:1;grid-row:1;margin:0}
  .way > .pill{grid-column:2;grid-row:1;align-self:center;justify-self:end;margin:0}
  .way > p{grid-column:1 / -1;grid-row:2}
  .way > p:empty{display:none}
}

/* == THE BOOKING PANELS ON ONE SCREEN 30 SEP 2026 == (Nuo, after an interview: "make these 2 cards less tall so they both fit on
   one screen"; allowed: smaller headings and tighter form spacing - the site buttons keep their size). The kickers went from the
   markup; the empty approval paragraphs are not drawn; padding, gaps, fields and the notes box step down. */
.book .panel{padding:28px 32px 26px;gap:14px}
.book .panel h3{font-size:clamp(20px,1.7vw,26px)}
.book .panel > p:empty,.way > p:empty{display:none}
.enq form{gap:10px 16px}
.enq label{gap:4px}
.enq input,.enq select,.enq textarea{padding:9px 14px}
.enq textarea{min-height:60px}
.book .pdfs{padding-top:14px}
/* the hero zoomed out as far as it goes (Nuo, 30 Sep 2026: "zoom out hero image so we see more of the food"): the drift ran from
   1.03 to 1.12, cropping up to a further 12%; it now breathes from 1 to 1.03. The photograph is portrait (1864 x 2795) in a landscape
   hero, so at scale 1 cover already shows its full width - going further would need a landscape photograph. */
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.03)}}

/* == LOGOS FOR NAMES ON THE WHERE TO HAVE IT CARDS, NO FLOWER 13 OCT 2026 == (Nuo; christmas.js vcard) */
.vcard .who .vmark{display:block;margin:0 0 6px;line-height:0}
.vcard .who .vmark canvas{display:block}
.vcard .who:has(.vmark canvas) .name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vcard .fl{display:none}
@media (max-width:760px){.vcard .who .vmark{margin-bottom:4px}}
/* the + and - on every row, white on the dark page (Nuo, 13 Oct 2026: "Christmas page is missing the + and - ... show them in white") */
.xp>summary i{display:block;color:#FFFFFF}
.xp>summary i::before,.xp>summary i::after{background:#FFFFFF}

/* ===== PRUE'S REBUILD (review of 19 Oct 2026, built 20 Oct): the pitch, the occasions, every place in numbers ===== */
.pitch{padding:110px var(--pad) 30px;text-align:center}
.pitch .line{margin:0 auto;max-width:30ch;font-family:var(--head);font-weight:400;font-size:clamp(24px,2.6vw,40px);line-height:1.2;letter-spacing:-0.01em;color:var(--fx-ink)}
/* the pitch on two lines (Nuo, 7 Nov 2026): each half nowrap; the longer half (44 characters of mono, ~0.6em each) fits its column:
   100cqi / 27, capped at the old 40px, floored at the 11px phone floor; under 360px a half may wrap, balanced */
.pitch{container-type:inline-size}
.pitch .line{max-width:none;font-size:clamp(11px,calc(100cqi / 27),40px);text-wrap:balance}
.pitch .line .pl{display:block;white-space:nowrap}
@media (max-width:359px){.pitch .line .pl{white-space:normal;text-wrap:balance}}
.pitch .psub{margin:18px auto 0;font-family:var(--head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-acc)}
.occs{padding:60px var(--pad) 20px}
.occs .ogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.occ{display:block;color:var(--fx-ink);text-decoration:none}
.occ figure{margin:0 0 16px;aspect-ratio:3/2;overflow:hidden;background:#1a1614}
.occ figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .35s}
.occ h3{margin:0;font-family:var(--head);font-weight:400;font-size:clamp(17px,1.4vw,20px);letter-spacing:.06em;text-transform:uppercase}
.occ .sp{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--fx-ink)}
.occ .n{margin:6px 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fx-acc)}
@media (hover:hover){.occ:hover figure img{transform:scale(1.03);filter:brightness(.8)}.occ:hover h3{color:var(--fx-acc)}}
.numbers{padding:70px var(--pad) 70px}
.numbers h2{margin:0 0 24px;font-family:var(--head);font-weight:400;font-size:clamp(19px,1.6vw,22px);letter-spacing:.02em;text-transform:uppercase}
.numbers .tw{overflow-x:auto}
.numbers table{width:100%;border-collapse:collapse;font-size:15px}
.numbers th,.numbers td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-top:1px solid var(--fx-line2,rgba(242,236,233,.18))}
.numbers thead th{border-top:0;font-family:var(--head);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-mute)}
.numbers tbody th{font-weight:400}
.numbers tbody th span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fx-mute);margin-top:4px}
.numbers td{color:var(--fx-ink);font-variant-numeric:tabular-nums}
.numbers .fine{margin-top:18px;font-size:13px;color:var(--fx-mute)}
@media (max-width:860px){.pitch{padding-top:72px}.occs .ogrid{grid-template-columns:1fr;gap:32px}.numbers table{min-width:640px}}

/* ==== SANDSTONE, NOT BLACK (Georgia's video review via Nuo, 4 Nov 2026 ('All of it'): "The fade to black. I don't like, looks very
   corporate as is the black with the orange text"). Supersedes "Dark and candlelit" (Nuo, 12 Sep 2026), the black footer on
   Christmas (2 Oct 2026) and the single orange neon (12 Sep / 3 Oct 2026). Under the hero the page is the prototype's Sandstone
   with black type, like every other page; the festive tokens are redefined here, for this page only (festive.css's :root still
   serves the band on Menus and the site pages). The hero keeps white type over its photograph and no longer fades into the
   ground. The footer and the neon hovers go back to footer.js's defaults (the tokens unset). ==== */
body.xmas{--fx-bg:#F2ECE9;--fx-bg2:#EAE2DD;--fx-bg3:#E3DAD4;--fx-ink:#000;--fx-acc:#000;--fx-acc2:#000;--fx-mute:rgba(0,0,0,.62);--fx-line:rgba(0,0,0,.12);--fx-line2:rgba(0,0,0,.28);
  --n1:initial;--n2:initial;--n3:initial;--n4:initial;--dgf-bg:initial;--dgf-ink:initial;--btn:#000;--btn-hover:initial;background:#F2ECE9;color:#000}
body.xmas .hero{--fx-ink:#FFFFFF;--fx-acc:#FFFFFF;background:#000}   /* the kicker white too: no orange text */
body.xmas .hero .shade{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.06) 30%,rgba(0,0,0,.06) 62%,rgba(0,0,0,.42) 100%)}   /* no fade into the ground */
body.xmas .nav.solid{background:#F2ECE9;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 rgba(0,0,0,.08);--nav-ink-solid:#000}
body.xmas .nav.solid .logo.light{display:none}body.xmas .nav.solid .logo.dark{display:block}
body.xmas .nav.solid ul{color:#000}body.xmas .nav.solid .book{color:#000;border-color:currentColor}
body.xmas .occ figure{background:#E3DAD4}
body.xmas .occ .n{color:rgba(0,0,0,.62)}   /* the capacity line in ink, not orange */
@media (hover:hover){body.xmas .occ:hover h3{color:#000}}
body.xmas .xps .xp{--ink:#000}body.xmas .xps .xp[open]{border-top-color:#000}
body.xmas .xp>summary i{color:#000}body.xmas .xp>summary i::before,body.xmas .xp>summary i::after{background:#000}
/* the brochure: one plain link under the occasions, centred */
.brochure{padding:56px var(--pad) 72px;text-align:center}
.brochure .pill{color:#000;border-color:#000}

/* THE OCCASIONS AS PRIVATE EVENTS' BOXES (Nuo, 6 Nov 2026, 22:01: "Make Christmas page look like events page!"): each occasion is a
   photograph tile, darkened, its name in white caps across the middle (as /private-hire/'s Corporate Events / Big Groups / Christmas),
   the place and the numbers under it, small; darker and the photograph easing in on hover. 4:5 three across, 16:10 one across on a phone. */
.occs .ogrid{gap:16px}
body.xmas .occ{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:4/5;overflow:hidden;padding:0 20px;text-align:center;color:#fff;background:#141414}
body.xmas .occ figure{position:absolute;inset:0;margin:0;aspect-ratio:auto;background:#141414}
body.xmas .occ figure img{filter:none}
body.xmas .occ::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.36);transition:background .35s ease}
body.xmas .occ h3,body.xmas .occ .sp,body.xmas .occ .n{position:relative;z-index:1;color:#FFFFFF;text-shadow:0 1px 10px rgba(0,0,0,.45)}
body.xmas .occ h3{font-size:clamp(20px,2vw,30px);line-height:1.15;text-shadow:0 1px 14px rgba(0,0,0,.35)}
body.xmas .occ .sp{margin-top:12px;font-size:14px;opacity:.95}
body.xmas .occ .n{margin-top:4px;font-size:12px;color:#FFFFFF;opacity:.85}
@media (hover:hover){body.xmas .occ:hover::after{background:rgba(0,0,0,.55)}body.xmas .occ:hover figure img{transform:scale(1.03);filter:none}body.xmas .occ:hover h3{color:#FFFFFF}}
body.xmas .occ:focus-visible::after{background:rgba(0,0,0,.55)}
@media (max-width:860px){.occs .ogrid{gap:12px}body.xmas .occ{aspect-ratio:16/10}}

/* CHRISTMAS, BIG AND DOODLED (Nuo, 6 Nov 2026, 22:26; christmas.js .xhead) */
.hero .hline.xhead{display:flex;flex-direction:column;align-items:center;gap:10px;top:50%;bottom:auto;transform:translateY(-50%);text-transform:none;letter-spacing:0}
.hero .xhead .xw{position:relative;z-index:1;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:clamp(46px,9vw,140px);letter-spacing:.02em;line-height:1;color:#FFFFFF;text-shadow:0 2px 24px rgba(0,0,0,.45);animation:xhIn 1s cubic-bezier(.2,1.1,.3,1) .2s both}
.hero .xhead .xs{position:relative;z-index:1;font-family:var(--head);text-transform:uppercase;font-size:clamp(14px,1.4vw,20px);letter-spacing:.14em;color:#FFFFFF;text-shadow:0 1px 12px rgba(0,0,0,.5);animation:xhIn .8s ease .6s both}
.hero .xhead .xd-wrap{position:absolute;left:50%;top:50%;width:min(1000px,118%);height:clamp(150px,22vw,330px);transform:translate(-50%,-55%);pointer-events:none}
.hero .xdood{width:100%;height:100%;overflow:visible}
.hero .xdood .d{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:xdDraw .9s ease forwards,xdTw 2.6s ease-in-out infinite;filter:drop-shadow(0 1px 6px rgba(0,0,0,.4))}
.hero .xdood .s2{stroke:#F6C84C;fill:rgba(246,200,76,.25)}.hero .xdood .s4{stroke:#F6C84C}.hero .xdood .s3{stroke:#9fe3a8}
.hero .xdood .berry{stroke:#E5402B;fill:#E5402B;stroke-dashoffset:0;opacity:0;animation:xdFade .4s ease 1.9s forwards}
.hero .xdood .s1{animation-delay:.9s,2s}.hero .xdood .s2{animation-delay:1.1s,2.3s}.hero .xdood .s3{animation-delay:1.3s,2.6s}.hero .xdood .s4{animation-delay:1.5s,2.1s}
.hero .xdood .s5{animation-delay:1.7s,2.9s}.hero .xdood .s6{animation-delay:1.9s,2.4s}.hero .xdood .s7{animation-delay:2s,2.7s}.hero .xdood .s8{animation-delay:2.1s,3s}
.hero .xdood .d{transform-box:fill-box;transform-origin:center}
@keyframes xdDraw{to{stroke-dashoffset:0}}
@keyframes xdTw{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes xdFade{to{opacity:1}}
@keyframes xhIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:860px){.hero .xhead .xd-wrap{width:112%;height:clamp(130px,40vw,220px)}}
@media (prefers-reduced-motion:reduce){.hero .xhead .xw,.hero .xhead .xs{animation:none}.hero .xdood .d{animation:none;stroke-dashoffset:0}.hero .xdood .berry{opacity:1}}