/* KOLORYT WŁASNY TEGO DZIAŁU — obsydian, jadeit i miedź.
   Grunt #070d0e. Nie szarość: obsydian ma w sobie zieleń, jadeit jest chłodny,
   a miedź i koszenila dają dwa ciepła o różnej temperaturze.

   ŚWIATŁO: wysokogórskie i przybrzeżne — ostre, o twardej krawędzi cienia.
   Odróżnia ten dział od europejskich, gdzie światło jest rozproszone przez
   mgłę albo korony drzew. Tu powietrze jest rzadkie i cień ma brzeg.

   SZEROKOŚĆ 1520 px i wyłamanie z układu motywu są jak w każdym dziale:
   motyw narzuca `--wp--style--global--content-size: 645px` i bez tego strona
   stoi w kolumnie o połowę za wąskiej, czego test NIE widzi. */

.tcz-strona {
	--tlo: #070d0e; --panel: rgba( 14, 26, 28, .84 );
	--obrys: rgba( 92, 168, 160, .30 ); --wlos: rgba( 92, 168, 160, .14 );
	--jadeit: #5ca8a0; --jadeit-j: #8fd0c8;
	--miedz: #b07242; --miedz-j: #d69a68;
	--kukurydza: #d8b24a; --kukurydza-j: #f0d081;
	--koszenila: #9d3b46; --koszenila-j: #c46672;
	--obsydian: #1a2224; --obsydian-j: #3d4a4d;
	--etyk: #9ab5a8;
	--tekst: #a8bdb6; --tekst-slaby: #7e938d; --tekst-mocny: #e4efe9;
	--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( 92, 168, 160, .14 ), transparent 72% ),
		radial-gradient( 900px 520px at 86% 40%, rgba( 176, 114, 66, .10 ), transparent 74% ),
		radial-gradient( 760px 440px at 8% 78%, rgba( 157, 59, 70, .08 ), transparent 74% ),
		linear-gradient( 180deg, #0d1719, var( --tlo ) 48% );
	overflow-x: clip;
}
.tcz-strona *, .tcz-strona *::before, .tcz-strona *::after { box-sizing: border-box; }

/* WYŁAMANIE Z UKŁADU MOTYWU. Bez tego dział stoi w kolumnie 645 px. */
body:has( .tcz-strona ) .wp-site-blocks > header, body:has( .tcz-strona ) header.wp-block-template-part,
body:has( .tcz-strona ) .wp-site-blocks > footer, body:has( .tcz-strona ) footer.wp-block-template-part,
body:has( .tcz-strona ) .wp-block-post-title { display: none !important; }
body:has( .tcz-strona ) .wp-site-blocks, body:has( .tcz-strona ) .wp-block-group,
body:has( .tcz-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tcz-strona ) .wp-block-post-content > *, body:has( .tcz-strona ) .entry-content > * {
	max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
body:has( .tcz-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  ══════════════ */
.tcz-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 ) );
}
.tcz-sekcja--tlo::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var( --tlo ) 50% 50% / cover no-repeat; opacity: .92;
}
.tcz-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 ) );
}
.tcz-hero__nad {
	margin: 0 0 14px; font: 400 11px var( --sans ); letter-spacing: .26em;
	text-transform: uppercase; color: var( --etyk );
}
.tcz-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`. */
.tcz-strona .tcz-hero .tcz-okno.zd-okno,
.tcz-strona .tcz-hero .zd-okno.zd-okno,
.tcz-strona .tcz-hero .tcz-okno.tcz-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 92, 168, 160, .10 ), transparent 70% ),
		linear-gradient( 168deg, #121818, #070d0e );
}

/* ══════════════  SEKCJE  ══════════════ */
.tcz-sekcja { position: relative; margin-top: 78px; }
.tcz-sekcja--tlo { padding: 46px 34px 40px; border-radius: 26px; overflow: hidden; }
.tcz-sekcja__nad {
	margin: 0 0 10px; font: 400 11px var( --sans ); letter-spacing: .24em;
	text-transform: uppercase; color: var( --etyk );
}
.tcz-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 );
}
.tcz-sekcja__lead { margin: 0 0 30px; max-width: 78ch; font-size: 18px; line-height: 1.78; }

/* ══════════════  KAFLE  ══════════════ */
.tcz-siatka { display: grid; gap: 22px; grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ); align-items: start; }
.tcz-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;
}
.tcz-kafel:hover, .tcz-kafel:focus-visible { border-color: var( --obrys ); transform: translateY( -2px ); }
.tcz-kafel__foto {
	display: block; margin: -26px -26px 18px; overflow: hidden;
	border-radius: 20px 20px 0 0; aspect-ratio: 8 / 5;
}
.tcz-kafel__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcz-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 );
}
.tcz-kafel__nad i { font-style: normal; color: var( --jadeit ); }
.tcz-kafel h3 { margin: 0 0 10px; font: 400 21px var( --serif ); line-height: 1.26; color: var( --tekst-mocny ); }
.tcz-kafel p { margin: 0; font-size: 16.5px; line-height: 1.66; }

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

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

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

/* ══════════════  MAPA  ══════════════ */
.tcz-mapa { display: grid; grid-template-columns: minmax( 0, 1.55fr ) minmax( 0, .45fr ); gap: 24px 34px; align-items: start; }
.tcz-mapa__zakladki { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.tcz-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;
}
.tcz-mapa__zakladka:hover { color: var( --tekst-mocny ); border-color: var( --obrys ); }
.tcz-mapa__zakladka[ aria-current="true" ] { color: var( --tlo ); background: var( --jadeit ); border-color: var( --jadeit ); }
.tcz-mapa__rama { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var( --wlos ); background: #040809; min-height: 320px; }
.tcz-mapa__rys { display: block; width: 100%; height: auto; }
.tcz-mapa__czeka, .tcz-mapa__blad { margin: 0; padding: 40px; color: var( --tekst-slaby ); font-size: 15px; }

.tcz-mapa__morze { fill: #040809; }
.tcz-mapa__lad { fill: rgba( 138, 160, 158, .13 ); stroke: none; }
.tcz-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. */
.tcz-mapa__byt {
	fill: rgba( 176, 114, 66, .26 ); stroke: rgba( 176, 114, 66, .50 );
	stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer;
}
.tcz-mapa__byt--lud { fill: rgba( 92, 168, 160, .26 ); stroke: rgba( 143, 208, 200, .55 ); }
.tcz-mapa__byt:hover { fill-opacity: .5; }
.tcz-mapa__byt:focus-visible { outline: 2px solid var( --kukurydza-j ); outline-offset: 2px; }
.tcz-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;
}
.tcz-mapa__skala path { fill: none; stroke: rgba( 138, 160, 158, .55 ); stroke-width: 2; }
.tcz-mapa__skala text { fill: rgba( 138, 160, 158, .70 ); font: 400 18px var( --sans ); letter-spacing: .1em; }

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

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

/* ══════════════  WĄSKIE EKRANY  ══════════════ */
@media ( max-width: 900px ) {
	.tcz-strona { padding: 0 20px 60px; }
	.tcz-hero { padding: 44px 24px 38px; }
	.tcz-sekcja { margin-top: 60px; }
	.tcz-sekcja--tlo { padding: 36px 22px 32px; }
	.tcz-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. */
	.tcz-mapa { grid-template-columns: 1fr; gap: 18px; }
	.tcz-mapa__kadr { border-left: 0; border-top: 2px solid var( --obrys ); padding: 16px 0 0; }
	.tcz-mapa__nazwa { font-size: 30px; stroke-width: 7; }
	.tcz-mapa__skala text { font-size: 26px; }
	.tcz-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. */
.tcz-sekcja--tlo::before,
.tcz-sekcja--tlo::after { z-index: 0; }
.tcz-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. `.tcz-sekcja--tlo::after` niesie
     przyciemnienie zdjęcia, a `.tcz-sekcja + .tcz-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ć. */

.tcz-strona {
	--lod:        188 52% 56%;
	--piaskowiec:  24 62% 58%;
	--ziarno:      44 72% 58%;
	--czerwien:   352 48% 54%;
	--las:        152 38% 46%;
	--noc:        206 44% 46%;
}

.tcz-sekcja,
.tcz-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, 192 26% 9% ) ) 0%,
			hsl( var( --grunt, 192 26% 9% ) / .88 ) 46%,
			hsl( var( --grunt-d, 195 30% 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. */
.tcz-sekcja:not( .tcz-sekcja--tlo )::before,
.tcz-hero:not( .tcz-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 ---- */
#tcz-hero        { --ton: var( --lod );        --ton2: var( --ziarno );     --grunt: 193 32% 10%; --grunt-d: 196 34% 6%; }
#tcz-mapa        { --ton: var( --noc );        --ton2: var( --lod );        --grunt: 198 30% 8%;  --grunt-d: 200 32% 5%; }

#tcz-ludy        { --ton: var( --lod );        --ton2: var( --las );        --grunt: 186 24% 9%;  --grunt-d: 190 28% 6%; }
#tcz-regiony     { --ton: var( --las );        --ton2: var( --lod );        --grunt: 176 22% 9%;  --grunt-d: 182 26% 6%; }

#tcz-cztery-rogi { --ton: var( --piaskowiec ); --ton2: var( --ziarno );     --grunt: 20 26% 10%;  --grunt-d: 16 30% 6%; }
#tcz-naskalna    { --ton: var( --piaskowiec ); --ton2: var( --czerwien );   --grunt: 16 24% 9%;   --grunt-d: 14 28% 6%; }

#tcz-bogowie     { --ton: var( --ziarno );     --ton2: var( --czerwien );   --grunt: 40 22% 9%;   --grunt-d: 36 26% 6%; }
#tcz-swiaty      { --ton: var( --ziarno );     --ton2: var( --noc );        --grunt: 44 20% 9%;   --grunt-d: 40 26% 5%; }
#tcz-kult        { --ton: var( --piaskowiec ); --ton2: var( --las );        --grunt: 28 20% 9%;   --grunt-d: 24 26% 6%; }

#tcz-bialy       { --ton: var( --noc );        --ton2: var( --czerwien );   --grunt: 206 26% 9%;  --grunt-d: 210 30% 5%; }
#tcz-procesy     { --ton: var( --czerwien );   --ton2: var( --noc );        --grunt: 348 18% 9%;  --grunt-d: 350 24% 5%; }
#tcz-prawo       { --ton: var( --noc );        --ton2: var( --lod );        --grunt: 204 24% 9%;  --grunt-d: 208 28% 5%; }

#tcz-zrost       { --ton: var( --czerwien );   --ton2: var( --ziarno );     --grunt: 354 20% 10%; --grunt-d: 352 26% 6%; }
#tcz-afryka      { --ton: var( --czerwien );   --ton2: var( --piaskowiec ); --grunt: 358 22% 10%; --grunt-d: 356 28% 6%; }
#tcz-voodoo      { --ton: var( --czerwien );   --ton2: var( --las );        --grunt: 344 22% 10%; --grunt-d: 346 28% 6%; }
#tcz-demony      { --ton: var( --noc );        --ton2: var( --czerwien );   --grunt: 214 24% 8%;  --grunt-d: 218 30% 5%; }

#tcz-przedmioty  { --ton: var( --piaskowiec ); --ton2: var( --ziarno );     --grunt: 30 22% 10%;  --grunt-d: 26 26% 6%; }
#tcz-rytualy     { --ton: var( --ziarno );     --ton2: var( --las );        --grunt: 46 20% 9%;   --grunt-d: 42 26% 6%; }
#tcz-magia       { --ton: var( --las );        --ton2: var( --ziarno );     --grunt: 150 20% 9%;  --grunt-d: 154 26% 6%; }

#tcz-pismo       { --ton: var( --lod );        --ton2: var( --piaskowiec ); --grunt: 190 24% 9%;  --grunt-d: 194 28% 6%; }
#tcz-kraje       { --ton: var( --las );        --ton2: var( --noc );        --grunt: 168 20% 9%;  --grunt-d: 172 26% 6%; }
#tcz-dzis        { --ton: var( --las );        --ton2: var( --ziarno );     --grunt: 158 22% 9%;  --grunt-d: 162 26% 6%; }
#tcz-licznik     { --ton: var( --ziarno );     --ton2: var( --lod );        --grunt: 48 18% 9%;   --grunt-d: 44 24% 5%; }
#tcz-nie-bylo    { --ton: var( --czerwien );   --ton2: var( --noc );        --grunt: 350 16% 8%;  --grunt-d: 352 22% 5%; }

/* ---- kafel na tym gruncie ---- */
.tcz-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;
}
.tcz-strona .zd-klocek:hover,
.tcz-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 );
}
.tcz-strona .tcz-kafel__nad i { color: hsl( var( --ton, var( --lod ) ) / .92 ); }
.tcz-sekcja__nad              { color: hsl( var( --ton, var( --lod ) ) / .90 ); }

@media ( prefers-reduced-motion: reduce ) {
	.tcz-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ć. */

.tcz-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 );
}
.tcz-karb__n {
	width: 3px; height: 13px; border-radius: 2px; flex: 0 0 auto;
	background: hsl( var( --ton, var( --lod ) ) / .16 );
}
.tcz-karb__n.jest { background: hsl( var( --ton, var( --lod ) ) / .88 ); }
.tcz-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. */
.tcz-karb--wspolczesny   { color: hsl( var( --ziarno ) / .92 ); }
.tcz-karb--wspolczesny .tcz-karb__n.jest { background: hsl( var( --ziarno ) / .92 ); }
.tcz-karb--pozniejszy    { color: hsl( var( --piaskowiec ) / .82 ); }
.tcz-karb--pozniejszy .tcz-karb__n.jest  { background: hsl( var( --piaskowiec ) / .82 ); }
.tcz-karb--folklor       { color: hsl( var( --lod ) / .74 ); }
.tcz-karb--folklor .tcz-karb__n.jest     { background: hsl( var( --lod ) / .74 ); }
.tcz-karb--rekonstrukcja { color: hsl( 210 8% 58% / .78 ); }
.tcz-karb--rekonstrukcja .tcz-karb__n.jest { background: hsl( 210 8% 58% / .68 ); }

/* ---- czego nie rozstrzygnięto ---- */
.tcz-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% );
}
.tcz-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 );
}
.tcz-sporne ul { margin: 0; padding: 0 0 0 18px; }
.tcz-sporne li {
	margin: 0 0 7px; font-size: 15.5px; line-height: 1.52;
	color: var( --tekst-slaby );
}
.tcz-sporne li::marker { color: hsl( var( --ton, var( --lod ) ) / .5 ); }
.tcz-sporne li:last-child { margin-bottom: 0; }

@media ( max-width: 860px ) {
	.tcz-sporne { padding: 12px 14px 12px 16px; }
	.tcz-sporne li { font-size: 14.5px; }
	.tcz-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 `.tcz-strona` — reguła w wierszu 34
   ustawia `border-box` wyłącznie POTOMKOM (`.tcz-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( .tcz-strona ) .wp-block-post-content > .tcz-strona,
body:has( .tcz-strona ) .entry-content > .tcz-strona,
.tcz-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ść. */
.tcz-strona > .tcz-sekcja,
.tcz-strona > .tcz-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: `.tcz-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. */

.tcz-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. */
.tcz-sekcja > .tcz-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. */
.tcz-sekcja__nad,
.tcz-sekcja__tytul,
.tcz-sekcja__lead { padding-left: 0; padding-right: 0; }

@media ( max-width: 860px ) {
	.tcz-sekcja { padding: 26px 18px 30px; border-radius: 18px; margin-top: 24px; }
	.tcz-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 `#tcz-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. */

#tcz-ludy-polnoc   { --ton: var( --lod );        --ton2: var( --las );      --grunt: 186 24% 9%;  --grunt-d: 190 28% 6%; }
#tcz-ludy-poludnie { --ton: var( --las );        --ton2: var( --ziarno );   --grunt: 156 22% 9%;  --grunt-d: 160 28% 6%; }
#tcz-hawaje        { --ton: 172 58% 46%;         --ton2: var( --czerwien ); --grunt: 178 34% 9%;  --grunt-d: 182 38% 6%; }
#tcz-subarktyka    { --ton: 200 40% 52%;         --ton2: var( --las );      --grunt: 202 28% 9%;  --grunt-d: 206 32% 6%; }

/* ===== 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. */

#tcz-lodowiec    { --ton: 204 30% 66%; --ton2: var( --lod );  --grunt: 206 22% 11%; --grunt-d: 210 26% 7%; }
#tcz-pochodzenie { --ton: 216 44% 58%; --ton2: var( --noc );  --grunt: 218 26% 9%;  --grunt-d: 222 30% 6%; }

/* ===== 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. */

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

.tcz-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;
}
.tcz-brama__kafel:hover,
.tcz-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 );
}
.tcz-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 );
}
.tcz-brama__kafel h3 {
	margin: 0; font: 400 21px var( --serif ); line-height: 1.2;
	color: var( --tekst-mocny );
}
.tcz-brama__kafel p {
	margin: 0; font-size: 14.5px; line-height: 1.5; color: var( --tekst-slaby );
	flex: 1 1 auto;
}
.tcz-brama__idz {
	margin-top: 4px; font: 400 11.5px var( --sans ); letter-spacing: .12em;
	text-transform: uppercase; color: hsl( var( --ton, var( --lod ) ) / .92 );
}
.tcz-brama__idz::after { content: ' \2192'; }

#tcz-brama { --ton: var( --ziarno ); --ton2: var( --lod ); --grunt: 44 20% 10%; --grunt-d: 40 26% 6%; }

@media ( prefers-reduced-motion: reduce ) {
	.tcz-brama__kafel { transition: none; }
	.tcz-brama__kafel:hover { transform: none; }
}
@media ( max-width: 860px ) {
	.tcz-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". */

.tcz-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;
}
.tcz-mapa__byt--dzial:hover,
.tcz-mapa__byt--dzial:focus-visible {
	stroke: hsl( var( --ton, var( --lod ) ) / 1 );
	stroke-width: 2.4;
}

.tcz-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;
}
.tcz-mapa__idz::after { content: ' \2192'; }
.tcz-mapa__idz:hover { color: var( --tekst-mocny ); }

@media ( prefers-reduced-motion: reduce ) {
	.tcz-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. */
.tcz-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 );
}
#tcz-polis        { --ton: var( --wapien );  --ton2: var( --morze );   --grunt: 40 14% 11%;  --grunt-d: 36 18% 7%; }
#tcz-bizancjum    { --ton: var( --zloto );   --ton2: var( --cynober ); --grunt: 46 22% 10%;  --grunt-d: 42 28% 6%; }

/* Identyfikatory sekcji wzięte z pola `kolejnosc` w danych, nie z domysłu. */
#tcz-brama        { --ton: var( --zloto );  --ton2: var( --morze );   --grunt: 44 20% 10%;  --grunt-d: 40 26% 6%; }
#tcz-epoka-brazu  { --ton: var( --morze );  --ton2: var( --cynober ); --grunt: 198 28% 10%; --grunt-d: 202 32% 6%; }
#tcz-polis        { --ton: var( --wapien ); --ton2: var( --morze );   --grunt: 40 14% 11%;  --grunt-d: 36 18% 7%; }
#tcz-hellenizm    { --ton: var( --cynober );--ton2: var( --zloto );   --grunt: 8 22% 10%;   --grunt-d: 6 28% 6%; }
#tcz-bizancjum    { --ton: var( --zloto );  --ton2: var( --noc-eg );  --grunt: 46 22% 10%;  --grunt-d: 42 28% 6%; }




/* ===== 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. */
.tcz-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 ---- */
#tcz-hero                   { --ton: var( --srebro-k );       --ton2: var( --tatry );          --grunt: 214 14% 11%;   --grunt-d: 218 18% 7%; }
#tcz-mapa                   { --ton: var( --tatry );          --ton2: var( --srebro-k );       --grunt: 206 26% 9%;    --grunt-d: 210 32% 6%; }
#tcz-brama                  { --ton: var( --barok );          --ton2: var( --winnica );        --grunt: 40 22% 10%;    --grunt-d: 36 28% 6%; }
#tcz-przed-slowianami       { --ton: var( --kielich );        --ton2: var( --srebro-k );       --grunt: 26 20% 9%;     --grunt-d: 22 26% 6%; }
#tcz-morawy                 { --ton: var( --winnica );        --ton2: var( --srebro-k );       --grunt: 96 20% 10%;    --grunt-d: 100 26% 6%; }
#tcz-bogowie                { --ton: var( --tatry );          --ton2: var( --granat-cz );      --grunt: 222 26% 10%;   --grunt-d: 226 32% 6%; }
#tcz-mity                   { --ton: var( --tatry );          --ton2: var( --winnica );        --grunt: 192 28% 9%;    --grunt-d: 196 34% 6%; }
#tcz-legendy                { --ton: var( --barok );          --ton2: var( --kielich );        --grunt: 36 24% 10%;    --grunt-d: 32 30% 6%; }
#tcz-korona                 { --ton: var( --barok );          --ton2: var( --granat-cz );      --grunt: 42 26% 10%;    --grunt-d: 38 32% 6%; }
#tcz-rozlam                 { --ton: var( --kielich );        --ton2: var( --granat-cz );      --grunt: 18 28% 10%;    --grunt-d: 14 34% 6%; }
#tcz-dwor                   { --ton: var( --granat-cz );      --ton2: var( --barok );          --grunt: 352 26% 10%;   --grunt-d: 350 32% 6%; }
#tcz-slowacja               { --ton: var( --tatry );          --ton2: var( --winnica );        --grunt: 216 24% 10%;   --grunt-d: 220 30% 6%; }
#tcz-sasiedzi               { --ton: var( --winnica );        --ton2: var( --barok );          --grunt: 78 24% 10%;    --grunt-d: 74 30% 6%; }
#tcz-miejsca                { --ton: var( --winnica );        --ton2: var( --tatry );          --grunt: 126 22% 10%;   --grunt-d: 130 28% 6%; }
#tcz-istoty                 { --ton: var( --tatry );          --ton2: var( --kielich );        --grunt: 204 22% 9%;    --grunt-d: 208 28% 6%; }
#tcz-magia                  { --ton: var( --granat-cz );      --ton2: var( --tatry );          --grunt: 334 24% 10%;   --grunt-d: 330 30% 6%; }
#tcz-procesy                { --ton: var( --kielich );        --ton2: var( --srebro-k );       --grunt: 8 24% 9%;      --grunt-d: 6 30% 6%; }
#tcz-dzis                   { --ton: var( --srebro-k );       --ton2: var( --barok );          --grunt: 210 10% 11%;   --grunt-d: 214 14% 7%; }
#tcz-licznik                { --ton: var( --srebro-k );       --ton2: var( --granat-cz );      --grunt: 206 12% 10%;   --grunt-d: 210 16% 6%; }
#tcz-nie-bylo               { --ton: var( --kielich );        --ton2: var( --tatry );          --grunt: 16 22% 9%;     --grunt-d: 14 28% 5%; }