/* ==========================================================================
   Oddech — base: fonts, reset, typography, focus, utilities
   ========================================================================== */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
  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: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  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: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  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: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--appbar-h) + 72px); }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Typography -------------------------------------------------------- */
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 650;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(28px, 3.4vw, var(--fs-3xl)); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 650; text-wrap: balance; }
h2, .h2 { font-size: clamp(22px, 2.3vw, var(--fs-2xl)); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 620; text-wrap: balance; }
h3, .h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: -0.012em; font-weight: 600; }
h4, .h4 { font-size: var(--fs-md); line-height: var(--lh-snug); font-weight: 600; }
.lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--text-2); max-width: 64ch; text-wrap: pretty; }
.overline {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Units inside uppercase text (.overline, table headers, stat labels): uppercase would turn µg/m³ into "ΜG/M³"
   (reads as milligrams!). Always wrap units there: <span class="unit">µg/m³</span>. */
.unit { text-transform: none; letter-spacing: 0; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "ss01"; }
.mono, code, kbd { font-family: var(--font-mono); font-size: .92em; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 6px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-muted);
  font-size: var(--fs-2xs); line-height: 1;
}
.gradient-text {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
a.link, .prose a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
a.link:hover, .prose a:hover { text-decoration-color: var(--accent); }
.prose { max-width: 72ch; color: var(--text-2); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { color: var(--text); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
sub, sup { font-size: .7em; line-height: 0; }

/* ---- Focus & selection -------------------------------------------------- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: var(--r-xs); }
::selection { background: var(--accent-soft); color: var(--text); }

/* ---- Scrollbars ---------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

/* ---- Icons (sprite: icons.svg, Lucide) ------------------------------------ */
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; }
.icon--sm { width: 15px; height: 15px; }
.icon--lg { width: 22px; height: 22px; }

/* ---- Utilities (keep this list short; prefer components) ---------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.row { display: flex; align-items: center; gap: var(--s-2); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.stack--lg { gap: var(--s-6); }
.grow { flex: 1 1 auto; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }

/* ---- Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
/* test mode (?test=1 sets html[data-test]): no animation, deterministic screenshots */
:root[data-test] *, :root[data-test] *::before, :root[data-test] *::after { animation: none !important; transition: none !important; }