/* Self-hosted, latin subset, one file per weight. OFL-licensed, no attribution required. */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sourcesans3-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sourcesans3-600.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sourcesans3-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plexmono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/plexmono-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/plexmono-700.woff2") format("woff2")}

@layer tokens {
  :root {
    /* COLOUR — a hueless grey ladder, so the accent is the one saturated thing on the page */
    --bg: #161616;
    --nav2: #1a1a1a;
    --panel: #1f1f1f;
    --panel2: #272727;
    --line: #343434;

    --ink: #e8eaed;
    --ink2: #a4abb6;
    --ink3: #767d89;

    /* The logo's #00fefe toned to 9.7:1, so it sits below --ink instead of competing with it */
    --accent: #22d3d3;
    --accent2: #4ab0ff;
    --on-accent: #08201f;

    /* Behind and over photos */
    --media-bg: #000;
    --overlay: rgba(20, 22, 26, .82);
    --lightbox-bg: #0b0c0e;

    /* Dev-only problem markers */
    --error: #ff5c5c;
    --error-bg: #2a1616;
    --error-ink: #ffb4b4;

    /* TYPE — families carry kind (sans for content, mono for chrome); size and weight carry rank */
    --font-sans: "Source Sans 3", -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Fluid sizes: floor, rate, ceiling. Every floor is 12px or more. */
    --fs-base: clamp(15.5px, .65vw + 12.4px, 18px);
    --fs-title: clamp(19px, 1.1vw + 13.1px, 23px);
    --fs-bul: clamp(15.5px, .6vw + 12.6px, 17.5px);
    --fs-pill: clamp(12px, .3vw + 10.8px, 14.5px);
    --fs-data: clamp(13.5px, .35vw + 12.1px, 15px);
    /* Same value today, separate names so a tappable tab and a quiet label can diverge */
    --fs-nav: clamp(14.5px, .35vw + 13.1px, 16px);
    --fs-label: clamp(13px, .25vw + 12px, 14.5px);

    /* SHAPE */
    --radius: 10px;
    --pill-r: 20px;
    --pill-pad: 5px 13px;

    /* Height derived from width keeps the 16:9 hero uncropped at every size */
    --thumb-w: clamp(150px, 11vw + 91px, 210px);
    --thumb-h: calc(var(--thumb-w) * 9 / 16);
    /* The library logo art is 96px; anything larger upscales a raster */
    --logo-s: 80px;
    /* Sized to be seen: nothing else advertises that a row opens */
    --chevron-s: 36px;

    /* One focus ring; each element sets only its own offset */
    --focus-w: 2px;
    --focus-off: 2px;

    /* LAYOUT — breakpoints cannot be variables in media queries; the three used everywhere are 760 (tablet), 560 (phone), 400 (small phone) */
    --wrap-max: 1060px;
    --top-h: 56px;
    --tabs-h: 48px;
    /* Both fixed bars: the page starts below them, and anchor jumps stop below them */
    --nav-h: calc(var(--top-h) + var(--tabs-h));
  }

  /* Phone: the thumb shrinks to a recognition cue, buying the title column back */
  @media (max-width: 560px) {
    :root { --thumb-w: 112px; --chevron-s: 26px; }
  }
  @media (max-width: 400px) {
    :root { --thumb-w: 96px; }
  }
}