/* ==========================================================
   Sim & Swarm — typography
   Source Serif 4  → headings, wordmark, numbers (journal voice)
   Public Sans     → body, navigation, buttons, labels (federal/technical voice)
   Load this AFTER styles.css so it takes precedence.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,400..600&display=swap");

:root {
  --font-serif: "Source Serif 4", "Source Serif Pro", Charter, "Bitstream Charter", Cambria, Georgia, serif;
  --font-sans: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* Shared sizes for equivalent roles on every page, including mobile. */
  --text-title: clamp(2.5rem, 6vw, 5rem);
  --text-section: clamp(2.25rem, 4vw, 3.375rem);
  --text-subheading: clamp(1.5rem, 2.5vw, 2rem);
  --text-statement: clamp(1.5rem, 2.5vw, 1.75rem);
  --text-lead: clamp(1.25rem, 2vw, 1.5rem);
  --text-body: 1rem;
  --text-small: max(14px, 0.875rem);
  --text-label: var(--text-small);
}

/* Body copy: Public Sans reads cleanly at text sizes and matches the
   U.S. Web Design System used across federal agency sites. */
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}

/* Headings: Source Serif 4 with optical sizing, so large headlines
   get the tighter display cut automatically. */
body h1,
body h2,
body h3,
.hero-copy h1,
.section-heading h2,
.capability-card h3,
.steps h3,
.about-copy h3,
.contact h2 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.08;
}

.hero-copy h1 { font-weight: 500; letter-spacing: -0.02em; }
body h1 { font-size: var(--text-title); }
body h2 { font-size: var(--text-section); }
body h3, .capability-card h3, .steps h3 { font-size: var(--text-subheading); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }

/* The italic lines in the hero and contact headings */
.hero-copy h1 em,
.contact h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Wordmark and ampersand marks */
.brand > span,
.footer-brand,
.contact-mark {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-amp,
.footer-brand > span:not(.llc),
.contact-mark { font-style: italic; font-weight: 400; }

/* Small labels: sans with tabular figures instead of a monospace face */
.eyebrow,
.brand-label,
.art-top,
.art-bottom,
.art-note,
.hero-foot,
.motif-caption,
.founder-role,
.expertise span {
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.05em;
}
.art-note, .founder-role { letter-spacing: 0; font-weight: 500; }

/* Sequence numbers: serif lining figures */
.step-number,
.card-top > span {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}

/* Interface */
nav a,
.button,
.text-link,
.capability-card a,
.contact-email,
#motion-toggle {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.005em;
}