/* Celtowie - odległość między światem a jego zapisem.
 *
 * Paleta świadomie NIE jest szmaragdową zielenią z koniczyną. To barwa
 * pocztówki z Dublina, a nie tych ludów. Bierzemy trzy rzeczy, które przy nich
 * naprawdę są: torfowisko, w którym przetrwało wszystko, co o nich wiemy z
 * pierwszej ręki, złoto torkwesu z grobów książęcych i czerwoną emalię
 * wkładaną w brąz na całym obszarze kultury lateńskiej. Stąd zieleń wpadająca
 * w czerń, ciepłe złoto i jeden mocny czerwony akcent używany oszczędnie.
 *
 * ZDOBIENIE jest tu cytatem, nie ozdobnikiem: spirala i triskelion to własna
 * sztuka tych ludzi, jedyny język formalny, który zostawili po sobie w całości.
 * Dlatego wolno im zająć tło i przerywniki - a nie wolno im udawać pisma.
 *
 * PODPISEM strony jest OŚ TRZECH DAT: świat, zapis i najstarszy zachowany
 * rękopis w jednej skali czasu. Przy każdym twierdzeniu rozstęp jest inny, a
 * przy kalendarzu z Coligny trzy punkty zlewają się w jeden - i wtedy rysunek
 * musi to pokazać, zamiast udawać, że rozstęp jest.
 */
.tce-strona {
	--torf: #12160f; --dno: #0a0c08;
	--wlos: rgba( 207, 214, 200, .12 ); --obrys: rgba( 201, 162, 39, .34 );
	--woda: #2b4a3f; --woda-j: #4f8570; --woda-t: rgba( 79, 133, 112, .12 );
	--zloto: #c9a227; --zloto-j: #ecc766; --zloto-c: #8a6f1c;
	--emalia: #b0402c; --emalia-j: #d4674c;
	--mgla: #cfd6c8; --kosc: #e9e3d2;
	--tekst: #9aa294; --tekst-slaby: #767f71; --tekst-mocny: #e9e3d2; --etyk: #7f8878;
	--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( 201, 162, 39, .15 ), transparent 70% ),
		radial-gradient( 940px 560px at 12% 40%, rgba( 43, 74, 63, .3 ), transparent 72% ),
		radial-gradient( 860px 520px at 90% 76%, rgba( 176, 64, 44, .09 ), transparent 72% ),
		linear-gradient( 180deg, #171c14, var( --torf ) 46%, var( --dno ) );
	overflow-x: clip;
}
.tce-strona *, .tce-strona *::before, .tce-strona *::after { box-sizing: border-box; }
body:has( .tce-strona ) .wp-site-blocks > header, body:has( .tce-strona ) header.wp-block-template-part, body:has( .tce-strona ) .wp-site-blocks > footer, body:has( .tce-strona ) footer.wp-block-template-part, body:has( .tce-strona ) .wp-block-post-title { display: none !important; }
body:has( .tce-strona ) .wp-site-blocks, body:has( .tce-strona ) .wp-block-group, body:has( .tce-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tce-strona ) .wp-block-post-content > *, body:has( .tce-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tce-strona ) { background: #12160f; }
body:has( .tce-strona ) .wp-block-post-content > .tce-strona, body:has( .tce-strona ) .entry-content > .tce-strona, .tce-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tce-strona button { font-family: inherit; }

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

/* ══════════════  HERO - triskelion jako znak wodny  ══════════════ */
.tce-hero { position: relative; max-width: 84ch; padding: 46px 0 8px; }
.tce-znak { position: absolute; right: -190px; top: -30px; width: 430px; height: 430px; pointer-events: none; opacity: .17; color: var( --zloto ); animation: tce-obrot 190s linear infinite; }
@keyframes tce-obrot { to { transform: rotate( 360deg ); } }
.tce-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tce-tytul { margin: 0; font: 500 clamp( 46px, 5.6vw, 84px )/1.02 var( --serif ); color: var( --zloto-j ); letter-spacing: -.01em; text-shadow: 0 0 60px rgba( 201, 162, 39, .32 ); }
.tce-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; line-height: 1.5; color: var( --mgla ); }
.tce-lead { margin: 24px 0 0; font-size: 16.5px; line-height: 1.78; color: var( --tekst-mocny ); }

.tce-hero__liczby { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }
.tce-hero__liczby span { display: grid; gap: 3px; padding: 16px 22px; border: 1px solid var( --wlos ); border-left: 3px solid var( --woda-j ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, rgba( 79, 133, 112, .1 ), transparent ); }
.tce-hero__liczby span:first-child { border-left-color: var( --zloto ); background: linear-gradient( 100deg, rgba( 201, 162, 39, .16 ), transparent ); }
.tce-hero__liczby b { font: 500 32px var( --serif ); color: var( --zloto-j ); }
.tce-hero__liczby span:not( :first-child ) b { color: var( --mgla ); }
.tce-hero__liczby i { font-style: normal; font-size: 11px; letter-spacing: .14em; color: var( --etyk ); }

/* ══════════════  sekcje i przerywnik lateński  ══════════════ */
.tce-sekcja { position: relative; margin: 88px 0 0; }
.tce-sekcja--scisla { padding: 36px 32px 42px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 980px 470px at 50% 0%, rgba( 201, 162, 39, .1 ), transparent 66% ), linear-gradient( 180deg, rgba( 27, 33, 24, .9 ), rgba( 10, 12, 8, .96 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 ); }
.tce-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tce-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3.1vw, 42px )/1.14 var( --serif ); color: var( --zloto-j ); }
.tce-sekcja__lead { max-width: 80ch; margin: 14px 0 0; font-size: 15px; line-height: 1.76; color: var( --tekst ); }
.tce-sekcja--celtyzm .tce-sekcja__tytul { color: var( --woda-j ); }
.tce-sekcja--nieznali .tce-sekcja__tytul { color: var( --emalia-j ); }

/* Fala lateńska: linia rozdzielająca sekcje, nie tapeta. */
.tce-fala { display: block; width: 100%; height: 26px; margin: 64px 0 -34px; color: var( --zloto ); opacity: .3; }

/* ══════════════  OŚ TRZECH DAT - podpis strony  ══════════════ */
.tce-wybor { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.tce-wybor button { padding: 9px 16px; border: 1px solid var( --wlos ); border-radius: 999px; background: transparent; font-size: 13px; color: var( --tekst-slaby ); cursor: pointer; transition: color .22s, background .22s, border-color .22s, box-shadow .22s; }
.tce-wybor button:hover { color: var( --tekst-mocny ); border-color: var( --obrys ); }
.tce-wybor button[ aria-selected="true" ] { color: var( --torf ); border-color: var( --zloto ); background: linear-gradient( 180deg, var( --zloto-j ), var( --zloto ) ); box-shadow: 0 0 26px -6px rgba( 201, 162, 39, .65 ); }

.tce-teza { max-width: 74ch; margin: 0 0 26px; font: 400 19px/1.62 var( --serif ); color: var( --kosc ); }

.tce-os { position: relative; padding: 30px 26px 20px; border: 1px solid var( --wlos ); border-radius: 20px; background: linear-gradient( 180deg, rgba( 79, 133, 112, .08 ), rgba( 10, 12, 8, .5 ) ); }
.tce-os__tor { position: relative; height: 86px; }
/* Linia czasu - tło, po którym mierzymy. */
.tce-os__tor::before { content: ''; position: absolute; left: 0; right: 0; top: 42px; height: 1px; background: linear-gradient( 90deg, transparent, var( --wlos ) 6%, var( --wlos ) 94%, transparent ); }
.tce-os__podzialka { position: relative; height: 20px; margin-top: 2px; }
.tce-os__podzialka span { position: absolute; top: 0; transform: translateX( -50% ); font-size: 10px; letter-spacing: .14em; color: var( --etyk ); white-space: nowrap; }
.tce-os__podzialka span::before { content: ''; position: absolute; left: 50%; top: -8px; width: 1px; height: 6px; background: var( --wlos ); }

/* Rozstęp: im dłuższy, tym bardziej blaknie - odległość ma być widoczna
   także barwą, nie tylko szerokością. */
.tce-os__rozstep { position: absolute; top: 39px; height: 7px; border-radius: 999px; background: linear-gradient( 90deg, var( --zloto ), var( --woda-j ) ); box-shadow: 0 0 22px -6px rgba( 201, 162, 39, .6 ); transform-origin: left center; animation: tce-rozciag .55s cubic-bezier( .22, .8, .3, 1 ) both; }
.tce-os__rozstep--kopia { background: linear-gradient( 90deg, var( --woda-j ), rgba( 79, 133, 112, .35 ) ); box-shadow: none; animation-delay: .12s; }
@keyframes tce-rozciag { from { transform: scaleX( 0 ); opacity: .2; } to { transform: scaleX( 1 ); opacity: 1; } }

.tce-os__punkt { position: absolute; top: 42px; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border-radius: 999px; border: 2px solid var( --torf ); background: var( --mgla ); animation: tce-punkt .4s both; }
.tce-os__punkt::after { content: attr( data-rok ); position: absolute; left: 50%; top: -26px; transform: translateX( -50% ); font-size: 11.5px; letter-spacing: .08em; white-space: nowrap; color: var( --tekst-mocny ); }
.tce-os__punkt.jest-swiat { background: var( --zloto-j ); box-shadow: 0 0 20px rgba( 201, 162, 39, .8 ); }
.tce-os__punkt.jest-zapis { background: var( --woda-j ); }
.tce-os__punkt.jest-rekopis { background: var( --mgla ); }
.tce-os__punkt.jest-rekopis::after { top: auto; bottom: -26px; color: var( --tekst-slaby ); }
@keyframes tce-punkt { from { opacity: 0; transform: scale( .3 ); } to { opacity: 1; transform: none; } }

/* Trzy daty w jednym punkcie: pierścienie zamiast rozstępu. Rysunek nie może
   udawać odległości tam, gdzie jej nie ma. */
.tce-os__zbieg { position: absolute; top: 42px; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 999px; border: 1px solid var( --zloto ); box-shadow: 0 0 40px -6px rgba( 201, 162, 39, .8 ), inset 0 0 22px -6px rgba( 201, 162, 39, .7 ); animation: tce-tetno 3.4s ease-in-out infinite; }
@keyframes tce-tetno { 0%, 100% { transform: scale( 1 ); opacity: .85; } 50% { transform: scale( 1.12 ); opacity: .5; } }

.tce-os__miara { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 16px 0 0; font-size: 12px; letter-spacing: .1em; color: var( --tekst-slaby ); }
.tce-os__miara b { color: var( --zloto-j ); font-weight: 400; }
.tce-os__werdykt { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border: 1px solid var( --obrys ); border-radius: 999px; color: var( --zloto-j ); }

/* Trzy karty pod osią - tekst zawsze prosto, nigdy przy punkcie, bo przy
   zbiegu dat etykiety wchodziłyby na siebie. */
.tce-daty { display: grid; grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) ); gap: 14px; margin: 22px 0 0; }
.tce-daty > div { padding: 16px 18px; border: 1px solid var( --wlos ); border-top: 2px solid var( --woda-j ); border-radius: 0 0 14px 14px; background: linear-gradient( 180deg, rgba( 79, 133, 112, .09 ), transparent ); }
.tce-daty > div:first-child { border-top-color: var( --zloto ); background: linear-gradient( 180deg, rgba( 201, 162, 39, .13 ), transparent ); }
.tce-daty u { display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var( --etyk ); }
.tce-daty b { display: block; font: 500 26px var( --serif ); color: var( --tekst-mocny ); }
.tce-daty p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var( --tekst ); }

/* Łańcuch rąk. Liczba ogniw zmienia się razem z twierdzeniem. */
.tce-rece { margin: 26px 0 0; }
.tce-rece__nad { margin: 0 0 12px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --etyk ); }
.tce-rece__lista { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.tce-ogniwo { position: relative; flex: 1 1 190px; min-width: 0; padding: 14px 16px; border: 1px solid var( --wlos ); border-radius: 14px; background: rgba( 233, 227, 210, .035 ); animation: tce-ogniwo-wchodzi .4s both; animation-delay: calc( var( --nr, 0 ) * 110ms ); }
@keyframes tce-ogniwo-wchodzi { from { opacity: 0; transform: translateY( 10px ); } to { opacity: 1; transform: none; } }
.tce-ogniwo b { display: block; margin-bottom: 5px; font: 500 16px var( --serif ); color: var( --kosc ); }
.tce-ogniwo span { font-size: 12.5px; line-height: 1.55; color: var( --tekst-slaby ); }
.tce-ogniwo::before { content: attr( data-nr ); position: absolute; right: 12px; top: 10px; font-size: 10px; letter-spacing: .1em; color: var( --zloto-c ); }
/* Pusty łańcuch jest tu treścią, nie brakiem danych. */
.tce-rece__brak { padding: 18px 20px; border: 1px solid var( --obrys ); border-radius: 14px; background: linear-gradient( 100deg, rgba( 201, 162, 39, .12 ), transparent ); font-size: 14px; line-height: 1.68; color: var( --kosc ); }

.tce-komentarz { max-width: 78ch; margin: 24px 0 0; padding: 18px 22px; border-left: 2px solid var( --emalia ); border-radius: 0 14px 14px 0; background: rgba( 176, 64, 44, .08 ); font-size: 14.5px; line-height: 1.74; color: var( --tekst ); }

/* ══════════════  kafle wspólne  ══════════════ */
.tce-bostwa, .tce-praktyki, .tce-granice, .tce-ramy__siatka, .tce-zrodla, .tce-rodzaje, .tce-etapy, .tce-skladniki, .tce-pytania { display: grid; grid-template-columns: repeat( auto-fit, minmax( 264px, 1fr ) ); gap: 16px; margin-top: 28px; }
.tce-kafel, .tce-granice > div, .tce-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( 207, 214, 200, .05 ), rgba( 207, 214, 200, .012 ) ); transition: border-color .3s, transform .3s, box-shadow .3s, background .3s; }
/* Emalia w brązie: jeden czerwony punkt wtopiony w krawędź kafla. */
.tce-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( --zloto ), transparent ); opacity: .55; }
.tce-kafel:hover, .tce-granice > div:hover, .tce-ramy__siatka > div:hover { border-color: var( --obrys ); transform: translateY( -3px ); background: linear-gradient( 180deg, rgba( 201, 162, 39, .09 ), rgba( 207, 214, 200, .02 ) ); box-shadow: 0 30px 66px -40px rgba( 0, 0, 0, .92 ), 0 0 34px -18px rgba( 201, 162, 39, .45 ); }
.tce-kafel h3 { margin: 0 0 6px; font: 500 23px var( --serif ); color: var( --tekst-mocny ); }
.tce-kafel p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
/* Nadtytuły i etykiety są SPAN-ami, nie akapitami. Wspólna reguła toru
   pokazuje w kaflu tylko pierwszy <p>, więc nadtytuł zapisany akapitem
   zjadałby opis - sprawdzone pomiarem na żywej stronie. */
.tce-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( --woda-j ); }
.tce-kafel__gdzie i { font-style: normal; color: var( --zloto ); }
.tce-kafel__kiedy { display: block; margin: 0 0 6px; font-size: 11.5px; letter-spacing: .08em; color: var( --zloto-j ); }
.tce-kafel__jezyk { align-self: flex-start; display: inline-block; margin: 10px 0 0; padding: 4px 11px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 11px; letter-spacing: .1em; color: var( --mgla ); }

.tce-pole { margin-top: 16px !important; padding: 15px 18px; border-left: 2px solid rgba( 207, 214, 200, .3 ); border-radius: 0 12px 12px 0; background: rgba( 207, 214, 200, .045 ); font-size: 13px !important; }
.tce-pole b { display: block; margin-bottom: 6px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --mgla ); }
.tce-pole--waga { border-left-color: var( --emalia ); background: rgba( 176, 64, 44, .1 ); }
.tce-pole--waga b { color: var( --emalia-j ); }
.tce-pole--zrodlo { border-left-color: var( --woda-j ); background: rgba( 79, 133, 112, .1 ); }
.tce-pole--zrodlo b { color: var( --woda-j ); }

/* ══════════════  bóstwa: poświadczenie jako pierwsza informacja  ══════════════ */
.tce-bostwa .tce-kafel h3 { font-size: 21px; color: var( --zloto-j ); }
.tce-swiadectwo { display: block; margin: 12px 0 0; padding: 12px 15px; border: 1px dashed var( --wlos ); border-radius: 12px; font-size: 12.5px; line-height: 1.6; color: var( --tekst-slaby ); }
.tce-swiadectwo b { display: block; margin-bottom: 5px; font: 400 9.5px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --woda-j ); }

/* ══════════════  święta: pas roku  ══════════════ */
.tce-granice b, .tce-ramy__siatka b { display: block; margin-bottom: 8px; font: 500 18px var( --serif ); color: var( --tekst-mocny ); }
.tce-granice p, .tce-ramy__siatka p { margin: 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
.tce-granice u, .tce-ramy__siatka u { display: block; margin-bottom: 7px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var( --zloto-c ); }
/* „Koło roku" to konstrukcja XX wieku - dostaje wodę zamiast złota, żeby
   odcinało się od czterech świąt poświadczonych. */
.tce-granice .jest-nowe { border-color: rgba( 79, 133, 112, .38 ); background: linear-gradient( 180deg, rgba( 79, 133, 112, .14 ), rgba( 79, 133, 112, .02 ) ); }
.tce-granice .jest-nowe b { color: var( --woda-j ); }

/* ══════════════  czego nie znali: czerwona emalia  ══════════════ */
.tce-ramy__siatka > div { border-left: 2px solid var( --emalia ); }
.tce-ramy__siatka i { display: block; margin-bottom: 10px; font-style: normal; font-size: 16px; color: var( --emalia-j ); }
.tce-ramy__siatka u { color: var( --emalia-j ); }

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

@media ( max-width: 980px ) {
	.tce-znak { right: -140px; width: 320px; height: 320px; opacity: .12; }
}
@media ( max-width: 780px ) {
	.tce-strona { padding: 0 18px 70px; }
	.tce-sekcja { margin-top: 58px; }
	.tce-sekcja--scisla { padding: 26px 18px 30px; }
	.tce-poziom { margin: 6px 0 0; }
	.tce-hero__liczby span { flex: 1 0 100%; }
	.tce-znak { display: none; }
	.tce-os { padding: 26px 14px 16px; }
	.tce-os__punkt::after { font-size: 10.5px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tce-strona *, .tce-strona *::before, .tce-strona *::after { transition: none !important; animation: none !important; }
}


/* ---------------------------------------------------------------------------
   TŁA SEKCJI

   Reguły trzymają się atrybutu data-tlo, który PHP dokłada dopiero wtedy,
   gdy plik naprawdę leży na serwerze. Dopóki grafiki nie ma, sekcja nie
   dostaje ani ramki, ani wypełnienia i wygląda dokładnie jak dziś - brak ma
   być cichy, a nie zostawiać pustej ramy.

   Obraz wchodzi WARSTWĄ właściwości background, nie przez ::before. Tych
   dwóch pseudoelementów używa wspólny zdobienia.css (lotos nad sekcją i kreska
   rozdzielająca) i nadpisanie ich zabrałoby sekcjom zdobienia reszty serwisu.

   Zmienna nazywa się --obraz-tla, a NIE --tlo: w większości arkuszy serwisu
   --tlo jest już barwą tła strony i nadpisanie jej w sekcji psułoby kolory.
   --------------------------------------------------------------------------- */

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

.tce-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;
}

@media ( max-width: 680px ) {
	.tce-hero[data-tlo], .tce-sekcja[data-tlo] { padding: 28px 20px 32px; border-radius: 18px; }
}

/* ---------------------------------------------------------------------------
   CZYTELNOSC NA TLE

   Kafle i klocki są z założenia przezroczyste - mają tło o kryciu 0,07,
   bo projektowano je na płaską barwę. Nad fotografią to przestaje działać:
   zmierzone na żywej stronie, tekst kafla nad jaśniejszym miejscem zdjęcia ma
   kontrast 1,23:1, czyli jest NIECZYTELNY. Zasłona na całej sekcji tego nie
   naprawia - z rachunku wychodzi, że musiałaby mieć krycie 0,80 i zabiłaby obraz.

   Dlatego czytelność niesie sam kafel, i tylko tam, gdzie pod spodem jest zdjęcie.
   Próg liczony w NAJGORSZYM przypadku, czyli nad czystą bielą, bo tła rozjaśniane
   gammą bywają jaśniejsze niż najjaśniejszy punkt oryginalnego zdjęcia. Próg 4,5:1
   wypada przy kryciu 0,845 - stąd 0,90, a nie 0,86, które miało zapas na granicy błędu.
   Przy 0,90 nad bielą: tekst 5,35:1, tytuł 12,80:1. Między kaflami obraz zostaje widoczny.
   --------------------------------------------------------------------------- */

.tce-sekcja[data-tlo] .zd-pas > li,
.tce-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 );
}

/* 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]. */
.tce-sekcja[data-tlo] {
	--tekst-slaby: #8d9589;	/* #767f71 dawało 3.75:1, teraz 5.06:1 */
	--etyk: #8d9587;	/* #7f8878 dawało 4.24:1, teraz 5.05:1 */
}


/* Celtowie: scoped forest, water and bronze edition. */
body:has(#tce){background:#07150f}
#tce.tce-strona{--torf:#091d16;--dno:#07150f;--tekst:#d4d7c5;--tekst-slaby:#a6b5a2;--etyk:#a6b5a2;--tekst-mocny:#f1ebd7;--kosc:#f1ebd7;--zloto:#c6a271;--zloto-j:#e3c88c;--mgla:#d4d7c5;--woda-j:#9cbaa1;max-width:1600px!important;padding-bottom:80px;background:radial-gradient(ellipse at 4% 26%,#294d3566,transparent 38%),radial-gradient(ellipse at 100% 60%,#b6936218,transparent 25%),linear-gradient(145deg,#132c22,#07150f 50%,#19382b);font-size:17px;line-height:1.75}
#tce .tce-hero{position:relative;isolation:isolate;display:block;max-width:none!important;min-height:680px;margin:26px 0 0;padding:0!important;overflow:hidden;border:1px solid #e3c88c40;border-radius:4px 100px 4px 4px;background:#091d16!important;box-shadow:0 32px 100px #07150f99}
#tce .tce-hero::before,#tce .tce-hero::after{display:none!important}
#tce .ce-opening-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 50%;z-index:-2}
#tce .ce-opening-copy{display:block;position:relative;min-height:680px;width:100%;padding:90px 6%;background:linear-gradient(90deg,#07150ff7 0%,#07150fe6 25%,#07150f99 45%,#07150f11 78%),linear-gradient(0deg,#07150fbb,transparent 40%)}
#tce .ce-opening-copy h1{display:block;font:400 clamp(64px,7vw,106px)/.98 'Cormorant Garamond',Georgia,serif;color:#f1ebd7;letter-spacing:-.025em;margin:20px 0;text-shadow:0 5px 35px #07150f}
#tce .ce-opening-subtitle{display:block;font:400 clamp(25px,3vw,38px)/1.2 'Cormorant Garamond',Georgia,serif;color:#e3c88c;max-width:18ch;margin:0 0 25px}
#tce .ce-opening-lead{display:block;color:#d4d7c5;font-size:18px;line-height:1.8;max-width:39ch;margin:0 0 32px}
#tce .ce-eyebrow,.ce-reader .ce-eyebrow{font:400 11px/1.7 Jost,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#e3c88c;margin:0 0 16px}
#tce .ce-opening-links{display:flex;max-width:540px;gap:10px;flex-wrap:wrap}
#tce .ce-context-button{display:block;background:transparent;border:0;border-bottom:1px solid #e3c88c66;color:#a6b5a2;padding:6px 0;margin-top:20px;font:300 13px Jost,system-ui;cursor:pointer}
#tce .ce-button,.ce-reader .ce-button{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:48px;padding:12px 19px;border:1px solid #e3c88c66;border-radius:4px 18px 4px 4px;background:linear-gradient(120deg,#e3c88c16,#091d16cc);color:#f1ebd7;font:300 15px/1.5 Jost,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s}
#tce .ce-button:hover{background:#294d35;border-color:#e3c88c;box-shadow:0 0 26px #e3c88c22}
#tce .ce-chapters{display:flex;gap:7px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid #e3c88c33;margin:0 0 64px}
#tce .ce-chapters a{padding:7px 13px;color:#d4d7c5;font-size:14px;text-decoration:none;border:1px solid transparent;border-radius:999px}
#tce .ce-chapters a:hover{border-color:#e3c88c66;color:#e3c88c}
#tce .ce-year{padding:40px;border:1px solid #e3c88c44;border-radius:4px 60px 4px 4px;background:radial-gradient(ellipse at 80% 10%,#c6a27122,transparent 60%),#091d16!important;box-shadow:0 25px 65px #07150f66;scroll-margin-top:120px}
#tce .ce-year h2{margin:0;color:#f1ebd7;font:400 clamp(34px,4vw,54px)/1.12 'Cormorant Garamond',Georgia,serif}
#tce .ce-intro{max-width:65ch;color:#d4d7c5;font-size:17px;line-height:1.8;margin:18px 0 30px}
#tce .ce-season-stage{display:grid;grid-template-columns:1.25fr 1fr;border:1px solid #e3c88c33;border-radius:4px 36px 4px 4px;overflow:hidden;min-height:430px;background:#07150f}
#tce .ce-season-visual{position:relative;min-height:430px;overflow:hidden}
#tce .ce-season-photo{height:100%;width:100%;position:absolute;inset:0;object-fit:cover;animation:ce-reveal .7s ease both}
#tce .ce-season-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#07150fe6,transparent 55%);pointer-events:none}
#tce .ce-season-medallion{position:absolute;bottom:28px;left:30px;right:30px;z-index:1;color:#e3c88c;text-align:center}
#tce .ce-season-medallion svg{height:32px;width:100%;max-width:300px;display:block;margin:auto}
#tce .ce-season-medallion span{font:400 28px 'Cormorant Garamond',Georgia,serif}
#tce .ce-season-panel{align-self:center;padding:42px;min-width:0}
#tce .ce-season-panel h3{font:400 56px/1.05 'Cormorant Garamond',Georgia,serif;color:#f1ebd7;margin:0 0 20px}
#tce .ce-season-panel>p:not(.ce-eyebrow){font-size:18px;line-height:1.8;color:#d4d7c5;margin:0 0 28px}
#tce .ce-season-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 24px}
#tce .ce-season-tab{position:relative;padding:14px;border:1px solid #e3c88c33;border-radius:4px 18px 4px 4px;background:#19382b66;color:#d4d7c5;font:400 25px 'Cormorant Garamond',Georgia,serif;cursor:pointer;min-height:80px}
#tce .ce-season-tab span{display:block;margin-top:6px;font:300 13px Jost,system-ui,sans-serif;color:#a6b5a2}
#tce .ce-season-tab[aria-pressed=true]{color:#f1ebd7;border-color:#e3c88c;background:linear-gradient(135deg,#e3c88c22,#294d35);box-shadow:inset 0 2px #e3c88c,0 0 30px #e3c88c16}
#tce .ce-range-label{display:block;font-size:13px;color:#a6b5a2;margin-bottom:5px}
#tce .ce-range{display:block;appearance:auto;width:100%;height:38px;accent-color:#e3c88c;cursor:pointer;margin:0}
#tce .ce-caption{font:300 12px/1.7 Jost,system-ui,sans-serif;color:#a6b5a2;margin:16px 0 0;letter-spacing:0}
#tce .ce-map-layout{display:grid;grid-template-columns:1.4fr 1fr;margin:32px 0 0;border:1px solid #e3c88c44;border-radius:4px 40px 4px 4px;overflow:hidden;background:#091d16}
#tce .ce-map{position:relative;align-self:center;aspect-ratio:3/2;overflow:hidden;border-right:1px solid #e3c88c33}
#tce .ce-map>svg{width:100%;height:100%;display:block}
#tce .ce-mobile-leaders{display:none}
@media(max-width:600px){#tce .ce-mobile-leaders{display:block}#tce .ce-map-pin[aria-label="Brytania"]{margin-left:5%;margin-top:-.667%}#tce .ce-map-pin[aria-label="Walia"]{margin-left:-2%;margin-top:3.333%}#tce .ce-map-pin[aria-label="Irlandia"]{margin-left:-3%}}
#tce .ce-map-pin{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;padding:0;border:1px solid #e3c88c;border-radius:50%;background:#091d16;color:#f1ebd7;font:400 13px Jost,system-ui;box-shadow:0 0 0 5px #e3c88c11;cursor:pointer;z-index:1}
#tce .ce-map-pin[aria-pressed=true]{background:#e3c88c;color:#07150f;box-shadow:0 0 0 6px #e3c88c33,0 0 28px #e3c88c66;z-index:2}
#tce .ce-map-detail{padding:32px;align-self:center}
#tce .ce-map-detail h3{font:400 38px/1.1 'Cormorant Garamond',Georgia,serif;color:#f1ebd7;margin:0 0 12px}
#tce .ce-map-detail p{font-size:16px;line-height:1.75;margin-bottom:15px;color:#d4d7c5}
#tce .ce-map-detail .ce-region-time{font-size:13px;color:#e3c88c}
#tce .ce-map-detail .ce-region-lang{font-size:13px;color:#a6b5a2}
#tce .ce-map-nav{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
#tce .ce-map-choice{min-height:46px;padding:10px 16px;border:1px solid #e3c88c33;border-radius:999px;background:transparent;color:#d4d7c5;font:300 14px Jost,system-ui;cursor:pointer}
#tce .ce-map-choice[aria-pressed=true]{background:#294d35;color:#e3c88c;border-color:#e3c88c}
#tce .tce-sekcja{scroll-margin-top:110px;background:radial-gradient(ellipse at 95% 0,#e3c88c0d,transparent 55%),linear-gradient(160deg,#19382b44,#07150f22)!important;border-color:#e3c88c33}
#tce .tce-sekcja__tytul{font-weight:400;color:#f1ebd7;font-size:clamp(32px,3.5vw,46px)}
#tce .tce-sekcja__lead{font-size:17px;line-height:1.8;color:#d4d7c5;max-width:72ch}
#tce .ce-ornament{max-width:400px;color:#c6a271;opacity:.65;margin:0 0 22px}
#tce .ce-ornament svg{display:block;width:100%;height:40px}
#tce .tce-kafel{border-radius:4px 24px 4px 4px;border-color:#e3c88c33;background:linear-gradient(145deg,#294d3544,#07150f99);cursor:pointer}
#tce .tce-kafel h3{font-weight:400;font-size:25px;color:#f1ebd7}
#tce .tce-kafel p{font-size:15px;color:#d4d7c5;line-height:1.75}
#tce .ce-card-more{display:block;margin-top:auto;padding-top:18px;font-size:13px;color:#e3c88c}
#tce [hidden]{display:none!important}
#tce .tce-znak{animation:none}
#tce .ce-credits{padding:32px 0;border-top:1px solid #e3c88c22;margin-top:60px}
#tce :is(button,a,input):focus-visible,.ce-reader button:focus-visible,#tce .tce-kafel:focus-visible{outline:2px solid #e3c88c;outline-offset:5px}
.ce-reader{box-sizing:border-box;width:min(900px,calc(100vw - 32px));max-height:88dvh;padding:0;border:1px solid #e3c88c77;border-radius:4px 38px 4px 4px;background:#091d16;color:#d4d7c5;box-shadow:0 35px 120px #07150fcc;font:300 18px/1.85 Jost,system-ui,sans-serif;overflow:auto;overscroll-behavior:contain}
.ce-reader::backdrop{background:#07150fcc;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ce-reader .ce-close{position:sticky;top:16px;float:right;z-index:3;margin:16px 16px -66px 0;width:50px;height:50px;display:grid;place-items:center;border:1px solid #e3c88c;background:#091d16ee;border-radius:50%;font:300 33px/1 Jost,system-ui;color:#f1ebd7;cursor:pointer}
.ce-reader-image{display:block;width:100%;height:280px;object-fit:cover;mask-image:linear-gradient(#f1ebd7 65%,transparent)}
.ce-reader-body{padding:46px 58px 58px}
.ce-reader h2{font:400 clamp(32px,4vw,49px)/1.12 'Cormorant Garamond',Georgia,serif;letter-spacing:0;color:#f1ebd7;margin:0 30px 24px 0}
.ce-reader p{margin:0 0 24px;color:#d4d7c5;font-size:18px;line-height:1.85}
.ce-reader .ce-reader-lead{font-size:20px;color:#e3c88c}
.ce-reader .ce-field{border-top:1px solid #e3c88c33;padding-top:22px;margin-top:28px}
.ce-reader .ce-field h3{font:400 12px Jost,system-ui;color:#e3c88c;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.ce-reader .ce-field p{font-size:16px}
@keyframes ce-reveal{from{opacity:.3;transform:scale(1.025)}to{opacity:1;transform:none}}
@media(max-width:900px){#tce .ce-season-stage,#tce .ce-map-layout{grid-template-columns:1fr}#tce .ce-season-visual{min-height:350px}#tce .ce-map{width:100%}#tce .ce-opening-copy{padding:65px 7%;background:linear-gradient(90deg,#07150fe6,#07150f88 65%,#07150f33)}#tce .ce-year{padding:26px}#tce .ce-map-detail{padding:26px}}
@media(max-width:600px){#tce .tce-hero{min-height:740px;border-radius:4px 55px 4px 4px}#tce .ce-opening-image{height:350px;object-position:75% center;z-index:0}#tce .ce-opening-copy{min-height:740px;padding:290px 23px 32px;background:linear-gradient(0deg,#07150f 55%,#07150f00 77%);z-index:1}#tce .ce-opening-copy h1{font-size:68px;margin:12px 0}#tce .ce-opening-subtitle{font-size:29px;max-width:20ch}#tce .ce-opening-lead{font-size:16px;line-height:1.75}#tce .ce-opening-links{gap:8px}#tce .ce-opening-links .ce-button{width:100%;font-size:14px;padding:11px}#tce .ce-chapters{gap:2px;margin-bottom:40px;padding:18px 0}#tce .ce-chapters a{font-size:13px;padding:6px 9px}#tce .ce-year{padding:22px 16px;border-radius:4px 30px 4px 4px}#tce .ce-season-stage{min-height:0}#tce .ce-season-visual{min-height:260px}#tce .ce-season-panel{padding:26px 20px}#tce .ce-season-panel h3{font-size:45px}#tce .ce-season-panel>p:not(.ce-eyebrow){font-size:16px}#tce .ce-season-tabs{grid-template-columns:1fr 1fr;gap:8px}#tce .ce-season-tab{font-size:24px}#tce .ce-map-pin{width:27px;height:27px;font-size:11px}#tce .ce-map-detail h3{font-size:32px}#tce .ce-map-nav{gap:6px}#tce .ce-map-choice{font-size:12px;padding:9px 12px}#tce .tce-sekcja__lead{font-size:16px}.ce-reader-body{padding:32px 24px}.ce-reader-image{height:210px}.ce-reader p{font-size:17px}.ce-reader .ce-reader-lead{font-size:18px}}
@media(prefers-reduced-motion:reduce){#tce *,#tce *::before,#tce *::after,.ce-reader *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Full-page landscape, explicitly limited to the Celtic chapter. */
body:has(#tce){background-color:#07150f;background-image:linear-gradient(#07150f33,#07150f44),url('/wp-content/uploads/tarot-kompat/zachod/celtowie/gfx/tlo-calosc.webp');background-position:center;background-size:cover;background-attachment:fixed}
#tce.tce-strona{background:linear-gradient(90deg,#07150f33,#07150f88 12%,#07150fa6 50%,#07150f88 88%,#07150f33)!important}
#tce .tce-sekcja{background:linear-gradient(145deg,#19382b99,#07150fcc)!important;padding:34px;border:1px solid #e3c88c33;border-radius:4px 38px 4px 4px;box-shadow:0 22px 55px #07150f55}
#tce .ce-year{background:radial-gradient(ellipse at 80% 10%,#c6a27122,transparent 60%),#091d16e6!important}
@media(max-width:600px){body:has(#tce){background-size:auto 100vh;background-attachment:fixed}#tce.tce-strona{background:#07150f66!important}#tce .tce-sekcja{padding:24px 16px}}
#tce .ce-map-detail{padding:0;align-self:stretch;display:flex;flex-direction:column;background:#091d16}
#tce .ce-region-photo{display:block;width:100%;height:270px;object-fit:cover;animation:ce-reveal .6s ease both;mask-image:linear-gradient(#f1ebd7 75%,transparent)}
#tce .ce-region-copy{padding:12px 32px 30px}
#tce .ce-image-note,.ce-reader .ce-image-note{font:300 11px/1.6 Jost,system-ui,sans-serif;color:#a6b5a2;margin:15px 0 0}
#tce .ce-illustrated-card{padding-top:0!important}
#tce .ce-card-photo{display:block!important;visibility:visible!important;opacity:1!important;width:calc(100% + 44px);max-width:none!important;height:210px;object-fit:cover;flex-shrink:0;margin:0 -22px 22px;border-radius:3px 23px 0 0;transition:filter .3s}
#tce .ce-illustrated-card:hover .ce-card-photo{filter:brightness(1.1)}
#tce #bostwa .ce-card-photo{object-position:50% 22%}
.ce-reader .ce-related{margin-top:32px;padding-top:24px;border-top:1px solid #e3c88c33;display:flex;flex-wrap:wrap;gap:10px}
.ce-reader .ce-related a{font:400 15px/1.5 Jost,system-ui,sans-serif;color:#e3c88c;padding:10px 14px;border:1px solid #e3c88c55;border-radius:4px 18px 4px 4px;text-decoration:none}
.ce-reader .ce-related a:focus-visible{outline:2px solid #e3c88c;outline-offset:3px}
.ce-reader .ce-sources{border-top:1px solid #e3c88c33;margin-top:30px;padding-top:22px;color:#d4d7c5}
.ce-reader .ce-sources summary{cursor:pointer;color:#e3c88c;font:400 16px Jost,system-ui,sans-serif;margin-bottom:18px}
.ce-reader .ce-sources p{font-size:14px;overflow-wrap:anywhere}
@media(max-width:600px){#tce .ce-region-photo{height:220px}#tce .ce-region-copy{padding:12px 22px 26px}#tce .ce-card-photo{height:210px}}
.ce-reader .ce-reader-image{object-position:50% 15%}