/* rhys.wtf's type, the same on every platform (rhyswtf-apps,
   `typography`). Every app serves this at /static/type.css, with the
   fonts in apps/fonts/ beside it (the url()s are relative to it), and
   links it after its own stylesheet and palettes.css, so the faces and
   the --font-* tokens here are the ones that count. Edit it in
   rhyswtf-web and sync, never in an app.

   Why each part is here (Android Chrome and iOS Safari drew the same page
   differently before):

   - Each face says which weights it is, so a weight the page asks for is
     drawn by a real face: Figtree is the variable font (300 to 900), so
     600 and 700 are Figtree's own semibold and bold rather than the
     regular smeared thicker, which Skia (Android) and Core Text (iOS) do
     differently; Recoleta's bold is its own file; RecoletaBold answers to
     any weight, so a heading's default bold isn't made bolder still.
   - font-synthesis: no made-up bold or small capitals anywhere (a made-up
     slant is still allowed: Recoleta and Figtree have no italics).
   - Until a font has arrived (font-display: swap), the text is drawn in a
     local font that's sized and spaced to take the same room (the
     "fallback" faces: size-adjust from the average width of English text,
     ascent and descent from the real font's), so nothing jumps when it
     swaps. Times New Roman and Arial on Apple and Windows (Liberation's
     have their metrics on Linux), Noto Serif and Roboto on Android, Menlo
     and friends for code. Never system-ui: that's San Francisco on Apple
     and Roboto on Android, with different widths and weights.
   - text-size-adjust: 100% stops iOS enlarging text in landscape and
     Android Chrome's "font boosting" of some blocks; zooming still works.
   - Kerning on everywhere (it's "auto", platform by platform, otherwise).
   - Text fields are at least 16px, so iOS doesn't zoom the page when
     one is focused.

   The numbers in the fallback faces come from the font files themselves
   (fontTools; see rhyswtf-web's README, "Typography"). */

@font-face {
    font-family: Recoleta;
    src: url("Recoleta.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Recoleta;
    src: url("RecoletaBold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: RecoletaBold;
    src: url("RecoletaBold.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Figtree;
    src: url("Figtree-Variable.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* An italic design, used upright (font-style: normal) for the logo. */
@font-face {
    font-family: Lora-Italic;
    src: url("Lora-Italic-VariableFont_wght.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Monaspace Neon";
    src: url("MonaspaceNeon-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* The fallbacks, sized like the fonts they stand in for. A family whose
   local fonts are all missing is skipped, so each stack below tries the
   Apple and Windows one, then the Android one. */
@font-face {
    font-family: "Recoleta fallback";
    src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif");
    size-adjust: 109.14%;
    ascent-override: 91.62%;
    descent-override: 32.98%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Recoleta fallback android";
    src: local("Noto Serif"), local("NotoSerif-Regular");
    size-adjust: 91.72%;
    ascent-override: 109.03%;
    descent-override: 39.25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "RecoletaBold fallback";
    src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold");
    size-adjust: 107.71%;
    ascent-override: 92.84%;
    descent-override: 33.42%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "RecoletaBold fallback android";
    src: local("Noto Serif Bold"), local("NotoSerif-Bold");
    size-adjust: 90.59%;
    ascent-override: 110.38%;
    descent-override: 39.74%;
    line-gap-override: 0%;
}

/* Arial (Liberation Sans has its metrics) and Roboto need the same
   numbers to within a tenth of a per cent. */
@font-face {
    font-family: "Figtree fallback";
    src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Roboto"), local("Roboto-Regular");
    size-adjust: 100.8%;
    ascent-override: 94.2%;
    descent-override: 24.8%;
    line-gap-override: 0%;
}

/* Each 0.6 em wide (Menlo's 0.602), against Monaspace's 0.62. */
@font-face {
    font-family: "Monaspace fallback";
    src: local("Menlo"), local("Menlo-Regular"), local("DejaVu Sans Mono"), local("DejaVuSansMono"), local("Droid Sans Mono"), local("DroidSansMono"), local("Liberation Mono"), local("LiberationMono"), local("Courier New"), local("CourierNewPSMT");
    size-adjust: 103.32%;
    ascent-override: 91.47%;
    descent-override: 19.36%;
    line-gap-override: 9.68%;
}

:root {
    --font-body: Recoleta, "Recoleta fallback", "Recoleta fallback android", serif;
    --font-display: RecoletaBold, "RecoletaBold fallback", "RecoletaBold fallback android", serif;
    --font-ui: Figtree, "Figtree fallback", sans-serif;
    --font-italic: Lora-Italic, Georgia, serif;
    --font-mono: "Monaspace Neon", "Monaspace fallback", monospace;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-synthesis: style;
    font-kerning: normal;
}

/* On every device, not only touch screens: one rule, the same fields
   everywhere. !important: an app's smaller size for a field must not
   bring back iOS's zoom on focus. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]),
select,
textarea {
    font-size: max(1rem, 16px) !important;
}