/* =====================================================================
   mojprad.wolomin.pl — MAKIETA PREMIUM „JEDNA INSTALACJA, DWA NIEZALEŻNE
   REJESTRY, JEDEN ODSYŁACZ”
   ---------------------------------------------------------------------
   Teza serwisu: h1 „Jedna instalacja po realizacji, DWA NIEZALEŻNE
   REJESTRY” — Rejestr A (co dzieje się z PPE u OSD), Rejestr B (co dzieje
   się z istniejącym MP6); h2 „Najważniejsza reguła: A NIE POTWIERDZA
   AUTOMATYCZNIE B”; h2 „ŁĄCZ REJESTRY ODSYŁACZEM, NIE WSPÓLNYM STATUSEM”.

   Rysunek (zmierzony): u góry pośrodku JEDEN pełny kwadrat 48 px
   (instalacja); niżej DWA REJESTRY jako osobne kolumny — belka nagłówka
   i pełne wiersze różnej długości: A 380 px szer., 5 wierszy co 38 px;
   B 340 px szer., 4 wiersze co 46 px (inny rytm); pustka między nimi 160 px.
   JEDNA cienka kreska (3 px) — odsyłacz — od końca wiersza A3 do początku
   wiersza B2, SKOŚNA, bo łączy wiersze o różnych wysokościach: to
   odesłanie, nie wspólny status. Nic więcej rejestrów nie łączy.

   ⚠⚠ DWA REJESTRY, JEDEN ODSYŁACZ — to jest cała treść: żadnej wspólnej
   belki, żadnego wspólnego statusu; kwadrat instalacji osobno, nad oboma.
   ⚠⚠ ŻADNYCH DWÓCH KOLUMN NA JEDNYM ARKUSZU (lekinatelefon.pl — tu dwie
   OSOBNE kolumny o innej szerokości i rytmie, z pustką między), ŻADNYCH
   KRZYŻUJĄCYCH SIĘ LINII MIĘDZY KOLUMNAMI (otoranking.pl — jedna kreska),
   ŻADNYCH DWÓCH OSI POD KĄTEM (czystepowietrze.wolomin.pl — bliźniak
   miejski: tam dwa kalendarze, tu dwa rejestry stojące równolegle),
   ŻADNYCH DWÓCH TORÓW POZIOMYCH (emigracjapodatkowa.pl), ŻADNYCH DWÓCH
   PANELI NA ZAWIASIE (podpiselektroniczny.info.pl — nic nie styka się
   krawędzią), ŻADNEGO ŁAŃCUCHA (dermenic.pl), ŻADNEJ MATRYCY
   (dobrykandydat.pl — wiersze różnej długości, bez kolumn pól).
   ⚠ Żadnego panelu PV, licznika, wtyczki, herbu Wołomina. Bez liter
   i cyfr (A/B zostają w treści). Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: antracyt to akcent NEUTRALNY (bez odcienia) —
   jedyny taki w rodzinie obok stalowego łupka mojecieplo.olsztyn.pl
   (#34465E, niebieskawy); barwę niesie płyta: mięta (#D8E8DE) jest
   najbardziej ZIELONĄ jasną płytą rodziny (szałwia mojecieplo.ketrzyn.pl
   #E5EDE4 bledsza, mgła mazur #E2EAEA szara). Kobalt nocny sąsiaduje
   z indygo czarnym rolnika (#1A1F3A) i atramentem stalowym ketrzyna
   (#1B2130) — jest od nich jaśniejszy i bardziej nasycony.
   ⚠ M PLUS 1 CODE (400) — pierwsze użycie w seriach ST (latin-ext:
   sprawdzone 6.09); czystepowietrze.ketrzyn.pl ma pokrewny „M PLUS Code
   Latin” — inna rodzina, inna nazwa.

   ⚠ 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 2b (`.zrodlo` — w tej domenie brak), 9b i 9c (`wyliczenie`
   w blog i wpis-2; `kroki` w wpis-1); ozdobniki na jasnej płycie biorą
   `--antracyt-kreska`; kotwiczone do dołu; pozycje czterowartościowe;
   pas repeat-x: warstwy o szerokości okresu; odsyłacz skośny w glifach
   ≥ 30 px jako gradient pod kątem w małym pudełku.
   ⚠ 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 {
  --mieta:        #D8E8DE;   /* jasna płyta nagłówka i hero — mięta */
  --mieta-cien:   #C8DBD0;
  --papier:       #EEF5F1;
  --karta:        #FFFFFF;
  --kobalt-noc:   #1C2540;   /* pasmo domykające i stopka — kobalt nocny */
  --kobalt-blask: #354063;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1B1F1D;   /* 13,11 / 11,50 na cieniu / 15,05 / 16,66 */
  --tekst-cichy: #4B5350;   /*  6,23 / 5,47 na cieniu / 7,15 */
  --na-kobalcie:       #EDEFF5; /* 13,16 / 8,85 na blasku */
  --na-kobalcie-cichy: #B7BED2; /*  8,15 / 5,48 na blasku */

  /* antracyt — TRZY wartości (kanon, punkt 12), policzone */
  --antracyt-pismo:  #3A3E3C; /* PISMO — 8,54 / 7,50 na cieniu / 9,81 / 10,86 */
  --antracyt-kreska: #5B615E; /* kreski — 4,98 / 4,37 na cieniu / 5,72 / 6,33 */
  --antracyt-jasny:  #CFD8D3; /* na ciemnych płytach — 10,39 / 6,98 na blasku */

  --obwodka:       #66716C; /* 3,99 na mięcie / 3,50 na cieniu / 4,58 */
  --linia-cicha:   #C9DAD1;
  --obwodka-ciemna:#929BB0; /* 5,43 na kobalcie / 3,65 na blasku */

  --kroj-naglowek: "Ibarra Real Nova", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Inter Tight", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "M PLUS 1 Code", 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(28, 37, 64, .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(--antracyt-jasny); color: var(--kobalt-noc); }
:focus-visible { outline: 3px solid var(--antracyt-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--antracyt-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(--antracyt-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. MIĘTA 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(--mieta); }

/* --- 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__mieta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--mieta);
  background-image: linear-gradient(180deg, var(--mieta) 0%, var(--mieta-cien) 100%);
}
/* wzdłuż dolnej krawędzi: szereg — kwadrat instalacji nad dwoma rejestrami
   (kolumny wierszy) i jeden odsyłacz między nimi; 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__rejestry {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 26px, var(--antracyt-kreska) 26px 29px, transparent 29px),
    linear-gradient(90deg, transparent 0 2px, var(--antracyt-kreska) 2px 24px, transparent 24px),
    linear-gradient(90deg, transparent 0 2px, var(--antracyt-kreska) 2px 18px, transparent 18px),
    linear-gradient(90deg, transparent 0 2px, var(--antracyt-kreska) 2px 13px, transparent 13px),
    linear-gradient(90deg, transparent 0 2px, var(--antracyt-kreska) 2px 21px, transparent 21px),
    linear-gradient(90deg, transparent 0 32px, var(--antracyt-kreska) 32px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 32px, var(--antracyt-kreska) 32px 46px, transparent 46px),
    linear-gradient(90deg, transparent 0 32px, var(--antracyt-kreska) 32px 51px, transparent 51px),
    linear-gradient(90deg, transparent 0 22px, var(--antracyt-kreska) 22px 31px, transparent 31px);
  background-size: 56px 3px, 56px 1px, 56px 1px, 56px 1px, 56px 1px, 56px 1px, 56px 1px, 56px 1px, 56px 1px;
  background-position: left 0px top 0px, left 0px top 5px, left 0px top 7px, left 0px top 9px, left 0px top 11px, left 0px top 5px, left 0px top 8px, left 0px top 11px, 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__rejestry`. */
.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: kwadrat nad dwoma rejestrami, jeden odsyłacz */
.znak__rejestry {
  flex: none; width: 34px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%);
  background-size: 3px 3px, 14px 1px, 10px 1px, 7px 1px, 12px 1px, 14px 1px, 9px 1px, 12px 1px, 11px 1px;
  background-position: left 15px bottom 11px, left 0px bottom 8px, left 0px bottom 6px, left 0px bottom 4px, left 0px bottom 2px, left 20px bottom 8px, left 20px bottom 5px, left 20px bottom 2px, left 8px bottom 5px;
  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(--antracyt-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(--antracyt-pismo); }
/* pozycja bieżąca: pod napisem dwa rejestry i odsyłacz między nimi.
   ⚠⚠ 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(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(to top right, transparent calc(50% - .7px), var(--antracyt-kreska) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .7px));
  background-size: 3px 3px, 40% 1px, 28% 1px, 34% 1px, 40% 1px, 30% 1px, 12% 2px;
  background-position: left calc(50% - 1.5px) bottom 7px, left 0px bottom 4px, left 0px bottom 2px, left 0px bottom 0px, right 0px bottom 4px, right 0px bottom 1px, left 44% bottom 1px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — jedna instalacja, dwa rejestry, jeden odsyłacz -------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--mieta);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__mieta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--mieta);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--mieta-cien) 0%, rgba(200, 219, 208, 0) 66%),
    linear-gradient(170deg, var(--mieta) 0%, var(--mieta-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__rejestry {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (kwadrat, oba rejestry, odsyłacz), 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(--antracyt-pismo); opacity: .52;
}
.hero__rejestry 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(--mieta) 0%, rgba(216, 232, 222, .94) 30%, rgba(216, 232, 222, .2) 50%, rgba(216, 232, 222, 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__rejestry {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(216, 232, 222, 0) 0%, rgba(216, 232, 222, 0) 22%, rgba(216, 232, 222, .9) 40%, rgba(216, 232, 222, .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: kwadrat instalacji, dwa rejestry o różnym rytmie, jeden skośny odsyłacz.
   ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */
.hero .tytul::before {
  content: ""; display: block;
  width: 120px; height: 32px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(to top right, transparent calc(50% - .7px), var(--antracyt-kreska) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .7px));
  background-size: 6px 6px, 48px 2px, 38px 2px, 28px 2px, 44px 2px, 22px 2px, 34px 2px, 54px 2px, 34px 2px, 42px 2px, 26px 2px, 38px 2px, 20px 2px;
  background-position: left 57px bottom 26px, left 0px bottom 21px, left 0px bottom 17px, left 0px bottom 13px, left 0px bottom 9px, left 0px bottom 5px, left 0px bottom 1px, left 66px bottom 21px, left 66px bottom 16px, left 66px bottom 11px, left 66px bottom 6px, left 66px bottom 1px, left 45px bottom 10.5px;
  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(--antracyt-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(--kobalt-noc);
  background-image: linear-gradient(180deg, var(--kobalt-blask) 0%, var(--kobalt-noc) 62%);
  color: var(--na-kobalcie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--antracyt-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-kobalcie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-kobalcie); }
/* ⚠⚠ 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-kobalcie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-kobalcie-cichy); border-inline-start-color: var(--antracyt-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--antracyt-jasny); text-decoration-color: var(--antracyt-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-kobalcie); }

/* --- 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 KWADRATEM I DWOMA REJESTRAMI.
   ⚠ 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(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%);
  background-size: 3px 3px, 17px 1px, 12px 1px, 8px 1px, 15px 1px, 17px 1px, 11px 1px, 15px 1px, 13px 1px;
  background-position: left 18px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 23px bottom 7px, left 23px bottom 4px, left 23px bottom 1px, left 9px bottom 4px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--antracyt-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--antracyt-jasny);
  background-image:
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%);
  background-size: 3px 3px, 17px 1px, 12px 1px, 8px 1px, 15px 1px, 17px 1px, 11px 1px, 15px 1px, 13px 1px;
  background-position: left 18px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 23px bottom 7px, left 23px bottom 4px, left 23px bottom 1px, left 9px bottom 4px;
  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(--antracyt-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--antracyt-pismo);
  text-decoration-line: underline; text-decoration-color: var(--antracyt-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 czynności po kolei — numer nad kwadratem i dwoma rejestrami.
   WYLICZENIE to rzeczy do sprawdzenia — odsyłacz łączy inne wiersze co
   pozycję: inne odesłanie, te same dwa rejestry.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   -------------------------------------------------------------------- */
.tresc .kroki { margin: .4em auto 1.4em; padding: 0; list-style: none; counter-reset: krok; } /* ⚠ auto: jak wyliczenie */
.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(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%);
  background-size: 3px 3px, 13px 1px, 9px 1px, 6px 1px, 11px 1px, 13px 1px, 8px 1px, 11px 1px, 11px 1px;
  background-position: left 14px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 19px bottom 7px, left 19px bottom 4px, left 19px bottom 1px, left 7px bottom 4px;
  background-repeat: no-repeat;
  color: var(--antracyt-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(--antracyt-jasny);
  background-image:
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%);
  background-size: 3px 3px, 13px 1px, 9px 1px, 6px 1px, 11px 1px, 13px 1px, 8px 1px, 11px 1px, 11px 1px;
  background-position: left 14px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 19px bottom 7px, left 19px bottom 4px, left 19px bottom 1px, left 7px bottom 4px;
  background-repeat: no-repeat;
}

.tresc .wyliczenie { margin: .4em auto 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; } /* ⚠ auto: lista w kolumnie, nie przy krawędzi (B13, 1366 px) */
.tresc .wyliczenie li { position: relative; padding-inline-start: 2.5rem; }
/* znacznik: kwadrat i dwa rejestry — odsyłacz między innymi wierszami co pozycję */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 36px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%);
  background-size: 3px 3px, 15px 1px, 11px 1px, 7px 1px, 13px 1px, 9px 1px, 15px 1px, 10px 1px, 14px 1px, 8px 1px, 12px 1px;
  background-position: left 16px bottom 11px, left 0px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 21px bottom 9px, left 21px bottom 6px, left 21px bottom 3px, left 21px bottom 0px, left 8px bottom 6px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(to bottom right, transparent calc(50% - .7px), var(--antracyt-kreska) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .7px));
  background-size: 3px 3px, 15px 1px, 11px 1px, 7px 1px, 13px 1px, 9px 1px, 15px 1px, 10px 1px, 14px 1px, 8px 1px, 6px 3px;
  background-position: left 16px bottom 11px, left 0px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 21px bottom 9px, left 21px bottom 6px, left 21px bottom 3px, left 21px bottom 0px, left 14px bottom 1px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(to bottom right, transparent calc(50% - .7px), var(--antracyt-kreska) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .7px));
  background-size: 3px 3px, 15px 1px, 11px 1px, 7px 1px, 13px 1px, 9px 1px, 15px 1px, 10px 1px, 14px 1px, 8px 1px, 8px 4px;
  background-position: left 16px bottom 11px, left 0px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 21px bottom 9px, left 21px bottom 6px, left 21px bottom 3px, left 21px bottom 0px, left 12px bottom 4px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%);
  background-size: 3px 3px, 15px 1px, 11px 1px, 7px 1px, 13px 1px, 9px 1px, 15px 1px, 10px 1px, 14px 1px, 8px 1px, 12px 1px;
  background-position: left 16px bottom 11px, left 0px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 21px bottom 9px, left 21px bottom 6px, left 21px bottom 3px, left 21px bottom 0px, left 8px bottom 6px;
  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(--antracyt-pismo);
  text-decoration-line: underline; text-decoration-color: var(--antracyt-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(--antracyt-jasny); text-decoration-color: var(--antracyt-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(--antracyt-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(237, 239, 245, .07);
  color: var(--na-kobalcie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--antracyt-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(--kobalt-noc); border-color: var(--kobalt-noc); color: var(--na-kobalcie); }
.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(--antracyt-jasny); color: var(--na-kobalcie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--antracyt-jasny); border-color: var(--antracyt-jasny); color: var(--kobalt-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(--antracyt-pismo); color: var(--karta);
  border: 2px solid var(--antracyt-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(--kobalt-noc); border-color: var(--kobalt-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(--antracyt-jasny); color: var(--kobalt-noc); border-color: var(--antracyt-jasny);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-kobalcie); border-color: var(--na-kobalcie);
}

/* --- 11. KARTY KATALOGU — DWA REJESTRY 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: kwadrat nad dwoma rejestrami, jeden odsyłacz */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 56px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
    linear-gradient(90deg, var(--antracyt-kreska) 0 100%);
  background-size: 3px 3px, 24px 1px, 18px 1px, 12px 1px, 22px 1px, 15px 1px, 24px 1px, 16px 1px, 22px 1px, 12px 1px, 18px 1px;
  background-position: left 26px bottom 11px, left 0px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 32px bottom 9px, left 32px bottom 6px, left 32px bottom 3px, left 32px bottom 0px, left 13px bottom 6px;
  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(--antracyt-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(--antracyt-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(--antracyt-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--antracyt-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(--antracyt-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--antracyt-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(--kobalt-noc); color: var(--na-kobalcie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--kobalt-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--kobalt-blask) 0%, rgba(53, 64, 99, 0) 64%),
    linear-gradient(180deg, var(--kobalt-blask) 0%, var(--kobalt-noc) 58%);
}
.stopka__rejestry {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 26px, var(--antracyt-jasny) 26px 29px, transparent 29px),
    linear-gradient(90deg, transparent 0 2px, var(--antracyt-jasny) 2px 24px, transparent 24px),
    linear-gradient(90deg, transparent 0 2px, var(--antracyt-jasny) 2px 18px, transparent 18px),
    linear-gradient(90deg, transparent 0 2px, var(--antracyt-jasny) 2px 13px, transparent 13px),
    linear-gradient(90deg, transparent 0 2px, var(--antracyt-jasny) 2px 21px, transparent 21px),
    linear-gradient(90deg, transparent 0 32px, var(--antracyt-jasny) 32px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 32px, var(--antracyt-jasny) 32px 46px, transparent 46px),
    linear-gradient(90deg, transparent 0 32px, var(--antracyt-jasny) 32px 51px, transparent 51px),
    linear-gradient(90deg, transparent 0 22px, var(--antracyt-jasny) 22px 31px, transparent 31px);
  background-size: 56px 3px, 56px 1px, 56px 1px, 56px 1px, 56px 1px, 56px 1px, 56px 1px, 56px 1px, 56px 1px;
  background-position: left 0px top 0px, left 0px top 5px, left 0px top 7px, left 0px top 9px, left 0px top 11px, left 0px top 5px, left 0px top 8px, left 0px top 11px, 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-kobalcie);
}
/* pod znakiem stopki: kwadrat nad dwoma rejestrami, jeden odsyłacz */
.stopka__znak::after {
  content: ""; display: block; width: 56px; height: 14px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
    linear-gradient(90deg, var(--antracyt-jasny) 0 100%);
  background-size: 3px 3px, 24px 1px, 18px 1px, 12px 1px, 22px 1px, 15px 1px, 24px 1px, 16px 1px, 22px 1px, 12px 1px, 18px 1px;
  background-position: left 26px bottom 11px, left 0px bottom 9px, left 0px bottom 7px, left 0px bottom 5px, left 0px bottom 3px, left 0px bottom 1px, left 32px bottom 9px, left 32px bottom 6px, left 32px bottom 3px, left 32px bottom 0px, left 13px bottom 6px;
  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-kobalcie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--antracyt-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — KWADRAT NAD DWIEMA KOLUMNAMI REJESTRÓW -----
   ⚠⚠ 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; }

  /* PIONOWO: kwadrat u góry, dwie kolumny wierszy o różnym rytmie, jeden skośny odsyłacz */
  .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(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(90deg, var(--antracyt-kreska) 0 100%),
      linear-gradient(to top right, transparent calc(50% - .7px), var(--antracyt-kreska) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .7px));
    background-size: 4px 4px, 9px 1px, 9px 1px, 6px 1px, 4px 1px, 7px 1px, 3px 1px, 5px 1px, 5px 1px, 8px 1px, 4px 1px, 7px 1px, 6px 2%;
    background-position: left 10px top 4%, left 1px top 16%, left 14px top 18%, left 1px top 22%, left 1px top 32%, left 1px top 42%, left 1px top 52%, left 1px top 62%, left 14px top 26%, left 14px top 40%, left 14px top 54%, left 14px top 68%, left 8px top 40%;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(90deg, var(--antracyt-jasny) 0 100%),
      linear-gradient(to top right, transparent calc(50% - .7px), var(--antracyt-jasny) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .7px));
    background-size: 4px 4px, 9px 1px, 9px 1px, 6px 1px, 4px 1px, 7px 1px, 3px 1px, 5px 1px, 5px 1px, 8px 1px, 4px 1px, 7px 1px, 6px 2%;
    background-position: left 10px top 4%, left 1px top 16%, left 14px top 18%, left 1px top 22%, left 1px top 32%, left 1px top 42%, left 1px top 52%, left 1px top 62%, left 14px top 26%, left 14px top 40%, left 14px top 54%, left 14px top 68%, left 8px top 40%;
    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__mieta, .naglowek__rejestry, .hero__mieta, .hero__rejestry,
  .hero__zanik, .stopka__plyta, .stopka__rejestry { 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%),
      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%),
      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;
  }
  .zapowiedz::before,
  .stopka__znak::after {
    background-image:
      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%),
      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%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .pasmo > .kontener > h2::before {
    background-image:
      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%),
      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; }
}