:root {
  --bg: #0a0a0a;
  --fg: #f2efe9;
  --dim: #8d8a85;
  --line: #262524;
  --accent: #ff3b1f;
  --pad: clamp(16px, 4vw, 56px);
  --display: "Syne", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* film grain over everything */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.nav {
  position: fixed; inset: 12px var(--pad) auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 22px; border-radius: 99px;
  background: rgba(22, 22, 22, .42); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 40px rgba(0, 0, 0, .35);
}
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }
#snd { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; font-size: 15px; }
#snd[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.nav .logo img { height: 16px; filter: brightness(0) invert(1); }
.nav ul { display: flex; gap: clamp(14px, 2.5vw, 36px); list-style: none; padding: 0; align-items: center; }
.nav a { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.nav a:hover { opacity: .6; }
.pill {
  display: inline-block; border: 1px solid currentColor; border-radius: 99px;
  padding: 9px 18px; transition: background .25s, color .25s;
}
.pill:hover { background: #fff; color: #000; opacity: 1 !important; }
@media (max-width: 640px) { .nav .hide-s { display: none; } }

.hero {
  position: relative; height: 100svh; min-height: 520px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--pad); overflow: hidden;
}
.hero .bg {
  position: absolute; inset: 0; z-index: -1;
  background: #000;
  clip-path: inset(calc(max(0, var(--p, .5) - .5) * 14%) round calc(max(0, var(--p, .5) - .5) * 90px));
  transform: scale(calc(1 + (var(--p, .5) - .5) * .5));
  filter: brightness(calc(1.5 - var(--p, .5)));
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--bg) 2%, transparent 55%);
}
.hero h1 img { width: min(100%, 1100px); filter: brightness(0) invert(1); }
.hero h1.text {
  font: 800 clamp(40px, 9.4vw, 150px)/.9 var(--display);
  text-transform: uppercase; letter-spacing: -.03em;
}
.hero .meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.25);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.rise { animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both; }
.rise.d1 { animation-delay: .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }

section { padding: clamp(64px, 10vw, 140px) var(--pad); }
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(28px, 4vw, 56px); }
h2 { font: 800 clamp(40px, 8vw, 120px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
.head a, .more { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--accent); padding-bottom: 3px; white-space: nowrap; }
.head a:hover, .more:hover { color: var(--accent); }

.mixes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.mix {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  padding: 22px; border-radius: 20px;
  background: #0c0c0c;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
/* hologram: a slow-turning rainbow behind, scanlines and a pointer-following sheen in front */
.mix::before {
  content: ""; position: absolute; inset: -40%; z-index: -1;
  background: conic-gradient(from 0deg, #ff3b1f, #7a5cff, #19e3ff, #7dffb0, #ffd36b, #ff3b1f);
  filter: blur(60px); opacity: .1; mix-blend-mode: screen; animation: holo 14s linear infinite;
}
.mix.playing::before { opacity: .4; animation-duration: 5s; }
.mix::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at calc(50% + var(--tx, 0) * 100%) calc(50% + var(--ty, 0) * 100%), rgba(255,255,255,.22), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
@keyframes holo { to { transform: rotate(1turn); } }
/* cover photo: black and white at rest, colour-split jitter on hover, full colour while the mix plays */
.cover { position: relative; margin: -22px -22px 0; aspect-ratio: 4 / 3; overflow: hidden; --pos: 50%; background: #000; filter: grayscale(1) contrast(1.1); transition: filter .6s; }
.mix:hover .cover { animation: jitter .5s steps(1) infinite; }
.mix.playing .cover { filter: none; }
@keyframes jitter { 0% { --g: .5; } 20% { --g: -.3; transform: translateX(3px); } 40% { --g: .8; } 60% { --g: .15; transform: translateX(-4px) skewX(1deg); } 80% { --g: -.6; } }
.mix-meta { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.mix h3 {
  font: 800 clamp(30px, 3.4vw, 54px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.02em;
  background: linear-gradient(100deg, #fff 10%, #9fe8ff 35%, #ffb3f0 55%, #fff6a8 75%, #fff 90%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 7s linear infinite;
}
.mix:hover h3 { text-shadow: -2px 0 rgba(255,0,60,.55), 2px 0 rgba(0,255,255,.55); }
@keyframes sheen { to { background-position: 250% 0; } }
.mix p { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.72); }
.wave { display: flex; align-items: center; gap: 2px; height: 76px; cursor: pointer; }
.wave i { flex: 1; min-width: 1px; height: calc(var(--h) * 100%); border-radius: 2px; background: rgba(255,255,255,.3); transition: height .6s, background .2s; }
.wave i.on { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.8); }
.playing .wave i { animation: bob .8s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -53ms); }
@keyframes bob { from { transform: scaleY(.6); } to { transform: scaleY(1.12); } }
.mix-ctl, .np { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.play { width: 54px; height: 54px; flex: none; border-radius: 50%; border: 1px solid #fff; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 15px; transition: background .2s, color .2s, transform .2s; }
.play::before { content: "▶"; margin-left: 3px; }
.playing .play::before { content: "❚❚"; margin: 0; font-size: 12px; }
.play:hover { background: #fff; color: #000; transform: scale(1.08); }
.np {
  position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 55; max-width: calc(100vw - 32px);
  padding: 8px 22px 8px 8px; border-radius: 99px;
  background: rgba(22,22,22,.55); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
}
.np[hidden] { display: none; }
.np .play { width: 40px; height: 40px; }
.np-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-hidden { position: fixed; left: -20px; bottom: 0; width: 10px; height: 10px; opacity: 0; pointer-events: none; }

dialog { margin: auto; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; background: rgba(20,20,20,.9); color: var(--fg); width: min(92vw, 380px); }
dialog::backdrop { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
dialog form { position: relative; display: grid; gap: 14px; padding: 30px; }
dialog input { font: inherit; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: #000; color: #fff; }
dialog .pill { background: #fff; color: #000; cursor: pointer; font: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 13px; }
dialog .err { color: var(--accent); font-size: 13px; min-height: 1.4em; }
dialog .x { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; }
.toast { position: fixed; left: 50%; top: 84px; translate: -50% 0; z-index: 70; padding: 12px 20px; border-radius: 99px; background: #fff; color: #000; font-size: 13px; animation: rise .4s both; }
.cursor { position: fixed; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 200; transition: scale .2s; }
.cursor.big { scale: 3.4; }

.yt { position: relative; aspect-ratio: 16/9; width: 100%; background: #151515 center / cover; cursor: pointer; padding: 0; color: #fff; overflow: hidden; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.yt .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.35); transition: background .3s;
  font: 700 clamp(14px, 2vw, 20px) var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.yt:hover .play { background: rgba(0,0,0,.1); }
.yt .play span { border: 1px solid #fff; border-radius: 99px; padding: 18px 34px; backdrop-filter: blur(6px); }
.yt-title { margin-top: 12px; color: var(--dim); font-size: 14px; }

.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 6vw, 96px); align-items: center; }
.about img { width: 100%; }
.about .lead { font: 700 clamp(22px, 3vw, 40px)/1.15 var(--display); margin-bottom: 24px; }
.about p + p { margin-top: 16px; }
.about p { color: #cfcbc4; max-width: 60ch; }
.about .lead { color: var(--fg); }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }

.video { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 var(--pad); }
.tile { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #151515; }
.tile > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s, transform 5s ease-out; }
.tile > .on { opacity: 1; transform: none; }
@media (max-width: 640px) { .tiles { gap: 6px; } }

footer { padding: clamp(64px, 10vw, 140px) var(--pad) 28px; border-top: 1px solid var(--line); }
footer .mail { display: block; font: 800 clamp(14px, 5.2vw, 96px)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; transition: color .25s; white-space: nowrap; }
footer .mail:hover { color: var(--accent); }
footer .row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; margin-top: 48px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
footer .row a:hover { color: var(--fg); }
footer .links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }

/* bookings page */
.intro-sub { margin-top: 22px; color: var(--dim); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.intro { max-width: 1100px; font: 700 clamp(20px, 2.6vw, 34px)/1.2 var(--display); }
.years { padding-top: 0; }
.year { border-top: 1px solid var(--line); }
.year:last-child { border-bottom: 1px solid var(--line); }
.year summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none; padding: 18px 0;
  font: 800 clamp(56px, 13vw, 200px)/.85 var(--display); letter-spacing: -.04em;
  transition: color .25s;
}
.year summary::-webkit-details-marker { display: none; }
.year summary:hover, .year[open] summary { color: var(--accent); }
.year ul { list-style: none; padding: 0 0 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.year[open] li { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.year li img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 12px; }
.year li b { display: block; font: 700 clamp(22px, 2.4vw, 32px)/1.1 var(--display); text-transform: uppercase; }
.year li span { color: var(--dim); font-size: 14px; }
.az { columns: 4 190px; column-gap: 28px; }
.az div { break-inside: avoid; margin-bottom: 26px; }
.az b { display: block; font: 800 34px/1 var(--display); color: var(--accent); margin-bottom: 8px; }
.az span { display: block; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 15px; transition: color .2s, text-shadow .2s, padding .2s; }
.az span:hover { padding-left: 8px; text-shadow: -2px 0 rgba(255,0,60,.8), 2px 0 rgba(0,255,255,.8); }
/* each name rides its own row; scrolling slides odd and even rows in opposite directions */
.roster { font: 800 clamp(26px, 5.8vw, 96px)/1.04 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
.roster .row { white-space: nowrap; transform: translateX(calc((var(--p, .5) - .5) * var(--d) * 46vw)); will-change: transform; }
.roster .row:nth-child(even) { text-align: right; }
.roster span { display: inline-block; transition: color .25s, text-shadow .25s, letter-spacing .4s; }
.roster .row:nth-child(even) span { color: transparent; -webkit-text-stroke: 1px var(--fg); }
.roster span:hover { color: var(--fg); -webkit-text-stroke: 0; letter-spacing: .02em; text-shadow: -4px 0 rgba(255,0,60,.8), 4px 0 rgba(0,255,255,.8); }

/* scroll-linked: main.js writes --p (0 entering the viewport, 1 gone past the top) on [data-scroll] */
.hero[data-scroll] h1, .hero[data-scroll] .meta { translate: 0 calc((var(--p, .5) - .5) * -260px); }
.slide { transform: translateX(calc(max(0, .3 - var(--p, 1)) * 90vw)); }
.unmask { clip-path: inset(0 calc(max(0, .28 - var(--p, 1)) * 357%) 0 0); overflow: hidden; }
.unmask > * { transform: scale(calc(1 + max(0, .5 - var(--p, 1)) * .4)); }
.words span { opacity: clamp(.18, calc((var(--p, 1) - .12 - var(--i) * .22) * 14), 1); }

.hero.plain { height: auto; min-height: 0; padding-top: clamp(130px, 22vh, 240px); }
.hero.plain::before { display: none; }
/* glitch: red and cyan copies of the photo add back up to the original, --g (0..1) pulls them apart */
.bg i, .cover i { position: absolute; inset: 0; background: var(--img) center var(--pos, 22%) / cover no-repeat; }
.bg i:nth-child(1), .cover i:nth-child(1) { background-color: #f00; background-blend-mode: multiply; transform: translateX(calc(var(--g, 0) * -18px)); }
.bg i:nth-child(2), .cover i:nth-child(2) { background-color: #0ff; background-blend-mode: multiply; mix-blend-mode: screen; transform: translateX(calc(var(--g, 0) * 18px)); }
.bg i:nth-child(3) { opacity: 0; }
/* dusk grade from the Vyrii stage video: blue-violet sky, amber glow from below. "color" keeps the photo's light and swaps its hue */
.hero .bg::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: color;
  background:
    radial-gradient(70% 60% at 50% 88%, #ff9a2e 0%, rgba(255,154,46,.75) 30%, transparent 72%),
    linear-gradient(180deg, #16254f 0%, #2a3ea8 45%, #6a45d6 100%);
}
.hero .bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(6,10,38,.82) 0%, rgba(10,14,50,.45) 55%, rgba(30,10,0,.1) 100%);
}
.zap .bg i:nth-child(3) { animation: zap .42s steps(1) both; }
@keyframes zap {
  0% { opacity: 1; clip-path: inset(18% 0 70% 0); transform: translateX(-5%); }
  25% { opacity: 1; clip-path: inset(56% 0 30% 0); transform: translateX(6%); filter: invert(1); }
  50% { opacity: 1; clip-path: inset(74% 0 10% 0); transform: translateX(-3%) scaleY(1.4); }
  75% { opacity: 1; clip-path: inset(34% 0 54% 0); transform: translateX(4%); filter: hue-rotate(120deg) saturate(4); }
  100% { opacity: 0; }
}
.hero[data-scroll] h1 img { filter: brightness(0) invert(1) drop-shadow(calc(var(--g, 0) * -9px) 0 #f00) drop-shadow(calc(var(--g, 0) * 9px) 0 #0ff); }
.zap h1 { animation: jolt .42s steps(1) both; }
@keyframes jolt { 0% { transform: translateX(-10px) skewX(-8deg); } 25% { transform: translateX(8px); } 50% { transform: translateX(-4px) skewX(5deg); } 75%, 100% { transform: none; } }

.tilt { transform: perspective(900px) rotateX(calc(var(--ty, 0) * -9deg)) rotateY(calc(var(--tx, 0) * 9deg)) scale(calc(1 + var(--th, 0) * .03)); transition: transform .25s ease-out; }

.reveal { opacity: 0; transform: translateY(36px) scale(.97); filter: blur(14px); transition: opacity .9s, filter .9s, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .hero .bg { clip-path: none; }
  .slide, .unmask > *, .hero .bg, .roster .row { transform: none; }
  .unmask { clip-path: none; }
  .words span { opacity: 1; }
  .hero[data-scroll] h1, .hero[data-scroll] .meta { translate: none; }
  html { scroll-behavior: auto; }
}