/* =====================================================================
   czystepowietrze.wolomin.pl — MAKIETA PREMIUM „DWA PORZĄDKI POD KĄTEM
   PROSTYM — WSPÓLNY TYLKO PRZEDMIOT”
   ---------------------------------------------------------------------
   Teza serwisu: h1 „JEDNO ŹRÓDŁO CIEPŁA, DWA KALENDARZE i jeden komplet
   dowodów”; „spotykają się przy tym samym kotle, ale NIE MAJĄ WSPÓLNEGO
   ZEGARA”; „DOTACJA NIE PRZESUWA OBOWIĄZKU, a TERMIN PRAWNY NIE TWORZY PRAWA
   DO DOTACJI”; wpis-2 „KALENDARZ OBOWIĄZKU NIE JEST KALENDARZEM DOTACJI”.

   Rysunek (zmierzony): PEŁNY kwadrat 56 px w narożniku (200,300) — źródło
   ciepła. W GÓRĘ oś prawa: PRZERYWANA 12/10 (6 px, 266 px) z dwiema GRUBYMI
   belkami 90 × 10 w stałych odległościach (y 210, 90). W PRAWO oś programu:
   PEŁNA (6 px, 890 px) z sześcioma pełnymi kwadratami 18 px w nierównych
   odstępach (90/50/140/190/60). Osie PROSTOPADŁE — wspólny tylko przedmiot.

   ⚠⚠ OSIE SĄ PROSTOPADŁE, NIE RÓWNOLEGŁE — serwis każe „narysować dwie
   poziome linie”, ale CHRONOLOGIA NA DWÓCH TORACH należy do
   emigracjapodatkowa.pl. ⚠⚠ OŚ PRAWA JEST PRZERYWANA I MA BELKI, OŚ
   PROGRAMU JEST PEŁNA I MA KWADRATY — jakości i znaki się nie mieszają.
   ⚠⚠ ŻADNYCH DWÓCH DRÓG DO JEDNEGO REKORDU (otocertyfikat.pl), ŻADNEJ
   TWARDEJ BELKI TERMINU Z ZAPASEM (przewodniknawycieczke.pl), ŻADNYCH RZĘDÓW
   O RÓŻNYM ROZSTAWIE (otoprzewodnik.pl).
   ⚠ Żadnego kotła, płomienia, komina, zegara, kalendarza. Bez liter i cyfr.
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: szmaragd jest czystą zielenią obok mchu (szary),
   petrolu (niebieski) i oliwki (żółta) w tej rodzinie; stal jasna jest
   ciemniejsza i bardziej niebieska od mgieł doradcaenergetyczny.com
   i czystepowietrze.mazury.pl.
   ⚠ FRAGMENT MONO (400) powtórzone po pomowienia.pl — pula nieużytych mono
   wyczerpana; plan dopuszcza powtórki krojów maszynowych.

   ⚠ SZKIELET przeniesiony z cieplemieszkanie.gmina.pl (jasna płyta, karty
   `lista-wpisow`, blok do 1319 px); ozdobniki, tokeny i kroje przepisane.
   Kopiowanie SZKIELETU dozwolone, PROJEKTU nie.

   ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz /
   dokladka.py. Domena na liście premium-recznie.txt. Seria ST-CBF.
   ⚠ KANON 9b i 9c (blog ma `kroki` w hero); ozdobniki na jasnej płycie biorą
   `--szmaragd-kreska`; kotwiczone do dołu; pozycje czterowartościowe.
   ⚠ Rodzina DOTACJE (RODZINA-DOTACJE.md).
   ===================================================================== */

/* ⚠ NAPRAWA 2026-09-06 (Opus 5): `margin-inline: auto` dla .kroki, .wyliczenie i .zrodlo.
   Skrót `margin: … 0 …` w tych trzech regułach (swoistość 0-2-0, PÓŹNIEJ w arkuszu) bił
   `.pasmo > .kontener > * { margin-inline: auto }` i przy 1100–1439 px — czyli na typowym
   ekranie laptopa — listy i ramka źródeł stały 204 px w lewo od kolumny prozy. Powyżej progu
   siatki (1440 px) blok @media i tak ustawia `margin-inline: 0`, więc szerokie ekrany bez zmian.
   Zmierzone sondą narzedzia-fable/sonda-listy-1366.mjs na 78 arkuszach premium. */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --stal:        #DEE3E8;   /* jasna płyta nagłówka i hero — stal jasna */
  --stal-cien:   #CFD6DC;
  --papier:      #F2F4F6;
  --karta:       #FFFFFF;
  --ochra-noc:   #2B2416;   /* pasmo domykające i stopka — ochra czarna */
  --ochra-blask: #4A4030;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1A1D20;   /* 13,2 / 11,4 na cieniu / 15,5 / 16,93 */
  --tekst-cichy: #4B5158;   /*  6,2 / 5,47 na cieniu / 7,4 */
  --na-ochrze:       #EFEBE2; /* 12,92 / 8,54 na blasku */
  --na-ochrze-cichy: #BFB8A8; /*  7,78 / 5,15 na blasku */

  /* szmaragd — TRZY wartości (kanon, punkt 12), policzone */
  --szmaragd-pismo:  #175A3E; /* PISMO — 6,33 / 5,57 na cieniu / 7,42 / 8,18 */
  --szmaragd-kreska: #237450; /* kreski — 4,41 / 3,88 na cieniu / 5,17 / 5,70 */
  --szmaragd-jasny:  #A5E0C3; /* na ciemnych płytach — 10,28 / 6,80 na blasku */

  --obwodka:       #747B80; /* 3,33 na stali / 3,9 / 4,30 */
  --linia-cicha:   #D5DBE0;
  --obwodka-ciemna:#9B9280; /* 4,99 na ochrze / 3,30 na blasku */

  --kroj-naglowek: "Glegoo", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Geologica", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Fragment Mono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;

  --kolumna:         34rem;
  --kolumna-hero:    36rem;
  --kolumna-szeroka: 56rem;
  --margines:        clamp(20px, 5vw, 104px);
  --szyna: 15rem;
  --rowek: 2.6rem;

  --promien:       2px;
  --promien-karta: 3px;
  --cien-karta: 0 16px 34px -28px rgba(43, 36, 22, .42);
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* B13 warunek 1 i 2 */
  font-size: clamp(1rem, .9rem + .3vw, 1.34rem);
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
}
body {
  margin: 0; background: var(--papier); color: var(--tekst);
  font-family: var(--kroj-tekst); font-size: 1rem; line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
::selection { background: var(--szmaragd-jasny); color: var(--ochra-noc); }
:focus-visible { outline: 3px solid var(--szmaragd-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--szmaragd-jasny); }
/* ⚠ NIE „1px + clip” — cel dotykowy 1x1 px, B7 zapala czerwień. */
.omin {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 40;
  display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1.2rem;
  background: var(--szmaragd-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. STAL I PAPIER -------------------------------------------- */
/* ⚠ Nagłówek i hero są JASNE, więc pismo w nich jest CIEMNE. */
.naglowek, .hero { position: relative; isolation: isolate; color: var(--tekst); }
.naglowek { background: var(--stal); }

/* --- 3. KONTENER ----------------------------------------------------- */
.kontener {
  width: 100%; max-width: calc(var(--kolumna-szeroka) + 2 * var(--margines));
  margin-inline: auto; padding-inline: var(--margines);
}
.pasmo > .kontener > *  { max-width: var(--kolumna);      margin-inline: auto; }
.hero__kontener > *     { max-width: var(--kolumna-hero); margin-inline: auto; }
/* ⚠ KANON 10b: karty biorą szerszą miarę SAME — nie ma opakowania listy. */
.pasmo > .kontener > .zapowiedz    { max-width: var(--kolumna-szeroka); }
.pasmo > .kontener > .lista-wpisow { max-width: var(--kolumna-szeroka); }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek__stal {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--stal);
  background-image: linear-gradient(180deg, var(--stal) 0%, var(--stal-cien) 100%);
}
/* wzdłuż dolnej krawędzi: szereg narożników — kwadrat, oś kropkowana w górę
   z belką, oś pełna w prawo z kwadratami zdarzeń; okres 56 px.
   ⚠⚠ NAZWA WARSTWY NIE MOŻE BRZMIEĆ `naglowek__pas` — tak nazywa się
   KONTENER nagłówka w HTML generatora (`.kontener.naglowek__pas`); 6.09
   kolizja nazw rozsypała nagłówek (kontener stał się 13-pikselowym paskiem). */
.naglowek__osie {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--szmaragd-kreska) 2px 7px, transparent 7px),
    linear-gradient(90deg, transparent 0 4px, var(--szmaragd-kreska) 4px 6px, transparent 6px),
    linear-gradient(90deg, transparent 0 4px, var(--szmaragd-kreska) 4px 6px, transparent 6px),
    linear-gradient(90deg, transparent 0 1px, var(--szmaragd-kreska) 1px 9px, transparent 9px),
    linear-gradient(90deg, transparent 0 9px, var(--szmaragd-kreska) 9px 48px, transparent 48px),
    linear-gradient(90deg, transparent 0 16px, var(--szmaragd-kreska) 16px 19px, transparent 19px),
    linear-gradient(90deg, transparent 0 30px, var(--szmaragd-kreska) 30px 33px, transparent 33px);
  background-size: 56px 5px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 3px, 56px 3px;
  background-position: left 0px top 8px, left 0px top 0px, left 0px top 5px, left 0px top 3px, left 0px top 10px, left 0px top 9px, left 0px top 9px;
  background-repeat: repeat-x;
  opacity: .9;
}
/* ⚠ To jest KONTENER nagłówka z HTML generatora — nazwa `naglowek__pas` jest
   zajęta przez HTML, warstwa ozdobna nazywa się `naglowek__osie`. */
.naglowek__pas {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem clamp(1rem, 3vw, 2.6rem); justify-content: space-between;
  padding-block: clamp(.9rem, .6rem + .8vw, 1.5rem) clamp(1.2rem, .9rem + .9vw, 1.9rem);
}
.znak { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--tekst); text-decoration: none; }
/* znak rozpoznawczy: narożnik — kwadrat, oś kropkowana z belką, oś pełna z dwoma kwadratami */
.znak__osie {
  flex: none; width: 34px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 6px 6px, 2px 7px, calc(100% - 8px) 2px, 7px 2px, 3px 3px, 3px 3px;
  background-position: left 0px bottom 0px, left 2px bottom 7px, left 8px bottom 2px, left -1px bottom 10px, left 13px bottom 2px, left 24px bottom 2px;
  background-repeat: no-repeat;
}
.znak__slowo {
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.08rem, .96rem + .46vw, 1.4rem); letter-spacing: -.01em;
}
.znak:hover .znak__slowo { color: var(--szmaragd-pismo); }

.menu { min-width: 0; }
.menu__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(.2rem, 1vw, 1.1rem); margin: 0; padding: 0; list-style: none; }
.menu__link {
  position: relative; display: inline-flex; align-items: center; min-height: 46px;  /* B7 */
  padding-inline: .5em;
  color: var(--tekst-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .78rem; letter-spacing: -.01em;
}
.menu__link:hover { color: var(--szmaragd-pismo); }
/* pozycja bieżąca: pod napisem narożnik dwóch osi.
   ⚠⚠ KANON 3b: znacznik OBOK pisma, nigdy tło pod nim.
   ⚠ Odstępy w PIKSELACH — pudełko ma sztywne min-height 46px (P-11). */
.menu__link[aria-current="page"] { color: var(--tekst); font-weight: 600; }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em;
  height: 10px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 4px 4px, 2px 5px, calc(100% - 6px) 2px, 7px 2px, 2px 2px, 2px 2px;
  background-position: left 0px bottom 0px, left 1px bottom 5px, left 6px bottom 1px, left -2px bottom 7px, left 11px bottom 1px, left 20px bottom 1px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — dwa porządki pod kątem prostym ------------------------ */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--stal);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__stal {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--stal);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--stal-cien) 0%, rgba(207, 214, 220, 0) 66%),
    linear-gradient(170deg, var(--stal) 0%, var(--stal-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__narozniki {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (obie osie i przedmiot), obok kolumny (1320–1920 px). */
  inset-block-start: 54%; inset-inline-end: 2%;
  width: clamp(26rem, 30vw, 38rem); aspect-ratio: 1200 / 420;
  transform: translateY(-50%);
  color: var(--szmaragd-pismo); opacity: .52;
}
.hero__narozniki svg { width: 100%; height: 100%; }
/* zanik od lewej — w jasnym rejestrze warstwa jest JASNA. Rysunek stoi
   po prawej w całości, więc zanik chroni tylko kolumnę tekstu. */
.hero__zanik {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    var(--stal) 0%, rgba(222, 227, 232, .94) 30%, rgba(222, 227, 232, .2) 50%, rgba(222, 227, 232, 0) 100%);
}
.hero__kontener { position: relative; z-index: 3; }
/* ⚠ EKRANY DO 1319 px: rysunek dostaje WŁASNE MIEJSCE nad tytułem (kontener
   dostaje górne dopełnienie równe wysokości rysunku), a zanik zaczyna się
   dopiero pod nim — z boku wchodziłby pod akapit. */
@media (max-width: 1319px) {
  .hero__kontener { padding-block-start: clamp(6rem, 26vw, 12rem); }
  .hero__narozniki {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(222, 227, 232, 0) 0%, rgba(222, 227, 232, 0) 22%, rgba(222, 227, 232, .9) 40%, rgba(222, 227, 232, .9) 100%);
  }
}

/* ⚠ Tu barwa tytułu jest ta sama w hero i poza nim, bo hero JEST jasne —
   ale reguła zostaje jawna, żeby specimen.html też był poprawny
   (kanon, punkt 4). */
.tytul {
  margin: 0 0 clamp(.9rem, .6rem + .8vw, 1.5rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2rem, 1.26rem + 2.9vw, 3.8rem);
  line-height: 1.12; letter-spacing: -.018em;
  color: var(--tekst); text-wrap: balance;
}
.hero .tytul { color: var(--tekst); }
/* nad tytułem: większy narożnik — dwie belki na osi kropkowanej, trzy zdarzenia na osi pełnej.
   ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */
.hero .tytul::before {
  content: ""; display: block;
  width: 8.4rem; height: 22px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 8px 8px, 2px 13px, calc(100% - 10px) 2px, 7px 2px, 7px 2px, 4px 4px, 4px 4px, 4px 4px;
  background-position: left 0px bottom 0px, left 3px bottom 9px, left 10px bottom 3px, left 0px bottom 13px, left 0px bottom 19px, left 1.6rem bottom 2px, left 3rem bottom 2px, left 5.4rem bottom 2px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--tekst);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--tekst-cichy); }
/* ⚠⚠ KANON 3c i 3d: swoistość (0-3-1), ale TYLKO proza — nie pigułka odsyłacza. */
.tresc .hero p:not(.przejscie) a:not(.przycisk) { color: var(--szmaragd-pismo); }

/* --- 6. PASMA TREŚCI ------------------------------------------------- */
.tresc { display: block; counter-reset: pasmo; }
.pasmo {
  position: relative; counter-increment: pasmo;
  padding-block: clamp(2.2rem, 1.5rem + 2.4vw, 4.2rem);
  background: var(--papier);
}
.pasmo:nth-of-type(even) { background: var(--karta); }
.pasmo + .pasmo::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 1px; background: var(--linia-cicha);
}
/* ⚠⚠ KANON 1 i 3 */
.pasmo:last-of-type:not(:nth-of-type(1)) {
  background-color: var(--ochra-noc);
  background-image: linear-gradient(180deg, var(--ochra-blask) 0%, var(--ochra-noc) 62%);
  color: var(--na-ochrze);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--szmaragd-jasny); height: 2px; opacity: .8; }
/* ⚠⚠ KANON 2: TYLKO BEZPOŚREDNIE DZIECI KONTENERA */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p  { color: var(--na-ochrze-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-ochrze); }
/* ⚠⚠ KANON 2c: h3 i .zajawka mają własną CIEMNĄ barwę z jasnego tła —
   bez tego 1,07:1 (zmierzone 4.09 na otoenergia.pl). */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3 { color: var(--na-ochrze); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-ochrze-cichy); border-inline-start-color: var(--szmaragd-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--szmaragd-jasny); text-decoration-color: var(--szmaragd-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-ochrze); }

/* --- 7. TYPOGRAFIA TREŚCI ------------------------------------------- */
.tresc h2 {
  margin: 0 0 clamp(.7rem, .5rem + .5vw, 1.1rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.08vw, 2.16rem);
  line-height: 1.2; letter-spacing: -.016em;
  color: var(--tekst); text-wrap: balance;
}
/* numer sekcji NAD NAROŻNIKIEM DWÓCH OSI.
   ⚠ Pudełko ma stałą wysokość w px u dołu (padding 14 px), więc przesunięcia
   ozdobnika w px; WSZYSTKO kotwiczone do dołu (ozdobnik w dolnych 12 px). */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  /* ⚠ `flex` (blokowy), nie `inline-flex`. Ozdobnik w dolnych 12 px pudełka. */
  display: flex; width: max-content; align-items: flex-start; justify-content: flex-start;
  min-width: 3.6rem; height: 2rem; margin-block-end: .6rem; padding-block-end: 14px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 5px 5px, 2px 6px, calc(100% - 7px) 2px, 7px 2px, 3px 3px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 8px, left 14px bottom 1px, left 1.6rem bottom 1px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--szmaragd-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--szmaragd-jasny);
  background-image:
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-jasny) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%);
  background-size: 5px 5px, 2px 6px, calc(100% - 7px) 2px, 7px 2px, 3px 3px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 8px, left 14px bottom 1px, left 1.6rem bottom 1px;
  background-repeat: no-repeat;
}
.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.08rem, .98rem + .4vw, 1.32rem); line-height: 1.34; color: var(--tekst);
}
.tresc p { margin: 0 0 1.1em; }
.tresc p:last-child { margin-block-end: 0; }
.wprowadzenie { font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); line-height: 1.66; }
.zajawka {
  margin: 0 0 1.3em; padding-inline-start: 1.1rem;
  border-inline-start: 4px solid var(--szmaragd-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--szmaragd-pismo);
  text-decoration-line: underline; text-decoration-color: var(--szmaragd-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc p a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }

/* --- 8. KROKI I WYLICZENIA -------------------------------------------
   KROKI to zdarzenia sprawy po kolei — numer nad narożnikiem.
   WYLICZENIE to rzeczy do sprawdzenia — zdarzenie co pozycję w innym miejscu
   osi pełnej: sprawa wyznacza, gdzie ono wypada.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   -------------------------------------------------------------------- */
.tresc .kroki { margin: .4em auto 1.4em; padding: 0; list-style: none; counter-reset: krok; }
.tresc .kroki li {
  counter-increment: krok; position: relative; padding: .7em 0 .7em 3.2rem;
  border-block-end: 1px solid var(--linia-cicha);
}
/* ⚠ Kreskę zdejmujemy ostatniej pozycji W UKŁADZIE; wykaz jednoszpaltowy (P-2). */
.tresc .kroki li:last-child { border-block-end: 0; }
/* ⚠⚠ KANON 9b: ODSYŁACZ WEWNĄTRZ `.kroki` JEST CELEM UI. B7 mierzy sam
   element `<a>`, nie `<li>`, więc padding listy go NIE ratuje. Zmierzone
   4.09→5.09 na tej domenie: `<a>` „Czy ten dokument trzeba drukować?”
   259 × 20 px przy progu 44.
   ⚠ `display: inline-block`, NIE `inline-flex`: flex nie zawija tekstu,
   więc długi tytuł wyszedłby za krawędź i zapalił B5 (brak przewijania
   w poziomie 360–1920). */
.tresc .kroki li > a { display: inline-block; min-height: 44px; padding-block: .7rem; }
.tresc .kroki li::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: .4em;
  display: inline-flex; align-items: flex-start; justify-content: center;
  min-width: 2.4rem; height: 2.1rem; padding-inline: .35rem; padding-block-end: 14px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 5px 5px, 2px 6px, calc(100% - 7px) 2px, 7px 2px, 3px 3px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 8px, left 12px bottom 1px, left 22px bottom 1px;
  background-repeat: no-repeat;
  color: var(--szmaragd-pismo);
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li { border-block-end-color: var(--obwodka-ciemna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li::before {
  color: var(--szmaragd-jasny);
  background-image:
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-jasny) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%);
  background-size: 5px 5px, 2px 6px, calc(100% - 7px) 2px, 7px 2px, 3px 3px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 8px, left 12px bottom 1px, left 22px bottom 1px;
  background-repeat: no-repeat;
}

.tresc .wyliczenie { margin: .4em auto 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 2.5rem; }
/* znacznik: narożnik; zdarzenie co pozycję w innym miejscu osi pełnej */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 30px; height: 12px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 5px 5px, 2px 6px, 23px 2px, 7px 2px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 8px, left 11px bottom 1px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 5px 5px, 2px 6px, 23px 2px, 7px 2px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 8px, left 18px bottom 1px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 5px 5px, 2px 6px, 23px 2px, 7px 2px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 8px, left 25px bottom 1px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-jasny) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%);
  background-size: 5px 5px, 2px 6px, 23px 2px, 7px 2px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 8px, left 11px bottom 1px;
  background-repeat: no-repeat;
}

/* ⚠⚠ KANON 9c: odsyłacz w wykazie nie jest objęty regułami prozy (te celują
   w `<a>` wewnątrz `<p>`), więc bez własnej reguły dostaje DOMYŚLNY BŁĘKIT
   przeglądarki. Tutaj hero jest JASNE, więc bramka B6 by przeszła — ale to
   i tak barwa spoza projektu, a ten serwis MA w hero spis treści
   („Wybierz pytanie, które blokuje decyzję”), więc reguła jest konieczna. */
.tresc .wyliczenie li a:not(.przycisk),
.tresc .kroki li a:not(.przycisk) {
  color: var(--szmaragd-pismo);
  text-decoration-line: underline; text-decoration-color: var(--szmaragd-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc .wyliczenie li a:not(.przycisk):hover,
.tresc .kroki li a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }
/* w ciemnym paśmie domykającym — barwa jasna */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li a:not(.przycisk),
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li a:not(.przycisk) {
  color: var(--szmaragd-jasny); text-decoration-color: var(--szmaragd-jasny);
}

.tresc .zrodlo {
  margin: 1.6em auto 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem);
  background: var(--karta); border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--szmaragd-kreska); border-radius: var(--promien);
  font-size: .93rem; line-height: 1.6; color: var(--tekst-cichy);
}
.pasmo:nth-of-type(even) .zrodlo { background: var(--papier); }
/* ⚠⚠ KANON 2b — blok z własnym jasnym tłem w ciemnym paśmie. */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wzor {
  background: rgba(239, 235, 226, .07);
  color: var(--na-ochrze-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--szmaragd-jasny);
}

/* --- 9. ODSYŁACZ KIERUNKOWY ----------------------------------------- */
/* ⚠ B7: samodzielny odsyłacz jest celem UI — min. 44 px. */
.tresc .przejscie { margin-block: 1.7em 0; }
.tresc .przejscie + .przejscie { margin-block-start: .7em; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 50px; padding: .5em 1.3em;
  background: var(--karta); border: 1px solid var(--obwodka);
  border-radius: var(--promien-karta);
  color: var(--tekst); text-decoration: none; font-weight: 600; font-size: .99rem;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.tresc .przejscie a::after { content: "→"; font-size: 1.04em; line-height: 1; transition: transform .22s ease; }
.tresc .przejscie a:hover { background: var(--ochra-noc); border-color: var(--ochra-noc); color: var(--na-ochrze); }
.tresc .przejscie a:hover::after { transform: translateX(4px); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a { background: transparent; border-color: var(--szmaragd-jasny); color: var(--na-ochrze); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--szmaragd-jasny); border-color: var(--szmaragd-jasny); color: var(--ochra-noc); }

/* --- 10. POLE WEZWANIA I PRZYCISK ----------------------------------- */
.tresc .cta { margin-block: clamp(1.7rem, 1.2rem + 1.3vw, 2.7rem) 1.7em; }  /* KANON 7 (P-1) */
/* ⚠⚠ KANON 5: swoistość musi dorównać `.tresc .przejscie a` (0-2-1). */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 56px; padding: .85rem 1.9rem;
  background: var(--szmaragd-pismo); color: var(--karta);
  border: 2px solid var(--szmaragd-pismo); border-radius: var(--promien-karta);
  font-family: var(--kroj-tekst); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .004em; text-decoration: none;
  transition: background-color .22s ease, border-color .22s ease;
}
.tresc .przejscie a.przycisk::after { content: "→"; }
.przycisk:hover, .tresc a.przycisk:hover, .tresc .przejscie a.przycisk:hover {
  background: var(--ochra-noc); border-color: var(--ochra-noc);
}
/* ⚠ pułapka „.tresc p a bije .przycisk” */
.tresc p a.przycisk { color: var(--karta); text-decoration: none; }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk {
  background: var(--szmaragd-jasny); color: var(--ochra-noc); border-color: var(--szmaragd-jasny);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-ochrze); border-color: var(--na-ochrze);
}

/* --- 11. KARTY KATALOGU — NAROŻNIK NA GÓRNEJ KRAWĘDZI -------------- */
.lista-wpisow {
  margin: clamp(1.6rem, 1.1rem + 1.4vw, 2.8rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.7rem); counter-reset: wpis;
}
@media (min-width: 900px)  { .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zapowiedz {
  counter-increment: wpis; position: relative; display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem) clamp(1.2rem, .9rem + 1vw, 1.8rem) clamp(1.2rem, .9rem + 1vw, 1.8rem);
  background: var(--karta); border: 1px solid var(--obwodka);
  border-radius: var(--promien-karta); box-shadow: var(--cien-karta);
}
.pasmo:nth-of-type(even) .zapowiedz { background: var(--papier); }
/* na górnej krawędzi karty: narożnik dwóch osi */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 5rem; height: 12px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 5px 5px, 2px 6px, calc(100% - 7px) 2px, 7px 2px, 3px 3px, 3px 3px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 8px, left 1rem bottom 1px, left 2rem bottom 1px, left 3.4rem bottom 1px;
  background-repeat: no-repeat;
}
.zapowiedz::after {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-start: 1.15rem; inset-inline-end: 1rem;
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; color: var(--szmaragd-pismo);
}
/* ⚠⚠ KANON 6: tytuł karty JEST h2 — cofamy reguły „.tresc h2” tym samym
   prefiksem, RAZEM Z OZDOBNIKIEM NUMERU (background, min-width, height,
   padding, display: inline-flex). */
.tresc .zapowiedz__tytul {
  margin: .3rem 2.4rem .5rem 0; padding: 0; border: 0;
  width: auto; min-width: 0; height: auto; background: none; max-width: none; display: block;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.06rem, .98rem + .4vw, 1.3rem); line-height: 1.3; letter-spacing: -.012em;
  color: var(--tekst);
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
/* ⚠ „.tresc li a” (0-1-2) bije „.zapowiedz__tytul a” (0-1-1). */
.tresc .zapowiedz__tytul a { display: block; min-height: 44px; color: var(--tekst); text-decoration: none; }
.tresc .zapowiedz__tytul a:hover { color: var(--szmaragd-pismo); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1rem; color: var(--tekst-cichy); font-size: .96rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .1rem;
  text-decoration: none; color: var(--szmaragd-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--szmaragd-kreska);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--tekst); border-block-end-color: var(--tekst); }
/* ⚠ `.zapowiedz__wiecej` ma OBIE klasy naraz (`zapowiedz__wiecej przejscie`). */
.tresc .zapowiedz .przejscie a {
  background: none; border: 0; border-block-end: 2px solid var(--szmaragd-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--szmaragd-pismo);
}
.tresc .zapowiedz .przejscie a::after { content: none; }
.tresc .zapowiedz .przejscie a:hover { background: none; color: var(--tekst); border-block-end-color: var(--tekst); }

/* --- 12. STOPKA ----------------------------------------------------- */
.stopka {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.2rem, 1.5rem + 2vw, 3.6rem);
  background: var(--ochra-noc); color: var(--na-ochrze);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--ochra-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--ochra-blask) 0%, rgba(74, 64, 48, 0) 64%),
    linear-gradient(180deg, var(--ochra-blask) 0%, var(--ochra-noc) 58%);
}
.stopka__osie {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--szmaragd-jasny) 2px 7px, transparent 7px),
    linear-gradient(90deg, transparent 0 4px, var(--szmaragd-jasny) 4px 6px, transparent 6px),
    linear-gradient(90deg, transparent 0 4px, var(--szmaragd-jasny) 4px 6px, transparent 6px),
    linear-gradient(90deg, transparent 0 1px, var(--szmaragd-jasny) 1px 9px, transparent 9px),
    linear-gradient(90deg, transparent 0 9px, var(--szmaragd-jasny) 9px 48px, transparent 48px),
    linear-gradient(90deg, transparent 0 16px, var(--szmaragd-jasny) 16px 19px, transparent 19px),
    linear-gradient(90deg, transparent 0 30px, var(--szmaragd-jasny) 30px 33px, transparent 33px);
  background-size: 56px 5px, 56px 2px, 56px 2px, 56px 2px, 56px 2px, 56px 3px, 56px 3px;
  background-position: left 0px top 8px, left 0px top 0px, left 0px top 5px, left 0px top 3px, left 0px top 10px, left 0px top 9px, left 0px top 9px;
  background-repeat: repeat-x;
  opacity: .56;
}
.stopka .kontener { position: relative; z-index: 2; }
.stopka__znak {
  margin: 0 0 .9rem; font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.04rem, .96rem + .4vw, 1.3rem); color: var(--na-ochrze);
}
/* pod znakiem stopki: narożnik dwóch osi */
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 13px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    repeating-linear-gradient(180deg, var(--szmaragd-jasny) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%);
  background-size: 5px 5px, 2px 7px, calc(100% - 7px) 2px, 7px 2px, 3px 3px, 3px 3px, 3px 3px;
  background-position: left 0px bottom 0px, left 1px bottom 6px, left 7px bottom 1px, left -2px bottom 9px, left 1rem bottom 1px, left 2rem bottom 1px, left 3.4rem bottom 1px;
  background-repeat: no-repeat;
}
.stopka__menu ul { display: flex; flex-wrap: wrap; gap: 0 clamp(.6rem, 2vw, 1.8rem); margin: 0; padding: 0; list-style: none; }
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  color: var(--na-ochrze-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--szmaragd-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — NAROŻNIK W PRAWYM TORZE --------------------
   ⚠⚠ KANON 10: tory boczne SYMETRYCZNE, środkowy w REM, row-gap ZEROWY,
   ozdobnik w TORZE SIATKI (nie pseudoelementem `main.tresc`).
   -------------------------------------------------------------------- */
@media screen and (min-width: 1560px) {
  .pasmo > .kontener, .hero__kontener {
    display: grid;
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna)) [proza-end]
      minmax(0, 1fr) [pelna-end];
    column-gap: var(--rowek); row-gap: 0; align-items: start; max-width: none;
  }
  .hero__kontener {
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna-hero)) [proza-end]
      minmax(0, 1fr) [pelna-end];
  }
  .pasmo > .kontener > *, .hero__kontener > * { grid-column: proza; max-width: none; margin-inline: 0; }
  .pasmo > .kontener > h2 {
    grid-column: pelna-start / proza-start;
    justify-self: end; text-align: end;
    max-width: var(--szyna); margin-block: 0;
  }
  .pasmo > .kontener > h2::before { margin-inline-start: auto; }
  .pasmo > .kontener > h2 + * { margin-block-start: 0; }
  /* ⚠⚠ KANON 8 (P-17) */
  .pasmo > .kontener > h3 { margin-block: clamp(1.9rem, 1.2rem + 1.4vw, 2.7rem) 0; }
  .pasmo > .kontener > h3 + * { margin-block-start: .5rem; }
  /* ⚠ KANON 10b: karty biorą szerszy tor SAME, bo nie ma opakowania listy. */
  .pasmo > .kontener > .zapowiedz    { grid-column: proza-start / pelna-end; max-width: none; }
  .pasmo > .kontener > .lista-wpisow { grid-column: proza-start / pelna-end; max-width: none; }
  .hero__kontener > .tytul { grid-column: proza; }

  /* przedmiot u dołu, oś kropkowana w górę z belkami, krótka oś pełna w bok ze zdarzeniem */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 1.5rem; min-height: 2.4rem;
    background-image:
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      repeating-linear-gradient(180deg, var(--szmaragd-kreska) 0 2px, transparent 2px 4px),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
    background-size: 6px 6px, 2px calc(100% - 8px), 8px 2px, 8px 2px, 13px 2px, 4px 4px;
    background-position: left 0px bottom 0px, left 2px top 0px, left 0px top 18%, left 0px top 46%, left 7px bottom 2px, left 13px bottom 1px;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      repeating-linear-gradient(180deg, var(--szmaragd-jasny) 0 2px, transparent 2px 4px),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%);
    background-size: 6px 6px, 2px calc(100% - 8px), 8px 2px, 8px 2px, 13px 2px, 4px 4px;
    background-position: left 0px bottom 0px, left 2px top 0px, left 0px top 18%, left 0px top 46%, left 7px bottom 2px, left 13px bottom 1px;
    background-repeat: no-repeat;
}
}

/* --- 14. ARKUSZ SYSTEMU (specimen.html — dokument warsztatowy) ------ */
.próbki { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.próbka__pole { display: block; height: 3.2rem; border: 1px solid var(--obwodka); }
.próbka__opis { display: block; font-family: var(--kroj-maszyna); font-size: .78rem; color: var(--tekst-cichy); padding-block-start: .35em; }

/* --- 15. RUCH I DRUK ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media print {
  .naglowek__stal, .naglowek__osie, .hero__stal, .hero__narozniki,
  .hero__zanik, .stopka__plyta, .stopka__osie { display: none !important; }
  html { font-size: 11pt; }
  body, .naglowek, .hero, .stopka, .pasmo, .pasmo:nth-of-type(even),
  .pasmo:last-of-type:not(:nth-of-type(1)) { background: #fff !important; color: #000 !important; }
  .tytul, .hero .tytul, .tresc h2, .tresc h3, .znak__slowo, .stopka__znak,
  .hero p, .stopka__menu a, .menu__link { color: #000 !important; }
  .tresc .hero p:not(.przejscie) a:not(.przycisk) { color: #000 !important; }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo { color: #000 !important; border-inline-start-color: #000 !important; }
  .pasmo > .kontener > h2::before { color: #000 !important; border-color: #000 !important; }
  .tresc .kroki li::before { background: none !important; color: #000 !important; border-color: #000 !important; }
  .tresc .wyliczenie li::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 4px),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .zapowiedz::before,
  .stopka__znak::after {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 4px),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .pasmo > .kontener > h2::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 4px),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .zapowiedz::after { color: #000 !important; }
  a.przycisk { background: none !important; color: #000 !important; border-color: #000 !important; }
  .pasmo > .kontener > *, .hero__kontener > * { max-width: none; }
  .pasmo > .kontener::after { display: none; }
}