:root {
  --navy: #0d1b2a;
  --blue: #415a77;
  --sand: #d9b88c;
  --blush: #f4afa2;
  --cream: #f7f3eb;
  --white: #fffdf8;
  --ink-soft: #526173;
  --line: rgba(13, 27, 42, .14);
  --page: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: Inter, Avenir, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--cream);
  border-radius: 4px;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  width: var(--page);
  margin: 0 auto;
  padding: 25px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(247, 243, 235, .3);
  color: var(--cream);
}
.brand img { width: 190px; max-height: 48px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.site-header nav { display: flex; gap: 34px; }
.site-header nav a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .22em;
  font-weight: 700;
  opacity: .88;
}
.site-header nav a:hover, .site-header nav a:focus-visible { opacity: 1; }

.hero {
  position: relative;
  min-height: min(900px, 100svh);
  display: grid;
  align-items: end;
  background: var(--navy) url("images/AvidDays_SpotifyBanner_2660x1140.jpg") center / cover no-repeat;
  color: var(--cream);
  overflow: hidden;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13,27,42,.84) 0%, rgba(13,27,42,.56) 42%, rgba(13,27,42,.08) 74%),
    linear-gradient(0deg, rgba(13,27,42,.86) 0%, transparent 45%);
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: var(--page);
  margin: 0 auto;
  padding: 190px 0 100px;
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--sand);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .26em;
}
.eyebrow.dark { color: var(--blue); }
h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: 28px;
  max-width: 780px;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .88;
}
.hero-intro {
  max-width: 570px;
  margin-bottom: 34px;
  color: rgba(247,243,235,.86);
  font-size: clamp(1rem, 2vw, 1.23rem);
  line-height: 1.65;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 15px 22px;
  background: var(--cream);
  color: var(--navy);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  border: 1px solid var(--cream);
  transition: background .2s, color .2s, transform .2s;
}
.button:hover, .button:focus-visible { background: transparent; color: var(--cream); transform: translateY(-2px); }
.scroll-note {
  position: absolute;
  z-index: 1;
  right: 2.5vw;
  bottom: 60px;
  margin: 0;
  color: rgba(247,243,235,.65);
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: .6rem;
  letter-spacing: .2em;
}

.section { width: var(--page); margin: 0 auto; padding: 120px 0; }
.about {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(52px, 8vw, 110px);
  align-items: center;
}
.portrait-wrap { position: relative; }
.portrait-wrap::before {
  content: "";
  position: absolute;
  inset: -18px 18px 18px -18px;
  border: 1px solid var(--sand);
  z-index: -1;
}
.portrait-wrap img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.portrait-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 13px 17px;
  background: var(--navy);
  color: var(--cream);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
h2 {
  margin-bottom: 28px;
  font-size: clamp(2.5rem, 5vw, 5.2rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.05em;
}
.about-copy > p:not(.eyebrow), .listen-heading > p:not(.eyebrow) {
  max-width: 620px;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.75;
}
.about-copy .lede { color: var(--navy) !important; font-size: 1.3rem !important; line-height: 1.55 !important; }
.themes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.themes span {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--blue);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.listen {
  width: 100%;
  max-width: none;
  padding-left: max(24px, calc((100% - 1180px) / 2));
  padding-right: max(24px, calc((100% - 1180px) / 2));
  background: var(--navy);
  color: var(--cream);
}
.listen-heading { max-width: 760px; margin-bottom: 52px; }
.listen-heading h2 { margin-bottom: 20px; }
.listen-heading > p:not(.eyebrow) { color: rgba(247,243,235,.68); }
.platform-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(247,243,235,.18);
  border-left: 1px solid rgba(247,243,235,.18);
}
.platform {
  min-height: 230px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid rgba(247,243,235,.18);
  border-bottom: 1px solid rgba(247,243,235,.18);
  color: var(--cream);
  text-decoration: none;
  transition: background .25s, color .25s, transform .25s;
}
.platform svg { width: 42px; height: 42px; margin-bottom: auto; }
.platform span { font-size: 1.05rem; font-weight: 700; }
.platform small { margin-top: 7px; color: rgba(247,243,235,.55); text-transform: uppercase; letter-spacing: .16em; }
.platform:hover, .platform:focus-visible { background: var(--cream); color: var(--navy); transform: translateY(-4px); outline: none; }
.platform:hover small, .platform:focus-visible small { color: var(--blue); }
.link-note { margin: 30px 0 0; color: rgba(247,243,235,.48); font-size: .78rem; line-height: 1.6; }
.link-note code { color: var(--sand); }

.closing {
  min-height: 520px;
  padding: 100px 24px;
  display: grid;
  place-content: center;
  text-align: center;
  background: linear-gradient(150deg, var(--blush), var(--sand));
}
.closing img { width: 90px; height: 90px; margin: 0 auto 32px; object-fit: contain; }
.closing p { margin: 0; font-size: clamp(2.2rem, 5vw, 5.4rem); font-weight: 300; line-height: 1.03; letter-spacing: -.05em; }

footer {
  min-height: 330px;
  padding: 58px max(24px, calc((100% - 1180px) / 2));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 32px;
  background: var(--navy);
  color: var(--cream);
}
footer img { width: 215px; mix-blend-mode: screen; }
footer > p { justify-self: end; margin: 0; color: rgba(247,243,235,.7); }
footer .copyright { grid-column: 1 / -1; justify-self: stretch; padding-top: 25px; border-top: 1px solid rgba(247,243,235,.16); font-size: .72rem; letter-spacing: .08em; }

:focus-visible { outline: 2px solid var(--blush); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
@media (max-width: 900px) {
  .hero { background-position: 58% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(13,27,42,.9), rgba(13,27,42,.34) 80%); }
  .about { grid-template-columns: 1fr; }
  .portrait-wrap { max-width: 650px; }
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .platform:last-child { grid-column: 1 / -1; }
  .scroll-note { display: none; }
}
@media (max-width: 560px) {
  :root { --page: calc(100% - 32px); }
  .site-header { padding: 18px 0; }
  .brand img { width: 142px; }
  .site-header nav { gap: 18px; }
  .site-header nav a { font-size: .62rem; }
  .hero { min-height: 760px; }
  .hero-copy { padding-bottom: 64px; }
  .section { padding-top: 84px; padding-bottom: 84px; }
  .portrait-wrap::before { inset: -10px 10px 10px -10px; }
  .platform-grid { grid-template-columns: 1fr; }
  .platform, .platform:last-child { min-height: 150px; grid-column: auto; }
  .platform svg { width: 36px; height: 36px; }
  footer { grid-template-columns: 1fr; min-height: 290px; }
  footer > p { justify-self: start; }
}