/* 2026 campaign palette and poster detailing. */
:root{--cream:#ffe0ae;--cream-2:#ffe8c3;--orange:#f68a16;--green:#24121f;--green-dark:#150c16;--red:#661a24;--red-dark:#350d19;--black:#10080d;--ink:#160a11}
body{background:var(--ink);color:var(--cream-2)}
.texture.green{background-color:#211020;background-image:radial-gradient(ellipse at 95% 35%,#6a286033,transparent 58%),linear-gradient(#211021e8,#170d1de8),url('/assets/img/bg-green.webp')}
.texture.red{background-color:#5c1420;background-image:radial-gradient(ellipse at 10% 30%,#bb32183b,transparent 60%),linear-gradient(#591323d9,#330e1cd9),url('/assets/img/bg-red.webp')}
.site-header{background:linear-gradient(#140a11f2,#140a11e6)}
.hero::after{content:"";position:absolute;inset:155px 24px 24px;border:1px solid #f68a1680;border-radius:24px 0;pointer-events:none;z-index:1}
.hero-content{position:relative;z-index:2}
.hero .presenter{color:var(--cream)}
.hero-line{color:var(--cream-2)}
.hero-tagline-line:first-child{color:var(--orange)}
.texture h1,.texture h2,.booking-card h3,.press-track blockquote{letter-spacing:.005em;text-shadow:1px 2px 0 #160a1180}
/* Small transparent flecks evoke the printed lettering without changing readable body copy. */
@supports (mask-image:url('')){
 .story-title-motion,.story-mission,.story-party,.booking-card h3,.press-track blockquote{-webkit-mask-image:url('/assets/img/brand-ink.svg');mask-image:url('/assets/img/brand-ink.svg');-webkit-mask-size:180px 100px;mask-size:180px 100px;mask-mode:luminance}
}
.button,.signup-send{border-color:var(--orange);box-shadow:3px 3px 0 #160a11;border-radius:0}
.button.cream{background:var(--cream);color:var(--ink)}
.button.orange{background:var(--orange);color:var(--ink)}
.booking-card{background:#190d1ac9;border:1px solid #f68a1666}
.press-reviews{background:var(--cream);color:var(--ink)}
.press-track blockquote{text-shadow:none}
.press-track figure{border-color:#160a1133}
.feature-photo,.photo-pair img,.location-photos img{border-color:var(--orange)}
#experience .story-mission-panel .story-mission,#experience .story-payoff .story-party{text-shadow:3px 4px 0 #160a11}
.signup-dialog,.corporate-dialog{background:#25101f;color:var(--cream-2)}
@media(max-width:700px){.hero::after{inset:125px 12px 16px;border-radius:18px 0}}

/* Angled, staggered headline lines from the campaign artwork. */
#experience .story-opening h1{padding:16px 0 10px;margin-bottom:32px;line-height:1.08}
#experience .story-title-motion{display:block;mask-image:none;-webkit-mask-image:none}
#experience .story-title-motion .poster-setup{display:block;width:fit-content;transform:rotate(-3deg);transform-origin:left bottom;color:var(--cream-2);text-shadow:2px 3px 0 var(--ink)}
#experience .story-title-motion em{display:block;width:fit-content;max-width:94%;margin:12px 0 0 4%;transform:rotate(2deg);transform-origin:left top;text-shadow:2px 3px 0 var(--ink)}
.hero .hero-line{transform:rotate(-3deg);padding:8px 0}
.hero .hero-line .hero-tagline-line:nth-child(2){transform:translateX(10px);padding-top:4px}
#experience .story-payoff .story-party{transform:rotate(-3deg);transform-origin:left center;width:fit-content;max-width:94%;margin-top:24px;margin-bottom:34px}
.press-track figure:nth-child(odd) blockquote{rotate:-3deg}
.press-track figure:nth-child(even) blockquote{rotate:2deg}
@media(max-width:700px){
 #experience .story-opening h1{font-size:clamp(34px,8.5vw,52px);padding-top:12px}
 #experience .story-title-motion em{margin-left:3%;max-width:94%;transform:rotate(2deg)}
 .hero .hero-line{transform:rotate(-2deg)}
 .hero .hero-line .hero-tagline-line:nth-child(2){transform:translateX(3px)}
 .press-track blockquote{rotate:-2deg}
}

/* Four-line campaign lockup below the wordmark, with true uppercase I. */
.hero .campaign-tagline{width:fit-content;max-width:88vw;margin:8px auto 24px;padding:6px 10px;font-size:clamp(36px,3.6vw,52px);line-height:.95;text-align:left;transform:rotate(-5deg);font-weight:400;letter-spacing:-.015em;text-shadow:3px 4px 0 #160a1199}
.campaign-tagline>span{display:block;white-space:nowrap}
.campaign-tagline .campaign-the{font-size:.58em;color:var(--cream-2);margin-left:3%;margin-bottom:3px}
.campaign-tagline .campaign-grail{color:var(--orange);font-size:1.12em}
.campaign-tagline .campaign-christmas{color:var(--cream-2);font-size:.96em;margin-top:3px}
.campaign-tagline .campaign-christmas small{font-size:.62em;vertical-align:baseline}
.campaign-tagline .campaign-parties{color:var(--orange);font-size:1.12em;margin:3px 0 0 22%}
.campaign-tagline>span{-webkit-mask-image:url('/assets/img/campaign-ink.svg');mask-image:url('/assets/img/campaign-ink.svg');-webkit-mask-size:120px 67px;mask-size:120px 67px;mask-mode:luminance}
.hero .hero-logo{margin-bottom:8px}
@media(max-width:700px){.hero .campaign-tagline{font-size:clamp(32px,8.3vw,46px);margin:8px auto 28px;transform:rotate(-5deg)}.hero .hero-logo{margin-bottom:12px}}

/* A single campaign line under the HUMBUG wordmark. */
.hero .campaign-tagline{display:flex;align-items:baseline;justify-content:center;gap:.2em;width:max-content;max-width:94vw;white-space:nowrap;font-size:clamp(16px,3vw,40px);line-height:1.1;margin:14px auto 24px;padding:4px 0;transform:rotate(-2deg)}
.hero .campaign-tagline>span,.hero .campaign-tagline .campaign-christmas small{font-size:1em;margin:0;line-height:inherit}
@media(max-width:700px){.hero .campaign-tagline{font-size:clamp(12px,3.65vw,24px);gap:.18em;max-width:94vw;margin:12px auto 24px;transform:rotate(-2deg)}}

@font-face{font-family:'Veneer';src:url('/assets/fonts/Veneer-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Use the genuine campaign font and its built-in distressed letterforms. */
.hero .campaign-tagline,.texture h1,.texture h2,.texture h3,.press-track blockquote,.booking-card h3,.story-finale svg{font-family:'Veneer',Impact,sans-serif;font-weight:400;font-synthesis:none;font-variant-caps:normal;font-feature-settings:'calt' 0}
.story-title-motion,.story-mission,.story-party,.booking-card h3,.press-track blockquote,.campaign-tagline>span{-webkit-mask-image:none;mask-image:none}
.hero .campaign-tagline{font-size:clamp(16px,2.7vw,36px)}
@media(max-width:700px){.hero .campaign-tagline{font-size:clamp(11px,3.15vw,22px)}}
/* Campaign details across the full experience. */
.site-nav,.site-nav a,.menu-toggle,.button,.signup-send,.hero-date-location,.hero-onsale strong,.kicker,.booking-card .seat-type,.footer-nav a,.faq-list summary,.signup-panel h2,#signup-title{font-family:'Veneer',Impact,sans-serif;font-weight:400;font-synthesis:none;letter-spacing:.025em}
.hero-date-location{color:var(--cream);text-shadow:2px 3px 0 #160a11}
.hero-onsale strong{color:var(--orange)}
.texture.green{background-image:radial-gradient(ellipse at 95% 22%,#81358450,transparent 50%),radial-gradient(ellipse at 0 82%,#286c8240,transparent 48%),linear-gradient(#211021e8,#170d1de8),url('/assets/img/bg-green.webp')}
.texture.red{background-image:radial-gradient(ellipse at 5% 22%,#da371b50,transparent 50%),radial-gradient(ellipse at 100% 85%,#692b774d,transparent 48%),linear-gradient(#591323d9,#330e1cd9),url('/assets/img/bg-red.webp')}
.booking-card{border:1px solid #f68a1680;border-radius:22px 0;box-shadow:inset 0 0 0 5px #170b15,0 8px 24px #10080d44;transition:border-color .25s,box-shadow .25s}
.booking-card h3{color:var(--cream-2);text-shadow:3px 3px 0 #160a11}
.booking-card .kicker{color:var(--orange)}
.feature-photo{position:relative;padding:7px;border:1px solid var(--orange);border-radius:24px 0;background:#160a11}
.feature-photo img{border-radius:17px 0}
.photo-pair img,.location-photos img{box-shadow:5px 6px 0 #160a1180;outline:1px solid #f68a1680;outline-offset:5px}
.button,.signup-send{transition:transform .2s,box-shadow .2s,background-color .2s}
.button:focus-visible,.signup-send:focus-visible{outline:3px solid var(--cream);outline-offset:5px}
@media(hover:hover){.button:hover,.signup-send:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:5px 6px 0 #160a11}.booking-card:hover{border-color:var(--orange);box-shadow:inset 0 0 0 5px #170b15,0 12px 30px #a9453733}.site-nav a:hover{color:var(--orange)}}
#experience .story-finale{position:relative;isolation:isolate}
#experience .story-finale::before{content:'';position:absolute;inset:-24% -5%;z-index:-1;pointer-events:none;background:url('/assets/img/confetti.svg') center/cover no-repeat;opacity:.22;transform:translateY(calc((1 - var(--celebrate,0))*20px))}
#experience .story-finale svg{filter:drop-shadow(3px 4px 0 #160a1180)}
.campaign-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.campaign-confetti i{position:absolute;left:var(--x);top:52%;width:5px;height:11px;background:var(--chip);opacity:0;animation:campaign-burst 1.7s ease-out var(--delay) both}
@keyframes campaign-burst{0%{opacity:0;transform:translate(0,20px) rotate(0)}15%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),-160px) rotate(var(--spin))}}
@media(prefers-reduced-motion:reduce){.button,.signup-send,.booking-card{transition:none}.button:hover,.signup-send:hover{transform:none}.campaign-confetti{display:none}}

/* October review notes. */
.hero .hero-logo{width:min(680px,76vw)}
.hero .campaign-tagline{font-size:clamp(20px,3.3vw,46px)}
.hero .hero-date-location{font-size:clamp(22px,2.5vw,34px)}
.hero .hero-onsale strong{font-size:clamp(30px,3.5vw,48px)}
#gallery h2,#gallery h2 em,.footer-label,.footer-tagline{font-family:'Veneer',Impact,sans-serif;font-weight:400;font-style:normal}
.footer-tagline em{color:var(--orange);font-style:normal}
.header-signup,.booking-card h3,.press-track blockquote{-webkit-text-stroke:.45px currentColor;paint-order:stroke fill}
.press-track figure blockquote{rotate:0deg}
.press-track figure{justify-content:flex-start}
@media(min-width:701px){#experience .copy{width:76%;margin-inline:auto}.press-track blockquote{min-height:3.6em;display:flex;align-items:center;justify-content:center}}
#experience{isolation:isolate}
#experience::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/img/confetti.svg') 0 var(--confetti-shift,0px)/1200px 420px repeat-y;opacity:.14}
@media(max-width:700px){.hero .hero-logo{width:86vw}.hero .campaign-tagline{font-size:3.45vw}.hero .hero-date-location{font-size:20px}.hero .hero-onsale strong{font-size:30px}#experience::after{opacity:.09}}

/* Second October comment pass. */
.hero .campaign-tagline{font-size:clamp(28px,4.8vw,68px)}
#top .header-signup{font-size:30px;padding:12px 24px}
#location address,#location .address-motion,.press-track figcaption{font-family:'Veneer',Impact,sans-serif;font-style:normal;font-weight:400}
.press-track figcaption{font-size:24px}
.press-track figure:nth-child(n) blockquote{rotate:0deg}
.footer-tagline{white-space:nowrap;font-size:clamp(14px,2.1vw,30px)}
.footer-tagline span{display:inline}
.footer-tagline span+span::before{content:' '}
#experience::after,.story-finale::before{display:none}
.story-scroll-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.story-scroll-confetti i{position:absolute;left:var(--left);top:var(--top);width:var(--size);height:calc(var(--size)*.38);background:var(--colour);opacity:.3;will-change:transform}
@media(max-width:700px){.hero .campaign-tagline{font-size:5.1vw}#top .header-signup{font-size:24px}.footer-tagline{font-size:3.7vw}}
@media(prefers-reduced-motion:reduce){.story-scroll-confetti i{will-change:auto}}

/* Keep the payoff straight and match FAQ navigation to the campaign font. */
#experience .story-payoff .story-party{transform:none;rotate:none}
.faq-categories a{font-family:'Veneer',Impact,sans-serif;font-weight:400;font-style:normal}

/* Latest review: readable labels and quieter navigation. */
#top .header-signup{font-size:24px;padding:12px 20px}
.booking-card .seat-type{font-size:20px;line-height:1.2;letter-spacing:.025em}
.signoff-motion,.signoff-motion text{font-family:'Veneer',Impact,sans-serif;font-weight:400;font-style:normal}
@media(max-width:700px){#top .header-signup{font-size:20px;padding:11px 14px}}

.texture.green{position:relative;isolation:isolate}

/* Single-line desktop story title; retain the authentic Veneer texture on reviews. */
#reviews .press-track blockquote{font-family:'Veneer',Impact,sans-serif;font-weight:400;font-synthesis:none;-webkit-text-stroke:0}
@media(min-width:701px){
 #experience .story-opening h1{font-size:clamp(30px,4vw,64px)}
 #experience .story-title-motion{white-space:nowrap}
 #experience .story-title-motion .poster-setup,#experience .story-title-motion em{display:inline-block;margin:0;max-width:none;vertical-align:baseline}
 #experience .story-title-motion em{margin-left:.15em}
}

/* Final evening review. */
#experience .story-title-motion .poster-setup,#experience .story-title-motion em{transform:none;vertical-align:baseline}
@media(min-width:1101px){.site-nav{font-size:22px}}
@media(min-width:981px) and (max-width:1100px){.site-nav{font-size:20px;gap:12px}}
@media(max-width:980px){.site-nav{font-size:32px}}

/* Smooth stepped-wheel input without intercepting native scrolling. */
.party-save,.press-track blockquote,.press-track figcaption,.expect-item-motion,.booking-card,.location-title-motion,.party-dont,.party-do-line,.address-motion,.faq-title-motion,.story-title-motion{transition:transform 180ms ease-out,opacity 180ms ease-out}
.party-signoff{max-width:100%;min-width:0}
.party-signoff .signoff-motion{width:100%;max-width:100%;transform:none!important;opacity:1!important;overflow:hidden}
.story-scroll-confetti i{will-change:auto}
@media(max-width:700px){
 .hero .campaign-tagline{font-size:6.3vw}
 .hero .hero-logo{width:90vw}
 .hero .hero-date-location{font-size:24px}
 .hero .hero-onsale strong{font-size:36px}
 .booking-card-slot .booking-card,.signoff-motion,.address-motion,.faq-title-motion,.story-title-motion,.location-title-motion{transform:none!important;opacity:1!important}
 .press-track figure blockquote,.press-track figure figcaption{transform:none!important}
 .expect-item-motion{transform:none!important;opacity:1!important}
}
@media(prefers-reduced-motion:reduce){.party-save,.press-track blockquote,.press-track figcaption,.expect-item-motion,.booking-card,.location-title-motion,.party-dont,.party-do-line,.address-motion,.faq-title-motion,.story-title-motion{transition:none!important}}

/* Consistent pill-shaped calls to action across pages and popups. */
.button,.signup-send{border-radius:999px!important}

.location-copy a.button{border-radius:999px!important}