/* =====================================================================
   mojprad.mragowo.pl — MAKIETA PREMIUM „STAN PIERWOTNY ZAMROŻONY, KOREKTA
   JAKO NOWY RZĄD”
   ---------------------------------------------------------------------
   Teza serwisu: index „Ten poradnik dotyczy WYŁĄCZNIE ISTNIEJĄCYCH spraw
   MP6”; „NIE DOPISUJ NOWEGO URZĄDZENIA DO ZAMKNIĘTEGO NABORU”; wpis-3
   „Korekta GWD w MP6: ZMIEŃ WSKAZANY ELEMENT, ZACHOWAJ CAŁĄ HISTORIĘ”,
   „Krok 1. ZAMROŹ STAN PIERWOTNY”; podstrona-2 „Warstwa 5. Plik wysłany
   i plik źródłowy”.

   Rysunek (zmierzony): GÓRNY RZĄD — pięć pełnych płyt 76 px wys. o różnych
   szerokościach (150/90/210/130/220) w x 120/300/420/660/820 — wysłany
   pakiet, zamrożony; DOLNY RZĄD (88 px niżej) — te same płyty w tych
   samych miejscach, z których DOKŁADNIE JEDNA (trzecia, wydatek) jest
   inna: 168×100 zamiast 210×76. Pozostałe cztery identyczne. Żadnych
   strzałek ani łączników między rzędami.

   ⚠⚠ GÓRNY RZĄD NIENARUSZONY, W DOLNYM RÓŻNI SIĘ JEDEN ELEMENT — to jest
   cała treść: korekta nie nadpisuje historii; hero.py ma na to assert.
   ⚠⚠ ŻADNEGO ŁAŃCUCHA (dermenic.pl, neuroinformatyka.pl — choć h1 mówi
   „łańcuch dowodowy” i „cztery ogniwa”), ŻADNYCH DWÓCH POKRYWAJĄCYCH SIĘ
   ZARYSÓW (doradcaenergetyczny.com — tu dwa PEŁNE rzędy, nie obrys na
   pełnym), ŻADNYCH DWÓCH UPORZĄDKOWAŃ Z KRZYŻUJĄCYMI SIĘ LINIAMI
   (otoranking.pl — tu ta sama kolejność, bez linii), ŻADNYCH JEDNAKOWYCH
   OKŁADEK (audytorenergetyczny.com — płyty różnej szerokości), ŻADNYCH
   WARSTW (betamax.pl — choć podstrona-2 mówi „Warstwa 1–5”), ŻADNEGO
   JEDNEGO MODELU PRZEZ DOKUMENTY (mojecieplo.gmina.pl — brak linii klucza,
   choć h2 mówi „numer faktury jest kluczem łączenia”).
   ⚠ Żadnego panelu PV, licznika, kłódki, płatka śniegu („zamroź”).
   Bez liter i cyfr. Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: indygo to nasycony granat z fioletem — sąsiedzi
   w rodzinie: kobalt przygaszony czystepowietrze.olsztyn.pl (#2F4270,
   szary), fiolet atramentowy czystepowietrze.warszawa.pl (#4B3B86,
   fioletowy), łupek mojecieplo.olsztyn.pl (#34465E, stalowy). Wrzos szary
   jest FIOŁKOWĄ jasną płytą jak popiół fiołkowy (#E9E5EE) — lecz ciemniejszy
   i różowszy; ton w ton z indygo jest zamierzony. Cyprys nocny sąsiaduje
   z jodłą mojecieplo.ketrzyn.pl (#15291E, zieleńsza) i łupkiem jeziornym
   mazur (#1E2A2C, szarszy) — jest między nimi, niebiesko-zielony.
   ⚠ RED HAT MONO (400) — trzecie użycie w seriach (2 wcześniejsze poza
   DOTACJE); pula nieużytych mono z latin-ext 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 2b (`.zrodlo` — w tej domenie brak), 9b i 9c (`wyliczenie`
   w podstrona-1, wpis-2, wpis-3); ozdobniki na jasnej płycie biorą
   `--indygo-kreska`; kotwiczone do dołu; pozycje czterowartościowe;
   pas repeat-x: warstwy o szerokości okresu z twardymi przejściami.
   ⚠ 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 {
  --wrzos:        #DED9E3;   /* jasna płyta nagłówka i hero — wrzos szary */
  --wrzos-cien:   #CFC9D6;
  --papier:       #F0EEF3;
  --karta:        #FFFFFF;
  --cyprys-noc:   #1B332F;   /* pasmo domykające i stopka — cyprys nocny */
  --cyprys-blask: #345049;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1D1B21;   /* 12,30 / 10,54 na cieniu / 14,81 / 17,06 */
  --tekst-cichy: #514D58;   /*  5,93 / 5,09 na cieniu / 7,14 */
  --na-cyprysie:       #ECF1EF; /* 11,78 / 7,70 na blasku */
  --na-cyprysie-cichy: #B4C6C1; /*  7,55 / 4,93 na blasku */

  /* indygo — TRZY wartości (kanon, punkt 12), policzone */
  --indygo-pismo:  #2B3A8C; /* PISMO — 7,26 / 6,22 na cieniu / 8,74 / 10,06 */
  --indygo-kreska: #4553AD; /* kreski — 4,89 / 4,20 na cieniu / 5,89 / 6,79 */
  --indygo-jasny:  #C5CCF7; /* na ciemnych płytach — 8,55 / 5,59 na blasku */

  --obwodka:       #6F6A78; /* 3,78 na wrzosie / 3,24 na cieniu / 4,55 */
  --linia-cicha:   #D3CDDA;
  --obwodka-ciemna:#8FA39E; /* 5,06 na cyprysie / 3,31 na blasku */

  --kroj-naglowek: "Amiri", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Funnel Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Red Hat 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(27, 51, 47, .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(--indygo-jasny); color: var(--cyprys-noc); }
:focus-visible { outline: 3px solid var(--indygo-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--indygo-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(--indygo-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. WRZOS 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(--wrzos); }

/* --- 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__wrzos {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--wrzos);
  background-image: linear-gradient(180deg, var(--wrzos) 0%, var(--wrzos-cien) 100%);
}
/* wzdłuż dolnej krawędzi: szereg — dwa rzędy tych samych płyt, w dolnym
   jedna inna; 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__rzedy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 3px, var(--indygo-kreska) 3px 10px, transparent 10px),
    linear-gradient(90deg, transparent 0 13px, var(--indygo-kreska) 13px 17px, transparent 17px),
    linear-gradient(90deg, transparent 0 20px, var(--indygo-kreska) 20px 30px, transparent 30px),
    linear-gradient(90deg, transparent 0 33px, var(--indygo-kreska) 33px 39px, transparent 39px),
    linear-gradient(90deg, transparent 0 42px, var(--indygo-kreska) 42px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 3px, var(--indygo-kreska) 3px 10px, transparent 10px),
    linear-gradient(90deg, transparent 0 13px, var(--indygo-kreska) 13px 17px, transparent 17px),
    linear-gradient(90deg, transparent 0 20px, var(--indygo-kreska) 20px 28px, transparent 28px),
    linear-gradient(90deg, transparent 0 33px, var(--indygo-kreska) 33px 39px, transparent 39px),
    linear-gradient(90deg, transparent 0 42px, var(--indygo-kreska) 42px 52px, transparent 52px);
  background-size: 56px 4px, 56px 4px, 56px 4px, 56px 4px, 56px 4px, 56px 4px, 56px 4px, 56px 6px, 56px 4px, 56px 4px;
  background-position: left 0px top 1px, left 0px top 1px, left 0px top 1px, left 0px top 1px, left 0px top 1px, left 0px top 8px, left 0px top 8px, left 0px top 7px, left 0px top 8px, left 0px top 8px;
  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__rzedy`. */
.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: dwa rzędy pięciu płyt, w dolnym trzecia inna */
.znak__rzedy {
  flex: none; width: 34px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%);
  background-size: 6px 5px, 3px 5px, 7px 5px, 4px 5px, 6px 5px, 6px 5px, 3px 5px, 5px 7px, 4px 5px, 6px 5px;
  background-position: left 0px bottom 9px, left 8px bottom 9px, left 13px bottom 9px, left 22px bottom 9px, left 28px bottom 9px, left 0px bottom 0px, left 8px bottom 0px, left 13px bottom 0px, left 22px bottom 0px, left 28px bottom 0px;
  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(--indygo-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(--indygo-pismo); }
/* pozycja bieżąca: pod napisem dwa rzędy płyt, w dolnym jedna inna.
   ⚠⚠ 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(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%);
  background-size: 20% 3px, 12% 3px, 24% 3px, 14% 3px, 8% 3px, 20% 3px, 12% 3px, 18% 5px, 14% 3px, 8% 3px;
  background-position: left 0px bottom 7px, left 25% bottom 7px, left 42% bottom 7px, right 12% bottom 7px, right 0px bottom 7px, left 0px bottom 1px, left 25% bottom 1px, left 42% bottom 1px, right 12% bottom 1px, right 0px bottom 1px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — stan pierwotny zamrożony, korekta jako nowy rząd ------ */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--wrzos);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__wrzos {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--wrzos);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--wrzos-cien) 0%, rgba(207, 201, 214, 0) 66%),
    linear-gradient(170deg, var(--wrzos) 0%, var(--wrzos-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__rzedy {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (oba rzędy), 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(--indygo-pismo); opacity: .52;
}
.hero__rzedy 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(--wrzos) 0%, rgba(222, 217, 227, .94) 30%, rgba(222, 217, 227, .2) 50%, rgba(222, 217, 227, 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__rzedy {
    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, 217, 227, 0) 0%, rgba(222, 217, 227, 0) 22%, rgba(222, 217, 227, .9) 40%, rgba(222, 217, 227, .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: dwa rzędy pięciu płyt różnej szerokości, w dolnym trzecia inna.
   ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */
.hero .tytul::before {
  content: ""; display: block;
  width: 120px; height: 26px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%);
  background-size: 16px 9px, 9px 9px, 24px 9px, 15px 9px, 32px 9px, 16px 9px, 9px 9px, 19px 13px, 15px 9px, 32px 9px;
  background-position: left 0px bottom 17px, left 22px bottom 17px, left 36px bottom 17px, left 66px bottom 17px, left 88px bottom 17px, left 0px bottom 0px, left 22px bottom 0px, left 36px bottom 0px, left 66px bottom 0px, left 88px bottom 0px;
  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(--indygo-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(--cyprys-noc);
  background-image: linear-gradient(180deg, var(--cyprys-blask) 0%, var(--cyprys-noc) 62%);
  color: var(--na-cyprysie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--indygo-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-cyprysie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-cyprysie); }
/* ⚠⚠ 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-cyprysie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-cyprysie-cichy); border-inline-start-color: var(--indygo-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--indygo-jasny); text-decoration-color: var(--indygo-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-cyprysie); }

/* --- 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 DWOMA RZĘDAMI PŁYT.
   ⚠ 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(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%);
  background-size: 7px 4px, 3px 4px, 9px 4px, 5px 4px, 8px 4px, 7px 4px, 3px 4px, 7px 6px, 5px 4px, 8px 4px;
  background-position: left 0px bottom 8px, left 9px bottom 8px, left 14px bottom 8px, left 25px bottom 8px, left 32px bottom 8px, left 0px bottom 0px, left 9px bottom 0px, left 14px bottom 0px, left 25px bottom 0px, left 32px bottom 0px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--indygo-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--indygo-jasny);
  background-image:
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%);
  background-size: 7px 4px, 3px 4px, 9px 4px, 5px 4px, 8px 4px, 7px 4px, 3px 4px, 7px 6px, 5px 4px, 8px 4px;
  background-position: left 0px bottom 8px, left 9px bottom 8px, left 14px bottom 8px, left 25px bottom 8px, left 32px bottom 8px, left 0px bottom 0px, left 9px bottom 0px, left 14px bottom 0px, left 25px bottom 0px, left 32px bottom 0px;
  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(--indygo-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--indygo-pismo);
  text-decoration-line: underline; text-decoration-color: var(--indygo-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 dwoma rzędami płyt.
   WYLICZENIE to rzeczy do sprawdzenia — inna płyta zmieniona w dolnym
   rzędzie co pozycję: inny wskazany element, ta sama historia.
   ⚠ 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(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%);
  background-size: 5px 4px, 2px 4px, 7px 4px, 4px 4px, 6px 4px, 5px 4px, 2px 4px, 5px 6px, 4px 4px, 6px 4px;
  background-position: left 0px bottom 8px, left 7px bottom 8px, left 11px bottom 8px, left 20px bottom 8px, left 26px bottom 8px, left 0px bottom 0px, left 7px bottom 0px, left 11px bottom 0px, left 20px bottom 0px, left 26px bottom 0px;
  background-repeat: no-repeat;
  color: var(--indygo-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(--indygo-jasny);
  background-image:
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%);
  background-size: 5px 4px, 2px 4px, 7px 4px, 4px 4px, 6px 4px, 5px 4px, 2px 4px, 5px 6px, 4px 4px, 6px 4px;
  background-position: left 0px bottom 8px, left 7px bottom 8px, left 11px bottom 8px, left 20px bottom 8px, left 26px bottom 8px, left 0px bottom 0px, left 7px bottom 0px, left 11px bottom 0px, left 20px bottom 0px, left 26px bottom 0px;
  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: dwa rzędy płyt — inna płyta zmieniona 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(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%);
  background-size: 6px 5px, 3px 5px, 8px 5px, 4px 5px, 7px 5px, 6px 5px, 3px 5px, 6px 7px, 4px 5px, 7px 5px;
  background-position: left 0px bottom 9px, left 8px bottom 9px, left 13px bottom 9px, left 23px bottom 9px, left 29px bottom 9px, left 0px bottom 0px, left 8px bottom 0px, left 13px bottom 0px, left 23px bottom 0px, left 29px bottom 0px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%);
  background-size: 6px 5px, 3px 5px, 8px 5px, 4px 5px, 7px 5px, 5px 7px, 3px 5px, 8px 5px, 4px 5px, 7px 5px;
  background-position: left 0px bottom 9px, left 8px bottom 9px, left 13px bottom 9px, left 23px bottom 9px, left 29px bottom 9px, left 0px bottom 0px, left 8px bottom 0px, left 13px bottom 0px, left 23px bottom 0px, left 29px bottom 0px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%);
  background-size: 6px 5px, 3px 5px, 8px 5px, 4px 5px, 7px 5px, 6px 5px, 3px 5px, 8px 5px, 4px 5px, 5px 7px;
  background-position: left 0px bottom 9px, left 8px bottom 9px, left 13px bottom 9px, left 23px bottom 9px, left 29px bottom 9px, left 0px bottom 0px, left 8px bottom 0px, left 13px bottom 0px, left 23px bottom 0px, left 29px bottom 0px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%);
  background-size: 6px 5px, 3px 5px, 8px 5px, 4px 5px, 7px 5px, 6px 5px, 3px 5px, 6px 7px, 4px 5px, 7px 5px;
  background-position: left 0px bottom 9px, left 8px bottom 9px, left 13px bottom 9px, left 23px bottom 9px, left 29px bottom 9px, left 0px bottom 0px, left 8px bottom 0px, left 13px bottom 0px, left 23px bottom 0px, left 29px bottom 0px;
  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(--indygo-pismo);
  text-decoration-line: underline; text-decoration-color: var(--indygo-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(--indygo-jasny); text-decoration-color: var(--indygo-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(--indygo-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(236, 241, 239, .07);
  color: var(--na-cyprysie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--indygo-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(--cyprys-noc); border-color: var(--cyprys-noc); color: var(--na-cyprysie); }
.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(--indygo-jasny); color: var(--na-cyprysie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--indygo-jasny); border-color: var(--indygo-jasny); color: var(--cyprys-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(--indygo-pismo); color: var(--karta);
  border: 2px solid var(--indygo-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(--cyprys-noc); border-color: var(--cyprys-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(--indygo-jasny); color: var(--cyprys-noc); border-color: var(--indygo-jasny);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-cyprysie); border-color: var(--na-cyprysie);
}

/* --- 11. KARTY KATALOGU — DWA RZĘDY PŁYT 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: dwa rzędy pięciu płyt, w dolnym trzecia inna */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 56px; height: 13px;
  background-image:
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%),
    linear-gradient(90deg, var(--indygo-kreska) 0 100%);
  background-size: 10px 5px, 5px 5px, 13px 5px, 7px 5px, 11px 5px, 10px 5px, 5px 5px, 10px 7px, 7px 5px, 11px 5px;
  background-position: left 0px bottom 8px, left 13px bottom 8px, left 20px bottom 8px, left 36px bottom 8px, left 45px bottom 8px, left 0px bottom 0px, left 13px bottom 0px, left 20px bottom 0px, left 36px bottom 0px, left 45px bottom 0px;
  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(--indygo-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(--indygo-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(--indygo-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--indygo-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(--indygo-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--indygo-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(--cyprys-noc); color: var(--na-cyprysie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--cyprys-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--cyprys-blask) 0%, rgba(52, 80, 73, 0) 64%),
    linear-gradient(180deg, var(--cyprys-blask) 0%, var(--cyprys-noc) 58%);
}
.stopka__rzedy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 3px, var(--indygo-jasny) 3px 10px, transparent 10px),
    linear-gradient(90deg, transparent 0 13px, var(--indygo-jasny) 13px 17px, transparent 17px),
    linear-gradient(90deg, transparent 0 20px, var(--indygo-jasny) 20px 30px, transparent 30px),
    linear-gradient(90deg, transparent 0 33px, var(--indygo-jasny) 33px 39px, transparent 39px),
    linear-gradient(90deg, transparent 0 42px, var(--indygo-jasny) 42px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 3px, var(--indygo-jasny) 3px 10px, transparent 10px),
    linear-gradient(90deg, transparent 0 13px, var(--indygo-jasny) 13px 17px, transparent 17px),
    linear-gradient(90deg, transparent 0 20px, var(--indygo-jasny) 20px 28px, transparent 28px),
    linear-gradient(90deg, transparent 0 33px, var(--indygo-jasny) 33px 39px, transparent 39px),
    linear-gradient(90deg, transparent 0 42px, var(--indygo-jasny) 42px 52px, transparent 52px);
  background-size: 56px 4px, 56px 4px, 56px 4px, 56px 4px, 56px 4px, 56px 4px, 56px 4px, 56px 6px, 56px 4px, 56px 4px;
  background-position: left 0px top 1px, left 0px top 1px, left 0px top 1px, left 0px top 1px, left 0px top 1px, left 0px top 8px, left 0px top 8px, left 0px top 7px, left 0px top 8px, left 0px top 8px;
  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-cyprysie);
}
/* pod znakiem stopki: dwa rzędy pięciu płyt, w dolnym trzecia inna */
.stopka__znak::after {
  content: ""; display: block; width: 56px; height: 13px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%),
    linear-gradient(90deg, var(--indygo-jasny) 0 100%);
  background-size: 10px 5px, 5px 5px, 13px 5px, 7px 5px, 11px 5px, 10px 5px, 5px 5px, 10px 7px, 7px 5px, 11px 5px;
  background-position: left 0px bottom 8px, left 13px bottom 8px, left 20px bottom 8px, left 36px bottom 8px, left 45px bottom 8px, left 0px bottom 0px, left 13px bottom 0px, left 20px bottom 0px, left 36px bottom 0px, left 45px bottom 0px;
  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-cyprysie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--indygo-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — DWIE KOLUMNY TYCH SAMYCH PŁYT --------------
   ⚠⚠ 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: dwie kolumny tych samych pięciu płyt; w prawej trzecia inna */
  .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(--indygo-kreska) 0 100%),
      linear-gradient(90deg, var(--indygo-kreska) 0 100%),
      linear-gradient(90deg, var(--indygo-kreska) 0 100%),
      linear-gradient(90deg, var(--indygo-kreska) 0 100%),
      linear-gradient(90deg, var(--indygo-kreska) 0 100%),
      linear-gradient(90deg, var(--indygo-kreska) 0 100%),
      linear-gradient(90deg, var(--indygo-kreska) 0 100%),
      linear-gradient(90deg, var(--indygo-kreska) 0 100%),
      linear-gradient(90deg, var(--indygo-kreska) 0 100%),
      linear-gradient(90deg, var(--indygo-kreska) 0 100%);
    background-size: 7px 10%, 7px 7%, 7px 9%, 7px 8%, 7px 12%, 7px 10%, 7px 7%, 9px 12%, 7px 8%, 7px 12%;
    background-position: left 2px top 8%, left 2px top 24%, left 2px top 38%, left 2px top 56%, left 2px top 74%, left 14px top 8%, left 14px top 24%, left 14px top 38%, left 14px top 56%, left 14px top 74%;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--indygo-jasny) 0 100%),
      linear-gradient(90deg, var(--indygo-jasny) 0 100%),
      linear-gradient(90deg, var(--indygo-jasny) 0 100%),
      linear-gradient(90deg, var(--indygo-jasny) 0 100%),
      linear-gradient(90deg, var(--indygo-jasny) 0 100%),
      linear-gradient(90deg, var(--indygo-jasny) 0 100%),
      linear-gradient(90deg, var(--indygo-jasny) 0 100%),
      linear-gradient(90deg, var(--indygo-jasny) 0 100%),
      linear-gradient(90deg, var(--indygo-jasny) 0 100%),
      linear-gradient(90deg, var(--indygo-jasny) 0 100%);
    background-size: 7px 10%, 7px 7%, 7px 9%, 7px 8%, 7px 12%, 7px 10%, 7px 7%, 9px 12%, 7px 8%, 7px 12%;
    background-position: left 2px top 8%, left 2px top 24%, left 2px top 38%, left 2px top 56%, left 2px top 74%, left 14px top 8%, left 14px top 24%, left 14px top 38%, left 14px top 56%, left 14px top 74%;
    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__wrzos, .naglowek__rzedy, .hero__wrzos, .hero__rzedy,
  .hero__zanik, .stopka__plyta, .stopka__rzedy { 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, .zapowiedz::before, .stopka__znak::after, .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%), 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; }
}