/* Madziarowie — wierzenia Węgrów.
 * Czwarty dział tej rodziny. Różnica wobec sąsiadów jest tu najostrzejsza:
 * po Węgrach sprzed chrztu nie został ani jeden spis bóstw, w żadnym języku.
 * Została ziemia i cudze pismo.
 *
 * Dlatego barwą wiodącą jest SREBRO, a nie złoto ani ochra: srebrna blaszka
 * na oczach i ustach leży w każdym bogatszym grobie z czasu zajęcia kraju
 * i jest jedyną rzeczą, którą ci ludzie zostawili na własnej twarzy.
 * Przy niej czerwień skóry i sukna, a pod spodem ziemia piaskowego grzbietu.
 */
.tmd-strona {
	--tlo: #13100e; --dno: #0d0b09;
	--wlos: rgba( 216, 212, 207, .13 ); --obrys: rgba( 185, 196, 208, .26 );
	--len: #d8d4cf; --len-j: #efece8;
	--ochra: #b9c4d0; --ochra-j: #dde5ee;
	--rdza: #a33b33; --rdza-j: #c65a4d;
	--tekst: #a39c95; --tekst-slaby: #7b746d; --tekst-mocny: #efece8; --etyk: #837c75;
	--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, 212, 207, .028 ) 0 1px, transparent 1px 4px ),
		repeating-linear-gradient( 0deg, rgba( 216, 212, 207, .022 ) 0 1px, transparent 1px 4px ),
		radial-gradient( 1150px 580px at 50% -12%, rgba( 185, 196, 208, .13 ), transparent 70% ),
		radial-gradient( 820px 500px at 12% 46%, rgba( 163, 59, 51, .075 ), transparent 72% ),
		radial-gradient( 700px 460px at 88% 74%, rgba( 216, 212, 207, .05 ), transparent 70% ),
		var( --tlo );
	overflow-x: clip;
}
.tmd-strona *, .tmd-strona *::before, .tmd-strona *::after { box-sizing: border-box; }
body:has( .tmd-strona ) .wp-site-blocks > header, body:has( .tmd-strona ) header.wp-block-template-part, body:has( .tmd-strona ) .wp-site-blocks > footer, body:has( .tmd-strona ) footer.wp-block-template-part, body:has( .tmd-strona ) .wp-block-post-title { display: none !important; }
body:has( .tmd-strona ) .wp-site-blocks, body:has( .tmd-strona ) .wp-block-group, body:has( .tmd-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tmd-strona ) .wp-block-post-content > *, body:has( .tmd-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tmd-strona ) { background: #13100e; }
body:has( .tmd-strona ) .wp-block-post-content > .tmd-strona, body:has( .tmd-strona ) .entry-content > .tmd-strona, .tmd-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tmd-strona button { font-family: inherit; }

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

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

/* ── sekcje ── */
.tmd-sekcja { margin: 82px 0 0; }
.tmd-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( 185, 196, 208, .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 ); }
.tmd-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tmd-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3.1vw, 42px )/1.14 var( --serif ); color: var( --ochra-j ); }
.tmd-sekcja__lead { max-width: 80ch; margin: 14px 0 0; font-size: 15px; line-height: 1.76; color: var( --tekst ); }
.tmd-sekcja--echa .tmd-sekcja__tytul { color: var( --len-j ); }
.tmd-sekcja--zywe { border-color: rgba( 216, 212, 207, .16 ); }
.tmd-sekcja--zywe .tmd-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ą. */
.tmd-karb { display: inline-flex; align-items: center; gap: 10px; }
.tmd-karb i { display: inline-flex; gap: 3px; font-style: normal; }
.tmd-karb i b { display: block; width: 3px; height: 15px; border-radius: 1px; }
.tmd-karb i b.jest { background: linear-gradient( 180deg, var( --ochra-j ), var( --ochra ) ); box-shadow: 0 0 9px rgba( 185, 196, 208, .6 ); }
.tmd-karb i b.brak { background: rgba( 216, 212, 207, .1 ); box-shadow: inset 0 0 0 1px rgba( 216, 212, 207, .07 ); }
.tmd-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. */
.tmd-karb[ data-stopien="folklor" ] i b.jest { background: linear-gradient( 180deg, var( --len ), #a9a29b ); box-shadow: 0 0 8px rgba( 216, 212, 207, .3 ); }
.tmd-karb[ data-stopien="rekonstrukcja" ] i b.jest { background: linear-gradient( 180deg, #8b847d, #6d665f ); box-shadow: none; }

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

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


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

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

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

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

/* 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ą. */
.tmd-granice > .zd-klocek .zd-klocek__skrot,
.tmd-ramy__siatka > .zd-klocek .zd-klocek__skrot { display: contents; }
.tmd-granice > .zd-klocek, .tmd-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( .tmd-strona ){
	background-color: #13100e;
	background-image: linear-gradient( #13100ebb, #13100edd ), 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.  */

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

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

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

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

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

.tmd-mapa__splot-tlo { fill: rgba( 185, 196, 208, .1 ); }
.tmd-mapa__splot-nic { stroke: rgba( 185, 196, 208, .5 ); stroke-width: .7; }

.tmd-mapa__byt {
	cursor: pointer; outline: none;
	stroke-width: 1; vector-effect: non-scaling-stroke;
	transition: fill .35s, stroke .35s, filter .35s;
}
.tmd-mapa__byt[ data-grupa="obce" ] { fill: rgba( 216, 212, 207, .035 ); stroke: rgba( 216, 212, 207, .14 ); }
.tmd-mapa__byt[ data-grupa="zachod" ] { fill: rgba( 185, 196, 208, .26 ); stroke: #b9c4d0; }
.tmd-mapa__byt[ data-grupa="wschod" ] { fill: rgba( 163, 59, 51, .3 ); stroke: #c65a4d; }
.tmd-mapa__byt[ data-grupa="poludnie" ] { fill: rgba( 216, 212, 207, .22 ); stroke: #d8d4cf; }
.tmd-mapa__byt[ data-grupa="wspolne" ] { fill: url( #tmd-splot ); stroke: #b9c4d0; stroke-dasharray: 5 4; }

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

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

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

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

/* ── legenda ── */
.tmd-mapa__legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0 22px; }
.tmd-mapa__klucz { display: inline-flex; align-items: center; gap: 8px; font: 300 12.5px var( --sans ); color: var( --tekst ); }
.tmd-mapa__klucz i { width: 13px; height: 13px; border-radius: 3px; border: 1px solid; }
.tmd-mapa__klucz[ data-grupa="wspolne" ] i { background: rgba( 185, 196, 208, .22 ); border-color: #b9c4d0; }
.tmd-mapa__klucz[ data-grupa="zachod" ] i { background: rgba( 185, 196, 208, .26 ); border-color: #b9c4d0; }
.tmd-mapa__klucz[ data-grupa="wschod" ] i { background: rgba( 163, 59, 51, .3 ); border-color: #c65a4d; }
.tmd-mapa__klucz[ data-grupa="poludnie" ] i { background: rgba( 216, 212, 207, .22 ); border-color: #d8d4cf; }
.tmd-mapa__klucz[ data-grupa="obce" ] i { background: rgba( 216, 212, 207, .035 ); border-color: rgba( 216, 212, 207, .3 ); }

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

/* ── lista bytów ── */
.tmd-mapa__lista { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.tmd-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;
}
.tmd-mapa__poz i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; border: 1px solid; }
.tmd-mapa__poz[ data-grupa="wspolne" ] i, .tmd-mapa__poz[ data-grupa="zachod" ] i { background: rgba( 185, 196, 208, .5 ); border-color: #b9c4d0; }
.tmd-mapa__poz[ data-grupa="wschod" ] i { background: rgba( 163, 59, 51, .55 ); border-color: #c65a4d; }
.tmd-mapa__poz[ data-grupa="poludnie" ] i { background: rgba( 216, 212, 207, .4 ); border-color: #d8d4cf; }
.tmd-mapa__poz[ data-grupa="obce" ] i { background: transparent; border-color: rgba( 216, 212, 207, .3 ); }
.tmd-mapa__poz:hover { background: rgba( 216, 212, 207, .06 ); color: var( --tekst-mocny ); }
.tmd-mapa__poz.jest-wybrany { background: rgba( 185, 196, 208, .13 ); color: var( --len-j ); }
.tmd-mapa__poz:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: -2px; }

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

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

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

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

.tmd-mapa__lad { fill: rgba( 216, 212, 207, .1 ); stroke: rgba( 216, 212, 207, .2 ); }
.tmd-mapa__jezioro { fill: #0d0b09; stroke: rgba( 216, 212, 207, .26 ); }
.tmd-mapa__rzeka { stroke: rgba( 216, 212, 207, .44 ); stroke-width: 1.3; }

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

.tmd-mapa__miejsce text {
	fill: #efece8; font: 500 15px 'Cormorant Garamond', Georgia, serif;
	paint-order: stroke; stroke: #13100e; 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ę. */
.tmd-mapa__miejsce[ data-stopien="rekonstrukcja" ] .tmd-mapa__halo,
.tmd-mapa__miejsce[ data-stopien="pozniejszy" ] .tmd-mapa__halo { stroke-dasharray: 3 3; }
.tmd-mapa__miejsce[ data-stopien="rekonstrukcja" ] .tmd-mapa__punkt { fill: #c65a4d; filter: drop-shadow( 0 0 5px rgba( 198, 90, 77, .7 ) ); }

.tmd-mapa__miejsce:hover .tmd-mapa__halo,
.tmd-mapa__miejsce:focus-visible .tmd-mapa__halo,
.tmd-mapa__miejsce.jest-wybrany .tmd-mapa__halo { fill: rgba( 221, 229, 238, .22 ); stroke: #dde5ee; stroke-width: 2; }
.tmd-mapa__miejsce.jest-wybrany text { fill: #f3f0ec; }
.tmd-mapa__miejsce:focus-visible text { fill: #f3f0ec; }

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

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

.tmd-mapa__poz.jest-wyrozniony span { color: var( --len-j ); }
.tmd-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( .tmd-strona ) { background: #0d0b09; }
body:has( .tmd-strona )::before {
	content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background: #0d0b09 url( gfx/tla/tlo-grzbiet-nad-cisa.webp ) center top / cover no-repeat;
}
.tmd-strona {
	background:
		repeating-linear-gradient( 90deg, rgba( 216, 212, 207, .028 ) 0 1px, transparent 1px 4px ),
		repeating-linear-gradient( 0deg, rgba( 216, 212, 207, .022 ) 0 1px, transparent 1px 4px ),
		radial-gradient( 1150px 580px at 50% -12%, rgba( 185, 196, 208, .13 ), transparent 70% ),
		radial-gradient( 820px 500px at 12% 46%, rgba( 163, 59, 51, .075 ), transparent 72% ),
		radial-gradient( 700px 460px at 88% 74%, rgba( 216, 212, 207, .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 );
}
.tmd-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-grzbiet-nad-cisa.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 );
}
.tmd-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% );
}
.tmd-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-palmeta-srebro.webp ) left top / contain no-repeat;
	transform: scaleX( -1 );
}
.tmd-hero__tresc { position: relative; z-index: 1; max-width: 84ch; }
.tmd-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-palmeta-srebro.webp ) left top / contain no-repeat;
	transform: rotate( 180deg );
}
.tmd-sekcja--karb > * { position: relative; z-index: 1; }

/* ── kafel z wizerunkiem (pole `foto` w danych) ── */
.tmd-kafel__foto { margin: 0 0 12px; border-radius: 12px; overflow: hidden; border: 1px solid var( --wlos ); background: #0d0b09; }
.tmd-kafel__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.tmd-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 ── */
.tmd-mapa__plotno svg { border-radius: 16px; border: 1px solid var( --wlos ); background: radial-gradient( 900px 720px at 50% 42%, #10171a, #0a0d0f ); }
.tmd-mapa__lad { fill: rgba( 216, 212, 207, .13 ); stroke: rgba( 216, 212, 207, .22 ); }
.tmd-mapa__ton { stroke: none; pointer-events: none; }
.tmd-mapa__jezioro { fill: #0a0d0f; }

/* ── 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. */
.tmd-mapa__miejsce.jest-ukryty { display: none; }
.tmd-mapa__miejsce.jest-przygaszony { opacity: .42; }
.tmd-mapa__miejsce.jest-przygaszony .tmd-mapa__halo { stroke-dasharray: 2 3; }
.tmd-mapa__miejsce[ data-rodzaj='kosciol' ] .tmd-mapa__punkt { fill: #d8d4cf; filter: drop-shadow( 0 0 5px rgba( 216, 212, 207, .6 ) ); }
.tmd-mapa__miejsce[ data-rodzaj='kosciol' ] .tmd-mapa__halo { fill: rgba( 216, 212, 207, .05 ); stroke: rgba( 216, 212, 207, .34 ); }
.tmd-mapa__miejsce[ data-rodzaj='swiadectwo' ] .tmd-mapa__punkt { fill: #b9c4d0; }
.tmd-mapa__miejsce[ data-rodzaj='swiadectwo' ] .tmd-mapa__halo { stroke-dasharray: 5 3; }
.tmd-mapa__miejsce[ data-rodzaj='niepewne' ] .tmd-mapa__punkt { fill: #c65a4d; filter: drop-shadow( 0 0 5px rgba( 198, 90, 77, .7 ) ); }
.tmd-mapa__miejsce[ data-rodzaj='niepewne' ] .tmd-mapa__halo { r: 22; stroke: rgba( 198, 90, 77, .5 ); stroke-dasharray: 3 3; }
.tmd-mapa__miejsce[ data-rodzaj='znalezisko' ] .tmd-mapa__punkt { fill: #c65a4d; filter: drop-shadow( 0 0 5px rgba( 198, 90, 77, .7 ) ); }
.tmd-mapa__miejsce[ data-rodzaj='znalezisko' ] .tmd-mapa__halo { stroke: rgba( 198, 90, 77, .5 ); stroke-dasharray: 1 3; }
.tmd-mapa__miejsce[ data-rodzaj='kontakt' ] .tmd-mapa__punkt { fill: #9aa7b4; filter: drop-shadow( 0 0 5px rgba( 154, 167, 180, .6 ) ); }
.tmd-mapa__miejsce[ data-rodzaj='kontakt' ] .tmd-mapa__halo { stroke: rgba( 154, 167, 180, .4 ); }

.tmd-mapa__legenda--miejsca { margin-top: -10px; }
.tmd-mapa__legenda--miejsca .tmd-mapa__klucz i { width: 11px; height: 11px; border-radius: 50%; }
.tmd-mapa__klucz[ data-rodzaj='kult' ] i { background: #dde5ee; border-color: #dde5ee; box-shadow: 0 0 6px rgba( 221, 229, 238, .7 ); }
.tmd-mapa__klucz[ data-rodzaj='kosciol' ] i { background: #d8d4cf; border-color: #d8d4cf; }
.tmd-mapa__klucz[ data-rodzaj='swiadectwo' ] i { background: #b9c4d0; border-color: #b9c4d0; border-style: dashed; }
.tmd-mapa__klucz[ data-rodzaj='niepewne' ] i { background: transparent; border-color: #c65a4d; border-style: dashed; }
.tmd-mapa__klucz[ data-rodzaj='znalezisko' ] i { background: #c65a4d; border-color: #c65a4d; border-style: dotted; }
.tmd-mapa__klucz[ data-rodzaj='kontakt' ] i { background: #9aa7b4; border-color: #9aa7b4; }

.tmd-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; }
.tmd-mapa__przel input { width: 16px; height: 16px; margin: 0; accent-color: #b9c4d0; cursor: pointer; }
.tmd-mapa__przel:hover { color: var( --tekst-mocny ); }
.tmd-mapa__przel input:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: 2px; }

.tmd-mapa__okna { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tmd-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 ); }
.tmd-mapa__okna b { font: 500 13px / 1.55 var( --sans ); color: var( --ochra ); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.tmd-mapa__okna li.jest-czynne { color: var( --tekst-mocny ); }
.tmd-mapa__okna li.jest-czynne b { color: var( --ochra-j ); }
.tmd-mapa__opis .tmd-mapa__nad { margin: 14px 0 8px; }
.tmd-mapa__opis .tmd-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( .tmd-strona ) .zd-okno {
	background:
		radial-gradient( 120% 70% at 50% -6%, rgba( 185, 196, 208, .17 ), transparent 62% ),
		radial-gradient( 90% 60% at 92% 108%, rgba( 163, 59, 51, .15 ), transparent 68% ),
		linear-gradient( 178deg, #1f1a17 0%, #13100e 46%, #0d0b09 100% );
	border-color: rgba( 185, 196, 208, .3 ); border-top-color: #b9c4d0;
	box-shadow: 0 40px 90px rgba( 0, 0, 0, .65 ), 0 0 60px -20px rgba( 185, 196, 208, .35 ), inset 0 0 0 1px rgba( 185, 196, 208, .08 );
}
body:has( .tmd-strona ) .zd-okno__tytul { color: var( --ochra-j, #dde5ee ); }
/* 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( .tmd-strona ) .zd-tlo { background: radial-gradient( 78% 72% at 50% 46%, rgba( 22, 18, 13, .8 ), rgba( 5, 4, 3, .95 ) ); }
body:has( .tmd-strona ) .zd-okno__x { background: rgba( 11, 10, 8, .7 ); color: var( --ochra, #b9c4d0 ); }
/* 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( .tmd-strona ) .zd-okno .tmd-kafel__foto { float: right; width: min( 300px, 42% ); margin: 4px 0 14px 22px; }
body:has( .tmd-strona ) .zd-okno .zd-okno__pelne::after, body:has( .tmd-strona ) .zd-okno .zd-okno__gora::after { content: ''; display: block; clear: both; }
@media ( max-width: 640px ) { body:has( .tmd-strona ) .zd-okno .tmd-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. */
.tmd-sekcja__figura {
	float: right; width: min( 400px, 36% ); margin: 6px 0 20px 30px;
	border: 1px solid var( --wlos ); border-radius: 14px; overflow: hidden;
	background: #0d0b09; box-shadow: 0 30px 70px -46px rgba( 0, 0, 0, .95 );
}
.tmd-sekcja__figura img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tmd-sekcja__figura figcaption {
	padding: 9px 12px 10px; border-top: 1px solid var( --wlos );
	font: 300 11px / 1.5 var( --sans ); color: var( --tekst-slaby );
}
.tmd-sekcja:has( .tmd-sekcja__figura ) .tmd-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. */
.tmd-sekcja > .zd-tor, .tmd-sekcja > .tmd-karty, .tmd-sekcja > .tmd-bostwa,
.tmd-sekcja > .tmd-echa, .tmd-sekcja > .tmd-mapa, .tmd-sekcja > .tmd-skala,
.tmd-sekcja > .tmd-praktyki, .tmd-sekcja > .tmd-zrodla, .tmd-sekcja > .tmd-granice,
.tmd-sekcja > .tmd-rodzaje, .tmd-sekcja > .tmd-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 ) {
	.tmd-mapa { grid-template-columns: minmax( 0, 1fr ); gap: 22px; }
	.tmd-mapa__plotno { order: 1; }
	.tmd-mapa__panel { order: 2; }
	.tmd-mapa__lista { max-height: 260px; }
	.tmd-mapa__miejsce text { font-size: 21px; stroke-width: 7px; }
	.tmd-mapa__rzeka { stroke-width: 1.6; }
	.tmd-mapa__stopien em { font-size: 9px; }
	.tmd-mapa__strz { width: 44px; height: 44px; }
	.tmd-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. */
	.tmd-mapa__stopien em { display: none; }
	.tmd-mapa__stopien { padding: 12px 0; }
	.tmd-mapa__stopien i { height: 4px; }
	.tmd-mapa__legenda { gap: 6px 12px; }
	.tmd-mapa__klucz { font-size: 11.5px; }
}

/* Odczyt roku: stoi zawsze, także gdy podpisy stopni zniknęły. */
.tmd-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 ) {
	.tmd-hero { padding: 46px 24px 32px; border-radius: 20px; }
	.tmd-hero::after { width: 180px; right: -30px; top: -20px; opacity: .26; }
	.tmd-sekcja--karb::after { width: 120px; opacity: .14; }
	.tmd-mapa__okna li { grid-template-columns: 70px minmax( 0, 1fr ); }
}

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

/* ══ SREBRO NA TWARZY, CZERWIEN NA SKORZE ══
 * Blok na SAMYM KONCU pliku — ogon arkusza lezy za zapytaniami medialnymi
 * i bije wszystko wstawione wczesniej.
 *
 * Tu swiatlo zimne idzie GORA, cieple dolem, odwrotnie niz u sasiadow, bo
 * odwrotny jest tez material: srebro lezy na wierzchu, na twarzy zmarlego,
 * a skora i sukno pod spodem. Grunt to ziemia piaskowego grzbietu nad Cisa,
 * w ktorej te groby znaleziono. */
.tmd-strona {
	background:
		repeating-linear-gradient( 90deg, rgba( 216, 212, 207, .02 ) 0 1px, transparent 1px 5px ),
		radial-gradient( 1100px 600px at 50% -8%, rgba( 185, 196, 208, .15 ), transparent 66% ),
		radial-gradient( 820px 520px at 90% 20%, rgba( 221, 229, 238, .07 ), transparent 70% ),
		radial-gradient( 940px 620px at 12% 70%, rgba( 163, 59, 51, .14 ), transparent 70% ),
		radial-gradient( 760px 520px at 84% 96%, rgba( 163, 59, 51, .07 ), transparent 72% ),
		var( --tlo );
}
body:has(.tmd-strona)::before { background-color: #0b0908; }

/* Naciecia puste ida czerwienia: brak poswiadczenia nie jest tu cisza cudzej
   reki ani brakiem pisarza, tylko LUKA po czyms, co bylo — a po czym zostala
   wylacznie ziemia. */
.tmd-karb i b.brak { background: rgba( 163, 59, 51, .34 ); }
.tmd-stopien i b.brak { background: rgba( 163, 59, 51, .34 ); }
.tmd-kafel__obszar { color: #c65a4d; border-color: rgba( 163, 59, 51, .3 ); }
.tmd-kafel__obszar i { color: rgba( 198, 90, 77, .75 ); }
.tmd-sekcja__nad { color: #c65a4d; }
.tmd-przerywnik { color: rgba( 185, 196, 208, .42 ); }