/* ===================================================
   elrose — brand tokens
   =================================================== */
:root {
  --navy: #07091A;
  --red: #C1121F;
  --red-deep: #8B0A15;
  --violet: #7B2FFF;
  --cyan: #00D4E8;
  --cream: #F0EBD8;
  --amber: #E8A020;

  /* headings: placeholder is "Unbounded" (Google Fonts, free for commercial use).
     Swap to the real font once the licensed Monument Extended Bold file is
     available — see the commented @font-face block below this :root. */
  --font-display: "Monument Extended", "Unbounded", "Arial Black", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "Courier New", Courier, monospace;
  --font-voice: var(--font-body);
}

/* To activate the real Monument Extended once you have a licensed file:
   1. drop MonumentExtended-Bold.woff2 into assets/fonts/
   2. uncomment this block
@font-face {
  font-family: "Monument Extended";
  src: url("assets/fonts/MonumentExtended-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-voice);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

p { margin: 0 0 1em; }

/* ===================================================
   film grain overlay
   =================================================== */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================================================
   header / nav
   =================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background: linear-gradient(to bottom, rgba(7,9,26,0.85), transparent);
}

.wordmark {
  position: relative;
  display: inline-block;
}
.wordmark-img {
  display: block;
  height: 26px;
  width: auto;
  filter: drop-shadow(0 0 6px rgba(0,212,232,0.35));
}

.site-nav a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  margin-left: 1.75rem;
  opacity: 0.8;
  border-bottom: 1px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
}
.site-nav a:hover { opacity: 1; border-color: var(--cyan); }

@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    align-items: center;
    row-gap: 0.6rem;
    padding: 1.1rem 1.25rem;
  }
  .site-nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1rem;
  }
  .site-nav a { margin-left: 0; font-size: 0.7rem; }
}

/* ===================================================
   hero
   =================================================== */
.hero {
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 6rem 2.5rem 4rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(123,47,255,0.20), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(193,18,31,0.18), transparent 55%),
    var(--navy);
}

.hero-text { max-width: 90%; }

@media (max-width: 640px) {
  /* mobile only: center the whole eyebrow/logo/icons block instead of
     left-aligning it, and sit it a bit lower for breathing room now that
     the presave callout is removed below (see .hero-cta mobile rule). */
  .hero {
    padding: 6rem 1.5rem 2.5rem;
    align-items: center;
    text-align: center;
  }
  .hero-text { max-width: 100%; }
}

/* full-bleed landscape video */
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.hero-video-scanlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(
    to bottom,
    rgba(240,235,216,0.6) 0px,
    rgba(240,235,216,0.6) 1px,
    transparent 2px,
    transparent 4px
  );
}
.hero-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(7,9,26,0.55) 0%, rgba(7,9,26,0.25) 35%, rgba(7,9,26,0.45) 70%, rgba(7,9,26,0.9) 100%),
    linear-gradient(to right, rgba(7,9,26,0.55) 0%, transparent 20%, transparent 80%, rgba(7,9,26,0.55) 100%);
}

.hero > *:not(.hero-video-bg) {
  position: relative;
  z-index: 3;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 1.5rem;
  height: 1.2em;
}
#eyebrow-word {
  display: inline-block;
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}
#eyebrow-word.is-slipping {
  opacity: 0;
  transform: translateY(-8px) skewX(-8deg);
  filter: blur(3px);
}
#eyebrow-word.is-home {
  color: var(--cyan);
}

.hero-mark {
  position: relative;
  margin-bottom: 1.5rem;
  line-height: 0;
}
.hero-mark-img {
  display: block;
  width: clamp(220px, 34vw, 560px);
  height: auto;
  filter: drop-shadow(0 0 14px rgba(0,212,232,0.3));
}

.hero-icons {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.hero-icons a { color: var(--cream); transition: color 0.2s, transform 0.2s; }
.hero-icons a:hover { color: var(--cyan); transform: translateY(-2px); }
.hero-icons .icon { width: 22px; height: 22px; }

@media (max-width: 640px) {
  /* the logo was clamping to the same ~220px floor as the icon row below
     it, so the two read as equal weight. Sized up substantially here so
     the wordmark clearly leads the hierarchy over the icons. */
  .hero-mark-img { width: clamp(260px, 78vw, 380px); margin: 0 auto; }
  .hero-icons { gap: 1.1rem; justify-content: center; }
  .hero-icons .icon { width: 19px; height: 19px; }
}

.hero-tagline {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  max-width: 34ch;
  opacity: 0.9;
  margin-bottom: 2.5rem;
}

.hero > .hero-cta {
  position: absolute;
  z-index: 5;
  right: 2.5rem;
  bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 220px;
  max-width: calc(100vw - 3rem);
  border: 1px solid rgba(0,212,232,0.55);
  padding: 1.25rem 1.5rem;
  background: rgba(7,9,26,0.65);
  box-shadow: 0 0 16px rgba(0,212,232,0.35), 0 0 40px rgba(0,212,232,0.12);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.hero > .hero-cta:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(0,212,232,0.6), 0 0 60px rgba(0,212,232,0.25);
}
.cta-label {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: lowercase;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin: 0;
}
.cta-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  opacity: 0.7;
  margin: 0;
}
.cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--navy);
  background: var(--cyan);
  padding: 0.7rem 1rem;
  transition: filter 0.2s;
}
.cta-btn:hover { filter: brightness(1.1); }

.hero > .scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: none;
  border: none;
  color: var(--cream);
  opacity: 0.5;
  font-size: 1.2rem;
  cursor: pointer;
  animation: drift 2.4s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 640px) {
  /* the presave callout is dropped entirely on mobile — with the logo and
     icons already centered and given more breathing room, the extra box
     read as clutter on small screens. The presave link is still reachable
     via the updates section and the Spotify/Apple icons above. */
  .hero > .hero-cta { display: none; }
  /* the drifting scroll arrow is decorative only; hidden on small screens
     to keep the mobile hero clean. */
  .hero > .scroll-cue { display: none; }
}


/* ===================================================
   section shared
   =================================================== */
main > section {
  padding: 6rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.section-heading {
  /* extended display font runs wide per character — capped a bit lower
     than before so short strings don't crowd on smaller viewports */
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  margin-bottom: 3rem;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.section-heading span {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--cyan);
  opacity: 0.7;
}

/* ===================================================
   streaming (full-bleed section)
   =================================================== */
.listen-hero {
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.listen-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.listen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.listen-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(7,9,26,0.92) 0%, rgba(7,9,26,0.75) 45%, rgba(139,10,21,0.35) 100%);
}

.listen-eyebrow {
  position: absolute;
  top: 6.5rem;
  left: 2rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  opacity: 0.7;
  margin: 0;
}
.listen-eyebrow span { color: var(--cyan); opacity: 0.8; margin-right: 0.5rem; }

.listen-columns {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 9rem 2rem 5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
}

.listen-about {
  flex: 1 1 380px;
  max-width: 480px;
  text-align: left;
}
.listen-about-heading { font-size: 1.6rem; margin-bottom: 1.25rem; }
.listen-about-icons { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; }
.listen-about-icons a { color: var(--cream); transition: color 0.2s, transform 0.2s; }
.listen-about-icons a:hover { color: var(--cyan); transform: translateY(-2px); }
.listen-about-icons .icon { width: 26px; height: 26px; }
.listen-about-body {
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.85;
}

.listen-embed {
  flex: 0 0 320px;
  width: 320px;
  max-width: 100%;
}
.listen-embed iframe { display: block; }

@media (max-width: 900px) {
  .listen-columns { padding-top: 7rem; text-align: center; }
  .listen-about { text-align: center; }
  .listen-about-icons { justify-content: center; }
}

@media (max-width: 640px) {
  /* a touch more room between the "02 about" eyebrow and the "elrose"
     heading below it, since they read as cramped at phone widths. */
  .listen-about-heading { margin-top: 0.75rem; }
}

/* shared icon sizing */
.icon { width: 20px; height: 20px; display: block; }

/* ===================================================
   live / upcoming events (full-bleed section)
   =================================================== */
.live {
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.live-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* placeholder Red Interior treatment until a real photo is dropped in;
     swap for background-image: url(assets/img/live-bg.jpg) center/cover */
  background:
    radial-gradient(ellipse at 65% 30%, rgba(193,18,31,0.35), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(139,10,21,0.4), transparent 50%),
    var(--navy);
}

.live-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(7,9,26,0.92) 0%, rgba(7,9,26,0.55) 55%, rgba(7,9,26,0.75) 100%);
}

.live-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  width: 100%;
  text-align: center;
}
.live-content .section-heading {
  margin-bottom: 2.5rem;
  justify-content: center;
}

.event-list {
  list-style: none;
  margin: 0 auto 2.5rem;
  padding: 0;
  max-width: 62ch;
  border-top: 1px solid rgba(240,235,216,0.2);
  text-align: left;
}
.event-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(240,235,216,0.2);
  transition: border-color 0.25s, background 0.25s;
}
.event-row:hover {
  border-color: var(--cyan);
  background: rgba(0,212,232,0.06);
}
.event-date {
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: 0.9rem;
  min-width: 3.5rem;
}
.event-name {
  font-size: 1.1rem;
  flex: 1 1 auto;
  transition: color 0.25s;
}
.event-row:hover .event-name { color: var(--cyan); }
.event-place {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.6;
  text-transform: lowercase;
}
.event-arrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.2s;
}
.event-row:hover .event-arrow {
  opacity: 1;
  transform: translateX(0);
}

.follow-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  border: 1px solid rgba(240,235,216,0.4);
  padding: 0.75rem 1.75rem;
  transition: border-color 0.2s, background 0.2s;
}
.follow-btn:hover {
  border-color: var(--cyan);
  background: rgba(0,212,232,0.08);
}

@media (max-width: 640px) {
  .event-row { flex-direction: column; gap: 0.25rem; }
}

/* ===================================================
   updates (presave) — reuses .live / .live-bg / .live-scrim /
   .live-content from the upcoming-events section above, so the
   background always matches automatically
   =================================================== */
.updates-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
}

.presave-card {
  margin: 0 auto;
  border: 1px solid var(--cyan);
  background: rgba(7,9,26,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 20px rgba(0,212,232,0.35), 0 0 50px rgba(0,212,232,0.12);
  transition: box-shadow 0.25s;
  width: 320px;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
}
.presave-card:hover {
  box-shadow: 0 0 28px rgba(0,212,232,0.55), 0 0 70px rgba(0,212,232,0.22);
}
.presave-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: url("assets/img/why-dont-you-cover.jpg") center/cover;
}
.technicolor-cover {
  background: url("assets/img/technicolor-cover.jpg") center/cover;
}
.smoke-cover {
  background: url("assets/img/smoke-cover.jpg") center/cover;
}
.presave-cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,8,20,0.92) 0%, rgba(6,8,20,0.35) 45%, transparent 70%);
}
.presave-cover-text {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}
.presave-title { font-size: 1.6rem; margin-bottom: 0.2rem; }
.presave-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  opacity: 0.8;
}
.presave-btn {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-align: center;
  color: var(--navy);
  background: var(--cyan);
  padding: 1rem 1.5rem;
  transition: filter 0.2s;
}
.presave-btn:hover { filter: brightness(1.1); }
.presave-btn--disabled {
  color: var(--cream);
  background: rgba(240,235,216,0.12);
  opacity: 0.6;
  cursor: default;
}

/* ===================================================
   contact (full-bleed section)
   =================================================== */
.contact {
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.contact-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(7,9,26,0.9) 0%, rgba(7,9,26,0.7) 50%, rgba(7,9,26,0.88) 100%);
}
.contact-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  width: 100%;
}

.contact-desc { font-style: italic; opacity: 0.7; margin-bottom: 1rem; }
.contact-email {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  border-bottom: 1px solid var(--cyan);
  margin-bottom: 2.5rem;
}
.social-row { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.social-row a {
  color: var(--cream);
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s, transform 0.2s;
}
.social-row a:hover { opacity: 1; color: var(--cyan); transform: translateY(-2px); }
.social-row .icon { width: 24px; height: 24px; }

/* ===================================================
   footer
   =================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.55;
}