/* Nordyckie — bóstwa, drzewo i źródła.
 *
 * Paleta z rozmysłem NIE jest tą, której się tu spodziewasz. Czerwień, złoto
 * i róg do picia to kostium z dziewiętnastowiecznej sceny operowej, a nie
 * barwy epoki — a rozdzielenie tego, co dawne, od tego, co dorobiono później,
 * jest tematem całej strony. Zamiast tego: mokre żelazo, popielata brzoza
 * i jeden ciepły bursztyn, który dostają tylko asowie.
 *
 * Cała śmiałość siedzi w drzewie. Pień jest linią ciągłą, bo jesion i trzy
 * korzenie są w źródłach; nazwy dziewięciu światów wiszą na kreskach
 * przerywanych, bo ich spis jest późniejszym uporządkowaniem.
 */
.tnr-strona {
	--tlo: #0a0c0e; --obrys: rgba( 201, 141, 75, .28 ); --wlos: rgba( 143, 160, 173, .14 );
	--zelazo: #8fa0ad; --zelazo-j: #adbcc7; --etyk: #78848d;
	--bursztyn: #c98d4b; --bursztyn-j: #dcac74;
	--brzoza: #d3cdc2; --dno: #07090a;
	--tekst: #a2a6a9; --tekst-slaby: #7d8285; --tekst-mocny: #e8eaec;
	--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:
		radial-gradient( 1100px 560px at 50% -10%, rgba( 143, 160, 173, .12 ), transparent 70% ),
		radial-gradient( 760px 460px at 82% 38%, rgba( 201, 141, 75, .07 ), transparent 70% ),
		var( --tlo );
	overflow-x: clip;
}
.tnr-strona *, .tnr-strona *::before, .tnr-strona *::after { box-sizing: border-box; }
body:has( .tnr-strona ) .wp-site-blocks > header, body:has( .tnr-strona ) header.wp-block-template-part, body:has( .tnr-strona ) .wp-site-blocks > footer, body:has( .tnr-strona ) footer.wp-block-template-part, body:has( .tnr-strona ) .wp-block-post-title { display: none !important; }
body:has( .tnr-strona ) .wp-site-blocks, body:has( .tnr-strona ) .wp-block-group, body:has( .tnr-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tnr-strona ) .wp-block-post-content > *, body:has( .tnr-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tnr-strona ) { background: #0a0c0e; }
body:has( .tnr-strona ) .wp-block-post-content > .tnr-strona, body:has( .tnr-strona ) .entry-content > .tnr-strona, .tnr-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tnr-strona button { font-family: inherit; }

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

.tnr-hero { max-width: 80ch; padding: 44px 0 8px; }
.tnr-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tnr-tytul { margin: 0; font: 500 clamp( 44px, 5.2vw, 76px )/1.03 var( --serif ); color: var( --bursztyn-j ); }
.tnr-tytul small { display: block; margin-top: 8px; font: 300 16px var( --sans ); letter-spacing: .14em; color: var( --brzoza ); }
.tnr-lead { margin: 22px 0 0; font-size: 16.5px; line-height: 1.75; color: var( --tekst-mocny ); }

.tnr-sekcja { margin: 76px 0 0; }
.tnr-sekcja--scisla { position: relative; margin-top: 44px; padding: 34px 30px 38px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 900px 420px at 50% 0%, rgba( 143, 160, 173, .1 ), transparent 65% ), linear-gradient( 180deg, rgba( 18, 21, 24, .84 ), rgba( 9, 11, 12, .94 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 ); }
.tnr-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tnr-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --bursztyn-j ); }
.tnr-sekcja__lead { max-width: 78ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }
.tnr-uwaga { max-width: 82ch; margin: 14px 0 0; padding: 15px 18px; border-left: 2px solid rgba( 143, 160, 173, .34 ); border-radius: 0 12px 12px 0; background: rgba( 143, 160, 173, .05 ); font-size: 14px; line-height: 1.72; color: var( --tekst ); }

/* ══════════════  drzewo  ══════════════
   Pień ciągły, nazwy na kreskach przerywanych. Ta różnica jest treścią. */

/* Drzewo jest wezsze niz sekcja. Rozciagniete na pelna szerokosc mialo po
   piecset pikseli pustki z kazdej strony i przestawalo czytac sie jako pien
   z galeziami. */
/* Uklad dwukolumnowy: tekst po lewej, drzewo po prawej. Karta wybranego
   swiata jest przyklejona, wiec przy wysokim drzewie opis nie ucieka
   z ekranu — klikasz swiat, a jego tekst stoi obok, nie pod spodem. */
.tnr-drzewo__uklad { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 480px, 560px ); gap: 40px 56px; align-items: start; margin-top: 8px; }
.tnr-drzewo__tekst { position: sticky; top: 84px; }
.tnr-drzewo__tekst .tnr-sekcja__lead { margin-top: 12px; }
.tnr-drzewo { position: relative; max-width: none; margin: 0; padding: 8px 0 12px; }
/* Pień: jedna ciągła linia przez całą wysokość rysunku. */
.tnr-drzewo::before {
	content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
	background: linear-gradient( 180deg, transparent, color-mix( in srgb, var( --brzoza ) 30%, transparent ) 8%, color-mix( in srgb, var( --brzoza ) 30%, transparent ) 92%, transparent );
}
.tnr-pas { position: relative; padding: 18px 0; }
.tnr-pas__etyk { position: relative; z-index: 2; width: max-content; margin: 0 auto 12px; padding: 5px 14px; border: 1px solid var( --wlos ); border-radius: 999px; background: var( --tlo ); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var( --etyk ); }
.tnr-pas__lista { display: grid; gap: 10px; }

.tnr-swiatek {
	position: relative; display: flex; width: 50%; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.tnr-swiatek--lewo { justify-content: flex-end; margin-right: 50%; padding-right: 26px; }
.tnr-swiatek--prawo { justify-content: flex-start; margin-left: 50%; padding-left: 26px; }
/* Więź: kreska przerywana od pnia do nazwy. Przerywana, bo umieszczenie tej
   nazwy na tym poziomie jest naszym uporządkowaniem, nie zapisem źródła. */
.tnr-wiaz { position: absolute; top: 50%; width: 22px; height: 1px; background: repeating-linear-gradient( 90deg, var( --zelazo ) 0 3px, transparent 3px 8px ); opacity: .55; }
.tnr-swiatek--lewo .tnr-wiaz { right: 2px; }
.tnr-swiatek--prawo .tnr-wiaz { left: 2px; }
.tnr-swiatek__tresc {
	display: grid; gap: 2px; padding: 11px 18px; border: 1px solid var( --wlos ); border-radius: 12px;
	background: linear-gradient( 180deg, rgba( 22, 26, 29, .8 ), rgba( 10, 12, 14, .8 ) );
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tnr-swiatek--lewo .tnr-swiatek__tresc { text-align: right; }
.tnr-swiatek__tresc b { font: 400 16px var( --sans ); letter-spacing: .02em; color: var( --tekst-mocny ); white-space: nowrap; }
.tnr-swiatek__tresc i { font: italic 300 13px var( --serif ); color: var( --etyk ); white-space: nowrap; }
.tnr-swiatek:hover .tnr-swiatek__tresc { border-color: var( --obrys ); transform: translateY( -2px ); }
.tnr-swiatek:focus-visible { outline: 0; }
.tnr-swiatek:focus-visible .tnr-swiatek__tresc { border-color: var( --bursztyn ); box-shadow: 0 0 0 3px rgba( 201, 141, 75, .2 ); }
.tnr-swiatek.jest-wybrany .tnr-swiatek__tresc { border-color: var( --bursztyn ); background: linear-gradient( 180deg, rgba( 201, 141, 75, .16 ), rgba( 10, 12, 14, .84 ) ); box-shadow: 0 0 34px -16px var( --bursztyn ); }
.tnr-swiatek.jest-wybrany .tnr-swiatek__tresc b { color: var( --bursztyn-j ); }
.tnr-swiatek.jest-wybrany .tnr-wiaz { background: repeating-linear-gradient( 90deg, var( --bursztyn ) 0 3px, transparent 3px 8px ); opacity: .95; }

.tnr-swiat { margin: 30px 0 0; }
.tnr-swiat__karta { display: grid; gap: 12px; max-width: none; padding: 24px 26px 26px; border-left: 2px solid var( --obrys ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, rgba( 201, 141, 75, .08 ), rgba( 9, 11, 12, .55 ) 58% ); }
.tnr-swiat__nag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.tnr-swiat__poz { width: 100%; margin: 0; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var( --etyk ); }
.tnr-swiat__nag h3 { margin: 0; font: 500 clamp( 24px, 2.4vw, 31px )/1.15 var( --serif ); color: var( --tekst-mocny ); }
.tnr-swiat__oryg { margin: 0; font: italic 300 17px var( --serif ); color: var( --bursztyn ); }
.tnr-swiat__krotko { margin: 0; font-size: 16px; line-height: 1.7; color: var( --brzoza ); }
.tnr-swiat__tresc { display: grid; gap: 11px; }
.tnr-swiat__tresc p { margin: 0; font-size: 15px; line-height: 1.76; }
/* Pewność jest tu najważniejszym polem strony i tak wygląda: kreskowana ramka
   powtarza kreskę więzi z drzewa. */
.tnr-pewnosc { display: grid; gap: 8px; padding: 18px 20px; border: 1px dashed rgba( 143, 160, 173, .36 ); border-radius: 14px; background: rgba( 143, 160, 173, .06 ); }
.tnr-pewnosc b { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var( --zelazo-j ); }
.tnr-pewnosc p { margin: 0; font-size: 14.5px; line-height: 1.74; color: var( --tekst-mocny ); }

/* ══════════════  bóstwa, praktyki, źródła  ══════════════ */

.tnr-bostwa, .tnr-praktyki { display: grid; grid-template-columns: repeat( auto-fit, minmax( 330px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tnr-bostwo, .tnr-praktyka { display: grid; align-content: start; gap: 11px; padding: 28px 26px 30px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 18, 21, 24, .74 ), rgba( 9, 11, 12, .8 ) ); }
.tnr-bostwo { border-top: 2px solid color-mix( in srgb, var( --k ) 66%, transparent ); }
.tnr-bostwo header, .tnr-praktyka header { display: grid; gap: 3px; }
.tnr-rod { margin: 0; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: color-mix( in srgb, var( --k ) 76%, #fff ); }
.tnr-rodzaj { margin: 0; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var( --etyk ); }
.tnr-bostwo h3, .tnr-praktyka h3 { margin: 0; font: 500 26px var( --serif ); color: var( --tekst-mocny ); }
.tnr-oryg { margin: 0; font: italic 300 15px var( --serif ); color: var( --etyk ); }
.tnr-krotko { margin: 0; font-size: 15px; line-height: 1.66; color: var( --brzoza ); }
.tnr-bostwo p, .tnr-praktyka p, .tnr-zrodlo p { margin: 0; font-size: 14px; line-height: 1.74; }
.tnr-pole { display: grid; gap: 7px; padding: 14px 16px; border-radius: 12px; }
.tnr-pole b { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; }
.tnr-pole--swiadectwo { background: rgba( 143, 160, 173, .06 ); }
.tnr-pole--swiadectwo b { color: var( --zelazo ); }
.tnr-pole--uwaga { border-left: 2px solid var( --obrys ); border-radius: 0 10px 10px 0; background: rgba( 201, 141, 75, .05 ); }
.tnr-pole--uwaga b { color: var( --bursztyn ); }

.tnr-zrodla { display: grid; gap: 2px; margin: 26px 0 0; }
.tnr-zrodlo { display: grid; grid-template-columns: 84px minmax( 0, 1fr ); gap: 16px; padding: 28px 0; border-top: 1px solid var( --wlos ); }
.tnr-zrodlo:last-child { border-bottom: 1px solid var( --wlos ); }
.tnr-zrodlo__nr { margin: 0; font: 300 34px/1 var( --serif ); color: var( --bursztyn ); opacity: .5; }
.tnr-zrodlo > div { display: grid; gap: 11px; max-width: 92ch; }
.tnr-zrodlo header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.tnr-zrodlo h3 { margin: 0; font: 500 25px var( --serif ); color: var( --tekst-mocny ); }
.tnr-kiedy { margin: 0; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var( --etyk ); }

.tnr-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tnr-ramy__siatka > div { display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 18, 21, 24, .7 ), rgba( 9, 11, 12, .78 ) ); }
.tnr-ramy__siatka i { font-style: normal; font-size: 22px; line-height: 1; color: var( --bursztyn ); }
.tnr-ramy__siatka b { font: 400 17px var( --serif ); letter-spacing: .02em; color: var( --tekst-mocny ); }
.tnr-ramy__siatka p { margin: 0; font-size: 14px; line-height: 1.72; }
.tnr-ramy__siatka .jest-uczciwie { border-color: var( --obrys ); background: linear-gradient( 180deg, rgba( 201, 141, 75, .09 ), rgba( 9, 11, 12, .8 ) ); }

@media ( max-width: 1020px ) {
	.tnr-strona { padding: 0 22px 70px; }
}
@media ( max-width: 680px ) {
	/* Przy wąskim ekranie drzewo o dwóch stronach staje się nieczytelne:
	   pień idzie po lewej, a wszystkie nazwy wiszą po jego prawej stronie. */
	.tnr-sekcja--scisla { padding: 26px 16px 28px; }
	.tnr-drzewo::before { left: 10px; margin-left: 0; }
	.tnr-pas__etyk { margin: 0 0 12px 30px; }
	.tnr-swiatek, .tnr-swiatek--lewo, .tnr-swiatek--prawo { width: 100%; margin: 0; padding-left: 32px; padding-right: 0; justify-content: flex-start; }
	.tnr-swiatek--lewo .tnr-swiatek__tresc { text-align: left; }
	.tnr-swiatek--lewo .tnr-wiaz, .tnr-swiatek--prawo .tnr-wiaz { left: 10px; right: auto; width: 20px; }
	.tnr-swiatek__tresc b, .tnr-swiatek__tresc i { white-space: normal; }
	.tnr-zrodlo { grid-template-columns: minmax( 0, 1fr ); gap: 6px; }
	.tnr-zrodlo__nr { font-size: 26px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tnr-swiatek:hover .tnr-swiatek__tresc { transform: none; }
}

/* ══════════════  klocek: skrót na wierzchu, całość w oknie  ══════════════
   Siedem praktyk miało po dwa i pół tysiąca znaków na kaflu — to była ściana,
   przez którą nikt nie przechodził. */
.tnr-praktyka .zd-klocek__skrot,
.tnr-zrodlo .zd-klocek__skrot { display: contents; }
.tnr-praktyka { min-height: 244px; }
.tnr-zrodlo__lead { font-size: 13.5px; line-height: 1.7; color: var( --tekst ); }
.tnr-praktyka, .tnr-zrodlo { transition: border-color .25s, transform .25s, box-shadow .25s; }
.tnr-praktyka:hover, .tnr-zrodlo:hover,
.tnr-praktyka:focus-visible, .tnr-zrodlo:focus-visible {
	transform: translateY( -3px ); border-color: rgba( 150, 178, 200, .42 );
	box-shadow: 0 18px 44px -26px rgba( 0, 0, 0, .9 ), 0 0 32px -18px var( --zimno );
}

/* ══════════════  bóstwa jako klocki w torze  ══════════════
   Skrót na wierzchu — ród, imię, oryginał, jedno zdanie — komplet w oknie.
   Skrót nie wprowadza własnego pudełka, więc siatka kafla zostaje bez zmian. */
.tnr-bostwo .zd-klocek__skrot { display: contents; }

/* ── karty bóstw z dostawy ──
   Kafel to sam obraz, bez podpisu z karty: imię stoi już w nagłówku kafla,
   a powtórzone na obrazku wyglądałoby jak usterka. Cała karta z ornamentem
   i imieniem otwiera się dopiero w oknie.

   Njord i Skadi nie mają grafik i mają wyglądać tak jak dotąd — dlatego
   obraz jest osobnym elementem, a nie tłem kafla. Tło zostawiłoby po sobie
   pustą ramkę. */
.tnr-foto { position: relative; margin: -28px -26px 4px; overflow: hidden; border-radius: 17px 17px 0 0; }
.tnr-foto img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 500; object-fit: cover; object-position: 50% 22%; }
/* Woal na dole obrazu, żeby nagłówek nie siadał na jasnym fragmencie malowidła. */
.tnr-foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient( 180deg, transparent, rgba( 10, 12, 14, .92 ) ); pointer-events: none; }
.tnr-bostwo:hover .tnr-foto img { transform: scale( 1.03 ); }
.tnr-foto img { transition: transform .5s; }

.tnr-plakat { margin: 0 0 18px; }
.tnr-plakat img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; border-radius: 12px; box-shadow: 0 30px 70px -34px rgba( 0, 0, 0, .95 ); }

@media ( prefers-reduced-motion: reduce ) { .tnr-foto img { transition: none; } }
.tnr-bostwo { min-height: 232px; transition: border-color .25s, transform .25s, box-shadow .25s; }
.tnr-bostwo:hover, .tnr-bostwo:focus-visible {
	transform: translateY( -3px ); border-color: color-mix( in srgb, var( --k ) 55%, transparent );
	box-shadow: 0 18px 44px -26px rgba( 0, 0, 0, .9 ), 0 0 32px -18px var( --k );
}
@media ( max-width: 980px ) {
	.tnr-drzewo__uklad { grid-template-columns: 1fr; }
	.tnr-drzewo__tekst { position: static; }
}


/* ---------------------------------------------------------------------------
   TŁA SEKCJI

   Reguły trzymają się atrybutu data-tlo, który PHP dokłada dopiero wtedy,
   gdy plik naprawdę leży na serwerze. Dopóki grafiki nie ma, blok nie dostaje
   ani ramki, ani wypełnienia i wygląda dokładnie jak dziś — brak ma być cichy,
   a nie zostawiać pustej ramy.

   Obraz wchodzi WARSTWĄ właściwości background, nie przez ::before. Tych dwóch
   pseudoelementów używa wspólny zdobienia.css i nadpisanie ich zabrałoby blokom
   zdobienia reszty serwisu.

   Zmienna nazywa się --obraz-tla, a NIE --tlo: w większości arkuszy serwisu
   --tlo jest już barwą tła strony i nadpisanie jej psułoby kolory.
   --------------------------------------------------------------------------- */

.tnr-hero[data-tlo] {
	position: relative; max-width: none;
	padding: 64px 36px 52px; border-radius: 26px;
	border: 1px solid rgba( 255, 255, 255, .10 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
	background:
		linear-gradient( 90deg, rgba( 12, 10, 14, .90 ) 0%, rgba( 12, 10, 14, .70 ) 34%, rgba( 12, 10, 14, .20 ) 66%, transparent 100% ),
		var( --obraz-tla ) 50% 46% / cover no-repeat;
}
.tnr-hero[data-tlo] > * { max-width: 80ch; }

.tnr-sekcja[data-tlo] {
	position: relative;
	padding: 40px 36px 44px; border-radius: 26px;
	border: 1px solid rgba( 255, 255, 255, .10 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
	background:
		radial-gradient( 880px 500px at 12% 16%, rgba( 15, 13, 18, .62 ), transparent 74% ),
		linear-gradient( 180deg, rgba( 15, 13, 18, .10 ) 0%, rgba( 15, 13, 18, .22 ) 48%, rgba( 15, 13, 18, .48 ) 100% ),
		var( --obraz-tla ) 62% 52% / cover no-repeat;
}

@media ( max-width: 680px ) {
	.tnr-sekcja[data-tlo], .tnr-hero[data-tlo] { padding: 28px 20px 32px; border-radius: 18px; }
}

/* ---------------------------------------------------------------------------
   CZYTELNOSC NA TLE

   Kafle i klocki są z założenia przezroczyste — mają tło o kryciu 0,07,
   bo projektowano je na płaską barwę. Nad fotografią to przestaje działać:
   zmierzone na żywej stronie, tekst kafla nad jaśniejszym miejscem zdjęcia ma
   kontrast 1,23:1, czyli jest NIECZYTELNY. Zasłona na całej sekcji tego nie
   naprawia — z rachunku wychodzi, że musiałaby mieć krycie 0,80 i zabiłaby obraz.

   Dlatego czytelność niesie sam kafel, i tylko tam, gdzie pod spodem jest zdjęcie.
   Próg liczony w NAJGORSZYM przypadku, czyli nad czystą bielą, bo tła rozjaśniane
   gammą bywają jaśniejsze niż najjaśniejszy punkt oryginalnego zdjęcia. Próg 4,5:1
   wypada przy kryciu 0,845 — stąd 0,90, a nie 0,86, które miało zapas na granicy błędu.
   Przy 0,90 nad bielą: tekst 5,35:1, tytuł 12,80:1. Między kaflami obraz zostaje widoczny.
   --------------------------------------------------------------------------- */

.tnr-sekcja[data-tlo] .zd-pas > li,
.tnr-sekcja[data-tlo] .zd-klocek {
	background-color: rgba( 12, 10, 14, .90 );
	backdrop-filter: blur( 2px );
	border-color: rgba( 255, 255, 255, .16 );
	box-shadow: 0 18px 40px -26px rgba( 0, 0, 0, .9 );
}

/* TEKST POBOCZNY NAD TŁEM — podpisy i nadtytuły są ciemniejsze od tekstu głównego
   i przy kryciu kafla 0,90 wypadały PONIŻEJ progu 4,5:1. Podnoszenie krycia nic tu
   nie daje — dla najciemniejszych barw trzeba by 0,99, czyli kafel nieprzezroczysty.
   Dlatego rozjaśniam SAMĄ BARWĘ, w tej samej rodzinie, i tylko pod [data-tlo]. */
.tnr-sekcja[data-tlo] {
	--tekst-slaby: #8f9496;	/* #7d8285 dawało 4.02:1, teraz 5.09:1 */
	--etyk: #8a949c;	/* #78848d dawało 4.08:1, teraz 5.06:1 */
}

/* ---------------------------------------------------------------------------
   NADTYTUŁ NIE JEST AKAPITEM

   `zdobienia.js` bierze do nagłówka okna PIERWSZY <p> ze skrótu i traktuje go
   jak opis. Gdy nadtytuł, oryginał imienia i opis były trzema akapitami pod
   rząd, do okna trafiało „Asowie" zamiast zdania o bóstwie, a odsiew powtórzeń
   nie działał, bo porównywał nadtytuł z opisem i słusznie widział różnicę.
   Test działu zgłosił to trzynaście razy. Teraz akapitem jest tylko opis. */
.tnr-rod, .tnr-oryg, .tnr-rodzaj, .tnr-zrodlo__nr, .tnr-kiedy { display: block; }
/* Zrodla mialy ten sam uklad co bostwa: numer i data jako akapity nad
   leadem, wiec do okna szlo „01" zamiast zdania o zrodle. Test dzialu
   tego nie widzial, bo otwiera tylko PIERWSZY kafel na stronie. */

/* JEDEN OBRAZ W OKNIE, NIE DWA
   Okno klonuje skrót do nagłówka, więc kafel i plakat tego samego bóstwa
   stawały jeden nad drugim — ten sam obraz dwa razy. Zostaje plakat, bo to
   pełna karta z imieniem; kafel znika tylko w oknie, w torze stoi dalej. */
.zd-okno__gora .tnr-foto { display: none; }


/* Nordic chapter: moonlit ash, cold water and restrained bronze braid. */
body:has(.tnr-strona){background:#07151d}
.tnr-strona{--tlo:#07151d;--dno:#07151d;--tekst:#d6e3e4;--tekst-slaby:#a2b7c0;--tekst-mocny:#d6e3e4;--brzoza:#d6e3e4;--etyk:#a2b7c0;--zelazo:#a6d9e6;--zelazo-j:#a6d9e6;--bursztyn:#c6a271;--bursztyn-j:#c6a271;--obrys:rgba(198,162,113,.35);--wlos:rgba(166,217,230,.18);background:radial-gradient(ellipse at 80% 26%,rgba(166,217,230,.055),transparent 46%),#07151d;font-size:17px}
.tnr-strona .tnr-hero{border-color:var(--wlos)}
.tnr-strona .tnr-tytul{font-weight:400;color:var(--tekst-mocny)}
.tnr-strona .tnr-tytul small{font-size:18px;letter-spacing:.05em;line-height:1.6;color:var(--zelazo-j)}
.tnr-strona .tnr-lead{font-size:18px;line-height:1.8;max-width:65ch}
.tnr-strona .nr-chapters{display:flex;flex-wrap:wrap;gap:12px;padding:24px 0;border-bottom:1px solid var(--wlos)}
.tnr-strona .nr-chapters a{display:inline-flex;align-items:center;min-height:46px;padding:10px 19px;border:1px solid var(--wlos);border-radius:30px;color:var(--tekst-mocny);background:rgba(17,41,54,.75);font-size:14px;text-decoration:none;transition:background .25s,border-color .25s}
.tnr-strona .nr-chapters a:hover{background:#112936;border-color:#c6a271}
.tnr-strona .nr-braid{display:block;width:180px;margin:0 0 24px;color:#c6a271;opacity:.7}
.tnr-strona .nr-braid svg{display:block;width:100%;height:30px}
.tnr-strona .tnr-sekcja__tytul{font-weight:400;font-size:clamp(32px,3.7vw,52px);line-height:1.15;color:#d6e3e4;max-width:24ch}
.tnr-strona .tnr-sekcja__lead{font-size:17px;line-height:1.8;color:#a2b7c0}
.tnr-strona #podpis.nr-world-section{background:radial-gradient(ellipse at top,rgba(166,217,230,.09),transparent 60%),#07151d;border-color:var(--wlos);padding:36px;border-radius:30px}
.tnr-strona .tnr-drzewo__uklad[hidden]{display:none!important}
.tnr-strona .nr-intro{max-width:70ch;font-size:18px;line-height:1.75;margin:22px 0 30px;color:#a2b7c0}
.tnr-strona .nr-stage{isolation:isolate;position:relative;aspect-ratio:3/2;border:1px solid rgba(198,162,113,.38);border-radius:24px 24px 0 0;overflow:hidden;background:#07151d}
.tnr-strona .nr-tree{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.tnr-strona .nr-stage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 100px 12px #07151d;background:linear-gradient(0deg,rgba(7,21,29,.65),transparent 25%)}
.tnr-strona .nr-halo{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 52%,rgba(166,217,230,.12),transparent 48%);transition:background .5s}
.tnr-strona [data-realm=muspelheim] .nr-halo{background:radial-gradient(ellipse at 73% 86%,rgba(198,162,113,.35),transparent 45%)}
.tnr-strona [data-realm=niflheim] .nr-halo{background:radial-gradient(ellipse at 27% 86%,rgba(166,217,230,.3),transparent 45%)}
.tnr-strona .nr-realms{position:absolute;inset:0;z-index:2}
.tnr-strona .nr-realm{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;grid-template-columns:12px 1fr;column-gap:10px;align-items:center;min-width:145px;max-width:190px;min-height:66px;padding:10px 17px;border:1px solid rgba(166,217,230,.45);border-radius:8px 20px;background:rgba(7,21,29,.86);backdrop-filter:blur(10px);color:#d6e3e4;cursor:pointer;text-align:left;box-shadow:0 8px 25px rgba(7,21,29,.55);transition:background .25s,border-color .25s,box-shadow .25s}
.tnr-strona .nr-realm strong{font:400 25px/1.12 var(--serif);letter-spacing:0}
.tnr-strona .nr-realm small{grid-column:2;font:300 12px/1.6 var(--sans);color:#a2b7c0}
.tnr-strona .nr-realm-dot{grid-row:span 2;width:8px;height:8px;border:1px solid #a6d9e6;transform:rotate(45deg);box-shadow:0 0 12px rgba(166,217,230,.3)}
.tnr-strona .nr-realm:hover,.tnr-strona .nr-realm[aria-pressed=true]{border-color:#c6a271;background:rgba(17,41,54,.96);box-shadow:0 0 0 3px rgba(198,162,113,.16),0 0 36px rgba(166,217,230,.2)}
.tnr-strona .nr-realm[aria-pressed=true] .nr-realm-dot{background:#c6a271;border-color:#c6a271;box-shadow:0 0 18px #c6a271}
.tnr-strona .nr-preview{display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;padding:30px 36px;background:linear-gradient(120deg,#112936,#07151d);border:1px solid var(--obrys);border-top:0;border-radius:0 0 24px 24px}
.tnr-strona .nr-preview-tag{margin:0 0 8px;color:#c6a271;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.tnr-strona .nr-preview h3{margin:0;color:#d6e3e4;font:400 42px/1.1 var(--serif)}
.tnr-strona .nr-preview-info>p:last-child{max-width:60ch;margin:12px 0 0;font-size:17px;line-height:1.7;color:#d6e3e4}
.tnr-strona .nr-preview-actions{display:grid;gap:18px;justify-items:center}
.tnr-strona .nr-read{min-height:50px;padding:12px 24px;border:1px solid #c6a271;border-radius:6px 20px;background:rgba(198,162,113,.1);color:#d6e3e4;font-size:16px;cursor:pointer;white-space:nowrap}
.tnr-strona .nr-read:hover{background:rgba(198,162,113,.22)}
.tnr-strona .nr-stepper{display:flex;align-items:center;gap:18px}
.tnr-strona .nr-stepper button{width:44px;height:44px;border:1px solid var(--wlos);border-radius:50%;color:#a6d9e6;background:#112936;font-size:21px;cursor:pointer}
.tnr-strona .nr-status{font-size:13px;min-width:42px;text-align:center;margin:0;color:#a2b7c0}
.tnr-strona .nr-map-note{font-size:13px;line-height:1.75;color:#a2b7c0;max-width:105ch;margin:22px 0 0}
.tnr-strona .tnr-bostwo,.tnr-strona .tnr-praktyka,.tnr-strona .tnr-zrodlo{border-color:var(--wlos);transition:border-color .25s,box-shadow .25s}
.tnr-strona .zd-klocek:hover{border-color:#c6a271;box-shadow:0 16px 42px rgba(7,21,29,.6),0 0 24px rgba(166,217,230,.08)}
.tnr-strona :is(button,a):focus-visible{outline:2px solid #a6d9e6;outline-offset:5px}
body:has(.tnr-strona) .nr-reader{box-sizing:border-box;width:min(850px,calc(100vw - 40px));max-height:calc(100dvh - 64px);padding:0;border:1px solid #c6a271;border-radius:12px 36px;background:radial-gradient(ellipse at 100% 0,rgba(166,217,230,.12),transparent 45%),#07151d;color:#d6e3e4;box-shadow:0 30px 100px rgba(7,21,29,.8);font:300 18px/1.8 Jost,system-ui,sans-serif;overflow:auto}
body:has(.tnr-strona) .nr-reader::backdrop{background:rgba(7,21,29,.72);backdrop-filter:blur(18px)}
body:has(.tnr-strona) .nr-close{position:sticky;top:16px;display:block;margin:16px 16px 0 auto;width:46px;height:46px;z-index:2;border:1px solid #c6a271;border-radius:50%;background:#07151d;color:#d6e3e4;font-size:30px;cursor:pointer}
body:has(.tnr-strona) .nr-close:focus-visible{outline:2px solid #a6d9e6;outline-offset:3px}
body:has(.tnr-strona) .nr-reader-content{padding:0 48px 44px}
body:has(.tnr-strona) .nr-reader-overline{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#c6a271;margin:0 0 12px}
body:has(.tnr-strona) .nr-reader h2{font:400 clamp(38px,5vw,64px)/1.05 'Cormorant Garamond',Georgia,serif;letter-spacing:0;color:#d6e3e4;margin:0 0 20px}
body:has(.tnr-strona) .nr-reader-lead{font-size:21px;line-height:1.65;color:#a6d9e6;padding-bottom:26px;border-bottom:1px solid rgba(198,162,113,.3)}
body:has(.tnr-strona) .nr-reader-evidence{padding:22px 26px;margin-top:30px;border-left:2px solid #c6a271;border-radius:0 16px 16px 0;background:#112936}
body:has(.tnr-strona) .nr-reader-evidence h3{font:400 25px/1.3 'Cormorant Garamond',Georgia,serif;color:#c6a271;letter-spacing:0;margin:0 0 10px}
body:has(.tnr-strona) .nr-reader-evidence p{font-size:15px;margin:0}
body:has(.tnr-strona) .zd-tlo{backdrop-filter:blur(18px)}
body:has(.tnr-strona) .zd-tlo .zd-okno{background:radial-gradient(ellipse at 100% 0,rgba(166,217,230,.12),transparent 45%),#07151d;border-color:rgba(198,162,113,.5);color:#d6e3e4}
@media(max-width:900px){.tnr-strona .nr-realm{min-width:125px;padding:9px 12px;column-gap:7px}.tnr-strona .nr-realm strong{font-size:22px}.tnr-strona .nr-preview{padding:24px;gap:20px}}
@media(max-width:700px){.tnr-strona{padding:0 16px 50px}.tnr-strona .tnr-hero__tresc{padding:30px 20px}.tnr-strona .tnr-lead{font-size:16px}.tnr-strona .nr-chapters{gap:8px}.tnr-strona .nr-chapters a{font-size:12px;padding:8px 12px}.tnr-strona #podpis.nr-world-section{padding:22px 16px;border-radius:20px}.tnr-strona .nr-braid{width:130px;margin-bottom:18px}.tnr-strona .nr-intro{font-size:16px;margin:18px 0 24px}.tnr-strona .nr-stage{aspect-ratio:auto;padding-top:78%;border-radius:18px 18px 0 0}.tnr-strona .nr-tree{height:auto;aspect-ratio:1.28;object-fit:cover}.tnr-strona .nr-stage::after{bottom:auto;height:270px;box-shadow:inset 0 0 42px 3px #07151d}.tnr-strona .nr-realms{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 10px 18px;background:#07151d}.tnr-strona .nr-realm{position:static;transform:none;min-width:0;max-width:none;min-height:56px;padding:10px 3px;display:flex;flex-direction:column;justify-content:center;gap:7px;text-align:center;border-radius:6px 14px}.tnr-strona .nr-realm strong{font-size:18px;overflow-wrap:anywhere}.tnr-strona .nr-realm small{display:none}.tnr-strona .nr-realm-dot{width:6px;height:6px}.tnr-strona .nr-preview{grid-template-columns:1fr;padding:22px 18px;gap:24px}.tnr-strona .nr-preview-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}.tnr-strona .nr-read{font-size:14px;padding:10px 14px}.tnr-strona .nr-stepper{gap:8px}.tnr-strona .nr-preview h3{font-size:36px}.tnr-strona .nr-preview-info>p:last-child{font-size:16px}.tnr-strona .nr-map-note{font-size:12px}.tnr-strona .tnr-sekcja__tytul{font-size:34px}.tnr-strona .tnr-sekcja__lead{font-size:16px}body:has(.tnr-strona) .nr-reader{width:calc(100vw - 24px);max-height:calc(100dvh - 30px);border-radius:10px 24px;font-size:16px}body:has(.tnr-strona) .nr-reader-content{padding:4px 24px 30px}body:has(.tnr-strona) .nr-reader-lead{font-size:19px}body:has(.tnr-strona) .nr-reader-evidence{padding:18px}}
.tnr-strona .nr-preview{align-items:start}
.tnr-strona .nr-preview-info>p{font-size:17px;line-height:1.75}
.tnr-strona .nr-full-copy{display:none}
.tnr-strona .nr-full-copy>p{margin:20px 0}
.tnr-strona .nr-full-evidence{padding:20px 24px;border-left:2px solid #c6a271;background:rgba(166,217,230,.05);border-radius:0 16px 16px 0}
.tnr-strona .nr-full-evidence h4{font:400 24px/1.3 var(--serif);color:#c6a271;letter-spacing:0;margin:0 0 12px}
.tnr-strona .nr-full-evidence p{font-size:15px;margin:0;line-height:1.75}
@media(max-width:700px){.tnr-strona .nr-realm strong{font-size:15px;white-space:nowrap;overflow-wrap:normal}.tnr-strona .nr-full-copy{font-size:16px}.tnr-strona .nr-full-evidence{padding:18px}.tnr-strona .nr-preview-actions{grid-row:1}.tnr-strona .nr-preview-info>p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.tnr-strona *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* 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. */
.tnr-strona .tnr-hero .tnr-okno.zd-okno,
.tnr-strona .tnr-hero .zd-okno.zd-okno,
.tnr-strona .tnr-hero .tnr-okno.tnr-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 201, 141, 75, .10 ), transparent 70% ),
		linear-gradient( 168deg, #151719, #0a0c0e );
}