@charset "utf-8";

/* ---------------------------------------------------------------
   antonahonen.fi
   Pelkkää typografiaa: yksi kirjasin (Finlandica), ei kuvia, ei
   koristeita. Rakenne syntyy kirjasinkoosta ja tyhjästä tilasta.
   Kaksi erillistä asettelua:
   - mobiili: yksi virtaava sarake
   - iso näyttö: kiinteä kansi vasemmalla, sisältö vierii oikealla;
     hyvin leveällä näytöllä rivit jakautuvat kolmeen sarakkeeseen
   Otsikkoasteikko: h1 > h2 > h3 > johdanto ≥ leipäteksti > nimiöt.
   Rakenne: 1) kirjasimet  2) muuttujat  3) perusta  4) mobiili
            5) iso näyttö  6) hyvin leveä näyttö  7) siirtymät
            8) tuloste
   --------------------------------------------------------------- */

/* 1) kirjasimet ------------------------------------------------ */

/* Finlandica, SIL Open Font License 1.1 (/fontit/OFL.txt).
   Muuttuva wght 400–700, rajattu Latin-1:een ja välimerkkeihin. */
@font-face {
	font-family: "Finlandica";
	src: url("/fontit/finlandica.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* Varakirjasin mitoitettu Finlandican mukaan, jotta teksti ei
   hyppää kirjasimen latautuessa. */
@font-face {
	font-family: "Finlandica-vara";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
	size-adjust: 97%;
	ascent-override: 98%;
	descent-override: 25.8%;
	line-gap-override: 0%;
}

/* 2) muuttujat ------------------------------------------------- */

:root {
	color-scheme: light dark;

	/* grafiitti lämpimällä paperilla; kontrastit (WCAG AAA ≥ 7:1):
	   muste 11,6:1, vaimea 7,1:1, korostus 7,5:1 */
	--paperi:   #f6f5f1;
	--muste:    #34332f;
	--vaimea:   #535250;
	--viiva:    #dedcd4;
	--korostus: #185a3e;
	--valinta:  #d6e8dd;

	--kirjasin: "Finlandica", "Finlandica-vara", system-ui, sans-serif;

	/* kirjasinkoot */
	--koko-nimio: 0.9375rem;
	--koko-teksti: 1.0625rem;
	--koko-johdanto: 1.1875rem;
	--koko-h3: 1.25rem;
	--koko-h2: 1.625rem;
	--koko-h1: clamp(2.5rem, 11.5vw, 3.75rem);

	--reuna: 1.25rem;
	--mitta: 38rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* muste 12,4:1, vaimea 7,7:1, korostus 9,5:1 */
		--paperi:   #1b1b1a;
		--muste:    #dddbd3;
		--vaimea:   #aeada6;
		--viiva:    #31312e;
		--korostus: #86cfa9;
		--valinta:  #2a463c;
	}
}

/* 3) perusta --------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--paperi);
	color: var(--muste);
	font-family: var(--kirjasin);
	font-size: var(--koko-teksti);
	line-height: 1.6;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

::selection { background: var(--valinta); }

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

p { text-wrap: pretty; hanging-punctuation: first; }

a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--korostus);
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.2em;
}
a:hover { color: var(--korostus); }

:focus-visible {
	outline: 2px solid var(--korostus);
	outline-offset: 4px;
	border-radius: 1px;
}

.ohita {
	position: absolute;
	left: var(--reuna);
	top: -4rem;
	padding: 0.6rem 0.9rem;
	background: var(--muste);
	color: var(--paperi);
	text-decoration: none;
	z-index: 10;
}
.ohita:focus { top: 0.75rem; }

/* otsikot: yksi painoarvo, koko kertoo tason */
h1, h2, h3 {
	font-weight: 650;
	text-wrap: balance;
}

h1 {
	font-size: var(--koko-h1);
	line-height: 1;
	letter-spacing: -0.035em;
	hyphens: manual;
}

h2 {
	font-size: var(--koko-h2);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

h3 {
	font-size: var(--koko-h3);
	line-height: 1.25;
	letter-spacing: -0.012em;
	hyphens: auto;
	overflow-wrap: break-word;
}
/* kosketusalue vähintään 44 px (2.5.5); pystytäyte ei muuta rivitystä */
h3 a { text-decoration-thickness: 0.06em; padding-block: 0.6rem; }
/* julkaisu, jota ei ole verkossa: otsikko näyttää samalta kuin linkitetyt, mutta ei reagoi osoittimeen */
h3 .ei-linkkia {
	text-decoration-line: underline;
	text-decoration-color: var(--korostus);
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.2em;
}

/* 4) mobiili (perusasettelu) ----------------------------------- */

.kansi { padding: 1.25rem var(--reuna) 3rem; }

.valikko ul { display: flex; gap: 1.5rem; margin-block: -0.55rem; }
.valikko a,
.yhteys a {
	display: inline-block;
	padding-block: 0.55rem;
}
.valikko a {
	color: var(--vaimea);
	text-decoration: none;
}
.valikko a:hover { color: var(--muste); }
.valikko a[aria-current="page"] {
	color: var(--muste);
	text-decoration: underline;
	text-decoration-color: var(--korostus);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4em;
}

.esittely { margin-top: 3rem; }

/* iskulause tai alaotsikko pääotsikon alla: alaotsikon kokoinen, ei otsikkotaso */
.iskulause {
	margin-top: 0.75rem;
	font-size: var(--koko-h3);
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.012em;
	text-wrap: balance;
	hyphens: manual;
}

.johdanto {
	margin-top: 1.25rem;
	font-size: var(--koko-johdanto);
	line-height: 1.5;
	max-width: var(--mitta);
}

.lisa {
	margin-top: 1rem;
	color: var(--vaimea);
	max-width: var(--mitta);
}

/* referenssisivun sisällysluettelo: vain isolla vaakanäytöllä (kohta 6) */
.sisallys { display: none; }

.yhteys {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin-top: calc(1.75rem - 0.55rem);
}

/* sisältö */

main {
	view-transition-name: sisalto;
	padding: 0 var(--reuna) 3.5rem;
}

.osio { padding-top: 2.75rem; }
/* osiot (Koulutus, Työkokemus, …) erottuvat toisistaan viivalla ja lisävälillä */
.osio + .osio {
	margin-top: 2.5rem;
	border-top: 1px solid var(--viiva);
}

.osion-otsake p {
	margin-top: 0.75rem;
	color: var(--vaimea);
	max-width: var(--mitta);
}

.aikajana { margin-top: 1.5rem; }
.aikajana > li + li { margin-top: 2rem; }

.nimio {
	color: var(--vaimea);
	font-size: var(--koko-nimio);
	margin-bottom: 0.3rem;
}

.taho {
	display: block;
	color: var(--vaimea);
	margin-top: 0.15rem;
}

.kuvaus {
	margin-top: 0.6rem;
	max-width: var(--mitta);
}
/* kappaleväli vähintään puolet rivikorkeudesta lisää (1.4.8) */
.kuvaus p + p { margin-top: 0.85em; }

.suuret-linkit {
	font-size: var(--koko-h2);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.5;
}
.suuret-linkit a { display: inline-block; padding-block: 0.25rem; }

/* 5) tabletti ja vaakapuhelin ---------------------------------- */

/* Yksi palsta keskellä näyttöä: tekstin mitta pysyy samana (1.4.8),
   mutta tyhjä tila jakautuu molemmille puolille. */
@media screen and (min-width: 40rem) {
	:root {
		--reuna: 2.5rem;
		--koko-h1: clamp(3.75rem, 8vw, 4.5rem);
	}

	.sivu {
		max-width: calc(var(--mitta) + 2 * var(--reuna));
		margin-inline: auto;
	}
}

/* 6) iso vaakanäyttö ------------------------------------------- */

/* Kaksi pintaa: kansi pysyy paikallaan, sisältö vierii. Pystyssä oleva
   tabletti (esim. 1024 × 1366) jää yhden palstan asetteluun. */
@media (min-width: 64rem) and (orientation: landscape) {
	:root {
		--reuna: clamp(2rem, 3.5vw, 4.5rem);
		--koko-johdanto: clamp(1.2rem, 0.85rem + 0.5vw, 1.35rem);
		--koko-h3: 1.375rem;
		--koko-h2: 2.25rem;
		/* otsikko täyttää kannen leveyden, mutta mahtuu myös korkeuteen */
		--koko-h1: clamp(3rem, min(4.9vw, 8vh), 7.5rem);
	}

	.sivu {
		display: grid;
		grid-template-columns: minmax(26rem, 44fr) 56fr;
		min-height: 100dvh;
		max-width: none;
		margin-inline: 0;
	}

	.kansi {
		display: flex;
		flex-direction: column;
		gap: clamp(1.25rem, 3.5vh, 2.5rem);
		padding: clamp(1.5rem, 4vh, 2.25rem) var(--reuna);
		align-self: start;
		min-height: 100dvh;
		border-right: 1px solid var(--viiva);
	}

	.esittely { margin-top: auto; }

	h1 {
		line-height: 0.95;
		letter-spacing: -0.04em;
	}

	.johdanto {
		margin-top: 1.75rem;
		line-height: 1.42;
		max-width: 32em;
	}

	.lisa { max-width: 36em; }

	.yhteys { margin-block: -0.55rem; }

	main {
		min-width: 0;
		padding-bottom: 6rem;
	}

	.osio { padding-top: clamp(2.5rem, 7vh, 4.5rem); }
	.osio + .osio { margin-top: clamp(2.5rem, 6vh, 4rem); }

	.aikajana { margin-top: 2.25rem; }
	.aikajana > li {
		display: grid;
		grid-template-columns: 9rem minmax(0, 1fr);
		column-gap: 2rem;
	}
	.aikajana > li + li { margin-top: 2.5rem; }
	/* sisältö toiseen sarakkeeseen myös silloin, kun nimiö puuttuu (esim. "ei verkossa") */
	.aikajana > li > div { grid-column: 2; }

	.nimio { margin: 0; padding-top: 0.3rem; }

	/* Referenssisivun sisällysluettelo kannessa: osioiden otsikot linkkeinä. */
	.sisallys {
		display: block;
		margin-top: clamp(0.5rem, 5vh, 3.5rem);
	}
	.sisallys-otsake {
		color: var(--vaimea);
		font-size: var(--koko-nimio);
	}
	.sisallys ul { margin-top: 0.5rem; }
	.sisallys a {
		display: block;
		/* kosketusalue vähintään 44 px (2.5.5) */
		padding: 0.625rem 0 0.625rem 1rem;
		border-left: 2px solid var(--viiva);
		color: var(--vaimea);
		text-decoration: none;
	}
	.sisallys a:hover { text-decoration-line: underline; }

	/* matala näyttö (alle 864 px): luettelo yhdellä rivillä ja korostus alareunassa,
	   jotta kansi mahtuu näytön korkeuteen */
	@media (max-height: 53.99rem) {
		.sisallys {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			gap: 0 1.5rem;
			margin-top: 0;
		}
		.sisallys ul {
			display: flex;
			gap: 0 1.25rem;
			margin-top: 0;
		}
		.sisallys a {
			padding: 0.625rem 0 calc(0.625rem - 2px);
			border-left: 0;
			border-bottom: 2px solid var(--viiva);
		}
	}

	/* Ajankohtaisen osion korostus vierittäessä. Pelkkä CSS: osioiden näkymäaikajanat
	   (view-timeline) ohjaavat linkkien värejä. Osio on ajankohtainen, kun lukulinja
	   (30 % näytön korkeudesta) on sen kohdalla; väli seuraavaan osioon kuuluu edelliselle.
	   Viimeinen osio on ajankohtainen myös silloin, kun se näkyy kokonaan (sivun loppu).
	   Luettelon myöhemmät animaatiot voittavat, joten kerrallaan korostuu yksi osio.
	   Selaimet ilman tukea näyttävät luettelon ilman korostusta. */
	@supports (animation-timeline: view()) and (timeline-scope: --a) {
		.sivu { timeline-scope: --selvitykset, --tutkielmat, --mediassa; }
		.osio[aria-labelledby="selvitykset"] { view-timeline: --selvitykset block; }
		.osio[aria-labelledby="tutkielmat"] { view-timeline: --tutkielmat block; }
		.osio[aria-labelledby="mediassa"] { view-timeline: --mediassa block; }

		.sisallys a {
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: none;
		}
		.sisallys a[href="#selvitykset"] {
			animation-name: ajankohtainen, ei-ajankohtainen, ei-ajankohtainen, ei-ajankohtainen;
			animation-timeline: --selvitykset, --tutkielmat, --mediassa, --mediassa;
			animation-range: cover 70vh cover calc(100% - 30vh + 4rem), cover 70vh cover calc(100% - 30vh + 4rem), cover 70vh cover calc(100% - 30vh + 4rem), contain 0% cover 100%;
		}
		.sisallys a[href="#tutkielmat"] {
			animation-name: ajankohtainen, ei-ajankohtainen, ei-ajankohtainen;
			animation-timeline: --tutkielmat, --mediassa, --mediassa;
			animation-range: cover 70vh cover calc(100% - 30vh + 4rem), cover 70vh cover calc(100% - 30vh + 4rem), contain 0% cover 100%;
		}
		.sisallys a[href="#mediassa"] {
			animation-name: ajankohtainen, ajankohtainen;
			animation-timeline: --mediassa, --mediassa;
			animation-range: cover 70vh cover calc(100% - 30vh + 4rem), contain 0% cover 100%;
		}
	}

	/* kansi kiinnitetään vain, jos se mahtuu näytön korkeuteen */
	@media (min-height: 42rem) {
		.kansi {
			position: sticky;
			top: 0;
			height: 100dvh;
			overflow-y: auto;
		}
	}
}

/* 7) hyvin leveä vaakanäyttö ----------------------------------- */

/* Rivi jakautuu kolmeen sarakkeeseen: aika, otsikko, kuvaus. */
@media (min-width: 100rem) and (orientation: landscape) {
	.sivu { grid-template-columns: minmax(26rem, 38fr) 62fr; }
	.aikajana > li {
		grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1.25fr);
		grid-auto-flow: dense;
		column-gap: 2.5rem;
	}
	.aikajana > li > div { display: contents; }
	.aikajana > li > .nimio { grid-column: 1; grid-row: 1 / span 3; }
	.aikajana > li > div > * { grid-column: 2; }
	.aikajana li .kuvaus {
		grid-column: 3;
		grid-row: 1 / span 3;
		margin-top: 0;
		padding-top: 0.2rem;
	}
}

/* reunaviivan väri: pystyluettelossa vasen, vaakarivissä ala (muilla reunoilla ei leveyttä) */
@keyframes ajankohtainen {
	from, to { color: var(--muste); border-color: var(--korostus); }
}

@keyframes ei-ajankohtainen {
	from, to { color: var(--vaimea); border-color: var(--viiva); }
}

/* sisällysluettelon ja ohituslinkin hypyt: pehmeä vieritys, jos liikettä ei ole rajoitettu */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
.osio h2 { scroll-margin-top: 2rem; }

/* 8) siirtymät ------------------------------------------------- */

/* Sivujen välinen pehmeä siirtymä ilman skriptejä. Selaimet,
   jotka eivät tue tätä, vaihtavat sivun tavalliseen tapaan. */
@view-transition { navigation: auto; }

::view-transition-old(sisalto),
::view-transition-new(sisalto) { animation-duration: 0.22s; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* 9) tuloste --------------------------------------------------- */

/* Etusivu tulostuu yksinkertaiseksi ansioluetteloksi. */
@media print {
	@page { margin: 16mm 18mm; }
	:root {
		--paperi: #fff; --muste: #000; --vaimea: #444; --viiva: #bbb; --korostus: #000; --reuna: 0px;
		--koko-nimio: 9pt; --koko-teksti: 10pt; --koko-johdanto: 11pt; --koko-h3: 11pt; --koko-h2: 14pt; --koko-h1: 20pt;
	}
	body { line-height: 1.45; }
	.sivu { display: block; }
	.ohita, .valikko, .sisallys, .yhteys { display: none; }
	.kansi { position: static; height: auto; padding: 0 0 4mm; border: 0; display: block; }
	.esittely { margin-top: 0; }
	h1 { line-height: 1.05; }
	.johdanto { margin-top: 3mm; max-width: none; }
	.lisa { max-width: none; }
	main { padding: 0; }
	.osio { padding-top: 5mm; }
	.osio + .osio { margin-top: 4mm; }
	.aikajana { margin-top: 3mm; }
	.aikajana > li { display: grid; grid-template-columns: 30mm 1fr; column-gap: 6mm; break-inside: avoid; }
	.aikajana > li + li { margin-top: 4mm; }
	.aikajana > li > div { display: block; }
	.aikajana > li > div > *, .aikajana li .kuvaus { grid-column: auto; grid-row: auto; }
	.nimio { margin: 0; }
	a, h3 .ei-linkkia { text-decoration: none; }
}