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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tbg-sekcja,
.tbg-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. */
.tbg-sekcja:not( .tbg-sekcja--tlo )::before,
.tbg-hero:not( .tbg-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(). */
#tbg-hero        { --ton: var( --lod );        --ton2: var( --las );        --grunt: 214 34% 10%; --grunt-d: 218 38% 6%; }
#tbg-brama       { --ton: var( --noc );        --ton2: var( --lod );        --grunt: 218 30% 9%;  --grunt-d: 222 34% 5%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

@media ( prefers-reduced-motion: reduce ) {
	.tbg-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. */
.tbg-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. */
.tbg-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 `.tbg-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,
.tbg-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. */
.tbg-karb--wspolczesny   { color: hsl( var( --zloto-j ) ); }
.tbg-karb--wspolczesny .tbg-karb__n.jest   { background: hsl( var( --zloto-j ) ); }
.tbg-karb--pozniejszy    { color: hsl( var( --ochra-j ) ); }
.tbg-karb--pozniejszy .tbg-karb__n.jest    { background: hsl( var( --ochra-j ) ); }
.tbg-karb--folklor       { color: hsl( var( --sol-j ) ); }
.tbg-karb--folklor .tbg-karb__n.jest       { background: hsl( var( --sol-j ) ); }
.tbg-karb--rekonstrukcja { color: hsl( 34 8% 58% ); }
.tbg-karb--rekonstrukcja .tbg-karb__n.jest { background: hsl( 34 8% 58% ); }

/* Okno w hero: barwy z palety TEGO działu, nie z klonu. */
.tbg-strona .tbg-hero .tbg-okno.zd-okno,
.tbg-strona .tbg-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. ═════════════════════════════════ */

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

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

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

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

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

.tbg-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 ---- */
.tbg-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;
}
.tbg-szyna__dom i { font-style: normal; font-size: 15px; line-height: 1; color: hsl( var( --zloto-g ) ); }
.tbg-szyna__dom b {
	font: 400 13.5px/1 var( --sans ); letter-spacing: .12em; text-transform: uppercase;
	color: var( --tekst-mocny );
}
.tbg-szyna__dom span { font: 300 12.5px/1 var( --sans ); color: var( --tekst-slaby ); }
.tbg-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 );
}
.tbg-szyna__dom:focus-visible { outline: 2px solid hsl( var( --zloto-g ) ); outline-offset: 3px; }

/* ---- gdzie jestem ---- */
.tbg-szyna__lista {
	display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
	margin: 0; padding: 0; list-style: none;
}
.tbg-szyna__lista li { display: flex; align-items: center; }
.tbg-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. */
.tbg-szyna__lista li.tbg-szyna__prog::before {
	width: 1px; height: 14px; margin: 0 16px; background: hsl( var( --marmur ) / .3 );
}
.tbg-szyna__lista a,
.tbg-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;
}
.tbg-szyna__lista a:hover { color: var( --tekst-mocny ); border-bottom-color: hsl( var( --zloto-g ) / .75 ); }
.tbg-szyna__lista a:focus-visible { outline: 2px solid hsl( var( --zloto-g ) ); outline-offset: 2px; }
.tbg-szyna__lista [aria-current="page"] {
	color: hsl( var( --cynober-g ) ); border-bottom-color: hsl( var( --cynober-g ) );
}

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

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

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

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

#tbg-miejsca   { --ton: var( --marmur );   --ton2: var( --morze-eg ); --grunt: 40 16% 11%; --grunt-d: 38 20% 7%; }
#tbg-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". */
.tbg-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;
}
.tbg-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 > .tbg-znak { flex: 0 0 clamp( 250px, 20vw, 300px ) !important; }
@media ( max-width: 720px ) { .tbg-znaki--para { grid-template-columns: 1fr; } }

/* ---- kamień ---- */
.tbg-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”. */

.tbg-znak:hover, .tbg-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 );
}
.tbg-znak:focus-visible { outline: 2px solid hsl( var( --zloto-b ) ); outline-offset: 3px; }

/* ---- napis na licu ---- */
.tbg-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 );
}
.tbg-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;
}
.tbg-znak__gdzie {
	display: block; margin-top: 7px;
	font: 300 12.5px/1.5 var( --sans ); letter-spacing: .03em;
	color: hsl( var( --morze-eg ) / .95 );
}
.tbg-znak__teza {
	margin: 14px 0 0; font: 300 14.5px/1.6 var( --sans ); color: var( --tekst );
}
.tbg-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 );
}
.tbg-znak__stopa b {
	font: 300 10.5px/1 var( --sans ); letter-spacing: .18em; text-transform: uppercase;
	color: var( --tekst-slaby );
}
.tbg-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 ) );
}
.tbg-znak__stopa em i { font-style: normal; transition: transform .18s ease-out; }
.tbg-znak:hover .tbg-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 > .tbg-znak p:first-of-type { -webkit-line-clamp: 4; }

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

/* ═══════════════════════════════════════════════════════════════════════
   OSTATNIE SŁOWO — BARWA BUŁGARII (2026-09-18).

   Arkusz jest klonem greckiego, a tamten klonem arktycznego i palestyńskiego,
   więc niesie w sobie cztery cudze palety poprzypisywane DALEJ w pliku. Ten
   blok stoi na końcu i ma ostatnie słowo — patrz [[arkusz-klon-niesie-cudza-palete]].

   MATERIAŁ tej ziemi, a nie ładne barwy: złoto z Warny (najstarsze obrobione
   na świecie), miedź z Ajbunaru (najstarsza kopalnia w Europie), róża
   damasceńska z Doliny Róż, wapień Rodopów, dąb i tytoń, Morze Czarne.

   ŚWIATŁO odwrotne niż u sąsiada z południa: w Grecji cień ma twardy brzeg,
   tutaj doliny Rodopów stoją we mgle i cień jest rozmyty. Dlatego kamień
   graniczny, przeniesiony z `/grecja/`, dostaje tu cień MIĘKKI — ta sama
   forma, inne światło.

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

.tbg-strona {
	--tlo:      #0b0907;
	--panel:    rgba( 26, 21, 17, .86 );
	--obrys:    rgba( 198, 172, 126, .28 );
	--wlos:     rgba( 198, 172, 126, .13 );

	--zloto-w:  44 58% 54%;   /* złoto z Warny */
	--miedz-a:  20 52% 46%;   /* miedź z Ajbunaru */
	--roza:    342 44% 52%;   /* róża damasceńska */
	--wapien-r: 36 16% 68%;   /* wapień Rodopów */
	--morze-cz:204 38% 42%;   /* Morze Czarne */
	--debina:   82 22% 40%;   /* dąb i tytoń */
	--kamien-b: 30 12% 17%;   /* lico płyty */

	--etyk:        #c2ae8e;
	--tekst:       #bcae9c;
	--tekst-slaby: #8b8172;
	--tekst-mocny: #f2ebe0;
}

/* ZAPAS NA KAŻDĄ SEKCJĘ. Sekcja bez przypisanego tonu spada na wartość
   domyślną, wygląda na szarą i NIC tego nie zgłasza — zmierzone przy kilku
   działach. Ta reguła stoi PRZED przypisaniami po identyfikatorze, więc każda
   nowa sekcja dostaje coś sensownego, zanim jej ton zostanie dobrany. */
.tbg-sekcja, .tbg-hero {
	--ton:  var( --zloto-w );
	--ton2: var( --miedz-a );
	--grunt: 32 14% 10%;
	--grunt-d: 28 18% 6%;
}

#tbg-hero      { --ton: var( --zloto-w );  --ton2: var( --roza );     --grunt: 40 18% 10%; --grunt-d: 36 22% 6%; }
#tbg-miejsca   { --ton: var( --wapien-r ); --ton2: var( --zloto-w );  --grunt: 34 14% 11%; --grunt-d: 30 18% 7%; }
#tbg-opowiesci { --ton: var( --roza );     --ton2: var( --debina );   --grunt: 342 16% 10%; --grunt-d: 344 20% 6%; }
#tbg-brama     { --ton: var( --morze-cz ); --ton2: var( --wapien-r ); --grunt: 204 20% 9%; --grunt-d: 208 24% 6%; }

/* ── kamień graniczny: ta sama forma co w Grecji, inne światło ──
   Grecki kamień rzuca cień przesunięty i bez rozmycia, bo tam światło jest
   twarde. Tutaj cień opada pionowo i jest rozmyty — to jest mgła w dolinie,
   nie południe nad marmurem. */
.tbg-znak {
	position: relative; overflow: hidden;
	background: linear-gradient( 172deg, hsl( var( --kamien-b ) ), hsl( 26 11% 10% ) );
	border: 1px solid hsl( var( --wapien-r ) / .15 );
	border-top-color: hsl( var( --wapien-r ) / .15 );
	box-shadow: 0 16px 34px -20px rgba( 0, 0, 0, .95 );
}

/* MARTENICA — podpis wizualny tego działu.
   Pierwszego marca Bułgarzy wiążą sobie na ręce sznureczek skręcony z białej
   i czerwonej nići i noszą go, dopóki nie zobaczą bociana albo kwitnącego
   drzewa. Każdy kamień jest tu przewiązany taką nitką — to nie ozdoba, tylko
   górna krawędź płyty, jedyne miejsce, w którym ten dział pozwala sobie na
   pełną barwę. */
.tbg-znak::before {
	content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: repeating-linear-gradient( 66deg,
		hsl( 352 56% 45% ) 0 5px, hsl( 38 28% 90% ) 5px 10px );
	opacity: .78; transition: opacity .18s;
}
.tbg-znak:hover::before, .tbg-znak:focus-visible::before { opacity: 1; }
.tbg-znak:hover, .tbg-znak:focus-visible {
	transform: translateY( -3px );
	box-shadow: 0 22px 40px -20px rgba( 0, 0, 0, 1 );
	border-color: hsl( var( --zloto-w ) / .38 );
}
.tbg-znak:focus-visible { outline: 2px solid hsl( var( --zloto-w ) ); outline-offset: 3px; }

.tbg-znak__czas  { color: hsl( var( --wapien-r ) / .86 ); border-bottom-color: hsl( var( --wapien-r ) / .16 ); }
.tbg-znak__gdzie { color: hsl( var( --morze-cz ) / .96 ); }
.tbg-znak__stopa { border-top-color: hsl( var( --wapien-r ) / .13 ); }
.tbg-znak__stopa em { color: hsl( var( --zloto-w ) ); }
.tbg-znaki {
	border-bottom: 1px solid hsl( var( --wapien-r ) / .28 );
	box-shadow: 0 2px 26px -12px hsl( var( --zloto-w ) / .9 );
}

/* szyna powrotu: ta sama nitka na przycisku */
.tbg-szyna { border-bottom-color: hsl( var( --wapien-r ) / .20 ); }
.tbg-szyna--stopka { border-top-color: hsl( var( --wapien-r ) / .20 ); }
.tbg-szyna__dom {
	position: relative; overflow: hidden;
	background: linear-gradient( 172deg, hsl( var( --kamien-b ) ), hsl( 26 11% 10% ) );
	border-color: hsl( var( --wapien-r ) / .20 );
	border-top-color: hsl( var( --wapien-r ) / .20 );
	box-shadow: 0 10px 22px -14px rgba( 0, 0, 0, .95 );
}
.tbg-szyna__dom::before {
	content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: repeating-linear-gradient( 66deg,
		hsl( 352 56% 45% ) 0 5px, hsl( 38 28% 90% ) 5px 10px );
	opacity: .8;
}
.tbg-szyna__dom:hover { transform: translateY( -2px ); box-shadow: 0 14px 26px -14px rgba( 0, 0, 0, 1 ); }
.tbg-szyna__dom i { color: hsl( var( --zloto-w ) ); }
.tbg-szyna__lista li + li::before { background: hsl( var( --wapien-r ) / .32 ); }
.tbg-szyna__lista li.tbg-szyna__prog::before { background: hsl( var( --wapien-r ) / .28 ); }
.tbg-szyna__lista a:hover { border-bottom-color: hsl( var( --zloto-w ) / .75 ); }
.tbg-szyna__lista [aria-current="page"] { color: hsl( var( --roza ) ); border-bottom-color: hsl( var( --roza ) ); }

@media ( prefers-reduced-motion: reduce ) {
	.tbg-znak:hover, .tbg-znak:focus-visible, .tbg-szyna__dom:hover { transform: none; }
}
/* ---- ton każdej sekcji strony głównej ----
   Dobór rzeczowy, nie ozdobny: najstarsze warstwy dostają złoto i miedź, bo
   z tego są ich znaleziska; Trakowie — kamień grobowca; Rzym — Morze Czarne
   i droga wzdłuż wybrzeża; państwo — złoto ikony; Osmanowie — dąb i tytoń
   Rodopów; odrodzenie i wiek dwudziesty — róża, bo to ona stała się znakiem
   tego kraju na zewnątrz. */
#tbg-najstarsi   { --ton: var( --zloto-w );  --ton2: var( --miedz-a );  --grunt: 44 20% 10%; --grunt-d: 40 26% 6%; }
#tbg-trakowie-os { --ton: var( --wapien-r ); --ton2: var( --zloto-w );  --grunt: 34 14% 10%; --grunt-d: 30 18% 6%; }
#tbg-rzym        { --ton: var( --morze-cz ); --ton2: var( --wapien-r ); --grunt: 204 22% 9%; --grunt-d: 208 26% 6%; }
#tbg-panstwo     { --ton: var( --zloto-w );  --ton2: var( --roza );     --grunt: 42 22% 10%; --grunt-d: 38 28% 6%; }
#tbg-osmanowie-os{ --ton: var( --debina );   --ton2: var( --miedz-a );  --grunt: 84 18% 9%;  --grunt-d: 80 24% 6%; }
#tbg-odrodzenie  { --ton: var( --roza );     --ton2: var( --zloto-w );  --grunt: 342 16% 10%; --grunt-d: 344 22% 6%; }
#tbg-wiek-xx     { --ton: var( --miedz-a );  --ton2: var( --morze-cz ); --grunt: 20 22% 10%; --grunt-d: 16 28% 6%; }
#tbg-licznik     { --ton: var( --zloto-w );  --ton2: var( --wapien-r ); --grunt: 46 18% 9%;  --grunt-d: 42 24% 5%; }
#tbg-nie-bylo    { --ton: var( --roza );     --ton2: var( --debina );   --grunt: 344 14% 8%; --grunt-d: 346 20% 5%; }

/* ---- ton sekcji warstw głębokich ----
   Dobór z materiału każdej sekcji, nie z upodobania. */
#tbg-bogowie    { --ton: var( --wapien-r ); --ton2: var( --zloto-w );  --grunt: 34 14% 10%; --grunt-d: 30 18% 6%; }
#tbg-kurhany    { --ton: var( --miedz-a );  --ton2: var( --wapien-r ); --grunt: 20 22% 10%; --grunt-d: 16 28% 6%; }
#tbg-skarby     { --ton: var( --zloto-w );  --ton2: var( --miedz-a );  --grunt: 44 22% 10%; --grunt-d: 40 28% 6%; }
#tbg-swiatynie  { --ton: var( --debina );   --ton2: var( --wapien-r ); --grunt: 82 18% 9%;  --grunt-d: 78 24% 6%; }
#tbg-jaskinie   { --ton: var( --wapien-r ); --ton2: var( --morze-cz ); --grunt: 30 12% 9%;  --grunt-d: 26 16% 5%; }
#tbg-figurki    { --ton: var( --miedz-a );  --ton2: var( --zloto-w );  --grunt: 22 20% 10%; --grunt-d: 18 26% 6%; }
#tbg-znaki      { --ton: var( --morze-cz ); --ton2: var( --wapien-r ); --grunt: 204 20% 9%; --grunt-d: 208 26% 6%; }
#tbg-koniec     { --ton: var( --roza );     --ton2: var( --debina );   --grunt: 344 16% 9%; --grunt-d: 346 22% 5%; }
#tbg-nauka      { --ton: var( --zloto-w );  --ton2: var( --roza );     --grunt: 42 20% 10%; --grunt-d: 38 26% 6%; }
#tbg-blaszki    { --ton: var( --zloto-w );  --ton2: var( --morze-cz ); --grunt: 46 22% 10%; --grunt-d: 42 28% 6%; }
#tbg-spor       { --ton: var( --morze-cz ); --ton2: var( --roza );     --grunt: 202 22% 9%; --grunt-d: 206 28% 6%; }
#tbg-madara     { --ton: var( --wapien-r ); --ton2: var( --miedz-a );  --grunt: 32 14% 10%; --grunt-d: 28 20% 6%; }
#tbg-tangra     { --ton: var( --morze-cz ); --ton2: var( --zloto-w );  --grunt: 206 22% 9%; --grunt-d: 210 28% 6%; }
#tbg-kalendarz  { --ton: var( --debina );   --ton2: var( --zloto-w );  --grunt: 84 16% 9%;  --grunt-d: 80 22% 6%; }
#tbg-glagolica  { --ton: var( --zloto-w );  --ton2: var( --wapien-r ); --grunt: 44 20% 10%; --grunt-d: 40 26% 6%; }
#tbg-cyrylica   { --ton: var( --miedz-a );  --ton2: var( --zloto-w );  --grunt: 20 22% 10%; --grunt-d: 16 28% 6%; }
#tbg-ksiegi     { --ton: var( --debina );   --ton2: var( --morze-cz ); --grunt: 82 18% 9%;  --grunt-d: 78 24% 6%; }
#tbg-nauka-bog  { --ton: var( --roza );     --ton2: var( --debina );   --grunt: 342 18% 9%; --grunt-d: 344 24% 6%; }
#tbg-zasieg     { --ton: var( --morze-cz ); --ton2: var( --roza );     --grunt: 204 20% 9%; --grunt-d: 208 26% 6%; }
#tbg-zrodla     { --ton: var( --wapien-r ); --ton2: var( --debina );   --grunt: 32 12% 9%;  --grunt-d: 28 18% 5%; }
#tbg-woda       { --ton: var( --morze-cz ); --ton2: var( --debina );   --grunt: 200 22% 9%; --grunt-d: 204 28% 6%; }
#tbg-chmura     { --ton: var( --wapien-r ); --ton2: var( --morze-cz ); --grunt: 210 16% 9%; --grunt-d: 214 22% 6%; }
#tbg-dom        { --ton: var( --miedz-a );  --ton2: var( --debina );   --grunt: 22 20% 10%; --grunt-d: 18 26% 6%; }
#tbg-los        { --ton: var( --roza );     --ton2: var( --zloto-w );  --grunt: 340 16% 9%; --grunt-d: 342 22% 6%; }
#tbg-wiosna     { --ton: var( --roza );     --ton2: var( --debina );   --grunt: 342 18% 10%; --grunt-d: 344 24% 6%; }
#tbg-zima       { --ton: var( --morze-cz ); --ton2: var( --wapien-r ); --grunt: 208 20% 9%; --grunt-d: 212 26% 6%; }
#tbg-ogien      { --ton: var( --miedz-a );  --ton2: var( --roza );     --grunt: 18 24% 10%; --grunt-d: 14 30% 6%; }
#tbg-lato       { --ton: var( --debina );   --ton2: var( --zloto-w );  --grunt: 84 18% 9%;  --grunt-d: 80 24% 6%; }
#tbg-prowincja  { --ton: var( --debina );   --ton2: var( --miedz-a );  --grunt: 80 18% 9%;  --grunt-d: 76 24% 6%; }
#tbg-razem      { --ton: var( --wapien-r ); --ton2: var( --roza );     --grunt: 34 14% 10%; --grunt-d: 30 20% 6%; }
#tbg-teraz      { --ton: var( --roza );     --ton2: var( --morze-cz ); --grunt: 342 16% 9%; --grunt-d: 344 22% 6%; }
#tbg-piesni     { --ton: var( --miedz-a );  --ton2: var( --roza );     --grunt: 18 22% 10%; --grunt-d: 14 28% 6%; }


/* ═══════════════════════════════════════════════════════════════════════
   PRZEKRÓJ PRZEZ WARSTWY — oprawa dwóch torów czasu (2026-09-18).

   SKĄD TA FORMA. Ta ziemia czyta się dosłownie jako przekrój: kopiec
   w Karanowie ma dwanaście metrów i siedem poziomów ułożonych jeden na drugim,
   i to od tej kolumny liczy się chronologię całych Bałkanów. Tor ludów i oś
   czasu wierzeń dostają więc wygląd ściany wykopu: im starsza warstwa, tym
   ciemniejsza i głębiej osadzona.

   Odcień liczy się z `--nr`, który moduł wstawia każdemu kaflowi w atrybucie
   `style`. To nie jest ozdoba: numer w torze JEST pozycją w czasie, więc barwa
   niesie tę samą informację co kolejność. Pierwszy kafel — szóste tysiąclecie
   p.n.e. — jest najciemniejszy, ostatni — dzisiejszy — najjaśniejszy.

   ZDOBNIK: taśma miernicza. Lewa krawędź każdego kafla ma podziałkę jak
   przymiar wbity w ścianę wykopu. Jeden zdobnik na tor i ani jednego więcej —
   sznurek martenicy należy do kamieni nawigacyjnych i tu go nie ma.

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

#tbg-ludy    { --ton: var( --wapien-r ); --ton2: var( --miedz-a );  --grunt: 30 14% 10%; --grunt-d: 26 18% 6%; }
#tbg-panteon { --ton: var( --zloto-w );  --ton2: var( --morze-cz ); --grunt: 40 20% 11%; --grunt-d: 36 26% 7%; }

/* ---- ziemia pod torem ---- */
#tbg-ludy .tbg-siatka,
#tbg-panteon .tbg-siatka {
	border-bottom: 1px solid hsl( var( --wapien-r ) / .26 );
	box-shadow: 0 2px 26px -14px hsl( var( --zloto-w ) / .9 );
}

/* ---- warstwa ---- */
#tbg-ludy .zd-klocek,
#tbg-panteon .zd-klocek {
	position: relative;
	border-radius: 0;
	padding-left: 26px;
	background:
		linear-gradient( 172deg,
			hsl( 32 14% calc( 12% + var( --nr, 0 ) * .6% ) ),
			hsl( 28 12% calc(  8% + var( --nr, 0 ) * .4% ) ) );
	border: 1px solid hsl( var( --wapien-r ) / calc( .10 + var( --nr, 0 ) * .012 ) );
	border-left: 0;
	box-shadow: 0 14px 30px -22px rgba( 0, 0, 0, .95 );
	transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s;
}

/* ---- taśma miernicza na lewej krawędzi ---- */
#tbg-ludy .zd-klocek::before,
#tbg-panteon .zd-klocek::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
	background:
		repeating-linear-gradient( 180deg,
			hsl( var( --wapien-r ) / .55 ) 0 1px,
			transparent 1px 9px ),
		linear-gradient( 180deg,
			hsl( var( --zloto-w ) / calc( .16 + var( --nr, 0 ) * .05 ) ),
			transparent 70% );
	border-right: 1px solid hsl( var( --wapien-r ) / .22 );
}

#tbg-ludy .zd-klocek:hover,
#tbg-ludy .zd-klocek:focus-visible,
#tbg-panteon .zd-klocek:hover,
#tbg-panteon .zd-klocek:focus-visible {
	transform: translateY( -3px );
	box-shadow: 0 22px 38px -22px rgba( 0, 0, 0, 1 );
	border-color: hsl( var( --zloto-w ) / .42 );
}
#tbg-ludy .zd-klocek:focus-visible,
#tbg-panteon .zd-klocek:focus-visible { outline: 2px solid hsl( var( --zloto-w ) ); outline-offset: 3px; }

/* ---- data jako etykieta wykopu ---- */
#tbg-ludy .tbg-kafel__nad,
#tbg-panteon .tbg-kafel__nad {
	color: hsl( var( --wapien-r ) / .9 );
	letter-spacing: .2em;
}
#tbg-ludy .tbg-kafel__nad i,
#tbg-panteon .tbg-kafel__nad i { color: hsl( var( --zloto-w ) ); }

/* ---- żeby było widać, że to się otwiera ---- */
#tbg-ludy .zd-wiecej,
#tbg-panteon .zd-wiecej {
	display: inline-flex; align-items: baseline; gap: 7px; margin-top: 14px;
	padding-top: 12px; border-top: 1px solid hsl( var( --wapien-r ) / .14 );
	font: 400 11.5px/1 var( --sans ); letter-spacing: .14em; text-transform: uppercase;
	color: hsl( var( --zloto-w ) );
}
#tbg-ludy .zd-wiecej::after,
#tbg-panteon .zd-wiecej::after { content: '\2192'; transition: transform .18s ease-out; }
#tbg-ludy .zd-klocek:hover .zd-wiecej::after,
#tbg-panteon .zd-klocek:hover .zd-wiecej::after { transform: translateX( 4px ); }

@media ( prefers-reduced-motion: reduce ) {
	#tbg-ludy .zd-klocek:hover, #tbg-panteon .zd-klocek:hover,
	#tbg-ludy .zd-klocek:focus-visible, #tbg-panteon .zd-klocek:focus-visible { transform: none; }
	#tbg-ludy .zd-klocek:hover .zd-wiecej::after,
	#tbg-panteon .zd-klocek:hover .zd-wiecej::after { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PANEL WARSTW WIERZEŃ (2026-09-18) — rzecz, o którą Przemo prosił trzy razy:
   interaktywne połączenie LUDU z jego BOGAMI, jego MITAMI i jego MAGIĄ.

   OŚ JEST RYSOWANA Z PRAWDZIWYCH DAT i to jest cały jej sens. Pasy leżą tam,
   gdzie naprawdę leżą w czasie, i wchodzą w osobne tory, gdy się nakładają —
   dzięki temu widać rzeczy, których lista nie pokaże: że Grecy w portach
   nachodzą na Traków przez siedemset lat i że bogomiłowie mieszczą się
   w środku okresu chrześcijańskiego.

   Barwa pasa liczy się z `--nr`, tak samo jak w torach wyżej: im starsza
   warstwa, tym ciemniejsza. Jedna zasada na cały dział, nie dwie.
   ══════════════════════════════════════════════════════════════════════ */

#tbg-panel-sekcja, #tbg-panel { --ton: var( --zloto-w ); --ton2: var( --morze-cz ); }

.tbg-panel { margin-top: 10px; }
.tbg-panel__blad { color: var( --tekst-slaby ); font: 300 15px/1.6 var( --sans ); }

/* ── oś ── */
.tbg-os {
	position: relative;
	height: calc( var( --torow, 3 ) * 44px );
	margin: 4px 0 0;
	border-bottom: 1px solid hsl( var( --wapien-r ) / .30 );
}
.tbg-os__pas {
	position: absolute; top: calc( var( --tor, 0 ) * 44px ); height: 36px;
	display: flex; align-items: center; padding: 0 10px;
	border: 1px solid hsl( var( --wapien-r ) / calc( .14 + var( --nr, 0 ) * .02 ) );
	border-radius: 0; cursor: pointer; overflow: visible;
	background: linear-gradient( 172deg,
		hsl( 32 15% calc( 13% + var( --nr, 0 ) * .9% ) ),
		hsl( 28 12% calc(  9% + var( --nr, 0 ) * .6% ) ) );
	transition: transform .16s ease-out, border-color .16s, box-shadow .16s;
}
.tbg-os__pas::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
	background: hsl( var( --zloto-w ) / calc( .2 + var( --nr, 0 ) * .07 ) );
}
.tbg-os__nazwa {
	font: 400 12px/1 var( --sans ); letter-spacing: .05em; color: var( --tekst );
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbg-os__czas { display: none; }
.tbg-os__pas:hover, .tbg-os__pas:focus-visible {
	transform: translateY( -2px ); border-color: hsl( var( --zloto-w ) / .5 );
	box-shadow: 0 10px 20px -12px rgba( 0, 0, 0, 1 );
}
.tbg-os__pas:focus-visible { outline: 2px solid hsl( var( --zloto-w ) ); outline-offset: 2px; }
/* pełna nazwa wyskakuje nad pas — bo wąskie pasy nie mieszczą napisu w środku */
.tbg-os__pas:hover .tbg-os__nazwa,
.tbg-os__pas.jest .tbg-os__nazwa {
	position: absolute; left: -1px; bottom: calc( 100% + 3px ); overflow: visible;
	padding: 3px 8px; background: hsl( 30 14% 9% ); color: var( --tekst-mocny );
	border: 1px solid hsl( var( --zloto-w ) / .45 ); z-index: 3;
}
.tbg-os__pas.jest {
	border-color: hsl( var( --zloto-w ) / .75 );
	background: linear-gradient( 172deg, hsl( 38 22% 22% ), hsl( 32 16% 13% ) );
}
.tbg-os__pas.jest::before { background: hsl( var( --roza ) ); width: 4px; }

/* podziałka */
.tbg-skala { position: relative; height: 24px; margin-bottom: 26px; }
.tbg-skala__znak {
	position: absolute; top: 5px; transform: translateX( -50% );
	font: 300 10px/1 var( --sans ); letter-spacing: .12em; color: var( --tekst-slaby );
	white-space: nowrap;
}
.tbg-skala__znak::before {
	content: ''; position: absolute; left: 50%; top: -6px; width: 1px; height: 5px;
	background: hsl( var( --wapien-r ) / .4 );
}

/* ── głowa wybranej warstwy ── */
.tbg-glowa { margin: 0 0 22px; padding-left: 14px; border-left: 3px solid hsl( var( --roza ) / .8 ); }
.tbg-glowa__czas {
	margin: 0 0 6px; font: 300 11px/1 var( --sans ); letter-spacing: .24em;
	text-transform: uppercase; color: hsl( var( --wapien-r ) / .86 );
}
.tbg-glowa__nazwa { margin: 0 0 8px; font: 400 clamp( 1.5rem, 2.2vw, 2rem )/1.12 var( --serif ); color: var( --tekst-mocny ); }
.tbg-glowa__teza { margin: 0; max-width: 78ch; font: 300 16px/1.62 var( --sans ); color: var( --tekst ); }

/* ── trzy tory ── */
.tbg-lany { display: grid; gap: 20px; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
@media ( max-width: 900px ) { .tbg-lany { grid-template-columns: 1fr; } }
.tbg-lan__tytul {
	margin: 0 0 12px; padding-bottom: 8px;
	border-bottom: 1px solid hsl( var( --wapien-r ) / .22 );
	font: 400 11px/1 var( --sans ); letter-spacing: .22em; text-transform: uppercase;
	color: hsl( var( --wapien-r ) / .92 );
}
.tbg-lan__tytul i { font-style: normal; margin-right: 9px; color: hsl( var( --zloto-w ) ); }
.tbg-lan__ciag { display: flex; flex-direction: column; gap: 8px; }
.tbg-lan__pusto { margin: 0; font: 300 14px/1.5 var( --sans ); color: var( --tekst-slaby ); }

.tbg-poz {
	display: block; width: 100%; text-align: left; cursor: pointer;
	padding: 11px 14px; border-radius: 0;
	background: linear-gradient( 172deg, hsl( 32 12% 15% ), hsl( 28 10% 11% ) );
	border: 1px solid hsl( var( --wapien-r ) / .14 );
	border-left: 3px solid hsl( var( --zloto-w ) / .3 );
	transition: transform .14s ease-out, border-color .14s, background .14s;
}
.tbg-poz:hover { transform: translateX( 3px ); border-left-color: hsl( var( --zloto-w ) ); }
.tbg-poz:focus-visible { outline: 2px solid hsl( var( --zloto-w ) ); outline-offset: 2px; }
.tbg-poz.jest { border-left-color: hsl( var( --roza ) ); background: linear-gradient( 172deg, hsl( 36 18% 20% ), hsl( 30 13% 13% ) ); }
.tbg-poz__n { display: block; font: 400 15.5px/1.3 var( --serif ); color: var( --tekst-mocny ); }
.tbg-poz__r { display: block; margin-top: 3px; font: 300 11.5px/1.3 var( --sans ); letter-spacing: .06em; color: hsl( var( --morze-cz ) / .95 ); }

/* ── szczegół ── */
.tbg-szczegol { margin-top: 22px; }
.tbg-szczegol.jest {
	padding: 22px 24px;
	background: linear-gradient( 168deg, hsl( 34 14% 13% ), hsl( 28 11% 9% ) );
	border: 1px solid hsl( var( --wapien-r ) / .2 );
	border-top: 2px solid hsl( var( --roza ) / .8 );
	box-shadow: 0 16px 34px -24px rgba( 0, 0, 0, 1 );
}
.tbg-szczegol__nad {
	margin: 0 0 8px; font: 300 10.5px/1 var( --sans ); letter-spacing: .22em;
	text-transform: uppercase; color: hsl( var( --wapien-r ) / .85 );
}
.tbg-szczegol__nad i { font-style: normal; margin-right: 9px; color: hsl( var( --zloto-w ) ); }
.tbg-szczegol__nazwa { margin: 0 0 10px; font: 400 clamp( 1.3rem, 1.8vw, 1.65rem )/1.15 var( --serif ); color: var( --tekst-mocny ); }
.tbg-szczegol__tekst { margin: 0; max-width: 82ch; font: 300 16px/1.66 var( --sans ); color: var( --tekst ); }

@media ( prefers-reduced-motion: reduce ) {
	.tbg-os__pas, .tbg-poz { transition: border-color .14s; }
	.tbg-os__pas:hover, .tbg-os__pas:focus-visible, .tbg-poz:hover { transform: none; }
}
.tbg-skala { height: 44px; }
.tbg-skala__nota { position: absolute; left: 0; top: 24px; margin: 0; font: 300 11.5px/1.4 var( --sans ); color: var( --tekst-slaby ); }