/* Geomancja — szósty moduł filaru „Bliski Wschód" i pierwsza wyrocznia
   z prawdziwym silnikiem w tym filarze.

   Barwy: piasek o zmierzchu i cień. Rysunek figury jest tu główną formą —
   cztery wiersze punktów muszą być czytelne w każdym rozmiarze, więc punkt
   dostaje stałą wielkość i mocny kontrast, a wszystko wokół jest przyciszone.

   Podpisem strony jest tarcza budująca się na oczach czytelnika. */
.tgm-strona {
	--tlo: #0f0d0b; --panel: rgba( 26, 22, 18, .78 ); --obrys: rgba( 200, 160, 106, .3 ); --wlos: rgba( 200, 160, 106, .13 );
	--zloto: #d8b477; --zloto-c: #c8a06a; --etyk: #9c8763;
	--piasek: #d9c39a; --cien: #6d5f4c; --lazur: #5c8ede; --rubryka: #b8402f;
	--dno: #100b07; --plyta-g: #2c2219; --plyta-d: #17110c;
	--tekst: #b0a89c; --tekst-slaby: #8b8378; --tekst-mocny: #efe6d8;
	--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( 1200px 620px at 50% -10%, rgba( 200, 160, 106, .16 ), transparent 70% ), radial-gradient( 900px 520px at 12% 40%, rgba( 92, 142, 222, .1 ), transparent 70% ), var( --tlo ); overflow-x: clip;
}
.tgm-strona *, .tgm-strona *::before, .tgm-strona *::after { box-sizing: border-box; }
body:has( .tgm-strona ) .wp-site-blocks > header, body:has( .tgm-strona ) header.wp-block-template-part, body:has( .tgm-strona ) .wp-site-blocks > footer, body:has( .tgm-strona ) footer.wp-block-template-part, body:has( .tgm-strona ) .wp-block-post-title { display: none !important; }
body:has( .tgm-strona ) .wp-site-blocks, body:has( .tgm-strona ) .wp-block-group, body:has( .tgm-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tgm-strona ) .wp-block-post-content > *, body:has( .tgm-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tgm-strona ) { background: #0f0d0b; }
body:has( .tgm-strona ) .wp-block-post-content > .tgm-strona, body:has( .tgm-strona ) .entry-content > .tgm-strona, .tgm-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tgm-strona button, .tgm-strona input { font-family: inherit; }

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

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

.tgm-sekcja { margin: 76px 0 0; }
.tgm-sekcja--scisla { position: relative; margin-top: 44px; padding: 34px 30px 36px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 900px 420px at 50% 0%, rgba( 200, 160, 106, .12 ), transparent 65% ), linear-gradient( 180deg, rgba( 28, 24, 20, .84 ), rgba( 14, 12, 10, .94 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 ); }
.tgm-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tgm-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --zloto ); }
.tgm-sekcja__lead { max-width: 78ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }

/* ══════════════  rysunek figury: cztery wiersze punktów  ══════════════ */

.tgm-rysunek { display: grid; gap: var( --odstep, 5px ); justify-items: center; padding: 2px 0; }
.tgm-wiersz { display: flex; gap: var( --odstep, 5px ); }
/* Punkt jest WGŁĘBIENIEM, nie kropką. Cień od górnej krawędzi, światło odbite
   na dolnej ściance i wypchnięty piasek dookoła — to fizyka dziury, a nie
   wypukłości. Cała ta sztuka polega na biciu patykiem w piasek i tak ma wyglądać. */
.tgm-punkt {
	width: var( --kropka, 7px ); height: var( --kropka, 7px ); border-radius: 50%;
	background: var( --dno );
	box-shadow:
		inset 0 2px 3px rgba( 0, 0, 0, .95 ),
		inset 0 -1px 1.5px rgba( 217, 195, 154, .5 ),
		0 1px 0 rgba( 217, 195, 154, .15 );
	transition: box-shadow .22s;
}
.tgm-rysunek--duzy { --kropka: 13px; --odstep: 9px; }

/* ══════════════  pulpit i tarcza  ══════════════ */

.tgm-pulpit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 26px 0 0; }
.tgm-pole { flex: 1 1 340px; display: grid; gap: 6px; min-width: 0; }
.tgm-pole__etyk { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var( --etyk ); }
#tgm-pytanie { width: 100%; padding: 12px 16px; border: 1px solid var( --obrys ); border-radius: 12px; background: rgba( 8, 7, 6, .8 ); color: var( --tekst-mocny ); font-size: 14.5px; }
#tgm-pytanie::placeholder { color: var( --tekst-slaby ); }
#tgm-pytanie:focus { outline: 0; border-color: var( --zloto ); box-shadow: 0 0 0 3px rgba( 216, 180, 119, .16 ); }
.tgm-stawiaj, .tgm-krok { padding: 13px 24px; border: 1px solid var( --obrys ); border-radius: 12px; background: linear-gradient( 180deg, rgba( 216, 180, 119, .22 ), rgba( 216, 180, 119, .08 ) ); color: var( --zloto ); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.tgm-stawiaj:hover, .tgm-krok:hover { transform: translateY( -2px ); box-shadow: 0 18px 40px -24px rgba( 216, 180, 119, .9 ); }
.tgm-krok { background: transparent; color: var( --tekst-slaby ); }
.tgm-stawiaj:focus-visible, .tgm-krok:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.tgm-tarcza { display: grid; gap: 12px; margin: 26px 0 0; }
.tgm-tarcza:empty { display: none; }
.tgm-rzad { display: grid; gap: 10px; }
/* Pierwszy rząd czyta się od prawej — matki stawiano od prawej strony. */
.tgm-rzad--osiem { grid-template-columns: repeat( 8, minmax( 0, 1fr ) ); direction: rtl; }
.tgm-rzad--osiem > * { direction: ltr; }
.tgm-rzad--cztery { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); width: min( 100%, 78% ); margin: 0 auto; direction: rtl; }
.tgm-rzad--cztery > * { direction: ltr; }
.tgm-rzad--dwa { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); width: min( 100%, 52% ); margin: 0 auto; direction: rtl; }
.tgm-rzad--dwa > * { direction: ltr; }
.tgm-rzad--sad { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); width: min( 100%, 52% ); margin: 0 auto; }

.tgm-kw {
	display: grid; justify-items: center; align-content: start; gap: 7px; min-width: 0; padding: 14px 8px 12px;
	border: 1px solid rgba( 200, 160, 106, .16 ); border-top: 2px solid color-mix( in srgb, var( --k ) 70%, transparent ); border-radius: 4px 4px 13px 13px;
	background:
		radial-gradient( 120% 88% at 32% -8%, rgba( 217, 195, 154, .1 ), transparent 58% ),
		linear-gradient( 168deg, var( --plyta-g ), var( --plyta-d ) );
	color: inherit; font: inherit; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s, background .2s;
}
.tgm-kw:hover { transform: translateY( -3px ); box-shadow: 0 22px 46px -28px rgba( 0, 0, 0, .95 ); }
.tgm-kw:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tgm-kw small { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: color-mix( in srgb, var( --k ) 62%, #fff ); text-align: center; }
.tgm-kw b { font: 500 15px/1.15 var( --serif ); color: var( --tekst-mocny ); text-align: center; }
.tgm-kw--sedzia { --kropka: 10px; }
.tgm-kw--sedzia b { font-size: 19px !important; color: var( --zloto ) !important; }

/* Rodzice pola pod kursorem — po to, żeby rachunek dało się prześledzić okiem. */
.tgm-kw.jest-rodzicem { border-color: var( --zloto-c ); box-shadow: inset 0 0 0 1px rgba( 216, 180, 119, .55 ), 0 0 38px -10px rgba( 216, 180, 119, .9 ); }
.tgm-kw.jest-rodzicem .tgm-punkt { box-shadow: inset 0 3px 4px rgba( 0, 0, 0, 1 ), inset 0 -1.5px 2px rgba( 240, 205, 140, .85 ), 0 1px 0 rgba( 217, 195, 154, .26 ); }
.tgm-kw.jest-dzieckiem { border-color: var( --piasek ); }
.tgm-kw.jest-wchodzace { animation: tgm-wejdz .34s both; animation-delay: calc( var( --op, 0 ) * 200ms ); }
@keyframes tgm-wejdz { from { opacity: 0; transform: translateY( 10px ) scale( .96 ); } to { opacity: 1; transform: none; } }

.tgm-nota { max-width: 92ch; margin: 18px 0 0; font-size: 12.5px; line-height: 1.7; color: var( --tekst-slaby ); }
.tgm-nota:empty { display: none; }

.tgm-wynik { margin: 26px 0 0; }
.tgm-wynik:empty { display: none; }
.tgm-wynik__glowa { display: flex; align-items: center; gap: 22px; padding: 22px 24px; border: 1px solid var( --obrys ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 184, 64, 47, .12 ), rgba( 12, 10, 9, .7 ) ); }
.tgm-wynik__nad { margin: 0 0 4px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tgm-wynik__tytul { margin: 0; font: 500 clamp( 26px, 3vw, 36px )/1.1 var( --serif ); color: var( --zloto ); }
.tgm-wynik__krotko { margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; color: var( --tekst-mocny ); }
.tgm-wynik__tresc { max-width: 82ch; margin: 16px 0 0; font-size: 14.5px; line-height: 1.78; color: var( --tekst ); }
.tgm-wynik__domy { margin: 26px 0 0; }
.tgm-domki { display: grid; grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) ); gap: 10px; margin: 10px 0 0; }
.tgm-domek { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px;
	border: 1px solid rgba( 200, 160, 106, .15 ); border-radius: 11px;
	background: radial-gradient( 120% 90% at 32% -8%, rgba( 217, 195, 154, .09 ), transparent 58% ), linear-gradient( 168deg, var( --plyta-g ), var( --plyta-d ) );
	box-shadow: inset 0 1px 0 rgba( 217, 195, 154, .14 ), 0 14px 28px -24px rgba( 0, 0, 0, .95 );
	color: inherit; font: inherit; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.tgm-domek:hover { transform: translateY( -3px ); box-shadow: inset 0 1px 0 rgba( 217, 195, 154, .22 ), 0 18px 34px -22px rgba( 0, 0, 0, .96 ); }
.tgm-domek:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tgm-domek small { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var( --etyk ); text-align: center; }
.tgm-domek b { font: 500 14px/1.15 var( --serif ); color: var( --tekst-mocny ); text-align: center; }

/* ══════════════  szesnaście figur i domy  ══════════════ */

.tgm-uwaga { max-width: 82ch; margin: 14px 0 0; padding: 12px 16px; border-left: 2px solid var( --wlos ); font-size: 12.5px; line-height: 1.65; color: var( --tekst-slaby ); }
.tgm-figury { display: grid; grid-template-columns: repeat( auto-fill, minmax( 178px, 1fr ) ); gap: 14px; margin: 26px 0 0; }
/* Karta figury to płytka wilgotnego piasku — jedyna cieplejsza od tła
   powierzchnia na stronie. Dołki muszą mieć się w czym odcisnąć. */
.tgm-figura {
	position: relative; overflow: hidden;
	display: grid; justify-items: center; align-content: start; gap: 8px;
	padding: 22px 14px 18px; border: 1px solid rgba( 200, 160, 106, .17 ); border-radius: 14px;
	background:
		radial-gradient( 120% 88% at 32% -6%, rgba( 217, 195, 154, .11 ), transparent 58% ),
		linear-gradient( 168deg, var( --plyta-g ), var( --plyta-d ) );
	box-shadow:
		inset 0 1px 0 rgba( 217, 195, 154, .18 ),
		inset 0 -20px 28px -22px rgba( 0, 0, 0, .95 ),
		0 20px 42px -30px rgba( 0, 0, 0, .96 );
	color: inherit; font: inherit; cursor: pointer;
	transition: transform .22s, box-shadow .22s;
}
/* Ziarno piasku — ledwo czuć, ale bez niego płytka jest gładka jak ekran. */
.tgm-figura::before, .tgm-domek::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E" );
}
.tgm-figura > *, .tgm-domek > * { position: relative; }
.tgm-figura:hover { transform: translateY( -4px ); box-shadow:
	inset 0 1px 0 rgba( 217, 195, 154, .26 ),
	inset 0 -20px 28px -22px rgba( 0, 0, 0, .95 ),
	0 28px 56px -30px rgba( 0, 0, 0, .96 ); }
/* Pod kursorem punkty są wybite mocniej. Jedna mikroreakcja, zgodna z tematem. */
.tgm-figura:hover .tgm-punkt, .tgm-domek:hover .tgm-punkt {
	box-shadow:
		inset 0 3px 4px rgba( 0, 0, 0, 1 ),
		inset 0 -1.5px 2px rgba( 217, 195, 154, .68 ),
		0 1px 0 rgba( 217, 195, 154, .22 );
}
.tgm-figura:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tgm-figura .tgm-rysunek { --kropka: 11px; --odstep: 8px; margin-bottom: 4px; }
.tgm-figura b { font: 500 20px/1.15 var( --serif ); color: var( --zloto ); text-align: center; }
.tgm-figura small { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tgm-figura p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var( --tekst ); text-align: center; }

.tgm-domy { display: grid; grid-template-columns: repeat( auto-fill, minmax( 232px, 1fr ) ); gap: 12px; margin: 26px 0 0; }
.tgm-dom { display: grid; grid-template-columns: auto minmax( 0, 1fr ); align-items: start; gap: 4px 14px; padding: 18px 18px 16px; border: 1px solid var( --wlos ); border-radius: 14px; background: linear-gradient( 180deg, rgba( 28, 24, 20, .5 ), rgba( 13, 11, 9, .76 ) ); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.tgm-dom:hover { transform: translateY( -3px ); border-color: var( --obrys ); }
.tgm-dom:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
/* Numer domu to nie etykieta, tylko POZYCJA NA KOLE. Zamiast cyfry w kółku
   rysujemy dwunastodzielną tarczę z zapaloną własną wycinką — dzięki temu widać
   od razu, gdzie dany dom leży wśród dwunastu. Wycinek liczy się od góry
   i przesuwa o 30° na dom, więc `--n` musi ustawić skrypt. */
.tgm-dom__nr {
	grid-row: 1 / 3; position: relative; display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 50%; font-style: normal;
	background:
		conic-gradient( from calc( -90deg - var( --n, 1 ) * 30deg ), color-mix( in srgb, var( --lazur ) 85%, transparent ) 0 30deg, transparent 30deg ),
		repeating-conic-gradient( from -90deg, rgba( 200, 160, 106, .5 ) 0 1.2deg, transparent 1.2deg 30deg );
	box-shadow: inset 0 0 0 1px rgba( 200, 160, 106, .26 );
}
/* Środek wycięty, żeby została sama obręcz z zapalonym wycinkiem. */
.tgm-dom__nr::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: linear-gradient( 168deg, #221a13, #14100b ); }
.tgm-dom__nr::after { content: attr( data-n ); position: relative; font: 500 15px var( --serif ); color: var( --piasek ); }
.tgm-dom b { font: 500 18px/1.2 var( --serif ); color: var( --tekst-mocny ); }
.tgm-dom p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; color: var( --tekst ); }

/* Sześć etapów jedzie torem — wspólny `zrobTor` owija tę siatkę w pas
   ze strzałkami w bocznych marginesach. */
.tgm-etapy { display: grid; grid-template-columns: repeat( auto-fit, minmax( 290px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tgm-etap {
	position: relative; display: flex; flex-direction: column; min-height: 268px;
	padding: 26px 24px 22px; border: 1px solid var( --wlos ); border-radius: 18px;
	background: linear-gradient( 180deg, rgba( 30, 25, 20, .58 ), rgba( 13, 11, 9, .8 ) );
	overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s;
}
/* Poświata wychodzi zza górnej krawędzi, jak światło znad piasku. */
.tgm-etap::before {
	content: ''; position: absolute; inset: -60% 12% auto; height: 150px;
	background: radial-gradient( 50% 60% at 50% 100%, rgba( 205, 164, 116, .3 ), transparent 72% );
	opacity: 0; transition: opacity .3s; pointer-events: none;
}
.tgm-etap:hover, .tgm-etap:focus-visible {
	transform: translateY( -3px ); border-color: rgba( 205, 164, 116, .5 );
	box-shadow: 0 18px 44px -26px rgba( 0, 0, 0, .9 ), 0 0 32px -18px var( --zloto );
}
.tgm-etap:hover::before, .tgm-etap:focus-visible::before { opacity: 1; }
.tgm-etap__znak { display: block; margin-bottom: 12px; font-style: normal; font-size: 21px; line-height: 1; color: var( --piasek ); }
.tgm-etap__okres { display: block; margin: 0 0 7px !important; font: 400 10px Jost, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var( --zloto-etyk, #a08b5e ); }
.tgm-etap b { display: block; margin-bottom: 10px; font: 500 21px/1.24 var( --serif ); color: var( --zloto ); }
.tgm-etap__lead { margin: 0 !important; font-size: 13.5px; line-height: 1.72; color: var( --tekst ); }
.tgm-etap .zd-klocek__skrot { display: flex; flex-direction: column; height: 100%; }

.tgm-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 290px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tgm-ramy__siatka > div { padding: 24px 24px 22px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 28, 24, 20, .5 ), rgba( 13, 11, 9, .76 ) ); }
.tgm-ramy__siatka > div i { display: block; margin-bottom: 10px; font-style: normal; font-size: 22px; color: var( --piasek ); }
.tgm-ramy__siatka > div b { display: block; margin-bottom: 8px; font: 500 21px/1.2 var( --serif ); color: var( --zloto ); }
.tgm-ramy__siatka > div p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var( --tekst ); }
.tgm-ramy__siatka > div.jest-uczciwie { border-color: rgba( 184, 64, 47, .28 ); }
.tgm-ramy__siatka > div.jest-uczciwie i { color: var( --rubryka ); }

/* ══════════════  okno  ══════════════ */

.tgm-tlo { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 30px 20px; background: rgba( 6, 5, 4, .82 ); backdrop-filter: blur( 8px ); opacity: 0; transition: opacity .22s; }
.tgm-tlo.jest-widoczne { opacity: 1; }
.tgm-okno {
	--zloto: #d8b477; --etyk: #9c8763; --piasek: #d9c39a; --wlos: rgba( 200, 160, 106, .13 );
	--tekst: #b0a89c; --tekst-slaby: #8b8378; --tekst-mocny: #efe6d8;
	--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
	position: relative; width: min( 720px, 100% ); max-height: 86vh; overflow-y: auto; padding: 40px 44px 38px; border: 1px solid rgba( 200, 160, 106, .26 ); border-top: 3px solid var( --k, #c8a06a ); border-radius: 22px;
	background: radial-gradient( 700px 340px at 20% 0%, color-mix( in srgb, var( --k, #c8a06a ) 13%, transparent ), transparent 66% ), linear-gradient( 180deg, #1b1713, #100d0b );
	color: var( --tekst ); font: 300 18px var( --sans ); box-shadow: 0 60px 120px -50px rgba( 0, 0, 0, .96 );
	transform: translateY( 12px ); transition: transform .24s;
}
.tgm-tlo.jest-widoczne .tgm-okno { transform: none; }
.tgm-okno *, .tgm-okno *::before, .tgm-okno *::after { box-sizing: border-box; }
.tgm-okno__x { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border: 1px solid var( --wlos ); border-radius: 50%; background: transparent; color: var( --tekst-slaby ); cursor: pointer; transition: color .2s, border-color .2s; }
.tgm-okno__x:hover { color: var( --zloto ); border-color: var( --zloto ); }
.tgm-okno__nad { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tgm-okno__tytul { margin: 0; font: 500 clamp( 30px, 3.4vw, 42px )/1.1 var( --serif ); color: var( --zloto ); }
.tgm-okno__glowa { display: flex; align-items: center; gap: 24px; margin: 18px 0 22px; padding: 18px 20px; border: 1px solid var( --wlos ); border-radius: 16px; background: rgba( 22, 19, 15, .6 ); }
.tgm-okno__meta { display: grid; gap: 4px; }
.tgm-okno__lac { margin: 0 !important; font: 400 17px var( --serif ) !important; letter-spacing: .06em; color: var( --piasek ) !important; }
.tgm-okno__oryg { margin: 0 !important; font-size: 13px !important; letter-spacing: .05em; color: var( --tekst-slaby ) !important; }
.tgm-znacz { display: inline-block; margin-top: 4px; margin-right: 6px; padding: 3px 10px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10.5px; letter-spacing: .1em; color: var( --tekst-slaby ); }
.tgm-okno h3 { margin: 26px 0 8px; font: 400 11px var( --sans ); letter-spacing: .28em; text-transform: uppercase; color: var( --etyk ); }
.tgm-okno p { margin: 0 0 13px; font-size: 18px; line-height: 1.78; color: var( --tekst ); }
.tgm-para { display: flex; align-items: center; gap: 16px; width: 100%; margin-top: 20px; padding: 16px 18px; border: 1px solid var( --wlos ); border-radius: 14px; background: rgba( 22, 19, 15, .5 ); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s; }
.tgm-para:hover { border-color: var( --zloto ); }
.tgm-para small { order: 3; margin-left: auto; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tgm-para b { font: 500 20px var( --serif ); color: var( --zloto ); }

/* ══════════════  węższe okna  ══════════════ */

@media ( max-width: 980px ) {
	.tgm-rzad--osiem { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.tgm-rzad--cztery, .tgm-rzad--dwa, .tgm-rzad--sad { width: 100%; }
}
@media ( max-width: 760px ) {
	.tgm-strona { padding: 0 18px 70px; }
	.tgm-rzad--osiem { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.tgm-wynik__glowa { flex-wrap: wrap; }
	.tgm-okno { padding: 34px 22px 30px; }
	.tgm-okno__glowa { flex-wrap: wrap; gap: 14px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tgm-strona *, .tgm-okno * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════  odczytanie tarczy  ══════════════
   Panel odpowiedzi stoi pod tarczą i ma być pierwszą rzeczą, którą widać po
   postawieniu — dlatego złota krawędź od góry i poświata, a nie kolejna
   szara ramka w rzędzie. */
.tgm-odczyt {
	position: relative; margin: 26px 0 0; padding: 30px 32px 26px;
	border: 1px solid rgba( 205, 164, 116, .34 ); border-top-width: 2px;
	border-top-color: rgba( 232, 197, 138, .7 ); border-radius: 4px 4px 20px 20px;
	background: linear-gradient( 180deg, rgba( 34, 27, 20, .72 ), rgba( 12, 10, 8, .84 ) );
	box-shadow: 0 26px 60px -40px #000, 0 0 44px -30px var( --zloto );
}
.tgm-odczyt__nad { margin: 0 0 14px; font: 400 10px Jost, system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var( --zloto-etyk, #a08b5e ); }
.tgm-odczyt__pytanie { margin: 0 0 18px; padding-left: 16px; border-left: 2px solid rgba( 205, 164, 116, .5 ); font: 400 17px/1.5 var( --serif ); color: var( --tekst-mocny ); }
.tgm-odczyt__akapit { margin: 0 0 14px; font-size: 14.5px; line-height: 1.78; color: var( --tekst ); }
.tgm-odczyt__akapit:first-letter { color: var( --zloto ); }
.tgm-odczyt__czekam { margin: 0; font-size: 14px; line-height: 1.7; color: var( --tekst-slaby ); }
/* Kropka, która pulsuje, zamiast kółka, które się kręci: strona jest cicha. */
.tgm-odczyt__czekam::after { content: '·'; margin-left: 4px; animation: tgm-puls 1.4s infinite; }
@keyframes tgm-puls { 0%, 100% { opacity: .2 } 50% { opacity: 1 } }
.tgm-odczyt__brak { margin: 0; font-size: 14px; line-height: 1.7; color: var( --rubryka, #b8402f ); }
.tgm-odczyt__stopka { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var( --wlos ); font-size: 12px; line-height: 1.6; color: var( --tekst-slaby ); }
@media ( prefers-reduced-motion: reduce ) { .tgm-odczyt__czekam::after { animation: none } }
.tgm-odczyt__akapit b { font-weight: 500; color: var( --tekst-mocny ); }


/* ---------------------------------------------------------------------------
   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.
   Z tego samego powodu nie ma tu overflow: hidden — lotos siedzi nad krawędzią.

   Adres pliku podaje PHP w zmiennej --tlo razem ze znacznikiem czasu, więc
   podmiana grafiki nie wymaga ruszania tego arkusza i nie siedzi w pamięci.
   --------------------------------------------------------------------------- */

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

.tgm-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 ) {
	.tgm-hero[data-tlo], .tgm-sekcja[data-tlo] { padding: 28px 20px 32px; border-radius: 18px; }
}

/* Przerywnik między sekcjami — rysowany wektorem, barwę bierze z currentColor. */
.tgm-przerywnik { display: block; width: 100%; height: 44px; margin: 58px 0 -20px; color: var( --zloto-c ); opacity: .34; filter: drop-shadow( 0 0 10px currentColor ); }
@media ( max-width: 680px ) { .tgm-przerywnik { height: 30px; margin: 38px 0 -14px; } }

/* ---------------------------------------------------------------------------
   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.
   --------------------------------------------------------------------------- */

.tgm-sekcja[data-tlo] .zd-pas > li,
.tgm-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]. */
.tgm-sekcja[data-tlo] {
	--tekst-slaby: #989187;	/* #8b8378 dawało 4.18:1, teraz 5.01:1 */
}

/* 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. */
.tgm-strona .tgm-hero .tgm-okno.zd-okno,
.tgm-strona .tgm-hero .zd-okno.zd-okno,
.tgm-strona .tgm-hero .tgm-okno.tgm-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 26, 22, 18, .10 ), transparent 70% ),
		linear-gradient( 168deg, #1a1816, #0f0d0b );
}