/* Fango — jaettu artikkelityyli (FI + EN)
Käytä kaikissa blogiartikkeleissa:
Google Fonts -linkki lisätään erikseen HTML:n -osioon.
----------------------------------------------------------------
KOMPONENTIT (käytä tarpeen mukaan, kaikki ei tarvitse olla joka artikkelissa):
.tldr — TL;DR lyhyt yhteenveto
.stat-box — 3 tilastolaatikkoa
.shelf-grid — ruokatuote + säilyvyysaika -ruudukko
.date-compare — "parasta ennen" vs "viimeinen käyttöpäivä" -vertailu
.temp-box — lämpötilaohje-boksi (vihreä/punainen)
.sense-list — numeroitu aistintarkistuslista
.tips-list — numeroitu vinkkijono
.danger-list — varoituslista (punainen)
.disclosure — vastuuvapauslauseke (vertailuartikkelit)
.comp-table-wrap — vertailutaulukko mobiiliscrolla
.app-card — sovelluskortti (vertailuartikkelit)
.bestfor-grid — "paras kenelle" -ruudukko
.fango-callout — Fango-mainoslaatikko (sisältää kuvan)
.sources-box — lähdeluettelo
.article-cta — artikkelin loppukehote
*/
/* ── ROOT ─────────────────────────────────────────────────────── */
:root {
--bg: #0C0C0C; --bg-nav: rgba(12,12,12,0.88); --bg-card: #161616; --bg-card-hover: #1D1D1D;
--border: rgba(255,255,255,0.07); --border-orange: rgba(245,130,31,0.28);
--orange: #F5821F; --orange-dim: rgba(245,130,31,0.12); --orange-glow: rgba(245,130,31,0.07);
--green: #2DB16E; --green-dim: rgba(45,177,110,0.14);
--red: #E05555; --red-dim: rgba(220,60,60,0.1);
--text: #FFFFFF; --text-muted: #707070; --text-body: #BCBCBC;
--font-display: 'Syne', sans-serif; --font-body: 'Instrument Sans', sans-serif;
--max-w: 1160px; --article-w: 820px; --nav-h: 72px; --r: 18px;
}
/* ── BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-wrap: break-word; word-break: break-word; }
body::before { content: ''; position: fixed; top: -150px; right: -150px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(245,130,31,0.05) 0%, transparent 65%); pointer-events: none; z-index: 0; }
/* ── NAV ──────────────────────────────────────────────────────── */
nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background: var(--bg-nav); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); z-index: 100; }
/* Breadcrumb käyttää myös