/* Small Town Cinema: custom layer on top of Tailwind (CDN).
   Brand kit: distressed deep navy #172128, cream paper #e8dbca, muted
   red #872a20. Textures live in /static/img/texture-*.jpg; fonts in
   /static/fonts/fonts.css. */

:root {
  --night: #172128;
  --night-deep: #10161c;
  --cream: #e8dbca;
  --cream-dim: #a99e8d;
  --brand: #9c352b;
  --brand-dark: #7d251d;
  --inkd: #232d36;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body { background: var(--night); color: var(--cream); }

/* Film grain overlay */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 2; }

/* Distressed navy texture, tiled softly behind dark sections */
.navy-tex { position: relative; background: var(--night); }
.navy-tex::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/static/img/texture-navy.jpg");
  background-size: 1033px 288px;
  opacity: 0.5;
}
.navy-tex > * { position: relative; z-index: 2; }

/* Hero: the stadium photo with a fade into the page background */
.hero-bg {
  background-color: var(--night);
  background-image:
    linear-gradient(180deg, rgba(16, 22, 28, 0.18) 0, rgba(16, 22, 28, 0) 28vw, rgba(23, 33, 40, 0.72) 48vw, var(--night) 60vw),
    linear-gradient(100deg, rgba(13, 18, 23, 0.54) 0%, rgba(13, 18, 23, 0.2) 38%, rgba(13, 18, 23, 0) 60%),
    url("/static/img/hero.jpg");
  background-size: auto, auto, 100% auto;
  background-position: center, center, center top;
  background-repeat: no-repeat;
}
@media (min-width: 1024px) {
  .audition-panel {
    margin-top: clamp(18rem, 26.7vw, 26.25rem);
  }
}
@media (max-width: 1023px) {
  /* Fixed-height photo crop up top, fading into the night background where
     the headline and form take over. Pixel stops keep the fade anchored to
     the photo, not the (content-dependent) section height. */
  .hero-bg {
    background-image:
      linear-gradient(180deg, rgba(16, 22, 28, 0.1) 0px, rgba(16, 22, 28, 0) 230px, rgba(23, 33, 40, 0.92) 470px, var(--night) 560px),
      url("/static/img/hero.jpg");
    background-size: auto, auto 560px;
    background-position: top, center top;
    background-repeat: no-repeat, no-repeat;
  }
}
@media (max-width: 420px) {
  .field { font-size: 11px; letter-spacing: 0.06em; padding: 10px 8px; }
}

/* Aged cream paper surfaces */
.paper-card,
.paper-band {
  background-color: #e4d7c2;
  background-image:
    linear-gradient(180deg, rgba(255, 250, 238, 0.16) 0%, rgba(120, 95, 65, 0.12) 100%),
    url("/static/img/texture-cream.jpg");
  background-size: auto, cover;
}
.paper-card {
  border: 1px solid rgba(90, 70, 50, 0.55);
  border-radius: 3px;
  box-shadow:
    0 26px 55px rgba(0, 0, 0, 0.6),
    0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 0 55px rgba(120, 95, 65, 0.16);
}
.paper-band {
  box-shadow: inset 0 8px 22px rgba(40, 30, 20, 0.28), inset 0 -8px 22px rgba(40, 30, 20, 0.28);
}

/* Buttons from the UI elements pack */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--brand-dark);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.22) 100%),
    url("/static/img/texture-red.jpg");
  background-size: auto, cover;
  color: #f0e6d2;
  font-family: Oswald, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: filter 0.15s, transform 0.1s;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1.5px solid #9c352b;
  color: #cf8b7a;
  font-family: Oswald, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}
.btn-secondary:hover { background: rgba(156, 53, 43, 0.18); color: var(--cream); }

/* Form fields: outlined boxes on paper, condensed caps placeholders */
.field {
  width: 100%;
  border: 1px solid #75664f;
  border-radius: 2px;
  background: rgba(250, 244, 229, 0.5);
  padding: 10px 12px;
  font-family: Oswald, system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inkd);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.field::placeholder { color: #5c5140; opacity: 1; }
.field:focus { border-color: var(--brand-dark); background: rgba(252, 247, 235, 0.75); }
.field-error { border-color: #8e2f26; background: rgba(180, 90, 70, 0.16); }
select.field { appearance: none; }
.field-select-wrap { position: relative; }
.field-select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid #5c5140;
  border-bottom: 1.6px solid #5c5140;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.birth-date-label {
  display: block;
  min-height: 15px;
  margin-bottom: 3px;
  font-family: Oswald, system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5e4b;
}
.birth-date-select.field {
  padding-left: 9px;
  padding-right: 25px;
}

.field-note { font-size: 11px; font-weight: 700; color: #7d251d; }
.form-error-note {
  font-size: 12px;
  font-weight: 700;
  color: #6f231c;
  border: 1px solid #8e5c50;
  background: rgba(160, 70, 55, 0.14);
  border-radius: 2px;
  padding: 7px 10px;
}

/* Honeypot: off-screen, never display:none so naive bots still fill it */
.hp-wrap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Star divider: line, 8-point star, line */
.star-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
}
.star-divider::before,
.star-divider::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: currentColor;
  opacity: 0.85;
}
.star-divider.left::before { max-width: 70px; }
.star-divider.left::after { max-width: 110px; }

/* Song rows: dark list inside a hairline frame */
.songs-frame { border: 1px solid #313d47; background: rgba(13, 18, 23, 0.45); }
.song {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid #2a343d;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.song:first-child { border-top: none; }
.song > :not(.audio-viz) { position: relative; z-index: 1; }
.song.playing {
  background: linear-gradient(90deg, rgba(156, 53, 43, 0.12), rgba(13, 18, 23, 0.28));
  border-color: rgba(201, 141, 128, 0.42);
}
.song .audio-viz {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  filter: blur(0.2px);
  transition: opacity 0.28s ease;
}
.song.playing .audio-viz { opacity: 0.72; }
.song .play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9999px;
  border: 1.5px solid var(--cream);
  background: var(--cream);
  color: var(--night);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.song .play:hover:not(:disabled) { background: transparent; color: var(--cream); transform: scale(1.05); }
.song .play:disabled { opacity: 0.65; cursor: not-allowed; }
.song .play .icon-pause { display: none; }
.song.playing .play .icon-play { display: none; }
.song.playing .play .icon-pause { display: block; }
.song .song-title-trigger {
  transition: color 0.15s ease;
}
.song .song-title-trigger:hover:not(:disabled),
.song .song-chevron-trigger:hover:not(:disabled) { color: var(--cream-bright); }
.song .song-chevron-trigger {
  width: 24px;
  height: 32px;
  line-height: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.song .song-chevron-trigger:hover:not(:disabled) { transform: translateX(2px); }
.song [data-player-control]:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}
.song [data-player-control]:disabled { cursor: not-allowed; }
.song .track {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: #4a555f;
  border-radius: 1px;
  outline: none;
  cursor: pointer;
}
.song .track::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 9999px;
  background: var(--cream);
}
.song .track::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 9999px;
  background: var(--cream);
}
.song .vol .icon-muted { display: none; }
.song .vol.muted .icon-vol { display: none; }
.song .vol.muted .icon-muted { display: block; }

@media (prefers-reduced-motion: reduce) {
  .song,
  .song .audio-viz { transition: none; }
  .song .audio-viz { display: none; }
}

/* Video embed frame on the paper band */
.video-frame {
  border: 1px solid rgba(40, 30, 20, 0.5);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(40, 30, 20, 0.35);
  background: #000;
}

/* Panel status badges, one per application state */
.badge { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.badge-received { background: #d9c79b; color: #5c4715; }
.badge-shortlisted { background: #5f7d58; color: #f0ead7; }
.badge-invited { background: #5b7893; color: #eef2ef; }
.badge-cast { background: #9c352b; color: #f2e7d2; }
.badge-rejected { background: #8d5a4f; color: #f6e9e2; }
.badge-withdrawn { background: #7d7d76; color: #f2ede2; }

/* Panel surfaces stay in the night palette */
.panel-card { background: #1d262e; border: 1px solid #2d3944; border-radius: 10px; }
.panel-field {
  width: 100%;
  border: 1px solid #3c4a56;
  border-radius: 6px;
  background: #131a20;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--cream);
  outline: none;
}
.panel-field:focus { border-color: #5e7891; }