/* Fāl-e Hāfez — ósmy moduł filaru „Bliski Wschód".

   Barwy: pergamin i inkaust, złoto iluminacji na krawędziach, wino i cyprysowa
   zieleń. To jedyny moduł filaru, w którym stroną rządzi tekst obcym pismem,
   więc wszystko jest tu podporządkowane czytelności naschi: duży stopień,
   szeroka interlinia, spokojne tło i żadnych ozdób w polu wiersza.

   Podpisem strony jest otwierana księga — dwie stronice i grzbiet między nimi. */
.tfh-strona {
	--tlo: #100c09; --panel: rgba( 28, 21, 16, .78 ); --obrys: rgba( 201, 162, 39, .3 ); --wlos: rgba( 201, 162, 39, .13 );
	--zloto: #c9a227; --etyk: #97835a;
	--pergamin: #e9dcc0; --pergamin-c: #cbb894; --wino: #8e2f3f; --cyprys: #3d6b52;
	--lazur: #23407a; --lazur-j: #4a6fb5;
	--tekst: #ada398; --tekst-slaby: #8a8177; --tekst-mocny: #ece3d4;
	--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
	--naskh: 'Noto Naskh Arabic', 'Segoe UI', serif;
	position: relative; max-width: 1520px; margin: 0 auto; padding: 0 40px 90px; color: var( --tekst ); font: 300 15px var( --sans );
	/* Światłocień: ciepłe światło wysoko z lewej, lazur wypełnia cień po prawej,
	   wino tli się nisko, a winieta wciąga brzegi w mrok. Jedno źródło, nie cztery. */
	background:
		radial-gradient( 150% 105% at 50% 26%, transparent 42%, rgba( 0, 0, 0, .58 ) 100% ),
		radial-gradient( 1100px 700px at 34% -10%, rgba( 201, 162, 39, .21 ), transparent 62% ),
		radial-gradient( 950px 720px at 90% 58%, rgba( 35, 64, 122, .24 ), transparent 66% ),
		radial-gradient( 700px 500px at 8% 88%, rgba( 142, 47, 63, .16 ), transparent 70% ),
		var( --tlo );
	overflow-x: clip;
}
.tfh-strona *, .tfh-strona *::before, .tfh-strona *::after { box-sizing: border-box; }
/* Ziarno papieru. Bardzo cicho — ma być czuć, a nie widać. */
.tfh-strona::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)'/%3E%3C/svg%3E" ); }
.tfh-strona > * { position: relative; z-index: 1; }
body:has( .tfh-strona ) .wp-site-blocks > header, body:has( .tfh-strona ) header.wp-block-template-part, body:has( .tfh-strona ) .wp-site-blocks > footer, body:has( .tfh-strona ) footer.wp-block-template-part, body:has( .tfh-strona ) .wp-block-post-title { display: none !important; }
body:has( .tfh-strona ) .wp-site-blocks, body:has( .tfh-strona ) .wp-block-group, body:has( .tfh-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tfh-strona ) .wp-block-post-content > *, body:has( .tfh-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tfh-strona ) { background: #100c09; }
body:has( .tfh-strona ) .wp-block-post-content > .tfh-strona, body:has( .tfh-strona ) .entry-content > .tfh-strona, .tfh-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tfh-strona button, .tfh-strona input { font-family: inherit; }

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

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

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

/* ══════════════  pulpit  ══════════════ */

.tfh-pulpit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 26px 0 0; }
.tfh-pole { flex: 1 1 360px; display: grid; gap: 6px; min-width: 0; }
.tfh-pole__etyk { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var( --etyk ); }
#tfh-sprawa { width: 100%; padding: 12px 16px; border: 1px solid var( --obrys ); border-radius: 12px; background: rgba( 9, 7, 5, .8 ); color: var( --tekst-mocny ); font-size: 14.5px; }
#tfh-sprawa::placeholder { color: var( --tekst-slaby ); }
#tfh-sprawa:focus { outline: 0; border-color: var( --zloto ); box-shadow: 0 0 0 3px rgba( 201, 162, 39, .16 ); }
.tfh-otworz { padding: 13px 26px; border: 1px solid var( --obrys ); border-radius: 12px; background: linear-gradient( 180deg, rgba( 201, 162, 39, .24 ), rgba( 201, 162, 39, .08 ) ); color: var( --zloto ); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.tfh-otworz:hover { transform: translateY( -2px ); box-shadow: 0 18px 40px -24px rgba( 201, 162, 39, .9 ); }
.tfh-otworz:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tfh-skad-losujemy { max-width: 82ch; margin: 12px 0 0; font-size: 12.5px; line-height: 1.65; color: var( --tekst-slaby ); }

/* ══════════════  dżadwal — ruled frame perskiego rękopisu  ══════════════

   Na każdej karcie rękopisu kolumna tekstu jest obwiedziona linią złożoną
   z kilku kresek: włoskowa złota, pas lazuru, druga złota. Rysujemy ją
   cieniami wewnetrznymi na karcie, bo to dokladnie warstwy tej linii. */

/* Szamsa — złocona rozeta. W rękopisie znaczy początek; u nas: mamy omówienie. */
.tfh-szamsa {
	position: absolute; top: 14px; left: 14px; width: 16px; height: 16px; border-radius: 50%;
	background:
		radial-gradient( circle at 50% 50%, var( --zloto ) 0 2.5px, transparent 3px ),
		repeating-conic-gradient( from 0deg, var( --zloto ) 0deg 8deg, transparent 8deg 45deg );
	box-shadow: 0 0 14px -2px rgba( 201, 162, 39, .8 );
	opacity: .9;
}

/* ══════════════  księga: dwie stronice i grzbiet  ══════════════ */

.tfh-ksiega { margin: 26px 0 0; }
.tfh-ksiega:empty { display: none; }
.tfh-czekaj { margin: 0; padding: 34px 0; text-align: center; font: 400 17px var( --serif ); color: var( --tekst-slaby ); }
.tfh-rozklad { position: relative; display: grid; grid-template-columns: minmax( 0, 1fr ) 34px minmax( 0, 1.02fr ); align-items: stretch; border: 1px solid var( --obrys ); border-radius: 18px; overflow: hidden; box-shadow: 0 50px 110px -60px rgba( 0, 0, 0, .98 ); opacity: 0; transform: perspective( 1400px ) rotateX( 4deg ) translateY( 10px ); transition: opacity .45s, transform .55s; }
.tfh-ksiega.jest-otwarta .tfh-rozklad { opacity: 1; transform: none; }
.tfh-stronica { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 30px 30px 26px; background: linear-gradient( 180deg, rgba( 34, 26, 19, .92 ), rgba( 20, 15, 11, .96 ) ); }
.tfh-stronica--prawa { background: linear-gradient( 200deg, rgba( 40, 31, 22, .95 ), rgba( 22, 17, 12, .97 ) ); }
/* Kolumna wiersza w ramce, jak na karcie rękopisu. */
.tfh-wiersz { position: relative; padding: 18px 16px 16px !important; border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .34 ), inset 0 0 0 3px rgba( 35, 64, 122, .34 ), inset 0 0 0 4px rgba( 201, 162, 39, .2 ); }
/* Sarlawh — iluminowana główka nad kolumną: pas lazuru z rzędem złotych łuków. */
.tfh-stronica--prawa .tfh-stronica__glowa { position: relative; padding-top: 16px; }
.tfh-stronica--prawa .tfh-stronica__glowa::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 9px; border-radius: 3px 3px 0 0;
	background: repeating-radial-gradient( circle at 9px 9px, rgba( 201, 162, 39, .85 ) 0 1.2px, transparent 1.4px 9px ), linear-gradient( 180deg, rgba( 35, 64, 122, .75 ), rgba( 35, 64, 122, .3 ) );
	box-shadow: 0 1px 0 rgba( 201, 162, 39, .5 ); }
/* Grzbiet: dwa cienie schodzące do środka, żeby rozkład miał grubość. */
.tfh-grzbiet { background: linear-gradient( 90deg, rgba( 0, 0, 0, .72 ), rgba( 0, 0, 0, .3 ) 30%, rgba( 201, 162, 39, .16 ) 48%, rgba( 201, 162, 39, .16 ) 52%, rgba( 0, 0, 0, .3 ) 70%, rgba( 0, 0, 0, .72 ) ); }

.tfh-stronica__glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var( --wlos ); }
.tfh-numer { font: 500 22px var( --serif ); color: var( --zloto ); }
.tfh-litera { padding: 3px 10px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var( --pergamin-c ); }
.tfh-bejtow { margin-left: auto; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var( --tekst-slaby ); }

/* Pole wiersza. Naschi potrzebuje dużego stopnia i szerokiej interlinii —
   przy 1.2 znaki diakrytyczne wchodzą na siebie. */
.tfh-wiersz { display: grid; gap: 14px; padding: 6px 0 4px; }
.tfh-bejt { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); gap: 10px 22px; padding-bottom: 12px; border-bottom: 1px dashed rgba( 201, 162, 39, .1 ); }
.tfh-bejt:last-child { border-bottom: 0; padding-bottom: 0; }
.tfh-polwiersz { min-width: 0; font: 400 clamp( 17px, 1.5vw, 21px )/2.05 var( --naskh ); color: var( --pergamin ); }
.tfh-stronica__stopka { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var( --wlos ); font-size: 10.5px; letter-spacing: .06em; color: var( --tekst-slaby ); }

.tfh-stronica__nad { margin: 0; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tfh-krotko { margin: 0; font: 400 clamp( 19px, 1.9vw, 25px )/1.35 var( --serif ); color: var( --tekst-mocny ); }
.tfh-motywy { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.tfh-motyw { padding: 3px 10px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var( --cyprys ); }
.tfh-stronica--lewa p { margin: 0; font-size: 14px; line-height: 1.78; color: var( --tekst ); }
.tfh-podtytul { margin: 12px 0 0; font: 400 10.5px var( --sans ); letter-spacing: .28em; text-transform: uppercase; color: var( --etyk ); }
.tfh-fal { padding: 14px 16px; border-left: 2px solid rgba( 142, 47, 63, .6 ); background: rgba( 142, 47, 63, .09 ); }
.tfh-brak { padding: 16px 18px; border: 1px dashed var( --wlos ); border-radius: 12px; color: var( --tekst-slaby ) !important; }
.tfh-sprawa-echo { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var( --wlos ); font-size: 12.5px !important; color: var( --tekst-slaby ) !important; }
.tfh-znowu { display: block; margin: 16px auto 0; padding: 10px 22px; border: 1px solid var( --wlos ); border-radius: 999px; background: transparent; color: var( --etyk ); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; }
.tfh-znowu:hover { color: var( --zloto ); border-color: var( --zloto ); }
.tfh-znowu:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

/* ══════════════  półka: dywan jako tor kart  ══════════════

   Sedno tej sekcji: PERSKI JEST ILUMINACJĄ, NIE TREŚCIĄ. Wcześniej kafel
   niósł incipit po persku i nic poza tym — polski czytelnik dostawał pół
   strony pisma, którego nie czyta. Teraz naskh leży pod spodem jak atrament
   prześwitujący przez kartę, a czyta się polszczyznę. */

.tfh-narzedzia { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 24px 0 0; }
.tfh-zakres { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .28 ); }
.tfh-zakres__b { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var( --tekst-slaby ); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s; }
.tfh-zakres__b i { font-style: normal; font-size: 10px; opacity: .8; }
.tfh-zakres__b:hover { color: var( --tekst-mocny ); }
.tfh-zakres__b.jest-wybrany { background: linear-gradient( 180deg, rgba( 201, 162, 39, .26 ), rgba( 35, 64, 122, .22 ) ); color: var( --pergamin ); box-shadow: 0 0 22px -8px rgba( 201, 162, 39, .8 ); }
.tfh-zakres__b:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }

.tfh-litery { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.tfh-litera-b { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 0; border-radius: 7px; background: transparent; color: var( --tekst-slaby ); cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; }
.tfh-litera-b b { font: 400 12px var( --sans ); letter-spacing: .07em; }
.tfh-litera-b i { font-style: normal; font-size: 9.5px; color: var( --etyk ); }
.tfh-litera-b:hover { color: var( --tekst-mocny ); box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .26 ); }
.tfh-litera-b.jest-wybrany { color: var( --zloto ); box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .55 ), inset 0 0 0 3px rgba( 35, 64, 122, .4 ); }
.tfh-litera-b:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }

.tfh-tor { position: relative; contain: inline-size; margin: 20px 0 0; }
.tfh-polka { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px 2px 20px; }
.tfh-polka::-webkit-scrollbar { display: none; }
.tfh-polka.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; }

.tfh-karta {
	position: relative; flex: 0 0 clamp( 250px, 22vw, 296px ); min-width: 0; min-height: 232px;
	display: grid; align-content: start; gap: 8px; padding: 24px 22px 20px;
	border: 0; border-radius: 10px; overflow: hidden; scroll-snap-align: start; cursor: pointer;
	/* światło pada z lewego górnego rogu i schodzi w cień przy prawym dolnym */
	background: linear-gradient( 152deg, rgba( 48, 37, 25, .95 ), rgba( 19, 14, 10, .97 ) );
	box-shadow:
		inset 0 0 0 1px rgba( 214, 175, 58, .72 ),
		inset 0 0 0 5px rgba( 42, 74, 138, .78 ),
		inset 0 0 0 6px rgba( 214, 175, 58, .5 ),
		inset 0 0 0 11px rgba( 14, 10, 7, .94 ),
		0 26px 50px -32px rgba( 0, 0, 0, .98 );
	color: inherit; font: inherit; text-align: left;
	transition: transform .24s, box-shadow .24s;
}
.tfh-karta:hover { transform: translateY( -5px ); box-shadow:
	inset 0 0 0 1px rgba( 240, 200, 82, .95 ),
	inset 0 0 0 5px rgba( 58, 96, 170, .9 ),
	inset 0 0 0 6px rgba( 240, 200, 82, .62 ),
	inset 0 0 0 11px rgba( 14, 10, 7, .94 ),
	0 34px 62px -34px rgba( 0, 0, 0, .98 ), 0 0 64px -22px rgba( 201, 162, 39, .6 ); }
.tfh-karta:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

/* Perski znak wodny: leży pod treścią, wychodzi poza prawą krawędź jak wiersz,
   który biegnie dalej. Nie jest do czytania i dlatego jest ukryty przed czytnikami. */
/* Iluminacja zaczyna się DOPIERO POD nagłówkiem. Gdy szła przez cały kafel,
   przechodziła przez numer i metę i robiła z nich papkę — pismo ma zdobić
   dolną połowę karty, a nie walczyć z tym, co się czyta. */
.tfh-karta__znak {
	position: absolute; inset: 92px -38px -4px 34%; z-index: 0; overflow: hidden;
	font: 400 clamp( 34px, 3.2vw, 46px )/1.75 var( --naskh ); color: var( --pergamin );
	opacity: .2; pointer-events: none;
	mask-image: linear-gradient( 205deg, #000 0 34%, transparent 92% );
}
.tfh-karta:hover .tfh-karta__znak { opacity: .32; }

.tfh-karta > *:not( .tfh-karta__znak ) { position: relative; z-index: 1; }
.tfh-karta__glowa { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba( 201, 162, 39, .18 ); }
.tfh-karta__nr { font: 500 30px/1 var( --serif ); color: var( --zloto ); text-shadow: 0 0 26px rgba( 201, 162, 39, .5 ); }
.tfh-karta__meta { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tfh-karta__krotko { font: 400 15px/1.55 var( --serif ); color: var( --pergamin ); }
.tfh-karta__motywy { margin-top: auto; padding-top: 8px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var( --cyprys ); }
.tfh-karta__bez { font-size: 12.5px; line-height: 1.55; color: var( --tekst-slaby ); }

/* Karta z omówieniem dostaje szamsę i jest o ton jaśniejsza — to ona jest
   dla polskiego czytelnika użyteczna i widać to od razu. */
.tfh-karta.ma-omowienie::after {
	content: ''; position: absolute; top: 15px; right: 15px; width: 15px; height: 15px; border-radius: 50%; z-index: 2;
	background: radial-gradient( circle at 50% 50%, var( --zloto ) 0 2.5px, transparent 3px ), repeating-conic-gradient( from 0deg, rgba( 201, 162, 39, .9 ) 0deg 7deg, transparent 7deg 45deg );
	box-shadow: 0 0 14px -2px rgba( 201, 162, 39, .85 );
}
.tfh-karta:not( .ma-omowienie ) { background: linear-gradient( 152deg, rgba( 34, 27, 19, .8 ), rgba( 16, 12, 8, .95 ) ); }
.tfh-karta:not( .ma-omowienie ) .tfh-karta__nr { color: var( --pergamin-c ); text-shadow: none; }

.tfh-tor__strz { position: absolute; top: 40%; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba( 14, 10, 7, .9 ); color: var( --zloto ); cursor: pointer; box-shadow: inset 0 0 0 1px rgba( 201, 162, 39, .45 ), 0 0 26px -10px rgba( 201, 162, 39, .8 ); transition: transform .2s, background .2s; }
.tfh-tor__strz:hover { transform: scale( 1.08 ); background: rgba( 35, 64, 122, .5 ); }
.tfh-tor__strz--lewo { left: -12px; } .tfh-tor__strz--prawo { right: -12px; }
.tfh-tor__strz::before { content: '‹'; font: 400 26px/1 var( --serif ); }
.tfh-tor__strz--prawo::before { content: '›'; }
.tfh-tor__strz:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tfh-tor__licznik { margin: 2px 0 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby ); }

/* ══════════════  ramy i źródło  ══════════════ */

.tfh-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 290px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tfh-ramy__siatka > div { position: relative; padding: 26px 26px 24px; border: 0; border-radius: 12px; overflow: hidden;
	background: linear-gradient( 156deg, rgba( 44, 34, 23, .82 ), rgba( 15, 11, 8, .95 ) );
	box-shadow:
		inset 0 0 0 1px rgba( 214, 175, 58, .5 ),
		inset 0 0 0 4px rgba( 42, 74, 138, .5 ),
		inset 0 0 0 5px rgba( 214, 175, 58, .28 ),
		inset 0 0 0 9px rgba( 14, 10, 7, .94 ),
		0 24px 46px -32px rgba( 0, 0, 0, .95 ); }
/* Ciepłe światło zsuwa się po panelu z góry — to samo źródło co na całej stronie. */
.tfh-ramy__siatka > div::before { content: ''; position: absolute; inset: 9px 9px auto 9px; height: 46%; pointer-events: none;
	background: linear-gradient( 180deg, rgba( 214, 175, 58, .09 ), transparent ); }
.tfh-ramy__siatka > div > * { position: relative; }
.tfh-ramy__siatka > div i { display: block; margin-bottom: 10px; font-style: normal; font-size: 22px; color: var( --pergamin-c ); }
.tfh-ramy__siatka > div b { display: block; margin-bottom: 8px; font: 500 21px/1.2 var( --serif ); color: var( --zloto ); }
.tfh-ramy__siatka > div p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var( --tekst ); }
.tfh-ramy__siatka > div.jest-uczciwie { border-color: rgba( 142, 47, 63, .32 ); }
.tfh-ramy__siatka > div.jest-uczciwie i { color: var( --wino ); }

.tfh-zrodlo { display: grid; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); gap: 14px; margin: 22px 0 0; padding: 24px 26px; border: 0; border-radius: 12px;
	background: linear-gradient( 156deg, rgba( 40, 31, 21, .7 ), rgba( 14, 10, 7, .92 ) );
	box-shadow: inset 0 0 0 1px rgba( 214, 175, 58, .4 ), inset 0 0 0 4px rgba( 42, 74, 138, .4 ), inset 0 0 0 5px rgba( 214, 175, 58, .22 ), inset 0 0 0 9px rgba( 14, 10, 7, .94 ); }
.tfh-zrodlo__l { display: grid; gap: 4px; margin: 0; font-size: 13.5px; color: var( --tekst ); }
.tfh-zrodlo__l b { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 400; color: var( --etyk ); }
.tfh-zrodlo__l a { color: var( --zloto ); text-decoration: none; border-bottom: 1px solid rgba( 201, 162, 39, .4 ); }
.tfh-zrodlo__l a:hover { border-bottom-color: var( --zloto ); }

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

@media ( max-width: 1000px ) {
	.tfh-rozklad { grid-template-columns: minmax( 0, 1fr ); }
	.tfh-grzbiet { height: 2px; background: linear-gradient( 90deg, transparent, rgba( 201, 162, 39, .3 ), transparent ); }
	/* Na wąskim ekranie oryginał idzie na górę — po niego się tu przychodzi. */
	.tfh-stronica--prawa { order: -1; }
}
@media ( max-width: 700px ) {
	.tfh-strona { padding: 0 18px 70px; }
	.tfh-tor__strz { display: none; }
	.tfh-karta { flex-basis: 82vw; }
	.tfh-bejt { grid-template-columns: minmax( 0, 1fr ); gap: 4px; }
	.tfh-stronica { padding: 24px 20px 20px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tfh-strona * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.tfh-rozklad { transform: none; }
}

/* ══════════════  fał: odczytanie na sprawę  ══════════════
   Stoi na lewej stronicy, pod naszym omówieniem, oddzielone złotą nitką —
   ma być widać, że to inny głos niż nota redakcyjna nad nim. */
.tfh-fal-odczyt { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid rgba( 205, 164, 116, .32 ); }
.tfh-fal-odczyt__nad { margin: 0 0 12px; font: 400 10px Jost, system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var( --zloto-etyk, #a08b5e ); }
.tfh-fal-odczyt__sprawa { margin: 0 0 16px; padding-left: 14px; border-left: 2px solid rgba( 205, 164, 116, .5 ); font: 400 16px/1.5 var( --serif ); color: var( --tekst-mocny ); }
.tfh-fal-odczyt__akapit { margin: 0 0 13px; font-size: 14.5px; line-height: 1.78; color: var( --tekst ); }
.tfh-fal-odczyt__akapit b { font-weight: 500; color: var( --tekst-mocny ); }
.tfh-fal-odczyt__czekam { margin: 0; font-size: 14px; line-height: 1.7; color: var( --tekst-slaby ); }
.tfh-fal-odczyt__czekam::after { content: '·'; margin-left: 4px; animation: tfh-puls 1.4s infinite; }
@keyframes tfh-puls { 0%, 100% { opacity: .2 } 50% { opacity: 1 } }
.tfh-fal-odczyt__brak { margin: 0; font-size: 14px; line-height: 1.7; color: var( --rubryka, #b8402f ); }
.tfh-fal-odczyt__stopka { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var( --wlos ); font-size: 12px; line-height: 1.6; color: var( --tekst-slaby ); }
@media ( prefers-reduced-motion: reduce ) { .tfh-fal-odczyt__czekam::after { animation: none } }


/* TŁA SEKCJI — reguły trzymają się atrybutu data-tlo, który PHP dokłada dopiero,
   gdy plik leży na serwerze. Bez grafiki blok wygląda dokładnie jak dziś.
   Obraz wchodzi WARSTWĄ background, nie przez ::before — tych pseudoelementów
   używa wspólny zdobienia.css. Zmienna to --obraz-tla, a NIE --tlo, które
   w większości arkuszy jest już barwą tła strony. */

.tfh-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, .34 ) 64%, rgba( 12, 10, 14, 0 ) 100% ),
		var( --obraz-tla ) 50% 46% / cover no-repeat;
}
.tfh-hero[data-tlo] > * { max-width: 80ch; }

.tfh-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;
}

/* Czytelność nad zdjęciem: kafle są przezroczyste z założenia, więc nad fotografią
   tekst spada do 1,23:1. Próg 4,5:1 wypada przy kryciu 0,845; stąd 0,90. */
.tfh-sekcja[data-tlo] .zd-pas > li,
.tfh-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 );
}

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

/* 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]. */
.tfh-sekcja[data-tlo] {
	--tekst-slaby: #999189;	/* #8a8177 dawało 4.08:1, teraz 5.04:1 */
	--etyk: #a2916c;	/* #97835a dawało 4.25:1, teraz 5.06: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. */
.tfh-strona .tfh-hero .tfh-okno.zd-okno,
.tfh-strona .tfh-hero .zd-okno.zd-okno,
.tfh-strona .tfh-hero .tfh-okno.tfh-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 28, 21, 16, .10 ), transparent 70% ),
		linear-gradient( 168deg, #1b1714, #100c09 );
}