/* docs/DESIGN.md #12 — typographie, liens, focus, contenu courant.
   Échelle typographique complète construite à l'étape 2 (styleguide),
   docs/DESIGN.md #4 et #10.1. */
@layer base {
  /* docs/DESIGN.md #4 — Montserrat variable, auto-hébergée, latin + latin
     étendu, font-display: swap. */
  @font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-variable-Kfyuw8m.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  body {
    background: var(--cream);
    color: var(--forest);
    font-family: var(--font-sans);
    font-weight: 400;
  }

  a {
    color: inherit;
  }

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

  /* docs/DESIGN.md #4 — échelle typographique. */
  h1, h2 {
    font-weight: 800;
    text-transform: uppercase;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: manual;
  }

  h3, .h3 {
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1.25;
  }

  .h-brand {
    font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5.75rem);
    line-height: .95;
    letter-spacing: -.01em;
  }

  h1, .h1 {
    font-size: clamp(2rem, 1.3rem + 3.2vw, 3.75rem);
    line-height: 1;
    letter-spacing: -.01em;
  }

  h2, .h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    line-height: 1.1;
  }

  p, li {
    max-width: var(--measure);
    text-wrap: pretty;
  }

  .lead {
    font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.5;
  }

  .label {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    line-height: 1.3;
  }

  .small {
    font-size: .9375rem;
    line-height: 1.5;
  }

  .text-muted {
    color: var(--ink-muted);
  }

  .tabular {
    font-variant-numeric: tabular-nums;
  }

  main a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness var(--dur) var(--ease);
  }

  main a:hover {
    text-decoration-thickness: 3px;
  }

  .visually-hidden {
    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: var(--space-4);
    top: -3rem;
    z-index: 100;
    background: var(--ochre);
    color: var(--forest);
    padding: var(--space-3) var(--space-5);
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: top var(--dur) var(--ease);
  }

  .skip-link:focus-visible {
    top: var(--space-4);
  }
}