/* ==========================================================================
   Open events (f-event.css, loaded after pages.css): /events and /events/<slug>
   The RSVP form reuses the wizard's field, chip, button and consent styles
   through the .wizard class (pages.css); only what an event adds lives here.
   Each event sets --c / --ct (on <body> of its page, on its card on /events)
   to its occasion's colour, the same pairs /events uses for its categories.
   ========================================================================== */

/* ---------- Date arch: the event's date, shaped like the client's flyer ---------- */
.evd-date{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:104px;height:124px;padding-top:8px;border-radius:52px 52px 8px 8px;background:var(--ct,var(--night));color:var(--paper);text-align:center;box-shadow:0 18px 40px -22px rgba(22,24,28,.55)}
.evd-date b{display:block;font:400 3rem/.9 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.evd-date span{display:block;margin-top:4px;font:400 1.35rem/1 var(--serif)}
.evd-date i{display:block;margin-top:6px;font:500 var(--fs-label)/1 var(--sans);font-style:normal;letter-spacing:.06em;opacity:.86}

/* small dot-led label: "Open event · Health" */
.ev-k{display:flex;align-items:center;gap:.9em;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ev-k::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c,var(--coral))}

/* "Free": the strongest reason to come, beside the label */
.cost-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 13px 0 11px;border-radius:999px;background:rgba(23,163,152,.16);color:var(--t-teal);font:600 .875rem/1 var(--sans);white-space:nowrap}
.cost-chip .ic{width:15px;height:15px;stroke:currentColor;stroke-width:2.6;fill:none}
.up-top,.ev-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.ev-row{justify-content:flex-start;margin-bottom:clamp(18px,2.2vw,26px)}
.ev-row .ev-k{margin:0}

/* ---------- Event media: a photo, or the "your numbers" slip ---------- */
.evm{position:relative;overflow:hidden;aspect-ratio:4/3;max-width:100%;background:var(--ct,var(--night))}
.evm>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.evm .evd-date{position:absolute;right:18px;top:18px;z-index:2}
.evm--tall{aspect-ratio:4/5}
.evm--slip .evd-date{background:var(--paper);color:var(--ct)}
.evm--slip{display:grid;align-items:center;justify-items:start;padding:0 0 0 8%;background-color:var(--ct);background-image:radial-gradient(rgba(246,243,238,.16) 1.2px,transparent 1.4px);background-size:18px 18px}
.slip{width:min(70%,340px);padding:20px 22px 18px;background:var(--paper);color:var(--ink);transform:rotate(-3deg);box-shadow:0 34px 60px -28px rgba(0,0,0,.5)}
.slip-h{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line);font:500 var(--fs-label)/1.3 var(--sans);color:var(--ink-2)}
.slip ul{margin:0;padding:0;list-style:none}
.slip li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.9375rem;line-height:1.3}
.slip li span:last-child{display:inline-flex;align-items:baseline;gap:5px;color:var(--ink-2);font-size:var(--fs-label);white-space:nowrap}
.blank{display:inline-block;width:2.4em;border-bottom:1.5px solid var(--ct)}
.slip-q{margin-top:12px;font:400 italic clamp(1.5rem,2.2vw,1.9rem)/1 var(--serif);color:var(--ct)}

/* countdown tag, filled by /js/next-event.js */
.up-next{display:inline-flex;align-items:center;gap:9px;min-height:32px;padding:0 14px;border-radius:999px;background:var(--paper);color:var(--ink);font:500 var(--fs-label)/1 var(--sans);letter-spacing:.02em;box-shadow:0 10px 24px -14px rgba(22,24,28,.5)}
.evm .up-next{position:absolute;left:18px;top:18px;z-index:2}
.up-next[hidden]{display:none}
.up-dot{width:7px;height:7px;border-radius:50%;background:var(--c,var(--coral));animation:up-pulse 2.4s var(--ease) infinite}
@keyframes up-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* perks: what a guest gets, ticked in the event's colour */
.perks{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.perks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:var(--fs-body);line-height:1.45;color:var(--ink)}
.perks .ic{width:20px;height:20px;margin-top:2px;stroke:var(--ct);stroke-width:2.2;fill:none}

/* ---------- Event page hero ---------- */
.evd-hero .ph-in{align-items:center}
.evd-hero>.wrap .ph-copy>.ev-k{margin-bottom:clamp(18px,2.2vw,26px)}
.evd-hook{margin-top:clamp(16px,2vw,24px);max-width:24em;font:400 italic clamp(1.45rem,2.1vw,1.9rem)/1.2 var(--serif);color:var(--ct)}
.evd-hero .perks{margin-top:clamp(22px,2.6vw,30px)}
.ticket{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(26px,3vw,36px);max-width:36rem;background:var(--paper);border:1px solid var(--line)}
.ticket>div{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 16px;min-width:0}
.ticket>div+div{border-left:1.5px dashed var(--line)}
.ticket>div+div::before,.ticket>div+div::after{content:"";position:absolute;left:-8px;width:14px;height:14px;border-radius:50%;background:var(--ground,var(--stone))}
.ticket>div+div::before{top:-8px;border-bottom:1px solid var(--line)}
.ticket>div+div::after{bottom:-8px;border-top:1px solid var(--line)}
.ticket span{font-size:var(--fs-label);color:var(--ink-2)}
.ticket b{font-weight:500;font-size:1rem;line-height:1.3;color:var(--ink)}
.evd-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:clamp(24px,2.8vw,34px)}
.evd-share{display:inline-flex;align-items:center;gap:.55em;min-height:44px;font:500 .9375rem/1 var(--sans);color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 1px no-repeat;cursor:pointer}
.evd-share .ic{width:18px;height:18px}
.evd-hero .ph-media{position:relative}

/* ==========================================================================
   Event hero "xh" (13/11/2026): a full-bleed scene with the promise laid over
   its empty side. --g is the scene's own ground (sampled from the art), so the
   fade and the phone layout melt into it. --dark for the candle night scene,
   --light for the blush screening scene.
   ========================================================================== */
.xh{--g:#0a0d14;position:relative;display:flex;align-items:center;min-height:clamp(640px,94vh,920px);padding:calc(var(--hd) + clamp(28px,4vw,56px)) 0 clamp(56px,6vw,88px);overflow:hidden;background:var(--g);color:var(--paper)}
.xh--light{--g:#ebb0c2;color:var(--ink)}
.xh-media{position:absolute;top:0;bottom:0;right:0;left:34%;z-index:0;overflow:hidden}
.xh-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.xh-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--g) 0%,color-mix(in srgb,var(--g) 70%,transparent) 14%,transparent 34%)}
.xh-in{position:relative;z-index:2}
.xh-in>*{max-width:40rem}
.xh-back{display:inline-flex;align-items:center;gap:.6em;min-height:44px;margin-bottom:clamp(14px,2vw,26px);font:500 var(--fs-small)/1 var(--sans);opacity:.86}
.xh-back .ic{width:16px;height:16px}
.xh-back:hover{opacity:1}
.xh .ev-k{color:inherit;opacity:.8}
.xh-h{font:400 clamp(3.3rem,7.6vw,7.4rem)/.9 var(--serif);letter-spacing:-.028em;text-wrap:balance}
.xh-h em{display:block;font-style:italic;color:var(--xem,#f3b56a)}
.xh--light .xh-h em{--xem:#8a2350}
.xh-hook{margin-top:clamp(16px,2vw,24px);font:400 italic clamp(1.4rem,2vw,1.85rem)/1.2 var(--serif);opacity:.92}
.xh .ticket{margin-top:clamp(24px,3vw,36px)}
.xh--dark .ticket{background:rgba(246,243,238,.07);border-color:rgba(246,243,238,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.xh--dark .ticket>div+div{border-left-color:rgba(246,243,238,.24)}
.xh--dark .ticket span{color:rgba(246,243,238,.7)}
.xh--dark .ticket b{color:var(--paper)}
.xh .ticket>div+div::before,.xh .ticket>div+div::after{background:var(--g)}
.xh--dark .ticket>div+div::before,.xh--dark .ticket>div+div::after{border-color:rgba(246,243,238,.2)}
.xh--dark .evd-share{color:var(--paper)}
.xh--dark .cost-chip{background:var(--teal);color:var(--ink)}
.xh--light .cost-chip{background:var(--paper);color:var(--t-teal)}
.xh--light .ticket{border-color:rgba(22,24,28,.12)}

/* the live countdown */
.xh-clock{display:flex;align-items:flex-end;gap:clamp(10px,1.4vw,18px);margin-top:clamp(26px,3vw,40px);font-variant-numeric:tabular-nums}
.xh-clock[hidden]{display:none}
.xh-clock-l{align-self:center;margin-right:4px;font:500 var(--fs-label)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.xh-u{display:flex;flex-direction:column;align-items:center;min-width:3.2rem}
.xh-u b{font:400 clamp(2rem,3vw,2.8rem)/1 var(--serif);letter-spacing:-.01em}
.xh-u i{margin-top:4px;font:500 var(--fs-label)/1 var(--sans);font-style:normal;opacity:.72}
.xh-u+.xh-u{padding-left:clamp(10px,1.4vw,18px);border-left:1px solid currentColor;border-left-color:color-mix(in srgb,currentColor 25%,transparent)}

/* motion: the scene settles in, embers rise, a pulse runs */
@media (prefers-reduced-motion:no-preference){
  html.js .xh-media img{transform:scale(1.08);transition:transform 2.6s var(--ease)}
  html.js.is-ready .xh-media img{transform:none}
  html.js:not(.is-ready) .xh-in>*{opacity:0;transform:translateY(18px)}
  html.js.is-ready .xh-in>*{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
  html.js.is-ready .xh-in>:nth-child(2){transition-delay:.08s}
  html.js.is-ready .xh-in>:nth-child(3){transition-delay:.16s}
  html.js.is-ready .xh-in>:nth-child(4){transition-delay:.26s}
  html.js.is-ready .xh-in>:nth-child(5){transition-delay:.36s}
  html.js.is-ready .xh-in>:nth-child(6){transition-delay:.44s}
  html.js.is-ready .xh-in>:nth-child(7){transition-delay:.52s}
  .xh-embers i{position:absolute;left:var(--x);bottom:12%;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#ffd89a 0%,#f0a13a 45%,rgba(240,161,58,0) 70%);box-shadow:0 0 10px 2px rgba(240,161,58,.55);opacity:0;animation:ember var(--t) linear var(--d) infinite}
  @keyframes ember{0%{transform:translate(0,0);opacity:0}12%{opacity:.95}55%{transform:translate(14px,-34vh);opacity:.7}100%{transform:translate(-10px,-72vh);opacity:0}}
  .xh-pulse path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:pulse-draw 4.2s cubic-bezier(.6,0,.4,1) infinite}
  @keyframes pulse-draw{0%{stroke-dashoffset:1400;opacity:0}8%{opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  html.js:not(.rd) .xh-in>*{animation:failsafe .6s ease 2s forwards}
}
.xh-embers{position:absolute;inset:0;z-index:1;pointer-events:none}
.xh-pulse{position:absolute;left:0;right:0;bottom:0;z-index:1;width:100%;height:64px;pointer-events:none}
.xh-pulse path{fill:none;stroke:#8a2350;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;opacity:.5;vector-effect:non-scaling-stroke}

/* ---------- What you get: four reasons, right under the hero ---------- */
.gets{padding:clamp(48px,6vw,88px) 0;background:var(--paper);border-bottom:1px solid var(--line)}
.gets-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.get{display:flex;flex-direction:column;gap:10px}
.get-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ct);color:var(--paper)}
.get-ic .ic{width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none}
.get-t{margin-top:6px;font:400 clamp(1.45rem,1.9vw,1.8rem)/1.05 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.get p{font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}

@media (max-width:1100px){
  .xh-media{left:28%}
  .xh-in>*{max-width:34rem}
}
@media (max-width:960px){
  .gets-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}
/* phones: the scene sits on top, the promise below on the scene's own ground */
@media (max-width:760px){
  .xh{display:block;min-height:0;padding:0 0 48px}
  .xh-media{position:relative;inset:auto;left:auto;height:auto;aspect-ratio:5/4;margin-top:var(--hd)}
  .xh-media img{object-position:76% 50%}
  .xh-media::after{background:linear-gradient(180deg,transparent 60%,var(--g) 100%)}
  .xh-in{margin-top:-28px}
  .xh-h{font-size:clamp(2.9rem,13vw,4rem)}
  .xh-clock{gap:8px}
  .xh-u{min-width:2.6rem}
  .xh-clock-l{display:none}
  .xh-pulse{height:44px}
}
@media (max-width:420px){
  .gets-grid{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   Scroll story hero "ss" (13/11/2026, owner picked: moving video, scroll story,
   festival poster). A 300vh section whose stage stays pinned while three
   scenes play: the poster, what you get, the ticket. /js/story.js sets --p
   (0 to 1) and data-scene. Ground --g is the art's own colour; .xh--dark /
   .xh--light reuse the ticket and chip colours from the "xh" rules above.
   ========================================================================== */
.ss{--g:#0a0d14;--p:0;position:relative;height:300vh;background:var(--g);color:var(--paper)}
.ss.xh--light{--g:#ebb0c2;--xem:#8a2350;color:var(--ink)}
.ss-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ss-media{position:absolute;inset:0}
.ss-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 50%;transform:scale(calc(1.1 - var(--p) * .1));transform-origin:72% 50%;will-change:transform}
.ss-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--g) 0%,color-mix(in srgb,var(--g) 84%,transparent) 30%,color-mix(in srgb,var(--g) 22%,transparent) 56%,transparent 70%)}
.ss-shade::after{content:"";position:absolute;inset:0;background:var(--g);opacity:calc(var(--p) * .4)}

.ss-scene{position:absolute;inset:0;z-index:2;display:flex;align-items:center;padding:calc(var(--hd) + 20px) 0 72px;opacity:0;pointer-events:none;transform:translateY(48px);transition:opacity .7s var(--ease),transform .95s var(--ease)}
.ss[data-scene="1"] .ss-poster,.ss[data-scene="2"] .ss-list,.ss[data-scene="3"] .ss-go{opacity:1;pointer-events:auto;transform:none}
.ss[data-scene="2"] .ss-poster,.ss[data-scene="3"] .ss-poster,.ss[data-scene="3"] .ss-list{transform:translateY(-48px)}
.ss-scene .wrap{position:relative}
.ss-scene .wrap>*{max-width:44rem}
.ss-scene .wrap>.ss-h{max-width:none}

/* scene 1: the poster */
.ss .ev-row{margin-bottom:clamp(14px,2.4vh,26px)}
.ss .ev-k{color:inherit;opacity:.82}
.ss-h{font:400 min(10.4vw,16vh)/.84 var(--serif);letter-spacing:-.036em}
.ss-h span,.ss-h em{display:block}
.ss-h em{font-style:italic;color:var(--xem,#f3b56a);white-space:nowrap}
.ss-when{display:flex;align-items:flex-end;gap:clamp(14px,1.6vw,24px);margin-top:clamp(18px,3.4vh,36px)}
.ss-day{font:400 min(13vw,20vh)/.76 var(--serif);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--xem,#f3b56a);font-variant-numeric:lining-nums}
.ss-mon{display:flex;flex-direction:column;gap:6px;padding-bottom:.5vh;font:400 min(3.4vw,6vh)/1 var(--serif)}
.ss-mon i{font:500 var(--fs-small)/1.3 var(--sans);font-style:normal;opacity:.86}
.ss-stamp{position:absolute;left:min(41rem,52vw);top:8%;width:clamp(128px,12vw,184px);height:auto;overflow:visible}
.ss-stamp-bg{fill:var(--xem,#f3b56a)}
.ss-stamp text{fill:var(--g);font:600 17px var(--sans);letter-spacing:.06em}
.ss-stamp .ss-stamp-c{font:italic 400 52px var(--serif);letter-spacing:0}
.ss-stamp-ring{transform-origin:100px 100px}
.ss-hint{position:absolute;left:0;bottom:-40px;display:inline-flex;align-items:center;gap:12px;min-height:44px;font:500 var(--fs-label)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.8}
.ss-hint i{position:relative;display:block;width:56px;height:1px;background:currentColor;opacity:.4;overflow:hidden}
.ss-hint i::after{content:"";position:absolute;inset:0;background:currentColor;transform:translateX(-100%)}

/* scene 2: what you get */
.ss-k{margin-bottom:clamp(16px,2.6vh,28px);font:500 var(--fs-label)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.ss-gets{display:grid;gap:clamp(14px,2.6vh,26px);margin:0;padding:0;list-style:none}
.ss-gets li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:start;opacity:0;transform:translateX(-28px);transition:opacity .6s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--i) * .1s + .15s)}
.ss[data-scene="2"] .ss-gets li{opacity:1;transform:none}
.ss-gi{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--xem,#f3b56a);color:var(--g)}
.ss-gi .ic{width:20px;height:20px;stroke:currentColor;stroke-width:2.6;fill:none}
.ss-gets b{display:block;font:400 min(3vw,5.4vh)/1.02 var(--serif);letter-spacing:-.012em}
.ss-gets li>span>span{display:block;margin-top:6px;max-width:30em;font-size:var(--fs-body);line-height:1.5;opacity:.86}

/* scene 3: the ticket */
.ss-hook{font:400 italic min(3.6vw,6.4vh)/1.08 var(--serif);max-width:15em;letter-spacing:-.01em}
.ss .ticket{margin-top:clamp(20px,3.4vh,34px)}

/* chrome: scene dots and progress */
.ss-dots{position:absolute;right:max(16px,2.2vw);top:50%;z-index:3;display:grid;gap:12px;transform:translateY(-50%)}
.ss-dots button{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;opacity:.55;transition:background-color .4s,opacity .4s,transform .4s var(--ease)}
.ss[data-scene="1"] .ss-dots button:nth-child(1),.ss[data-scene="2"] .ss-dots button:nth-child(2),.ss[data-scene="3"] .ss-dots button:nth-child(3){background:currentColor;opacity:1;transform:scale(1.25)}
.ss-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:color-mix(in srgb,currentColor 14%,transparent)}
.ss-bar i{display:block;height:100%;width:calc(var(--p) * 100%);background:var(--xem,#f3b56a)}

/* fairy lights for the Christmas scene */
.ss-lights{position:absolute;left:0;right:0;top:var(--hd);height:16vh;z-index:1;pointer-events:none}
.ss-lights i{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;background:#ffe3ad;box-shadow:0 0 10px 3px rgba(255,186,92,.6),0 0 26px 8px rgba(255,170,70,.18)}

@media (prefers-reduced-motion:no-preference){
  .ss-stamp-ring{animation:ss-spin 22s linear infinite}
  @keyframes ss-spin{to{transform:rotate(360deg)}}
  .ss-hint i::after{animation:ss-hint 2.2s var(--ease) infinite}
  @keyframes ss-hint{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
  .ss-lights i{animation:twinkle 3s ease-in-out var(--d) infinite}
  @keyframes twinkle{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}
  html.js:not(.is-ready) .ss-poster .wrap>*{opacity:0;transform:translateY(22px)}
  html.js.is-ready .ss-poster .wrap>*{transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
  html.js.is-ready .ss-poster .wrap>:nth-child(2){transition-delay:.08s}
  html.js.is-ready .ss-poster .wrap>:nth-child(3){transition-delay:.18s}
  html.js.is-ready .ss-poster .wrap>:nth-child(4){transition-delay:.32s}
  html.js.is-ready .ss-poster .wrap>:nth-child(5){transition-delay:.44s}
  html.js:not(.rd) .ss-poster .wrap>*{animation:failsafe .6s ease 2s forwards}
}

/* static: reduced motion, or no script. The scenes stack as plain blocks. */
.ss--static,html:not(.js) .ss{height:auto}
.ss--static .ss-stage,html:not(.js) .ss-stage{position:relative;height:auto;overflow:visible}
.ss--static .ss-media,html:not(.js) .ss-media{height:100svh;bottom:auto}
.ss--static .ss-shade,html:not(.js) .ss-shade{height:100svh;bottom:auto}
.ss--static .ss-video,html:not(.js) .ss-video{transform:none}
.ss--static .ss-scene,html:not(.js) .ss-scene{position:relative;inset:auto;opacity:1;pointer-events:auto;transform:none;padding:56px 0}
.ss--static .ss-poster,html:not(.js) .ss-poster{min-height:100svh;padding-top:calc(var(--hd) + 20px)}
.ss--static .ss-gets li,html:not(.js) .ss-gets li{opacity:1;transform:none}
.ss--static :is(.ss-dots,.ss-bar,.ss-hint),html:not(.js) .ss :is(.ss-dots,.ss-bar,.ss-hint){display:none}

/* phones: the scene fills the screen, the copy sits low on a deeper fade */
@media (max-width:760px){
  .ss{height:280vh}
  .ss-video{object-position:74% 50%}
  .ss-shade{background:linear-gradient(180deg,color-mix(in srgb,var(--g) 40%,transparent) 0%,transparent 22%,transparent 34%,color-mix(in srgb,var(--g) 80%,transparent) 58%,var(--g) 82%)}
  .ss-scene{align-items:flex-end;padding:calc(var(--hd) + 16px) 0 64px}
  .ss-scene .wrap{position:static}
  .ss-h{font-size:clamp(3rem,15vw,4.6rem)}
  .ss-h em{white-space:normal}
  .ss-day{font-size:clamp(5rem,26vw,7.5rem);-webkit-text-stroke-width:1.5px}
  .ss-mon{font-size:1.9rem}
  .ss-stamp{left:auto;right:16px;top:calc(var(--hd) + 18px);width:112px}
  .ss-hint{position:static;margin-top:18px}
  .ss-dots{display:none}
  .ss-gets b{font-size:1.75rem}
  .ss-gets li>span>span{font-size:var(--fs-small)}
  .ss-hook{font-size:2.1rem}
  .ss .xh-clock-l{display:none}
  .ss--static .ss-scene,html:not(.js) .ss-scene{align-items:flex-start}
}
@media (max-width:760px) and (max-height:700px){
  .ss-gets li>span>span{display:none}
}

/* ---------- Partner logos (13/11/2026): the poster credit, the strip under
   the story, and the row under the /events cards. Logos share one optical
   height; --k is the same per-logo factor /partners uses. ---------- */
.ss-with{display:flex;align-items:center;gap:14px;margin-top:clamp(16px,2.6vh,26px);font:500 var(--fs-label)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.ss-with img{width:auto;height:clamp(30px,4.4vh,40px)}

.pstrip{padding:clamp(36px,4.4vw,60px) 0;background:var(--paper);border-bottom:1px solid var(--line)}
.pstrip-in{display:flex;flex-wrap:wrap;align-items:center;gap:24px clamp(28px,4vw,64px)}
.pstrip-lead{display:flex;flex-direction:column;gap:12px;padding-right:clamp(28px,4vw,64px);border-right:1px solid var(--line)}
.pstrip-wp img{width:auto;height:60px}
.pstrip-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.pstrip-k{font:500 var(--fs-label)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pstrip-logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(20px,2.4vw,40px);margin:0;padding:0;list-style:none}
.pstrip-logos img{display:block;width:auto;height:calc(36px * var(--k,1));max-height:66px;opacity:.92;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.pstrip-logos li:hover img,.pstrip-wp:hover img{opacity:1;transform:translateY(-2px)}
.pstrip-more{flex:none}
.pstrip-main--inline{margin-top:clamp(36px,4vw,52px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}

@media (max-width:760px){
  .pstrip-lead{padding-right:0;border-right:0;padding-bottom:20px;border-bottom:1px solid var(--line);width:100%}
  .pstrip-in{flex-direction:column;align-items:stretch}
  .pstrip-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:22px 18px}
  .pstrip-logos img{max-width:100%;object-fit:contain}
  .pstrip-more{align-self:flex-start}
  .pstrip-logos img{height:calc(28px * var(--k,1));max-height:52px}
  .ss-with img{height:28px}
}

/* ==========================================================================
   /events full-screen split (13/11/2026, owner: "/events is not wow enough").
   One panel per open event over its looping cinemagraph, poster type at the
   foot of each. Hover or focus widens a panel and dims the other. A single
   panel (the other event over) fills the width.
   ========================================================================== */
.evx-sec{padding-top:calc(var(--hd) + clamp(14px,2vh,24px));padding-bottom:clamp(48px,6vw,88px)}
.evx-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);align-items:end;gap:12px 48px;margin-bottom:clamp(14px,2vh,22px)}
.evx-head .ph-h{font-size:clamp(2.8rem,min(5.4vw,8.4vh),5.4rem)}
.evx-intro .ev-proof{margin-top:6px}
.evx-intro .ph-lede{margin-top:0}
.evx{display:flex;gap:6px;height:calc(100vh - var(--hd) - clamp(132px,18vh,176px));height:calc(100svh - var(--hd) - clamp(132px,18vh,176px));min-height:470px;max-height:900px;padding:0 6px}
.evx[hidden]{display:none}
.evx-panel{--g:#0a0d14;position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:clamp(18px,2.4vw,34px);color:var(--paper);background:var(--g);isolation:isolate;transition:flex-grow .9s var(--ease)}
.evx-panel--light{--g:#ebb0c2;--xem:#8a2350;color:var(--ink)}
.evx-panel--dark{--xem:#f3b56a}
.evx-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.04);transition:transform 1.4s var(--ease)}
.evx-panel--dark .evx-video{object-position:70% 50%}
.evx-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--g) 30%,transparent) 0%,transparent 26%,transparent 42%,color-mix(in srgb,var(--g) 82%,transparent) 72%,var(--g) 100%);transition:background-color .6s var(--ease)}
.evx-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.evx-panel--dark .cost-chip{background:var(--teal);color:var(--ink)}
.evx-panel--light .cost-chip{background:var(--paper);color:var(--t-teal)}
.evx-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.evx-k{font:500 var(--fs-label)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.evx-date{display:flex;align-items:flex-end;gap:14px}
.evx-date b{font:400 clamp(4.4rem,min(8vw,13vh),9rem)/.76 var(--serif);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--xem)}
.evx-date>span{display:flex;flex-direction:column;gap:5px;padding-bottom:4px;font:400 clamp(1.6rem,2.4vw,2.4rem)/1 var(--serif)}
.evx-date i{font:500 var(--fs-small)/1.3 var(--sans);font-style:normal;opacity:.86}
.evx-t{font:400 clamp(2.4rem,min(4.2vw,7vh),4.6rem)/.9 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.evx-t em{display:block;font-style:italic;color:var(--xem)}
.evx-hook{max-width:26em;font:400 italic clamp(1.15rem,1.4vw,1.4rem)/1.3 var(--serif);opacity:.92}
.evx-go{display:inline-flex;align-items:center;gap:.7em;min-height:50px;margin-top:6px;padding:0 1.5em;border-radius:999px;font:500 .9375rem/1 var(--sans);background:var(--ink);color:var(--paper);transition:background-color .4s var(--ease),color .4s var(--ease)}
.evx-panel--dark .evx-go{background:var(--paper);color:var(--ink)}
.evx-go .ic{transition:transform .5s var(--ease)}
.evx-panel:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.evx[data-count="1"]{padding:0 6px}

@media (hover:hover) and (min-width:861px){
  .evx:hover .evx-panel{flex-grow:.8}
  .evx .evx-panel:hover,.evx .evx-panel:focus-visible{flex-grow:1.45}
  .evx:hover .evx-panel:not(:hover) .evx-shade{background-color:color-mix(in srgb,var(--g) 38%,transparent)}
  .evx-panel:hover .evx-video{transform:scale(1)}
  .evx-panel:hover .evx-go .ic{transform:translateX(5px)}
  .evx-panel--light:hover .evx-go{background:var(--xem)}
  .evx-panel--dark:hover .evx-go{background:var(--xem)}
}
@media (max-width:860px){
  .evx-head{grid-template-columns:minmax(0,1fr)}
  .evx{flex-direction:column;height:auto;min-height:0;gap:10px;padding:0 10px}
  .evx-panel{min-height:min(84svh,720px)}
  .evx-date b{font-size:clamp(4.6rem,24vw,7rem);-webkit-text-stroke-width:1.5px}
  .evx-t{font-size:clamp(2.4rem,11vw,3.4rem)}
  .evx-go{align-self:stretch;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .evx-panel,.evx-video{transition:none}
}

/* ---------- Good to know: the logistics, right under the hero ---------- */
.evd-facts{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.evd-facts dt,.evd-facts dd{padding:15px 0;border-bottom:1px solid var(--line)}
.evd-facts dt{padding-right:16px;font:500 var(--fs-small)/1.5 var(--sans);color:var(--ink-2)}
.evd-facts dd{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--ink)}
.evd-facts dd small{display:block;margin-top:3px;font-size:var(--fs-small);color:var(--ink-2)}
.evd-facts .tlink{min-height:36px;font-size:var(--fs-small)}
.evd-fig{margin:0}
.evd-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.evd-fig figcaption{padding-top:12px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}

/* ---------- RSVP form ---------- */
.rsvp .size-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
.rsvp .wz-error{margin-top:16px}
.rsvp .rv-send{width:100%;margin-top:clamp(24px,2.6vw,32px)}
.rsvp .rv-done{text-align:center;padding:12px 0 4px}
.rsvp .rv-done[hidden]{display:none}
.rsvp .rv-tick{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--ct,var(--t-teal));color:var(--paper)}
.rsvp .rv-tick svg{width:28px;height:28px}
.rsvp .rv-done h2{outline:none;font:400 clamp(2rem,3vw,2.75rem)/1.04 var(--serif-t);letter-spacing:-.015em;color:var(--ink)}
.rsvp .rv-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.rsvp .rv-actions .btn{width:100%;min-width:0}
.rsvp .rv-actions .rv-wide{grid-column:1/-1}
.rsvp .rv-actions .btn-ghost svg{width:17px;height:17px}
.evd-side .ticks li{color:var(--ink)}

/* the host beside the form: a face, and who will message them */
.host{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;align-self:stretch;margin-top:8px;padding:16px;background:var(--paper);border:1px solid var(--line)}
.host img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.host-n{font:400 1.35rem/1.1 var(--serif);color:var(--ink)}
.host-r{margin-top:4px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.host-proof{font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}

/* optional fields fold away, so the form reads as four questions */
.rsvp .rv-more{margin:0;border-top:1px solid var(--line)}
.rsvp .rv-more summary{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;list-style:none;font:500 var(--fs-small)/1.3 var(--sans);color:var(--ink)}
.rsvp .rv-more summary::-webkit-details-marker{display:none}
.rsvp .rv-more summary::before{content:"+";display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;font:400 1rem/1 var(--sans);transition:transform .4s var(--ease)}
.rsvp .rv-more[open] summary::before{transform:rotate(45deg)}
.rsvp .rv-more summary span{color:var(--ink-2);font-weight:400}
.rsvp .rv-more summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rsvp .rv-more .f-row{padding-top:6px}
.rsvp .rv-more+.wz-consent{margin-top:8px}

/* closing nudge after the FAQ */
.evd-close{padding:clamp(88px,10vw,150px) 0;background:var(--night);color:var(--paper);text-align:center}
.evd-close .wrap{display:flex;flex-direction:column;align-items:center}
.evd-close-k{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 16px;border:1px solid var(--line-d);border-radius:999px;font:500 var(--fs-small)/1 var(--sans);color:var(--paper)}
.evd-close-k .up-dot{background:var(--c,var(--coral))}
.evd-close-h{margin-top:clamp(22px,2.6vw,32px);max-width:12em;font:400 var(--fs-display)/.98 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.evd-close-h em{color:var(--c,var(--coral))}
.evd-close-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;margin-top:clamp(28px,3.2vw,40px)}
.evd-share--light{color:var(--paper)}

/* ---------- FAQ: the homepage accordion on a paper ground ---------- */
.evd-faq{padding:var(--sec-in) 0;background:var(--paper)}
.evd-faq .faq-grid{align-items:start}

/* ==========================================================================
   /events: the open events lead the page. One .up-card per event, soonest
   first; /js/next-event.js removes ended cards and shows the countdown tag
   on the first one left.
   ========================================================================== */
.ev-ph--up{padding-bottom:clamp(56px,6vw,96px)}
.ev-up-head{max-width:46rem}
.ev-up-head .ph-h{font-size:var(--fs-display)}
.ev-proof{margin-top:16px;font-size:var(--fs-small);color:var(--ink-2)}
.up-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,52px)}
.up-card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 70px -56px rgba(22,24,28,.5);transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.up-card:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 40px 80px -50px rgba(22,24,28,.55)}
.up-card .evm>img{transition:transform 1.1s var(--ease)}
.up-card:hover .evm>img{transform:scale(1.04)}
.up-card .evd-date{width:84px;height:100px}
.up-card .evd-date b{font-size:2.4rem}
.up-card .evd-date span{font-size:1.1rem}
.up-text{flex:1;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,32px)}
.up-t{font:400 clamp(2rem,2.8vw,2.75rem)/1 var(--serif);letter-spacing:-.014em;color:var(--ink);text-wrap:balance}
.up-t a::after{content:"";position:absolute;inset:0;z-index:3}
.up-t a:focus-visible{outline:none}
.up-card:has(a:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.up-hook{margin-top:-4px;font:400 italic 1.35rem/1.25 var(--serif);color:var(--ct)}
.up-when{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.up-when b{font-weight:500;color:var(--ink)}
.up-go{align-self:flex-start;display:inline-flex;align-items:center;gap:.7em;min-height:50px;padding:0 1.5em;border-radius:999px;background:var(--ink);color:var(--paper);font:500 .9375rem/1 var(--sans)}
.up-go .ic{transition:transform .5s var(--ease)}
.up-card:hover .up-go{background:var(--ct)}
.up-card:hover .up-go .ic{transform:translateX(4px)}
.ev-gal-head{margin-bottom:clamp(28px,3vw,44px)}

@media (max-width:860px){
  .up-grid{grid-template-columns:minmax(0,1fr)}
}
/* phones: the picture first, like any event listing, then the pitch */
@media (max-width:960px){
  .evd-hero .ph-media{order:-1}
  .evd-hero .evm--tall{aspect-ratio:16/11}
}
@media (max-width:760px){
  .evd-facts{grid-template-columns:minmax(0,1fr)}
  .evd-facts dt{padding-bottom:0;border-bottom:0}
  .evd-facts dd{padding-top:4px}
  .evd-date{width:88px;height:106px}
  .evd-date b{font-size:2.5rem}
  .rsvp .rv-actions{grid-template-columns:minmax(0,1fr)}
  .evm--tall{aspect-ratio:4/3}
}
@media (max-width:480px){
  .ticket{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ticket>div:last-child{grid-column:1/-1;border-left:0;border-top:1.5px dashed var(--line)}
  .ticket>div:last-child::before,.ticket>div:last-child::after{display:none}
  .evm--slip{aspect-ratio:auto;padding:62px 16px 26px;justify-items:center}
  .evm--slip .evd-date{display:none}
  .slip{width:min(88%,300px);padding:16px 16px 14px}
  .slip li{font-size:.875rem}
  .evm .evd-date,.up-card .evd-date{width:72px;height:86px}
  .evm .evd-date b{font-size:2rem}
  .evm .evd-date span{font-size:1rem}
  .up-go{align-self:stretch;justify-content:center}
}
@media (max-width:420px){
  .rsvp .size-chip{font-size:.9375rem;padding:8px 6px}
}
@media (prefers-reduced-motion:reduce){
  .up-dot{animation:none}
  .up-card,.up-card:hover,.up-card:hover .evm>img{transform:none}
}

/* The homepage's "next event" pill (.hero-next) is styled in redesign.css,
   the only stylesheet the homepage loads. */