/*
 * Amerin Kulttuurisäätiö — mukautettu tyylittely.
 *
 * Periaate: kromi on neutraali, väri tulee taideteoksista. Museo- ja
 * galleriasivustojen vakiintunut ratkaisu — tausta ja typografia vetäytyvät,
 * kuvitusoriginaalit saavat kantaa värin.
 */

:root {
	/*
	 * Sivun pohja on vaalea harmaa; --amerin-paper on erikseen paspartuun
	 * paperisävy. Ne olivat aiemmin sama arvo, jolloin kehys ei erottunut
	 * pohjasta lainkaan — nyt paspartuu on pohjaa vaaleampi ja lämpimämpi.
	 */
	--amerin-bg:         #EDEEEF;
	--amerin-paper:      #F7F5F0;
	--amerin-surface:    #FFFFFF;
	--amerin-ink:        #1A1815;
	--amerin-ink-soft:   #5A544C;
	--amerin-line:       #DFE1E2;

	/* Heron ja alatunnisteen tumma pohja: kannen syvä sininen. */
	--amerin-hero-dark:  #062F44;

	/*
	 * Paletti on poimittu Merkkien takana -kirjankannesta: syaaninsiniset
	 * sävyt ja keltainen korostus.
	 *
	 * Linkkiväri on kannen keskisininen #0486B1 tummennettuna: alkuperäinen
	 * jää paperilla kontrastiin 3,82:1, tämä yltää 5,51:1 ja erottuu silti
	 * selvästi mustasta leipätekstistä.
	 *
	 * Keltaista EI voi käyttää tekstinä vaalealla pohjalla — #EDB609 jää
	 * paperilla kontrastiin 1,71:1. Se toimii korostuksena vain tummalla
	 * sinisellä (7,54:1), eli herossa ja alatunnisteessa.
	 */
	--amerin-accent:     #036B8E;
	--amerin-blue-pale:  #A4EEF7;
	--amerin-blue-cyan:  #05BAE7;
	--amerin-yellow:     #EDB609;

	--amerin-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
	--amerin-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--amerin-measure: 68ch;
	--amerin-gutter:  clamp(1.25rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------- perusta */

body {
	background: var(--amerin-bg);
	color: var(--amerin-ink);
	font-family: var(--amerin-sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.amerin-hero__title,
.amerin-section__title {
	font-family: var(--amerin-serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--amerin-ink);
	text-wrap: balance;
}

p, li { max-width: var(--amerin-measure); }

a { color: var(--amerin-accent); text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--amerin-ink); }

/* Näkyvä fokus koko sivustolla — näppäimistökäyttö ei saa jäädä arvailuksi. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--amerin-accent);
	outline-offset: 3px;
}

/* Ohita navigaatio -linkki ruudunlukijoille ja näppäimistölle. */
.amerin-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--amerin-ink);
	color: #fff;
}
.amerin-skip:focus { left: 0; }

/* ------------------------------------------------------------------ hero */

/*
 * Hero: tumma harmaa liukuväri, valkoinen teksti ja pelkistetty aaltokuvio.
 *
 * Kuvio on oma SVG-tiedosto (images/hero-waves.svg), ei taustakuvaa
 * mediakirjastosta — se skaalautuu terävänä joka kokoon, painaa 27 kt eikä
 * vaadi erillisiä kuvakokoja.
 *
 * Skaalaus on tasasuhtainen (slice + cover), ei venytys: venytettynä aallot
 * puristuivat kapealla näytöllä tiheiksi ja litistyivät leveällä lähes
 * näkymättömiin. Rajaus säilyttää aallonpituuden samana joka koossa.
 *
 * Viivat painottuvat alas oikealle, joten otsikon tila vasemmalla ylhäällä
 * pysyy rauhallisena. Kuvion värit on tehty tummalle pohjalle (vaalea paperi,
 * vaalennettu aksentti, salvia) — vaaleaa versiota varten SVG on luotava
 * uudelleen tummilla sävyillä.
 */
.amerin-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(88vh, 820px);
	padding: var(--amerin-gutter);
	background-color: var(--amerin-hero-dark);
	background-image:
		url("../images/hero-waves.svg"),
		linear-gradient(165deg, #0A4160 0%, #062F44 55%, #04212F 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center bottom, center;
	background-size: cover, cover;
	color: #fff;
	overflow: hidden;
}

.amerin-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	width: 100%;
	padding-bottom: clamp(2rem, 6vh, 5rem);
}

.amerin-hero__title {
	color: #fff;
	font-size: clamp(2.25rem, 6vw, 4.25rem);
	margin: 0 0 1.25rem;
	max-width: 20ch;
}

.amerin-hero__lead {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	max-width: 58ch;
}

.amerin-hero__lead + .amerin-hero__lead { margin-top: 0.9rem; }

/* --------------------------------------------------------------- osiot */

.amerin-section {
	padding: clamp(3.5rem, 9vw, 7rem) var(--amerin-gutter);
	scroll-margin-top: 5rem;
}

/*
 * Harmaat osiot saavat hennon liukuvärin kahden vaalean harmaan välillä.
 * Kulma 165° on sama kuin herossa ja alatunnisteessa, joten sivun liukuvärit
 * kulkevat samaan suuntaan.
 *
 * Ero on pieni (1,12:1 päiden välillä) — tarkoitus on antaa pinnalle syvyyttä,
 * ei piirtää näkyvää raitaa. Tummemmassa päässä kontrastit säilyvät: leipä-
 * teksti 14,42:1, vaimennettu 6,09:1, linkki 4,89:1.
 *
 * Sävytetyt osiot (--alt valkoinen, --tint sininen) määrittelevät oman
 * taustansa, joten ne rajataan pois.
 */
.amerin-section:not(.amerin-section--alt):not(.amerin-section--tint):not(.amerin-section--dark) {
	background: linear-gradient(165deg, #F3F4F5 0%, #EDEEEF 45%, #E6E8EA 100%);
}

.amerin-section--alt { background: var(--amerin-surface); }

.amerin-section__eyebrow {
	font-family: var(--amerin-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--amerin-ink-soft);
	margin: 0 0 0.75rem;
}

.amerin-section__title {
	font-size: clamp(1.85rem, 3.6vw, 2.9rem);
	margin: 0 0 2rem;
	max-width: 24ch;
}

.amerin-subtitle {
	font-family: var(--amerin-serif);
	font-size: clamp(1.3rem, 2vw, 1.65rem);
	font-weight: 600;
	margin: 2.5rem 0 0.6rem;
}

.amerin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}

/* --------------------------------------------------------- sitaatti */

.amerin-quote {
	font-family: var(--amerin-serif);
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	line-height: 1.35;
	font-style: italic;
	color: var(--amerin-ink);
	border-left: 3px solid var(--amerin-accent);
	margin: 0 0 2.5rem;
	padding: 0.25rem 0 0.25rem 1.5rem;
	max-width: 30ch;
}

.amerin-quote cite {
	display: block;
	margin-top: 0.9rem;
	font-family: var(--amerin-sans);
	font-size: 0.85rem;
	font-style: normal;
	letter-spacing: 0.06em;
	color: var(--amerin-ink-soft);
}

/* ------------------------------------------------- myönnetty tuki */

.amerin-stat {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1.5rem;
	margin: 0 0 2.5rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--amerin-line);
}

.amerin-stat__figure {
	font-family: var(--amerin-serif);
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--amerin-ink);
}

.amerin-stat__label {
	font-size: 0.95rem;
	color: var(--amerin-ink-soft);
	max-width: 34ch;
}

/* Taulukko vierii vaakasuunnassa kapealla näytöllä, sivu ei. */
.amerin-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.amerin-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.amerin-table caption {
	text-align: left;
	font-size: 0.85rem;
	color: var(--amerin-ink-soft);
	margin-bottom: 0.9rem;
}

.amerin-table th,
.amerin-table td {
	padding: 0.85rem 1rem 0.85rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--amerin-line);
}

.amerin-table thead th {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--amerin-ink-soft);
	border-bottom-width: 2px;
}

.amerin-table td:first-child { max-width: 34ch; padding-right: 2rem; }

.amerin-table .amerin-amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 500;
}

.amerin-table .amerin-year { font-variant-numeric: tabular-nums; white-space: nowrap; }

.amerin-badge {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.1rem 0.45rem;
	font-size: 0.7rem;
	letter-spacing: 0.03em;
	color: var(--amerin-ink-soft);
	border: 1px solid var(--amerin-line);
	border-radius: 2px;
	white-space: nowrap;
}

/* ------------------------------------------------------------ hallitus */

.amerin-board { list-style: none; margin: 0; padding: 0; }

.amerin-board li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--amerin-line);
	max-width: 46ch;
}

.amerin-board__name {
	font-family: var(--amerin-serif);
	font-size: 1.25rem;
	font-weight: 600;
	display: block;
}

.amerin-board__role {
	font-size: 0.9rem;
	color: var(--amerin-ink-soft);
}

/* --------------------------------------------------------- yhteystiedot */

.amerin-contact__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--amerin-ink-soft);
	margin: 0 0 0.35rem;
}

.amerin-contact address { font-style: normal; line-height: 1.7; }

/* -------------------------------------------------------------- liike */

/*
 * Esiintuonti on progressiivinen parannus: piilotus tapahtuu vain jos JS on
 * ehtinyt merkitä juurielementin. Ilman JS:ää — tai jos skripti kaatuu —
 * sisältö on näkyvissä, eikä sivu jää tyhjäksi.
 */
.amerin-js .amerin-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.amerin-js .amerin-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.amerin-js .amerin-reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto !important; }
}

@media (max-width: 640px) {
}

/* ------------------------------------------- SiteOrigin-rakenteen silta */

/*
 * Page Builder kääri sisällön riviin, soluun ja vimpainkuoreen. Nämä säännöt
 * kytkevät yllä olevat luokat siihen rakenteeseen, jotta rivi voi toimia
 * täysleveänä osiona ja sisältö pysyy luettavan levyisenä.
 */

.amerin-hero > .panel-grid-cell,
.amerin-section > .panel-grid-cell {
	position: relative;
	z-index: 1;
	width: 100%;
	float: none;
}

/*
 * Sisältöpalstan leveys rajataan riviin, ei yksittäiseen soluun.
 *
 * Aiemmin raja oli solussa (max-width: 1180px), mikä toimi yhden solun
 * riveillä mutta ei kahden: kaksi solua levisivät yhdessä 1292 pikseliin,
 * kun yhden solun rivit olivat 1180. Rivin sisennys pitää kaikki osiot
 * samalla leveydellä solujen määrästä riippumatta.
 *
 * Tausta pysyy täysleveänä, koska rajaus tehdään sisennyksellä eikä
 * leveydellä.
 */
.amerin-section {
	padding-inline: max( var(--amerin-gutter), calc( ( 100vw - 1180px ) / 2 ) );
}

.amerin-hero .so-panel,
.amerin-section .so-panel { margin-bottom: 0 !important; }

.amerin-hero .siteorigin-widget-tinymce {
	max-width: 1180px;
	margin-inline: auto;
	width: 100%;
}

/*
 * Rivien väliin jäävä rako pois.
 *
 * Page Builder antaa jokaiselle riville 30 px alamarginaalin ja Northin
 * sticky-valikko lisää .masthead-sentinel-välikkeen, jolla on sama marginaali.
 * Koska osioilla on omat taustavärit, rako näkyi vaaleana raitana osioiden
 * välissä — selvimmin tumman heron yläpuolella.
 *
 * Marginaali on uloimmassa .panel-grid-kääreessä, ei rivityylin div:issä
 * (.amerin-section), joten se on kohdistettava kääreeseen. Osioiden rytmi
 * tulee niiden omasta paddingista.
 */
.panel-layout .panel-grid { margin-bottom: 0 !important; }
.masthead-sentinel { margin-bottom: 0 !important; }

/*
 * North keskittää sisällön 1040 px:n containeriin. Page Builder venyttää
 * täysleveät rivit negatiivisilla marginaaleilla — se toimii vain jos leveys
 * saa jäädä autoksi. Nimenomainen width: 100% sitoisi rivin containerin
 * leveyteen ja kumoaisi venytyksen.
 */
.amerin-hero,
.amerin-section { width: auto; max-width: none; }

/* Ensimmäinen otsikko osiossa ei tarvitse ylämarginaalia. */
.amerin-section .siteorigin-widget-tinymce > *:first-child { margin-top: 0; }
.amerin-section .siteorigin-widget-tinymce > *:last-child  { margin-bottom: 0; }

/* ------------------------------------------------ Northin oma navigaatio */

/*
 * Ankkurivalikko renderöityy Northin .main-navigation-rakenteeseen. Kuusi
 * nimikettä ei mahdu oletusväleillä containerin leveyteen, joten tiivistetään
 * hieman ja sallitaan sivuston nimen kutistua ensin.
 */
.site-header .site-branding { flex-shrink: 1; min-width: 0; }

.main-navigation ul li a {
	font-family: var(--amerin-sans);
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	padding-left: 0.85em;
	padding-right: 0.85em;
	color: var(--amerin-ink-soft);
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus { color: var(--amerin-ink); }

/* Aktiivinen osio: JS asettaa aria-current vieritettäessä. */
.main-navigation ul li a[aria-current="true"] {
	color: var(--amerin-ink);
	box-shadow: inset 0 -3px 0 0 var(--amerin-accent);
}

.site-title a { font-family: var(--amerin-serif); letter-spacing: 0.005em; }

.site-description {
	font-family: var(--amerin-sans);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--amerin-ink-soft);
}

/* Osioiden ankkurivieritys jää kiinteän ylätunnisteen alle ilman tätä. */
.amerin-hero,
.amerin-section { scroll-margin-top: 6rem; }

/* ------------------------------------------- taulukon nollaus Northista */

/*
 * North tyylittää taulukot omilla harmailla väreillään ja pystyviivoilla.
 * Nollataan ne: tässä taulukossa rivi erottuu vain alaviivalla, ja teksti
 * käyttää sivuston omaa mustaa.
 */
.amerin-table,
.amerin-table thead,
.amerin-table tbody,
.amerin-table tr {
	border: 0;
	background: none;
}

.amerin-table th,
.amerin-table td {
	border: 0;
	border-bottom: 1px solid var(--amerin-line);
	background: none;
	color: var(--amerin-ink);
}

.amerin-table thead th {
	color: var(--amerin-ink-soft);
	border-bottom: 2px solid var(--amerin-line);
}

.amerin-table tbody tr:hover td { background: rgba(3, 107, 142, 0.05); }

.amerin-table tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------ värien yhtenäistäminen */

/*
 * North värittää otsikot ja leipätekstin omalla harmaallaan (#595959).
 * Kontrasti riittää, mutta sävy ei ole sivuston paletista, jolloin osa
 * elementeistä on mustaa ja osa harmaata. Sidotaan kaikki samaan mustaan.
 */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content .amerin-section__title,
.entry-content .amerin-subtitle,
.entry-content .amerin-board__name {
	color: var(--amerin-ink);
}

.entry-content p,
.entry-content li,
.entry-content address {
	color: var(--amerin-ink);
}

/* Vaimennetut elementit pysyvät vaimennettuina. */
.entry-content .amerin-section__eyebrow,
.entry-content .amerin-board__role,
.entry-content .amerin-contact__label,
.entry-content .amerin-stat__label,
.entry-content .amerin-table caption,
.entry-content .amerin-quote cite,
.entry-content .amerin-table thead th {
	color: var(--amerin-ink-soft);
}

.entry-content a { color: var(--amerin-accent); }
.entry-content a:hover,
.entry-content a:focus { color: var(--amerin-ink); }

/* Hero on tumma: teksti valkoisena. */
.amerin-hero .entry-content h1,
.entry-content .amerin-hero__title { color: #fff; }
.entry-content .amerin-hero__lead { color: rgba(255, 255, 255, 0.92); }

/* ------------------------------------------------------------ sanamerkki */

/*
 * Säätiöllä ei ole toistaiseksi logoa, joten nimi on sivuston tunnus.
 * Se ansaitsee harkitun ladonnan: Cormorant Garamond, hillitty välistys ja
 * riittävä koko, jotta se luetaan tunnukseksi eikä teeman oletusotsikoksi.
 *
 * Kun logo joskus tulee, se asetetaan Ulkoasu → Mukauta → Sivuston tunnus,
 * jolloin tämä teksti korvautuu automaattisesti eikä näitä sääntöjä tarvitse
 * purkaa.
 */
.site-title {
	margin: 0;
	line-height: 1.1;
}

.site-title a {
	font-family: var(--amerin-serif);
	font-size: clamp(1.35rem, 2.1vw, 1.75rem);
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--amerin-ink);
	text-decoration: none;
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.site-title a:hover,
.site-title a:focus {
	color: var(--amerin-ink);
	border-bottom-color: var(--amerin-accent);
}

/* Ilman tagline-riviä ylätunniste saa olla tiiviimpi. */
.site-header .container-inner { padding-top: 1.35rem; padding-bottom: 1.35rem; }

/*
 * North värittää sanamerkin säännöllä #masthead .site-branding ... { color: inherit }.
 * Id-valitsin voittaa pelkät luokat, joten sama tarkkuus tarvitaan tässäkin.
 */
#masthead .site-branding .site-title a,
#masthead .site-branding .site-title a:visited {
	color: var(--amerin-ink);
}

/* ------------------------------------------------------- alatunniste */

/*
 * Alatunniste on heron pari: sama tumma liukuväri ja aaltokuvio, käänteisenä
 * niin että sivu alkaa ja päättyy samaan muotokieleen. Oma SVG (footer-waves)
 * on matalampi kaista ja harvempi kuin heron — 54 px:n alatunniste ei kantaisi
 * kymmentä viivaa, joten korkeutta on myös kasvatettu.
 */
#colophon {
	position: relative;
	background-color: var(--amerin-hero-dark);
	background-image:
		url("../images/footer-waves.svg"),
		linear-gradient(to bottom, #04212F 0%, #062F44 45%, #0A4160 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center top, center;
	background-size: cover, cover;
	border-top: 0;
}

#colophon .site-info {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.82);
	border-top: 0;
}

/*
 * Linkki tummalla sinisellä: keltainen korostusväri. Kontrasti 5,62:1
 * liukuvärin vaaleimmalla kohdalla (#0A4160) ja 8,43:1 tummimmalla.
 */
#colophon .site-info a,
#colophon .site-info a:visited {
	color: var(--amerin-yellow);
	text-underline-offset: 0.18em;
}

#colophon .site-info a:hover,
#colophon .site-info a:focus {
	color: #fff;
}

/* ------------------------------------------------ etusivun kotikuvake */

.amerin-home-icon {
	display: inline-block;
	vertical-align: -0.22em;
	width: 18px;
	height: 18px;
	/*
	 * Optinen tasaus mitattuna piirtyneistä pikseleistä, ei laatikoista:
	 * ilman siirtoa kuvakkeen alareuna piirtyy 1 px alemmas kuin tekstin
	 * perusviiva, jolloin alleviivaus näyttää kuvakkeen kohdalla tiukemmalta.
	 * Yksi pikseli ylös asettaa ne samalle linjalle.
	 */
	transform: translateY(-1px);
}

/*
 * North vaihtaa mobiilivalikkoon 600 px:n kohdalla — samaa #primary-menu
 * -listaa käytetään molemmissa, joten erottelu tehdään mediakyselyllä eikä
 * säiliövalitsimella.
 *
 * Työpöydällä: pelkkä kuvake, nimike jää ruudunlukijalle.
 */
@media (min-width: 601px) {
	.main-navigation .amerin-home-label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}
}

/* Mobiilivalikossa pystylista lukee paremmin tekstinä kuin yksin kuvakkeena. */
@media (max-width: 600px) {
	.amerin-home-icon { display: none; }
}

/*
 * Kuvakelinkki jätetään samaan laatikkoon kuin tekstinimikkeet (Northin
 * display: block + line-height). Aiempi inline-flex + min-height kutisti
 * laatikkoa, jolloin aktiivisen osion alleviivaus nousi 4 px muita ylemmäs
 * eikä ollut samalla linjalla.
 */

/*
 * Mobiilivalikon tausta on Northissa rgba(0,0,0,.9), jolloin hero-teksti
 * kuultaa läpi ja valikko näyttää sekavalta. Umpinainen tausta paletin
 * mustalla korjaa luettavuuden.
 */
#mobile-navigation {
	background-color: var(--amerin-ink);
}

#mobile-navigation a { color: #fff; }

#mobile-navigation a:hover,
#mobile-navigation a:focus,
#mobile-navigation a[aria-current="true"] {
	color: #fff;
	box-shadow: inset 3px 0 0 0 var(--amerin-accent);
}

/* --------------------------------------------------------------- kuvat */

/*
 * Sisältökuvat skaalautuvat aina sarakkeen leveyteen. Kuvasuhde säilyy
 * height: auto -säännöllä, ja width/height-attribuutit merkkauksessa
 * varaavat tilan etukäteen, jolloin sivu ei hyppää latautuessa.
 */
.amerin-figure {
	margin: 0 0 1.25rem;
}

.amerin-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

/*
 * Pystykuva (esim. kirjankansi) täyttäisi sarakkeen huomattavasti korkeampana
 * kuin vaakakuva viereisessä sarakkeessa. Rajataan leveys, jotta sarakkeiden
 * rytmi pysyy tasaisena.
 *
 * Rajaus on kuvan sijaan figure-elementissä: näin suurennuspainike ei jää
 * kuvaa leveämmäksi eikä klikkausala ulotu kuvan ulkopuolelle.
 */
.amerin-figure--portrait {
	max-width: 260px;
}

.amerin-figure figcaption {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--amerin-ink-soft);
}


/*
 * Leveä kuva proosaosiossa: teksti on rajattu lukuleveyteen (68ch ≈ 748 px),
 * mutta teos saa levittäytyä koko sisältöpalstan leveyteen. Vasen reuna on
 * sama kuin tekstillä, joten porrastus näyttää harkitulta eikä vahingolta.
 */
.amerin-figure--wide {
	margin-top: 1.75rem;
	margin-bottom: 2rem;
	max-width: 1180px;
}

.amerin-figure--wide img {
	border-radius: 2px;
}

.amerin-figure--wide figcaption {
	max-width: var(--amerin-measure);
}

/*
 * Luonnos on 400 × 1100 (suhde 0,36). Kokoa rajataan leveydellä eikä
 * korkeudella: leveysrajaus määrää samalla figuren, painikkeen ja kuvan
 * leveyden, jolloin klikkausala vastaa täsmälleen näkyvää kuvaa.
 *
 * 227 px vastaa aiempaa 624 px:n korkeusrajausta (227 × 1100 / 400 ≈ 624).
 * Korkeusrajauksella painike jäi kuvaa leveämmäksi, koska fit-content
 * laskee kuvan luontaisesta leveydestä (400 px) eikä korkeuden rajaamasta
 * todellisesta leveydestä.
 */
.amerin-figure--tall {
	/* Keskitetään omaan soluunsa: teos on kapea (265 px) ja solu leveä (570 px),
	   joten vasempaan reunaan sidottuna se jäisi irralleen. */
	margin: 0 auto;
	/* +2px = paspartuun hiusviivareunus molemmin puolin, jotta teos pysyy 227 px:ssä */
	max-width: calc(227px + 2 * var(--amerin-mount) + 2px);
}

.amerin-figure--tall img {
	width: 100%;
	height: auto;
}

/* Kapealla näytöllä palstat pinoutuvat ja luonnos jää maltilliseksi. */
@media (max-width: 900px) {
		/* Pinottuna luonnos keskitetään palstalle. */
	.amerin-figure--tall {
		max-width: calc(240px + 2 * var(--amerin-mount));
	}


	.amerin-figure--tall figcaption { text-align: center; }
}

/* ---------------------------------------------- hallitus: sinisävyinen pohja */

/*
 * Hallitus-osion oma taustasävy, nyt paletin sinisenä.
 *
 * Vaaleampi sävy on oikealla, missä luonnos on, ja tummempi vasemmalla
 * tekstin takana — sama rakenne kuin aiemmassa hiekansävyisessä versiossa.
 *
 * Tummempi pohja edellyttää osiokohtaisia arvoja:
 *
 *  - rajaviiva: --amerin-line (#E2DDD4) jäisi kontrastiin ~1,1:1 eli
 *    käytännössä näkymättömiin hallituslistan riviviivoina;
 *  - vaimennettu teksti ja aksentti: sivuston arvot jäävät tällä pohjalla
 *    alle WCAG AA:n, joten molemmat on tummennettu sävyä muuttamatta.
 *
 * Arvot asetetaan muuttujina, joten kaikki osion sisällä perii ne.
 */
/*
 * Vaakaliukuväri: tummempi vasen reuna, vaaleampi oikea reuna.
 *
 * Päätepiste on sidottu sisältöpalstaan (calc(50% + 120px)), ei prosenttiin.
 * Luonnos on sijoitettu palstan oikeaan reunaan, ja koska palsta on keskitetty
 * ja rajattu 1180 pikseliin, kuvan sijainti prosentteina liikkuu näytön
 * leveyden mukaan: 71 % (1440 px), 62 % (2560 px), 68 % (1024 px). Kiinteä
 * prosentti jättäisi kuvan liukuvärin päälle leveillä näytöillä.
 *
 * Kapealla näytöllä palstat pinoutuvat ja luonnos on keskitetty, jolloin
 * vaakaliukuväri kulkisi suoraan sen alta — siksi se on silloin tasainen.
 *
 * Teksti on vasemmalla eli tummimman kohdan päällä, joten vaimennettu väri ja
 * aksentti on tummennettava vastaavasti. Nykyisillä arvoilla (#5A544C ja
 * #8E4525) kontrasti oli hiekalla 4,93:1 ja 4,57:1 — käytännössä rajalla, eikä
 * pohjaa voinut tummentaa lainkaan ilman että ne putoavat alle 4,5:1.
 */
.amerin-section--tint {
	background: linear-gradient(to right, #9DC9D0 0%, #CBECF2 calc(50% + 120px), #CBECF2 100%);
	--amerin-line: #81A5AB;
	--amerin-accent: #035671;
	--amerin-ink-soft: #554F47;
}

/* --------------------------------------------- "takaisin ylös" -painike */

/*
 * Painike on läpikuultavan musta ympyrä. Vaaleiden osioiden päällä se erottuu,
 * mutta tumman alatunnisteen päällä sen reuna katoaa taustaan ja jäljelle jää
 * vain irrallinen nuoli.
 *
 * Sisäpuolinen vaalea rengas piirtyy ympyrän oman täytön päälle, joten se
 * näkyy kummassakin tapauksessa eikä muuta painikkeen kokoa (box-shadow ei
 * vie tilaa, toisin kuin border).
 */
#scroll-to-top {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

#scroll-to-top:hover,
#scroll-to-top:focus-visible {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

/*
 * Pinotussa asettelussa liukuväri pois.
 *
 * Tämän on oltava tiedostossa liukuvärisäännön JÄLKEEN: mediakysely ei lisää
 * tarkkuutta, joten aiemmin sijoitettuna myöhempi sääntö voitti ja liukuväri
 * jäi voimaan myös kapealla näytöllä — juuri siellä, missä keskitetty luonnos
 * osuu sen päälle.
 */
@media (max-width: 900px) {
	.amerin-section--tint { background: #CBECF2; }
}

/*
 * Vasemmassa palstassa sähköposti ja postiosoite ovat allekkain: palsta on
 * puolet entisestä, eikä kahdelle vierekkäiselle lohkolle ole tilaa.
 */
.amerin-figure--aside {
	margin: 0;
}

.amerin-figure--aside img {
	width: 100%;
	height: auto;
	border-radius: 2px;
}

@media (max-width: 900px) {
	}

/* ------------------------------------------------------------- lightbox */

/*
 * Kuva käärytään skriptillä painikkeeksi. Painike ei saa muuttaa asettelua,
 * joten se on lohkotason elementti ilman omaa tyylitystä — vain osoitin ja
 * fokusrengas kertovat, että kuvan voi avata.
 */
/*
 * North värittää kaikki painikkeet punaisiksi säännöllä
 * "button:active, button:focus, button:hover { background: #a94346 }".
 * Ilman tilakohtaista kumoamista se näkyi kuvan vieressä punaisena palkkina
 * niissä kuvissa, joissa painike oli kuvaa leveämpi.
 */
.amerin-figure__zoom,
.amerin-figure__zoom:hover,
.amerin-figure__zoom:focus,
.amerin-figure__zoom:active {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

.amerin-figure__zoom:focus-visible {
	outline: 3px solid var(--amerin-accent);
	outline-offset: 3px;
}

.amerin-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(20, 18, 16, 0.92);
	cursor: zoom-out;
}

.amerin-lightbox[hidden] { display: none; }

.amerin-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	cursor: default;
}

.amerin-lightbox__img {
	display: block;
	max-width: 100%;
	/* Kuvateksti ja marginaalit vievät tilaa, joten kuva ei saa täyttää koko korkeutta. */
	max-height: calc(100vh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
}

.amerin-lightbox__caption {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	text-align: center;
	max-width: 60ch;
}

.amerin-lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
	color: #fff;
	cursor: pointer;
}

/*
 * :focus on lueteltava erikseen. North värittää kaikki painikkeet punaisiksi
 * säännöllä "button:active, button:focus, button:hover", ja koska skripti
 * siirtää fokuksen ohjelmallisesti, :focus-visible ei aina aktivoidu — jolloin
 * Northin punainen jäi voimaan sulkupainikkeessa.
 */
.amerin-lightbox__close:hover,
.amerin-lightbox__close:focus,
.amerin-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
	color: #fff;
}

.amerin-lightbox__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Taustan vieritys pois avattaessa. */
.amerin-lightbox-open,
.amerin-lightbox-open body { overflow: hidden; }

/* Lightboxin kuvateksti: teoksen nimi omalle rivilleen, tiedot sen alle. */
.amerin-lightbox__caption {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.amerin-lightbox__title {
	font-family: var(--amerin-serif);
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}

.amerin-lightbox__text {
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

.amerin-lightbox__title[hidden],
.amerin-lightbox__text[hidden] { display: none; }

/* ------------------------------------------------------------------ logo */

/*
 * Logo korvaa sivuston nimen ylätunnisteessa (WordPressin oma sivustotunnus,
 * asetettavissa Ulkoasu → Mukauta → Sivuston tunnus).
 *
 * Alkuperäinen tiedosto on 500 × 86, mikä kasvattaisi ylätunnisteen 138 →
 * 183 pikseliin. Korkeus rajataan joustavasti, jotta ylätunniste pysyy
 * entisen korkuisena ja logo mahtuu kapealla näytöllä valikkopainikkeen
 * viereen.
 */
.custom-logo-link {
	display: block;
	line-height: 0;
}

.custom-logo {
	display: block;
	width: auto;
	height: clamp(34px, 5vw, 56px);
	max-width: 100%;
	/* Optinen nosto vaakavalikon rinnalla. transform ei muuta asettelua eikä
	   ylätunnisteen korkeutta — klikkausala seuraa mukana. */
	transform: translateY(-11px);
}

/*
 * Ylätunniste samaan linjaan sisällön kanssa.
 *
 * North käyttää ylätunnisteessa 1040 px:n containeria, kun osioiden sisältö
 * on 1180 px:n palstassa sivun omalla reunuksella. Logo jäi siksi 90 px
 * leipätekstin oikealle puolelle 1440 px:llä ja 20–31 px sen vasemmalle
 * puolelle kapeammilla näytöillä.
 *
 * Leveys lasketaan samasta geometriasta kuin osioissa: 1180 px + reunukset
 * molemmin puolin. Näin logon vasen reuna osuu leipätekstin vasempaan
 * reunaan joka leveydellä.
 */
#masthead .container {
	width: 100%;
	max-width: calc(1180px + 2 * var(--amerin-gutter));
	padding-inline: var(--amerin-gutter);
}

/*
 * Tekstivaraus: alla olevat .site-title-säännöt jäävät voimaan, jos
 * sivustotunnus joskus poistetaan — silloin North palaa nimeen tekstinä.
 */

/* --------------------------------------------------------- maalausväri */

/*
 * Northin oletusmaalausväri on punainen (#c75d5d) säännöllä
 * "#page ::selection". Id-tarkkuuden takia korvaava sääntö tarvitsee saman
 * tarkkuuden. Paletin sininen, valkoinen teksti päällä: kontrasti 6,00:1.
 *
 * Molemmat kirjoitusasut on lueteltava erikseen — ::selection ja
 * ::-moz-selection eivät kelpaa samassa valitsinlistassa, vaan koko sääntö
 * hylättäisiin selaimessa, joka ei tunne toista.
 */
#page ::selection,
::selection {
	background-color: var(--amerin-accent);
	color: #fff;
}

#page ::-moz-selection,
::-moz-selection {
	background-color: var(--amerin-accent);
	color: #fff;
}

/* ------------------------------------------------------------ paspartuu */

/*
 * Kokoelman teokset saavat paperinsävyisen paspartuun: teos näyttää
 * kehystetyltä eikä taustaan liimatulta. Luokka on vain Koivun teoksissa —
 * kirjankansi ja hankkeen markkinointikuva eivät ole kokoelmaa, joten ne
 * erottuvat myös ilman kehystä.
 *
 * Hiusviivareunus on välttämätön: Säätiö- ja Yhteystiedot-osioiden pohja on
 * sama paperinsävy kuin paspartuu, jolloin kehys jäisi ilman reunusta
 * kokonaan näkymättömiin. Sinisellä pohjalla (Hallitus) reunus lukee
 * kehyksen ulkoreunana.
 *
 * Vain --tall kasvattaa maksimileveyttään: sen koko on tarkka arvo, jonka
 * pitää säilyä. Leveissä kuvissa paspartuu jää palstan sisään, jolloin teos
 * kapenee kehyksen verran — se on oikein, sillä palstan leveys on annettu.
 */
.amerin-figure--mounted {
	--amerin-mount: clamp(10px, 1.4vw, 18px);
}

.amerin-figure--mounted .amerin-figure__zoom {
	padding: var(--amerin-mount);
	background: var(--amerin-paper);
	border: 1px solid rgba(26, 24, 21, 0.12);
	border-radius: 2px;
}

/* ------------------------------------------- yhteystiedot: tumma osio */

/*
 * Yhteystiedot käyttää samaa tummaa sinistä ja liukuväriä kuin alatunniste,
 * mutta ilman aaltokuviota. Sivu päättyy siis yhtenäiseen tummaan alueeseen:
 * yhteystiedot ja alatunniste luetaan yhdeksi lopetukseksi.
 *
 * Liukuväri on sama 165° kuin alatunnisteessa, joten sävy jatkuu osiosta
 * alatunnisteeseen ilman näkyvää katkoa.
 *
 * Tekstivärit tummalle pohjalle (mitattu liukuvärin vaaleampaa päätä
 * #0A4160 vasten, joka on huonoin tapaus):
 *   valkoinen 10,84:1 · vaimennettu #D4D8DA 7,55:1 · keltainen linkki 5,83:1
 */
.amerin-section--dark {
	background-color: var(--amerin-hero-dark);
	/*
	 * Perussuunta on tummasta vaaleaan: tumma osio päättyy vaaleampaan
	 * sävyyn, jolloin se liukuu pehmeästi seuraavaan vaaleaan osioon.
	 *
	 * Kulma on pystysuora (to bottom), ei 165° kuten herossa. Kallistettu
	 * akseli projisoituu eri tavalla eri korkuisiin elementteihin, jolloin
	 * sävy kahden osion yhteisellä reunalla erosi leveyssuunnassa jopa 30
	 * yksikköä. Pystysuorana reunan sävy on sama koko leveydeltä.
	 */
	background-image: linear-gradient(to bottom, #04212F 0%, #062F44 45%, #0A4160 100%);
	color: #fff;
}

.entry-content .amerin-section--dark .amerin-section__title,
.amerin-section--dark .entry-content h2,
.amerin-section--dark .entry-content h3 { color: #fff; }

.entry-content .amerin-section--dark p,
.entry-content .amerin-section--dark li,
.entry-content .amerin-section--dark address { color: #fff; }

.entry-content .amerin-section--dark .amerin-section__eyebrow,
.entry-content .amerin-section--dark .amerin-contact__label,
.entry-content .amerin-section--dark figcaption { color: #D4D8DA; }

/* Linkit keltaisella, kuten alatunnisteessa. */
.entry-content .amerin-section--dark a,
.entry-content .amerin-section--dark a:visited { color: var(--amerin-yellow); }

.entry-content .amerin-section--dark a:hover,
.entry-content .amerin-section--dark a:focus { color: #fff; }

.amerin-section--dark .amerin-figure__zoom:focus-visible {
	outline-color: var(--amerin-yellow);
}

/*
 * Alatunnisteen 30 px:n ylämarginaali pois.
 *
 * North erottaa alatunnisteen sisällöstä marginaalilla. Kun sitä edeltävä
 * osio oli vaalea, rako ei erottunut. Nyt Yhteystiedot on tumma ja
 * alatunniste tumma, joten väliin jäi vaalea raita.
 */
#colophon { margin-top: 0; }

/*
 * Alatunnisteeseen rajautuva tumma osio kulkee päinvastoin: se päättyy
 * tummimpaan sävyyn, josta alatunniste jatkaa. Näin sivun loppu on yksi
 * yhtenäinen liike eikä osion ja alatunnisteen väliin jää saumaa.
 */
.amerin-section--dark-footer {
	background-image: linear-gradient(to bottom, #0A4160 0%, #062F44 55%, #04212F 100%);
}

/* ------------------------------------------- väljempi osio vähällä sisällöllä */

/*
 * Vähäsisältöinen osio jäisi muihin verrattuna kääpiöksi (460 px, kun muut
 * ovat 744–2960 px). Vähimmäiskorkeus nostaa sen samaan mittaluokkaan.
 *
 * Arvo on sidottu leveyteen eikä korkeuteen (vw, ei vh): kapealla näytöllä
 * sisältö rivittyy jo valmiiksi korkeammaksi, joten siellä ei tarvita
 * lisätilaa — 420 px:n alaraja vastaa suunnilleen nykyistä mobiilikorkeutta.
 *
 * Sisältö keskitetään pystysuunnassa, jotta lisätila jakautuu ylä- ja
 * alapuolelle eikä jää tyhjäksi kaistaleeksi tekstin alle.
 */
.amerin-section--roomy {
	min-height: clamp(420px, 46vw, 620px);
	display: flex;
	align-items: center;
}

@media (max-width: 900px) {
	}

/* ------------------------------------- kaksipalstaiset rivit (Page Builder) */

/*
 * Kaksipalstaiset osiot rakennetaan nyt Page Builderin omilla soluilla, ei
 * HTML-kääreillä: sisällön voi muokata rakentajassa ilman koodia.
 *
 * Palstat tasataan pystysuunnassa keskelle, jotta lyhyempi tekstipalsta ei jää
 * kuvan yläreunaan kiinni. Page Builder kutistaa solut päällekkäin 900 px:ssä
 * (asetus mobile-width), mikä on sama taitekohta kuin teeman muissa
 * asetteluissa.
 */
.amerin-section > .panel-grid-cell {
	align-self: center;
}

/* Sähköposti ja postiosoite allekkain omassa palstassaan. */
.amerin-contact {
	display: grid;
	gap: 2rem;
}

/*
 * Vuosivälit eivät saa katketa ajatusviivan kohdalta.
 *
 * Selain saa rivittää ajatusviivan jälkeen, jolloin kapealla näytöllä
 * "2023–2026" jakautui muotoon "2023–" / "2026." — luku katkesi keskeltä.
 * nowrap lyhyen jakson ympärillä siirtää koko välin seuraavalle riville
 * eikä estä rivitystä muualta: jos väli ei mahdu, rivi katkeaa sitä
 * edeltävästä välilyönnistä.
 */
.amerin-nowrap {
	white-space: nowrap;
}

/*
 * Mobiilissa logo tasataan valikkopainikkeeseen.
 *
 * Yllä oleva nosto on mitoitettu työpöydän vaakavalikkoon. Kun North vaihtaa
 * hampurilaispainikkeeseen 600 px:ssä, sama nosto jättää logon 13 px
 * painikkeen keskiviivan yläpuolelle. Tässä koossa logo tasataan painikkeen
 * mukaan.
 */
@media (max-width: 600px) {
	.custom-logo {
		transform: translateY(2px);
	}
}