/* Słowianie — religia bez własnego zapisu.
 *
 * Paleta z rozmysłem NIE jest ani zielono-czerwonym kostiumem ludowym, ani
 * czernią z krwistym akcentem, w którą ubiera się dziś pogaństwo. Jedno i
 * drugie jest przebraniem z ostatnich dwustu lat, a rozdzielanie tego, co
 * dawne, od tego, co dorobiono później, jest tematem całej strony — więc
 * strona nie może sama chodzić w przebraniu.
 *
 * Barwy są wzięte z materiałów, w których ta kultura naprawdę pracowała:
 * bielone płótno, ochra, rdza z żelaza darniowego i dym z okopconej belki.
 * Faktura tła jest splotem płóciennym, bo płótno jest jedynym nośnikiem,
 * który po Słowianach przetrwał w ilości godnej uwagi.
 *
 * Cała śmiałość siedzi w KARBIE. Cztery nacięcia przy każdym haśle, i ten
 * sam karb jako sterowanie: wybrany stopień gasi wszystko, co słabiej
 * poświadczone. Strona kurczy się wtedy na oczach czytelnika i to jest
 * jedyny sposób, żeby pokazać skalę luki, nie opowiadając o niej.
 */
.tsl-strona {
	--tlo: #100e0b; --dno: #0b0a08;
	--wlos: rgba( 216, 205, 184, .13 ); --obrys: rgba( 207, 154, 60, .26 );
	--len: #d8cdb8; --len-j: #ece3d2;
	--ochra: #cf9a3c; --ochra-j: #e5b862;
	--rdza: #a8442a; --rdza-j: #c4603f;
	--tekst: #a59b8b; --tekst-slaby: #7e766a; --tekst-mocny: #ece3d2; --etyk: #857c6e;
	--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( 216, 205, 184, .028 ) 0 1px, transparent 1px 4px ),
		repeating-linear-gradient( 0deg, rgba( 216, 205, 184, .022 ) 0 1px, transparent 1px 4px ),
		radial-gradient( 1150px 580px at 50% -12%, rgba( 207, 154, 60, .13 ), transparent 70% ),
		radial-gradient( 820px 500px at 12% 46%, rgba( 168, 68, 42, .075 ), transparent 72% ),
		radial-gradient( 700px 460px at 88% 74%, rgba( 216, 205, 184, .05 ), transparent 70% ),
		rgba( 16, 14, 11, .87 );
	overflow-x: clip;
}
.tsl-strona *, .tsl-strona *::before, .tsl-strona *::after { box-sizing: border-box; }
body:has( .tsl-strona ) .wp-site-blocks > header, body:has( .tsl-strona ) header.wp-block-template-part, body:has( .tsl-strona ) .wp-site-blocks > footer, body:has( .tsl-strona ) footer.wp-block-template-part, body:has( .tsl-strona ) .wp-block-post-title { display: none !important; }
body:has( .tsl-strona ) .wp-site-blocks, body:has( .tsl-strona ) .wp-block-group, body:has( .tsl-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tsl-strona ) .wp-block-post-content > *, body:has( .tsl-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tsl-strona ) {
	background:
		linear-gradient( 180deg, rgba( 8, 9, 7, .7 ), rgba( 12, 10, 8, .82 ) 44%, rgba( 7, 9, 7, .76 ) ),
		url( '/wp-content/uploads/tarot-kompat/polnoc/slowianie/gfx/tlo-dolina-debow.webp' ) center top / cover fixed no-repeat,
		#100e0b;
}
body:has( .tsl-strona ) .wp-site-blocks,
body:has( .tsl-strona ) main,
body:has( .tsl-strona ) .wp-block-post-content { background: transparent !important; }
body:has( .tsl-strona ) .wp-block-post-content > .tsl-strona, body:has( .tsl-strona ) .entry-content > .tsl-strona, .tsl-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tsl-strona button { font-family: inherit; }

/* ── ścieżka ── */
.tsl-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 ); }
.tsl-sciezka i { font-style: normal; color: var( --etyk ); }
.tsl-sciezka b { font-weight: 400; color: var( --ochra-j ); }
.tsl-poziom { margin: 0 0 0 auto; }
.tsl-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 ); }
.tsl-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --ochra ); box-shadow: 0 0 10px var( --ochra ); }

/* ── nagłówek ── */
.tsl-hero { max-width: 84ch; padding: 44px 0 8px; }
.tsl-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tsl-tytul { margin: 0; font: 500 clamp( 44px, 5.4vw, 80px )/1.02 var( --serif ); color: var( --ochra-j ); letter-spacing: -.01em; }
.tsl-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .13em; line-height: 1.5; color: var( --len ); }
.tsl-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ę. */
.tsl-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( 168, 68, 42, .12 ), rgba( 207, 154, 60, .05 ) 46%, transparent ); }
.tsl-hero__waga b { font: 500 clamp( 46px, 5vw, 68px )/1 var( --serif ); color: var( --ochra-j ); text-shadow: 0 0 34px rgba( 207, 154, 60, .42 ); }
.tsl-hero__waga span { font-size: 14.5px; line-height: 1.72; color: var( --tekst ); }

/* ── sekcje ── */
.tsl-sekcja { position: relative; isolation: isolate; margin: 82px 0 0; }
.tsl-sekcja::after {
	content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: min( 190px, 18vw ); aspect-ratio: 1;
	background: url( '/wp-content/uploads/tarot-kompat/polnoc/slowianie/gfx/ornament-dab-len.png' ) top right / contain no-repeat;
	opacity: .18; pointer-events: none; filter: drop-shadow( 0 2px 4px rgba( 0, 0, 0, .35 ) );
}
.tsl-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( 207, 154, 60, .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 ); }
.tsl-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tsl-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3.1vw, 42px )/1.14 var( --serif ); color: var( --ochra-j ); }
.tsl-sekcja__lead { max-width: 80ch; margin: 14px 0 0; font-size: 15px; line-height: 1.76; color: var( --tekst ); }
.tsl-sekcja--echa .tsl-sekcja__tytul { color: var( --len-j ); }
.tsl-sekcja--zywe { border-color: rgba( 216, 205, 184, .16 ); }
.tsl-sekcja--zywe .tsl-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ą. */
.tsl-karb { display: inline-flex; align-items: center; gap: 10px; }
.tsl-karb i { display: inline-flex; gap: 3px; font-style: normal; }
.tsl-karb i b { display: block; width: 3px; height: 15px; border-radius: 1px; }
.tsl-karb i b.jest { background: linear-gradient( 180deg, var( --ochra-j ), var( --ochra ) ); box-shadow: 0 0 9px rgba( 207, 154, 60, .6 ); }
.tsl-karb i b.brak { background: rgba( 216, 205, 184, .1 ); box-shadow: inset 0 0 0 1px rgba( 216, 205, 184, .07 ); }
.tsl-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. */
.tsl-karb[ data-stopien="folklor" ] i b.jest { background: linear-gradient( 180deg, var( --len ), #a89c88 ); box-shadow: 0 0 8px rgba( 216, 205, 184, .3 ); }
.tsl-karb[ data-stopien="rekonstrukcja" ] i b.jest { background: linear-gradient( 180deg, #8b8375, #6d675c ); box-shadow: none; }

/* skala jako sterowanie */
.tsl-skala { display: grid; grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) ); gap: 14px; margin: 26px 0 0; }
.tsl-stopien { display: grid; gap: 10px; padding: 20px 20px 18px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 216, 205, 184, .045 ), rgba( 216, 205, 184, .012 ) ); text-align: left; cursor: pointer; transition: border-color .28s, background .28s, transform .28s, box-shadow .28s; }
.tsl-stopien i { display: inline-flex; gap: 4px; font-style: normal; }
.tsl-stopien i b { display: block; width: 4px; height: 22px; border-radius: 1px; }
.tsl-stopien i b.jest { background: linear-gradient( 180deg, var( --ochra-j ), var( --ochra ) ); box-shadow: 0 0 12px rgba( 207, 154, 60, .55 ); }
.tsl-stopien i b.brak { background: rgba( 216, 205, 184, .1 ); }
.tsl-stopien > b { font: 500 19px var( --serif ); color: var( --len-j ); }
.tsl-stopien > span { font-size: 12.5px; line-height: 1.62; color: var( --tekst-slaby ); }
.tsl-stopien__ile { font-style: normal; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tsl-stopien:hover { border-color: var( --obrys ); background: linear-gradient( 180deg, rgba( 207, 154, 60, .1 ), rgba( 216, 205, 184, .02 ) ); transform: translateY( -2px ); }
.tsl-stopien[ aria-pressed="true" ] { border-color: var( --ochra ); background: linear-gradient( 180deg, rgba( 207, 154, 60, .18 ), rgba( 168, 68, 42, .06 ) ); box-shadow: 0 0 0 1px rgba( 207, 154, 60, .3 ), 0 26px 60px -34px rgba( 207, 154, 60, .55 ); }
.tsl-stopien[ data-stopien="folklor" ] i b.jest { background: linear-gradient( 180deg, var( --len ), #a89c88 ); box-shadow: 0 0 10px rgba( 216, 205, 184, .28 ); }
.tsl-stopien[ data-stopien="rekonstrukcja" ] i b.jest { background: linear-gradient( 180deg, #8b8375, #6d675c ); 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. */
.tsl-stopien__ile.jest-puste { color: var( --rdza-j ); opacity: .8; }
.tsl-stopien:has( .jest-puste ) i b.jest { opacity: .45; }
.tsl-skala__podpis { max-width: 76ch; margin: 20px 0 0; font-size: 13px; line-height: 1.7; color: var( --tekst-slaby ); }
.tsl-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ć. */
.tsl-strona [data-stopien] { transition: opacity .5s, filter .5s, transform .5s; }
.tsl-strona.jest-filtr [data-stopien].tsl-gasnie { opacity: .13; filter: grayscale( 1 ) blur( .4px ); pointer-events: none; transform: scale( .985 ); }
.tsl-strona.jest-filtr [data-stopien]:not( .tsl-gasnie ) { box-shadow: 0 0 0 1px rgba( 207, 154, 60, .28 ), 0 30px 70px -44px rgba( 207, 154, 60, .5 ); }

/* ══════════════  bogowie  ══════════════ */
.tsl-bostwa, .tsl-praktyki, .tsl-zrodla, .tsl-rodzaje, .tsl-echa { display: grid; grid-template-columns: repeat( auto-fit, minmax( 268px, 1fr ) ); gap: 16px; margin-top: 28px; }
.tsl-bog, .tsl-kafel, .tsl-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( 216, 205, 184, .05 ), rgba( 216, 205, 184, .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. */
.tsl-bog::before, .tsl-kafel::before, .tsl-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; }
.tsl-bog[ data-stopien="folklor" ]::before, .tsl-kafel[ data-stopien="folklor" ]::before { background: linear-gradient( 180deg, transparent, var( --len ), transparent ); opacity: .32; }
.tsl-bog[ data-stopien="rekonstrukcja" ]::before, .tsl-kafel[ data-stopien="rekonstrukcja" ]::before { background: linear-gradient( 180deg, transparent, #7c7568, transparent ); opacity: .3; }
.tsl-echo::before { background: linear-gradient( 180deg, transparent, var( --rdza-j ), transparent ); opacity: .5; }
.tsl-bog:hover, .tsl-kafel:hover, .tsl-echo:hover { border-color: var( --obrys ); transform: translateY( -3px ); background: linear-gradient( 180deg, rgba( 207, 154, 60, .09 ), rgba( 216, 205, 184, .02 ) ); box-shadow: 0 30px 66px -40px rgba( 0, 0, 0, .92 ), 0 0 34px -18px rgba( 207, 154, 60, .38 ); }
.tsl-bog h3, .tsl-kafel h3, .tsl-echo h3 { margin: 0 0 10px; font: 500 24px var( --serif ); color: var( --len-j ); }
.tsl-echo h3 { color: var( --ochra-j ); }
.tsl-bog p, .tsl-kafel p, .tsl-echo p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
.tsl-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; }
.tsl-bog__obszar i { font-style: normal; opacity: .8; }
.tsl-bog__krotko { color: var( --tekst-mocny ) !important; }
.tsl-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; }
.tsl-echo__kiedy i { font-style: normal; }
.tsl-kafel--magia { padding: 20px 20px 18px; }
.tsl-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. */
.tsl-gdzie { margin-top: 18px !important; padding: 16px 18px; border-left: 2px solid var( --rdza ); border-radius: 0 12px 12px 0; background: rgba( 168, 68, 42, .08 ); font-size: 13px !important; }
.tsl-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ń  ══════════════ */
.tsl-piec { display: grid; gap: 12px; }
.tsl-piec > div { padding: 16px 18px; border: 1px solid var( --wlos ); border-radius: 14px; background: rgba( 216, 205, 184, .035 ); }
.tsl-piec b { display: block; margin-bottom: 6px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --etyk ); }
.tsl-piec p { margin: 0 !important; font-size: 13.5px; line-height: 1.7; color: var( --tekst ); }
.tsl-piec .jest-starsze { border-color: var( --obrys ); background: rgba( 207, 154, 60, .075 ); }
.tsl-piec .jest-starsze b { color: var( --ochra-j ); }
.tsl-piec .jest-chrzest { border-color: rgba( 216, 205, 184, .2 ); background: rgba( 216, 205, 184, .055 ); }
.tsl-piec .jest-chrzest b { color: var( --len ); }
.tsl-piec .jest-puste { border-color: rgba( 168, 68, 42, .3 ); background: rgba( 168, 68, 42, .07 ); }
.tsl-piec .jest-puste b { color: var( --rdza-j ); }
@media ( min-width: 900px ) { .tsl-piec { grid-template-columns: 1fr 1fr; } .tsl-piec .jest-puste { grid-column: 1 / -1; } }

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

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

.tsl-kafel__foto {
	display: block; position: relative; overflow: hidden;
	width: calc( 100% + 44px ); height: 224px; margin: -22px -22px 18px;
	border-bottom: 1px solid var( --wlos );
	background: #13231e;
}
.tsl-kafel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tsl-kafel__foto::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, transparent 42%, rgba( 6, 15, 12, .72 ) ); }
.tsl-kafel:has( .tsl-kafel__foto ) { overflow: hidden; }
.tsl-kafel:has( .tsl-kafel__foto )::before { top: 246px; }

@media ( max-width: 780px ) {
	.tsl-strona { padding: 0 18px 70px; }
	.tsl-hero__waga { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
	.tsl-sekcja { margin-top: 58px; }
	.tsl-sekcja--scisla { padding: 26px 20px 30px; }
	.tsl-poziom { margin: 6px 0 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tsl-strona *, .tsl-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. */
.tsl-bog__foto { margin: -24px -24px 14px; border-radius: 19px 19px 0 0; overflow: hidden; aspect-ratio: 1 / 1; background: rgba( 0, 0, 0, .35 ); }
.tsl-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 `.tsl-strona`, więc zmienne działu tu nie
   sięgają — barwy stoją wartościami. */
body:has( .tsl-strona ) .zd-tlo {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Jost, system-ui, sans-serif;
}
body:has( .tsl-strona ) .zd-okno {
  background:
    radial-gradient( 120% 70% at 50% -6%, rgba( 207, 154, 60, .2 ), transparent 62% ),
    radial-gradient( 90% 60% at 92% 108%, rgba( 168, 68, 42, .13 ), transparent 68% ),
    linear-gradient( 178deg, #1c1813 0%, #13110d 46%, #0a0908 100% );
  border: 1px solid rgba( 216, 205, 184, .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( 207, 154, 60, .42 );
}
body:has( .tsl-strona ) .zd-okno__tekst,
body:has( .tsl-strona ) .zd-okno__pelne p,
body:has( .tsl-strona ) .zd-okno__gora p,
body:has( .tsl-strona ) .zd-okno p {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.72; color: #ece3d2;
}
body:has( .tsl-strona ) .zd-okno__tytul,
body:has( .tsl-strona ) .zd-okno h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp( 34px, 3.4vw, 46px ); font-weight: 500; letter-spacing: .015em; color: #f0cf8c;
  text-shadow: 0 0 42px rgba( 207, 154, 60, .45 ), 0 2px 18px rgba( 0, 0, 0, .8 );
}
body:has( .tsl-strona ) .zd-okno__gora::after {
  content: ''; display: block; height: 2px; margin: 18px 0 4px;
  background: linear-gradient( 90deg, rgba( 207, 154, 60, .85 ), rgba( 168, 68, 42, .5 ) 38%, transparent 88% );
  box-shadow: 0 0 18px rgba( 207, 154, 60, .45 );
}
body:has( .tsl-strona ) .zd-okno::before,
body:has( .tsl-strona ) .zd-okno::after {
  content: ''; position: absolute; width: 62px; height: 62px; pointer-events: none;
  border-color: rgba( 216, 205, 184, .68 ); border-style: solid; border-width: 0;
  filter: drop-shadow( 0 0 10px rgba( 216, 205, 184, .45 ) );
}
body:has( .tsl-strona ) .zd-okno::before { left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px; border-radius: 16px 0 0 0; }
body:has( .tsl-strona ) .zd-okno::after { right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px; border-radius: 0 0 16px 0; }
body:has( .tsl-strona ) .zd-okno__pelne > * > p:first-of-type::first-letter,
body:has( .tsl-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: #cf9a3c; text-shadow: 0 0 26px rgba( 207, 154, 60, .5 );
}
body:has( .tsl-strona ) .zd-okno [class$="__gdzie"],
body:has( .tsl-strona ) .zd-okno [class$="__kiedy"],
body:has( .tsl-strona ) .zd-okno [class$="__skad"] b,
body:has( .tsl-strona ) .zd-okno .zd-wiecej,
body:has( .tsl-strona ) .zd-okno__x { font-family: Jost, system-ui, sans-serif; }
@media ( prefers-reduced-motion: no-preference ) {
  body:has( .tsl-strona ) .zd-tlo .zd-okno { animation: tsl-okno-wschodzi .42s cubic-bezier( .2, .7, .3, 1 ) both; }
  @keyframes tsl-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). */
.tsl-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. */
.tsl-strona .tsl-hero .tsl-okno.zd-okno,
.tsl-strona .tsl-hero .zd-okno.zd-okno,
.tsl-strona .tsl-hero .tsl-okno.tsl-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 216, 205, 184, .10 ), transparent 70% ),
		linear-gradient( 168deg, #1b1916, #100e0b );
}

/* 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ą. */
.tsl-granice > .zd-klocek .zd-klocek__skrot,
.tsl-ramy__siatka > .zd-klocek .zd-klocek__skrot { display: contents; }
.tsl-granice > .zd-klocek, .tsl-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( .tsl-strona ){
	background-color: #100e0b;
	background-image: linear-gradient( rgba( 16, 14, 11, .62 ), rgba( 16, 14, 11, .78 ) ), url( '/wp-content/uploads/tarot-kompat/polnoc/slowianie/gfx/tlo-dolina-debow.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.  */

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

.tsl-kafel--warstwa { padding: 22px 22px 20px; }
.tsl-kafel__obszar {
	display: block; margin: 0 0 10px; font: 400 10.5px var( --sans ); letter-spacing: .15em;
	text-transform: uppercase; color: var( --etyk );
}
.tsl-kafel__obszar i { font-style: normal; margin-right: 8px; color: var( --ochra ); opacity: .8; }
.tsl-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. */
.tsl-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( 168, 68, 42, .10 ), transparent 70% );
}
.tsl-sporne b {
	display: block; margin: 0 0 8px; font: 400 10.5px var( --sans ); letter-spacing: .15em;
	text-transform: uppercase; color: var( --rdza-j );
}
.tsl-sporne ul { margin: 0; padding-left: 18px; }
.tsl-sporne li { margin: 0 0 6px; font-size: 14.5px; line-height: 1.68; color: var( --tekst ); }
.tsl-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.  */

.tsl-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. */
.tsl-mapa > * { min-width: 0; }

.tsl-mapa__plotno { position: relative; overflow: hidden; border: 1px solid rgba( 207, 154, 60, .22 ); border-radius: 5px 28px 5px 5px; box-shadow: 0 14px 45px rgba( 0, 0, 0, .25 ); }
.tsl-mapa__plotno svg { display: block; width: 100%; height: auto; transition: transform .24s ease; }
.tsl-mapa__nawigacja {
	position: absolute; z-index: 4; top: 16px; right: 16px; display: flex; align-items: center; gap: 5px;
	padding: 5px; border: 1px solid rgba( 207, 154, 60, .5 ); border-radius: 5px 18px 5px 5px;
	background: rgba( 15, 30, 24, .9 ); box-shadow: 0 8px 24px rgba( 0, 0, 0, .28 ); backdrop-filter: blur( 9px );
}
.tsl-mapa__nawigacja button {
	width: 40px; height: 40px; padding: 0; border: 1px solid rgba( 216, 205, 184, .22 ); border-radius: 3px;
	background: rgba( 38, 61, 48, .95 ); color: var( --ochra-j ); font: 400 24px / 1 var( --sans ); cursor: pointer;
}
.tsl-mapa__nawigacja button:hover:not( :disabled ), .tsl-mapa__nawigacja button:focus-visible { border-color: var( --ochra-j ); box-shadow: 0 0 14px rgba( 207, 154, 60, .28 ); }
.tsl-mapa__nawigacja button:disabled { opacity: .36; cursor: default; }
.tsl-mapa__nawigacja output { min-width: 48px; text-align: center; font: 400 11px var( --sans ); color: var( --len-j ); }
.tsl-mapa.jest-wczytywana { min-height: 320px; opacity: .5; }

.tsl-mapa__lad { fill: rgba( 216, 205, 184, .055 ); stroke: rgba( 216, 205, 184, .11 ); stroke-width: .6; vector-effect: non-scaling-stroke; }
.tsl-mapa__jezioro { fill: #0d0c0a; stroke: rgba( 216, 205, 184, .16 ); stroke-width: .6; vector-effect: non-scaling-stroke; }
.tsl-mapa__rzeka { fill: none; stroke: rgba( 216, 205, 184, .3 ); stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.tsl-mapa__splot-tlo { fill: rgba( 207, 154, 60, .1 ); }
.tsl-mapa__splot-nic { stroke: rgba( 207, 154, 60, .5 ); stroke-width: .7; }

.tsl-mapa__byt {
	cursor: pointer; outline: none;
	stroke-width: 1; vector-effect: non-scaling-stroke;
	transition: fill .35s, stroke .35s, filter .35s;
}
.tsl-mapa__byt[ data-grupa="obce" ] { fill: rgba( 216, 205, 184, .035 ); stroke: rgba( 216, 205, 184, .14 ); }
.tsl-mapa__byt[ data-grupa="zachod" ] { fill: rgba( 207, 154, 60, .26 ); stroke: #cf9a3c; }
.tsl-mapa__byt[ data-grupa="wschod" ] { fill: rgba( 168, 68, 42, .3 ); stroke: #c4603f; }
.tsl-mapa__byt[ data-grupa="poludnie" ] { fill: rgba( 216, 205, 184, .22 ); stroke: #d8cdb8; }
.tsl-mapa__byt[ data-grupa="wspolne" ] { fill: url( #tsl-splot ); stroke: #cf9a3c; stroke-dasharray: 5 4; }

.tsl-mapa__byt:hover, .tsl-mapa__byt:focus-visible { filter: brightness( 1.35 ); stroke-width: 1.8; }
.tsl-mapa__byt.jest-wybrany { stroke-width: 2.2; filter: drop-shadow( 0 0 10px rgba( 229, 184, 98, .5 ) ) brightness( 1.25 ); }
.tsl-mapa__byt:focus-visible { outline: 2px solid #e5b862; outline-offset: 2px; }

/* Podpis klatki: to on niesie treść, więc nie jest drobnym drukiem. */
.tsl-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;
}
.tsl-mapa__plotno.jest-swieze .tsl-mapa__notka { animation: tsl-wejscie .5s ease-out; }
.tsl-mapa__plotno.jest-swieze .tsl-mapa__byty { animation: tsl-przejscie .55s ease-out; }
@keyframes tsl-wejscie { from { opacity: 0; transform: translateY( 6px ); } to { opacity: 1; transform: none; } }
@keyframes tsl-przejscie { from { opacity: .25; } to { opacity: 1; } }
@media ( prefers-reduced-motion: reduce ) {
	.tsl-mapa__plotno.jest-swieze .tsl-mapa__notka,
	.tsl-mapa__plotno.jest-swieze .tsl-mapa__byty { animation: none; }
}

/* ── suwak stuleci ── */
.tsl-mapa__lata { display: flex; align-items: center; gap: 10px; }
.tsl-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;
}
.tsl-mapa__strz:hover:not( :disabled ) { border-color: var( --ochra ); background: rgba( 207, 154, 60, .1 ); }
.tsl-mapa__strz:disabled { opacity: .3; cursor: default; }
.tsl-mapa__strz:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: 3px; }

.tsl-mapa__szyna { flex: 1 1 auto; display: flex; gap: 2px; }
.tsl-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;
}
.tsl-mapa__stopien i { display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba( 216, 205, 184, .18 ); transition: background .25s; }
.tsl-mapa__stopien em {
	font: 400 10.5px var( --sans ); font-style: normal; letter-spacing: .05em;
	color: var( --tekst-slaby ); transition: color .25s;
}
.tsl-mapa__stopien:hover i { background: rgba( 207, 154, 60, .45 ); }
.tsl-mapa__stopien.jest-wybrany i { background: var( --ochra ); box-shadow: 0 0 12px -2px rgba( 207, 154, 60, .7 ); }
.tsl-mapa__stopien.jest-wybrany em { color: var( --len-j ); }
.tsl-mapa__stopien:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: 2px; border-radius: 4px; }

/* ── legenda ── */
.tsl-mapa__legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0 22px; }
.tsl-mapa__klucz { display: inline-flex; align-items: center; gap: 8px; font: 300 12.5px var( --sans ); color: var( --tekst ); }
.tsl-mapa__klucz i { width: 13px; height: 13px; border-radius: 3px; border: 1px solid; }
.tsl-mapa__klucz[ data-grupa="wspolne" ] i { background: rgba( 207, 154, 60, .22 ); border-color: #cf9a3c; }
.tsl-mapa__klucz[ data-grupa="zachod" ] i { background: rgba( 207, 154, 60, .26 ); border-color: #cf9a3c; }
.tsl-mapa__klucz[ data-grupa="wschod" ] i { background: rgba( 168, 68, 42, .3 ); border-color: #c4603f; }
.tsl-mapa__klucz[ data-grupa="poludnie" ] i { background: rgba( 216, 205, 184, .22 ); border-color: #d8cdb8; }
.tsl-mapa__klucz[ data-grupa="obce" ] i { background: rgba( 216, 205, 184, .035 ); border-color: rgba( 216, 205, 184, .3 ); }

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

/* ── lista bytów ── */
.tsl-mapa__lista { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.tsl-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;
}
.tsl-mapa__poz i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; border: 1px solid; }
.tsl-mapa__poz[ data-grupa="wspolne" ] i, .tsl-mapa__poz[ data-grupa="zachod" ] i { background: rgba( 207, 154, 60, .5 ); border-color: #cf9a3c; }
.tsl-mapa__poz[ data-grupa="wschod" ] i { background: rgba( 168, 68, 42, .55 ); border-color: #c4603f; }
.tsl-mapa__poz[ data-grupa="poludnie" ] i { background: rgba( 216, 205, 184, .4 ); border-color: #d8cdb8; }
.tsl-mapa__poz[ data-grupa="obce" ] i { background: transparent; border-color: rgba( 216, 205, 184, .3 ); }
.tsl-mapa__poz:hover { background: rgba( 216, 205, 184, .06 ); color: var( --tekst-mocny ); }
.tsl-mapa__poz.jest-wybrany { background: rgba( 207, 154, 60, .13 ); color: var( --len-j ); }
.tsl-mapa__poz:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: -2px; }

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

.tsl-mapa__metryczka { display: flex; flex-direction: column; gap: 6px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var( --wlos ); }
.tsl-mapa__metryczka span { font: 300 11.5px / 1.6 var( --sans ); color: var( --tekst-slaby ); }
.tsl-mapa__blad { margin: 0; padding: 24px; font-size: 14.5px; color: var( --rdza-j ); }

@media ( max-width: 980px ) {
	.tsl-mapa { grid-template-columns: 1fr; gap: 22px; }
	.tsl-mapa__lista { max-height: 240px; }
	.tsl-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.  */

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

.tsl-mapa__lad { fill: rgba( 216, 205, 184, .1 ); stroke: rgba( 216, 205, 184, .2 ); }
.tsl-mapa__jezioro { fill: #0b0a08; stroke: rgba( 216, 205, 184, .26 ); }
.tsl-mapa__rzeka { stroke: rgba( 216, 205, 184, .44 ); stroke-width: 1.3; }

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

.tsl-mapa__miejsce text {
	fill: #ece3d2; font: 500 15px 'Cormorant Garamond', Georgia, serif;
	paint-order: stroke; stroke: #100e0b; 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ę. */
.tsl-mapa__miejsce[ data-stopien="rekonstrukcja" ] .tsl-mapa__halo,
.tsl-mapa__miejsce[ data-stopien="pozniejszy" ] .tsl-mapa__halo { stroke-dasharray: 3 3; }
.tsl-mapa__miejsce[ data-stopien="rekonstrukcja" ] .tsl-mapa__punkt { fill: #c4603f; filter: drop-shadow( 0 0 5px rgba( 196, 96, 63, .7 ) ); }

.tsl-mapa__miejsce:hover .tsl-mapa__halo,
.tsl-mapa__miejsce:focus-visible .tsl-mapa__halo,
.tsl-mapa__miejsce.jest-wybrany .tsl-mapa__halo { fill: rgba( 229, 184, 98, .22 ); stroke: #e5b862; stroke-width: 2; }
.tsl-mapa__miejsce.jest-wybrany text { fill: #f4e9d4; }
.tsl-mapa__miejsce:focus-visible text { fill: #f4e9d4; }

@media ( max-width: 980px ) {
	.tsl-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.  */

.tsl-mapa__byt.jest-wyrozniony { stroke-width: 2; }
.tsl-mapa__byt.jest-wyrozniony[ data-grupa="obce" ] {
	fill: rgba( 145, 132, 110, .3 ); stroke: #b9ab92;
	stroke-dasharray: 7 3;
}
.tsl-mapa__byt.jest-wyrozniony { filter: drop-shadow( 0 0 9px rgba( 229, 184, 98, .32 ) ); }

.tsl-mapa__poz.jest-wyrozniony span { color: var( --len-j ); }
.tsl-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;
}

/* ── 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 ) {
	.tsl-mapa { grid-template-columns: minmax( 0, 1fr ); gap: 22px; }
	.tsl-mapa__plotno { order: 1; }
	.tsl-mapa__panel { order: 2; }
	.tsl-mapa__lista { max-height: 260px; }
	.tsl-mapa__miejsce text { font-size: 21px; stroke-width: 7px; }
	.tsl-mapa__rzeka { stroke-width: 1.6; }
	.tsl-mapa__stopien em { font-size: 9px; }
	.tsl-mapa__strz { width: 44px; height: 44px; }
	.tsl-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. */
	.tsl-mapa__stopien em { display: none; }
	.tsl-mapa__stopien { padding: 12px 0; }
	.tsl-mapa__stopien i { height: 4px; }
	.tsl-mapa__legenda { gap: 6px 12px; }
	.tsl-mapa__klucz { font-size: 11.5px; }
}

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

@media ( max-width: 760px ) {
	body:has( .tsl-strona ) {
		background:
			linear-gradient( 180deg, rgba( 8, 9, 7, .76 ), rgba( 12, 10, 8, .88 ) 44%, rgba( 7, 9, 7, .84 ) ),
			url( '/wp-content/uploads/tarot-kompat/polnoc/slowianie/gfx/tlo-dolina-debow.webp' ) center top / auto 100vh scroll no-repeat,
			#100e0b;
	}
}