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

.tgr-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;
}
.tgr-strona *, .tgr-strona *::before, .tgr-strona *::after { box-sizing: border-box; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#tgr-ludy-polnoc   { --ton: var( --lod );        --ton2: var( --las );      --grunt: 186 24% 9%;  --grunt-d: 190 28% 6%; }
#tgr-ludy-poludnie { --ton: var( --las );        --ton2: var( --ziarno );   --grunt: 156 22% 9%;  --grunt-d: 160 28% 6%; }
#tgr-hawaje        { --ton: 172 58% 46%;         --ton2: var( --czerwien ); --grunt: 178 34% 9%;  --grunt-d: 182 38% 6%; }
#tgr-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. */

#tgr-lodowiec    { --ton: 204 30% 66%; --ton2: var( --lod );  --grunt: 206 22% 11%; --grunt-d: 210 26% 7%; }
#tgr-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. */

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

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

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

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

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

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

@media ( prefers-reduced-motion: reduce ) {
	.tgr-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. */
.tgr-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 );
}
#tgr-polis        { --ton: var( --wapien );  --ton2: var( --morze );   --grunt: 40 14% 11%;  --grunt-d: 36 18% 7%; }
#tgr-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. */
#tgr-brama        { --ton: var( --zloto );  --ton2: var( --morze );   --grunt: 44 20% 10%;  --grunt-d: 40 26% 6%; }
#tgr-epoka-brazu  { --ton: var( --morze );  --ton2: var( --cynober ); --grunt: 198 28% 10%; --grunt-d: 202 32% 6%; }
#tgr-polis        { --ton: var( --wapien ); --ton2: var( --morze );   --grunt: 40 14% 11%;  --grunt-d: 36 18% 7%; }
#tgr-hellenizm    { --ton: var( --cynober );--ton2: var( --zloto );   --grunt: 8 22% 10%;   --grunt-d: 6 28% 6%; }
#tgr-bizancjum    { --ton: var( --zloto );  --ton2: var( --noc-eg );  --grunt: 46 22% 10%;  --grunt-d: 42 28% 6%; }


/* ════════════════════════════════════════════════════════════════════════
   OSTATNIE SŁOWO — barwa Grecji (2026-09-17).

   POWOD: do danych weszły cztery nowe sekcje — bostwa, przenikanie,
   wiara-wschodu i koniec — które w arkuszu NIE MIAŁY przypisanego tonu.
   Sekcja bez tonu spada na wartość domyślną, wygląda na szarą i nic tego
   nie zgłasza. Przy okazji powtarzam tu przypisania sześciu sekcji już
   istniejących, bo arkusz jest klonem klona i niesie kilka warstw cudzych
   przypisań dalej w pliku; ten blok ma stać na końcu i mieć ostatnie słowo.

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

.tgr-strona {
	--marmur:    42 24% 72%;   /* marmur pentelicki, ciepły w słońcu */
	--morze-eg:  196 52% 50%;  /* Egea */
	--oliwka-gr: 74 26% 44%;   /* liść oliwny od spodu */
	--purpura:   330 38% 42%;  /* purpura z murexu */
	--zloto-b:   44 62% 56%;   /* złoto mozaiki */
	--terakota:  18 54% 50%;   /* czerwień naczyń */
}

#tgr-hero          { --ton: var( --morze-eg ); --ton2: var( --marmur );   --grunt: 200 26% 10%; --grunt-d: 204 30% 6%; }
#tgr-brama         { --ton: var( --marmur );   --ton2: var( --morze-eg ); --grunt: 40 16% 10%;  --grunt-d: 38 20% 6%; }
#tgr-epoka-brazu   { --ton: var( --terakota ); --ton2: var( --morze-eg ); --grunt: 20 26% 10%;  --grunt-d: 16 30% 6%; }
#tgr-polis         { --ton: var( --marmur );   --ton2: var( --oliwka-gr ); --grunt: 42 18% 10%; --grunt-d: 40 22% 6%; }
#tgr-bostwa        { --ton: var( --zloto-b );  --ton2: var( --terakota ); --grunt: 44 22% 10%;  --grunt-d: 40 28% 6%; }
#tgr-przenikanie   { --ton: var( --oliwka-gr );--ton2: var( --zloto-b );  --grunt: 76 20% 9%;   --grunt-d: 72 26% 6%; }
#tgr-hellenizm     { --ton: var( --purpura );  --ton2: var( --zloto-b );  --grunt: 328 20% 10%; --grunt-d: 330 26% 6%; }
#tgr-bizancjum     { --ton: var( --zloto-b );  --ton2: var( --purpura );  --grunt: 40 20% 9%;   --grunt-d: 36 26% 5%; }
#tgr-wiara-wschodu { --ton: var( --purpura );  --ton2: var( --morze-eg ); --grunt: 322 20% 9%;  --grunt-d: 324 26% 5%; }
#tgr-koniec        { --ton: var( --morze-eg ); --ton2: var( --purpura );  --grunt: 202 24% 9%;  --grunt-d: 206 28% 5%; }


/* ═══════════════════════════════════════════════════════════════════════
   ZNAKI GRANICZNE — dziewięć stron warstwy głębokiej stoi na tej stronie
   jako kamienie z napisem (2026-09-18).

   SKĄD TA FORMA. Ateńskie horoi — płyty z rytą formułą „jeśm granicą agory" —
   stały na skraju placu i mówiły, gdzie kończy się jeden porządek, a zaczyna
   drugi. To jest teza tej warstwy dosłownie: nie było jednej religii greckiej,
   było tyle porządków, ile miast. Kafel jest więc płytą, nie szybką.

   ŚWIATŁO. Ten dział ma w zamówieniu grafik zapisane światło TWARDE, o ostrym
   brzegu cienia — odwrotnie niż działy północne. Dlatego cień pod kamieniem
   jest przesunięty i BEZ rozmycia; nigdzie indziej w serwisie takiego nie ma
   i to jest tu jedyna rzecz zrobiona wbrew wspólnemu nawykowi.

   ⚠ Szerokość kafla i układ pasa narzuca `zdobienia.css` regułą `.zd-pas > *`
   z `!important`. Nie walczymy z nią — grid niżej jest zapasą na wypadek,
   gdyby skrypt nie wystartował.

   ⛔ TRÓJKI HSL BEZ hsl(). Heks unieważnia całe tło sekcji bez błędu w konsoli.
   ══════════════════════════════════════════════════════════════════════ */

.tgr-strona {
	--marmur:    42 24% 72%;
	--morze-eg:  196 52% 50%;
	--terakota:  18 54% 50%;
	--zloto-b:   44 62% 56%;
	--oliwka-gr: 74 26% 44%;
	--kamien:    36 15% 19%;   /* lico płyty — wapień w pełnym słońcu, wyraźnie jaśniejszy od gruntu sekcji */
}

#tgr-miejsca   { --ton: var( --marmur );   --ton2: var( --morze-eg ); --grunt: 40 16% 11%; --grunt-d: 38 20% 7%; }
#tgr-opowiesci { --ton: var( --terakota ); --ton2: var( --zloto-b );  --grunt: 18 22% 10%; --grunt-d: 16 26% 6%; }

/* ---- ziemia, na której stoją ----
   Kresa biegnie przez całą szerokość pasa i zostaje w miejscu, gdy kamienie
   jadą w bok. To ona robi z rzędu kafli „ustawione", a nie „poskładane". */
.tgr-znaki {
	display: grid; gap: 18px;
	grid-template-columns: repeat( auto-fit, minmax( 272px, 1fr ) );
	border-bottom: 1px solid hsl( var( --marmur ) / .32 );
	box-shadow: 0 2px 24px -10px hsl( var( --morze-eg ) / .85 );
	padding-bottom: 20px;
}
.tgr-znaki--para { grid-template-columns: repeat( 2, minmax( 0, 460px ) ); justify-content: start; }

/* Cztery kamienie naraz zamiast trzech. Warstwa wspólna daje panelom
   `clamp( 300px, 29vw, 430px )` z `!important`; biję to wyższą szczegółowością
   (0,2,0 przeciw 0,1,0), bo napis na kamieniu jest krótki i nie potrzebuje
   czterystu pikseli — a im więcej widać naraz, tym mniej trzeba przewijać. */
.zd-pas > .tgr-znak { flex: 0 0 clamp( 250px, 20vw, 300px ) !important; }
@media ( max-width: 720px ) { .tgr-znaki--para { grid-template-columns: 1fr; } }

/* ---- kamień ---- */
.tgr-znak {
	position: relative; display: flex; flex-direction: column;
	padding: 20px 22px 18px; text-decoration: none;
	border-radius: 0;
	background: linear-gradient( 172deg, hsl( var( --kamien ) ), hsl( 32 12% 11% ) );
	border: 1px solid hsl( var( --marmur ) / .16 );
	border-top-color: hsl( var( --marmur ) / .66 );
	box-shadow: 6px 8px 0 -1px rgba( 0, 0, 0, .82 );
	transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s;
}
/* ANIMACJI WEJŚCIA TU NIE MA I MIEĆ NIE BĘDZIE. Stała tu klatka kluczowa
   `from { opacity: 0 }` z `fill-mode: both`. Skutek zmierzony 2026-09-18 na
   żywej stronie: wszystkie dziewięć kamieni miało `opacity: 0`, czyli TREŚĆ
   BYŁA NIEWIDOCZNA. Animacja, która nie ruszy — bo karta jest w tle, bo
   przeglądarka dławi kadry, bo cokolwiek — zostawia element w klatce
   początkowej na zawsze. Widoczność treści nie może zależeć od tego, czy
   coś się odegrało. Zgłosił Przemo: „nie widzę tego wszystkiego”. */

.tgr-znak:hover, .tgr-znak:focus-visible {
	transform: translate( -2px, -3px );
	box-shadow: 9px 12px 0 -1px rgba( 0, 0, 0, .86 );
	border-top-color: hsl( var( --zloto-b ) / .8 );
}
.tgr-znak:focus-visible { outline: 2px solid hsl( var( --zloto-b ) ); outline-offset: 3px; }

/* ---- napis na licu ---- */
.tgr-znak__czas {
	display: block; padding-bottom: 11px;
	border-bottom: 1px solid hsl( var( --marmur ) / .17 );
	font: 300 10.5px/1.3 var( --sans ); letter-spacing: .24em; text-transform: uppercase;
	color: hsl( var( --marmur ) / .84 );
}
.tgr-znak__nazwa {
	margin: 15px 0 0; font: 400 clamp( 1.42rem, 1.85vw, 1.76rem )/1.1 var( --serif );
	color: var( --tekst-mocny ); text-wrap: balance;
}
.tgr-znak__gdzie {
	display: block; margin-top: 7px;
	font: 300 12.5px/1.5 var( --sans ); letter-spacing: .03em;
	color: hsl( var( --morze-eg ) / .95 );
}
.tgr-znak__teza {
	margin: 14px 0 0; font: 300 14.5px/1.6 var( --sans ); color: var( --tekst );
}
.tgr-znak__stopa {
	margin-top: auto; padding-top: 16px;
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	border-top: 1px solid hsl( var( --marmur ) / .13 );
}
.tgr-znak__stopa b {
	font: 300 10.5px/1 var( --sans ); letter-spacing: .18em; text-transform: uppercase;
	color: var( --tekst-slaby );
}
.tgr-znak__stopa em {
	display: inline-flex; align-items: baseline; gap: 7px; font-style: normal;
	font: 400 12px/1 var( --sans ); letter-spacing: .13em; text-transform: uppercase;
	color: hsl( var( --zloto-b ) );
}
.tgr-znak__stopa em i { font-style: normal; transition: transform .18s ease-out; }
.tgr-znak:hover .tgr-znak__stopa em i { transform: translateX( 4px ); }

/* W pasie akapit tezy bywa przycinany do siedmiu wierszy przez warstwę
   wspólną; tu wystarczą trzy — zdania są krótkie i mają być przeczytane
   w całości, a nie urwane w połowie. */
.zd-pas--bloki > .tgr-znak p:first-of-type { -webkit-line-clamp: 4; }

@media ( prefers-reduced-motion: reduce ) {
	.tgr-znak { transition: border-color .18s, box-shadow .18s; }
	.tgr-znak:hover, .tgr-znak:focus-visible { transform: none; }
	.tgr-znak:hover .tgr-znak__stopa em i { transform: none; }
}