/* Typography follows the role of the text, even when a card uses an h2 for structure. */
:root {
  --pw-type-page: clamp(34px, 4.8vw, 54px);
  --pw-type-section: clamp(25px, 3vw, 34px);
  --pw-type-card: clamp(18px, 1.7vw, 21px);
  --pw-type-workspace: clamp(22px, 2.5vw, 28px);
  --pw-type-body: 16px;
  --pw-type-label: 14px;
  --pw-type-kicker: 11px;
}

/* Public page headings. */
html body > header h1,
html body > .top + .hero h1,
html body #airport-landing .airport-copy h1 {
  font-size: var(--pw-type-page) !important;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-align: start;
}

/* Section headings and card titles share their size across the homepage and content pages. */
html body .home-story h2,
html body main:not(.desk, .ac) h2 {
  font-size: var(--pw-type-section) !important;
  line-height: 1.18;
  letter-spacing: -.025em;
}
html body .home-story h3,
html body main:not(.desk, .ac) h3,
html body main a.guide h2,
html body #coverage .map-country-panel h3 {
  font-size: var(--pw-type-card) !important;
  line-height: 1.28;
  letter-spacing: -.015em;
}

/* Tool and planner panels use a more compact heading than an editorial section. */
html body main :is(.panel-h, .card.soft) > h2,
html body main.ac section > h2 {
  font-size: var(--pw-type-workspace) !important;
  line-height: 1.24;
}

html body .home-story,
html body main:not(.desk, .ac) :is(.card, .about-story, .guide),
html body .home-story .home-text-link {
  text-align: start;
}
html body .home-story :is(.home-section-heading, .home-feature, .home-founder-story, .home-source-note) > p:not(.home-eyebrow),
html body #coverage .coverage-intro,
html body main:not(.desk, .ac) :is(.about-story, .card) > p:not([class]) {
  font-size: var(--pw-type-body);
  line-height: 1.62;
}
html body .home-story .home-eyebrow {
  font-size: var(--pw-type-kicker);
  line-height: 1.4;
}
html body #coverage :is(.route-fields label, .map-country-panel > label),
html body .home-story :is(.home-text-link, .home-secondary-link) {
  font-size: var(--pw-type-label);
}
html body main .card.more p { margin-inline: 0; }
html body main .card.more .btns { justify-content: flex-start; }

/* Neighboring actions share dimensions. Their colors express priority. */
:root {
  --pw-action-height: 44px;
  --pw-action-gap: 8px;
  --pw-action-radius: 10px;
}
html body :is(.btns, .actions):has(> :is(a.btn, button.btn) ~ :is(a.btn, button.btn)) {
  gap: var(--pw-action-gap) !important;
}
html body :is(.btns, .actions):has(> :is(a.btn, button.btn) ~ :is(a.btn, button.btn)) > :is(a.btn, button.btn):not(.link):not([hidden]) {
  box-sizing: border-box;
  min-height: var(--pw-action-height) !important;
  padding: 8px 14px !important;
  border-radius: var(--pw-action-radius) !important;
  font-size: var(--pw-type-label);
  line-height: 1.35;
  justify-content: center;
  text-align: center;
}