/* Amazigh — arkusz działu.

   Paleta: indygo tuareskie (barwnik, którym farbuje się zasłonę i który
   schodzi na skórę), SREBRO zamiast złota — biżuteria amazigh jest srebrna
   z zasady, nie z biedy, i to jest realna różnica wobec Egiptu — koral,
   ochra kasby, zieleń oazy. Filary mają się rozróżniać na pierwszy rzut oka:
   Bliski Wschód siedzi na ochrze i czerni, Afryka wchodzi na granat.

   UWAGA NA ESCAPE: ten plik piszemy narzędziem, nigdy przez wklejanie bloków
   w PHP z pojedynczych cudzysłowów — `\t` zamienia się wtedy w dosłowny
   backslash z literą t, a CSS zjada całą deklarację po nim. Kosztowało to
   siedemdziesiąt siedem miejsc w arkuszu Arabii.

   Nazwy bloków dobrane tak, żeby warstwa wspólna zrobiła z nich suwaki:
   `-rodzaje`, `-bostwa`, `-praktyki`, `-okresy`, `-skladniki`,
   `-ramy__siatka` są na liście DO_TORU_BLOKI. Podpis strony (`taz-pismo`)
   i trzy życia pisma (`taz-zycia`) celowo NIE są torami: tablicę znaków
   trzeba widzieć w całości, a trzy etapy mają stać obok siebie, bo cała
   rzecz polega na ich porównaniu.
*/
.taz-strona {
  --tlo: #0c0f21; --panel: rgba( 21, 26, 50, .78 );
  --obrys: rgba( 160, 176, 214, .3 ); --wlos: rgba( 190, 202, 228, .13 );
  --indygo: #3f5f9e; --indygo-j: #8fa8e0;
  --srebro: #c9cfd8; --srebro-j: #eef2f7;
  --koral: #c8503f; --koral-j: #e88a74;
  --ochra: #d39a3c; --ochra-j: #edbe72;
  --oaza: #4e8a63; --oaza-j: #86c79c;
  --kosc: #eef1f7; --etyk: #93a0bd;
  --tekst: #aab3c7; --tekst-slaby: #808aa3; --tekst-mocny: #e4e9f3;
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
  --tif: 'Noto Sans Tifinagh', 'Segoe UI Historic', 'Noto Sans', sans-serif;
  position: relative; max-width: 1520px; margin: 0 auto; padding: 0 40px 90px;
  color: var( --tekst ); font: 300 17px var( --serif );
  background:
    radial-gradient( 1200px 620px at 50% -10%, rgba( 63, 95, 158, .26 ), transparent 70% ),
    radial-gradient( 900px 520px at 86% 40%, rgba( 200, 80, 63, .12 ), transparent 70% ),
    radial-gradient( 700px 420px at 8% 76%, rgba( 78, 138, 99, .1 ), transparent 72% ),
    linear-gradient( 180deg, #141833, var( --tlo ) 48% );
  overflow-x: clip;
}
.taz-strona *, .taz-strona *::before, .taz-strona *::after { box-sizing: border-box; }
body:has( .taz-strona ) .wp-site-blocks > header, body:has( .taz-strona ) header.wp-block-template-part,
body:has( .taz-strona ) .wp-site-blocks > footer, body:has( .taz-strona ) footer.wp-block-template-part,
body:has( .taz-strona ) .wp-block-post-title { display: none !important; }
body:has( .taz-strona ) .wp-site-blocks, body:has( .taz-strona ) .wp-block-group,
body:has( .taz-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .taz-strona ) .wp-block-post-content > *, body:has( .taz-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .taz-strona ) { background: #0c0f21; }
body:has( .taz-strona ) .wp-block-post-content > .taz-strona, body:has( .taz-strona ) .entry-content > .taz-strona,
.taz-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.taz-strona button { font-family: inherit; }

/* Emblemat hero dostaje znak yaz. Krój tifinagh nie jest w mapie krojów
   warstwy wspólnej, więc podajemy go tutaj — inaczej byłby pusty kwadrat. */
.taz-strona .tem__glif.pismo-tif { font-family: var( --tif ); }

/* ══════════════  ŚCIEŻKA  ══════════════ */
.taz-sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0 6px; font: 400 10.5px var( --sans ); letter-spacing: .26em; text-transform: uppercase; color: var( --tekst-slaby ); }
.taz-sciezka i { font-style: normal; color: var( --etyk ); }
.taz-sciezka b { font-weight: 400; color: var( --indygo-j ); }
.taz-poziom { margin: 0 0 0 auto; }
.taz-poziom span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var( --wlos ); border-radius: 999px; font: 400 10.5px var( --sans ); letter-spacing: .12em; text-transform: uppercase; color: var( --tekst ); }
.taz-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --koral ); box-shadow: 0 0 10px var( --koral ); }

/* ══════════════  HERO  ══════════════ */
.taz-hero { position: relative; padding: 46px 0 8px; }
.taz-hero__tresc { max-width: 82ch; }
.taz-nad { margin: 0 0 12px; font: 400 11px var( --sans ); letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.taz-tytul { margin: 0; font: 500 clamp( 44px, 5.4vw, 80px )/1.03 var( --serif ); color: var( --kosc ); letter-spacing: -.01em; text-shadow: 0 0 66px rgba( 143, 168, 224, .5 ); }
.taz-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; line-height: 1.5; color: var( --ochra-j ); }
.taz-lead { margin: 24px 0 0; font-size: 19px; line-height: 1.7; color: var( --tekst-mocny ); }

/* Uwertura: pas obrazu nad tytułem, gdy grafika jest. Bez niej strona
   zostaje gładka i nadal wygląda skończenie. */
.taz-hero.taz-sekcja--tlo { max-width: none; margin: 0 -40px; padding: 214px 40px 34px; border-radius: 0 0 30px 30px; overflow: clip; isolation: isolate; }
.taz-hero.taz-sekcja--tlo::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 540px; z-index: -1;
  background: var( --tlo ) center 34% / cover no-repeat;
  mask-image: linear-gradient( 180deg, #000 0%, #000 36%, rgba( 0, 0, 0, .5 ) 70%, transparent 100% );
}
.taz-hero.taz-sekcja--tlo::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 540px; z-index: -1;
  background:
    linear-gradient( 90deg, rgba( 12, 15, 33, .94 ) 0%, rgba( 12, 15, 33, .7 ) 36%, rgba( 12, 15, 33, .2 ) 66%, transparent 100% ),
    radial-gradient( 900px 430px at 6% 34%, rgba( 12, 15, 33, .8 ), transparent 74% );
}

/* Pas liczb: cztery równe kolumny, wyśrodkowany. */
.taz-liczby { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; max-width: 1180px; margin: 40px auto 0; }
.taz-liczby span { display: grid; align-content: center; gap: 3px; padding: 18px 24px; border: 1px solid var( --wlos ); border-left: 3px solid var( --indygo ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, rgba( 63, 95, 158, .18 ), transparent ); }
.taz-liczby span:last-child { border-left-color: var( --koral ); background: linear-gradient( 100deg, rgba( 200, 80, 63, .16 ), transparent ); }
.taz-liczby b { font: 500 32px var( --serif ); color: var( --indygo-j ); }
.taz-liczby span:last-child b { color: var( --koral-j ); }
.taz-liczby i { font-style: normal; font: 400 11px var( --sans ); letter-spacing: .14em; color: var( --etyk ); }

/* ══════════════  PRZERYWNIK: bordiura tkacka  ══════════════ */
.taz-przerywnik { display: block; width: 100%; height: 46px; margin: 62px 0 -22px; color: var( --ochra ); opacity: .4; filter: drop-shadow( 0 0 10px rgba( 211, 154, 60, .3 ) ); }

/* ══════════════  SEKCJE  ══════════════ */
.taz-sekcja { position: relative; margin: 84px 0 0; }
.taz-sekcja--scisla {
  padding: 36px 32px 42px; border: 1px solid var( --wlos ); border-radius: 26px;
  background: radial-gradient( 980px 470px at 50% 0%, rgba( 63, 95, 158, .18 ), transparent 66% ), linear-gradient( 180deg, rgba( 24, 29, 56, .9 ), rgba( 11, 14, 30, .96 ) );
  box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .06 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 );
}
.taz-sekcja--tlo:not( .taz-hero ) {
  position: relative; isolation: isolate; overflow: clip;
  padding: 40px 36px 44px; border: 1px solid var( --wlos ); border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .06 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
}
.taz-sekcja--tlo:not( .taz-hero )::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var( --tlo ) center 55% / cover no-repeat; opacity: .95;
}
/* Maska mocniejsza po LEWEJ, bo tam stoi kolumna tekstu. */
.taz-sekcja--tlo:not( .taz-hero )::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient( 90deg, rgba( 11, 14, 30, .92 ) 0%, rgba( 11, 14, 30, .62 ) 34%, rgba( 11, 14, 30, .18 ) 62%, transparent 100% ),
    linear-gradient( 180deg, rgba( 11, 14, 30, .3 ) 0%, rgba( 11, 14, 30, .14 ) 42%, rgba( 11, 14, 30, .62 ) 100% );
}
.taz-sekcja__nad { margin: 0 0 8px; font: 400 10.5px var( --sans ); letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); position: relative; z-index: 1; }
.taz-sekcja__tytul { margin: 0; font: 500 clamp( 30px, 3.2vw, 44px )/1.12 var( --serif ); color: var( --kosc ); position: relative; z-index: 1; text-shadow: 0 2px 16px rgba( 0, 0, 0, .9 ), 0 0 46px rgba( 143, 168, 224, .28 ); }
.taz-sekcja__lead { max-width: 76ch; margin: 14px 0 0; font-size: 17.5px; line-height: 1.68; color: var( --tekst-mocny ); position: relative; z-index: 1; }
.taz-sekcja--nie { padding: 36px 32px 42px; border: 1px solid rgba( 200, 80, 63, .26 ); border-radius: 26px; background: linear-gradient( 180deg, rgba( 52, 24, 24, .6 ), rgba( 11, 14, 30, .92 ) ); }
.taz-uwaga { max-width: 82ch; margin: 26px 0 0; padding: 18px 22px; border-left: 2px solid var( --ochra ); border-radius: 0 14px 14px 0; background: rgba( 211, 154, 60, .1 ); font-size: 16px; line-height: 1.66; color: var( --tekst-mocny ); }
.taz-uwaga b { color: var( --ochra-j ); }

/* ══════════════  KAFLE  ══════════════ */
.taz-bostwa, .taz-rodzaje, .taz-praktyki, .taz-okresy, .taz-skladniki, .taz-ramy__siatka {
  display: grid; grid-template-columns: repeat( auto-fit, minmax( 272px, 1fr ) ); gap: 16px; margin-top: 28px;
}
/* Trzy życia pisma: SIATKA świadomie, trzy równe kolumny obok siebie. */
.taz-zycia { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 16px; margin-top: 30px; }
.taz-kafel {
  position: relative; display: grid; align-content: start; gap: 6px; padding: 24px 24px 20px;
  border: 1px solid var( --wlos ); border-top: 2px solid color-mix( in srgb, var( --k, var( --indygo ) ) 60%, transparent );
  border-radius: 4px 4px 18px 18px; background: var( --panel );
  cursor: pointer; transition: transform .24s, border-color .24s, box-shadow .24s;
}
.taz-kafel:hover {
  transform: translateY( -5px ); border-color: var( --obrys );
  box-shadow: 0 26px 54px -28px rgba( 0, 0, 0, .95 ), 0 0 44px -20px color-mix( in srgb, var( --k, var( --indygo ) ) 65%, transparent );
}
.taz-kafel:focus-visible { outline: 2px solid var( --indygo-j ); outline-offset: 3px; }
.taz-kafel h3 { margin: 2px 0 4px; font: 500 23px var( --serif ); color: var( --kosc ); }
.taz-kafel p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var( --tekst ); }
.taz-kafel__gdzie { display: block; font: 400 10px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --ochra-j ); }
.taz-kafel__gdzie i { font-style: normal; margin-right: 7px; font-size: 10px; color: var( --etyk ); }
.taz-kafel .taz-zd-wiecej { margin-top: auto; font-family: var( --sans ); }
.taz-kafel .zd-klocek__skrot { display: contents; }
.taz-skad { margin: 22px 0 0; padding: 14px 18px; border-left: 2px solid var( --oaza ); border-radius: 0 12px 12px 0; background: rgba( 78, 138, 99, .12 ); font-size: 15px; line-height: 1.6; color: var( --tekst ); }
.taz-skad b { display: block; margin-bottom: 5px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --oaza-j ); }

/* ══════════════  TABLICA ZNAKÓW — podpis strony  ══════════════ */
.taz-pismo { display: grid; grid-template-columns: minmax( 0, 1.45fr ) minmax( 0, 1fr ); gap: 26px 40px; align-items: start; margin-top: 30px; }
.taz-pismo__lewo { min-width: 0; }
.taz-pismo__podpis { margin: 16px 0 0; font: 400 11px var( --sans ); letter-spacing: .14em; text-transform: uppercase; color: var( --tekst-slaby ); }
.taz-tablica { display: grid; grid-template-columns: repeat( auto-fill, minmax( 62px, 1fr ) ); gap: 8px; margin: 0; padding: 0; list-style: none; }
.taz-znak {
  display: grid; gap: 2px; place-items: center; padding: 12px 6px 9px; cursor: pointer;
  border: 1px solid var( --wlos ); border-radius: 12px;
  background: linear-gradient( 180deg, rgba( 30, 37, 70, .85 ), rgba( 14, 18, 38, .9 ) );
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.taz-znak b { font: 400 30px/1 var( --tif ); color: var( --srebro ); text-shadow: 0 0 18px rgba( 201, 207, 216, .25 ); }
.taz-znak small { font: 400 9px var( --sans ); letter-spacing: .1em; color: var( --tekst-slaby ); }
.taz-znak:hover { transform: translateY( -3px ); border-color: var( --obrys ); box-shadow: 0 0 30px -12px var( --indygo-j ); }
.taz-znak:focus-visible { outline: 2px solid var( --indygo-j ); outline-offset: 2px; }
.taz-znak.jest-wybrany {
  border-color: color-mix( in srgb, var( --koral ) 60%, transparent );
  background: linear-gradient( 180deg, rgba( 200, 80, 63, .26 ), rgba( 20, 24, 48, .92 ) );
  box-shadow: 0 0 0 1px color-mix( in srgb, var( --koral ) 40%, transparent ), 0 0 40px -12px var( --koral );
}
.taz-znak.jest-wybrany b { color: var( --srebro-j ); text-shadow: 0 0 26px rgba( 232, 138, 116, .7 ); }
/* Tawalt nie jest literą — znak modyfikujący dostaje przerywany obrys,
   żeby widok nie sugerował, że stoi w tym samym rzędzie co reszta. */
.taz-znak--mod { border-style: dashed; opacity: .78; }

.taz-pismo__karta { min-height: 330px; padding: 26px 28px; border: 1px solid var( --wlos ); border-radius: 20px; background: radial-gradient( 420px 260px at 70% 0%, rgba( 63, 95, 158, .2 ), transparent 70% ), linear-gradient( 180deg, rgba( 24, 29, 56, .92 ), rgba( 11, 14, 30, .96 ) ); }
.taz-karta__znak { display: block; margin: 4px 0 2px; font: 400 96px/1 var( --tif ); color: var( --srebro-j ); text-shadow: 0 0 54px rgba( 143, 168, 224, .55 ); }
.taz-pismo__karta h3 { margin: 10px 0 0; font: 500 30px var( --serif ); color: var( --kosc ); }
.taz-karta__glos { margin: 10px 0 0; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --ochra-j ); }
.taz-karta__lac { margin: 8px 0 0; font: 400 18px var( --sans ); color: var( --tekst-mocny ); }
.taz-karta__lac b { font-weight: 500; color: var( --indygo-j ); }
.taz-karta__uwaga { margin-top: 18px; padding: 14px 18px; border-left: 2px solid var( --koral ); border-radius: 0 12px 12px 0; background: rgba( 200, 80, 63, .12 ); font-size: 16px; line-height: 1.64; color: var( --tekst-mocny ); }
.taz-karta__brak { margin-top: 18px; font-size: 15.5px; line-height: 1.6; color: var( --tekst-slaby ); }

/* ══════════════  OKNO PO KLIKNIĘCIU  ══════════════
   Okno wisi na `body`, POZA `.taz-strona`, więc reguły scope'owane na stronę
   go nie widzą, a zmienne CSS w nim nie istnieją. Stąd `body:has(...)`
   i powtórzenie zmiennych na `.zd-tlo`. */
body:has( .taz-strona ) .zd-tlo {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Jost, system-ui, sans-serif;
}
body:has( .taz-strona ) .zd-okno {
  background:
    radial-gradient( 120% 70% at 50% -6%, rgba( 63, 95, 158, .26 ), transparent 62% ),
    radial-gradient( 90% 60% at 92% 108%, rgba( 200, 80, 63, .14 ), transparent 68% ),
    linear-gradient( 178deg, #1c2247 0%, #141936 46%, #0a0d1e 100% );
  border: 1px solid rgba( 190, 202, 228, .3 );
  box-shadow: inset 0 1px 0 rgba( 226, 236, 255, .12 ), 0 0 0 1px rgba( 0, 0, 0, .6 ),
    0 40px 120px -40px rgba( 0, 0, 0, .95 ), 0 0 90px -30px rgba( 63, 95, 158, .5 );
}
body:has( .taz-strona ) .zd-okno__tekst,
body:has( .taz-strona ) .zd-okno__pelne p,
body:has( .taz-strona ) .zd-okno__gora p,
body:has( .taz-strona ) .zd-okno p {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.72; color: #dce3f0;
}
body:has( .taz-strona ) .zd-okno__tytul,
body:has( .taz-strona ) .zd-okno h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp( 34px, 3.4vw, 46px ); font-weight: 500; letter-spacing: .015em; color: #eef2f7;
  text-shadow: 0 0 42px rgba( 143, 168, 224, .5 ), 0 2px 18px rgba( 0, 0, 0, .8 );
}
body:has( .taz-strona ) .zd-okno__gora::after {
  content: ''; display: block; height: 2px; margin: 18px 0 4px;
  background: linear-gradient( 90deg, rgba( 143, 168, 224, .85 ), rgba( 211, 154, 60, .5 ) 38%, transparent 88% );
  box-shadow: 0 0 18px rgba( 143, 168, 224, .45 );
}
body:has( .taz-strona ) .zd-okno::before,
body:has( .taz-strona ) .zd-okno::after {
  content: ''; position: absolute; width: 62px; height: 62px; pointer-events: none;
  border-color: rgba( 201, 207, 216, .7 ); border-style: solid; border-width: 0;
  filter: drop-shadow( 0 0 10px rgba( 201, 207, 216, .5 ) );
}
body:has( .taz-strona ) .zd-okno::before { left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px; border-radius: 16px 0 0 0; }
body:has( .taz-strona ) .zd-okno::after { right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px; border-radius: 0 0 16px 0; }
body:has( .taz-strona ) .zd-okno__pelne > * > p:first-of-type::first-letter,
body:has( .taz-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: #edbe72; text-shadow: 0 0 26px rgba( 211, 154, 60, .55 );
}
body:has( .taz-strona ) .zd-okno .taz-kafel__gdzie,
body:has( .taz-strona ) .zd-okno .taz-skad b,
body:has( .taz-strona ) .zd-okno .zd-wiecej,
body:has( .taz-strona ) .zd-okno__x { font-family: Jost, system-ui, sans-serif; }
@media ( prefers-reduced-motion: no-preference ) {
  body:has( .taz-strona ) .zd-tlo .zd-okno { animation: taz-okno-wschodzi .42s cubic-bezier( .2, .7, .3, 1 ) both; }
  @keyframes taz-okno-wschodzi {
    from { opacity: 0; transform: translateY( 16px ) scale( .985 ); filter: blur( 3px ); }
    to   { opacity: 1; transform: none; filter: none; }
  }
}

/* ══════════════  WĄSKIE EKRANY  ══════════════ */
@media ( max-width: 1000px ) {
  .taz-pismo { grid-template-columns: minmax( 0, 1fr ); }
  .taz-zycia { grid-template-columns: minmax( 0, 1fr ); }
  .taz-karta__znak { font-size: 76px; }
}
@media ( max-width: 780px ) {
  .taz-strona { padding: 0 18px 70px; }
  .taz-sekcja { margin-top: 58px; }
  .taz-sekcja--scisla, .taz-sekcja--nie { padding: 26px 18px 30px; }
  .taz-sekcja--tlo:not( .taz-hero ) { padding: 26px 18px 30px; border-radius: 18px; }
  .taz-hero.taz-sekcja--tlo { margin: 0 -18px; padding: 150px 18px 24px; }
  .taz-hero.taz-sekcja--tlo::before, .taz-hero.taz-sekcja--tlo::after { height: 380px; }
  .taz-poziom { margin: 6px 0 0; }
  .taz-liczby { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 12px; margin-top: 30px; }
  .taz-tablica { grid-template-columns: repeat( auto-fill, minmax( 54px, 1fr ) ); }
}
@media ( max-width: 520px ) {
  .taz-liczby { grid-template-columns: minmax( 0, 1fr ); }
}
@media ( prefers-reduced-motion: reduce ) {
  .taz-strona *, .taz-strona *::before, .taz-strona *::after { transition: none !important; animation: none !important; }
}

/* ══════════════  ZDJĘCIE PRZEDMIOTU W OKNIE  ══════════════
   Obraz stoi w oknie, a NIE w kaflu: kafle są torami, a rozrzut ich
   wysokości pilnuje piąty punkt testu. Siedem zdjęć na kilkadziesiąt kafli
   rozbiłoby rząd natychmiast.

   Kwadrat 800×800 dostaje `aspect-ratio`, żeby wysokość NIE zależała od
   wysokości sąsiedniego tekstu — to był błąd ołtarza Arabii, gdzie obraz
   spadł z 501 do 293 px po skróceniu tekstu obok. */
.taz-foto { margin: 0 0 22px; }
.taz-foto img {
  display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border: 1px solid rgba( 190, 202, 228, .22 ); border-radius: 4px 4px 18px 18px;
  box-shadow: 0 26px 60px -30px rgba( 0, 0, 0, .95 ), 0 0 50px -24px rgba( 217, 166, 60, .35 );
}
body:has( .taz-strona ) .zd-okno .taz-foto { float: right; margin: 0 0 18px 26px; max-width: 360px; }
body:has( .taz-strona ) .zd-okno .taz-foto img { max-width: 360px; }
/* Inicjał i obraz oblany tekstem biją się o pierwszy wiersz — przy zdjęciu
   inicjał odpuszczamy. */
body:has( .taz-strona ) .zd-okno .taz-foto + p::first-letter { float: none; margin: 0; font-size: inherit; line-height: inherit; color: inherit; text-shadow: none; }
@media ( max-width: 780px ) {
  body:has( .taz-strona ) .zd-okno .taz-foto { float: none; margin: 0 0 18px; max-width: none; }
  body:has( .taz-strona ) .zd-okno .taz-foto img { max-width: none; }
}

/* ══════════════  SKALA ZE ZNAKAMI — sekcja o pismie  ══════════════
   Zdjecie stoi POD tablica, w tej samej kolumnie, i ma byc od niej mniejsze:
   tablica jest tematem, skala przypisem. Szerokosc ograniczona, zeby lewa
   kolumna nie urosla ponad karte obok i zeby sekcja nie zrobila sie schodkiem. */
.taz-skala { margin: 22px 0 0; }
.taz-skala img { display: block; width: 100%; max-width: 320px; height: auto; border-radius: 14px; border: 1px solid var( --wlos ); }
.taz-skala figcaption { margin: 10px 0 0; max-width: 46ch; font: 300 13.5px/1.6 var( --sans ); color: var( --tekst-slaby ); }
@media ( max-width: 680px ) { .taz-skala img { max-width: 100%; } }

/* ══ CZYTELNOŚĆ KAFLA NAD ZDJĘCIEM ═══════════════════════════════════════
 *
 * Kafel stoi na `--panel` o kryciu 0,78–0,82. Nad płaską barwą to jest
 * w porządku i tak był projektowany. Nad ZDJĘCIEM przestaje wystarczać,
 * bo przez kafel przebija jasne miejsce fotografii.
 *
 * ZMIERZONE na żywej stronie (amazigh, pięć sekcji z tłem), kontrast tekstu
 * po złożeniu krycia kafla z podłożem:
 *
 *   nad bielą          4,01 : 1   <- PONIŻEJ progu 4,5
 *   nad jasnym piaskiem 4,87 : 1
 *   nad średnim        6,16 : 1
 *   nad ciemnym        7,92 : 1
 *
 * Próg 4,5 osiągany jest przy kryciu 0,82; bierzemy 0,88 na zapas, bo
 * fotografia bywa jaśniejsza niż biel po rozjaśnieniu gammą.
 *
 * NIE PODNOSIMY KRYCIA ZASŁONY NA SEKCJI. Żeby tą drogą dojść do progu,
 * zasłona musiałaby mieć krycie 0,80 — czyli obraz przestaje być obrazem.
 * Nie ma sensu zamawiać tła, żeby je potem zamalować. Naprawa siedzi
 * w kaflu i działa TYLKO tam, gdzie pod spodem faktycznie jest zdjęcie.
 *
 * Zgłoszone przez sesję Grafika po wgraniu próbnego tła; u nich kafel miał
 * krycie 0,07 i kontrast 1,23 : 1, czyli tekst znikał całkowicie.
 */
.taz-sekcja--tlo .taz-kafel,
.taz-hero.taz-sekcja--tlo .taz-kafel {
	background: rgba( 21, 26, 50, .88 );
	backdrop-filter: blur( 2px );
	-webkit-backdrop-filter: blur( 2px );
	border-color: rgba( 255, 255, 255, .16 );
}

/* BARWY POBOCZNE — DRUGI KROK, WYMUSZONY POMIAREM.
 *
 * Podniesienie krycia kafla do 0,88 uratowało tekst główny (5,2–5,8 : 1),
 * ale NIE tekst poboczny: podpis „skąd wiemy" i nadtytuł kafla schodziły
 * do 3,90 : 1 nad bielą. Żeby wyciągnąć je samym kryciem, trzeba by
 * 0,93–0,99 — czyli zamalować zdjęcie, po które właśnie wysłaliśmy zamówienie.
 *
 * Wąskim gardłem jest więc BARWA TEKSTU, nie tło, i to ją poprawiamy.
 * Przesunięcie jest o kilka procent w stronę bieli, w tej samej rodzinie
 * barw, i obowiązuje WYŁĄCZNIE wewnątrz sekcji ze zdjęciem — na płaskim tle
 * paleta zostaje bez zmian.
 *
 * Obserwacja od sesji Grafika, potwierdzona rachunkiem: próg 4,5 : 1 wypada
 * mniej więcej w tym samym miejscu niezależnie od tego, od jakiego krycia
 * się startuje, bo decyduje jasność tekstu.
 */
.taz-sekcja--tlo {
	--tekst-slaby: #98a0b2;   /* 3,90 : 1  ->  4,58 : 1 nad bielą */
	--etyk: #93a0bd;
}


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

/* OKNO TEZY — przejscie tonalne.
   Wspolna warstwa daje oknu tezy plaska pobialke rgba(255,255,255,.028)
   regulami o swoistosci 0,2,0 i 0,3,0 — jedna wartosc dla wszystkich dzialow
   naraz. Dublowana klasa daje 0,4,0 i zamyka sprawe bez !important.
   Barwy sa z palety TEGO dzialu. Dopisane po stronie SERWERA, bo lokalna
   kopia modulu bywa starsza niz wgrana. */
.taz-strona .taz-hero .taz-okno.zd-okno,
.taz-strona .taz-hero .zd-okno.zd-okno,
.taz-strona .taz-hero .taz-okno.taz-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 21, 26, 50, .10 ), transparent 70% ),
		linear-gradient( 168deg, #171a2c, #0c0f21 );
}


/* ===== 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(.taz-strona){
	background-color: #0c0f21;
	background-image: linear-gradient( #0c0f21bb, #0c0f21dd ), url( '/wp-content/uploads/tarot-kompat/afryka/amazigh/gfx/tlo-calosc.webp' );
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}