@charset "utf-8";
/* =====================================================================
   MAPA CIEPŁA — system projektowy makiety kameratermowizyjna.eu
   Seria STRONY-WWW-ST-CBF. HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.

   IDEA. Termogram powstaje w trzech krokach: detektor rejestruje
   promieniowanie, model przelicza je na temperaturę, człowiek dopiero
   potem stawia hipotezę. Layout gra tę kolejność barwą: pełna paleta
   termograficzna (granat → purpura → pomarańcz → żółć) pracuje WYŁĄCZNIE
   w hero, w paskach skali i w ornamentach; proza stoi zawsze na spokojnym
   kremie, piasku, bieli albo na głębokim granacie — nigdy na gradiencie.
   Ornament to izotermy i siatka pomiarowa, karty czyta się jak odczyty.

   ⚠ PUŁAPKI, na które ten arkusz odpowiada wprost:
     · gradient termiczny zjada kontrast → każda powierzchnia niosąca tekst
       ma WŁASNY, nieprzezroczysty background-color i policzony kontrast;
     · `.tresc a` (0-2-1) bije `.przycisk` (0-1-0) → linki prozy pisane są
       z :not(.przycisk):not(.wiecej):not(.znak);
     · globalne strong,b{color} → pogrubienie samą wagą pisma;
     · menu bez <details> (pułapka T7 nie ma jak wystąpić);
     · ornamenty SVG mają barwę o kontraście ≥3:1 wobec swojego tła, a ich
       subtelność robi stroke-opacity, nie przygaszona barwa (bramka B6);
     · żaden ozdobnik nie jest pseudoelementem <main> (bramka B13c).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --papier:          #F5F1E9;   /* kremowa kość słoniowa — podłoże */
  --papier-karta:    #FFFFFF;   /* płyta, karta odczytu */
  --tlo-2:           #EBE3D6;   /* piasek — pasmo drugoplanowe */
  --wiodaca-jasna:   #FBE1C4;   /* jasny bursztyn — plakietki i pasmo żaru */
  --zar-dol:         #F6D3A4;   /* dolna granica pasma żaru */

  /* pismo */
  --atrament:        #171632;   /* granatowa czerń */
  --atrament-cichy:  #4C4A66;

  /* barwa wiodąca i akcent */
  --wiodaca:         #B23A10;   /* rozgrzany pomarańcz — powierzchnie, kreski */
  --wiodaca-ciemna:  #8C2A08;   /* nagłówki, odsyłacze i liczby na jasnym */
  --akcent:          #6B1F63;   /* purpura skali — wskazanie, hover */
  --linia:           #7A7263;
  --linia-cicha:     #DCD3C2;
  --na-wiodacej:     #FFFFFF;

  /* skala termograficzna — WYŁĄCZNIE ornament i powierzchnie */
  --granat-glab:     #080D28;
  --granat:          #101743;
  --granat-panel:    #241A55;
  --purpura:         #4A1A63;
  --pomarancz:       #E2661B;
  --zolc:            #F6C445;
  --zolc-jasna:      #FFD873;
  --iskra:           #FFF0B8;

  /* pismo na ciemnym */
  --na-ciemnym:      #F3EFE6;
  --na-ciemnym-cichy:#BFC3DC;

  --kroj-naglowek: "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-tekst:    "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;

  /* ⚠⚠ MIARA W REM, NIE W EM — jedna krawędź dla nagłówków, prozy i kresek.
     Miara w em przy dwóch krojach dawała dwie różne szerokości kolumny. */
  --kolumna:      37rem;                    /* kolumna prozy */
  --kolumna-hero: 30rem;                    /* kolumna hero (węższa, obok plamy) */
  --pas-szer:     84rem;                    /* maksymalna szerokość pasma */
  --margines:     clamp(20px, 5vw, 96px);

  --promien:       4px;
  --promien-duzy:  10px;
  --cien-plyta:  0 30px 70px -34px rgba(8, 13, 40, .45), 0 2px 8px -3px rgba(8, 13, 40, .14);
  --cien-karta:  0 20px 42px -26px rgba(8, 13, 40, .42), 0 1px 3px -1px rgba(8, 13, 40, .12);
  --cien-hero:   0 40px 90px -40px rgba(8, 13, 40, .70);
  --skala-barwy: var(--granat-glab) 0%, var(--granat) 12%, var(--purpura) 32%,
                 #8E2B47 46%, var(--wiodaca) 58%, var(--pomarancz) 72%,
                 var(--zolc) 88%, var(--iskra) 100%;
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--kroj-tekst);
  font-size: 1rem;
  line-height: 1.72;
  /* ⚠ długie adresy http w prozie rozpychały widok na 360 px (bramka B5) */
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}

/* ⚠ pułapka: overflow-x na html/body. clip nie psuje position:sticky. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

img, svg { max-width: 100%; height: auto; }
/* ⚠⚠ pułapka „globalne strong,b{color}" — pogrubienie samą wagą pisma */
strong, b { color: inherit; font-weight: 600; }

h1, h2, h3, h4 {
  font-family: var(--kroj-naglowek);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

p, ul, ol { margin: 0; }

:focus-visible {
  outline: 3px solid var(--wiodaca);
  outline-offset: 3px;
  border-radius: var(--promien);
}
.pas--glebia :focus-visible, .hero :focus-visible,
.naglowek :focus-visible, .stopka :focus-visible {
  outline-color: var(--zolc-jasna);
}

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (B7 mierzy prostokąt) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 190px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 90;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.6rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  font-weight: 600; letter-spacing: .04em; text-decoration: none;
  border-radius: 0 0 var(--promien-duzy) 0;
}

/* --- 3. RAMY I KOLUMNA ----------------------------------------------- */
/* .rama — pas poziomy: nagłówek, stopka, hero */
.rama {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z pustymi szynami po bokach: proza
   stoi w środkowym torze (symetrycznie — bramka B13 mierzy oba marginesy),
   a bloki oznaczone klasą .szeroki rozpychają się na całe pasmo. */
.kontener {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: pelna-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: relative;
  background: var(--granat-glab);
  color: var(--na-ciemnym);
  border-block-end: 1px solid rgba(191, 195, 220, .18);
}
.naglowek::after {           /* pasek skali termicznej pod nagłówkiem */
  content: ""; position: absolute; inset-block-end: -1px; inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--skala-barwy));
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .4rem 2rem;
  padding-block: .55rem;
}
.znak {
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 48px; padding-block: .75rem; padding-inline: 0;
  color: var(--na-ciemnym); text-decoration: none;
  font-family: var(--kroj-naglowek);
  font-weight: 700; font-size: 1.02rem; line-height: 1.2;
  letter-spacing: -.015em;
}
.znak::before {              /* znak geometryczny: trzy stopnie skali */
  content: ""; flex: none;
  width: 34px; height: 12px; border-radius: 2px;
  background: linear-gradient(90deg, var(--granat) 0%, var(--purpura) 26%,
              var(--wiodaca) 52%, var(--pomarancz) 74%, var(--zolc) 100%);
  box-shadow: 0 0 0 1px rgba(243, 239, 230, .35);
}
.znak:hover { color: var(--zolc-jasna); }

.menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.menu__lista {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 0 .35rem; list-style: none; margin: 0; padding: 0;
}
.menu__link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: .7em; padding-block: .55rem;
  position: relative;
  color: var(--na-ciemnym-cichy); text-decoration: none;
  font-size: .92rem; font-weight: 500; letter-spacing: .005em;
  transition: color .18s ease;
}
.menu__link::after {
  content: ""; position: absolute; inset-block-end: .35rem;
  inset-inline-start: .7em; width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--pomarancz), var(--zolc));
  transition: width .18s ease;
}
.menu__link:hover { color: var(--na-ciemnym); }
.menu__link:hover::after { width: calc(100% - 1.4em); }
.menu__link[aria-current="page"] { color: var(--zolc-jasna); font-weight: 600; }
.menu__link[aria-current="page"]::after { width: calc(100% - 1.4em); }

@media (max-width: 640px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
  .menu__link { padding-inline: .5em; font-size: .88rem; }
}

/* --- 5. HERO --------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--granat-glab);   /* ⚠ nieprzezroczysty podkład dla B6 */
  color: var(--na-ciemnym);
  padding-block: clamp(3rem, 1.6rem + 5.4vw, 7.5rem) clamp(2.6rem, 1.4rem + 4vw, 6rem);
  box-shadow: var(--cien-hero);
}
.hero__plama, .hero__zaslona, .hero__siatka, .hero__izotermy {
  position: absolute; inset: 0; display: block; pointer-events: none;
}
.hero__plama {                       /* rozgrzewająca się plama — pełna skala */
  z-index: -4;
  background:
    radial-gradient(46% 54% at 79% 40%,
      rgba(255, 240, 184, .96) 0%,
      rgba(246, 196, 69, .90) 13%,
      rgba(226, 102, 27, .82) 30%,
      rgba(178, 58, 16, .70) 44%,
      rgba(120, 34, 78, .58) 58%,
      rgba(74, 26, 99, .44) 72%,
      rgba(16, 23, 67, 0) 88%),
    radial-gradient(70% 80% at 98% 2%, rgba(226, 102, 27, .26), rgba(8, 13, 40, 0) 62%),
    radial-gradient(80% 80% at 4% 96%, rgba(74, 26, 99, .55), rgba(8, 13, 40, 0) 68%);
}
.hero__zaslona {                     /* zasłona — proza NIGDY nie stoi na gradiencie.
   ⚠ Pomiar na zrzucie: najjaśniejszy piksel tła pod kolumną tekstu ma dawać
   z pismem jasnym co najmniej 4,5:1. Zasłona jest po to zestrojona z plamą. */
  z-index: -3;
  background: linear-gradient(93deg,
    rgba(8, 13, 40, .992) 0%, rgba(8, 13, 40, .988) 42%,
    rgba(8, 13, 40, .935) 53%, rgba(8, 13, 40, .60) 65%,
    rgba(8, 13, 40, .20) 78%, rgba(8, 13, 40, 0) 92%);
}
.hero__siatka {                      /* siatka pomiarowa */
  z-index: -2; opacity: .85;
  background-image:
    repeating-linear-gradient(90deg, rgba(191, 195, 220, .13) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(191, 195, 220, .10) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(120% 110% at 50% 30%, #000 30%, transparent 92%);
          mask-image: radial-gradient(120% 110% at 50% 30%, #000 30%, transparent 92%);
}
.hero__izotermy {                    /* izotermy — ornament wiodący motywu */
  z-index: -1;
  color: var(--zolc);                /* ⚠ B6: barwa o kontraście 11,74:1 wobec podkładu */
  display: flex; justify-content: flex-end; align-items: center;
}
.hero__izotermy svg { width: min(74vw, 780px); height: auto; }

.hero__pas { position: relative; display: grid; gap: clamp(2rem, 1rem + 3vw, 3.4rem); }
.hero__tresc { max-width: var(--kolumna-hero); }
.tytul {
  font-size: clamp(2.25rem, 1.35rem + 2.55vw, 4.1rem);
  font-weight: 800; letter-spacing: -.028em; line-height: 1.04;
  margin-block-end: 1.35rem;
}
.hero .lid {
  font-size: clamp(1.06rem, 1rem + .3vw, 1.28rem);
  line-height: 1.62; color: var(--na-ciemnym);
  max-width: 34rem;
}
.hero .lid + .hero__akapit { margin-block-start: 1.1rem; }
.hero__akapit { color: var(--na-ciemnym-cichy); max-width: 34rem; }
.hero__cta { margin-block-start: 2rem; }

/* pasek skali w hero — komponent zaprojektowany, bez wartości liczbowych */
.hero__skala { position: relative; }
.skala { display: grid; gap: .5rem; max-width: 44rem; }
.kontener > .skala { margin-block: 1.7rem; }
.skala__pasek {
  display: block; height: 16px; border-radius: 999px;
  background: linear-gradient(90deg, var(--skala-barwy));
  box-shadow: inset 0 0 0 1px rgba(243, 239, 230, .30), 0 8px 22px -12px rgba(226, 102, 27, .8);
}
.skala__podzialka {
  display: block; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, var(--kreska) 0 1px, transparent 1px 2.5%),
    repeating-linear-gradient(90deg, var(--kreska-mocna) 0 2px, transparent 2px 10%);
  background-position: 0 0, 0 0;
  background-size: 100% 7px, 100% 15px;
  background-repeat: no-repeat;
  --kreska: rgba(191, 195, 220, .48);
  --kreska-mocna: rgba(246, 196, 69, .95);
}
.skala--jasna .skala__podzialka { --kreska: rgba(23, 22, 50, .30); --kreska-mocna: rgba(140, 42, 8, .85); }
.skala--jasna .skala__pasek { box-shadow: inset 0 0 0 1px rgba(23, 22, 50, .22); }

/* hero podstron — niższy, z izotermami po prawej */
.hero--strona { padding-block: clamp(2.6rem, 1.4rem + 4.2vw, 5.6rem) clamp(2.2rem, 1.2rem + 3.2vw, 4.4rem); }
.hero--strona .tytul { font-size: clamp(1.95rem, 1.25rem + 2vw, 3.35rem); }
.hero--strona .hero__tresc { max-width: 33rem; }

/* ⚠ RECENZJA, wada 6: przy 1920 px H1 ~80 px łamał się na CZTERY krótkie wiersze
   w słupku 560 px, choć do jasnego rdzenia plamy zostawało jeszcze ~150 px.
   Miara tytułu rośnie więc powyżej 1600 px — ale tylko tytułu i tylko o tyle,
   żeby pismo nie weszło na rozjaśnioną część zasłony (sprawdzone sondą tła). */
@media (min-width: 1600px) {
  .hero__tresc { max-width: 36rem; }
  .hero .lid, .hero__akapit { max-width: 33rem; }
  .hero--strona .hero__tresc { max-width: 34rem; }
}

@media (max-width: 900px) {
  /* na wąskim ekranie kolumna zajmuje całą szerokość, więc plama schodzi POD
     tekst, a zasłona jest pionowa — inaczej proza stanęłaby na gradiencie */
  .hero { padding-block-end: clamp(6rem, 3rem + 14vw, 9rem); }
  .hero__plama {
    background:
      radial-gradient(56% 26% at 74% 90%,
        rgba(255, 240, 184, .96) 0%, rgba(246, 196, 69, .90) 14%,
        rgba(226, 102, 27, .82) 32%, rgba(178, 58, 16, .70) 46%,
        rgba(120, 34, 78, .58) 60%, rgba(74, 26, 99, .44) 74%,
        rgba(16, 23, 67, 0) 90%),
      radial-gradient(80% 40% at 6% 4%, rgba(74, 26, 99, .55), rgba(8, 13, 40, 0) 72%);
  }
  .hero__zaslona {
    background: linear-gradient(180deg,
      rgba(8, 13, 40, .992) 0%, rgba(8, 13, 40, .988) 66%,
      rgba(8, 13, 40, .80) 82%, rgba(8, 13, 40, .30) 94%, rgba(8, 13, 40, 0) 100%);
  }
  .hero__izotermy { justify-content: center; align-items: flex-end; opacity: .85; }
  .hero__izotermy svg { width: min(96vw, 520px); }
  .hero__tresc, .hero .lid, .hero__akapit { max-width: none; }
}

/* --- 6. PASMA SEKCJI -------------------------------------------------- */
/* ⚠ RECENZJA, wada 7: przy 390 px ostatni wiersz pasma kończył się BLIŻEJ krawędzi
   niż zaczynał u góry (39 px wobec 46 px). Dolne domknięcie ma być zawsze co
   najmniej takie jak górne — dokładamy stałą nadwyżkę na światło pod ostatnim wierszem. */
.pas { position: relative; overflow: clip;
  --pas-pion: clamp(2.6rem, 1.4rem + 3.4vw, 5.2rem);
  padding-block: var(--pas-pion) calc(var(--pas-pion) + .7rem); }
.pas > .kontener { position: relative; z-index: 1; }

.pas--papier { background: var(--papier); }
.pas--piasek { background: var(--tlo-2); }
.pas--piasek::before {                 /* delikatna siatka pomiarowa */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(122, 114, 99, .26) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg,  rgba(122, 114, 99, .19) 0 1px, transparent 1px 48px),
    radial-gradient(70% 90% at 96% 4%, rgba(178, 58, 16, .10), rgba(235, 227, 214, 0) 62%),
    radial-gradient(60% 90% at 2% 96%, rgba(74, 26, 99, .09), rgba(235, 227, 214, 0) 64%);
  -webkit-mask-image: linear-gradient(180deg, #000, #000 55%, transparent 96%);
          mask-image: linear-gradient(180deg, #000, #000 55%, transparent 96%);
}
.pas--zar {
  background-color: var(--zar-dol);
  background-image: linear-gradient(178deg, var(--wiodaca-jasna) 0%, var(--zar-dol) 100%);
}
.pas--zar::before {                    /* izotermy rysowane skośnie, czystym CSS-em */
  content: ""; position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(116deg, rgba(140, 42, 8, .17) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(116deg, rgba(107, 31, 99, .12) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(90% 80% at 88% 30%, #000 10%, transparent 78%);
          mask-image: radial-gradient(90% 80% at 88% 30%, #000 10%, transparent 78%);
}
.pas--glebia {
  background-color: var(--granat);
  color: var(--na-ciemnym);
  background-image:
    radial-gradient(58% 90% at 92% 8%, rgba(226, 102, 27, .22), rgba(16, 23, 67, 0) 66%),
    radial-gradient(60% 90% at 4% 96%, rgba(74, 26, 99, .55), rgba(16, 23, 67, 0) 70%);
}
.pas--glebia::before {                 /* siatka pomiarowa na ciemnym */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(191, 195, 220, .10) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  rgba(191, 195, 220, .07) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.pas--glebia .kontener > p { color: var(--na-ciemnym); }

/* pasmo z płytą — biała płyta nachodzi na sąsiednie pasmo (głębia i warstwy) */
.pas--plyta { background: var(--tlo-2); position: relative; padding-block-start: 0; padding-block-end: calc(var(--pas-pion) + .7rem); }
.kontener--plyta {
  background: var(--papier-karta);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-plyta);
  padding-block: clamp(2.2rem, 1.2rem + 2.6vw, 4rem);
  margin-block-start: clamp(-3.4rem, -1.4rem - 2.4vw, -1.6rem);
  position: relative; overflow: hidden;
}
.kontener--plyta::before {            /* krawędź termiczna płyty — ZNAK ROZPOZNAWCZY.
   ⚠⚠ RECENZJA, wada 1: reguła gaszenia szyny pomiarowej („.kontener--plyta::before,
   .kontener--plyta::after{display:none}" w @media min-width:1100px) kasowała także TĘ
   krawędź — na 1366/1440/1920 płyta była gołym białym prostokątem. Szyna jest teraz
   wypisana selektorem, który płyty nie dotyka (:not(.kontener--plyta)), więc ten
   pseudoelement żyje na WSZYSTKICH szerokościach. */
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: clamp(5px, .3rem, 7px); z-index: 2;
  background: linear-gradient(90deg, var(--skala-barwy));
}

/* pas rozdzielający ze skalą — ornament między pasmami */
.rozdzielnik { background: var(--granat-glab); padding-block: 1.55rem; position: relative; overflow: clip; }
.rozdzielnik .rama { position: relative; z-index: 1; }
.rozdzielnik::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(191, 195, 220, .12) 0 1px, transparent 1px 48px);
}

/* szyna pomiarowa — pionowa linijka przy lewej krawędzi kolumny.
   ⚠ pułapka 19: kotwiczona do .kontener, nie do okna. */
.pas > .kontener, .rozdzielnik .rama { position: relative; }
/* ⚠⚠ RECENZJA, wady 1 i 2. Szyna JEST pseudoelementem kontenera, więc nie wolno jej
   ani gasić przez display:none (zabierało to krawędź płyty), ani zapalać w paśmie,
   które zaczyna się komponentem pełnej szerokości (szyna wchodziła 4 px w kartę 01
   bloga i chowała 86 ze 120 px za nią). Oba przypadki wyjęte SELEKTOREM.
   ⚠ Łańcuch :not() musi być IDENTYCZNY w regule bazowej i w nadpisaniu dla pasm
   ciemnych — inaczej nadpisanie ma niższą specyficzność i przegrywa. */
@media (min-width: 1100px) {
  .pas > .kontener:not(.kontener--plyta):not(.kontener--pelny)::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset-block: -.6rem; inset-inline-start: var(--margines);
    width: 1px; background: rgba(122, 114, 99, .32);
  }
  .pas > .kontener:not(.kontener--plyta):not(.kontener--pelny)::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset-block-start: -.6rem; inset-inline-start: calc(var(--margines) - 4px);
    width: 9px; height: 7.5rem; border-radius: 999px;
    background: linear-gradient(180deg, var(--granat) 0%, var(--purpura) 24%,
                var(--wiodaca) 54%, var(--pomarancz) 78%, var(--zolc) 100%);
  }
  .pas--glebia > .kontener:not(.kontener--plyta):not(.kontener--pelny)::before {
    background: rgba(191, 195, 220, .32);
  }

  /* wiszący nagłówek sekcji — wychodzi poza kolumnę prozy i wypełnia szerokość */
  .kontener {
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [szeroki-start] minmax(0, 9rem)
      [tekst-start] minmax(0, var(--kolumna))
      [tekst-end] minmax(0, 9rem)
      [szeroki-end] minmax(0, 1fr) [pelna-end];
  }
  .kontener > * { grid-column: tekst-start / tekst-end; }
  .kontener > h2 { grid-column: szeroki-start / szeroki-end; }
  .kontener > .szeroki,
  .kontener > .lista-wpisow,
  .kontener > .próbki { grid-column: pelna-start / pelna-end; }
}

/* --- 7. TYPOGRAFIA TREŚCI -------------------------------------------- */
.tresc h2 {
  position: relative;
  font-size: clamp(1.5rem, 1.14rem + .95vw, 2.2rem);
  padding-block-start: 1.85rem;
  margin-block: 0 1.1rem;
}
.tresc h2::before {                  /* znacznik skali nad nagłówkiem */
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 4.6rem; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--purpura) 0%, var(--wiodaca) 45%,
              var(--pomarancz) 72%, var(--zolc) 100%);
}
.pas--glebia .tresc h2, .pas--glebia h2 { color: var(--na-ciemnym); }

.tresc h3 {
  font-size: clamp(1.14rem, 1rem + .42vw, 1.44rem);
  margin-block: 1.9rem .6rem;
}
.kontener > p + p { margin-block-start: 1.05rem; }
.kontener > h2 + p, .kontener > h3 + p { margin-block-start: 0; }
.kontener > p, .kontener > .wstep { line-height: 1.76; }

.wstep {
  font-size: clamp(1.06rem, .99rem + .3vw, 1.24rem);
  line-height: 1.66;
  color: var(--atrament);
}
.pas--glebia .wstep { color: var(--na-ciemnym); }

/* liczba porządkowa ze ŹRÓDŁA (np. „Krok 3:", „2.") — czytana jak odczyt */
.nr {
  font-family: var(--kroj-maszyna);
  font-weight: 700;
  font-size: .86em;
  letter-spacing: -.03em;
  color: var(--wiodaca-ciemna);
  white-space: nowrap;
}
.pas--glebia .nr, .hero .nr { color: var(--zolc-jasna); }

/* odsyłacze prozy — ⚠ :not() ratuje przycisk przed regułą o wyższej specyficzności */
.tresc p a:not(.przycisk):not(.wiecej):not(.tytul-karty),
.tresc li a:not(.przycisk):not(.wiecej):not(.tytul-karty),
.tresc dd a:not(.przycisk):not(.wiecej):not(.tytul-karty) {
  color: var(--wiodaca-ciemna);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(140, 42, 8, .45);
  transition: color .16s ease, text-decoration-color .16s ease;
}
.tresc p a:not(.przycisk):not(.wiecej):not(.tytul-karty):hover,
.tresc li a:not(.przycisk):not(.wiecej):not(.tytul-karty):hover {
  color: var(--akcent); text-decoration-color: var(--akcent);
}
/* ⚠⚠ Nadpisanie dla pasm ciemnych MUSI mieć TĘ SAMĄ liczbę :not() co reguła
   prozy — inaczej ma niższą specyficzność i odsyłacz w ciemnym paśmie dostaje
   barwę z jasnego motywu (zmierzone: 2,00:1). Dopisanie trzeciego :not() wyżej
   złamało tę parę raz i bramka B6 to złapała. */
.pas--glebia p a:not(.przycisk):not(.wiecej):not(.tytul-karty),
.pas--glebia li a:not(.przycisk):not(.wiecej):not(.tytul-karty),
.hero p a:not(.przycisk):not(.wiecej):not(.tytul-karty) {
  color: var(--zolc-jasna); text-decoration-color: rgba(255, 216, 115, .5);
}
.pas--glebia p a:not(.przycisk):not(.wiecej):not(.tytul-karty):hover,
.pas--glebia li a:not(.przycisk):not(.wiecej):not(.tytul-karty):hover,
.hero p a:not(.przycisk):not(.wiecej):not(.tytul-karty):hover {
  color: var(--iskra); text-decoration-color: var(--iskra);
}

/* --- 8. PRZYCISKI I ODSYŁACZE KIERUNKOWE ------------------------------ */
.przejscie { margin-block-start: 1.9rem; }
.przycisk {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 52px; padding: .8rem 1.6rem;
  background-color: var(--wiodaca-ciemna);
  background-image: linear-gradient(96deg, var(--wiodaca-ciemna) 0%, var(--wiodaca) 58%, var(--pomarancz) 100%);
  color: var(--na-wiodacej);
  font-family: var(--kroj-naglowek); font-weight: 600; font-size: 1rem;
  letter-spacing: .002em; text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 16px 34px -20px rgba(178, 58, 16, .95);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.przycisk::after {
  content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .9;
  transition: width .18s ease;
}
.przycisk:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -20px rgba(178, 58, 16, 1); }
.przycisk:hover::after { width: 30px; }
.hero .przycisk, .pas--glebia .przycisk {
  background-color: var(--zolc);
  background-image: linear-gradient(96deg, var(--pomarancz) 0%, var(--zolc) 62%, var(--iskra) 100%);
  color: var(--granat-glab);
  box-shadow: 0 18px 40px -20px rgba(246, 196, 69, .8);
}

/* --- 9. KARTY ODCZYTU (etapy i kroki ze źródła) ----------------------- */
/* ⚠⚠ RECENZJA, wada 4: karty rozciągane do równej wysokości (auto-fit + stretch)
   dawały 290 px martwej bieli WEWNĄTRZ karty 4 i pusty trzeci slot w rzędzie —
   literę „L" z pustki w prawym dolnym rogu pasma. Karta odczytu nie ma NICZEGO
   przyklejonego do dolnej krawędzi, więc równa wysokość niczego tu nie kupuje
   (pułapka 10 z katalogu). Rozwiązanie dwuczęściowe:
     · align-items:start — karta ma wysokość swojej treści;
     · siatka na 6 torach, karta zajmuje 2 (trzy w rzędzie) albo 3 (dwie w rzędzie),
       a NIEPEŁNY ostatni rząd rozkłada się na całą szerokość, więc nie zostaje
       pusty slot. Reguły liczą pozycję (:nth-child/:nth-last-child), nie kartę. */
.odczyty {
  display: grid; gap: clamp(1rem, .6rem + 1vw, 1.6rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-block-start: 1.9rem;
}
@media (min-width: 640px) {
  .odczyty { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .odczyty > * { grid-column: span 3; }
}
/* ⚠ Karta-sierota rozciągnięta na całe pasmo miałaby łam ~98 znaków (zmierzone
   przy 1024 px), więc dostaje układ poziomy: tytuł w lewej szynie, proza w prawej.
   Dzięki temu szeroki wiersz PRACUJE, zamiast zostawiać pas bieli po prawej. */
@media (min-width: 640px) and (max-width: 1099.98px) {
  .odczyty > :nth-child(2n+1):nth-last-child(1) {
    grid-column: span 6;
    display: grid; column-gap: clamp(1.2rem, .6rem + 1.4vw, 2.2rem);
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  }
  .odczyty > :nth-child(2n+1):nth-last-child(1) > * { grid-column: 2; }
  .odczyty > :nth-child(2n+1):nth-last-child(1) > .odczyt__tytul {
    grid-column: 1; grid-row: 1; margin-block: .1rem 0;
  }
}
@media (min-width: 1100px) {
  .odczyty > * { grid-column: span 2; }
  .odczyty > :nth-child(3n+1):nth-last-child(2),
  .odczyty > :nth-child(3n+1):nth-last-child(2) ~ * { grid-column: span 3; }
  .odczyty > :nth-child(3n+1):nth-last-child(1) {
    grid-column: span 6;
    display: grid; column-gap: clamp(1.2rem, .6rem + 1.4vw, 2.2rem);
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }
  .odczyty > :nth-child(3n+1):nth-last-child(1) > * { grid-column: 2; }
  .odczyty > :nth-child(3n+1):nth-last-child(1) > .odczyt__tytul {
    grid-column: 1; grid-row: 1; margin-block: .1rem 0;
  }
}
.odczyt {
  position: relative;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy);
  padding: 1.5rem 1.5rem 1.6rem 1.9rem;
  box-shadow: var(--cien-karta);
  overflow: hidden;
}
.odczyt::before {                    /* lewy pas w barwie skali */
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 8px;
  background: linear-gradient(180deg, var(--granat) 0%, var(--purpura) 100%);
}
.odczyt--2::before { background: linear-gradient(180deg, var(--purpura) 0%, var(--wiodaca) 100%); }
.odczyt--3::before { background: linear-gradient(180deg, var(--wiodaca) 0%, var(--pomarancz) 100%); }
.odczyt--4::before { background: linear-gradient(180deg, var(--pomarancz) 0%, var(--zolc) 100%); }
.odczyt--5::before { background: linear-gradient(180deg, var(--zolc) 0%, var(--iskra) 100%); }
.odczyt__tytul { margin-block: 0 .55rem; font-size: clamp(1.1rem, 1rem + .35vw, 1.34rem); }
.odczyt__opis { color: var(--atrament); }
.odczyt__opis + .odczyt__opis { margin-block-start: .8rem; }
.pas--glebia .odczyt {
  background: var(--granat-panel); border-color: rgba(191, 195, 220, .28);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .8);
}
.pas--glebia .odczyt__tytul { color: var(--na-ciemnym); }
.pas--glebia .odczyt__opis { color: var(--na-ciemnym); }

/* --- 10. LISTY ZAPROJEKTOWANE ---------------------------------------- */
.siatka-listy { margin-block-start: 1.6rem; }
.wyliczenie { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wyliczenie > li {
  position: relative;
  padding: .95rem 0 .95rem 2.6rem;
  border-block-end: 1px solid var(--linia-cicha);
}
.wyliczenie > li:first-child { border-block-start: 1px solid var(--linia-cicha); }
.wyliczenie > li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1.42rem;
  width: 1.5rem; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--wiodaca), var(--zolc));
}
.pas--glebia .wyliczenie > li { border-color: rgba(191, 195, 220, .24); color: var(--na-ciemnym); }
.pas--glebia .wyliczenie > li::before { background: linear-gradient(90deg, var(--pomarancz), var(--iskra)); }

/* lista gotowości — dwie kolumny na szerokim ekranie, każda pozycja jak odczyt */
.gotowosc { list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.gotowosc > li {
  position: relative;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 6px solid var(--wiodaca);
  border-radius: var(--promien);
  padding: .95rem 1.1rem .95rem 1.15rem;
  box-shadow: 0 10px 24px -20px rgba(8, 13, 40, .5);
  line-height: 1.55;
}
.gotowosc > li:nth-child(2n) { border-inline-start-color: var(--pomarancz); }
.gotowosc > li:nth-child(3n) { border-inline-start-color: var(--akcent); }
.gotowosc > li:nth-child(5n) { border-inline-start-color: var(--zolc); }

/* --- 11. LISTA WPISÓW (blog) ------------------------------------------ */
.lista-wpisow {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; gap: clamp(1.1rem, .7rem + 1vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: stretch;
}
.zapowiedz {
  --karta-pad: 1.6rem;
  position: relative; display: flex; flex-direction: column;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy);
  padding: 1.6rem var(--karta-pad) 0;
  box-shadow: var(--cien-karta);
  overflow: hidden;
}
/* karty bloga MAJĄ mieć równą wysokość (na dole stoi „Czytaj dalej"), ale sama
   równa wysokość rodziła rozjazd: przy dwóch kolumnach nad odsyłaczem krótszej
   karty zostawało 130 px pustej bieli (RECENZJA, wada 5). Nadwyżka wpada teraz
   do ZAPROJEKTOWANEJ stopki karty — piaskowy pas dosunięty do krawędzi z kreską
   u góry — więc czyta się jak cokół komponentu, nie jak dziura po tekście. */
.pas--glebia .zapowiedz { color: var(--atrament); }
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 6px;
  background: linear-gradient(90deg, var(--granat), var(--purpura), var(--wiodaca));
}
.zapowiedz--2::before { background: linear-gradient(90deg, var(--purpura), var(--wiodaca), var(--pomarancz)); }
.zapowiedz--3::before { background: linear-gradient(90deg, var(--wiodaca), var(--pomarancz), var(--zolc)); }
.zapowiedz__nr {
  font-family: var(--kroj-maszyna); font-weight: 700;
  font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem);
  line-height: 1; letter-spacing: -.05em;
  color: var(--wiodaca-ciemna);
  margin-block: .35rem .7rem;
}
.zapowiedz--2 .zapowiedz__nr { color: var(--wiodaca); }
.zapowiedz--3 .zapowiedz__nr { color: var(--akcent); }
.zapowiedz__tytul { font-size: clamp(1.15rem, 1rem + .5vw, 1.42rem); margin-block: 0 .75rem; }
/* ⚠⚠ PUŁAPKA 1 w najgroźniejszej postaci: `.tresc li a:not(.przycisk):not(.wiecej)`
   ma specyficzność (0-3-2) — więcej niż JAKAKOLWIEK rozsądna reguła na tytuł karty
   (0-2-1). Podnoszenie specyficzności tu NIE POMAGA; jedyne, co działa, to wyjęcie
   tytułu z reguły prozy trzecim `:not()`. Karta bloga dostawała inaczej barwę
   i podkreślenie odsyłacza prozy zamiast atramentu. */
.lista-wpisow .zapowiedz__tytul a {
  display: block; min-block-size: 44px; padding-block: .2rem;
  color: var(--atrament); text-decoration: none;
}
.lista-wpisow .zapowiedz__tytul a:hover {
  color: var(--wiodaca-ciemna); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: .16em;
}
.zapowiedz__tekst { color: var(--atrament-cichy); font-size: .97rem; line-height: 1.66; }
.zapowiedz__wiecej {
  margin-block-start: auto;
  margin-inline: calc(var(--karta-pad) * -1);
  padding: .2rem var(--karta-pad) .35rem;
  background: var(--tlo-2);
  border-block-start: 1px solid var(--linia-cicha);
}
.zapowiedz__tekst { padding-block-end: 1.3rem; }
.wiecej {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .55rem .2rem;
  color: var(--wiodaca-ciemna); font-weight: 600; text-decoration: none;
  font-family: var(--kroj-naglowek); letter-spacing: .01em;
}
.wiecej::after {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--wiodaca), var(--zolc));
  transition: width .18s ease;
}
.wiecej:hover { color: var(--akcent); }
.wiecej:hover::after { width: 38px; }

/* --- 12. PANEL SKALI I IZOTERM (ozdobne bloki w szynach) -------------- */
.ornament-izotermy {
  position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: 50%; translate: 0 -50%;
  inset-inline-end: -78px;
  width: min(30vw, 430px);
  opacity: .95;
  color: var(--wiodaca-ciemna);      /* ⚠ B6: 7,61:1 na papierze, 6,73:1 na piasku */
  display: none;
}
.pas--glebia .ornament-izotermy { color: var(--zolc); }
@media (min-width: 1360px) { .ornament-izotermy { display: block; } }
.ornament-izotermy svg { width: 100%; height: auto; display: block; }

/* domknięcie widoku — akapit z odsyłaczami zamykający stronę */
.domkniecie {
  position: relative;
  margin-block-start: 2.2rem;
  padding-block-start: 1.7rem;
  font-size: clamp(1.02rem, .97rem + .22vw, 1.16rem);
  line-height: 1.62;
}
.domkniecie::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 7rem; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--purpura), var(--wiodaca) 50%, var(--zolc));
}
/* ⚠ `border-color` w skrócie kasuje wcześniejsze border-inline-start-color —
   barwny bok karty znikał na ciemnym paśmie. Kolejność ma znaczenie. */
.pas--glebia .gotowosc > li {
  background: var(--granat-panel); border-color: rgba(191, 195, 220, .30);
  border-inline-start-color: var(--pomarancz); color: var(--na-ciemnym);
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .9);
}
.pas--glebia .gotowosc > li:nth-child(2n) { border-inline-start-color: var(--zolc); }
.pas--glebia .gotowosc > li:nth-child(3n) { border-inline-start-color: var(--zolc-jasna); }
.pas--glebia .gotowosc > li:nth-child(5n) { border-inline-start-color: var(--iskra); }
.hero__skala { max-width: 40rem; }
.hero--strona .hero__skala { max-width: 26rem; }

/* --- 13. STOPKA ------------------------------------------------------- */
.stopka {
  position: relative; overflow: clip;
  background-color: var(--granat-glab);
  background-image:
    radial-gradient(60% 120% at 88% 6%, rgba(226, 102, 27, .26), rgba(8, 13, 40, 0) 64%),
    radial-gradient(70% 120% at 6% 96%, rgba(74, 26, 99, .5), rgba(8, 13, 40, 0) 70%);
  color: var(--na-ciemnym);
  padding-block: clamp(2.6rem, 1.6rem + 2.6vw, 4.4rem) clamp(2rem, 1.4rem + 1.6vw, 3rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--skala-barwy));
}
.stopka__siatka {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(191, 195, 220, .09) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  rgba(191, 195, 220, .07) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 88%);
          mask-image: linear-gradient(180deg, #000, transparent 88%);
}
.stopka__pas {
  position: relative; z-index: 1;
  display: grid; gap: 1.6rem 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .stopka__pas { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; align-items: start; }
}
.stopka__znak {
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.9rem);
  line-height: 1.16; letter-spacing: -.022em;
  color: var(--na-ciemnym);
  max-width: 18em;
}
.stopka__skala { display: block; max-width: 22rem; margin-block-start: 1.1rem; }
.stopka__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: .5rem; padding-inline: 0;
  color: var(--na-ciemnym-cichy); text-decoration: none; font-weight: 500;
  border-block-end: 1px solid transparent;
}
.stopka__menu a:hover { color: var(--zolc-jasna); border-block-end-color: var(--zolc-jasna); }
.stopka__gora { display: flex; justify-content: flex-start; }
.do-gory {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 48px; padding: .7rem 1.3rem;
  border: 1px solid var(--zolc-jasna);   /* ⚠ B6 mierzy obwódkę: 13,95:1 */
  border-radius: 999px;
  color: var(--zolc-jasna); text-decoration: none; font-weight: 600;
  font-family: var(--kroj-naglowek);
  transition: background-color .18s ease, color .18s ease;
}
.do-gory svg { width: 18px; height: 18px; flex: none; }
.do-gory:hover { background: var(--zolc-jasna); color: var(--granat-glab); }

/* --- 14. ARKUSZ SYSTEMU (specimen) ------------------------------------ */
.próbki { list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.próbka {
  display: grid; gap: .55rem;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien);
  padding: .8rem;
}
.próbka__pole { display: block; height: 3.4rem; border-radius: var(--promien); box-shadow: inset 0 0 0 1px rgba(23, 22, 50, .18); }
.próbka__opis { font-size: .88rem; color: var(--atrament-cichy); font-family: var(--kroj-maszyna); line-height: 1.5; }
.okazy { display: grid; gap: 1.2rem; margin-block-start: 1.5rem; }
.okaz { background: var(--papier-karta); border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy); padding: 1.4rem 1.5rem; box-shadow: var(--cien-karta); }
.okaz__etykieta { font-family: var(--kroj-maszyna); font-size: .8rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--wiodaca-ciemna); margin-block-end: .7rem; }
.okaz__rysunek { display: block; color: var(--wiodaca-ciemna); }
.okaz__rysunek svg { width: 100%; max-width: 420px; height: auto; display: block; margin-inline: auto; }
@media (min-width: 860px) { .okazy { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } }

/* --- 15. RUCH, DRUK, WĄSKIE EKRANY ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .przycisk:hover { transform: none; }
}

@media (max-width: 520px) {
  .odczyt { padding: 1.25rem 1.15rem 1.3rem 1.5rem; }
  .zapowiedz { --karta-pad: 1.2rem; padding: 1.3rem var(--karta-pad) 0; }
  .przycisk { width: 100%; justify-content: space-between; }
}

@media print {
  .naglowek, .stopka, .hero__plama, .hero__zaslona, .hero__siatka,
  .hero__izotermy, .ornament-izotermy, .rozdzielnik { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { background: #fff !important; color: #000; box-shadow: none; padding-block: 0 1rem; }
  .pas { background: #fff !important; color: #000; padding-block: .6rem; }
  .odczyt, .zapowiedz, .gotowosc > li { box-shadow: none; border: 1px solid #999; }
  a { color: #000; }
}