:root {
  --black: #000000;
  --ink: #151610;
  --paper: #f7f5ef;
  --paper-2: #f3efe6;
  --green: #5d6d61;
  --green-dark: #354139;
  --tan: #c8aa7a;
  --rust: #a95c35;
  --muted: rgba(21, 22, 16, 0.68);
  --line: rgba(21, 22, 16, 0.14);
  --line-light: rgba(247, 245, 239, 0.22);
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --condensed: Archivo, var(--sans);
  /* Editorial headline face, matching the homepage. This page has no cedar
     italic accents, so Fraunces is no longer referenced here at all and has
     been dropped from the font request rather than downloaded unused. */
  --headline: "DM Serif Display", Georgia, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
}

body.reveal-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(169, 92, 53, 0.55);
  outline-offset: 3px;
}

.site-header {
  align-items: center;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-light);
  color: var(--paper);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  color: var(--paper);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
}

.site-header a {
  color: rgba(247, 245, 239, 0.8);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-size: 0.94rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 44px;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.button-primary {
  background: var(--green);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--paper);
}

.button-primary:hover:not(:disabled) {
  background: var(--green-dark);
}

.button-secondary {
  background: rgba(247, 245, 239, 0.72);
  border-color: var(--line);
  color: var(--ink);
}

.text-button {
  background: transparent;
  border: 0;
  color: rgba(247, 245, 239, 0.82);
  cursor: pointer;
  font-weight: 800;
  min-height: 44px;
  padding: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.hero {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.42) 38%, rgba(0, 0, 0, 0.1) 72%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.34)),
    url("../assets/images/field-anthem-hero.png") center / cover;
  color: var(--paper);
  min-height: 78svh;
  position: relative;
}

.hero-inner,
.quiz-shell,
.result-grid,
.custom-cta,
.debug-panel {
  margin: 0 auto;
  max-width: 1180px;
  width: min(100% - 2rem, 1180px);
}

.hero-inner {
  align-items: center;
  display: flex;
  min-height: 78svh;
  padding: clamp(3rem, 8vw, 6rem) 0;
}

.hero-copy {
  max-width: 790px;
}

.eyebrow {
  color: var(--rust);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: var(--headline);
  /* DM Serif Display ships weight 400 only; anything heavier is faked. */
  font-weight: 400;
  line-height: 1;
  margin: 0;
}

h1 {
  font-size: clamp(3rem, 9vw, 6.4rem);
  max-width: 760px;
}

.hero-subhead,
.result-description,
.section-heading p,
.custom-cta p {
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.55;
}

.hero-subhead {
  color: rgba(247, 245, 239, 0.86);
  margin: 1.1rem 0 1.5rem;
  max-width: 680px;
}

.album-cover {
  aspect-ratio: 1;
  background:
    linear-gradient(135deg, rgba(247, 245, 239, 0.18), transparent 24%),
    radial-gradient(circle at 74% 20%, var(--cover-b, #a95c35), transparent 14rem),
    linear-gradient(145deg, var(--cover-a, #11100c), var(--cover-b, #a95c35) 52%, var(--cover-c, #5d6d61));
  border: 1px solid rgba(247, 245, 239, 0.35);
  border-radius: 7px;
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: clamp(1rem, 3vw, 1.5rem);
  position: relative;
}

.album-cover::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
  inset: 0;
  opacity: 0.3;
  position: absolute;
}

.album-cover.has-cover-image {
  background: #11120d var(--cover-image) center / cover no-repeat;
}

.album-cover.has-cover-image::before {
  display: none;
}

.album-cover.has-cover-image .album-frame {
  opacity: 0;
}

.album-frame {
  border: 2px solid rgba(247, 245, 239, 0.72);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  padding: 1rem;
  position: relative;
}

.album-frame span,
.album-frame small,
.album-frame p {
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.album-frame h2 {
  font-size: clamp(2rem, 6vw, 4.5rem);
}

.quiz-section,
.result-section {
  padding: clamp(2rem, 6vw, 5rem) 0;
}

.quiz-section {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.93)),
    linear-gradient(135deg, rgba(169, 92, 53, 0.12), transparent 60%),
    url("../assets/images/field-anthem-hero.png") center / cover;
  color: var(--paper);
  position: relative;
}

.result-section {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.62) 48%, rgba(0, 0, 0, 0.8)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.92)),
    url("../assets/images/field-anthem-hero.png") center / cover fixed;
  color: var(--paper);
  overflow: hidden;
  position: relative;
}

.result-section::before,
.result-section::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.result-section::before {
  animation: smokeDrift 18s ease-in-out infinite alternate;
  background:
    radial-gradient(ellipse at 28% 26%, rgba(247, 245, 239, 0.14), transparent 25rem),
    radial-gradient(ellipse at 72% 18%, rgba(190, 104, 48, 0.12), transparent 18rem);
  filter: blur(14px);
  inset: -12%;
  opacity: 0.72;
}

.result-section::after {
  background-image:
    linear-gradient(rgba(247, 245, 239, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 245, 239, 0.018) 1px, transparent 1px);
  background-size: 58px 58px;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.32;
}

.jukebox-atmosphere {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.smoke-wisp {
  animation: wispRise 13s ease-in-out infinite;
  background:
    radial-gradient(ellipse at 30% 48%, rgba(247, 245, 239, 0.22), transparent 44%),
    radial-gradient(ellipse at 68% 42%, rgba(247, 245, 239, 0.13), transparent 48%),
    radial-gradient(ellipse at 50% 64%, rgba(190, 104, 48, 0.12), transparent 50%);
  border-radius: 999px;
  filter: blur(18px);
  height: 28rem;
  opacity: 0.34;
  position: absolute;
  transform: rotate(-10deg);
  width: 13rem;
}

.lens-flare {
  animation: flareSweep 16s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at center, rgba(255, 224, 170, 0.5), rgba(205, 103, 45, 0.22) 14%, transparent 34%),
    linear-gradient(90deg, transparent, rgba(255, 226, 179, 0.18), transparent);
  border-radius: 999px;
  filter: blur(10px);
  height: 22rem;
  left: 58%;
  mix-blend-mode: screen;
  opacity: 0.42;
  position: absolute;
  top: 8%;
  transform: translate3d(0, 0, 0) rotate(-18deg);
  width: 44rem;
}

.smoke-wisp-one {
  animation-delay: -3s;
  bottom: -9rem;
  left: 48%;
}

.smoke-wisp-two {
  animation-delay: -8s;
  animation-duration: 17s;
  bottom: -11rem;
  left: 14%;
  opacity: 0.24;
  width: 16rem;
}

.smoke-wisp-three {
  animation-delay: -12s;
  animation-duration: 19s;
  bottom: -10rem;
  right: 12%;
  opacity: 0.28;
}

@keyframes smokeDrift {
  from {
    opacity: 0.42;
    transform: translate3d(-2%, 1%, 0) scale(1);
  }

  to {
    opacity: 0.82;
    transform: translate3d(3%, -2%, 0) scale(1.05);
  }
}

@keyframes wispRise {
  0% {
    opacity: 0;
    transform: translate3d(-1rem, 8rem, 0) rotate(-14deg) scale(0.88);
  }

  20% {
    opacity: 0.36;
  }

  55% {
    opacity: 0.26;
  }

  100% {
    opacity: 0;
    transform: translate3d(2.5rem, -34rem, 0) rotate(10deg) scale(1.26);
  }
}

@keyframes coverPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(247, 245, 239, 0.1),
      0 0 58px rgba(190, 104, 48, 0.22),
      0 38px 90px rgba(0, 0, 0, 0.58);
    transform: translateY(0);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(247, 245, 239, 0.14),
      0 0 96px rgba(209, 106, 52, 0.38),
      0 44px 98px rgba(0, 0, 0, 0.66);
    transform: translateY(-4px);
  }
}

@keyframes eqBounce {
  0%,
  100% {
    transform: scaleY(0.32);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes flareSweep {
  0% {
    opacity: 0.2;
    transform: translate3d(-16rem, 2rem, 0) rotate(-22deg) scale(0.86);
  }

  45% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.34;
    transform: translate3d(12rem, -2rem, 0) rotate(-10deg) scale(1.08);
  }
}

.quiz-shell {
  background:
    repeating-linear-gradient(135deg, rgba(247, 245, 239, 0.028) 0 2px, transparent 2px 24px),
    linear-gradient(160deg, rgba(86, 72, 57, 0.62), rgba(40, 32, 25, 0.86) 70%),
    rgba(34, 27, 21, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(200, 170, 122, 0.34);
  border-radius: 9px;
  box-shadow:
    inset 0 1px 0 rgba(247, 245, 239, 0.09),
    0 0 60px rgba(169, 92, 53, 0.14),
    0 30px 72px rgba(0, 0, 0, 0.5);
  color: var(--paper);
  padding: clamp(1rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

.progress-meta {
  color: rgba(247, 245, 239, 0.85);
  display: flex;
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.progress-track {
  background: rgba(247, 245, 239, 0.16);
  border-radius: 999px;
  height: 8px;
  margin-top: 0.55rem;
  overflow: hidden;
}

.progress-track span {
  background: var(--green);
  display: block;
  height: 100%;
  transition: width 180ms ease;
  width: 33%;
}

.quiz-heading {
  margin: clamp(1.5rem, 5vw, 3rem) 0 1.5rem;
}

.quiz-heading h2 {
  color: var(--paper);
  font-size: clamp(2rem, 6vw, 4.3rem);
  max-width: 850px;
}

.quiz-heading p:last-child {
  color: rgba(247, 245, 239, 0.7);
  margin-top: 0.8rem;
}

.option-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.option-card {
  background:
    linear-gradient(150deg, rgba(247, 245, 239, 0.07), transparent 56%),
    rgba(18, 14, 10, 0.66);
  border: 1px solid rgba(247, 245, 239, 0.2);
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(247, 245, 239, 0.06),
    0 8px 20px rgba(0, 0, 0, 0.32);
  color: var(--paper);
  cursor: pointer;
  display: grid;
  gap: 0.8rem;
  min-height: 112px;
  padding: 1rem;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.option-card:hover,
.option-card.is-selected {
  background:
    linear-gradient(135deg, rgba(190, 104, 48, 0.24), transparent 56%),
    rgba(22, 16, 11, 0.92);
  border-color: rgba(200, 170, 122, 0.7);
  box-shadow:
    0 0 0 1px rgba(200, 170, 122, 0.28),
    0 0 30px rgba(169, 92, 53, 0.3);
  transform: translateY(-2px);
}

.option-card.is-selected .option-mark {
  background: var(--rust);
  border-color: var(--tan);
  box-shadow: inset 0 0 0 5px rgba(20, 15, 11, 0.92);
}

.option-mark {
  border: 2px solid rgba(200, 170, 122, 0.72);
  border-radius: 999px;
  height: 24px;
  width: 24px;
}

.option-card strong {
  align-self: end;
  color: var(--paper);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-size: 1.4rem;
  line-height: 1;
  text-transform: uppercase;
}

.quiz-actions,
.result-actions,
.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.3rem;
}

.result-grid {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 7vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  position: relative;
  z-index: 1;
}

.result-copy > h2 {
  color: var(--paper);
  font-size: clamp(2.5rem, 7vw, 5.4rem);
  text-shadow: 0 0 34px rgba(0, 0, 0, 0.65);
}

.result-meta {
  color: rgba(247, 245, 239, 0.82);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0.8rem 0;
  text-transform: uppercase;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.tag-row span {
  background: rgba(247, 245, 239, 0.1);
  border: 1px solid rgba(247, 245, 239, 0.22);
  border-radius: 999px;
  color: rgba(247, 245, 239, 0.9);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  padding: 0.38rem 0.7rem;
  text-transform: uppercase;
}

.match-followup {
  align-items: center;
  background: rgba(14, 12, 9, 0.58);
  border: 1px solid rgba(247, 245, 239, 0.16);
  border-radius: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding: 1rem;
}

.match-feedback > strong,
.alternate-match > span {
  color: rgba(247, 245, 239, 0.72);
  display: block;
  font-family: var(--condensed);
  font-size: 0.76rem;
  font-variation-settings: "wdth" 76;
  letter-spacing: 0.08em;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.match-feedback > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.match-feedback button {
  background: rgba(247, 245, 239, 0.07);
  border: 1px solid rgba(247, 245, 239, 0.2);
  border-radius: 999px;
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.42rem 0.72rem;
}

.match-feedback button:hover,
.match-feedback button.is-selected {
  background: rgba(190, 104, 48, 0.24);
  border-color: var(--tan);
}

.match-feedback button:disabled {
  cursor: default;
  opacity: 0.58;
}

.match-feedback button.is-selected {
  opacity: 1;
}

.match-feedback > p {
  color: rgba(247, 245, 239, 0.7);
  font-size: 0.78rem;
  margin: 0.55rem 0 0;
  max-width: 350px;
}

.alternate-match {
  border-left: 1px solid rgba(247, 245, 239, 0.15);
  padding-left: 1.5rem;
}

.alternate-match .text-button {
  color: var(--tan);
  font-size: 0.9rem;
  margin: 0;
  text-align: left;
}

.alternate-match .text-button strong {
  font-family: var(--headline);
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 600;
}

.audio-card,
.lyrics-card,
.share-card,
.signup-form,
.pack-ready-card,
.custom-cta,
.debug-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 44%),
    rgba(14, 12, 9, 0.84);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(247, 245, 239, 0.18);
  border-radius: 7px;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
  color: var(--paper);
  margin-top: 1.3rem;
  padding: 1rem;
}

.audio-card {
  border-color: rgba(190, 104, 48, 0.48);
  box-shadow:
    0 0 0 1px rgba(247, 245, 239, 0.08),
    0 0 42px rgba(169, 92, 53, 0.2),
    0 20px 54px rgba(0, 0, 0, 0.42);
  position: relative;
}

.audio-card::before {
  background: #b84e2f;
  border-radius: 999px;
  box-shadow: 0 0 16px #d9633c;
  content: "";
  height: 10px;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 10px;
}

.eq-bars {
  align-items: end;
  display: flex;
  gap: 0.28rem;
  height: 2.3rem;
  margin-top: 0.9rem;
}

.eq-bars span {
  animation: eqBounce 900ms ease-in-out infinite;
  animation-play-state: paused;
  background: linear-gradient(180deg, #f7f5ef, #c56a39);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(197, 106, 57, 0.45);
  display: block;
  height: 100%;
  transform-origin: bottom;
  width: 0.42rem;
}

.audio-card.is-playing .eq-bars span {
  animation-play-state: running;
}

.eq-bars span:nth-child(2) {
  animation-delay: -180ms;
}

.eq-bars span:nth-child(3) {
  animation-delay: -340ms;
}

.eq-bars span:nth-child(4) {
  animation-delay: -520ms;
}

.eq-bars span:nth-child(5) {
  animation-delay: -690ms;
}

.pack-ready-card h3,
.share-card h3 {
  font-size: clamp(1.35rem, 3vw, 2.15rem);
}

.share-card p:last-child {
  color: rgba(247, 245, 239, 0.72);
  margin-top: 0.45rem;
}

audio {
  filter: sepia(0.16) saturate(0.86);
  margin-top: 0.8rem;
  width: 100%;
}

.preview-missing {
  color: var(--rust);
  font-weight: 800;
  margin-top: 0.7rem;
}

.lyrics-heading {
  align-items: baseline;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.lyrics-scroll {
  border-top: 1px solid rgba(247, 245, 239, 0.16);
  color: rgba(247, 245, 239, 0.78);
  line-height: 1.55;
  margin-top: 0.8rem;
  max-height: 280px;
  overflow: auto;
  padding-top: 0.8rem;
}

.lyrics-scroll p {
  margin: 0 0 0.35rem;
}

.lyric-break {
  display: block;
  height: 0.85rem;
}

.signup-form label {
  display: block;
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.song-form {
  background:
    linear-gradient(135deg, rgba(93, 109, 97, 0.22), transparent 48%),
    rgba(14, 12, 9, 0.88);
}

.signup-row input {
  border: 1px solid var(--line);
  border-radius: 5px;
  flex: 1 1 220px;
  min-height: 44px;
  padding: 0.75rem 0.85rem;
}

.frame-action {
  margin-top: 1rem;
}

.form-note,
.result-description,
.share-card p,
.custom-cta p,
.custom-cta small {
  color: rgba(247, 245, 239, 0.72);
}

.result-art {
  position: sticky;
  top: 6rem;
}

.result-art .album-cover {
  animation: coverPulse 4.8s ease-in-out infinite;
  border-color: rgba(247, 245, 239, 0.36);
  box-shadow:
    0 0 0 1px rgba(247, 245, 239, 0.1),
    0 0 80px rgba(190, 104, 48, 0.28),
    0 38px 90px rgba(0, 0, 0, 0.58);
}

.result-art .album-cover::after {
  background:
    linear-gradient(90deg, transparent, rgba(247, 245, 239, 0.2), transparent);
  content: "";
  inset: 0;
  opacity: 0.24;
  position: absolute;
  transform: translateX(-70%) skewX(-15deg);
}

.custom-cta {
  align-items: center;
  background:
    radial-gradient(circle at 7% 20%, rgba(190, 104, 48, 0.22), transparent 26%),
    linear-gradient(115deg, rgba(93, 109, 97, 0.22), transparent 55%),
    rgba(14, 12, 9, 0.92);
  border-color: rgba(247, 245, 239, 0.24);
  border-radius: 12px;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 220px);
  margin-top: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  position: relative;
  scroll-margin-top: 90px;
  z-index: 1;
}

.custom-cta h2 {
  font-size: clamp(2.15rem, 4vw, 3.65rem);
  line-height: 0.95;
  margin-top: 0.5rem;
  max-width: 690px;
}

.custom-cta-record {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, var(--tan) 0 7%, #191713 8% 24%, #080806 25% 42%, #1a1814 43% 44%, #090908 45% 62%, #1b1915 63% 64%, #080807 65%);
  border: 1px solid rgba(247, 245, 239, 0.16);
  border-radius: 50%;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  width: clamp(86px, 9vw, 124px);
}

.custom-cta-record span {
  color: var(--ink);
  font-family: var(--condensed);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  position: relative;
}

.custom-cta-kicker {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.custom-cta-kicker .eyebrow {
  margin: 0;
}

.custom-status {
  border: 1px solid rgba(190, 104, 48, 0.48);
  border-radius: 999px;
  color: var(--tan);
  font-family: var(--condensed);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.28rem 0.55rem;
  text-transform: uppercase;
}

.custom-cta-copy > p {
  line-height: 1.55;
  margin: 0.85rem 0 0;
  max-width: 700px;
}

.custom-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.custom-features li {
  background: rgba(247, 245, 239, 0.08);
  border: 1px solid rgba(247, 245, 239, 0.14);
  border-radius: 999px;
  color: rgba(247, 245, 239, 0.82);
  font-family: var(--condensed);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.65rem;
  text-transform: uppercase;
}

.custom-cta-action {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: center;
}

.custom-cta-action small {
  font-size: 0.78rem;
  line-height: 1.4;
}

.debug-panel {
  margin-bottom: 2rem;
}

.debug-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.debug-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 1rem;
}

.debug-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 1rem;
}

.debug-card h3 {
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.debug-card ul {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
}

.debug-card li {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.site-footer {
  background: var(--black);
  color: rgba(247, 245, 239, 0.76);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
}

.toast {
  background: var(--black);
  border: 1px solid var(--line-light);
  border-radius: 6px;
  bottom: 1rem;
  box-shadow: var(--shadow);
  color: var(--paper);
  left: 50%;
  opacity: 0;
  padding: 0.8rem 1rem;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 1rem);
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 30;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.result-identity {
  color: var(--tan);
  font-family: var(--headline);
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  font-style: italic;
  font-weight: 600;
  margin: 0 0 0.45rem;
  text-shadow: 0 0 26px rgba(0, 0, 0, 0.62);
}

/* ===== Reveal stage ===== */
.reveal-stage {
  align-items: center;
  animation: revealFade 460ms ease both;
  background: radial-gradient(circle at 50% 36%, rgba(43, 26, 15, 0.92), rgba(0, 0, 0, 0.97) 72%);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  z-index: 60;
}

.reveal-stage[hidden] {
  display: none;
}

.reveal-stage.is-closing {
  animation: revealFadeOut 400ms ease both;
}

.reveal-smoke {
  animation: smokeDrift 14s ease-in-out infinite alternate;
  background:
    radial-gradient(ellipse at 30% 38%, rgba(247, 245, 239, 0.12), transparent 42%),
    radial-gradient(ellipse at 70% 62%, rgba(190, 104, 48, 0.18), transparent 46%);
  filter: blur(22px);
  inset: -20%;
  pointer-events: none;
  position: absolute;
}

.reveal-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.25rem;
  position: relative;
  width: min(100%, 640px);
  z-index: 1;
}

.reveal-kicker {
  animation: kickerPulse 1.4s ease-in-out infinite;
  color: rgba(247, 245, 239, 0.82);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin: 0 0 1.7rem;
  text-align: center;
  text-transform: uppercase;
}

.reveal-kicker.is-hidden {
  animation: none;
  opacity: 0;
  transition: opacity 280ms ease;
}

.reveal-deck {
  animation: deckIn 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  height: min(66vw, 300px);
  position: relative;
  width: min(66vw, 300px);
}

.reveal-record {
  align-items: center;
  animation: discSpin 3.1s linear infinite;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.92) 0 2px, rgba(32, 30, 28, 0.92) 2px 4px),
    #121110;
  border-radius: 50%;
  box-shadow:
    0 0 0 6px #0b0b0a,
    0 26px 70px rgba(0, 0, 0, 0.72),
    0 0 78px rgba(190, 104, 48, 0.4);
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
}

.reveal-disc-art {
  background: #1a140f var(--disc-image, none) center / cover no-repeat;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(247, 245, 239, 0.32),
    0 0 22px rgba(0, 0, 0, 0.5);
  height: 46%;
  width: 46%;
}

.reveal-disc-hole {
  background: #080807;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(247, 245, 239, 0.28);
  height: 4.5%;
  position: absolute;
  top: 47.75%;
  width: 4.5%;
}

.reveal-tonearm {
  animation: needleDrop 900ms ease 800ms both;
  background: linear-gradient(180deg, #d9d3c5, #8b857a);
  border-radius: 5px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.6);
  height: 52%;
  position: absolute;
  right: -7%;
  top: -8%;
  transform-origin: top right;
  width: 7px;
  z-index: 2;
}

.reveal-tonearm::after {
  background: #cbc5b8;
  border-radius: 50%;
  bottom: -9px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  content: "";
  height: 18px;
  left: -6px;
  position: absolute;
  width: 18px;
}

.reveal-text {
  animation: titleSlam 560ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  margin-top: 1.8rem;
  max-width: 560px;
  text-align: center;
}

.reveal-text[hidden] {
  display: none;
}

.reveal-text .reveal-identity {
  color: var(--tan);
  font-family: var(--headline);
  font-weight: 400;
  font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  font-style: italic;
  margin: 0 0 0.45rem;
}

.reveal-title {
  color: var(--paper);
  font-family: var(--headline);
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 5rem);
  line-height: 1;
  text-shadow: 0 0 42px rgba(190, 104, 48, 0.52);
}

.reveal-meta {
  color: rgba(247, 245, 239, 0.82);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0.85rem 0 1.4rem;
  text-transform: uppercase;
}

.reveal-actions {
  display: flex;
  justify-content: center;
}

.reveal-skip {
  color: rgba(247, 245, 239, 0.7);
  margin-top: 0.55rem;
}

@keyframes revealFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes revealFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes deckIn {
  from { opacity: 0; transform: translateY(26px) scale(0.7); }
  to { opacity: 1; transform: none; }
}

@keyframes discSpin {
  to { transform: rotate(360deg); }
}

@keyframes kickerPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes needleDrop {
  from { transform: rotate(-34deg); }
  to { transform: rotate(6deg); }
}

@keyframes titleSlam {
  0% { filter: blur(7px); opacity: 0; transform: scale(1.16); }
  100% { filter: blur(0); opacity: 1; transform: scale(1); }
}

/* ===== Custom anthem order modal ===== */
.order-modal {
  background: linear-gradient(160deg, rgba(42, 33, 26, 0.98), rgba(18, 14, 11, 0.98));
  border: 1px solid rgba(200, 170, 122, 0.3);
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
  color: var(--paper);
  max-height: 92vh;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  width: min(94vw, 640px);
}

.order-modal::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.order-close-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.25rem;
}

.modal-close {
  background: transparent;
  border: 0;
  color: rgba(247, 245, 239, 0.7);
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  padding: 0.1rem 0.5rem;
}

.modal-close:hover {
  color: var(--paper);
}

.order-head h2 {
  color: var(--paper);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.5rem;
}

.order-head p {
  color: rgba(247, 245, 239, 0.78);
  line-height: 1.5;
}

.order-price {
  color: rgba(247, 245, 239, 0.7);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-top: 0.9rem;
  text-transform: uppercase;
}

.order-price #orderPriceLead {
  color: var(--tan);
  font-size: 1.4rem;
}

.order-form {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.2rem;
}

.order-form fieldset {
  border: 1px solid rgba(247, 245, 239, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0.9rem 1.1rem 1.15rem;
}

.order-form legend {
  color: var(--tan);
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0 0.4rem;
  text-transform: uppercase;
}

.order-form label {
  color: rgba(247, 245, 239, 0.82);
  display: grid;
  font-family: var(--condensed);
  font-variation-settings: "wdth" 76;
  font-weight: 800;
  gap: 0.35rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.order-form input,
.order-form select,
.order-form textarea {
  background: rgba(8, 7, 6, 0.55);
  border: 1px solid rgba(247, 245, 239, 0.2);
  border-radius: 6px;
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: normal;
  min-height: 44px;
  padding: 0.6rem 0.7rem;
  text-transform: none;
  width: 100%;
}

.order-form textarea {
  resize: vertical;
}

.order-form input::placeholder,
.order-form textarea::placeholder {
  color: rgba(247, 245, 239, 0.4);
}

.order-two-col {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr 1fr;
}

.req {
  color: var(--rust);
}

.order-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
}

.order-radio {
  align-items: center;
  color: rgba(247, 245, 239, 0.85);
  display: flex;
  flex-direction: row;
  font-family: var(--sans);
  font-weight: 600;
  gap: 0.45rem;
  letter-spacing: normal;
  text-transform: none;
}

.order-radio input {
  min-height: 0;
  width: auto;
}

.order-submit {
  margin-top: 0.4rem;
  width: 100%;
}

.order-legal {
  align-items: flex-start;
  color: rgba(247, 245, 239, 0.72);
  display: flex;
  font-size: 0.8rem;
  gap: 0.65rem;
  line-height: 1.45;
}

.order-legal input {
  margin-top: 0.18rem;
  min-height: 0;
  width: auto;
}

.order-legal a { color: var(--tan); font-weight: 800; }

.order-fineprint {
  color: rgba(247, 245, 239, 0.6);
  font-size: 0.82rem;
  margin: 0;
  text-align: center;
}

.order-success {
  padding: 1.5rem 0.5rem 0.75rem;
  text-align: center;
}

.order-success h2 {
  color: var(--paper);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.6rem;
}

.order-success p {
  color: rgba(247, 245, 239, 0.8);
  line-height: 1.55;
  margin: 0 auto 1.3rem;
  max-width: 460px;
}

@media (max-width: 820px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-two-col {
    grid-template-columns: 1fr;
  }

  .hero-inner,
  .result-grid {
    grid-template-columns: 1fr;
  }

  .custom-cta {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .custom-cta-action {
    grid-column: 1 / -1;
  }

  .result-section {
    background-attachment: scroll;
  }

  /* Above the copy, not below it. Stacked, the artwork is the thing she
     just earned and it was landing under a screenful of text. */
  .result-art {
    order: -1;
    position: static;
  }

  .quiz-actions .button,
  .result-actions .button,
  .signup-row .button,
  .custom-cta .button {
    width: 100%;
  }

  .option-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .site-header nav {
    gap: 0.7rem;
  }

  .option-grid {
    grid-template-columns: 1fr;
  }

  .alternate-match {
    border-left: 0;
    border-top: 1px solid rgba(247, 245, 239, 0.15);
    padding-left: 0;
    padding-top: 1rem;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eq-bars span,
  .lens-flare,
  .result-art .album-cover,
  .result-section::before,
  .smoke-wisp,
  .reveal-smoke,
  .reveal-record,
  .reveal-kicker {
    animation: none;
  }

  .reveal-deck,
  .reveal-text {
    animation-duration: 1ms;
  }

  .reveal-tonearm {
    animation: none;
    transform: rotate(6deg);
  }
}