/* Grecja i Rzym — dwa koła roku.
 *
 * Paleta z materii, nie z podręcznika: marmur pentelicki, który nigdy nie był
 * biały, tylko ciepły jak kość; czerwień figur na attyckiej ceramice; brąz
 * rzymskich tablic z prawem i uchwałami; oliwkowa zieleń wieńca. Świadomie
 * NIE „klasyczny" biało-złoty — to barwa muzeum, nie tamtego świata.
 *
 * PODPISEM strony są DWA KOŁA ROKU: pierścień attycki i pierścień rzymski na
 * wspólnych miesiącach słonecznych. Attycki jest obrócony, bo rok zaczynał
 * się w lipcu — i to obrócenie jest jedyną wspólną rzeczą obu systemów.
 * Kliknięcie miesiąca wypisuje święta z obu stron.
 */
.tgr-strona {
	--marmur: #15120f; --dno: #0c0a08;
	--wlos: rgba( 226, 214, 190, .13 ); --obrys: rgba( 194, 88, 60, .36 );
	--figura: #c2583c; --figura-j: #e07a5a; --figura-t: rgba( 194, 88, 60, .14 );
	--braz: #b08d4a; --braz-j: #d9b56e; --braz-c: #6f5a2c;
	--oliwka: #6f7f4a; --oliwka-j: #9aab6a;
	--kosc: #ede4d3; --tynk: #cbbfa9;
	--tekst: #a69c8d; --tekst-slaby: #7f776b; --tekst-mocny: #ede4d3; --etyk: #8a8072;
	--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( 1180px 620px at 50% -12%, rgba( 194, 88, 60, .15 ), transparent 70% ),
		radial-gradient( 900px 560px at 10% 42%, rgba( 176, 141, 74, .1 ), transparent 72% ),
		radial-gradient( 860px 520px at 90% 74%, rgba( 111, 127, 74, .1 ), transparent 72% ),
		linear-gradient( 180deg, #1c1813, var( --marmur ) 46%, var( --dno ) );
	overflow-x: clip;
}
.tgr-strona *, .tgr-strona *::before, .tgr-strona *::after { box-sizing: border-box; }
body:has( .tgr-strona ) .wp-site-blocks > header, body:has( .tgr-strona ) header.wp-block-template-part, body:has( .tgr-strona ) .wp-site-blocks > footer, body:has( .tgr-strona ) footer.wp-block-template-part, body:has( .tgr-strona ) .wp-block-post-title { display: none !important; }
body:has( .tgr-strona ) .wp-site-blocks, body:has( .tgr-strona ) .wp-block-group, body:has( .tgr-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tgr-strona ) .wp-block-post-content > *, body:has( .tgr-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tgr-strona ) { background: #15120f; }
body:has( .tgr-strona ) .wp-block-post-content > .tgr-strona, body:has( .tgr-strona ) .entry-content > .tgr-strona, .tgr-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tgr-strona button { font-family: inherit; }

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

/* ══════════════  HERO  ══════════════ */
.tgr-hero { position: relative; max-width: 84ch; padding: 46px 0 8px; }
.tgr-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tgr-tytul { margin: 0; font: 500 clamp( 46px, 5.6vw, 84px )/1.02 var( --serif ); color: var( --figura-j ); letter-spacing: -.01em; text-shadow: 0 0 60px rgba( 194, 88, 60, .35 ); }
.tgr-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; line-height: 1.5; color: var( --tynk ); }
.tgr-lead { margin: 24px 0 0; font-size: 16.5px; line-height: 1.78; color: var( --tekst-mocny ); }
/* Pas liczb: CZTERY rowne kolumny w jednym rzedzie, wysrodkowane pod
   uwertura. 1180 px to szerokosc, przy ktorej kafel ma 283 px — tyle,
   ile mial naturalnie — wiec nie robi sie w nim pusto. */
.tgr-hero__liczby { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; max-width: 1180px; margin: 40px auto 0; }
.tgr-hero__liczby span { display: grid; align-content: center; gap: 3px; padding: 18px 24px; border: 1px solid var( --wlos ); border-left: 3px solid var( --braz ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, rgba( 176, 141, 74, .1 ), transparent ); }
.tgr-hero__liczby span:first-child { border-left-color: var( --figura ); background: linear-gradient( 100deg, rgba( 194, 88, 60, .16 ), transparent ); }
.tgr-hero__liczby b { font: 500 32px var( --serif ); color: var( --figura-j ); }
.tgr-hero__liczby span:not( :first-child ) b { color: var( --braz-j ); }
.tgr-hero__liczby i { font-style: normal; font-size: 11px; letter-spacing: .14em; color: var( --etyk ); }

/* ══════════════  sekcje i palmeta  ══════════════ */
.tgr-sekcja { position: relative; margin: 88px 0 0; }
.tgr-sekcja--scisla { padding: 36px 32px 42px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 980px 470px at 50% 0%, rgba( 194, 88, 60, .1 ), transparent 66% ), linear-gradient( 180deg, rgba( 34, 28, 22, .9 ), rgba( 12, 10, 8, .96 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 ); }
.tgr-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tgr-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3.1vw, 42px )/1.14 var( --serif ); color: var( --figura-j ); }
.tgr-sekcja__lead { max-width: 80ch; margin: 14px 0 0; font-size: 15px; line-height: 1.76; color: var( --tekst ); }
.tgr-sekcja--rzym .tgr-sekcja__tytul { color: var( --braz-j ); }
.tgr-sekcja--nie .tgr-sekcja__tytul { color: var( --oliwka-j ); }

/* Palmeta antefiksu jako przerywnik. */
.tgr-palmeta { display: block; width: 100%; height: 24px; margin: 64px 0 -34px; color: var( --braz ); opacity: .35; }

/* ══════════════  DWA KOŁA ROKU — podpis strony  ══════════════ */
/* Kolo zostaje po lewej, karty miesiaca staja po jego PRAWEJ stronie, jedna
   pod druga, i rozciagaja sie na cala jego wysokosc — inaczej obok rysunku
   zostawala pusta polowa ekranu. */
.tgr-rok { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); gap: 26px 40px; align-items: stretch; margin-top: 30px; }
.tgr-rok__kolo { position: relative; padding: 18px; border: 1px solid var( --wlos ); border-radius: 22px; background: radial-gradient( 70% 60% at 50% 40%, rgba( 176, 141, 74, .08 ), transparent 72% ); }
.tgr-rok__kolo svg { display: block; width: 100%; height: auto; filter: drop-shadow( 0 22px 44px rgba( 0, 0, 0, .8 ) ); }
.tgr-rok__podpis { margin: 12px 0 0; font-size: 11.5px; letter-spacing: .1em; text-align: center; color: var( --tekst-slaby ); }

/* ── TARCZA: wycinki, etykiety po łuku, nacięcia, szprychy ─────────────
   Wycinek leży NA gradiencie brązu, więc jego wypełnienie jest przezroczyste
   i tylko barwi; wybrany dostaje pełną barwę, poświatę z filtra SVG i lekkie
   uniesienie. Nacięcia przy krawędzi zewnętrznej to święta — jedno na jedno. */
.tgr-mies { cursor: pointer; fill: transparent; stroke: none; transition: fill .35s, filter .35s, transform .35s; transform-box: fill-box; transform-origin: center; }
.tgr-mies.jest-gr:hover { fill: rgba( 224, 122, 90, .22 ); }
.tgr-mies.jest-rz:hover { fill: rgba( 217, 181, 110, .22 ); }
.tgr-mies.jest-wybrane.jest-gr { fill: rgba( 224, 122, 90, .78 ); filter: url( #tgr-glow ); transform: scale( 1.03 ); }
.tgr-mies.jest-wybrane.jest-rz { fill: rgba( 217, 181, 110, .8 ); filter: url( #tgr-glow ); transform: scale( 1.03 ); }
/* Wycinek ma tabindex, wiec po klikniecu Chrome rysowal wokol niego bialy
   PROSTOKAT — ramke fokusu obejmujaca bbox sciezki, ktora nijak sie ma do
   ksztaltu tarczy. Zdejmujemy obrys; fokus z klawiatury pokazujemy jasna
   kreska po samym wycinku, czyli po jego wlasnym ksztalcie. */
.tgr-mies:focus { outline: none; }
.tgr-mies:focus-visible { outline: none; stroke: var( --kosc ); stroke-width: 1.6; }

.tgr-mies-nazwa { pointer-events: none; font: 400 8.6px var( --sans ); letter-spacing: .12em; text-transform: uppercase; fill: var( --tynk ); opacity: .8; transition: fill .35s, opacity .35s; }
.tgr-mies-nazwa.jest-wybrane { fill: var( --marmur ); opacity: 1; font-weight: 500; }
/* Wewnetrzny pierscien ma krotszy luk: mniejsze litery i ciasniejszy swiatlo. */
.tgr-mies-nazwa.jest-wewnetrzna { font-size: 7.3px; letter-spacing: .06em; }
.tgr-grawer { stroke: rgba( 0, 0, 0, .6 ); stroke-width: 1.1; pointer-events: none; }
.tgr-naciecie { stroke: var( --kosc ); stroke-width: 1.4; stroke-linecap: round; opacity: .7; pointer-events: none; transition: opacity .35s, stroke .35s; }
.tgr-naciecie.jest-wybrane { stroke: var( --marmur ); opacity: 1; }
.tgr-szprycha { stroke: rgba( 217, 181, 110, .2 ); stroke-width: 1.2; transition: stroke .35s, stroke-width .35s; pointer-events: none; }
.tgr-szprycha.jest-wybrane { stroke: var( --kosc ); stroke-width: 2.4; }
.tgr-mies-nr { pointer-events: none; font: 500 11px var( --sans ); fill: var( --tynk ); opacity: .8; transition: fill .35s, opacity .35s; }
.tgr-mies-nr.jest-wybrane { fill: var( --figura-j ); opacity: 1; }
.tgr-os { font: 400 10px var( --sans ); letter-spacing: .2em; fill: var( --etyk ); }
.tgr-fazka { pointer-events: none; }
.tgr-cien-tarczy { filter: blur( 6px ); }

.tgr-rok__karta { display: flex; flex-direction: column; min-width: 0; margin-top: 0; }
.tgr-rok__karta h3 { margin: 0 0 14px; font: 500 26px var( --serif ); color: var( --tekst-mocny ); }
.tgr-rok__karta h3 small { display: block; margin-top: 4px; font: 300 12px var( --sans ); letter-spacing: .14em; text-transform: uppercase; color: var( --etyk ); }
/* Jedna kolumna, dwa rzedy tej samej wysokosci: `1fr` w `grid-auto-rows`
   sprawia, ze panele wypelniaja to, co zostaje pod naglowkiem miesiaca. */
.tgr-rok__dwa { flex: 1; display: grid; grid-template-columns: minmax( 0, 1fr ); grid-auto-rows: 1fr; gap: 16px; min-height: 0; }
.tgr-rok__strona { min-width: 0; overflow: auto; padding: 18px 20px; border: 1px solid var( --wlos ); border-top: 2px solid var( --figura ); border-radius: 0 0 16px 16px; background: linear-gradient( 180deg, rgba( 194, 88, 60, .08 ), transparent ); }
.tgr-rok__strona.jest-rz { border-top-color: var( --braz ); background: linear-gradient( 180deg, rgba( 176, 141, 74, .09 ), transparent ); }
.tgr-rok__strona u { display: block; margin-bottom: 10px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var( --etyk ); }
.tgr-rok__strona u b { font-weight: 500; color: var( --kosc ); letter-spacing: .1em; text-transform: none; font-size: 12px; }
.tgr-swieto { padding: 10px 0; border-top: 1px dashed var( --wlos ); }
.tgr-swieto:first-of-type { border-top: 0; padding-top: 0; }
.tgr-swieto b { display: block; font: 500 18px var( --serif ); color: var( --tekst-mocny ); }
.tgr-swieto i { display: block; margin: 1px 0 4px; font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var( --figura-j ); }
.jest-rz .tgr-swieto i { color: var( --braz-j ); }
.tgr-swieto p { margin: 0; font-size: 13px; line-height: 1.62; color: var( --tekst ); }
.tgr-rok__pusto { padding: 14px 0 0; font-size: 13px; color: var( --tekst-slaby ); }

/* ══════════════  kafle wspólne  ══════════════ */
.tgr-bostwa, .tgr-praktyki, .tgr-granice, .tgr-ramy__siatka, .tgr-zrodla, .tgr-rodzaje, .tgr-etapy, .tgr-skladniki, .tgr-pytania, .tgr-echa { display: grid; grid-template-columns: repeat( auto-fit, minmax( 264px, 1fr ) ); gap: 16px; margin-top: 28px; }
.tgr-kafel, .tgr-granice > div, .tgr-ramy__siatka > div { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 20px; overflow: hidden; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 226, 214, 190, .05 ), rgba( 226, 214, 190, .012 ) ); transition: border-color .3s, transform .3s, box-shadow .3s, background .3s; }
.tgr-kafel::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient( 180deg, transparent, var( --figura ), transparent ); opacity: .55; }
.tgr-sekcja--rzym .tgr-kafel::before { background: linear-gradient( 180deg, transparent, var( --braz ), transparent ); }
.tgr-kafel:hover, .tgr-granice > div:hover, .tgr-ramy__siatka > div:hover { border-color: var( --obrys ); transform: translateY( -3px ); background: linear-gradient( 180deg, rgba( 194, 88, 60, .09 ), rgba( 226, 214, 190, .02 ) ); box-shadow: 0 30px 66px -40px rgba( 0, 0, 0, .92 ), 0 0 34px -18px rgba( 194, 88, 60, .45 ); }
.tgr-kafel h3 { margin: 0 0 6px; font: 500 23px var( --serif ); color: var( --tekst-mocny ); }
.tgr-kafel p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
/* Nadtytuły są SPAN-ami: w torze widać tylko pierwszy <p>. */
.tgr-kafel__gdzie { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var( --oliwka-j ); }
.tgr-kafel__gdzie i { font-style: normal; color: var( --figura-j ); }
.tgr-kafel__kto { display: block; margin: 0 0 6px; font-size: 11.5px; letter-spacing: .08em; color: var( --braz-j ); }
.tgr-kafel__rzym { display: block; margin: 2px 0 0; font: italic 300 12.5px var( --sans ); color: var( --tekst-slaby ); }
.tgr-kafel__rzym::before { content: 'Rzym: '; font-style: normal; letter-spacing: .1em; text-transform: uppercase; font-size: 9.5px; color: var( --braz-j ); }
.tgr-roznica { display: block; margin: 12px 0 0; padding: 12px 15px; border: 1px dashed var( --wlos ); border-left: 2px solid var( --braz ); border-radius: 12px; font-size: 12.5px; line-height: 1.6; color: var( --tekst-slaby ); }
.tgr-roznica b { display: block; margin-bottom: 5px; font: 400 9.5px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --braz-j ); }
.tgr-bostwa .tgr-kafel h3 { font-size: 21px; color: var( --figura-j ); }
.tgr-bostwa .tgr-kafel.jest-rzymski h3 { color: var( --braz-j ); }

.tgr-granice b, .tgr-ramy__siatka b { display: block; margin-bottom: 8px; font: 500 18px var( --serif ); color: var( --tekst-mocny ); }
.tgr-granice p, .tgr-ramy__siatka p { margin: 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
.tgr-granice u, .tgr-ramy__siatka u { display: block; margin-bottom: 7px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var( --braz-c ); }
.tgr-ramy__siatka > div { border-left: 2px solid var( --oliwka ); }
.tgr-ramy__siatka i { display: block; margin-bottom: 10px; font-style: normal; font-size: 16px; color: var( --oliwka-j ); }
.tgr-ramy__siatka u { color: var( --oliwka-j ); }
/* kosmogonia jako ciąg: numer niesie kolejność, bo to jest sekwencja rodzenia */
.tgr-etapy > div { counter-increment: etap; }
.tgr-etapy > div::before { content: counter( etap ); display: block; margin-bottom: 8px; font: 500 22px var( --serif ); color: var( --figura-j ); opacity: .8; }
.tgr-etapy { counter-reset: etap; }

.tgr-kafel .zd-klocek__skrot { display: contents; }
.tgr-zd-wiecej { margin-top: auto; }

@media ( max-width: 960px ) {
	.tgr-rok { grid-template-columns: minmax( 0, 1fr ); }
	.tgr-rok__kolo { max-width: 440px; margin: 0 auto; width: 100%; }
	/* Bez kola obok nie ma czego wypelniac — panele dostaja wlasna wysokosc. */
	.tgr-rok__dwa { grid-auto-rows: auto; }
	.tgr-rok__strona { overflow: visible; }
}
@media ( max-width: 780px ) {
	.tgr-strona { padding: 0 18px 70px; }
	.tgr-sekcja { margin-top: 58px; }
	.tgr-sekcja--scisla { padding: 26px 18px 30px; }
	.tgr-poziom { margin: 6px 0 0; }
	.tgr-hero__liczby { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 12px; margin-top: 30px; }
}
@media ( max-width: 520px ) {
	.tgr-hero__liczby { grid-template-columns: minmax( 0, 1fr ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.tgr-strona *, .tgr-strona *::before, .tgr-strona *::after { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KASETON — panel jako wglebienie w stropie, nie karta na tle.
   ══════════════════════════════════════════════════════════════════════════
   Rzymski strop kasetonowy (Panteon) to siatka kwadratowych zaglebien, z
   ktorych kazde ma kilka cofajacych sie stopni. Swiatlo pada z gory, wiec
   gorna krawedz kasetonu jest jasna, a pod dolna lezy cien — i to jest cala
   tajemnica jego glebi. Robimy dokladnie to samo cieniami wewnetrznymi:
   jasna kreska u gory, ciemna u dolu, drugi stopien odsuniety o kilka pikseli.

   Dlatego panele NIE unosza sie przy najechaniu. Kaseton jest w stropie i nie
   moze z niego wystac — zamiast tego mocniej lapie swiatlo. */

.tgr-strona .tgr-kafel,
.tgr-strona .tgr-granice > div,
.tgr-strona .tgr-ramy__siatka > div,
.tgr-strona .tgr-rok__strona {
	--kas-swiatlo: rgba( 237, 228, 211, .1 );
	--kas-cien: rgba( 0, 0, 0, .55 );
	box-shadow:
		inset 0 1px 0 var( --kas-swiatlo ),
		inset 0 -1px 0 var( --kas-cien ),
		0 24px 56px -34px rgba( 0, 0, 0, .92 );
}

/* Drugi stopien kasetonu: ramka odsunieta do srodka, z wlasnym swiatlem
   u gory i cieniem u dolu. To on daje wrazenie glebokosci. */
.tgr-strona .tgr-kafel::after,
.tgr-strona .tgr-granice > div::after,
.tgr-strona .tgr-ramy__siatka > div::after,
.tgr-strona .tgr-rok__strona::after {
	content: '';
	position: absolute;
	inset: 7px;
	pointer-events: none;
	border-radius: inherit;
	box-shadow:
		inset 0 1px 0 rgba( 237, 228, 211, .055 ),
		inset 0 -1px 0 rgba( 0, 0, 0, .4 );
	transition: box-shadow .32s;
}
.tgr-granice > div, .tgr-ramy__siatka > div, .tgr-rok__strona { position: relative; }

/* Najechanie: kaseton nie wychodzi ze stropu, tylko wpada w nie swiatlo. */
.tgr-strona .tgr-kafel:hover,
.tgr-strona .tgr-granice > div:hover,
.tgr-strona .tgr-ramy__siatka > div:hover {
	transform: none;
	border-color: var( --obrys );
	box-shadow:
		inset 0 1px 0 rgba( 237, 228, 211, .2 ),
		inset 0 -1px 0 var( --kas-cien ),
		inset 0 22px 46px -30px rgba( 224, 122, 90, .5 ),
		0 30px 66px -34px rgba( 0, 0, 0, .95 );
}
.tgr-strona .tgr-kafel:hover::after,
.tgr-strona .tgr-granice > div:hover::after,
.tgr-strona .tgr-ramy__siatka > div:hover::after {
	box-shadow:
		inset 0 1px 0 rgba( 237, 228, 211, .13 ),
		inset 0 -1px 0 rgba( 0, 0, 0, .5 );
}

/* ── OKULUS ─────────────────────────────────────────────────────────────
   Panteon ma jeden otwor w szczycie kopuly i cale wnetrze oswietla krag
   swiatla, ktory po nim wedruje. Sekcje scisle dostaja ten sam zrodlo
   swiatla: okragla poswiate u gory, z cienka obreczka. */
.tgr-sekcja--scisla {
	background:
		radial-gradient( 420px 420px at 50% -120px, rgba( 237, 228, 211, .1 ), transparent 68% ),
		radial-gradient( 980px 470px at 50% 0%, rgba( 194, 88, 60, .11 ), transparent 66% ),
		linear-gradient( 180deg, rgba( 34, 28, 22, .92 ), rgba( 12, 10, 8, .97 ) );
}
.tgr-sekcja--scisla::before {
	content: '';
	position: absolute;
	left: 50%; top: -1px;
	width: 260px; height: 260px;
	margin-left: -130px;
	pointer-events: none;
	border-radius: 50%;
	border-top: 1px solid rgba( 237, 228, 211, .16 );
	-webkit-mask-image: linear-gradient( 180deg, #000, transparent 45% );
	mask-image: linear-gradient( 180deg, #000, transparent 45% );
}

/* ── INTERPUNKT ─────────────────────────────────────────────────────────
   W inskrypcjach rzymskich slowa rozdzielano kropka w polowie wysokosci
   litery. Nadtytul sekcji dostaje ja po obu stronach — to jedyny ozdobnik
   w tekscie i jest cytatem z liternictwa, nie ozdoba z polki. */
.tgr-sekcja__nad::before { content: '· '; color: var( --braz ); }
.tgr-sekcja__nad::after  { content: ' ·'; color: var( --braz ); }

/* ── JAJOWNIK ───────────────────────────────────────────────────────────
   Gzyms z jajami i strzalkami — najbardziej rozpoznawalny profil grecki
   i rzymski, obecny na kazdym porzadku jonskim i korynckim. Zastapil
   palmete: jedna ozdoba na strone wystarczy. */
.tgr-jajownik { display: block; width: 100%; height: 26px; margin: 64px 0 -30px; color: var( --braz ); opacity: .42; }
.tgr-jajownik .tgr-jaj-cien { opacity: .5; }

/* Karty miesiaca: kaseton z wlasnym swiatlem po stronie, do ktorej naleza. */
.tgr-rok__strona { border-top-width: 2px; }
.tgr-rok__strona::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 52px;
	pointer-events: none;
	background: linear-gradient( 180deg, rgba( 194, 88, 60, .14 ), transparent );
}
.tgr-rok__strona.jest-rz::before { background: linear-gradient( 180deg, rgba( 176, 141, 74, .15 ), transparent ); }

/* Kolo w kasetonie: obreczka i cien pod rysunkiem. */
.tgr-strona .tgr-rok__kolo {
	box-shadow: inset 0 1px 0 rgba( 237, 228, 211, .08 ), inset 0 -1px 0 rgba( 0, 0, 0, .5 ), 0 30px 70px -40px rgba( 0, 0, 0, .95 );
}

@media ( prefers-reduced-motion: reduce ) {
	.tgr-kafel::after, .tgr-granice > div::after, .tgr-ramy__siatka > div::after, .tgr-rok__strona::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GRAFIKI OD PRZEMA — karty bogow, tla sekcji, ozdoby na czerni.
   Ozdoby przychodza na czystej czerni, wiec `mix-blend-mode: screen` wtapia
   je w ciemne tlo bez wycinania: czern znika, zloto zostaje. Brak pliku jest
   cichy — PHP nie wypisuje wtedy znacznika i nic nie wisi w powietrzu.
   ══════════════════════════════════════════════════════════════════════════ */

/* Karta boga: kwadrat W CALOSCI (decyzja Przema z Arabii), wlasna obwodka. */
.tgr-karta { margin: 0 0 14px; overflow: hidden; border-radius: 12px; border: 1px solid rgba( 217, 181, 110, .28 ); box-shadow: 0 18px 40px -22px rgba( 0, 0, 0, .95 ); aspect-ratio: 1 / 1; }
.tgr-karta img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* W oknie karta ze skrotu rosnie do plakatu; w kaflu zostaje miniatura. */
.zd-tlo .tgr-karta { max-width: 560px; margin: 0 0 22px; border-radius: 16px; }

/* Pola w oknie: atrybuty, kult, co Rzym zmienil. */
.tgr-pole { margin: 16px 0 0; padding: 14px 18px; border-left: 2px solid rgba( 226, 214, 190, .3 ); border-radius: 0 12px 12px 0; background: rgba( 226, 214, 190, .045 ); font-size: 13.5px; line-height: 1.66; }
.tgr-pole b { display: block; margin-bottom: 6px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --tynk ); }
.tgr-pole--kult { border-left-color: var( --oliwka-j ); background: rgba( 111, 127, 74, .1 ); }
.tgr-pole--kult b { color: var( --oliwka-j ); }
.tgr-pole--rzym { border-left-color: var( --braz ); background: rgba( 176, 141, 74, .1 ); }
.tgr-pole--rzym b { color: var( --braz-j ); }

/* MIEJSCE w eposie: wskazanie ustepu i jego tresc naszymi slowami. Zlota
   kreska po lewej jak marginalium w rekopisie; etykieta „nasze slowa" jest
   czescia projektu, nie przypisem — czytelnik ma wiedziec, ze to nie cytat. */
.tgr-miejsce { position: relative; margin: 20px 0 0; padding: 18px 22px 16px 26px; border-left: 3px solid var( --braz ); border-radius: 0 14px 14px 0; background: linear-gradient( 100deg, rgba( 176, 141, 74, .12 ), transparent 70% ); }
.tgr-miejsce__gdzie { display: block; margin-bottom: 8px; font: 500 12px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --braz-j ); }
.tgr-miejsce p { margin: 0; font: italic 400 16.5px/1.6 var( --serif ); color: var( --kosc ); }
.tgr-miejsce__jak { display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var( --tekst-slaby ); }

/* ══ UWERTURA: panorama jako pas otwierajacy sekcje ══════════════════════
   Panoramy od Przema maja 2,33:1 i sa scenami, nie fakturami. Rozciagniete
   pod tekstem robily sie bloto, wiec dostaja to, czym sa: PAS OTWIERAJACY
   na calej szerokosci sekcji, a nadtytul i tytul siadaja NA nim, jak napis
   na architrawie. Pas gasnie w dol, wiec tresc pod nim czyta sie normalnie.

   Tylko te cztery sekcje maja uwerture — reszta zaczyna sie sucho. To rytm
   strony: scena, gestwina tekstu, scena. */
.tgr-sekcja--tlo { position: relative; overflow: hidden; padding-top: 210px; }
.tgr-sekcja--tlo::after {
	content: ''; position: absolute; left: 0; right: 0; top: 0; height: 330px; z-index: 0; pointer-events: none;
	background: var( --tlo ) center 30% / cover no-repeat;
	-webkit-mask-image: linear-gradient( 180deg, #000 0%, #000 42%, transparent 100% );
	mask-image: linear-gradient( 180deg, #000 0%, #000 42%, transparent 100% );
}
/* Cien pod napisem — bez niego kapitala ginie na jasnym niebie panoramy. */
.tgr-sekcja--tlo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 330px; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba( 12, 10, 8, .5 ) 0%, rgba( 12, 10, 8, .1 ) 40%, rgba( 12, 10, 8, .78 ) 88%, var( --marmur ) 100% ); border-radius: inherit; }
.tgr-sekcja--tlo > * { position: relative; z-index: 2; }

/* Tytul na pasie: RZYMSKA KAPITALA. Inskrypcja na budynku nie jest pisana
   antykwa z malymi literami — jest ryta wersalikami z szerokim swiatlem.
   Stad wyjatek od kroju serif uzywanego w reszcie strony. */
.tgr-sekcja--tlo .tgr-sekcja__nad { margin-top: -150px; color: rgba( 237, 228, 211, .7 ); text-shadow: 0 2px 10px rgba( 0, 0, 0, .9 ); }
.tgr-sekcja--tlo .tgr-sekcja__tytul { margin-top: 10px; font: 300 clamp( 30px, 3.6vw, 52px )/1.06 var( --sans ); letter-spacing: .22em; text-transform: uppercase; color: var( --kosc ); text-shadow: 0 3px 22px rgba( 0, 0, 0, .95 ), 0 0 60px rgba( 255, 236, 205, .25 ); }
/* Lead MUSI zejsc pod pas — na obrazie ginie. Tytul dostaje margines dolny
   liczony tak, zeby wszystko po nim zaczynalo sie ponizej 330 px pasa. */
.tgr-sekcja--tlo .tgr-sekcja__tytul { margin-bottom: 178px; }
.tgr-sekcja--tlo .tgr-sekcja__lead { margin-top: 0; }
.tgr-hero.tgr-sekcja--tlo .tgr-tytul { margin-bottom: 0; }

/* Hero: ta sama uwertura, tylko na calej szerokosci strony. */
.tgr-hero.tgr-sekcja--tlo { max-width: none; margin: 0 -40px; padding: 210px 40px 34px; border-radius: 0 0 30px 30px; }
.tgr-hero.tgr-sekcja--tlo::after { height: 560px; background-position: center 42%; }
.tgr-hero.tgr-sekcja--tlo::before { height: 560px; }
.tgr-hero__tresc { max-width: 84ch; }
.tgr-hero.tgr-sekcja--tlo .tgr-tytul { text-shadow: 0 4px 30px rgba( 0, 0, 0, .95 ), 0 0 70px rgba( 224, 122, 90, .4 ); }

/* Ozdoby na czerni wtopione trybem screen. Kazda stoi tam, gdzie coś znaczy:
   orzel z piorunem — Jowisz i panstwo (hero); orzel legionowy — „Pokoj
   z bogami"; wieniec — bogowie; naroznik — panel z podpisem strony.
   Trojzab wypadl: to atrybut Neptuna, a nie znak sekcji o wedrowce kultow. */
/* Czern wypalona w plikach na przezroczystosc, wiec ZADNEGO trybu mieszania:
   `screen` nad ciemnym tlem zostawial wokol ozdoby jasniejszy prostokat, bo
   czern w PNG miala ok. #0a0a0a, nie zero. Teraz ozdoba dziala tak samo nad
   panorama, jak nad tlem strony. */
.tgr-ozdoba { position: absolute; z-index: 1; pointer-events: none; }
/* Orzel z piorunem stoi z boku, nizej niz tytul — ma towarzyszyc, nie zagluszac. */
.tgr-ozdoba--hero { right: 10px; top: 280px; width: clamp( 190px, 21vw, 330px ); opacity: .9; filter: drop-shadow( 0 12px 40px rgba( 0, 0, 0, .8 ) ); }
.tgr-ozdoba--naroznik { right: -18px; top: -18px; width: 290px; opacity: .55; }
.tgr-ozdoba--wieniec { right: 26px; top: 18px; width: 230px; opacity: .5; }
.tgr-ozdoba--orzel { right: 34px; top: 210px; width: clamp( 170px, 19vw, 300px ); opacity: .85; filter: drop-shadow( 0 10px 34px rgba( 0, 0, 0, .8 ) ); }
.tgr-sekcja--scisla { overflow: hidden; }

/* Zlota podzialka od Przema — zastepuje rysowany jajownik przy duzych cieciach. */
/* Plik ma 10,5% przezroczystego pasa u gory i 12,9% u dolu (zmierzone na
   alfie), czyli przy 820 px szerokosci 29 px + 35 px niewidocznego
   marginesu. Marginesy ujemne zjadaja to powietrze, zeby odstep liczyl
   sie od WIDOCZNEJ ozdoby, a nie od krawedzi obrazka. */
.tgr-podzialka { display: block; width: min( 100%, 820px ); height: auto; margin: 19px auto -67px; opacity: .95; filter: drop-shadow( 0 0 28px rgba( 255, 200, 120, .2 ) ); }

@media ( max-width: 780px ) {
	.tgr-hero.tgr-sekcja--tlo { margin: 0 -18px; padding: 150px 18px 24px; }
	.tgr-hero.tgr-sekcja--tlo::after, .tgr-hero.tgr-sekcja--tlo::before { height: 400px; }
	.tgr-sekcja--tlo { padding-top: 150px; }
	.tgr-sekcja--tlo::after, .tgr-sekcja--tlo::before { height: 250px; }
	.tgr-sekcja--tlo .tgr-sekcja__nad { margin-top: -108px; }
	.tgr-sekcja--tlo .tgr-sekcja__tytul { margin-bottom: 116px; }
	.tgr-ozdoba--hero { width: 220px; right: -20px; opacity: .55; }
	.tgr-ozdoba--orzel { width: 170px; right: 10px; opacity: .5; }
	.tgr-ozdoba--naroznik, .tgr-ozdoba--wieniec { width: 160px; }
}

/* ══════════════  WYROCZNIE: procedura i prawdziwe pytania  ══════════════
   Kroki sa numerowane naprawde, bo w obrzedzie kolejnosc byla wiazaca —
   numer niesie informacje, nie ozdobe. Pytania dostaja przypis o zrodle
   ustawiony pod spodem, mniejszym stopniem: mowi SKAD wiemy, nie cytuje. */
.tgr-podtyt { margin: 30px 0 12px; font: 400 11px var( --sans ); letter-spacing: .28em; text-transform: uppercase; color: var( --etyk ); }
.tgr-podtyt::after { content: ''; display: block; width: 46px; height: 1px; margin-top: 9px; background: linear-gradient( 90deg, var( --figura ), transparent ); }

.tgr-kroki { counter-reset: krok; margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tgr-kroki li { counter-increment: krok; position: relative; padding: 11px 16px 11px 50px; border: 1px solid var( --wlos ); border-radius: 3px 14px 14px 3px; background: linear-gradient( 100deg, rgba( 176, 141, 74, .09 ), transparent 72% ); font-size: 14px; line-height: 1.62; color: var( --tekst ); }
.tgr-kroki li::before { content: counter( krok ); position: absolute; left: 15px; top: 10px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba( 176, 141, 74, .4 ); border-radius: 50%; font: 500 12px var( --serif ); color: var( --braz-j ); }

/* NIE „tgr-pytania” — ta nazwa jest juz zajeta przez siatke wyzej, a
   koncowka -pytania jest na liscie blokow, ktore warstwa wspolna sama
   zamienia w suwak przy czterech elementach. Zdania w suwaku sie nie
   czyta, wiec wlasna nazwa i jedna kolumna. */
.tgr-pyt { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax( 0, 1fr ); gap: 12px; }
.tgr-pyt li { padding: 13px 18px; border-left: 2px solid var( --figura ); border-radius: 0 14px 14px 0; background: rgba( 194, 88, 60, .07 ); }
.tgr-pyt__tresc { display: block; font-size: 14.5px; line-height: 1.66; color: var( --tekst-mocny ); }
.tgr-pyt__skad { display: block; margin-top: 7px; font-size: 11px; letter-spacing: .06em; color: var( --tekst-slaby ); }
.tgr-pyt__skad::before { content: 'skąd wiemy: '; letter-spacing: .16em; text-transform: uppercase; color: var( --etyk ); }
@media ( max-width: 680px ) {
	.tgr-kroki li { padding: 10px 13px 10px 44px; }
}

/* ══════════════  KROJ TEKSTU CIAGLEGO  ══════════════
   Przemo, 2026-09-10: Jost mu sie nie podoba, tekst ciagly ma isc tym samym
   krojem co tytuly i nazwy. Cormorant jest lzejszy optycznie od Josta przy
   tym samym stopniu, wiec akapity dostaja wiekszy rozmiar i mniejsza
   interlinie — inaczej robia sie szare i rzadkie.
   NIE ruszamy nadtytulow, etykiet i wersalikow: rozstrzelona kapitalika w
   szeryfowym kroju rozjezdza sie i traci czytelnosc, wiec te zostaja w Joscie. */
.tgr-strona { font-family: var( --serif ); font-size: 17px; }
.tgr-lead, .tgr-sekcja__lead, .tgr-kafel p, .tgr-kroki li,
.tgr-pyt__tresc, .tgr-uwaga, .tgr-pole {
	font-family: var( --serif );
}
.tgr-lead { font-size: 19px; line-height: 1.68; }
.tgr-sekcja__lead { font-size: 17.5px; line-height: 1.66; }
.tgr-kafel p { font-size: 16px; line-height: 1.6; }
.tgr-kroki li { font-size: 16px; line-height: 1.58; }
.tgr-pyt__tresc { font-size: 16.5px; line-height: 1.6; }

/* ── OKNO PO KLIKNIECIU ──
   DWIE PULAPKI, obie mnie ugryzly:
   1. `zdobienia.js` robi `document.body.appendChild(tlo)`, wiec okno stoi
      POZA `.tgr-strona`. Reguly scope'owane na `.tgr-strona` go nie widza.
      Stad `body:has(.tgr-strona)` — trafia w okno, a jednoczesnie dziala tylko
      na stronach tego dzialu, wiec nie ruszam pozostalych czterdziestu.
   2. `--serif` jest zdefiniowany na `.tgr-strona`, czyli w oknie NIE ISTNIEJE.
      `var(--serif)` rozwinaloby sie w nic. Dlatego zmienne trzeba powtorzyc na
      samym `.zd-tlo`, zanim sie ich uzyje.
   Specyficznosc `body:has(...)` bije `.zd-okno__tekst` z `zdobienia.css`,
   ktory laduje sie PO tym arkuszu — bez tego przegralibysmy kolejnoscia. */
body:has( .tgr-strona ) .zd-tlo {
	--serif: 'Cormorant Garamond', Georgia, serif;
	--sans: Jost, system-ui, sans-serif;
}
body:has( .tgr-strona ) .zd-okno__tekst,
body:has( .tgr-strona ) .zd-okno__pelne p,
body:has( .tgr-strona ) .zd-okno__gora p,
body:has( .tgr-strona ) .zd-okno p {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 20px;
	line-height: 1.72;
	color: #ddd3c4;
}
/* Tytul okna: rzymska kapitala inskrypcyjna z poswiata, jak na uwerturze. */
body:has( .tgr-strona ) .zd-okno__tytul,
body:has( .tgr-strona ) .zd-okno h3 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 34px, 3.4vw, 46px );
	font-weight: 500;
	letter-spacing: .015em;
	color: #f0d9b8;
	text-shadow: 0 0 42px rgba( 224, 122, 90, .45 ), 0 2px 18px rgba( 0, 0, 0, .8 );
}
/* Listwa pod tytulem — nie kreska, tylko zwezajaca sie wstega. */
body:has( .tgr-strona ) .zd-okno__gora::after {
	content: ''; display: block; height: 2px; margin: 18px 0 4px;
	background: linear-gradient( 90deg, rgba( 194, 88, 60, .85 ), rgba( 176, 141, 74, .5 ) 38%, transparent 88% );
	box-shadow: 0 0 18px rgba( 194, 88, 60, .45 );
}
/* Tlo okna: przejscie tonalne zamiast plaskiej plyty, plus poswiata od gory. */
body:has( .tgr-strona ) .zd-okno {
	background:
		radial-gradient( 120% 70% at 50% -6%, rgba( 194, 88, 60, .17 ), transparent 62% ),
		radial-gradient( 90% 60% at 92% 108%, rgba( 176, 141, 74, .12 ), transparent 68% ),
		linear-gradient( 178deg, #241d18 0%, #171310 46%, #0e0b09 100% );
	border: 1px solid rgba( 176, 141, 74, .34 );
	box-shadow:
		inset 0 1px 0 rgba( 255, 224, 180, .1 ),
		0 0 0 1px rgba( 0, 0, 0, .6 ),
		0 40px 120px -40px rgba( 0, 0, 0, .95 ),
		0 0 90px -30px rgba( 194, 88, 60, .35 );
}
/* Cztery naroznikowe woluty rysowane obrysem — zdobnik, nie ramka. */
body:has( .tgr-strona ) .zd-okno::before,
body:has( .tgr-strona ) .zd-okno::after {
	content: ''; position: absolute; width: 62px; height: 62px; pointer-events: none;
	border-color: rgba( 214, 170, 106, .7 ); border-style: solid; border-width: 0;
	filter: drop-shadow( 0 0 10px rgba( 214, 170, 106, .45 ) );
}
body:has( .tgr-strona ) .zd-okno::before {
	left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px;
	border-radius: 16px 0 0 0;
}
body:has( .tgr-strona ) .zd-okno::after {
	right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px;
	border-radius: 0 0 16px 0;
}
/* Inicjal: pierwsza litera pierwszego akapitu jak w rekopisie. */
body:has( .tgr-strona ) .zd-okno__pelne > * > p:first-of-type::first-letter,
body:has( .tgr-strona ) .zd-okno__tekst:first-of-type::first-letter {
	float: left; margin: 6px 12px 0 0;
	font-size: 3.1em; line-height: .82; font-weight: 500;
	color: #e8bd86;
	text-shadow: 0 0 26px rgba( 224, 122, 90, .5 );
}
/* Wejscie: okno wschodzi, nie wskakuje. */
@media ( prefers-reduced-motion: no-preference ) {
	body:has( .tgr-strona ) .zd-tlo .zd-okno { animation: tgr-okno-wschodzi .42s cubic-bezier( .2, .7, .3, 1 ) both; }
	@keyframes tgr-okno-wschodzi {
		from { opacity: 0; transform: translateY( 16px ) scale( .985 ); filter: blur( 3px ); }
		to   { opacity: 1; transform: none; filter: none; }
	}
}
/* W oknie tez wersaliki i etykiety zostaja bezszeryfowe. */
body:has( .tgr-strona ) .zd-okno .tgr-kafel__gdzie,
body:has( .tgr-strona ) .zd-okno .tgr-podtyt,
body:has( .tgr-strona ) .zd-okno .tgr-pyt__skad,
body:has( .tgr-strona ) .zd-okno .zd-wiecej,
body:has( .tgr-strona ) .zd-okno__x {
	font-family: Jost, system-ui, sans-serif;
}
body:has( .tgr-strona ) .zd-okno .tgr-pyt__skad { font-size: 11px; line-height: 1.5; }

/* Wersaliki, etykiety, liczby i przyciski zostaja bezszeryfowe. */
.tgr-nad, .tgr-sciezka, .tgr-poziom span, .tgr-sekcja__nad, .tgr-podtyt,
.tgr-kafel__gdzie, .tgr-hero__liczby i, .tgr-pyt__skad,
.tgr-zd-wiecej, .tgr-rok__podpis, .tgr-strona button {
	font-family: var( --sans );
}