/* Azja Południowo-Wschodnia — stos warstw, nie ciąg strzałek.
 *
 * Paleta jest CYTATEM z opisywanej tradycji, nie nastrojem dobranym pod temat.
 * To cztery barwy pałaców wietnamskiego kultu Matek: czerwień nieba, zieleń
 * gór i lasów, biel wód, żółć ziemi. Leżą na tle czarnej laki, bo lakowana
 * czerń jest w tym regionie materiałem ołtarza, skrzyni i tarczy.
 *
 * Świadomie NIE złoto z tekiem i pomarańczową szatą mnicha. To zestaw
 * z folderu biura podróży, a cała strona jest o tym, że region nie jest tym,
 * co widać z autokaru.
 *
 * Cała śmiałość siedzi w STOSIE, który da się rozebrać. Warstwy leżą jedna na
 * drugiej z lekkim zachodzeniem, jak deski ołtarza. Wyłączenie warstwy nie
 * usuwa jej z rysunku — przewraca ją na bok i wygasza, a to, co bez niej
 * znika z dzisiejszego życia, dopisuje się obok. Lista rośnie i to jest cały
 * dowód tezy.
 */
.tap-strona {
	--laka: #14100e; --dno: #0d0a09;
	--wlos: rgba( 232, 226, 212, .12 ); --obrys: rgba( 201, 150, 47, .3 );
	--niebo: #b5372e; --niebo-j: #d1584a;
	--gory: #4e7d4a; --gory-j: #6fa268;
	--wody: #e8e2d4; --wody-c: #b9b2a2;
	--ziemia: #c9962f; --ziemia-j: #e0b356;
	--tekst: #a49b8d; --tekst-slaby: #7f776c; --tekst-mocny: #f0ebe0; --etyk: #877f73;
	--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( 201, 150, 47, .15 ), transparent 70% ),
		radial-gradient( 860px 520px at 10% 44%, rgba( 181, 55, 46, .09 ), transparent 72% ),
		radial-gradient( 800px 500px at 90% 70%, rgba( 78, 125, 74, .09 ), transparent 72% ),
		linear-gradient( 180deg, #191311, var( --laka ) 45%, var( --dno ) );
	overflow-x: clip;
}
.tap-strona *, .tap-strona *::before, .tap-strona *::after { box-sizing: border-box; }
body:has( .tap-strona ) .wp-site-blocks > header, body:has( .tap-strona ) header.wp-block-template-part, body:has( .tap-strona ) .wp-site-blocks > footer, body:has( .tap-strona ) footer.wp-block-template-part, body:has( .tap-strona ) .wp-block-post-title { display: none !important; }
body:has( .tap-strona ) .wp-site-blocks, body:has( .tap-strona ) .wp-block-group, body:has( .tap-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tap-strona ) .wp-block-post-content > *, body:has( .tap-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tap-strona ) { background: #14100e; }
body:has( .tap-strona ) .wp-block-post-content > .tap-strona, body:has( .tap-strona ) .entry-content > .tap-strona, .tap-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tap-strona button { font-family: inherit; }

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

.tap-hero { max-width: 84ch; padding: 44px 0 8px; }
.tap-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tap-tytul { margin: 0; font: 500 clamp( 40px, 5vw, 74px )/1.03 var( --serif ); color: var( --ziemia-j ); letter-spacing: -.01em; }
.tap-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .13em; line-height: 1.5; color: var( --wody-c ); }
.tap-lead { margin: 24px 0 0; font-size: 16.5px; line-height: 1.78; color: var( --tekst-mocny ); }
.tap-hero__waga { display: grid; grid-template-columns: auto minmax( 0, 1fr ); gap: 6px 26px; align-items: center; margin: 30px 0 0; padding: 22px 26px; border: 1px solid var( --obrys ); border-left: 3px solid var( --niebo ); border-radius: 0 20px 20px 0; background: linear-gradient( 100deg, rgba( 181, 55, 46, .13 ), rgba( 201, 150, 47, .05 ) 46%, transparent ); }
.tap-hero__waga > b { font: 500 clamp( 46px, 5vw, 68px )/1 var( --serif ); color: var( --ziemia-j ); text-shadow: 0 0 34px rgba( 201, 150, 47, .45 ); }
.tap-hero__waga span { font-size: 14.5px; line-height: 1.72; color: var( --tekst ); }
.tap-podkres { font-weight: 400; color: var( --wody ); }

.tap-sekcja { margin: 84px 0 0; }
.tap-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( 201, 150, 47, .1 ), transparent 66% ), linear-gradient( 180deg, rgba( 32, 25, 22, .88 ), rgba( 14, 11, 9, .96 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 ); }
.tap-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tap-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3.1vw, 42px )/1.14 var( --serif ); color: var( --ziemia-j ); }
.tap-sekcja__lead { max-width: 80ch; margin: 14px 0 0; font-size: 15px; line-height: 1.76; color: var( --tekst ); }
.tap-uwaga { max-width: 82ch; margin: 20px 0 0; padding: 15px 18px; border-left: 2px solid var( --niebo ); border-radius: 0 12px 12px 0; background: rgba( 181, 55, 46, .09 ); font-size: 14px; line-height: 1.72; color: var( --tekst ); }

/* ══════════════  STOS — podpis strony  ══════════════ */
.tap-stos__wybor { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 22px; }
.tap-stos__wybor button { padding: 9px 16px; border: 1px solid var( --wlos ); border-radius: 999px; background: transparent; font-size: 13px; letter-spacing: .04em; color: var( --tekst-slaby ); cursor: pointer; transition: color .22s, background .22s, border-color .22s; }
.tap-stos__wybor button:hover { color: var( --tekst-mocny ); border-color: var( --obrys ); }
.tap-stos__wybor button[ aria-selected="true" ] { color: var( --laka ); border-color: var( --ziemia ); background: linear-gradient( 180deg, var( --ziemia-j ), var( --ziemia ) ); box-shadow: 0 0 24px -6px rgba( 201, 150, 47, .6 ); }

.tap-stos__uklad { display: grid; grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr ); gap: 26px 34px; align-items: start; }

/* Deski ołtarza: każda warstwa to pas w jednej z czterech barw pałaców,
   z lekkim zachodzeniem na sąsiadkę. Barwa idzie cyklem, nie po znaczeniu —
   bo przypisanie warstwie religii koloru pałacu byłoby wymysłem. */
.tap-stos { display: grid; gap: 8px; }
.tap-warstwa { position: relative; display: grid; grid-template-columns: auto minmax( 0, 1fr ) auto; gap: 16px; align-items: center; width: 100%; padding: 18px 20px; border: 1px solid var( --wlos ); border-left: 4px solid var( --pas, var( --ziemia ) ); border-radius: 14px; background: linear-gradient( 100deg, color-mix( in srgb, var( --pas, var( --ziemia ) ) 16%, transparent ), rgba( 232, 226, 212, .02 ) ); text-align: left; cursor: pointer; transition: opacity .38s, filter .38s, transform .38s, border-color .28s, background .28s; }
.tap-warstwa:hover { border-color: var( --obrys ); transform: translateX( 3px ); }
.tap-warstwa__kiedy { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var( --etyk ); white-space: nowrap; }
.tap-warstwa__nazwa { font: 500 20px var( --serif ); color: var( --tekst-mocny ); }
.tap-warstwa__przel { flex: none; width: 40px; height: 22px; border-radius: 999px; background: color-mix( in srgb, var( --pas, var( --ziemia ) ) 60%, transparent ); box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .12 ); transition: background .3s; }
.tap-warstwa__przel::after { content: ''; display: block; width: 16px; height: 16px; margin: 3px 0 0 21px; border-radius: 999px; background: var( --wody ); transition: margin .3s, background .3s; }
/* Wyłączona nie znika — kładzie się i gaśnie. Usunięcie sugerowałoby, że
   warstwy dawały się kiedykolwiek usunąć bez śladu. */
.tap-warstwa.jest-wylaczona { opacity: .32; filter: grayscale( .85 ); transform: translateX( 0 ) scaleY( .9 ); }
.tap-warstwa.jest-wylaczona .tap-warstwa__przel { background: rgba( 232, 226, 212, .12 ); }
.tap-warstwa.jest-wylaczona .tap-warstwa__przel::after { margin-left: 3px; background: var( --wody-c ); }

.tap-brak { position: sticky; top: 84px; padding: 22px 24px 24px; border: 1px solid var( --wlos ); border-radius: 20px; background: linear-gradient( 180deg, rgba( 181, 55, 46, .1 ), rgba( 232, 226, 212, .015 ) ); }
.tap-brak h3 { margin: 0 0 12px; font: 500 22px var( --serif ); color: var( --niebo-j ); }
.tap-brak__zacheta { margin: 0; font-size: 13px; line-height: 1.68; color: var( --tekst-slaby ); }
.tap-brak__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tap-brak__lista li { padding: 12px 14px; border-left: 2px solid var( --niebo ); border-radius: 0 10px 10px 0; background: rgba( 181, 55, 46, .08 ); font-size: 13px; line-height: 1.62; color: var( --tekst ); animation: tap-wpada .3s both; }
.tap-brak__lista li b { display: block; margin-bottom: 4px; font: 400 10px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --niebo-j ); }
@keyframes tap-wpada { from { opacity: 0; transform: translateY( -6px ); } to { opacity: 1; transform: none; } }

/* ══════════════  kafle  ══════════════ */
.tap-zrodla, .tap-praktyki, .tap-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 268px, 1fr ) ); gap: 16px; margin-top: 28px; }
.tap-kafel { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 20px; overflow: hidden; border: 1px solid var( --wlos ); border-radius: 20px; background: linear-gradient( 180deg, rgba( 232, 226, 212, .05 ), rgba( 232, 226, 212, .012 ) ); transition: border-color .3s, transform .3s, box-shadow .3s, background .3s; }
.tap-kafel::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; opacity: .65;
	background: linear-gradient( 180deg, transparent, var( --ziemia ), transparent ); }
/* Cykl czterech barw po kolejności warstwy — ten sam porządek co w stosie. */
.tap-kafel[ style*="--nr: 0" ]::before { background: linear-gradient( 180deg, transparent, var( --niebo-j ), transparent ); }
.tap-kafel[ style*="--nr: 1" ]::before { background: linear-gradient( 180deg, transparent, var( --gory-j ), transparent ); }
.tap-kafel[ style*="--nr: 2" ]::before { background: linear-gradient( 180deg, transparent, var( --wody ), transparent ); }
.tap-kafel[ style*="--nr: 3" ]::before { background: linear-gradient( 180deg, transparent, var( --ziemia-j ), transparent ); }
.tap-kafel:hover { border-color: var( --obrys ); transform: translateY( -3px ); background: linear-gradient( 180deg, rgba( 201, 150, 47, .09 ), rgba( 232, 226, 212, .02 ) ); box-shadow: 0 30px 66px -40px rgba( 0, 0, 0, .92 ), 0 0 34px -18px rgba( 201, 150, 47, .4 ); }
.tap-kafel h3 { margin: 0 0 8px; font: 500 23px var( --serif ); color: var( --tekst-mocny ); }
.tap-kafel p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
.tap-kafel__kiedy, .tap-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( --etyk ) !important; }
.tap-kafel__gdzie { color: var( --gory-j ) !important; letter-spacing: .08em; text-transform: none; font-size: 11.5px !important; }
.tap-kafel__kiedy i, .tap-kafel__gdzie i { font-style: normal; }
.tap-kafel__stan { display: block; margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var( --wlos ); font-size: 10.5px !important; letter-spacing: .2em; text-transform: uppercase; color: var( --gory-j ) !important; }
.tap-kafel.jest-wygasla .tap-kafel__stan { color: var( --wody-c ) !important; }
.tap-kafel.jest-wygasla::before { opacity: .3; }
.tap-kafel--ezo h3 { font-size: 20px; color: var( --ziemia-j ); }

.tap-pole { margin-top: 16px !important; padding: 15px 18px; border-left: 2px solid rgba( 232, 226, 212, .3 ); border-radius: 0 12px 12px 0; background: rgba( 232, 226, 212, .04 ); font-size: 13px !important; }
.tap-pole b { display: block; margin-bottom: 6px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --wody-c ); }
.tap-pole--waga { border-left-color: var( --niebo ); background: rgba( 181, 55, 46, .1 ); }
.tap-pole--waga b { color: var( --niebo-j ); }

/* ══════════════  zbliżenie  ══════════════ */
/* stara reguła panelu zdjęta 2026-09-11 — zastąpiona klockiem wyżej */
.tap-zblizenie__nad { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tap-zblizenie__tytul { margin: 0 0 14px; font: 500 clamp( 24px, 2.6vw, 32px )/1.2 var( --serif ); color: var( --wody ); }
.tap-zblizenie > p { max-width: 82ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.76; color: var( --tekst ); }

.tap-ramy__siatka > div { min-width: 0; padding: 22px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 232, 226, 212, .045 ), rgba( 232, 226, 212, .01 ) ); transition: border-color .3s, transform .3s; }
.tap-ramy__siatka > div:hover { border-color: var( --obrys ); transform: translateY( -2px ); }
.tap-ramy__siatka i { display: block; margin-bottom: 10px; font-style: normal; font-size: 18px; color: var( --niebo-j ); }
.tap-ramy__siatka b { display: block; margin-bottom: 8px; font: 500 18px var( --serif ); color: var( --tekst-mocny ); }
.tap-ramy__siatka p { margin: 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }

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

/* „Co sie tu najczesciej myli” — kafel niesie zapowiedz, komplet wchodzi w oknie.
   `display: contents` na skrocie zostawia i/b/p bezposrednimi dziecmi kafla, wiec
   dotychczasowe reguly siatki dzialaja bez zmian, a dopisywane przez warstwe
   wspolna „Czytaj calosc” siada na dole dzieki `margin-top: auto`. */
.tap-ramy__siatka > div.zd-klocek { display: flex; flex-direction: column; cursor: pointer; }
.tap-ramy__siatka .zd-klocek__skrot { display: contents; }
.tap-ramy__siatka > div.zd-klocek:focus-visible { outline: 2px solid var( --obrys ); outline-offset: 3px; }

@media ( max-width: 900px ) {
	.tap-stos__uklad { grid-template-columns: minmax( 0, 1fr ); }
	.tap-brak { position: static; }
	.tap-warstwa { grid-template-columns: minmax( 0, 1fr ) auto; }
	.tap-warstwa__kiedy { grid-column: 1 / -1; }
}
@media ( max-width: 780px ) {
	.tap-strona { padding: 0 18px 70px; }
	.tap-hero__waga { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
	.tap-sekcja { margin-top: 58px; }
	.tap-sekcja--scisla, .tap-zblizenie { padding: 26px 20px 30px; }
	.tap-poziom { margin: 6px 0 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tap-strona *, .tap-strona *::before { transition: none !important; animation: none !important; }
}

/* ══ OŚ, NA KTÓREJ NIC SIĘ NIE KOŃCZY ══════════════════════════════════════
 *
 * Strona twierdzi, że strzałka na osi czasu kłamie, bo sugeruje zastępowanie.
 * Ta oś nie ma więc strzałki ani grotu: pasma raz zaczęte biegną do prawej
 * krawędzi, czyli do dzisiaj, i nigdzie się nie urywają. Dowodem nie jest
 * podpis, tylko licznik pod suwakiem, który przy przeciąganiu rośnie i nie
 * schodzi niżej.
 *
 * Barwa oznacza POCHODZENIE warstwy, nie pałac i nie ważność. Dlatego oś ma
 * własne tokeny zamiast czterech barw pałaców używanych wyżej na stronie —
 * tamte idą cyklem po numerze warstwy i przypisanie im znaczeń byłoby
 * cofnięciem decyzji podjętej w azja-pd.js.
 */
.tap-os {
	--os-rodzima: #4e7d4a;
	--os-chiny: #b5372e;
	--os-indie: #c9962f;
	--os-therawada: #ded6c4;
	--os-islam: #5d7c92;
	--os-przekroj: rgba( 232, 226, 212, .34 );
	margin: 26px 0 0;
}

/* Pulpit: kolumna etykiet o stałej szerokości i pole pasm, które się rozciąga.
   minmax( 0, 1fr ) jest tu konieczne, inaczej pasma rozpychają siatkę. */
.tap-os__rama { position: relative; }
.tap-os__pulpit { display: grid; grid-template-columns: minmax( 0, 230px ) minmax( 0, 1fr ); gap: 0 18px; }
.tap-os__pole { position: relative; }

/* ── Skala lat ─────────────────────────────────────────────────────── */
.tap-os__skala { position: relative; height: 26px; border-bottom: 1px solid var( --wlos ); }
.tap-os__rok { position: absolute; top: 0; transform: translateX( -50% ); font: 300 10px var( --sans ); letter-spacing: .18em; color: var( --etyk ); white-space: nowrap; }
.tap-os__rok::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 1px; height: 6px; background: var( --wlos ); }
.tap-os__rok--dzis { color: var( --ziemia-j ); }

/* ── Kamienie milowe: własny szczebel nad pasmami ──────────────────── */
.tap-os__kamienie { position: relative; height: 52px; }
.tap-os__kamien {
	position: absolute; top: 6px; transform: translateX( -50% );
	width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
	border: 1px solid var( --wlos ); border-radius: 999px;
	background: var( --dno ); color: var( --etyk ); cursor: pointer;
	font: 400 10px var( --sans ); line-height: 1;
	transition: border-color .18s, color .18s, box-shadow .18s;
}
.tap-os__kamien:hover, .tap-os__kamien:focus-visible { border-color: var( --ziemia ); color: var( --ziemia-j ); box-shadow: 0 0 22px -8px var( --ziemia ); outline: none; }
.tap-os__kamien--nizej { top: 28px; }
.tap-os__kamien.jest-wybrany { border-color: var( --ziemia ); background: var( --ziemia ); color: var( --dno ); }

/* ── Wiersze ───────────────────────────────────────────────────────── */
.tap-os__grupa { margin: 0; padding: 14px 0 4px; font: 400 11px var( --sans ); letter-spacing: .28em; text-transform: uppercase; color: var( --etyk ); grid-column: 1 / -1; border-top: 1px solid var( --wlos ); }
.tap-os__grupa:first-of-type { border-top: 0; padding-top: 4px; }

.tap-os__etykieta { display: flex; align-items: center; min-height: 30px; padding-right: 6px; font-size: 13px; line-height: 1.3; color: var( --tekst ); }
.tap-os__pas { position: relative; min-height: 30px; }

.tap-os__pasmo {
	position: absolute; top: 50%; transform: translateY( -50% );
	right: 0; height: 9px; border-radius: 2px;
	background: var( --k, var( --os-rodzima ) );
	opacity: .82; cursor: pointer;
	transition: opacity .22s, filter .22s, height .18s;
}
.tap-os__pasmo:hover, .tap-os__pasmo:focus-visible { height: 13px; opacity: 1; outline: none; box-shadow: 0 0 24px -6px var( --k ); }

/* Przed zapisem: pasmo nie zaczyna się kreską, tylko rozmywa w lewo.
   Strona nie zna tej daty i nie zamierza jej udawać. */
.tap-os__pasmo--przedzapisem { left: 0; -webkit-mask-image: linear-gradient( 90deg, transparent, #000 12% ); mask-image: linear-gradient( 90deg, transparent, #000 12% ); }

/* Przekrojowa: bez daty i bez początku, więc kreskowanie przez całą szerokość. */
.tap-os__pasmo--przekrojowa {
	left: 0; background: repeating-linear-gradient( 115deg, var( --os-przekroj ) 0 2px, transparent 2px 7px );
	height: 11px; border-top: 1px solid var( --wlos ); border-bottom: 1px solid var( --wlos ); border-radius: 0;
}

/* Jedyny wyjątek na osi: pasmo, które ustąpiło. Gaśnie ku prawej. */
.tap-os__pasmo--ustapila { -webkit-mask-image: linear-gradient( 90deg, #000 var( --gasnie, 60% ), transparent ); mask-image: linear-gradient( 90deg, #000 var( --gasnie, 60% ), transparent ); }

/* Warstwa jeszcze nieobecna w wybranym roku: przygaszona, ale nie usunięta. */
.tap-os__pasmo.jest-uspiona { opacity: .12; filter: grayscale( 1 ); }

/* ── Znacznik „teraz” ──────────────────────────────────────────────── */
.tap-os__znacznik { position: absolute; width: 1px; background: var( --ziemia-j ); box-shadow: 0 0 18px 1px rgba( 201, 150, 47, .5 ); pointer-events: none; z-index: 2; }
.tap-os__znacznik::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX( -50% ) rotate( 45deg ); width: 8px; height: 8px; background: var( --ziemia-j ); }

.tap-os__sterowanie { display: grid; grid-template-columns: minmax( 0, 230px ) minmax( 0, 1fr ); gap: 0 18px; }
.tap-os__suwak { display: block; width: 100%; margin: 16px 0 0; accent-color: var( --ziemia ); cursor: ew-resize; }
.tap-os__suwak:focus-visible { outline: 2px solid var( --ziemia ); outline-offset: 4px; }

/* ── Odczyt pod osią ───────────────────────────────────────────────── */
.tap-os__odczyt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var( --wlos ); }
.tap-os__odczyt b { font: 500 clamp( 30px, 3.4vw, 44px )/1 var( --serif ); color: var( --ziemia-j ); }
.tap-os__odczyt span { font-size: 14px; line-height: 1.6; color: var( --tekst ); }
.tap-os__odczyt i { font-style: normal; color: var( --tekst-mocny ); }

.tap-os__kamien-tresc { margin: 12px 0 0; max-width: 86ch; }
.tap-os__kamien-tresc h4 { margin: 0 0 6px; font: 400 19px var( --serif ); color: var( --tekst-mocny ); }
.tap-os__kamien-tresc p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var( --tekst ); }

/* ── Legenda ───────────────────────────────────────────────────────── */
.tap-os__legenda { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 20px 0 0; }
.tap-os__leg { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var( --tekst ); }
.tap-os__leg::before { content: ''; width: 22px; height: 7px; border-radius: 2px; background: var( --k ); }
.tap-os__leg--przekrojowa::before { background: repeating-linear-gradient( 115deg, var( --os-przekroj ) 0 2px, transparent 2px 7px ); border-top: 1px solid var( --wlos ); border-bottom: 1px solid var( --wlos ); border-radius: 0; }

.tap-os__uwaga { max-width: 88ch; margin: 18px 0 0; padding-left: 14px; border-left: 1px solid var( --obrys ); font-size: 13.5px; line-height: 1.7; color: var( --tekst-slaby ); }

@media ( max-width: 780px ) {
	.tap-os__pulpit, .tap-os__sterowanie { grid-template-columns: minmax( 0, 1fr ); }
	.tap-os__sterowanie > div:first-child { display: none; }
	.tap-os__etykieta { min-height: 0; padding: 10px 0 4px; font-size: 12.5px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tap-os__pasmo, .tap-os__kamien { transition: none; }
}

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

/* ══════════════  PRZEJŚCIA TONALNE  ══════════════
   Dopisane 2026-09-11: test liczył cztery gradienty na jedenaście sekcji.
   Sekcje bez własnego tła dostają miękką poświatę pod treścią — naprzemiennie
   od lewej i od prawej, żeby oko miało za czym schodzić w dół strony.
   `isolation` i ujemny z-index trzymają ją POD tekstem; bez tego poświata
   kładłaby się na akapitach i zjadała kontrast. */
.tap-sekcja { position: relative; isolation: isolate; }
.tap-sekcja:not( .tap-sekcja--scisla )::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -40px -40px auto -40px; height: 420px;
  background: radial-gradient( 760px 360px at 18% 0%, rgba( 201, 150, 47, .11 ), transparent 68% );
}
.tap-sekcja:not( .tap-sekcja--scisla ):nth-of-type( even )::before {
  background: radial-gradient( 760px 360px at 82% 0%, rgba( 181, 55, 46, .1 ), transparent 68% );
}
/* Domknięcie strony: ostatnia sekcja gaśnie w tło, zamiast urywać się kreską. */
.tap-sekcja:last-of-type::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: auto -40px -60px -40px; height: 280px;
  background: linear-gradient( 180deg, transparent, rgba( 78, 125, 74, .09 ) 55%, transparent );
}
@media ( max-width: 780px ) {
  .tap-sekcja:not( .tap-sekcja--scisla )::before,
  .tap-sekcja:last-of-type::after { inset-inline: -18px; }
}


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

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

.tap-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. */
.tap-sekcja[data-tlo] .zd-pas > li,
.tap-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 ) {
	.tap-sekcja[data-tlo], .tap-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]. */
.tap-sekcja[data-tlo] {
	--tekst-slaby: #979188;	/* #7f776c dawało 3.54:1, teraz 5:1 */
	--etyk: #989187;	/* #877f73 dawało 3.96:1, teraz 5.01:1 */
}

/* NIE dokładam tu reguły na drugi akapit w kaflu. Sprawdziłem: skrót kafla
   ma tylko JEDEN `<p>` — zajawkę. Reguła czekająca na akapit, którego nigdy
   nie będzie, wygląda w kodzie na zamierzoną i myli następnego czytającego.
   Głębszy tekst idzie do OKNA, nie do kafla. */

/* ══ KRAJ JAKO KLOCEK TORU ════════════════════════════════════════════════
 *
 * Przemo: „nie chcę żeby było jeden pod drugim, chcę duże klocki na całą
 * stronę w sliderze, gdzie kraje pojawiają się po kolei".
 *
 * Wcześniej sześć krajów stało jako sześć osobnych sekcji, każda z własnym
 * wąskim torem czterech warstw. Dwa razy przeczytałem to jako „poszerz
 * kafelki" — a chodziło o zmianę tego, CO JEST KLOCKIEM. Teraz klockiem
 * jest KRAJ, a warstwy siedzą w jego wnętrzu.
 */
.tap-kraje { display: grid; gap: 16px; }

/* PAS NIE RÓWNA SLAJDÓW DO NAJWYŻSZEGO.
   `zdobienia.js` przerabia tę siatkę na pas flexowy, a flex domyślnie ciągnie
   dzieci do wysokości najwyższego dziecka. Zmierzone 2026-09-11 po pierwszej
   poprawce: Tajlandia 945 px treści, Laos i Myanmar po 640 px, wszystkie
   panele 980 px — czyli 306 px pustki wewnątrz obwódki. Pustka w ramce czyta
   się jak usterka; wolne tło pod niższym panelem nie czyta się wcale.
   Zgłosił Przemo zrzutem ze słowami „co tu się odjebało". */
.tap-kraje.zd-pas { align-items: start; }

/* JEDEN KRAJ = JEDEN PANEL NA CAŁĄ SZEROKOŚĆ.
   `zdobienia.css` nadaje slajdom pasa wspólną szerokość
   `clamp( 300px, 29vw, 430px )` z `!important`. To jest słuszne dla pasa
   KAFLI, gdzie ma być widać kilka naraz, i błędne dla pasa KRAJÓW, gdzie
   jeden kraj to cała rozkładówka. Stąd brał się wystający kawałek następnego
   kraju, przecięty w połowie słowa.

   Zgłosił Przemo 2026-09-11 i przypomniał, jak brzmiało zadanie: jeden kraj,
   jeden panel, widoczny na całą stronę. `!important` po naszej stronie jest
   konieczne, bo po tamtej też stoi. */
.tap-kraje.zd-pas.zd-pas--bloki > .tap-kraj,
.tap-kraje.zd-pas > .tap-kraj {
	flex: 0 0 100% !important;
	width: 100%; max-width: 100%;
	scroll-snap-align: start;
}
/* Przewijanie ma stawać DOKŁADNIE na granicy kraju, nie w połowie. */
.tap-kraje.zd-pas { scroll-snap-type: x mandatory; }
.tap-kraje.zd-pas.jest-ciagniety { scroll-snap-type: none; }

/* Pas krajów pokazuje pełny opis, więc wspólne skracanie akapitów go nie
   dotyczy — inaczej z trzech akapitów Wietnamu zostałby jeden. */
.tap-kraje.zd-pas--bloki > .tap-kraj p:not( :first-of-type ) { display: block; }



.tap-kraje.zd-pas--bloki > .tap-kraj {
	flex: 0 0 min( 1120px, 94% ) !important;
	padding: 30px 32px 34px;
	border: 1px solid var( --obrys, rgba( 214, 190, 166, .3 ) );
	border-radius: 4px;
	background: linear-gradient( 158deg, rgba( 28, 26, 44, .92 ), rgba( 12, 11, 24, .94 ) );
}

/* `zdobienia.css` chowa w klocku toru wszystkie akapity poza pierwszym —
   reguła słuszna dla kafelka z zajawką, zabójcza dla klocka wielkości
   rozdziału. Tutaj klockiem jest cały kraj, więc akapity mają zostać. */
.tap-kraje.zd-pas--bloki > .tap-kraj p { display: block; }

.tap-kraj__nad {
	margin: 0 0 8px; font: 400 10.5px var( --sans, Jost, sans-serif );
	letter-spacing: .3em; text-transform: uppercase; color: var( --etyk, #a8977c );
}
.tap-kraj__tytul {
	margin: 0 0 12px; font: 500 clamp( 28px, 3vw, 40px )/1.1 var( --serif, 'Cormorant Garamond', serif );
	color: var( --tekst-mocny, #ece4d5 );
}
.tap-kraj__lead { max-width: 78ch; margin: 0 0 6px; color: var( --tekst, #b3a794 ); }
/* Opis kraju: dwa akapity pod leadem. Węższa miara niż lead i ciemniejszy ton,
   żeby lead pozostał wejściem, a to było czytaniem. Bez tej reguły akapity
   dziedziczą kolor leadu i cała kolumna zlewa się w jedną plamę. */
.tap-kraj__opis { max-width: 72ch; margin: 0 0 10px; line-height: 1.66; color: var( --tekst-cichy, #9c907e ); }
.tap-kraj__opis:last-of-type { margin-bottom: 18px; }

/* Warstwy w środku klocka: siatka, NIE tor. Tor w torze przewijałby się
   dwiema osiami naraz i nie dałby się obsłużyć ani myszą, ani klawiaturą. */
.tap-warstwy {
	display: grid; gap: 14px; margin-top: 24px;
	/* 186 px, NIE 240 — przy pasie 1054 px i przerwie 14 px daje to PIĘĆ
	   kolumn zamiast czterech. Kraj z pięcioma warstwami łamał się dotąd
	   na drugi rząd i rósł z 306 px do 603 px, a że pas krajów jest flexem,
	   ten jeden kraj wymuszał wysokość na wszystkich sześciu. Zgłosił to
	   Przemo 2026-09-11 zrzutem, na którym Laos ma ekran pustki pod spodem. */
	grid-template-columns: repeat( auto-fit, minmax( min( 186px, 100% ), 1fr ) );
}

/* „Z BLISKA" JAKO KLOCEK Z OKNEM, nie ściana akapitów.
   Dyrektywa Przema mówi wprost: blok z dużą ilością tekstu to mały świecący
   klocek, a treść otwiera się w oknie. Ten panel miał 530 px surowego tekstu
   wstawionego w slajd i sam odpowiadał za jedną trzecią jego wysokości. */
.tap-zblizenie {
	margin-top: 26px; padding: 18px 22px 20px;
	border: 1px solid var( --obrys ); border-radius: 18px;
	background: linear-gradient( 160deg, rgba( 255, 255, 255, .045 ), rgba( 0, 0, 0, .16 ) );
	box-shadow: 0 10px 26px rgba( 0, 0, 0, .3 ), 0 0 22px rgba( 224, 180, 85, .07 );
	transition: border-color .24s, box-shadow .24s, transform .24s;
	cursor: pointer;
}
.tap-zblizenie:hover, .tap-zblizenie:focus-visible {
	border-color: rgba( 224, 180, 85, .4 );
	box-shadow: 0 16px 38px rgba( 0, 0, 0, .42 ), 0 0 32px rgba( 224, 180, 85, .18 );
}
.tap-zblizenie .zd-klocek__skrot > p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var( --tekst ); }
.tap-zblizenie .tap-zblizenie__tytul { margin: 0; }
@media ( prefers-reduced-motion: reduce ) { .tap-zblizenie { transition: none; } }

@media ( max-width: 720px ) {
	.tap-kraje.zd-pas--bloki > .tap-kraj { padding: 22px 18px 24px; }
}