/* L&B modern system (Oct 2026 refresh). Loaded after base/shared/group on every page. */
:root{--pop:#b9532c;--pop2:#9a5a26;--ink-deep:#121212;--glass:rgba(255,255,255,.62);--ease:cubic-bezier(.2,.8,.2,1);--hh:64px;--r:22px}
html{scroll-padding-top:calc(var(--hh) + 16px);scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip;-webkit-font-smoothing:antialiased}
:target{scroll-margin-top:calc(var(--hh) + 16px)}
/* header: compact, sticky, glass on scroll */
.lb-head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--v-bg) 78%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s,background .3s}
.lb-head.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.08);border-bottom-color:color-mix(in srgb,var(--v-ink) 8%,transparent);background:color-mix(in srgb,var(--v-bg) 90%,transparent)}
.lb-head .wrap{height:var(--hh)}
.lb-nav{gap:4px}.lb-nav a{padding:9px 12px;border-radius:999px;opacity:.9;transition:background .2s,opacity .2s}
.lb-nav a:hover{background:color-mix(in srgb,var(--v-ink) 8%,transparent);opacity:1}
.lb-cta .btn{height:40px}
@media (max-width:1000px){:root{--hh:58px}.lb-head .wrap{height:var(--hh)}.lb-burger{border:0;background:color-mix(in srgb,var(--v-ink) 8%,transparent)}}
/* type: bolder scale */
.h-xl{font-weight:500;font-size:clamp(52px,9vw,140px);line-height:.9;letter-spacing:-.035em}
.h-l{font-weight:500;font-size:clamp(40px,5.6vw,84px);line-height:.95;letter-spacing:-.03em}
.h-m{font-weight:500;letter-spacing:-.02em}
.eyebrow{letter-spacing:.16em}
.pop{background:linear-gradient(100deg,var(--pop),var(--pop2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* buttons: micro-interactions */
.btn{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.btn:focus-visible{outline:3px solid var(--pop);outline-offset:3px}
.btn-glass{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.28)}
/* cards: hover lift */
.lift{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.lift:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(0,0,0,.45)}
/* roundels: bob + hover spin */
@keyframes lb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes lb-spin{to{transform:rotate(360deg)}}
.bob{animation:lb-bob 4.5s ease-in-out infinite}
.spin-hover{transition:transform .8s var(--ease)}
a:hover .spin-hover,.spin-hover:hover{transform:rotate(-14deg) scale(1.06)}
/* scroll reveal (JS adds .js to <html>; content stays visible without JS) */
.rv-on [data-rv]:not(.in){opacity:0;}.rv-on [data-rv]{transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv-on [data-rv=left]:not(.in){transform:translateX(-28px)}.rv-on [data-rv=right]:not(.in){transform:translateX(28px)}.rv-on [data-rv=zoom]:not(.in){transform:scale(.96)}
.js [data-rv].in{opacity:1;transform:none}
/* fewer frames: soften old borders */
.g-card,.ph-room,.vc2,.lp-card{border:0!important}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .js [data-rv]{opacity:1;transform:none}
}
.btn-pop{background:linear-gradient(100deg,var(--pop),#c75d2e);color:#fff;border:0}
/* ---- rollout: shared polish for venue + group pages ---- */
main h1{letter-spacing:-.03em}
main h2{letter-spacing:-.02em}
.g-h1{font-weight:500!important;font-size:clamp(48px,7vw,104px)!important;line-height:.94!important;letter-spacing:-.035em}
.g-h2{font-weight:500!important;letter-spacing:-.025em}
.g-hero{padding-top:clamp(48px,7vw,96px)!important}
.g-s{padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px)}
.g-wash{border-radius:36px;margin-left:clamp(8px,1.5vw,20px);margin-right:clamp(8px,1.5vw,20px)}
.g-card,.lp-type,.ph-room,.ct-v,.po-rel a,.st-card{border-radius:var(--r)}
.g-card,.lp-type,.ph-room,.ct-v{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.g-card:hover,.lp-type:hover,.ph-room:hover,.ct-v:hover{transform:translateY(-5px);box-shadow:0 24px 50px -26px rgba(0,0,0,.45)}
.v-stamp img,.sh-port .rnd,.lb-roundels img{animation:lb-bob 5s ease-in-out infinite}
.lb-roundels a:nth-child(2n) img{animation-delay:-1.6s}.lb-roundels a:nth-child(3n) img{animation-delay:-3.1s}
.lb-roundels a{transition:transform .5s var(--ease)}.lb-roundels a:hover{transform:rotate(-12deg) scale(1.08)}
.rv{border-radius:36px;margin:0 clamp(8px,1.5vw,20px)}
.rv figure{transition:transform .35s var(--ease)}.rv figure:hover{transform:translateY(-4px)}
.lb-foot{border-radius:36px 36px 0 0}

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lu-kick{margin:0}.lp-hotel{font-size:.45em;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;font-style:normal}
.tbc,[data-tbc]{background:#fff3c4;color:#5a4500;border-radius:6px;padding:0 .35em;font-style:normal}
/* Round 3 header motion */
.lb-head .wrap{transition:height .3s var(--ease)}
.lb-head.scrolled{background:color-mix(in srgb,var(--v-bg) 97%,transparent)}
.lb-head.scrolled .wrap{height:calc(var(--hh) - 8px)}
.lb-head .lb-logo-m{transition:transform .3s var(--ease);transform-origin:left center}
.lb-head.scrolled .lb-logo-m{transform:scale(.88)}
.lb-nav a{position:relative}
.lb-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:var(--pop);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.lb-nav a:hover::after,.lb-nav a:focus-visible::after,.lb-nav a[aria-current="page"]::after{transform:scaleX(1)}
.lb-nav a:hover{background:transparent}
.lb-burger i{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lb-burger[aria-expanded="true"] i{transform:rotate(45deg);box-shadow:0 0 0 currentColor,0 0 0 currentColor}
.lb-burger[aria-expanded="true"] i::after{content:"";display:block;width:18px;height:2px;background:currentColor;transform:rotate(90deg)}
.m-nav{overflow:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease);background:color-mix(in srgb,var(--v-bg) 97%,transparent)}
.m-nav.closing,.m-nav.opening{opacity:0;transform:translateY(-8px)}
.m-nav a{transition:padding-left .2s}.m-nav a:hover{padding-left:6px}
@media (prefers-reduced-motion:reduce){.lb-head,.lb-head .wrap,.lb-head .lb-logo-m,.lb-nav a::after,.lb-burger i,.m-nav,.m-nav a,.ot-box{transition:none!important;animation:none!important}}
/* Round 3: bigger header logo (~35%) */
.lb-head .lb-logo-m{width:76px;height:54px}
@media (max-width:1000px){.lb-head .lb-logo-m{width:72px;height:50px}}
/* social + email icons */
.soc{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;padding:0}
.soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#b9532c;color:#f9f5e4;transition:transform .2s var(--ease),background .2s}
.soc a:hover{transform:translateY(-2px);background:#9a4424}
.soc a:focus-visible{outline:3px solid currentColor;outline-offset:3px;outline-color:#2f1a14}
.soc svg{width:20px;height:20px}
.lb-foot .soc a:focus-visible,.xmas .soc a:focus-visible{outline-color:#f9f5e4}
@media (prefers-reduced-motion:reduce){.soc a{transition:none}}
.lb-cta .cta-mob{display:none}
.lb-cta .cta-ic{display:none;flex:none}
.lb-cta .btn{column-gap:0}
.lb-cta .cta-x{white-space:pre}
@media (max-width:1000px){.lb-cta .cta-ic{display:block}}
@media (max-width:1000px){.lb-cta .cta-mob{display:inline-flex}}
/* quick actions, tablet + mobile: in the page flow under the hero (no sticky bar, 14 Oct) */
.m-bar{display:none!important}
.m-act{display:none}
@media (max-width:1000px){
 body.venue main:has(.m-act-in) .acts>a[href="#book"][data-book]{display:none}
 .m-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-left));position:relative;z-index:2}
 .m-act a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:999px;font:600 16px/1 'Work Sans',sans-serif;text-decoration:none}
 .m-act .m-book{background:#b9532c;color:#fff}
 .m-act .m-pts{background:#fff;color:#2f1a14;box-shadow:inset 0 0 0 2px #2f1a14}
 .m-act a:focus-visible{outline:3px solid #2f1a14;outline-offset:2px}
 .m-act{grid-template-columns:1fr!important}
 .m-act.m-act-in{margin:18px 0 6px;padding:0;max-width:520px;width:100%;grid-column:1/-1}
 body{padding-bottom:0!important}
 .lb-cta .cta-desk{display:none!important}
 /* small Book pill in the sticky header */
 .lb-cta{display:flex!important;margin-left:auto}
 .lb-cta{gap:6px}
 .lb-cta .btn{min-height:44px;height:44px;padding:0 12px!important;font-size:14px!important;white-space:nowrap;gap:6px;display:inline-flex;align-items:center}
 .lb-cta .cta-desk{display:none!important}
 .lb-cta .cta-x{display:none}
 .lb-cta .btn-line{order:2}
 .lb-cta .cta-mob{order:1}
}
.soc a{position:relative}
.soc a[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);background:#2f1a14;color:#f9f5e4;font:600 12px/1 'Work Sans',sans-serif;padding:6px 9px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5}
.soc a[data-tip]:hover::after,.soc a[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.lb-foot .soc a[data-tip]::after{background:#f9f5e4;color:#2f1a14}
/* Nav hover v2 (Jonnii 13 Oct): soft translucent pill fades in behind the link; current page keeps the pill plus a small dot. No orange underline. */
.lb-nav a::after{content:"";left:50%;right:auto;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translateX(-50%) scale(0);opacity:0;transition:transform .25s,opacity .25s}
.lb-nav a[aria-current="page"]::after,.lb-nav a.cur::after{transform:translateX(-50%) scale(1);opacity:.85}
.lb-nav a:hover::after,.lb-nav a:focus-visible::after{transform:translateX(-50%) scale(0);opacity:0}
.lb-nav a[aria-current="page"]:hover::after,.lb-nav a.cur:hover::after{transform:translateX(-50%) scale(1);opacity:.85}
.lb-nav a,.lb-nav button.vp-btn{transition:background-color .25s ease,opacity .2s;text-decoration:none}
.lb-nav a:hover,.lb-nav button.vp-btn:hover,.lb-nav button.vp-btn[aria-expanded=true],.lb-nav a[aria-current="page"],.lb-nav a.cur{background:color-mix(in srgb,currentColor 10%,transparent);opacity:1}
.lb-nav a:focus-visible,.lb-nav button.vp-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px;background:color-mix(in srgb,currentColor 10%,transparent)}
@media (prefers-reduced-motion:reduce){.lb-nav a,.lb-nav button.vp-btn,.lb-nav a::after{transition:none!important}}
/* Jonnii 13 Oct: social icons as an evenly spaced row, 44px targets, never overlapping */
.soc{display:flex!important;flex-wrap:wrap;gap:10px;align-items:center}
.soc>li{display:block!important;flex:0 0 44px;width:44px;height:44px;margin:0!important;padding:0!important;position:static!important;border:0!important}
.soc>li>a{width:44px;height:44px;min-width:44px;min-height:44px}
.ct-fl .soc{margin:0}
/* 44px tap targets: review score links, contact-card emails */
.rv-scores a{display:inline-flex;align-items:center;min-height:44px}
.ct-v>a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
/* Jonnii 14 Oct: social icons take each page's own colours (no more orange everywhere) */
.soc a{--sb:#1a1a1a;--si:#f9f5e4;background:var(--sb);color:var(--si)}
.soc a:hover{background:color-mix(in srgb,var(--sb) 78%,#000)}
.v-the-pullman .soc a{--sb:#710000}
.v-the-ship-inn .soc a{--sb:#001b4b}
.v-harbour-inn .soc a{--sb:#003837}
.v-cat-and-fiddle .soc a{--sb:#004600}
.v-panataria .soc a{--sb:#000}
.v-luben .soc a,.v-union .soc a{--sb:#000}
.v-london-and-paris .soc a{--sb:#5d7a55;--si:#fff}
.v-london-and-paris .soc a:hover{background:#4a6343}
.lb-foot .soc a{--sb:#f9f5e4;--si:#1a1a1a}
.lb-foot .soc a:hover{background:#fff}
.soc a{color:var(--si)!important}
/* dark venue sections: cream circles with the venue colour icon */
.v-the-pullman main .soc a{--sb:#f9f5e4;--si:#710000}
.v-harbour-inn main .soc a{--sb:#f9f5e4;--si:#003837}
.v-the-pullman main .soc a:hover,.v-harbour-inn main .soc a:hover{background:#fff}

.lb-cta .cta-arr{font-size:.9em;margin-left:2px}
