/* TONACJA TEGO DZIAŁU — wiatr Patagonii, szary błękit; Selk’nam żyli w zimnie.
   Grunt dookoła kolumny #0a0e12. Kolumna od #222528 u góry do #0f151c 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: Niskie słońce wysokich szerokości: cienie długie przez cały dzień, bo słońce nigdy nie wchodzi wysoko.

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

/* Stożek południowy: Mapuche, Guaraní, Selk'nam.  Prefiks `tpd-`.

   MATERIAŁ: drewno ciosane siekierą, wełna owcza, skóra bębna, wilgotny kamień.
   ŚWIATŁO: niskie słońce wysokich szerokości — długie cienie przez cały dzień,
   barwa zimna, brzegi miękkie od wiatru i wilgoci.

   To jest światło miejsca, w którym słońce NIGDY nie staje wysoko. W Andach
   światło jest twarde i pionowe, w Amazonii rozproszone i zielone; tutaj pada
   skosem od horyzontu i kładzie cień dłuższy od przedmiotu. Trzy działy
   amerykańskie mają trzy różne światła i żadne nie jest ozdobą — każde wynika
   z szerokości geograficznej, o której dział mówi.

   BARWA RDZY NALEŻY DO SŁUPA UCIĘTEGO i do niczego innego. Drut kolczasty
   grodzący pastwiska jest rzeczą, która przyszła na Ziemię Ognistą razem
   z owcami i z tym, co się wydarzyło. Ta barwa nie ma prawa pojawić się
   w ozdobie ani w tle.

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

.tpd-strona {
	--tlo: #0f151c; --panel: rgba( 20, 26, 36, .84 );
	--obrys: rgba( 196, 189, 178, .30 ); --wlos: rgba( 196, 189, 178, .14 );
	--welna: #c4bdb2; --welna-j: #e8e2d8;
	--rdza: #9a4a2a; --rdza-j: #cd7f57;
	--drewno: #6f5a45; --drewno-j: #a38970;
	--mgla: #7d8a92; --mgla-j: #b9c4cb;
	--cien: #121921; --cien-j: #4e565f;
	--etyk: #b3a794;
	--tekst: #c3b6a2; --tekst-slaby: #a69c8c; --tekst-mocny: #e3dbcf;
	--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:
		/* Niskie słońce wysokich szerokości: cienie długie przez cały dzień, bo słońce nigdy nie wchodzi wysoko. */
		radial-gradient( 1150px 700px at 10% 58%, rgba( 224, 198, 156, .07 ), transparent 64% ),
		radial-gradient( 1100px 780px at 90% 42%, rgba( 111, 90, 69, .07 ), transparent 70% ),
		linear-gradient( 176deg, #222528 0%, #161b21 46%, #0f151c 100% );
	overflow-x: clip;
}
.tpd-strona *, .tpd-strona *::before, .tpd-strona *::after { box-sizing: border-box; }

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

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

.tpd-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( 224, 198, 156, .13 ), transparent 70% ),
		linear-gradient( 168deg, #181d22, #090d11 );
}
/* Uwertura z grafiką nosi `tpd-sekcja--tlo tpd-hero`, a NIE `tpd-hero--tlo`. */
.tpd-sekcja--tlo::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var( --tlo ) 50% 50% / cover no-repeat; opacity: .92;
}
.tpd-sekcja--tlo::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient( 900px 520px at 16% 16%, rgba( 8, 10, 13, .66 ), transparent 76% ),
		linear-gradient( 180deg, rgba( 8, 10, 13, .16 ), rgba( 8, 10, 13, .5 ) );
}
.tpd-hero__nad {
	margin: 0 0 16px; font: 400 11px var( --sans ); letter-spacing: .3em; text-transform: uppercase;
	color: var( --etyk );
}
.tpd-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( 224, 198, 156, .2 );
}

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

.tpd-sekcja { position: relative; margin: 84px 0 0; padding: 0; }
.tpd-sekcja--tlo { padding: 54px 40px 48px; border-radius: 26px; border: 1px solid var( --wlos ); overflow: hidden; }
.tpd-sekcja__nad {
	margin: 0 0 12px; font: 400 11px var( --sans ); letter-spacing: .28em; text-transform: uppercase;
	color: var( --etyk );
}
.tpd-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( 224, 198, 156, .17 );
}
.tpd-sekcja__lead { margin: 0 0 32px; max-width: 78ch; font-size: 19px; line-height: 1.66; color: var( --tekst ); }

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

/* ══════════════  TRZY SŁUPY  ══════════════
   Rysunek dostaje JAWNĄ szerokość, bo SVG w siatce kurczy się do 300 px,
   a wtedy stopnie zlewają się w jedną kreskę i porównanie przestaje działać. */

.tpd-slupy { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }
.tpd-slupy__svg { display: block; width: 100%; height: auto; overflow: visible; }

.tpd-ziemia { stroke: var( --welna ); stroke-width: 1.2; opacity: .45; }
.tpd-ziemia__kreska { stroke: var( --welna ); stroke-width: 1; opacity: .2; }

.tpd-slup { cursor: pointer; outline: none; }
.tpd-slup__pole { fill: transparent; }
.tpd-slup__trzon { fill: rgba( 111, 90, 69, .28 ); stroke: var( --drewno-j ); stroke-width: 1.4; }
.tpd-stopien { fill: none; stroke: var( --drewno-j ); stroke-width: 1.6; opacity: .85; }
.tpd-glowica { fill: rgba( 163, 137, 112, .3 ); stroke: var( --drewno-j ); stroke-width: 1.4; }

/* SŁUP BEZ SZCZYTU: stopnie biegną dalej, poza górną krawędź kadru. */
.tpd-slup__dalej { fill: rgba( 163, 137, 112, .22 ); stroke: var( --drewno-j ); stroke-width: 1; }

/* Trzy stany mają po własnej regule, żeby żaden nie został niemy.
   Sito po przemianowaniu widzi wtedy komplet. */
.tpd-slup--stoi .tpd-glowica { opacity: 1; }
.tpd-slup--otwarty .tpd-slup__stan { fill: var( --welna-j ); }

/* SŁUP UCIĘTY: rdza i nic więcej w tej barwie na całej stronie. */
.tpd-przekroj { fill: none; stroke: var( --rdza-j ); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tpd-slup--uciety .tpd-slup__trzon { stroke: var( --rdza-j ); }
.tpd-slup--uciety .tpd-stopien { stroke: var( --rdza-j ); }
.tpd-slup--uciety .tpd-slup__nazwa, .tpd-slup--uciety .tpd-slup__stan { fill: var( --rdza-j ); }

.tpd-slup__nazwa { fill: var( --welna-j ); font: 300 22px var( --serif ); text-anchor: middle; }
.tpd-slup__kto { fill: var( --tekst-slaby ); font: 400 10px var( --sans ); letter-spacing: .22em; text-transform: uppercase; text-anchor: middle; }
.tpd-slup__stan { fill: var( --mgla-j ); font: 400 10px var( --sans ); letter-spacing: .22em; text-transform: uppercase; text-anchor: middle; }

.tpd-slup:hover .tpd-slup__trzon, .tpd-slup:focus-visible .tpd-slup__trzon { fill: rgba( 163, 137, 112, .4 ); }
.tpd-slup.jest-wybrany .tpd-slup__trzon { stroke-width: 2.6; fill: rgba( 232, 226, 216, .16 ); }
.tpd-slup.jest-wybrany .tpd-slup__nazwa { fill: var( --tekst-mocny ); font-weight: 500; }
.tpd-slup--uciety.jest-wybrany .tpd-slup__nazwa { fill: var( --rdza-j ); }
.tpd-slup.jest-wybrany { filter: drop-shadow( 0 0 13px rgba( 232, 226, 216, .38 ) ); }

.tpd-slupy__nota { fill: var( --tekst-slaby ); font: 300 13px var( --serif ); text-anchor: middle; }

.tpd-slupy__opis {
	max-width: 78ch; margin: 26px auto 0; padding: 30px 34px;
	border: 1px solid var( --wlos ); border-radius: 22px; background: var( --panel );
}
.tpd-slupy__opis h3 { margin: 0 0 6px; font: 300 30px var( --serif ); color: var( --tekst-mocny ); text-shadow: 0 0 32px rgba( 232, 226, 216, .16 ); }
.tpd-slupy__opis p { margin: 0 0 14px; font-size: 18px; line-height: 1.74; }
.tpd-slupy__opis p:last-child { margin-bottom: 0; }
.tpd-slupy__kiedy { font: 400 11px var( --sans ) !important; letter-spacing: .2em; text-transform: uppercase; color: var( --mgla-j ); margin-bottom: 8px !important; }
.tpd-slupy__krotko { color: var( --tekst-mocny ); font-style: italic; }
.tpd-slupy__pole, .tpd-slupy__zrodlo { font-size: 16px !important; padding: 10px 14px; border-radius: 10px; }
.tpd-slupy__pole { background: rgba( 154, 74, 42, .18 ); color: var( --tekst-mocny ); }
.tpd-slupy__zrodlo { background: rgba( 196, 189, 178, .07 ); color: var( --tekst-slaby ); }
.tpd-slupy__pole b, .tpd-slupy__zrodlo b { display: block; font: 400 10.5px var( --sans ); letter-spacing: .22em; text-transform: uppercase; color: var( --etyk ); margin-bottom: 4px; }

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

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

.tpd-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;
}
.tpd-kafel:hover, .tpd-kafel:focus-visible { border-color: var( --obrys ); transform: translateY( -2px ); }
.tpd-kafel h3 { margin: 0 0 8px; font: 300 25px / 1.18 var( --serif ); color: var( --tekst-mocny ); text-shadow: 0 0 28px rgba( 224, 198, 156, .14 ); }
.tpd-kafel p { margin: 0; font-size: 17px; line-height: 1.66; }
.tpd-kafel__nad {
	display: block; margin: 0 0 10px; font: 400 10.5px var( --sans ); letter-spacing: .22em;
	text-transform: uppercase; color: var( --etyk );
}
.tpd-kafel__nad i { font-style: normal; margin-right: 8px; color: var( --rdza-j ); }

.tpd-foto { margin: 0 0 18px; border-radius: 14px; overflow: hidden; }
.tpd-foto img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }

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

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

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

.tpd-okno {
	max-width: 82ch; padding: 30px 34px; border-radius: 20px;
	border: 1px solid var( --wlos ); background:
		radial-gradient( 760px 220px at 50% 0%, rgba( 224, 198, 156, .10 ), transparent 72% ),
		linear-gradient( 172deg, rgba( 15, 20, 27, .58 ), rgba( 9, 15, 23, .86 ) );
}
.tpd-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ę `tpd-pole`
   i nie dzielą jej z niczym w rysunku — patrz przypadek skandynawski. */
.tpd-pole { margin: 0 0 14px !important; padding: 12px 16px; border-radius: 12px; font-size: 16px !important; }
.tpd-pole b { display: block; font: 400 10.5px var( --sans ); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 5px; }
.tpd-pole--zrodlo { background: rgba( 224, 198, 156, .09 ); color: var( --tekst-slaby ); }
.tpd-pole--zrodlo b { color: var( --cien-j ); }
.tpd-pole--zamiast { background: rgba( 154, 74, 42, .17 ); color: var( --tekst-mocny ); }
.tpd-pole--zamiast b { color: var( --rdza-j ); }

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

@media ( max-width: 900px ) {
	.tpd-strona { padding: 0 20px 60px; }
	.tpd-hero { padding: 44px 24px 38px; }
	.tpd-sekcja { margin-top: 60px; }
	.tpd-sekcja--tlo { padding: 36px 22px 32px; }
	.tpd-slupy__opis { padding: 22px 20px; }
	.tpd-siatka-kafli { grid-template-columns: 1fr; }
	/* Podpisy rosną, słupy zostają. Wysokość stopnia jest MIARĄ, po której
	   porównuje się trzy słupy wzrokiem — zmiana jej na wąskim ekranie
	   zepsułaby jedyne, co ten rysunek robi. */
	.tpd-slup__nazwa { font-size: 30px; }
	.tpd-slup__kto, .tpd-slup__stan { font-size: 12px; letter-spacing: .08em; }
	.tpd-slupy__nota { font-size: 17px; }
}

/* 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( .tpd-strona ) {
	background-color: #0a0e12;
	background-image:
		radial-gradient( 1900px 1200px at 10% 58%, rgba( 224, 198, 156, .19 ), transparent 66% ),
		linear-gradient( 180deg, #111417, #0a0e12 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. */
.tpd-strona .tpd-hero .tpd-okno.zd-okno,
.tpd-strona .tpd-hero .zd-okno.zd-okno,
.tpd-strona .tpd-hero .tpd-okno.tpd-okno {
	background:
		radial-gradient( 760px 220px at 50% 0%, rgba( 224, 198, 156, .10 ), transparent 72% ),
		linear-gradient( 172deg, #151a20, #080c10 );
}

/* OKNO TEZY — przejście tonalne.
   Wspólna warstwa daje mu `background: rgba( 255, 255, 255, .028 )`
   regułą `[class*="-hero"] .zd-okno` o swoistości 0,2,0 — jedną płaską
   pobiałką dla wszystkich działów naraz. Trzy człony dają 0,3,0
   i wygrywają BEZ `!important`, więc pliku wspólnego nie ruszamy.
   Barwy są z palety TEGO działu: `--tlo` na dole, akcent gruntu u góry. */
.tpd-strona .tpd-hero .tpd-okno.zd-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 20, 26, 36, .10 ), transparent 70% ),
		linear-gradient( 168deg, #1a2027, #0f151c );
}


/* ===== POPRAWKA WARSTW 2026-09-13 (przywrocona) =====
   `z-index: -1` na pseudoelementach tla kladzie ZDJECIE POD wlasne,
   nieprzezroczyste tlo sekcji - zadne tlo nie jest wtedy widoczne.
   Poprawka byla juz wgrana 2026-09-12 i zostala zgubiona przy
   nadpisaniu arkusza 2026-09-13 o 02:25. NIE KASOWAC PRZY DEPLOYU. */
.tpd-sekcja--tlo::before,
.tpd-sekcja--tlo::after { z-index: 0; }
.tpd-sekcja--tlo > * { position: relative; z-index: 1; }


/* ══════════════  LICZNIK — WYROWNANIE 2026-09-13  ══════════════

   Trzy usterki naraz, wszystkie widoczne na pasku liczb:

   1. KROJ. `.tpd-kafel h3` (0,1,1) bilo `.tpd-karta__co` (0,1,0), wiec
      etykieta dostawala 25 px Cormoranta zamiast 12 px Jost. Odstepy liter
      i wersaliki zostawaly, bo sa poza skrotem `font` — stad obcy wyglad.
      Zmierzone w przegladarce (getComputedStyle), nie zgadniete.
   2. TLO. Sekcja licznika nie ma gniazda na zdjecie (naglowek z czterema
      argumentami), wiec stala na golym gruncie strony. Dostaje wlasny,
      tonalny grunt z palety dzialu — bez zadnej nowej grafiki.
   3. PRZEJSCIA I OZDOBNIK. Karty mialy plaskie `var( --panel )`, bez
      gradientu i bez znaku. Dostaja to samo swiatlo, co `.tpd-okno`
      (radial od gory z lewej + pion), oraz wlosowa kreske pod liczba.   */

.tpd-kafel h3.tpd-karta__co {
	font: 400 12px var( --sans ); line-height: 1.5;
	letter-spacing: .14em; text-transform: uppercase;
	color: var( --etyk ); text-shadow: none;
}

#tpd-licznik {
	position: relative; padding: 44px 34px 40px; border-radius: 26px;
	border: 1px solid var( --wlos );
	background:
		radial-gradient( 900px 320px at 18% 0%, rgba( 205, 127, 87, .10 ), transparent 68% ),
		linear-gradient( 172deg, rgba( 22, 29, 39, .72 ), rgba( 12, 17, 24, .92 ) );
}

.tpd-liczby .tpd-kafel {
	position: relative; overflow: hidden;
	background:
		radial-gradient( 620px 200px at 22% 0%, rgba( 205, 127, 87, .09 ), transparent 72% ),
		linear-gradient( 168deg, rgba( 26, 33, 44, .92 ), rgba( 13, 18, 26, .94 ) );
}

/* Wlosowa kreska pod liczba: wchodzi od lewej i gasnie — przejscie tonalne,
   nie ramka. Szerokosc bierze sie z samej karty, wiec nie trzeba jej mierzyc. */
.tpd-liczby .tpd-kafel .tpd-karta__ile::after {
	content: ''; display: block; margin: 12px 0 0; height: 1px;
	background: linear-gradient( 90deg,
		rgba( 205, 127, 87, .55 ) 0%,
		rgba( 205, 127, 87, .18 ) 38%,
		transparent 82% );
}

/* Ozdobnik narozny — ten sam znak, ktory dzial uzywa w przerywniku. */
.tpd-liczby .tpd-kafel::after {
	content: '◇'; position: absolute; right: 14px; top: 12px;
	font: 400 13px var( --serif ); color: var( --welna );
	opacity: .18; pointer-events: none;
}
.tpd-liczby .tpd-kafel:hover::after { opacity: .34; }