*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:#0b0c0c;
  color:#f1eee6;
  font-family:Arial,Helvetica,sans-serif
}

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

.hero{
  min-height:100svh;
  position:relative;
  background:linear-gradient(90deg,rgba(4,5,5,.78),rgba(4,5,5,.2)),url("assets/hero-rink.jpeg") center/cover no-repeat;
  display:flex;
  align-items:flex-end;
  padding:clamp(24px,5vw,72px)
}

.nav{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding:24px clamp(24px,5vw,72px);
  display:flex;
  justify-content:space-between;
  letter-spacing:.14em;
  font-size:12px;
  font-weight:700
}

.hero-content{
  max-width:720px;
  padding-bottom:7vh
}

.eyebrow{
  font-size:12px;
  letter-spacing:.28em;
  font-weight:700;
  margin:0 0 18px
}

.hero h1,
.section h2,
.story-copy h2{
  font-family:Impact,"Arial Narrow",sans-serif;
  font-weight:900;
  letter-spacing:.015em;
  line-height:.82;
  margin:0
}

.hero h1{
  font-size:clamp(74px,14vw,185px)
}

.release{
  font-weight:800;
  letter-spacing:.22em;
  margin:24px 0 12px
}

.tagline{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(18px,2vw,26px);
  max-width:550px;
  color:#dedbd3
}

.actions{
  display:flex;
  gap:12px;
  margin-top:30px
}

.button{
  display:inline-block;
  padding:15px 25px;
  border:1px solid #f1eee6;
  font-size:12px;
  letter-spacing:.16em;
  font-weight:800
}

.primary{
  background:#f1eee6;
  color:#0b0c0c
}

.ghost{
  background:rgba(0,0,0,.15)
}

.scroll{
  position:absolute;
  right:5vw;
  bottom:5vw;
  font-size:30px
}

.section{
  padding:clamp(70px,10vw,150px) clamp(24px,8vw,130px)
}

.section h2,
.story-copy h2{
  font-size:clamp(58px,9vw,130px)
}

.video-section{
  background:#111313
}

.video-section h2{
  font-size:clamp(54px,7.2vw,104px)
}

/* FULL-SIZE YOUTUBE VIDEO */
.video-placeholder{
  margin-top:38px;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden
}

.video-placeholder iframe{
  display:block;
  width:100%;
  height:100%;
  border:0
}

.play{
  display:inline-grid;
  place-items:center;
  width:76px;
  height:76px;
  border:2px solid white;
  border-radius:50%;
  font-size:26px
}

.video-placeholder p{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase
}

.text-link{
  display:inline-block;
  margin-top:22px;
  font-size:12px;
  font-weight:bold;
  letter-spacing:.18em;
  border-bottom:1px solid;
  padding-bottom:5px
}

.listen{
  text-align:center
}

.muted{
  color:#aaa69d;
  font-family:Georgia,serif;
  font-size:18px
}

.platforms,
.socials{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:35px
}

.platform,
.socials a{
  border:1px solid #444;
  padding:14px 18px;
  font-size:11px;
  letter-spacing:.12em;
  font-weight:bold
}

.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:800px;
  background:#e9e5dc;
  color:#111
}

.story-copy{
  padding:clamp(60px,8vw,120px);
  align-self:center
}

.story-copy h2{
  font-size:clamp(55px,7vw,105px);
  margin-bottom:35px
}

.story-copy>p:not(.eyebrow){
  font-family:Georgia,serif;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.65;
  max-width:600px
}

.story-photo{
  background:url("assets/bar-guitar.jpeg") center/cover
}

.featured{
  text-align:center;
  background:#141616
}

.featured .names{
  max-width:1050px;
  margin:35px auto 0;
  font-size:clamp(17px,1.9vw,26px);
  line-height:1.7;
  font-weight:800;
  letter-spacing:.06em
}

.merch{
  text-align:center;
  background:#e9e5dc;
  color:#111
}

.merch .muted{
  color:#555
}

.merch .button{
  margin-top:20px;
  background:#111;
  color:#eee;
  border-color:#111
}

.follow{
  text-align:center
}

.socials a{
  border:none;
  border-bottom:1px solid #555
}

.contact-row{
  margin-top:46px
}

.contact-row a{
  font-size:11px;
  letter-spacing:.18em;
  font-weight:700;
  border-bottom:1px solid #555;
  padding-bottom:6px
}

footer{
  border-top:1px solid #292b2b;
  padding:25px clamp(24px,5vw,72px);
  display:flex;
  justify-content:space-between;
  color:#777;
  font-size:10px;
  letter-spacing:.15em
}

.platform.disabled{
  opacity:.38;
  cursor:default;
  pointer-events:none
}

.hero .tagline{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:400
}

.actions .button{
  white-space:nowrap
}

@media(max-width:760px){
  .hero{
    background-position:42% center
  }

  .hero-content{
    max-width:88%;
    padding-bottom:10vh
  }

  .hero h1{
    font-size:clamp(68px,22vw,108px)
  }

  .nav-link{
    display:none
  }

  .section{
    padding-top:80px;
    padding-bottom:80px
  }

  .video-section h2{
    font-size:clamp(50px,17vw,78px)
  }

  .story-grid{
    grid-template-columns:1fr
  }

  .story-photo{
    min-height:620px;
    order:-1
  }

  .platforms{
    flex-direction:column
  }

  .platform{
    width:100%
  }

  .names{
    font-size:18px
  }

  .hero .tagline{
    font-size:18px;
    white-space:nowrap;
    max-width:none;
    width:max-content
  }
}