/* Homepage palette and Slay photography; original photos remain untouched. */
:root {
  --ink: #080808;
  --paper: #f2f2f2;
  --muted: #aaaaaa;
  --line: rgba(242, 242, 242, .16);
  --line-strong: rgba(242, 242, 242, .32);
  --blue: #bdbdbd;
  --accent-strong: #ffffff;
}

.site-header.scrolled { background: rgba(8, 8, 8, .9); }
.hero-image img {
  /* Balance headroom and the band on wide viewports. */
  object-position: center 24%;
  transform: none;
  filter: grayscale(1);
}
.hero-shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 25%),
    linear-gradient(0deg, rgba(0, 0, 0, .88), transparent 65%),
    linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 75%);
}
.eyebrow, #signup-note { color: #cccccc; }
.scroll-cue { color: #dddddd; }
.next-show { background: #141414; }
.music-section { background: var(--ink); }
.merch { background: linear-gradient(135deg, #161616, #080808 70%); }
.merch-copy > p:not(.eyebrow) { color: #b8b8b8; }
.release-feature > img { filter: grayscale(1); }

.connect {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #080808;
}
.connect-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 45%;
  filter: grayscale(1);
}
.connect::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, .8)),
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .25));
  pointer-events: none;
}
.signup-fields input { background: #111111; }
.signup-fields input::placeholder { color: var(--muted); }

@media (max-width: 800px) {
  .site-header, .site-header.scrolled { height: 60px; padding: 8px 1.25rem; }
  .site-header { background: transparent; }
  .site-header.scrolled, .site-header.menu-open { background: rgba(8, 8, 8, .96); }
  .site-header .wordmark { font-size: 1.15rem; }
  .nav-toggle { width: 44px; height: 44px; padding: 12px; }
  .nav-toggle span { width: 20px; margin: 5px 0; }
  .site-header nav { background: rgba(8, 8, 8, .96); padding: .35rem 1rem .65rem; }
  .site-header nav a { display: flex; align-items: center; min-height: 44px; padding: .5rem 0; }
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--ink);
  }
  .hero-image {
    position: relative;
    inset: auto;
    display: block;
    flex-shrink: 0;
    margin-top: 0;
  }
  .hero-image img { height: 60svh; object-position: center 30%; }
  .hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 25%),
      linear-gradient(0deg, var(--ink), transparent 35%);
    pointer-events: none;
  }
  .hero-shade { display: none; }
  .hero-copy {
    position: relative;
    left: auto;
    bottom: auto;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    margin-top: -2rem;
    padding: 0 1.5rem max(2rem, env(safe-area-inset-bottom));
  }
  .hero .eyebrow {
    font-size: .65rem;
    letter-spacing: .14em;
    margin-bottom: 1.25rem;
  }
  .hero h1 {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: .15em;
    row-gap: .1em;
    font-size: clamp(2.5rem, 19vw, 5.5rem);
    line-height: .9;
    letter-spacing: -.025em;
  }
  .hero h1 span { display: block; }
  .hero h1 span:last-child {
    grid-column: 1 / -1;
  }
  .hero-actions {
    width: 100%;
    max-width: 28rem;
    margin-top: 1.75rem;
    padding-top: 0;
  }
}