@font-face {
  font-family: "Neue Haas";
  src: url("assets/fonts/nhg-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Alte Haas";
  src: url("assets/fonts/alte-haas-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Alte Haas";
  src: url("assets/fonts/alte-haas-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --grey: #9b9898;
  --ink: #161515;
  --cream: #ded8c8;
  /* Brand orange and yellow, sampled from the festival flyers. */
  --signal: #d34f3a;
  --acid: #debd0b;
  --pad: clamp(18px, 3.2vw, 52px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--grey);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--grey);
  color: var(--ink);
  font-family: "Neue Haas", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: .012em;
}

body.intro-active,
body.menu-open { overflow: hidden; }

button,
input,
select,
a {
  color: inherit;
  font: inherit;
}

a { text-decoration: none; }
button { border: 0; }
img { display: block; max-width: 100%; }

::selection {
  background: var(--acid);
  color: var(--ink);
}

.blend-text {
  color: #fff;
  mix-blend-mode: difference;
}

/* Drawn ↗ arrow: the brand fonts have no arrow glyph, and iOS swaps the borrowed
   character for an emoji. Sized in em and stroked in currentColor so it follows
   each button's text size and colour (it sits in a .blend-text span like text). */
.arrow-icon {
  display: inline-block;
  width: .85em;
  height: .85em;
  vertical-align: -.08em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: square;
}

.skip-link {
  position: fixed;
  z-index: 500;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  background: var(--acid);
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

/* Headliner intro */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  background: #111;
  color: #fff;
  font-family: "Alte Haas", "Neue Haas", sans-serif;
  font-weight: 700;
  transition: opacity .7s var(--ease), visibility .7s;
}

.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .3;
  background-image: radial-gradient(rgba(255, 255, 255, .65) .6px, transparent .7px);
  background-size: 6px 6px;
  mix-blend-mode: overlay;
}

.intro.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-strip {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .45);
  transform: translateY(-110%);
  animation: introStripIn 1.15s var(--ease) calc(var(--intro-order) * .55s) forwards;
}

.intro-strip:nth-child(even) { transform: translateY(110%); }

.intro-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.16) brightness(.68);
  transform: scale(1.18);
  animation: introImage 4s var(--ease) calc(var(--intro-order) * .55s) forwards;
}

.intro-strip--francis img { object-position: 50% 50%; }
.intro-strip--mahmut img { object-position: 50% 50%; }
/* Every artist photo is cropped so heads sit at the same height and size; centre them. */
.intro-strip--maison img { object-position: 50% 50%; }
.intro-strip--marten img { object-position: 50% 50%; }

.intro-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .84));
}

.intro-strip p {
  position: absolute;
  z-index: 2;
  left: clamp(12px, 2vw, 28px);
  bottom: clamp(22px, 5vh, 70px);
  margin: 0;
  font-size: clamp(25px, 3vw, 62px);
  line-height: .94;
  letter-spacing: -.025em;
  font-weight: 700;
  text-transform: lowercase;
  opacity: 0;
  transform: translateY(20px);
  animation: introName .8s var(--ease) calc(1s + var(--intro-order) * .55s) forwards;
}

.intro-title {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  animation: introTitle 1.5s var(--ease) 3.35s forwards;
}

/* Same width the typeset "ZURI" had (2.144x its font size). */
.intro-title__logo {
  display: block;
  width: calc(clamp(100px, 24vw, 430px) * 2.144);
  height: auto;
  margin: 0 auto;
}

.intro-title small {
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: .16em;
}

/* Transmission warp: main.js slices the title into stacked bands that tear
   apart like a dropping signal, then collapse into a single scan line. */
.intro-title__band {
  grid-area: 1 / 1;
  display: grid;
  animation: introWarp .6s linear 4.25s forwards;
}

.intro-title__band .blend-text {
  animation: introWarpSplit .6s linear 4.25s forwards;
}

/* The logo is an image, so its red/yellow channel split uses drop-shadows instead of text-shadows. */
.intro-title__band .intro-title__logo {
  animation: introWarpSplitLogo .6s linear 4.25s forwards;
}

.intro-skip {
  position: absolute;
  z-index: 8;
  right: 20px;
  bottom: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 0;
  background: #111;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

@keyframes introStripIn { to { transform: translateY(0); } }
@keyframes introImage { to { transform: scale(1); filter: grayscale(.2) contrast(1.08) brightness(.86); } }
@keyframes introName { to { opacity: 1; transform: translateY(0); } }
@keyframes introTitle {
  0% { opacity: 0; transform: scale(.9); }
  35%, 75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* Once the warp bands exist they own the exit, so the title itself just holds. */
.intro-title.is-warping { animation-name: introTitleHold; }

@keyframes introTitleHold {
  0% { opacity: 0; transform: scale(.9); }
  35%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes introWarp {
  0% { opacity: 1; transform: translateX(0) skewX(0deg) scale(1, 1); }
  12% { transform: translateX(calc(var(--warp-shift) * .5vw)) skewX(0deg) scale(1, 1); }
  20% { transform: translateX(0) skewX(0deg) scale(1, 1); }
  32% { transform: translateX(calc(var(--warp-shift) * -2.2vw)) skewX(calc(var(--warp-shift) * 6deg)) scale(1, 1); }
  42% { transform: translateX(calc(var(--warp-shift) * 1vw)) skewX(0deg) scale(1, 1); }
  56% { transform: translateX(calc(var(--warp-shift) * 4.5vw)) skewX(calc(var(--warp-shift) * -12deg)) scale(1.08, 1); }
  70% { opacity: 1; transform: translateX(calc(var(--warp-shift) * -6vw)) skewX(calc(var(--warp-shift) * 8deg)) scale(1.25, .6); }
  84% { opacity: .9; transform: translateX(calc(var(--warp-shift) * 2vw)) skewX(0deg) scale(1.6, .08); }
  100% { opacity: 0; transform: translateX(0) skewX(0deg) scale(2.2, 0); }
}

@keyframes introWarpSplit {
  0%, 20% { text-shadow: 0 0 transparent, 0 0 transparent; }
  32% { text-shadow: calc(var(--warp-shift) * -.04em) 0 rgba(211, 79, 58, .9), calc(var(--warp-shift) * .04em) 0 rgba(222, 189, 11, .8); }
  56%, 70% { text-shadow: calc(var(--warp-shift) * .09em) 0 rgba(211, 79, 58, .9), calc(var(--warp-shift) * -.09em) 0 rgba(222, 189, 11, .8); }
  100% { text-shadow: 0 0 transparent, 0 0 transparent; }
}

@keyframes introWarpSplitLogo {
  0%, 20% { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); }
  32% { filter: drop-shadow(calc(var(--warp-shift) * -1vw) 0 0 rgba(211, 79, 58, .9)) drop-shadow(calc(var(--warp-shift) * 1vw) 0 0 rgba(222, 189, 11, .8)); }
  56%, 70% { filter: drop-shadow(calc(var(--warp-shift) * 2.2vw) 0 0 rgba(211, 79, 58, .9)) drop-shadow(calc(var(--warp-shift) * -2.2vw) 0 0 rgba(222, 189, 11, .8)); }
  100% { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); }
}

/* Background and site entrance */
.site {
  position: relative;
  min-height: 100vh;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease, transform .75s var(--ease);
}

body.site-ready .site { opacity: 1; transform: none; }
body.intro-skipped .site { transition-duration: .45s; }

.lava-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--grey);
  pointer-events: none;
}

.lava {
  position: absolute;
  display: block;
  width: 58vmax;
  aspect-ratio: 1;
  border-radius: 43% 57% 62% 38% / 47% 33% 67% 53%;
  /* Version 3: original soft blur, stronger orb colour. */
  filter: blur(58px);
  opacity: .9;
  mix-blend-mode: normal;
  will-change: transform, border-radius;
}

.lava--one {
  left: -22vmax;
  top: 12vh;
  background: var(--signal);
  animation: lavaOne 15s ease-in-out infinite alternate;
}

.lava--two {
  right: -24vmax;
  top: -14vh;
  background: var(--acid);
  animation: lavaTwo 18s ease-in-out infinite alternate;
}

.lava--three { display: none; }

@keyframes lavaOne {
  to { transform: translate(34vw, 30vh) rotate(78deg) scale(.72); border-radius: 64% 36% 31% 69% / 57% 68% 32% 43%; }
}

@keyframes lavaTwo {
  to { transform: translate(-30vw, 62vh) rotate(-62deg) scale(.84); border-radius: 33% 67% 56% 44% / 66% 38% 62% 34%; }
}

.site-header,
main,
footer {
  position: relative;
  z-index: 2;
}

/* Header */
.site-header,
.site-header.is-scrolled {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 16px var(--pad);
  background: transparent;
  pointer-events: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: auto;
}

.ticket-menu { position: relative; }

.ticket-menu summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--cream);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.ticket-menu summary::-webkit-details-marker { display: none; }
.ticket-menu summary span { color: var(--acid); }

.ticket-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: var(--ink);
  color: var(--cream);
}

.ticket-menu__panel a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font-size: 14px;
}

.ticket-menu__panel a:last-child { border-bottom: 0; }
.ticket-menu__panel a:hover { background: var(--acid); }

.ticket-menu__panel small {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .62;
}

.menu-toggle {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--acid);
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: width .25s ease;
}

.menu-toggle span:first-child { top: 19px; }
.menu-toggle span:last-child { top: 26px; width: 14px; }
.menu-toggle:hover span:last-child { width: 20px; }

.menu-panel {
  position: fixed;
  z-index: 210;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--pad);
  overflow-y: auto;
  background: var(--ink);
  color: var(--cream);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease), visibility .7s;
}

.menu-panel.is-open { clip-path: inset(0); visibility: visible; }

.menu-close {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: transparent;
  color: var(--cream);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-close span { color: var(--acid); font-size: 30px; line-height: 1; }

.menu-panel nav {
  display: grid;
  margin-block: 30px;
}

.menu-panel nav a {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(222, 216, 200, .18);
  font-size: clamp(42px, 8vh, 88px);
  line-height: .92;
  letter-spacing: 0;
}

.menu-panel nav a:hover { color: var(--acid); }

.menu-panel nav small {
  min-width: 24px;
  font-size: 11px;
  letter-spacing: .08em;
}

.menu-panel > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: radial-gradient(rgba(22, 21, 21, .55) .7px, transparent .9px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 76%, transparent);
  pointer-events: none;
}

.hero__center {
  position: relative;
  z-index: 3;
  width: min(1420px, 94vw);
  text-align: center;
}

.hero h1 {
  --hero-word: clamp(165px, 29vw, 520px);
  position: relative;
  display: inline-block;
  margin: 0;
  font-weight: 500;
}

/* "zuri festival" lockup artwork, sized to the footprint the typeset wordmark had. */
.hero__logo {
  display: block;
  width: calc(var(--hero-word) * 1.58);
  height: auto;
}

.hero__statement {
  margin: 0;
  font-size: clamp(18px, 2.15vw, 32px);
  letter-spacing: 0;
  word-spacing: .06em;
}

.hero__dates {
  width: min(940px, 86vw);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 70px);
  margin: clamp(54px, 8vh, 88px) auto 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero__dates > span:first-child { text-align: right; }
.hero__dates > span:last-child { text-align: left; }

.hero__scroll {
  position: absolute;
  z-index: 4;
  bottom: 24px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.hero__scroll i {
  width: 1px;
  height: 38px;
  background: var(--ink);
  animation: pulseLine 1.8s ease-in-out infinite;
}

@keyframes pulseLine { 50% { transform: scaleY(.35); transform-origin: bottom; } }

/* Shared section system */
.section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 92px var(--pad) 42px;
  overflow: hidden;
}

.section-head {
  display: block;
  margin-bottom: clamp(28px, 4vh, 48px);
}

.section-head .section-index { margin-bottom: 14px; }

.section-index {
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-head h2,
.memory h2,
footer h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(52px, 6.5vw, 116px);
  line-height: .94;
  letter-spacing: 0;
  word-spacing: .06em;
}

.section-note {
  margin: 0;
  max-width: 220px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: .018em;
}

.locations .section-head h2 {
  white-space: nowrap;
  font-size: clamp(44px, 6vw, 108px);
}

/* Cities */
.location-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 2.5vw, 40px);
  perspective: 1600px;
}

.location-card {
  position: relative;
  flex: 0 1 min(34vw, calc(80svh - 232px), 500px);
  width: min(34vw, calc(80svh - 232px), 500px);
  min-width: 0;
  background: transparent;
  outline-offset: 5px;
}

.location-card__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform .72s var(--ease);
}

@media (hover: hover) {
  .location-card:hover .location-card__inner { transform: rotateY(180deg); }
}

.location-card.is-flipped .location-card__inner { transform: rotateY(180deg); }

.location-card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.location-card__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-card__back { transform: rotateY(180deg); }

.city-lineup {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 42px);
  background: var(--acid);
  color: var(--ink);
}

.city-lineup--warm {
  background: var(--signal);
  color: #fff;
}

/* Solid lineup text: black on the yellow Sydney card, white on the orange Melbourne card. */
.city-lineup .blend-text {
  color: inherit;
  mix-blend-mode: normal;
}

.city-lineup__label {
  margin: 0 0 auto;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.city-lineup ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.city-lineup li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(7px, 1.1vh, 12px) 0;
  border-bottom: 1px solid rgba(22, 21, 21, .24);
  font-size: clamp(22px, 2.25vw, 38px);
  line-height: 1;
  letter-spacing: 0;
  word-spacing: .04em;
}

/* Only the 01–05 number: main.js also wraps each artist name in a span, which
   a plain "li span" selector would shrink to number size. */
.city-lineup li > span:first-child {
  min-width: 22px;
  font-size: 10px;
  letter-spacing: .08em;
}

.location-card__ticket {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--cream);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.location-card__ticket span { font-size: 18px; }
.location-card__ticket:hover { background: var(--acid); }

/* Headliners */

.artist-track {
  width: calc(100% + var(--pad));
  height: min(66svh, 700px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 31vw);
  gap: clamp(20px, 2.25vw, 34px);
  overflow-x: auto;
  padding: 0 var(--pad) 18px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
}

.artist-track::-webkit-scrollbar { display: none; }

.artist-card {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  scroll-snap-align: start;
}

.artist-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 31%;
  background: rgba(22, 21, 21, .92);
  pointer-events: none;
}

.artist-card__image,
.artist-card__image img,
.artist-card__image video {
  width: 100%;
  height: 100%;
}

.artist-card__image {
  position: relative;
}

.artist-card__image img,
.artist-card__image video {
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: opacity .28s ease, transform .65s var(--ease);
}

.artist-card__image img {
  filter: saturate(.76) contrast(1.06);
}

.artist-card__image video {
  opacity: 0;
  transform: scale(1.025);
  pointer-events: none;
}

.artist-card.is-previewing .artist-card__image img { opacity: 0; }
.artist-card.is-previewing .artist-card__image video {
  opacity: 1;
  transform: scale(1);
}

.artist-card:nth-child(1) img { object-position: 50% 50%; }
.artist-card:nth-child(2) img { object-position: 50% 50%; }
.artist-card:nth-child(3) img { object-position: 50% 50%; }
.artist-card:nth-child(4) img { object-position: 50% 50%; }

.artist-card__cities,
.artist-card h3 {
  position: absolute;
  z-index: 2;
}

.artist-card h3 {
  left: 20px;
  right: 52px;
  bottom: 22px;
  margin: 0;
  font-size: clamp(42px, 4.5vw, 72px);
  line-height: .94;
  letter-spacing: 0;
  word-spacing: .04em;
  font-weight: 500;
}

.artist-card__cities {
  right: 18px;
  bottom: 22px;
  margin: 0;
  font-size: 11px;
  letter-spacing: .06em;
  writing-mode: vertical-rl;
}

/* About */
.memory .blend-text {
  color: inherit;
  mix-blend-mode: normal;
}

.memory__label {
  margin: 0;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* About 09 · Split panels: cream headline panel beside a yellow panel with the orange logo. */
.memory {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ece6d8;
  color: var(--ink);
}

.memory__panel {
  position: relative;
  display: grid;
  padding: clamp(96px, 12vh, 140px) clamp(28px, 5vw, 96px);
}

.memory__panel--headline { align-content: center; }

.memory__content {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

/* Headline in the ZURI wordmark style: Alte Haas Bold thickened with a rounded outline to the
   logo's weight, lowercase like the logo, normal letter spacing. */
.memory h2 {
  margin: 0;
  font-family: "Alte Haas", "Neue Haas", sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 5.4vw, 80px);
  line-height: 1;
  letter-spacing: .01em;
  word-spacing: -.06em;
  text-transform: lowercase;
  text-wrap: balance;
  -webkit-text-stroke: .07em currentColor;
  paint-order: stroke fill;
}

/* The logo sits centred in its panel, on the same centre line as the headline. */
.memory__panel--brand {
  align-content: center;
  justify-items: center;
  background: var(--acid);
}

.memory__logo {
  width: min(100%, 560px);
  height: auto;
}

.memory__sub {
  position: absolute;
  left: clamp(28px, 5vw, 96px);
  bottom: clamp(56px, 10vh, 96px);
  margin: 0;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.3;
  letter-spacing: .03em;
}

/* Dispersion on "memory.": every 4s the letters blur and smear diagonally down to the left,
   then pull back into focus. It sweeps right to left, starting with the full stop. */
.memory__disperse { white-space: nowrap; }

.memory__disperse-letter {
  position: relative;
  display: inline-block;
  animation: memoryDisperse 4s cubic-bezier(.4, 0, .2, 1) calc(var(--r) * 100ms) infinite;
}

.memory__disperse-letter::after {
  content: attr(data-letter);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform-origin: 100% 0;
  pointer-events: none;
  animation: memoryDisperseTrail 4s cubic-bezier(.4, 0, .2, 1) calc(var(--r) * 100ms) infinite;
}

@keyframes memoryDisperse {
  0%, 62%, 100% { filter: blur(0); transform: translate(0, 0); opacity: 1; }
  70% { filter: blur(3px); transform: translate(-.04em, .04em); opacity: .85; }
  78% { filter: blur(7px); transform: translate(-.1em, .1em); opacity: .55; }
  88% { filter: blur(2px); transform: translate(-.03em, .02em); opacity: .9; }
}

@keyframes memoryDisperseTrail {
  0%, 62%, 100% { opacity: 0; filter: blur(0); transform: translate(0, 0) skewX(0deg) scale(1, 1); }
  70% { opacity: .55; filter: blur(6px); transform: translate(-.1em, .08em) skewX(-14deg) scale(1.04, 1.3); }
  80% { opacity: .35; filter: blur(12px); transform: translate(-.24em, .22em) skewX(-26deg) scale(1.1, 1.75); }
  92% { opacity: 0; filter: blur(16px); transform: translate(-.36em, .34em) skewX(-34deg) scale(1.16, 2.1); }
}

@media (max-width: 820px) {
  .memory { grid-template-columns: 1fr; }
  .memory__panel { padding: 84px var(--pad) 56px; }
  .memory__panel--brand { min-height: 70svh; padding-top: 56px; padding-bottom: 170px; }
  .memory__sub { left: var(--pad); bottom: 56px; }
}

/* ZURI Nights */
.nights-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, min(29vw, calc(80svh - 216px), 480px));
  justify-content: center;
  gap: clamp(18px, 2.25vw, 34px);
}

.night-card {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* main.js hides a club night once it has finished. */
.night-card[hidden] { display: none; }

.night-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.night-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.night-card--signup {
  color: var(--cream);
}

.night-card__announcement {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.8vw, 40px);
  background: var(--ink);
}

.night-card__number,
.night-card__announcement p,
.night-card__action {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.night-card__announcement p {
  margin: 28px 0 0;
}

.night-card__announcement h3 {
  margin: auto 0;
  font-size: clamp(36px, 4vw, 66px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: 0;
  word-spacing: .05em;
}

.night-card__action {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding: 0 16px;
  background: var(--ink);
  color: var(--cream);
}

/* Footer and form */
footer {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(520px, 1.22fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(38px, 6vw, 90px);
  padding: clamp(82px, 9vw, 130px) var(--pad) var(--pad);
  background: transparent;
  color: #fff;
}

/* Same treatment as the hero: the footer lets the lava orbs show through and
   lays the hero's dot grid over them, fading in from the top edge. */
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image: radial-gradient(rgba(22, 21, 21, .55) .7px, transparent .9px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, transparent, black 25%);
  pointer-events: none;
}

footer .blend-text {
  color: inherit;
  mix-blend-mode: normal;
}

.footer-intro {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 70px;
}

.footer-wordmark {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: start;
  margin: 0 0 clamp(52px, 4vw, 72px);
}

/* Yellow "zuri" artwork, sized to the footprint the typeset wordmark had. */
.footer-wordmark img {
  display: block;
  width: calc(min(18vw, 370px) * 1.58);
  height: auto;
}

.footer-intro h2 {
  max-width: 560px;
  margin: 18px 0 24px;
  font-size: clamp(52px, 6vw, 104px);
  line-height: .94;
}

.footer-intro div > p:last-child {
  max-width: 420px;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: .018em;
}

#arep-iframe-container-16227 { display: none; }

#arep-form-container-16227 {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
}

#arep-form-16227-header:empty { display: none; }

.arep-form {
  width: 100%;
  max-width: 600px;
}

.arep-input {
  display: block;
  width: 100%;
}

.arep-form-field-wrapper { margin-bottom: 12px; }

.arep-mobileNumber-input-wrap .arep-mobileNumber-code-input {
  display: inline-block;
  width: 100px;
  margin-right: 6px;
}

.arep-mobileNumber-input-wrap .arep-mobileNumber-number-input {
  display: inline-block;
  width: calc(100% - 100px - 6px);
}

#arep-form-container-16227 label,
#arep-form-container-16227 .arep-form-field-label {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#arep-form-container-16227 input:not([type="checkbox"]):not([type="radio"]),
#arep-form-container-16227 select,
#arep-form-container-16227 textarea {
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid #fff;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: none;
}

#arep-form-container-16227 textarea {
  min-height: 120px;
  padding-top: 14px;
}

#arep-form-container-16227 input::placeholder,
#arep-form-container-16227 textarea::placeholder { color: rgba(255, 255, 255, .75); }

#arep-form-container-16227 select option { color: var(--ink); }

#arep-form-container-16227 input:focus,
#arep-form-container-16227 select:focus,
#arep-form-container-16227 textarea:focus {
  background: var(--acid);
  color: var(--ink);
}

#arep-form-container-16227 input:focus::placeholder,
#arep-form-container-16227 textarea:focus::placeholder { color: rgba(22, 21, 21, .68); }

#arep-form-container-16227 button,
#arep-form-container-16227 input[type="submit"] {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 0;
  background: var(--acid);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.footer-links nav {
  display: grid;
  align-content: start;
}

.footer-links p {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.footer-links a {
  width: fit-content;
  padding: 5px 0;
  font-size: 18px;
  letter-spacing: .015em;
}

.footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-meta {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .locations .section-head h2 {
    font-size: clamp(38px, 7.7vw, 74px);
  }

  .location-card {
    flex-basis: min(42vw, calc(80svh - 232px), 460px);
    width: min(42vw, calc(80svh - 232px), 460px);
  }

  footer {
    grid-template-columns: minmax(240px, .72fr) minmax(440px, 1.28fr);
  }
}

@media (max-width: 820px) {
  .site-header,
  .site-header.is-scrolled { padding: 12px var(--pad); }

  .ticket-menu summary { min-height: 42px; }

  .menu-toggle { width: 42px; height: 42px; }
  .menu-toggle span { left: 12px; width: 18px; }
  .menu-toggle span:first-child { top: 17px; }
  .menu-toggle span:last-child { top: 24px; width: 12px; }

  .menu-panel nav a { font-size: clamp(38px, 8vh, 68px); }

  .hero__center { width: 98vw; }

  .hero h1 { --hero-word: 38vw; }

  .hero__dates {
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 54px;
  }

  .hero__statement { order: -1; margin-bottom: 10px; }
  .hero__dates > span { text-align: center !important; }

  .hero__scroll {
    right: var(--pad);
    left: auto;
    transform: none;
  }

  .section { padding: 84px var(--pad) 28px; }
  .section-head h2 { font-size: clamp(48px, 12vw, 82px); }

  .locations .section-head h2 {
    font-size: clamp(30px, 8.4vw, 58px);
  }

  .section-note { max-width: 155px; font-size: 13px; }

  .location-grid {
    width: calc(100% + var(--pad));
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    padding-right: var(--pad);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .location-grid::-webkit-scrollbar { display: none; }

  .location-card {
    flex: 0 0 min(78vw, calc(80svh - 180px), 420px);
    width: min(78vw, calc(80svh - 180px), 420px);
    scroll-snap-align: center;
  }

  .artist-track {
    height: 68svh;
    grid-auto-columns: minmax(270px, 80vw);
    gap: 22px;
  }

  .artist-card h3 { font-size: clamp(42px, 12vw, 68px); }

  .nights { justify-content: center; }

  .nights-grid {
    width: calc(100% + var(--pad));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 80vw);
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    padding-right: var(--pad);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .nights-grid::-webkit-scrollbar { display: none; }

  .night-card { scroll-snap-align: center; }

  /* Phones: stack the footer with the ZURI logo after the sign-up form. */
  footer {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-top: 84px;
  }

  #arep-form-container-16227 { order: 1; }
  .footer-wordmark { order: 2; }
  .footer-links { order: 3; }
  .footer-meta { order: 4; }

  .footer-intro {
    display: grid;
    gap: 50px;
    margin-bottom: 64px;
  }

  .footer-wordmark {
    display: block;
    align-self: flex-start;
    margin: 0 0 64px;
  }

  .footer-wordmark img { width: calc(36vw * 1.58); }
  #arep-form-container-16227 { margin-bottom: 58px; }
  .footer-links { margin-bottom: 64px; }
}

@media (max-width: 520px) {
  .intro-strip p {
    left: 7px;
    bottom: 18px;
    font-size: clamp(17px, 5vw, 30px);
  }

  .intro-title__logo { width: calc(29vw * 2.144); }
  .intro-skip {
    top: auto;
    right: auto;
    bottom: max(108px, calc(env(safe-area-inset-bottom) + 96px));
    left: 50%;
    max-width: calc(100vw - 32px);
    padding: 0 0 24px;
    border: 0;
    background: transparent;
    font-size: 10px;
    letter-spacing: .18em;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .intro-skip::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 16px;
    height: 16px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
  }
  .ticket-menu__panel { width: 210px; }
  .menu-panel nav a { font-size: 12vw; }

  .locations .section-head h2 {
    font-size: clamp(27px, 8.2vw, 43px);
  }

  .section-note { font-size: 11px; }
  .city-lineup { padding: 22px; }
  .city-lineup li { font-size: clamp(20px, 6.4vw, 29px); }
  .phone-field { grid-template-columns: 1fr; }
  .footer-links { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .intro-title,
  .intro-strip,
  .intro-strip p {
    opacity: 1;
    transform: none;
  }
}