/* Malta — świątynie starsze od piramid.
 *
 * Paleta świadomie NIE jest turystycznym błękitem z bielą. Te budowle są dziś
 * w kolorze kamienia, a nie pocztówki. Barwy wzięte z trzech rzeczy, które na
 * tych stanowiskach naprawdę widać: wapienia globigerynowego, z którego je
 * zbudowano, morza widocznego z każdego z nich i czerwonej ochry ze ścian
 * Hypogeum.
 *
 * Cała śmiałość siedzi w RZUCIE, który zmienia własną geometrię: przy
 * świątyniach rysuje płatki wokół osi, a przy Hypogeum i kręgu w Xagħrze
 * przechodzi w przekrój głębokości, bo tam rzutu nie ma. Gdyby wszędzie
 * pokazywał to samo, kłamałby o tym, o czym strona pisze słowami.
 */
.tml-strona {
	--skala: #14120f; --dno: #0d0b09;
	--wlos: rgba( 217, 196, 154, .14 ); --obrys: rgba( 217, 169, 79, .32 );
	--wapien: #d9c49a; --wapien-c: #a89170; --wapien-t: rgba( 217, 196, 154, .1 );
	--zloto: #d9a94f; --zloto-j: #eec87a;
	--morze: #2f7382; --morze-j: #4f9dae;
	--ochra: #a8503c; --ochra-j: #c76e56;
	--tekst: #a29885; --tekst-slaby: #7d7566; --tekst-mocny: #f2e9d6; --etyk: #857c6c;
	--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( 1150px 600px at 50% -12%, rgba( 217, 169, 79, .15 ), transparent 70% ),
		radial-gradient( 900px 540px at 88% 34%, rgba( 47, 115, 130, .12 ), transparent 72% ),
		radial-gradient( 800px 500px at 10% 72%, rgba( 168, 80, 60, .09 ), transparent 72% ),
		linear-gradient( 180deg, rgba( 27, 24, 19, .86 ), rgba( 20, 18, 15, .9 ) 46%, rgba( 13, 11, 9, .94 ) );
	overflow-x: clip;
}
.tml-strona *, .tml-strona *::before, .tml-strona *::after { box-sizing: border-box; }
body:has( .tml-strona ) .wp-site-blocks > header, body:has( .tml-strona ) header.wp-block-template-part, body:has( .tml-strona ) .wp-site-blocks > footer, body:has( .tml-strona ) footer.wp-block-template-part, body:has( .tml-strona ) .wp-block-post-title { display: none !important; }
body:has( .tml-strona ) .wp-site-blocks, body:has( .tml-strona ) .wp-block-group, body:has( .tml-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tml-strona ) .wp-block-post-content > *, body:has( .tml-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tml-strona ) {
	background:
		linear-gradient( rgba( 10, 13, 14, .58 ), rgba( 13, 11, 9, .84 ) ),
		url( '/wp-content/uploads/tarot-kompat/zachod/malta/gfx/tla/tlo-hero.webp' ) center top / cover fixed no-repeat,
		#14120f;
}
body:has( .tml-strona ) .wp-site-blocks,
body:has( .tml-strona ) main,
body:has( .tml-strona ) .wp-block-post-content { background: transparent !important; }
body:has( .tml-strona ) .wp-block-post-content > .tml-strona, body:has( .tml-strona ) .entry-content > .tml-strona, .tml-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tml-strona button { font-family: inherit; }

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

.tml-hero { max-width: 84ch; padding: 44px 0 8px; }
.tml-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tml-tytul { margin: 0; font: 500 clamp( 46px, 5.6vw, 84px )/1.02 var( --serif ); color: var( --zloto-j ); letter-spacing: -.01em; }
.tml-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; line-height: 1.5; color: var( --wapien ); }
.tml-lead { margin: 24px 0 0; font-size: 16.5px; line-height: 1.78; color: var( --tekst-mocny ); }

/* Oś trzech dat: teza strony sprowadzona do trzech liczb obok siebie. */
.tml-hero__os { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }
.tml-hero__os span { display: grid; gap: 2px; padding: 16px 22px; border: 1px solid var( --wlos ); border-left: 3px solid var( --wapien-c ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, rgba( 217, 196, 154, .07 ), transparent ); }
.tml-hero__os span:first-child { border-left-color: var( --zloto ); background: linear-gradient( 100deg, rgba( 217, 169, 79, .16 ), transparent ); }
.tml-hero__os b { font: 500 32px var( --serif ); color: var( --zloto-j ); }
.tml-hero__os span:not( :first-child ) b { color: var( --tekst-slaby ); }
.tml-hero__os i { font-style: normal; font-size: 11px; letter-spacing: .14em; color: var( --etyk ); }

.tml-sekcja { margin: 84px 0 0; }
.tml-sekcja--scisla { position: relative; padding: 36px 32px 40px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 960px 460px at 50% 0%, rgba( 217, 169, 79, .1 ), transparent 66% ), linear-gradient( 180deg, rgba( 32, 28, 22, .88 ), rgba( 13, 11, 9, .96 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 ); }
.tml-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tml-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3.1vw, 42px )/1.14 var( --serif ); color: var( --zloto-j ); }
.tml-sekcja__lead { max-width: 80ch; margin: 14px 0 0; font-size: 15px; line-height: 1.76; color: var( --tekst ); }
.tml-sekcja--koniec .tml-sekcja__tytul { color: var( --morze-j ); }

/* ══════════════  RZUT — podpis strony  ══════════════ */
.tml-rzut__wybor { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 22px; }
.tml-rzut__wybor button { padding: 9px 16px; border: 1px solid var( --wlos ); border-radius: 999px; background: transparent; font-size: 13px; color: var( --tekst-slaby ); cursor: pointer; transition: color .22s, background .22s, border-color .22s; }
.tml-rzut__wybor button:hover { color: var( --tekst-mocny ); border-color: var( --obrys ); }
.tml-rzut__wybor button[ aria-selected="true" ] { color: var( --skala ); border-color: var( --zloto ); background: linear-gradient( 180deg, var( --zloto-j ), var( --zloto ) ); box-shadow: 0 0 24px -6px rgba( 217, 169, 79, .6 ); }

.tml-rzut__uklad { display: grid; grid-template-columns: minmax( 0, 360px ) minmax( 0, 1fr ); gap: 28px 40px; align-items: center; }
.tml-plansza { padding: 10px; border: 1px solid var( --wlos ); border-radius: 22px; background: rgba( 9, 12, 12, .72 ); overflow: hidden; }
.tml-rzut__foto { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 15px; }
.tml-rys { display: block; width: 100%; height: auto; filter: drop-shadow( 0 22px 44px rgba( 0, 0, 0, .8 ) ); }
/* Komory wchodzą po kolei — widać wtedy, że rysunek został zbudowany, a nie
   podmieniony jako gotowy obrazek. */
.tml-apsyda, .tml-poziom { animation: tml-wchodzi .4s both; animation-delay: calc( var( --nr, 0 ) * 90ms ); }
@keyframes tml-wchodzi { from { opacity: 0; transform: scale( .82 ); } to { opacity: 1; transform: none; } }
.tml-apsyda, .tml-poziom { transform-box: fill-box; transform-origin: center; }
.tml-plansza__podpis { margin: 12px 0 0; font-size: 11.5px; letter-spacing: .1em; text-align: center; color: var( --tekst-slaby ); }

.tml-karta__kiedy { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --zloto-j ); }
.tml-karta h3 { margin: 0 0 6px; font: 500 clamp( 26px, 2.8vw, 36px )/1.15 var( --serif ); color: var( --tekst-mocny ); }
.tml-karta__gdzie { margin: 0 0 14px; font-size: 12px; letter-spacing: .12em; color: var( --morze-j ); }
.tml-karta__opis { margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.76; color: var( --tekst ); }

/* ══════════════  kafle  ══════════════ */
.tml-bostwa, .tml-praktyki, .tml-granice, .tml-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 262px, 1fr ) ); gap: 16px; margin-top: 28px; }
.tml-kafel, .tml-granice > div, .tml-ramy__siatka > div { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 20px; overflow: hidden; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 217, 196, 154, .05 ), rgba( 217, 196, 154, .012 ) ); transition: border-color .3s, transform .3s, box-shadow .3s, background .3s; }
.tml-kafel::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient( 180deg, transparent, var( --wapien ), transparent ); opacity: .5; }
.tml-kafel:hover, .tml-granice > div:hover, .tml-ramy__siatka > div:hover { border-color: var( --obrys ); transform: translateY( -3px ); background: linear-gradient( 180deg, rgba( 217, 169, 79, .09 ), rgba( 217, 196, 154, .02 ) ); box-shadow: 0 30px 66px -40px rgba( 0, 0, 0, .92 ), 0 0 34px -18px rgba( 217, 169, 79, .4 ); }
.tml-kafel h3 { margin: 0 0 6px; font: 500 23px var( --serif ); color: var( --tekst-mocny ); }
.tml-kafel p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
.tml-kafel__gdzie { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; font-size: 10.5px !important; letter-spacing: .18em; text-transform: uppercase; color: var( --morze-j ) !important; }
.tml-kafel__gdzie i { font-style: normal; }
.tml-kafel__kiedy { display: block; margin: 0 0 6px !important; font-size: 11.5px !important; letter-spacing: .08em; color: var( --zloto-j ) !important; }
.tml-kafel--fig h3 { font-size: 20px; color: var( --zloto-j ); }
.tml-kafel__foto { position: relative; margin: -22px -22px 18px; overflow: hidden; aspect-ratio: 1 / 1; background: #13100c; }
.tml-kafel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
.tml-kafel:hover .tml-kafel__foto img { transform: scale( 1.035 ); filter: saturate( 1.06 ) contrast( 1.03 ); }
.tml-kafel__foto::after { content: ''; position: absolute; inset: 48% 0 0; pointer-events: none; background: linear-gradient( transparent, rgba( 12, 10, 8, .92 ) ); }
.tml-kafel__foto figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 13px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba( 242, 233, 214, .78 ); }

.tml-pole { margin-top: 16px !important; padding: 15px 18px; border-left: 2px solid rgba( 217, 196, 154, .34 ); border-radius: 0 12px 12px 0; background: rgba( 217, 196, 154, .045 ); font-size: 13px !important; }
.tml-pole b { display: block; margin-bottom: 6px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --wapien ); }
.tml-pole--waga { border-left-color: var( --ochra ); background: rgba( 168, 80, 60, .1 ); }
.tml-pole--waga b { color: var( --ochra-j ); }

.tml-granice b, .tml-ramy__siatka b { display: block; margin-bottom: 8px; font: 500 18px var( --serif ); color: var( --tekst-mocny ); }
.tml-granice p, .tml-ramy__siatka p { margin: 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
.tml-ramy__siatka i { display: block; margin-bottom: 10px; font-style: normal; font-size: 16px; color: var( --zloto-j ); }
/* „Czego NIE widać" to nie kolejna hipoteza, tylko jej brak — dostaje morze,
   nie wapień, żeby odcinało się od czterech wyjaśnień obok. */
.tml-granice .jest-puste { border-color: rgba( 47, 115, 130, .34 ); background: linear-gradient( 180deg, rgba( 47, 115, 130, .12 ), rgba( 47, 115, 130, .02 ) ); }
.tml-granice .jest-puste b { color: var( --morze-j ); }

.tml-kafel .zd-klocek__skrot { display: contents; }

@media ( max-width: 900px ) {
	.tml-rzut__uklad { grid-template-columns: minmax( 0, 1fr ); }
	.tml-plansza { max-width: 340px; margin: 0 auto; }
}
@media ( max-width: 780px ) {
	.tml-strona { padding: 0 18px 70px; }
	.tml-sekcja { margin-top: 58px; }
	.tml-sekcja--scisla { padding: 26px 20px 30px; }
	.tml-poziom { margin: 6px 0 0; }
	.tml-hero__os span { flex: 1 0 100%; }
}
@media ( max-width: 780px ) {
	body:has( .tml-strona ) { background-attachment: scroll; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tml-strona *, .tml-strona *::before { transition: none !important; animation: none !important; }
}

/* ══════════════  OKNO PO KLIKNIĘCIU — oprawa ozdobna  ══════════════
   Dopisane 2026-09-11 po przelocie testu: okno miało tekst 14.5 px
   w kroju bezszeryfowym, wbrew dyrektywie o ozdobnym oknie.
   Okno wisi na `body`, POZA `.tml-strona`, więc zmienne działu tu nie
   sięgają — barwy stoją wartościami. */
body:has( .tml-strona ) .zd-tlo {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Jost, system-ui, sans-serif;
}
body:has( .tml-strona ) .zd-okno {
  background:
    radial-gradient( 120% 70% at 50% -6%, rgba( 217, 169, 79, .2 ), transparent 62% ),
    radial-gradient( 90% 60% at 92% 108%, rgba( 47, 115, 130, .13 ), transparent 68% ),
    linear-gradient( 178deg, #1e1b16 0%, #15120e 46%, #0b0907 100% );
  border: 1px solid rgba( 217, 196, 154, .3 );
  box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .1 ), 0 0 0 1px rgba( 0, 0, 0, .6 ),
    0 40px 120px -40px rgba( 0, 0, 0, .95 ), 0 0 90px -30px rgba( 217, 169, 79, .42 );
}
body:has( .tml-strona ) .zd-okno__tekst,
body:has( .tml-strona ) .zd-okno__pelne p,
body:has( .tml-strona ) .zd-okno__gora p,
body:has( .tml-strona ) .zd-okno p {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.72; color: #ece2cc;
}
body:has( .tml-strona ) .zd-okno__tytul,
body:has( .tml-strona ) .zd-okno h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp( 34px, 3.4vw, 46px ); font-weight: 500; letter-spacing: .015em; color: #f2d79a;
  text-shadow: 0 0 42px rgba( 217, 169, 79, .45 ), 0 2px 18px rgba( 0, 0, 0, .8 );
}
body:has( .tml-strona ) .zd-okno__gora::after {
  content: ''; display: block; height: 2px; margin: 18px 0 4px;
  background: linear-gradient( 90deg, rgba( 217, 169, 79, .85 ), rgba( 47, 115, 130, .5 ) 38%, transparent 88% );
  box-shadow: 0 0 18px rgba( 217, 169, 79, .45 );
}
body:has( .tml-strona ) .zd-okno::before,
body:has( .tml-strona ) .zd-okno::after {
  content: ''; position: absolute; width: 62px; height: 62px; pointer-events: none;
  border-color: rgba( 217, 196, 154, .68 ); border-style: solid; border-width: 0;
  filter: drop-shadow( 0 0 10px rgba( 217, 196, 154, .45 ) );
}
body:has( .tml-strona ) .zd-okno::before { left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px; border-radius: 16px 0 0 0; }
body:has( .tml-strona ) .zd-okno::after { right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px; border-radius: 0 0 16px 0; }
body:has( .tml-strona ) .zd-okno__pelne > * > p:first-of-type::first-letter,
body:has( .tml-strona ) .zd-okno__tekst:first-of-type::first-letter {
  float: left; margin: 6px 12px 0 0; font-size: 3.1em; line-height: .82; font-weight: 500;
  color: #d9a94f; text-shadow: 0 0 26px rgba( 217, 169, 79, .5 );
}
body:has( .tml-strona ) .zd-okno [class$="__gdzie"],
body:has( .tml-strona ) .zd-okno [class$="__kiedy"],
body:has( .tml-strona ) .zd-okno [class$="__skad"] b,
body:has( .tml-strona ) .zd-okno .zd-wiecej,
body:has( .tml-strona ) .zd-okno__x { font-family: Jost, system-ui, sans-serif; }
@media ( prefers-reduced-motion: no-preference ) {
  body:has( .tml-strona ) .zd-tlo .zd-okno { animation: tml-okno-wschodzi .42s cubic-bezier( .2, .7, .3, 1 ) both; }
  @keyframes tml-okno-wschodzi {
    from { opacity: 0; transform: translateY( 16px ) scale( .985 ); filter: blur( 3px ); }
    to   { opacity: 1; transform: none; filter: none; }
  }
}

/* Przerywnik — pas zdobniczy między sekcjami (rysowany w PHP). */
.tml-przerywnik { display: block; width: 100%; height: 46px; margin: 58px 0 -20px; color: var( --zloto ); opacity: .38; filter: drop-shadow( 0 0 10px currentColor ); }


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

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

.tml-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, .76 ), transparent 74% ),
		linear-gradient( 180deg, rgba( 15, 13, 18, .66 ) 0%, rgba( 15, 13, 18, .58 ) 48%, rgba( 15, 13, 18, .78 ) 100% ),
		var( --obraz-tla ) 62% 52% / cover no-repeat;
}

@media ( max-width: 680px ) {
	.tml-hero[data-tlo], .tml-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.
   --------------------------------------------------------------------------- */

.tml-sekcja[data-tlo] .zd-pas > li,
.tml-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]. */
.tml-sekcja[data-tlo] {
	--tekst-slaby: #989286;	/* #7d7566 dawało 3.43:1, teraz 5.05:1 */
	--etyk: #999184;	/* #857c6c dawało 3.79:1, teraz 5.02:1 */
}

/* ---------------------------------------------------------------------------
   PRZYWROCENIE ODCIENIA KAFLA „CZEGO NIE WIDAC”.

   Kafle w sekcjach `koniec` i `ramy` stały się klikanymi klockami, więc złapała
   je reguła czytelności `.tml-sekcja[data-tlo] .zd-klocek`, która nadaje
   wszystkim jedno ciemne tło o kryciu 0,90. Zmierzone na żywej stronie: kafel
   „Czego NIE widać” stracił przez to swój morski odcień i obrys, czyli JEDYNE
   rozróżnienie, jakie miał wobec czterech hipotez obok.

   Ta reguła NICZEGO NIE ZMIENIA — przywraca stan sprzed udostępnienia klikania.
   Krycie zostaje 0,90, bo pod spodem jest zdjęcie i bez tego tekst byłby
   nieczytelny; zmienia się wyłącznie ODCIEŃ tła na morski i wraca obrys
   w brzmieniu dokładnie takim, jakie miała poprzednia reguła.
   --------------------------------------------------------------------------- */
.tml-sekcja[data-tlo] .tml-granice .jest-puste {
	border-color: rgba( 47, 115, 130, .34 );
	background-color: rgba( 14, 26, 30, .90 );
}

/* ---------------------------------------------------------------------------
   WYROWNANIE TORU DO KRAWEDZI TEKSTU.

   Wspólny `.zd-tor` ma `padding: 0 56px` — lukę na strzałki, które wiszą
   w niej jako `position: absolute`. Zmierzone na żywej stronie: tytuł i lead
   sekcji zaczynały się na 270 px, a pierwszy kafel dopiero na 326 — równo
   56 px rozjazdu w KAŻDEJ sekcji z torem.

   ZERUJEMY LUKE NA OBUDOWIE, nie ciągniemy toru marginesem. Powód jest
   mechaniczny: wspólny arkusz ma `.zd-pas { margin: 0 !important }`, więc
   ujemny margines na torze przegrywał mimo wyższej szczegółowości —
   sprawdzone, wyliczony margines wychodził zero. Reguła `.zd-tor` wymuszenia
   NIE MA, więc wystarczy być od niej bardziej szczegółowym i nie trzeba
   licytować się wykrzyknikiem.

   Strzałki wiszą na `.zd-tor`, więc przesuwają się razem z nią na krawędzie
   i kładą się na skrajnych kaflach, zamiast stać obok nich w pustej luce.

   TYLKO OD 1180 px. Niżej luka jest potrzebna, bo sekcja ma mniejszy własny
   margines i kafle wyszłyby poza ekran. Reguła jest maltanska — wspólnego
   `zdobienia.css` nie ruszamy.
   --------------------------------------------------------------------------- */
@media ( min-width: 1180px ) {
	.tml-strona .zd-tor {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---------------------------------------------------------------------------
   SEKCJE BEZ TLA MAJA STAC W TEJ SAMEJ LINII CO SEKCJE Z TLEM.

   Zmierzone: `.tml-sekcja[data-tlo]` ma `padding: 40px 36px 44px`, a sekcje
   dopisane przy rozbudowie tła jeszcze nie mają i przez to nie mają żadnego
   marginesu wewnętrznego — ich tytuł zaczynał się na 40 px, a tytuł sekcji
   z tłem na 77. Równo 36 px schodkow w dół strony.

   Dajemy im DOKŁADNIE te same wartości, jakie ma wariant z tłem, także na
   progu telefonowym. Gdy tła zostaną dograne, przejmie je reguła `[data-tlo]`
   z identycznymi liczbami i nic się wizualnie nie zmieni.

   `--scisla` wyłączamy, bo ten wariant ma własny, celowo ciasniejszy margines.
   --------------------------------------------------------------------------- */
.tml-strona .tml-sekcja:not( [data-tlo] ):not( .tml-sekcja--scisla ) {
	padding: 40px 36px 44px;
}
@media ( max-width: 680px ) {
	.tml-strona .tml-sekcja:not( [data-tlo] ):not( .tml-sekcja--scisla ) {
		padding: 28px 20px 32px;
	}
}