/* fest-preview3: light "white & gold" theme. Colors only; layered last over deck/anim/fest/fest2.
   Light tokens on :root; dark tokens restored inside the sections that stay dark (hero, photo band, footer, VIP card). */
:root{--bg:#FAF6EE;--bg2:#F3ECDF;--panel:#FFFDF8;--gold:#9C7C26;--gold-l:#7A5F12;--gold-d:#5F4A0E;--text:#2A2620;--mute:#5C5446;--ink:#1a1710;--head:#1F1B15;--fill:#cdb468;--line:rgba(156,124,38,.42)}
.hero2,.band,.site-footer{--bg:#0d0c0a;--bg2:#14120e;--panel:#191610;--gold:#bda03a;--gold-l:#d6bd62;--gold-d:#8f7a28;--text:#ece6d6;--mute:#b8b09c;--line:rgba(189,160,58,.45);color:var(--text)}
body{background:var(--bg);color:var(--text)}
main a:hover{color:var(--gold-d)}
main :focus-visible{outline:3px solid #2A2620;box-shadow:0 0 0 6px rgba(156,124,38,.45)}
.hero2 :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px #8f7a28}
.pill:focus-visible{outline-color:#2A2620}
.hero2 .pill:focus-visible{outline-color:#fff}

/* headings / ornaments */
main h2{color:var(--gold-l)}
main .h-sm{color:var(--gold-l)}
.orn{--dia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 0l7 7-7 7-7-7z' fill='%239c7c26'/%3E%3C/svg%3E")}
.ed h3{color:var(--head)}
.sec.alt{border-color:rgba(156,124,38,.22)}
.partners{border-color:rgba(156,124,38,.3)}

/* buttons: soft gold fills with dark text; outline = deep gold */
.btn-gold{background:var(--fill);border-color:#b39747;color:#14110a}
.btn-gold:hover{background:#dcc583;color:#000}
.btn-outline{color:var(--gold-l);border-color:var(--gold)}
.btn-outline:hover{background:var(--fill);border-color:#b39747;color:#14110a}
main .pill,.tix-bar .pill,.site-header .pill{box-shadow:inset 0 0 0 1px rgba(122,95,18,.28),0 2px 0 rgba(90,70,20,.18)}
.hero2 .pill{box-shadow:0 2px 0 rgba(0,0,0,.25)}
main .pill:hover{box-shadow:inset 0 0 0 1px rgba(122,95,18,.28),0 8px 22px rgba(156,124,38,.28)}

/* header: dark over the hero (as preview2), ivory + dark text + thin gold line once past it.
   anim.js drives --lb (0 = dark, 1 = ivory); an ivory layer and the dark logo fade in with it. Default 1 (no JS). */
.site-header{--lb:1}
.site-header::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-1px;z-index:-1;pointer-events:none;background:#FAF6EE;border-bottom:1px solid rgba(156,124,38,.55);opacity:var(--lb)}
.site-header .brand{position:relative;display:block}
.site-header .brand .logo-dk{position:absolute;left:0;top:0;height:100%;width:auto;opacity:var(--lb)}
.site-header .brand .logo-lt{opacity:calc(1 - var(--lb))}
.site-header .nav a{color:color-mix(in srgb,#2A2620 calc(var(--lb) * 100%),#ece6d6)}
.site-header .nav a:hover{color:color-mix(in srgb,#7A5F12 calc(var(--lb) * 100%),#d6bd62);border-color:color-mix(in srgb,#9C7C26 calc(var(--lb) * 100%),#bda03a)}
.nav-toggle{color:color-mix(in srgb,#7A5F12 calc(var(--lb) * 100%),#d6bd62);border-color:color-mix(in srgb,rgba(156,124,38,.7) calc(var(--lb) * 100%),rgba(189,160,58,.55))}
.nav-toggle[aria-expanded="true"]{background:var(--fill);color:#12100a}
@media(max-width:1099px){
 .site-header .nav{background:color-mix(in srgb,#FAF6EE calc(var(--lb) * 100%),rgba(13,12,10,.98));border-bottom-color:rgba(156,124,38,.45)}
 .site-header .nav a{border-bottom-color:color-mix(in srgb,rgba(156,124,38,.25) calc(var(--lb) * 100%),rgba(189,160,58,.18))}
}

/* logo grids (partners + brands): ivory-white cells, gold hairlines, charcoal logo versions (*-ink.webp) */
.brand-grid{border-top-color:rgba(156,124,38,.32);border-left-color:rgba(156,124,38,.32)}
.brand-grid li{background:var(--panel);border-right-color:rgba(156,124,38,.32);border-bottom-color:rgba(156,124,38,.32)}
.brand-grid img{opacity:.88}

/* framed photo reveals: gold double frame on ivory */
.boom-frame,.ed-grid .ed .ed-fig.boom-frame,.hero-media .video-open.boom-frame{background:linear-gradient(160deg,#FFFDF8,#EFE6D3)}
.boom-frame::before{border-color:rgba(156,124,38,.7);box-shadow:inset 0 0 18px rgba(156,124,38,.10)}
.boom-frame::after{border-color:rgba(156,124,38,.45)}
.ed-grid .ed,.hero-media,.boom-wrap{filter:drop-shadow(0 18px 28px rgba(70,52,20,.16)) drop-shadow(0 0 14px rgba(156,124,38,.10))}
.ed-fig{background:#EFE6D3}

/* ticket cards: ivory cards with gold borders (VIP included, see below) */
.card{background:var(--panel);border-color:rgba(156,124,38,.55);box-shadow:0 10px 30px rgba(70,52,20,.07)}
.card::before{border-color:rgba(156,124,38,.22)}
.tickets .card .tier{color:var(--gold-l)}
/* VIP: same ivory card; set apart by a double gold border (border + outer ring) and a soft gold glow */
.tickets .card.featured{background:var(--panel);border-color:#9C7C26;box-shadow:0 0 0 4px #FFFDF8,0 0 0 5px #bda03a,0 0 34px rgba(189,160,58,.32),0 18px 44px rgba(70,52,20,.12)}
.tickets .card.featured::before{border-color:rgba(156,124,38,.5)}
.tickets .card.featured .ribbon{background:#bda03a;color:#12100a}
.js-anim .tickets .card.rv::after{--lc:rgba(156,124,38,.6)}
.js-anim .tickets .card.featured.rv::after{--lc:#9C7C26}
.js-anim .tickets .card.featured.rv{box-shadow:0 0 0 4px rgba(255,253,248,0),0 0 0 5px rgba(189,160,58,0),0 0 34px rgba(189,160,58,0),0 18px 44px rgba(70,52,20,0)}
.js-anim .tickets .card.featured.rv.in{box-shadow:0 0 0 4px #FFFDF8,0 0 0 5px #bda03a,0 0 34px rgba(189,160,58,.32),0 18px 44px rgba(70,52,20,.12)}
.card:hover{box-shadow:0 12px 30px rgba(70,52,20,.14)}
@media(prefers-reduced-motion:reduce){.js-anim .tickets .card.rv{border-color:rgba(156,124,38,.55)}.js-anim .tickets .card.featured.rv{border-color:#9C7C26}}

/* FAQ */
.faq,.faq details{border-color:rgba(156,124,38,.35)}

/* venue photos + gold street map re-tinted for ivory */
.venue-grid li{border-color:rgba(156,124,38,.5);background:var(--panel)}
.venue-map{background:#FBF7EF;border-color:rgba(156,124,38,.4)}
.map-svg .st{stroke:#9C7C26}
.st-minor{opacity:.5}.st-mid{opacity:.75}.st-major{opacity:.95}
.map-pin{background:#8A6A14;box-shadow:0 0 0 3px rgba(251,247,239,.95),0 0 16px rgba(138,106,20,.55)}
.map-pin i{border-color:#8A6A14}
.map-label{background:rgba(255,253,248,.93);color:var(--text);border-color:var(--gold);box-shadow:0 6px 18px rgba(70,52,20,.10)}
.map-label b{color:var(--gold-l)}
.map-credit{color:rgba(42,38,32,.62)}

/* dark photo band stays dark; soften its top edge now that the section above is ivory */
.band-alt::after{background:linear-gradient(180deg,rgba(13,12,10,.35) 0%,rgba(13,12,10,.05) 30%,rgba(13,12,10,.8) 100%)}

/* final CTA: photo under an ivory wash */
.final-bg{filter:saturate(.4) sepia(.08)}
.final-bg::after{background:linear-gradient(180deg,rgba(250,246,238,.95),rgba(250,246,238,.88) 50%,rgba(250,246,238,.96))}
.final .fine{color:var(--text)}

/* footer stays dark (anchors the page); keep its white focus ring */
.site-footer :focus-visible{outline-color:#fff}

/* mobile sticky ticket bar on ivory */
@media(max-width:1099px){
 .tix-bar{background:none}
 .tix-bar .pill{box-shadow:inset 0 0 0 1px rgba(122,95,18,.3),0 8px 24px rgba(40,30,10,.28)}
 body{padding-bottom:0}
 .site-footer{padding-bottom:100px}
}

/* v2 (Oct 7): ivory top to bottom. Hero surround is ivory; only the photo inside the arch (with its dark overlay) is dark.
   Header stays ivory with the dark logo/links throughout, also over the full-bleed photo; its gold line is hidden in the arch state so the top reads as one ivory field. */
.hero2{background:#FAF6EE}
.site-header.hdr-plain::after{border-bottom-color:transparent}

/* v3 map: OSM street labels (unmasked layer over the masked road lines), freeways, landmark, direction cue */
.map-svg{-webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 72% 78% at 50% 50%,#000 40%,transparent 100%)}
.map-svg .st-fwy{stroke-width:3.2;opacity:.95;stroke:#7A5F14}
.map-lbl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-lbl .lt{font-family:var(--serif);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;paint-order:stroke;stroke:#FBF7EF;stroke-width:4px;stroke-linejoin:round}
.map-lbl .l-maj .lt{fill:#5E4810;font-weight:600;font-size:12.5px}
.map-lbl .l-mid .lt{fill:#3A342B;font-size:10.5px}
.map-lbl .l-fwy .lt{fill:#5E4810;font-weight:600;font-size:11px}
.map-lbl .l-poi .lt{fill:#3A342B;font-size:9.5px;letter-spacing:.1em;font-style:italic;text-transform:none}
.map-lbl .poi-dot{fill:#7A5F14;stroke:#FBF7EF;stroke-width:1.5px}
.map-lbl .m-only{display:none}
.map-cue{position:absolute;left:12px;bottom:10px;padding:5px 10px;background:rgba(255,253,248,.92);border:1px solid rgba(156,124,38,.45);font:600 .64rem/1.2 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#5E4810}
.js-anim .venue-map .map-lbl,.js-anim .venue-map .map-cue{opacity:0;transition:opacity .9s ease 2.4s}
.js-anim .venue-map.drawn .map-lbl,.js-anim .venue-map.drawn .map-cue{opacity:1}
@media(max-width:640px){
 .map-lbl .lt{font-size:22px;stroke-width:7px}
 .map-lbl .l-maj .lt{font-size:23px}
 .map-lbl .l-mid .lt{font-size:20px}
 .map-lbl .l-fwy .lt{font-size:21px}
 .map-lbl .l-poi .lt{font-size:18px}
 .map-lbl .poi-dot{r:4.5px}
 .map-lbl .d-only{display:none}.map-lbl .m-only{display:inline}
 .map-cue{left:50%;transform:translateX(-50%);bottom:22px;white-space:nowrap;font-size:.58rem}
 .map-credit{bottom:4px}
}
@media(prefers-reduced-motion:reduce){.js-anim .venue-map .map-lbl,.js-anim .venue-map .map-cue{opacity:1;transition:none}}

/* v3 hero video: first-frame poster underneath (loading only), muted looping video on top, same grow transforms as the old photo */
.hero2-media .hero2-poster,.hero2-media .hero2-vid{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero2-media .hero2-poster img,.hero2-media .hero2-vid{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero2-media .hero2-vid{background:transparent}
.hero2-media .hero2-vid.rm{display:none}
.grow-js .hero2-media .hero2-vid{transform:translateY(var(--gty,calc((var(--hdr,64px) + 16svh)*.8))) scale(var(--gs,1.1));transform-origin:50% 45%}
@media(min-width:701px){.grow-js .hero2-media .hero2-vid{transform:translateY(var(--gty,calc((var(--hdr,64px) + 8svh)*.3))) scale(var(--gs,1.1))}}

/* v3 VIP ribbon: longer 'Limited Tickets Available' text stays on one line */
.tickets .ribbon{white-space:nowrap;letter-spacing:.13em;font-size:.68rem;padding:7px 16px;max-width:calc(100% - 24px);border-radius:0 0 4px 4px}
@media(max-width:380px){.tickets .ribbon{letter-spacing:.08em;font-size:.62rem;padding:6px 12px}}

/* v14: venue photos all framed the same (ivory mat + gold line); the parallax ones now clip inside the li padding */
.venue-grid .px-box{display:block;overflow:hidden}
.venue-grid .px-box img{display:block}

/* v14: iOS/Safari — never show the native start-playback button or controls on the muted hero loop */
/* 2026-10-08: one rule per pseudo-element: a single unrecognised pseudo-element invalidates a whole selector list, so the combined rule above was being dropped (Chrome has no -start-playback-button, Safari has no -overlay-play-button) */
.hero2-vid::-webkit-media-controls{display:none!important;-webkit-appearance:none;opacity:0!important}
.hero2-vid::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none;opacity:0!important}
.hero2-vid::-webkit-media-controls-enclosure{display:none!important;-webkit-appearance:none;opacity:0!important}
.hero2-vid::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0!important}
.hero2-vid::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;opacity:0!important}
.hero2-vid::-webkit-media-controls-play-button{display:none!important;-webkit-appearance:none;opacity:0!important}
/* until the muted loop is actually playing (blocked autoplay / iOS Low Power Mode) the video layer stays transparent, so only the poster image shows and no native play button can appear */
.hero2-media .hero2-vid.vjs{opacity:0;transition:opacity .35s ease}
.hero2-media .hero2-vid.vjs.is-playing{opacity:1}

/* v14: "See You on Oct 24" band photo (VIP guest): keep her face in the upper part of the frame, wristband in view; darker base for the caption */
.band-alt .band-img img{object-position:62% 8%}
@media(max-width:700px){.band-alt .band-img img{object-position:46% 30%}}
.band-alt::after{background:linear-gradient(180deg,rgba(13,12,10,.35) 0%,rgba(13,12,10,.04) 28%,rgba(13,12,10,.18) 60%,rgba(13,12,10,.86) 100%)}

/* v14: DARK MAP trial (user: "try the dark version"). Scoped to .venue-map.map-dark — remove the "map-dark" class in index.php to return to the ivory map. */
.venue-map.map-dark{background:radial-gradient(ellipse at 50% 45%,#1b1813 0%,#12100c 70%);border-color:rgba(189,160,58,.55);box-shadow:0 14px 34px rgba(40,30,10,.18)}
.map-dark .map-svg .st{stroke:#bda03a}
.map-dark .st-minor{opacity:.32}.map-dark .st-mid{opacity:.58}.map-dark .st-major{stroke:#e2c96f;stroke-width:2.3;opacity:1}
.map-dark .map-svg .st-fwy{stroke:#d6bd62;opacity:.9}
.map-dark .map-lbl .lt{stroke:#12100c}
.map-dark .map-lbl .l-maj .lt{fill:#e8d38a}
.map-dark .map-lbl .l-mid .lt{fill:#ECE6D6}
.map-dark .map-lbl .l-fwy .lt{fill:#d6bd62}
.map-dark .map-lbl .l-poi .lt{fill:#d9d1bd}
.map-dark .map-lbl .poi-dot{fill:#e2c96f;stroke:#12100c}
.map-dark .map-pin{background:#e8cf7a;box-shadow:0 0 0 3px rgba(18,16,12,.95),0 0 18px rgba(232,207,122,.75)}
.map-dark .map-pin i{border-color:#e8cf7a}
.map-dark .map-label{background:rgba(18,16,12,.9);color:#ECE6D6;border-color:#bda03a;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.map-dark .map-label b{color:#e2c96f}
.map-dark:hover .map-label{border-color:#e2c96f}
.map-dark .map-cue{background:rgba(18,16,12,.9);border-color:rgba(189,160,58,.6);color:#e2c96f}
.map-dark .map-credit{color:rgba(236,230,214,.6)}
.map-dark:focus-visible{outline-color:#2A2620}

/* v15: hero play button = icon-only SOLID soft-gold circle (same #cdb468 as Get Tickets, no gradient) with charcoal triangle; opens the same video modal */
.hero2 .play-circle{flex:0 0 auto;width:64px;height:64px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
 background:#cdb468;border:0;color:#2A2620;box-shadow:0 2px 0 rgba(0,0,0,.25);
 transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
.hero2 .play-circle svg{width:26px;height:26px;fill:currentColor;margin-left:3px;display:block}
.hero2 .play-circle:hover{transform:scale(1.07);background:#dcc583;box-shadow:0 0 0 4px rgba(205,180,104,.22),0 0 24px rgba(205,180,104,.5)}
.hero2 .play-circle:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 9px #8f7a28}
.hero2 .cta-row:has(.play-circle){align-items:center}
@media(max-width:700px){
 .hero2 .cta-row:has(.play-circle){flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center}
 .hero2 .cta-row:has(.play-circle)>.pill{width:auto;flex:1 1 auto;max-width:236px}
 .hero2 .cta-row>.play-circle{width:56px;height:56px;max-width:none}
 .hero2 .play-circle svg{width:23px;height:23px}
}
@media(prefers-reduced-motion:reduce){.hero2 .play-circle:hover{transform:none}}