/* Armenia i Kaukaz — arkusz działu.

   Paleta: ochra chaczkarów, zieleń doliny Araratu, czerwień bolusu
   z rękopisów, kobalt miniatur. ŚWIADOMIE nie złoto (zostaje przy Egipcie)
   i nie czerwień iznicka (zostaje przy Osmanach) — filary mają się rozróżniać
   na pierwszy rzut oka.

   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:
   `-bostwa`, `-rodzaje`, `-praktyki`, `-ramy__siatka` są na liście
   DO_TORU_BLOKI. Podpis strony (`tam-lanc`) celowo NIE jest torem — tam
   kolejność pionowa niesie treść.
*/
.tam-strona {
  --tlo: #0f0d0c; --panel: rgba( 26, 22, 20, .78 );
  --obrys: rgba( 176, 118, 60, .32 ); --wlos: rgba( 214, 186, 150, .14 );
  --ochra: #b0763c; --ochra-j: #dda56a;
  --zielen: #4a8f5e; --zielen-j: #7fc492;
  --bolus: #b5452f; --bolus-j: #e0806a;
  --kobalt: #3a5ca8; --kobalt-j: #8fa8e0;
  --kosc: #efe6d8; --etyk: #b09a78;
  --tekst: #b5ada2; --tekst-slaby: #8c8479; --tekst-mocny: #efe9df;
  --serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
  position: relative; max-width: 1520px; margin: 0 auto; padding: 0 40px 90px;
  color: var( --tekst ); font: 300 17px var( --serif );
  background:
    radial-gradient( 1200px 620px at 50% -10%, rgba( 176, 118, 60, .16 ), transparent 70% ),
    radial-gradient( 900px 520px at 84% 38%, rgba( 74, 143, 94, .1 ), transparent 70% ),
    linear-gradient( 180deg, #171311, var( --tlo ) 46% );
  overflow-x: clip;
}
.tam-strona *, .tam-strona *::before, .tam-strona *::after { box-sizing: border-box; }
body:has( .tam-strona ) .wp-site-blocks > header, body:has( .tam-strona ) header.wp-block-template-part,
body:has( .tam-strona ) .wp-site-blocks > footer, body:has( .tam-strona ) footer.wp-block-template-part,
body:has( .tam-strona ) .wp-block-post-title { display: none !important; }
body:has( .tam-strona ) .wp-site-blocks, body:has( .tam-strona ) .wp-block-group,
body:has( .tam-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tam-strona ) .wp-block-post-content > *, body:has( .tam-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tam-strona ) { background: #0f0d0c; }
body:has( .tam-strona ) .wp-block-post-content > .tam-strona, body:has( .tam-strona ) .entry-content > .tam-strona,
.tam-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tam-strona button { font-family: inherit; }

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

/* ══════════════  HERO  ══════════════ */
.tam-hero { position: relative; padding: 46px 0 8px; }
.tam-hero__tresc { max-width: 82ch; }
.tam-nad { margin: 0 0 12px; font: 400 11px var( --sans ); letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tam-tytul { margin: 0; font: 500 clamp( 44px, 5.4vw, 78px )/1.03 var( --serif ); color: var( --kosc ); letter-spacing: -.01em; text-shadow: 0 0 60px rgba( 176, 118, 60, .4 ); }
.tam-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; line-height: 1.5; color: var( --zielen-j ); }
.tam-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. */
.tam-hero.tam-sekcja--tlo { max-width: none; margin: 0 -40px; padding: 214px 40px 34px; border-radius: 0 0 30px 30px; overflow: clip; isolation: isolate; }
.tam-hero.tam-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% );
}
.tam-hero.tam-sekcja--tlo::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 540px; z-index: -1;
  background:
    linear-gradient( 90deg, rgba( 15, 13, 12, .94 ) 0%, rgba( 15, 13, 12, .7 ) 36%, rgba( 15, 13, 12, .2 ) 66%, transparent 100% ),
    radial-gradient( 900px 430px at 6% 34%, rgba( 15, 13, 12, .8 ), transparent 74% );
}

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

/* ══════════════  PLECIONKA  ══════════════ */
.tam-plecionka { display: block; width: 100%; height: 44px; margin: 62px 0 -22px; color: var( --ochra ); opacity: .36; }

/* ══════════════  SEKCJE  ══════════════ */
.tam-sekcja { position: relative; margin: 84px 0 0; }
.tam-sekcja--scisla {
  padding: 36px 32px 42px; border: 1px solid var( --wlos ); border-radius: 26px;
  background: radial-gradient( 980px 470px at 50% 0%, rgba( 176, 118, 60, .1 ), transparent 66% ), linear-gradient( 180deg, rgba( 32, 27, 24, .9 ), rgba( 14, 12, 11, .96 ) );
  box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 );
}
.tam-sekcja--tlo:not( .tam-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, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
}
.tam-sekcja--tlo:not( .tam-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. */
.tam-sekcja--tlo:not( .tam-hero )::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient( 90deg, rgba( 14, 12, 11, .92 ) 0%, rgba( 14, 12, 11, .62 ) 34%, rgba( 14, 12, 11, .18 ) 62%, transparent 100% ),
    linear-gradient( 180deg, rgba( 14, 12, 11, .3 ) 0%, rgba( 14, 12, 11, .14 ) 42%, rgba( 14, 12, 11, .62 ) 100% );
}
.tam-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; }
.tam-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 ); }
.tam-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; }
.tam-sekcja--nie { padding: 36px 32px 42px; border: 1px solid rgba( 181, 69, 47, .26 ); border-radius: 26px; background: linear-gradient( 180deg, rgba( 42, 24, 21, .6 ), rgba( 15, 12, 11, .92 ) ); }
.tam-uwaga { max-width: 82ch; margin: 26px 0 0; padding: 18px 22px; border-left: 2px solid var( --zielen ); border-radius: 0 14px 14px 0; background: rgba( 74, 143, 94, .09 ); font-size: 16px; line-height: 1.66; color: var( --tekst-mocny ); }
.tam-uwaga b { color: var( --zielen-j ); }

/* ══════════════  KAFLE  ══════════════ */
.tam-bostwa, .tam-rodzaje, .tam-praktyki, .tam-ramy__siatka {
  display: grid; grid-template-columns: repeat( auto-fit, minmax( 272px, 1fr ) ); gap: 16px; margin-top: 28px;
}
.tam-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( --ochra ) ) 60%, transparent );
  border-radius: 4px 4px 18px 18px; background: var( --panel );
  cursor: pointer; transition: transform .24s, border-color .24s, box-shadow .24s;
}
.tam-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( --ochra ) ) 55%, transparent );
}
.tam-kafel:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: 3px; }
.tam-kafel h3 { margin: 2px 0 4px; font: 500 23px var( --serif ); color: var( --kosc ); }
.tam-kafel p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var( --tekst ); }
.tam-kafel__gdzie { display: block; font: 400 10px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --zielen-j ); }
.tam-kafel__gdzie i { font-style: normal; margin-right: 7px; font-size: 11px; color: var( --etyk ); }
.tam-kafel .tam-zd-wiecej { margin-top: auto; font-family: var( --sans ); }
.tam-kafel .zd-klocek__skrot { display: contents; }
.tam-skad { margin: 22px 0 0; padding: 14px 18px; border-left: 2px solid var( --kobalt ); border-radius: 0 12px 12px 0; background: rgba( 58, 92, 168, .1 ); font-size: 15px; line-height: 1.6; color: var( --tekst ); }
.tam-skad b { display: block; margin-bottom: 5px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --kobalt-j ); }

/* ══════════════  ŁAŃCUCH IMION — podpis strony  ══════════════ */
.tam-lanc { display: grid; grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr ); gap: 26px 40px; align-items: start; margin-top: 30px; }
.tam-lanc__lewo { min-width: 0; }
.tam-lanc__podpis { margin: 14px 0 0; font: 400 11px var( --sans ); letter-spacing: .14em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tam-imiona { counter-reset: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.tam-imie {
  display: grid; gap: 2px; padding: 10px 16px; text-align: left; cursor: pointer;
  border: 1px solid var( --wlos ); border-left: 3px solid color-mix( in srgb, var( --k ) 60%, transparent );
  border-radius: 0 14px 14px 0; background: linear-gradient( 100deg, color-mix( in srgb, var( --k ) 10%, transparent ), transparent 72% );
  transition: border-color .22s, background .22s, transform .22s, box-shadow .22s;
}
.tam-imie b { font: 500 19px var( --serif ); color: var( --kosc ); }
.tam-imie small { display: none; }
.tam-imie:hover { transform: translateX( 3px ); box-shadow: 0 0 26px -10px var( --k ); }
.tam-imie.jest-wybrany {
  border-left-color: var( --k );
  background: linear-gradient( 100deg, color-mix( in srgb, var( --k ) 26%, transparent ), transparent 74% );
  box-shadow: 0 0 34px -12px var( --k );
}
.tam-imie.jest-wybrany b { color: var( --ochra-j ); }

/* Cztery ogniwa — poziomy łańcuch ze strzałkami między nimi. */
.tam-ogniwa { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.tam-ogniwo {
  flex: 1 1 150px; min-width: 0; display: grid; gap: 4px; padding: 14px 14px 12px; text-align: left; cursor: pointer;
  border: 1px solid var( --wlos ); border-radius: 4px 4px 16px 16px;
  border-top: 2px solid color-mix( in srgb, var( --k ) 45%, transparent );
  background: linear-gradient( 180deg, rgba( 32, 27, 24, .9 ), rgba( 14, 12, 11, .95 ) );
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.tam-ogniwo i { font-style: normal; font: 500 12px var( --serif ); width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid color-mix( in srgb, var( --k ) 45%, transparent ); border-radius: 50%; color: var( --ochra-j ); }
.tam-ogniwo__etap { font: 400 9px var( --sans ); letter-spacing: .18em; text-transform: uppercase; color: var( --etyk ); }
.tam-ogniwo__kto { font: 500 17px var( --serif ); color: var( --tekst-mocny ); overflow-wrap: anywhere; }
.tam-ogniwo:hover { transform: translateY( -3px ); box-shadow: 0 0 30px -12px var( --k ); }
.tam-ogniwo.jest-wybrany { border-top-color: var( --k ); box-shadow: 0 0 0 1px color-mix( in srgb, var( --k ) 45%, transparent ), 0 0 44px -14px var( --k ); }
/* Ogniwo puste — Tir nie ma następcy i widok nie może tego ukryć. */
.tam-ogniwo--pusty { border-style: dashed; opacity: .62; }
.tam-ogniwo--pusty .tam-ogniwo__kto { color: var( --tekst-slaby ); font-style: italic; }
.tam-strzalka { align-self: center; color: var( --etyk ); opacity: .5; font-size: 15px; }

.tam-lanc__karta { min-height: 300px; padding: 26px 28px; border: 1px solid var( --wlos ); border-radius: 20px; background: linear-gradient( 180deg, rgba( 32, 27, 24, .92 ), rgba( 14, 12, 11, .96 ) ); }
.tam-lanc__karta h3 { margin: 6px 0 0; font: 500 30px var( --serif ); color: var( --kosc ); }
.tam-lanc__karta p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.68; }
.tam-karta__etap { margin: 10px 0 0; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --ochra-j ); }
.tam-karta__uwaga { margin-top: 18px; padding: 14px 18px; border-left: 2px solid var( --bolus ); border-radius: 0 12px 12px 0; background: rgba( 181, 69, 47, .1 ); font-size: 15.5px; color: var( --tekst-mocny ); }

/* ══════════════  OKNO PO KLIKNIĘCIU  ══════════════
   Okno wisi na `body`, POZA `.tam-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( .tam-strona ) .zd-tlo {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Jost, system-ui, sans-serif;
}
body:has( .tam-strona ) .zd-okno {
  background:
    radial-gradient( 120% 70% at 50% -6%, rgba( 176, 118, 60, .17 ), transparent 62% ),
    radial-gradient( 90% 60% at 92% 108%, rgba( 74, 143, 94, .12 ), transparent 68% ),
    linear-gradient( 178deg, #231d18 0%, #17130f 46%, #0d0b09 100% );
  border: 1px solid rgba( 214, 186, 150, .3 );
  box-shadow: inset 0 1px 0 rgba( 255, 235, 210, .1 ), 0 0 0 1px rgba( 0, 0, 0, .6 ),
    0 40px 120px -40px rgba( 0, 0, 0, .95 ), 0 0 90px -30px rgba( 176, 118, 60, .35 );
}
body:has( .tam-strona ) .zd-okno__tekst,
body:has( .tam-strona ) .zd-okno__pelne p,
body:has( .tam-strona ) .zd-okno__gora p,
body:has( .tam-strona ) .zd-okno p {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.72; color: #e0d6c6;
}
body:has( .tam-strona ) .zd-okno__tytul,
body:has( .tam-strona ) .zd-okno h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp( 34px, 3.4vw, 46px ); font-weight: 500; letter-spacing: .015em; color: #f2e2c8;
  text-shadow: 0 0 42px rgba( 176, 118, 60, .45 ), 0 2px 18px rgba( 0, 0, 0, .8 );
}
body:has( .tam-strona ) .zd-okno__gora::after {
  content: ''; display: block; height: 2px; margin: 18px 0 4px;
  background: linear-gradient( 90deg, rgba( 176, 118, 60, .85 ), rgba( 74, 143, 94, .5 ) 38%, transparent 88% );
  box-shadow: 0 0 18px rgba( 176, 118, 60, .45 );
}
body:has( .tam-strona ) .zd-okno::before,
body:has( .tam-strona ) .zd-okno::after {
  content: ''; position: absolute; width: 62px; height: 62px; pointer-events: none;
  border-color: rgba( 214, 186, 150, .68 ); border-style: solid; border-width: 0;
  filter: drop-shadow( 0 0 10px rgba( 214, 186, 150, .45 ) );
}
body:has( .tam-strona ) .zd-okno::before { left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px; border-radius: 16px 0 0 0; }
body:has( .tam-strona ) .zd-okno::after { right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px; border-radius: 0 0 16px 0; }
body:has( .tam-strona ) .zd-okno__pelne > * > p:first-of-type::first-letter,
body:has( .tam-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: #e8b478; text-shadow: 0 0 26px rgba( 176, 118, 60, .5 );
}
body:has( .tam-strona ) .zd-okno .tam-kafel__gdzie,
body:has( .tam-strona ) .zd-okno .tam-skad b,
body:has( .tam-strona ) .zd-okno .zd-wiecej,
body:has( .tam-strona ) .zd-okno__x { font-family: Jost, system-ui, sans-serif; }
@media ( prefers-reduced-motion: no-preference ) {
  body:has( .tam-strona ) .zd-tlo .zd-okno { animation: tam-okno-wschodzi .42s cubic-bezier( .2, .7, .3, 1 ) both; }
  @keyframes tam-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 ) {
  .tam-lanc { grid-template-columns: minmax( 0, 1fr ); }
  .tam-strzalka { display: none; }
  .tam-ogniwo { flex: 1 1 130px; }
}
@media ( max-width: 780px ) {
  .tam-strona { padding: 0 18px 70px; }
  .tam-sekcja { margin-top: 58px; }
  .tam-sekcja--scisla, .tam-sekcja--nie { padding: 26px 18px 30px; }
  .tam-sekcja--tlo:not( .tam-hero ) { padding: 26px 18px 30px; border-radius: 18px; }
  .tam-hero.tam-sekcja--tlo { margin: 0 -18px; padding: 150px 18px 24px; }
  .tam-hero.tam-sekcja--tlo::before, .tam-hero.tam-sekcja--tlo::after { height: 380px; }
  .tam-poziom { margin: 6px 0 0; }
  .tam-liczby { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 12px; margin-top: 30px; }
}
@media ( max-width: 520px ) {
  .tam-liczby { grid-template-columns: minmax( 0, 1fr ); }
  .tam-ogniwa { flex-direction: column; }
}
@media ( prefers-reduced-motion: reduce ) {
  .tam-strona *, .tam-strona *::before, .tam-strona *::after { transition: none !important; animation: none !important; }
}

/* ══════════════  RYSUNKI OZDOBNE  ══════════════
   Wklejane w treść, więc biorą barwę przez `currentColor`. Znak przy
   nadtytule stoi w linii z tekstem i ma jego wysokość — inaczej rozpycha
   wiersz i psuje rytm nagłówków. */
.tam-sekcja__nad { display: flex; align-items: center; gap: 9px; }
.tam-znak { display: inline-flex; flex: none; width: 22px; height: 22px; color: var( --ochra ); opacity: .85; }
.tam-znak svg { width: 100%; height: 100%; display: block; }
/* Plecionka z pliku zastępuje rysowaną: ten sam margines, ta sama barwa,
   ale własna proporcja, więc wysokość bierzemy z rysunku. */
/* Pas zdobniczy jest WYSRODKOWANY i ma 760 px, nie pelna szerokosc.
   To decyzja o rytmie, nie oszczedzanie miejsca: na chaczkarze plecionka
   biegnie w obramowanej tablicy, a nie od krawedzi do krawedzi kamienia.
   Wysrodkowany pas czyta sie jak przerwa miedzy rozdzialami.
   Wysokosc wychodzi z przycietej ramki (1520 x 120): 760 px szerokosci
   daje 60 px wysokosci. Przed poprawka bylo 353 px. */
.tam-plecionka--plik { display: block; width: min( 100%, 760px ); height: auto; margin: 32px auto -18px; color: var( --ochra ); opacity: .55; }
.tam-plecionka--plik svg { width: 100%; height: auto; display: block; }
@media ( max-width: 780px ) {
  .tam-znak { width: 18px; height: 18px; }
}


/* ===== MIT W KAFLU 2026-09-12 ===== */
.tam-kafel__nad--mit { color: #c4826e; letter-spacing: .16em; }
.tam-kafel__mit { color: var( --tekst-slaby ); font-style: italic; }
.tam-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. */
.tam-strona .tam-hero .tam-okno.zd-okno,
.tam-strona .tam-hero .zd-okno.zd-okno,
.tam-strona .tam-hero .tam-okno.tam-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 26, 22, 20, .10 ), transparent 70% ),
		linear-gradient( 168deg, #1a1817, #0f0d0c );
}