@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playfair-display-700.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playfair-display-800.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/space-grotesk-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/space-grotesk-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/space-grotesk-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-700.ttf) format('truetype');
}
/* Display typography inspired by the reference's bold editorial serif. */
:root{--font-display:'Playfair Display',Georgia,serif;--font-body:'Space Grotesk',Arial,sans-serif}
body{font-family:var(--font-body);font-weight:400}
h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.08}
h1,h2,.feature-copy h3{text-transform:uppercase}
h1{font-size:clamp(3rem,10.7vw,9rem)}
h2{font-size:clamp(2.3rem,5.2vw,5.2rem);line-height:1.06}
h3{font-size:1.6rem;line-height:1.18;letter-spacing:-.025em}
.hero h1{max-width:1100px;line-height:1.02;margin:24px 0 30px}
.hero:before{font-family:var(--font-display);font-weight:800;letter-spacing:-.07em}
.feature-copy h3{font-size:clamp(2.5rem,4.6vw,4.8rem);line-height:1.06}
.music-card h3{font-size:1.8rem;line-height:1.18}
.column-card h3{font-size:1.9rem;line-height:1.18}
.quote blockquote{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:-.025em}
.quote cite,.feature-art:after,.music-card .number,.story aside strong{font-family:var(--font-body)}
.story aside strong{font-weight:700}
nav a,.btn,.text-link{font-weight:700}
nav a,.text-link{font-size:.875rem}
.eyebrow{font-size:.875rem;letter-spacing:.14em;font-weight:700}
.ticker-inner,.music-card .number,.feature-art:after,.gallery-grid figcaption,.hero-index{font-size:.8125rem;font-weight:700}
.impact-number{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.12}
@media(max-width:800px){.hero-content{padding-top:160px}.feature-copy h3{font-size:clamp(2.5rem,8vw,4.5rem)}nav a{font-size:1rem}}
@media(max-width:500px){h1{font-size:clamp(2.6rem,10.7vw,3.4rem)}h2{font-size:clamp(2rem,8.8vw,2.75rem)}.hero h1{margin:22px 0 26px}.quote blockquote{font-size:clamp(1.8rem,7.2vw,2.3rem)}}