/* TONACJA TEGO DZIAŁU — lód i zmierzch trwający godzinami, bez słońca w kadrze.
   Grunt dookoła kolumny #080c14. Kolumna od #131d2e u góry do #0c1220 u dołu —
   to różnica ośmiu punktów jasności, czyli przejście, które WIDAĆ. Wersja
   poprzednia szła od 4 % do 5 % i była deklaracją przejścia, a nie przejściem.

   ŚWIATŁO: Dzień polarny w połowie zimy, czyli zmierzch trwający godzinami: niebieski, niski, nieruchomy.

   Neutralne — tekst, etykieta, cień, poświata — mają odcień tego materiału
   przy NIETKNIĘTEJ jasności, więc każdy kontrast jest dokładnie taki, jak był.
   Wcześniej 22 działy miały bajt w bajt te same 21 wartości barwnych. */

/* Arktyka: dwie warstwy pokrewieństwa.  Prefiks `tarn-`.

   MATERIAŁ: skóra foki, kość, róg, ścięgno, kamień mydlny, lód.
   ŚWIATŁO: dzień polarny w połowie zimy — czyli ZMIERZCH TRWAJĄCY GODZINAMI.
   Niebieskie, równe, bez słońca nad horyzontem i bez cienia rzucanego w bok.

   Dwunasty i ostatni dział amerykański, dwunaste inne światło — i jedyne,
   w którym źródła nie ma w kadrze wcale, bo go tam po prostu nie ma przez
   część roku. Wszystkie poprzednie miały słońce: wysoko, nisko, za liśćmi,
   za mgłą albo za horyzontem na chwilę. Tutaj go nie ma miesiącami.

   BŁĘKIT LODU NALEŻY DO LINII IMIENIA i do niczego innego. To ona jest
   w tym rysunku warstwą drugą — tą, której europejski czytelnik się nie
   spodziewa — więc musi dać się odróżnić od pierwszej jednym spojrzeniem.

   W TYM DZIALE CELOWO NIE MA ŻADNEJ PUSTKI. W filarze amerykańskim pustka
   znaczyła już osiem różnych rzeczy; dziewiąta byłaby manierą, a nie
   ustaleniem. Ten rysunek mówi o dwóch OBECNOŚCIACH, które się nie
   uzgadniają — i arkusz ma tę różnicę utrzymać.

   SZEROKOŚĆ 1520 px i blok wyłamania z układu motywu — jak w całym serwisie. */

.tarn-strona {
	--tlo: #0c1220; --panel: rgba( 16, 22, 34, .84 );
	--obrys: rgba( 195, 189, 176, .30 ); --wlos: rgba( 195, 189, 176, .14 );
	--kosc: #c3bdb0; --kosc-j: #e9e4d8;
	--lod: #3f6f96; --lod-j: #7fb2d6;
	--skora: #6b6158; --skora-j: #9c9288;
	--mydlny: #5b6a6a; --mydlny-j: #92a3a3;
	--cien: #121721; --cien-j: #4e545f;
	--etyk: #94a1b3;
	--tekst: #a2b1c3; --tekst-slaby: #8c97a6; --tekst-mocny: #cfd8e3;
	--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;

	position: relative; max-width: 1520px; margin: 0 auto; padding: 0 40px 90px;
	color: var( --tekst ); font: 300 17px var( --serif );
	background:
		/* Dzień polarny w połowie zimy, czyli zmierzch trwający godzinami: niebieski, niski, nieruchomy. */
		radial-gradient( 1300px 560px at 18% 88%, rgba( 96, 140, 196, .09 ), transparent 64% ),
		radial-gradient( 1100px 780px at 82% 12%, rgba( 195, 189, 176, .07 ), transparent 70% ),
		linear-gradient( 176deg, #131d2e 0%, #0f1725 46%, #0c1220 100% );
	overflow-x: clip;
}
.tarn-strona *, .tarn-strona *::before, .tarn-strona *::after { box-sizing: border-box; }

/* WYŁAMANIE Z UKŁADU MOTYWU. Bez tego dział stoi w kolumnie 645 px. */
body:has( .tarn-strona ) .wp-site-blocks > header, body:has( .tarn-strona ) header.wp-block-template-part,
body:has( .tarn-strona ) .wp-site-blocks > footer, body:has( .tarn-strona ) footer.wp-block-template-part,
body:has( .tarn-strona ) .wp-block-post-title { display: none !important; }
body:has( .tarn-strona ) .wp-site-blocks, body:has( .tarn-strona ) .wp-block-group,
body:has( .tarn-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tarn-strona ) .wp-block-post-content > *, body:has( .tarn-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tarn-strona ) {
	background:
		linear-gradient( 180deg, rgba( 4, 10, 17, .72 ), rgba( 4, 10, 17, .94 ) ),
		url( 'gfx/tla/tlo-hero.webp' ) center top / cover fixed,
		#071019;
}
body:has( .tarn-strona ) .wp-block-post-content > .tarn-strona, body:has( .tarn-strona ) .entry-content > .tarn-strona,
.tarn-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tarn-strona button { font-family: inherit; }

/* ══════════════  UWERTURA  ══════════════ */

.tarn-hero {
	position: relative; margin: 26px 0 0; padding: 62px 44px 54px; border-radius: 28px;
	border: 1px solid var( --wlos ); overflow: hidden;
	background:
		radial-gradient( 900px 420px at 50% 0%, rgba( 96, 140, 196, .13 ), transparent 70% ),
		linear-gradient( 168deg, #0f1827, #070b13 );
}
/* Uwertura z grafiką nosi `tarn-sekcja--tlo tarn-hero`, a NIE `tarn-hero--tlo`. */
.tarn-sekcja--tlo::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var( --tlo ) 50% 50% / cover no-repeat; opacity: .92;
}
.tarn-sekcja--tlo::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient( 900px 520px at 16% 16%, rgba( 8, 10, 13, .66 ), transparent 76% ),
		linear-gradient( 180deg, rgba( 8, 10, 13, .16 ), rgba( 8, 10, 13, .5 ) );
}
.tarn-hero__nad {
	margin: 0 0 16px; font: 400 11px var( --sans ); letter-spacing: .3em; text-transform: uppercase;
	color: var( --etyk );
}
.tarn-hero__tytul {
	margin: 0 0 26px; max-width: 20ch;
	font: 300 clamp( 40px, 5.2vw, 72px ) / 1.07 var( --serif ); color: var( --tekst-mocny );
	text-shadow: 0 0 60px rgba( 96, 140, 196, .2 );
}

/* ══════════════  SEKCJE  ══════════════ */

.tarn-sekcja { position: relative; margin: 84px 0 0; padding: 0; }
.tarn-sekcja--tlo { padding: 54px 40px 48px; border-radius: 26px; border: 1px solid var( --wlos ); overflow: hidden; isolation: isolate; }
.tarn-sekcja__nad {
	margin: 0 0 12px; font: 400 11px var( --sans ); letter-spacing: .28em; text-transform: uppercase;
	color: var( --etyk );
}
.tarn-sekcja__tytul {
	margin: 0 0 16px; max-width: 26ch;
	font: 300 clamp( 30px, 3.4vw, 46px ) / 1.12 var( --serif ); color: var( --tekst-mocny );
	text-shadow: 0 0 40px rgba( 96, 140, 196, .17 );
}
.tarn-sekcja__lead { margin: 0 0 32px; max-width: 78ch; font-size: 19px; line-height: 1.66; color: var( --tekst ); }

.tarn-przerywnik { display: block; width: 100%; height: 44px; margin: 66px 0 0; color: var( --kosc ); opacity: .45; }

/* ══════════════  DWIE WARSTWY POKREWIEŃSTWA  ══════════════
   Rysunek dostaje JAWNĄ szerokość, bo SVG w siatce kurczy się do 300 px,
   a wtedy dwie warstwy strzałek zlewają się w jedną plątaninę — a cała
   wypowiedź polega na tym, że da się je rozróżnić. */

.tarn-imie {
	width: 100%; max-width: 1200px; margin: 8px auto 0; padding: 28px;
	position: relative; isolation: isolate; overflow: hidden; border-radius: 28px;
	border: 1px solid rgba( 195, 189, 176, .28 );
	background:
		radial-gradient( 500px 320px at 18% 74%, rgba( 127, 178, 214, .16 ), transparent 74% ),
		linear-gradient( 156deg, rgba( 8, 17, 29, .76 ), rgba( 8, 14, 24, .90) ),
		url( 'gfx/tla/tlo-imie.webp' ) center / cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba( 127, 178, 214, .06 ), 0 24px 56px rgba( 0, 0, 0, .22 );
}
.tarn-imie::before {
	content: ''; position: absolute; inset: 15px; z-index: -1; pointer-events: none;
	border: 1px solid rgba( 195, 189, 176, .16 ); border-radius: 19px;
	background: radial-gradient( circle at 20% 20%, rgba( 233, 228, 216, .28 ) 0 1px, transparent 1.5px ) 0 0 / 22px 22px;
	opacity: .34;
}
.tarn-imie__svg { display: block; width: 100%; height: auto; overflow: visible; position: relative; z-index: 1; filter: drop-shadow( 0 12px 28px rgba( 0, 0, 0, .22 ) ); }

.tarn-warstwa { cursor: pointer; outline: none; }

/* Każda z trzech warstw ma własną regułę, żeby żadna nie została niema
   po przemianowaniu. Kolejność rysowania ustala JS; te klasy mówią,
   która warstwa jest która. */
.tarn-warstwa--urodzenie { isolation: isolate; }
.tarn-warstwa--imie { isolation: isolate; }
.tarn-warstwa--mowi { isolation: isolate; }
.tarn-osoba__kolo { fill: rgba( 10, 21, 33, .72 ); stroke: var( --kosc ); stroke-width: 1.7; filter: drop-shadow( 0 0 14px rgba( 233, 228, 216, .15 ) ); }
.tarn-osoba__nazwa { fill: var( --kosc-j ); font: 300 21px var( --serif ); text-anchor: middle; }
.tarn-osoba__pod { fill: var( --tekst-slaby ); font: 400 9.5px var( --sans ); letter-spacing: .18em; text-transform: uppercase; text-anchor: middle; }
/* Zmarła — kreska przerywana, bo jej już nie ma, a imię jest. */
.tarn-osoba--zmarla .tarn-osoba__kolo { stroke-dasharray: 5 5; opacity: .8; }

/* WARSTWA PIERWSZA: urodzenie. Zwykła, pionowa, znana. */
.tarn-urodzenie { stroke: var( --kosc ); stroke-width: 2; opacity: .75; }
.tarn-urodzenie__grot { fill: var( --kosc ); opacity: .85; }
.tarn-strzalka__podpis { fill: var( --tekst-slaby ); font: 400 10px var( --sans ); letter-spacing: .16em; text-transform: uppercase; text-anchor: middle; }

/* WARSTWA DRUGA: imię. Błękit lodu i nic więcej w tej barwie na stronie. */
.tarn-atiq { stroke: var( --lod-j ); stroke-width: 2.6; opacity: .9; stroke-dasharray: 9 6; }
.tarn-atiq__grot { fill: var( --lod-j ); }
.tarn-atiq__podpis { fill: var( --lod-j ); font: 400 10.5px var( --sans ); letter-spacing: .16em; text-transform: uppercase; text-anchor: middle; }

/* TEZA: zwracanie się, które przeczy warstwie pierwszej. */
.tarn-mowi { fill: none; stroke: var( --mydlny-j ); stroke-width: 2; opacity: .9; }
.tarn-mowi__grot { fill: var( --mydlny-j ); }
.tarn-mowi__podpis { fill: var( --mydlny-j ); font: 400 15px var( --serif ); text-anchor: middle; }

.tarn-warstwa:hover .tarn-urodzenie, .tarn-warstwa:hover .tarn-atiq, .tarn-warstwa:hover .tarn-mowi { opacity: 1; }
.tarn-warstwa.jest-wybrana .tarn-urodzenie, .tarn-warstwa.jest-wybrana .tarn-atiq { stroke-width: 3.6; opacity: 1; }
.tarn-warstwa.jest-wybrana .tarn-mowi { stroke-width: 3.4; opacity: 1; }

.tarn-imie__wynik { fill: var( --tekst-mocny ); font: 400 17px var( --serif ); text-anchor: middle; }
.tarn-imie__nota { fill: var( --tekst-slaby ); font: 300 13px var( --serif ); text-anchor: middle; }
.tarn-imie__nota--druga { fill: var( --lod-j ); opacity: .95; }

.tarn-wybor { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px auto 0; max-width: 960px; }
.tarn-wybor button {
	padding: 9px 18px; border-radius: 999px; cursor: pointer;
	border: 1px solid var( --wlos ); background: rgba( 195, 189, 176, .05 );
	color: var( --tekst ); font: 400 14.5px var( --serif );
}
.tarn-wybor button:hover { background: rgba( 233, 228, 216, .1 ); color: var( --tekst-mocny ); }
.tarn-wybor button.jest-wybrany { border-color: var( --lod-j ); color: var( --tekst-mocny ); background: rgba( 63, 111, 150, .24 ); }

.tarn-imie__opis {
	max-width: 78ch; margin: 24px auto 0; padding: 30px 34px;
	border: 1px solid var( --wlos ); border-radius: 22px; background: var( --panel );
	position: relative; z-index: 1; box-shadow: 0 14px 32px rgba( 0, 0, 0, .20 );
}
.tarn-imie__opis h3 { margin: 0 0 6px; font: 300 30px var( --serif ); color: var( --tekst-mocny ); text-shadow: 0 0 32px rgba( 233, 228, 216, .16 ); }
.tarn-imie__opis p { margin: 0 0 14px; font-size: 18px; line-height: 1.74; }
.tarn-imie__opis p:last-child { margin-bottom: 0; }
.tarn-imie__kiedy { font: 400 11px var( --sans ) !important; letter-spacing: .2em; text-transform: uppercase; color: var( --mydlny-j ); margin-bottom: 8px !important; }
.tarn-imie__krotko { color: var( --tekst-mocny ); font-style: italic; }
.tarn-imie__pole, .tarn-imie__zrodlo { font-size: 16px !important; padding: 10px 14px; border-radius: 10px; }
.tarn-imie__pole { background: rgba( 63, 111, 150, .22 ); color: var( --tekst-mocny ); }
.tarn-imie__zrodlo { background: rgba( 195, 189, 176, .07 ); color: var( --tekst-slaby ); }
.tarn-imie__pole b, .tarn-imie__zrodlo b { display: block; font: 400 10.5px var( --sans ); letter-spacing: .22em; text-transform: uppercase; color: var( --etyk ); margin-bottom: 4px; }

/* ══════════════  SIATKI KAFLI  ══════════════ */

.tarn-siatka-kafli { display: grid; gap: 22px; grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); align-items: stretch; }

.tarn-kafel {
	position: relative; padding: 26px 26px 24px; border-radius: 20px;
	border: 1px solid var( --wlos ); background: linear-gradient( 154deg, rgba( 20, 33, 48, .94 ), rgba( 8, 15, 25, .92 ) ); cursor: pointer;
	overflow: hidden; box-shadow: 0 18px 42px rgba( 0, 0, 0, .18 );
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tarn-kafel:hover, .tarn-kafel:focus-visible { border-color: var( --lod-j ); transform: translateY( -4px ); box-shadow: 0 24px 54px rgba( 0, 0, 0, .30 ), 0 0 30px rgba( 87, 148, 193, .12 ); }
.tarn-kafel h3 { margin: 0 0 8px; font: 300 25px / 1.18 var( --serif ); color: var( --tekst-mocny ); text-shadow: 0 0 28px rgba( 96, 140, 196, .14 ); }
.tarn-kafel p { margin: 0; font-size: 17px; line-height: 1.66; }
.tarn-kafel__nad {
	display: block; margin: 0 0 10px; font: 400 10.5px var( --sans ); letter-spacing: .22em;
	text-transform: uppercase; color: var( --etyk );
}
.tarn-kafel__nad i { font-style: normal; margin-right: 8px; color: var( --lod-j ); }

.tarn-foto { margin: -26px -26px 18px; border-radius: 19px 19px 14px 14px; overflow: hidden; background: #0a121d; }
.tarn-foto img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; transition: transform .5s ease; }
.tarn-kafel:hover .tarn-foto img, .tarn-kafel:focus-visible .tarn-foto img { transform: scale( 1.045 ); }

/* ══════════════  LICZNIK  ══════════════ */

.tarn-liczby { display: grid; gap: 20px; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); align-items: start; }
.tarn-karta { padding: 28px 24px; border-radius: 20px; border: 1px solid var( --wlos ); background: var( --panel ); }
.tarn-karta__ile { display: block;
	margin: 0 0 10px; font: 300 clamp( 36px, 3.8vw, 54px ) / 1 var( --serif ); color: var( --lod-j );
	text-shadow: 0 0 34px rgba( 127, 178, 214, .22 );
}
.tarn-karta__co { margin: 0 0 10px; font: 400 12px var( --sans ); letter-spacing: .14em; text-transform: uppercase; color: var( --etyk ); line-height: 1.5; }
.tarn-karta__krotko { margin: 0; font-size: 16.5px; line-height: 1.64; }

/* ══════════════  OKNO  ══════════════ */

.tarn-okno {
	max-width: 82ch; padding: 30px 34px; border-radius: 20px;
	border: 1px solid var( --wlos ); background:
		radial-gradient( 760px 220px at 50% 0%, rgba( 96, 140, 196, .10 ), transparent 72% ),
		linear-gradient( 172deg, rgba( 15, 19, 27, .58 ), rgba( 9, 14, 23, .86 ) );
}
.tarn-okno p { margin: 0; font-size: 19px; line-height: 1.74; color: var( --tekst ); }

/* POLA OPISU W KAFLU. Wspólny pomocnik modułu nadaje im klasę `tarn-pole`
   i nie dzielą jej z niczym w rysunku — patrz przypadek skandynawski. */
.tarn-pole { margin: 0 0 14px !important; padding: 12px 16px; border-radius: 12px; font-size: 16px !important; }
.tarn-pole b { display: block; font: 400 10.5px var( --sans ); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 5px; }
.tarn-pole--zrodlo { background: rgba( 96, 140, 196, .09 ); color: var( --tekst-slaby ); }
.tarn-pole--zrodlo b { color: var( --cien-j ); }
.tarn-pole--zamiast { background: rgba( 63, 111, 150, .17 ); color: var( --tekst-mocny ); }
.tarn-pole--zamiast b { color: var( --lod-j ); }

/* ══════════════  WĄSKIE EKRANY  ══════════════ */

@media ( max-width: 900px ) {
	.tarn-strona { padding: 0 20px 60px; }
	.tarn-hero { padding: 44px 24px 38px; }
	.tarn-sekcja { margin-top: 60px; }
	.tarn-sekcja--tlo { padding: 36px 22px 32px; }
	.tarn-imie__opis { padding: 22px 20px; }
	.tarn-siatka-kafli { grid-template-columns: 1fr; }
	/* Układu osób NIE przestawiamy: niezgodność widać tylko wtedy, gdy obie
	   warstwy strzałek biegną po tym samym drzewie. Rosną podpisy. */
	.tarn-osoba__nazwa { font-size: 28px; }
	.tarn-osoba__pod { font-size: 12px; letter-spacing: .06em; }
	.tarn-strzalka__podpis, .tarn-atiq__podpis { font-size: 13px; letter-spacing: .06em; }
	.tarn-mowi__podpis { font-size: 20px; }
	.tarn-imie__wynik { font-size: 24px; }
	.tarn-imie__nota { font-size: 16px; }
}

/* GRUNT CAŁEJ STRONY. Motyw daje `body` czerń, a kolumna działu ma 1520 px — na
   ekranie 2560 px zostawało po ~470 px czarnego pasa z każdej strony.
   `body:has()` ma swoistość 0,2,1 wobec `body` 0,0,1, więc wygrywa
   z motywem bez `!important`.
   NIE robimy tego pseudoelementem: `background: inherit` na `::after`
   dziedziczy też ZDJĘCIE sekcji, a `cover` przelicza się na szerokości
   pseudoelementu — wychodzą dwa te same zdjęcia w różnych skalach.
   Sprawdzone i cofnięte 2026-09-12. */
body:has( .tarn-strona ) {
	background-color: #080c14;
	background-image:
		radial-gradient( 1900px 1200px at 18% 88%, rgba( 96, 140, 196, .21 ), transparent 66% ),
		linear-gradient( 180deg, #0b101b, #080c14 62% );
	background-attachment: fixed;
}


/* OKNO UWERTURY WRACA DO BARW DZIAŁU.
   Zmierzone na żywej stronie, dwie reguły z arkusza wspólnego biją moduł:
     `.zd-okno`                 → granat modala rgba( 16, 12, 40, .97 ), swoistość 0,1,0
     `[class*="-hero"] .zd-okno` → płaska pobiałka rgba( 255, 255, 255, .027 ), 0,2,0
   Druga to MÓJ WŁASNY blok dopisany do `zdobienia.css`, kiedy poprawiałem
   układ uwertury — i to ona sprawiała, że okno tezy wyglądało identycznie
   na wszystkich stronach naraz. Arkusz wspólny ładuje się PO module, więc
   przy równej swoistości wygrywał. Trzy człony dają 0,3,0 i sprawę zamykają,
   bez ruszania pliku wspólnego, który należy do sesji Grafiki. */
.tarn-strona .tarn-hero .tarn-okno.zd-okno,
.tarn-strona .tarn-hero .zd-okno.zd-okno,
.tarn-strona .tarn-hero .tarn-okno.tarn-okno {
	background:
		radial-gradient( 760px 220px at 50% 0%, rgba( 96, 140, 196, .10 ), transparent 72% ),
		linear-gradient( 172deg, #0e1625, #070a12 );
}

/* OKNO TEZY — przejście tonalne.
   Wspólna warstwa daje mu `background: rgba( 255, 255, 255, .028 )`
   regułą `[class*="-hero"] .zd-okno` o swoistości 0,2,0 — jedną płaską
   pobiałką dla wszystkich działów naraz. Trzy człony dają 0,3,0
   i wygrywają BEZ `!important`, więc pliku wspólnego nie ruszamy.
   Barwy są z palety TEGO działu: `--tlo` na dole, akcent gruntu u góry. */
.tarn-strona .tarn-hero .tarn-okno.zd-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 16, 22, 34, .10 ), transparent 70% ),
		linear-gradient( 168deg, #171d2b, #0c1220 );
}


/* ===== POPRAWKA WARSTW 2026-09-13 (przywrocona) =====
   `z-index: -1` na pseudoelementach tla kladzie ZDJECIE POD wlasne,
   nieprzezroczyste tlo sekcji - zadne tlo nie jest wtedy widoczne.
   Poprawka byla juz wgrana 2026-09-12 i zostala zgubiona przy
   nadpisaniu arkusza 2026-09-13 o 02:25. NIE KASOWAC PRZY DEPLOYU. */
.tarn-sekcja--tlo::before,
.tarn-sekcja--tlo::after { z-index: 0; }
.tarn-sekcja--tlo > * { position: relative; z-index: 1; }