:root {
  --ink: #11101a;
  --muted: #686473;
  --paper: #faf9ff;
  --violet: #4a1391;
  --violet-dark: #2c075f;
  --pink: #f0349e;
  --cyan: #10c4ee;
  --lime: #98de44;
  --yellow: #ffd03b;
  --line: rgba(54, 20, 102, 0.16);
  --shadow: 0 28px 80px rgba(39, 11, 79, 0.16);
  --radius: 24px;
  --max: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 6% 18%, rgba(73, 237, 244, 0.13), transparent 24rem),
    radial-gradient(circle at 93% 10%, rgba(244, 46, 161, 0.12), transparent 28rem),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { display: block; width: 100%; }

a { color: inherit; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 16px;
  background: #fff;
  border: 2px solid var(--violet);
  border-radius: 999px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 12px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid rgba(255,255,255,.7);
  background: rgba(250, 249, 255, 0.84);
  backdrop-filter: blur(18px) saturate(150%);
}

.wordmark {
  width: max-content;
  display: block;
  text-decoration: none;
}

.wordmark img {
  width: 110px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(44, 7, 95, .08);
}

nav { display: flex; gap: clamp(20px, 3vw, 42px); }

nav a, .nav-listen {
  font-size: .82rem;
  font-weight: 760;
  text-decoration: none;
  letter-spacing: .02em;
}

nav a { color: #494554; }
nav a:hover, nav a:focus-visible { color: var(--violet); }

.nav-listen {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 18px;
  color: white;
  background: var(--violet-dark);
  border-radius: 999px;
}

.nav-listen svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.hero {
  position: relative;
  isolation: isolate;
  width: min(100% - 40px, 1400px);
  min-height: calc(100svh - 76px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .62fr);
  gap: clamp(44px, 6vw, 100px);
  align-items: center;
  padding: clamp(54px, 7vw, 108px) clamp(0px, 2vw, 28px) 72px;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 58% auto -12%;
  height: 340px;
  border-radius: 50%;
  background: conic-gradient(from 80deg, rgba(12,194,238,.26), rgba(255,205,49,.18), rgba(241,47,157,.2), rgba(91,34,179,.24), rgba(12,194,238,.26));
  filter: blur(70px);
}

.eyebrow, .section-marker, .role {
  color: var(--violet);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.cover-logo {
  width: min(100%, 760px);
  margin: 6px 0 10px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 16px 42px rgba(44, 7, 95, .09);
  line-height: 0;
}
.cover-logo img { width: 100%; height: auto; }

.artist-line {
  margin: 18px 0 34px;
  color: #474252;
  font-size: clamp(.76rem, 1.1vw, .92rem);
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.artist-line span, .finale-artists span { color: var(--pink); margin: 0 .35em; }

.category-block {
  position: relative;
  max-width: 560px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid rgba(77,22,144,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.category-block::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, #f4353f, #ffcf31, #93df46, #11c4ed, #4939d2, #ee2f9e);
}

.category-block p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.category-block strong {
  display: block;
  color: var(--violet-dark);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.12;
}

.also-submitted {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 13px;
  margin-top: 12px;
  color: #3f3a48;
  font-size: .78rem;
  font-weight: 780;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.also-submitted i { width: 4px; height: 4px; background: var(--pink); border-radius: 50%; }

.primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-top: 26px;
  padding: 8px 22px 8px 9px;
  color: white;
  border-radius: 999px;
  background: linear-gradient(105deg, var(--violet-dark), #5715a9 58%, #7d20bf);
  box-shadow: 0 13px 30px rgba(62,10,123,.22);
  font-size: .92rem;
  font-weight: 820;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.primary-cta:hover, .primary-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(62,10,123,.3); }

.play-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  color: var(--violet-dark);
  background: white;
  border-radius: 50%;
}

.play-icon svg { width: 21px; fill: currentColor; }

.tagline {
  margin: 17px 0 0 5px;
  color: var(--violet);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
}

.hero-media { position: relative; width: min(100%, 440px); margin-left: auto; }

.prism-card {
  position: relative;
  padding: 10px;
  background: linear-gradient(130deg, rgba(255,255,255,.92), rgba(255,255,255,.52));
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 32px;
  box-shadow: 22px 24px 0 rgba(28,199,238,.12), -18px -18px 0 rgba(241,47,158,.1), var(--shadow);
  transform: rotate(1.2deg);
}

.prism-card video {
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 23px;
  background: #150b27;
}

.video-label {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 8px 12px;
  color: white;
  background: rgba(22,9,41,.72);
  backdrop-filter: blur(9px);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 750;
  pointer-events: none;
}

.video-label span { color: #70ecff; margin-right: 7px; text-transform: uppercase; letter-spacing: .12em; }

.orbit-label {
  position: absolute;
  z-index: 2;
  padding: 6px 10px;
  color: var(--violet-dark);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(75,16,142,.16);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(37,7,77,.12);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.orbit-one { top: -23px; right: 11%; transform: rotate(4deg); }
.orbit-two { bottom: -22px; left: 12%; transform: rotate(-4deg); }
.orbit-three { right: -33px; bottom: 24%; transform: rotate(8deg); }

.manifesto {
  padding: 34px 24px;
  color: white;
  background: var(--violet-dark);
  text-align: center;
}

.manifesto p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 2.6vw, 2.2rem); font-style: italic; }

.sound-ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 16px 0;
  color: white;
  font-size: clamp(.74rem, 1.2vw, .9rem);
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sound-ribbon span:nth-of-type(1) { color: #ff73bd; }
.sound-ribbon span:nth-of-type(2) { color: #77eaff; }
.sound-ribbon span:nth-of-type(3) { color: #cdf379; }
.sound-ribbon b { color: rgba(255,255,255,.42); }

.section-shell { width: min(100% - 40px, var(--max)); margin: 0 auto; padding: clamp(82px, 11vw, 150px) 0; }

.section-marker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 44px;
}

.section-marker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.story-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .6fr); gap: clamp(50px, 8vw, 110px); align-items: center; }

.kicker { margin: 0 0 15px; color: var(--pink); font-weight: 800; }

h2 {
  margin: 0;
  color: var(--violet-dark);
  font-size: clamp(2.6rem, 5.7vw, 5.5rem);
  font-weight: 920;
  letter-spacing: -.055em;
  line-height: .98;
}

.story-copy .lead {
  margin: 30px 0 20px;
  color: #25212d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.45;
}

.story-copy > p:not(.kicker):not(.lead) { max-width: 760px; color: #514c59; font-size: 1.04rem; }

.poster-card { position: relative; margin: 0; padding: 10px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); transform: rotate(1.8deg); }
.poster-card img { border-radius: 16px; }
.poster-card figcaption { padding: 12px 8px 4px; color: var(--muted); font-size: .75rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .12em; }

.artists { border-top: 1px solid var(--line); }

.section-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(260px, .45fr); gap: 40px; align-items: end; margin-bottom: 55px; }
.section-intro p { margin: 0; color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }

.artist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.artist-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 46px rgba(44,8,91,.07);
}

.artist-visual { background: #f6f2fb; }
.portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #eee8f8; }
.portrait img { height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.artist-card:hover .portrait img { transform: scale(1.04); }
.portrait-kirsten img { object-position: 52% 48%; }
.portrait-princess img { object-position: 50% 45%; }
.portrait-nathalie img { object-position: 62% 50%; }

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(28,5,58,.46));
  pointer-events: none;
}

.instagram-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 16px;
  color: var(--violet-dark);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(253,252,255,.95), rgba(242,233,255,.78));
  font-size: .78rem;
  font-weight: 820;
  letter-spacing: .03em;
  text-decoration: none;
}

.instagram-tag svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.instagram-tag .ig-dot { fill: currentColor; stroke: none; }
.instagram-tag:hover, .instagram-tag:focus-visible { color: var(--pink); }

.artist-copy { padding: 26px 26px 30px; }
.role { margin: 0 0 6px; font-size: .65rem; }
.artist-copy h3 { margin: 0 0 15px; color: var(--violet-dark); font-size: clamp(1.55rem, 2vw, 2rem); letter-spacing: -.035em; }
.artist-copy p:last-child { margin: 0; color: #5a5561; font-size: .95rem; }

.moments { border-top: 1px solid var(--line); }
.moments-intro h2 { max-width: 700px; }

.media-collage {
  display: grid;
  gap: 18px;
}

.still-row {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(260px, 1fr);
  gap: 18px;
  align-items: start;
}

.clip-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 4vw, 44px);
}

.media-collage figure { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: #170b2b; box-shadow: 0 14px 34px rgba(43,8,87,.1); }
.media-collage img, .media-collage video { height: 100%; object-fit: cover; }
.media-collage figcaption { position: absolute; z-index: 3; left: 14px; bottom: 14px; padding: 8px 11px; color: white; background: rgba(22,8,43,.68); backdrop-filter: blur(8px); border-radius: 999px; font-size: .72rem; font-weight: 720; pointer-events: none; }
.media-collage figcaption span { color: #7aebff; margin-right: 5px; text-transform: uppercase; letter-spacing: .12em; }

.still-wide { aspect-ratio: 3 / 2; }
.still-tall { aspect-ratio: 2 / 3; }
.still-tall img { object-fit: contain; }
.clip-live, .clip-bts { width: min(100%, 338px); aspect-ratio: 9 / 16; }

.finale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 56px;
  padding: clamp(76px, 10vw, 130px) clamp(24px, 7vw, 100px);
  border: 1px solid rgba(75,15,139,.16);
  border-radius: 36px;
  background: rgba(255,255,255,.65);
  box-shadow: var(--shadow);
  text-align: center;
}

.finale-prism {
  position: absolute;
  z-index: -1;
  inset: -42% 18%;
  opacity: .42;
  background: conic-gradient(from 30deg, #ff4368, #ffd83e, #99e64a, #1bd8ef, #573dd8, #f1359d, #ff4368);
  filter: blur(75px);
  transform: rotate(-12deg);
}

.finale-logo {
  width: min(100%, 780px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 16px 42px rgba(44, 7, 95, .1);
  line-height: 0;
}
.finale-logo img { width: 100%; height: auto; }
.finale-artists { margin: 20px 0 30px; color: var(--violet-dark); font-size: .82rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.finale-categories { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.finale-categories > * { padding: 8px 14px; border: 1px solid rgba(72,15,137,.22); border-radius: 999px; background: rgba(255,255,255,.7); color: var(--violet-dark); font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; }
.finale-categories strong { color: white; background: var(--violet-dark); }
.finale-cta { margin-top: 30px; }

footer {
  width: min(100% - 40px, var(--max));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .78rem;
}

footer p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px 22px; }
.footer-links a { color: var(--violet); text-underline-offset: 3px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 72px; }
  .hero-copy { max-width: 720px; }
  .hero-media { width: min(100%, 460px); margin: 0 auto; }
  .story-grid { grid-template-columns: 1fr .55fr; gap: 45px; }
  .artist-grid { grid-template-columns: 1fr; }
  .artist-card { display: grid; grid-template-columns: minmax(230px, .72fr) 1fr; }
  .portrait { aspect-ratio: 4 / 4.4; }
  .artist-copy { align-self: center; padding: 34px; }
}

@media (max-width: 760px) {
  .site-header { min-height: 66px; grid-template-columns: 1fr auto; padding: 10px 20px; }
  nav { display: none; }
  .hero { width: min(100% - 30px, 650px); padding: 48px 0 62px; gap: 58px; }
  .cover-logo { width: min(100%, 620px); }
  .category-block { padding: 19px; }
  .orbit-three { right: -8px; }
  .section-shell { width: min(100% - 32px, 650px); padding: 88px 0; }
  .story-grid, .section-intro { grid-template-columns: 1fr; }
  .section-intro { gap: 18px; }
  .poster-card { width: min(90%, 420px); margin: 0 auto; transform: none; }
  .artist-card { display: block; }
  .portrait { aspect-ratio: 4 / 4.7; }
  .still-row { grid-template-columns: 1fr; }
  .still-tall { width: min(100%, 420px); justify-self: center; }
  .clip-row { display: grid; grid-template-columns: 1fr 1fr; }
  .clip-live, .clip-bts { width: 100%; }
  .finale { width: min(100% - 20px, 650px); border-radius: 26px; }
  footer { flex-direction: column; }
  .footer-links { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .nav-listen { min-height: 38px; padding: 7px 14px; }
  .artist-line { display: grid; gap: 3px; }
  .artist-line span { display: none; }
  .also-submitted { align-items: flex-start; flex-direction: column; }
  .also-submitted i { display: none; }
  .primary-cta { width: 100%; justify-content: flex-start; }
  .orbit-label { display: none; }
  .clip-row { grid-template-columns: 1fr; }
  .clip-live, .clip-bts { width: min(100%, 360px); justify-self: center; }
  .finale-artists { display: grid; gap: 4px; }
  .finale-artists span { display: none; }
  .finale-categories { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}