/* ============================================================
   HOME PAGE ONLY — hero video + green write-up section.
   Nav / ticker / footer styling lives in shared.css.
   ============================================================ */

:root {
  --logo-accent: var(--cream);
  --footer-bg: var(--brown);
}

/* ---------- HERO ---------- */

.hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 73.6px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,0.55) 68%,
    rgba(0,0,0,0.92) 82%,
    #000 100%
  );
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: 0 24px 56px;
  text-align: center;
}

.hero-eyebrow {
  font-size: 15px;
  letter-spacing: 0.12em;
  opacity: 0.85;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.lineup-main {
  font-size: 35px;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.lineup-sub {
  font-size: 22px;
  line-height: 1.25;
  opacity: 0.95;
  margin: 0;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .lineup-main { font-size: 26px; }
  .lineup-sub { font-size: 15px; }
  .hero-eyebrow { font-size: 12px; }
}

@media (max-width: 560px) {
  .lineup-main { font-size: 20px; }
  .lineup-sub { font-size: 12px; }
}

/* ---------- Mobile lineup: hidden by default, shown + resized below the breakpoint ---------- */

.lineup-main--mobile,
.lineup-sub--mobile {
  display: none;
}

@media (max-width: 700px) {
  /* swap the desktop copy out for the mobile-broken copy */
  .lineup-main:not(.lineup-main--mobile),
  .lineup-sub:not(.lineup-sub--mobile) {
    display: none;
  }
  .lineup-main--mobile,
  .lineup-sub--mobile {
    display: block;
  }

  .hero-eyebrow { font-size: 10px; margin-bottom: 13px; }

  .lineup-main--mobile {
    font-size: 27px;
    line-height: 1.1;
    margin: 0 0 14px;
  }

  .lineup-sub--mobile {
    font-size: 13px;
    line-height: 1.25;
  }
}

@media (max-width: 380px) {
  .hero-eyebrow { font-size: 8px; }
  .lineup-main--mobile { font-size: 22px; }
  .lineup-sub--mobile { font-size: 10px; }
}

/* ---------- INFO SECTION — embedded interactive write-up tool ---------- */

.info-section {
  position: relative;
  background: var(--black);
  line-height: 0; /* avoid a stray inline-element gap under the image */
}

.writeup-flat {
  display: block;
  width: 100%;
  height: auto;
}