/* Shared typography: the footer is the reference for body text and labels. */
:root {
  --font-body: "Segoe UI", "Trebuchet MS", sans-serif;
  --font-display: var(--font-body);
  --text-body: 13px;
  --text-label: 12px;
  --text-caption: 11px;
}

body {
  font: 400 var(--text-body)/1.65 var(--font-body);
}

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

.annotation-index, .annotation-caption, .plan-dimension, .hero-meta,
.section-kicker, .service-number, .process-steps > div > span,
.page-hero-index, .principle-mark, .solution-index, .catalog-note span,
.notice-symbol, .post-meta, .missing-code, .method-label, .aside-coordinate {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
}

.intro-copy, .about-copy, .process-lead, .process-steps p,
.service-heading p, .contact-callout p, .principle p,
.solution-row p:not(.eyebrow), .notice-state p,
.home-post-card > p, .post-card > p, .address-detail {
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
}

.eyebrow, .section-kicker, .solution-row .eyebrow, .method-label,
.post-meta, .missing-code {
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .06em;
}

.button, .text-link, .light-link, .back-link, .social-inline a {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: normal;
}

.service-number, .process-steps > div > span, .solution-index,
.service-footer, .topic-list li, .catalog-note, .contact-aside > p,
.method-action {
  font-size: var(--text-label);
  line-height: 1.65;
}

.annotation-index, .annotation-caption, .hero-meta,
.page-hero-index, .aside-coordinate {
  font-size: var(--text-caption);
  letter-spacing: .04em;
}

.plan-dimension { font-size: 10px; }
.hero-copy, .page-hero-inner > p:not(.eyebrow), .history-main p {
  font-size: 15px;
  line-height: 1.65;
}
.article-content { font-size: 16px; line-height: 1.8; }
.primary-nav a { font-size: 12px; font-weight: 600; letter-spacing: .04em; }

@media (min-width: 681px) and (max-width: 900px) {
  .primary-nav { gap: 16px; }
  .primary-nav a { font-size: 11px; }
}

@media (max-width: 680px) {
  .primary-nav a, .menu-toggle { font-size: var(--text-body); }
  .hero-meta { flex-wrap: wrap; gap: 8px 12px; }
  .hero-meta .meta-rule { min-width: 20px; }
  .service-footer { flex-wrap: wrap; }
  .post-meta { flex-wrap: wrap; gap: 8px 16px; }
}