/* SPDX-License-Identifier: AGPL-3.0-or-later
 *
 * Every number here was measured against the binaries we ship, not taken from
 * convention. See docs/PLAN.md § Typography.
 */

/* Self-hosted from upstream. Google's CDN builds strip most OpenType features. */
@font-face {
  font-family: "Literata";
  src: url("/assets/Literata-Variable-0d898592.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/Literata-Italic-Variable-96e4bbd7.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/InterVariable-884c49a1.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/Fraunces-Variable-44f3de7a.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-Regular-310ed802.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-Medium-4c06e7a1.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* Metric-matched fallbacks so the swap does not reflow the page. */
@font-face {
  font-family: "Literata Fallback";
  src: local("Georgia"), local("Times New Roman"), local("serif");
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("sans-serif");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}

:root {
  --font-reading: "Literata", "Literata Fallback", Georgia, serif;
  --font-ui:      "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-display: "Fraunces", "Literata Fallback", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Hand-tuned and integer-snapped below 24px: sub-pixel sizes round
     inconsistently across engines, so 13.44px is a rendering lottery. */
  --step--1: 13px;
  --step-0:  16px;
  --step-1:  19px;
  --step-2:  23px;
  --step-3:  28px;
  --step-4:  36px;
  --step-5:  48px;
  --step-6:  64px;

  /* NOT 65ch. `ch` is the advance of `0` (0.579em in Literata) while real text
     averages 0.4435em in Slovenian and 0.4608em in English, so 65ch renders
     about 85 characters. 29.4em = 65 x 0.4522 gives 66.3 sl / 63.8 en. */
  --measure: 29.4em;

  --leading-tight: 1.25;
  --leading-ui:    1.45;
  --leading-read:  1.58;
}

/* Carons rise above cap height and collide with descenders from the line
   above, so Slovenian needs more room than English. An optical adjustment,
   not decoration. */
:lang(sl) { --leading-read: 1.65; }

html {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: var(--leading-ui);
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
}

/* Tabular, slashed-zero numerals wherever digits line up. The slashed zero is
   one of the features the CDN build does not carry. */
.numeric, time, .ledger, .dragons-eye {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "zero" 1;
}

/* In a log, != collapsing to a glyph is a bug. JetBrains Mono has no `liga`
   feature at all - its coding ligatures ride entirely on `calt`, so
   font-variant-ligatures: none is not enough. */
code, pre, kbd, samp, .mono, .ledger, .dragons-eye {
  font-family: var(--font-mono);
  font-feature-settings: "liga" 0, "calt" 0, "zero" 1;
}

/* The Lectern. */
.prose {
  font-family: var(--font-reading);
  max-inline-size: var(--measure);
  font-size: var(--step-1);
  line-height: var(--leading-read);
  text-wrap: pretty;
  hyphens: auto;
}
.prose > * + * { margin-block-start: 1rlh; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  /* SOFT below 50 turns the carons into hairlines that shimmer at text sizes. */
  font-variation-settings: "SOFT" 60, "WONK" 1;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* Safari is the only engine that has ever shipped this, and it is every one of
   Darko's devices. Progressive, never faked with a negative text-indent. */
@supports (hanging-punctuation: first) {
  .prose { hanging-punctuation: first last; }
}

/* Removes the half-leading above headings, which is what actually makes
   spacing look wrong. Chrome 133 / Safari 18.2 / Firefox 154. */
@supports (text-box-trim: trim-both) {
  h1, h2, h3 { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
}

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