/* ============================================================
   HALLOWEEN EVENT PAGES (rotterdam-hw26 and future city clones)
   Loaded AFTER event.css and BEFORE mobile.css, only on Halloween
   pages. Scoped under body.ev-hw so event.css / event.js stay untouched.
   Direction: near-black canvas, white type, hairlines instead of
   offset shadows, orange as ONE accent (the date, one word, a glow).
   ============================================================ */

body.ev-hw{
  --paper:#0A0908;
  --paper-2:#0A0908;
  --ink:#F5F1EC;
  /* --ink-2 is a dark SURFACE token, not a text token: styles.css uses it for the footer
     social circles and the footer bottom rule. Flipping it light made those icons vanish
     against the black footer, so it keeps the site value here. */
  --ink-2:#2A211C;
  --line:rgba(255,255,255,.12);
  --orange-soft:#1E0E08;
  --hw-bg:#0A0908;
  --hw-surface:#121010;
  --hw-line:rgba(255,255,255,.12);
  --hw-line-2:rgba(255,255,255,.22);
  --hw-muted:rgba(245,241,236,.62);
  --hw-ink:#0A0908;
  background:var(--hw-bg);
  color:var(--ink);
}
html:has(body.ev-hw){ background:#0A0908; }
/* film grain over everything, very faint */
body.ev-hw::after{ content:""; position:fixed; inset:0; z-index:5000; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* section tones: black (default), warm dark, cream */
body.ev-hw .section.hw-warm{ background:#150D0A; background-image:radial-gradient(70% 60% at 50% 0%, rgba(255,75,41,.12), rgba(255,75,41,0)); }
body.ev-hw .section.hw-light{ background:#F3EEE7; color:#0A0908; }
body.ev-hw .hw-light h2, body.ev-hw .hw-light h3{ color:#0A0908; }
body.ev-hw .hw-light .lead, body.ev-hw .hw-light p{ color:#5a4d45; }
body.ev-hw .hw-light .eyebrow{ color:#6a5d54; border-color:rgba(10,9,8,.22); }
body.ev-hw .hw-light .ev-expect-grid{ border-top-color:rgba(10,9,8,.14); }
body.ev-hw .hw-light .ev-xcard{ border-right-color:rgba(10,9,8,.14); }
body.ev-hw .hw-light .faq .qa{ border-top-color:rgba(10,9,8,.14); }
body.ev-hw .hw-light .faq .qa:last-child{ border-bottom-color:rgba(10,9,8,.14); }
body.ev-hw .hw-light .faq .qa button{ color:#0A0908; }
body.ev-hw .hw-light .faq .qa .pm{ color:#0A0908; border-color:rgba(10,9,8,.3); }
body.ev-hw .hw-light .faq .ans a{ color:#0A0908; }
body.ev-hw .hw-light .faq.collapsed::after{ background:linear-gradient(180deg, rgba(243,238,231,0), #F3EEE7); }
body.ev-hw .hw-light .btn-ink{ background:#0A0908; color:#fff; border-color:#0A0908; }
body.ev-hw .section.hw-light + .section, body.ev-hw .section + .section.hw-light{ border-top:0; }
body.ev-hw .section{ background:var(--hw-bg); color:var(--ink); padding:110px 0; }
body.ev-hw .section-paper2{ background:var(--hw-bg); }
body.ev-hw h1, body.ev-hw h2, body.ev-hw h3, body.ev-hw h4{ color:var(--ink); }
body.ev-hw h2{ letter-spacing:-.025em; }
body.ev-hw .section-head .lead, body.ev-hw .lead{ color:var(--hw-muted); }
body.ev-hw .eyebrow{ background:transparent; color:rgba(232,217,197,.78); border:1px solid var(--hw-line-2); box-shadow:none; font-weight:700; letter-spacing:.16em; }
body.ev-hw .scribble svg{ display:none; }
body.ev-hw .hand-note{ display:none !important; }
body.ev-hw .section + .section{ border-top:1px solid var(--hw-line); }

/* ---------- buttons: white is the primary colour on this page ---------- */
body.ev-hw .btn, body.ev-hw .btn:hover, body.ev-hw .btn:active{ box-shadow:none !important; }
body.ev-hw .btn{ border-radius:100px; font-weight:800; letter-spacing:-.005em; transition:transform .15s, background .15s, color .15s, border-color .15s; }
body.ev-hw .btn-primary{ background:#fff; color:var(--hw-ink); border-color:#fff; }
body.ev-hw .btn-primary:hover{ background:#F5F1EC; color:var(--hw-ink); transform:translateY(-1px); }
body.ev-hw .btn-white{ background:#fff; color:var(--hw-ink); border-color:#fff; }
body.ev-hw .btn-ink{ background:transparent; color:#fff; border:1px solid var(--hw-line-2); }
body.ev-hw .btn-ink:hover{ border-color:#fff; }
.btn-wa{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:var(--hw-ink); border:2px solid #fff; }
.btn-wa svg{ flex:none; color:#25D366; }
.btn-wa:hover{ background:#25D366; border-color:#25D366; color:#06220f; transform:translateY(-1px); }
.btn-wa:hover svg{ color:#06220f; }
body.ev-hw .btn[aria-disabled="true"]{ opacity:1 !important; background:transparent !important; border:1px dashed var(--hw-line-2) !important; color:rgba(255,255,255,.72) !important; }
body.ev-hw .ev-tier.ev-round.is-live .btn[aria-disabled="true"]{ border-color:rgba(10,9,8,.35) !important; color:#5a4d45 !important; }
body.ev-hw .ev-hero .btn-ghost[aria-disabled="true"]{ border-style:dashed !important; }

/* ---------- nav ---------- */
body.ev-hw .nav-in{ background:rgba(10,9,8,.62); border-color:rgba(255,255,255,.14); box-shadow:0 18px 44px -18px rgba(0,0,0,.7); }
body.ev-hw .nav.scrolled .nav-in{ background:rgba(10,9,8,.8); border-color:rgba(255,255,255,.18); }
body.ev-hw .nav-links a, body.ev-hw .nav-burger{ color:#fff; }
body.ev-hw .nav-links a:hover{ color:var(--orange); }
body.ev-hw .nav .nav-logo img{ filter:brightness(0) invert(1); }
/* Feedback 24 Sep: the burger menu opened as a see through caramel sheet here. The page
   behind is white text on black, so the last 4% of that translucent cream was enough for it
   all to ghost through and the menu looked broken. It is fully opaque now, and dark, so it
   belongs to this page instead of fighting it. To go back to the site's cream menu, delete
   this block: the global rule underneath is already opaque. */
body.ev-hw .nav-links.open{
  background:
    radial-gradient(125% 62% at 88% -8%, rgba(255,75,41,.2), transparent 58%),
    linear-gradient(180deg, #17120F 0%, #0B0908 100%);
}
body.ev-hw.nav-open .nav-links.open > a{ color:#F7F1EC; border-bottom-color:rgba(255,255,255,.1); }
body.ev-hw.nav-open .nav-links.open > a:active{ color:var(--orange); }
body.ev-hw.nav-open .nav-links.open .nav-m-socials a{ color:#9E8E84; }
body.ev-hw.nav-open .nav-links.open .nav-m-socials a:active{ color:var(--orange); }
body.ev-hw.nav-open .nav-burger{ color:#fff; }
/* the logo stays white on the dark menu, the global rule flips it back to black for the cream one */
body.ev-hw.nav-open .nav .nav-logo img{ filter:brightness(0) invert(1); }
body.ev-hw .nav .btn-primary{ background:#fff; color:var(--hw-ink); }

/* ---------- hero: full-bleed photo, copy low left, one accent word ---------- */
body.ev-hw .ev-hero{ background:var(--hw-bg); padding:130px 0 0; min-height:100svh; justify-content:center; }
body.ev-hw .ev-hero-bg{ background-color:var(--hw-bg); }
body.ev-hw .ev-hero-solid .ev-hero-bg::after{
  background:linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,.15) 40%, rgba(10,9,8,.55) 70%, rgba(10,9,8,1) 100%);
}
.ev-hw-fog{ position:absolute; inset:auto 0 0 0; height:50%; z-index:1; pointer-events:none; overflow:hidden; opacity:.45; }
.ev-hw-fog i{ position:absolute; bottom:-30%; width:70%; height:120%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,110,60,.22), rgba(255,110,60,0)); filter:blur(34px); }
.ev-hw-fog i:nth-child(1){ left:-20%; animation:hwFog 22s ease-in-out infinite alternate; }
.ev-hw-fog i:nth-child(2){ right:-25%; animation:hwFog 28s ease-in-out infinite alternate-reverse; }
@keyframes hwFog{ from{ transform:translateX(0) scale(1); } to{ transform:translateX(18%) scale(1.15); } }

body.ev-hw .ev-hero-grid{ grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
body.ev-hw .ev-hero-copy{ max-width:640px; }
body.ev-hw .ev-kicker{ background:rgba(10,9,8,.35); color:#fff; border:1px solid var(--hw-line-2); box-shadow:none; backdrop-filter:blur(8px); font-weight:700; letter-spacing:.16em; }
body.ev-hw .ev-kicker .dot{ background:var(--orange); }
body.ev-hw .ev-hero h1{ position:relative; margin-top:24px; font-size:clamp(48px,6.4vw,92px); line-height:.9; letter-spacing:-.04em; color:#fff; text-shadow:0 10px 40px rgba(0,0,0,.5); }
/* Feedback 24 Sep: something spooky in the title. A web strung across the top left of the
   heading so the strands run behind the first words, and a spider hanging off the top edge
   on a thread (built by halloween.js so there is one spider drawing, not two). Both sit in
   the empty pocket to the right of the short first lines, never over a letter. */
body.ev-hw .ev-hero h1::before{ content:""; position:absolute; z-index:-1; top:-.3em; left:-.22em;
  width:1.65em; height:1.65em; background:rgba(255,255,255,.3); pointer-events:none;
  -webkit-mask-image:url(assets/halloween/decor/web-corner.svg); mask-image:url(assets/halloween/decor/web-corner.svg);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.hw-tspider{ position:absolute; top:0; left:69%; width:0; height:0; z-index:1; pointer-events:none;
  transform-origin:50% 0; animation:hwTitleSway 5.4s ease-in-out infinite; }
.hw-tspider-thread{ position:absolute; top:0; left:0; display:block; width:1px; height:.64em;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.55)); }
.hw-tspider-body{ position:absolute; top:.62em; left:0; display:block; width:.54em; height:.54em; margin-left:-.27em; }
.hw-tspider-body svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 7px 12px rgba(0,0,0,.7)); }
@keyframes hwTitleSway{ 0%,100%{ transform:rotate(-3.4deg); } 50%{ transform:rotate(3.4deg); } }
body.ev-hw .ev-hero h1 .yr{ color:var(--orange); }
body.ev-hw .ev-yr-line{ display:none; }
body.ev-hw .ev-hero .lead{ margin-top:26px; font-size:clamp(17px,1.3vw,20px); max-width:58ch; color:rgba(255,255,255,.82); }
body.ev-hw .ev-hero .lead .uni-hl{ color:#fff; }
body.ev-hw .ev-hero-actions{ margin-top:30px; gap:12px; }
body.ev-hw .ev-hero .btn-ghost{ background:transparent; color:#fff; border:1px solid var(--hw-line-2); }
body.ev-hw .ev-hero .btn-ghost:hover{ background:transparent; color:#fff; border-color:#fff; }

/* countdown becomes a hairline strip at the foot of the hero */
body.ev-hw .ev-count-wrap{ margin-top:64px; padding:26px 0 30px; border-top:1px solid var(--hw-line);
  display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left; flex-wrap:wrap; }
body.ev-hw .ev-count-label{ font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--hw-muted); transform:none; margin:0; }
body.ev-hw .ev-count{ gap:28px; justify-content:flex-start; }
body.ev-hw .ev-count-card{ background:none; border:0; box-shadow:none; padding:0; min-width:0; align-items:flex-start; gap:4px; }
body.ev-hw .ev-count-num{ font-size:clamp(34px,3.2vw,48px); color:#fff; letter-spacing:-.03em; }
body.ev-hw .ev-count-unit{ font-size:11px; letter-spacing:.16em; color:var(--hw-muted); }
body.ev-hw .ev-count-sep{ display:none; }
body.ev-hw .ev-count-wrap.is-live{ justify-content:center; }
body.ev-hw .ev-count-wrap.is-live .ev-count-live{ background:transparent; border:1px solid var(--hw-line-2); color:#fff; box-shadow:none; font-size:clamp(18px,2vw,24px); padding:14px 24px; }

/* ---------- ticker: quiet ---------- */
body.ev-hw .ev-ticker{ background:var(--hw-bg); border-top:1px solid var(--hw-line); border-bottom:1px solid var(--hw-line); padding:15px 0; }
body.ev-hw .ev-ticker span{ color:rgba(255,255,255,.8); font-size:13px; letter-spacing:.2em; font-weight:700; }
body.ev-hw .ev-ticker span::after{ color:var(--orange); }

/* ---------- facts + expect: hairline columns, no cards ---------- */
body.ev-hw .ev-icards{ gap:0; max-width:1100px; border-top:1px solid var(--hw-line); }
body.ev-hw .ev-icard{ flex-direction:column; align-items:flex-start; gap:18px; background:transparent; border:0; border-right:1px solid var(--hw-line); border-radius:0; box-shadow:none; padding:34px 30px 8px; }
body.ev-hw .ev-icard:last-child{ border-right:0; }
body.ev-hw .ev-icard:hover{ transform:none; box-shadow:none; }
body.ev-hw .ev-icard .ico, body.ev-hw .ev-xcard .ico{ width:auto; height:auto; background:none; border:0; box-shadow:none; font-size:28px; }
body.ev-hw .ev-icard h3{ font-size:20px; letter-spacing:-.01em; }
body.ev-hw .ev-icard p, body.ev-hw .ev-xcard p{ color:var(--hw-muted); font-size:14.5px; }
body.ev-hw .ev-expect-grid{ gap:0; border-top:1px solid var(--hw-line); }
body.ev-hw .ev-xcard{ align-items:flex-start; text-align:left; gap:16px; background:transparent; border:0; border-right:1px solid var(--hw-line); border-radius:0; box-shadow:none; padding:34px 28px 8px; }
body.ev-hw .ev-xcard:last-child{ border-right:0; }
body.ev-hw .ev-xcard:hover{ transform:none; box-shadow:none; }
body.ev-hw .ev-xcard h3{ font-size:18px; }

/* ---------- pre-register: the one bright block on the page ---------- */
.ev-waitlist{ position:relative; z-index:2; max-width:1060px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--hw-bg); color:var(--hw-ink); border-radius:28px; overflow:hidden; border:1px solid var(--hw-line); }
.ev-waitlist-copy{ background:#fff; padding:56px 56px 52px; display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
body.ev-hw .ev-waitlist-copy .eyebrow{ color:#6a5d54; border-color:rgba(26,19,16,.2); }
body.ev-hw .ev-waitlist-copy h2{ margin:0; font-size:clamp(34px,3.8vw,52px); line-height:.98; letter-spacing:-.03em; color:var(--hw-ink); }
body.ev-hw .ev-waitlist-copy p{ margin:0; font-size:16.5px; line-height:1.6; color:#5a4d45; max-width:46ch; }
.ev-waitlist-list{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:0; width:100%; }
.ev-waitlist-list li{ display:flex; align-items:flex-start; gap:14px; font-size:15px; line-height:1.5; color:var(--hw-ink); padding:12px 0; border-top:1px solid rgba(26,19,16,.12); }
.ev-waitlist-list li:last-child{ border-bottom:1px solid rgba(26,19,16,.12); }
.ev-waitlist-list .ico{ flex:none; font-size:18px; line-height:1.4; }
.ev-waitlist-cta{ margin-top:14px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.ev-waitlist-cta .btn-wa{ background:var(--hw-ink); color:#fff; border-color:var(--hw-ink); padding:17px 28px; font-size:17px; }
.ev-waitlist-cta .btn-wa svg{ color:#25D366; }
.ev-waitlist-cta .btn-wa:hover{ background:#25D366; border-color:#25D366; color:#06220f; }
.ev-waitlist-cta .btn-wa:hover svg{ color:#06220f; }
.ev-waitlist-small{ font-size:12.5px; color:#8a7a70; }
.ev-waitlist-art{ position:relative; min-height:420px; background:var(--hw-bg); display:flex; align-items:center; justify-content:center; padding:44px; overflow:hidden; }
.ev-waitlist-art::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 55%, rgba(255,75,41,.42), rgba(255,75,41,0) 72%); }
.ev-hw-print{ position:relative; z-index:1; margin:0; width:100%; max-width:380px; aspect-ratio:4/5; border-radius:20px; overflow:hidden; border:1px solid var(--hw-line-2); transform:rotate(-2.5deg); box-shadow:0 40px 80px rgba(0,0,0,.6); }
.ev-hw-print img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9) contrast(1.05); }
.ev-hw-print::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,8,0) 55%, rgba(10,9,8,.7) 100%); }
.ev-hw-print-badge{ position:absolute; z-index:2; left:50%; bottom:64px; transform:translateX(-50%) rotate(2deg); white-space:nowrap;
  font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(10,9,8,.55); border:1px solid rgba(255,255,255,.3); border-radius:100px; padding:9px 16px; backdrop-filter:blur(8px); }

/* ---------- the ticket: matte black, gradient hairline, soft glow, slow float ---------- */
body.ev-hw .ev-stub-wrap{ position:relative; max-width:400px; }
body.ev-hw .ev-stub-wrap::before{ content:""; position:absolute; inset:-18% -22%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,75,41,.34), rgba(255,75,41,0)); filter:blur(10px); }
body.ev-hw .ev-stub{ position:relative; z-index:2; transform:rotate(-2deg); border:1px solid transparent; border-radius:24px; overflow:hidden;
  background:linear-gradient(#111010,#0C0B0B) padding-box, linear-gradient(140deg, rgba(255,140,100,.95) 0%, rgba(255,255,255,.18) 38%, rgba(255,255,255,.08) 62%, rgba(255,75,41,.75) 100%) border-box;
  box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6) inset; animation:hwStubFloat 7s ease-in-out infinite; }
body.ev-hw .ev-stub::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.09) 55%, transparent 70%);
  transform:translateX(-120%); animation:hwSheen 7s ease-in-out infinite; }
@keyframes hwStubFloat{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(-2deg) translateY(-8px); } }
@keyframes hwSheen{ 0%,55%{ transform:translateX(-120%); } 80%,100%{ transform:translateX(120%); } }
body.ev-hw .ev-stub-head{ background:linear-gradient(180deg, rgba(255,75,41,.16), rgba(255,75,41,0)); border-bottom:1px solid var(--hw-line); padding:24px 28px 20px; }
body.ev-hw .ev-stub-pres{ color:rgba(232,217,197,.7); letter-spacing:.26em; }
body.ev-hw .ev-stub-title{ text-shadow:none; letter-spacing:-.02em; font-size:clamp(36px,3.4vw,46px); }
body.ev-hw .ev-stub-year{ background:transparent; color:#fff; border:1px solid var(--hw-line-2); box-shadow:none; }
body.ev-hw .ev-stub-mid{ padding:22px 28px 22px; }
body.ev-hw .ev-stub-date .d{ color:var(--orange); text-shadow:0 0 30px rgba(255,75,41,.45); }
body.ev-hw .ev-stub-date .stack b{ color:#fff; }
body.ev-hw .ev-stub-date .stack i{ color:var(--hw-muted); }
body.ev-hw .ev-stub-time{ background:transparent; color:#fff; border:1px solid var(--hw-line-2); box-shadow:none; transform:none; }
body.ev-hw .ev-stub-time small{ color:var(--hw-muted); }
body.ev-hw .ev-stub-loc{ background:transparent; color:#fff; border:1px solid var(--hw-line-2); box-shadow:none; transform:none; font-weight:700; font-size:14px; }
body.ev-hw .ev-stub-crowd{ color:var(--hw-muted); }
body.ev-hw .ev-stub-crowd b{ color:#fff; }
body.ev-hw .ev-stub-foot{ background:transparent; border-top:1px dashed var(--hw-line-2); padding:16px 28px; }
body.ev-hw .ev-stub-foot::before, body.ev-hw .ev-stub-foot::after{ background:var(--hw-bg); border:1px solid var(--hw-line-2); }
body.ev-hw .ev-stub-code svg g{ fill:#fff; }
body.ev-hw .ev-stub-code span{ color:var(--hw-muted); }
body.ev-hw .ev-stub-admit{ background:#fff; color:var(--hw-ink); border-color:#fff; box-shadow:none; }
body.ev-hw .ev-scarce{ display:none; }
body.ev-hw .ev-stub-note{ display:none; }

/* ---------- gallery ---------- */
body.ev-hw .ev-gallery .gcard{ background:var(--hw-surface); border-color:var(--hw-line); }

/* ---------- tickets: hairline cards, the live one is white ---------- */
body.ev-hw .ev-rounds{ gap:16px; }
body.ev-hw .ev-tier.ev-round{ background:var(--hw-surface); border:1px solid var(--hw-line-2); border-radius:22px; box-shadow:none; }
body.ev-hw .ev-tier.ev-round[data-tier]:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.4); }
body.ev-hw .ev-round-main{ padding:26px 26px 18px; }
body.ev-hw .ev-round-name{ color:#fff; font-size:17px; letter-spacing:.02em; }
body.ev-hw .ev-tier.ev-round .ev-tier-price{ color:#fff; font-size:clamp(40px,3.8vw,54px); letter-spacing:-.04em; }
body.ev-hw .ev-round-per, body.ev-hw .ev-round-muted{ color:var(--hw-muted); }
body.ev-hw .ev-tier.ev-round .ev-tier-chip{ background:transparent; border:1px solid var(--hw-line-2); color:rgba(255,255,255,.8); }
body.ev-hw .ev-round-tear{ border-top:1px dashed var(--hw-line-2); }
body.ev-hw .ev-round-tear::before, body.ev-hw .ev-round-tear::after{ background:var(--hw-bg); border:1px solid var(--hw-line-2); }
body.ev-hw .ev-round-foot{ padding:16px 26px 24px; }
body.ev-hw .ev-round-code{ background:repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px, #fff 8px 11px, transparent 11px 13px); opacity:.5; }
/* Feedback 24 Sep: the badge was breaking after the flame, so the emoji sat on its own line
   above the word. It stays on one line now, and the row it lives in is allowed to wrap
   instead, which is the right thing to give way when the card gets narrow. */
body.ev-hw .ev-tier-left{ background:transparent; color:var(--orange); border:1px solid rgba(255,75,41,.5); animation:none; transform:none;
  white-space:nowrap; flex:0 0 auto; }
body.ev-hw .ev-round-footrow{ flex-wrap:wrap; row-gap:8px; }
body.ev-hw .ev-round-footrow .ev-round-muted{ flex:1 1 auto; min-width:0; }
body.ev-hw .ev-round-btn{ background:#fff; color:var(--hw-ink); border-color:#fff; }
/* 2 Oct: once tickets are live the buttons on the two dark cards were white with cream text
   (event.css styles the not live rounds with var(--ink), which is cream on this page), so
   the label was unreadable. Nobody saw it while every button was still "coming soon". */
body.ev-hw .ev-tier.ev-round:not(.is-live) .ev-round-btn{ background:#fff; color:var(--hw-ink); border:2px solid #fff; box-shadow:none; }
body.ev-hw .ev-tier.ev-round:not(.is-live) .ev-round-btn:hover{ background:#F5F1EC; box-shadow:none; }
/* live round: white card */
body.ev-hw .ev-tier.ev-round.is-live{ background:#fff; border-color:#fff; box-shadow:0 30px 70px rgba(255,75,41,.18); }
body.ev-hw .ev-tier.ev-round.is-live .ev-round-name{ color:var(--hw-ink); }
body.ev-hw .ev-tier.ev-round.is-live .ev-tier-price{ color:var(--hw-ink); }
body.ev-hw .ev-tier.ev-round.is-live .ev-tier-chip{ background:var(--orange); border-color:var(--orange); color:#fff; }
body.ev-hw .ev-tier.ev-round.is-live .ev-round-per, body.ev-hw .ev-tier.ev-round.is-live .ev-round-muted{ color:#6a5d54; }
body.ev-hw .ev-tier.ev-round.is-live .ev-round-tear{ border-top-color:rgba(26,19,16,.25); }
body.ev-hw .ev-tier.ev-round.is-live .ev-round-tear::before, body.ev-hw .ev-tier.ev-round.is-live .ev-round-tear::after{ background:var(--hw-bg); border-color:#fff; }
body.ev-hw .ev-tier.ev-round.is-live .ev-tier-left{ color:var(--orange); border-color:rgba(255,75,41,.5); }
body.ev-hw .ev-tier.ev-round.is-live .ev-round-btn{ background:var(--hw-ink); color:#fff; border-color:var(--hw-ink); }
body.ev-hw .ev-tier.ev-round.is-live[data-tier]:hover{ box-shadow:0 34px 80px rgba(255,75,41,.24); }
.ev-hw-code{ margin:26px auto 0; max-width:940px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px;
  font-size:14px; color:var(--hw-muted); text-align:center; position:relative; z-index:2; }
.ev-hw-code code{ font-family:var(--font-display); font-weight:900; font-size:14px; letter-spacing:.14em; color:#fff; border:1px dashed var(--hw-line-2); border-radius:10px; padding:6px 12px; }

/* ---------- FAQ ---------- */
body.ev-hw .faq{ background:transparent; border:0; }
body.ev-hw .faq .qa{ background:transparent; border:0; border-top:1px solid var(--hw-line); border-radius:0; }
body.ev-hw .faq .qa:last-child{ border-bottom:1px solid var(--hw-line); }
body.ev-hw .faq .qa button{ color:#fff; padding-left:0; padding-right:0; }
body.ev-hw .faq .qa .pm{ background:transparent; color:#fff; border:1px solid var(--hw-line-2); }
body.ev-hw .faq .ans{ padding-left:0; padding-right:0; }
body.ev-hw .faq .ans p{ color:var(--hw-muted); }
body.ev-hw .faq .ans a{ color:#fff; }

/* ---------- final CTA: type on a glow, no card ---------- */
body.ev-hw .finalcta{ position:relative; overflow:hidden; }
body.ev-hw .finalcta::before{ content:""; position:absolute; left:50%; top:50%; width:900px; height:600px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,75,41,.38), rgba(255,75,41,0)); pointer-events:none; }
body.ev-hw .finalcta .card{ position:relative; background:transparent; border:0; box-shadow:none; padding:20px 0; }
body.ev-hw .finalcta .card h2{ color:#fff; font-size:clamp(40px,5.6vw,78px); letter-spacing:-.035em; line-height:.95; }
body.ev-hw .finalcta .card .lead{ color:var(--hw-muted); }
body.ev-hw .finalcta .btn-white{ background:#fff; color:var(--hw-ink); }

/* ---------- sticky bar / music FAB / modal ---------- */
body.ev-hw .ev-stickycta{ background:rgba(10,9,8,.92); border-top:1px solid var(--hw-line-2); }
body.ev-hw .ev-stickycta-info b{ color:#fff; }
body.ev-hw .ev-stickycta-info span{ color:var(--hw-muted); }
body.ev-hw .ev-stickycta .btn-wa{ padding:12px 20px; }
body.ev-hw .ev-music{ color:var(--hw-ink); border:1px solid rgba(255,255,255,.35); box-shadow:0 18px 40px rgba(0,0,0,.5); }
body.ev-hw .ev-music:hover{ box-shadow:0 22px 44px rgba(0,0,0,.55); }
body.ev-hw .ev-music-cover{ border-color:rgba(10,9,8,.2); }
body.ev-hw .ev-music-txt{ color:var(--hw-ink); }
body.ev-hw .ev-music-sub{ color:#6a5d54; }
body.ev-hw .ev-music[aria-pressed="true"]{ background:var(--hw-ink); color:#fff; border-color:rgba(255,255,255,.35); }
body.ev-hw .ev-music[aria-pressed="true"] .ev-music-txt{ color:#fff; }
body.ev-hw .vcard, body.ev-hw .vbig-item .vcard{ box-shadow:none; border:1px solid var(--hw-line-2); }
body.ev-hw .tt-side{ background:#0A0908; background-image:radial-gradient(circle at 80% 8%, rgba(255,75,41,.45), transparent 55%); }
body.ev-hw .tt-card{ border:1px solid var(--hw-line-2); box-shadow:0 40px 100px rgba(0,0,0,.7); }

/* ---------- footer ---------- */
body.ev-hw .footer{ background:#000; border-top:1px solid var(--hw-line); }
body.ev-hw .footer, body.ev-hw .footer a, body.ev-hw .footer p, body.ev-hw .footer-bot{ color:rgba(255,255,255,.7); }
body.ev-hw .footer h4{ color:#fff; }
body.ev-hw .footer a:hover{ color:#fff; }
body.ev-hw .footer .socials a{ background:#1B1512; border-color:rgba(255,255,255,.14); color:#fff; }
body.ev-hw .footer .socials a:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }
body.ev-hw .footer-bot{ border-top-color:rgba(255,255,255,.12); }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .ev-waitlist{ grid-template-columns:1fr; }
  .ev-waitlist-art{ min-height:0; padding:36px 24px; order:-1; }
  .ev-waitlist-copy{ padding:40px 32px 40px; }
  body.ev-hw .ev-icards{ flex-direction:column; }
  body.ev-hw .ev-icard{ border-right:0; border-bottom:1px solid var(--hw-line); padding:24px 4px; }
  body.ev-hw .ev-icard:last-child{ border-bottom:0; }
  body.ev-hw .ev-expect-grid > .ev-xcard{ flex-basis:calc(50% - 0px); border-bottom:1px solid var(--hw-line); }
  body.ev-hw .ev-xcard:nth-child(2n){ border-right:0; }
}
@media (max-width:680px){
  body.ev-hw .section{ padding:70px 0; }
  body.ev-hw .ev-hero{ padding:120px 0 0; }
  body.ev-hw .ev-hero h1{ font-size:clamp(52px,15vw,76px); }
  body.ev-hw .ev-hero-actions .btn-lg{ padding:14px 10px; }
  body.ev-hw .ev-hero .ev-count-wrap{ margin-top:40px; padding:20px 0 26px; flex-direction:column; align-items:flex-start; gap:14px; }
  body.ev-hw .ev-count{ gap:22px; }
  body.ev-hw .ev-count-card{ max-width:none; flex:0 0 auto; }
  body.ev-hw .ev-count-num{ font-size:32px; }
  .ev-hw-fog{ opacity:.35; }
  .ev-waitlist{ border-radius:22px; }
  .ev-waitlist-copy{ padding:30px 22px 30px; }
  .ev-waitlist-copy h2{ font-size:clamp(30px,9vw,38px); }
  .ev-waitlist-cta{ width:100%; }
  .ev-waitlist-cta .btn-wa{ width:100%; padding:15px 18px; font-size:16px; }
  .ev-waitlist-art{ padding:28px 18px; }
  .ev-hw-print{ max-width:300px; }
  body.ev-hw .ev-stub{ transform:none; animation:none; }
  body.ev-hw .ev-hero .ev-stub-wrap{ margin-top:36px; }
  body.ev-hw .ev-expect-grid > .ev-xcard{ flex-basis:100%; flex-direction:row; align-items:flex-start; border-right:0; padding:20px 4px; }
  body.ev-hw .ev-xcard:last-child{ border-bottom:0; }
  body.ev-hw .ev-round-main{ padding:20px 20px 14px; }
  body.ev-hw .ev-round-foot{ padding:14px 20px 20px; }
  .ev-hw-code{ margin-top:18px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .ev-hw-fog i:nth-child(1), .ev-hw-fog i:nth-child(2){ animation:none; }
}

/* ---------- cream sections: text colours (kept last so they win over the dark defaults) ---------- */
body.ev-hw .section.hw-light, body.ev-hw .section.hw-light h2, body.ev-hw .section.hw-light h3{ color:#0A0908; }
body.ev-hw .section.hw-light .section-head .lead, body.ev-hw .section.hw-light .lead, body.ev-hw .section.hw-light .ev-xcard p, body.ev-hw .section.hw-light .faq .ans p{ color:#5a4d45; }

/* ---------- visuals layer (halloween.js): bats, embers, 3D ticket tilt ---------- */
/* bats are pinned inside the hero, behind the copy (z-index 1 sits above .ev-hero-bg and below .wrap) */
.hw-bats{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hw-bat{ position:absolute; left:0; top:0; width:120px; height:60px; will-change:transform; transform-origin:50% 50%; }
.hw-bat svg{ width:100%; height:100%; display:block; overflow:visible; fill:#1C1310; stroke:rgba(255,150,100,.55); stroke-width:1.2; paint-order:stroke; filter:drop-shadow(0 10px 14px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(255,90,40,.45)); }
.hw-bat .hw-eye{ fill:var(--orange); filter:drop-shadow(0 0 3px rgba(255,75,41,.9)); }
.hw-wing{ transform-origin:60px 30px; animation:hwFlap var(--flap,.4s) ease-in-out infinite alternate; }
.hw-wing-l{ animation-name:hwFlapL; }
.hw-wing-r{ animation-name:hwFlapR; }
@keyframes hwFlapL{ from{ transform:rotateX(0deg) scaleY(1) translateY(0); } to{ transform:scaleY(.35) translateY(-14px) skewX(8deg); } }
@keyframes hwFlapR{ from{ transform:scaleY(1) translateY(0); } to{ transform:scaleY(.35) translateY(-14px) skewX(-8deg); } }
.hw-embers{ position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen; }
body.ev-hw .ev-hero .wrap{ z-index:2; }
/* tilt mode: JS drives the transform, the sheen follows the cursor */
body.ev-hw .hw-tilt .ev-stub{ animation:none; transition:transform .05s linear; transform-style:preserve-3d; }
body.ev-hw .hw-tilt .ev-stub::after{ animation:none; transform:none;
  background:radial-gradient(60% 50% at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.14), rgba(255,255,255,0) 70%); }
@media (max-width:680px){ .hw-bat{ width:84px; height:42px; } }
@media (prefers-reduced-motion:reduce){ .hw-bats, .hw-embers{ display:none; } }

/* ============================================================================
   Feedback round, 22 Sep 2026. New blocks:
   the chip strip under "the spookiest night", the priority sign up band under
   the hero countdown, and the waiting list + WhatsApp duo that replaced the old
   pre-register card.
   ========================================================================== */

.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hw-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
body.ev-hw .hw-tbd{ color:var(--orange); font-weight:800; letter-spacing:.04em; }

/* ---------- chip strip at the foot of a section ---------- */
.hw-chips{ list-style:none; margin:44px 0 0; padding:26px 0 0; border-top:1px solid var(--hw-line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 0; }
.hw-chips li{ position:relative; padding:0 22px; font-family:var(--font-display); font-weight:800;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,241,236,.8); white-space:nowrap; }
.hw-chips li::before{ content:"·"; position:absolute; left:-2px; top:50%; transform:translateY(-50%); color:var(--orange); font-size:18px; line-height:1; }

/* ---------- priority sign up band (under the hero countdown) ---------- */
.hw-strip{ position:relative; z-index:2; background:var(--hw-bg); border-top:1px solid var(--hw-line); padding:34px 0; }
.hw-strip-in{ display:grid; grid-template-columns:minmax(260px,.9fr) 1.4fr; gap:28px 40px; align-items:center; }
.hw-strip-copy h2{ margin:0; font-size:clamp(20px,2vw,26px); line-height:1.15; letter-spacing:-.02em; color:#fff; }
.hw-strip-copy p{ margin:8px 0 0; font-size:14.5px; line-height:1.55; color:var(--hw-muted); max-width:44ch; }
.hw-strip-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
.hw-strip-form .hw-field{ flex:1 1 150px; min-width:0; }
.hw-strip-form .hw-field-wide{ flex:1.4 1 200px; }
.hw-strip-form .btn{ flex:0 0 auto; padding:13px 24px; font-size:15px; }

/* ---------- fields ---------- */
.hw-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.hw-field > span{ font-weight:800; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--hw-muted); }
.hw-field > span i{ font-style:normal; font-weight:600; letter-spacing:.06em; text-transform:none; opacity:.7; }
.hw-field input{ width:100%; box-sizing:border-box; background:rgba(255,255,255,.04); color:#fff;
  border:1px solid var(--hw-line-2); border-radius:12px; padding:13px 15px; font:inherit; font-size:15px;
  transition:border-color .15s, background .15s; }
.hw-field input::placeholder{ color:rgba(245,241,236,.45); }
.hw-field input:focus{ outline:none; border-color:var(--orange); background:rgba(255,255,255,.07); }
.hw-field input:user-invalid{ border-color:#E3603F; }

.hw-success{ margin:16px 0 0; padding:15px 18px; border:1px solid rgba(37,211,102,.45); border-radius:14px;
  background:rgba(37,211,102,.1); color:#fff; font-weight:700; font-size:15px; }
.hw-fallback{ margin:16px 0 0; }
.hw-fallback p{ margin:0 0 12px; font-size:14.5px; color:var(--hw-muted); }

/* ---------- waiting list + WhatsApp duo ---------- */
.hw-duo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; max-width:1060px; margin:0 auto; position:relative; z-index:2; }
.hw-card{ border-radius:26px; padding:40px 40px 38px; display:flex; flex-direction:column; align-items:flex-start; }
.hw-card h2{ margin:14px 0 0; font-size:clamp(26px,2.6vw,34px); line-height:1.02; letter-spacing:-.025em; }
.hw-card > p{ margin:14px 0 0; font-size:15.5px; line-height:1.6; }

/* the conversion card: cream, so it is the brightest thing in the section */
.hw-card-light{ background:#F3EEE7; color:var(--hw-ink); }
body.ev-hw .hw-card-light h2{ color:var(--hw-ink); }
body.ev-hw .hw-card-light > p{ color:#5a4d45; }
body.ev-hw .hw-card-light .eyebrow{ color:#6a5d54; border-color:rgba(10,9,8,.22); }
.hw-card-light .hw-field > span{ color:#6a5d54; }
.hw-card-light .hw-field input{ background:#fff; color:var(--hw-ink); border-color:rgba(10,9,8,.2); }
.hw-card-light .hw-field input::placeholder{ color:#9a8a80; }
.hw-card-light .hw-field input:focus{ border-color:var(--orange); background:#fff; }
body.ev-hw .hw-card-light .btn-primary{ background:var(--hw-ink); color:#fff; border-color:var(--hw-ink); }
body.ev-hw .hw-card-light .btn-primary:hover{ background:#000; color:#fff; }
.hw-card-light .hw-success{ background:rgba(37,211,102,.14); border-color:rgba(20,150,70,.4); color:#14532d; }
.hw-card-light .hw-fallback p{ color:#5a4d45; }

.hw-form{ width:100%; margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.hw-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hw-form .btn{ margin-top:6px; align-self:flex-start; }

/* the WhatsApp card: dark, hairline, green only on the button */
.hw-card-wa{ background:var(--hw-surface); border:1px solid var(--hw-line-2); }
.hw-leadin{ margin:22px 0 0; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); }
.hw-walist{ list-style:none; margin:14px 0 0; padding:0; width:100%; display:flex; flex-direction:column; }
.hw-walist li{ padding:13px 0 13px 26px; position:relative; border-top:1px solid var(--hw-line); font-size:15px; line-height:1.5; color:#fff; }
.hw-walist li:last-child{ border-bottom:1px solid var(--hw-line); }
.hw-walist li::before{ content:""; position:absolute; left:4px; top:21px; width:6px; height:6px; border-radius:50%; background:var(--orange); }
.hw-card-wa .btn-wa{ margin-top:26px; }

@media (max-width:980px){
  .hw-duo{ grid-template-columns:1fr; }
  .hw-strip-in{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .hw-strip{ padding:26px 0; }
  .hw-strip-form{ gap:9px; }
  .hw-strip-form .hw-field, .hw-strip-form .hw-field-wide{ flex:1 1 100%; }
  .hw-strip-form .btn{ width:100%; }
  .hw-card{ padding:28px 22px 26px; border-radius:22px; }
  .hw-form-row{ grid-template-columns:1fr; }
  .hw-form .btn{ width:100%; align-self:stretch; }
  /* the client asked for these "like in one line", so on phones it stays one row
     and scrolls sideways instead of wrapping to two */
  /* one line on desktop as asked; on a phone four of these cannot fit legibly, and a hidden
     sideways scroller left two of them invisible, so they wrap to two centred rows instead */
  .hw-chips{ margin-top:32px; padding-top:22px; gap:6px 0; }
  .hw-chips li{ font-size:11px; padding:0 13px; letter-spacing:.1em; }
}

/* ---------- scroll spider + jump scare (halloween.js effects 4 and 5) ---------- */
.hw-spider-host{ position:relative; }
.hw-spider{ position:absolute; top:0; left:0; width:0; height:0; z-index:4; pointer-events:none; opacity:0; }
.hw-spider-thread{ position:absolute; top:0; left:0; display:block; width:1px; height:1px; transform-origin:0 0; will-change:transform; background:rgba(255,255,255,.42); }
.hw-spider-body{ position:absolute; top:0; left:0; width:48px; height:48px; margin:-5px 0 0 -24px; will-change:transform; }
.hw-spider-body svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 8px 12px rgba(0,0,0,.65)); }
.hw-sp-fill{ fill:#120C0A; stroke:rgba(255,158,112,.7); stroke-width:1.4; paint-order:stroke; }
/* near black legs vanish on the near black sections, so they carry the same warm rim light the bats use */
.hw-sp-leg{ fill:none; stroke:rgba(255,158,112,.62); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.hw-sp-leg-m{ stroke-width:1.75; }                   /* middle segment, past the knee */
.hw-sp-leg-t{ stroke-width:1.05; }                   /* the foot, thin enough to read as a point */
.hw-sp-hair{ fill:none; stroke:rgba(255,158,112,.4); stroke-width:.5; stroke-linecap:round; }
.hw-sp-mark{ fill:none; stroke:rgba(255,158,112,.2); stroke-width:1; stroke-linecap:round; }
.hw-sp-mark-v{ stroke-width:.7; stroke:rgba(255,158,112,.13); }
.hw-sp-eye{ fill:var(--orange); }
.hw-sp-eye-s{ opacity:.66; }
/* on the cream sections the near black spider needs a lighter rim to read */
.hw-light .hw-sp-fill{ fill:#1A1310; stroke:rgba(255,120,70,.6); }
.hw-light .hw-sp-leg{ stroke:#2A1C16; }
.hw-light .hw-sp-mark{ stroke:rgba(255,158,112,.3); }
.hw-light .hw-sp-hair{ stroke:rgba(60,40,32,.45); }
.hw-light .hw-spider-thread{ background:rgba(10,9,8,.28); }
/* Feedback 24 Sep: on a phone the music widget sat 14px off the bottom edge and only 13px
   above the "Join the list" bar, so it read as crammed underneath it. It now keeps real air
   at both ends: 26px off the edge, and clear of the sticky bar by about 27px when that shows.
   Scoped to this page so the other event pages keep the spacing they shipped with. */
@media (max-width:680px){
  body.ev-hw .ev-music{ bottom:26px; }
  body.ev-hw.ev-page:has(.ev-stickycta.show) .ev-music{ bottom:96px; }
}

/* feedback 24 Sep: at 28px the spider read as a mark on the text, not as a spider */
@media (max-width:680px){
  .hw-spider-body{ width:44px; height:44px; margin-left:-22px; }
  .hw-spider-thread{ background:rgba(255,255,255,.55); }
}

.hw-scare{ position:fixed; inset:0; z-index:6000; pointer-events:none; display:grid; place-items:center; }
.hw-scare-spider{ width:min(62vmin,520px); height:min(62vmin,520px); opacity:0; transform:scale(.3); will-change:transform,opacity; pointer-events:none; }
.hw-scare-spider svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 30px 60px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,75,41,.35)); }
/* at 520px every stroke is scaled about 8x, so the big version needs its own,
   much finer weights or the legs read as black tubes instead of a spider */
.hw-scare .hw-sp-leg{ stroke-width:1.45; stroke:#0A0706; }
.hw-scare .hw-sp-leg-m{ stroke-width:1; }
.hw-scare .hw-sp-leg-t{ stroke-width:.62; }
.hw-scare .hw-sp-hair{ stroke:rgba(255,158,112,.3); stroke-width:.28; }
.hw-scare .hw-sp-fill{ stroke-width:.65; }
.hw-scare .hw-sp-mark{ stroke-width:.55; }
.hw-scare .hw-sp-mark-v{ stroke-width:.4; }

/* ---------- spider web corners + pumpkins (decor SVGs, coloured via mask) ---------- */
/* Feedback 24 Sep: "I like the web, lets have it in the whole section in the background
   not just in the corners". One web hangs from each corner and they are big enough that
   the strands meet in the middle, so the section reads as webbed over rather than
   decorated at two edges. Still behind everything and still just a mask, no extra bytes. */
.hw-webs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hw-web{ position:absolute; z-index:0; pointer-events:none; width:clamp(260px,54%,700px); aspect-ratio:1/1;
  background:rgba(255,255,255,.17);
  -webkit-mask-image:url(assets/halloween/decor/web-corner.svg); mask-image:url(assets/halloween/decor/web-corner.svg);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.hw-web-tl{ top:0; left:0; }
.hw-web-tr{ top:0; right:0; transform:scaleX(-1); }
.hw-web-bl{ bottom:0; left:0; transform:scaleY(-1); }
.hw-web-br{ bottom:0; right:0; transform:scale(-1,-1); }
.hw-light .hw-web{ background:rgba(10,9,8,.14); }

.hw-pumpkins{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hw-pumpkin{ position:absolute; width:clamp(90px,11vw,150px); aspect-ratio:1/1;
  background:var(--orange);
  -webkit-mask-image:url(assets/halloween/decor/pumpkin.svg); mask-image:url(assets/halloween/decor/pumpkin.svg);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:.26; filter:drop-shadow(0 0 26px rgba(255,75,41,.55)); animation:hwPumpkinGlow 4.5s ease-in-out infinite; }
.hw-pumpkin-1{ left:3%;  bottom:8%;  transform:rotate(-9deg); }
.hw-pumpkin-2{ right:4%; top:12%;    transform:rotate(11deg); width:clamp(70px,8vw,110px); animation-delay:-2.2s; }
.hw-pumpkin-3{ right:12%; bottom:6%; transform:rotate(-4deg); width:clamp(60px,7vw,92px); animation-delay:-3.4s; opacity:.18; }
@keyframes hwPumpkinGlow{ 0%,100%{ opacity:.22; } 50%{ opacity:.34; } }

@media (max-width:680px){
  .hw-web{ width:clamp(170px,62%,300px); background:rgba(255,255,255,.2); }
  .hw-pumpkin-3{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hw-spider, .hw-scare{ display:none !important; }
  .hw-tspider{ animation:none; }
  .hw-pumpkin{ animation:none; }
}

/* the fixed music widget sits bottom right and was covering the seconds card of the hero
   countdown on desktop, so the countdown row keeps clear of it */
@media (min-width:981px){
  body.ev-hw .ev-hero .ev-count-wrap{ padding-right:220px; }
}