/* ==========================================================================
   BASE — reset, elements, typography defaults, accessibility primitives.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-5));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-nav-open { overflow: hidden; }

/* --- Headings ------------------------------------------------------------
   Geometric sans throughout, set LIGHT. Gotham at 300–400 is what gives a
   brokerage site its composure; the same face at 600+ reads as a tech
   landing page. Weight decreases as size increases, which is how the face
   is meant to be set.                                                     */

h1, h2, h3, h4, h5, h6,
.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  color: var(--color-text-strong);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.t-display { font-size: var(--fs-4xl); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: var(--ls-tightest); }
h1, .t-h1   { font-size: var(--fs-3xl); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: var(--ls-tightest); }
h2, .t-h2   { font-size: var(--fs-2xl); font-weight: var(--fw-light); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h3, .t-h3   { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h4, .t-h4   { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
h5, h6      { font-size: var(--fs-md);  line-height: var(--lh-snug); }

p { margin: 0; }
p + p { margin-top: var(--space-4); }

/* --- Utility type roles -------------------------------------------------- */

.t-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

.t-lede {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  max-width: var(--measure);
}

.t-body { font-size: var(--fs-base); line-height: var(--lh-relaxed); max-width: var(--measure); }
.t-small { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.t-meta {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* The site's one serif moment. Georgia is the @properties serif token, and
   holding it to quoted human speech is what keeps it meaningful instead of
   decorative. */
.t-quote {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--color-text-strong);
}
.t-numeral {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--ls-tightest);
  color: var(--color-text-strong);
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- Links --------------------------------------------------------------- */

a { color: inherit; text-decoration: none; }

.t-body a, .t-lede a, .entry-content a {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.t-body a:hover, .t-lede a:hover, .entry-content a:hover { color: var(--color-text-strong); }

/* --- Media --------------------------------------------------------------- */

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

figure { margin: 0; }

/* --- Lists --------------------------------------------------------------- */

ul, ol { margin: 0; padding: 0; }
.entry-content ul, .entry-content ol { padding-left: var(--space-5); margin: var(--space-4) 0; }
.entry-content li + li { margin-top: var(--space-2); }

/* --- Forms --------------------------------------------------------------- */

input, textarea, select, button { font: inherit; color: inherit; }

/* --- Accessibility primitives -------------------------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.screen-reader-text,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  padding: var(--space-3) var(--space-5);
  background: var(--color-inverse);
  color: var(--color-text-on-dark);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

::selection { background: var(--brass-200); color: var(--ink-900); }
.is-inverse ::selection { background: var(--brass-600); color: #FFF; }