/* Tybet i wadżrajana. Tokeny serwisu; akcent: turkus i koral — dwa materiały,
   które w tej sztuce wracają najczęściej, i dwie strony tej samej tradycji:
   spokojna i gniewna. Podpisem strony jest klucz „znak najpewniejszy", więc to
   on ma być czytelny, a nie ozdobny. Miara: 1520 px treści.
   UWAGA przy piśmie tybetańskim: sylaba złożona ma tusz wysoki na ok. 1,6
   wysokości czcionki, więc interlinia nigdzie nie schodzi poniżej 1,8. */
.ttb-strona {
	--tlo: #060716; --panel: rgba( 10, 12, 34, .74 ); --obrys: rgba( 230, 196, 138, .3 ); --wlos: rgba( 230, 196, 138, .12 );
	--zloto: #fde291; --zloto-cieply: #f9d57a; --zloto-ciemne: #e6c48a; --zloto-etyk: #cda474;
	--turkus: #3fb6a8; --koral: #d4645f; --jade: #7cc5a4;
	--tekst: #b3b1c2; --tekst-slaby: #9393a7; --tekst-mocny: #e6e2ea;
	--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
	--tyb: 'Noto Serif Tibetan', 'Microsoft Himalaya', Georgia, serif;
	--dev: 'Noto Serif Devanagari', Georgia, 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( 40, 90, 140, .26 ), transparent 70% ), radial-gradient( 900px 520px at 86% 34%, rgba( 212, 100, 95, .08 ), transparent 70% ), var( --tlo ); overflow-x: clip;
}
.ttb-strona *, .ttb-strona *::before, .ttb-strona *::after { box-sizing: border-box; }
body:has( .ttb-strona ) .wp-site-blocks > header, body:has( .ttb-strona ) header.wp-block-template-part, body:has( .ttb-strona ) .wp-site-blocks > footer, body:has( .ttb-strona ) footer.wp-block-template-part, body:has( .ttb-strona ) .wp-block-post-title { display: none !important; }
body:has( .ttb-strona ) .wp-site-blocks, body:has( .ttb-strona ) .wp-block-group, body:has( .ttb-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .ttb-strona ) .wp-block-post-content > *, body:has( .ttb-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .ttb-strona ) { background: #060716; }
body:has( .ttb-strona ) .wp-block-post-content > .ttb-strona, body:has( .ttb-strona ) .entry-content > .ttb-strona, .ttb-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.ttb-strona button { font-family: inherit; }

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

/* ──────────────────────────────────  hero  ────────────────────────────────── */
.ttb-hero { display: grid; grid-template-columns: 74px minmax( 0, 1fr ); gap: 30px; padding: 44px 0 8px; }
.ttb-hero__tresc { max-width: 80ch; min-width: 0; }
.ttb-pion { writing-mode: vertical-rl; margin: 6px 0 0; align-self: start; font: 400 26px/1.8 var( --tyb ); letter-spacing: .16em; color: var( --turkus ); text-shadow: 0 0 30px rgba( 63, 182, 168, .35 ); }
.ttb-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --zloto-etyk ); }
.ttb-tytul { margin: 0; font: 500 clamp( 46px, 5.4vw, 80px )/1.03 var( --serif ); color: var( --zloto-cieply ); }
.ttb-tytul small { display: block; margin-top: 8px; font: 300 16px var( --sans ); letter-spacing: .14em; color: var( --turkus ); }
.ttb-lead { margin: 22px 0 0; font-size: 16.5px; line-height: 1.75; color: var( --tekst-mocny ); }
.ttb-hero__licz { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby ); }
.ttb-hero__licz span { display: inline-flex; align-items: center; gap: 8px; }
.ttb-hero__licz i { width: 20px; height: 3px; border-radius: 2px; background: var( --k ); }

/* ────────────────────────────────  sekcje  ───────────────────────────────── */
.ttb-sekcja { margin: 76px 0 0; }
.ttb-sekcja--scisla { position: relative; margin-top: 44px; padding: 34px 30px 30px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 900px 420px at 18% 0%, rgba( 63, 182, 168, .1 ), transparent 65% ), radial-gradient( 700px 400px at 88% 100%, rgba( 212, 100, 95, .08 ), transparent 65% ), linear-gradient( 180deg, rgba( 12, 16, 38, .8 ), rgba( 6, 7, 22, .92 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 ); }
.ttb-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --zloto-etyk ); }
.ttb-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --zloto-cieply ); }
.ttb-sekcja__lead { max-width: 78ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }

/* ─────────────────────────  klucz: znak najpewniejszy  ────────────────────── */
.ttb-klucz { display: grid; grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); gap: 18px; margin: 26px 0 0; }
.ttb-znak { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px 22px 20px; border: 1px solid var( --wlos ); border-top: 2px solid color-mix( in srgb, var( --turkus ) 55%, transparent ); border-radius: 3px 3px 20px 20px; background: var( --panel ); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .24s, border-color .24s, box-shadow .24s; }
.ttb-znak:hover { transform: translateY( -4px ); border-color: var( --obrys ); box-shadow: 0 26px 60px -34px rgba( 0, 0, 0, .95 ), 0 0 46px -22px rgba( 63, 182, 168, .5 ); }
.ttb-znak:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.ttb-znak.jest-wybrany { border-color: var( --turkus ); box-shadow: inset 0 0 0 1px rgba( 63, 182, 168, .3 ), 0 0 48px -20px rgba( 63, 182, 168, .6 ); }
.ttb-znak__glif { font-style: normal; font-size: 22px; line-height: 1; color: var( --turkus ); }
.ttb-znak__nazwa { margin: 0; font: 500 21px/1.15 var( --serif ); color: var( --zloto-cieply ); }
.ttb-znak__pod { margin: 0; font-size: 12.5px; line-height: 1.5; color: var( --tekst-slaby ); }
.ttb-znak__ile { display: block; margin: 4px 0 0; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var( --turkus ); }
.ttb-znak__kto { display: block; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var( --wlos ); font-size: 12.5px; line-height: 1.6; color: var( --tekst ); }

/* ────────────────────────────  tor z kartami  ─────────────────────────────── */
.ttb-rodziny { display: flex; flex-wrap: wrap; gap: 16px; margin: 22px 0 0; }
.ttb-rodzina { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var( --tekst-slaby ); cursor: pointer; }
.ttb-rodzina::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var( --k ); }
.ttb-rodzina b { font-weight: 400; color: var( --tekst ); }
.ttb-rodzina i { font-style: normal; color: var( --zloto-etyk ); }
.ttb-rodzina.jest-wybrany b { color: var( --zloto ); }
.ttb-rodzina:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.ttb-tor { position: relative; min-width: 0; contain: inline-size; }
.ttb-siatka { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 22px 0 0; padding: 12px 4px 22px; cursor: grab; scroll-behavior: smooth; }
.ttb-siatka::-webkit-scrollbar { display: none; }
.ttb-siatka.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.ttb-tor__strz { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -30px; border: 1px solid rgba( 230, 196, 138, .34 ); border-radius: 50%; background: rgba( 6, 7, 22, .92 ); color: var( --zloto-etyk ); cursor: pointer; box-shadow: 0 10px 30px rgba( 0, 0, 0, .6 ); transition: color .2s, border-color .2s, box-shadow .2s; }
.ttb-tor__strz::before { content: ''; width: 11px; height: 11px; margin-left: 5px; border-left: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: rotate( -45deg ); }
.ttb-tor__strz--lewo { left: -20px; }
.ttb-tor__strz--prawo { right: -20px; transform: scaleX( -1 ); }
.ttb-tor__strz:hover { color: var( --zloto ); border-color: var( --zloto ); box-shadow: 0 10px 36px rgba( 249, 213, 122, .26 ); }
.ttb-tor__strz[hidden] { display: none; }
.ttb-tor__licznik { position: absolute; right: 6px; bottom: -6px; margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby ); }

.ttb-karta { position: relative; flex: 0 0 clamp( 210px, 19vw, 292px ); scroll-snap-align: start; display: block; padding: 0; border: 1px solid color-mix( in srgb, var( --k ) 42%, transparent ); border-radius: 18px; background: #05060f; overflow: hidden; cursor: pointer; aspect-ratio: 2 / 3; box-shadow: 0 18px 44px -18px rgba( 0, 0, 0, .95 ), inset 0 0 0 1px rgba( 255, 255, 255, .05 ); transition: transform .3s cubic-bezier( .2, .7, .3, 1 ), box-shadow .3s, border-color .3s, opacity .3s, filter .3s; }
.ttb-karta::after { content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba( 249, 213, 122, .16 ), inset 0 -70px 90px -60px color-mix( in srgb, var( --k ) 60%, transparent ); transition: box-shadow .3s; }
.ttb-karta:hover { transform: translateY( -10px ) scale( 1.02 ); border-color: color-mix( in srgb, var( --k ) 85%, transparent ); box-shadow: 0 34px 70px -20px rgba( 0, 0, 0, .95 ), 0 0 60px -12px color-mix( in srgb, var( --k ) 55%, transparent ); }
.ttb-karta:hover::after { box-shadow: inset 0 0 0 1px rgba( 249, 213, 122, .4 ), inset 0 -80px 110px -60px color-mix( in srgb, var( --k ) 75%, transparent ); }
.ttb-karta:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.ttb-karta.jest-przygaszony { opacity: .18; filter: saturate( .2 ); }
.ttb-karta__foto { position: absolute; inset: 0; margin: 0; border-radius: 18px; overflow: hidden; background: #05060f; }
.ttb-karta__foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate( .92 ) brightness( .92 ); transition: transform .5s, filter .4s; }
.ttb-karta:hover .ttb-karta__foto img { transform: scale( 1.04 ); filter: saturate( 1.02 ) brightness( 1.04 ); }
/* Podpisy z karty czyta czytnik ekranu; na obrazie i tak są wypalone. */
.ttb-karta__pismo, .ttb-karta__nazwa, .ttb-karta__rodzina, .ttb-karta__krotko, .ttb-karta__znak { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; }

/* ─────────────────────────────  okno postaci  ─────────────────────────────── */
/* Okno doklejamy do <body>, czyli POZA .ttb-strona — a tam nie ma zadnego z naszych
   tokenow. Bez tego `color: var( --tekst )` schodzilo do wartosci poczatkowej i tekst
   robil sie ciemny na ciemnym tle. Dlatego tlo okna niesie wlasny komplet zmiennych. */
.ttb-tlo {
	--panel: rgba( 10, 12, 34, .74 ); --obrys: rgba( 230, 196, 138, .3 ); --wlos: rgba( 230, 196, 138, .12 );
	--zloto: #fde291; --zloto-cieply: #f9d57a; --zloto-ciemne: #e6c48a; --zloto-etyk: #cda474;
	--turkus: #3fb6a8; --koral: #d4645f;
	--tekst: #b3b1c2; --tekst-slaby: #9393a7; --tekst-mocny: #e6e2ea;
	--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
	--tyb: 'Noto Serif Tibetan', 'Microsoft Himalaya', Georgia, serif;
	--dev: 'Noto Serif Devanagari', Georgia, serif;
	position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 28px; background: rgba( 4, 3, 12, .72 ); backdrop-filter: blur( 14px ); opacity: 0; transition: opacity .22s; }
.ttb-tlo.jest-widoczne { opacity: 1; }
.ttb-okno { position: relative; width: min( 900px, 100% ); max-height: min( 88vh, 940px ); overflow: auto; padding: 40px 44px 44px; border: 1px solid var( --obrys ); border-top: 3px solid var( --k ); border-radius: 4px 4px 24px 24px; background: linear-gradient( 180deg, rgba( 14, 18, 44, .97 ), rgba( 7, 5, 22, .98 ) ); box-shadow: 0 40px 90px rgba( 0, 0, 0, .6 ); color: var( --tekst ); font: 300 18px var( --sans ); transform: translateY( 14px ); transition: transform .22s; }
.ttb-tlo.jest-widoczne .ttb-okno { transform: none; }
.ttb-okno__x { position: absolute; right: 18px; top: 18px; width: 38px; height: 38px; border: 1px solid var( --wlos ); border-radius: 50%; background: rgba( 7, 5, 22, .6 ); color: var( --zloto-etyk ); font-size: 17px; cursor: pointer; z-index: 1; }
.ttb-okno__x:hover { color: var( --zloto ); border-color: var( --obrys ); }
.ttb-okno__karta { float: right; width: min( 320px, 40% ); margin: 0 0 18px 26px; border: 1px solid var( --wlos ); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba( 0, 0, 0, .5 ); }
.ttb-okno__karta img { display: block; width: 100%; height: auto; }
.ttb-okno__nad { margin: 0 0 6px; padding-right: 46px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var( --k ); }
.ttb-okno__tytul { margin: 0; font: 500 clamp( 30px, 3.4vw, 44px )/1.06 var( --serif ); color: var( --zloto-cieply ); }
.ttb-okno__pisma { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; }
.ttb-okno__tyb { margin: 0; font: 400 24px/1.8 var( --tyb ); color: var( --turkus ); }
.ttb-okno__dev { margin: 0; font: 400 21px/1.8 var( --dev ); color: var( --zloto-ciemne ); }
.ttb-okno__znak { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 0; padding: 14px 18px; border: 1px solid color-mix( in srgb, var( --turkus ) 34%, transparent ); border-radius: 14px; background: rgba( 63, 182, 168, .08 ); }
.ttb-okno__znak small { flex: 0 0 auto; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var( --turkus ); }
.ttb-okno__znak b { font: 400 16px/1.5 var( --sans ); color: var( --tekst-mocny ); }
.ttb-okno h3 { margin: 26px 0 8px; font: 400 12px var( --sans ); letter-spacing: .26em; text-transform: uppercase; color: var( --zloto-etyk ); }
.ttb-okno p { margin: 0 0 12px; font-size: 18px; line-height: 1.75; }
.ttb-okno__mylic { margin: 22px 0 0; padding: 16px 20px; border: 1px solid rgba( 212, 100, 95, .32 ); border-radius: 14px; background: rgba( 212, 100, 95, .08 ); font-size: 14px; line-height: 1.65; color: var( --tekst-mocny ); }
.ttb-okno__mylic b { display: block; margin-bottom: 5px; font: 400 10px var( --sans ); letter-spacing: .26em; text-transform: uppercase; color: var( --koral ); }
.ttb-okno__znaki { display: flex; flex-wrap: wrap; gap: 8px; clear: both; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var( --wlos ); }
.ttb-mini { padding: 4px 11px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var( --tekst-slaby ); }

/* ──────────────────────────────  dwa panele  ─────────────────────────────── */
.ttb-ramy__siatka { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 20px; margin: 26px 0 0; }
.ttb-ramy__siatka > div { padding: 26px 28px; border: 1px solid var( --wlos ); border-top: 2px solid color-mix( in srgb, var( --koral ) 55%, transparent ); border-radius: 3px 3px 20px 20px; background: var( --panel ); }
.ttb-ramy__siatka > div.jest-uczciwie { border-top-color: color-mix( in srgb, var( --turkus ) 55%, transparent ); }
.ttb-ramy__siatka i { display: block; margin-bottom: 10px; font-style: normal; font-size: 20px; }
.ttb-ramy__siatka b { display: block; margin-bottom: 8px; font: 500 21px var( --serif ); color: var( --zloto-cieply ); }
.ttb-ramy__siatka p { margin: 0; font-size: 14px; line-height: 1.7; }

@media ( max-width: 1360px ) {
	.ttb-klucz { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}
@media ( max-width: 900px ) {
	.ttb-klucz { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media ( max-width: 900px ) {
	.ttb-hero { grid-template-columns: minmax( 0, 1fr ); }
	.ttb-pion { display: none; }
	.ttb-ramy__siatka { grid-template-columns: minmax( 0, 1fr ); }
	.ttb-okno__karta { float: none; width: 100%; margin: 0 0 20px; }
}
@media ( max-width: 680px ) {
	.ttb-strona { padding: 0 16px 60px; }
	.ttb-klucz { grid-template-columns: minmax( 0, 1fr ); }
	.ttb-sekcja--scisla { padding: 24px 16px 20px; }
	.ttb-okno { padding: 30px 20px 30px; }
	.ttb-tor__strz { display: none; }
}
@media ( prefers-reduced-motion: reduce ) {
	.ttb-karta, .ttb-znak, .ttb-okno, .ttb-tlo, .ttb-karta__foto img { transition: none; }
	.ttb-siatka { scroll-behavior: auto; }
}

/* ── kafel rodzaju znaku z malowidłem ─────────────────────────────────────────
   Pas ilustracji siedzi u góry kafla i gaśnie w tło panelu, więc obraz i tekst
   są jedną płytą, a nie zdjęciem z podpisem. Glif przenosi się na obraz, w róg. */
.ttb-znak.ma-obraz { padding: 0 0 20px; overflow: hidden; }
.ttb-znak__obraz { position: relative; width: 100%; min-width: 0; margin: 0 0 14px; aspect-ratio: 800 / 438; overflow: hidden; }
.ttb-znak__obraz img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate( .95 ) brightness( .88 ); transition: transform .5s cubic-bezier( .2, .7, .3, 1 ), filter .4s; }
.ttb-znak__obraz::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient( 180deg, rgba( 6, 7, 22, .1 ) 0%, transparent 34%, rgba( 10, 12, 34, .5 ) 72%, var( --panel ) 100% );
}
.ttb-znak:hover .ttb-znak__obraz img { transform: scale( 1.05 ); filter: saturate( 1.05 ) brightness( 1 ); }
.ttb-znak.ma-obraz .ttb-znak__glif {
	position: absolute; left: 20px; top: 18px; z-index: 1; display: grid; place-items: center;
	width: 40px; height: 40px; border: 1px solid rgba( 63, 182, 168, .4 ); border-radius: 50%;
	background: rgba( 6, 7, 22, .66 ); backdrop-filter: blur( 6px ); font-size: 18px;
	text-shadow: 0 0 18px rgba( 63, 182, 168, .7 );
}
.ttb-znak.ma-obraz > :not( .ttb-znak__obraz ):not( .ttb-znak__glif ) { padding-left: 22px; padding-right: 22px; }
.ttb-znak.ma-obraz .ttb-znak__nazwa { margin-top: -4px; text-shadow: 0 0 34px rgba( 249, 213, 122, .3 ); }
.ttb-znak.ma-obraz.jest-wybrany .ttb-znak__obraz img { filter: saturate( 1.1 ) brightness( 1.06 ); }
@media ( prefers-reduced-motion: reduce ) { .ttb-znak__obraz img { transition: 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, 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.
   --------------------------------------------------------------------------- */

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

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

.ttb-sekcja[data-tlo] .zd-pas > li,
.ttb-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 );
}

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