/*
 * Syne display typography with Manrope for reading text.
 * Official Google Fonts Latin variable build, retrieved October 12, 2026:
 * https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap
 * https://fonts.gstatic.com/s/syne/v24/8vIH7w4qzmVxm2BL9G78HEY.woff2
 * SIL Open Font License: assets/syne-OFL.txt
 */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/syne-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: 'Syne', Manrope, Arial, sans-serif;
  --font-reading: Manrope, Arial, sans-serif;
}

body {
  font-family: var(--font-reading);
}

h1,
h2,
.logo,
.hero-wordmark,
.footer-wordmark,
.number-value,
.artist-track,
.plaque strong,
.credit-info h3,
.billboard-copy strong,
.billboard-number,
.award-row .award-year {
  font-family: var(--font-display);
}

h2 {
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.06;
}

.hero-copy h2 {
  font-size: clamp(42px, 4.8vw, 74px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.1;
  text-wrap: balance;
}

.logo {
  font-weight: 700;
  letter-spacing: -.03em;
}

/* Syne expands considerably at 800; 700 keeps the full alias within its frame. */
.hero-wordmark,
.footer-wordmark {
  font-weight: 700;
  font-size: clamp(150px, 22.5vw, 370px);
  letter-spacing: -.055em;
  line-height: .8;
  white-space: nowrap;
}

.number-value,
.number-item:last-child .number-value {
  font-weight: 600;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
}

.number-item .number-word {
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
}

.number-item .metric-grammy {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -.035em;
}

.rank-prefix {
  font-family: var(--font-reading);
}

.artist-track,
.award-row .award-year {
  font-weight: 500;
  letter-spacing: -.02em;
}

.plaque strong {
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.plaque .multi-platinum-title {
  font-size: clamp(25px, 2.6vw, 36px);
  letter-spacing: -.03em;
}

.plaque-mark,
.plaque-label,
.contact-email {
  font-family: var(--font-reading);
}

.credit-info h3 {
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.25;
}

.billboard-copy strong {
  font-weight: 600;
  letter-spacing: -.04em;
}

.billboard-number {
  font-weight: 700;
  letter-spacing: -.05em;
}

.source-dialog h2 {
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
}

@media (max-width: 1100px) {
  .hero-wordmark,
  .footer-wordmark {
    font-size: 21.4vw;
  }
}

@media (max-width: 760px) {
  h2 {
    font-size: clamp(36px, 9.5vw, 62px);
  }

  .hero-copy h2 {
    font-size: clamp(29px, 8.2vw, 60px);
    line-height: 1.12;
  }

  .hero-wordmark,
  .footer-wordmark {
    font-size: 21.2vw;
    letter-spacing: -.055em;
  }

  .number-item .number-word {
    font-size: clamp(23px, 6.6vw, 32px);
    line-height: 1.02;
  }

  .number-item .metric-grammy {
    font-size: clamp(22px, 6.25vw, 32px);
  }

  .plaque strong {
    font-size: clamp(20px, 6.2vw, 28px);
  }

  .plaque .multi-platinum-title {
    font-size: clamp(14px, 4.7vw, 23px);
  }

  .story-copy h2 {
    font-size: clamp(45px, 12.1vw, 62px);
    letter-spacing: -.04em;
  }

  .listen h2 {
    font-size: clamp(42px, 11vw, 62px);
  }

  .contact h2 {
    font-size: clamp(32px, 8.5vw, 46px);
  }

  .billboard-copy strong {
    font-size: clamp(23px, 6.6vw, 32px);
  }

  .source-dialog h2 {
    font-size: 27px;
  }
}