/* Phone first. The song title leads, then the hunt, the prize and the entry action.
   The look is found surveillance footage: scan lines, a viewfinder, a departure board. */
.hero-public { min-height: 0; align-items: start; padding-bottom: 28px; }
.hero-public .hero-plate {
  opacity: .5;
  object-position: 55% 40%;
  filter: grayscale(1) contrast(1.2) brightness(.62);
  transform: translate3d(0, var(--plate-shift, 0px), 0) scale(1.06);
  will-change: transform;
}
.hero-public .hero-dark {
  background: linear-gradient(180deg, rgba(5, 8, 7, .35), rgba(5, 8, 7, .55) 45%, var(--void) 92%),
    radial-gradient(120% 80% at 30% 30%, transparent 35%, rgba(5, 8, 7, .85) 90%);
}
.hero-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .32) 0 1px, transparent 1px 3px);
}
.hero-frame { position: absolute; inset: 10px; pointer-events: none; }
.hero-frame span { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(255, 255, 255, .5); }
.hero-frame span:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.hero-frame span:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.hero-frame span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.hero-frame span:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.hunt-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 14px;
}
.hunt-hero-copy, .hunt-hero-prize, .hero-board { min-width: 0; }
.hero-hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}
.hud-rec { display: inline-flex; align-items: center; gap: 7px; }
.hud-rec::before { content: ""; width: 8px; height: 8px; background: var(--orchid); }
.hero-title-wrap { position: relative; }
.hero-public h1 {
  font-size: clamp(64px, 19.5vw, 136px);
  line-height: .9;
  margin: 0;
  white-space: normal;
  letter-spacing: -.01em;
}
.hero-beam { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #fff; opacity: 0; pointer-events: none; }
.hero-release-summary {
  max-width: 30ch;
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .14em;
  color: var(--mist);
}
.hero-hunt-title {
  margin: 0;
  padding-top: 10px;
  border-top: 2px solid var(--orchid);
  width: fit-content;
  margin-top: 10px;
  font-family: var(--caps);
  font-size: clamp(36px, 11.5vw, 56px);
  font-weight: 400;
  line-height: .95;
}
.hunt-hero-intro { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--white); text-wrap: pretty; }
.hero-hunt-action { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--mist); }

/* Evidence tag: the prize card. */
.hunt-hero-prize {
  margin-top: 12px;
  background: rgba(10, 16, 15, .94);
  box-shadow: inset 0 0 0 1px #536358;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.prize-tag-head {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 7px 14px;
  border-bottom: 1px dashed #536358;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--mist);
}
.prize-tag-head span + span { color: var(--muted); }
.prize-tag-body { display: flex; flex-direction: column; padding: 8px 14px 14px; }
.prize-tag-body .hero-entry { order: 3; }
.prize-tag-body .hero-ended { order: 4; }
.prize-tag-body .hero-prize-likeness { order: 5; }
.prize-tag-body .hero-terms { order: 6; }
.hunt-hero-prize .eyebrow { margin: 0; font-size: 11px; color: var(--muted); }
.hero-prize-amount {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 2px 0 0;
  font-family: var(--caps);
  font-size: clamp(54px, 16vw, 74px);
  line-height: .95;
  color: var(--orchid);
}
.hero-prize-amount span { margin-bottom: .55em; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--white); }
.hero-prize-rows { margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.hero-prize-rows > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
.hero-prize-rows dt { font-weight: 700; }
.hero-prize-rows dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.hero-prize-rows .tbc { color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.hero-prize-rows .prize-cash { font-family: var(--caps); font-size: 22px; line-height: 1; color: var(--orchid); }
.redact { display: inline-block; width: 44px; height: 12px; background: #000; box-shadow: inset 0 0 0 1px var(--rule); vertical-align: middle; }
.hero-prize-likeness { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--mist); }
.prize-tag-body .hero-entry { margin-top: 10px; }
.hero-entry { width: 100%; justify-content: space-between; }
.hero-entry:active { transform: translateY(2px); }
.hero-ended { margin: 0 0 4px; padding: 12px; box-shadow: inset 0 0 0 1px var(--white); font-size: 12px; line-height: 1.6; }
.hero-ended strong { display: block; letter-spacing: .1em; }
.hero-terms { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.hero-terms a { color: var(--mist); }

/* Departure board. Letters split into tiles by motion.js; plain text without it. */
.hero-board {
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(5, 8, 7, .9);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.board-head { display: none; margin: 0; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.board-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 8px 0; }
.board-row + .board-row { border-top: 1px solid var(--rule); }
.board-row dd { margin: 0; min-width: 0; }
.board-release { flex: 1 1 100%; }
.board-status { display: inline-flex; align-items: center; gap: 10px; }
/* A slash, never a drawn line: a line between date and status reads as a long dash. */
.board-status::before { content: "/"; color: var(--muted); font-size: 13px; font-weight: 700; }
.flap { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.flap-tiles { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.flap-word { display: inline-flex; gap: 2px; white-space: nowrap; }
.flap-cell {
  display: inline-block;
  min-width: .7em;
  padding: .12em .08em;
  text-align: center;
  line-height: 1.25;
  background: linear-gradient(#17231f 0 49%, #050807 49% 51%, #101917 51%);
  box-shadow: inset 0 0 0 1px #1f2e29;
}
.board-date .flap, .board-status .flap { font-size: 12px; }
.flap.hit .flap-cell { color: var(--orchid); }

@media (min-width: 721px) {
  .hero-public { padding-bottom: 36px; }
  .hero-frame { inset: 22px 28px; }
  .hero-frame span { width: 28px; height: 28px; }
  .hunt-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    column-gap: clamp(32px, 5vw, 80px);
    padding-top: 22px;
  }
  .hero-hud { grid-column: 1 / -1; font-size: 12px; margin-bottom: 18px; }
  .hero-public h1 { font-size: clamp(104px, 12.6vw, 184px); }
  .hero-release-summary { max-width: none; margin-top: 14px; font-size: clamp(12px, 1.05vw, 15px); }
  .hero-hunt-title { margin-top: 24px; padding-top: 20px; font-size: clamp(52px, 5.8vw, 84px); }
  .hunt-hero-intro { margin-top: 16px; font-size: clamp(16px, 1.45vw, 21px); max-width: 34ch; }
  .hero-hunt-action { font-size: 15px; }
  .hunt-hero-prize { margin-top: 0; align-self: start; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
  .prize-tag-head { padding: 13px 22px; font-size: 12px; }
  .prize-tag-body { display: block; padding: 14px 22px 20px; }
  .hero-prize-likeness { margin: 10px 0 14px; }
  .prize-tag-body .hero-entry { margin-top: 0; }
  .hero-prize-amount { font-size: clamp(88px, 8.6vw, 124px); }
  .hero-prize-rows dd { flex-wrap: nowrap; }
  .hero-prize-likeness { font-size: 13px; }
  .hero-board { grid-column: 1 / -1; margin-top: 30px; padding: 14px 20px; }
  .board-head, .board-row { display: grid; grid-template-columns: minmax(0, 1fr) 210px 270px; gap: 24px; }
  .board-head { display: grid; }
  .board-row { padding: 9px 0; }
  .board-release { flex: none; }
  .board-status::before { display: none; }
  .flap { font-size: clamp(14px, 1.25vw, 18px); }
  .board-date .flap, .board-status .flap { font-size: clamp(13px, 1.15vw, 17px); }
}

/* The hunt. */
.hunt-intro { position: relative; border-top: 1px solid var(--rule); background: var(--hull); }
.hunt-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.section-tc { margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hunt-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-block: 28px 0; }
.count-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px #1f2e29; }
.count-flap { display: block; font-weight: 400; line-height: 1; }
.count-digits { display: inline-flex; gap: 4px; }
.count-digits .digit {
  display: inline-block;
  width: .62em;
  text-align: center;
  font-family: var(--caps);
  font-size: clamp(72px, 22vw, 96px);
  line-height: 1.12;
  background: linear-gradient(#17231f 0 49%, #050807 49% 51%, #101917 51%);
  box-shadow: inset 0 0 0 1px #1f2e29;
}
.count-digits:not(:has(.digit)) { font-family: var(--caps); font-size: clamp(72px, 22vw, 96px); }
.count-card > span { font-family: var(--caps); font-size: 26px; line-height: 1; letter-spacing: .01em; color: var(--white); }
.hunt-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; }
.hunt-steps li { border-top: 2px solid var(--white); padding-top: 12px; }
.step-num { margin: 0; font-size: 11px; letter-spacing: .14em; color: var(--orchid); }
.hunt-steps h3 { margin: 6px 0 0; font-family: var(--caps); font-size: 34px; font-weight: 400; line-height: 1; }
.hunt-steps li > p:last-child { margin: 8px 0 0; font-size: 14px; color: var(--mist); max-width: 40ch; }
.prize-ledger { margin-top: 40px; box-shadow: inset 0 0 0 1px #536358; }
.ledger-head { display: flex; justify-content: space-between; margin: 0; padding: 10px 14px; border-bottom: 1px dashed #536358; font-size: 11px; letter-spacing: .14em; color: var(--mist); }
.ledger-head span + span { color: var(--muted); }
.ledger-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px; }
.ledger-row + .ledger-row { border-top: 1px solid var(--rule); }
.ledger-place { grid-row: span 2; margin: 0; font-family: var(--caps); font-size: 36px; line-height: 1; }
.ledger-amount { margin: 0; font-family: var(--caps); font-size: 56px; line-height: 1; color: var(--orchid); }
.ledger-amount .redact { width: 120px; height: 22px; }
.ledger-note { margin: 0; font-size: 12px; color: var(--mist); letter-spacing: .02em; }
.prize-note { margin: 18px 0 32px; }

@media (min-width: 721px) {
  .section-tc { font-size: 12px; }
  .hunt-counts { gap: 24px; padding-top: 48px; }
  .count-card { flex-direction: row; align-items: center; gap: 28px; padding: 24px 28px; }
  .count-digits .digit, .count-digits:not(:has(.digit)) { font-size: clamp(110px, 12vw, 180px); }
  .count-card > span { font-size: clamp(32px, 3.4vw, 48px); }
  .hunt-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
  .hunt-steps h3 { font-size: clamp(36px, 3.1vw, 44px); }
  .hunt-steps li > p:last-child { font-size: 15px; }
  .prize-ledger { margin-top: 64px; }
  .ledger-head { padding: 14px 24px; font-size: 12px; }
  .ledger-row { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); padding: 20px 24px; }
  .ledger-place { grid-row: auto; font-size: 56px; }
  .ledger-amount { font-size: clamp(64px, 6.6vw, 96px); }
  .ledger-amount .redact { width: 220px; height: 44px; }
  .ledger-note { font-size: 13px; letter-spacing: .06em; }
  .prize-note { font-size: 16px; }
}

/* Phase actions. Before the song the pre-save leads; after it, listen, then watch and hunt. */
.hero-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hero-cta { width: 100%; min-height: 48px; justify-content: space-between; }
.hero-reveal-line { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--white); max-width: 42ch; }
[data-revealed] .hero-public-actions .hero-cta { background: transparent; color: var(--white); border-color: #82958b; }
.hero-entry.btn-secondary { background: transparent; color: var(--white); border-color: #82958b; }
.board-link { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.board-link:hover .flap-cell, .board-link:focus-visible .flap-cell { box-shadow: inset 0 0 0 1px var(--orchid); }
.board-row-presave .board-release .flap-cell { color: var(--white); }

/* Watch and hunt: the official player with the entry form right beside it. */
.watch-layout { display: block; }
.watch-form { margin-top: 24px; }
.watch-form > .eyebrow { margin-bottom: 12px; color: var(--mist); }
.watch-note { max-width: 60ch; }
.watch-layout.is-live .watch-video { position: sticky; top: 0; z-index: 6; padding-bottom: 8px; background: var(--void); }
.watch-layout.is-live .release-status, .watch-layout.is-live .youtube-attribution { margin-top: 8px; }
/* Phone: keep the pinned player short so the form stays usable under it. */
.watch-layout.is-live .vault { aspect-ratio: 16 / 9; min-height: 0; }
@media (max-width: 1000px) { .watch-layout.is-live .release-status { display: none; } }
@media (min-width: 1001px) {
  .watch-layout.is-live { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); gap: 32px; align-items: start; }
  .watch-layout.is-live .watch-video { top: 16px; padding-bottom: 0; }
  .watch-layout.is-live .watch-form { margin-top: 0; }
}

/* Listen, after the song release: the official LANDR page opens in place on request. */
.listen-section { border-top: 1px solid var(--rule); }
.listen-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.listen-provider { margin-top: 24px; }
.listen-note { max-width: 60ch; }
.release-departures { display: grid; gap: 6px; margin: 0 0 24px; padding: 14px; background: var(--hull); box-shadow: inset 0 0 0 1px #1f2e29; }
.release-departures p { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; color: var(--mist); }
.release-departures strong { color: var(--white); }
.release-player { margin-bottom: 24px; }
.release-player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 240px; border: 0; background: var(--void); }
@media (min-width: 721px) {
  .hero-actions { flex-direction: row; flex-wrap: wrap; margin-top: 26px; }
  .hero-cta { width: auto; min-width: 280px; }
  .listen-heading { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

/* Motion. Hand-written, no outside library. Every effect has a still state.
   motion.js adds [data-motion] to <html> only when reduced motion is not requested. */
@media (prefers-reduced-motion: no-preference) {
  #hero-title { animation: title-scan .9s steps(18, end) .1s both; }
  .hero-beam { animation: title-beam .9s linear .1s both; }
  .hud-rec::before { animation: rec-blink 1.6s steps(1) 3; }
  [data-motion] [data-reveal] { transition: opacity .7s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1); }
  [data-motion] [data-reveal]:not(.is-in):not(:focus-within) { opacity: 0; transform: translate3d(0, 24px, 0); }
  [data-motion] [data-reveal].is-in::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 140px;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .06) 55%, transparent);
    animation: tape-track 1.2s ease-in .15s both;
  }
  .flap-cell.flipping { animation: flap-tick .09s steps(2, end); }
  .count-digits .digit.flipping { animation: flap-tick .09s steps(2, end); }
}
@keyframes title-scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes title-beam { 0% { top: 0; opacity: 1; } 96% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes rec-blink { 50% { opacity: .25; } }
@keyframes tape-track { from { transform: translateY(-20%); opacity: 1; } to { transform: translateY(var(--track-end, 600px)); opacity: 0; } }
@keyframes flap-tick { 50% { transform: scaleY(.15); } }
.release-section, .follow-section { position: relative; }
.presave-section { position: relative; }
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal]::before { display: none !important; }
}