/* ==========================================================
   BASE — reset and default element styles. No layout here.
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Two faces, two jobs: headings and UI chrome carry the brand face,
   running text uses the body face. Which font fills each role is set
   in src/_data/theme.json. */
h1, h2, h3, h4, h5, h6,
.btn,
.nav-list a,
.lede,
.stats dd,
.num {
  font-family: var(--font-heading);
}

/* Caps tiers. Montserrat carries real `smcp` glyphs — the shipped subset
   is rebuilt from the upstream TTF to keep them, because Google's own
   subset strips the feature. It has no `pcap`, so petite caps are left to
   the browser. Small caps need the extra tracking to breathe. */
/* Label tier — the small stuff, in petite caps. Needs the most tracking. */
.contact-card h2,
.contact-subhead,
.role-list h3,
.quals h3,
.support-grid h3,
.svc__name {
  font-variant-caps: all-petite-caps;
  letter-spacing: 0.04em;
}

/* Heading tier — page titles and section titles. Less tracking, because
   tracking needs shrink as type grows. Sizes are bumped ~12% in
   pages.css to compensate: small capitals sit below cap height, so the
   same font-size reads visibly smaller once set in small caps.
   The home hero H1 is not in this group; home.css sets it in petite caps. */
.page h1,
.section-title,
.page-cta h2,
.field-note__body h2 {          /* article headings, written as ## in Markdown */
  font-variant-caps: small-caps;
  letter-spacing: 0.025em;
}

.site-main { flex: 1; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -3rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

/* ==========================================================
   BUTTONS
   ========================================================== */
/* Buttons: <a class="btn"> outline, add btn--solid for the main action */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0 1.35rem;
  border: 2px solid rgba(232, 230, 225, 0.75);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover { background: rgba(232, 230, 225, 0.12); border-color: var(--text); }

.btn--solid {
  background: var(--rail-end);           /* darker green: 4.8:1 with the light text */
  border-color: var(--rail-end);
}
.btn--solid:hover { background: #36602f; border-color: #36602f; }

/* Header stays put when moving between pages (Chrome, Edge, Safari). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
}