/* Róg Afryki — pergamin, sadza, czerwień liturgii, błękit Timkat.
 *
 * PALETA JEST ROZPOZNAWALNA I TO JEST JEJ ZADANIE. Pięć działów Afryki musi
 * się różnić na pierwszy rzut oka: granat Amazigh, ziemia bogolan Sahelu,
 * zieleń z indygo Afryki Zachodniej, żelazo i miedź Konga — a tu pergamin
 * rękopisu, czerń sadzy, złoto i czerwień szat oraz jeden błękit wody, do
 * której raz w roku wychodzi tabot.
 *
 * BOX-SIZING I OVERFLOW NA POCZĄTKU, nie na końcu. Motyw daje `content-box`,
 * a `overflow-x: hidden` zabija `loading="lazy"` — stąd `clip`
 * ([[taroscope-boxsizing-lazy-pulapki]]).
 */
.trg-strona,
.trg-strona *,
.trg-strona *::before,
.trg-strona *::after { box-sizing: border-box; }

/* ══ WYŁAMANIE Z UKŁADU MOTYWU ══════════════════════════════════════════
 *
 * BEZ TEGO BLOKU DZIAŁ MA 645 px SZEROKOŚCI, a nie 1520.
 *
 * Motyw ustawia `--wp--style--global--content-size: 645px` i przykłada to
 * przez `.is-layout-constrained > :where(...)` do KAŻDEGO bezpośredniego
 * dziecka `.entry-content`. Reguła motywu idzie stylem wbudowanym w stronę,
 * więc bije arkusz wpięty przez `wp_enqueue_style` niezależnie od tego, co
 * w nim napiszę ([[taroscope-niebo-kolejnosc-css]]).
 *
 * Napisałem `max-width: 1520px` na `.trg-strona` i uznałem sprawę za
 * załatwioną. Nie była: policzona szerokość wynosiła 645 px. Wyszło to
 * dopiero z pomiaru na żywej stronie — test osiemnastu punktów tego NIE
 * WIDZI, bo mierzy przepełnienie dokumentu, a strona ściśnięta do 645 px
 * niczego nie przepełnia. Zgłosił się dopiero emblemat, który jest
 * pozycjonowany bezwzględnie i wystawał 33 px poza okno.
 *
 * Pozostałe działy Afryki mają ten blok od początku; ja go po prostu nie
 * przepisałem. Stąd `1600px` a nie `1520px` — taka jest wartość w czterech
 * już stojących działach i lepiej, żeby piąty nie był o osiemdziesiąt
 * pikseli węższy bez powodu.
 */
body:has( .trg-strona ) .wp-site-blocks > header,
body:has( .trg-strona ) header.wp-block-template-part,
body:has( .trg-strona ) .wp-site-blocks > footer,
body:has( .trg-strona ) footer.wp-block-template-part,
body:has( .trg-strona ) .wp-block-post-title { display: none !important; }

body:has( .trg-strona ) .wp-site-blocks,
body:has( .trg-strona ) .wp-block-group,
body:has( .trg-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }

body:has( .trg-strona ) .wp-block-post-content > *,
body:has( .trg-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

body:has( .trg-strona ) { background: #17130e; }

body:has( .trg-strona ) .wp-block-post-content > .trg-strona,
body:has( .trg-strona ) .entry-content > .trg-strona,
.trg-strona { max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }

.trg-strona button { font-family: inherit; }

.trg-strona {
	--pergamin:   #ece2cd;
	--pergamin-2: #ddd0b4;
	--sadza:      #17130e;
	--sadza-2:    #241d15;
	--atrament:   #2e2419;
	--zloto:      #b8892b;
	--zloto-jasne:#e0b455;
	--czerwien:   #8f2b22;
	--blekit:     #2f6c86;
	--tekst:      #f0e7d6;
	--tekst-cichy:#c3b69c;
	--obwodka:    rgba( 224, 180, 85, .26 );

	/* POZYCJA WZGLĘDNA JEST TU OBOWIĄZKOWA, nie kosmetyczna. Emblemat działu
	   (`Tarot_Emblemat`) jest pozycjonowany BEZWZGLĘDNIE; bez zaczepu na
	   kontenerze łapie się za obszar wyżej, wychodzi 48 px poza okno
	   i `overflow-x: clip` go nie przycina, bo przycinanie nie obejmuje
	   potomka, którego blok zawierający leży na zewnątrz. */
	position: relative;
	max-width: 1520px;          /* DYREKTYWA: 1520 px treści; blok wyłamania wyżej podnosi to do 1600 */
	margin: 0 auto;
	padding: 0 24px 96px;
	overflow-x: clip;
	color: var( --tekst );
	background: var( --sadza );
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 300;
	line-height: 1.62;
}

/* ── ścieżka ─────────────────────────────────────────────────────────── */
.trg-sciezka {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	padding: 22px 0 8px; font-size: 13px; letter-spacing: .09em;
	text-transform: uppercase; color: var( --tekst-cichy );
}
.trg-sciezka i { font-style: normal; opacity: .5; }
.trg-sciezka b { color: var( --zloto-jasne ); font-weight: 500; }
.trg-poziom {
	flex: 1 1 100%; margin: 6px 0 0; font-size: 12px;
	letter-spacing: .04em; text-transform: none; opacity: .72;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.trg-hero {
	position: relative; margin: 8px 0 40px; padding: 72px 56px 66px;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background:
		radial-gradient( 120% 140% at 18% 0%, rgba( 184, 137, 43, .17 ), transparent 62% ),
		linear-gradient( 160deg, var( --sadza-2 ), var( --sadza ) 72% );
}
/* TŁO JAKO WARSTWA `background`, NIE `::before` — pseudoelementy są zajęte
   przez zdobienia.css (przerywniki, ozdobniki) i wpięcie tu tła skasowałoby
   je. Naukę przekazała sesja Grafika po tym, jak rozbiła tak Mezopotamię. */
.trg-hero.trg-sekcja--tlo,
.trg-sekcja--tlo {
	background-image:
		linear-gradient( 90deg, rgba( 23, 19, 14, .94 ) 0%, rgba( 23, 19, 14, .70 ) 36%, rgba( 23, 19, 14, .20 ) 66%, transparent 100% ), linear-gradient( 180deg, rgba( 23, 19, 14, .10 ) 0%, rgba( 23, 19, 14, .34 ) 100% ),
		var( --tlo );
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}
.trg-hero__tresc { max-width: 62ch; }
.trg-nad {
	margin: 0 0 14px; font-size: 12px; letter-spacing: .28em;
	text-transform: uppercase; color: var( --zloto );
}
.trg-tytul {
	margin: 0 0 20px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 42px, 5.6vw, 76px ); font-weight: 400; line-height: 1.04;
	letter-spacing: -.012em; color: #fbf4e6;
	text-shadow: 0 0 34px rgba( 224, 180, 85, .16 );
}
.trg-tytul small {
	display: block; margin-top: 14px; font-family: 'Jost', sans-serif;
	font-size: clamp( 15px, 1.35vw, 19px ); font-weight: 300;
	letter-spacing: .01em; color: var( --tekst-cichy );
}
.trg-lead { margin: 0; font-size: 18px; color: #e6dac4; }

/* ── sekcja ──────────────────────────────────────────────────────────── */
.trg-sekcja { position: relative; margin: 0 0 58px; padding: 46px 0 10px; }
.trg-sekcja--tlo { padding: 46px 40px 24px; border-radius: 3px; }
.trg-sekcja--scisla { padding-top: 18px; }
.trg-sekcja__nad {
	margin: 0 0 10px; font-size: 12px; letter-spacing: .24em;
	text-transform: uppercase; color: var( --zloto );
}
.trg-sekcja__tytul {
	margin: 0 0 14px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 30px, 3.4vw, 46px ); font-weight: 400; line-height: 1.1;
	color: #fbf4e6; text-shadow: 0 0 30px rgba( 224, 180, 85, .14 );
}
.trg-sekcja__lead { max-width: 78ch; margin: 0 0 30px; color: #ded2b9; }
.trg-uwaga {
	max-width: 78ch; margin: 18px 0 0; padding-left: 14px;
	border-left: 2px solid var( --obwodka );
	font-size: 14px; color: var( --tekst-cichy );
}

/* ── przerywnik i ozdobniki ──────────────────────────────────────────── */
.trg-przerywnik {
	display: block; width: 100%; height: 44px; margin: 6px 0 18px;
	color: var( --zloto ); opacity: .5;
}
.trg-znak { display: block; width: 100%; height: auto; color: var( --zloto ); }

/* ── liczby ──────────────────────────────────────────────────────────── */
.trg-liczby {
	display: grid; gap: 14px;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
}
/* SIATKA, NIE TOR — uzasadnienie wymagane dyrektywą „zawsze slider":
   pięć kart z jedną liczbą każda czyta się jednym spojrzeniem i właśnie na
   tym polega ich rola. Tor kazałby przewijać rzecz, która ma być objęta
   naraz, a przy pięciu elementach i tak nie przekracza progu czterech
   w sposób, który cokolwiek by zyskał. */
.trg-karta {
	padding: 22px 20px; border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 46, 36, 25, .92 ), rgba( 23, 19, 14, .92 ) );
	box-shadow: 0 0 24px rgba( 184, 137, 43, .07 );
}
.trg-karta b {
	display: block; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 44px; font-weight: 500; line-height: 1; color: var( --zloto-jasne );
}
.trg-karta span {
	display: block; margin: 6px 0 10px; font-size: 13px;
	letter-spacing: .06em; text-transform: uppercase; color: var( --tekst-cichy );
}
.trg-karta p { margin: 0; font-size: 14px; color: #d6c9b0; }

/* ── kafle ───────────────────────────────────────────────────────────── */
.trg-ludy, .trg-waaqa, .trg-tabot, .trg-kitab, .trg-zar,
.trg-swieci, .trg-wrozby, .trg-pamiec, .trg-echa, .trg-nie {
	display: grid; gap: 16px;
	grid-template-columns: repeat( auto-fit, minmax( 264px, 1fr ) );
	/* Tor w gridzie puchnie bez tych trzech ([[css-slider-w-gridzie-contain]]) */
	contain: inline-size;
}
.trg-ludy > *, .trg-waaqa > *, .trg-tabot > *, .trg-kitab > *, .trg-zar > *,
.trg-swieci > *, .trg-wrozby > *, .trg-pamiec > *, .trg-echa > *, .trg-nie > * { min-width: 0; }

.trg-kafel {
	position: relative; padding: 22px 20px 20px; cursor: pointer;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 46, 36, 25, .94 ), rgba( 23, 19, 14, .94 ) );
	box-shadow: 0 0 22px rgba( 184, 137, 43, .06 );
	transition: border-color .22s, box-shadow .22s, transform .22s;
}
.trg-kafel:hover, .trg-kafel:focus-visible {
	border-color: rgba( 224, 180, 85, .5 );
	box-shadow: 0 0 34px rgba( 224, 180, 85, .17 );
	transform: translateY( -2px );
	outline: none;
}
.trg-kafel:focus-visible { outline: 2px solid var( --zloto-jasne ); outline-offset: 3px; }
.trg-kafel h3 {
	margin: 0 0 8px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 25px; font-weight: 500; line-height: 1.16; color: #fbf4e6;
}
.trg-kafel p { margin: 0; font-size: 14.5px; color: #d6c9b0; }
/* NADTYTUŁ TO `span`, NIE `p`. W torze warstwa wspólna pokazuje wyłącznie
   PIERWSZY akapit kafla, więc nadtytuł zapisany akapitem zjadłby opis
   ([[taroscope-nadtytul-zjada-opis]]). */
.trg-kafel__nad {
	display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
	font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var( --zloto );
}
.trg-kafel__nad i { font-style: normal; opacity: .8; }
.trg-zd-wiecej {
	display: inline-block; margin-top: 14px; font-size: 12px;
	letter-spacing: .14em; text-transform: uppercase; color: var( --zloto-jasne );
}
.trg-foto { margin: 0 0 16px; }
.trg-foto img { display: block; width: 100%; height: auto; border-radius: 2px; }
.trg-skad {
	margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var( --obwodka );
	font-size: 13.5px; color: var( --tekst-cichy );
}
.trg-skad b { display: block; margin-bottom: 3px; color: var( --zloto ); font-weight: 500; }

/* ── koło gadaa ──────────────────────────────────────────────────────── */
.trg-kolo { display: block; max-width: 620px; margin: 0 auto 26px; }
/* SVG W GRIDZIE KURCZY SIĘ DO 300 px bez jawnej szerokości owijki — samo
   `max-width` nie wystarcza ([[css-svg-w-gridzie-szerokosc]]). */
.trg-kolo__svg { display: block; width: 100%; height: auto; }
.trg-kolo__obwod { fill: none; stroke: var( --obwodka ); stroke-width: 1; }
.trg-kolo__pole {
	fill: rgba( 46, 36, 25, .95 ); stroke: rgba( 224, 180, 85, .34 ); stroke-width: 1;
	transition: fill .2s, stroke .2s;
}
.trg-kolo__stopien { cursor: pointer; }
.trg-kolo__stopien:hover .trg-kolo__pole { fill: rgba( 143, 43, 34, .5 ); }
.trg-kolo__stopien.jest .trg-kolo__pole {
	fill: rgba( 143, 43, 34, .78 ); stroke: var( --zloto-jasne ); stroke-width: 1.6;
}
.trg-kolo__stopien:focus-visible { outline: 2px solid var( --zloto-jasne ); outline-offset: 2px; }
.trg-kolo__nr {
	text-anchor: middle; dominant-baseline: middle; fill: var( --zloto-jasne );
	font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px;
}
.trg-kolo__etyk {
	text-anchor: middle; dominant-baseline: middle; fill: var( --tekst-cichy );
	font-family: 'Jost', sans-serif; font-size: 14px; letter-spacing: .04em;
}
.trg-kolo__srodek {
	text-anchor: middle; fill: #fbf4e6;
	font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px;
}
.trg-kolo__srodek--male { font-size: 15px; fill: var( --tekst-cichy ); font-family: 'Jost', sans-serif; }
.trg-kolo__opis {
	max-width: 74ch; margin: 0 auto; padding: 24px 24px 20px;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 46, 36, 25, .9 ), rgba( 23, 19, 14, .9 ) );
}
.trg-kolo__opis h3 {
	margin: 4px 0 10px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 30px; font-weight: 500; color: #fbf4e6;
}
.trg-kolo__kiedy {
	margin: 0; font-size: 12px; letter-spacing: .18em;
	text-transform: uppercase; color: var( --zloto );
}
.trg-kolo__krotko { margin: 0 0 14px; color: var( --blekit ); font-size: 15.5px; }
.trg-kolo__opis p { margin: 0 0 12px; color: #d6c9b0; }
.trg-kolo__opis p:last-child { margin-bottom: 0; }

/* ── wąsko ───────────────────────────────────────────────────────────── */
@media ( max-width: 720px ) {
	.trg-strona { padding: 0 14px 64px; }
	.trg-hero { padding: 46px 22px 42px; }
	.trg-sekcja--tlo { padding: 34px 16px 18px; }
	.trg-kolo__etyk { font-size: 17px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.trg-kafel { transition: none; }
	.trg-kafel:hover, .trg-kafel:focus-visible { transform: none; }
}


/* ═══ OPRAWA 2026-09-11 — HARAG zamiast gradientu, poświata, zdjęcia kafli ═══
   Harag to plecionka z marginesów rękopisów ge'ez: prostokąty, krzyż
   o rozszerzających się ramionach i rozeta. Rysowany linią, bo tak jest
   kreślony piórkiem. Krycie niskie — ma dawać fakturę, nie rysunek. */
.trg-strona { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22104%22%20height%3D%22104%22%20viewBox%3D%220%200%20104%20104%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523e0b455%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.075%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2292%22%20height%3D%2292%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%2278%22%20height%3D%2278%22%2F%3E%3Cpath%20d%3D%22M52%2026%20L52%2078%20M26%2052%20L78%2052%22%2F%3E%3Cpath%20d%3D%22M44%2026%20L60%2026%20M44%2078%20L60%2078%20M26%2044%20L26%2060%20M78%2044%20L78%2060%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2252%22%20r%3D%2211%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2252%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2298%22%20cy%3D%226%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2298%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2298%22%20cy%3D%2298%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 104px 104px; }
.trg-hero:not( .trg-sekcja--tlo ) {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22104%22%20height%3D%22104%22%20viewBox%3D%220%200%20104%20104%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523e0b455%22%20stroke-width%3D%221.2%22%20stroke-opacity%3D%220.13%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2292%22%20height%3D%2292%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%2278%22%20height%3D%2278%22%2F%3E%3Cpath%20d%3D%22M52%2026%20L52%2078%20M26%2052%20L78%2052%22%2F%3E%3Cpath%20d%3D%22M44%2026%20L60%2026%20M44%2078%20L60%2078%20M26%2044%20L26%2060%20M78%2044%20L78%2060%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2252%22%20r%3D%2211%22%2F%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%2252%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2298%22%20cy%3D%226%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2298%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2298%22%20cy%3D%2298%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), linear-gradient( 158deg, rgba( 143, 43, 34, .18 ), rgba( 23, 19, 14, 0 ) 62% );
	background-size: 140px 140px, cover;
}
/* Krzywa jak w reszcie Afryki: zaslona spada w prawo, zeby bylo widac
   zdjecie. Plaskie .85-.93 kryly kazda barwe na szaro (2026-09-12). */
.trg-sekcja--tlo { background-image: linear-gradient( 90deg, rgba( 23, 19, 14, .94 ) 0%, rgba( 23, 19, 14, .70 ) 36%, rgba( 23, 19, 14, .20 ) 66%, transparent 100% ), linear-gradient( 180deg, rgba( 23, 19, 14, .10 ) 0%, rgba( 23, 19, 14, .34 ) 100% ), var( --tlo ) !important; background-size: cover !important; background-position: center; }
.trg-sekcja:not( .trg-sekcja--tlo ):nth-of-type( odd ) { background-image: linear-gradient( 180deg, rgba( 224, 180, 85, .06 ), transparent 58% ); }
.trg-sekcja:not( .trg-sekcja--tlo ):nth-of-type( even ) { background-image: linear-gradient( 180deg, transparent, rgba( 143, 43, 34, .07 ) ); }

/* ZNAK SEKCJI: krzyż etiopski jako MASKA, więc bierze barwę etykiety. */
.trg-sekcja__nad { display: flex; align-items: center; gap: 10px; }
.trg-sekcja__nad::before {
	content: ""; flex: 0 0 auto; width: 26px; height: 26px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523e0b455%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%208%20L30%2052%20M8%2030%20L52%2030%22%2F%3E%3Cpath%20d%3D%22M22%208%20L38%208%20M22%2052%20L38%2052%20M8%2022%20L8%2038%20M52%2022%20L52%2038%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%229%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523e0b455%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%208%20L30%2052%20M8%2030%20L52%2030%22%2F%3E%3Cpath%20d%3D%22M22%208%20L38%208%20M22%2052%20L38%2052%20M8%2022%20L8%2038%20M52%2022%20L52%2038%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%229%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.trg-sekcja__nad::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient( 90deg, var( --obwodka ), transparent ); }

/* POŚWIATA w spoczynku i pod kursorem — dyrektywa mówi o tytułach i panelach. */
.trg-kafel { box-shadow: 0 10px 26px rgba( 0, 0, 0, .34 ), 0 0 0 1px rgba( 224, 180, 85, .07 ), 0 0 20px rgba( 224, 180, 85, .06 ); transition: border-color .24s, transform .24s, box-shadow .24s; }
.trg-kafel:hover, .trg-kafel:focus-visible { box-shadow: 0 18px 44px rgba( 0, 0, 0, .46 ), 0 0 0 1px rgba( 224, 180, 85, .34 ), 0 0 34px rgba( 224, 180, 85, .2 ); }

/* ZDJĘCIE W GŁÓWCE KAFLA — kwadrat, żeby kafle w jednym torze miały tę samą
   wysokość niezależnie od tego, czy obraz już przyszedł. */
.trg-foto-kafel { margin: -20px -20px 14px; aspect-ratio: 1 / 1; overflow: hidden; }
.trg-foto-kafel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trg-kafel { overflow: hidden; }
@media ( prefers-reduced-motion: reduce ) { .trg-kafel { transition: none; } }


/* ===== MIT W KAFLU 2026-09-12 ===== */
.trg-kafel__nad--mit { color: #c4826e; letter-spacing: .16em; }
.trg-kafel__mit { color: var( --tekst-slaby ); font-style: italic; }
.trg-kafel__nie { color: #c4826e; font-style: normal; letter-spacing: .04em; }


/* ===== TLO CALEJ STRONY 2026-09-13 =====
   Ten sam wzorzec, co Celtowie / Hiszpania / Rumunia: obraz pod cala
   strona, nieruchomy przy przewijaniu, przyciemniony do barwy dzialu.
   Dopoki pliku nie ma, maluje sie sam kolor - nic sie nie psuje. */
body:has(.trg-strona){
	background-color: #17130e;
	background-image: linear-gradient( #17130ebb, #17130edd ), url( '/wp-content/uploads/tarot-kompat/afryka/rog/gfx/tlo-calosc.webp' );
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}