/* ============================================================================
   BASE — reset, typography, container, the few shared pieces of furniture.
   Section-specific rules live in sections.css so that moving a section in
   WordPress later cannot break anything here.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* anchors must not land under the sticky header */
  scroll-padding-top: calc(var(--header-h) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* a long word or a wide table must never push the page sideways */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.005em;
  font-weight: 700;
}
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.015em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.22; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
/* `ol` as well as `ul`: the numbered sequences on this page draw their own
   markers — a counter circle in .steps, a literal 01..08 in .ncards — and
   leaving the default on gave every one of them two numbers side by side. */
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ------------------------------------------------------------- container */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--bone { background: var(--bone); }

/* --------------------------------------------------------------- pieces */

/* the red eyebrow above a heading — the profile's kicker */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  /* --red-dark, not --red: the brand red is 4.43:1 on white and AA asks 4.5
     of text this small. At 11px letterspaced uppercase the two cannot be
     told apart; every red large enough to pass keeps the approved value. */
  color: var(--red-dark);
  margin: 0 0 .9rem;
}
.eyebrow--light { color: var(--red-light); }

/* the short red rule the profile puts under every section title */
.rule {
  width: 58px; height: 4px;
  background: var(--red);
  border-radius: 2px;
  margin-top: 1.1rem;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--body);
  max-width: 58ch;
}

/* the charcoal disc with a red ring — the profile's badge, as an icon slot */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--ink-2), var(--ink-3));
  box-shadow: 0 0 0 1px var(--line-red);
  color: #fff;
}
.badge svg { width: 20px; height: 20px; }
.badge--sm { width: 34px; height: 34px; }
.badge--sm svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  padding: .82rem 1.5rem;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }
.btn--on-dark { border-color: rgba(255,255,255,.34); color: #fff; }
.btn--on-dark:hover { border-color: var(--red-light); color: var(--red-light); }
.btn:active { transform: translateY(1px); }

/* --------------------------------------------- the red wave edge motif */
/* Lifted from the profile, where it closes the cover photograph and the value
   strip. It is what makes the page read as the same document as the PDF. */
.wave { display: block; width: 100%; height: clamp(22px, 3.2vw, 44px); }
.wave svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------- screen reader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  z-index: 999; background: var(--red); color: #fff;
  padding: .6rem 1.2rem; border-radius: 0 0 6px 6px; font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }