@layer base {
  html {
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    /* Never synthesize weight/style — Caprasimo is single-weight; requesting
       800/900 must not trigger a fake bold. DM Sans/Space Mono ship their own
       real weights, so nothing else is affected. */
    font-synthesis: none;
  }

  body {
    background: var(--ink);
    color: var(--color-fg);
    min-block-size: 100dvb;
    font-size: var(--step-0);
    overflow-x: hidden;
  }

  ::selection {
    background: var(--gold);
    color: var(--ink);
  }

  /* Display type — Caprasimo, single weight, warm wedge-serif poster face.
     Do not set a bold font-weight (browsers would synthesize a fake bold).
     Font-synthesis disabled on html so no fake weight/style ever creeps in. */
  :where(h1, h2, h3, h4) {
    font-family: var(--font-display);
    font-weight: normal;
    font-synthesis: none;
    line-height: 1.05;
    letter-spacing: 0;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-6); line-height: 0.95; letter-spacing: -0.01em; }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }

  p { text-wrap: pretty; }

  a {
    color: inherit;
    text-underline-offset: 0.15em;
    text-decoration-thickness: from-font;
  }

  /* External link marker: ↗ after any target="_blank" link */
  a[target="_blank"]::after {
    content: "↗";
    display: inline-block;
    margin-inline-start: 0.15em;
    font-size: 0.85em;
    line-height: 1;
    color: currentColor;
    opacity: 0.55;
    text-decoration: none;
  }

  :where(a, button):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* Interactive touch target minimum */
  :where(a, button, [role="button"]) {
    min-block-size: 24px;
    min-inline-size: 24px;
  }
  @media (pointer: coarse) {
    :where(a, button, [role="button"]) {
      min-block-size: 44px;
      min-inline-size: 44px;
    }
  }

  /* Forced Colors Mode: preserve borders/badges via system colors */
  @media (forced-colors: active) {
    :root {
      --green: LinkText;
      --gold: Mark;
      --color-hairline: CanvasText;
    }
  }

  /* Visually hidden helper (kept from prior base) */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Skip link — hidden until focused via keyboard */
  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: 0;
    z-index: 1000;
    padding: 0.75rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-weight: 700;
    text-decoration: underline;
  }
  .skip-link:focus {
    inset-block-start: 0;
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
}

@layer utilities {
  /* PREVIEW: lowercase headings (opt out of uppercase on every display-font
     surface). Mono eyebrows/labels/tabs keep their uppercase because they're
     semantic UI cues, not headings. Toggle by deleting this block. */
  :where(h1, h2, h3, h4),
  .hero__pullquote,
  .escala__country figcaption,
  .escala__stat--big dd,
  .analogy__liga, .analogy__heading,
  .workload__label, .workload__heading,
  .giants__name, .giants__heading,
  .revelation__player, .revelation__heading,
  .teaser__quote,
  .tile__label,
  .cop-title__h1, .lig-title__h1, .cal-title__h1, .fbk-title__h1,
  .cop-h2, .cop-h3, .cop-h4,
  .cop-vaga-list__title,
  .cop-ko-row__rodada, .cop-funnel__fase, .cop-funnel__final-label,
  .lig-head__h2,
  .arch-head__title,
  .mf-hero__title, .mf-hero__lede, .mf-finale__quote,
  .manifesto__section h2, .manifesto__pullquote p,
  .metric-card__value,
  .escala__punchline {
    text-transform: none;
  }
}