/* Bitter gives headings a sturdy shape; Barlow keeps controls and small text clear. */
:root {
  --font-display: "Bitter", Georgia, serif;
  --font-ui: "Barlow", Arial, sans-serif;
}

body,
button,
select,
input { font-family: var(--font-ui); }

body { font-size: 16px; line-height: 1.55; }
.wordmark {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: -.035em;
}
.wordmark span {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .22em;
}
.edition,
.eyebrow,
.poster-small,
.poster-foot,
.tag,
.day-heading,
.bracket h3,
footer span {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .08em;
}
.eyebrow { font-size: 12px; }

h1,
h2,
.info h3,
.capacity-card h3,
.poster strong,
.stats b,
.capacity-card strong {
  font-family: var(--font-display);
  font-weight: 600;
}

.hero h1 {
  font-size: clamp(58px, 7.4vw, 106px);
  letter-spacing: -.02em;
  line-height: 1.12;
}
.hero h1 em {
  font-family: var(--font-ui);
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.02em;
}
h2 { letter-spacing: -.015em; line-height: 1.2; }
.poster-small { font-size: 12px; }
.poster strong { font-family: var(--font-ui); font-weight: 700; letter-spacing: -.07em; }
.stats b,
.capacity-card strong { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: lining-nums; }

.categories button,
.tabs button,
.match,
caption,
table,
footer { font-family: var(--font-ui); }
.categories button { font-weight: 600; line-height: 1.25; }
.categories button small { font-family: var(--font-ui); font-weight: 600; letter-spacing: .1em; }
.match .score,
.time,
.fixture .result,
table { font-variant-numeric: tabular-nums; }
.tabs button { font-size: 14px; }
th { font-family: var(--font-ui); letter-spacing: .06em; }

@media (max-width: 700px) {
  .edition { font-size: 9px; }
  .hero h1 { font-size: clamp(55px, 12vw, 68px); letter-spacing: -.02em; }
  .categories button { font-size: 12px; }
}