/**
 × typography_css v2.01 × updated 2026-10-06 ×
 × created 2025-12-03 × raimundo p. solar ×
 × Fonts (self-hosted Inter + Spectral, IBM Plex fallback), type scale, text utilities ×
 **/

/*
 * FONT CHOICE
 * Each list is in order of preference. To switch
 * typefaces, just swap the first two names, e.g.
 * "IBM Plex Sans", "Inter", … to go back to Plex.
 * All four families are self-hosted below (SIL OFL 1.1,
 * free for the website); a browser only downloads a
 * family when it actually uses it.
 */
:root {
  --font-sans: "Inter", "IBM Plex Sans", system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "Spectral", "IBM Plex Serif", Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------
   GLOBAL TYPE SCALE (rem)
   Goal: ~24px minimum on a 14" MacBook (root ≈ 24–28px)
-------------------------------------------------- */

html {
  /* 1rem becomes ~24–28px depending on viewport */
  font-size: clamp(24px, 1vw + 12px, 28px);
}

body {
  /* Optional but recommended for readability */
  line-height: 1.35;
}

/** × SANS SERIF × **/
.text-xs {
  font-family: var(--font-sans);
  font-size: 0.72rem; /* ~24px at minimum */
  font-weight: 250;
} /* small, articles and credits */

.text-s {
  font-family: var(--font-sans);
  font-size: 0.8rem; /* ~24px at minimum */
  font-weight: 300;
} /* small, articles and credits */

.text-sm {
  font-family: var(--font-sans);
  font-size: 1rem; /* ~24px at minimum */
  font-weight: 300;
} /* small, articles and credits */

.text-ms {
  font-family: var(--font-sans);
  font-size: 1.125rem; /* ~27px+ */
  font-weight: 350;
} /* medium2, species */

.text-m {
  font-family: var(--font-sans);
  font-size: 1.25rem; /* ~30px+ */
  font-weight: 400;
} /* medium, featured articles */

.text-l {
  font-family: var(--font-sans);
  font-size: 1.75rem; /* ~42px+ */
  font-weight: 400;
} /* large, main sections */

.text-xl {
  font-family: var(--font-sans);
  font-size: 2.25rem; /* ~54px+ */
  font-weight: 400;
} /* hero text */

/**** SPECIES SERIF ****/
.text-sp-xs {
  font-family: var(--font-serif);
  font-size: 0.8rem; /* ~24px at minimum */
  font-weight: 250;
}

.text-sp-s {
  font-family: var(--font-serif);
  font-size: 1rem; /* ~24px at minimum */
  font-weight: 300;
}

.text-sp-m {
  font-family: var(--font-serif);
  font-size: 1.125rem; /* ~27px+ */
  font-weight: 400;
}

.text-sp-l {
  font-family: var(--font-serif);
  font-size: 1.75rem; /* ~42px+ */
  font-weight: 400;
}

.text-sp-xl {
  font-family: var(--font-serif);
  font-size: 2.25rem; /* ~54px+ */
  font-weight: 400;
}

/**** WEIGHT ****/
.text-light {
  font-weight: 300;
} /* light */
.text-regular {
  font-weight: 400;
} /* regular (normal) */
.text-medium {
  font-weight: 500;
} /* medium */
.text-bold {
  font-weight: 600;
} /* bold */
.text-black {
  font-weight: 700;
} /* black */

/* --------------------------------------------------
   FONT FILES
-------------------------------------------------- */

/* Inter (variable: every weight 100–900 in one file) · SIL OFL 1.1 · fonts/inter/license.txt */
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-latin-ext-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Spectral · SIL OFL 1.1 · fonts/spectral/license.txt */
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-300-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-300-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-ext-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Spectral";
  src: url("../../fonts/spectral/spectral-latin-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* IBM Plex (second choice) · SIL OFL 1.1 */
/* IBM Plex Sans */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fonts/plex-sans/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Serif */
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fonts/plex-serif/IBMPlexSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}