/* Design systemin typografia · perusta. Päätökset: DESIGN-SYSTEM-PERUSTAT-2026-11.md §2.
   Kahdeksan kokoa (12 13 14 15 17 20 24 32), roolit kokojen päällä. Jokaisella roolilla
   kiinteä rivikorkeus pikseleinä ja kokokohtainen kirjainväli: iso tiivistyy, pieni väljenee.
   Käyttö: font:var(--t-label);letter-spacing:var(--t-label-track) */

/* Varakirjasin mitoitettu Schibstediin (mitattu selaimessa 3.11.): sivu ei hyppää latautuessa. */
@font-face{font-family:"Schibsted Fallback";src:local("Arial"),local("Helvetica");size-adjust:103%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

:root:root:root{
 --font:'Schibsted Grotesk',"Schibsted Fallback",system-ui,sans-serif;
 --font-mono:"IBM Plex Mono",ui-monospace,monospace;
 /* rooli: paino koko/rivikorkeus · kirjainväli */
 --t-display:600 32px/40px var(--font);      --t-display-track:-.022em;
 --t-title:560 24px/32px var(--font);        --t-title-track:-.016em;
 --t-heading:560 20px/28px var(--font);      --t-heading-track:-.012em;
 --t-subheading:560 17px/24px var(--font);   --t-subheading-track:-.008em;
 --t-copy:400 15px/24px var(--font);         --t-copy-track:-.003em;
 --t-copy-sm:400 14px/22px var(--font);      --t-copy-sm-track:0em;
 --t-label-lg:500 15px/22px var(--font);     --t-label-lg-track:-.003em;
 --t-label:500 14px/20px var(--font);        --t-label-track:0em;
 --t-label-sm:500 13px/18px var(--font);     --t-label-sm-track:.004em;
 --t-meta:400 13px/18px var(--font);         --t-meta-track:.004em;
 --t-caption:400 12px/16px var(--font);      --t-caption-track:.01em;
 --t-caption-strong:500 12px/16px var(--font);--t-caption-strong-track:.01em;
 --t-code:400 12px/18px var(--font-mono);    --t-code-track:0em;
 --fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-15:15px;--fs-17:17px;--fs-20:20px;--fs-24:24px;--fs-32:32px;
 --measure:68ch;
}

/* Rivitys: otsikot tasapainoon, kappaleista ei yksinäisiä loppusanoja.
   Tavutus vain kapeissa kappaleissa, ei otsikoissa eikä painikkeissa. */
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li,dd,blockquote,figcaption){text-wrap:pretty}
@media (max-width:480px){:where(p,li,dd){hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}}

/* Roolit luokkina esittelyä ja uusia pintoja varten. */
.t-display{font:var(--t-display);letter-spacing:var(--t-display-track)}
.t-title{font:var(--t-title);letter-spacing:var(--t-title-track)}
.t-heading{font:var(--t-heading);letter-spacing:var(--t-heading-track)}
.t-subheading{font:var(--t-subheading);letter-spacing:var(--t-subheading-track)}
.t-copy{font:var(--t-copy);letter-spacing:var(--t-copy-track)}
.t-copy-sm{font:var(--t-copy-sm);letter-spacing:var(--t-copy-sm-track)}
.t-label-lg{font:var(--t-label-lg);letter-spacing:var(--t-label-lg-track)}
.t-label{font:var(--t-label);letter-spacing:var(--t-label-track)}
.t-label-sm{font:var(--t-label-sm);letter-spacing:var(--t-label-sm-track)}
.t-meta{font:var(--t-meta);letter-spacing:var(--t-meta-track)}
.t-caption{font:var(--t-caption);letter-spacing:var(--t-caption-track)}
.t-caption-strong{font:var(--t-caption-strong);letter-spacing:var(--t-caption-strong-track)}
.t-code{font:var(--t-code);letter-spacing:var(--t-code-track)}
.t-num{font-variant-numeric:tabular-nums}