/* Szlaki — wędrówka praktyki między kulturami.
 *
 * Rysunek jest zbudowany na konwencji średniowiecznej mapy żeglarskiej.
 * Portolan kodował rangę wiatru barwą atramentu i miał ich trzy; my mamy trzy
 * nośniki, więc bierzemy tę samą zasadę i te same atramenty: karmin, zieleń
 * miedziankową i kość. Brąz zostaje wyłącznie na to, co konstrukcyjne, czyli
 * oś, podziałkę i nagłówki, żeby barwa nigdy nie znaczyła dwóch rzeczy naraz.
 *
 * Tłem panelu z rysunkiem jest róża wiatrów: promienie z jednego punktu,
 * ledwie widoczne, wygaszone maską ku brzegom. To jedyna ozdoba na tej
 * stronie i jest tu dlatego, że mówi o czym strona jest.
 *
 * Podłoże to nie czerń, tylko przyciemniony welin: ciepły brąz zbity prawie
 * do czarnego. Czerń dawałaby ekran, a ma być karta.
 */
.tsz-strona {
	--tlo: #120e09; --welin: #1a140d; --obrys: rgba( 184, 150, 63, .3 ); --wlos: rgba( 184, 150, 63, .13 );
	--mosiadz: #b8963f; --mosiadz-j: #d8b96a; --etyk: #8d7a52;
	--karmin: #b0392c; --zielen: #3f7d6a; --kosc: #d9cdb4;
	--sadza: #7d7468; --dno: #0d0a06;
	--tekst: #a9a196; --tekst-slaby: #857e73; --tekst-mocny: #efe6d6;
	--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 600px at 50% -12%, rgba( 184, 150, 63, .16 ), transparent 70% ),
		radial-gradient( 900px 520px at 6% 44%, rgba( 63, 125, 106, .09 ), transparent 70% ),
		radial-gradient( 820px 480px at 96% 72%, rgba( 176, 57, 44, .08 ), transparent 70% ),
		var( --tlo );
	overflow-x: clip;
}
.tsz-strona *, .tsz-strona *::before, .tsz-strona *::after { box-sizing: border-box; }
body:has( .tsz-strona ) .wp-site-blocks > header, body:has( .tsz-strona ) header.wp-block-template-part, body:has( .tsz-strona ) .wp-site-blocks > footer, body:has( .tsz-strona ) footer.wp-block-template-part, body:has( .tsz-strona ) .wp-block-post-title { display: none !important; }
body:has( .tsz-strona ) .wp-site-blocks, body:has( .tsz-strona ) .wp-block-group, body:has( .tsz-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tsz-strona ) .wp-block-post-content > *, body:has( .tsz-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tsz-strona ) { background: #120e09; }
body:has( .tsz-strona ) .wp-block-post-content > .tsz-strona, body:has( .tsz-strona ) .entry-content > .tsz-strona, .tsz-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tsz-strona button { font-family: inherit; }

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

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

.tsz-sekcja { margin: 76px 0 0; }
.tsz-sekcja--scisla {
	position: relative; margin-top: 44px; padding: 34px 30px 40px;
	border: 1px solid var( --wlos ); border-radius: 26px; overflow: hidden;
	background: linear-gradient( 180deg, rgba( 26, 20, 13, .88 ), rgba( 13, 10, 6, .95 ) );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
}
/* Róża wiatrów. Promienie z jednego punktu, wygaszone maską ku brzegom —
   to jest jedyna ozdoba na tej stronie i mówi, o czym strona jest. */
.tsz-sekcja--scisla::before {
	content: ''; position: absolute; left: 8%; top: 50%; width: 1600px; height: 1600px;
	margin: -800px 0 0 -800px; pointer-events: none; z-index: 0;
	background: repeating-conic-gradient( from 0deg, rgba( 184, 150, 63, .5 ) 0 .12deg, transparent .12deg 11.25deg );
	mask-image: radial-gradient( closest-side, rgba( 0, 0, 0, .5 ), transparent 72% );
	-webkit-mask-image: radial-gradient( closest-side, rgba( 0, 0, 0, .5 ), transparent 72% );
	opacity: .34;
}
.tsz-sekcja--scisla > * { position: relative; z-index: 1; }
.tsz-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tsz-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --mosiadz-j ); }
.tsz-sekcja__lead { max-width: 78ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }

/* ══════════════  tor szlaków  ══════════════ */

/* Tor ma boczne marginesy szerokie na strzałkę. Kafle jeżdżą MIĘDZY nimi,
   więc pod strzałką nigdy nic nie ma. */
.tsz-tor { position: relative; contain: inline-size; margin: 24px 0 0; padding: 0 56px; }
.tsz-tor__pas { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 14px; scroll-snap-type: x proximity; }
.tsz-tor__pas::-webkit-scrollbar { display: none; }
.tsz-tor__pas.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; }
.tsz-tor__strz {
	position: absolute; top: 50%; transform: translateY( -50% ); z-index: 3;
	display: grid; place-items: center; width: 42px; height: 42px;
	border: 1px solid var( --obrys ); border-radius: 999px;
	background: linear-gradient( 180deg, rgba( 26, 20, 13, .96 ), rgba( 13, 10, 6, .96 ) );
	color: var( --mosiadz-j ); cursor: pointer;
	transition: opacity .2s, box-shadow .18s, border-color .18s;
}
.tsz-tor__strz[disabled] { opacity: .26; cursor: default; }
.tsz-tor__strz:not([disabled]):hover { border-color: var( --mosiadz ); box-shadow: 0 0 30px -10px var( --mosiadz ); }
.tsz-tor__strz--lewo { left: 0; }
.tsz-tor__strz--prawo { right: 0; }
.tsz-tor__strz::before { content: '‹'; font-size: 22px; line-height: 1; }
.tsz-tor__strz--prawo::before { content: '›'; }
.tsz-tor__licznik { margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }

.tsz-kafel {
	flex: 0 0 auto; scroll-snap-align: start;
	display: grid; gap: 2px; justify-items: start; align-content: center;
	min-width: 150px; padding: 12px 18px;
	border: 1px solid var( --wlos ); border-radius: 13px;
	background: linear-gradient( 180deg, rgba( 32, 25, 16, .74 ), rgba( 15, 11, 7, .74 ) );
	cursor: pointer; text-align: left;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tsz-kafel b { font: 400 15px var( --sans ); letter-spacing: .02em; color: var( --tekst-mocny ); white-space: nowrap; }
.tsz-kafel small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var( --etyk ); }
.tsz-kafel:hover { border-color: var( --obrys ); transform: translateY( -2px ); }
.tsz-kafel.jest-wybrany { border-color: var( --mosiadz ); background: linear-gradient( 180deg, rgba( 184, 150, 63, .18 ), rgba( 15, 11, 7, .84 ) ); box-shadow: 0 0 32px -14px var( --mosiadz ); }
.tsz-kafel.jest-wybrany b { color: var( --mosiadz-j ); }
.tsz-kafel:focus-visible { outline: 2px solid var( --mosiadz ); outline-offset: 3px; }

/* ══════════════  legenda  ══════════════ */

.tsz-legenda { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; }
.tsz-leg { display: inline-flex; align-items: center; gap: 8px; }
.tsz-leg b { font: 400 12px var( --sans ); letter-spacing: .1em; text-transform: uppercase; color: var( --tekst ); }
.tsz-leg__kreska { display: block; width: 26px; height: 0; border-top: 1.5px solid var( --k, var( --mosiadz ) ); }
.tsz-leg--przerywana .tsz-leg__kreska { border-top-style: dashed; border-top-color: var( --kosc ); }
.tsz-leg--osobno .tsz-leg__kropka { display: block; width: 9px; height: 9px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var( --sadza ); }

/* ══════════════  opis szlaku  ══════════════ */

.tsz-opis { display: grid; gap: 12px; max-width: 92ch; margin: 26px 0 0; }
.tsz-opis__krotko { margin: 0; font: 400 clamp( 18px, 1.8vw, 22px )/1.55 var( --serif ); color: var( --kosc ); }
.tsz-opis__tresc { display: grid; gap: 11px; }
.tsz-opis__tresc p { margin: 0; font-size: 14.5px; line-height: 1.76; }

/* ══════════════  rysunek: oś, po której da się jeździć  ══════════════

   Przystanek jest szerokim paskiem z nazwą w środku, rozciągniętym na widełki
   dat. Świeci barwą tego, CZYM praktyka do niego przyszła; obrys przerywany
   znaczy drogę prawdopodobną. Pasek bez linii nad sobą, w dolnym pasie,
   powstał niezależnie.

   Pasy epok w tle dają kolor i orientację. Ich granice są konwencjami
   podręcznikowymi i tak są podpisane. */

.tsz-pulpit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 26px 0 0; }
.tsz-guzik {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-width: 42px; height: 42px; padding: 0 14px;
	border: 1px solid var( --obrys ); border-radius: 999px;
	background: linear-gradient( 180deg, rgba( 184, 150, 63, .12 ), rgba( 13, 10, 6, .6 ) );
	color: var( --mosiadz-j ); cursor: pointer;
	font: 400 13px var( --sans ); letter-spacing: .04em;
	transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
}
.tsz-guzik span { font-size: 17px; line-height: 1; }
.tsz-guzik--szeroki span { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.tsz-guzik:hover { transform: translateY( -2px ); border-color: var( --mosiadz ); box-shadow: 0 0 30px -10px var( --mosiadz ); }
.tsz-guzik:focus-visible { outline: 2px solid var( --mosiadz ); outline-offset: 3px; }
.tsz-zakres { margin: 0 0 0 6px; font: 400 14px var( --serif ); font-style: italic; color: var( --kosc ); }
.tsz-podpowiedz { margin: 0 0 0 auto; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var( --etyk ); }

.tsz-mapa { margin: 20px 0 0; }
/* Trzy pasy jeden pod drugim i żaden nie wchodzi w drugi: nazwy epok 0–22,
   liczby lat 33–49, kreska osi 58, paski od 112. Wcześniej epoki i lata
   siedziały na tej samej wysokości i napisy się nadpisywały. */
.tsz-ram { position: relative; width: 100%; padding: 96px 0 0; touch-action: pan-y; }
/* Pole rysunku też ma marginesy pod strzałki osi. */
.tsz-mapa { position: relative; padding: 0 56px; cursor: grab; }
.tsz-mapa.jest-ciagnieta { cursor: grabbing; }

/* Pasy epok. Bardzo cicho, bo to tło, a nie treść. */
.tsz-epoki { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; }
.tsz-epoka {
	position: absolute; top: 0; bottom: 0;
	background: linear-gradient( 180deg, color-mix( in srgb, var( --k ) 13%, transparent ), transparent 62% );
	border-left: 1px solid color-mix( in srgb, var( --k ) 22%, transparent );
}
.tsz-epoka span {
	position: absolute; left: 12px; top: 3px; max-width: calc( 100% - 20px );
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font: 400 10.5px var( --sans ); letter-spacing: .22em; text-transform: uppercase;
	color: color-mix( in srgb, var( --k ) 62%, #fff ); opacity: .8;
}

/* Oś lat. */
.tsz-os { position: absolute; left: 0; right: 0; top: 58px; height: 1px; background: rgba( 184, 150, 63, .24 ); }
.tsz-zab { position: absolute; top: -5px; width: 1px; height: 11px; background: rgba( 184, 150, 63, .34 ); }
.tsz-zab i { position: absolute; left: 0; top: -22px; transform: translateX( -50% ); font-style: normal; white-space: nowrap; font: 400 12px var( --sans ); letter-spacing: .1em; color: #a08b5e; }
.tsz-zab.jest-zerem { background: rgba( 217, 205, 180, .6 ); height: 15px; top: -7px; }
.tsz-zab.jest-zerem i { color: var( --kosc ); }

.tsz-plansza { position: relative; margin-top: 16px; }
.tsz-rys { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.tsz-nic { opacity: .95; }
.tsz-nic--moze { stroke-dasharray: 6 6; opacity: .8; }

/* PASEK. To jest podpis tej strony: szeroki, świecący, z napisem w środku. */
.tsz-pasek {
	position: absolute; height: 46px; padding: 0 16px;
	display: grid; grid-template-columns: minmax( 0, 1fr ) auto; align-items: center;
	gap: 2px 12px; text-align: left; cursor: pointer;
	border: 1px solid color-mix( in srgb, var( --k, var( --mosiadz ) ) 44%, transparent );
	border-radius: 8px; overflow: hidden;
	background:
		linear-gradient( 100deg, color-mix( in srgb, var( --k, var( --mosiadz ) ) 34%, transparent ), color-mix( in srgb, var( --k, var( --mosiadz ) ) 12%, transparent ) 62%, transparent ),
		#100c07;
	box-shadow: inset 0 1px 0 color-mix( in srgb, var( --k, var( --mosiadz ) ) 40%, transparent ), 0 14px 30px -22px rgba( 0, 0, 0, .95 );
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tsz-pasek.jest-moze { border-style: dashed; }
.tsz-pasek__miejsce { grid-column: 1; font: 400 15px var( --sans ); letter-spacing: .01em; color: var( --tekst-mocny ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsz-pasek__co { grid-column: 1; grid-row: 2; font: italic 300 13px var( --serif ); color: color-mix( in srgb, var( --k, var( --mosiadz ) ) 30%, #fff ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsz-pasek__lata { grid-column: 2; grid-row: 1 / span 2; font: 400 10px var( --sans ); letter-spacing: .12em; text-transform: uppercase; color: color-mix( in srgb, var( --k, var( --mosiadz ) ) 40%, #fff ); opacity: .8; white-space: nowrap; }
.tsz-pasek:hover { transform: translateY( -2px ); border-color: color-mix( in srgb, var( --k, var( --mosiadz ) ) 80%, transparent ); box-shadow: inset 0 1px 0 color-mix( in srgb, var( --k, var( --mosiadz ) ) 60%, transparent ), 0 0 40px -12px var( --k, var( --mosiadz ) ), 0 16px 34px -22px rgba( 0, 0, 0, .95 ); }
.tsz-pasek.jest-wybrany {
	border-color: var( --k, var( --mosiadz ) );
	box-shadow: inset 0 1px 0 color-mix( in srgb, var( --k, var( --mosiadz ) ) 70%, transparent ), 0 0 52px -10px var( --k, var( --mosiadz ) ), 0 18px 38px -22px rgba( 0, 0, 0, .95 );
}
.tsz-pasek:focus-visible { outline: 2px solid var( --k, var( --mosiadz ) ); outline-offset: 3px; }
.tsz-pasek--osobno { --k: var( --sadza ); border-style: dotted; }

.tsz-osobno { margin-top: 34px; padding-top: 22px; border-top: 1px dashed rgba( 125, 116, 104, .3 ); }
.tsz-plansza--osobno { margin-top: 0; }

/* ══════════════  karta przystanku  ══════════════ */

.tsz-przystanek { margin: 26px 0 0; }
.tsz-karta {
	display: grid; gap: 13px; max-width: 92ch; padding: 24px 26px 26px;
	border-left: 2px solid var( --k, var( --mosiadz ) ); border-radius: 0 16px 16px 0;
	background: linear-gradient( 100deg, color-mix( in srgb, var( --k, var( --mosiadz ) ) 10%, transparent ), rgba( 13, 10, 6, .55 ) 58% );
}
.tsz-karta--osobno { --k: var( --sadza ); border-left-style: dotted; }
.tsz-karta__nag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.tsz-karta__gdzie { width: 100%; margin: 0; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var( --etyk ); }
.tsz-karta__nag h3 { margin: 0; font: 500 clamp( 24px, 2.4vw, 31px )/1.15 var( --serif ); color: var( --tekst-mocny ); }
.tsz-karta__kiedy { margin: 0; font: italic 300 15px var( --serif ); color: color-mix( in srgb, var( --k, var( --mosiadz ) ) 66%, #fff ); }
.tsz-karta__tresc { margin: 0; font-size: 15.5px; line-height: 1.76; color: var( --tekst-mocny ); }

.tsz-droga { display: grid; gap: 6px; padding: 14px 17px; border-radius: 12px; background: color-mix( in srgb, var( --k, var( --mosiadz ) ) 8%, transparent ); }
.tsz-droga b { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: color-mix( in srgb, var( --k, var( --mosiadz ) ) 72%, #fff ); }
.tsz-droga p { margin: 0; font-size: 14px; line-height: 1.7; color: var( --tekst ); }
.tsz-droga.jest-moze { border: 1px dashed color-mix( in srgb, var( --k, var( --mosiadz ) ) 36%, transparent ); background: transparent; }
.tsz-droga--poczatek, .tsz-droga--brak { border: 1px dashed rgba( 125, 116, 104, .34 ); background: transparent; }
.tsz-droga--poczatek b, .tsz-droga--brak b { color: var( --sadza ); }

.tsz-dokad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 2px 0 0; }
.tsz-dokad__etyk { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tsz-dokad a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 7px;
	border: 1px solid var( --wlos ); border-radius: 999px;
	background: rgba( 184, 150, 63, .06 );
	color: var( --mosiadz-j ); text-decoration: none; font-size: 13.5px;
	transition: border-color .2s, background .2s, transform .2s; }
.tsz-dokad a img { width: 20px; height: 20px; border-radius: 50%; opacity: .85; }
.tsz-dokad a i { font-style: normal; font-size: 14px; color: var( --mosiadz ); }
.tsz-dokad a:hover { border-color: var( --obrys ); background: rgba( 184, 150, 63, .12 ); transform: translateY( -1px ); }


/* ══════════════  trzy atramenty  ══════════════ */

.tsz-nosniki { display: grid; grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tsz-nosnik { display: grid; align-content: start; gap: 11px; padding: 26px 24px 28px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 26, 20, 13, .74 ), rgba( 13, 10, 6, .8 ) ); }
.tsz-nosnik__kreska { display: block; width: 56px; height: 0; border-top: 2px solid var( --k ); box-shadow: 0 0 18px -2px var( --k ); }
.tsz-nosnik h3 { margin: 0; font: 500 25px var( --serif ); color: var( --tekst-mocny ); }
.tsz-krotko { margin: 0; font-size: 15px; line-height: 1.65; color: var( --kosc ); }
.tsz-nosnik p, .tsz-mylace p { margin: 0; font-size: 14px; line-height: 1.74; }

/* ══════════════  podobne, a niespokrewnione  ══════════════ */

.tsz-mylace__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tsz-mylace { display: grid; align-content: start; gap: 11px; padding: 26px 24px 28px; border: 1px dashed rgba( 125, 116, 104, .3 ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 24, 19, 13, .7 ), rgba( 13, 10, 6, .78 ) ); }
.tsz-mylace h3 { margin: 0; font: 500 24px var( --serif ); color: var( --tekst-mocny ); }

/* ══════════════  ramy  ══════════════ */

.tsz-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tsz-ramy__siatka > div { display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 26, 20, 13, .7 ), rgba( 13, 10, 6, .78 ) ); }
.tsz-ramy__siatka i { font-style: normal; font-size: 22px; line-height: 1; color: var( --mosiadz ); }
.tsz-ramy__siatka b { font: 400 17px var( --serif ); letter-spacing: .02em; color: var( --tekst-mocny ); }
.tsz-ramy__siatka p { margin: 0; font-size: 14px; line-height: 1.72; }
.tsz-ramy__siatka .jest-uczciwie { border-color: var( --obrys ); background: linear-gradient( 180deg, rgba( 184, 150, 63, .09 ), rgba( 13, 10, 6, .8 ) ); }

@media ( max-width: 1020px ) {
	.tsz-strona { padding: 0 22px 70px; }
	.tsz-tor, .tsz-mapa { padding: 0 46px; }
	.tsz-podpis { width: 124px; }
	.tsz-podpis b { font-size: 12.5px; }
	.tsz-podpis i { font-size: 11.5px; }
}
@media ( max-width: 680px ) {
	.tsz-sekcja--scisla { padding: 26px 16px 30px; }
	.tsz-podpis { width: 96px; }
	.tsz-podpis b { font-size: 11.5px; }
	.tsz-podpis i { font-size: 10.5px; }
	.tsz-legenda { gap: 8px 16px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tsz-kafel:hover, .tsz-tor__strz:hover { transform: none; }
}

@media ( max-width: 900px ) {
	.tsz-pasek { height: 52px; }
	.tsz-pasek__lata { display: none; }
	.tsz-podpowiedz { margin-left: 0; }
}

/* Pasek dochodzący do krawędzi widoku: płaska ścianka i strzałka mówiąca,
   że rzecz trwa dalej poza ekranem. Bez tego wyglądał, jakby się tam kończył. */
.tsz-pasek.jest-ucieta-lewo { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 3px; padding-left: 24px; }
.tsz-pasek.jest-ucieta-prawo { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 3px; padding-right: 24px; }
.tsz-pasek.jest-ucieta-lewo::before, .tsz-pasek.jest-ucieta-prawo::after {
	position: absolute; top: 50%; transform: translateY( -50% );
	font: 400 15px var( --sans ); color: color-mix( in srgb, var( --k, var( --mosiadz ) ) 70%, #fff ); opacity: .8;
}
.tsz-pasek.jest-ucieta-lewo::before { content: '‹'; left: 8px; }
.tsz-pasek.jest-ucieta-prawo::after { content: '›'; right: 8px; }

/* Strzałki osi czasu. Siedzą na krawędziach rysunku, na wysokości pasków,
   i znikają, kiedy nie ma dokąd jechać. */
.tsz-osStrz {
	position: absolute; top: 126px; z-index: 5;
	display: grid; place-items: center; width: 44px; height: 64px;
	border: 1px solid var( --obrys ); border-radius: 12px;
	background: linear-gradient( 180deg, rgba( 26, 20, 13, .96 ), rgba( 13, 10, 6, .96 ) );
	color: var( --mosiadz-j ); cursor: pointer;
	box-shadow: 0 14px 34px -16px rgba( 0, 0, 0, .95 );
	transition: opacity .2s, box-shadow .18s, border-color .18s;
}
.tsz-osStrz[disabled] { opacity: .26; cursor: default; }
.tsz-osStrz::before { content: '‹'; font-size: 26px; line-height: 1; }
.tsz-osStrz--prawo::before { content: '›'; }
.tsz-osStrz--lewo { left: 0; }
.tsz-osStrz--prawo { right: 0; }
.tsz-osStrz:not([disabled]):hover { border-color: var( --mosiadz ); box-shadow: 0 0 34px -10px var( --mosiadz ), 0 16px 36px -16px rgba( 0, 0, 0, .95 ); }
.tsz-osStrz:focus-visible { outline: 2px solid var( --mosiadz ); outline-offset: 3px; }
@media ( max-width: 900px ) { .tsz-osStrz { width: 38px; height: 52px; } }


/* Klocek w torze par i w torze nośników. Ten sam wzorzec, co wszędzie:
   skrót w kaflu, komplet w oknie po kliknięciu. */
.tsz-tor--mylace .tsz-tor__pas { align-items: stretch; }
.tsz-mylace.zd-klocek, .tsz-nosnik.zd-klocek {
	flex: 0 0 auto; scroll-snap-align: start;
	display: flex; flex-direction: column; width: 320px; min-height: 208px;
	padding: 26px 24px 20px;
}
.tsz-mylace.zd-klocek .zd-klocek__skrot, .tsz-nosnik.zd-klocek .zd-klocek__skrot { display: flex; flex-direction: column; flex: 1 1 auto; }
.tsz-mylace.zd-klocek h3 { margin: 0 0 10px; font: 500 22px/1.2 var( --serif ); }
.tsz-nosnik.zd-klocek h3 { margin: 12px 0 10px; font: 500 23px var( --serif ); }
.tsz-mylace.zd-klocek .tsz-krotko, .tsz-nosnik.zd-klocek .tsz-krotko { margin: 0; font-size: 14px; line-height: 1.62; }
.tsz-mylace.zd-klocek:hover, .tsz-nosnik.zd-klocek:hover { transform: translateY( -3px ); box-shadow: 0 0 44px -14px var( --k, var( --mosiadz ) ), 0 20px 44px -30px rgba( 0, 0, 0, .95 ); }
.tsz-nosniki { grid-template-columns: none; display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.tsz-nosniki::-webkit-scrollbar { display: none; }

/* Pasek zwężony przewijaniem do słupka: sam kolor, bez napisu. Nazwa i daty
   siedzą w podpowiedzi, a po kliknięciu wchodzą do karty pod rysunkiem. */
.tsz-pasek.jest-waski { padding: 0; grid-template-columns: 1fr; }
.tsz-pasek.jest-waski::after { content: ''; }


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

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

.tsz-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. */
.tsz-sekcja[data-tlo] .zd-pas > li,
.tsz-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 ) {
	.tsz-sekcja[data-tlo], .tsz-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]. */
.tsz-sekcja[data-tlo] {
	--tekst-slaby: #979188;	/* #857e73 dawało 3.89:1, teraz 5:1 */
	--etyk: #a0916f;	/* #8d7a52 dawało 3.75:1, teraz 5.04: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. */
.tsz-strona .tsz-hero .tsz-okno.zd-okno,
.tsz-strona .tsz-hero .zd-okno.zd-okno,
.tsz-strona .tsz-hero .tsz-okno.tsz-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 184, 150, 63, .10 ), transparent 70% ),
		linear-gradient( 168deg, #1d1914, #120e09 );
}