/* SPRED Tix public site. Dark editorial × neon club energy. Mobile-first.
   The organiser portal, admin and scanner keep app.css; nothing here reaches them. */

@property --amb { syntax: "<color>"; inherits: true; initial-value: #262626; }
@property --edge-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* Dynamic theme: these four animate when a poster takes over the site */
@property --lime { syntax: "<color>"; inherits: true; initial-value: #ECE8DF; }
@property --on-lime { syntax: "<color>"; inherits: true; initial-value: #0A0A0A; }
@property --tint { syntax: "<color>"; inherits: true; initial-value: #0A0A0A; }
@property --tint-2 { syntax: "<color>"; inherits: true; initial-value: #121212; }
@property --glow-a { syntax: "<color>"; inherits: true; initial-value: #3A3A3C; }
@property --glow-b { syntax: "<color>"; inherits: true; initial-value: #232326; }

:root {
  --bg: #0A0A0A; --bg-2: #121212; --bg-3: #1C1C1C; --bg-4: #242424;
  --line: color-mix(in srgb, var(--lime) 9%, rgba(243, 241, 234, .08)); --line-2: color-mix(in srgb, var(--lime) 26%, rgba(243, 241, 234, .12));
  --ink: #F3F1EA; --muted: #8F8B82; --muted-2: #BDB9AF;
  --lime: #ECE8DF; --on-lime: #0A0A0A; --coral: #FF4D3D; --acid: #D6FF3F; --chrome: #D9DBDF; --chrome-2: #9DA1A8;
  --ok: #7BE495; --err: #FF6A55; --warn: #FFC66B;
  --display: "Syne", "Helvetica Neue", Arial, sans-serif; --serif: "Instrument Serif", "Times New Roman", Georgia, serif; --body: "Geist", "Helvetica Neue", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace; --poster: "Anton", "Impact", "Arial Narrow", sans-serif;
  --wrap: 1320px; --gut: clamp(16px, 4vw, 48px); --r: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --leak: #8A8478; --tint: #0A0A0A; --tint-2: #121212;
  color-scheme: dark;
  transition: --lime .65s var(--ease), --on-lime .65s var(--ease), --tint .7s var(--ease), --tint-2 .7s var(--ease), --glow-a .75s var(--ease), --glow-b .8s var(--ease);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: radial-gradient(90% 55% at 50% -12%, color-mix(in srgb, var(--lime) 7%, transparent), transparent 70%) no-repeat, var(--tint); color: var(--ink); font: 400 16px/1.55 var(--body); min-height: 100vh; display: flex; flex-direction: column;
  overflow-x: clip; -webkit-font-smoothing: antialiased; }
/* Atmosphere: two broad light fields over the near-black base. The active poster's palette lights them. */
body::before { content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 45% at 82% 8%, color-mix(in srgb, var(--glow-a) 30%, transparent), transparent 70%),
              radial-gradient(50% 50% at 8% 78%, color-mix(in srgb, var(--glow-b) 24%, transparent), transparent 72%),
              radial-gradient(40% 30% at 50% 50%, color-mix(in srgb, var(--glow-a) 7%, transparent), transparent 80%); }
/* Film grain: one static layer, no animation */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main { flex: 1; min-width: 0; }
img { max-width: 100%; display: block; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: rgba(243, 241, 234, .35); }
a:hover { color: var(--lime); text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--display); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(34px, 6vw, 64px); }
h2 { font-size: clamp(22px, 3vw, 30px); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--on-lime); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--lime); color: var(--on-lime); padding: 10px 14px; z-index: 100; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 660px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: var(--mono); }
.warn { color: var(--warn); }
.accent { color: var(--lime); }
.cond { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.kicker, .eyebrow { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; }
.kicker::before, .eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--lime); flex: none; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--tint) 78%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line); transition: background .3s, border-color .3s; }
.page-home .top { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-home .top.solid { background: color-mix(in srgb, var(--tint) 80%, transparent); border-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top-in { display: flex; align-items: center; gap: 12px; min-height: 64px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand img { height: 32px; width: auto; }
.brand-mark { font: 800 19px/1 var(--display); --fs-unused: 112%; letter-spacing: -.02em; }
.brand-mark b { color: var(--lime); font-weight: 900; margin-left: 2px; }
.brand-name { font: 800 18px/1.1 var(--display); }
.nav-main { display: flex; gap: 4px; }
.nav-main a, .nav-side a { position: relative; color: var(--muted-2); text-decoration: none; font: 500 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 12px 12px; white-space: nowrap; }
.nav-main a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); }
.nav-main a:hover, .nav-main a[aria-current] { color: var(--ink); }
.nav-main a:hover::after, .nav-main a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav-side { display: flex; align-items: center; gap: 6px; }
.nav-tix { display: inline-flex !important; align-items: center; gap: 8px; }
.nav-tix svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-tix:hover, .nav-tix[aria-current] { color: var(--ink) !important; }
.nav-org { border: 1px solid var(--line-2); border-radius: var(--r); padding: 11px 14px !important; color: var(--ink) !important; transition: background .2s, color .2s, border-color .2s; }
.nav-org:hover { background: var(--lime); color: var(--on-lime) !important; border-color: var(--lime); }
.nav-org i { font-style: normal; display: inline-block; transition: transform .25s var(--ease-out); }
.nav-org:hover i { transform: translate(2px, -2px); }
.nav-menu { position: static; display: none; }
.nav-menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line-2); border-radius: var(--r); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span, .nav-menu summary span::before, .nav-menu summary span::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: transform .25s var(--ease-out), opacity .2s; }
.nav-menu summary span::before, .nav-menu summary span::after { content: ""; position: absolute; left: 0; }
.nav-menu summary span::before { top: -6px; }
.nav-menu summary span::after { top: 6px; }
.nav-menu[open] summary span { background: transparent; }
.nav-menu[open] summary span::before { transform: translateY(6px) rotate(45deg); }
.nav-menu[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-sheet { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100svh - 64px); overflow-y: auto; background: color-mix(in srgb, var(--tint) 98%, transparent); border-bottom: 1px solid var(--line-2); padding: 8px var(--gut) 24px; display: grid; }
.nav-sheet a { color: var(--ink); text-decoration: none; font: 800 28px/1 var(--display); --fs-unused: 105%; text-transform: uppercase; letter-spacing: -.01em; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nav-sheet a.lime-link { color: var(--lime); }
.nav-sheet a.dim { font: 500 14px/1 var(--body); text-transform: none; letter-spacing: 0; color: var(--muted-2); border: 0; padding-top: 18px; }
@media (max-width: 899px) {
  .nav-main a:not(:last-child), .nav-org, .nav-tix span { display: none !important; }
  .nav-main a { padding: 12px 10px; }
  .nav-main a::after { left: 10px; right: 10px; }
  .nav-tix { padding: 10px !important; }
  .nav-menu { display: block; }
}

/* ---------- Buttons, forms, notices ---------- */
.btn { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 700 14px/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transform: translate(var(--mx), var(--my)); transition: transform .35s var(--ease-out), background .2s, color .2s, border-color .2s, box-shadow .3s; }
.btn i { font-style: normal; display: inline-block; transition: transform .3s var(--ease-out); }
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn:hover i { transform: translate(3px, -3px); }
.btn:active { transform: translate(var(--mx), var(--my)) scale(.97); }
.btn.lime, .btn.primary { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.btn.lime:hover, .btn.primary:hover { box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--lime) 70%, transparent); color: var(--on-lime); }
.btn.ghost { background: color-mix(in srgb, var(--tint) 35%, transparent); }
.btn.block { display: flex; width: 100%; }
.btn.big { min-height: 58px; font-size: 15px; }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 12px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.round { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.round:hover { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
input, select, textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 400 16px/1.3 var(--body); }
input::placeholder { color: #75716a; }
input:focus, select:focus, textarea:focus { border-color: var(--lime); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 16%, transparent); }
input[readonly] { opacity: .8; }
select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BDB9AF' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.notice { border: 1px solid var(--line-2); background: var(--bg-2); border-radius: var(--r); padding: 14px 16px; margin: 0 0 18px; text-align: left; }
.notice.ok { border-color: rgba(123, 228, 149, .45); background: rgba(123, 228, 149, .07); }
.notice.err { border-color: rgba(255, 84, 61, .55); background: rgba(255, 84, 61, .08); }
.tag { display: inline-block; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 9px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--muted-2); }
.tag.err { color: var(--err); border-color: var(--err); }

/* ---------- Hero: type-led, compact, flows straight into the poster wall ---------- */
.hero { position: relative; z-index: 3; isolation: isolate; padding: clamp(40px, 7vh, 72px) 0 0; overflow-x: clip; }
.hero-bg { position: absolute; inset: 0 0 -30vh; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.hero-glow.g1 { width: 52vw; height: 40vw; right: -14vw; top: -16vw; background: color-mix(in srgb, var(--glow-a) 24%, transparent); }
.hero-glow.g2 { width: 34vw; height: 30vw; left: -14vw; top: 10vw; background: color-mix(in srgb, var(--glow-b) 16%, transparent); }
.hero-in { position: relative; display: grid; gap: 22px; }
.hero-clock { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 16px; }
.hero-clock span { color: var(--ink); }
.hero-h { margin: 0; letter-spacing: -.02em; }
.hero-h .ln { display: block; white-space: nowrap; }
.hero-h .ln > span { display: inline-block; }
.h-serif { font: italic 400 clamp(64px, 18vw, 168px)/.92 var(--serif); letter-spacing: -.03em; color: var(--ink); }
/* "GO WHERE?" measures 10.6em wide in Syne 800 (padding included). Its size is derived from the room it has,
   so the whole "?" stays visible at every width without shrinking the headline more than needed. */
.h-sans { font: 800 calc((100vw - 2 * var(--gut)) / 10.7)/.95 var(--display); text-transform: uppercase; letter-spacing: -.04em; color: var(--ink); padding: 0 .08em 0 .3em; }
.h-sans b { font-weight: 800; color: var(--chrome); }
/* Chrome "?" where gradient text is supported; plain warm white otherwise */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .h-sans b { color: transparent; background: linear-gradient(172deg, #FBFAF6 0%, color-mix(in srgb, var(--lime) 60%, #C9CCD1) 34%, #6E7279 52%, #E9EAEC 66%, color-mix(in srgb, var(--lime) 70%, #9DA1A8) 100%); -webkit-background-clip: text; background-clip: text; padding-right: .04em; }
}
.hero-sub { font: 400 clamp(16px, 1.4vw, 18px)/1.5 var(--body); color: var(--muted-2); margin: 0 0 18px; max-width: 44ch; }
.hero-search .chips { margin-top: 12px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* Typographic ticker: the seam between the hero and the poster wall */
.hero-ticker { margin-top: clamp(28px, 4vh, 44px); overflow: hidden; border-block: 1px solid var(--line); padding: 10px 0; }
.ht-track { display: flex; width: max-content; }
.ht-track span { font: italic 400 clamp(20px, 2.2vw, 30px)/1 var(--serif); color: var(--muted); white-space: nowrap; padding-right: .3em; }
@media (prefers-reduced-motion: no-preference) { .js .ht-track { animation: ticker 60s linear infinite; } .hero.paused .ht-track { animation-play-state: paused; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (min-width: 900px) {
  .hero { padding-top: 108px; }
  .hero-in { grid-template-columns: minmax(0, 1fr) 420px; align-items: end; gap: 48px; }
  .h-serif { font-size: clamp(96px, 10.4vw, 164px); }
  .h-sans { font-size: min(80px, calc((min(100vw, var(--wrap)) - 2 * var(--gut) - 468px) / 10.7)); }
  .hero-side { padding-bottom: 6px; }
}
.js .hero-h .ln > span { opacity: 0; transform: translateY(35%); animation: rise .9s var(--ease-out) forwards; }
.js .hero-h .ln:nth-child(2) > span { animation-delay: .12s; }
.js .rise { opacity: 0; transform: translateY(18px); animation: rise .8s var(--ease-out) forwards; }
.js .hero-sub { animation-delay: .25s; }
.js .hero-search { animation-delay: .35s; }
.js .hero-ctas { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Search ---------- */
.search { position: relative; z-index: 20; }
.search-box { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 6px 0 18px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: color-mix(in srgb, var(--tint-2) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, box-shadow .3s, background .2s; }
.search.big .search-box { min-height: 66px; }
.search-box:focus-within { border-color: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 12%, transparent), 0 20px 60px -20px color-mix(in srgb, var(--lime) 25%, transparent); background: color-mix(in srgb, var(--tint-2) 95%, transparent); }
.search-ico { width: 22px; height: 22px; fill: none; stroke: var(--muted-2); stroke-width: 1.8; flex: none; }
.search-box input { border: 0; background: transparent; min-height: 54px; padding: 0; font-size: 17px; box-shadow: none !important; min-width: 0; }
.search-box input::-webkit-search-cancel-button { filter: invert(1) brightness(.7); }
.search-go { flex: none; width: 46px; height: 46px; border: 0; border-radius: 4px; background: var(--lime); color: var(--on-lime); font: 800 20px/1 var(--display); cursor: pointer; transition: transform .25s var(--ease-out); }
.search-go:hover { transform: translate(2px, -2px); }
.search-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #141414; border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); max-height: min(60vh, 460px); overflow-y: auto; }
.search-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 4px; cursor: pointer; }
.search-list li[aria-selected="true"] { background: var(--bg-4); box-shadow: inset 2px 0 0 var(--lime); }
.search-list .sl-img { width: 44px; height: 55px; border-radius: 3px; object-fit: cover; background: var(--bg-3); }
.search-list .sl-t { font: 700 15px/1.2 var(--body); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-list .sl-s { font-size: 13px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-list .sl-p { font: 500 12px/1 var(--mono); color: var(--muted-2); }
.search-list li.sl-all { grid-template-columns: 1fr; font: 600 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); padding: 14px 10px; }
.search-list li.sl-none { grid-template-columns: 1fr; color: var(--muted-2); cursor: default; padding: 14px 10px; }
.search-list mark { background: none; color: var(--lime); }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; min-width: 0; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: color-mix(in srgb, var(--tint) 45%, transparent);
  color: var(--muted-2); text-decoration: none; font: 600 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-current="true"] { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.chip-n { font: 500 11px/1 var(--mono); opacity: .7; }
.chip[aria-current="true"] .chip-n { opacity: .75; }

/* ---------- Section heads ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(24px, 4vw, 44px); }
.sec-h { font: 800 clamp(38px, 6vw, 92px)/.9 var(--display); letter-spacing: -.045em; text-transform: uppercase; margin: 0; }
.sec-h em { font: italic 400 1.12em/.8 var(--serif); text-transform: none; letter-spacing: -.02em; }
.sec-h a { color: inherit; text-decoration: none; }
.sec-h a i { font-style: normal; color: var(--lime); display: inline-block; transition: transform .35s var(--ease-out); }
.sec-h a:hover { color: var(--ink); }
.sec-h a:hover i { transform: translate(6px, -6px); }
.sec-link { flex: none; color: var(--muted-2); text-decoration: none; font: 600 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 12px 0; }
.sec-link i { font-style: normal; color: var(--lime); }

/* ---------- Posters and colour leaking ---------- */
.poster { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--leak) 18%, #111); z-index: 1;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 50px -24px rgba(0, 0, 0, .9); }
.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
[data-leak] { position: relative; }
/* Coloured light spilling from the poster into the room: a wide, soft radial field behind it (no blur filter, cheap on phones) */
.pc-link::before, .ec-link::before, .promo::before { content: ""; position: absolute; z-index: 0; pointer-events: none; left: -34%; right: -34%; top: -22%; aspect-ratio: 1 / 1.08;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--leak) 75%, transparent) 30%, color-mix(in srgb, var(--leak) 34%, transparent) 58%, color-mix(in srgb, var(--leak) 10%, transparent) 78%, transparent);
  opacity: .5; transform: scale(.92); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.pc-link, .ec-link { position: relative; display: block; color: inherit; text-decoration: none; }
.pc-link:hover, .ec-link:hover { color: inherit; }
.noposter { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 18px;
  background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--lime) 30%, transparent), transparent 60%), linear-gradient(160deg, #1f1f1f, #0c0c0c); }
.noposter span { font: 900 clamp(26px, 3vw, 40px)/.9 var(--display); --fs-unused: 110%; text-transform: uppercase; letter-spacing: -.03em; overflow-wrap: anywhere; }
.badge { position: absolute; left: 10px; top: 10px; z-index: 2; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 7px 8px; border-radius: 2px; }
.badge.out { background: var(--coral); color: #0A0A0A; }
.badge.few { background: color-mix(in srgb, var(--tint) 80%, transparent); color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.poster-cta { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-radius: 3px;
  background: var(--lime); color: var(--on-lime); font: 800 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateY(12px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.poster-cta i { font-style: normal; font-size: 16px; }
@media (hover: hover) {
  .pc-link:hover::before, .ec-link:hover::before, .pc-link:focus-visible::before, .ec-link:focus-visible::before { opacity: 1; transform: scale(1.14); }
  .pc-link:hover .poster, .ec-link:hover .poster { --lift: -8px; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 40px 80px -30px color-mix(in srgb, var(--leak) 55%, #000); }
  .pc-link:hover .poster img, .ec-link:hover .poster img { transform: scale(1.045); }
  .pc-link:hover .poster-cta, .ec-link:hover .poster-cta { opacity: 1; transform: none; }
}
.pc-link:focus-visible .poster-cta, .ec-link:focus-visible .poster-cta { opacity: 1; transform: none; }
.pc-link:focus-visible, .ec-link:focus-visible { outline: none; }
.pc-link:focus-visible .poster, .ec-link:focus-visible .poster { outline: 2px solid var(--lime); outline-offset: 4px; }

/* Wall poster */
.pc, .promo { flex: none; width: clamp(214px, 21vw, 300px); list-style: none; }
.pc-meta { position: relative; z-index: 1; padding-top: 14px; }
.pc-date { font-size: 13px; margin: 0 0 6px; color: var(--lime); }
.pc-title { font: 600 18px/1.2 var(--body); letter-spacing: -.01em; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-sub { color: var(--muted-2); font-size: 14px; margin: 0; }
.pc-kind { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.pc-venue { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.pc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.pc-price { font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted-2); }
.pc-cta { font: 700 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.pc-cta i { font-style: normal; color: var(--leak); }

/* Event card */
.ec { list-style: none; min-width: 0; }
.ec-meta { position: relative; z-index: 1; padding-top: 16px; }
.ec-date { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.ec-date .cond { font-size: 15px; color: var(--lime); }
.ec-time { font: 500 12px/1 var(--mono); color: var(--muted-2); text-transform: uppercase; }
.ec-title { font: 600 20px/1.18 var(--body); letter-spacing: -.015em; margin: 0 0 8px; }
.ec-sub { color: var(--muted-2); font-size: 14.5px; margin: 0; }
.ec-foot { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; }
.ec-price { font: 700 15px/1 var(--body); }
.avail { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.avail.out { color: var(--coral); }
.avail.few { color: var(--lime); }
.ec.big .ec-title { font-size: clamp(26px, 2.6vw, 38px); }
.ec.big .ec-date .cond { font-size: clamp(24px, 2.2vw, 32px); }

/* ---------- Don't miss out ---------- */
.feat { padding-top: clamp(56px, 7vw, 96px); }
.feat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px 28px; }
@media (max-width: 759px) {
  .feat-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; margin: 0 calc(-1 * var(--gut)); padding: 8px var(--gut) 24px; scrollbar-width: none; }
  .feat-grid::-webkit-scrollbar { display: none; }
  .feat-grid .ec { flex: none; width: 78vw; max-width: 340px; scroll-snap-align: start; }
  .feat-grid.n1 .ec { width: 100%; max-width: none; }
}
@media (min-width: 760px) {
  .feat-grid.n3 { grid-template-columns: 1.35fr 1fr 1fr; align-items: end; }
  .feat-grid.n2 { grid-template-columns: 1.2fr 1fr; align-items: end; }
  .feat-grid.n1 .ec-link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
  .feat-grid.n1 .ec-link::before { right: 40%; }
  .feat-grid.n1 .ec-title { font-size: clamp(36px, 4.6vw, 72px); --fs-unused: 105%; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; }
}

/* ---------- Upcoming nights wall ---------- */
.wall { --amb: #262626; position: relative; isolation: isolate; padding: clamp(18px, 2.4vw, 30px) 0 clamp(32px, 4vw, 56px); transition: --amb 1.4s ease; }
.wall-amb { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 62%, color-mix(in srgb, var(--amb) 34%, transparent), transparent 72%),
              radial-gradient(30% 40% at 15% 70%, color-mix(in srgb, var(--amb) 10%, transparent), transparent 70%); }
.wall-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 14px auto 0; }
.wall-error { margin: 14px auto 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-2); max-width: 720px; }
.wrap.wall-error { max-width: min(720px, calc(100% - 2 * var(--gut))); }
.wall-error-h { font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--display); margin: 0 0 8px; }
.wall-error-s { color: var(--muted-2); margin: 0 0 18px; max-width: 52ch; }
.wall-empty-h { font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--display); margin: 0; color: var(--muted-2); }
.marquee { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 34px 0 30px; }
.marquee::-webkit-scrollbar { display: none; }
.track { display: flex; gap: clamp(18px, 2.2vw, 32px); width: max-content; margin: 0; padding: 0 var(--gut); list-style: none; }
.marquee.live { overflow: hidden; cursor: grab; touch-action: pan-y; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee.live .track { will-change: transform; padding: 0; }
.marquee.live.dragging { cursor: grabbing; }
.marquee.live.dragging a { pointer-events: none; }
.marquee.fits .track { margin: 0 auto; }
.marquee img { -webkit-user-drag: none; user-select: none; }
/* Magnetic posters (home.js writes --k lift 0…1, --px/--py cursor offset, --dim recession; transforms on the li) */
.marquee.live .track > li { opacity: calc(1 - var(--dim, 0)); transform-style: flat; }
.marquee.live .poster, .marquee.live .pc-link:hover .poster { transform: none; transition: box-shadow .3s; --lift: 0px; }
.marquee.live .pc-link::before, .marquee.live .promo::before { transition: none; opacity: calc(.42 + .58 * var(--k, 0)); transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -14px), 0) scale(calc(.9 + .38 * var(--k, 0))); }
.marquee .track > li::after { content: ""; position: absolute; z-index: 0; left: 6%; right: 6%; top: 14%; aspect-ratio: 4 / 4.2; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 55%, transparent);
  opacity: calc(.25 + .6 * var(--k, 0)); transform: translate3d(calc(var(--px, 0) * -22px), calc(28px + var(--k, 0) * 40px + var(--py, 0) * -12px), 0) scale(calc(1 + .16 * var(--k, 0))); }
.marquee .poster { z-index: 1; }
/* Light catching the print as it turns */
.marquee .poster::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(70% 55% at calc(50% + var(--px, 0) * 45%) calc(30% + var(--py, 0) * 40%), rgba(255, 255, 255, .55), transparent 70%);
  opacity: calc(var(--k, 0) * .9); }
/* Campaign artwork depth: the sculpture travels further than the backdrop, the type sits between */
.marquee .cp-layer.bg { transform: translate3d(calc(var(--px, 0) * -7px), calc(var(--py, 0) * -6px), 0) scale(1.06); }
.marquee .cp-layer.fg { transform: translate3d(calc(var(--px, 0) * 13px), calc(var(--py, 0) * 10px), 0) scale(1.05); }
.marquee .cp-type, .marquee .cp-no { transform: translate3d(calc(var(--px, 0) * 4px), calc(var(--py, 0) * 3px), 0); }
.marquee .pz-sheet.layered .cp-art { opacity: 0; }

/* ---------- SPRED Tix promo posters ---------- */
.promo { position: relative; }
.pp-sheet { display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: var(--ink); isolation: isolate; }
.pp-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pp-k { position: absolute; left: 20px; top: 20px; margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--leak); }
.pp-brand { position: absolute; right: 18px; top: 18px; font: 900 12px/1 var(--body); --fs-unused: 112%; color: var(--ink); opacity: .8; }
.pp-brand b { color: var(--leak); }
.pp-h { font: 900 clamp(28px, 2.7vw, 38px)/.9 var(--display); --fs-unused: 108%; letter-spacing: -.035em; text-transform: uppercase; margin: 0 0 12px; hyphens: manual; }
.pp-c { font-size: 14px; line-height: 1.4; color: var(--muted-2); margin: 0 0 16px; max-width: 24ch; }
.pp-cta { align-self: flex-start; color: var(--leak); text-decoration: none; font: 800 12.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 10px 0; border-bottom: 1px solid currentColor; }
.pp-cta i { font-style: normal; display: inline-block; transition: transform .3s var(--ease-out); }
.pp-cta:hover { color: var(--leak); }
.pp-cta:hover i { transform: translate(3px, -3px); }
.pp-label { position: relative; z-index: 1; margin: 12px 0 0; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.promo:hover::before { opacity: .7; transform: scale(1.08); }
/* Campaign posters: graded club photography, print textures, editorial type. No circles. */
.pz-link { position: relative; display: block; color: inherit; text-decoration: none; }
.pz-link:hover { color: inherit; }
.pz-sheet { padding: 0; isolation: isolate; background: #050505; container-type: inline-size; }
.pz-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -4; transition: transform 1.2s var(--ease-out); }
.pz-sheet::after { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.pz-grade, .pz-tex { position: absolute; inset: 0; pointer-events: none; }
.pz-grade { z-index: -2; }
.pz-tex { z-index: -1; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pz-type { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 7cqw 7cqw 21cqw; }
.pz-h { margin: 0; text-transform: uppercase; }
.pz-h > * { display: block; }
.pz-h em { font-style: italic; }
.pz-tag { position: absolute; left: 4.5cqw; top: 4.5cqw; z-index: 3; font: 500 3.1cqw/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 1.8cqw 2.2cqw; background: rgba(5, 5, 5, .7); color: #F3F1EA; box-shadow: inset 0 0 0 1px rgba(243, 241, 234, .35); backdrop-filter: blur(4px); }
.pz-cta { position: absolute; left: 7cqw; right: 7cqw; bottom: 6cqw; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 3.6cqw 4cqw;
  background: var(--leak); color: #0A0A0A; font: 700 3.8cqw/1 var(--display); letter-spacing: .06em; text-transform: uppercase; transition: transform .35s var(--ease-out), box-shadow .35s; }
.pz-cta i { font-style: normal; transition: transform .3s var(--ease-out); }
@media (hover: hover) { .pz:hover .pz-photo { transform: scale(1.06); } .pz:hover .pz-cta { box-shadow: 0 10px 30px -8px var(--leak); } .pz:hover .pz-cta i { transform: translate(3px, -3px); } }
.pz-link:focus-visible { outline: none; }
.pz-link:focus-visible .pz-sheet { outline: 2px solid var(--leak); outline-offset: 4px; }

/* Campaign posters (Phase 3): original ray-marched artwork with live campaign typography.
   Each layout is art-directed for its own composition so the words never sit on the sculpture. */
.cp .pz-sheet { background: var(--c3); }
.cp-art, .cp-art img, .cp-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-art img, .cp-layer { object-fit: cover; display: block; }
.cp-art { z-index: -3; }
.cp-layer { z-index: -2; opacity: 0; transition: opacity .35s var(--ease); will-change: transform; }
.pz-sheet.layered .cp-layer { opacity: 1; }
.pz-sheet.layered .cp-art { opacity: 0; transition: opacity .35s .1s; }
.cp-no { position: absolute; z-index: 3; font: 500 2.6cqw/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 241, 234, .62); }
.cp-type { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.cp-acid-techno .cp-type, .cp-liquid-chrome .cp-type, .cp-holographic-blue .cp-type { background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 42%); }
.cp-molten-metal .cp-type, .cp-violet-glass .cp-type, .cp-silver-frequency .cp-type { background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 38%), linear-gradient(0deg, rgba(0, 0, 0, .4), transparent 26%); }
.cp-h { position: absolute; margin: 0; text-transform: none; font-weight: 400; color: #F6F5F0; }
.cp-h > * { display: block; font-style: normal; }
.cp .pz-tag { font-size: 2.6cqw; background: rgba(5, 5, 5, .55); box-shadow: inset 0 0 0 1px rgba(243, 241, 234, .22); }
.cp .pz-cta { font: 600 3.4cqw/1 var(--body); letter-spacing: .14em; padding: 3.4cqw 4cqw; }

/* 01 Liquid chrome: luxury-fragrance restraint. Centred, tracked caps over a large serif italic. */
.cp-liquid-chrome .pz-tag { left: 5cqw; top: 5cqw; }
.cp-liquid-chrome .cp-no { left: auto; right: 5cqw; top: 6.4cqw; text-align: right; }
.cp-liquid-chrome .cp-h { left: 6cqw; right: 6cqw; bottom: 19cqw; text-align: center; }
.cp-liquid-chrome .cp-h .a { font: 600 3.7cqw/1 var(--body); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 1.6cqw; color: #DDE3EA; }
.cp-liquid-chrome .cp-h em { font: italic 400 13cqw/.9 var(--serif); letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 10%, #b9c3cf 48%, #6f7a88 56%, #f2f5f8 82%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-liquid-chrome .pz-cta { left: 22cqw; right: 22cqw; bottom: 6cqw; background: transparent; color: #EEF1F5; box-shadow: inset 0 0 0 1px rgba(238, 241, 245, .55); border-radius: 99px; justify-content: center; gap: 2cqw; }

/* 02 Holographic blue: Y2K wide chrome type, bottom-left, pill tag. */
.cp-holographic-blue .pz-tag { border-radius: 99px; left: 5cqw; top: 5cqw; }
.cp-holographic-blue .cp-no { right: 5cqw; top: 6.4cqw; }
.cp-holographic-blue .cp-h { left: 6cqw; right: 6cqw; bottom: 20cqw; }
.cp-holographic-blue .cp-h .a { font: 800 10.4cqw/.9 var(--display); letter-spacing: -.03em; text-transform: uppercase; transform: scaleX(1.08); transform-origin: left;
  background: linear-gradient(175deg, #f4fbff 15%, #8fd8ff 42%, #3b5bff 55%, #d9c4ff 75%, #fff 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-holographic-blue .cp-h em { font: italic 400 10cqw/1 var(--serif); color: #cfe3ff; margin-top: 1cqw; }
.cp-holographic-blue .pz-cta { left: 6cqw; right: auto; bottom: 6cqw; border-radius: 99px; background: linear-gradient(100deg, #9fe8ff, #5b7cff 55%, #b98cff); color: #05061a; gap: 4cqw; }

/* 03 Acid techno: brutalist. The 3D type says NO SIGNAL; the poster shouts the rest. */
.cp-acid-techno .pz-tag { background: #C8F53A; color: #0B0F04; box-shadow: none; }
.cp-acid-techno .cp-no { right: 5cqw; top: 6.2cqw; color: #C8F53A; }
.cp-acid-techno .cp-h { left: 5cqw; right: 5cqw; bottom: 19cqw; }
.cp-acid-techno .cp-h .a { font: 500 3.6cqw/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #F2F2EC; margin-bottom: 1.5cqw; }
.cp-acid-techno .cp-h .b { font: 400 17.5cqw/.86 var(--poster); text-transform: uppercase; letter-spacing: -.01em; color: #C8F53A; text-shadow: .6cqw 0 0 rgba(255, 255, 255, .18); }
.cp-acid-techno .pz-cta { left: 5cqw; right: 5cqw; bottom: 5cqw; background: #C8F53A; color: #0B0F04; font-family: var(--mono); font-weight: 600; border-radius: 0; }

/* 04 Violet glass: fashion minimal — small type, maximal negative space. */
.cp-violet-glass .pz-tag { left: auto; right: 5cqw; top: auto; bottom: 22cqw; background: none; box-shadow: none; padding: 0; color: rgba(255, 220, 248, .6); }
.cp-violet-glass .cp-no { left: 6cqw; bottom: 22.6cqw; color: rgba(255, 220, 248, .6); }
.cp-violet-glass .cp-h { left: 6cqw; right: 6cqw; top: 6cqw; }
.cp-violet-glass .cp-h em { font: italic 400 9cqw/.95 var(--serif); color: #fbeaff; }
.cp-violet-glass .cp-h .b { font: 500 3.2cqw/1 var(--body); letter-spacing: .36em; text-transform: uppercase; color: #ff9be6; margin-top: 2.6cqw; }
.cp-violet-glass .pz-cta { left: 6cqw; right: 6cqw; bottom: 6cqw; background: rgba(20, 2, 40, .4); color: #fbeaff; box-shadow: inset 0 0 0 1px rgba(255, 155, 230, .55); backdrop-filter: blur(6px); }

/* 05 Molten metal: asymmetric, heavy, top-left against the diagonal. */
.cp-molten-metal .pz-tag { top: auto; bottom: 7cqw; left: 5cqw; }
.cp-molten-metal .cp-no { left: 5.5cqw; bottom: 16cqw; color: rgba(255, 190, 140, .75); }
.cp-molten-metal .cp-h { left: 5.5cqw; top: 6cqw; width: 70%; }
.cp-molten-metal .cp-h .a { font: 800 13cqw/.86 var(--display); letter-spacing: -.05em; text-transform: uppercase; color: #FFE7D2; }
.cp-molten-metal .cp-h em { font: italic 400 12cqw/.9 var(--serif); color: #FF9A4D; margin: .5cqw 0 0 14cqw; }
.cp-molten-metal .pz-cta { left: auto; right: 5cqw; bottom: 5cqw; width: 48%; background: #FF7A2F; color: #1A0503; }

/* 06 Silver frequency: Swiss grid — flush-left headline, mono rules. */
.cp-silver-frequency .pz-tag { top: auto; bottom: 21cqw; left: 6cqw; background: none; box-shadow: none; padding: 0; color: rgba(191, 244, 255, .7); }
.cp-silver-frequency .cp-no { left: 6cqw; right: 6cqw; top: 6cqw; padding-bottom: 2.4cqw; border-bottom: 1px solid rgba(191, 244, 255, .35); color: rgba(220, 248, 255, .78); }
.cp-silver-frequency .cp-h { left: 6cqw; right: 10cqw; top: 13cqw; }
.cp-silver-frequency .cp-h .a { font: 600 9.2cqw/.98 var(--body); letter-spacing: -.035em; color: #F2FBFF; }
.cp-silver-frequency .pz-cta { left: 6cqw; right: 6cqw; bottom: 6cqw; background: #E6F7FB; color: #0A1630; }

/* ---------- Unclaimed club poster (organiser invitation) ---------- */
.claim { padding-top: clamp(48px, 7vw, 96px); display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .claim { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(40px, 6vw, 96px); } }
.claim-h { font: 800 clamp(34px, 4.8vw, 76px)/.92 var(--display); --fs-unused: 105%; letter-spacing: -.04em; text-transform: uppercase; margin: 0 0 18px; }
.claim-h em { font: italic 400 1.12em/.8 var(--serif); text-transform: none; letter-spacing: -.02em; }
.claim-tag { font: italic 400 clamp(22px, 2.2vw, 30px)/1.15 var(--serif); color: var(--ink); margin: 0 0 14px; }
.claim-sub { color: var(--muted-2); max-width: 40ch; font-size: 17px; margin: 0 0 26px; }
.org-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.claim-poster { position: relative; display: block; color: var(--ink); text-decoration: none; width: 100%; max-width: 420px; margin: 0 auto; }
.claim-poster:hover { color: var(--ink); }
.claim-poster::before { content: ""; position: absolute; inset: -18% -24%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lime) 40%, transparent), transparent); opacity: .12; transition: opacity .8s var(--ease-out); }
/* The empty stage (original render) wakes up: --lit runs 0 → 1 as the cursor approaches (home.js), on hover,
   or when it scrolls into view on touch screens. Only opacity and transform change. */
.claim-poster { --lit: 0; }
.claim-poster.alive { --lit: 1; }
.claim-sheet { background: #030304; }
.cl-dark, .cl-lit, .cl-dark img, .cl-lit img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-dark img, .cl-lit img { object-fit: cover; display: block; }
.cl-lit { opacity: var(--lit); transition: opacity .35s linear; }
.cl-haze { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: calc(var(--lit) * .7); transition: opacity .5s; overflow: hidden; }
.cl-haze i { position: absolute; width: 140%; height: 50%; left: -20%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--leak) 26%, transparent), transparent); }
.cl-haze i:first-child { top: 28%; } .cl-haze i:last-child { top: 52%; opacity: .6; }
@media (prefers-reduced-motion: no-preference) { .js .cl-haze i { animation: clHaze 9s ease-in-out infinite alternate; } .js .cl-haze i:last-child { animation-duration: 12s; animation-direction: alternate-reverse; } }
@keyframes clHaze { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.claim-sheet::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(3, 3, 4, .7), transparent 34%, transparent 70%, rgba(3, 3, 4, .85)); }
.cl-crowd { position: absolute; left: -2%; right: -2%; bottom: 0; width: 104%; height: 26%; z-index: 2; fill: #020203;
  transform: translateY(calc((1 - var(--lit)) * 100%)); transition: transform .5s var(--ease-out); }
.cl-frame { position: absolute; inset: 12px; z-index: 3; border: 1.5px dashed rgba(243, 241, 234, calc(.45 - var(--lit) * .45)); display: flex; justify-content: space-between; align-items: flex-start; padding: 10px;
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); transition: border-color .4s; }
.cl-frame span { background: rgba(5, 5, 5, .7); padding: 5px 6px; }
.cl-type { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: 52px 26px 0; text-align: center; }
.cl-k { font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; }
.cl-h { font: 800 clamp(34px, 3.8vw, 52px)/.9 var(--display); letter-spacing: -.04em; text-transform: uppercase; margin: 0;
  color: color-mix(in srgb, var(--ink) calc(var(--lit) * 100%), transparent); -webkit-text-stroke: 1.4px var(--ink); transition: color .4s; }
.claim-poster .poster-cta { z-index: 4; opacity: calc(.35 + var(--lit) * .65); transform: translateY(calc((1 - var(--lit)) * 10px)); }
.claim-poster::before { opacity: calc(var(--lit) * .65) !important; }

/* ---------- All events ---------- */
.evs-head { padding-top: clamp(36px, 6vw, 72px); position: relative; z-index: 5; }
.page-h { font: 800 clamp(40px, 7.6vw, 118px)/.88 var(--display); --fs-unused: 105%; letter-spacing: -.045em; text-transform: uppercase; margin: 0 0 clamp(24px, 4vw, 40px); }
.evs-head .search { max-width: 820px; }
.filter-row { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; min-width: 0; }
.filter-row .chips { flex: 1 1 auto; }
.drawer { position: relative; flex: none; }
.drawer summary { list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer[open] summary { border-color: var(--lime); color: var(--ink); }
.drawer-in { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, 86vw); padding: 16px; background: #141414; border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); display: grid; gap: 10px; z-index: 30; }
.drawer-in label { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 599px) {
  .drawer-in { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; border-radius: 12px 12px 0 0; padding: 20px var(--gut) calc(20px + env(safe-area-inset-bottom)); }
}
.js .drawer-in .btn { display: none; }
.evs { padding-top: 28px; }
.evs-count { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 24px; } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 28px; } }
@media (max-width: 559px) {
  .grid .ec-title { font-size: 17px; }
  .grid .ec-date .cond { font-size: 18px; }
  .grid .ec-time { display: none; }
  .grid .ec-sub { font-size: 13px; }
  .grid .poster-cta { display: none; }
}
.grid .ec-link::before { opacity: .3; }
.no-match, .evs-empty { padding: 48px 0 16px; }
.no-match-h, .evs-empty-h { font: 800 clamp(26px, 4vw, 52px)/.98 var(--display); --fs-unused: 105%; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 14px; }
.evs-empty .btn { margin: 8px 0 40px; }
.promo-row { list-style: none; margin: 0; padding: 20px 0; display: grid; gap: 40px 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promo-row .promo { width: auto; }
@media (min-width: 1024px) { .promo-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) { .promo-row { grid-template-columns: 1fr; } .promo-row .promo { max-width: 360px; } }

/* ---------- Event page: the admission ticket ---------- */
.page-event main { position: relative; }
.tix { position: relative; isolation: isolate; padding: 20px 0 0; }
.tix-amb { position: absolute; left: 0; right: 0; top: -64px; height: min(1100px, 130vh); z-index: -1; pointer-events: none;
  background: radial-gradient(48% 46% at 26% 32%, color-mix(in srgb, var(--leak) 34%, transparent), transparent 72%),
              radial-gradient(40% 40% at 80% 10%, color-mix(in srgb, var(--leak) 12%, transparent), transparent 70%);
  transition: background .8s; }
.crumbs { margin: 0 0 18px; }
.crumbs a { font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); text-decoration: none; padding: 10px 0; display: inline-block; }
.crumbs a:hover { color: var(--lime); }
.tk { --perf: 30px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 10px;
  background: linear-gradient(125deg, rgba(255, 255, 255, .05), transparent 32%), linear-gradient(180deg, #151515, #0f0f0f);
  box-shadow: 0 0 0 1px var(--line-2), 0 60px 140px -50px color-mix(in srgb, var(--leak) 45%, #000), 0 30px 60px -30px #000; }
.tk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .09) 47%, color-mix(in srgb, var(--leak) 25%, transparent) 50%, transparent 62%); background-size: 260% 100%; }
.tk-stub { position: relative; padding: 14px; border-radius: 10px 10px 0 0; background: color-mix(in srgb, var(--leak) 14%, #0d0d0d); }
.tk-poster { position: relative; border-radius: 4px; overflow: hidden; }
.tk-poster img { width: 100%; height: auto; max-height: 46svh; object-fit: contain; margin: 0 auto; }
.tk-poster .noposter { aspect-ratio: 4 / 5; max-height: 46svh; margin: 0 auto; }
.tk-perf { position: relative; height: var(--perf); }
.tk-perf::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; border-top: 2px dashed rgba(243, 241, 234, .16); transform-origin: left; }
.tk-perf i { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-2); }
.tk-perf i:first-child { left: -15px; clip-path: inset(0 0 0 50%); }
.tk-perf i:last-child { right: -15px; clip-path: inset(0 50% 0 0); }
.tk-main { padding: 10px clamp(18px, 3vw, 40px) clamp(22px, 3vw, 40px); min-width: 0; }
.admit { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.admit span:first-child { color: var(--lime); }
.admit span:last-child { text-align: right; }
.tk-title { font: 800 clamp(30px, 8vw, 60px)/.95 var(--display); --fs-unused: 102%; letter-spacing: -.035em; text-transform: uppercase; margin: 0 0 24px; overflow-wrap: anywhere; }
.tk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 0 0 28px; }
.tk-facts dt { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tk-facts dd { margin: 0; font-size: 16px; }
.tf-date .cond { font-size: 22px; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.tf-year { font: 500 12px/1 var(--mono); color: var(--muted); }
.tf-venue { grid-column: 1 / -1; }
.tf-venue dd { font: 600 18px/1.3 var(--body); }
.tf-addr { display: block; font: 400 14px/1.45 var(--body); color: var(--muted-2); margin-top: 4px; }
.tf-map { display: inline-block; margin-top: 6px; font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); text-decoration: none; padding: 6px 0; }
.tiers { border-top: 2px dashed rgba(243, 241, 234, .12); padding-top: 22px; }
.tiers-h { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 8px; }
.types { list-style: none; padding: 0; margin: 0 0 18px; }
.type { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info price" "info qty"; gap: 6px 16px; align-items: center; padding: 16px 0 16px 0;
  border-bottom: 1px solid var(--line); transition: padding .35s var(--ease-out); }
.type::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--lime); transform: scaleY(0); transition: transform .35s var(--ease-out); }
.type.picked { padding-left: 16px; }
.type.picked::before { transform: none; }
.type-info { grid-area: info; min-width: 0; }
.type p { margin: 0; }
.type-name { font: 600 17px/1.25 var(--body); }
.type-desc { color: var(--muted-2); font-size: 14px; margin-top: 4px !important; }
.type-note { font: 500 12px/1.3 var(--mono); color: var(--muted); margin-top: 6px !important; }
.type-price { grid-area: price; justify-self: end; font: 600 19px/1 var(--body); font-variant-numeric: tabular-nums; transition: color .3s; }
.type.picked .type-price { color: var(--lime); }
.type .qty, .type .tag { grid-area: qty; justify-self: end; }
.type.off { opacity: .55; }
.qty select { width: 92px; }
.step { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r); }
.step button { width: 46px; height: 46px; border: 0; background: transparent; color: var(--ink); font: 500 22px/1 var(--body); cursor: pointer; border-radius: var(--r); transition: background .2s, color .2s; }
.step button:hover:not(:disabled) { background: var(--bg-4); }
.step button:disabled { color: #4d4b47; cursor: not-allowed; }
.step output { min-width: 34px; text-align: center; font: 600 18px/1 var(--mono); }
.type.picked .step { border-color: var(--lime); }
.buy-bar { display: grid; gap: 12px; }
.total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.total span { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.total b { font: 600 30px/1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; display: inline-block; }
.total b.bump { animation: bump .45s var(--ease-out); }
@keyframes bump { 30% { transform: translateY(-4px); color: var(--lime); } }
.final { color: var(--warn); text-align: center; margin: 14px 0 0; font-size: 13px; font-weight: 500; }
.edge { position: absolute; inset: -1px; border-radius: 11px; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--edge-a), transparent 0 72%, color-mix(in srgb, var(--leak) 80%, transparent) 84%, #fff 88%, color-mix(in srgb, var(--leak) 80%, transparent) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (max-width: 959px) {
  .page-event .buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--tint) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); }
  .page-event .buy-bar .total { flex-direction: column; align-items: flex-start; gap: 4px; }
  .page-event .buy-bar .total b { font-size: 24px; }
  .page-event .buy-bar .btn { width: auto; min-width: 150px; }
  .page-event .foot { padding-bottom: 120px; }
}
@media (min-width: 960px) {
  .tix { padding-top: 28px; }
  .tk { grid-template-columns: minmax(0, 41%) var(--perf) minmax(0, 1fr); }
  .tk-stub { border-radius: 10px 0 0 10px; padding: 18px; }
  .tk-poster { width: 100%; position: sticky; top: 84px; }
  .tk-poster img { max-height: 78vh; }
  .tk-perf { height: auto; }
  .tk-perf::before { left: 50%; right: auto; top: 22px; bottom: 22px; border-top: 0; border-left: 2px dashed rgba(243, 241, 234, .16); transform-origin: top; }
  .tk-perf i { left: 50% !important; right: auto !important; margin: 0 0 0 -15px; clip-path: inset(50% 0 0 0) !important; }
  .tk-perf i:first-child { top: -15px; }
  .tk-perf i:last-child { top: auto; bottom: -15px; clip-path: inset(0 0 50% 0) !important; }
  .tk-main { padding-top: clamp(26px, 3vw, 40px); }
  .tk-title { font-size: clamp(32px, 3.2vw, 52px); }
  .tk-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tf-venue { grid-column: 1 / -1; }
  .tix-about { margin-left: calc(41% + 30px); }
}
.tix-about { max-width: 720px; padding-top: clamp(48px, 7vw, 88px); }
.lede { font: 600 clamp(19px, 2vw, 24px)/1.35 var(--display); margin-bottom: 20px; }
.prose { color: var(--muted-2); max-width: 68ch; }
.prose h2 { color: var(--ink); margin-top: 1.6em; font-size: 20px; }
.prose li { margin-bottom: 6px; }
.terms { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.terms summary { cursor: pointer; font: 700 14px/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 8px 0; }
.by { margin-top: 24px; font-size: 14px; color: var(--muted); }
.by b { color: var(--ink); }

/* Ticket forming on arrival: frame, perforation, details, then one pass of light round the edge */
.js .tk.arrive .tk-stub { animation: tkStub .7s var(--ease-out) both; }
.js .tk.arrive .tk-perf::before { animation: tkPerf .6s .25s var(--ease-out) both; }
.js .tk.arrive .tk-perf i { animation: tkNotch .45s .3s var(--ease-out) both; }
/* (never animate .tiers itself: a transform there would trap the phone's fixed checkout bar) */
.js .tk.arrive .tk-main > :not(.tiers), .js .tk.arrive .tk-facts > div, .js .tk.arrive .tiers > :not(.buy-form), .js .tk.arrive .types { animation: rise .6s var(--ease-out) both; }
.js .tk.arrive .tk-main > .admit { animation-delay: .18s; }
.js .tk.arrive .tk-main > .tk-title { animation-delay: .24s; }
.js .tk.arrive .tk-facts > div:nth-child(1) { animation-delay: .32s; }
.js .tk.arrive .tk-facts > div:nth-child(2) { animation-delay: .37s; }
.js .tk.arrive .tk-facts > div:nth-child(3) { animation-delay: .42s; }
.js .tk.arrive .tk-facts > div:nth-child(4) { animation-delay: .47s; }
.js .tk.arrive .tiers > :not(.buy-form), .js .tk.arrive .types { animation-delay: .5s; }
.js .tk.arrive .tk-main > .tk-facts { animation: none; }
.js .tk.arrive::after { animation: sheen 1.6s .5s var(--ease) both; }
.js .tk.arrive .edge { animation: edgeRun 2.2s .55s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes tkStub { from { opacity: 0; transform: scale(.97); } }
@keyframes tkPerf { from { transform: scale(0); } }
@keyframes tkNotch { from { transform: scale(0); } }
@keyframes sheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -30% 0; } }
@keyframes edgeRun { 0% { opacity: 0; --edge-a: 0deg; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; --edge-a: 360deg; } }

/* Leaving a listing for a ticket: the room dims around the chosen poster */
body.leaving main > *, body.leaving .top, body.leaving .foot { transition: opacity .28s var(--ease); }
body.leaving .top, body.leaving .foot { opacity: 0; }
body.leaving [data-leak]:not(.chosen), body.leaving .sec-head, body.leaving .hero-in, body.leaving .evs-head, body.leaving .evs-count, body.leaving .org, body.leaving .wall-empty { opacity: .12; transition: opacity .3s var(--ease); }
body.leaving .chosen { z-index: 5; }

body.leaving .chosen .pc-link::before, body.leaving .chosen .ec-link::before { opacity: 1; transform: scale(1.3); }
body.leaving::before { content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--leak) 18%, transparent), rgba(5, 5, 5, .55)); animation: fadeIn .3s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } }

/* Cross-page morph (Chrome, Edge, Safari 18+): poster to ticket and back */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .75, .15, 1); }
::view-transition-old(root) { animation: .3s var(--ease) both vtOut; }
::view-transition-new(root) { animation: .45s .1s var(--ease) both fadeIn; }
@keyframes vtOut { to { opacity: 0; } }
/* Poster to ticket: one steady move. Both snapshots fill the travelling box (no stretch or jump between crops). */
.vt-in .tk.arrive .tk-stub, .vt-in .tk.arrive::after { animation: none !important; }
body.leaving .chosen .poster { --lift: 0px; --rx: 0deg; --ry: 0deg; transition: transform .26s var(--ease-out); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); margin-top: clamp(72px, 10vw, 140px); padding: clamp(40px, 6vw, 72px) 0 36px; font-size: 14px; color: var(--muted-2); position: relative; }
.foot p { margin: 0; }
.foot a { color: var(--muted-2); text-decoration: none; }
.foot a:hover { color: var(--lime); }
.foot-top { display: grid; gap: 36px; }
.foot-mark { white-space: nowrap; overflow: hidden; padding-bottom: .06em; font: 800 clamp(40px, 10.5vw, 200px)/.8 var(--display); --fs-unused: 112%; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(243, 241, 234, .2); }
.foot-mark b { color: var(--lime); -webkit-text-stroke: 0; margin-left: .04em; }
.foot-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; }
.foot-nav div { display: grid; gap: 10px; align-content: start; }
.foot-k { font: 500 11px/1 var(--mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) !important; margin-bottom: 4px !important; }
.foot-pay { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 28px; margin-top: 36px; border-top: 1px solid var(--line); }
.foot-pay .foot-k { margin: 0 !important; }
.pay-icons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-icons img { height: 26px; width: auto; border-radius: 4px; }
/* Google Pay's official file includes its required clear space; size the pill itself to match the other marks */
.pay-icons img[src*="googlepay"] { height: 48px; margin: -11px -5px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 24px; font-size: 13px; color: var(--muted); }
@media (min-width: 900px) { .foot-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; } .foot-mark { font-size: clamp(48px, 5.4vw, 96px); } }

/* ---------- Checkout, payment, tickets, legal (markup unchanged, restyled) ---------- */
.checkout { padding-top: 32px; }
.checkout h1, .pay h1, .pending h1, .tickets-head h1 { --fs-unused: 102%; text-transform: uppercase; letter-spacing: -.03em; }
.back { margin-bottom: 18px; }
.back a { text-decoration: none; color: var(--muted-2); font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.summary { border: 1px solid var(--line-2); border-radius: var(--r); padding: 18px; background: linear-gradient(125deg, rgba(255, 255, 255, .04), transparent 40%), var(--bg-2); margin-bottom: 26px; }
.summary ul { list-style: none; margin: 12px 0; padding: 12px 0; border-block: 1px dashed var(--line-2); }
.summary li, .summary-total { display: flex; justify-content: space-between; gap: 12px; }
.summary-total { margin: 0; font-size: 18px; }
.summary-total b { font-family: var(--body); font-weight: 600; font-size: 22px; }
.form fieldset { border: 0; margin: 0 0 24px; padding: 0; }
.form legend { font: 800 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 8px; padding: 0; }
.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 500; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
fieldset > .hint { margin: 0 0 14px; }
.error { color: var(--err); font-size: 14px; margin: 6px 0 0; }
.has-error input, .has-error select { border-color: var(--err); }
.phone { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 8px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; background: var(--bg-2); }
.check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--lime); }
.check label { font-size: 15px; color: var(--muted-2); }
.check .error { grid-column: 2; }
.check.has-error { border-color: var(--err); }
.check.optional { background: transparent; border-style: dashed; }
.cf-turnstile { margin: 0 0 16px; min-height: 65px; }
.pay { padding-top: 56px; }
.pay-amount { font: 600 48px/1.05 var(--body); letter-spacing: -.02em; margin: 10px 0 6px; }
.pending { padding-top: 64px; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--lime); margin: 0 auto 24px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tickets { padding-top: 28px; }
.tickets-head { margin: 8px 0 22px; }
.tickets-head h1 { font-size: clamp(30px, 6vw, 46px); }
.tickets-head p { margin: 0 0 4px; }
.ticket-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 18px; }
.ticket { background: #F3F1EA; color: #0b0b0b; border-radius: 14px; padding: 20px 18px 16px; text-align: center; position: relative; overflow: hidden; }
.ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--lime); }
.ticket-top { display: flex; justify-content: space-between; font-size: 14px; }
.ticket-top .muted { color: #5d5a54; }
.ticket-type { font: 800 15px/1.2 var(--body); text-transform: uppercase; letter-spacing: .02em; }
.ticket-holder { font: 800 19px/1.2 var(--display); margin: 8px 0 0; }
.qr { width: min(260px, 78vw); margin: 10px auto 6px; }
.qr svg { width: 100%; height: auto; display: block; }
.code { font: 600 24px/1 var(--mono); letter-spacing: .14em; margin: 4px 0 8px; }
.ticket-meta { font-size: 13px; color: #5d5a54; margin: 0; }
.ticket.used, .ticket.void { opacity: .55; }
.ticket .tag { margin-top: 10px; color: #0b0b0b; border-color: #c9c5bb; }
.order-meta { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.order-meta div { display: flex; justify-content: space-between; gap: 12px; }
.order-meta dt { color: var(--muted); }
.order-meta dd { margin: 0; text-align: right; }
.order-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.order-list a { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--bg-2); }
.order-list a:hover { border-color: var(--lime); }
.order-list .past { opacity: .6; }
.legal { padding-top: 36px; }
.legal h1 { margin-bottom: 4px; text-transform: uppercase; }
.empty { text-align: center; padding: 56px 0; border: 1px dashed var(--line-2); border-radius: var(--r); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .hero-h .ln > span, .js .rise { transform: none; opacity: 1; }
  .js .hero-h .ln > span { opacity: 1; transform: none; }
  .spinner { border-top-color: var(--line-2); }
  @view-transition { navigation: none; }
}
@media print {
  .top, .foot, .notice, .order-meta { display: none; }
  body { background: #fff; }
  body::after { display: none; }
  .ticket { break-inside: avoid; border: 1px solid #ccc; }
}
.nowrap { white-space: nowrap; }
.search-list.up { top: auto; bottom: calc(100% + 6px); }

/* ---------- Tonight mode ---------- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255, 84, 61, .6); vertical-align: middle; font-style: normal; }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: livePulse 2s ease-out infinite; } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 84, 61, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 84, 61, 0); } }
.nav-main a[href="/tonight"]::before, .nav-main a[href$="when=tonight"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); margin-right: 7px; vertical-align: 2px; }
.tonight-cta { gap: 10px; }
.cta-n { font: 600 11px/1 var(--mono); background: var(--coral); color: #0A0A0A; padding: 4px 6px; border-radius: 3px; }
.h-tonight, .tonight-line { display: none; }
.is-tonight .h-tonight { display: inline; }
.is-tonight .h-all { display: none; }
.is-tonight .tonight-line { display: flex; }
.tonight-line { align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: -4px 0 18px; }
.is-tonight .evs-head [data-kicker] { display: none; }
.tonight-empty { padding: 40px 0 8px; }
.no-match-h span { color: var(--lime); }
.next-k { margin-top: 56px; }
.next-grid { margin-top: 18px; }

/* ---------- Live countdown ---------- */
.cd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 0; }
.cd-k { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cd-v { font: 500 14px/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.cd-v b { font-weight: 800; }
.cd-v small { font-size: .62em; color: var(--muted); margin-left: 1px; font-weight: 600; }
.cd.done .cd-v { color: var(--lime); }
.cd.big { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 16px; margin: -6px 0 26px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(110deg, color-mix(in srgb, var(--lime) 9%, transparent), transparent 60%); }
.cd.big .cd-k { grid-column: 1 / -1; }
.cd.big .cd-v { font-size: clamp(30px, 3.6vw, 44px); line-height: 1; letter-spacing: -.04em; }
.cd.big .cd-v small { font-size: .42em; color: var(--lime); }
.cd.big .cd-tz { font: 500 11px/1.3 var(--mono); color: var(--muted-2); text-align: right; letter-spacing: .06em; }
@media (max-width: 559px) { .cd.big { grid-template-columns: 1fr; } .cd.big .cd-tz { text-align: left; } }

/* ---------- Waiting for payment confirmation: a ticket stub prints and gets a pass of the scanner ----------
   Only on the page that is genuinely waiting for the payment webhook; the polling itself is unchanged. */
.printer { position: relative; width: 150px; height: 170px; margin: 0 auto 26px; }
.printer-slot { position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 4px; background: #1b1b1b; box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 30px -10px #000; z-index: 2; }
.printer-slot::after { content: ""; position: absolute; left: 14px; right: 14px; top: 6px; height: 2px; background: #000; border-radius: 1px; }
.printer-stub { position: absolute; left: 22px; right: 22px; top: 8px; height: 150px; border-radius: 0 0 8px 8px; background: #F3F1EA; overflow: hidden; transform-origin: top;
  clip-path: inset(0 0 100% 0); -webkit-mask: radial-gradient(circle 9px at 0 62%, transparent 98%, #000) , radial-gradient(circle 9px at 100% 62%, transparent 98%, #000); -webkit-mask-composite: source-in; mask-composite: intersect; }
.printer-stub::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--lime); }
.ps-perf { position: absolute; left: 10px; right: 10px; top: 62%; border-top: 2px dashed #c9c5bb; }
.ps-line { position: absolute; left: 14px; top: 22px; width: 70%; height: 8px; border-radius: 2px; background: #1a1a1a; }
.ps-line.short { top: 38px; width: 44%; background: #9a958b; }
.ps-code { position: absolute; left: 50%; bottom: 12px; width: 40px; height: 40px; transform: translateX(-50%);
  background: conic-gradient(#111 25%, transparent 0 50%, #111 0 75%, transparent 0) 0 0 / 10px 10px; opacity: .85; border-radius: 2px; }
.ps-scan { position: absolute; left: -10%; right: -10%; top: -20%; height: 18px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lime) 85%, transparent), transparent); opacity: 0; }
.js .printer-stub { animation: print 1.6s steps(12, end) forwards, printLoop 3.2s 1.6s ease-in-out infinite; }
.js .ps-scan { animation: scanPass 3.2s 1.6s ease-in-out infinite; }
.no-js .printer-stub, html:not(.js) .printer-stub { clip-path: none; }
@keyframes print { to { clip-path: inset(0 0 0 0); } }
@keyframes printLoop { 0%, 100% { transform: none; clip-path: inset(0 0 0 0); } 50% { transform: translateY(3px); clip-path: inset(0 0 0 0); } }
@keyframes scanPass { 0% { opacity: 0; top: -20%; } 15% { opacity: 1; } 55% { opacity: 1; top: 105%; } 60%, 100% { opacity: 0; top: 105%; } }
@media (prefers-reduced-motion: reduce) { .printer-stub { clip-path: none !important; } .ps-scan { display: none; } }

/* ---------- Confirmed: you're on the list ---------- */
.onlist { padding-top: 40px; }
.list-head { margin: 0 0 30px; }
.list-h { font: 800 clamp(38px, 9vw, 84px)/.9 var(--display); --fs-unused: 105%; letter-spacing: -.045em; text-transform: uppercase; margin: 0 0 18px; }
.list-h::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .05em; background: var(--lime); }
.list-sub { color: var(--muted-2); font-size: 17px; max-width: 46ch; }
.list-sub b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.onlist .tickets-head { border-top: 1px solid var(--line-2); padding-top: 22px; }
.th-k { font: 500 11px/1 var(--mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 10px !important; }
.th-title { font: 800 clamp(24px, 5vw, 38px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em; margin: 0 0 10px; }
.onlist .tickets-head .cd.big { margin: 18px 0 0; }
.onlist .ticket { padding-top: 26px; box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--lime) 60%, #000); }
.onlist .qr { background: #fff; padding: 12px; border-radius: 8px; }
/* A soft light sweeps the stub band (never over the QR, which stays crisp for the door scanner) */
.ticket-light { position: absolute; left: 0; right: 0; top: 0; height: 64px; overflow: hidden; pointer-events: none; }
.ticket-light::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -45%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lime) 55%, transparent), transparent); mix-blend-mode: multiply; }
@media (prefers-reduced-motion: no-preference) { .js .ticket-light::after { animation: stubLight 1.4s .4s var(--ease) 1 both, stubLight 1.4s 6s var(--ease) 3 both; } }
@keyframes stubLight { from { left: -45%; } to { left: 105%; } }

/* ---------- Proceeding to checkout: the ticket tears along its perforation (desktop and phone variants) ---------- */
.tk-main { border-radius: 0 0 10px 10px; }
.tk.tearing { background: transparent; box-shadow: none; transition: background .2s, box-shadow .2s; }
.tk.tearing .tk-stub, .tk.tearing .tk-main { box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -30px #000; }
.tk.tearing .tk-main { background: linear-gradient(180deg, #151515, #0f0f0f); }
.tk.tearing .tk-perf i { opacity: 0; transition: opacity .15s; }
.tk.tearing .tk-perf::before { border-color: var(--lime); box-shadow: 0 0 12px var(--lime); transition: border-color .1s, box-shadow .1s; }
.tk.tearing .tk-stub { transition: transform .48s cubic-bezier(.3, 1.4, .5, 1), opacity .48s; transform: translateY(-16px) rotate(-2.2deg); opacity: .9; }
@media (min-width: 960px) {
  .tk-main { border-radius: 0 10px 10px 0; }
  .tk.tearing .tk-stub { transform: translateX(-18px) rotate(-2.6deg); }
  .tk.tearing .tk-main { transition: transform .48s cubic-bezier(.3, 1.4, .5, 1); transform: translateX(10px) rotate(.8deg); }
}
@media (max-width: 599px) {
  .wall .sec-head { flex-wrap: wrap; }
}
/* Glows may spill visually but must never widen the page */
html { overflow-x: clip; }
.claim { overflow-x: clip; overflow-y: visible; }
/* Phones: compact collage, headline sized to fit, header that never overflows */
@media (max-width: 599px) {
  .brand-mark { font-size: 16px; }
  .top-in { gap: 6px; }
  .nav-main a { letter-spacing: .04em; padding: 12px 6px; }
  .sec-h { font-size: clamp(30px, 9.4vw, 46px); }
}

/* The wall sits right under the hero: a compact one-line heading so posters show in the first screen */
.wall .sec-head { margin-bottom: 0; align-items: center; }
.wall .sec-h { font-size: clamp(28px, 3.4vw, 52px); }
.wall .kicker { margin-bottom: 8px; }
.wall .marquee { padding: 26px 0 28px; }
/* Headroom for the lifted poster: extra padding, pulled back with negative margins so the layout doesn't move.
   The empty padding lets clicks through to what's underneath. */
.wall .marquee.live { padding: 76px 0 84px; margin: -50px 0 -56px; pointer-events: none; }
.wall .marquee.live .track > li { pointer-events: auto; }
/* Phones: one column that never outgrows the screen, and a shorter run-up to the posters */
@media (max-width: 899px) { .hero-in { grid-template-columns: minmax(0, 1fr); } }
.hero-side, .hero-head { min-width: 0; }
@media (max-width: 599px) {
  .hero { padding-top: 88px; }
  .hero-in { gap: 16px; }
  .hero-sub { font-size: 15px; margin-bottom: 14px; }
  .hero-ctas .tonight-cta { display: none; }
  .hero-ctas { margin-top: 14px; }
  .hero-ticker { margin-top: 22px; padding: 7px 0; }
  .wall .sec-head { flex-wrap: nowrap; align-items: flex-end; }
  .wall-empty { margin-top: 8px; }
  .wall-empty-h { font-size: 15px; }
  .wall-empty .btn { display: none; }
  .wall .marquee { padding-top: 18px; }
}

/* ---------- Event page v2: a balanced poster + details grid ---------- */
.tix .wrap { max-width: 1160px; }
.tk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; background: none; box-shadow: none; border-radius: 0; }
.tk-perf { display: none; }
.tk-stub { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--leak) 10%, var(--tint-2)); box-shadow: 0 0 0 1px var(--line-2), 0 40px 90px -50px color-mix(in srgb, var(--leak) 60%, #000); }
/* A fixed 4:5 frame; the artwork is shown whole (contain), never stretched or cropped */
.tk-poster { aspect-ratio: 4 / 5; max-height: 52svh; margin: 0 auto; border-radius: 6px; background: #080808; display: grid; place-items: center; }
.tk-poster img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.tk-poster .noposter { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
.tk-main { padding: 0; background: none !important; display: grid; gap: 18px; align-content: start; }
.admit { margin: 0; padding: 0; border: 0; }
.tk-title { margin: 0; }
.tk-facts, .tk-main > .cd.big, .tiers { margin: 0; padding: 18px 20px; border-radius: 12px; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); }
.tk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.tk-facts dt { color: var(--muted-2); }
.tf-tz { font: 500 11px/1 var(--mono); color: var(--muted); letter-spacing: .08em; }
.tiers { border-top: 0; }
.tiers-h { color: var(--ink); font-size: 12px; margin-bottom: 4px; }
.type:last-child { border-bottom: 0; }
/* Countdown: labelled units, high contrast */
.tk-main > .cd.big { display: grid; grid-template-columns: 1fr; gap: 10px; background: linear-gradient(110deg, color-mix(in srgb, var(--lime) 12%, var(--tint-2)), var(--tint-2) 70%); }
.cd.big .cd-k { color: var(--ink); font-size: 11px; letter-spacing: .18em; }
.cd.big .cd-v { display: flex; gap: 10px; flex-wrap: wrap; font-size: inherit; }
.cd-u { display: grid; justify-items: center; gap: 6px; min-width: 64px; padding: 10px 8px 8px; border-radius: 8px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line-2); }
.cd-u b { font: 500 clamp(26px, 3vw, 36px)/1 var(--mono); color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cd-u small { font: 500 10px/1 var(--mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2) !important; margin: 0 !important; }
.cd.big .cd-tz { text-align: left; color: var(--muted-2); }
.cd.big.done .cd-v { font: 600 26px/1 var(--body); color: var(--lime); }
@media (min-width: 960px) {
  .tk { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 40px; align-items: start; }
  .tk-stub { position: sticky; top: 88px; border-radius: 12px; }
  .tk-poster { max-height: none; }
  .tk-main { padding-top: 4px; }
  .tk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tix-about { margin-left: calc(min(420px, 36%) + 40px); }
}
/* Tear on the way to checkout, for the split layout */
.tk.tearing { background: none; }
.tk.tearing .tk-main { background: none; box-shadow: none; }
.tk.tearing .tk-stub { transform: translateX(-18px) translateY(6px) rotate(-3deg); opacity: .85; }
@media (max-width: 959px) { .tk.tearing .tk-stub { transform: translateY(-14px) rotate(-2deg); } }

/* ---------- All events transition: poster → paper ticket → tear → reveal ---------- */
.tt { position: fixed; inset: 0; z-index: 300; pointer-events: none; --leak: var(--lime); }
.tt-scrim { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--leak) 22%, transparent), transparent 70%), color-mix(in srgb, var(--tint) 94%, transparent); }
.tt-ticket { position: fixed; display: flex; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7)); }
.tt-stub { position: relative; flex: none; height: 100%; overflow: hidden; border-radius: 10px 0 0 10px; background: #080808; }
.tt-art { position: absolute; inset: 0; }
.tt-art > * { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.tt-art img { width: 100%; height: 100%; object-fit: cover; }
.tt-fallback { display: flex; align-items: flex-end; padding: 14px; background: radial-gradient(120% 90% at 80% 0, color-mix(in srgb, var(--leak) 45%, transparent), transparent 60%), #0c0c0c; }
.tt-fallback span { font: 800 17px/.95 var(--display); text-transform: uppercase; color: #fff; }
.tt-fallback em { font: italic 400 26px/.9 var(--serif); text-transform: none; }
.tt-main { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; container-type: inline-size; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 clamp(16px, 4%, 30px);
  color: #0A0A0A; border-radius: 0 10px 10px 0; border-left: 2px dashed rgba(10, 10, 10, .28);
  background: linear-gradient(180deg, var(--leak) 0 8px, transparent 8px), linear-gradient(160deg, #F6F4EE, #E6E1D6);
  -webkit-mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000), radial-gradient(circle 11px at 0 100%, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000), radial-gradient(circle 11px at 0 100%, transparent 98%, #000); mask-composite: intersect; }
.tt-main::after { content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tt-main p { margin: 0; white-space: nowrap; }
.tt-k { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(10, 10, 10, .6); }
.tt-h { font: 800 min(40px, 13.5cqw)/.9 var(--display); text-transform: uppercase; letter-spacing: -.04em; }
.tt-h em { font: italic 400 1.15em/.8 var(--serif); text-transform: none; letter-spacing: -.02em; }
.tt-s { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(10, 10, 10, .55); white-space: normal !important; }
.tt-ticket.tearing .tt-main { border-left-color: var(--leak); }
/* The All events page waits under the ticket, then fades up as the halves fly off (a safety timer shows it regardless) */
html.tear-in main, html.tear-in .foot { opacity: 0; animation: tearSafety 0s 1.4s forwards; }
html.tear-reveal main { animation: fadeIn .45s .08s both; }
@keyframes tearSafety { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tt { display: none; } html.tear-in main, html.tear-in .foot { opacity: 1; animation: none; } }

/* ---------- The SPRED Tix ticket (poster → ticket → stub tear → page) ---------- */
.tkx { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.tkx-scrim { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, var(--leak, var(--lime)) 22%, rgba(6, 6, 6, .72)), rgba(4, 4, 4, .9)); }
.tkx-t { position: absolute; display: flex; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)) drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); will-change: left, top, width, height, transform; }
/* Paper: warm stock, fine grain, a hairline printed frame and a slightly darker bottom edge for thickness */
.tkx-main, .tkx-stub { position: relative; overflow: hidden; color: #141311;
  background: radial-gradient(120% 90% at 0% 0%, #fbf9f3, #ece8de 60%, #e2ddd1),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .7); }
.tkx-main { flex: 1 1 auto; display: flex; min-width: 0; border-radius: 6px 0 0 6px;
  -webkit-mask: radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tkx-stub { flex: 0 0 auto; border-radius: 0 6px 6px 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 12px 0; will-change: transform, clip-path;
  -webkit-mask: radial-gradient(circle 9px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tkx-art { position: relative; flex: 0 0 auto; height: 100%; overflow: hidden; background: #0b0b0b; }
.tkx-art img, .tkx-fly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tkx-art::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.tkx-none, .tkx-mark { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; color: #f3f1ea;
  background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--leak, #888) 45%, transparent), transparent 60%), linear-gradient(160deg, #1f1f1f, #0a0a0a);
  font: 800 clamp(13px, 2.2vw, 20px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tkx-mark { font-size: clamp(15px, 2.6vw, 24px); background: linear-gradient(150deg, #2a2b2e, #0b0b0c 55%, #1d1e21); }
.tkx-mark b { color: transparent; background: linear-gradient(180deg, #fff, #9aa0a8 55%, #f0f2f5); -webkit-background-clip: text; background-clip: text; }
.tkx-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 clamp(12px, 2.4vw, 26px);
  border-left: 3px solid color-mix(in srgb, var(--leak, #888) 85%, #000); }
.tkx-k, .tkx-m { margin: 0; font: 500 clamp(8.5px, 1.3vw, 11px)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #5f5a50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkx-h { margin: 0; font: 800 clamp(16px, 3.1vw, 30px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase; color: #121110;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tkx-nav .tkx-h { font: italic 400 clamp(24px, 4.6vw, 44px)/.9 var(--serif); text-transform: none; letter-spacing: -.02em; }
.tkx-sv { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 clamp(10px, 1.6vw, 13px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #121110; white-space: nowrap; }
.tkx-sb { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 clamp(8px, 1.2vw, 10px)/1 var(--display); letter-spacing: .08em; color: #5f5a50; }
.tkx-sb b { color: color-mix(in srgb, var(--leak, #888) 70%, #111); }
/* Perforation: a row of punched holes between the main ticket and the stub */
.tkx-perf { position: absolute; top: 12px; bottom: 12px; right: var(--sw, 20%); width: 2px; margin-right: -1px; z-index: 2; transform-origin: top;
  background: radial-gradient(circle, rgba(0, 0, 0, .55) 1.1px, transparent 1.4px) 0 0 / 2px 7px repeat-y; }
/* The paper curling near the tear: a soft shade along the torn edge, only while it tears */
.tkx-bend { position: absolute; top: 0; bottom: 0; width: 16px; opacity: 0; pointer-events: none; }
.tkx-main .tkx-bend { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .22), transparent); }
.tkx-stub .tkx-bend { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .25) 40%, transparent); }
.tkx-fly { position: fixed; overflow: hidden; z-index: 2; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
/* Arriving by ticket: hold the page until the ticket opens into it (a CSS fallback reveals it even without JS) */
html.tk-in main { visibility: hidden; animation: tkSafety 0s 2.8s forwards; }
@keyframes tkSafety { to { visibility: visible; } }
html.tk-in .tk-poster { visibility: hidden; }
html.tk-reveal .tk-main > *, html.tk-reveal .tix-about, html.tk-reveal .crumbs, html.tk-reveal .evs-head, html.tk-reveal .evs > *, html.tk-reveal .tk-stub { animation: tkUp .55s var(--ease-out) both; }
html.tk-reveal .tk-main > :nth-child(1) { animation-delay: .06s; }
html.tk-reveal .tk-main > :nth-child(2) { animation-delay: .1s; }
html.tk-reveal .tk-main > :nth-child(3) { animation-delay: .15s; }
html.tk-reveal .tk-main > :nth-child(4) { animation-delay: .2s; }
html.tk-reveal .tk-main > :nth-child(5) { animation-delay: .25s; }
html.tk-reveal .tk-main > :nth-child(6) { animation-delay: .3s; }
html.tk-reveal .tk-main > :nth-child(n+7) { animation-delay: .34s; }
html.tk-reveal .tk-stub { animation: none; }
html.tk-reveal .tk-main > .tiers { animation-name: fadeIn; } /* no transform on .tiers (it holds the phone's fixed buy bar) */
@keyframes tkUp { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Event page, Phase 5: artwork at its own proportions, purchase column on the right ---------- */
.tk-poster { aspect-ratio: auto; max-height: none; background: none; display: block; }
.tk-poster img { display: block; width: 100%; height: auto; max-height: min(72svh, 760px); object-fit: contain; margin: 0 auto; }
.tk-poster .noposter { aspect-ratio: 4 / 5; }
.tk-stub { padding: 0; background: none; box-shadow: none; }
.tk-stub .tk-poster { border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2), 0 50px 100px -50px color-mix(in srgb, var(--leak) 70%, #000), 0 30px 60px -40px #000; }
.tk-lede { margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted-2); max-width: 60ch; }
.tk-main .tix-about { margin: 6px 0 0; padding: 0; max-width: none; }
.tk-main .tix-about .prose { color: var(--muted-2); }
@media (min-width: 960px) {
  .tk { grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1fr); gap: clamp(36px, 4vw, 64px); }
  .tk-stub { position: sticky; top: 92px; align-self: start; }
  .tk-poster img { max-height: calc(100svh - 130px); }
}
/* Countdown: lit by the event's own colour */
.tk-main > .cd.big { background: linear-gradient(110deg, color-mix(in srgb, var(--leak) 16%, var(--tint-2)), var(--tint-2) 75%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leak) 30%, transparent); }
.cd-u { min-width: 70px; }
.cd-u b { color: var(--ink); text-shadow: 0 0 24px color-mix(in srgb, var(--leak) 45%, transparent); }
.type.picked { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leak) 70%, transparent), 0 20px 40px -28px color-mix(in srgb, var(--leak) 60%, #000); }
.tk-main > .admit { justify-content: flex-start; gap: 10px; }
.tk-main > .admit span:last-child { text-align: left; color: var(--ink); }
.tkx-h.long { font-size: clamp(13px, 2.3vw, 22px); }
@media (max-width: 699px) { .tkx-sb { display: none; } .tkx-stub { justify-content: center; } }
@media (max-width: 959px) { .tk-poster img { max-height: 54svh; width: auto; max-width: 100%; } .tk-stub .tk-poster { width: fit-content; margin: 0 auto; } }

/* ---------- Loading (only while the payment webhook is genuinely pending): a miniature ticket assembles,
   its perforation punches through, and a scanning light passes over it. No QR, nothing implied. ---------- */
.mini-tk { position: relative; width: 220px; height: 88px; margin: 6px auto 30px; display: flex; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
.mt-main, .mt-stub { position: relative; height: 100%; overflow: hidden; background: linear-gradient(160deg, #26272a, #121214 60%, #1c1d20); box-shadow: inset 0 0 0 1px rgba(220, 224, 230, .28); }
.mt-main { flex: 1; border-radius: 6px 0 0 6px; }
.mt-stub { width: 54px; border-radius: 0 6px 6px 0; }
.mt-band { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: color-mix(in srgb, var(--lime) 85%, #fff); }
.mt-l1, .mt-l2, .mt-l3 { position: absolute; left: 20px; height: 7px; border-radius: 2px; background: linear-gradient(90deg, #e9ebee, #9aa0a8); }
.mt-l1 { top: 22px; width: 62%; } .mt-l2 { top: 40px; width: 40%; opacity: .6; } .mt-l3 { top: 58px; width: 52%; opacity: .35; }
.mt-stub i { position: absolute; left: 50%; top: 18px; bottom: 18px; width: 7px; margin-left: -3px; border-radius: 2px; background: linear-gradient(180deg, #e9ebee, #8d939b); opacity: .7; }
.mt-perf { width: 2px; margin: 8px -1px; z-index: 2; background: radial-gradient(circle, rgba(0, 0, 0, .9) 1px, transparent 1.4px) 0 0 / 2px 6px repeat-y; }
.mt-scan { position: absolute; top: -6px; bottom: -6px; left: 0; width: 34px; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lime) 70%, #fff), transparent); mix-blend-mode: screen; filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .js .mt-main { animation: mtIn .5s var(--ease-out) both; }
  .js .mt-stub { animation: mtIn2 .5s .12s var(--ease-out) both; }
  .js .mt-perf { animation: mtPerf .4s .45s var(--ease-out) both; }
  .js .mt-l1, .js .mt-l2, .js .mt-l3 { animation: mtLine .5s var(--ease-out) both; }
  .js .mt-l1 { animation-delay: .5s; } .js .mt-l2 { animation-delay: .6s; } .js .mt-l3 { animation-delay: .7s; }
  .js .mt-scan { animation: mtScan 2.2s 1s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@keyframes mtIn { from { opacity: 0; transform: translateX(-24px); } }
@keyframes mtIn2 { from { opacity: 0; transform: translateX(24px) rotate(4deg); } }
@keyframes mtPerf { from { transform: scaleY(0); } }
@keyframes mtLine { from { transform: scaleX(0); transform-origin: left; } }
@keyframes mtScan { 0% { left: -10%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.list-tag { font: italic 400 clamp(24px, 4vw, 34px)/1.1 var(--serif); margin: -6px 0 16px; color: var(--ink); }
.badge.test { background: #FFD43B; color: #0A0A0A; }
.pc.is-test .pc-kind { color: #FFD43B; }

/* ---------- Hero discovery: one compact component (copy, search, date pills, browse link) ---------- */
.hero-side.disco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: end; min-width: 0; }
.disco > * { min-width: 0; }
.disco .hero-sub { margin: 0 0 4px; font: 400 clamp(17px, 1.5vw, 20px)/1.4 var(--body); color: var(--ink); max-width: 30ch; }
.disco .search.big .search-box { min-height: 56px; }
.disco .search-box { position: relative; border: 0; border-radius: 10px; background: linear-gradient(#0c0c0d, #0c0c0d) padding-box, linear-gradient(140deg, rgba(255, 255, 255, .5), rgba(160, 166, 175, .18) 35%, rgba(255, 255, 255, .06) 60%, rgba(200, 205, 212, .35)) border-box;
  border: 1px solid transparent; box-shadow: 0 18px 40px -26px #000; transition: box-shadow .35s var(--ease-out); }
.disco .search-box:focus-within { background: linear-gradient(#0c0c0d, #0c0c0d) padding-box, linear-gradient(140deg, var(--lime), color-mix(in srgb, var(--lime) 30%, transparent) 50%, var(--lime)) border-box;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 14%, transparent), 0 22px 60px -22px color-mix(in srgb, var(--lime) 45%, transparent); }
.disco .search-ico { width: 18px; height: 18px; stroke: var(--muted-2); stroke-width: 1.6; }
.disco .search-box input { font: 400 16px/1 var(--body); letter-spacing: .01em; }
.disco .search-box input::placeholder { color: var(--muted); }
.disco .search-go { width: 40px; height: 40px; border-radius: 8px; }
.disco-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
/* Segmented date pills */
.chips.seg { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border-radius: 99px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line-2); flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.chips.seg::-webkit-scrollbar { display: none; }
.chips.seg .chip { height: 32px; padding: 0 10px; border: 0; border-radius: 99px; background: transparent; font: 500 13px/32px var(--body); letter-spacing: 0; text-transform: none; color: var(--muted-2); white-space: nowrap; flex: none; transition: background .25s, color .25s; }
.chips.seg .chip:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.chips.seg .chip[aria-current="true"] { background: var(--lime); color: var(--on-lime); }
.chips.seg .chip-n { margin-left: 4px; font-size: 10.5px; opacity: .6; }
.disco-all { font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); text-decoration: none; padding: 10px 0; white-space: nowrap; }
.disco-all i { font-style: normal; color: var(--lime); display: inline-block; transition: transform .3s var(--ease-out); }
.disco-all:hover { color: var(--ink); } .disco-all:hover i { transform: translate(3px, -3px); }
/* Slim editorial ticker with chrome separators */
.hero-ticker { margin-top: clamp(22px, 3vh, 34px); padding: 7px 0; }
.ht-track span { font: italic 400 clamp(15px, 1.25vw, 18px)/1 var(--serif); color: var(--muted-2); letter-spacing: .01em; padding-right: 0; display: inline-flex; align-items: center; }
.ht-sep { display: inline-block; width: 6px; height: 6px; margin: 0 18px; transform: rotate(45deg); background: linear-gradient(135deg, #fff, #8f959d 55%, #e7e9ec); opacity: .7; }
@media (max-width: 899px) {
  .disco-row { display: grid; gap: 8px; }
  .chips.seg { width: 100%; }
  .disco-all { justify-self: start; }
}
@media (max-width: 520px) {
  .chips.seg .chip { flex: 1 1 auto; padding: 0 6px; font-size: 12.5px; text-align: center; }
  .chips.seg .chip-n { display: none; }
}

/* ---------- Music-wave controller: ‹ previous · play/pause · next › over a live waveform (visual only) ---------- */
.wave-ctl { position: relative; display: grid; grid-template-columns: 1fr 1.1fr 1fr; width: 260px; height: 56px; border-radius: 14px; flex: none;
  background: linear-gradient(#0c0c0d, #0c0c0d) padding-box, linear-gradient(140deg, rgba(255, 255, 255, .42), rgba(160, 166, 175, .14) 40%, rgba(255, 255, 255, .05) 62%, rgba(200, 205, 212, .3)) border-box;
  border: 1px solid transparent; box-shadow: 0 16px 40px -24px #000, 0 0 40px -18px color-mix(in srgb, var(--lime) 50%, transparent); transition: box-shadow .6s; }
.wave-wrap[hidden] { display: none; }
.wave-wrap { display: grid; justify-items: end; gap: 8px; flex: none; }
.wave-cv { position: absolute; inset: 8px 14px; width: calc(100% - 28px); height: calc(100% - 16px); pointer-events: none; }
.wz { position: relative; z-index: 1; display: flex; align-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; padding: 0 12px; font: 300 26px/1 var(--body); }
.wz span { opacity: .55; transition: opacity .2s, transform .25s var(--ease-out); text-shadow: 0 0 10px #000; }
.wz-prev { justify-content: flex-start; border-radius: 13px 0 0 13px; } .wz-next { justify-content: flex-end; border-radius: 0 13px 13px 0; } .wz-play { justify-content: center; }
.wz:hover span, .wz:focus-visible span { opacity: 1; }
.wz-prev:hover span { transform: translateX(-3px); } .wz-next:hover span { transform: translateX(3px); }
.wz:hover { background: radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--lime) 14%, transparent), transparent); }
.wz:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.wz-ico { width: 12px; height: 14px; opacity: .7; background: linear-gradient(90deg, var(--ink) 0 33%, transparent 33% 67%, var(--ink) 67%); }
.wave-ctl.is-paused .wz-ico { width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--ink); }
.wave-ctl.still .wz-play { pointer-events: none; }
.wave-bottom { display: none !important; }
@media (max-width: 899px) {
  .wave-top { display: none !important; }
  .wave-bottom:not([hidden]) { display: grid !important; justify-items: center; margin: -2px auto 0; position: relative; z-index: 6; width: min(300px, calc(100% - 2 * var(--gut))); }
  .wave-bottom .wave-ctl { width: 100%; height: 52px; }
  .wz { min-height: 48px; }
}

/* ---------- Real-event ticket: the clicked poster becomes the ticket ---------- */
.tkx-ev2 .tkx-scrim { background: radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, var(--leak) 30%, rgba(6, 6, 6, .7)), rgba(4, 4, 4, .92)); }
.tkx-ev2 .tkx-t { filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .6)) drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); transform-style: flat; }
.tkx-ev2 .tkx-main, .tkx-ev2 .tkx-stub { background: #0b0b0b; color: #fff; box-shadow: none; }
.tkx-ev2 .tkx-main { flex: none; display: block; border-radius: 7px 0 0 7px; }
.tkx-ev2 .tkx-main > img, .tkx-ev2 .tkx-main > .tkx-none { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Card stock: a lit top edge, a darker bottom edge (thickness) and fine grain over the print */
.tkx-ev2 .tkx-main::after, .tkx-ev2 .tkx-stub::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .45), inset 1px 0 0 rgba(255, 255, 255, .12);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.tkx-ev2 .tkx-stub { flex: none; padding: 0; display: block; border-radius: 0 7px 7px 0; }
/* The stub is printed from the same artwork: the poster, enlarged and softened, washed in its own colour */
.tkx-stub-art { position: absolute; inset: 0; overflow: hidden; }
.tkx-stub-art img, .tkx-stub-art .tkx-none { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; object-position: 85% 50%; filter: blur(5px) saturate(1.25) brightness(.7); }
.tkx-stub-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--leak) 55%, transparent), rgba(0, 0, 0, .55) 70%); mix-blend-mode: multiply; }
.tkx-stub-ink { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.tkx-ev2 .tkx-sv { color: #fff; font-size: clamp(11px, 1.5vw, 15px); }
.tkx-st { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 clamp(9px, 1.1vw, 12px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: color-mix(in srgb, var(--leak) 40%, #fff); max-height: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tkx-ev2 .tkx-sb { color: rgba(255, 255, 255, .75); }
.tkx-ev2 .tkx-sb b { color: color-mix(in srgb, var(--leak) 60%, #fff); }
.tkx-ev2 .tkx-perf { z-index: 4; background: radial-gradient(circle, rgba(255, 255, 255, .85) 1.1px, transparent 1.5px) 0 0 / 2px 7px repeat-y; mix-blend-mode: difference; }
@media (max-width: 699px) { .tkx-ev2 .tkx-st { display: none; } .tkx-ev2 .tkx-sb { display: block; } }

/* Finishes picked from the poster's own colour (SPT.mood). They play once over the print, then rest. */
.tkx-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; border-radius: inherit; }
.fx-on .tkx-fx { opacity: 1; }
.tkx[data-mood="chrome"] .tkx-fx, .tkx-fly2[data-mood="chrome"] .tkx-fx { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, rgba(190, 200, 214, .25) 52%, transparent 66%) -150% 0 / 250% 100% no-repeat; mix-blend-mode: screen; }
.tkx[data-mood="holo"] .tkx-fx { background: linear-gradient(120deg, rgba(255, 0, 170, .0), rgba(0, 220, 255, .35), rgba(140, 90, 255, .35), rgba(255, 230, 120, .25), rgba(0, 0, 0, 0)) -150% 0 / 250% 100% no-repeat; mix-blend-mode: color-dodge; }
.tkx[data-mood="acid"] .tkx-fx { background: repeating-linear-gradient(0deg, rgba(200, 255, 60, .0) 0 9px, rgba(200, 255, 60, .22) 9px 11px); mix-blend-mode: screen; }
.tkx[data-mood="heat"] .tkx-fx { background: radial-gradient(90% 70% at 20% 100%, rgba(255, 140, 40, .55), transparent 60%); mix-blend-mode: screen; }
.tkx[data-mood="ice"] .tkx-fx { background: linear-gradient(115deg, transparent 30%, rgba(190, 245, 255, .5) 46%, transparent 62%) -150% 0 / 250% 100% no-repeat; mix-blend-mode: screen; box-shadow: inset 0 0 0 1.5px rgba(160, 240, 255, .7), inset 0 0 30px rgba(140, 230, 255, .35); }
.tkx[data-mood="glass"] .tkx-fx { background: radial-gradient(80% 60% at 70% 20%, rgba(255, 90, 220, .45), transparent 60%); mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) {
  .fx-on[data-mood="chrome"] .tkx-fx, .fx-on[data-mood="holo"] .tkx-fx, .fx-on[data-mood="ice"] .tkx-fx { animation: fxSweep 1.1s cubic-bezier(.3, 0, .2, 1) both; }
  .fx-on[data-mood="acid"] .tkx-main > img { animation: fxGlitch .5s steps(5) 1 both; }
  .fx-on[data-mood="acid"] .tkx-fx { animation: fxScan .5s steps(5) 1 both; }
  .fx-on[data-mood="heat"] .tkx-fx, .fx-on[data-mood="glass"] .tkx-fx { animation: fxGlow 1.2s ease-in-out both; }
  .fx-held .tkx-fx { animation-delay: -1.1s !important; } /* the arriving page continues from the settled finish */
}
@keyframes fxSweep { from { background-position: -150% 0; } to { background-position: 150% 0; } }
@keyframes fxGlitch { 0% { transform: none; } 20% { transform: translateX(-6px); clip-path: inset(10% 0 60% 0); } 40% { transform: translateX(5px); clip-path: inset(50% 0 20% 0); } 60% { transform: translateX(-3px); clip-path: inset(30% 0 40% 0); } 80% { transform: translateX(2px); clip-path: none; } 100% { transform: none; clip-path: none; } }
@keyframes fxScan { 0% { opacity: 1; transform: translateY(-20px); } 100% { opacity: .35; transform: none; } }
@keyframes fxGlow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: .55; } }
.tkx-fly2 { overflow: hidden; }
.tkx-fly2 > img, .tkx-fly2 > .tkx-none { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Ticket tiers as admission passes: card stock, a perforated stub holding the price and quantity.
   Picking one pulls the pass slightly out of the stack and lights it in the event's colour. ---------- */
.types { display: grid; gap: 10px; }
.type { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info price" "info qty"; padding: 16px 18px; border: 0; border-radius: 10px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015) 70%), var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 24px -18px #000;
  -webkit-mask: radial-gradient(circle 8px at calc(100% - 136px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at calc(100% - 136px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 8px at calc(100% - 136px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at calc(100% - 136px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s; }
.type::after { content: ""; position: absolute; top: 12px; bottom: 12px; right: 136px; border-left: 2px dashed rgba(243, 241, 234, .14); pointer-events: none; }
.type::before { left: 0; top: 0; bottom: 0; width: 4px; border-radius: 10px 0 0 10px; background: var(--leak); }
.type.picked { padding-left: 18px; transform: translateX(6px);
  background: linear-gradient(100deg, color-mix(in srgb, var(--leak) 16%, transparent), rgba(255, 255, 255, .02) 75%), var(--bg-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leak) 65%, transparent), 0 22px 40px -26px color-mix(in srgb, var(--leak) 70%, #000); }
.type.picked .type-price { color: color-mix(in srgb, var(--leak) 60%, var(--ink)); }
.type .qty, .type .tag, .type-price { width: 112px; justify-self: end; text-align: right; }
.type .qty .step { justify-content: space-between; }
.type.picked .step { border-color: color-mix(in srgb, var(--leak) 70%, transparent); }
.type.off { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .type.picked { transform: none; } }
@media (max-width: 420px) {
  .type { -webkit-mask: none; mask: none; padding: 14px 14px; } .type::after { display: none; }
  .type .qty, .type .tag, .type-price { width: auto; }
}
/* Countdown: DAYS : HOURS : MINUTES : SECONDS */
.cd.big .cd-v { align-items: flex-start; }
.cd.big .cd-u + .cd-u { position: relative; margin-left: 12px; }
.cd.big .cd-u + .cd-u::before { content: ":"; position: absolute; left: -15px; top: 8px; font: 500 clamp(22px, 2.6vw, 30px)/1 var(--mono); color: color-mix(in srgb, var(--leak) 60%, var(--muted-2)); }
.tk > .edge, .tk::after { display: none; }

/* ---------- Campaign posters: the poster opens the Night Generator; its printed button is its own link ---------- */
.cp { position: relative; container-type: inline-size; }
.cp-over { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; z-index: 6; pointer-events: none; }
.cp-over .pz-cta { pointer-events: auto; text-decoration: none; }
.cp-over .pz-cta:hover { color: inherit; filter: brightness(1.08); }
.cp-over .pz-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Night Generator ---------- */
.page-night main { position: relative; }
.ng { position: relative; isolation: isolate; padding: 18px 0 90px; }
.ng-amb { position: absolute; inset: -80px 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 45% at 22% 30%, color-mix(in srgb, var(--c2) 30%, transparent), transparent 70%), radial-gradient(40% 40% at 85% 10%, color-mix(in srgb, var(--leak) 16%, transparent), transparent 70%); }
.ng-in { display: grid; gap: 28px; max-width: 1200px; }
.ng-in > .crumbs { margin: 0; }
@media (min-width: 960px) { .ng-in { grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1fr); gap: 20px 56px; align-items: start; } .ng-in > .crumbs { grid-column: 1 / -1; } .ng-left { position: sticky; top: 92px; } }

/* The novelty ticket: campaign artwork + a printed panel, perforation, and a right-hand stub */
.ng-ticket { position: relative; display: flex; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)) drop-shadow(0 0 60px color-mix(in srgb, var(--leak) 22%, transparent)); transition: transform .5s var(--ease-out); }
.ng-ticket.tick { animation: ngTick .45s var(--ease-out); }
@keyframes ngTick { 40% { transform: translateY(-4px) rotate(-.4deg); } }
.ng-main { flex: 1; min-width: 0; border-radius: 10px 0 0 10px; overflow: hidden; background: #0b0b0b;
  -webkit-mask: radial-gradient(circle 11px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.ng-art { position: relative; }
.ng-art .pz-sheet { border-radius: 0; box-shadow: none; transform: none; }
.ng-stamp { position: absolute; z-index: 7; right: 7%; top: 16%; transform: rotate(-9deg); padding: 8px 14px 7px; border: 3px solid var(--leak); border-radius: 8px; color: var(--leak);
  font: 800 clamp(14px, 1.6vw, 20px)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; background: rgba(5, 5, 5, .45); backdrop-filter: blur(3px); mix-blend-mode: normal; box-shadow: 0 0 24px color-mix(in srgb, var(--leak) 40%, transparent); }
.ng-stamp[hidden] { display: none; }
.ng-stamp.in { animation: ngStamp .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ngStamp { from { transform: rotate(-9deg) scale(1.9); opacity: 0; } }
.ng-stamp[data-role="missing"] { border-style: dashed; }
.ng-stamp[data-role="responsible"]::before { content: "✓ "; }
.ng-stamp[data-role="instigator"]::before { content: "⚡ "; }
.ng-stamp[data-role="last"] { border-width: 4px; border-style: double; }
.ng-stamp[data-role="photo"]::before { content: "◉ "; }
.ng-print { position: relative; padding: 20px 22px 22px; color: #121110;
  background: radial-gradient(120% 90% at 0% 0%, #fbf9f3, #ece8de 60%, #e2ddd1); border-top: 2px dashed rgba(0, 0, 0, .28); }
.ng-pk { margin: 0 0 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6b665c; }
.ng-pt { margin: 0 0 6px; font: 800 clamp(22px, 2.6vw, 32px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.ng-ps { margin: 0 0 14px; font: italic 400 19px/1.2 var(--serif); color: #4b473f; }
.ng-pf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ng-pf dt { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6b665c; margin-bottom: 6px; }
.ng-pf dd { margin: 0; font: 800 16px/1.1 var(--display); text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.ng-pf dd svg { width: 20px; height: 20px; fill: none; stroke: #121110; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ng-stub { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 0; border-radius: 0 10px 10px 0; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--leak) 70%, #000), color-mix(in srgb, var(--c3) 80%, #000)); border-left: 2px dashed rgba(255, 255, 255, .35);
  -webkit-mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.ng-sv, .ng-sb { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.ng-sb { font: 800 11px/1 var(--display); letter-spacing: .06em; } .ng-sb b { color: var(--c1); }
.ng-sd { font: 800 44px/1 var(--display); text-shadow: 0 0 18px rgba(0, 0, 0, .4); }
.pulse-inf .ng-sd, .ng-dv.inf { animation: ngInf .6s steps(6) 1; }
@keyframes ngInf { 0% { transform: translateX(0); text-shadow: 2px 0 var(--c1), -2px 0 var(--c2); } 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); text-shadow: -3px 0 var(--c1), 3px 0 var(--c2); } 100% { transform: none; text-shadow: none; } }

/* Right column: parody event details + the five controls */
.ng-flag { display: inline-block; margin: 0 0 14px; padding: 7px 10px; border-radius: 4px; background: #FFD43B; color: #0A0A0A; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ng-h { margin: 0; font: 800 clamp(40px, 5.4vw, 76px)/.9 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.ng-h em { font: italic 400 1.1em/.8 var(--serif); text-transform: none; letter-spacing: -.02em; color: var(--lime); }
.ng-sub { margin: 10px 0 22px; font: italic 400 clamp(20px, 2vw, 26px)/1.2 var(--serif); color: var(--muted-2); }
.ng-details { margin: 0 0 22px; padding: 18px 20px; border-radius: 12px; background: linear-gradient(110deg, color-mix(in srgb, var(--leak) 12%, var(--tint-2)), var(--tint-2) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leak) 30%, transparent); }
.ng-dk { margin: 0 0 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.ng-dt { margin: 0 0 14px; font: 800 clamp(22px, 2.4vw, 32px)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.ng-df { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0 0 14px; }
.ng-df .wide { grid-column: 1 / -1; }
.ng-df dt { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ng-df dd { margin: 0; font: 500 16px/1.35 var(--body); color: var(--ink); }
.ng-total { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.ng-total span { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.ng-total b { font: italic 400 clamp(28px, 3vw, 40px)/1 var(--serif); color: var(--lime); letter-spacing: -.01em; }
.ng-controls { display: grid; gap: 12px; }
.ng-q { margin: 0; padding: 14px 16px 16px; border: 0; border-radius: 12px; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); min-width: 0; transition: box-shadow .3s; }
.ng-q.need { box-shadow: inset 0 0 0 1.5px #FFD43B; }
.ng-q legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font: 600 15px/1.2 var(--body); display: flex; align-items: center; gap: 10px; }
.ng-n { font: 500 11px/1 var(--mono); color: var(--lime); letter-spacing: .1em; }
.ng-opts { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.ng-opt { position: relative; cursor: pointer; }
.ng-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ng-opt span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 99px; font: 500 14px/1.2 var(--body); color: var(--muted-2);
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--ease-out); }
.ng-opt:hover span { color: var(--ink); background: rgba(255, 255, 255, .07); }
.ng-opt input:checked + span { color: var(--on-lime); background: var(--lime); box-shadow: 0 10px 24px -14px var(--lime); transform: translateY(-1px); }
.ng-opt input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 3px; }
.ng-step { clear: both; display: inline-flex; align-items: center; gap: 6px; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2); }
.ng-sbtn { width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--ink); font: 400 24px/1 var(--body); cursor: pointer; transition: background .2s, transform .15s; }
.ng-sbtn:hover:not(:disabled) { background: var(--lime); color: var(--on-lime); } .ng-sbtn:active:not(:disabled) { transform: scale(.92); }
.ng-sbtn:disabled { opacity: .35; cursor: not-allowed; }
.ng-dv { min-width: 64px; text-align: center; font: 800 30px/1 var(--display); }
.ng-note { margin: 10px 0 0; font-size: 14px; color: #8EE6A8; }
.ng-actions { margin: 20px 0 0; }
.ng-actions .btn { width: 100%; }
.ng-missing { margin: 10px 0 0; color: #FFD43B; font-size: 14px; }
.ng-result { margin: 18px 0 0; padding: 22px; border-radius: 14px; background: linear-gradient(140deg, color-mix(in srgb, var(--leak) 18%, var(--tint-2)), var(--tint-2) 65%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leak) 40%, transparent), 0 30px 60px -40px var(--leak); }
.ng-result.in { animation: tkUp .5s var(--ease-out) both; }
.ng-rk { margin: 0 0 8px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.ng-rt { margin: 0 0 14px; font: 800 clamp(30px, 3.6vw, 48px)/.92 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.ng-rl { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--muted-2); font-size: 15.5px; line-height: 1.45; }
.ng-rl li { padding-left: 18px; position: relative; } .ng-rl li::before { content: "↳"; position: absolute; left: 0; color: var(--lime); }
.ng-ra { display: flex; flex-wrap: wrap; gap: 10px; }
.ng-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 959px) { .ng-in { gap: 22px; } .ng-left { max-width: 520px; width: 100%; margin: 0 auto; } }
@media (max-width: 480px) { .ng-stub { flex-basis: 56px; } .ng-sd { font-size: 34px; } .ng-pf dd { font-size: 14px; } .ng-ra .btn { flex: 1 1 100%; } }
/* Arriving from the poster: the page waits for the ticket, then the panel comes in */
html.tk-in .ng-art { visibility: hidden; }
html.tk-reveal .ng-right > *, html.tk-reveal .ng-print, html.tk-reveal .ng-stub { animation: tkUp .55s var(--ease-out) both; }
html.tk-reveal .ng-right > :nth-child(2) { animation-delay: .06s; } html.tk-reveal .ng-right > :nth-child(3) { animation-delay: .1s; }
html.tk-reveal .ng-right > :nth-child(4) { animation-delay: .16s; } html.tk-reveal .ng-right > :nth-child(n+5) { animation-delay: .22s; }
/* Campaign ticket face: the clicked poster itself, scaled to the ticket (its type uses container units) */
.tkx-poster { position: absolute; inset: 0; }
.tkx-poster > .cp { width: 100%; height: 100%; }
.tkx-poster .pz-sheet { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; transform: none; }
.tkx-fly2 .tkx-poster .cp-type, .tkx-fly2 .tkx-poster .pz-tag, .tkx-fly2 .tkx-poster .cp-no { transition: none; }
.ng-art > .cp, .tkx-poster > .cp { width: 100% !important; max-width: none !important; flex: none; }
.ng-art .pp-label, .tkx-poster .pp-label { display: none; }
/* The Night Generator is not a sales page: no payment logos or sales terms in its footer */
.page-night .foot-pay, .page-night .foot-base p:first-child { display: none; }
.ng-pf { grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .95fr); }
.ng-pf dd { font-size: 14px; line-height: 1.15; overflow-wrap: anywhere; }

/* ---------- Visual rhythm (BPM) selector: a quiet secondary control under the waveform ---------- */
.bpm { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); }
.bpm-b { height: 30px; padding: 0 11px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font: 600 10.5px/30px var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s; }
.bpm-b:hover { color: var(--ink); }
.bpm-b[aria-pressed="true"] { color: var(--on-lime); background: var(--lime); }
.bpm-b:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.bpm-v { padding: 0 10px 0 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--muted-2); white-space: nowrap; }
.bpm-v b { font: 800 15px/1 var(--display); color: var(--ink); letter-spacing: -.02em; margin-right: 3px; font-variant-numeric: tabular-nums; }
.bpm.hit .bpm-v b { animation: bpmHit .35s var(--ease-out); }
@keyframes bpmHit { 40% { color: var(--lime); transform: scale(1.15); } }
@media (max-width: 899px) { .wave-bottom .bpm { width: 100%; justify-content: space-between; } .bpm-b { height: 44px; flex: 1; } }
@media (prefers-reduced-motion: reduce) { .bpm { display: none; } }
/* Light pulses on the beat. Colour stays with the active poster; BPM only sets the tempo and depth. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .wall-amb, html:not(.motion-paused) .hero-glow.g1, html:not(.motion-paused) .ng-amb, html:not(.motion-paused) .pt-light { animation: beatGlow var(--beat, .5s) cubic-bezier(.2, .7, .3, 1) infinite; }
}
@keyframes beatGlow { 0% { opacity: 1; } 18% { opacity: calc(1 - var(--beat-amp, .12) * .2); } 100% { opacity: calc(1 - var(--beat-amp, .12)); } }

.ng-home { grid-column: 1 / -1; margin: 18px 0 0; text-align: center; }
.ng-home a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; font: 600 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); text-decoration: none; border-radius: 99px; transition: color .25s, background .25s; }
.ng-home a i { font-style: normal; color: var(--lime); display: inline-block; transition: transform .3s var(--ease-out); }
.ng-home a:hover, .ng-home a:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--lime) 10%, transparent); }
.ng-home a:hover i, .ng-home a:focus-visible i, .ng-home a:active i { transform: translateX(-5px); }
@media (prefers-reduced-motion: reduce) { .ng-home a i { transition: none; } .ng-home a:hover i { transform: none; } }

/* ---------- Nightclub portal (CSS 3D, no canvas) ---------- */
.portal { position: fixed; inset: 0; z-index: 400; overflow: hidden; perspective: 900px; perspective-origin: 50% 46%;
  background: radial-gradient(60% 55% at 50% 46%, color-mix(in srgb, var(--lime) 14%, #050505), #020202 70%); }
.portal.lite { background: #050505; }
.pt-scene { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
/* Doorways: chrome rings in depth, chamfered like an industrial entrance, lit by the active poster colour */
.pt-frame { position: absolute; left: 50%; top: 46%; width: min(56vw, 560px); aspect-ratio: 3 / 4; translate: -50% -50%; transform: translateZ(calc(var(--i) * -420px));
  padding: 14px; clip-path: polygon(0 9%, 9% 0, 91% 0, 100% 9%, 100% 100%, 0 100%);
  background: linear-gradient(160deg, #fafbfc, #8b9097 22%, #2a2c30 42%, #d9dce1 58%, #5d6168 76%, #f2f3f5);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--lime) 55%, transparent)); opacity: calc(1 - var(--i) * .13); }
.pt-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 60%, transparent), transparent 40%); mix-blend-mode: color; }
.pt-core { position: absolute; left: 50%; top: 46%; width: min(40vw, 400px); aspect-ratio: 3 / 4; translate: -50% -50%; transform: translateZ(-2700px) scale(3.2);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lime) 60%, #fff), color-mix(in srgb, var(--lime) 25%, transparent) 60%, transparent); }
.pt-floor { position: absolute; left: -50%; right: -50%; top: 70%; height: 3000px; transform-origin: top; transform: rotateX(88deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 22%, #0a0a0b), #050506 30%),
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 160px); }
.pt-light { position: absolute; left: 50%; top: -10%; width: 46vw; height: 120%; translate: -50% 0; transform: translateZ(-900px);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lime) 18%, transparent) 40%, transparent 80%); filter: blur(30px); }
.pt-skip { position: absolute; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 2; display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 99px; background: rgba(5, 5, 5, .6); color: var(--muted-2); font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.pt-skip kbd { font: 500 10px/1 var(--mono); padding: 3px 5px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }
.pt-skip:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.portal.lite .pt-scene { display: none; }
.disco-all[data-portal] i { color: var(--lime); }
#wall-h:focus { outline: none; }
#wall-h:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }

/* ---------- Afterparty fortune: the novelty card flips like a metal plate ---------- */
.ng-flip { perspective: 1600px; }
.ng-card { position: relative; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.2, .75, .15, 1); }
.ng-flip.tilt .ng-card { transform: rotateY(-16deg) rotateX(7deg) translateZ(30px); transition-duration: .26s; }
.ng-flip.flipped .ng-card { transform: rotateY(180deg); }
.ng-card > .ng-ticket { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ng-back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden;
  background: linear-gradient(150deg, #2a2c30, #0b0b0c 45%, #1b1d21); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 0 3px color-mix(in srgb, var(--leak) 45%, transparent), 0 40px 70px -30px #000, 0 0 70px -20px var(--leak); }
.ng-bk-art { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(14px) saturate(1.2) brightness(.45); }
.ng-back::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 60%) -150% 0 / 250% 100% no-repeat; mix-blend-mode: screen; }
.ng-flip.flipped .ng-back.in::after { animation: fxSweep 1.4s .55s cubic-bezier(.3, 0, .2, 1) both; }
.ng-bk-in { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 12% 10%; }
.ng-bk-k { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--leak); }
.ng-fortune { margin: 0; font: italic 400 clamp(30px, 3.4vw, 48px)/1.05 var(--serif); letter-spacing: -.01em; color: #f3f1ea;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .65)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .25)); }
/* embossed metal, word by word (each word carries its own fill so it can animate in) */
.ng-fortune span { display: inline-block; color: transparent; padding-right: .04em;
  background: linear-gradient(180deg, #fff 10%, color-mix(in srgb, var(--c1) 70%, #ddd) 48%, #8a8f97 56%, #fff 92%); -webkit-background-clip: text; background-clip: text; }
.ng-flip.flipped .ng-back.in .ng-fortune span { animation: fortuneIn .6s calc(.5s + var(--w) * 45ms) var(--ease-out) both; }
@keyframes fortuneIn { from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(4px); } }
.ng-bk-wave { display: flex; align-items: center; gap: 4px; height: 44px; }
.ng-bk-wave i { flex: 1; height: 18%; border-radius: 2px; background: var(--leak); opacity: .75; }
.ng-flip.flipped .ng-back.in .ng-bk-wave i { animation: bkWave .9s calc(.55s + var(--d) * 22ms) cubic-bezier(.3, 0, .2, 1) both; }
@keyframes bkWave { 35% { height: 90%; } 100% { height: 18%; } }
.ng-bk-f { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 241, 234, .65); }
.ng-bk-f b { color: var(--leak); }
.ng-fx { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.ng-reveal { width: 100%; min-height: 54px; border: 0; border-radius: 10px; cursor: pointer; color: #0a0a0a; font: 700 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(120deg, #f6f7f9, color-mix(in srgb, var(--c1) 60%, #c9ccd1) 40%, #8f949b 55%, #eef0f2); box-shadow: 0 14px 30px -18px var(--leak), inset 0 1px 0 #fff; }
.ng-reveal:hover { filter: brightness(1.06); }
.ng-reveal:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ng-reveal[hidden], .ng-fa[hidden] { display: none; }
.ng-fa { display: flex; flex-wrap: wrap; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .ng-card { transition: none; } }
.page-night .ng-right > .bpm { margin: -8px 0 18px; }

/* ---------- Organiser poster preview ---------- */
.pv { padding: 18px 0 80px; position: relative; isolation: isolate; }
.pv::before { content: ""; position: absolute; inset: -80px 0 auto; height: 900px; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 50% at 75% 25%, color-mix(in srgb, var(--glow-a) 30%, transparent), transparent 70%), radial-gradient(40% 45% at 10% 60%, color-mix(in srgb, var(--glow-b) 22%, transparent), transparent 70%); }
.pv-in { display: grid; gap: 26px; }
@media (min-width: 1000px) { .pv-in { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px 56px; align-items: start; } .pv-head { grid-column: 1 / -1; } .pv-tools { position: sticky; top: 92px; } }
.pv-h { margin: 0 0 10px; font: 800 clamp(34px, 4.6vw, 66px)/.92 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.pv-h em { font: italic 400 1.08em/.85 var(--serif); text-transform: none; color: var(--lime); letter-spacing: -.02em; }
.pv-sub { margin: 0; max-width: 60ch; color: var(--muted-2); font-size: 17px; }
.pv-tools { display: grid; gap: 14px; }
.pv-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 18px; text-align: center; cursor: pointer; border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--lime) 50%, var(--line-2)); background: color-mix(in srgb, var(--lime) 5%, var(--tint-2)); transition: background .25s, border-color .25s; }
.pv-drop:hover, .pv-drop.over, .pv-drop:focus-within { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 12%, var(--tint-2)); }
.pv-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pv-drop-i { font-size: 26px; color: var(--lime); }
.pv-drop-t b { color: var(--ink); } .pv-drop-t { color: var(--muted-2); } .pv-drop-s { font: 500 11px/1.4 var(--mono); color: var(--muted); letter-spacing: .06em; }
.pv-err { margin: 0; color: #FFB4A8; font-size: 14px; }
.pv-k { margin: 0 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.pv-pos { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.pv-pos[hidden] { display: none; }
.pv-pos label { display: grid; grid-template-columns: 90px 1fr; align-items: center; font-size: 13px; color: var(--muted-2); }
.pv-pos input { accent-color: var(--lime); }
.pv-fields { display: grid; gap: 10px; }
.pv-fields label { display: grid; gap: 6px; font: 600 13px/1 var(--body); }
.pv-fields label span { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pv-note { margin: 0; font-size: 13px; color: var(--muted); }
.pv-note b { color: #FFD43B; font-weight: 600; }
.pv-play, .pv-go { width: 100%; }
.pv-play:disabled { opacity: .45; cursor: not-allowed; }
.pv-stage { min-width: 0; }
.pv-row { list-style: none; margin: 0 0 40px; padding: 30px 6px 26px; display: flex; gap: clamp(14px, 2vw, 28px); justify-content: center; align-items: flex-start; overflow-x: auto; scrollbar-width: none; }
.pv-row::-webkit-scrollbar { display: none; }
.pv-row > li { flex: none; width: clamp(180px, 18vw, 250px); }
.pv-row > .promo { opacity: .55; transform: scale(.94); }
.pv-card { position: relative; transition: transform .45s var(--ease-out); z-index: 2; }
.pv-card .pc-link { cursor: default; }
.pv-card .poster { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--leak) 70%, #000); }
.pv-card .pc-link::before { opacity: calc(.55 + .45 * var(--k, 0)); }
.pv-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-empty { position: absolute; inset: 0; display: grid; place-items: center; border: 1.5px dashed var(--line-2); border-radius: inherit; color: var(--muted); font: 500 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 12px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 10px, transparent 10px 20px), #0d0d0d; }
.pv-empty[hidden] { display: none; }
.pv-empty.tall { position: relative; aspect-ratio: 4 / 5; }
.pv-page { position: relative; padding: 22px; border-radius: 16px; background: color-mix(in srgb, var(--tint) 60%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); }
.pv-flag { margin-bottom: 18px; }
.pv-tk { gap: 28px; }
@media (min-width: 760px) { .pv-tk { grid-template-columns: minmax(200px, .8fr) minmax(0, 1fr) !important; } .pv-tk .tk-stub { position: static; } }
.pv-cd-v { font: 500 15px/1.4 var(--body) !important; color: var(--muted-2); }
.pv-type .type-price { color: var(--muted); }
.claim-login { margin: 14px 0 0; font-size: 14px; }
.claim-login a { color: var(--muted-2); }

/* Find my tickets: secondary "email me a link" as an inline text button */
.recover-or { margin-top: 14px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--lime); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--ink); }
.linkish:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 2px; }
.order-list .past a { opacity: .6; }