/* Private Hire & Events (11 Sep 2026). Brand tokens as the rest of the prototype. */
@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)}
@view-transition{navigation:auto}                                          /* Tier 3 view transitions - see page.css for the why */
@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}
body{background:var(--sand);color:var(--ink);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
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:.08em;color:#3f3c39}
.pill{font-family:var(--head);font-size:14px;letter-spacing:-0.01em;padding:12px 20px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s,transform .2s}
.pill.fill{background:transparent;border-color:var(--blue);color:var(--blue)}   /* outlines only - V2 slide 79 (13 Sep 2026) */
.pill.light{border-color:#fff;color:#fff}
.pill.sand{background:var(--sand);border-color:var(--sand);color:var(--ink)}
@media (hover:hover){.pill:hover{background:transparent;border-color:var(--blue);color:var(--blue)}
.pill.fill:hover{background:transparent;border-color:var(--ink);color:var(--ink)}}
.pill.big{font-size:18px;padding:18px 32px}
section{padding:0 var(--pad)}
section[id]{scroll-margin-top:calc(var(--nav) + 16px)}   /* "Enquire now" and "Find your space" landed with the frame's top under the fixed nav */
h2.caps{font-size:clamp(28px,2.8vw,40px);letter-spacing:-0.02em;margin-bottom:20px}
.sub{font-size:clamp(17px,1.3vw,20px);line-height:1.45;color:#2b2926}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* nav */
.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}
.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:var(--sand);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.nav.solid .logo.light{display:none}.nav.solid .logo.dark{display:block}
.nav.solid ul{color:var(--ink)}.nav.solid .book{border-color:var(--blue);background:transparent;color:var(--blue)}

/* the floating bottom-right Enquire (.fab) went on 13 Sep 2026 - the fixed nav carries the one CTA. pulse stays: the
   Christmas pill's dot in the hero uses it */
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.55}}

/* ---- hero: the kinetic photo wall (not drawn since 4 Oct 2026 - see .slides below) ---- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#0d0b0a;color:#fff;padding:0}
.wall{position:absolute;inset:-12% -4%;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;transform:rotate(-6deg) scale(1.08)}
.wall .col{display:flex;flex-direction:column;gap:14px;animation:drift var(--dur,60s) linear infinite}
.wall .col:nth-child(even){animation-direction:reverse}
.wall .col img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;filter:saturate(1.05)}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
/* ---- hero: the slow crossfade (Prue / Nuo, 4 Oct 2026; hire.js heroSlides has the ruling) ----
   One photograph at a time, full bleed. Every slide is stacked at opacity 0; .on brings it to 1 over 1.5s (the dissolve),
   and hire.js holds each for 6s. The drift: .on also runs `kb`, a 1 -> 1.06 scale over 9s (longer than hold + fade, so it never
   reaches its end on screen), even slides growing from the centre, odd ones from a little left of it (transform-origin), so two
   in a row never move the same way. No drift on a phone (<= 860px) or under reduced motion: the dissolve alone, which is not motion.
   The old collage rules (.wall) stay below for the one-line way back. */
.hero .slides{position:absolute;inset:0;overflow:hidden;background:#0d0b0a}
.hero .slides .sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.5s ease-in-out;will-change:opacity}
.hero .slides .sl.on{opacity:1}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .hero .slides .sl{will-change:opacity,transform}
  .hero .slides .sl.on,.hero .slides .sl.off{animation:kb 9s linear forwards}   /* .off: the outgoing slide, for the 1.5s of the dissolve (hire.js) */
  .hero .slides .sl:nth-child(odd){transform-origin:40% 50%}
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.01)}}   /* one slow drift (Nuo, 13 Oct 2026): ~1% over a slide's 9s, was 6% */
}
/* the foot gradient only (Nuo, 4 Oct 2026: "light gradient only at the foot for the title, no full dark wash"); the 11 Sep
   full-height shade + bottom-left radial is gone with the collage. 38% of the height, clear to .55 black, under the tagline. */
/* 8 Nov 2026 (Nuo: "same tint as hero images on other pages", interviewed: "Match other heroes"): page.css's shade, top and foot */
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}
/* THE PILL COLUMN IS SIZED TO THE PILLS, NOT TO A RATIO (Nuo, 13 Sep 2026: three pills on one line on a desktop). At
   1.3fr/1fr the right column was 643px at a 1600px viewport and the three pills need 699 (231 + 220 + 220 + two 14px
   gaps, measured), so "Find your space" dropped to a second line. `auto` gives the column what the pills measure and the
   headline the rest: 781px at 1600, 381px at 1200 - and "a Party." at the 78px the clamp gives there is ~345px. */
.hero .copy{position:absolute;left:var(--pad);right:var(--pad);bottom:72px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.hero h1{font-size:clamp(44px,6.5vw,96px);letter-spacing:-0.02em;line-height:1.02}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:inline-block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
.hero h1 .l:nth-child(2) span{animation-delay:.12s}.hero h1 .l:nth-child(3) span{animation-delay:.24s;color:var(--dgreen)}
@keyframes rise{to{transform:none}}
/* the pills, one size, at the right, on the headline's baseline (Nuo, 11 Sep); never wrapping above the phone break
   (13 Sep) - the phone block below restores the wrap */
.hero .side{display:flex;justify-content:flex-end;align-items:flex-end;opacity:0;animation:fade 1s .6s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.hero .acts{display:flex;gap:14px;flex-wrap:nowrap;align-items:center;justify-content:flex-end}
.hero .acts .pill.big{min-width:220px;justify-content:center;white-space:nowrap}
.hero .k{color:rgba(255,255,255,.7)}
.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 SIMPLIFY PASS (17 Sep 2026, hire.js says why) ----
   .hero.one: ONE photograph (H.hero, the page's own hero on daisygreenfood.com) instead of the drifting wall of sixty;
   the same shade and copy block, the third-line green accent gone with the third line. .intro.one: the one sentence,
   centred, the reading measure - the shape of nineorchard.com's paragraph under its film. .xps: the expanders' band. */
.hero.one .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero.one h1 .l:nth-child(2) span{color:#fff}
.intro.one{display:block;padding:80px var(--pad) 56px;text-align:center}
.intro.one p{font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:#2b2926;margin:0 auto 6px;hyphens:manual}   /* one sentence a line, fitted by expand.js (17 Sep 2026); no measure cap */
.wallsec{padding-top:40px}
.xps .spot{padding:0}
.xps .spot .copy{grid-template-columns:1fr;margin-top:24px}
.xps .spot .copy p.body{max-width:none}
.xps{padding:24px 0 96px}
.xps .space,.xps .tours,.xps .enq,.xps .faq{padding-left:0;padding-right:0;padding-bottom:8px}
.xps .space .top{margin-bottom:24px}
.xps .rail{padding-left:0;padding-right:0}
.xps .faq{padding-top:0}
.xps .faq dd a,.xps .faq dd a:visited{text-decoration:underline;text-underline-offset:2px}

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

/* ---- intro + numbers ---- */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:96px var(--pad) 80px;align-items:start}
.intro p{font-size:clamp(15px,1.1vw,18px);line-height:1.5;color:#2b2926;margin-bottom:16px;hyphens:auto;-webkit-hyphens:auto}      /* one sentence a line (Nuo, 11 Sep); justified (10 Sep) */
.sub,.faq dd,.packtext p,.quote p,.enq .lead,.summary .fine,.space .note,.slider .fit,.tcard .blurb{hyphens:auto;-webkit-hyphens:auto}
.nums{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:20px;margin-top:8px}
.num{border-top:2px solid var(--ink);padding-top:14px}
.num b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(32px,3.2vw,56px);letter-spacing:-0.02em;line-height:1.02;white-space:nowrap}
.num span{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39;display:block;margin-top:8px}
/* the button to the LEFT of the quote line, both top-aligned (Nuo, 11 Sep) */
.quote{display:flex;gap:24px;align-items:flex-start;margin-top:32px}
.quote .pill{flex:0 0 auto}
.quote p{font-size:15px;line-height:1.5;color:#2b2926;max-width:44ch;margin:0;padding-top:4px}

/* ---- the photo wall: parties we have thrown ---- */
.wallsec{padding:24px var(--pad) 96px}
.wallsec .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
/* six across, three rows, one screen (Nuo, 11 Sep): twelve tiles, two of them 2x2, fill 18 cells exactly */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:min(calc((100vh - 340px) / 3),210px);grid-auto-flow:dense;gap:10px}
.tile{position:relative;overflow:hidden;border-radius:10px;background:#ddd;cursor:zoom-in}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);transform:scale(1.02)}
@media (hover:hover){.tile:hover img{transform:scale(1.08)}}
.tile .cap{position:absolute;left:14px;bottom:12px;color:#fff;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;text-shadow:0 1px 3px rgba(0,0,0,.6);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
@media (hover:hover){.tile:hover .cap{opacity:1;transform:none}}
.tile.reveal{transition-delay:var(--d,0s)}
/* .more (the mosaic's Show all button) moved to ../wall.js on 11 Sep 2026, which carries its own .dgmore */

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,8,8,.94);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.lb.on{display:flex}.lb.in{opacity:1}
.lb img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb .x,.lb .arrow{position:absolute;color:#fff;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.7);border-radius:999px;width:48px;height:48px;display:grid;place-items:center;font-size:20px}
.lb .x{top:20px;right:20px}.lb .arrow{top:50%;transform:translateY(-50%)}.lb .arrow.prev{left:20px}.lb .arrow.next{right:20px}
.lb .cap{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em}

/* ---- 3D tours: the walkthrough rail ---- */
/* the spotlight (11 Sep 2026; two cards, 13 Sep): the Instagram and LinkedIn embeds of the charity dinner side by side,
   the same width, tops aligned (Nuo, 13 Sep 2026), each as tall as its own content, and our copy under both at the
   frame's full width. Each card is a box of exactly the height its embed needs down to the bottom of the picture, with
   overflow hidden and an iframe 400px taller inside it, so what the platform draws below the picture is cut away and
   nothing scrolls. The heights are the platforms' measured layouts (hire.js has the figures and the dates):
     Instagram  header 54px + a 16:9 image of the full width            -> 56.25% + 54px
     LinkedIn   160px above the video + a 16:9 video 34px narrower       -> 56.25% + 140px  (160 - 19, one pixel of
                than the card (16px padding a side); ?collapsed=1 is        video rather than a line of white)
                what makes the 160 constant
   Percentage padding is measured against the box's width, which is what makes a fixed offset plus a ratio expressible
   without JavaScript. Under 350px LinkedIn's action bar wraps, but that is below the cut and does not move the video. */
.spot{padding:0 var(--pad) 96px}
.spot .frame{background:#000;color:var(--sand);border-radius:24px;padding:40px 48px}
/* BOTTOM-aligned (Nuo, 13 Sep 2026, after seeing it tops-aligned): both cards end at the bottom of their picture, so
   lining up the bottoms puts the two pictures side by side; LinkedIn's extra 86px (header 64 + caption 63 against
   Instagram's 54) shows as its card starting higher, not as a picture sitting lower */
.spot .cards{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
/* the Instagram column takes the row's full height (LinkedIn's), title at the top and embed at the bottom, so the title's
   top is the LinkedIn card's top and the two pictures stay level. The title has 86px to live in (LinkedIn's 140 - 54)
   and is one line by construction: nowrap, and 22 characters at the clamp's 24px are ~255px against a 319px card at the
   861px viewport, ~465px at 44px against 688px at 1600 (0.48em a character, Graphik, measured on the hero pills) */
.spot .col{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
.spot .col h2.t{font-size:clamp(24px,3vw,44px);letter-spacing:-0.03em;line-height:1;white-space:nowrap;margin:0 0 14px}
.spot .embed{position:relative;height:0;overflow:hidden;border-radius:14px;background:#fff}
.spot .embed.ig{padding-bottom:calc(56.25% + 54px)}
.spot .embed.li{padding-bottom:calc(56.25% + 140px)}
.spot .embed iframe{position:absolute;left:0;top:0;width:100%;height:calc(100% + 400px);border:0;background:#fff}
/* the copy: the title across the frame, then ONE row - the paragraph at a readable measure on the left and the pill at
   the frame's right edge, centred on the paragraph's height (Nuo, 13 Sep 2026: "bottom right of the card and middle
   aligned with the small text") */
.spot .copy{margin-top:40px;display:grid;grid-template-columns:1fr auto;column-gap:32px;align-items:center}
.spot .copy h2{grid-column:1 / -1;font-size:clamp(28px,3vw,44px);letter-spacing:-0.03em;line-height:1;margin-bottom:18px;text-wrap:balance}
.spot .copy p.body{color:rgba(242,236,233,.82);margin:0}
.spot .acts{display:flex;gap:10px;flex-wrap:wrap;justify-self:end}
.spot .acts .pill{border-color:rgba(242,236,233,.55);color:var(--sand)}
@media (hover:hover){.spot .acts .pill:hover{background:var(--sand);color:#000;border-color:var(--sand)}}
.spot .acts .pill.fill{background:transparent;border-color:#fff;color:#fff}   /* on the photograph: a white outline, no fill (V2 slide 79) */
.tours{padding:0 0 96px}
.tours .hd{padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
/* eight cards in a grid, four across, two rows – no horizontal scroll (Nuo, 11 Sep) */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:8px var(--pad) 8px}
.tcard{position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;background:#111;color:#fff;cursor:pointer;transform:perspective(1200px) rotateY(0);transition:transform .6s var(--ease)}
@media (hover:hover){.tcard:hover{transform:perspective(1200px) translateY(-6px)}}
.tcard img.th{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){.tcard:hover img.th{transform:scale(1.05)}}
.tcard .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.7))}
.tcard .body{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tcard .name{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:clamp(22px,2vw,28px);line-height:1.02}
.tcard .blurb{font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.85);max-width:30ch;margin-top:6px}
.tcard .play{width:48px;height:48px;border-radius:50%;background:var(--sand);color:var(--ink);display:grid;place-items:center;font-size:17px;flex:0 0 auto;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .3s}
@media (hover:hover){.tcard:hover .play{transform:scale(1.08)}}
.tcard .fl{position:absolute;left:16px;top:16px;width:22px;height:22px;animation:turn 40s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.tcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}   /* the tour plays inside the card */
.tcard.playing{cursor:default}
.tcard.playing .sh,.tcard.playing .body,.tcard.playing .fl{display:none}
@media (hover:hover){.tcard.playing:hover{transform:perspective(1200px) translateY(0)}}
.tcard.full{position:fixed;z-index:200;border-radius:0;transition:top .5s var(--ease),left .5s var(--ease),width .5s var(--ease),height .5s var(--ease),border-radius .5s;cursor:default;aspect-ratio:auto;transform:none}
.tcard .expand{position:absolute;top:16px;right:16px;z-index:3;background:#fff;color:#000;border:1.5px solid #000;border-radius:999px;padding:9px 16px;font-family:var(--head);font-size:12px}
@media (hover:hover){.tcard .expand:hover{background:#000;color:#fff}}
.tcard.ghost{visibility:hidden}
body.locked{overflow:hidden}

/* ---- find your space ---- */
.space{padding:0 var(--pad) 96px}
.space .top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:32px}
.slider{display:flex;flex-direction:column;gap:14px;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:22px 26px}
.slider .out{display:flex;justify-content:space-between;align-items:baseline}
.slider .out b{font-family:var(--head);font-weight:400;font-size:clamp(32px,3.2vw,56px);letter-spacing:-0.02em;line-height:1.02}
.slider .out b small{font-size:16px;letter-spacing:0;margin-left:8px;font-family:var(--body);text-transform:none}
.slider input[type=range]{width:100%;accent-color:var(--blue);height:32px}
.slider .fit{font-size:14px;color:#3f3c39}
.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 (Nuo, 30 Sep 2026) */
.vcard{position:relative;border-radius:16px;overflow:hidden;background:#111;color:#fff;aspect-ratio:4/5;display:block;transition:opacity .4s,transform .4s var(--ease),filter .4s}
.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72) 100%);pointer-events:none}   /* a shade under the body: at 390px the body is white type over the whole photograph, and Paradise's read as noise over its bright ceiling (audit, 24 Sep 2026). .body is position:absolute and later in the tree, so it paints above this */
.vcard .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.78))}
.vcard .body{position:absolute;left:18px;right:18px;bottom:16px;z-index:1}
/* the site mark above the name (Nuo, 14 Sep 2026). A block so the canvas marks.js appends sits on its own line,
   left-aligned with the name under it; the height is the mark's own, so a script and a caps lock-up each take
   the room they need. Hidden on a phone - see the 600px block at the foot of this file. */
.vcard .vmark{display:block;margin-bottom:8px;line-height:0}
.vcard .vmark canvas{display:block}
/* the locality under the mark, and the name hidden behind it — see the note in hire.js.
   :has(.vmark canvas) IS THE POINT AND NOT A FLOURISH. The swap must happen only when a mark ACTUALLY DREW, and
   the only honest evidence of that is the canvas marks.js appends. Keying off .vmark alone would hide the name
   on a card whose PNG 404'd and leave it anonymous; keying off a class set by script would need the script to
   know about this page. On a browser with no :has support the name simply stays, which is the old card back —
   redundant, never broken.
   .name is CLIPPED, not display:none, so a screen reader still reads the venue's full name off the card. */
.vcard .vqual{display:none;font-size:13px;line-height:1.2;color:rgba(255,255,255,.88);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:601px){
  .vcard .body:has(.vmark canvas) .name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .vcard .body:has(.vmark canvas) .vqual{display:block}
}
.vcard .name{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:20px;line-height:1}
.vcard .cap{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;margin-top:8px;color:rgba(255,255,255,.85)}
.vcard .rooms{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.vcard .rooms span{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.03em;padding:4px 8px;border:1.5px solid rgba(255,255,255,.8);border-radius:999px}   /* a room's name and its capacity: the 11px floor (was 9.5) */
.vcard .rooms span.ok{background:var(--dgreen);color:var(--ink);border-color:var(--dgreen)}
.vcard.dim{opacity:.32;filter:grayscale(.6);transform:scale(.97)}
.vcard .fl{position:absolute;top:14px;left:14px;width:22px;height:22px}
.space .note{font-size:13px;color:#5a5754;margin-top:18px}

/* ---- the pack: inline flip-book ---- */
.pack{padding:0 var(--pad) 96px}
.pack .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
/* ONE WHOLE PAGE (1600:1132) at a time, never split. The page height --bh is the smaller of 66vh, 700px and
   whatever the screen width allows; the dark box is exactly the page plus its padding and sits centred, so
   there is no band above, below or beside the page on any screen. */
/* the flip-book's styles are in ../flipbook.css since 15 Sep 2026 - this file's copy had drifted from
   page.css's (no .portrait rules, and the bar pills had lost their white ink). */
.packtext{margin-top:20px}
.packtext summary{cursor:pointer;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em;padding:12px 0}
.packtext .body{max-width:760px;padding:8px 0 0}
.packtext h2{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:26px;margin:28px 0 10px}
.packtext h3{font-family:var(--head);font-size:17px;margin:20px 0 6px}
.packtext p{font-size:16px;line-height:1.5;color:#2b2926;margin-bottom:10px}

/* ---- the form ---- */
.enq{padding:0 var(--pad) 96px}
/* light card (Nuo, 11 Sep: the dark one looked aggressive): paper white, ink border, blue for the send */
.enq .frame{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:24px;padding:40px;min-height:560px}
.enq h2{font-size:clamp(28px,2.8vw,40px);letter-spacing:-0.02em;margin-bottom:6px}
.enq .lead{color:#3f3c39;margin-bottom:26px;font-size:17px}
.steps{display:flex;gap:6px;margin-bottom:26px}
.steps i{flex:1;height:3px;border-radius:2px;background:rgba(0,0,0,.12);transition:background .3s}
.steps i.on{background:var(--blue)}
.step{display:none;animation:stepin .45s var(--ease)}
.step.on{display:block}
@keyframes stepin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.step h3{font-family:var(--head);font-size:clamp(22px,2vw,28px);letter-spacing:-0.02em;margin-bottom:18px;line-height:1.1}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips button{font-family:var(--head);font-size:14px;padding:12px 18px;border-radius:999px;border:1.5px solid rgba(0,0,0,.45);background:transparent;color:var(--ink);transition:all .2s}
@media (hover:hover){.chips button:hover{border-color:var(--ink)}}
.chips button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fields label{display:flex;flex-direction:column;gap:6px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39}
.fields label.wide{grid-column:1/-1}
.fields input,.fields textarea,.fields select{background:transparent;border:0;border-bottom:1.5px solid rgba(0,0,0,.35);padding:10px 0;font-size:20px;color:var(--ink);outline:0;border-radius:0;font-family:var(--body)}
.fields input:focus,.fields textarea:focus{border-bottom-color:var(--blue)}
.fields textarea{min-height:90px;resize:vertical;font-size:17px}
.fields .num{display:flex;align-items:center;gap:14px;border-top:0;padding-top:0}
.fields .num button{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(0,0,0,.45);background:transparent;color:var(--ink);font-size:20px}
@media (hover:hover){.fields .num button:hover{background:var(--ink);color:#fff}}
.fields .num input{width:90px;text-align:center;font-size:32px;font-family:var(--head)}
.navrow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.navrow .pill{border-color:var(--ink);color:var(--ink)}                 /* Back and Next: the same ink pill (Nuo, 11 Sep) */
.navrow .back[hidden]{visibility:hidden;display:inline-flex}
.enq .pill.go{background:transparent;border-color:var(--blue);color:var(--blue)}   /* outline only - V2 slide 79 (13 Sep 2026) */
@media (hover:hover){.enq .pill.go:hover{border-color:var(--ink);color:var(--ink)}}
.summary{background:var(--sand);color:var(--ink);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:14px;align-self:start;position:sticky;top:calc(var(--nav) + 20px)}
.summary .k{margin-bottom:-6px}
.summary .line{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(0,0,0,.1);padding:10px 0;font-size:16px}
.summary .line b{font-weight:300;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:#3f3c39;padding-top:3px}
.summary .line span{text-align:right;max-width:60%}
.summary .line span.empty{color:#9a958f}
.summary .fine{font-size:13px;color:#5a5754;margin-top:6px}
.summary .quick{margin-top:6px;font-size:14px}
.summary .quick a{text-decoration:underline}
.done{display:none;text-align:center;padding:40px 0}
.done.on{display:block}
.done h3{font-family:var(--head);font-size:clamp(22px,2vw,28px);letter-spacing:-0.02em;margin:16px 0 10px}
.done img{width:44px;height:44px;margin:0 auto}
.err{color:#B3261E;font-size:14px;margin-top:10px;min-height:20px}   /* was #FFB4B4, left over from the dark card: 1.7:1 on white, invisible (10 Sep audit) */

/* ---- the season (12 Sep 2026): the hero's Christmas pill, four numbers, the dark band, and the three festive sections
   drawn by ../christmas/festive-blocks.js (their own rules are in ../christmas/festive.css) ---- */
.hero .acts .pill.xmas{border-color:var(--orange);color:#fff;gap:10px}
.hero .acts .pill.xmas i{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px rgba(243,111,35,.9);animation:pulse 1.8s ease-in-out infinite}
@media (hover:hover){.hero .acts .pill.xmas:hover{background:var(--orange);border-color:var(--orange);color:#000}}
.nums.four{grid-template-columns:1fr 1fr 1fr 1.3fr}
.festive{padding:0 var(--pad) 96px}
.vcard .cap.sub2{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:12px;color:rgba(255,255,255,.75);margin-top:4px}
.food,.packs{background:var(--fx-bg,#0B0908);color:var(--fx-ink,#F2ECE9);padding:88px var(--pad) 96px}
.food + .packs{padding-top:0}
.food .hd,.packs .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.food .sub,.packs .sub{color:var(--fx-mute,rgba(242,236,233,.62))}
.packs .hd .right{text-align:right;flex:0 0 auto}
.packs .hd .right b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(30px,3vw,48px);letter-spacing:-0.03em;line-height:1}
.packs .hd .right span{display:block;font-family:var(--head);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;color:var(--fx-mute,rgba(242,236,233,.62));margin-top:8px}
.packs .fx-vat{margin-top:18px}

/* faq + footer */
.faq{padding:0 var(--pad) 88px}
.faq .grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px}
.faq dt{font-family:var(--head);text-transform:uppercase;letter-spacing:-0.02em;font-size:15px;margin-bottom:8px;line-height:1.2}
.faq dd{font-size:15px;line-height:1.5;color:#2b2926}
/* the footer's rules live in footer.js only (11 Sep 2026) - a per-page copy sat here and in four other stylesheets */

/* below 1200px the three pills at full size (699px) leave the headline under 380px, so they take the phone size and stay
   on one line (Nuo, 13 Sep 2026: smaller pills rather than a wrap): about 550px for three, ~430px for the headline at 1100 */
@media (max-width:1199px){.hero .acts .pill.big{min-width:0;font-size:16px;padding:16px 22px}}
@media (max-width:1100px){.mosaic{grid-template-columns:repeat(4,1fr)}.rail{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
  :root{--nav:60px;--pad:20px}body{font-size:16px}   /* one step down the scale on a phone */
  .spot{padding-bottom:56px}.spot .frame{padding:18px;border-radius:16px}.spot .cards{grid-template-columns:1fr;gap:18px}.spot .copy{margin-top:26px;grid-template-columns:1fr}.spot .copy h2{font-size:26px}.spot .acts{justify-self:start;margin-top:18px}   /* stacked: the pill under the paragraph */
  .nav ul{display:none}.nav .book{padding:10px 16px;font-size:13px}
  .hero{min-height:600px}.hero .copy{grid-template-columns:1fr;gap:20px;bottom:56px}
  /* pills in a 350px row: each takes its own width and never wraps its words ("Find your space" broke to two lines
     at flex:1 – Nuo, 11 Sep 2026); the row wraps again here, so on a narrow phone the third (or second) drops below */
  .hero .side,.hero .acts{justify-content:flex-start}.hero .acts{flex-wrap:wrap}.hero .acts .pill.big{min-width:0;flex:0 0 auto;font-size:16px;padding:16px 22px;white-space:nowrap}
  .hero h1{font-size:clamp(48px,15vw,90px)}
  .wall{grid-template-columns:repeat(3,1fr);inset:-16% -10%}
  .intro{grid-template-columns:1fr;gap:28px;padding:56px var(--pad) 48px}
  .nums{gap:12px}.nums.four{grid-template-columns:1fr 1fr}
  .festive{padding-bottom:56px}.food,.packs{padding:56px var(--pad) 64px}.food .hd,.packs .hd{flex-direction:column;align-items:flex-start;gap:12px}.packs .hd .right{text-align:left}
  .quote{flex-direction:column;gap:16px}                                 /* the pill beside a 130px column of text */
  .wallsec .hd,.tours .hd,.pack .hd{flex-direction:column;align-items:flex-start;gap:12px}   /* heading and paragraph shared 350px side by side */
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
  .tile.wide,.tile.big{grid-column:span 2}
  .tile .cap{opacity:1;transform:none}                                    /* hover-only captions never show on touch */
  /* the 3D rail had no rule under 860px: three 106x73px cards in 350px (measured 10 Sep 2026). Nuo: two a row,
     half the page each, name + a small play disc + a tiny Expand; the blurb waits for the desktop */
  .rail{grid-template-columns:1fr 1fr;gap:10px}
  .tcard{aspect-ratio:4/3}
  .tcard .body{left:10px;right:10px;bottom:10px;gap:8px}
  .tcard .name{font-size:14px}
  .tcard .blurb{display:none}
  .tcard .play{width:32px;height:32px;font-size:12px}
  .tcard .fl{left:10px;top:10px;width:16px;height:16px}
  .rail .tcard .expand{display:none}   /* no Expand on a phone in any state; a tap plays the tour in the card (Nuo, 11 Sep 2026) */
  .vcard .body{left:12px;right:12px;bottom:12px}.vcard .name{font-size:16px}
  .intro p,.sub,.faq dd,.packtext p,.quote p,.enq .lead{font-size:16px}.summary .fine{font-size:15px}   /* justified type one size down on a phone */
  .space .top{grid-template-columns:1fr;gap:20px}
  .vgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  /* Expand on a phone: the desktop rule kept 72px side padding and --bh = (100vw-144)/1.4134 = 174px, so the
     full-screen pack was a 246x174px box in a black overlay (measured). Full screen means full screen. */
  .enq .frame{grid-template-columns:1fr;padding:24px;border-radius:18px}
  .fields{grid-template-columns:1fr}
  .summary{position:static}
  .faq .grid{grid-template-columns:1fr}
}
/* ---- PHONE ONLY, 600px. Deliberately NOT in the 860px block above ---- */
/* THE ROOM CHIPS (Nuo, 14 Sep 2026: "make the pill buttons showing capacity of rooms smaller"). They were also
   silently BREAKING the card. .vcard is aspect-ratio 4/5 with overflow:hidden and .body is anchored to its
   BOTTOM, so a body taller than the card is clipped at the TOP - which cuts the venue name, the one thing on
   the card that has to be there. Measured at 375px before this: Paradise Green's body was 214px in a 203px
   card, its name gone and "Part of it - 200 standing, 70 seated" sitting over the figures. That is what Nuo
   photographed. The chips were the cause; the name was the casualty; nothing errored.

   THE TYPE STAYS AT 11px. A chip carries a room's name AND its capacity, and 11px is this repo's measured floor
   for a figure on a phone. So every change here is chrome - padding 4/8 to 2/6, the border 1.5px to 1px, the
   gaps, the body inset - and the result is a 27px chip at 22px with "THE BANK VAULTS - 80 / 40" now fitting
   its line instead of wrapping to two.

   Measured after, at 375px: Paradise's body 187px in the 203px card; all 14 cards clear their top edge.
   HEADROOM ON PARADISE IS 6px, AND THAT IS THE WHOLE MARGIN. It is the largest case the data holds - three
   rooms, a section line and the longest room name - so nothing today is worse. But one more word in hire-data
   and the name is clipped again with nothing to catch it. If this needs to be robust rather than merely
   correct, the lever is aspect-ratio:3/4 on the phone card, which buys 14px and changes the look of all 14.
   Not taken; it was not asked for, and it is recorded here so the choice is visible rather than forgotten.

   600px AND NOT 860px BECAUSE THE FAULT IS A NARROW CARD, NOT A SMALL SCREEN. .vgrid goes two-up at 860, where
   a card is ~415px and the body has room to spare; the clipping only starts under about 480px. Shrinking the
   chips at 860 would have made a tablet's 415px card carry 22px chips under a 16px name for no reason. */
@media (max-width:600px){
  /* NO SITE MARK ON A PHONE (Nuo, 14 Sep 2026, asked and answered before it was built). The card is 163px wide
     here, two-up; marks.js clamps a mark to its slot, so "Darcie & May Green" would come down to roughly a 10px
     letter body - under the 11px floor - sitting directly above the same words in plain type. The mark is a
     flourish that needs room, and the name is what the card is for. */
  .vcard .vmark{display:none}
  /* THE GUARD, ADDED 14 SEP 2026 AFTER MEASURING THE DEPLOYED BUILD. The chip shrink above was reported at 6px
     of headroom on Paradise; measured live it is 3px. Three pixels is not a margin, it is a coincidence, and the
     thing it is protecting is the venue name - .body is anchored to the card's BOTTOM, so when it overgrows, the
     card's overflow:hidden takes the TOP of it, which is the name.
     max-height caps the box at 12px under the card, so the clipping now happens at the BOTTOM of .body: a room
     chip loses its edge instead of the name disappearing. Nothing is clipped today - Paradise's body is 190px
     against a 191px cap - so this changes no pixel on any of the fourteen cards; it changes WHICH END fails when
     hire-data.js next gains a word. The real fix if that happens is aspect-ratio:3/4 here, worth 14px, which
     makes the phone cards a fifth taller and was not asked for. */
  .vcard .body{left:10px;right:10px;bottom:10px;max-height:calc(100% - 12px);overflow:hidden}
  .vcard .cap{margin-top:5px}
  .vcard .cap.sub2{margin-top:3px}
  .vcard .rooms{margin-top:5px;gap:4px}
  .vcard .rooms span{letter-spacing:.01em;padding:2px 6px;border-width:1px}   /* font-size untouched on purpose: 11px is the floor */
  /* the occasion chips in the enquiry form, same instruction. These carry no figure, so the type CAN move:
     14px with 12/18 padding was a 44px pill, two to a row at 375px; 13px with 9/14 is 40px, still well clear
     of the 24px tap floor. */
  .chips{gap:8px}
  .chips button{font-size:13px;padding:9px 14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wall .col,.hero .acts .pill.xmas i,.hero h1 .l span,.hero .side,.hero .cue,.tcard .fl,.step{animation:none}
  .hero h1 .l span{transform:none}.hero .side{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)}}
/* == STATEMENT LINES 27 SEP 2026 == Nuo, 27 Sep 2026: "make this text ALL CAPS and larger font size" - the landing tagline, the Art line and the Private Hire lines, at the section-heading size (28-40px), in the head face; size wins over the 17 Sep one-line rule, so data-oneline is off these and a long line wraps into balanced lines */
.intro.one p{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:clamp(28px,2.8vw,40px);letter-spacing:.02em;line-height:1.2;text-wrap:balance;margin-bottom:10px}
/* == THE TWO POSTS, ONE SIZE 27 SEP 2026 == Nuo: "these 2 videos should be the same height and width side by side!". Measured: the
   title's nowrap width sat inside the Instagram column, so a 1fr/1fr grid gave Instagram ~80% of the row and LinkedIn the rest.
   The title now spans the row above (hire.js .spt); the columns are minmax(0,1fr) so no content can widen one; and both frames take
   the same box - LinkedIn's (its header and caption need the room; Instagram simply shows more of its picture). Tops and bottoms
   level. */
.spot h2.t.spt{font-size:clamp(24px,3vw,44px);letter-spacing:-0.03em;line-height:1.05;margin:0 0 18px;text-wrap:balance}
.spot .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.spot .col{display:block}
.spot .embed.ig,.spot .embed.li{padding-bottom:calc(56.25% + 140px)}
@media (max-width:860px){.spot .cards{grid-template-columns:minmax(0,1fr)}}

/* == THE MOMENTS POSTS AS SOCIAL CARDS 27 SEP 2026 == the press page's .licard (press.css), copied here because this page does
   not load press.css; the two sit side by side one size, stacked on a phone. .liplay marks a post that is a film. */
.spot .cards{align-items:stretch}
.licard{display:flex;flex-direction:column;min-height:0;background:#fff;border-radius:16px;overflow:hidden;color:var(--ink,#000);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
@media (hover:hover){.licard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.3)}}
.lihead{display:flex;align-items:center;gap:12px;padding:14px 18px 14px 16px;flex:none}
.liav{flex:0 0 48px;width:48px;height:48px;border-radius:8px;background:var(--sand);display:grid;place-items:center}
.liav img{width:38px;height:auto;display:block}
.liwho{display:flex;flex-direction:column;gap:2px;min-width:0}
.liwho b{font-family:var(--head);font-weight:500;font-size:15px;letter-spacing:-0.01em;color:#111;line-height:1.2}
.liwho span{font-size:13px;line-height:1.2;color:#5b5652}
.limark{margin-left:auto;display:block;width:26px;height:26px;flex:0 0 26px}
.limark img{width:100%;height:100%;display:block;filter:invert(1);opacity:.85;transition:opacity .2s}
@media (hover:hover){.licard:hover .limark img{opacity:1}}
.lipic{position:relative;display:block;aspect-ratio:4/3;background:#000;overflow:hidden}
.lipic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
@media (hover:hover){.licard:hover .lipic img{transform:scale(1.04)}}
.licap{position:absolute;left:0;right:0;top:0;padding:14px 16px 44px;color:#fff;font-size:15px;line-height:1.35;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.9)}
.liplay::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fff}

/* == THE MOMENTS POSTS PLAY IN THE CARD 29 SEP 2026 == (Nuo: "why can't we play the content for these 2 cards directly in the
   cards?!"). The network's player under our header, 16:9, flush to the sides; a player card does not lift on hover. Instagram's
   own 54px header sits above the frame (top:-54px) and its caption below it, so the frame shows the film alone. */
@media (hover:hover){.spot .licard:hover{transform:none;box-shadow:none}}
.spot .licard .player{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.spot .licard .player iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block}
.spot .licard.instagram .player iframe{top:-54px;height:calc(100% + 54px + 400px)}

/* == THE TAGLINE 30 SEP 2026 == index.html's .hero .hline, the same rules (hire.js has the ruling). 64px up (56 on a phone) so the
   scroll cue at 22px sits clear below it. */
.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) */
@media (max-width:860px){.hero .hline{bottom:56px;font-size:18px;letter-spacing:.04em}}
/* == THE LANDING PAGE'S CARD GAP 30 SEP 2026 == (Nuo: "use the same dynamic spacing between cards for these sections on the private
   hire page") - the venue cards under How Many Are Coming? and The Spaces in 3D: 16px to 1440, +1px per 15px of screen, 48px from
   1920, as index.html's --gw. Phones keep their 10px. */
@media (min-width:1441px){.rail{gap:clamp(16px, calc(16px + (100vw - 1440px) / 15), 48px)}}   /* .vgrid left this rule 13 Oct 2026 (Nuo: "reduce the space between the site cards, make it consistent with the site cards on the landing page") - 16px at every desktop width, as the landing page's cards; it was 44px at 1864 */

/* the 3D tour cards carry the site's mark in place of its typed name (Nuo, 30 Sep 2026); the name is hidden only once a mark drew */
.tcard .tmark{display:block;margin-bottom:10px;line-height:0}
.tcard .tmark canvas{display:block}
.tcard .body:has(.tmark canvas) .name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:860px){.tcard .tmark{margin-bottom:6px}}
/* SEVEN ACROSS ON A LARGE SCREEN (Nuo, 30 Sep 2026: "show these cards 7 side by side on 2 rows on large screens") - the fourteen
   venues as two rows of seven from 1441px, the threshold the rest of the big-screen rules use; below it the auto-fill 240px rule stands */
@media (min-width:1441px){.vgrid{grid-template-columns:repeat(7,minmax(0,1fr))}}


/* THE CAPACITIES ON HOVER (Nuo, 30 Sep 2026: "do not show the capacity text and pill by default, only when the mouse hovers over a
   card display those"). The card shows the mark and the neighbourhood; the standing / seated line, the part-of line and the room
   pills fold open under them on hover or keyboard focus (a 0fr -> 1fr row, so it rises to its own height). A touch screen has no
   hover, so there the capacities stay shown - otherwise a phone could never read them. */
.vcard .vmore{display:grid;grid-template-rows:1fr}
.vcard .vmore>div{min-height:0;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .vcard .vmore{grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s var(--ease),opacity .3s ease}
  .vcard:hover .vmore,.vcard:focus-visible .vmore,.vcard:focus-within .vmore{grid-template-rows:1fr;opacity:1}
}

/* == MOMENTS ON DARK SANDSTONE 4 OCT 2026 == (Nuo: "for this card, change the background to dark sandstone"). The footer's
   #E6DDD7 (footer.js, 2 Oct 2026), so the frame is the same ground as the footer; the title and paragraph turn black. The two
   social cards stay white. */
.spot .frame{background:#E6DDD7;color:#000}
.spot h2.t.spt{color:#000}
.spot .copy p.body{color:#000}
/* PARTIES WE HAVE THROWN centred over its wall (Nuo, 13 Oct 2026) */
.wallsec .hd{justify-content:center;text-align:center}
/* == THE SPACES CARDS LIKE CHRISTMAS'S, LOGOS FOR NAMES 13 OCT 2026 == (Nuo; see hire.js spaceCard). Logo over its place, then the
   standing / seated figures, the part-hire line and the rooms; the tour line opens on hover. The logo shows on a phone too now (it
   supersedes the 14 Sep "no mark on a phone" - "use site logos instead of site names on all site cards"), drawn smaller; the typed
   name stays hidden for a screen reader and comes back only if a logo fails to draw. */
.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::after{display:none}
.vcard .sh{background:linear-gradient(180deg,rgba(11,9,8,.1) 0%,rgba(11,9,8,0) 30%,rgba(11,9,8,.85) 100%)}
.vcard .body{display:flex;flex-direction:column;gap:8px;max-height:calc(100% - 28px);overflow:hidden}
.vcard .who .vmark{display:block;margin:0 0 6px;line-height:0}
.vcard .who .name{font-family:var(--head);font-weight:400;font-size:clamp(18px,1.5vw,22px);letter-spacing:-0.02em;line-height:1.05}
.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 .area{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.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,.75);margin-top:4px}
.vcard .sect{font-size:12px;line-height:1.3;color:rgba(255,255,255,.78)}
.vcard .rooms{margin-top:0}
.vcard .blurb{font-size:13px;line-height:1.4;color:rgba(255,255,255,.85);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}}
@media (max-width:600px){
  .vcard .who .vmark{display:block;margin-bottom:4px}
  .vcard .body{gap:5px;max-height:calc(100% - 12px)}
  .vcard .caps2{gap:12px}.vcard .caps2 div b{font-size:18px}
  .vcard .sect{font-size:11px}
  .vcard .blurb{display:none}
}
/* THE SPACES, ALWAYS OPEN (13 Oct 2026, hire.js): the row's rule and title without the +/-, so it sits in the list like the others */
.xp.xpo{border-top-color:var(--ink,#000)}
.xpo-h{display:flex;align-items:center;padding:26px 0}
.xpo-h h2{margin:0;font-family:var(--head);font-weight:400;font-size:clamp(19px,1.6vw,22px);letter-spacing:.02em;line-height:1.1;text-transform:uppercase}
@media (max-width:860px){.xpo-h{padding:20px 0}.xpo-h h2{font-size:18px}}
/* THE DETAIL ON HOVER ONLY (Nuo, 13 Oct 2026: "do not show text like these by default, only when the mouse hovers over a site card"):
   the part-hire line and the room chips are folded away until the card is hovered or focused, then open with the tour line. A touch
   screen has no hover, so there they stay shown. */
@media (hover:hover){
  .vcard .sect,.vcard .rooms{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .45s var(--ease),opacity .35s}
  .vcard:hover .sect,.vcard:focus-visible .sect,.vcard:focus-within .sect{max-height:40px;opacity:1}
  .vcard:hover .rooms,.vcard:focus-visible .rooms,.vcard:focus-within .rooms{max-height:120px;opacity:1}
}
/* EVERY CARD'S TEXT ON ONE BASELINE (Nuo, 13 Oct 2026: "bottom align all the text within these site cards!"). The folded lines (part
   hire, rooms, tour line) still took the flex gap while hidden, so a card that has them sat its figures 8-24px higher. The gap goes;
   the always-shown parts carry their own spacing, and a folded line takes space only when it opens. */
.vcard .body{gap:0}
.vcard .caps2{margin-top:10px}
.vcard .sect,.vcard .rooms,.vcard .blurb{margin-top:0}
@media (hover:hover){
  .vcard:hover .sect,.vcard:focus-visible .sect,.vcard:focus-within .sect,
  .vcard:hover .rooms,.vcard:focus-visible .rooms,.vcard:focus-within .rooms,
  .vcard:hover .blurb,.vcard:focus-visible .blurb{margin-top:8px}
}
@media (hover:none){.vcard .sect,.vcard .rooms{margin-top:6px}}

/* ===== PRUE'S ORDER (review of 19 Oct 2026, built 20 Oct 2026) - hire.js says what each section is ===== */
/* THE PURPOSE BOXES: three photographs, the title centred on each; the photograph darkens on hover (her words) */
.purpose{padding:64px var(--pad) 0}
.purpose .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.purpose .pbox{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#141414;color:#fff;text-decoration:none}
.purpose .pbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.purpose .pbox::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22);transition:background .35s ease}
.purpose .pbox h2{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;margin:0;padding:0 20px;text-align:center;font-family:var(--head);font-weight:400;font-size:clamp(20px,2vw,30px);letter-spacing:.06em;line-height:1.15;text-transform:uppercase;color:#fff}
@media (hover:hover){.purpose .pbox:hover::after{background:rgba(0,0,0,.55)}.purpose .pbox:hover img{transform:scale(1.03)}}
.purpose .pbox:focus-visible::after{background:rgba(0,0,0,.55)}
@media (max-width:860px){.purpose{padding-top:40px}.purpose .pgrid{grid-template-columns:1fr;gap:12px}.purpose .pbox{aspect-ratio:16/10}}
/* THE PROOF: the B Corp mark and three awards in a row, then one line - who we have hosted, by name */
.proof{padding:56px var(--pad) 8px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.proof .marks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 44px}
.proof .marks img{height:46px;width:auto;max-width:190px;object-fit:contain}
.proof .who{margin:0;font-size:15px;letter-spacing:.01em;color:#3f3c39}
@media (max-width:860px){.proof .marks{gap:18px 26px}.proof .marks img{height:34px}}
/* THE CASE STUDIES: Rocket's card - the photograph, the event, where and when, one paragraph; a gap says so */
.cases .cgrid,#cases .cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-bottom:40px}
.case figure{margin:0 0 16px;aspect-ratio:3/2;overflow:hidden;background:#e6ddd7}
.case figure img{width:100%;height:100%;object-fit:cover;display:block}
.case h3{margin:0;font-family:var(--head);font-weight:400;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.case .where{margin-top:6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6b6560}
.case p{margin:12px 0 0;font-size:15px;line-height:1.55;max-width:none}
.case .facts{margin-top:10px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.case blockquote{margin:12px 0 0;font-size:15px;font-style:italic}
.case .links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:13px}
.case .links a{text-decoration:underline;text-underline-offset:3px}
.case .todo{margin-top:12px;font-size:12px;line-height:1.45;color:#8a837d}
@media (max-width:860px){#cases .cgrid{grid-template-columns:1fr;gap:36px}}
/* EAT & DRINK: three canapé photographs over the party menu (the shared renderer, christmas/festive-blocks.js) */
#food .fpics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}
#food .fpics figure{margin:0;aspect-ratio:4/3;overflow:hidden}
#food .fpics img{width:100%;height:100%;object-fit:cover;display:block}
#food .fx{padding:0 0 40px}
@media (max-width:860px){#food .fpics{grid-template-columns:1fr 1fr}#food .fpics figure:nth-child(3){display:none}}
/* THE NAMED ROOMS ON SHOW (Prue's review, 19 Oct 2026: named rooms with their numbers, Quo Vadis's way). Since 13 Oct the room
   chips only opened on hover (Nuo); her ask is newer, so they show at rest. The part-hire line still waits for the hover. */
@media (hover:hover){.vcard .rooms{max-height:none;opacity:1;margin-top:8px}}
/* SEVEN A ROW, AND THE NOTE ON ONE LINE (Nuo, 5 Nov 2026, 16:16: "show these 7 cards on each line"; "show this text on one line"):
   the fourteen spaces are two rows of seven on every desktop from 1100px (was from 1441px, 4 Nov - below it auto-fill drew eight);
   the hire-too note under them runs the full width on one line where it fits, wraps on a phone. */
@media (min-width:1100px){.vgrid{grid-template-columns:repeat(7,minmax(0,1fr))}.space .note{max-width:none;white-space:nowrap;text-wrap:nowrap}}

/* SIX SPACES, ONE ROW THAT SCROLLS SIDEWAYS (6 Nov 2026 website meeting) */
.vgrid.vcar{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:minmax(300px,calc((100% - 3 * 16px) / 3.4));gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;justify-content:start!important}
.vgrid.vcar .vcard{scroll-snap-align:start;aspect-ratio:4/5;width:auto!important}
.space .plan{text-align:center;margin:28px 0 0;max-width:none!important}
@media (max-width:760px){.vgrid.vcar{grid-auto-columns:78%}}

/* THE SLIDESHOW ON TOP (6 Nov 2026, from Supernormal): one large photograph, a thumbnail strip, centred in the column */
.slides-top{padding:56px var(--pad) 8px;max-width:1200px;margin:0 auto}
.slides-top .st-stage{position:relative;aspect-ratio:16/10;max-height:62vh;width:100%;overflow:hidden;background:#E6DDD7}
.slides-top .st-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}
.slides-top .st-slide.on{opacity:1}
.slides-top .st-slide img{width:100%;height:100%;object-fit:cover;display:block}
.slides-top figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font-family:var(--head);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.slides-top .st-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1.5px solid #fff;background:rgba(0,0,0,.25);color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2}
.slides-top .st-arrow.prev{left:14px}.slides-top .st-arrow.next{right:14px}
.slides-top .st-thumbs{display:flex;gap:6px;justify-content:center;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.slides-top .st-thumbs::-webkit-scrollbar{display:none}
.slides-top .st-th{flex:0 0 auto;width:64px;height:44px;padding:0;border:0;background:none;cursor:pointer;opacity:.55;transition:opacity .2s}
.slides-top .st-th.on,.slides-top .st-th:hover{opacity:1;outline:1.5px solid #000;outline-offset:2px}
.slides-top .st-th img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.slides-top{padding:32px 16px 0}.slides-top .st-stage{aspect-ratio:4/5}.slides-top .st-th{width:48px;height:36px}}
@media (prefers-reduced-motion:reduce){.slides-top .st-slide{transition:none}}

/* == THE OCCASION POP-UPS (Nuo, 6 Nov 2026, 23:24; hire.js POPS / openPop) == a box that opens a pop-up is a button: no button chrome.
   The dialog: Sandstone, square like the page's buttons, its photograph full width with a slow push-in and the title in white on it
   (text on a photograph is white, 2 Oct 2026), then the words and the spaces rising in one after another (--i). No glow (12 Oct 2026). */
button.pbox{border:0;padding:0;margin:0;width:100%;font:inherit;cursor:pointer;text-align:center;border-radius:0}
html.hp-lock{overflow:hidden}
dialog.hp-dlg{width:min(1080px,calc(100vw - 48px));max-width:none;max-height:calc(100svh - 48px);padding:0;border:0;background:#F2ECE9;color:#111;overflow:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(28px) scale(.985);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.25,1)}
dialog.hp-dlg.in{opacity:1;transform:none}
dialog.hp-dlg::backdrop{background:rgba(17,17,17,0);backdrop-filter:blur(0);transition:background .3s ease,backdrop-filter .3s ease}
dialog.hp-dlg.in::backdrop{background:rgba(17,17,17,.55);backdrop-filter:blur(6px)}
.hp-dlg .hp-x{position:sticky;top:14px;float:right;margin:14px 14px -58px 0;z-index:3}
.hp-top{position:relative;height:clamp(240px,46vh,440px);overflow:hidden;background:#141414}
.hp-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 6s cubic-bezier(.2,.7,.2,1)}
.hp-dlg.in .hp-top img{transform:scale(1)}
.hp-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 100%)}
.hp-top h2{position:absolute;left:clamp(20px,4vw,48px);right:clamp(20px,4vw,48px);bottom:clamp(18px,3.5vw,40px);margin:0;color:#FFFFFF;font-family:var(--head);font-weight:400;
  font-size:clamp(30px,5vw,64px);line-height:1;letter-spacing:.04em;text-transform:uppercase;opacity:0;transform:translateY(16px);transition:opacity .5s ease .15s,transform .7s cubic-bezier(.2,.9,.25,1) .15s}
.hp-dlg.in .hp-top h2{opacity:1;transform:none}
.hp-in{padding:clamp(24px,4vw,48px)}
.hp-s{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.25,1);transition-delay:calc(.25s + var(--i,0) * 55ms)}
.hp-dlg.in .hp-s{opacity:1;transform:none}
.hp-lead{margin:0 0 22px;font-size:clamp(18px,1.6vw,22px);line-height:1.45}
.hp-occ{list-style:none;margin:0 0 40px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hp-occ li{font-family:var(--head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border:1px solid rgba(0,0,0,.35)}
.hp-h{margin:0 0 16px;font-family:var(--head);font-weight:400;font-size:clamp(20px,2vw,28px);letter-spacing:.04em;text-transform:uppercase}
.hp-sp{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:40px}
.hp-sp.big{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-v{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.hp-vp{display:block;aspect-ratio:4/3;overflow:hidden;background:#ddd;margin-bottom:10px}
.hp-vp img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hp-vn{font-family:var(--head);font-size:15px;letter-spacing:.02em}
.hp-va{font-size:13px;color:#5c5650;margin-top:2px}
.hp-vc{font-family:var(--head);font-size:12px;letter-spacing:.04em;margin-top:6px}
@media (hover:hover){.hp-v:hover .hp-vp img{transform:scale(1.05)}.hp-v:hover .hp-vn{color:#F36F23}}
.hp-ph{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:32px}
.hp-ph figure{margin:0;position:relative;aspect-ratio:1;overflow:hidden;background:#ddd}
.hp-ph img{width:100%;height:100%;object-fit:cover;display:block}
.hp-ph figcaption{position:absolute;left:10px;right:10px;bottom:8px;color:#FFFFFF;font-family:var(--head);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hp-mk{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(18px,3vw,40px);margin-bottom:32px}
.hp-mk img{height:46px;width:auto;mix-blend-mode:multiply;filter:grayscale(1)}
.hp-go{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media (max-width:860px){
  dialog.hp-dlg{width:100vw;max-height:100svh;height:100svh;margin:0;inset:0}
  .hp-top{height:42svh}
  .hp-sp.big{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-sp{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hp-ph{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-mk img{height:34px}
}
@media (prefers-reduced-motion:reduce){dialog.hp-dlg,.hp-s,.hp-top img,.hp-top h2{transition:none!important;transform:none!important}}
.hp-vc span{display:block}   /* standing, then seated, each on its own line - never broken mid-figure */
@media (min-width:861px){dialog.hp-dlg{position:fixed;inset:0;margin:auto;height:fit-content}}   /* centred on a desktop (a page rule had pinned dialogs left) */
.hp-mk img[src*="liv-"]{height:70px;margin:-12px 0}   /* the LIV file's ink is its middle half: shown at the others' height */
.hp-vn,.hp-va,.hp-vc{display:block;min-width:0}.hp-v{min-width:0}   /* blocks, so keep-names.js can measure a long name and give it back its line break where it would stick out (Peggy Jean at Riverside) */
@media (min-width:861px){.hp-sp:not(.big){grid-template-columns:repeat(4,minmax(0,1fr))}}   /* four across, so every venue's name sits on one line */
.hp-vn{text-wrap:balance}

/* == FLICKING THROUGH (Nuo, 6 Nov 2026, 23:54; hire.js fillHeroSlides adds .flick) == the next photograph lies under the one showing, fully there;
   the one showing is thrown off the pile - lifted, turned and slid away to the right (every other one to the left) in 0.65s - while the new one
   settles from a hair larger. No dissolve. */
.hero .slides.flick .sl{transition:none;opacity:0;z-index:1}
.hero .slides.flick .sl.on{opacity:1;z-index:2;animation:flickIn .9s cubic-bezier(.2,.7,.2,1) both}
.hero .slides.flick .sl.off{opacity:1;z-index:3;animation:flickOut .65s cubic-bezier(.55,.05,.7,.4) forwards;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.hero .slides.flick .sl.off.left{animation-name:flickOutL}
@keyframes flickIn{from{transform:scale(1.04)}to{transform:scale(1)}}   /* no filter here: it replaced the matte (8 Nov 2026) */
@keyframes flickOut{0%{transform:translate(0,0) rotate(0) scale(1)}25%{transform:translate(3%,-1.5%) rotate(1.5deg) scale(1.02)}100%{transform:translate(118%,4%) rotate(9deg) scale(1.02)}}
@keyframes flickOutL{0%{transform:translate(0,0) rotate(0) scale(1)}25%{transform:translate(-3%,-1.5%) rotate(-1.5deg) scale(1.02)}100%{transform:translate(-118%,4%) rotate(-9deg) scale(1.02)}}