:root {
  --tms-layout-container: min(1180px, calc(100vw - 2rem));
  --tms-layout-content: min(760px, calc(100vw - 2rem));
  --tms-layout-rail: 320px;
  --tms-space-xs: 0.5rem;
  --tms-space-sm: 0.75rem;
  --tms-space-md: 1rem;
  --tms-space-lg: 1.5rem;
  --tms-space-xl: 2rem;
  --tms-space-2xl: 3rem;
  --tms-font-body:
    "Libre Franklin", "Source Sans 3", "Helvetica Neue", sans-serif;
  --tms-font-headline: "Newsreader", "Source Serif 4", "Iowan Old Style", serif;

  /*
   * Type tiers in the content area (ADR-074 Decision 8, option B). Newsreader's lowercase is short
   * (x-height 0.426 em against Libre Franklin's 0.530), so headlines under 20px (link lists, the Latest
   * grid, thumbnail rows, rail links) set in Libre Franklin; titles 20-26px drop to 600; section, top
   * story and article titles stay 700; kickers and small labels are 600. Header and footer keep their own.
   */
  --tms-font-list: var(--tms-font-body);
  --tms-weight-headline: 700;
  --tms-weight-title: 600;
  --tms-weight-list: 600;
  --tms-weight-label: 600;

  /*
   * The page's own colours, for a surface inside the header, which remaps --tms-color-* to its dark
   * chrome (components.css): the header mega menu paints in the page colour (ADR-083). A custom
   * property inherits its computed value, so these carry the page palette, dark scheme included, down
   * through the header unchanged: white in light mode, #0b1120 in dark mode on the default palette.
   */
  --tms-page-background: var(--tms-color-background, #fff);
  --tms-page-text: var(--tms-color-text, #111);
  --tms-page-muted: var(--tms-color-muted, #6b7280);
  --tms-page-border: var(--tms-color-border, #e5e7eb);
}

/* Light text on a dark ground reads heavier: each title tier drops 50. */
@media (prefers-color-scheme: dark) {
  :root {
    --tms-weight-headline: 650;
    --tms-weight-title: 550;
    --tms-weight-list: 550;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--tms-color-background, #fff);
  color: var(--tms-color-text, #111);
  font-family: var(--tms-font-body);
  line-height: 1.6;
}

a {
  color: var(--tms-color-link, var(--tms-color-primary, #111827));
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--tms-color-accent, #b91c1c);
  outline-offset: 3px;
}

img {
  height: auto;
  max-width: 100%;
}

.tms-site-main:focus:not(:focus-visible) {
  outline: none;
}

.screen-reader-text,
.tms-skip-link {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.screen-reader-text:focus,
.tms-skip-link:focus {
  background: var(--tms-color-background, #fff);
  border: 2px solid var(--tms-color-accent, #b91c1c);
  clip: auto;
  clip-path: none;
  height: auto;
  left: 1rem;
  overflow: visible;
  padding: 0.75rem 1rem;
  top: 1rem;
  white-space: normal;
  width: auto;
  z-index: 10000;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}