@font-face {
  font-family: Teko;
  src: url("assets/teko.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --poster-ink: #110b16;
  --poster-paper: #f5efd9;
  --poster-yellow: #f6f53d;
  --poster-pink: #ff36a6;
  --poster-blue: #16d8ff;
  --poster-purple: #a260fa;
  --display-font: Teko, "Arial Narrow", "DM Sans", sans-serif;
  --ink: var(--poster-ink);
  --paper: var(--poster-paper);
  --acid: var(--poster-yellow);
  --rule: #776682;
  --sans: "DM Sans", Arial, sans-serif;
  --display: var(--display-font);
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --gutter: clamp(14px, 3.1vw, 52px);
  --display-size: clamp(3rem, 7.5vw, 7.75rem);
  color: var(--paper);
  background: var(--ink);
  font: 400 16px/1.5 var(--sans);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--poster-purple) var(--ink); }
body, h1, h2, h3, p { margin: 0; }
::selection { background: var(--poster-pink); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
section[id], div[id] { scroll-margin-top: 80px; }
.symbols { position: absolute; width: 0; height: 0; }
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shell { width: min(calc(100% - 2 * var(--gutter)), 96rem); margin-inline: auto; }
.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 12px 16px;
  background: var(--acid);
  color: var(--ink);
}
.skip:focus { transform: none; }
.display {
  font: 700 var(--display-size)/.83 var(--display);
  letter-spacing: -.026em;
  text-transform: uppercase;
}
.button, .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  min-height: 44px;
  font: 700 1.15rem/1 var(--display);
  letter-spacing: .035em;
  text-transform: uppercase;
}
.button { padding: .65rem 1rem .55rem; border: 1px solid var(--ink); }
.button--acid { background: var(--acid); color: var(--ink); }
.button--acid:is(:hover, :focus-visible) { background: var(--poster-blue); color: var(--ink); }
.text-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; }
.text-link:is(:hover, :focus-visible) { text-decoration-thickness: 2px; }

.header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--poster-pink);
  background: var(--ink);
}
.header__home { flex: 0 1 194px; min-width: 100px; }
.header__home img { width: 100%; height: auto; filter: invert(89%) sepia(94%) saturate(516%) hue-rotate(11deg) brightness(111%); }
.header__home:focus-visible { outline-color: var(--acid); }
.header__nav { display: flex; align-items: center; gap: clamp(.65rem, 2vw, 2rem); }
.header__nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font: 600 clamp(1rem, 1.65vw, 1.3rem)/1 var(--display);
  letter-spacing: .045em;
  text-transform: uppercase;
}
.header__nav a:is(:hover, :focus-visible) { color: var(--poster-blue); }
.header__track { position: relative; }
.header__track::after {
  content: "";
  position: absolute;
  inset: auto auto 1px 0;
  width: 100%;
  height: 2px;
  background: var(--poster-pink);
  transform: scaleX(var(--chapter-progress, 0));
  transform-origin: left;
}
.header__nav .header__inquire { padding-inline: .9rem; background: var(--poster-blue); color: var(--ink); }
.header__nav .header__inquire:is(:hover, :focus-visible) { background: var(--acid); color: var(--ink); }

.stage { padding: clamp(10px, 1.9vw, 28px) var(--gutter) 0; }
.stage__poster {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  align-items: stretch;
  min-height: min(650px, calc(100svh - 130px));
  border: 1px solid var(--poster-pink);
  background: #21102c;
}
.stage__message {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(1rem, 2.1vw, 2rem);
  padding: clamp(1.5rem, 4.5vw, 5rem);
}
.stage h1 {
  color: var(--acid);
  font: 700 clamp(4.15rem, 11.4vw, 11.5rem)/.76 var(--display);
  letter-spacing: -.018em;
  text-transform: uppercase;
}
.stage h1 span { color: var(--poster-pink); }
.stage__message p {
  max-width: 38ch;
  color: var(--paper);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.42;
}
.stage__artist {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  margin: clamp(8px, 1.25vw, 20px);
  border: 3px solid var(--poster-blue);
  background: var(--poster-blue);
  color: var(--ink);
}
.stage__artist-photo { position: relative; display: block; min-height: 280px; }
.stage__artist-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 41%; }
.stage__artist a:focus-visible { outline-offset: -5px; outline-color: var(--acid); }
.stage__artist figcaption a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: .35rem .75rem .15rem;
  font: 700 clamp(1.5rem, 2.7vw, 2.4rem)/1 var(--display);
  text-transform: uppercase;
}
.stage__artist figcaption a:hover { background: var(--acid); }
.stage__lights {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 60% 3%, #7a246b 0, transparent 65%), radial-gradient(ellipse at 5% 90%, #4a2771 0, transparent 60%);
  transition: opacity .24s ease;
}
.stage--lit .stage__lights { opacity: 1; }
.stage__rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.5rem, 2vw, 1.75rem);
  min-height: 52px;
  color: var(--paper);
  font: 600 clamp(.88rem, 1.45vw, 1.15rem)/1 var(--display);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.stage__rail-ink {
  flex: 1;
  height: 7px;
  background: linear-gradient(90deg, var(--poster-pink) 0 25%, var(--poster-purple) 25% 50%, var(--poster-blue) 50% 75%, var(--acid) 75% 100%);
}
.stage__toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  text-transform: inherit;
  white-space: nowrap;
}
.stage__toggle .icon, .stage__state { color: var(--acid); }

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(.25rem, 2vw, 2rem);
  margin: 0 var(--gutter);
  padding: clamp(2.2rem, 6vw, 6rem) clamp(1rem, 3.1vw, 3rem);
  border: 1px solid var(--poster-purple);
  background: var(--ink);
}
.story__title { color: var(--acid); }
.story__aside {
  display: grid;
  gap: .8rem;
  max-width: 49ch;
  margin-top: clamp(1.15rem, 2vw, 2rem);
  color: var(--paper);
}
.story__aside .text-link { justify-self: start; color: var(--poster-blue); }
.story__signal { width: 100%; height: auto; }

.market {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(1.4rem, 3.8vw, 4rem) var(--gutter);
  background: var(--poster-blue);
  color: var(--ink);
}
.market__title { font-size: clamp(2.8rem, 6.6vw, 7rem); }
.market__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink);
  list-style: none;
}
.market__list li {
  padding: .7rem .85rem .55rem;
  font: 600 clamp(1rem, 1.9vw, 1.55rem)/1 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.market__list li:nth-child(even) { border-left: 1px solid var(--ink); }
.market__list li:nth-child(n+3) { border-top: 1px solid var(--ink); }

.process {
  padding: clamp(3.5rem, 8vw, 9rem) var(--gutter);
  background: var(--ink);
  color: var(--paper);
}
.process h2 { color: var(--acid); }
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(1.6rem, 4.2vw, 4.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--poster-purple);
  border-bottom: 1px solid var(--poster-purple);
  list-style: none;
}
.process__steps li {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: .65rem;
  align-items: end;
  min-height: 200px;
  padding: clamp(13px, 1.8vw, 28px);
}
.process__steps li + li { border-left: 1px solid var(--poster-purple); }
.process__steps li > span {
  align-self: start;
  color: var(--poster-pink);
  font: 700 clamp(2.2rem, 4.6vw, 4.1rem)/.85 var(--display);
}
.process__steps h3 { font: 700 clamp(1.35rem, 2.3vw, 2.5rem)/.96 var(--display); text-transform: uppercase; }
.process__steps p { max-width: 42ch; line-height: 1.45; }

@media (max-width: 720px) {
  .header { min-height: 58px; }
  .stage__poster { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .stage__message { padding-bottom: .75rem; }
  .stage h1 { font-size: clamp(4.35rem, 17.9vw, 7.75rem); }
  .stage__artist { min-height: clamp(290px, 70vw, 500px); }
  .stage__artist-photo { min-height: 0; }
  .stage__artist-photo img { object-position: center 37%; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__signal { width: min(100%, 420px); justify-self: center; }
  .market { grid-template-columns: minmax(0, 1fr); }
  .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__steps li { min-height: 150px; }
  .process__steps li:nth-child(odd) { border-left: 0; }
  .process__steps li:nth-child(n+3) { border-top: 1px solid var(--poster-purple); }
}

@media (max-width: 520px) {
  .header__home { flex-basis: 133px; }
  .header__nav { gap: .55rem; }
  .header__nav .header__track { display: none; }
  .header__nav .header__inquire { padding-inline: .45rem; }
  .header__nav :is(.header__artist, .header__inquire) { font-size: .95rem; white-space: nowrap; }
  .header__inquire .icon { width: 12px; }
  .process__steps p { font-size: .875rem; }
}

@media (max-width: 360px) {
  .header { gap: 7px; }
  .header__home { min-width: 84px; }
  .header__nav { gap: .38rem; }
}

@media (max-width: 340px) {
  .stage h1 { font-size: 3.75rem; }
}

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