/* TONACJA TEGO DZIAŁU — tuf kamieniołomu, czerwona skoria i drewno tabliczek wygładzone od trzymania.
   Grunt dookoła kolumny #091213. Kolumna od #222e2e u góry do #0e1b1e u dołu —
   to różnica ośmiu punktów jasności, czyli przejście, które WIDAĆ. Wersja
   poprzednia szła od 4 % do 5 % i była deklaracją przejścia, a nie przejściem.

   ŚWIATŁO: Południe na BEZDRZEWNEJ wyspie: światło pada wprost, bo nie ma korony drzew, która by je rozłożyła — jedyne w serwisie określone przez BRAK przeszkody. Cień w kadrze rzucają tylko posągi.

   Neutralne — tekst, etykieta, cień, poświata — mają odcień tego materiału
   przy NIETKNIĘTEJ jasności, więc każdy kontrast jest dokładnie taki, jak był.
   Wcześniej 22 działy miały bajt w bajt te same 21 wartości barwnych. */

/* Rapa Nui — zapis, którego nikt nie przeczytał.  Przedrostek `trap-`.

   MATERIAŁ: tuf wulkaniczny z kamieniołomu, czerwona skoria na nakrycia głowy
   posągów, bazalt platform, drewno tabliczek wygładzone od trzymania w rękach.
   Rzeczy matowe i suche, bez połysku — to jest wyspa wiatru, nie laguny.

   GRUNT JEST CHŁODNY, BO BAZALT JEST CHŁODNY. Pierwsza wersja szła w ciepły
   brąz i wyszła CO DO BAJTU tak samo jak Rozłamy, które są o pergaminie przy
   świecy. Dwa działy o zapisie nie mogą mieć jednego podkładu, więc ciepło
   wchodzi tu wyłącznie czerwienią skorii i drewnem tabliczek — czyli rzeczami,
   o które w tym dziale chodzi.

   ŚWIATŁO: POŁUDNIE NA BEZDRZEWNEJ WYSPIE. Szesnaste światło w serwisie
   i jedyne, które definiuje się przez BRAK przeszkody: nie ma tu korony drzew,
   która by je rozłożyła, więc pada wprost i jedyny cień w kadrze rzucają
   same posągi. Hawaje miały późne popołudnie od morza — tu jest góra i południe,
   żeby nie pomylić dwóch działów Oceanii z jednego zrzutu ekranu.

   CZERWIEń SKORII NALEŻY DO TEGO, CO WYKAZANE. Linia zapisu opisana jako
   sporna dostaje barwę drewna, a linia z napisem „nie wiadomo” — sam obrys
   bez wypełnienia. Trzy stany wiedzy rozróżnia WYPEŁNIENIE, nie odcień, żeby
   działało to również na wydruku i przy wyłączonych barwach.

   SZEROKOŚĆ 1520 px i blok wyłamania z układu motywu — jak w całym serwisie. */

.trap-strona {
	--tlo: #0e1b1e; --panel: rgba( 22, 30, 34, .84 );
	--obrys: rgba( 196, 185, 166, .30 ); --wlos: rgba( 196, 185, 166, .14 );
	--skoria: #a8452c; --skoria-j: #d97e5c;
	--tuf: #8c8172; --tuf-j: #c4b9a6;
	--drewno: #7a5533; --drewno-j: #b58a5c;
	--ocean: #2f6a78; --ocean-j: #6fa7b6;
	--cien: #121e21; --cien-j: #4e5c5f;
	--etyk: #b3aa94;
	--tekst: #c3b9a2; --tekst-slaby: #a69f8c; --tekst-mocny: #e3ddcf;
	--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 17px var( --serif );
	background:
		/* Południe na BEZDRZEWNEJ wyspie: światło pada wprost, bo nie ma korony drzew, która by je rozłożyła — jedyne w serwisie określone przez BRAK przeszkody. Cień w kadrze rzucają tylko posągi. */
		radial-gradient( 900px 700px at 50% 4%, rgba( 240, 232, 212, .04 ), transparent 64% ),
		radial-gradient( 1100px 780px at 50% 96%, rgba( 47, 106, 120, .07 ), transparent 70% ),
		linear-gradient( 176deg, #222e2e 0%, #152224 46%, #0e1b1e 100% );
	overflow-x: clip;
}
.trap-strona *, .trap-strona *::before, .trap-strona *::after { box-sizing: border-box; }

/* WYŁAMANIE Z UKŁADU MOTYWU. Bez tego dział stoi w kolumnie 645 px. */
body:has( .trap-strona ) .wp-site-blocks > header, body:has( .trap-strona ) header.wp-block-template-part,
body:has( .trap-strona ) .wp-site-blocks > footer, body:has( .trap-strona ) footer.wp-block-template-part,
body:has( .trap-strona ) .wp-block-post-title { display: none !important; }
body:has( .trap-strona ) .wp-site-blocks, body:has( .trap-strona ) .wp-block-group,
body:has( .trap-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .trap-strona ) .wp-block-post-content > *, body:has( .trap-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .trap-strona ) { background: #0d0b0a; }
body:has( .trap-strona ) .wp-block-post-content > .trap-strona, body:has( .trap-strona ) .entry-content > .trap-strona,
.trap-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.trap-strona button { font-family: inherit; }

/* ══════════════  UWERTURA  ══════════════ */

.trap-hero {
	position: relative; margin: 26px 0 0; padding: 62px 44px 54px; border-radius: 28px;
	border: 1px solid var( --wlos ); overflow: hidden;
	background:
		radial-gradient( 900px 420px at 50% 0%, rgba( 240, 232, 212, .13 ), transparent 70% ),
		linear-gradient( 168deg, #182426, #081112 );
}
/* Uwertura z grafiką nosi `trap-sekcja--tlo trap-hero`, a NIE `trap-hero--tlo`. */
.trap-sekcja--tlo::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var( --tlo ) 50% 50% / cover no-repeat; opacity: .92;
}
.trap-sekcja--tlo::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient( 900px 520px at 16% 16%, rgba( 8, 12, 13, .66 ), transparent 76% ),
		linear-gradient( 180deg, rgba( 8, 12, 13, .16 ), rgba( 8, 12, 13, .5 ) );
}
.trap-hero__nad {
	margin: 0 0 16px; font: 400 11px var( --sans ); letter-spacing: .3em; text-transform: uppercase;
	color: var( --etyk );
}
.trap-hero__tytul {
	margin: 0 0 26px; max-width: 20ch;
	font: 300 clamp( 40px, 5.2vw, 72px ) / 1.07 var( --serif ); color: var( --tekst-mocny );
	text-shadow: 0 0 60px rgba( 240, 232, 212, .2 );
}

/* ══════════════  SEKCJE  ══════════════ */

.trap-sekcja { position: relative; margin: 84px 0 0; padding: 0; }
.trap-sekcja--tlo { padding: 54px 40px 48px; border-radius: 26px; border: 1px solid var( --wlos ); overflow: hidden; }
.trap-sekcja__nad {
	margin: 0 0 12px; font: 400 11px var( --sans ); letter-spacing: .28em; text-transform: uppercase;
	color: var( --etyk );
}
.trap-sekcja__tytul {
	margin: 0 0 16px; max-width: 26ch;
	font: 300 clamp( 30px, 3.4vw, 46px ) / 1.12 var( --serif ); color: var( --tekst-mocny );
	text-shadow: 0 0 40px rgba( 240, 232, 212, .17 );
}
.trap-sekcja__lead { margin: 0 0 32px; max-width: 78ch; font-size: 19px; line-height: 1.66; color: var( --tekst ); }

.trap-przerywnik { display: block; width: 100%; height: 44px; margin: 66px 0 0; color: var( --drewno ); opacity: .45; }

/* ══════════════  TABLICZKA  ══════════════
   Rysunek dostaje JAWNą szerokość, bo SVG w siatce kurczy się do 300 px.
   Obrót robimy CSS-em na owijce, a nie atrybutem `transform` SVG: atrybut
   nie przyjmuje `transition` i kończy w miejscu startu. Sprawdzone. */

.trap-tabliczka { width: 100%; max-width: 1180px; margin: 0 auto; position: relative; }
.trap-tabliczka__ramka { perspective: 1400px; }
.trap-tabliczka__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* OBRÓT O PÓŁ OBROTU — to jest cała treść tego rysunku. */
.trap-tabliczka__obrot { transition: transform 620ms cubic-bezier( .22, .61, .36, 1 ); transform-origin: 50% 50%; }
.trap-tabliczka.jest-odwrocona .trap-tabliczka__obrot { transform: rotate( 180deg ); }
@media ( prefers-reduced-motion: reduce ) {
	.trap-tabliczka__obrot { transition: none; }
}

.trap-deska { fill: var( --drewno ); opacity: .34; }
.trap-deska__obrys { fill: none; stroke: var( --drewno-j ); stroke-width: 1.2; opacity: .5; }
.trap-slojc { stroke: var( --drewno-j ); stroke-width: .8; opacity: .16; }

/* WIERSZ. Trzy stany wiedzy rozróżnia WYPEŁNIENIE, nie barwa:
   wykazane — pełne, sporne — pełne przerywane, nie wiadomo — sam obrys. */
.trap-wiersz { cursor: pointer; outline: none; }
.trap-znak { fill: var( --tuf-j ); opacity: .52; }
.trap-wiersz--wykazane .trap-znak { fill: var( --skoria-j ); opacity: .78; }
.trap-wiersz--sporne .trap-znak { fill: var( --drewno-j ); opacity: .6; }
.trap-wiersz--nie .trap-znak { fill: none; stroke: var( --tuf-j ); stroke-width: 1; opacity: .5; }

.trap-wiersz__nr { fill: var( --etyk ); font: 400 14px var( --sans ); letter-spacing: .2em; text-anchor: end; }
.trap-wiersz__strzalka { stroke: var( --tuf-j ); stroke-width: 1.2; opacity: .42; fill: none; }

.trap-wiersz:hover .trap-znak, .trap-wiersz:focus-visible .trap-znak { opacity: 1; }
.trap-wiersz.jest-wybrany .trap-znak { opacity: 1; }
.trap-wiersz.jest-wybrany .trap-wiersz__strzalka { stroke: var( --skoria-j ); opacity: 1; stroke-width: 1.8; }
.trap-wiersz.jest-wybrany .trap-wiersz__nr { fill: var( --skoria-j ); }
.trap-wiersz__tlo { fill: var( --skoria ); opacity: 0; }
.trap-wiersz.jest-wybrany .trap-wiersz__tlo { opacity: .12; }

/* LEGENDA WYPEŁNIEŃ stoi w marginesie, który i tak musi zostać wolny na obrót
   — zamiast pustki niesie klucz do rysunku. */
.trap-legenda__co { fill: var( --etyk ); font: 400 12.5px var( --sans ); letter-spacing: .16em; }
.trap-znak--legenda { opacity: .8; }
.trap-legenda--wykazane { fill: var( --skoria-j ); }
.trap-legenda--sporne { fill: var( --drewno-j ); }
.trap-legenda--nie { fill: none; stroke: var( --tuf-j ); stroke-width: 1; }

/* PODPISY POD RYSUNKIEM SĄ HTML-em, nie tekstem w SVG. W SVG musiałyby stać
   poza okręgiem zakreślanym przez narożniki przy obrocie, co zostawiało dwieście
   pikseli martwego pasa między deską a napisem. Tutaj stoją tuż pod deską,
   dają się zaznaczyć i skalują się z resztą strony. */
.trap-pod { max-width: 68ch; margin: 18px auto 0; text-align: center; }
.trap-pod__uwaga {
	margin: 0 0 14px; font: 400 12px var( --sans ); letter-spacing: .22em;
	text-transform: uppercase; color: var( --tekst-slaby );
}

/* PUSTE POLE ODCZYTU JEST TEZĄ TEGO DZIAŁU, więc ma być największym napisem
   pod rysunkiem. Nie jest to niedokończony element interfejsu. */
.trap-pod__odczyt {
	margin: 0 0 10px; font: 300 clamp( 26px, 2.6vw, 38px ) / 1.2 var( --serif );
	font-style: italic; color: var( --tuf-j );
}
.trap-pod__stan { margin: 0; font: 400 13px var( --sans ); letter-spacing: .1em; color: var( --etyk ); }

/* STEROWANIE. Suwak jest tu obowiązkowy: lista powtarzalnych bloków to tor. */
.trap-ster {
	display: flex; align-items: center; gap: 18px; justify-content: center;
	margin: 22px auto 0; max-width: 760px; flex-wrap: wrap;
}
.trap-ster__guzik {
	appearance: none; cursor: pointer;
	padding: 9px 18px; border-radius: 999px;
	border: 1px solid var( --obrys ); background: var( --panel );
	color: var( --tekst-mocny ); font: 400 13px var( --sans ); letter-spacing: .1em;
}
.trap-ster__guzik:hover, .trap-ster__guzik:focus-visible { border-color: var( --skoria-j ); color: var( --skoria-j ); }
.trap-ster__suwak { flex: 1 1 280px; min-width: 220px; accent-color: var( --skoria-j ); }
.trap-ster__stan { font: 400 12px var( --sans ); letter-spacing: .16em; text-transform: uppercase; color: var( --etyk ); }

.trap-opis {
	max-width: 78ch; margin: 24px auto 0; padding: 30px 34px;
	border: 1px solid var( --wlos ); border-radius: 22px; background: var( --panel );
}
.trap-opis h3 { margin: 0 0 6px; font: 300 30px var( --serif ); color: var( --tekst-mocny ); text-shadow: 0 0 32px rgba( 168, 69, 44, .16 ); }
.trap-opis p { margin: 0 0 14px; font-size: 18px; line-height: 1.74; }
.trap-opis p:last-child { margin-bottom: 0; }
.trap-opis__kiedy { font: 400 11px var( --sans ) !important; letter-spacing: .2em; text-transform: uppercase; color: var( --skoria-j ); margin-bottom: 8px !important; }
.trap-opis__krotko { color: var( --tekst-mocny ); font-style: italic; }
.trap-opis__pole, .trap-opis__zrodlo { font-size: 16px !important; padding: 10px 14px; border-radius: 10px; }
.trap-opis__pole { background: rgba( 168, 69, 44, .18 ); color: var( --tekst-mocny ); }
.trap-opis__zrodlo { background: rgba( 196, 185, 166, .07 ); color: var( --tekst-slaby ); }
.trap-opis__pole b, .trap-opis__zrodlo b { display: block; font: 400 10.5px var( --sans ); letter-spacing: .22em; text-transform: uppercase; color: var( --etyk ); margin-bottom: 4px; }

/* ══════════════  SIATKI KAFLI  ══════════════ */

.trap-siatka-kafli { display: grid; gap: 22px; grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); align-items: start; }

.trap-kafel {
	position: relative; padding: 26px 26px 24px; border-radius: 20px;
	border: 1px solid var( --wlos ); background: var( --panel ); cursor: pointer;
	transition: border-color .2s, transform .2s;
}
.trap-kafel:hover, .trap-kafel:focus-visible { border-color: var( --obrys ); transform: translateY( -2px ); }
.trap-kafel h3 { margin: 0 0 8px; font: 300 25px / 1.18 var( --serif ); color: var( --tekst-mocny ); text-shadow: 0 0 28px rgba( 240, 232, 212, .14 ); }
.trap-kafel p { margin: 0; font-size: 17px; line-height: 1.66; }
.trap-kafel__nad {
	display: block; margin: 0 0 10px; font: 400 10.5px var( --sans ); letter-spacing: .22em;
	text-transform: uppercase; color: var( --etyk );
}
.trap-kafel__nad i { font-style: normal; margin-right: 8px; color: var( --skoria-j ); }

.trap-foto { margin: 0 0 18px; border-radius: 14px; overflow: hidden; }
.trap-foto img { display: block; width: 100%; height: auto; }

/* ══════════════  LICZNIK  ══════════════ */

.trap-liczby { display: grid; gap: 20px; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); align-items: start; }
.trap-karta { padding: 28px 24px; border-radius: 20px; border: 1px solid var( --wlos ); background: var( --panel ); }
.trap-karta__ile {
	margin: 0 0 10px; font: 300 clamp( 36px, 3.8vw, 54px ) / 1 var( --serif ); color: var( --skoria-j );
	text-shadow: 0 0 34px rgba( 217, 126, 92, .22 );
}
.trap-karta__co { margin: 0 0 10px; font: 400 12px var( --sans ); letter-spacing: .14em; text-transform: uppercase; color: var( --etyk ); line-height: 1.5; }
.trap-karta__krotko { margin: 0; font-size: 16.5px; line-height: 1.64; }

/* ══════════════  OKNO  ══════════════ */

.trap-okno {
	max-width: 82ch; padding: 30px 34px; border-radius: 20px;
	border: 1px solid var( --wlos ); background:
		radial-gradient( 760px 220px at 50% 0%, rgba( 240, 232, 212, .10 ), transparent 72% ),
		linear-gradient( 172deg, rgba( 15, 25, 27, .58 ), rgba( 9, 20, 23, .86 ) );
}
.trap-okno p { margin: 0; font-size: 19px; line-height: 1.74; color: var( --tekst ); }

/* POLA OPISU W KAFLU. Wspólny pomocnik modułu nadaje im klasę `trap-pole`
   i nie dzielą jej z niczym w rysunku — patrz przypadek skandynawski. */
.trap-pole { margin: 0 0 14px !important; padding: 12px 16px; border-radius: 12px; font-size: 16px !important; }
.trap-pole b { display: block; font: 400 10.5px var( --sans ); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 5px; }
.trap-pole--zrodlo { background: rgba( 240, 232, 212, .09 ); color: var( --tekst-slaby ); }
.trap-pole--zrodlo b { color: var( --cien-j ); }
.trap-pole--zamiast { background: rgba( 168, 69, 44, .17 ); color: var( --tekst-mocny ); }
.trap-pole--zamiast b { color: var( --skoria-j ); }

/* ══════════════  WĄSKIE EKRANY  ══════════════ */

@media ( max-width: 900px ) {
	.trap-strona { padding: 0 20px 60px; }
	.trap-hero { padding: 44px 24px 38px; }
	.trap-sekcja { margin-top: 60px; }
	.trap-sekcja--tlo { padding: 36px 22px 32px; }
	.trap-opis { padding: 22px 20px; }
	.trap-siatka-kafli { grid-template-columns: 1fr; }
	/* Tabliczki NIE zwijamy: obrót jest całą wypowiedzią rysunku. Rosną podpisy. */
	.trap-pod__uwaga { letter-spacing: .14em; }
	.trap-legenda__co { font-size: 15px; }
	.trap-ster { gap: 12px; }
}

/* GRUNT CAŁEJ STRONY. Motyw daje `body` czerń, a kolumna działu ma 1520 px — na
   ekranie 2560 px zostawało po ~470 px czarnego pasa z każdej strony.
   `body:has()` ma swoistość 0,2,1 wobec `body` 0,0,1, więc wygrywa
   z motywem bez `!important`.
   NIE robimy tego pseudoelementem: `background: inherit` na `::after`
   dziedziczy też ZDJĘCIE sekcji, a `cover` przelicza się na szerokości
   pseudoelementu — wychodzą dwa te same zdjęcia w różnych skalach.
   Sprawdzone i cofnięte 2026-09-12. */
body:has( .trap-strona ) {
	background-color: #091213;
	background-image:
		radial-gradient( 1900px 1200px at 50% 4%, rgba( 240, 232, 212, .19 ), transparent 66% ),
		linear-gradient( 180deg, #11191a, #091213 62% );
	background-attachment: fixed;
}


/* OKNO UWERTURY WRACA DO BARW DZIAŁU.
   Zmierzone na żywej stronie, dwie reguły z arkusza wspólnego biją moduł:
     `.zd-okno`                 → granat modala rgba( 16, 12, 40, .97 ), swoistość 0,1,0
     `[class*="-hero"] .zd-okno` → płaska pobiałka rgba( 255, 255, 255, .027 ), 0,2,0
   Druga to MÓJ WŁASNY blok dopisany do `zdobienia.css`, kiedy poprawiałem
   układ uwertury — i to ona sprawiała, że okno tezy wyglądało identycznie
   na wszystkich stronach naraz. Arkusz wspólny ładuje się PO module, więc
   przy równej swoistości wygrywał. Trzy człony dają 0,3,0 i sprawę zamykają,
   bez ruszania pliku wspólnego, który należy do sesji Grafiki. */
.trap-strona .trap-hero .trap-okno {
	background:
		radial-gradient( 760px 220px at 50% 0%, rgba( 240, 232, 212, .10 ), transparent 72% ),
		linear-gradient( 172deg, #142123, #080f11 );
}


/* ===== POPRAWKA WARSTW 2026-09-12 =====
   `z-index: -1` na obu pseudoelementach wrzucal ZDJECIE POD wlasne,
   nieprzezroczyste tlo sekcji (.trap-hero ma pelny linear-gradient),
   wiec grafika nie byla widoczna w ogole. Sprawdzone na zywo.
   Pseudoelementy ida nad tlo elementu, tresc nad nie. */
.trap-sekcja--tlo::before,
.trap-sekcja--tlo::after { z-index: 0; }
.trap-sekcja--tlo > * { position: relative; z-index: 1; }


/* ===== MIT W KAFLU 2026-09-12 =====
   Naglowek kafla w sekcji „Czego nie bylo” to CUDZE falszywe zdanie.
   Ma wygladac na cytat, nie na teze strony. */
.trap-kafel__nad--mit { color: #c4826e; letter-spacing: .16em; }
.trap-kafel__mit { color: var( --tekst-slaby ); font-style: italic; }
.trap-kafel__nie { color: #c4826e; font-style: normal; letter-spacing: .04em; }

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