/* KOLORYT WŁASNY TEGO DZIAŁU — noc polarna, lód i żar w namiocie.
   Grunt #060a10: nie szarość, tylko granat nocy polarnej, w której śnieg
   odbija resztki światła. Na nim trzy źródła barwy, które w tym krajobrazie
   naprawę występują: lód i niebo (zimne, błękitne), zorza (zielona) oraz
   ogień i skóra wewnątrz namiotu (bursztyn, kość, ochra).

   ŚWIATŁO: niskie i długie — słońce stoi tu tuż nad widnokręgiem albo nie
   wschodzi wcale, więc cień jest rozciągnięty, a nie ostry. Odróżnia ten
   dział od bliskowschodnich, gdzie cień ma twardy brzeg.

   ⛔ --ton, --ton2, --grunt i --grunt-d MUSZĄ BYĆ TRÓJKAMI HSL bez hsl().
   Heks w tym miejscu unieważnia CAŁE tło sekcji, bez jednego błędu w konsoli,
   i cały dział wygląda na szary. Zmierzone przy Beneluksie.

   SZEROKOŚĆ 1520 px i wyłamanie z układu motywu jak w każdym dziale. */

.tgp-strona {
	--tlo: #060a10; --panel: rgba( 12, 20, 32, .84 );
	--obrys: rgba( 122, 186, 214, .30 ); --wlos: rgba( 122, 186, 214, .14 );
	--jadeit: #7abad6; --jadeit-j: #a9dcf0;
	--miedz: #b8703c; --miedz-j: #e09a5e;
	--kukurydza: #d9c07a; --kukurydza-j: #f2e2ac;
	--koszenila: #8e4550; --koszenila-j: #bd7078;
	--obsydian: #16202c; --obsydian-j: #3a4c60;
	--etyk: #93aec4;
	--tekst: #a6bccd; --tekst-slaby: #7b8fa2; --tekst-mocny: #e6f0f7;
	--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:
		radial-gradient( 1200px 640px at 50% -10%, rgba( 122, 186, 214, .16 ), transparent 72% ),
		radial-gradient( 900px 520px at 86% 40%, rgba( 184, 112, 60, .11 ), transparent 74% ),
		radial-gradient( 760px 440px at 8% 78%, rgba( 92, 186, 148, .09 ), transparent 74% ),
		linear-gradient( 180deg, #0b1320, var( --tlo ) 48% );
	overflow-x: clip;
}
.tgp-strona *, .tgp-strona *::before, .tgp-strona *::after { box-sizing: border-box; }

/* WYŁAMANIE Z UKŁADU MOTYWU. Bez tego dział stoi w kolumnie 645 px. */
body:has( .tgp-strona ) .wp-site-blocks > header, body:has( .tgp-strona ) header.wp-block-template-part,
body:has( .tgp-strona ) .wp-site-blocks > footer, body:has( .tgp-strona ) footer.wp-block-template-part,
body:has( .tgp-strona ) .wp-block-post-title { display: none !important; }
body:has( .tgp-strona ) .wp-site-blocks, body:has( .tgp-strona ) .wp-block-group,
body:has( .tgp-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tgp-strona ) .wp-block-post-content > *, body:has( .tgp-strona ) .entry-content > * {
	max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
body:has( .tgp-strona ) {
	background-color: #060a0b;
	background-image:
		radial-gradient( 1400px 800px at 50% 0%, rgba( 92, 168, 160, .07 ), transparent 66% ),
		radial-gradient( 1000px 700px at 4% 30%, rgba( 176, 114, 66, .05 ), transparent 62% ),
		radial-gradient( 1100px 700px at 96% 70%, rgba( 157, 59, 70, .05 ), transparent 62% );
	background-repeat: no-repeat; background-attachment: fixed;
}

/* ══════════════  UWERTURA  ══════════════ */
.tgp-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 22% 0%, rgba( 143, 208, 200, .10 ), transparent 70% ),
		linear-gradient( 180deg, rgba( 16, 30, 32, .9 ), rgba( 7, 13, 14, .96 ) );
}
.tgp-sekcja--tlo::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var( --tlo ) 50% 50% / cover no-repeat; opacity: .92;
}
.tgp-sekcja--tlo::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient( 900px 520px at 16% 16%, rgba( 6, 10, 11, .70 ), transparent 76% ),
		linear-gradient( 180deg, rgba( 6, 10, 11, .14 ), rgba( 6, 10, 11, .5 ) );
}
.tgp-hero__nad {
	margin: 0 0 14px; font: 400 11px var( --sans ); letter-spacing: .26em;
	text-transform: uppercase; color: var( --etyk );
}
.tgp-hero__tytul {
	margin: 0 0 22px; font: 300 clamp( 42px, 3.6vw, 66px ) var( --serif );
	line-height: 1.06; color: var( --tekst-mocny ); text-wrap: balance;
}
/* Okno tezy: przejście tonalne z palety TEGO działu. Dublowana klasa daje
   0,4,0 i bije obie reguły wspólnej warstwy bez `!important`. */
.tgp-strona .tgp-hero .tgp-okno.zd-okno,
.tgp-strona .tgp-hero .zd-okno.zd-okno,
.tgp-strona .tgp-hero .tgp-okno.tgp-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 92, 168, 160, .10 ), transparent 70% ),
		linear-gradient( 168deg, #121818, #070d0e );
}

/* ══════════════  SEKCJE  ══════════════ */
.tgp-sekcja { position: relative; margin-top: 78px; }
.tgp-sekcja--tlo { padding: 46px 34px 40px; border-radius: 26px; overflow: hidden; }
.tgp-sekcja__nad {
	margin: 0 0 10px; font: 400 11px var( --sans ); letter-spacing: .24em;
	text-transform: uppercase; color: var( --etyk );
}
.tgp-sekcja__tytul {
	margin: 0 0 16px; font: 300 clamp( 30px, 2.4vw, 44px ) var( --serif );
	line-height: 1.14; color: var( --tekst-mocny ); text-wrap: balance;
	text-shadow: 0 0 32px rgba( 92, 168, 160, .18 );
}
.tgp-sekcja__lead { margin: 0 0 30px; max-width: 78ch; font-size: 18px; line-height: 1.78; }

/* ══════════════  KAFLE  ══════════════ */
.tgp-siatka { display: grid; gap: 22px; grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ); align-items: start; }
.tgp-kafel {
	position: relative; padding: 26px 26px 24px; border-radius: 20px;
	border: 1px solid var( --wlos ); background: var( --panel ); cursor: pointer;
	transition: border-color .2s, transform .2s;
}
.tgp-kafel:hover, .tgp-kafel:focus-visible { border-color: var( --obrys ); transform: translateY( -2px ); }
.tgp-kafel__foto {
	display: block; margin: -26px -26px 18px; overflow: hidden;
	border-radius: 20px 20px 0 0; aspect-ratio: 8 / 5;
}
.tgp-kafel__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgp-kafel__nad {
	display: flex; align-items: center; gap: 7px; margin: 0 0 9px;
	font: 400 10.5px var( --sans ); letter-spacing: .2em; text-transform: uppercase;
	color: var( --etyk );
}
.tgp-kafel__nad i { font-style: normal; color: var( --jadeit ); }
.tgp-kafel h3 { margin: 0 0 10px; font: 400 21px var( --serif ); line-height: 1.26; color: var( --tekst-mocny ); }
.tgp-kafel p { margin: 0; font-size: 16.5px; line-height: 1.66; }

.tgp-pole { margin: 0 0 14px; padding: 12px 15px; border-radius: 12px; font-size: 15.5px; line-height: 1.6; }
.tgp-pole b { display: block; margin-bottom: 4px; font: 400 10.5px var( --sans ); letter-spacing: .2em; text-transform: uppercase; }
.tgp-pole--zrodlo { background: rgba( 92, 168, 160, .08 ); border: 1px solid var( --wlos ); }
.tgp-pole--zrodlo b { color: var( --jadeit-j ); }
.tgp-pole--zamiast { background: rgba( 157, 59, 70, .10 ); border: 1px solid rgba( 157, 59, 70, .26 ); }
.tgp-pole--zamiast b { color: var( --koszenila-j ); }

.tgp-pow { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var( --wlos ); }
.tgp-pow__tytul { margin: 0 0 12px !important; font: 400 10.5px var( --sans ) !important; letter-spacing: .22em; text-transform: uppercase; color: var( --etyk ); }
.tgp-pow ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tgp-pow a {
	display: block; padding: 11px 14px; border-radius: 12px;
	border: 1px solid var( --wlos ); background: rgba( 92, 168, 160, .06 );
	text-decoration: none; color: var( --tekst ); transition: border-color .2s, background .2s, transform .2s;
}
.tgp-pow a:hover { border-color: var( --obrys ); background: rgba( 92, 168, 160, .12 ); transform: translateX( 3px ); }
.tgp-pow a b { display: block; font: 400 18px var( --serif ); color: var( --tekst-mocny ); }
.tgp-pow a span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.55; color: var( --tekst-slaby ); }

/* ══════════════  LICZNIK  ══════════════ */
.tgp-liczby { display: grid; gap: 20px; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); align-items: start; }
.tgp-karta__ile { display: block; margin: 0 0 10px; font: 300 44px var( --serif ); line-height: 1; color: var( --kukurydza-j ); }
.tgp-karta__co { margin: 0 0 10px; font: 400 12px var( --sans ); letter-spacing: .14em; text-transform: uppercase; color: var( --etyk ); line-height: 1.5; }
.tgp-karta__krotko { margin: 0; font-size: 16.5px; line-height: 1.64; }

/* ══════════════  MAPA  ══════════════ */
.tgp-mapa { display: grid; grid-template-columns: minmax( 0, 1.55fr ) minmax( 0, .45fr ); gap: 24px 34px; align-items: start; }
.tgp-mapa__zakladki { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.tgp-mapa__zakladka {
	padding: 9px 16px; border-radius: 999px; cursor: pointer;
	border: 1px solid var( --wlos ); background: transparent;
	color: var( --tekst-slaby ); font: 400 14px var( --sans ); letter-spacing: .04em;
	transition: color .2s, border-color .2s, background .2s;
}
.tgp-mapa__zakladka:hover { color: var( --tekst-mocny ); border-color: var( --obrys ); }
.tgp-mapa__zakladka[ aria-current="true" ] { color: var( --tlo ); background: var( --jadeit ); border-color: var( --jadeit ); }
.tgp-mapa__rama { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var( --wlos ); background: #040809; min-height: 320px; }
.tgp-mapa__rys { display: block; width: 100%; height: auto; }
.tgp-mapa__czeka, .tgp-mapa__blad { margin: 0; padding: 40px; color: var( --tekst-slaby ); font-size: 15px; }

.tgp-mapa__morze { fill: #040809; }
.tgp-mapa__lad { fill: rgba( 138, 160, 158, .13 ); stroke: none; }
.tgp-mapa__woda { fill: #040809; }
/* Lud dostaje inną barwę niż państwo — to jest cała różnica, którą ta mapa
   pokazuje, i nie może zależeć od podpisu. */
.tgp-mapa__byt {
	fill: rgba( 176, 114, 66, .26 ); stroke: rgba( 176, 114, 66, .50 );
	stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer;
}
.tgp-mapa__byt--lud { fill: rgba( 92, 168, 160, .26 ); stroke: rgba( 143, 208, 200, .55 ); }
.tgp-mapa__byt:hover { fill-opacity: .5; }
.tgp-mapa__byt:focus-visible { outline: 2px solid var( --kukurydza-j ); outline-offset: 2px; }
.tgp-mapa__nazwa {
	fill: rgba( 228, 239, 233, .88 ); font: 400 19px var( --sans ); letter-spacing: .03em;
	paint-order: stroke; stroke: rgba( 4, 8, 9, .85 ); stroke-width: 4.5; pointer-events: none;
}
.tgp-mapa__skala path { fill: none; stroke: rgba( 138, 160, 158, .55 ); stroke-width: 2; }
.tgp-mapa__skala text { fill: rgba( 138, 160, 158, .70 ); font: 400 18px var( --sans ); letter-spacing: .1em; }

.tgp-mapa__kadr { border-left: 2px solid var( --obrys ); padding: 2px 0 2px 18px; }
.tgp-mapa__rok { margin: 0 0 6px !important; font: 400 11px var( --sans ) !important; letter-spacing: .22em; text-transform: uppercase; color: var( --etyk ); }
.tgp-mapa__tytul { margin: 0 0 12px; font: 300 26px var( --serif ); line-height: 1.2; color: var( --tekst-mocny ); }
.tgp-mapa__ile { margin: 0 0 12px; font: 400 17px var( --sans ); color: var( --kukurydza-j ); }
.tgp-mapa__opis { margin: 0; font-size: 16px; line-height: 1.68; color: var( --tekst ); }
.tgp-mapa__ster { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.tgp-mapa__strzalka {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var( --obrys ); background: rgba( 92, 168, 160, .08 );
	color: var( --tekst-mocny ); font-size: 17px; cursor: pointer;
}
.tgp-mapa__strzalka:hover { background: rgba( 92, 168, 160, .16 ); }
.tgp-mapa__suwak { flex: 1 1 auto; accent-color: var( --jadeit ); height: 26px; }
.tgp-mapa__os { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tgp-mapa__znak {
	padding: 5px 11px; border-radius: 999px; cursor: pointer;
	border: 1px solid var( --wlos ); background: transparent;
	color: var( --tekst-slaby ); font: 400 12.5px var( --sans ); letter-spacing: .04em;
}
.tgp-mapa__znak:hover { color: var( --tekst-mocny ); border-color: var( --obrys ); }
.tgp-mapa__znak[ aria-current="true" ] { color: var( --tlo ); background: var( --kukurydza ); border-color: var( --kukurydza ); }
.tgp-mapa__nota { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var( --tekst-slaby ); }
.tgp-mapa__nota b { color: var( --tekst ); font-weight: 400; }

@media ( prefers-reduced-motion: reduce ) { .tgp-kafel, .tgp-pow a { transition: none; } }

/* ══════════════  WĄSKIE EKRANY  ══════════════ */
@media ( max-width: 900px ) {
	.tgp-strona { padding: 0 20px 60px; }
	.tgp-hero { padding: 44px 24px 38px; }
	.tgp-sekcja { margin-top: 60px; }
	.tgp-sekcja--tlo { padding: 36px 22px 32px; }
	.tgp-siatka { grid-template-columns: 1fr; }
	/* Mapa idzie na całą szerokość, pulpit pod nią — obok zostałoby na tekst
	   około 120 px. Napisy muszą urosnąć, bo rysunek skaluje się wtedy do
	   około 350 px i 19 jednostek to 5 px na ekranie. */
	.tgp-mapa { grid-template-columns: 1fr; gap: 18px; }
	.tgp-mapa__kadr { border-left: 0; border-top: 2px solid var( --obrys ); padding: 16px 0 0; }
	.tgp-mapa__nazwa { font-size: 30px; stroke-width: 7; }
	.tgp-mapa__skala text { font-size: 26px; }
	.tgp-mapa__znak { font-size: 11.5px; padding: 4px 8px; }
}


/* ===== 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. */
.tgp-sekcja--tlo::before,
.tgp-sekcja--tlo::after { z-index: 0; }
.tgp-sekcja--tlo > * { position: relative; z-index: 1; }

/* ===== KOLORYT SEKCJI 2026-09-15 =====
   Zarzut: strona szara, brak przejść tonalnych. Zmierzone przed poprawką:
   hero miał poświatę jadeitu o kryciu .10, a sekcje biel o kryciu .024
   na gruncie #070d0e — barwa nie dochodziła do oka.

   Co robi ten blok. Każda sekcja dostaje własny grunt i własne źródło światła,
   dobrane do tego, o czym mówi: lód i wybrzeże na zimno, pustynia Czterech
   Rogów w piaskowiec i miedź, Mezoameryka w kukurydzę i koszenilę, Andy
   w obsydian ze złotem, Afryka i zrost w głęboką czerwień. Sąsiednie sekcje
   różnią się gruntem, więc przewijanie daje przejście, a nie płaszczyznę.

   CZEGO TEN BLOK NIE RUSZA — i dlaczego.
   * `padding`, `margin`, `border-radius`: zostają z arkusza. Nadpisanie ich
     zmieniłoby hero, który ma własne wartości, a zarzut dotyczył barwy.
   * `::after` na sekcjach: NIE używam. `.tgp-sekcja--tlo::after` niesie
     przyciemnienie zdjęcia, a `.tgp-sekcja + .tgp-sekcja::after` ma wyższą
     szczegółowość i skasowałoby je — czyli poprawka barwy zgasiłaby tła
     w tej samej chwili, w której je zamawiam. Przejście między sekcjami
     robię `box-shadow`, bo nie zajmuje pseudoelementu.
   * `::before` na sekcjach ze zdjęciem: zostawiam obrazowi; włos światła
     dokładam tylko tam, gdzie zdjęcia nie ma.

   MUSI STAĆ NA KOŃCU PLIKU — ogon arkusza z 2026-09-13 stoi za zapytaniami
   o media i blok wstawiony wcześniej przegrywa z nim kolejnością.

   Tła fotograficzne wchodzą tym samym gniazdem co dotąd (`--tlo`) i kładą się
   NA tym kolorycie, więc po dostarczeniu grafik nic tu nie trzeba cofać. */

.tgp-strona {
	--lod:        198 58% 62%;
	--piaskowiec:  26 56% 54%;
	--ziarno:      44 58% 62%;
	--czerwien:   352 42% 50%;
	--las:        158 44% 46%;
	--noc:        218 42% 44%;
}

.tgp-sekcja,
.tgp-hero {
	position: relative;
	isolation: isolate;
	border-color: hsl( var( --ton, var( --lod ) ) / .20 );
	background:
		radial-gradient( 1100px 520px at 18% -6%, hsl( var( --ton, var( --lod ) ) / .28 ), transparent 66% ),
		radial-gradient( 760px 420px at 92% 108%, hsl( var( --ton2, var( --ton, var( --lod ) ) ) / .18 ), transparent 70% ),
		linear-gradient( 180deg,
			hsl( var( --grunt, 214 30% 9% ) ) 0%,
			hsl( var( --grunt, 214 30% 9% ) / .88 ) 46%,
			hsl( var( --grunt-d, 218 34% 6% ) ) 100% );
	box-shadow: 0 -26px 48px -30px hsl( var( --ton, var( --lod ) ) / .40 );
}

/* Włos światła na górnej krawędzi. Tylko dla sekcji BEZ zdjęcia — tam
   `::before` należy do obrazu. */
.tgp-sekcja:not( .tgp-sekcja--tlo )::before,
.tgp-hero:not( .tgp-sekcja--tlo )::before {
	content: ''; position: absolute; inset: 0 0 auto; height: 1px; z-index: 2;
	background: linear-gradient( 90deg,
		transparent, hsl( var( --ton, var( --lod ) ) / .55 ) 22%,
		hsl( var( --ton, var( --lod ) ) / .16 ) 62%, transparent );
}

/* ---- przypisanie tonów ----
   Klucze odpowiadają sekcjom z pięciu plików danych. Sekcja bez wpisu spada
   na --lod i wygląda tak samo jak sąsiednia, więc KAŻDY klucz z pola
   `kolejnosc` musi tu stać. Wartości to trójki HSL bez hsl(). */
#tgp-hero        { --ton: var( --lod );        --ton2: var( --las );        --grunt: 214 34% 10%; --grunt-d: 218 38% 6%; }
#tgp-brama       { --ton: var( --noc );        --ton2: var( --lod );        --grunt: 218 30% 9%;  --grunt-d: 222 34% 5%; }

/* strona: rozdroże */
#tgp-porownanie  { --ton: var( --lod );        --ton2: var( --noc );        --grunt: 202 30% 9%;  --grunt-d: 206 34% 6%; }
#tgp-przenikanie { --ton: var( --ziarno );     --ton2: var( --piaskowiec ); --grunt: 42 22% 9%;   --grunt-d: 38 28% 6%; }
#tgp-wyobrazenia { --ton: var( --las );        --ton2: var( --noc );        --grunt: 162 24% 9%;  --grunt-d: 168 30% 5%; }
#tgp-dzis        { --ton: var( --czerwien );   --ton2: var( --ziarno );     --grunt: 350 20% 9%;  --grunt-d: 352 26% 5%; }

/* strona: Jamał, Ob i Tajmyr */
#tgp-tundra      { --ton: var( --las );        --ton2: var( --lod );        --grunt: 156 22% 9%;  --grunt-d: 162 28% 6%; }
#tgp-ofiara      { --ton: var( --piaskowiec ); --ton2: var( --czerwien );   --grunt: 24 24% 9%;   --grunt-d: 20 30% 6%; }
#tgp-sasiedzi    { --ton: var( --ziarno );     --ton2: var( --las );        --grunt: 46 20% 9%;   --grunt-d: 42 26% 5%; }

/* strona: Czukotka i Kamczatka */
#tgp-czukotka    { --ton: var( --noc );        --ton2: var( --lod );        --grunt: 216 30% 9%;  --grunt-d: 220 34% 5%; }
#tgp-obrzed      { --ton: var( --piaskowiec ); --ton2: var( --ziarno );     --grunt: 28 22% 10%;  --grunt-d: 24 28% 6%; }
#tgp-sasiedztwo  { --ton: var( --lod );        --ton2: var( --las );        --grunt: 194 26% 9%;  --grunt-d: 198 30% 6%; }
#tgp-stulecie    { --ton: var( --czerwien );   --ton2: var( --noc );        --grunt: 348 20% 9%;  --grunt-d: 350 26% 5%; }

/* strona: Jakucja i tajga */
#tgp-sacha       { --ton: var( --ziarno );     --ton2: var( --piaskowiec ); --grunt: 44 22% 10%;  --grunt-d: 40 28% 6%; }
#tgp-tajga       { --ton: var( --las );        --ton2: var( --noc );        --grunt: 168 22% 9%;  --grunt-d: 172 28% 5%; }

/* strona: Alaska i Aleuty */
#tgp-wybrzeze    { --ton: var( --lod );        --ton2: var( --ziarno );     --grunt: 200 28% 9%;  --grunt-d: 204 32% 6%; }
#tgp-aleuty      { --ton: var( --piaskowiec ); --ton2: var( --czerwien );   --grunt: 22 24% 10%;  --grunt-d: 18 30% 6%; }
#tgp-wnetrze     { --ton: var( --noc );        --ton2: var( --las );        --grunt: 212 28% 9%;  --grunt-d: 216 32% 5%; }

#tgp-licznik     { --ton: var( --ziarno );     --ton2: var( --lod );        --grunt: 48 18% 9%;   --grunt-d: 44 24% 5%; }
#tgp-nie-bylo    { --ton: var( --czerwien );   --ton2: var( --noc );        --grunt: 350 16% 8%;  --grunt-d: 352 22% 5%; }

/* ---- kafel na tym gruncie ---- */
.tgp-strona .zd-klocek {
	border: 1px solid hsl( var( --ton, var( --lod ) ) / .22 );
	background:
		linear-gradient( 180deg, hsl( var( --ton, var( --lod ) ) / .10 ), transparent 52% ),
		linear-gradient( 180deg, rgba( 10, 18, 20, .86 ), rgba( 6, 12, 13, .94 ) );
	transition: border-color .25s ease, box-shadow .25s ease;
}
.tgp-strona .zd-klocek:hover,
.tgp-strona .zd-klocek:focus-visible {
	border-color: hsl( var( --ton, var( --lod ) ) / .52 );
	box-shadow: 0 10px 34px -18px hsl( var( --ton, var( --lod ) ) / .7 );
}
.tgp-strona .tgp-kafel__nad i { color: hsl( var( --ton, var( --lod ) ) / .92 ); }
.tgp-sekcja__nad              { color: hsl( var( --ton, var( --lod ) ) / .90 ); }

@media ( prefers-reduced-motion: reduce ) {
	.tgp-strona .zd-klocek { transition: none; }
}

/* ===== KARB POŚWIADCZENIA I POLE SPORNE 2026-09-15 =====
   Dwa elementy, których ten dział dotąd nie miał, a które są podpisem serwisu:
   nacięcia mówiące, jak blisko źródła stoi dana wiedza, i lista tego, czego
   nie rozstrzygnięto. Stoi na końcu pliku razem z blokiem kolorytu, bo ogon
   arkusza bije wcześniejsze reguły kolejnością.

   Karb siedzi w SKRÓCIE kafla, czyli w tym, co widać w torze bez otwierania —
   po to, żeby czytelnik widział wagę świadectwa, zanim zacznie czytać. */

.tgp-karb {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 10px; font: 400 10.5px var( --sans );
	letter-spacing: .13em; text-transform: uppercase;
	color: hsl( var( --ton, var( --lod ) ) / .78 );
}
.tgp-karb__n {
	width: 3px; height: 13px; border-radius: 2px; flex: 0 0 auto;
	background: hsl( var( --ton, var( --lod ) ) / .16 );
}
.tgp-karb__n.jest { background: hsl( var( --ton, var( --lod ) ) / .88 ); }
.tgp-karb em { font-style: normal; margin-left: 4px; }

/* Cztery stopnie różnią się nie tylko liczbą nacięć, ale i temperaturą barwy:
   im dalej od źródła, tym chłodniej i bardziej szaro. Sama liczba nacięć jest
   trudna do policzenia kątem oka, barwa działa od razu. */
.tgp-karb--wspolczesny   { color: hsl( var( --ziarno ) / .92 ); }
.tgp-karb--wspolczesny .tgp-karb__n.jest { background: hsl( var( --ziarno ) / .92 ); }
.tgp-karb--pozniejszy    { color: hsl( var( --piaskowiec ) / .82 ); }
.tgp-karb--pozniejszy .tgp-karb__n.jest  { background: hsl( var( --piaskowiec ) / .82 ); }
.tgp-karb--folklor       { color: hsl( var( --lod ) / .74 ); }
.tgp-karb--folklor .tgp-karb__n.jest     { background: hsl( var( --lod ) / .74 ); }
.tgp-karb--rekonstrukcja { color: hsl( 210 8% 58% / .78 ); }
.tgp-karb--rekonstrukcja .tgp-karb__n.jest { background: hsl( 210 8% 58% / .68 ); }

/* ---- czego nie rozstrzygnięto ---- */
.tgp-sporne {
	margin: 18px 0 0; padding: 14px 18px 14px 20px;
	border-left: 2px solid hsl( var( --ton, var( --lod ) ) / .42 );
	border-radius: 0 12px 12px 0;
	background: linear-gradient( 90deg, hsl( var( --ton, var( --lod ) ) / .09 ), transparent 78% );
}
.tgp-sporne > b {
	display: block; margin: 0 0 8px; font: 400 10.5px var( --sans );
	letter-spacing: .18em; text-transform: uppercase;
	color: hsl( var( --ton, var( --lod ) ) / .86 );
}
.tgp-sporne ul { margin: 0; padding: 0 0 0 18px; }
.tgp-sporne li {
	margin: 0 0 7px; font-size: 15.5px; line-height: 1.52;
	color: var( --tekst-slaby );
}
.tgp-sporne li::marker { color: hsl( var( --ton, var( --lod ) ) / .5 ); }
.tgp-sporne li:last-child { margin-bottom: 0; }

@media ( max-width: 860px ) {
	.tgp-sporne { padding: 12px 14px 12px 16px; }
	.tgp-sporne li { font-size: 14.5px; }
	.tgp-karb { font-size: 10px; gap: 6px; }
}

/* ===== SZEROKOŚĆ: WYŁAMANIE Z UKŁADU MOTYWU 2026-09-15 =====
   BŁĄD, KTÓRY TO NAPRAWIA. Ten dział nie miał linii wyłamania, którą mają
   wszystkie pozostałe. Miał tylko `max-width: 1520px` bez `!important`
   i bez `box-sizing: border-box` NA SAMYM `.tgp-strona` — reguła w wierszu 34
   ustawia `border-box` wyłącznie POTOMKOM (`.tgp-strona *`), a nie elementowi.
   W motywie WordPressa nie ma więc czym wygrać z układem strony.

   CZEGO NIE WYKRYŁ MÓJ POMIAR. Mierzyłem na statycznym podglądzie, w którym
   motywu nie ma. Tam wychodziło 1600 px zewnętrznie i 1520 px treści, czyli
   dokładnie tyle co u Słowian — i wyglądało na poprawne. Pomiar na podglądzie
   NIE dowodzi niczego o szerokości na żywej stronie; to trzeba sprawdzać
   w motywie albo porównaniem reguł z działem, który stoi dobrze.

   Reguła jest przepisana co do znaku z `slowianie.css` (wiersz 43)
   i `polska.css` (wiersz 65), bo to jest wzorzec, który na tej stronie działa:
   `border-box` + `max-width: 1600px` + padding 40 px daje kolumnę treści
   równą 1520 px, tak jak w całej reszcie serwisu. */

body:has( .tgp-strona ) .wp-block-post-content > .tgp-strona,
body:has( .tgp-strona ) .entry-content > .tgp-strona,
.tgp-strona {
	box-sizing: border-box;
	max-width: 1600px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Sekcje i hero nie mogą wyjść poza kolumnę nawet wtedy, gdy motyw
   dorzuci im własną szerokość. */
.tgp-strona > .tgp-sekcja,
.tgp-strona > .tgp-hero {
	box-sizing: border-box;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ===== ODDECH SEKCJI 2026-09-15 =====
   ZARZUT: litery za blisko krawędzi. Zmierzone: `.tgp-sekcja` miała
   `padding: 0px` i `border-radius: 0px`, a tytuł zaczynał się dokładnie na
   krawędzi bloku (left 433 px przy sekcji stojącej od 433 px). Dla porównania
   ta sama sekcja u Słowian: `padding: 36px 32px 40px`, zaokrąglenie 26 px,
   tytuł od 466 px — czyli 32 px oddechu.

   DLACZEGO WYSZŁO TO DOPIERO TERAZ. Paddingu nie było w tym dziale od
   początku, ale sekcje nie miały też widocznego tła ani obrysu, więc krawędzi
   nie było widać i tekst nie miał się o co opierać. Blok kolorytu dał każdej
   sekcji własny grunt i obrys — i wtedy brak oddechu zrobił się rażący.
   W komentarzu do tamtego bloku napisałem, że paddingu nie ruszam, bo zostaje
   z arkusza. Złe założenie: w arkuszu go nie było.

   Wartości przepisane z `slowianie.css`, bo to jest dział, który stoi dobrze. */

.tgp-sekcja {
	box-sizing: border-box;
	padding: 36px 32px 40px;
	border-radius: 26px;
	margin-top: 34px;
}

/* Tor wychodzi poza padding sekcji tylko o tyle, ile trzeba, żeby kafle
   dojeżdżały do krawędzi bez obcinania cienia — a nagłówki zostają w środku. */
.tgp-sekcja > .tgp-siatka {
	margin-left: -4px;
	margin-right: -4px;
	padding-left: 4px;
	padding-right: 4px;
}

/* Lead i tak ma własną, wąską miarę; tytuł i nadtytuł mają teraz stać
   w jednej linii z lewą krawędzią tekstu kafli. */
.tgp-sekcja__nad,
.tgp-sekcja__tytul,
.tgp-sekcja__lead { padding-left: 0; padding-right: 0; }

@media ( max-width: 860px ) {
	.tgp-sekcja { padding: 26px 18px 30px; border-radius: 18px; margin-top: 24px; }
	.tgp-hero   { padding: 40px 20px 34px; border-radius: 18px; }
}

/* ===== TONY NOWYCH SEKCJI 2026-09-15 =====
   Sekcja `ludy` rozpadła się na `ludy-polnoc` i `ludy-poludnie`, doszły
   `hawaje` i `subarktyka`. Reguła kolorytu celowała w `#tgp-ludy`, więc po
   podziale te bloki straciłyby ton i spadły na wartość domyślną — czyli
   znów wyglądałyby na szare. Ta pułapka jest wbudowana w sposób, w jaki
   przypisuję barwy po identyfikatorze sekcji: zmiana klucza w danych CICHO
   zabiera sekcji koloryt i nic tego nie zgłasza.

   Dobór barw jest rzeczowy, nie ozdobny:
   * północ — lód i chłód, ten sam ton co hero;
   * południe — zieleń lasu wilgotnego i ciepło wyżyn;
   * Hawaje — morska zieleń oceanu i czerwień lawy, bo to jedyna sekcja
     tego działu, która nie należy do Ameryk i ma to być widać od razu;
   * subarktyka — zieleń tajgi z zimnym światłem znad koła podbiegunowego. */


/* ===== TONY: EPOKA LODOWCOWA I POCHODZENIE 2026-09-15 =====
   Dwa nowe tory otwierające dział. Ton dobrany rzeczowo: lodowiec dostaje
   zimne, niemal białe światło znad lądolodu, pochodzenie — chłodny błękit
   bez ciepła, bo to jest sekcja o rachunku, nie o obrzędzie. */


/* ===== BRAMA: KLIKALNE KAFLE DO DZIAŁÓW 2026-09-15 =====
   ZARZUT: „nie widzę państw Inków, Azteków, Majów, kultury Oaxaca".
   Sprawdzone: te strony istnieją i `Tarot_Linki` zna ich slugi, a w danych
   jest 38 kart z polem `powiazane`. Odnośniki działały — tylko stały
   w ROZWINIĘTYM wnętrzu kafla, więc widać je było dopiero po jego otwarciu.

   Tu każdy kafel jest w całości odnośnikiem: nic nie trzeba otwierać.
   Wygląda inaczej niż kafel treści — jaśniejszy obrys, strzałka u dołu —
   żeby od pierwszego spojrzenia było widać, że to wyjście, a nie tekst. */

.tgp-brama { display: flex; gap: 16px; }

.tgp-brama__kafel {
	flex: 0 0 300px; box-sizing: border-box;
	display: flex; flex-direction: column; gap: 8px;
	padding: 20px 20px 18px; border-radius: 18px;
	text-decoration: none; color: inherit;
	border: 1px solid hsl( var( --ton, var( --lod ) ) / .34 );
	background:
		linear-gradient( 180deg, hsl( var( --ton, var( --lod ) ) / .16 ), transparent 58% ),
		linear-gradient( 180deg, rgba( 12, 22, 24, .9 ), rgba( 7, 13, 14, .96 ) );
	transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.tgp-brama__kafel:hover,
.tgp-brama__kafel:focus-visible {
	border-color: hsl( var( --ton, var( --lod ) ) / .78 );
	transform: translateY( -3px );
	box-shadow: 0 14px 34px -18px hsl( var( --ton, var( --lod ) ) / .85 );
}
.tgp-brama__nad {
	display: flex; align-items: center; gap: 7px;
	font: 400 10.5px var( --sans ); letter-spacing: .2em; text-transform: uppercase;
	color: hsl( var( --ton, var( --lod ) ) / .9 );
}
.tgp-brama__kafel h3 {
	margin: 0; font: 400 21px var( --serif ); line-height: 1.2;
	color: var( --tekst-mocny );
}
.tgp-brama__kafel p {
	margin: 0; font-size: 14.5px; line-height: 1.5; color: var( --tekst-slaby );
	flex: 1 1 auto;
}
.tgp-brama__idz {
	margin-top: 4px; font: 400 11.5px var( --sans ); letter-spacing: .12em;
	text-transform: uppercase; color: hsl( var( --ton, var( --lod ) ) / .92 );
}
.tgp-brama__idz::after { content: ' \2192'; }


@media ( prefers-reduced-motion: reduce ) {
	.tgp-brama__kafel { transition: none; }
	.tgp-brama__kafel:hover { transform: none; }
}
@media ( max-width: 860px ) {
	.tgp-brama__kafel { flex-basis: 250px; padding: 16px; }
}

/* ===== KLIKALNE LUDY NA MAPIE 2026-09-15 =====
   ZARZUT: „zaznacz największe plemiona i niech będą klikalne".
   Dotąd kliknięcie w obszar wypisywało samą nazwę i nie prowadziło nigdzie.
   Teraz czterdzieści osiem bytów w trzech oknach ma w danych pole `l`
   ze slugiem działu; obrys jest u nich mocniejszy, a po kliknięciu pojawia
   się odnośnik.

   Dopasowanie nazw idzie po DOKŁADNYM brzmieniu, nie po fragmencie —
   „Mayangna" w Nikaragui to lud misumalpański, a „Mayaimi" na Florydzie nie
   ma z Majami nic wspólnego, a oba wpadłyby w każde sito szukające „Maya". */

.tgp-mapa__byt--dzial {
	stroke: hsl( var( --ton, var( --lod ) ) / .85 );
	stroke-width: 1.6;
	filter: drop-shadow( 0 0 6px hsl( var( --ton, var( --lod ) ) / .45 ) );
	cursor: pointer;
}
.tgp-mapa__byt--dzial:hover,
.tgp-mapa__byt--dzial:focus-visible {
	stroke: hsl( var( --ton, var( --lod ) ) / 1 );
	stroke-width: 2.4;
}

.tgp-mapa__idz {
	display: inline-block; margin-left: 8px;
	font: 400 12px var( --sans ); letter-spacing: .1em; text-transform: uppercase;
	color: hsl( var( --ton, var( --lod ) ) / .95 );
	text-decoration: none; border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.tgp-mapa__idz::after { content: ' \2192'; }
.tgp-mapa__idz:hover { color: var( --tekst-mocny ); }

@media ( prefers-reduced-motion: reduce ) {
	.tgp-mapa__byt--dzial { filter: none; }
}


/* ===== PALETA GRECKA 2026-09-15 =====
   Wapien i marmur zamiast obsydianu, morze egejskie zamiast jadeitu,
   cynober z malowidel i zloto z Myken. Swiatlo poludniowe, odbite
   od bialego kamienia — jasniejsze niz w dzialach polnocnych. */
.tgp-strona {
	--tlo: #0b0d10; --panel: rgba( 18, 24, 30, .86 );
	--obrys: rgba( 122, 172, 190, .30 ); --wlos: rgba( 122, 172, 190, .14 );
	--morze: 196 46% 52%; --wapien: 40 22% 74%; --cynober: 8 62% 52%;
	--zloto: 44 64% 56%; --oliwka: 84 24% 46%; --noc-eg: 214 34% 44%;
	--lod: var( --morze ); --piaskowiec: var( --wapien ); --ziarno: var( --zloto );
	--czerwien: var( --cynober ); --las: var( --oliwka ); --noc: var( --noc-eg );
}

/* Identyfikatory sekcji wzięte z pola `kolejnosc` w danych, nie z domysłu. */




/* ===== PALETA CZESKA 2026-09-15 (trzecia warstwa: 16 sekcji) =====
   Barwy tego obszaru: granat czeski (pirop), srebro z Kutnej Hory,
   zielen winnic morawskich, zloto baroku po 1620, lupek tatrzanski
   i miedz kielicha husyckiego.

   REGULY NIZEJ POWSTALY Z PLIKU DANYCH. Sekcja bez reguly spada na
   wartosc domyslna, wyglada na szara i NIC tego nie zglasza. Srednik po
   kazdej wartosci obowiazkowy: wlasnosc niestandardowa polyka nastepne
   deklaracje bez bledu skladni — sprawdzone pomiarem. */
.tgp-strona {
  --granat-cz: 352 58% 46%;   /* granat czeski, pirop */
  --srebro-k:  210 8% 72%;    /* srebro z Kutnej Hory */
  --winnica:   96 26% 46%;    /* winnice morawskie */
  --barok:     40 56% 58%;    /* zloto baroku po 1620 */
  --tatry:     216 26% 56%;   /* lupek tatrzanski */
  --kielich:   18 44% 46%;    /* miedz kielicha husyckiego */
}

/* ---- przypisanie tonow: po jednym wierszu na sekcje z danych ---- */
/* ══════════════════════════════════════════════════════════════════════════
   KOLORYT WŁASNY TEGO DZIAŁU. Blok idzie na KONIEC arkusza, bo ogon bije
   wcześniejsze reguły kolejnością — a arkusz jest klonem beneluksowego
   i niesie barwy mokradeł, cegły i fajansu, których tu być nie może.

   ⚠ FORMAT BARW: `--ton`, `--ton2` i `--grunt` MUSZĄ być TRÓJKAMI HSL bez
   opakowania `hsl()`, bo arkusz składa je sam: `hsl( var( --ton ) / .28 )`.
   Heks unieważnia CAŁĄ deklarację `background` na `.tgp-sekcja` i dział
   robi się jednobarwny, bez żadnego błędu w konsoli.

   MATERIAŁ: wapień, ochra, miedź, sól i złota mozaika.
   ŚWIATŁO: południe nad kamieniem — twarde, bez rozproszenia, z krótkim
   cieniem; oraz zmierzch, w którym ten sam kamień robi się miodowy.

   Podpisem tego terenu jest KAMIEŃ, który świeci własną barwą: budowle stoją
   tu z jednego lokalnego wapienia, więc całe miasto ma jeden ton i zmienia
   go tylko z porą dnia. Dlatego grunt jest ciepły i suchy, a nie wilgotny,
   a akcenty biorą się z pięciu rzeczy, które ta ziemia naprawdę dawała:
   z wapienia, z ochry pustyni, z miedzi, z soli Morza Martwego i ze złota
   mozaiki, które tu przywieziono.
   ══════════════════════════════════════════════════════════════════════════ */

:root,
.tgp-strona {
	--tlo:         #100d0a;
	--panel:       rgba( 33, 27, 21, .84 );
	--obrys:       rgba( 196, 172, 128, .28 );
	--wlos:        rgba( 196, 172, 128, .13 );

	/* trójki HSL — patrz ostrzeżenie wyżej */
	--wapien:      38 34% 62%;    /* miejscowy wapień, z którego stoi wszystko */
	--wapien-j:    40 44% 76%;
	--ochra:       28 48% 52%;    /* pustynia i tynk */
	--ochra-j:     30 52% 66%;
	--miedz:       18 52% 48%;    /* miedź odlewana traconym woskiem */
	--miedz-j:     22 56% 62%;
	--sol:        176 30% 52%;    /* sól i minerał Morza Martwego */
	--sol-j:      174 38% 66%;
	--oliwka:      74 26% 44%;    /* oliwka, dąb, jęczmień */
	--indygo:     228 44% 56%;    /* atrament i noc */
	--indygo-j:   226 50% 70%;
	--zloto:       44 64% 56%;    /* mozaika i świecznik */
	--zloto-j:     44 72% 70%;
	--granat:     352 48% 50%;    /* owoc granatu, purpura, krew */
	--cedr:       152 30% 42%;    /* zieleń kopuły i ogrodu */
	--zelazo:     212 12% 52%;    /* kolczuga i gwóźdź */
	--wino:       286 30% 54%;    /* wieczór w górach Galilei */

	--etyk:        #b6a992;
	--tekst:       #bdb1a0;
	--tekst-slaby: #8d8374;
	--tekst-mocny: #f0e9dd;
}

/* ── barwa każdej sekcji ──
   Piętnaście rozdziałów od IX tysiąclecia p.n.e. po dziś. Każdy dostaje
   własny barwnik wzięty z materiału swojej warstwy: tynk i ochra na neolit,
   oliwka na Judę, sól Morza Martwego na zwoje, purpura na Rzym, złoto na
   mozaikę bizantyńską, miedź na blaszki z zaklęciami, zieleń na islam. */


/* Karb: cztery stopnie różnią się nie tylko liczbą nacięć, ale i temperaturą
   barwy. W TYM dziale karb jest ważniejszy niż gdziekolwiek, bo różnica
   między inskrypcją z epoki a zapisem sporządzonym osiemset lat później
   jest tu sednem sprawy — więc stopnie są tu wyraźniejsze i mocniejsze. */
.tgp-karb--wspolczesny   { color: hsl( var( --zloto-j ) ); }
.tgp-karb--wspolczesny .tgp-karb__n.jest   { background: hsl( var( --zloto-j ) ); }
.tgp-karb--pozniejszy    { color: hsl( var( --ochra-j ) ); }
.tgp-karb--pozniejszy .tgp-karb__n.jest    { background: hsl( var( --ochra-j ) ); }
.tgp-karb--folklor       { color: hsl( var( --sol-j ) ); }
.tgp-karb--folklor .tgp-karb__n.jest       { background: hsl( var( --sol-j ) ); }
.tgp-karb--rekonstrukcja { color: hsl( 34 8% 58% ); }
.tgp-karb--rekonstrukcja .tgp-karb__n.jest { background: hsl( 34 8% 58% ); }

/* Okno w hero: barwy z palety TEGO działu, nie z klonu. */
.tgp-strona .tgp-hero .tgp-okno.zd-okno,
.tgp-strona .tgp-hero .zd-okno.zd-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, hsl( var( --zloto ) / .10 ), transparent 70% ),
		linear-gradient( 168deg, #1c1712, #100d0a );
}


/* ════════════════════════════════════════════════════════════════════════
   OSTATNIE SŁOWO — barwa Arktyki.

   DLACZEGO TEN BLOK STOI NA KOŃCU. Arkusz jest klonem klona: siedzą w nim
   osady po Amerykach, Grecji, Czechach i Beneluksie, a każda z tych warstw
   przedefiniowuje te same nazwy tokenów DALEJ w pliku. Zmierzone na żywej
   stronie: --lod wychodziło `196 46% 52%` zamiast `198 58% 62%`, a sekcja
   `wyobrazenia` świeciła oliwką zamiast zorzą. Kasowanie tamtych bloków
   ruszałoby reguły, których nie przejrzałem w całości — więc zamiast tego
   ostatnie słowo należy do tego bloku.

   ⛔ TRÓJKI HSL BEZ hsl(). Heks unieważnia CAŁE tło sekcji bez błędu
   w konsoli i dział wygląda na szary. ═════════════════════════════════ */

.tgp-strona {
	--lod:        198 58% 62%;   /* lód i niebo południowej strony */
	--piaskowiec:  26 56% 54%;   /* żar w namiocie, bursztyn */
	--ziarno:      44 58% 62%;   /* kość morsowa i ścięgno */
	--czerwien:   352 42% 50%;   /* ochra, którą znaczy się skórę */
	--las:        158 44% 46%;   /* zorza */
	--noc:        218 42% 44%;   /* noc polarna */
}

#tgp-hero        { --ton: var( --lod );        --ton2: var( --las );        --grunt: 214 34% 10%; --grunt-d: 218 38% 6%; }
#tgp-brama       { --ton: var( --noc );        --ton2: var( --lod );        --grunt: 218 30% 9%;  --grunt-d: 222 34% 5%; }
#tgp-porownanie  { --ton: var( --lod );        --ton2: var( --noc );        --grunt: 202 30% 9%;  --grunt-d: 206 34% 6%; }
#tgp-przenikanie { --ton: var( --ziarno );     --ton2: var( --piaskowiec ); --grunt: 42 22% 9%;   --grunt-d: 38 28% 6%; }
#tgp-wyobrazenia { --ton: var( --las );        --ton2: var( --noc );        --grunt: 162 24% 9%;  --grunt-d: 168 30% 5%; }
#tgp-dzis        { --ton: var( --czerwien );   --ton2: var( --ziarno );     --grunt: 350 20% 9%;  --grunt-d: 352 26% 5%; }
#tgp-tundra      { --ton: var( --las );        --ton2: var( --lod );        --grunt: 156 22% 9%;  --grunt-d: 162 28% 6%; }
#tgp-ofiara      { --ton: var( --piaskowiec ); --ton2: var( --czerwien );   --grunt: 24 24% 9%;   --grunt-d: 20 30% 6%; }
#tgp-sasiedzi    { --ton: var( --ziarno );     --ton2: var( --las );        --grunt: 46 20% 9%;   --grunt-d: 42 26% 5%; }
#tgp-czukotka    { --ton: var( --noc );        --ton2: var( --lod );        --grunt: 216 30% 9%;  --grunt-d: 220 34% 5%; }
#tgp-obrzed      { --ton: var( --piaskowiec ); --ton2: var( --ziarno );     --grunt: 28 22% 10%;  --grunt-d: 24 28% 6%; }
#tgp-sasiedztwo  { --ton: var( --lod );        --ton2: var( --las );        --grunt: 194 26% 9%;  --grunt-d: 198 30% 6%; }
#tgp-stulecie    { --ton: var( --czerwien );   --ton2: var( --noc );        --grunt: 348 20% 9%;  --grunt-d: 350 26% 5%; }
#tgp-sacha       { --ton: var( --ziarno );     --ton2: var( --piaskowiec ); --grunt: 44 22% 10%;  --grunt-d: 40 28% 6%; }
#tgp-tajga       { --ton: var( --las );        --ton2: var( --noc );        --grunt: 168 22% 9%;  --grunt-d: 172 28% 5%; }
#tgp-wybrzeze    { --ton: var( --lod );        --ton2: var( --ziarno );     --grunt: 200 28% 9%;  --grunt-d: 204 32% 6%; }
#tgp-aleuty      { --ton: var( --piaskowiec ); --ton2: var( --czerwien );   --grunt: 22 24% 10%;  --grunt-d: 18 30% 6%; }
#tgp-wnetrze     { --ton: var( --noc );        --ton2: var( --las );        --grunt: 212 28% 9%;  --grunt-d: 216 32% 5%; }


/* ══════════════════════════════════════════════════════════════════════
   OSTATNIE SŁOWO — barwa Grecji po miastach.

   Arkusz jest klonem arktycznego, a ten klonem palestyńskiego, więc niesie
   kilka warstw cudzych przypisań tonu dalej w pliku. Ten blok stoi na końcu
   i ma ostatnie słowo — patrz pułapka `arkusz-klon-niesie-cudza-palete`.

   Barwy: marmur i wapień w południowym słońcu, Egea, liść oliwny od spodu,
   czerwień naczyń i purpura z murexu. Światło twarde, cień o ostrym brzegu —
   odwrotnie niż w dziale północnym, gdzie cień jest rozciągnięty.

   ⛔ TRÓJKI HSL BEZ hsl(). ══════════════════════════════════════════════════ */

.tgp-strona {
	--tlo: #0c0a08;
	--lod:        42 26% 70%;   /* marmur pentelicki */
	--piaskowiec: 18 56% 52%;   /* czerwień naczyń */
	--ziarno:     44 62% 58%;   /* złoto i miejscowy wapień */
	--czerwien:  330 38% 44%;   /* purpura z murexu */
	--las:        74 28% 42%;   /* liść oliwny od spodu */
	--noc:       196 50% 46%;   /* Egea */
}

#tgp-hero        { --ton: var( --noc );        --ton2: var( --lod );        --grunt: 198 22% 10%; --grunt-d: 202 26% 6%; }
#tgp-brama       { --ton: var( --lod );        --ton2: var( --noc );        --grunt: 40 14% 10%;  --grunt-d: 38 18% 6%; }
#tgp-zanim       { --ton: var( --lod );        --ton2: var( --las );        --grunt: 42 16% 10%;  --grunt-d: 40 20% 6%; }
#tgp-slady       { --ton: var( --las );        --ton2: var( --lod );        --grunt: 76 18% 9%;   --grunt-d: 72 24% 6%; }
#tgp-palac       { --ton: var( --piaskowiec ); --ton2: var( --ziarno );     --grunt: 20 24% 10%;  --grunt-d: 16 28% 6%; }
#tgp-wizerunki   { --ton: var( --ziarno );     --ton2: var( --piaskowiec ); --grunt: 44 20% 10%;  --grunt-d: 40 26% 6%; }
#tgp-sporne      { --ton: var( --czerwien );   --ton2: var( --noc );        --grunt: 328 18% 9%;  --grunt-d: 330 24% 5%; }
#tgp-palace      { --ton: var( --ziarno );     --ton2: var( --lod );        --grunt: 46 18% 10%;  --grunt-d: 42 24% 6%; }
#tgp-tabliczki   { --ton: var( --piaskowiec ); --ton2: var( --las );        --grunt: 22 22% 9%;   --grunt-d: 18 28% 6%; }
#tgp-akropol     { --ton: var( --lod );        --ton2: var( --noc );        --grunt: 40 16% 10%;  --grunt-d: 38 22% 6%; }
#tgp-miasto      { --ton: var( --las );        --ton2: var( --ziarno );     --grunt: 74 18% 9%;   --grunt-d: 70 24% 6%; }
#tgp-sady        { --ton: var( --czerwien );   --ton2: var( --piaskowiec ); --grunt: 330 18% 9%;  --grunt-d: 332 24% 5%; }
#tgp-ustroj      { --ton: var( --noc );        --ton2: var( --lod );        --grunt: 200 22% 9%;  --grunt-d: 204 26% 6%; }
#tgp-obrzed      { --ton: var( --ziarno );     --ton2: var( --czerwien );   --grunt: 44 20% 9%;   --grunt-d: 40 26% 6%; }
#tgp-twarda      { --ton: var( --czerwien );   --ton2: var( --noc );        --grunt: 326 18% 9%;  --grunt-d: 328 24% 5%; }
#tgp-teby        { --ton: var( --piaskowiec ); --ton2: var( --czerwien );   --grunt: 18 24% 10%;  --grunt-d: 14 28% 6%; }
#tgp-korynt      { --ton: var( --noc );        --ton2: var( --ziarno );     --grunt: 196 22% 9%;  --grunt-d: 200 28% 6%; }
#tgp-argos       { --ton: var( --las );        --ton2: var( --noc );        --grunt: 78 18% 9%;   --grunt-d: 74 24% 6%; }
#tgp-milet       { --ton: var( --noc );        --ton2: var( --las );        --grunt: 194 24% 9%;  --grunt-d: 198 28% 6%; }
#tgp-kolonie     { --ton: var( --ziarno );     --ton2: var( --noc );        --grunt: 46 20% 9%;   --grunt-d: 42 26% 5%; }
#tgp-wschod      { --ton: var( --piaskowiec ); --ton2: var( --lod );        --grunt: 20 22% 9%;   --grunt-d: 16 28% 6%; }
#tgp-poczatki    { --ton: var( --las );        --ton2: var( --ziarno );     --grunt: 76 20% 9%;   --grunt-d: 72 26% 6%; }
#tgp-bohaterowie { --ton: var( --piaskowiec ); --ton2: var( --ziarno );     --grunt: 20 24% 10%;  --grunt-d: 16 30% 6%; }
#tgp-zejscia     { --ton: var( --czerwien );   --ton2: var( --noc );        --grunt: 328 20% 9%;  --grunt-d: 330 26% 5%; }
#tgp-kara        { --ton: var( --ziarno );     --ton2: var( --piaskowiec ); --grunt: 44 22% 10%;  --grunt-d: 40 28% 6%; }
#tgp-opowiesc    { --ton: var( --noc );        --ton2: var( --czerwien );   --grunt: 198 24% 9%;  --grunt-d: 202 28% 6%; }
#tgp-gilgamesz   { --ton: var( --piaskowiec ); --ton2: var( --ziarno );     --grunt: 22 24% 10%;  --grunt-d: 18 30% 6%; }
#tgp-miejsce     { --ton: var( --lod );        --ton2: var( --las );        --grunt: 42 16% 10%;  --grunt-d: 40 22% 6%; }


/* ═══════════════════════════════════════════════════════════════════════
   SZYNA POWROTU (2026-09-18) — stoi na każdej z dziewięciu stron, nad treścią
   i pod nią.

   PO CO. Te strony wypadły z menu: wchodzi się na nie z `/grecja/` i tylko
   stamtąd. Strona o jednym wejściu musi mieć widoczne wyjście — a te mają po
   kilka tysięcy pikseli wysokości, więc jedno wyjście na dole to za mało.

   Przycisk powrotu wygląda tak samo jak kamień graniczny na `/grecja/`: ten sam
   twardy, nierozmyty cień i ta sama jaśniejsza krawędź od góry. Czytelnik ma
   poznać, że wraca tą samą drogą, którą przyszedł.

   ⛔ TRÓJKI HSL BEZ hsl() — patrz nagłówek pliku.
   ══════════════════════════════════════════════════════════════════════ */

.tgp-strona {
	--marmur:  42 24% 72%;
	--morze-e: 196 52% 50%;
	--cynober-g: 14 58% 52%;
	--zloto-g: 44 62% 56%;
}

.tgp-szyna {
	display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px;
	margin: 26px 0 0; padding: 0 0 16px;
	border-bottom: 1px solid hsl( var( --marmur ) / .20 );
}

/* ---- wyjście ---- */
.tgp-szyna__dom {
	display: inline-flex; align-items: baseline; gap: 11px; flex: 0 0 auto;
	padding: 10px 18px 10px 14px; text-decoration: none; border-radius: 0;
	background: linear-gradient( 172deg, hsl( 36 15% 19% ), hsl( 32 12% 11% ) );
	border: 1px solid hsl( var( --marmur ) / .18 );
	border-top-color: hsl( var( --marmur ) / .62 );
	box-shadow: 5px 7px 0 -1px rgba( 0, 0, 0, .82 );
	transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s;
}
.tgp-szyna__dom i { font-style: normal; font-size: 15px; line-height: 1; color: hsl( var( --zloto-g ) ); }
.tgp-szyna__dom b {
	font: 400 13.5px/1 var( --sans ); letter-spacing: .12em; text-transform: uppercase;
	color: var( --tekst-mocny );
}
.tgp-szyna__dom span { font: 300 12.5px/1 var( --sans ); color: var( --tekst-slaby ); }
.tgp-szyna__dom:hover {
	transform: translate( -2px, -2px ); box-shadow: 7px 9px 0 -1px rgba( 0, 0, 0, .86 );
	border-top-color: hsl( var( --zloto-g ) / .8 );
}
.tgp-szyna__dom:focus-visible { outline: 2px solid hsl( var( --zloto-g ) ); outline-offset: 3px; }

/* ---- gdzie jestem ---- */
.tgp-szyna__lista {
	display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
	margin: 0; padding: 0; list-style: none;
}
.tgp-szyna__lista li { display: flex; align-items: center; }
.tgp-szyna__lista li + li::before {
	content: ''; flex: 0 0 auto; width: 3px; height: 3px; margin: 0 11px;
	background: hsl( var( --marmur ) / .34 );
}
/* Kreska, nie kropka: tu kończą się miejsca, a zaczynają opowieści. */
.tgp-szyna__lista li.tgp-szyna__prog::before {
	width: 1px; height: 14px; margin: 0 16px; background: hsl( var( --marmur ) / .3 );
}
.tgp-szyna__lista a,
.tgp-szyna__lista span {
	display: inline-block; padding: 4px 1px; text-decoration: none;
	font: 300 13px/1.2 var( --sans ); letter-spacing: .04em;
	color: var( --tekst-slaby ); border-bottom: 1px solid transparent;
	transition: color .16s, border-color .16s;
}
.tgp-szyna__lista a:hover { color: var( --tekst-mocny ); border-bottom-color: hsl( var( --zloto-g ) / .75 ); }
.tgp-szyna__lista a:focus-visible { outline: 2px solid hsl( var( --zloto-g ) ); outline-offset: 2px; }
.tgp-szyna__lista [aria-current="page"] {
	color: hsl( var( --cynober-g ) ); border-bottom-color: hsl( var( --cynober-g ) );
}

/* ---- ta sama szyna pod treścią ---- */
.tgp-szyna--stopka {
	margin: 74px 0 0; padding: 30px 0 0;
	border-bottom: 0; border-top: 1px solid hsl( var( --marmur ) / .20 );
}
.tgp-szyna--stopka .tgp-szyna__dom { padding: 14px 24px 14px 19px; }
.tgp-szyna--stopka .tgp-szyna__dom b { font-size: 15px; }

@media ( max-width: 900px ) {
	.tgp-szyna__dom span { display: none; }
	.tgp-szyna__lista a, .tgp-szyna__lista span { font-size: 12.5px; }
	.tgp-szyna__lista li + li::before { margin: 0 8px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tgp-szyna__dom { transition: box-shadow .18s, border-color .18s; }
	.tgp-szyna__dom:hover { transform: none; }
}