/* ============================================================
   base.css — faces, element defaults, typographic roles, focus,
   skip links, prose, the noise layer.
   ============================================================ */

@layer base {

  /* ---------------------------------------------------------------
     FACES — three, self-hosted, SIL OFL. Zero third-party origins.

     Latin subset only, as distributed by the foundry. No hand-authored
     glyph list: with no build step, a hand-listed subset silently falls
     back mid-string the first time someone types a character nobody
     thought of, and that is a worse failure than a few extra KB.

     Real measured sizes -- 140KB total, not the 84KB the spec estimated:
       archivo.woff2          90,104   2 axes (wdth + wght), both in use
       instrument-sans.woff2  30,092   wght only; wdth was never varied
       martian-mono.woff2     23,628   wdth pinned to 87.5, the one value used

     Archivo keeps both axes deliberately. The design uses wdth 100/108/112/125
     at wght 600/700 -- six static instances would cost roughly 220KB against
     this file's 90KB.

     Because the latin subset carries no arrows or geometric shapes
     (U+2192, U+25B2, U+25B6), every such glyph on this site is an inline
     SVG rather than a character. See .pg-ico in components.css.
     --------------------------------------------------------------- */

  @font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    /* optional, not swap: the hero is set at wdth 112 up to 136px, and no
       metric-matched fallback can match a width axis. swap would reflow the
       largest text on the page, which is exactly what CLS measures. */
    font-display: optional;
  }

  @font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Martian Mono";
    src: url("../fonts/martian-mono.woff2") format("woff2");
    font-weight: 400 500;
    font-stretch: 87.5%;
    font-style: normal;
    font-display: swap;
  }

  /* Metric-matched fallback for body copy — this is what buys CLS <= 0.02
     on the text that actually reflows. */
  @font-face {
    font-family: "Instrument Fallback";
    src: local("Helvetica Neue"), local("Arial");
    size-adjust: 101.2%;
    ascent-override: 94%;
    descent-override: 24%;
    line-gap-override: 0%;
  }

  :root {
    --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-ui: "Instrument Sans", "Instrument Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Martian Mono", "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  }

  /* ---------------------------------------------------------------
     ELEMENTS
     --------------------------------------------------------------- */

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-ui);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: var(--ls-body);
    overflow-x: clip;
  }

  /* The noise layer. ~600 bytes, fixed, non-interactive. It is what makes
     phone photography, commissioned vector and screenshots cohere, and it
     is the cheapest production value in existence. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-raised);
    pointer-events: none;
    background-image: var(--noise);
    opacity: 0.035;
    mix-blend-mode: soft-light;
  }

  ::selection {
    background: var(--accent);
    color: var(--accent-fg);
  }

  /* ---------------------------------------------------------------
     TYPE ROLES
     Tracking is bimodal: display negative, chrome positive, body zero.
     Archivo Expanded at -0.025em directly above Martian Mono caps at
     +0.14em IS the typographic signature. Nothing else is needed.
     --------------------------------------------------------------- */

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    text-wrap: pretty;
  }

  h1,
  .pg-t-h1 {
    font-size: var(--t-h1);
    font-variation-settings: "wdth" 112, "wght" 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--ls-h1);
    /* Where a line breaks in display type is a design decision, so balance is
       deliberately off and breaks are hand-authored with <br class="pg-br-*">.
       The ch cap is the safety net, not the mechanism. */
    text-wrap: wrap;
    max-inline-size: 18ch;
  }

  .pg-t-hero {
    font-size: var(--t-hero);
    font-variation-settings: "wdth" 112, "wght" 700;
    line-height: 0.94;
    text-transform: uppercase;
    letter-spacing: var(--ls-hero);
    text-wrap: wrap;
    max-inline-size: 14ch;
  }

  h2,
  .pg-t-h2 {
    font-size: var(--t-h2);
    font-variation-settings: "wdth" 108, "wght" 700;
    line-height: 1.08;
    letter-spacing: var(--ls-h2);
    max-inline-size: 22ch;
  }

  h3,
  .pg-t-h3 {
    font-size: var(--t-h3);
    font-variation-settings: "wdth" 100, "wght" 600;
    line-height: 1.2;
    letter-spacing: var(--ls-h3);
  }

  .pg-lede {
    font-size: var(--t-lede);
    line-height: 1.5;
    max-inline-size: var(--w-tight);
    color: var(--fg-2);
  }

  .pg-body {
    font-size: var(--t-body);
    line-height: 1.6;
    max-inline-size: var(--w-text);
    color: var(--fg-2);
  }

  .pg-mono,
  .pg-meta {
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    font-variation-settings: "wdth" 87.5;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--fg-3);
  }

  .pg-micro {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-variation-settings: "wdth" 87.5;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--fg-3);
  }

  .pg-stat {
    font-family: var(--font-display);
    font-size: var(--t-numeral);
    font-variation-settings: "wdth" 125, "wght" 700;
    line-height: 0.9;
    letter-spacing: var(--ls-h1);
  }

  /* Tabular figures are not optional — the ticker jitters once a second
     without them, and spec sheets stop reading as records. */
  .pg-mono,
  .pg-meta,
  .pg-micro,
  .pg-stat,
  table,
  time {
    font-variant-numeric: tabular-nums;
  }

  /* Tracking is a latin decision. Applying it to CJK inserts real gaps
     between ideographs, and none of these faces cover CJK anyway. */
  :lang(en) .pg-mono,
  :lang(en) .pg-meta {
    letter-spacing: var(--ls-meta);
  }

  :lang(en) .pg-micro {
    letter-spacing: var(--ls-micro);
  }

  /* ---------------------------------------------------------------
     LINKS
     --------------------------------------------------------------- */

  .pg-link {
    position: relative;
    color: var(--link);
    display: inline-block;
  }

  .pg-link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -2px;
    block-size: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-2) var(--ease-out-quick);
  }

  @media (hover: hover) and (pointer: fine) {

    .pg-link:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  }

  .pg-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* Prose links never rely on a hover-only affordance. */
  .pg-prose a,
  .pg-body a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
  }

  /* ---------------------------------------------------------------
     FOCUS — on the never-cut list.
     --focus swaps on the paper surface because --peepo-500 on --paper-0
     is 2.58:1, below the 3:1 WCAG 2.4.13 requires.
     --------------------------------------------------------------- */

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

  :focus:not(:focus-visible) {
    outline: none;
  }

  /* ---------------------------------------------------------------
     SKIP LINKS — first focusable content on every page
     --------------------------------------------------------------- */

  .pg-skip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-skiplink);
    transform: translateY(-120%);
    background: var(--accent);
    color: var(--accent-fg);
    font-family: var(--font-ui);
    font-size: var(--t-label);
    font-weight: 600;
    text-transform: uppercase;
    padding: var(--s-3) var(--s-5);
    transition: transform var(--dur-2) var(--ease-out-hud);
  }

  :lang(en) .pg-skip {
    letter-spacing: var(--ls-label);
  }

  .pg-skip:focus {
    transform: translateY(0);
  }

  .pg-skip + .pg-skip:focus {
    transform: translateY(100%);
  }

  /* Below 900px the nav lives inside the mobile sheet, which is not in the
     DOM until it opens. nav.js repoints this link at the hamburger; the
     class below is what it toggles. */
  .pg-skip[data-skip-nav][hidden] {
    display: none;
  }

  /* ---------------------------------------------------------------
     UTILITY PRIMITIVES USED BY BASE
     --------------------------------------------------------------- */

  .pg-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  hr.pg-rule {
    border: 0;
    block-size: 1px;
    background: var(--hair-strong);
    margin-block: var(--s-5);
  }

  /* ---------------------------------------------------------------
     PROSE — the [data-surface="document"] long-form wrapper
     --------------------------------------------------------------- */

  .pg-prose {
    max-inline-size: var(--w-text);
    font-size: var(--t-body);
    line-height: 1.65;
    color: var(--fg-2);
  }

  .pg-prose > * + * {
    margin-block-start: var(--s-5);
  }

  .pg-prose h2 {
    color: var(--fg);
    margin-block-start: var(--s-8);
  }

  .pg-prose h3 {
    color: var(--fg);
    margin-block-start: var(--s-7);
  }

  .pg-prose ul,
  .pg-prose ol {
    padding-inline-start: var(--s-5);
  }

  .pg-prose li + li {
    margin-block-start: var(--s-2);
  }

  .pg-prose blockquote {
    border-inline-start: 2px solid var(--accent);
    padding-inline-start: var(--s-5);
    color: var(--fg);
  }

  .pg-prose code {
    font-family: var(--font-mono);
    font-size: var(--t-code);
  }
}