/*
Theme Name: EMALAEV
Theme URI: https://emalaev.ee
Author: Madis Mark
Description: EMALAEV.ee, saadete ja artiklite kodu. Kohandatud teema: üks saade on üks sisukirje.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: emalaev
Tags: blog, podcast, custom-colors
*/

/* -------------------------------------------------------------
   Kujundus: ajakirjanduslik, mitte tarkvaratoote oma.
   Suur serif-pealkiri, juuksekarva jooned, ruum. Türkiis on
   aktsent — joon, silt, üks nupp — mitte taust ja hõõgus.
   ------------------------------------------------------------- */

:root {
	--must: #071320;
	/* Üks aste heledam pind: lehe lõpu tegevusriba, et uudiskiri ja toetus
	   ei näiks sisu järelmõttena. Vahe on tahtlikult väike. */
	--pind: #0a1b2d;
	--sinine: #0b1d3a;
	--sygav: #13294b;
	--tyrkiis: #41e2db;
	--helendus: #78f6ef;
	--hobe: #e9edf2;

	--tekst: #cdd6e0;
	/* AAA (>=7:1) nii lehe taustal kui sinisel kaardil. Vana #8a99ad andis 6,45 ja 5,79. */
	--vaikne: #99aac0;

	/* Alfaga toonid tulevad samast kahest värvist, mitte käsitsi kirjutatud koodidest. */
	--must-rgb: 7, 19, 32;
	--hobe-rgb: 233, 237, 242;
	--joon: rgba(var(--hobe-rgb), .13);
	--joon-tugev: rgba(var(--hobe-rgb), .28);

	/* Tüpograafia: seitse suurust, mitte rohkem. Väikseim on 16 px.

	   Kaks kirja, kaks tööd. Serif kannab ainult suuri pealkirju — kõrge
	   kontrastiga serif väikeses kirjas läheb tumedal taustal kinni ja
	   nägi loendipealkirjades välja nagu vale font. Kõik muu — menüü, meta,
	   nupud, loendid, põhitekst — on Manrope. */
	--serif: Newsreader, 'Serif Fallback', Georgia, serif;
	--sans: Manrope, 'Manrope Fallback', system-ui, sans-serif;

	--t-meta: 1rem;        /* 16 — sildid, meta, nupud, menüü, jalus */
	--t-body: 1.125rem;    /* 18 — liides ja lühike tekst */
	--t-lugemine: 1.1875rem; /* 19 — pikk lugemistekst: sisu, transkript */
	--t-lead: 1.375rem;    /* 22 — sissejuhatus, tsitaat, sõnamärk */
	--t-h3: clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
	--t-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--t-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

	--laius: 1240px;
	--kitsas: 680px;
	--serv: clamp(1.25rem, .8rem + 2vw, 3rem);
	--nupp-padi: 2.25rem;

	/* Kahe kõrvutise lehebloki vahe. Üks arv, et sisu, viited, pildid,
	   transkript ja uudiskiri seisaksid üksteisest ühel ja samal kaugusel. */
	--plokivahe: 2.75rem;

	/* Nurgaraadius. Üks arv kogu lehel: pildid, kaardid, pinnad ja nupud. */
	--raadius: 5px;
}

/* Pealkirjafondi valik on Seaded → EMALAEV all: kumb kenam jääb, seda
   otsustab silm, mitte kirjeldus. Muutub üks muutuja, mitte reeglistik. */
body.font-sourceserif { --serif: 'Source Serif 4', 'Serif Fallback', Georgia, serif; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--must);
	color: var(--tekst);
	font-family: var(--sans);
	font-size: var(--t-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "kern", "liga";
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; }

:focus-visible {
	outline: 2px solid var(--tyrkiis);
	outline-offset: 3px;
}

/* --- Tüpograafia --- */

h1, h2, h3 {
	color: var(--hobe);
	margin: 0 0 .45em;
	text-wrap: balance;
}

/* Serif ainult siin: H1, H2 ja hero saatepealkiri. `opsz` on optiline
   suurus — variable-fondi telg, mis peenendab suuri kirju ja tugevdab
   väikseid. Ilma selleta on sama joonis mõlemas suuruses vale. */
h1, h2, .serif {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "opsz" 48;
	line-height: 1.08;
	letter-spacing: -.012em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }

/* H3 on loendipealkiri, mitte display-pealkiri: Manrope, poolpaks, kitsam
   reavahe. Serif selles mõõdus tegi nimekirjast pudru. */
h3 {
	font-family: var(--sans);
	font-weight: 600;
	font-size: var(--t-h3);
	line-height: 1.25;
	letter-spacing: -.01em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Väiketähtsildid — kogu lehe rütm käib nende järgi. */
.silt {
	font-size: var(--t-meta);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tyrkiis);
	margin: 0 0 1rem;
	display: block;
}

.silt--vaikne { color: var(--vaikne); }

.meta {
	font-size: var(--t-meta);
	letter-spacing: 0;
	color: var(--vaikne);
	margin: 0;
}
.meta span + span::before { content: "·"; margin: 0 .5em; opacity: .6; }

.sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--tyrkiis); color: var(--must);
	padding: .8rem 1.4rem; z-index: 100; font-weight: 600;
}
.skip:focus { left: 0; }

/* --- Raam --- */

.wrap { width: 100%; max-width: var(--laius); margin-inline: auto; padding-inline: var(--serv); }
.kitsas { max-width: var(--kitsas); }

/* Lugemisveerg on kitsas mõõdu pärast, aga ei tõuse keskele: selle vasak serv
   jääb samaks, mis päisel, jalusel ja nimekirjalehtedel. Keskele tõstetuna
   tekkis lehele kaks erinevat vasakut serva. */
.wrap.kitsas { max-width: var(--laius); }
.wrap.kitsas > * { max-width: var(--kitsas); }
.wrap.kitsas > .pardale { max-width: none; }
/* Portree ei ole lugemisveeru laiune: 680 px juures täitis ta Meist-lehel terve
   ekraani ja tekst jäi tema alla ära. Reegel peab olema siin, sest `.juhtpilt`
   üksi kaotab spetsiifikas ülemisele reale. */
.wrap.kitsas > .juhtpilt { max-width: min(380px, 100%); }

.sektsioon { padding-block: clamp(2.75rem, 2rem + 3vw, 4.75rem); }
.sektsioon + .sektsioon { padding-top: 0; }

/* Pealkirjarida: pealkiri vasakul, link paremal, vahel joon või tühjus.
   Flex, mitte grid: avalehel on lapsi kaks ja nimekirjalehtedel kolm, ning
   grid pani kahe lapsega lingi otse pealkirja kõrvale. */
.rida {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
}
.rida::after { display: none; }
.rida > .joon { flex: 1; height: 1px; background: var(--joon); align-self: center; }
.rida h2 { margin: 0; }

.edasi {
	font-size: var(--t-meta);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--vaikne);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s;
}
.edasi:hover { color: var(--tyrkiis); }

/* --- Päis --- */

.pais {
	border-bottom: 1px solid var(--joon);
	position: sticky; top: 0; z-index: 40;
	/* paneeli ankur */
	isolation: isolate;
	background: rgba(var(--must-rgb), .92);
	backdrop-filter: saturate(1.4) blur(12px);
}

.pais { position: sticky; }
.pais > .wrap { position: relative; }

.pais__sisu {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; min-height: 84px;
}

.mark {
	display: inline-flex; align-items: center; gap: .7rem;
	text-decoration: none; color: var(--hobe);
	font-family: var(--serif);
	font-size: var(--t-lead);
	letter-spacing: .13em;
	font-variation-settings: "opsz" 120;
}
/* Fikseeritud mõõdud: ilma nendeta nihutab logo laadides kogu päist. */
/* Märk on suurem kui tekstirea kõrgus: ringi sees on kiri ja 46 px juures ei
   olnud seda üldse näha. Ingridi palve 06.09. */
.mark__embleem { width: 64px; height: 64px; flex: 0 0 64px; }
.mark__sona { line-height: 1; }
.mark__taht { color: var(--tyrkiis); font-size: .62em; translate: 0 -.35em; }
/* `center`, mitte vaikimisi `stretch`: TOETA on nupp ja seega teistest kõrgem,
   ja venitatud reas istusid tekstiviidad tema ülaserva, mitte keskkoha järgi. */
.nav ul { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; }
/* Menüüsildid on juba suurtähtedega (Ingridi struktuur); CSS ei kuhja peale. */
.nav a {
	text-decoration: none;
	font-size: var(--t-meta);
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--vaikne);
	padding-block: .4rem;
	transition: color .15s;
}
.nav a:hover { color: var(--hobe); }

/* Kus sa oled, seda ütleb joon, mitte ainult heledam värv. Värv üksi ei
   kandnud seda tööd: TOETA oli menüü kõige heledam ja ainus värviline sõna ja
   luges seetõttu aktiivse lehena, ükskõik millisel lehel lugeja parasjagu oli. */
.nav .current-menu-item > a {
	color: var(--hobe);
	box-shadow: inset 0 -1px 0 0 var(--tyrkiis);
}

/* TOETA on üleskutse ja seepärast päris nupp, mitte värviline sõna. Värviline
   tekst menüüs ei tööta: ta on ümbritsevate viitade sama kuju ja sama mõõt,
   ainult heledam, ja heledam menüüpunkt loeb kui „siin sa oled". Täidetud pind
   ei saa selle olekuga segi minna, sest ükski viit ei ole pinna peal.
   Klassi paneb külge `emalaev_menyy_toeta()` selle järgi, kuhu link viib. */
.nav .menu--toeta { order: 1; }
.nav .menu--toeta > a {
	display: inline-flex; align-items: center;
	padding: .55rem 1.1rem;
	background: var(--tyrkiis); color: var(--must);
	font-weight: 700;
	transition: background .15s;
}
.nav .menu--toeta > a:hover { background: var(--helendus); color: var(--must); }
/* Nupp ei vaja „siin sa oled" joont: ta on niikuinii lehe kõige eristuvam
   element ja joon pinna all loeks veaks. */
.nav .menu--toeta.current-menu-item > a { box-shadow: none; }

.nav-nupp {
	display: none; background: none; border: 0; padding: .4rem 0;
	color: var(--hobe); font: inherit;
	font-size: var(--t-meta); font-weight: 600; letter-spacing: .08em;
	cursor: pointer;
}

@media (max-width: 880px) {
	.nav-nupp { display: block; }

	/* Paneel on absoluutne: avanemine ei muuda päise kõrgust ega lükka sisu. */
	.nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--must);
		border-bottom: 1px solid var(--joon);
		padding: 0 var(--serv);
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: max-height .22s ease, visibility 0s linear .22s;
	}
	.nav.on {
		max-height: 70vh;
		overflow-y: auto;
		visibility: visible;
		transition: max-height .22s ease, visibility 0s;
	}
	/* Paneelis on read täislaiuses, seega `stretch` tagasi: `center` tõmbaks
	   menüüpunktid ekraani keskele. */
	.nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: .25rem 1rem; }
	.nav a { display: block; padding: 1rem 0; border-top: 1px solid var(--joon); }
	.nav li:first-child a { border-top: 0; }

	/* Paneelis on nupp rea asemel nupp: ta ei võta terve rea laiust ega kanna
	   ülemist joont, muidu loeks ta järjekordse menüüreana, mis on värvitud. */
	.nav .menu--toeta > a {
		display: inline-flex;
		margin-top: 1.25rem;
		padding: .85rem 1.4rem;
		border-top: 0;
	}
	.pais__sisu { min-height: 72px; }
	.mark__embleem { width: 48px; height: 48px; flex-basis: 48px; }

}

/* --- Nupud --- */

.nupp {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .95rem var(--nupp-padi);
	background: var(--tyrkiis); color: var(--must);
	border: 1px solid var(--tyrkiis);
	font-size: var(--t-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	text-decoration: none; cursor: pointer;
	min-height: 48px;
	transition: background .15s, color .15s;
}
.nupp:hover { background: var(--helendus); border-color: var(--helendus); }

.nupp--vaba { background: transparent; color: var(--hobe); border-color: var(--joon-tugev); }
.nupp--vaba:hover { background: transparent; border-color: var(--tyrkiis); color: var(--tyrkiis); }

.nupid { display: flex; flex-wrap: wrap; gap: .75rem; }

/* KUULA ja VAATA on lehe põhitegevus. Esikaadris on nad seepärast suured ja
   ikooniga: 16 px suurtähtedega link ei loe nupuna, kui ta on ainus värviline
   asi 1200 px laiuses vaates. Mujal jääb nupp tavamõõtu. */
.nupid--suur { gap: 1rem; }
.nupid--suur .nupp {
	font-size: 1.0625rem;
	letter-spacing: .1em;
	padding: 1.15rem 2.5rem;
	min-height: 64px;
}
.nupp svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 20px; }

/* Väike nupp on hüppelink, mitte tegevus: TOETA ja TULE PARDALE viivad lehe
   lõppu, kus tegevus päriselt on. Sama kuju väiksemas mõõdus hoiab nad KUULA
   ja VAATA all teisel astmel, ilma uut elementi juurde leiutamata. */
.nupp--vaike {
	font-size: var(--t-meta);
	padding: .7rem 1.5rem;
	min-height: 44px;
	letter-spacing: .08em;
}

/* --- Avalehe esikaader: vasakul Ingrid ja portaal, paremal uus saade --- */

/* Vasak kolmandik on pilt, parem kaks kolmandikku on uus saade.

   Varem oli pilt lai taustapilt üle kogu ploki ja tekst istus selle peal. Sel
   oli kaks viga: portaal sattus lehe keskele ja teksti alla, ning parem pool ei
   olnud rahulik pind, vaid pildi jätk.

   Üleminek pildilt tumedale pinnale on kaks asja korraga: pilt ise hääbub
   ovaalse maskiga servadest ära ja tema taga on lai helendus, mis kannab sama
   sinist üle terve ploki edasi. Kumbki üksi jättis nähtava serva. */
.eeter {
	position: relative;
	overflow: hidden;
	background: var(--must);
	padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
	border-bottom: 1px solid var(--joon);
}

/* Portaali järelkuma. Ellips on pildi kohal ja valgub tekstiveergu üle, aga
   jõuab sinna juba nii nõrgana, et kontrasti ei muuda: teksti taga on gradiendi
   kõige tumedam ots. */
.eeter::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(115% 85% at 24% 46%,
		rgba(19, 41, 75, .9) 0%,
		rgba(11, 29, 58, .5) 34%,
		rgba(7, 19, 32, 0) 70%);
}

.eeter__grid {
	position: relative;
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	align-items: center;
}

@media (min-width: 1000px) {
	/* Vasak veerg on laiem kui kolmandik, sest pilt on lai. Pilt ise on veerust
	   veel laiem — vt allpool. */
	.eeter__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 2rem; }

	/* Tekstiveerg on Ingridi kihist kõrgemal. Pilt ulatub oma veerust välja ja
	   ilma selleta otsustaks kihtide järjekorra see, kumb juhtub positsioneeritud
	   olema — saatekaart ja portaal jooksid siis kokku. */
	.eeter__portaal { position: relative; z-index: 0; }
	.eeter__tekst { position: relative; z-index: 2; }
}

/* Pildil ei ole raami ega serva: ta hääbub ovaalselt kosmosesse, sest kosmos on
   ka tema taga. Nurki kärpiv kast tegi temast foto seinal.

   ⚠️ Kuvasuhe on pildi enda oma (2048x1374 ≈ 3:2), sest portaal peab jääma
   tervikuna nähtavaks. Püstine 3:4 kast lõikas ussiaugu suud mõlemast servast
   ära — ja just see keeris on pildi mõte, mitte taust.

   ⚠️ Ellipsi raadiused peavad olema veidi üle poole kasti mõõdust, muidu jääb
   serv 90% läbipaistmatuks ja mask ei tee midagi — esimene katse (88% x 82%)
   nägi välja täpselt nagu maskita pilt. Läbipaistmatu keskosa ulatub 55%-ni,
   et hääbumine algaks alles väljaspool keerist. */
/* ⚠️ Pilt on oma veerust laiem ja ulatub vasakule üle serva.

   See on ainus viis saada korraga kaks asja: keeris tervikuna nähtav JA plokk
   piisavalt kõrge. Pilt on 3:2 ja veerg on ~490 px — kui pilt mahutada veeru
   sisse, jääb ta 327 px kõrgeks ja kogu esikaader madalaks; kui teda kärpida
   kõrguse järgi, lõikab ussiaugu suu mõlemast servast ära. Laiem pilt lahendab
   mõlemad. Üleulatuv osa ei sega kedagi, sest mask on seal juba läbipaistev ja
   tekst on DOM-is hiljem, seega joonistub peale. */
.eeter__portaal img {
	width: 140%;
	max-width: none;
	/* ⚠️ Parem serv peab jääma tekstiveerust vasakule. -35% juures ulatus pilt
	   44 px saatekaardi alla ja kaks kihti sulasid seal kokku: Ingridi keeris
	   jooksis saate foto sisse. Portaal tohib üle ulatuda ainult vasakule. */
	margin-left: -40%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 50%;
	-webkit-mask-image: radial-gradient(54% 56% at 50% 48%, #000 55%, rgba(0, 0, 0, .5) 80%, transparent 100%);
	mask-image: radial-gradient(54% 56% at 50% 48%, #000 55%, rgba(0, 0, 0, .5) 80%, transparent 100%);
}

/* Vaikne lause pildi all: serif ja kaldkiri, sest see on mõttekild, mitte silt
   ega pealkiri. Ta on pildiallkiri ja käib pildi enda serva alla — omaette
   võrgureana rippus ta pildist sada pikslit allpool tühja õhu sees. */
.eeter__marge {
	font-family: var(--serif);
	font-variation-settings: "opsz" 20;
	font-style: italic;
	font-size: var(--t-meta);
	line-height: 1.4;
	color: var(--vaikne);
	max-width: 32ch;
	margin: .6rem 0 0;
}

.eeter__portaal { margin: 0; }

/* Loosung on saidi tunnus, mitte tänane uudis: esikaadri kolmest astmest kõige
   vaiksem, aga kõige ülemine. Varem oli ta 56 px ja võistles saatega; nüüd
   kannab vaadet külalise nimi. */
.eeter__loosung {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "opsz" 32;
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
	letter-spacing: -.01em;
	line-height: 1.15;
	text-wrap: balance;
	color: var(--hobe);
	margin: 0 0 .6rem;
}

/* Saate nimi pealkirja kohal. Suurtähed ja lai tähevahe, sama keel, mis päise
   sõnamärgil — ta on tunnus, mitte lause, ja ei tohi loosungiga sama kaalu
   võtta. Serifi siin ei ole: kaks eri serif-suurust üksteise peal lugesid
   topeltpealkirjana. */
.eeter__nimi {
	font-family: var(--sans);
	font-size: .58em;
	font-weight: 700;
	font-style: normal;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vaikne);
	margin-right: .5em;
	/* Suurtähtedel ei ole allpikki: ilma selleta istub nimi serif-rea suhtes
	   liiga kõrgel. */
	vertical-align: .06em;
}

/* Punkt EMALAEVA ja loosungi vahel. Ta kannab nime tähevahet ja hallust, mitte
   loosungi serifi: eraldaja kuulub selle juurde, mis enne teda on. */
.eeter__punkt { color: var(--vaikne); font-size: .5em; vertical-align: .22em; margin-right: .38em; }

/* Kolm rida pealkirja all: üks mõõt, üks värv, üks reavahe. Iga eristus siin
   oleks samm tagasi selle poole, mida Ingrid „läbuks" nimetas — kui üks rida on
   suurem või värviline, ei loe plokk enam plokina, vaid kolme eri asjana. */
.eeter__read {
	font-size: var(--t-meta);
	line-height: 1.75;
	color: var(--vaikne);
	/* 68ch, mitte 54: eetriaeg ja veebis-rida on nüüd ühel real ja 54ch murdis
	   nad tagasi kaheks. */
	max-width: 68ch;
	margin: 0;
}
.eeter__rida { display: block; }
/* Punkt eraldab kaks fakti samal real. */
.eeter__rida > span + span::before { content: "·"; margin: 0 .6em; opacity: .6; }

/* Saatja on ploki allkiri, mitte neljas fakt: seisab faktide all ja eristub
   ainult vormilt — sama mõõt ja sama värv, suurtähed ja hõre tähevahe, nagu
   logo ringis. Suurem kiri või värv teeks siit tagasi selle, mida Ingrid
   23.09 „läbuks" nimetas. */
.eeter__saatja {
	margin-top: .55rem;
	font-size: .82em;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ⚠️ Telefonis ei mahu need kaks fakti kunagi ühele reale — rida vajab umbes
   520 px ja veergu on 340. Murdunud reas jäi punkt teise rea algusesse üksi
   rippuma. Kitsal ekraanil on nad seepärast tagasi kaks rida, ilma punktita:
   üks rida on eesmärk, mitte hinnaga ostetav. */
@media (max-width: 700px) {
	.eeter__rida > span { display: block; }
	.eeter__rida > span + span::before { content: none; }
}

/* Uus saade on esikaadri põhisisu ja seisab omaette kaardil. Enne oli ta rida
   ridade järel ühe joone all ja luges tekstiplokina, mitte saatena — kaart on
   see, mis annab talle piiri ja ütleb, et need asjad kuuluvad kokku. */
.eeter__uus {
	/* Kitsam kui varem: esikaader peab mahutama kaardi koos nuppudega ühte
	   vaatesse ja iga siinne piksel on nupu alt ära võetud piksel. */
	margin-top: clamp(1rem, .7rem + 1vw, 1.5rem);
}

/* Kaart on üks terve asi, kolm vööd ülalt alla: pilt, tekst, tegevus.

   Enne oli foto kaardi taust ja tekst istus tema peal diagonaalse loori all.
   See oli mõjus, aga tal oli kaks püsivat hinda: loetavus sõltus sellest,
   milline foto parasjagu tuli, ja foto kärbiti püstiseks, mis lõikas
   vestlusringi äärtest inimesi ära. Nüüd on foto lai ja lahti, tekst on oma
   pinnal ja kontrast ei sõltu enam pildist.

   Nupud on kaardi sees, kõige alumises vöös (Matu valik 24.09). Kaart on
   kõrge; väljaspool jäid nupud temast nii kaugele, et lugesid lehe, mitte
   selle saate nuppudena, ja telefonis kukkusid esimesest ekraanist välja.

   Kaardil ei ole enam oma pinda ega raami (Matu otsus 27.09): esikaader on
   lehe kõige suurem plokk ja kast kasti sees luges teise sektsioonina. Piiri
   annab nüüd pilt ise — tekst algab tema vasakust servast ja terve veerg on
   üks tulp. Sellepärast on ka sisu ja tegevuse külgpadjand maas: padjand oli
   raami jaoks ja ilma raamita nihutas ta teksti pildist sisse.

   `.saatekaart` ise on nüüd ilma ühegi omadusega ja seepärast ilma reeglita:
   tema `overflow: hidden` oli raami nurkade jaoks ja pildi enda kärpe teeb
   `.saatekaart__pilt`. Klass jääb markupi, sest ta kannab `--pilditu` varianti. */

.saatekaart__pilt { display: block; overflow: hidden; }
.saatekaart__pilt img {
	width: 100%;
	aspect-ratio: 16 / 9;
	/* ⚠️ Ilma selle laeta oli 16:9 pilt 1280x800 sülearvutil 353 px kõrge ja
	   lükkas KUULA täies pikkuses esimesest vaatest välja — lehe põhitegevus
	   ei tohi olla koht, milleni tuleb kerida. `vh`, mitte kindel px: kõrgel
	   ekraanil jääb pilt suureks ja madalal kahaneb täpselt nii palju, kui
	   nupu mahutamiseks vaja. Väiksem neist kahest võidab. */
	max-height: 30vh;
	object-fit: cover;
	object-position: 50% 38%;
	transition: scale .6s ease;
}
.saatekaart:hover .saatekaart__pilt img { scale: 1.04; }

.saatekaart__sisu {
	min-width: 0;
	padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem) 0 clamp(1rem, .8rem + .8vw, 1.35rem);
}

/* Nimed ja kestus ühel real. `baseline`, et sildikastide ja halli kestuse
   tekstid istuksid samal joonel, mitte kastide keskkoha järgi. */
.saatekaart__rida {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .9rem;
	margin-top: .7rem;
}
.saatekaart__kestus { color: var(--vaikne); font-size: var(--t-meta); }

/* Nupud on kaardi sees, aga kaardi enda pinnal: eraldi tumedam vöö nende all
   luges võõra ribana, mis on kaardi külge kleebitud. Üks kaart, üks pind —
   vahe teevad õhk ja nuppude oma kuju, mitte teine taustavärv. */
.saatekaart__tegevus {
	padding: 0 0 clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.saatekaart__tegevus .nupid { margin-top: 0; }

/* Ilma fotota jääb kaart samaks kaardiks, lihtsalt ilma ülemise vööta. */
.saatekaart--pilditu .saatekaart__sisu { padding-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* Külaliste nimed ühes reas, punktiga eraldatud. Üksteise all suure kirjaga
   oli õige seni, kuni külalisi oli üks; vestlusringis on neid kolm või neli ja
   üksteise all venitasid nad kaardi nii kõrgeks, et nupud jäid esimesest
   ekraanist välja.

   ⚠️ Raamiga sildid siin ei tööta, kuigi need lahendasid sama asja: üks nimi
   kastis seisab kahe päris nupu kohal ja loeb kolmanda nupuna. Nimi ei ole
   tegevus. Sama kuju, mis avalehe kaartidel (`.kaart__kylalised`), üks aste
   suuremas kirjas — esikaader on lehe suurim kaart. */
.eeter__kylalised {
	list-style: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--t-body);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--hobe);
}
.eeter__kylalised li + li::before { content: "·"; margin: 0 .55em; color: var(--vaikne); }

@media (max-width: 619px) {
	/* Telefonis läheb foto veidi püstisemaks — 16:9 on väikesel ekraanil nii
	   madal riba, et näod jäävad loetamatuks —, ja nupud võtavad rea laiuse. */
	.saatekaart__pilt img { aspect-ratio: 4 / 3; object-position: 50% 28%; }
	.saatekaart__tegevus .nupp { flex: 1 1 auto; justify-content: center; padding-inline: 1.4rem; }
}

/* Pealkiri käib külaliste ette ja on seepärast hõbedane ja suurem kui varem:
   kui ta seisab kõige tugevama kirja peal, peab ta ise ka pealkiri olema.
   Külaliste nimed jäävad temast siiski suuremaks — need kaks ei võistle, sest
   üks on serif ja teine suurtähtedega Manrope. */
.eeter__saade {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "opsz" 40;
	font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2rem);
	letter-spacing: -.012em;
	line-height: 1.14;
	color: var(--hobe);
	margin: 0;
	/* `balance` tõstis numbri omaette reale („#001" / „Esivanemad") ja tegi
	   kaardi 46 px kõrgemaks — pikem kaart tähendab kitsamat fotopaneeli ja
	   fotopaneel kärbib siis vestlusringi äärtest. Rida täidetakse otsast. */
	text-wrap: normal;
}
.eeter__saade a { text-decoration: none; }
.eeter__saade a:hover { color: var(--tyrkiis); }

/* Saate number on pealkirja vaikne eesliide, mitte teine türkiisiga element:
   UUS SAADE selle kohal on juba aktsentvärvis ja kaks türkiisi üksteise all
   tegid sildist ja numbrist ühe kirju ploki. */
.eeter__nr {
	color: var(--vaikne);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

/* „UUS SAADE · kuupäev" seisab kaardi sees, kohe pealkirja kohal. Kuupäev on
   tema kõrval vaiksemas toonis: silt ütleb, mis see on, kuupäev millal. */
.eeter__silt { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 .7rem; }
.eeter__silt span { color: var(--vaikne); font-weight: 500; letter-spacing: .06em; }
.eeter__silt span::before { content: "·"; margin-right: .55em; }

/* ⚠️ Siin oli `.eeter__uus .nupid { margin-top: clamp(1.25rem…1.9rem) }`.
   Ta pärines ajast, mil nupud seisid kaardist väljas, ja lõi sama kaaluga
   reeglina üle rea 612 (`.saatekaart__tegevus .nupid { margin-top: 0 }`), sest
   seisis stiililehes hiljem. Tulemus oli 52 px auk külaliste nimede ja KUULA
   vahel: 21,6 px kaardi sisemist padjandit pluss 30,4 px seda veerist. Vahe
   tuleb nüüd ainult padjandist, ühest kohast. */
/* Negatiivne veeris nihutab esimese ikooni padjandi tagasi, nii et logo ise
   joondub nuppude vasaku servaga, mitte tema ümber olev puuteala. */
/* Platvormid on kaardi sees, nuppude all: väike vahe, ikoonid joondatud
   nuppude vasaku servaga (negatiivne veeris nullib 44 px puuteala padjandi). */
.saatekaart__platvormid { margin-top: .5rem; margin-left: -12px; }

@media (max-width: 999px) {
	/* Telefonis on esikaader oma kompositsioon, mitte kokku surutud desktop:
	   pilt on lai riba üle terve ekraani laiuse, saade tuleb kohe selle alla ja
	   saidi tunnus jääb alla, esimesest ekraanist välja. Mõõdetud 390x844. */
	.eeter { padding-top: 0; }
	.eeter__grid { gap: 1.25rem; }

	/* Saade tõuseb Ingridi pildist kõrgemale (Matu palve 24.09): portree võttis
	   telefonis esimesest ekraanist 292 px ja lükkas kaardi alla, nii et lehe
	   põhitegevus jäi kerimise taha. Portree ei kao, ta tuleb saate järel.
	   DOM-i järjekord ei muutu, seega ekraanilugeja loeb ikka pildist alates. */
	.eeter__grid > .eeter__tekst { order: -1; }
	.eeter__grid > .eeter__portaal { order: 0; }

	.eeter__portaal { margin-inline: calc(-1 * var(--serv)); }
	.eeter__portaal img {
		width: 100%;
		margin-left: 0;
		aspect-ratio: 3 / 2;
		-webkit-mask-image: radial-gradient(60% 62% at 50% 46%, #000 52%, rgba(0, 0, 0, .5) 78%, transparent 100%);
		mask-image: radial-gradient(60% 62% at 50% 46%, #000 52%, rgba(0, 0, 0, .5) 78%, transparent 100%);
	}

	/* Telefonis on KUULA ja VAATA kõrvuti ja täpselt võrdse laiusega. Üksteise
	   all võtsid nad 151 px ja lükkasid mõlemad esimeselt ekraanilt välja;
	   võrdne poolik laius hoiab parema serva sirge, mille pärast nad kunagi
	   üksteise alla pandi. */
	.nupid--suur { gap: .6rem; }
	.nupid--suur .nupp { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 1rem; }

	/* Uus saade tõuseb tutvustuse ette: telefoni esimesele ekraanile mahub üks
	   plokk ja see peab olema saade, mitte see, mis saade EMALAEV on. DOM-i
	   järjekord ei muutu, seega ekraanilugeja loeb ikka loosungist. */
	/* Pilt on telefonis üle ekraani laiuse, allkiri mitte: ta joondub sisuga. */
	.eeter__marge { padding-inline: var(--serv); }
	.eeter__tekst { display: flex; flex-direction: column; }
	.eeter__uus { order: -1; margin-top: 0; }
	.eeter__tutvustus {
		order: 1;
		margin-top: 2rem;
		padding-top: 1.75rem;
		border-top: 1px solid var(--joon);
	}
}

/* --- Saatenimekiri: ajakirja rütm, mitte kaardilaud --- */

.loend { display: grid; gap: 0; }

.kirje {
	display: grid;
	gap: 1.5rem;
	padding-block: 2.2rem;
	border-top: 1px solid var(--joon);
	align-items: start;
}
.kirje:last-child { border-bottom: 1px solid var(--joon); }

@media (min-width: 760px) {
	/* Ilma numbrita rida nihkus varem veeru võrra vasakule: pisipilt sattus
	   numbriveergu ja jäi pisikeseks. Veerud käivad nüüd klassi järgi. */
	.kirje { grid-template-columns: 15rem 1fr auto; gap: 2.5rem; align-items: center; }
	.kirje--nr { grid-template-columns: 5.5rem 15rem 1fr auto; }
}

.kirje__nr {
	font-size: var(--t-body); color: var(--vaikne); letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
}

.kirje__pilt { overflow: hidden; background: var(--sinine); }
.kirje__pilt img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .2s; }
.kirje:hover .kirje__pilt img { opacity: .82; }

.kirje :is(h2, h3) { margin: 0 0 .4rem; font-size: var(--t-h3); }
/* ⚠️ Saate pealkiri on türkiis ka ilma hõljumiseta (Matu märkus 24.09).
   Ainult :hover peal oli ta telefonis nähtamatu reegel: valge pealkiri
   valgete külalisenimede all ei öelnud kuidagi, et ta on link. Türkiis on
   lehel juba lingi ja tegevuse värv, seega ta ei too uut sõnavara juurde.
   Hõljudes läheb ta heledamaks, et hiirel jääks ka tagasiside alles. */
.kirje :is(h2, h3) a { text-decoration: none; color: var(--tyrkiis); }
.kirje:hover :is(h2, h3) a { color: var(--helendus); }

.kirje__valjund { display: flex; gap: .6rem; }

/* R-03: puuteala 44 px ka siis, kui ikoon ise on 20. */
.tegevus {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--joon-tugev);
	color: var(--hobe);
	transition: color .15s, background .15s, border-color .15s;
}
.tegevus:hover, .tegevus:focus-visible {
	color: var(--must); background: var(--tyrkiis); border-color: var(--tyrkiis);
}
.tegevus svg { width: 20px; height: 20px; fill: currentColor; }

/* R-03: puuteala vähemalt 44 px, seepärast on link plokk, mitte paljas tekst. */
.mini {
	font-size: var(--t-meta); font-weight: 500;
	text-decoration: none; color: var(--vaikne);
	display: inline-flex; align-items: center; min-height: 44px;
	border-bottom: 1px solid var(--joon-tugev);
	transition: color .15s, border-color .15s;
}
.mini:hover { color: var(--tyrkiis); border-color: var(--tyrkiis); }

/* --- Saatekaardid avalehel --- */

/* Avalehel on saateid kolm ja nende ülesanne on pilku tõmmata, seepärast on nad
   kaardid suure pildiga. Rida (`.kirje`) jääb arhiivi, kus neid on kakskümmend
   ja skannitavus võidab pildi üle. Sama sisu, kaks eri tööd. */
.kaardid {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.kaart { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

.kaart__pilt { overflow: hidden; background: var(--sinine); }
.kaart__pilt img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
	transition: opacity .25s, scale .4s;
}
.kaart:hover .kaart__pilt img { opacity: .85; scale: 1.03; }

.kaart__sisu { display: flex; flex-direction: column; gap: .5rem; }

/* Külalise nimi on kaardil pealkirja kohal ja suurtähtedega — sama loogika, mis
   esikaadris. Väiksem kui seal: kolm plakatit kõrvuti oleks müra, siin on nimi
   ainult kaardi kõige tugevam meta, mitte kaardi pealkiri. */
.kaart__kylalised {
	margin: 0;
	font-size: var(--t-meta);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hobe);
	line-height: 1.3;
}

.kaart h3 { margin: 0; }
.kaart h3 a { text-decoration: none; color: var(--tyrkiis); }
.kaart:hover h3 a { color: var(--helendus); }
.kaart .kirje__valjund { margin-top: .35rem; }

/* --- Artiklite loend nimekirjalehtedel --- */

.lugu { padding-block: 1.9rem; border-top: 1px solid var(--joon); }
.lugu:last-child { border-bottom: 1px solid var(--joon); }
.lugu :is(h2, h3) { margin: .5rem 0 .5rem; font-size: var(--t-h3); }
.lugu :is(h2, h3) a { text-decoration: none; }
.lugu:hover :is(h2, h3) a { color: var(--tyrkiis); }
.lugu p { color: var(--vaikne); margin: 0; max-width: 62ch; }

/* --- Artiklid avalehel: plokid, mitte read --- */

/* Avalehel lugesid joonte vahele laotud read sama nimekirjana, mis saated:
   üks rütm ülevalt alla. Ruudustik ja oma pind teevad neist teise plokitüübi.
   Artiklitel ei ole veel põhipilte, seepärast kannab kaarti pind ja tekst;
   pildikohatäide oleks tühi hall kast, mitte kujundus. */
.lood {
	display: grid;
	gap: clamp(1rem, .75rem + 1vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.lood .lugu {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
	background: var(--pind);
	border: 1px solid var(--joon);
	transition: border-color .2s, background .2s;
}
.lood .lugu:hover { border-color: var(--joon-tugev); background: var(--sinine); }

.lugu__pilt { overflow: hidden; background: var(--sinine); }
.lugu__pilt img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.lugu__sisu {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.lood .lugu :is(h2, h3) { margin: 0; }
.lood .lugu .edasi { margin-top: auto; padding-top: .75rem; color: var(--tyrkiis); }

/* --- Sildid: teemad saatelehe päises --- */

.sildid { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 1rem 0 0; }
.sildid a {
	font-size: var(--t-meta);
	color: var(--vaikne);
	text-decoration: none;
	border: 1px solid var(--joon);
	padding: .3rem .8rem;
	transition: color .15s, border-color .15s;
}
.sildid a:hover { color: var(--tyrkiis); border-color: var(--tyrkiis); }

/* --- Peatükid --- */

.peatykid { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .55rem; }
.peatykid li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; font-size: var(--t-meta); }
.peatykid__aeg { color: var(--tyrkiis); font-variant-numeric: tabular-nums; }

/* --- Galerii --- */

.galerii { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); background: var(--joon); }
.galerii img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .2s; }
.galerii a:hover img { opacity: .82; }

/* --- Alamlehtede ühine raam --- */
/* Iga alamleht algab ühtemoodi: silt, pealkiri, meta, siis sisu. Enne oli
   igal mallil oma inline-margin ja lehed ei istunud üksteise peale. */

.lehepais { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; }
.lehepais h1 { margin-bottom: .35em; }
.lehepais p:last-child { margin-bottom: 0; }

/* Nimekirjalehtedel annab ümbritsev .sektsioon juba ülemise ruumi. */
.lehepais--loend { padding-block: 0; margin-bottom: 2.5rem; }

.lehepais__tutvustus { color: var(--vaikne); max-width: 60ch; margin-top: .75rem; }

/* --- Otsivorm --- */

.otsi { display: flex; gap: .75rem; margin-top: 1.75rem; max-width: 34rem; }
.otsi input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: .95rem 0;
	border: 0; border-bottom: 1px solid var(--joon-tugev);
	background: transparent; color: var(--hobe);
	font: inherit; font-size: var(--t-body);
	-webkit-appearance: none;
	appearance: none;
}
.otsi input[type="search"]:focus { outline: none; border-bottom-color: var(--tyrkiis); }
.otsi input[type="search"]::placeholder { color: var(--vaikne); }

.lehesisu { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.lehesisu > * + * { margin-top: 2.5rem; }

/* Saatejuhi portree Meist-lehel. Piiratud laius: 4:5 pilt üle terve
   tekstiveeru oleks 850 px kõrge ja lükkaks sisu ekraanilt välja. */
.juhtpilt { margin: 0; max-width: 380px; }
.juhtpilt img { width: 100%; }
.juhtpilt figcaption {
	font-size: var(--t-meta);
	color: var(--vaikne);
	margin-top: .7rem;
}

/* Kogu leht on vasakjoondatud. Keskjoondust ei ole kusagil, ka 404-l mitte. */
.lehepais, .lehesisu, .sisu { text-align: left; }

.saade__meedia { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
/* Krediit on pildi allkiri, mitte omaette rida: kinni pildi serva all, vaikne. */
.saade__krediit {
	margin-top: .6rem;
	font-size: .8125rem;
	color: var(--vaikne);
	letter-spacing: .02em;
}

.plokk { border-top: 1px solid var(--joon); padding-top: 1.75rem; margin-block: var(--plokivahe); }
.plokk h2 {
	font-family: inherit;
	font-size: var(--t-meta); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--tyrkiis); margin-bottom: 1.1rem;
}

.audio { width: 100%; margin-bottom: 1.1rem; }
/* Kanalirida: seitse logo ühel real, üks komplekt, üks mõõt, üks värv. Vahe on
   kitsam kui tekstilinkidel oli, sest ikoonil ei ole sõna pikkust, mis teda
   naabrist eraldaks — liiga lai vahe ja rida laguneb seitsmeks üksikuks asjaks. */
.platvormid { display: flex; flex-wrap: wrap; gap: .35rem; }

/* R-03: puuteala vähemalt 44 px. Ikoon ise on 20 px, ülejäänu on padjand. */
.kanal {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	color: var(--vaikne);
	transition: color .15s;
}
.kanal:hover { color: var(--tyrkiis); }
.kanal svg { width: 20px; height: 20px; fill: currentColor; }

.video { position: relative; aspect-ratio: 16 / 9; background: var(--must); overflow: hidden; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video__eelvaade {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border: 0; padding: 0; cursor: pointer; background: var(--sinine);
}
.video__eelvaade img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .2s; }
.video__eelvaade:hover img { opacity: .85; }
.video__eelvaade::after {
	content: "";
	position: absolute; left: 50%; top: 50%; translate: -50% -50%;
	width: 68px; height: 68px;
	background: var(--tyrkiis) no-repeat center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23071320'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.transkript summary {
	cursor: pointer; list-style: none;
	font-size: var(--t-meta); font-weight: 600; letter-spacing: .06em;
	color: var(--tyrkiis);
	display: inline-flex; align-items: center; min-height: 44px;
}
.transkript summary::-webkit-details-marker { display: none; }
.transkript summary::after { content: " +"; }
.transkript[open] summary::after { content: " \2212"; }
.transkript[open] summary { margin-bottom: 1.25rem; }
.transkript__sisu { color: var(--tekst); max-width: 66ch; font-size: var(--t-lugemine); line-height: 1.75; }
.transkript__sisu p { margin-bottom: 1.1em; }

/* --- Lehe lõpu tegevusplokid: toetus ja uudiskiri --- */

/* Kaks palvet lugejale, kaks päris plokki. Varem olid nad ühe riba peal
   üksteise all ja mõlemad lugesid lehe lõpu tekstina: silt, lõik, väike nupp.
   Kõrvuti, kummalgi oma pind ja oma nupp, on nad tegevus.
   Toetus saab laiema veeru, sest seal on neli summakasti; uudiskirjas on üks
   väli ja võrdsete veergudega jäi selle kõrvale tühjus. */
.tegevused {
	display: grid;
	gap: clamp(1rem, .75rem + 1vw, 1.5rem);
}

@media (min-width: 900px) {
	.tegevused { grid-template-columns: 1.15fr 1fr; }
}

/* Lehe lõpp on oma vöö: pind muutub ja õhku on rohkem kui sektsioonide vahel
   mujal. Ilma selleta lugesid toetus ja uudiskiri viimaste artiklite jätkuna —
   sama taust, sama vahe, sama rütm. Joont siia ei tule: lehel on jooni juba
   piisavalt ja joon ütleks „siin lõpeb nimekiri", mitte „siin algab muu". */
.lopp {
	background: var(--pind);
	margin-top: clamp(3rem, 2rem + 4vw, 6rem);
	padding-block: clamp(1rem, .5rem + 2vw, 2.5rem);
}

/* Jaluse enda ülemine vahe on mõeldud tavalise sisu jaoks. Kui leht lõpeb
   vööga, jääks selle värvi ja jaluse vahele tühi triip. */
main:has( > .lopp:last-child ) + .jalus { margin-top: 0; }

/* Plokid on vööst tumedamad, mitte heledamad: heledam plokk heledal vööl
   kaotas piiri ära ja vöö luges siis ühe suure kastina. */
.tegevusplokk {
	display: flex;
	min-width: 0;
	background: var(--must);
	padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.tegevusplokk > * { width: 100%; }

/* Plokis on uudiskiri üks veerg: kahe veeru võrk on ploki enda ülesanne. */
.tegevusplokk .pardale {
	display: block;
	border: 0;
	padding-block: 0;
}

.tegevusplokk .nupp { min-height: 56px; padding-inline: 2.75rem; }

/* Kontaktiaadress on ainus link lõigus: türkiis, mitte allakriipsutus. */
.toeta a[href^="mailto:"] { color: var(--tyrkiis); text-decoration: none; }
.toeta a[href^="mailto:"]:hover { text-decoration: underline; text-underline-offset: .2em; }
.toeta p + p { margin-top: 1rem; }

/* Vorm on laeva siluett: kere, mille ninaks on Liitu-nupp. Kuju tuleb ühest
   `clip-path`-ist vormil endal — nupp on selle sees ja saab nina automaatselt,
   ilma et kaks kuju peaks kokku klappima. Raami ei ole: kuju ise on piir.
   Valijad on meelega üldised, et need püsiksid ka MailerLite'i enda vormil. */
.tegevusplokk .pardale form {
	gap: 0;
	flex-wrap: nowrap;
	align-items: stretch;
	background: rgba(var(--hobe-rgb), .06);
	/* Saba vasakul viltu, nina paremal terav. */
	clip-path: polygon(20px 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
	transition: background .15s;
}

.tegevusplokk .pardale form:focus-within { background: rgba(var(--hobe-rgb), .1); }

.tegevusplokk .pardale input[type="email"] {
	/* `flex-basis: auto` + `min-width: 0`: väli ja nupp jäävad ühele reale ka
	   telefonis, kus varem läks nupp järgmisele reale. */
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 1.15rem .75rem 1.15rem 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%2341e2db' stroke-width='2.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 1.1rem center;
	background-size: 11px 11px;
}

.tegevusplokk .pardale input[type="email"]:focus { outline: none; }

.tegevusplokk .pardale :is(button, [type="submit"]) {
	flex: 0 0 auto;
	border: 0;
	white-space: nowrap;
	/* Parem polster katab nina: muidu lõikaks kuju sõna ära. */
	padding: 1.15rem 3.4rem 1.15rem 1.7rem;
}

/* Fookusrõngas peab jääma kuju sisse, muidu lõikab `clip-path` selle ära. */
.tegevusplokk .pardale :is(button, [type="submit"]):focus-visible {
	outline: 2px solid var(--must);
	outline-offset: -5px;
}

/* --- Uudiskiri --- */

/* Uudiskiri seisab lehesisus omaette plokina ja hoiab sama vahet mis .plokk.
   Ilma selleta algas ta saatelehel kohe kirjelduse viimase rea alt: äärejoon
   puutus teksti ja vorm luges lõigu jätkuna, mitte uue palvena. */
.pardale { margin-block: var(--plokivahe);
	border-top: 1px solid var(--joon);
	border-bottom: 1px solid var(--joon);
	padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
	display: grid;
	gap: 2rem;
}
/* Lehe lõpu tegevusribal ja eraldi uudiskirjalehel annab mõõdu ümbris. */
.tegevusplokk .pardale,
.lehesisu > .pardale:first-child { margin-block: 0; }

/* Uudiskirja alumine äär eraldab teda juba järgmisest plokist. Ilma selleta
   tuli TOETA oma äärejoonega kohe alla ja jooni oli kaks: üks üle kogu laiuse,
   teine 45 px allpool kitsa veeru laiuses. Kaks eri pikkusega joont kõrvuti ei
   ütle „siin lõpeb üks ja algab teine", vaid näevad välja nagu viga. */
.pardale + .plokk { border-top: 0; padding-top: 0; }
@media (min-width: 860px) {
	.pardale { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
}
/* Grid-element ei kahane vaikimisi alla oma sisu laiuse. Ilma selleta ei
   mahtunud vorm telefonis veergu ja lükkas kogu lehe ekraanist laiemaks. */
.pardale > * { min-width: 0; }

.pardale h2 { margin-bottom: .3em; }
.pardale p { color: var(--vaikne); margin: 0; }
.pardale .pardale__teade { color: var(--tyrkiis); margin-bottom: 1rem; }
/* Nõusoleku juures käiv privaatsusviide on peenkiri: ta peab olema loetav ja
   leitav, aga mitte võistelda üleskutsega, mille alla ta kuulub. */
.pardale .pardale__pisike { font-size: .8125rem; margin-top: 1rem; line-height: 1.5; }
.pardale form { display: flex; flex-wrap: wrap; gap: .75rem; }
.pardale input[type="email"] {
	flex: 1 1 240px;
	padding: .95rem 0;
	border: 0; border-bottom: 1px solid var(--joon-tugev);
	background: transparent; color: var(--hobe);
	font: inherit; font-size: var(--t-body);
}
.pardale input[type="email"]:focus { outline: none; border-bottom-color: var(--tyrkiis); }
.pardale input[type="email"]::placeholder { color: var(--vaikne); }

/* --- Toeta --- */

.toeta__summad { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 2rem; background: var(--joon); }
.summa {
	flex: 1 1 130px;
	background: var(--must);
	padding: 1.6rem 1.25rem;
	text-decoration: none;
	display: flex; flex-direction: column; gap: .5rem;
	transition: background .15s;
}
.summa:hover { background: var(--sinine); }
.summa b {
	font-family: var(--serif);
	font-weight: 400; font-size: var(--t-h3); color: var(--hobe);
}
.summa span {
	font-size: var(--t-meta); color: var(--vaikne);
}
.summa:hover b { color: var(--tyrkiis); }

/* --- Sotsiaal --- */

/* Jaluses on sama rida kitsamas koosseisus. Mõõdu ja värvi annab `.kanal`;
   siin on ainult see, kus rida seisab, et kaks rida ei saaks lahku triivida. */
.sots { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.1rem; margin-left: -12px; }

/* --- Jalus --- */

.jalus { border-top: 1px solid var(--joon); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.jalus__grid {
	display: grid; gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	margin-bottom: 3rem;
}
.jalus h2 {
	font-family: inherit;
	font-size: var(--t-meta); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--vaikne); margin-bottom: 1.1rem;
}
.jalus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.jalus a { color: var(--tekst); text-decoration: none; font-size: var(--t-body); }
.jalus a:hover { color: var(--tyrkiis); }
.jalus__brand { max-width: 34ch; }
.jalus__loosung {
	font-family: var(--serif);
	font-size: var(--t-lead);
	color: var(--hobe);
	margin-bottom: .6rem;
}
.jalus__eeter { color: var(--vaikne); margin-bottom: 0; }
.jalus__moto {
	color: var(--tyrkiis);
	font-size: var(--t-meta);
	letter-spacing: .04em;
	margin: .9rem 0 0;
}

.jalus__alumine {
	border-top: 1px solid var(--joon); padding-top: 1.75rem;
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
	align-items: center;
	font-size: var(--t-meta); color: var(--vaikne);
}

/* Juriidilised viited kuuluvad alla autoriõiguse kõrvale, mitte "Kontakti" alla.
   Spetsiifika peab ületama `.jalus ul` grid-reeglit. */
.jalus .jalus__viited {
	display: flex; flex-wrap: wrap; gap: 1.5rem;
	list-style: none; margin: 0; padding: 0;
}

/* --- Sisu --- */

/* Pikk lugemistekst on aste suurem kui liides: 19 px ja lahtine reavahe.
   Mõõt tuleb sellest, mis on 66 märgi laiuselt hea lugeda, mitte sellest,
   mis mahub nupu sisse. */
.sisu { font-size: var(--t-lugemine); line-height: 1.75; }
.sisu > * { margin-block: 1.2em; }
.sisu > :first-child { margin-top: 0; }
.sisu h2 { margin-top: 1.9em; }
.sisu a { color: var(--tyrkiis); text-underline-offset: .2em; }
.sisu blockquote {
	margin-inline: 0; padding-left: 1.5rem;
	border-left: 1px solid var(--tyrkiis);
	font-family: var(--serif);
	font-size: var(--t-lead); line-height: 1.4; color: var(--hobe);
}
.sisu ul, .sisu ol { padding-left: 1.2rem; }
.sisu li { margin-bottom: .45em; }
.sisu figcaption { font-size: var(--t-meta); color: var(--vaikne); margin-top: .6rem; }

/* --- Filtririba --- */

.filter {
	display: flex; flex-wrap: wrap; gap: 1.6rem;
	padding-bottom: 1.25rem; border-bottom: 1px solid var(--joon);
	margin-bottom: .5rem;
}
.filter a {
	font-size: var(--t-meta); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--vaikne); text-decoration: none;
	padding-bottom: .3rem; border-bottom: 1px solid transparent;
}
.filter a.on, .filter a:hover { color: var(--hobe); border-bottom-color: var(--tyrkiis); }

/* --- Leheküljendus --- */

.lehed { display: flex; gap: 1.25rem; margin-top: 3.5rem; }
.lehed .page-numbers {
	font-size: var(--t-meta); letter-spacing: .08em; color: var(--vaikne);
	text-decoration: none; padding-bottom: .25rem; border-bottom: 1px solid transparent;
}
.lehed .page-numbers.current { color: var(--hobe); border-bottom-color: var(--tyrkiis); }
.lehed .page-numbers:hover { color: var(--hobe); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/* --- Liikumine ---------------------------------------------------------
   Kogu lehe animatsioon on selles ühes plokis, et selle saaks tervikuna
   maha võtta. Kolm reeglit, millest ei tehta erandit:

   1. Ainult `transform` ja `opacity`. Miski ei tohi paigutust nihutada,
      CLS on 0 ja peab jääma.
   2. Kõik käib CSS-i skrolliajateljega, mitte JS-iga. Ilma toeta (Firefox)
      jääb leht seisma õigesse, valmis olekusse — mitte tühjaks.
   3. `prefers-reduced-motion` võtab kõik maha. Kosmoseteema ei ole
      piisav põhjus kellelegi peapööritust teha.
   -------------------------------------------------------------------- */

/* Kaks tähekihti esmavaate taustal. Vaikimisi seisavad; liikuma paneb skroll.

   Varem oli see kiht `position: fixed` üle terve lehe ja täpid jooksid ka
   sisuteksti tagant läbi. Nüüd on ta esmavaate sees ja lõpeb koos sellega:
   kosmos on sissejuhatus, mitte lugemistausta muster. */
.tahed {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Alumine serv hajub, et tähed ei lõpeks joonlauaga tõmmatud servaga. */
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.tahed__kiht {
	position: absolute;
	/* Kiht liigub üles, seega varu peab olema all: muidu tuleb alumine serv
	   ekraanile ja tähed lõpevad keset plokki. Varu > pikim triiv (140 px). */
	inset: -40px 0 -180px;
	display: block;
	will-change: transform;
}

/* Täpp tuleb teha kõva servaga (`0 100%, transparent 0`). Pehme gradient
   hajub alla ühe piksli laiali ja tähti ei ole praktiliselt näha. */
.tahed__kiht--kaugel {
	background-image:
		radial-gradient(circle 1px at 12% 18%, rgba(var(--hobe-rgb), .75) 0 100%, transparent 0),
		radial-gradient(circle .8px at 68% 9%, rgba(var(--hobe-rgb), .55) 0 100%, transparent 0),
		radial-gradient(circle 1px at 34% 47%, rgba(var(--hobe-rgb), .65) 0 100%, transparent 0),
		radial-gradient(circle .8px at 87% 62%, rgba(var(--hobe-rgb), .5) 0 100%, transparent 0),
		radial-gradient(circle 1px at 51% 81%, rgba(var(--hobe-rgb), .6) 0 100%, transparent 0),
		radial-gradient(circle .8px at 22% 93%, rgba(var(--hobe-rgb), .45) 0 100%, transparent 0),
		radial-gradient(circle 1px at 92% 34%, rgba(var(--hobe-rgb), .55) 0 100%, transparent 0),
		radial-gradient(circle .8px at 44% 26%, rgba(var(--hobe-rgb), .4) 0 100%, transparent 0);
	background-size: 410px 410px;
}

/* Lähem kiht on suurem, heledam ja liigub kiiremini. Värvi ei ole: türkiis on
   saidi aktsent, mitte tähe värv, ja värvilised täpid nägid välja nagu tuled,
   mitte tähed. Ainus lubatud varieerumine on tähetemperatuur — vaevumärgatav
   soe ja jahe valge, nagu päris taevas. */
.tahed__kiht--lahedal {
	background-image:
		radial-gradient(circle 1.6px at 78% 24%, rgba(var(--hobe-rgb), .95) 0 100%, transparent 0),
		radial-gradient(circle 2px at 25% 66%, rgba(255, 246, 235, .9) 0 100%, transparent 0),
		radial-gradient(circle 1.4px at 58% 88%, rgba(var(--hobe-rgb), .8) 0 100%, transparent 0),
		radial-gradient(circle 1.6px at 8% 38%, rgba(228, 238, 255, .8) 0 100%, transparent 0),
		radial-gradient(circle 1.3px at 91% 71%, rgba(var(--hobe-rgb), .75) 0 100%, transparent 0);
	background-size: 640px 640px;
}

/* Telefonis tähti ei ole. Esikaadri ülemine pool on pilt, mis on ise täis
   tähti, ja alumine on tekst — CSS-i tähtedele jääb ainult see kitsas riba,
   kus nad jooksevad otse külaliste nimede tagant läbi. Teine tähetaevas
   esimese all ei ole atmosfäär, vaid müra. */
@media (max-width: 999px) {
	.tahed { display: none; }
}

/* Sisu peab jääma dekoratsiooni peale. */
.eeter > .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.tahed__kiht--kaugel {
			animation: triiv-kaugel linear both;
			animation-timeline: scroll(root block);
		}

		.tahed__kiht--lahedal {
			animation: triiv-lahedal linear both;
			animation-timeline: scroll(root block);
		}

		/* Read ja kaardid ilmuvad vaatesse tulles. Ainult opacity ja transform. */
		.kirje, .lugu, .kaart {
			animation: touse linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 65%;
		}
	}
}

/* Vahemaa peab olema piisav, et liikumist üldse märkaks: kihtide vahe on see,
   mis annab sügavuse. Alumine varu `.tahed__kiht` juures katab selle ära. */
@keyframes triiv-kaugel { to { transform: translate3d(0, -50px, 0); } }
@keyframes triiv-lahedal { to { transform: translate3d(0, -140px, 0); } }
@keyframes touse {
	from { opacity: 0; transform: translate3d(0, 12px, 0); }
	to { opacity: 1; transform: none; }
}

/* Lehtede vahetus: sujuv üleminek, mitte valge välgatus. Firefox ignoreerib
   ja saab tavalise navigeerimise. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) { animation: vt-valja .22s ease both; }
	::view-transition-new(root) { animation: vt-sisse .3s ease both; }
}

@keyframes vt-valja { to { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes vt-sisse { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

/* --- Näidissisu hoiatus (ainult demo-hostil) --- */

.demo {
	background: #3a2410;
	border-bottom: 1px solid rgba(var(--hobe-rgb), .18);
	color: #f4d9b0;
	font-size: var(--t-meta);
	padding-block: .7rem;
}
.demo p { margin: 0; }
.demo b { color: var(--hobe); }

/* --- Nurgad --- */

/* Kõik pildid, pinnad ja nupud on kergelt ümarad. Üks muutuja, üks reegel:
   nii ei teki lehele kahte eri raadiust ega kohta, kus see ununes.

   Erandid, mis on meelega teravad:
   * `.lopp` ja `.eeter` — need on üle terve ekraani laiuse ribad, mitte kastid;
   * uudiskirja vorm — tema kuju tuleb `clip-path`-ist (laeva siluett) ja
     `border-radius` ei mõju läbi selle;
   * esikaadri portree — tema servad hääbuvad maskiga, nurki seal ei ole. */
.kaart__pilt,
.kirje__pilt,
.lugu__pilt,
.saatekaart__pilt img,
.tegevusplokk,
.lood .lugu,
.summa,
.video,
.video__eelvaade,
.galerii img,
.juhtpilt img,
.nupp,
.tegevus,
.sildid a {
	border-radius: var(--raadius);
}