@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; }

/* 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; }

.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);
}

.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; }

.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) iso näyttö ------------------------------------------------ */

/* Kaksi pintaa: kansi pysyy paikallaan, sisältö vierii. */
@media (min-width: 64rem) {
	: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;
	}

	.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); }

	.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; }

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

	/* 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;
		}
	}
}

/* 6) hyvin leveä näyttö ---------------------------------------- */

/* Rivi jakautuu kolmeen sarakkeeseen: aika, otsikko, kuvaus. */
@media (min-width: 100rem) {
	.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;
	}
}

/* 7) 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;
	}
}

/* 8) 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, .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; }
	.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 { text-decoration: none; }
}