/* LTT typography. Load after tokens.css.

   Three styles, one per size (size, line height, tracking, weight); colour comes from the semantic tokens: all text text-primary,
   a label or a note .text-secondary:
     Heading  20 / 28  medium   h1, h2
     Body     16 / 24  regular  paragraphs
     Small    13 / 20  medium   everything smaller
   Links look like their text: same size, colour and weight; a link on its own line is a paragraph of body text. In text and on their own: a line at 45% of the text colour;
   the wordmark and the footer: no line. On hover the line takes the full text colour. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Inter 4.1 variable (wght + opsz), cut to Latin with every OpenType feature kept. Licence: fonts/Inter-LICENSE.txt (OFL) */
  src: url("fonts/InterVariable-latin.woff2") format("woff2");
  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+20AC, U+2122, U+2190-2199, U+2212, U+FEFF;
}
/* Cyrillic: the browser loads it (30 KB) only when a page shows Cyrillic text */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 380;
  --font-weight-medium: 420;

  /* Heading */
  --text-heading: 1.25rem;
  --text-heading--line-height: 1.4;
  --text-heading--letter-spacing: -0.0225em;
  /* Body */
  --text-body: 1rem;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: -0.018em;
  /* Small */
  --text-small: 0.8125rem;
  --text-small--line-height: calc(20 / 13);
  --text-small--letter-spacing: -0.009em;
  /* Nothing renders under 12 px, a graphic that scales included */
  --text-floor: 0.75rem;

  /* Text column: about 70 characters of body text */
  --measure: 34rem;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  letter-spacing: var(--text-body--letter-spacing);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

/* Text styles */

h1, h2, .type-heading {
  font-size: var(--text-heading);
  line-height: var(--text-heading--line-height);
  letter-spacing: var(--text-heading--letter-spacing);
  font-weight: var(--font-weight-medium);
  text-wrap: balance;
}

h1, h2, p { margin: 0; }
/* Paragraphs and the page title break without a lone last word; balance would split a long title into two even halves */
h1, p { text-wrap: pretty; }

/* A label or a note */
.text-secondary { color: var(--color-text-secondary); }

.type-body {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  letter-spacing: var(--text-body--letter-spacing);
  font-weight: var(--font-weight-regular);
  text-wrap: pretty;
}

.type-small {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  letter-spacing: var(--text-small--letter-spacing);
  font-weight: var(--font-weight-medium);
  text-wrap: pretty;
}

/* Links */
a {
  color: inherit;
  font-weight: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* The wordmark and the footer: no line until hover */
.link-nav { text-decoration-color: transparent; }

/* Keyboard focus looks like hover */
@media (hover: hover) {
  a:hover { text-decoration-color: currentColor; }
}
a:focus-visible { outline: none; text-decoration-color: currentColor; }