@font-face {
  font-family: "Mont";
  src: url("fonts/Mont-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mont";
  src: url("fonts/mont-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #fff;
  --accent: #f5a2b5;
  --muted: rgba(255, 255, 255, 0.72);
  --page-max: 720px;
  --pad-x: clamp(20px, 5vw, 48px);
  /* Both corner marks share one baseline: same top inset, same optical centre. */
  --mark-top: clamp(12px, 1.8vw, 28px);
  --mark-inset: clamp(12px, 2.4vw, 40px);
  --badge: clamp(92px, 8vw, 170px);
  --captive-h: min(5.6vh, 3.6vw, 76px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Mont", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 55% 45% at 50% 32%,
    rgba(160, 48, 82, 0.55) 0%,
    rgba(130, 36, 66, 0.38) 25%,
    rgba(90, 24, 50, 0.18) 50%,
    rgba(50, 12, 28, 0.05) 70%,
    transparent 85%
  );
}

@media (max-width: 640px) {
  .glow {
    background: radial-gradient(
      ellipse 120% 45% at 50% 32%,
      rgba(175, 54, 90, 0.62) 0%,
      rgba(140, 40, 72, 0.44) 25%,
      rgba(95, 26, 54, 0.22) 50%,
      rgba(55, 14, 30, 0.07) 70%,
      transparent 88%
    );
  }
  animation: glow-pulse 9s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.82;
  }
}

.petals-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.petals-layer img {
  position: absolute;
  top: -15vh;
  will-change: transform, opacity;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.dark-veil {
  position: absolute;
  inset: 38vh 0 0;
  pointer-events: none;
  z-index: 3;
  /* Anchored to the page, not the viewport: the old fixed veil drifted away
     from the photo on tall screens and left a hard cut across the artist. */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 26%,
    rgba(0, 0, 0, 0.86) 48%,
    #000 70%,
    #000 100%
  );
}

/* Captive Soul mark: top-left corner, optically centred on the same line as
   the 18+ sticker opposite it. */
.captive-badge {
  position: absolute;
  top: calc(var(--mark-top) + (var(--badge) - var(--captive-h)) / 2);
  left: var(--mark-inset);
  z-index: 5;
  height: var(--captive-h);
  width: auto;
}

/* 18+ sticker: static numeral inside a slowly turning ring of text. */
.age-badge {
  position: absolute;
  top: var(--mark-top);
  right: var(--mark-inset);
  z-index: 5;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(245, 162, 181, 0.22);
}

.age-badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: age-ring-spin 22s linear infinite;
}

.age-badge__ring text {
  font-family: "Mont", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16.6px;
  fill: var(--accent);
}

.age-badge__num {
  position: relative;
  font-weight: 700;
  font-size: calc(var(--badge) * 0.3);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
  /* optical centring: the "+" is lighter than the digits */
  transform: translateX(0.03em);
}

.age-badge__num span {
  color: var(--accent);
}

/* On phones the top corner belongs to the header; the sticker drops onto the
   photo beside the artist's head instead. */
@media (max-width: 640px) {
  :root {
    --badge: 84px;
    --captive-h: min(5vh, 46px);
    --mark-top: clamp(92px, 26vw, 112px);
    --mark-inset: 12px;
  }
}

@keyframes age-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

.page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: clamp(10px, 1.6vh, 20px) var(--pad-x) clamp(10px, 2vh, 26px);
  text-align: center;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 32px);
  margin-bottom: clamp(2px, 0.6vh, 8px);
  position: relative;
  z-index: 4;
}

.brand__logo {
  height: min(5.4vh, 3.6vw, 70px);
  width: auto;
  object-fit: contain;
}

.brand__logo--korolova {
  height: min(6.6vh, 4.4vw, 84px);
}

.brand__x {
  font-weight: 700;
  font-size: clamp(17px, 2.8vw, 26px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--fg);
  opacity: 0.95;
}

.presents {
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: min(2.4vh, 1.6vw, 26px);
  margin-bottom: 0;
  color: var(--fg);
  position: relative;
  z-index: 4;
}

/* The photo is a backdrop layer, not a block in the flow: that is what keeps
   the whole poster inside one screen. */
.hero {
  position: absolute;
  top: clamp(58px, 8vh, 96px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

.hero__photo {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 94vw;
  height: min(74vh, 1180px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* The photo dissolves into the page on its own. Relying on the fixed veil
     left a hard cut once the page grew taller than one screen. */
  -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, 0.75) 80%,
      rgba(0, 0, 0, 0.25) 92%,
      transparent 100%
    ),
    linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, 0.75) 80%,
      rgba(0, 0, 0, 0.25) 92%,
      transparent 100%
    ),
    linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero__photo picture {
  display: contents;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.headliner {
  margin-top: min(31vh, 460px);
  position: relative;
  z-index: 4;
  margin-bottom: 0;
}

.lineup,
.cta-wrap,
.footbar {
  position: relative;
  z-index: 4;
}

/* Date, venue and the buy button share one bar. On wide screens they sit in a
   single row, which is what buys back the vertical space. */
.footbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1040px, 94vw);
  /* always hugs the bottom edge, whatever the screen proportions */
  margin-top: auto;
}

.headliner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.headliner__name {
  font-weight: 700;
  font-size: min(16.5vw, 21vh, 280px);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: -0.04em;
}

.gl-headliner .headliner__name {
  color: transparent;
}

.headliner__gl {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  will-change: transform;
}

.headliner__gl.is-ready {
  opacity: 1;
}

.lineup {
  margin-bottom: clamp(8px, 1.6vh, 20px);
}

.lineup__main {
  font-weight: 700;
  font-size: min(2.7vh, 2.7vw, 34px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: clamp(4px, 0.9vh, 14px);
}

.lineup__main li {
  margin-bottom: 2px;
}

.lineup__main em {
  font-style: normal;
  font-weight: 700;
  opacity: 0.95;
}

.lineup__country {
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  vertical-align: baseline;
  margin-left: 0.25em;
  opacity: 0.9;
}

.lineup__sub {
  font-weight: 700;
  font-size: min(1.4vh, 1vw, 15px);
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--fg);
}

/* Bottom bar: date left, buy button centre, venue right. On phones the three
   parts stack: date, venue, button. */
.footbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vh, 20px);
  width: min(1600px, 88vw);
  margin-top: auto;
}

.footbar__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.footbar__where {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.schedule__date {
  font-weight: 700;
  font-size: min(6.4vh, 5.4vw, 96px);
  line-height: 1;
  color: var(--accent);
}

.schedule__year {
  color: rgba(245, 162, 181, 0.55);
}

.schedule__time {
  font-weight: 700;
  font-size: min(2.8vh, 2.2vw, 34px);
  line-height: 1.2;
  color: var(--fg);
}

/* the <picture> is a switch, not a box: the image itself stays the layout item */
.schedule__venue-pic {
  display: contents;
}

.schedule__venue {
  width: min(18vh, 12vw, 190px);
  height: auto;
}

.schedule__address {
  font-size: min(1.6vh, 1.1vw, 17px);
  line-height: 1.45;
  color: var(--muted);
  white-space: nowrap;
}

.schedule__city {
  display: block;
}

/* Short screens (landscape phones, low laptops): tighten the vertical rhythm
   so every block still fits without scrolling. */
@media (max-height: 640px) {
  .page {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .hero {
    top: clamp(44px, 7vh, 72px);
  }

  .hero__photo {
    height: min(80vh, 780px);
  }

  .headliner {
    margin-top: min(21vh, 190px);
  }

  .headliner__name {
    font-size: min(13vw, 19vh, 188px);
  }

  .lineup {
    margin-bottom: 6px;
  }

  .schedule__date {
    font-size: min(7vh, 5vw, 56px);
  }
}

/* Low desktop windows: the headline column loses a slice of its lead-in. */
@media (min-width: 900px) and (max-height: 780px) {
  .headliner {
    margin-top: min(28vh, 460px);
  }
}

@media (min-width: 900px) and (max-height: 640px) {
  .page {
    padding-bottom: clamp(34px, 6vh, 46px);
  }
}

@media (max-width: 400px) {
  /* smallest phones: shave the last few pixels so nothing scrolls */
  .page {
    padding-bottom: 8px;
  }

  .lineup__sub {
    line-height: 1.35;
  }

  .headliner {
    margin-top: min(24vh, 200px);
  }
}

/* Page footer: the legal link and the contact address share one quiet line,
   so on the poster page it costs no more height than the legal link did. */
.site-foot {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 1.2em;
  font-size: min(1.8vh, 1.15vw, 17px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
}

.site-foot > * {
  padding: 4px 6px;
}

/* the same accent dot the terms list uses, set between the two items */
.site-foot__contact:not(:first-child) {
  position: relative;
}

.site-foot__contact:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-0.6em - 1.5px);
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

.terms-link,
.site-foot a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 4px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.terms-link {
  background: transparent;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.terms-link:hover,
.terms-link:focus-visible,
.site-foot a:hover,
.site-foot a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
  outline: none;
}

.cta-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(6px, 1vh, 12px);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: clamp(12px, 2.2vh, 26px) clamp(24px, 3vw, 52px);
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: min(2vh, 1.2vw, 22px);
  border-radius: 999px;
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
  box-shadow: 0 10px 30px rgba(245, 162, 181, 0.22);
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px);
  background: #ffbac9;
  box-shadow: 0 14px 40px rgba(245, 162, 181, 0.35);
  outline: none;
}

.cta__arrow {
  transition: transform 200ms ease;
  font-weight: 700;
}

.cta:hover .cta__arrow {
  transform: translateX(4px);
}

.terms {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  width: min(720px, 94vw);
  max-height: 90vh;
  border-radius: 16px;
  overflow: hidden;
}

.terms::backdrop {
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.terms[open] {
  animation: terms-in 220ms ease-out;
}

@keyframes terms-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.terms__inner {
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.terms__header {
  position: relative;
  padding: clamp(20px, 3vw, 32px) clamp(48px, 6vw, 64px) clamp(14px, 2vw, 20px) clamp(20px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.terms__title {
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 22px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin: 0;
}

.terms__subtitle {
  margin-top: 6px;
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.terms__close {
  position: absolute;
  top: clamp(14px, 2vw, 20px);
  right: clamp(14px, 2vw, 20px);
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* A drawn cross, not the "×" glyph: the glyph sits on the button font's
   baseline metrics and landed 2px low in Safari. The path is centred in its
   own box, so flex centring puts it exactly in the middle of the ring. */
.terms__close svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.terms__close:hover,
.terms__close:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  outline: none;
}

.terms__body {
  padding: clamp(16px, 2.6vw, 28px) clamp(20px, 4vw, 40px) clamp(24px, 4vw, 40px);
  overflow-y: auto;
  font-weight: 400;
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 162, 181, 0.4) transparent;
}

.terms__body::-webkit-scrollbar {
  width: 8px;
}

.terms__body::-webkit-scrollbar-thumb {
  background: rgba(245, 162, 181, 0.35);
  border-radius: 999px;
}

.terms__body p {
  margin: 0 0 12px;
}

.terms__body h3 {
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 17px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 22px 0 10px;
}

.terms__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.terms__body a:hover {
  text-decoration-color: transparent;
}

.terms__body strong {
  color: var(--fg);
  font-weight: 700;
}

.terms__body ul {
  padding-left: 0;
  list-style: none;
  margin: 0 0 12px;
}

.terms__body ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}

.terms__body ul li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.terms__event {
  margin: 8px 0 18px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(245, 162, 181, 0.06);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
}

/* the row wrappers step aside so every value lines up in one column */
.terms__event div {
  display: contents;
}

.terms__event dt {
  color: var(--muted);
}

.terms__event dd {
  margin: 0;
  color: var(--fg);
  font-weight: 700;
}

@media (max-width: 560px) {
  .terms__event {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .terms__event div + div dt {
    margin-top: 10px;
  }
}

@media (min-width: 900px) {
  /* reserve the strip the legal link sits in, so the bar never runs into it */
  .page {
    padding-bottom: clamp(40px, 5.2vh, 66px);
  }

  /* one line: date — buy — venue, with the button on the page's centre line */
  .footbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(20px, 4vw, 64px);
  }

  .footbar__when {
    align-items: flex-start;
  }

  .footbar__where {
    align-items: flex-end;
    text-align: right;
    gap: clamp(8px, 1.2vh, 14px);
  }

  /* the horizontal wordmark: a wide, quiet strip that mirrors the date's
     width across the bar instead of stacking into a block */
  .schedule__venue {
    width: min(34vh, 24vw, 420px);
  }

  /* the footer belongs to the page edge, not to the bar. Centred with
     auto margins, not translateX(-50%): the entrance animation owns
     `transform`, so the translate was dropped for its whole run and the line
     faded in half its width off-centre, then jumped back. */
  .site-foot {
    position: absolute;
    left: 0;
    right: 0;
    width: max-content;
    margin-inline: auto;
    bottom: clamp(8px, 1.4vh, 18px);
  }
}

@media (max-width: 899px) {
  .headliner {
    margin-top: min(26vh, 220px);
  }

  .headliner__name {
    font-size: min(15.5vw, 19vh, 188px);
  }

  .lineup {
    margin-top: clamp(4px, 1vh, 10px);
    margin-bottom: clamp(6px, 1.2vh, 14px);
  }

  .lineup__main {
    font-size: min(2.4vh, 4.4vw, 22px);
    letter-spacing: 0.01em;
    margin-bottom: clamp(3px, 0.7vh, 10px);
  }

  .lineup__sub {
    font-size: min(1.5vh, 2.8vw, 11px);
  }

  .footbar {
    gap: clamp(8px, 1.6vh, 16px);
  }

  /* Stacked on phones: date, venue mark, button, address. The address and the
     legal line sit below the button, so they are the first things allowed to
     fall off a short screen — the button never is. The address element is
     dissolved so its two parts can take places on either side of the button. */
  .footbar__where {
    display: contents;
  }

  .schedule__venue {
    order: 2;
  }

  .cta-wrap {
    order: 3;
    width: 100%;
    margin-bottom: 0;
  }

  .schedule__address {
    order: 4;
  }

  /* a hairline closing the date block — it reads as a designed object, which
     is what separates the two halves of the bar without another text style */
  .footbar__when::after {
    content: "";
    display: block;
    width: min(300px, 72vw);
    height: 1px;
    margin-top: clamp(7px, 1.2vh, 12px);
    background: rgba(255, 255, 255, 0.18);
  }

  /* one line, so the address stays a single quiet object under the button */
  .schedule__city {
    display: inline;
  }

  .schedule__city::before {
    content: ", ";
  }

  .schedule__date {
    font-size: min(6.2vh, 12vw, 52px);
  }

  .schedule__time {
    font-size: min(2.5vh, 4.6vw, 22px);
  }

  .schedule__venue {
    width: min(14vh, 32vw, 140px);
  }

  .footbar {
    gap: clamp(7px, 1.4vh, 14px);
  }

  .schedule__address {
    font-size: min(1.6vh, 3.1vw, 13px);
  }

  .cta {
    width: min(330px, 76vw);
    justify-content: center;
    padding: clamp(13px, 1.9vh, 18px) clamp(20px, 5vw, 32px);
    font-size: min(2.1vh, 4vw, 17px);
    letter-spacing: 0.1em;
    gap: 10px;
  }

  /* the address size, so legal link and contacts still share one line */
  .site-foot {
    order: 4;
    column-gap: 1em;
    font-size: max(11px, min(1.6vh, 3.1vw, 13px));
  }

  .site-foot > * {
    padding: 8px 4px;
  }
}

/* narrowest phones: the two items stack, and the dot between them goes */
@media (max-width: 340px) {
  .site-foot {
    flex-direction: column;
    align-items: center;
  }

  .site-foot > * {
    padding-block: 3px;
  }

  .site-foot__contact::before {
    display: none;
  }
}

/* Phones held sideways: the stacked bar cannot fit, so date / button / venue
   go back into one row and the whole rhythm compresses. */
@media (min-width: 600px) and (max-height: 560px) {
  :root {
    --badge: 72px;
    --captive-h: min(9vh, 38px);
    --mark-top: 8px;
    --mark-inset: 10px;
  }

  .footbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(14px, 3vw, 40px);
    width: min(1040px, 94vw);
  }

  .footbar__when {
    align-items: flex-start;
  }

  /* the hairline belongs to the stacked bar only */
  .footbar__when::after {
    display: none;
  }

  .footbar__where {
    display: flex;
    order: 0;
    align-items: flex-end;
    text-align: right;
    width: auto;
    gap: 6px;
  }

  .cta-wrap {
    order: 0;
    width: auto;
    margin-bottom: 0;
  }

  .cta {
    width: auto;
    padding: clamp(10px, 2.4vh, 15px) clamp(20px, 4vw, 32px);
    font-size: min(3.4vh, 16px);
    letter-spacing: 0.1em;
  }

  .schedule__venue {
    width: min(16vh, 22vw, 130px);
  }

  .schedule__address {
    font-size: min(3vh, 12px);
  }

  .lineup__sub {
    font-size: min(2.4vh, 11px);
  }

  .site-foot {
    font-size: min(3vh, 13px);
  }

  .site-foot > * {
    padding: 0 6px;
  }

  /* the legal line stays in the flow here, so the column above gives up the
     few pixels it needs */
  .headliner {
    margin-top: min(17vh, 190px);
  }

  .lineup {
    margin-top: 2px;
    margin-bottom: 2px;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.brand,
.presents,
.hero__photo,
.headliner,
.lineup__main,
.lineup__sub,
.footbar,
.site-foot {
  animation: appear 800ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.brand { animation-delay: 100ms; }
.presents { animation-delay: 220ms; }
.hero__photo { animation-delay: 340ms; }
.headliner { animation-delay: 560ms; }
.lineup__main { animation-delay: 720ms; }
.lineup__sub { animation-delay: 860ms; }
.footbar { animation-delay: 1020ms; }
.site-foot { animation-delay: 1420ms; }

.glow {
  opacity: 0;
  animation: glow-fade-in 1400ms ease-out forwards,
             glow-pulse 9s ease-in-out 1400ms infinite alternate;
}

@keyframes glow-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Status pages (success / fail / 404) — shared centred layout
--------------------------------------------------------------------------- */

.page--state {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 26px);
  max-width: 600px;
  padding-top: clamp(48px, 8vw, 80px);
  /* room for the footer on the bottom edge */
  padding-bottom: clamp(72px, 8vw, 80px);
}

.page--state .brand {
  margin-bottom: clamp(8px, 2vw, 18px);
}

.state__badge {
  position: relative;
  z-index: 4;
  width: clamp(72px, 12vw, 96px);
  height: clamp(72px, 12vw, 96px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 162, 181, 0.4);
  background: rgba(245, 162, 181, 0.08);
  color: var(--accent);
  box-shadow: 0 12px 40px rgba(245, 162, 181, 0.18);
}

.state__badge svg {
  width: 46%;
  height: 46%;
}

.state__badge--code {
  width: auto;
  height: auto;
  padding: clamp(8px, 2vw, 14px) clamp(20px, 5vw, 34px);
  border-radius: 18px;
  font-weight: 700;
  font-size: clamp(56px, 16vw, 104px);
  letter-spacing: 0.04em;
  line-height: 1;
}

.state__title {
  position: relative;
  z-index: 4;
  font-weight: 700;
  font-size: clamp(26px, 5.5vw, 46px);
  line-height: 1.12;
  letter-spacing: 0.01em;
}

.state__text {
  position: relative;
  z-index: 4;
  max-width: 460px;
  font-size: clamp(14px, 1.9vw, 17px);
  line-height: 1.6;
  color: var(--muted);
}

.state__text strong {
  color: var(--fg);
  font-weight: 700;
}

/* The order recap is a ticket: a punched tear line splits the day and venue
   from the start time, with half-round bites where the tear line meets the
   edges, and the short ends are serrated like a torn-off roll ticket. The
   whole silhouette is one mask, so every cut shows the real page through it.
   The wrapper carries the shadow, since a mask would clip a box-shadow. */
.state__ticket {
  position: relative;
  z-index: 4;
  width: min(440px, 100%);
  filter: drop-shadow(0 14px 34px rgba(245, 162, 181, 0.22));
}

.ticket {
  --stub: 118px;
  --tear: calc(100% - var(--stub));
  --notch: 11px;
  --tooth: 3.5px;
  --tooth-step: 11px;
  --hole: 1.7px;
  --hole-step: 9px;
  display: flex;
  background: var(--accent);
  color: #0a0a0a;
  text-align: left;
  -webkit-mask-image:
    radial-gradient(circle at var(--tear) 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at var(--tear) 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at var(--tear) 50%, transparent var(--hole), #000 calc(var(--hole) + 0.5px)),
    radial-gradient(circle at 0 50%, transparent var(--tooth), #000 calc(var(--tooth) + 0.5px)),
    radial-gradient(circle at 100% 50%, transparent var(--tooth), #000 calc(var(--tooth) + 0.5px));
  mask-image:
    radial-gradient(circle at var(--tear) 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at var(--tear) 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)),
    radial-gradient(circle at var(--tear) 50%, transparent var(--hole), #000 calc(var(--hole) + 0.5px)),
    radial-gradient(circle at 0 50%, transparent var(--tooth), #000 calc(var(--tooth) + 0.5px)),
    radial-gradient(circle at 100% 50%, transparent var(--tooth), #000 calc(var(--tooth) + 0.5px));
  /* `round` fits a whole number of holes and teeth, so both ends match */
  -webkit-mask-size: 100% 100%, 100% 100%, 100% var(--hole-step), 100% var(--tooth-step), 100% var(--tooth-step);
  mask-size: 100% 100%, 100% 100%, 100% var(--hole-step), 100% var(--tooth-step), 100% var(--tooth-step);
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat round, no-repeat round, no-repeat round;
  mask-repeat: no-repeat, no-repeat, no-repeat round, no-repeat round, no-repeat round;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.ticket__main {
  flex: 1;
  min-width: 0;
  padding: 22px 22px 22px 28px;
}

.ticket__stub {
  flex: 0 0 var(--stub);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 12px;
  text-align: center;
}

.ticket__date {
  font-weight: 700;
  font-size: clamp(28px, 7vw, 36px);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* the year steps back, as it does in the date on the main page */
.ticket__date span {
  color: rgba(10, 10, 10, 0.5);
}

.ticket__venue {
  margin-top: 14px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.ticket__address,
.ticket__label {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(10, 10, 10, 0.66);
}

.ticket__address {
  margin-top: 2px;
}

.ticket__time {
  font-weight: 700;
  font-size: clamp(24px, 6vw, 28px);
  line-height: 1;
}

.ticket__label {
  margin-top: 6px;
}

@media (max-width: 400px) {
  .ticket {
    --stub: 96px;
  }

  .ticket__main {
    padding: 18px 16px 18px 22px;
  }
}

/* narrowest phones: the stub gives up width so the venue stays on one line */
@media (max-width: 360px) {
  .ticket {
    --stub: 80px;
  }

  .ticket__main {
    padding-right: 12px;
    padding-left: 20px;
  }

  .ticket__venue {
    font-size: 14px;
  }

  .ticket__time {
    font-size: 22px;
  }
}

.state__actions {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(4px, 1vw, 10px);
}

.cta--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.cta--ghost:hover,
.cta--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.state__note {
  position: relative;
  z-index: 4;
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}

.state__note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* On the status pages the footer sits on the bottom edge, inside the
   page's bottom padding, so the centred column above never moves. */
.page--state .site-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(10px, 2vh, 20px);
  width: max-content;
  margin-inline: auto;
  font-size: clamp(12px, 1.4vw, 13px);
}

.page--state .brand,
.page--state .state__badge,
.page--state .state__title,
.page--state .state__text,
.page--state .state__ticket,
.page--state .state__actions,
.page--state .state__note,
.page--state .site-foot {
  animation: appear 760ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.page--state .brand { animation-delay: 80ms; }
.page--state .state__badge { animation-delay: 200ms; }
.page--state .state__title { animation-delay: 340ms; }
.page--state .state__text { animation-delay: 460ms; }
.page--state .state__ticket { animation-delay: 560ms; }
.page--state .state__actions { animation-delay: 660ms; }
.page--state .state__note { animation-delay: 780ms; }
.page--state .site-foot { animation-delay: 900ms; }

@media (prefers-reduced-motion: reduce) {
  .petals-layer {
    display: none;
  }
  .age-badge__ring,
  .brand,
  .presents,
  .hero__photo,
  .headliner,
  .lineup__main,
  .lineup__sub,
  .footbar,
  .site-foot,
  .glow,
  .page--state .brand,
  .page--state .state__badge,
  .page--state .state__title,
  .page--state .state__text,
  .page--state .state__ticket,
  .page--state .state__actions,
  .page--state .state__note,
  .page--state .site-foot {
    animation: none;
  }
}