/* Hermetyzm — teksty, pojęcia i pomyłka co do daty.
 *
 * Paleta bierze się z materiału: patyna miedzi i zieleń rękopiśmiennego
 * atramentu na ciemnym pergaminie, plus jeden akcent cynobru tam, gdzie
 * rzecz dotyczy sprostowania. Dwie osie mają dwie różne barwy i to nie jest
 * ozdoba: górna, ta zmyślona, jest ciepła i złota jak legenda; dolna, ta
 * ustalona z języka, jest chłodna i rzeczowa.
 *
 * Cała śmiałość siedzi w rysunku dwóch osi. Reszta strony jest cicha, bo
 * to strona tekstowa i tekst ma tu być czytany, a nie oglądany.
 */
.thm-strona {
	--tlo: #0c0e0d; --obrys: rgba( 111, 168, 140, .3 ); --wlos: rgba( 111, 168, 140, .13 );
	--patyna: #6fa88c; --patyna-j: #8cc0a6; --etyk: #6f8a7c;
	--legenda: #c9a349; --legenda-j: #dfbe71;
	--cynober: #c05a3e;
	--pergamin: #d6cfc0; --dno: #080a09;
	--tekst: #a3a5a1; --tekst-slaby: #7f827e; --tekst-mocny: #e9ebe6;
	--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( 111, 168, 140, .13 ), transparent 70% ),
		radial-gradient( 780px 460px at 14% 32%, rgba( 201, 163, 73, .08 ), transparent 70% ),
		var( --tlo );
	overflow-x: clip;
}
.thm-strona *, .thm-strona *::before, .thm-strona *::after { box-sizing: border-box; }
body:has( .thm-strona ) .wp-site-blocks > header, body:has( .thm-strona ) header.wp-block-template-part, body:has( .thm-strona ) .wp-site-blocks > footer, body:has( .thm-strona ) footer.wp-block-template-part, body:has( .thm-strona ) .wp-block-post-title { display: none !important; }
body:has( .thm-strona ) .wp-site-blocks, body:has( .thm-strona ) .wp-block-group, body:has( .thm-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .thm-strona ) .wp-block-post-content > *, body:has( .thm-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .thm-strona ) { background: #0c0e0d; }
body:has( .thm-strona ) .wp-block-post-content > .thm-strona, body:has( .thm-strona ) .entry-content > .thm-strona, .thm-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.thm-strona button { font-family: inherit; }

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

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

.thm-sekcja { margin: 76px 0 0; }
.thm-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( 111, 168, 140, .1 ), transparent 65% ), linear-gradient( 180deg, rgba( 20, 24, 22, .84 ), rgba( 10, 12, 11, .94 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 ); }
.thm-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.thm-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --patyna-j ); }
.thm-sekcja__lead { max-width: 78ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }

/* ══════════════  dwie osie  ══════════════
   Ta sama skala liniowa dla obu. Punkty legendy siadają w lewej połowie,
   punkty ustalone z języka w prawej — i to jest cały dowód. */

.thm-osie { margin: 40px 0 0; }
.thm-os__ramka { position: relative; }
.thm-os__etyk { margin: 0; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.thm-os__etyk--gora { margin-bottom: 10px; }
.thm-os__etyk--dol { margin-top: 10px; }
.thm-os { position: relative; height: 108px; }
.thm-os--mniemana { --os: var( --legenda ); --os-j: var( --legenda-j ); }
.thm-os--rzeczywista { --os: var( --patyna ); --os-j: var( --patyna-j ); }
.thm-os__linia { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, color-mix( in srgb, var( --os ) 46%, transparent ) 12%, color-mix( in srgb, var( --os ) 46%, transparent ) 88%, transparent ); }
.thm-os--mniemana .thm-os__linia { bottom: 0; }
.thm-os--rzeczywista .thm-os__linia { top: 0; }

.thm-pkt { position: absolute; width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.thm-os--mniemana .thm-pkt { bottom: 0; }
.thm-os--rzeczywista .thm-pkt { top: 0; }
.thm-pkt__kropka { position: absolute; left: -5px; width: 11px; height: 11px; border-radius: 999px; background: var( --dno ); box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --os ) 76%, transparent ); transition: background .2s, box-shadow .2s, transform .2s; }
.thm-os--mniemana .thm-pkt__kropka { bottom: -5px; }
.thm-os--rzeczywista .thm-pkt__kropka { top: -5px; }
.thm-pkt__podpis { position: absolute; left: 0; width: 168px; margin-left: -84px; display: grid; gap: 2px; text-align: center; }
.thm-pkt__podpis b { font: 400 13.5px/1.35 var( --sans ); color: var( --tekst ); transition: color .2s; }
.thm-pkt__podpis i { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var( --etyk ); }
/* Skrajne podpisy rownamy do krawedzi, zeby nie wychodzily poza rysunek.
   Przy prawej przesuwamy o cala szerokosc, zeby prawa krawedz podpisu wypadla
   dokladnie na kropce, a nie osiem pikseli za nia. */
.thm-pkt.przy-lewej .thm-pkt__podpis { margin-left: 0; text-align: left; }
.thm-pkt.przy-prawej .thm-pkt__podpis { margin-left: -168px; text-align: right; }
/* Wysokosc podpisu ustawia pomiar w skrypcie. Wartosc zapasowa jest po to,
   zeby rysunek wygladal sensownie takze wtedy, gdy skrypt nie ruszy. */
.thm-pkt--gora .thm-pkt__podpis { bottom: var( --od, 16px ); }
.thm-pkt--dol .thm-pkt__podpis { top: var( --od, 16px ); }
/* Kreska od kropki do podpisu — bez niej przy kilku wysokosciach nie wiadomo,
   ktory podpis nalezy do ktorej kropki. */
.thm-pkt.ma-kreske::before { content: ''; position: absolute; left: -.5px; width: 1px; height: var( --kreska, 0px ); background: color-mix( in srgb, var( --os ) 34%, transparent ); }
.thm-pkt--gora.ma-kreske::before { bottom: 16px; }
.thm-pkt--dol.ma-kreske::before { top: 16px; }

.thm-pkt:hover .thm-pkt__kropka { box-shadow: inset 0 0 0 1px var( --os-j ), 0 0 16px -2px var( --os ); }
.thm-pkt:hover .thm-pkt__podpis b { color: var( --tekst-mocny ); }
.thm-pkt.jest-wybrany .thm-pkt__kropka { background: var( --os ); box-shadow: inset 0 0 0 1px var( --os-j ), 0 0 22px -2px var( --os ); transform: scale( 1.2 ); }
.thm-pkt.jest-wybrany .thm-pkt__podpis b { color: var( --os-j ); }
.thm-pkt:focus-visible { outline: 0; }
.thm-pkt:focus-visible .thm-pkt__kropka { box-shadow: inset 0 0 0 1px var( --os-j ), 0 0 0 3px color-mix( in srgb, var( --os ) 34%, transparent ); }

/* Klamra przesunięcia między osiami. To jest zdanie tej strony powiedziane
   rysunkiem: między początkiem legendy a początkiem tekstów leży luka. */
.thm-luka { position: relative; height: 62px; }
.thm-luka__klamra { position: absolute; top: 26px; height: 10px; border: 1px dashed rgba( 192, 90, 62, .5 ); border-bottom: 0; border-radius: 6px 6px 0 0; }
.thm-luka__podpis { position: absolute; top: 38px; margin-left: -110px; width: 220px; text-align: center; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var( --cynober ); }

.thm-punkt { margin: 30px 0 0; }
.thm-punkt__karta { display: grid; gap: 12px; max-width: 92ch; padding: 24px 26px 26px; border-left: 2px solid var( --k, var( --patyna ) ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, color-mix( in srgb, var( --k, var( --patyna ) ) 9%, transparent ), rgba( 10, 12, 11, .55 ) 58% ); }
.thm-punkt__karta--mniemana { --k: var( --legenda ); }
.thm-punkt__karta--rzeczywista { --k: var( --patyna ); }
.thm-punkt__nag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.thm-punkt__os { width: 100%; margin: 0; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var( --etyk ); }
.thm-punkt__nag h3 { margin: 0; font: 500 clamp( 24px, 2.4vw, 31px )/1.15 var( --serif ); color: var( --tekst-mocny ); }
.thm-punkt__rok { margin: 0; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: color-mix( in srgb, var( --k ) 66%, #fff ); }
.thm-punkt__karta > p { margin: 0; font-size: 15.5px; line-height: 1.76; color: var( --tekst-mocny ); }

/* ══════════════  trzy tory z klockami  ══════════════
   Kafel jest mały i mówi jedno zdanie; komplet treści wchodzi w oknie po
   kliknięciu. Blask jest jedyną ozdobą, która się rusza, i pojawia się tylko
   pod kursorem — gdyby świeciło wszystko, nie świeciłoby nic. */

.thm-tor { position: relative; contain: inline-size; margin: 26px 0 0; }
.thm-tor__pas { display: flex; align-items: stretch; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 10px 2px 18px; scroll-snap-type: x proximity; }
.thm-tor__pas::-webkit-scrollbar { display: none; }
.thm-tor__pas.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; }
.thm-tor__strz {
	position: absolute; top: calc( 50% - 34px ); z-index: 4; width: 42px; height: 42px;
	border: 1px solid var( --obrys ); border-radius: 999px;
	background: rgba( 10, 12, 11, .94 ); color: var( --patyna-j ); cursor: pointer;
	box-shadow: 0 10px 30px -14px rgba( 0, 0, 0, .95 );
	transition: transform .18s, box-shadow .18s, background .18s;
}
.thm-tor__strz:hover { transform: translateY( -2px ); background: rgba( 16, 20, 18, .96 ); box-shadow: 0 16px 34px -16px var( --patyna ); }
.thm-tor__strz--lewo { left: -6px; }
.thm-tor__strz--prawo { right: -6px; }
.thm-tor__strz::before { content: '‹'; font-size: 24px; line-height: 1; }
.thm-tor__strz--prawo::before { content: '›'; }
.thm-tor__licznik { margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }

/* Klocek. Podwójna listwa jak na renesansowej karcie tytułowej i linie
   czerpalne papieru w tle; światło pada z góry z lewej, jak od świecy. */
.thm-klocek {
	position: relative; flex: 0 0 auto; scroll-snap-align: start;
	display: flex; flex-direction: column;
	width: 292px; min-height: 244px; padding: 22px 22px 18px;
	border: 1px solid var( --wlos ); border-radius: 5px; overflow: hidden;
	background:
		repeating-linear-gradient( 90deg, rgba( 214, 207, 192, .022 ) 0 1px, transparent 1px 7px ),
		linear-gradient( 168deg, rgba( 24, 29, 26, .94 ), rgba( 10, 12, 11, .96 ) 70% );
	box-shadow:
		inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix( in srgb, var( --k ) 10%, transparent ),
		inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 18px 40px -30px rgba( 0, 0, 0, .95 );
	transition: transform .26s, box-shadow .26s, border-color .26s;
	animation: thm-wejdz .34s both; animation-delay: calc( var( --op, 0 ) * 44ms );
}
@keyframes thm-wejdz { from { opacity: 0; transform: translateY( 10px ); } to { opacity: 1; transform: none; } }
.thm-klocek--tekst { --k: var( --patyna ); }
.thm-klocek--pojecie { --k: var( --legenda ); }
.thm-klocek--postac { --k: var( --cynober ); }
/* Blask: miękka poświata z góry z lewej, zapalana pod kursorem. */
.thm-klocek::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
	background: radial-gradient( 120% 80% at 14% -10%, color-mix( in srgb, var( --k ) 30%, transparent ), transparent 62% );
	transition: opacity .26s;
}
.thm-klocek:hover, .thm-klocek:focus-visible { transform: translateY( -4px ); border-color: color-mix( in srgb, var( --k ) 52%, transparent ); }
.thm-klocek:hover::before, .thm-klocek:focus-visible::before { opacity: 1; }
.thm-klocek:hover, .thm-klocek:focus-visible, .thm-klocek.jest-wskazana {
	box-shadow:
		inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix( in srgb, var( --k ) 28%, transparent ),
		0 0 48px -14px var( --k ), 0 22px 46px -28px rgba( 0, 0, 0, .95 );
}
.thm-klocek.jest-wskazana { border-color: var( --k ); }

.zd-klocek__skrot { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.thm-klocek__inicjal { font: 400 40px/0.82 var( --serif ); color: var( --cynober ); text-shadow: 0 0 24px rgba( 192, 90, 62, .32 ); transition: color .26s, text-shadow .26s; }
.thm-klocek:hover .thm-klocek__inicjal { color: #d4694c; text-shadow: 0 0 30px rgba( 192, 90, 62, .6 ); }
.thm-klocek h3 { margin: 12px 0 0; font: 500 22px/1.16 var( --serif ); color: var( --tekst-mocny ); }
.thm-klocek .thm-oryg { margin: 3px 0 0; font: italic 300 14px var( --serif ); color: var( --patyna ); }
.thm-klocek .thm-kiedy { margin: 5px 0 0; font-size: 9.5px; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var( --etyk );
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thm-klocek .thm-krotko { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var( --pergamin );
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* W oknie ten sam skrót jest nagłówkiem, więc przycięcia znikają. */
.zd-okno__gora .thm-klocek__inicjal { font-size: 52px; }
.zd-okno__gora h3 { margin: 14px 0 0; font: 500 32px/1.12 var( --serif ); color: var( --tekst-mocny ); }
.zd-okno__gora .thm-oryg { font-size: 17px; }
.zd-okno__gora .thm-kiedy, .zd-okno__gora .thm-krotko { -webkit-line-clamp: none; overflow: visible; display: block; }
.zd-okno__gora .thm-krotko { font-size: 16px; line-height: 1.7; }
.zd-okno__pelne .thm-karta__tresc { display: grid; gap: 12px; }
.zd-okno__pelne p { margin: 0; font-size: 18px; line-height: 1.78; color: var( --tekst-mocny ); }

/* ══════════════  więzi między torami  ══════════════
   Cztery z sześciu postaci prowadzą do jednego zbioru i to ma być widać. */

.thm-wiez, .thm-wiezy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.thm-wiezy { display: grid; gap: 8px; }
.thm-wiezy__pas { display: flex; flex-wrap: wrap; gap: 10px; }
.thm-wiez__etyk { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var( --etyk ); }
.thm-wiez__link {
	display: inline-flex; align-items: baseline; gap: 9px;
	padding: 9px 16px; border: 1px solid var( --wlos ); border-radius: 999px;
	background: linear-gradient( 180deg, rgba( 201, 163, 73, .1 ), transparent );
	color: inherit; cursor: pointer; font-family: inherit;
	transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.thm-wiez__link::before { content: '⚭'; font-size: 13px; color: var( --legenda ); }
.thm-wiez__link b { font: 400 14.5px var( --sans ); color: var( --legenda-j ); }
.thm-wiez__link i { font: italic 300 13.5px var( --serif ); color: var( --tekst-slaby ); }
.thm-wiez__link:hover { border-color: var( --legenda ); background: linear-gradient( 180deg, rgba( 201, 163, 73, .18 ), transparent ); transform: translateY( -2px ); box-shadow: 0 0 30px -12px var( --legenda ); }
.thm-wiez__link:focus-visible { outline: 2px solid var( --legenda ); outline-offset: 3px; }
.thm-pole--zawiera { background: rgba( 111, 168, 140, .06 ); }
.thm-pole--zawiera b { color: var( --etyk ); }
.thm-pole--waga { background: rgba( 201, 163, 73, .07 ); }
.thm-pole--waga b { color: var( --legenda ); }
/* „Z czym tego nie mylić" jest tu treścią, nie przypisem — dostaje cynober,
   bo prawie wszystkie pomyłki wokół hermetyzmu biorą się właśnie stąd. */
.thm-pole--uwaga { border-left: 2px solid rgba( 192, 90, 62, .4 ); border-radius: 0 10px 10px 0; background: rgba( 192, 90, 62, .05 ); }
.thm-pole--uwaga b { color: var( --cynober ); }

.thm-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.thm-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( 20, 24, 22, .7 ), rgba( 10, 12, 11, .78 ) ); }
.thm-ramy__siatka i { font-style: normal; font-size: 22px; line-height: 1; color: var( --patyna ); }
.thm-ramy__siatka b { font: 400 17px var( --serif ); letter-spacing: .02em; color: var( --tekst-mocny ); }
.thm-ramy__siatka p { margin: 0; font-size: 14px; line-height: 1.72; }
.thm-ramy__siatka .jest-uczciwie { border-color: var( --obrys ); background: linear-gradient( 180deg, rgba( 111, 168, 140, .09 ), rgba( 10, 12, 11, .8 ) ); }

@media ( max-width: 1020px ) {
	.thm-strona { padding: 0 22px 70px; }
	.thm-pkt__podpis { width: 132px; margin-left: -66px; }
	.thm-pkt__podpis b { font-size: 12.5px; }
	.thm-pkt.przy-prawej .thm-pkt__podpis { margin-left: -132px; }
}
@media ( max-width: 680px ) {
	.thm-sekcja--scisla { padding: 26px 16px 28px; }
	.thm-os { height: 128px; }
	.thm-pkt__podpis { width: 104px; margin-left: -52px; }
	.thm-pkt__podpis b { font-size: 11.5px; }
	.thm-pkt.przy-prawej .thm-pkt__podpis { margin-left: -104px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.thm-pkt.jest-wybrany .thm-pkt__kropka { transform: none; }
}

@media ( max-width: 680px ) {
	.thm-plakat { width: 232px; min-height: 150px; padding: 18px 18px 20px; }
	.thm-plakat__inicjal { font-size: 38px; }
	.thm-plakat__tresc b { font-size: 16px; }
	.thm-karta__pole { padding: 22px 18px 24px; }
	.thm-tor__strz--lewo { left: -8px; }
	.thm-tor__strz--prawo { right: -8px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.thm-plakat { animation: none; }
	.thm-plakat:hover, .thm-wiez__link:hover, .thm-tor__strz:hover { transform: none; }
}



/* ---------------------------------------------------------------------------
   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, sekcja 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 (lotos nad sekcją i kreska
   rozdzielająca) i nadpisanie ich zabrałoby sekcjom 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 w sekcji psułoby kolory.
   --------------------------------------------------------------------------- */

.thm-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;
}
.thm-hero[data-tlo] > * { max-width: 80ch; }

.thm-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 ) {
	.thm-hero[data-tlo], .thm-sekcja[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.
   --------------------------------------------------------------------------- */

.thm-sekcja[data-tlo] .zd-pas > li,
.thm-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]. */
.thm-sekcja[data-tlo] {
	--tekst-slaby: #919490;	/* #7f827e dawało 4.02:1, teraz 5.09:1 */
	--etyk: #80988c;	/* #6f8a7c dawało 4.17:1, teraz 5.05:1 */
}

/* nadtytuł jako <span> (pierwszy <p> skrótu idzie do nagłówka okna) — blok, żeby układ został */
.thm-oryg, .thm-kiedy { display: block; }

/* 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. */
.thm-strona .thm-hero .thm-okno.zd-okno,
.thm-strona .thm-hero .zd-okno.zd-okno,
.thm-strona .thm-hero .thm-okno.thm-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 111, 168, 140, .10 ), transparent 70% ),
		linear-gradient( 168deg, #171918, #0c0e0d );
}