/* Bałtowie - ostatni poganie Europy, opisani cudzą ręką.
 *
 * Arkusz wyprowadzony ze Słowian, bo oba działy mają ten sam kształt i ten
 * sam karb poświadczenia. Wszystko poza tym jest inne, bo koloryt ma mówić
 * o tym miejscu, a nie o sąsiednim.
 *
 * BURSZTYN I STAL. Ciepły bursztyn to jedyna rzecz, po której to wybrzeże
 * trafiło do pisma tysiąc lat przed chrztem, i jedyna, którą stąd wywożono
 * na południe. Zimna stal to ci, którzy tę wiarę opisali - bo opisali ją
 * wyłącznie ludzie, którzy z nią walczyli. Te dwie barwy stoją naprzeciw
 * siebie na całej stronie, bo naprzeciw siebie stoi cały dział.
 *
 * Grunt jest dębowy: czerń z zielenią, barwa wnętrza gaju, do którego
 * według wszystkich zapisów nie wolno było wejść.
 */
.tbl-strona {
	--tlo: #07151d; --dno: #07151d;
	--wlos: rgba( 212, 216, 208, .13 ); --obrys: rgba( 217, 150, 43, .26 );
	--len: #d6e3e4; --len-j: #f2e8d5;
	--ochra: #e2b66f; --ochra-j: #e2b66f;
	--rdza: #a2b7c0; --rdza-j: #a2b7c0;
	--tekst: #a2b7c0; --tekst-slaby: #a2b7c0; --tekst-mocny: #f2e8d5; --etyk: #a2b7c0;
	--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 15px var( --sans );
	background:
		/* splot płócienny: dwa kierunki nitek, ledwo widoczne */
		repeating-linear-gradient( 90deg, rgba( 212, 216, 208, .028 ) 0 1px, transparent 1px 4px ),
		repeating-linear-gradient( 0deg, rgba( 212, 216, 208, .022 ) 0 1px, transparent 1px 4px ),
		radial-gradient( 1150px 580px at 50% -12%, rgba( 217, 150, 43, .13 ), transparent 70% ),
		radial-gradient( 820px 500px at 12% 46%, rgba( 110, 133, 146, .075 ), transparent 72% ),
		radial-gradient( 700px 460px at 88% 74%, rgba( 212, 216, 208, .05 ), transparent 70% ),
		var( --tlo );
	overflow-x: clip;
}
.tbl-strona *, .tbl-strona *::before, .tbl-strona *::after { box-sizing: border-box; }
body:has( .tbl-strona ) .wp-site-blocks > header, body:has( .tbl-strona ) header.wp-block-template-part, body:has( .tbl-strona ) .wp-site-blocks > footer, body:has( .tbl-strona ) footer.wp-block-template-part, body:has( .tbl-strona ) .wp-block-post-title { display: none !important; }
body:has( .tbl-strona ) .wp-site-blocks, body:has( .tbl-strona ) .wp-block-group, body:has( .tbl-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tbl-strona ) .wp-block-post-content > *, body:has( .tbl-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tbl-strona ) { background: #07151d; }
body:has( .tbl-strona ) .wp-block-post-content > .tbl-strona, body:has( .tbl-strona ) .entry-content > .tbl-strona, .tbl-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tbl-strona button { font-family: inherit; }

/* ── ścieżka ── */
.tbl-sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0 6px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tbl-sciezka i { font-style: normal; color: var( --etyk ); }
.tbl-sciezka b { font-weight: 400; color: var( --ochra-j ); }
.tbl-poziom { margin: 0 0 0 auto; }
.tbl-poziom span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var( --tekst ); }
.tbl-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --ochra ); box-shadow: 0 0 10px var( --ochra ); }

/* ── nagłówek ── */
.tbl-hero { max-width: 84ch; padding: 44px 0 8px; }
.tbl-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tbl-tytul { margin: 0; font: 500 clamp( 44px, 5.4vw, 80px )/1.02 var( --serif ); color: var( --ochra-j ); letter-spacing: -.01em; }
.tbl-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .13em; line-height: 1.5; color: var( --len ); }
.tbl-lead { margin: 24px 0 0; font-size: 16.5px; line-height: 1.78; color: var( --tekst-mocny ); }

/* Waga w nagłówku: jedna liczba i jedno zdanie. To najmocniejsza rzecz,
   jaką ta strona ma do powiedzenia, więc dostaje własną ramkę. */
.tbl-hero__waga { display: grid; grid-template-columns: auto minmax( 0, 1fr ); gap: 6px 26px; align-items: center; margin: 30px 0 0; padding: 22px 26px; border: 1px solid var( --obrys ); border-left: 3px solid var( --rdza ); border-radius: 0 20px 20px 0; background: linear-gradient( 100deg, rgba( 110, 133, 146, .12 ), rgba( 217, 150, 43, .05 ) 46%, transparent ); }
.tbl-hero__waga b { font: 500 clamp( 46px, 5vw, 68px )/1 var( --serif ); color: var( --ochra-j ); text-shadow: 0 0 34px rgba( 217, 150, 43, .42 ); }
.tbl-hero__waga span { font-size: 14.5px; line-height: 1.72; color: var( --tekst ); }

/* ── sekcje ── */
.tbl-sekcja { margin: 82px 0 0; }
.tbl-sekcja--scisla { position: relative; padding: 36px 32px 40px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 940px 440px at 50% 0%, rgba( 217, 150, 43, .1 ), transparent 66% ), linear-gradient( 180deg, rgba( 25, 21, 17, .86 ), rgba( 12, 10, 8, .95 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 ); }
.tbl-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tbl-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3.1vw, 42px )/1.14 var( --serif ); color: var( --ochra-j ); }
.tbl-sekcja__lead { max-width: 80ch; margin: 14px 0 0; font-size: 15px; line-height: 1.76; color: var( --tekst ); }
.tbl-sekcja--echa .tbl-sekcja__tytul { color: var( --len-j ); }
.tbl-sekcja--zywe { border-color: rgba( 212, 216, 208, .16 ); }
.tbl-sekcja--zywe .tbl-sekcja__tytul { color: var( --len-j ); }

/* ══════════════  KARB - podpis strony  ══════════════
   Cztery nacięcia. Wypełnione świecą ochrą, puste są samym rowkiem.
   Rowek nie znika, bo brakujące poświadczenie jest informacją, a nie pustką. */
.tbl-karb { display: inline-flex; align-items: center; gap: 10px; }
.tbl-karb i { display: inline-flex; gap: 3px; font-style: normal; }
.tbl-karb i b { display: block; width: 3px; height: 15px; border-radius: 1px; }
.tbl-karb i b.jest { background: linear-gradient( 180deg, var( --ochra-j ), var( --ochra ) ); box-shadow: 0 0 9px rgba( 217, 150, 43, .6 ); }
.tbl-karb i b.brak { background: rgba( 212, 216, 208, .1 ); box-shadow: inset 0 0 0 1px rgba( 212, 216, 208, .07 ); }
.tbl-karb em { font-style: normal; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --etyk ); }
/* Trzy słabsze stopnie mają nacięcia chłodniejsze - folklor i rekonstrukcja
   nie mają wyglądać tak samo cenne jak zapis z epoki. */
.tbl-karb[ data-stopien="folklor" ] i b.jest { background: linear-gradient( 180deg, var( --len ), #a2b7c0 ); box-shadow: 0 0 8px rgba( 212, 216, 208, .3 ); }
.tbl-karb[ data-stopien="rekonstrukcja" ] i b.jest { background: linear-gradient( 180deg, #a2b7c0, #a2b7c0 ); box-shadow: none; }

/* skala jako sterowanie */
.tbl-skala { display: grid; grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) ); gap: 14px; margin: 26px 0 0; }
.tbl-stopien { display: grid; gap: 10px; padding: 20px 20px 18px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 212, 216, 208, .045 ), rgba( 212, 216, 208, .012 ) ); text-align: left; cursor: pointer; transition: border-color .28s, background .28s, transform .28s, box-shadow .28s; }
.tbl-stopien i { display: inline-flex; gap: 4px; font-style: normal; }
.tbl-stopien i b { display: block; width: 4px; height: 22px; border-radius: 1px; }
.tbl-stopien i b.jest { background: linear-gradient( 180deg, var( --ochra-j ), var( --ochra ) ); box-shadow: 0 0 12px rgba( 217, 150, 43, .55 ); }
.tbl-stopien i b.brak { background: rgba( 212, 216, 208, .1 ); }
.tbl-stopien > b { font: 500 19px var( --serif ); color: var( --len-j ); }
.tbl-stopien > span { font-size: 12.5px; line-height: 1.62; color: var( --tekst-slaby ); }
.tbl-stopien__ile { font-style: normal; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tbl-stopien:hover { border-color: var( --obrys ); background: linear-gradient( 180deg, rgba( 217, 150, 43, .1 ), rgba( 212, 216, 208, .02 ) ); transform: translateY( -2px ); }
.tbl-stopien[ aria-pressed="true" ] { border-color: var( --ochra ); background: linear-gradient( 180deg, rgba( 217, 150, 43, .18 ), rgba( 110, 133, 146, .06 ) ); box-shadow: 0 0 0 1px rgba( 217, 150, 43, .3 ), 0 26px 60px -34px rgba( 217, 150, 43, .55 ); }
.tbl-stopien[ data-stopien="folklor" ] i b.jest { background: linear-gradient( 180deg, var( --len ), #a2b7c0 ); box-shadow: 0 0 10px rgba( 212, 216, 208, .28 ); }
.tbl-stopien[ data-stopien="rekonstrukcja" ] i b.jest { background: linear-gradient( 180deg, #a2b7c0, #a2b7c0 ); box-shadow: none; }
/* Stopień, na którym nie stoi ani jedno hasło, to nie usterka licznika, tylko
   mocne zdanie: nic na tej stronie nie opiera się wyłącznie na domyśle.
   Ma więc wyglądać na wygaszony celowo, a nie na zepsuty. */
.tbl-stopien__ile.jest-puste { color: var( --rdza-j ); opacity: .8; }
.tbl-stopien:has( .jest-puste ) i b.jest { opacity: .45; }
.tbl-skala__podpis { max-width: 76ch; margin: 20px 0 0; font-size: 13px; line-height: 1.7; color: var( --tekst-slaby ); }
.tbl-skala__podpis b { font-weight: 400; color: var( --ochra-j ); }

/* Filtr: hasło słabsze niż wybrany stopień gaśnie, ale zostaje na stronie.
   Usuwanie go wyglądałoby jak brak danych; wygaszenie wygląda jak to, czym
   jest - jak coś, czego nie da się potwierdzić. */
.tbl-strona [data-stopien] { transition: opacity .5s, filter .5s, transform .5s; }
/* WYGASZENIE MA WYGLĄDAĆ NA WYGASZENIE, NIE NA AWARIĘ.

   Pierwsza wersja dawała `opacity: .13` plus `grayscale(1) blur(.4px)`. Dwie
   rzeczy poszły źle naraz. Deklaracja przezroczystości przegrywała z animacją
   wejścia klocka (animacja bije zwykłe deklaracje), więc zostawał sam szary
   rozmyty prostokąt - zmierzone na żywej stronie: opacity 1, filter
   `grayscale(1) blur(0.4px)`. Przemo zgłosił to zrzutem jako „suwak się nie
   wyświetla” i miał rację: karta bez barwy i bez ostrości czyta się jak błąd
   renderowania, a nie jak świadoma decyzja.

   Teraz przygaszenie idzie CAŁE przez `filter`, bo filtru animacja nie rusza,
   a barwa zostaje w połowie - karta dalej jest kartą, tylko cofniętą o krok.
   Kliknąć też wolno: hasło słabiej poświadczone nie przestaje być treścią. */
.tbl-strona.jest-filtr [data-stopien].tbl-gasnie { filter: grayscale( .55 ) opacity( .42 ); transform: scale( .99 ); }
.tbl-strona.jest-filtr [data-stopien].tbl-gasnie:hover,
.tbl-strona.jest-filtr [data-stopien].tbl-gasnie:focus-within { filter: grayscale( 0 ) opacity( .92 ); transform: none; }
.tbl-strona.jest-filtr [data-stopien]:not( .tbl-gasnie ) { box-shadow: 0 0 0 1px rgba( 217, 150, 43, .28 ), 0 30px 70px -44px rgba( 217, 150, 43, .5 ); }

/* ══════════════  bogowie  ══════════════ */
.tbl-bostwa, .tbl-praktyki, .tbl-zrodla, .tbl-rodzaje, .tbl-echa { display: grid; grid-template-columns: repeat( auto-fit, minmax( 268px, 1fr ) ); gap: 16px; margin-top: 28px; }
.tbl-bog, .tbl-kafel, .tbl-echo {
	position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 20px;
	border: 1px solid var( --wlos ); border-radius: 20px; overflow: hidden;
	background: linear-gradient( 180deg, rgba( 212, 216, 208, .05 ), rgba( 212, 216, 208, .012 ) );
	transition: border-color .3s, transform .3s, box-shadow .3s, background .3s;
}
/* Rowek karbu na krawędzi kafla: cienka pionowa kreska po lewej, w barwie
   stopnia. Widać ją kątem oka przy przewijaniu, bez czytania podpisów. */
.tbl-bog::before, .tbl-kafel::before, .tbl-echo::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 0 2px 2px 0; background: linear-gradient( 180deg, transparent, var( --ochra ), transparent ); opacity: .5; }
.tbl-bog[ data-stopien="folklor" ]::before, .tbl-kafel[ data-stopien="folklor" ]::before { background: linear-gradient( 180deg, transparent, var( --len ), transparent ); opacity: .32; }
.tbl-bog[ data-stopien="rekonstrukcja" ]::before, .tbl-kafel[ data-stopien="rekonstrukcja" ]::before { background: linear-gradient( 180deg, transparent, #a2b7c0, transparent ); opacity: .3; }
.tbl-echo::before { background: linear-gradient( 180deg, transparent, var( --rdza-j ), transparent ); opacity: .5; }
.tbl-bog:hover, .tbl-kafel:hover, .tbl-echo:hover { border-color: var( --obrys ); transform: translateY( -3px ); background: linear-gradient( 180deg, rgba( 217, 150, 43, .09 ), rgba( 212, 216, 208, .02 ) ); box-shadow: 0 30px 66px -40px rgba( 0, 0, 0, .92 ), 0 0 34px -18px rgba( 217, 150, 43, .38 ); }
.tbl-bog h3, .tbl-kafel h3, .tbl-echo h3 { margin: 0 0 10px; font: 500 24px var( --serif ); color: var( --len-j ); }
.tbl-echo h3 { color: var( --ochra-j ); }
.tbl-bog p, .tbl-kafel p, .tbl-echo p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
.tbl-bog__obszar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px !important; font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; color: var( --rdza-j ) !important; }
.tbl-bog__obszar i { font-style: normal; opacity: .8; }
.tbl-bog__krotko { color: var( --tekst-mocny ) !important; }
.tbl-echo__kiedy { display: flex; align-items: center; gap: 8px; margin: 0 0 12px !important; font-size: 11px !important; letter-spacing: .1em; color: var( --etyk ) !important; }
.tbl-echo__kiedy i { font-style: normal; }
.tbl-kafel--magia { padding: 20px 20px 18px; }
.tbl-kafel--magia h3 { font-size: 20px; }

/* Pole „gdzie to stoi zapisane” - w oknie, wyróżnione, bo to jest właśnie
   ta informacja, której nigdzie indziej nie dostaniesz. */
.tbl-gdzie { margin-top: 18px !important; padding: 16px 18px; border-left: 2px solid var( --rdza ); border-radius: 0 12px 12px 0; background: rgba( 110, 133, 146, .08 ); font-size: 13px !important; }
.tbl-gdzie b { display: block; margin-bottom: 6px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --rdza-j ); }

/* ══════════════  echa: pięć osobnych pytań  ══════════════ */
.tbl-piec { display: grid; gap: 12px; }
.tbl-piec > div { padding: 16px 18px; border: 1px solid var( --wlos ); border-radius: 14px; background: rgba( 212, 216, 208, .035 ); }
.tbl-piec b { display: block; margin-bottom: 6px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --etyk ); }
.tbl-piec p { margin: 0 !important; font-size: 13.5px; line-height: 1.7; color: var( --tekst ); }
.tbl-piec .jest-starsze { border-color: var( --obrys ); background: rgba( 217, 150, 43, .075 ); }
.tbl-piec .jest-starsze b { color: var( --ochra-j ); }
.tbl-piec .jest-chrzest { border-color: rgba( 212, 216, 208, .2 ); background: rgba( 212, 216, 208, .055 ); }
.tbl-piec .jest-chrzest b { color: var( --len ); }
.tbl-piec .jest-puste { border-color: rgba( 110, 133, 146, .3 ); background: rgba( 110, 133, 146, .07 ); }
.tbl-piec .jest-puste b { color: var( --rdza-j ); }


@media ( min-width: 900px ) { .tbl-piec { grid-template-columns: 1fr 1fr; } .tbl-piec .jest-puste { grid-column: 1 / -1; } }

/* ══════════════  rodzimowierstwo i fałszerstwa  ══════════════ */
.tbl-granice, .tbl-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); gap: 14px; margin-top: 26px; }
.tbl-granice > div, .tbl-ramy__siatka > div { min-width: 0; padding: 22px 22px 20px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 212, 216, 208, .045 ), rgba( 212, 216, 208, .01 ) ); transition: border-color .3s, transform .3s; }
.tbl-granice > div:hover, .tbl-ramy__siatka > div:hover { border-color: var( --obrys ); transform: translateY( -2px ); }
.tbl-granice b, .tbl-ramy__siatka b { display: block; margin-bottom: 8px; font: 500 18px var( --serif ); color: var( --len-j ); }
.tbl-granice p, .tbl-ramy__siatka p { margin: 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
.tbl-ramy__siatka i { display: block; margin-bottom: 10px; font-style: normal; font-size: 18px; color: var( --rdza-j ); }
.tbl-ramy__siatka .jest-falsz { border-color: rgba( 110, 133, 146, .26 ); background: linear-gradient( 180deg, rgba( 110, 133, 146, .085 ), rgba( 110, 133, 146, .015 ) ); }
.tbl-ramy__siatka .jest-falsz b { color: var( --rdza-j ); }

/* Klocek: skrót w warstwie widocznej, komplet dopiero w oknie. */
.tbl-bog .zd-klocek__skrot, .tbl-kafel .zd-klocek__skrot, .tbl-echo .zd-klocek__skrot { display: contents; }

@media ( max-width: 780px ) {
	.tbl-strona { padding: 0 18px 70px; }
	.tbl-hero__waga { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
	.tbl-sekcja { margin-top: 58px; }
	.tbl-sekcja--scisla { padding: 26px 20px 30px; }
	.tbl-poziom { margin: 6px 0 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tbl-strona *, .tbl-strona *::before { transition: none !important; animation: none !important; }
}

/* Obraz w kaflu bóstwa. Kwadrat 1:1, wypuszczony na całą szerokość kafla
   ujemnym marginesem równym jego paddingowi (24 px). Kafel ma już
   overflow: hidden, więc zaokrąglenie przycina obraz samo. */
.tbl-bog__foto { margin: -24px -24px 14px; border-radius: 19px 19px 0 0; overflow: hidden; aspect-ratio: 1 / 1; background: rgba( 0, 0, 0, .35 ); }
.tbl-bog__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ══════════════  OKNO PO KLIKNIĘCIU - oprawa ozdobna  ══════════════
   Dopisane 2026-09-11 po przelocie testu: okno miało tekst 14.5 px
   w kroju bezszeryfowym, wbrew dyrektywie o ozdobnym oknie.
   Okno wisi na `body`, POZA `.tbl-strona`, więc zmienne działu tu nie
   sięgają - barwy stoją wartościami. */
body:has( .tbl-strona ) .zd-tlo {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Jost, system-ui, sans-serif;
}
body:has( .tbl-strona ) .zd-okno {
  background:
    radial-gradient( 120% 70% at 50% -6%, rgba( 217, 150, 43, .2 ), transparent 62% ),
    radial-gradient( 90% 60% at 92% 108%, rgba( 110, 133, 146, .13 ), transparent 68% ),
    linear-gradient( 178deg, #112936 0%, #07151d 46%, #07151d 100% );
  border: 1px solid rgba( 212, 216, 208, .3 );
  box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .1 ), 0 0 0 1px rgba( 0, 0, 0, .6 ),
    0 40px 120px -40px rgba( 0, 0, 0, .95 ), 0 0 90px -30px rgba( 217, 150, 43, .42 );
}
body:has( .tbl-strona ) .zd-okno__tekst,
body:has( .tbl-strona ) .zd-okno__pelne p,
body:has( .tbl-strona ) .zd-okno__gora p,
body:has( .tbl-strona ) .zd-okno p {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.72; color: #f2e8d5;
}
body:has( .tbl-strona ) .zd-okno__tytul,
body:has( .tbl-strona ) .zd-okno h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp( 34px, 3.4vw, 46px ); font-weight: 500; letter-spacing: .015em; color: #e2b66f;
  text-shadow: 0 0 42px rgba( 217, 150, 43, .45 ), 0 2px 18px rgba( 0, 0, 0, .8 );
}
body:has( .tbl-strona ) .zd-okno__gora::after {
  content: ''; display: block; height: 2px; margin: 18px 0 4px;
  background: linear-gradient( 90deg, rgba( 217, 150, 43, .85 ), rgba( 110, 133, 146, .5 ) 38%, transparent 88% );
  box-shadow: 0 0 18px rgba( 217, 150, 43, .45 );
}
body:has( .tbl-strona ) .zd-okno::before,
body:has( .tbl-strona ) .zd-okno::after {
  content: ''; position: absolute; width: 62px; height: 62px; pointer-events: none;
  border-color: rgba( 212, 216, 208, .68 ); border-style: solid; border-width: 0;
  filter: drop-shadow( 0 0 10px rgba( 212, 216, 208, .45 ) );
}
body:has( .tbl-strona ) .zd-okno::before { left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px; border-radius: 16px 0 0 0; }
body:has( .tbl-strona ) .zd-okno::after { right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px; border-radius: 0 0 16px 0; }
body:has( .tbl-strona ) .zd-okno__pelne > * > p:first-of-type::first-letter,
body:has( .tbl-strona ) .zd-okno__tekst:first-of-type::first-letter {
  float: left; margin: 6px 12px 0 0; font-size: 3.1em; line-height: .82; font-weight: 500;
  color: #e2b66f; text-shadow: 0 0 26px rgba( 217, 150, 43, .5 );
}
body:has( .tbl-strona ) .zd-okno [class$="__gdzie"],
body:has( .tbl-strona ) .zd-okno [class$="__kiedy"],
body:has( .tbl-strona ) .zd-okno [class$="__skad"] b,
body:has( .tbl-strona ) .zd-okno .zd-wiecej,
body:has( .tbl-strona ) .zd-okno__x { font-family: Jost, system-ui, sans-serif; }
@media ( prefers-reduced-motion: no-preference ) {
  body:has( .tbl-strona ) .zd-tlo .zd-okno { animation: tbl-okno-wschodzi .42s cubic-bezier( .2, .7, .3, 1 ) both; }
  @keyframes tbl-okno-wschodzi {
    from { opacity: 0; transform: translateY( 16px ) scale( .985 ); filter: blur( 3px ); }
    to   { opacity: 1; transform: none; filter: none; }
  }
}

/* Przerywnik - pas zdobniczy między sekcjami (rysowany w PHP). */
.tbl-przerywnik { display: block; width: 100%; height: 46px; margin: 58px 0 -20px; color: var( --ochra ); opacity: .38; filter: drop-shadow( 0 0 10px currentColor ); }

/* OKNO TEZY - przejscie tonalne.
   Wspolna warstwa daje oknu tezy plaska pobialke rgba(255,255,255,.028)
   regulami o swoistosci 0,2,0 i 0,3,0 - jedna wartosc dla wszystkich dzialow
   naraz. Dublowana klasa daje 0,4,0 i zamyka sprawe bez !important.
   Barwy sa z palety TEGO dzialu. Dopisane po stronie SERWERA, bo lokalna
   kopia modulu bywa starsza niz wgrana. */
.tbl-strona .tbl-hero .tbl-okno.zd-okno,
.tbl-strona .tbl-hero .zd-okno.zd-okno,
.tbl-strona .tbl-hero .tbl-okno.tbl-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 212, 216, 208, .10 ), transparent 70% ),
		linear-gradient( 168deg, #112936, #07151d );
}

/* Rodzimowierstwo i fałszerstwa stały jako martwe prostokąty: pogrubienie
   i jedno zdanie, bez drogi dalej. Dostały strukturę klocka, więc otwierają
   okno jak reszta działu. `display: contents` na skrócie sprawia, że układ
   pozostaje dokładnie taki jak był - pogrubienie i akapit są dalej dziećmi
   tego samego pudełka, a nie nową warstwą. */
.tbl-granice > .zd-klocek .zd-klocek__skrot,
.tbl-ramy__siatka > .zd-klocek .zd-klocek__skrot { display: contents; }
.tbl-granice > .zd-klocek, .tbl-ramy__siatka > .zd-klocek { cursor: pointer; }


/* ===== TLO CALEJ STRONY 2026-09-13 =====
   Ten sam wzorzec, co Celtowie / Hiszpania / Rumunia. SWIADOMIE tylko
   grunt pod cala strona, bez tel sekcji: ten dzial ma w naglowku kodu
   zapisane, ze ma wygladac skonczenie takze bez ani jednej grafiki,
   a jego fakturą jest splot plocienny. Grunt tego nie lamie.
   Dopoki pliku nie ma, maluje sie sam kolor. */
body:has( .tbl-strona ){
	background-color: #07151d;
	background-image: linear-gradient( #07151dbb, #07151ddd ), url( '/wp-content/uploads/tarot-kompat/polnoc/slowianie/gfx/tlo-calosc.webp' );
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

/* ══════════════  NOWE WARSTWY DZIAŁU  ══════════════

   Dziesięć dopisanych sekcji korzysta z jednego kształtu karty. Nie dostają
   własnej palety ani własnej typografii - dział ma już tło zbudowane z płótna,
   ochry i rdzy, a nowa warstwa, która przynosi własne barwy, rozbiłaby stronę
   na dwie różne strony. Jedyny nowy element to NADTYTUŁ Z OBSZAREM, bo cała
   rozbudowa odpowiada na pytanie „co się pokrywa, a co jest osobne” - więc
   grupa, której haseł dotyczy, musi być widoczna, zanim ktoś kliknie.

   NADTYTUŁ JEST <span>, NIE <p>. W torze widać tylko PIERWSZY akapit kafla;
   gdyby obszar był akapitem, zjadłby zapowiedź treści. Ta pułapka kosztowała
   już jeden wieczor w Amerykach.  */

.tbl-karty { display: grid; grid-template-columns: repeat( auto-fit, minmax( 268px, 1fr ) ); gap: 16px; margin-top: 28px; }

.tbl-kafel--warstwa { padding: 22px 22px 20px; }
.tbl-kafel__obszar {
	display: block; margin: 0 0 10px; font: 400 10.5px var( --sans ); letter-spacing: .15em;
	text-transform: uppercase; color: var( --etyk );
}
.tbl-kafel__obszar i { font-style: normal; margin-right: 8px; color: var( --ochra ); opacity: .8; }
.tbl-kafel--warstwa h3 { margin: 0 0 8px; font: 500 21px / 1.22 var( --serif ); color: var( --len-j ); }

/* Czego nie rozstrzygnięto - osobny blok w oknie.
   Granica między wiedzą a domysłem jest w tym dziale treścią, nie zastrzeżeniem,
   więc dostaje własne pudełko, a nie nawias na końcu akapitu. */
.tbl-sporne {
	margin: 22px 0 0; padding: 16px 18px 14px; border-left: 2px solid var( --rdza );
	border-radius: 0 12px 12px 0; background: linear-gradient( 90deg, rgba( 110, 133, 146, .10 ), transparent 70% );
}
.tbl-sporne b {
	display: block; margin: 0 0 8px; font: 400 10.5px var( --sans ); letter-spacing: .15em;
	text-transform: uppercase; color: var( --rdza-j );
}
.tbl-sporne ul { margin: 0; padding-left: 18px; }
.tbl-sporne li { margin: 0 0 6px; font-size: 14.5px; line-height: 1.68; color: var( --tekst ); }
.tbl-sporne li:last-child { margin-bottom: 0; }

/* ══════════════  MAPA SŁOWIAŃSZCZYZNY Z SUWAKIEM STULECI  ══════════════

   Główny element interaktywny rozbudowanego działu. Wytyczne wymagają, żeby
   mapa była centralnym elementem wizualnym, a nie małym schematem w pustym
   pojemniku, i żeby coś WYJAŚNIAŁA - tutaj wyjaśnia, skąd wzięły się trzy
   grupy Słowian.

   Barwy nie wychodzą poza paletę działu. Trzy grupy dostają ochrę, rdzę i len,
   czyli te same materiały, z których zbudowana jest cała strona. Obszar sprzed
   podziału nie dostaje czwartej barwy, tylko SPLOT - i to jest jedyne miejsce,
   w którym ta strona pozwala sobie na chwyt.

   Rzeki są nicią, nie błękitem. Niebieska woda na płóciennej mapie byłaby
   kolorem z innego świata; cienka jasna linia czyta się jak nitka w tkaninie
   i zostaje w materiale, z którego dział jest zrobiony.  */

.tbl-mapa {
	display: grid; grid-template-columns: minmax( 0, 1.5fr ) minmax( 300px, 1fr );
	gap: 30px; align-items: start; margin-top: 30px;
}
/* Rysunek w gridzie kurczy się do domyślnej szerokości, jeśli nie odbierze mu
   się minimalnej. Dwa razy już mnie to kosztowało wieczór. */
.tbl-mapa > * { min-width: 0; }

.tbl-mapa__plotno { position: relative; }
.tbl-mapa__plotno svg { display: block; width: 100%; height: auto; }
.tbl-mapa.jest-wczytywana { min-height: 320px; opacity: .5; }

.tbl-mapa__lad { fill: rgba( 212, 216, 208, .055 ); stroke: rgba( 212, 216, 208, .11 ); stroke-width: .6; vector-effect: non-scaling-stroke; }
.tbl-mapa__jezioro { fill: #07151d; stroke: rgba( 212, 216, 208, .16 ); stroke-width: .6; vector-effect: non-scaling-stroke; }
.tbl-mapa__rzeka { fill: none; stroke: rgba( 212, 216, 208, .3 ); stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.tbl-mapa__splot-tlo { fill: rgba( 217, 150, 43, .1 ); }
.tbl-mapa__splot-nic { stroke: rgba( 217, 150, 43, .5 ); stroke-width: .7; }

.tbl-mapa__byt {
	cursor: pointer; outline: none;
	stroke-width: 1; vector-effect: non-scaling-stroke;
	transition: fill .35s, stroke .35s, filter .35s;
}
.tbl-mapa__byt[ data-grupa="obce" ] { fill: rgba( 212, 216, 208, .035 ); stroke: rgba( 212, 216, 208, .14 ); }
.tbl-mapa__byt[ data-grupa="zachod" ] { fill: rgba( 217, 150, 43, .26 ); stroke: #e2b66f; }
.tbl-mapa__byt[ data-grupa="wschod" ] { fill: rgba( 110, 133, 146, .3 ); stroke: #a2b7c0; }
.tbl-mapa__byt[ data-grupa="poludnie" ] { fill: rgba( 212, 216, 208, .22 ); stroke: #d6e3e4; }
.tbl-mapa__byt[ data-grupa="wspolne" ] { fill: url( #tbl-splot ); stroke: #e2b66f; stroke-dasharray: 5 4; }

.tbl-mapa__byt:hover, .tbl-mapa__byt:focus-visible { filter: brightness( 1.35 ); stroke-width: 1.8; }
.tbl-mapa__byt.jest-wybrany { stroke-width: 2.2; filter: drop-shadow( 0 0 10px rgba( 240, 189, 94, .5 ) ) brightness( 1.25 ); }
.tbl-mapa__byt:focus-visible { outline: 2px solid #e2b66f; outline-offset: 2px; }

/* Podpis klatki: to on niesie treść, więc nie jest drobnym drukiem. */
.tbl-mapa__notka {
	margin: 16px 2px 0; max-width: 68ch;
	font: 300 15px / 1.7 var( --sans ); color: var( --tekst );
	border-left: 2px solid var( --ochra ); padding-left: 14px;
}
.tbl-mapa__plotno.jest-swieze .tbl-mapa__notka { animation: tbl-wejscie .5s ease-out; }
.tbl-mapa__plotno.jest-swieze .tbl-mapa__byty { animation: tbl-przejscie .55s ease-out; }
@keyframes tbl-wejscie { from { opacity: 0; transform: translateY( 6px ); } to { opacity: 1; transform: none; } }
@keyframes tbl-przejscie { from { opacity: .25; } to { opacity: 1; } }
@media ( prefers-reduced-motion: reduce ) {
	.tbl-mapa__plotno.jest-swieze .tbl-mapa__notka,
	.tbl-mapa__plotno.jest-swieze .tbl-mapa__byty { animation: none; }
}

/* ── suwak stuleci ── */
.tbl-mapa__lata { display: flex; align-items: center; gap: 10px; }
.tbl-mapa__strz {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var( --obrys ); background: transparent; color: var( --ochra-j );
	font-size: 20px; line-height: 1; cursor: pointer; transition: border-color .25s, color .25s, background .25s;
}
.tbl-mapa__strz:hover:not( :disabled ) { border-color: var( --ochra ); background: rgba( 217, 150, 43, .1 ); }
.tbl-mapa__strz:disabled { opacity: .3; cursor: default; }
.tbl-mapa__strz:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: 3px; }

.tbl-mapa__szyna { flex: 1 1 auto; display: flex; gap: 2px; }
.tbl-mapa__stopien {
	flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 8px 0 6px; border: 0; background: transparent; cursor: pointer;
}
.tbl-mapa__stopien i { display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba( 212, 216, 208, .18 ); transition: background .25s; }
.tbl-mapa__stopien em {
	font: 400 10.5px var( --sans ); font-style: normal; letter-spacing: .05em;
	color: var( --tekst-slaby ); transition: color .25s;
}
.tbl-mapa__stopien:hover i { background: rgba( 217, 150, 43, .45 ); }
.tbl-mapa__stopien.jest-wybrany i { background: var( --ochra ); box-shadow: 0 0 12px -2px rgba( 217, 150, 43, .7 ); }
.tbl-mapa__stopien.jest-wybrany em { color: var( --len-j ); }
.tbl-mapa__stopien:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: 2px; border-radius: 4px; }

/* ── legenda ── */
.tbl-mapa__legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0 22px; }
.tbl-mapa__klucz { display: inline-flex; align-items: center; gap: 8px; font: 300 12.5px var( --sans ); color: var( --tekst ); }
.tbl-mapa__klucz i { width: 13px; height: 13px; border-radius: 3px; border: 1px solid; }
.tbl-mapa__klucz[ data-grupa="wspolne" ] i { background: rgba( 217, 150, 43, .22 ); border-color: #e2b66f; }
.tbl-mapa__klucz[ data-grupa="zachod" ] i { background: rgba( 217, 150, 43, .26 ); border-color: #e2b66f; }
.tbl-mapa__klucz[ data-grupa="wschod" ] i { background: rgba( 110, 133, 146, .3 ); border-color: #a2b7c0; }
.tbl-mapa__klucz[ data-grupa="poludnie" ] i { background: rgba( 212, 216, 208, .22 ); border-color: #d6e3e4; }
.tbl-mapa__klucz[ data-grupa="obce" ] i { background: rgba( 212, 216, 208, .035 ); border-color: rgba( 212, 216, 208, .3 ); }

.tbl-mapa__nad {
	margin: 0 0 10px; font: 400 10.5px var( --sans ); letter-spacing: .15em;
	text-transform: uppercase; color: var( --etyk );
}

/* ── lista bytów ── */
.tbl-mapa__lista { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.tbl-mapa__poz {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
	text-align: left; cursor: pointer; color: var( --tekst );
	font: 300 13.5px / 1.4 var( --sans ); transition: background .2s, color .2s;
}
.tbl-mapa__poz i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; border: 1px solid; }
.tbl-mapa__poz[ data-grupa="wspolne" ] i, .tbl-mapa__poz[ data-grupa="zachod" ] i { background: rgba( 217, 150, 43, .5 ); border-color: #e2b66f; }
.tbl-mapa__poz[ data-grupa="wschod" ] i { background: rgba( 110, 133, 146, .55 ); border-color: #a2b7c0; }
.tbl-mapa__poz[ data-grupa="poludnie" ] i { background: rgba( 212, 216, 208, .4 ); border-color: #d6e3e4; }
.tbl-mapa__poz[ data-grupa="obce" ] i { background: transparent; border-color: rgba( 212, 216, 208, .3 ); }
.tbl-mapa__poz:hover { background: rgba( 212, 216, 208, .06 ); color: var( --tekst-mocny ); }
.tbl-mapa__poz.jest-wybrany { background: rgba( 217, 150, 43, .13 ); color: var( --len-j ); }
.tbl-mapa__poz:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: -2px; }

/* ── opis wybranego bytu ── */
.tbl-mapa__opis { margin-top: 18px; padding-top: 18px; border-top: 1px solid var( --wlos ); min-height: 120px; }
.tbl-mapa__opis h4 { margin: 0 0 6px; font: 500 22px / 1.2 var( --serif ); color: var( --len-j ); }
.tbl-mapa__opis-linia { margin: 0 0 10px; font: 400 11px var( --sans ); letter-spacing: .1em; text-transform: uppercase; color: var( --ochra ); }
.tbl-mapa__opis-tresc { margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: var( --tekst ); }
.tbl-mapa__opis-nasze { margin: 0; font-size: 13px; line-height: 1.65; color: var( --tekst-slaby ); font-style: italic; }
.tbl-mapa__pusto { margin: 0; font-size: 14px; line-height: 1.7; color: var( --tekst-slaby ); }

.tbl-mapa__blad { margin: 0; padding: 24px; font-size: 14.5px; color: var( --rdza-j ); }

@media ( max-width: 980px ) {
	.tbl-mapa { grid-template-columns: 1fr; gap: 22px; }
	.tbl-mapa__lista { max-height: 240px; }
	.tbl-mapa__stopien em { font-size: 9.5px; }
}

/* ── mapa: poprawki po obejrzeniu na żywej stronie ──

   Pierwsza wersja była za ciemna: ląd różnił się od morza o tyle, co nic,
   a rzeki ginęły zupełnie. Zmierzone na zrzucie - cała mapa czytała się jako
   jedna ciemna plama z dwiema jaśniejszymi łatami. Podnoszę wartości podkładu
   i dokładam warstwę miejsc kultu z podpisami, bo wytyczne wymagają
   podpisanych punktów, a punkt bez nazwy niczego nie tłumaczy.

   Proporcje kolumn też do poprawy: mapa jest pionowa, więc przy podziale
   1,5 do 1 rosła do tysiąca pikseli wysokości, a panel obok kończył się
   w jednej trzeciej. Teraz 1,2 do 1.  */

.tbl-mapa { grid-template-columns: minmax( 0, 1.2fr ) minmax( 320px, 1fr ); }

.tbl-mapa__lad { fill: rgba( 212, 216, 208, .1 ); stroke: rgba( 212, 216, 208, .2 ); }
.tbl-mapa__jezioro { fill: #07151d; stroke: rgba( 212, 216, 208, .26 ); }
.tbl-mapa__rzeka { stroke: rgba( 212, 216, 208, .44 ); stroke-width: 1.3; }

/* ── miejsca kultu ── */
.tbl-mapa__miejsce { cursor: pointer; outline: none; }
.tbl-mapa__halo { fill: rgba( 240, 189, 94, .07 ); stroke: rgba( 240, 189, 94, .3 ); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .3s, stroke .3s; }
.tbl-mapa__punkt { fill: #e2b66f; filter: drop-shadow( 0 0 5px rgba( 240, 189, 94, .75 ) ); }

.tbl-mapa__miejsce text {
	fill: #f2e8d5; font: 500 15px 'Cormorant Garamond', Georgia, serif;
	paint-order: stroke; stroke: #07151d; stroke-width: 5px; stroke-linejoin: round;
	dominant-baseline: middle; pointer-events: none;
}

/* Miejsce, którego położenia nie znamy, ma inny znak: obrys przerywany
   zamiast pełnego. Czytelnik widzi różnicę, zanim otworzy opis - a to jest
   cała zasada tego działu, przeniesiona na mapę. */
.tbl-mapa__miejsce[ data-stopien="rekonstrukcja" ] .tbl-mapa__halo,
.tbl-mapa__miejsce[ data-stopien="pozniejszy" ] .tbl-mapa__halo { stroke-dasharray: 3 3; }
.tbl-mapa__miejsce[ data-stopien="rekonstrukcja" ] .tbl-mapa__punkt { fill: #a2b7c0; filter: drop-shadow( 0 0 5px rgba( 147, 168, 179, .7 ) ); }

.tbl-mapa__miejsce:hover .tbl-mapa__halo,
.tbl-mapa__miejsce:focus-visible .tbl-mapa__halo,
.tbl-mapa__miejsce.jest-wybrany .tbl-mapa__halo { fill: rgba( 240, 189, 94, .22 ); stroke: #e2b66f; stroke-width: 2; }
.tbl-mapa__miejsce.jest-wybrany text { fill: #f2e8d5; }
.tbl-mapa__miejsce:focus-visible text { fill: #f2e8d5; }

@media ( max-width: 980px ) {
	.tbl-mapa__miejsce text { font-size: 19px; stroke-width: 6px; }
}

/* ── byt kluczowy dla klatki ──

   Podpis pod mapą mówi, na co patrzeć. Zanim to dopisałem, zdanie „siadają
   tam Węgrzy" kazało czytelnikowi szukać czegoś, co było narysowane jak
   każdy inny sąsiad - czyli ledwie widoczne. Teraz byt, o którym mówi podpis,
   dostaje mocniejszy obrys i światło, więc oko idzie tam, dokąd prowadzi je
   tekst. To nie jest ozdoba: to jest zgodność rysunku ze zdaniem.  */

.tbl-mapa__byt.jest-wyrozniony { stroke-width: 2; }
.tbl-mapa__byt.jest-wyrozniony[ data-grupa="obce" ] {
	fill: rgba( 145, 132, 110, .3 ); stroke: #a2b7c0;
	stroke-dasharray: 7 3;
}
.tbl-mapa__byt.jest-wyrozniony { filter: drop-shadow( 0 0 9px rgba( 240, 189, 94, .32 ) ); }

.tbl-mapa__poz.jest-wyrozniony span { color: var( --len-j ); }
.tbl-mapa__poz.jest-wyrozniony::after {
	content: '◂ ta klatka'; margin-left: auto; flex: 0 0 auto;
	font: 400 9.5px var( --sans ); letter-spacing: .12em; text-transform: uppercase;
	color: var( --ochra ); opacity: .85;
}

/* ══════════════  TŁO DZIAŁU: DOLINA DĘBÓW  ══════════════
   Zdjęcie doliny z dębami leży pod całą stroną i nie przewija się z nią.
   Kolumna treści dostaje grunt półprzejrzysty, gęstniejący ku dołowi: góra
   strony pokazuje dolinę, dół czyta się jak dotąd, na ciemnym płótnie.
   Grunt nie może być kryty, bo wtedy zdjęcie zostaje tylko na marginesach
   i wygląda jak przypadkiem zostawiony pasek. Ogon każdego gradientu
   dochodzi do barwy gruntu, nigdy do przezroczystości - na styku byłaby
   krawędź. Ornament dębu i lnu jest rysunkiem współczesnym i stoi w dwóch
   miejscach, nie na każdej sekcji: powtórzony zamieniłby się w tapetę. */
/* Zdjęcie leży na WARSTWIE STAŁEJ (pseudoelement `position: fixed`), a nie jako
   `background-attachment: fixed` - to drugie każe przeglądarce przemalowywać
   cały ekran przy każdym przewinięciu; przy stronie z 370 klockami zrzut
   ekranu nie skończył się w pięć sekund. Warstwa stała jest składana na
   karcie graficznej i przewijanie nic nie kosztuje. */
body:has( .tbl-strona ) { background: #07151d; }
body:has( .tbl-strona )::before {
	content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background: #07151d url( gfx/tla/tlo-bursztynowy-brzeg.webp ) center top / cover no-repeat;
}
.tbl-strona {
	background:
		repeating-linear-gradient( 90deg, rgba( 212, 216, 208, .028 ) 0 1px, transparent 1px 4px ),
		repeating-linear-gradient( 0deg, rgba( 212, 216, 208, .022 ) 0 1px, transparent 1px 4px ),
		radial-gradient( 1150px 580px at 50% -12%, rgba( 217, 150, 43, .13 ), transparent 70% ),
		radial-gradient( 820px 500px at 12% 46%, rgba( 110, 133, 146, .075 ), transparent 72% ),
		radial-gradient( 700px 460px at 88% 74%, rgba( 212, 216, 208, .05 ), transparent 70% ),
		linear-gradient( 180deg, rgba( 16, 14, 11, .56 ) 0, rgba( 16, 14, 11, .9 ) 780px, rgba( 13, 11, 9, .965 ) 1500px, rgba( 13, 11, 9, .965 ) );
	box-shadow: 0 0 140px rgba( 0, 0, 0, .55 );
}
.tbl-hero {
	position: relative; isolation: isolate; overflow: hidden;
	max-width: none; margin: 18px 0 0; padding: 66px 52px 42px;
	border: 1px solid var( --obrys ); border-radius: 28px;
	background:
		linear-gradient( 90deg, rgba( 11, 10, 8, .9 ) 0, rgba( 11, 10, 8, .74 ) 46%, rgba( 11, 10, 8, .28 ) 100% ),
		url( gfx/tla/tlo-bursztynowy-brzeg.webp ) center 40% / cover no-repeat;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .06 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 );
}
.tbl-hero::before {
	content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
	background:
		linear-gradient( 0deg, rgba( 11, 10, 8, .93 ), rgba( 11, 10, 8, 0 ) 58% ),
		linear-gradient( 180deg, rgba( 11, 10, 8, .55 ), rgba( 11, 10, 8, 0 ) 42% );
}
.tbl-hero::after {
	content: ''; position: absolute; z-index: 0; right: -34px; top: -26px; pointer-events: none;
	width: clamp( 220px, 24vw, 380px ); aspect-ratio: 1; opacity: .36;
	background: url( gfx/ozdoby/ornament-bursztyn-dab.webp ) left top / contain no-repeat;
	transform: scaleX( -1 );
}
.tbl-hero__tresc { position: relative; z-index: 1; max-width: 84ch; }
.tbl-sekcja--karb::after {
	content: ''; position: absolute; z-index: 0; right: 6px; bottom: 6px; pointer-events: none;
	width: clamp( 150px, 15vw, 230px ); aspect-ratio: 1; opacity: .2;
	background: url( gfx/ozdoby/ornament-bursztyn-dab.webp ) left top / contain no-repeat;
	transform: rotate( 180deg );
}
.tbl-sekcja--karb > * { position: relative; z-index: 1; }

/* ── kafel z wizerunkiem (pole `foto` w danych) ── */
.tbl-kafel__foto { margin: 0 0 12px; border-radius: 12px; overflow: hidden; border: 1px solid var( --wlos ); background: #07151d; }
.tbl-kafel__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.tbl-kafel__foto figcaption { padding: 7px 10px; font: 300 10.5px / 1.45 var( --sans ); color: var( --tekst-slaby ); border-top: 1px solid var( --wlos ); }

/* ── mapa: woda, ląd i ton północ–południe ── */
.tbl-mapa__plotno svg { border-radius: 16px; border: 1px solid var( --wlos ); background: radial-gradient( 900px 720px at 50% 42%, #112936, #07151d ); }
.tbl-mapa__lad { fill: rgba( 212, 216, 208, .13 ); stroke: rgba( 212, 216, 208, .22 ); }
.tbl-mapa__ton { stroke: none; pointer-events: none; }
.tbl-mapa__jezioro { fill: #07151d; }

/* ── miejsca datowane ──
   Punkt stoi tylko w klatce, dla której mamy świadectwo; przełącznik pokazuje
   resztę przygaszoną. Rodzaj znaku niesie informację: pełne złoto to kult
   poświadczony, płótno to ośrodek kościelny, rdza z przerwanym obrysem to
   położenie nieustalone albo miejsce znalezienia, stal to ośrodek kontaktów. */
.tbl-mapa__miejsce.jest-ukryty { display: none; }
.tbl-mapa__miejsce.jest-przygaszony { opacity: .42; }
.tbl-mapa__miejsce.jest-przygaszony .tbl-mapa__halo { stroke-dasharray: 2 3; }
.tbl-mapa__miejsce[ data-rodzaj='kosciol' ] .tbl-mapa__punkt { fill: #d6e3e4; filter: drop-shadow( 0 0 5px rgba( 212, 216, 208, .6 ) ); }
.tbl-mapa__miejsce[ data-rodzaj='kosciol' ] .tbl-mapa__halo { fill: rgba( 212, 216, 208, .05 ); stroke: rgba( 212, 216, 208, .34 ); }
.tbl-mapa__miejsce[ data-rodzaj='swiadectwo' ] .tbl-mapa__punkt { fill: #e2b66f; }
.tbl-mapa__miejsce[ data-rodzaj='swiadectwo' ] .tbl-mapa__halo { stroke-dasharray: 5 3; }
.tbl-mapa__miejsce[ data-rodzaj='niepewne' ] .tbl-mapa__punkt { fill: #a2b7c0; filter: drop-shadow( 0 0 5px rgba( 147, 168, 179, .7 ) ); }
.tbl-mapa__miejsce[ data-rodzaj='niepewne' ] .tbl-mapa__halo { r: 22; stroke: rgba( 147, 168, 179, .5 ); stroke-dasharray: 3 3; }
.tbl-mapa__miejsce[ data-rodzaj='znalezisko' ] .tbl-mapa__punkt { fill: #a2b7c0; filter: drop-shadow( 0 0 5px rgba( 147, 168, 179, .7 ) ); }
.tbl-mapa__miejsce[ data-rodzaj='znalezisko' ] .tbl-mapa__halo { stroke: rgba( 147, 168, 179, .5 ); stroke-dasharray: 1 3; }
.tbl-mapa__miejsce[ data-rodzaj='kontakt' ] .tbl-mapa__punkt { fill: #a2b7c0; filter: drop-shadow( 0 0 5px rgba( 154, 167, 180, .6 ) ); }
.tbl-mapa__miejsce[ data-rodzaj='kontakt' ] .tbl-mapa__halo { stroke: rgba( 154, 167, 180, .4 ); }

.tbl-mapa__legenda--miejsca { margin-top: -10px; }
.tbl-mapa__legenda--miejsca .tbl-mapa__klucz i { width: 11px; height: 11px; border-radius: 50%; }
.tbl-mapa__klucz[ data-rodzaj='kult' ] i { background: #e2b66f; border-color: #e2b66f; box-shadow: 0 0 6px rgba( 240, 189, 94, .7 ); }
.tbl-mapa__klucz[ data-rodzaj='kosciol' ] i { background: #d6e3e4; border-color: #d6e3e4; }
.tbl-mapa__klucz[ data-rodzaj='swiadectwo' ] i { background: #e2b66f; border-color: #e2b66f; border-style: dashed; }
.tbl-mapa__klucz[ data-rodzaj='niepewne' ] i { background: transparent; border-color: #a2b7c0; border-style: dashed; }
.tbl-mapa__klucz[ data-rodzaj='znalezisko' ] i { background: #a2b7c0; border-color: #a2b7c0; border-style: dotted; }
.tbl-mapa__klucz[ data-rodzaj='kontakt' ] i { background: #a2b7c0; border-color: #a2b7c0; }

.tbl-mapa__przel { display: flex; align-items: center; gap: 10px; margin: -6px 0 22px; font: 300 13px / 1.4 var( --sans ); color: var( --tekst ); cursor: pointer; }
.tbl-mapa__przel input { width: 16px; height: 16px; margin: 0; accent-color: #e2b66f; cursor: pointer; }
.tbl-mapa__przel:hover { color: var( --tekst-mocny ); }
.tbl-mapa__przel input:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: 2px; }

.tbl-mapa__okna { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tbl-mapa__okna li { display: grid; grid-template-columns: 78px minmax( 0, 1fr ); gap: 10px; font: 300 13px / 1.55 var( --sans ); color: var( --tekst-slaby ); }
.tbl-mapa__okna b { font: 500 13px / 1.55 var( --sans ); color: var( --ochra ); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.tbl-mapa__okna li.jest-czynne { color: var( --tekst-mocny ); }
.tbl-mapa__okna li.jest-czynne b { color: var( --ochra-j ); }
.tbl-mapa__opis .tbl-mapa__nad { margin: 14px 0 8px; }
.tbl-mapa__opis .tbl-mapa__opis-nasze { margin-top: 10px; }
/* ── okno modalne w barwach działu ──
   Wspólny arkusz daje oknu granat z innej palety; tu okno ma być z tego
   samego płótna co strona: ochra u góry, rdza w dolnym rogu, dym w tle. */
body:has( .tbl-strona ) .zd-okno {
	background:
		radial-gradient( 120% 70% at 50% -6%, rgba( 217, 150, 43, .17 ), transparent 62% ),
		radial-gradient( 90% 60% at 92% 108%, rgba( 110, 133, 146, .15 ), transparent 68% ),
		linear-gradient( 178deg, #112936 0%, #07151d 46%, #07151d 100% );
	border-color: rgba( 217, 150, 43, .3 ); border-top-color: #e2b66f;
	box-shadow: 0 40px 90px rgba( 0, 0, 0, .65 ), 0 0 60px -20px rgba( 217, 150, 43, .35 ), inset 0 0 0 1px rgba( 217, 150, 43, .08 );
}
body:has( .tbl-strona ) .zd-okno__tytul { color: var( --ochra-j, #e2b66f ); }
/* Zasłona za oknem też ma przejście: środek cieplejszy i lżejszy, brzegi gasną -
   okno wygląda, jakby stało w świetle, a nie na czarnej płycie. */
body:has( .tbl-strona ) .zd-tlo { background: radial-gradient( 78% 72% at 50% 46%, rgba( 22, 18, 13, .8 ), rgba( 5, 4, 3, .95 ) ); }
body:has( .tbl-strona ) .zd-okno__x { background: rgba( 11, 10, 8, .7 ); color: var( --ochra, #e2b66f ); }
/* Wizerunek w oknie: kwadrat 1254 px na całą szerokość okna spychał tekst o 700 px
   w dół. W oknie figura staje po prawej, tekst ją opływa. */
body:has( .tbl-strona ) .zd-okno .tbl-kafel__foto { float: right; width: min( 300px, 42% ); margin: 4px 0 14px 22px; }
body:has( .tbl-strona ) .zd-okno .zd-okno__pelne::after, body:has( .tbl-strona ) .zd-okno .zd-okno__gora::after { content: ''; display: block; clear: both; }
@media ( max-width: 640px ) { body:has( .tbl-strona ) .zd-okno .tbl-kafel__foto { float: none; width: 100%; margin: 0 0 12px; } }
/* ── figura sekcji ──

   Obraz stoi przy leńdzie, nie nad nim: sekcja ma dalej zaczynać się od zdania,
   a nie od banera. Oblewanie tekstem zamiast pasa na całą szerokość - przy
   trzydziestu sekcjach pas byłby ścianą obrazków i przestałby cokolwiek znaczyć.
   Tor kafli zawsze idzie POD figurą (clear), żeby suwak nie wjeżdżał pod nią.
   Podpis jest częścią obrazu, nie dodatkiem: każda figura w tym dziale musi
   powiedzieć, co jest poświadczone, a co dorysowane. */
.tbl-sekcja__figura {
	float: right; width: min( 400px, 36% ); margin: 6px 0 20px 30px;
	border: 1px solid var( --wlos ); border-radius: 14px; overflow: hidden;
	background: #07151d; box-shadow: 0 30px 70px -46px rgba( 0, 0, 0, .95 );
}
.tbl-sekcja__figura img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tbl-sekcja__figura figcaption {
	padding: 9px 12px 10px; border-top: 1px solid var( --wlos );
	font: 300 11px / 1.5 var( --sans ); color: var( --tekst-slaby );
}
.tbl-sekcja:has( .tbl-sekcja__figura ) .tbl-sekcja__lead { max-width: 62ch; }
/* Każdy pojemnik, który stoi pod leadem, musi zejść POD figurę - inaczej
   wjechałby jej pod spód. Osiem sekcji pisanych ręcznie ma osiem różnych nazw
   pojemnika, więc wypisane są z nazwy, a nie zgadywane wzorcem. */
.tbl-sekcja > .zd-tor, .tbl-sekcja > .tbl-karty, .tbl-sekcja > .tbl-bostwa,
.tbl-sekcja > .tbl-echa, .tbl-sekcja > .tbl-mapa, .tbl-sekcja > .tbl-skala,
.tbl-sekcja > .tbl-praktyki, .tbl-sekcja > .tbl-zrodla, .tbl-sekcja > .tbl-granice,
.tbl-sekcja > .tbl-rodzaje, .tbl-sekcja > .tbl-ramy__siatka { clear: both; }
/* ── telefon: zapytanie MUSI stać po poprawkach ──

   Reguła dwukolumnowa z drugiej partii poprawek trafiła do arkusza PO
   zapytaniu `max-width: 980px` z partii pierwszej. Specyficzność ta sama,
   więc wygrała późniejsza - i na telefonie mapa dostawała `0px 320px`:
   kolumna rysunku zwężona do zera, panel na całą szerokość, mapa niewidoczna.
   Zmierzone w ramce 390 px.

   To jest ta rodzina błędu, o której wiem i w którą i tak wpadłem: dopisywanie
   poprawek na koniec arkusza działa dopóty, dopóki poprawka nie dotyka
   własności ustawianej też wewnątrz zapytania medialnego. Zapytania trzymać
   NA KOŃCU pliku, zawsze.  */

@media ( max-width: 980px ) {
	.tbl-mapa { grid-template-columns: minmax( 0, 1fr ); gap: 22px; }
	.tbl-mapa__plotno { order: 1; }
	.tbl-mapa__panel { order: 2; }
	.tbl-mapa__lista { max-height: 260px; }
	.tbl-mapa__miejsce text { font-size: 21px; stroke-width: 7px; }
	.tbl-mapa__rzeka { stroke-width: 1.6; }
	.tbl-mapa__stopien em { font-size: 9px; }
	.tbl-mapa__strz { width: 44px; height: 44px; }
	.tbl-mapa__notka { font-size: 14.5px; }
}

@media ( max-width: 560px ) {
	/* Przy tej szerokości dziesięć podpisanych stopni nie mieści się czytelnie.
	   Zostają same znaczniki, a rok czyta się z odczytu pod szyną, który
	   właśnie po to stoi osobno. */
	.tbl-mapa__stopien em { display: none; }
	.tbl-mapa__stopien { padding: 12px 0; }
	.tbl-mapa__stopien i { height: 4px; }
	.tbl-mapa__legenda { gap: 6px 12px; }
	.tbl-mapa__klucz { font-size: 11.5px; }
}

/* Odczyt roku: stoi zawsze, także gdy podpisy stopni zniknęły. */
.tbl-mapa__rok {
	margin: 12px 0 0; font: 400 11px var( --sans ); letter-spacing: .14em;
	text-transform: uppercase; color: var( --ochra-j );
}

@media ( max-width: 980px ) {
	.tbl-hero { padding: 46px 24px 32px; border-radius: 20px; }
	.tbl-hero::after { width: 180px; right: -30px; top: -20px; opacity: .26; }
	.tbl-sekcja--karb::after { width: 120px; opacity: .14; }
	.tbl-mapa__okna li { grid-template-columns: 70px minmax( 0, 1fr ); }
}

@media ( max-width: 860px ) {
	.tbl-sekcja__figura { float: none; width: 100%; margin: 16px 0 20px; }
	.tbl-sekcja:has( .tbl-sekcja__figura ) .tbl-sekcja__lead { max-width: none; }
}

/* ══ BURSZTYN OD MORZA, STAL OD ZAKONU ══
 *
 * Dzial wyprowadzony ze Slowian miał ich kompozycje swiatla: jedno cieple
 * zrodlo u gory. Po podmianie barw wygladal przez to jak tamten w innym
 * odcieniu, a ma wygladac jak wlasny.
 *
 * Dlatego swiatla sa DWA i stoja naprzeciw siebie. Cieple przychodzi z lewej
 * od strony morza - bursztyn jest jedyna rzecza, ktora z tego wybrzeza
 * wywozono i jedyna, po ktorej Baltowie trafili do pisma tysiac lat przed
 * chrztem. Zimne przychodzi z prawej, od strony zakonu - bo cala wiedza
 * o tej wierze wyszla spod reki tych, ktorzy z nia walczyli.
 *
 * To nie jest ozdoba. To jest teza dzialu polozona na tle. */
.tbl-strona {
	background:
		repeating-linear-gradient( 90deg, rgba( 212, 216, 208, .022 ) 0 1px, transparent 1px 5px ),
		radial-gradient( 900px 620px at 6% 4%, rgba( 217, 150, 43, .17 ), transparent 66% ),
		radial-gradient( 980px 700px at 96% 38%, rgba( 110, 133, 146, .15 ), transparent 68% ),
		radial-gradient( 760px 520px at 18% 82%, rgba( 217, 150, 43, .07 ), transparent 70% ),
		radial-gradient( 820px 560px at 88% 96%, rgba( 110, 133, 146, .08 ), transparent 70% ),
		var( --tlo );
}
/* Grunt ma byc debowy, nie brunatny: zielen podniesiona tak, zeby przy
   bursztynie bylo widac, ze to inny material niz plotno Slowian. */
body:has(.tbl-strona)::before { background-color: #07151d; }

/* NACIECIA, KTORYCH NIE MA, SA STALOWE. Wypelnionych NIE RUSZAM: arkusz
   bazowy scisza je razem ze stopniem (bursztyn przy zapisie z epoki, plotno
   przy folklorze, szarosc przy rekonstrukcji) i to dziala. Zmieniam tylko
   co zostalo poswiadczone. Nacieciа puste dostaja barwe zakonna, bo brak
   poswiadczenia w tym dziale nie jest przypadkiem: jest skutkiem tego, kto
   trzymal pioro. Czytelnik ma to widziec, zanim przeczyta o tym zdanie. */
.tbl-karb i b.brak { background: rgba( 110, 133, 146, .34 ); }
.tbl-stopien i b.brak { background: rgba( 110, 133, 146, .34 ); }

/* Znacznik obszaru to jedyne miejsce w kaflu, gdzie pada nazwa ludu i wiek.
   Idzie stala, zeby oko od razu wiedzialo, ze czyta metryke, a nie tresc. */
.tbl-kafel__obszar { color: #a2b7c0; border-color: rgba( 110, 133, 146, .3 ); }
.tbl-kafel__obszar i { color: rgba( 147, 168, 179, .75 ); }

/* Nadtytul sekcji na stalowo, tytul na bursztynowo - ta sama para na kazdej
   wysokosci strony, zeby rytm byl rozpoznawalny po barwie, nie po rozmiarze. */
.tbl-sekcja__nad { color: #a2b7c0; }
.tbl-przerywnik { color: rgba( 110, 133, 146, .42 ); }

/* TBL visual v1: image-led entrance, 2026-09-15 */
.tbl-hero {
  position: relative;
  max-width: none;
  min-height: min(760px, calc(100vh - 92px));
  margin: 18px -16px 0;
  padding: clamp(42px, 7vw, 92px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(226,182,111,.38);
  border-radius: 6px 72px 6px 30px;
  background-image:
    linear-gradient(90deg, rgba(7,21,29,.96) 0%, rgba(7,21,29,.78) 38%, rgba(7,21,29,.18) 72%),
    linear-gradient(0deg, rgba(7,21,29,.94) 0%, transparent 58%),
    url("gfx/tla/hero-baltyckie-wybrzeze.webp");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 90px rgba(7,21,29,.45), 0 34px 84px -48px rgba(0,0,0,.92);
}
.tbl-hero::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border: 1px solid rgba(226,182,111,.19);
  border-radius: 2px 54px 2px 20px;
  pointer-events: none;
}
.tbl-hero__tresc { max-width: 760px; }
.tbl-hero .tbl-nad { color: #e2b66f; }
.tbl-hero .tbl-tytul { color: #f2e8d5; text-shadow: 0 2px 28px rgba(0,0,0,.58); }
.tbl-hero .tbl-lead { max-width: 62ch; color: #d6e3e4; text-shadow: 0 2px 18px rgba(0,0,0,.78); }
.tbl-hero__waga, .tbl-sekcja--karb { display: none !important; }

.tbl-os-czasu { margin: 34px 0 0; padding: 20px 0 4px; border-top: 1px solid rgba(226,182,111,.28); }
.tbl-os-czasu h2 { margin: 0 0 16px; font: 400 clamp(25px,3vw,38px)/1.1 var(--serif); color: #f2e8d5; }
.tbl-os-czasu__tor { display: flex; gap: 10px; overflow-x: auto; padding: 0 0 14px; scrollbar-color: #b69362 #07151d; }
.tbl-os-czasu__tor a { flex: 0 0 auto; min-width: 148px; padding: 13px 16px; border: 1px solid rgba(182,147,98,.42); border-radius: 999px; color: #d6e3e4; text-decoration: none; background: rgba(17,41,54,.78); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.tbl-os-czasu__tor a:hover, .tbl-os-czasu__tor a:focus-visible { transform: translateY(-2px); border-color: #e2b66f; background: #112936; outline: none; }
.tbl-os-czasu__tor b { display: block; color: #e2b66f; font: 500 12px/1.2 var(--sans); letter-spacing: .08em; }
.tbl-os-czasu__tor span { display: block; margin-top: 5px; font: 300 13px/1.35 var(--sans); }

.tbl-wejscia { margin: 54px 0 72px; }
.tbl-wejscia > h2 { max-width: 16ch; margin: 0 0 22px; font: 400 clamp(34px,4.2vw,58px)/1.04 var(--serif); color: #f2e8d5; }
.tbl-wejscia__siatka { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.tbl-wejscie { position: relative; aspect-ratio: 1; min-height: 340px; overflow: hidden; border: 1px solid rgba(226,182,111,.42); border-radius: 6px 34px 6px 24px; color: #f2e8d5; text-decoration: none; background: #112936; box-shadow: 0 34px 72px -50px rgba(0,0,0,.95); }
.tbl-wejscie img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
.tbl-wejscie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,21,29,.96) 0%, rgba(7,21,29,.45) 44%, transparent 73%); }
.tbl-wejscie span { position: absolute; left: clamp(22px,4vw,42px); right: 24px; bottom: clamp(24px,4vw,42px); z-index: 1; font: 400 clamp(29px,3.4vw,48px)/1.03 var(--serif); text-shadow: 0 2px 20px rgba(0,0,0,.76); }
.tbl-wejscie small { display: block; margin-bottom: 8px; color: #e2b66f; font: 500 11px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.tbl-wejscie:hover img, .tbl-wejscie:focus-visible img { transform: scale(1.035); filter: saturate(1.08) brightness(1.04); }
.tbl-wejscie:focus-visible { outline: 2px solid #e2b66f; outline-offset: 4px; }

.tbl-mapa-atlas { margin: 0 0 76px; padding: clamp(22px,3.4vw,42px); border: 1px solid rgba(226,182,111,.34); border-radius: 6px 44px 6px 26px; background: linear-gradient(145deg,rgba(17,41,54,.94),rgba(7,21,29,.98)); box-shadow: 0 42px 82px -58px rgba(0,0,0,.96); }
.tbl-mapa-atlas__naglowek { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; align-items: end; margin-bottom: 24px; }
.tbl-mapa-atlas__naglowek small { display: block; margin-bottom: 7px; color: #e2b66f; font: 500 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.tbl-mapa-atlas__naglowek h2 { margin: 0; color: #f2e8d5; font: 400 clamp(34px,4.3vw,58px)/1.02 var(--serif); }
.tbl-mapa-atlas__naglowek p { max-width: 68ch; margin: 14px 0 0; color: #d6e3e4; font: 300 16px/1.65 var(--sans); }
.tbl-mapa-atlas__naglowek nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tbl-mapa-atlas__naglowek nav a { padding: 10px 14px; border: 1px solid rgba(226,182,111,.34); border-radius: 999px; color: #e2b66f; font: 500 12px/1.2 var(--sans); letter-spacing: .05em; text-decoration: none; background: rgba(11,32,41,.75); }
.tbl-mapa-atlas__naglowek nav a:hover,.tbl-mapa-atlas__naglowek nav a:focus-visible { border-color: #e2b66f; background: rgba(93,111,73,.34); outline: none; }
.tbl-mapa-atlas__plansza { position: relative; display: block; overflow: hidden; border: 1px solid rgba(226,182,111,.42); border-radius: 4px 30px 4px 20px; background: #07151d; text-decoration: none; }
.tbl-mapa-atlas__plansza img { display: block; width: 100%; aspect-ratio: 755/565; object-fit: cover; transition: transform .55s ease,filter .55s ease; }
.tbl-mapa-atlas__plansza span { position: absolute; right: 18px; bottom: 18px; padding: 11px 15px; border: 1px solid rgba(226,182,111,.5); border-radius: 999px; color: #f2e8d5; font: 500 12px/1.2 var(--sans); letter-spacing: .06em; background: rgba(7,21,29,.88); box-shadow: 0 8px 24px rgba(0,0,0,.34); }
.tbl-mapa-atlas__plansza:hover img,.tbl-mapa-atlas__plansza:focus-visible img { transform: scale(1.012); filter: saturate(1.06) brightness(1.03); }
.tbl-mapa-atlas__plansza:focus-visible { outline: 2px solid #e2b66f; outline-offset: 4px; }

.tbl-kafel:has(.tbl-kafel__foto) { aspect-ratio: 1; min-height: 320px; padding: 0; border-radius: 6px 28px 6px 20px; }
.tbl-kafel:has(.tbl-kafel__foto) .zd-klocek__skrot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: 26px; isolation: isolate; }
.tbl-kafel:has(.tbl-kafel__foto) .zd-klocek__skrot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,21,29,.98) 0%, rgba(7,21,29,.58) 52%, transparent 82%); }
.tbl-kafel:has(.tbl-kafel__foto) .tbl-kafel__foto { position: absolute; inset: 0; z-index: -2; margin: 0; border: 0; border-radius: 0; }
.tbl-kafel:has(.tbl-kafel__foto) .tbl-kafel__foto img { width: 100%; height: 100%; object-fit: cover; }
.tbl-kafel:has(.tbl-kafel__foto) .tbl-kafel__foto figcaption { display: none; }
.tbl-kafel:has(.tbl-kafel__foto) h3 { color: #f2e8d5; font-size: clamp(28px,2.7vw,39px); text-shadow: 0 2px 20px rgba(0,0,0,.76); }
.tbl-kafel:has(.tbl-kafel__foto) .tbl-kafel__obszar { color: #e2b66f; }
.tbl-kafel:has(.tbl-kafel__foto) .zd-klocek__skrot > p { display: none; }

@media (max-width: 760px) {
  .tbl-hero { min-height: 650px; margin-inline: -8px; padding: 32px 22px; border-radius: 4px 38px 4px 20px; background-position: 58% center; }
  .tbl-wejscia__siatka { grid-template-columns: 1fr; }
  .tbl-wejscie { min-height: 300px; }
  .tbl-mapa-atlas { padding: 16px; }
  .tbl-mapa-atlas__naglowek { grid-template-columns: 1fr; gap: 18px; }
  .tbl-mapa-atlas__naglowek nav { justify-content: flex-start; }
  .tbl-mapa-atlas__plansza img { min-height: 420px; object-position: center; }
  .tbl-mapa-atlas__plansza span { left: 14px; right: auto; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tbl-wejscie img, .tbl-os-czasu__tor a { transition: none; }
}



/* TBL visual v1: image-led entrance, 2026-09-15 */
.tbl-hero {
  position: relative;
  max-width: none;
  min-height: min(760px, calc(100vh - 92px));
  margin: 18px -16px 0;
  padding: clamp(42px, 7vw, 92px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(226,182,111,.38);
  border-radius: 6px 72px 6px 30px;
  background-image:
    linear-gradient(90deg, rgba(7,21,29,.96) 0%, rgba(7,21,29,.78) 38%, rgba(7,21,29,.18) 72%),
    linear-gradient(0deg, rgba(7,21,29,.94) 0%, transparent 58%),
    url("gfx/tla/hero-baltyckie-wybrzeze.webp");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 90px rgba(7,21,29,.45), 0 34px 84px -48px rgba(0,0,0,.92);
}
.tbl-hero::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border: 1px solid rgba(226,182,111,.19);
  border-radius: 2px 54px 2px 20px;
  pointer-events: none;
}
.tbl-hero__tresc { max-width: 760px; }
.tbl-hero .tbl-nad { color: #e2b66f; }
.tbl-hero .tbl-tytul { color: #f2e8d5; text-shadow: 0 2px 28px rgba(0,0,0,.58); }
.tbl-hero .tbl-lead { max-width: 62ch; color: #d6e3e4; text-shadow: 0 2px 18px rgba(0,0,0,.78); }
.tbl-hero__waga, .tbl-sekcja--karb { display: none !important; }

.tbl-os-czasu { margin: 34px 0 0; padding: 20px 0 4px; border-top: 1px solid rgba(226,182,111,.28); }
.tbl-os-czasu h2 { margin: 0 0 16px; font: 400 clamp(25px,3vw,38px)/1.1 var(--serif); color: #f2e8d5; }
.tbl-os-czasu__tor { display: flex; gap: 10px; overflow-x: auto; padding: 0 0 14px; scrollbar-color: #b69362 #07151d; }
.tbl-os-czasu__tor a { flex: 0 0 auto; min-width: 148px; padding: 13px 16px; border: 1px solid rgba(182,147,98,.42); border-radius: 999px; color: #d6e3e4; text-decoration: none; background: rgba(17,41,54,.78); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.tbl-os-czasu__tor a:hover, .tbl-os-czasu__tor a:focus-visible { transform: translateY(-2px); border-color: #e2b66f; background: #112936; outline: none; }
.tbl-os-czasu__tor b { display: block; color: #e2b66f; font: 500 12px/1.2 var(--sans); letter-spacing: .08em; }
.tbl-os-czasu__tor span { display: block; margin-top: 5px; font: 300 13px/1.35 var(--sans); }

.tbl-wejscia { margin: 54px 0 72px; }
.tbl-wejscia > h2 { max-width: 16ch; margin: 0 0 22px; font: 400 clamp(34px,4.2vw,58px)/1.04 var(--serif); color: #f2e8d5; }
.tbl-wejscia__siatka { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.tbl-wejscie { position: relative; aspect-ratio: 1; min-height: 340px; overflow: hidden; border: 1px solid rgba(226,182,111,.42); border-radius: 6px 34px 6px 24px; color: #f2e8d5; text-decoration: none; background: #112936; box-shadow: 0 34px 72px -50px rgba(0,0,0,.95); }
.tbl-wejscie img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
.tbl-wejscie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,21,29,.96) 0%, rgba(7,21,29,.45) 44%, transparent 73%); }
.tbl-wejscie span { position: absolute; left: clamp(22px,4vw,42px); right: 24px; bottom: clamp(24px,4vw,42px); z-index: 1; font: 400 clamp(29px,3.4vw,48px)/1.03 var(--serif); text-shadow: 0 2px 20px rgba(0,0,0,.76); }
.tbl-wejscie small { display: block; margin-bottom: 8px; color: #e2b66f; font: 500 11px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.tbl-wejscie:hover img, .tbl-wejscie:focus-visible img { transform: scale(1.035); filter: saturate(1.08) brightness(1.04); }
.tbl-wejscie:focus-visible { outline: 2px solid #e2b66f; outline-offset: 4px; }

.tbl-mapa-atlas { margin: 0 0 76px; padding: clamp(22px,3.4vw,42px); border: 1px solid rgba(226,182,111,.34); border-radius: 6px 44px 6px 26px; background: linear-gradient(145deg,rgba(17,41,54,.94),rgba(7,21,29,.98)); box-shadow: 0 42px 82px -58px rgba(0,0,0,.96); }
.tbl-mapa-atlas__naglowek { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; align-items: end; margin-bottom: 24px; }
.tbl-mapa-atlas__naglowek small { display: block; margin-bottom: 7px; color: #e2b66f; font: 500 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.tbl-mapa-atlas__naglowek h2 { margin: 0; color: #f2e8d5; font: 400 clamp(34px,4.3vw,58px)/1.02 var(--serif); }
.tbl-mapa-atlas__naglowek p { max-width: 68ch; margin: 14px 0 0; color: #d6e3e4; font: 300 16px/1.65 var(--sans); }
.tbl-mapa-atlas__naglowek nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tbl-mapa-atlas__naglowek nav a { padding: 10px 14px; border: 1px solid rgba(226,182,111,.34); border-radius: 999px; color: #e2b66f; font: 500 12px/1.2 var(--sans); letter-spacing: .05em; text-decoration: none; background: rgba(11,32,41,.75); }
.tbl-mapa-atlas__naglowek nav a:hover,.tbl-mapa-atlas__naglowek nav a:focus-visible { border-color: #e2b66f; background: rgba(93,111,73,.34); outline: none; }
.tbl-mapa-atlas__tryby { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tbl-mapa-atlas__tryby button { appearance: none; padding: 11px 15px; border: 1px solid rgba(226,182,111,.34); border-radius: 999px; color: #d6e3e4; background: rgba(7,21,29,.74); font: 600 12px/1.2 var(--sans); letter-spacing: .04em; cursor: pointer; transition: color .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease; }
.tbl-mapa-atlas__tryby button[aria-selected="true"] { color: #f2e8d5; border-color: #e2b66f; background: linear-gradient(135deg,rgba(132,95,43,.76),rgba(65,86,64,.72)); box-shadow: 0 0 24px rgba(226,182,111,.12); }
.tbl-mapa-atlas__tryby button:focus-visible { outline: 2px solid #e2b66f; outline-offset: 3px; }
.tbl-mapa-atlas__widoki { position: relative; }
.tbl-mapa-atlas__plansza { position: relative; display: block; overflow: hidden; border: 1px solid rgba(226,182,111,.42); border-radius: 4px 30px 4px 20px; background: #07151d; text-decoration: none; }
.tbl-mapa-atlas__plansza[hidden] { display: none; }
.tbl-mapa-atlas__plansza img { display: block; width: 100%; max-height: 860px; object-fit: contain; transition: transform .55s ease,filter .55s ease; }
.tbl-mapa-atlas__plansza[data-widok="prusy"] img { aspect-ratio: 755/565; object-fit: cover; }
.tbl-mapa-atlas__plansza span { position: absolute; right: 18px; bottom: 18px; padding: 11px 15px; border: 1px solid rgba(226,182,111,.5); border-radius: 999px; color: #f2e8d5; font: 500 12px/1.2 var(--sans); letter-spacing: .06em; background: rgba(7,21,29,.88); box-shadow: 0 8px 24px rgba(0,0,0,.34); }
.tbl-mapa-atlas__plansza:hover img,.tbl-mapa-atlas__plansza:focus-visible img { transform: scale(1.012); filter: saturate(1.06) brightness(1.03); }
.tbl-mapa-atlas__plansza:focus-visible { outline: 2px solid #e2b66f; outline-offset: 4px; }

.tbl-kafel:has(.tbl-kafel__foto) { aspect-ratio: 1; min-height: 320px; padding: 0; border-radius: 6px 28px 6px 20px; }
.tbl-kafel:has(.tbl-kafel__foto) .zd-klocek__skrot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding: 26px; isolation: isolate; }
.tbl-kafel:has(.tbl-kafel__foto) .zd-klocek__skrot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,21,29,.98) 0%, rgba(7,21,29,.58) 52%, transparent 82%); }
.tbl-kafel:has(.tbl-kafel__foto) .tbl-kafel__foto { position: absolute; inset: 0; z-index: -2; margin: 0; border: 0; border-radius: 0; }
.tbl-kafel:has(.tbl-kafel__foto) .tbl-kafel__foto img { width: 100%; height: 100%; object-fit: cover; }
.tbl-kafel:has(.tbl-kafel__foto) .tbl-kafel__foto figcaption { display: none; }
.tbl-kafel:has(.tbl-kafel__foto) h3 { color: #f2e8d5; font-size: clamp(28px,2.7vw,39px); text-shadow: 0 2px 20px rgba(0,0,0,.76); }
.tbl-kafel:has(.tbl-kafel__foto) .tbl-kafel__obszar { color: #e2b66f; }
.tbl-kafel:has(.tbl-kafel__foto) .zd-klocek__skrot > p { display: none; }

@media (max-width: 760px) {
  .tbl-hero { min-height: 650px; margin-inline: -8px; padding: 32px 22px; border-radius: 4px 38px 4px 20px; background-position: 58% center; }
  .tbl-wejscia__siatka { grid-template-columns: 1fr; }
  .tbl-wejscie { min-height: 300px; }
  .tbl-mapa-atlas { padding: 16px; }
  .tbl-mapa-atlas__naglowek { grid-template-columns: 1fr; gap: 18px; }
  .tbl-mapa-atlas__naglowek nav { justify-content: flex-start; }
  .tbl-mapa-atlas__plansza img { min-height: 420px; object-position: center; }
  .tbl-mapa-atlas__plansza span { left: 14px; right: auto; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tbl-wejscie img, .tbl-os-czasu__tor a { transition: none; }
}






/* TBL full-page integration v6 - Poland layout parity, 2026-09-15 */
body:has(.tbl-strona) {
  margin: 0;
  background: #07151d;
  color: #d6e3e4;
}
body:has(.tbl-strona) .wp-site-blocks > header,
body:has(.tbl-strona) header.wp-block-template-part,
body:has(.tbl-strona) .wp-site-blocks > footer,
body:has(.tbl-strona) footer.wp-block-template-part,
body:has(.tbl-strona) .wp-block-post-title,
body:has(.tbl-strona) .entry-title {
  display: none !important;
}
body:has(.tbl-strona) .wp-site-blocks,
body:has(.tbl-strona) main,
body:has(.tbl-strona) .wp-block-group,
body:has(.tbl-strona) .wp-block-post-content,
body:has(.tbl-strona) .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body:has(.tbl-strona) .wp-block-post-content > *,
body:has(.tbl-strona) .entry-content > * {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body:has(.tbl-strona) .tbl-strona {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  overflow: clip;
  background:
    radial-gradient(circle at 15% 9%, rgba(198,162,113,.10), transparent 28rem),
    linear-gradient(180deg, #07151d 0%, #112936 52%, #07151d 100%);
}
.tbl-strona, .tbl-strona *, .tbl-strona *::before, .tbl-strona *::after {
  box-sizing: border-box;
}
@media (max-width: 782px) {
  body:has(.tbl-strona) #wpadminbar { position: fixed; }
  .tbl-hero { min-height: 72svh; margin-inline: 0; }
}



/* TBL whole-page atmosphere v7 */
body:has(.tbl-strona) {
  background:
    linear-gradient(180deg, rgba(7,21,29,.96), rgba(17,41,54,.91) 46%, rgba(7,21,29,.98)),
    url(gfx/tla/hero-baltyckie-wybrzeze.webp) center top / cover fixed no-repeat;
}
.tbl-strona {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(7,21,29,.78), rgba(17,41,54,.66) 46%, rgba(7,21,29,.86)) !important;
}
.tbl-strona::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 18%, rgba(226,182,111,.08), transparent 24rem),
    radial-gradient(circle at 92% 48%, rgba(214,227,228,.05), transparent 32rem),
    linear-gradient(90deg, rgba(7,21,29,.30), transparent 18%, transparent 82%, rgba(7,21,29,.30));
}
.tbl-sekcja {
  position: relative;
  padding-block: clamp(24px, 3vw, 46px);
}
.tbl-sekcja:nth-of-type(even) {
  background: linear-gradient(90deg, transparent, rgba(17,41,54,.34) 14%, rgba(17,41,54,.34) 86%, transparent);
}
@media (max-width: 782px) {
  body:has(.tbl-strona) { background-attachment: scroll; }
  .tbl-sekcja { padding-block: 22px; }
}



/* TBL entry slider and stronger full-page background v8 */
.tbl-strona {
  background: linear-gradient(180deg, rgba(7,21,29,.56), rgba(17,41,54,.48) 46%, rgba(7,21,29,.64)) !important;
}
.tbl-wejscia {
  position: relative;
  padding: clamp(28px,4vw,54px) 0;
}
.tbl-wejscia__siatka {
  display: flex !important;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-color: #c6a271 #112936;
  scrollbar-width: thin;
}
.tbl-wejscie {
  flex: 0 0 clamp(290px, 34vw, 470px);
  min-height: 0 !important;
  scroll-snap-align: start;
}
.tbl-wejscia__sterowanie {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: -64px 0 18px;
}
.tbl-wejscia__sterowanie button {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(198,162,113,.64);
  border-radius: 50%;
  background: rgba(17,41,54,.88);
  color: #f2e8d5;
  font: 400 24px/1 serif;
  cursor: pointer;
  box-shadow: 0 12px 32px -18px rgba(0,0,0,.92);
}
.tbl-wejscia__sterowanie button:hover,
.tbl-wejscia__sterowanie button:focus-visible {
  border-color: #e2b66f;
  color: #e2b66f;
  outline: none;
}
@media (max-width: 782px) {
  .tbl-strona { background: rgba(7,21,29,.64) !important; }
  .tbl-wejscia__sterowanie { margin: 0 0 14px; justify-content: flex-start; }
  .tbl-wejscie { flex-basis: min(82vw, 360px); }
}



/* TBL visible page background correction v9 */
.tbl-strona {
  background: linear-gradient(180deg, rgba(7,21,29,.38), rgba(17,41,54,.34) 46%, rgba(7,21,29,.46)) !important;
}
.tbl-sekcja:nth-of-type(even) {
  background: linear-gradient(90deg, rgba(7,21,29,.08), rgba(17,41,54,.46) 14%, rgba(17,41,54,.46) 86%, rgba(7,21,29,.08));
  border-block: 1px solid rgba(198,162,113,.10);
}


/* TBL background visibility v10 */
body:has(.tbl-strona) {
  background:
    linear-gradient(180deg, rgba(7,21,29,.74), rgba(17,41,54,.68) 46%, rgba(7,21,29,.78)),
    url(gfx/tla/hero-baltyckie-wybrzeze.webp) center top / cover fixed no-repeat;
}
.tbl-strona {
  background: linear-gradient(180deg, rgba(7,21,29,.34), rgba(17,41,54,.30) 46%, rgba(7,21,29,.40)) !important;
}
@media (max-width: 782px) {
  body:has(.tbl-strona) { background-attachment: scroll; }
}