/* =====================================================================
   mojecieplo.powiat.pl — MAKIETA PREMIUM „DWA PIONY NAD JEDNĄ BUDOWĄ”
   ---------------------------------------------------------------------
   Teza serwisu: h2 „DWA PIONY ADMINISTRACJI BUDOWLANEJ” — „Starosta NIE
   STAJE SIĘ PINB, nawet jeśli oba urzędy odnoszą się do tego samego
   powiatu”; wpis-1 „Starosta i PINB obsługują RÓŻNE ETAPY TEJ SAMEJ
   BUDOWY”; h1 „Dokumenty nowego domu mają RÓŻNYCH AUTORÓW I RÓŻNE
   ADRESY”; „Powiat jest filtrem, nie punktem dotacji”.

   Rysunek (zmierzony): JEDNA linia budowy 1000 px (kreska 4) z siedmioma
   zdarzeniami jako krótkimi kreskami (28 px, 6); nad DWOMA PIERWSZYMI
   zdarzeniami pełna pionowa płyta 118×220 (pion AAB), nad DWOMA
   OSTATNIMI pełna płyta 104×144 (pion nadzoru) — różne; trzy zdarzenia
   środka (projekt, świadectwo, zakup i odbiór) BEZ pionu. Płyty nie
   dotykają linii (26 px) ani siebie (712 px).

   ⚠⚠ DWA PIONY, JEDNA BUDOWA, ŚRODEK BEZ URZĘDU — to jest cała treść:
   pion początku nie sięga końca, pion końca nie sięga początku.
   ⚠⚠ ŻADNYCH BRAMEK NA ŚCIEŻCE (wirtualnykantor.pl — płyty nie stoją na
   linii i nie tworzą przejścia), ŻADNYCH DWÓCH TORÓW (emigracjapodatkowa.pl),
   ŻADNYCH DWÓCH OSI POD KĄTEM (czystepowietrze.wolomin.pl), ŻADNEJ WAGI
   Z DWIEMA BELKAMI (cudownatabletka.pl), ŻADNYCH WARSTW (betamax.pl —
   choć h2 mówi „pięć warstw mapy”), ŻADNEGO SITA (spamy.pl — choć h2 mówi
   „powiat jest filtrem”), ŻADNEGO ŁAŃCUCHA (dermenic.pl — choć podstrona-2
   mówi „zgodność to łańcuch”), ŻADNEGO PUNKTU I DWÓCH OBRYSÓW
   (czystepowietrze.powiat.pl — bliźniak z „osobnym torem starosty”).
   ⚠ Żadnego domu, urzędu, herbu, ludzika. Bez liter i cyfr — v1 miał
   wąskie belki z kwadratem nad każdą i czytał się jak dwa „i”.
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: malina to chłodna czerwień z fioletem — sąsiedzi
   w rodzinie: wiśnia rolnika (#8A1E30, czystsza czerwień na słomie)
   i purpura katastralna ketrzyna (#7A2352, ciemniejsza, na pergaminie).
   Glina jest RÓŻOWĄ jasną płytą jak tynk miast (#EBE4E1 — bledszy), lecz
   głębsza i bardziej brązowa; piaskowiec warmii (#E4DED2) jest szary.
   Wino czarne sąsiaduje z bordo czarnym warmii (#2A1B1E) — różni je
   nasycenie i fiolet. Ton w ton (malina na glinie, wino) jest zamierzony.
   ⚠ LEKTON (400) powtórzony po zagranicznynumer.pl — pula nieużytych mono
   wyczerpana; plan dopuszcza powtórki krojów maszynowych.

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

   ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz /
   dokladka.py. Domena na liście premium-recznie.txt. Seria ST-CBF.
   ⚠ KANON 2b (`.zrodlo` w wpis-1), 9b i 9c (`wyliczenie` — w tej domenie
   tylko w specimen); ozdobniki na jasnej płycie biorą `--malina-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 {
  --glina:       #E9DFD6;   /* jasna płyta nagłówka i hero — glina blada */
  --glina-cien:  #DCCFC4;
  --papier:      #F5F0EB;
  --karta:       #FFFFFF;
  --wino-noc:    #2C1620;   /* pasmo domykające i stopka — wino czarne */
  --wino-blask:  #4A2A38;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #211B1E;   /* 12,89 / 11,10 na cieniu / 14,95 / 16,93 */
  --tekst-cichy: #5A4E53;   /*  6,04 / 5,20 na cieniu / 7,00 */
  --na-winie:       #F3EAEE; /* 14,34 / 10,61 na blasku */
  --na-winie-cichy: #CDB6C0; /*  8,89 / 6,58 na blasku */

  /* malina — TRZY wartości (kanon, punkt 12), policzone */
  --malina-pismo:  #96204C; /* PISMO — 6,13 / 5,28 na cieniu / 7,11 / 8,05 */
  --malina-kreska: #B53A66; /* kreski — 4,25 / 3,66 na cieniu / 4,93 / 5,58 */
  --malina-jasny:  #F4B0C8; /* na ciemnych płytach — 9,57 / 7,08 na blasku */

  --obwodka:       #786E6B; /* 3,77 na glinie / 3,25 na cieniu / 4,37 */
  --linia-cicha:   #DED2C9;
  --obwodka-ciemna:#A08A94; /* 5,28 na winie / 3,90 na blasku */

  --kroj-naglowek: "Cormorant", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Host Grotesk", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Lekton", 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(44, 22, 32, .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(--malina-jasny); color: var(--wino-noc); }
:focus-visible { outline: 3px solid var(--malina-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--malina-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(--malina-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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__glina {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--glina);
  background-image: linear-gradient(180deg, var(--glina) 0%, var(--glina-cien) 100%);
}
/* wzdłuż dolnej krawędzi: szereg — linia budowy ze zdarzeniami, dwie płyty
   nad początkiem i końcem, środek bez pionu; 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__piony {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--malina-kreska) 2px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 6px, var(--malina-kreska) 6px 7px, transparent 7px),
    linear-gradient(90deg, transparent 0 11px, var(--malina-kreska) 11px 12px, transparent 12px),
    linear-gradient(90deg, transparent 0 22px, var(--malina-kreska) 22px 23px, transparent 23px),
    linear-gradient(90deg, transparent 0 27px, var(--malina-kreska) 27px 28px, transparent 28px),
    linear-gradient(90deg, transparent 0 32px, var(--malina-kreska) 32px 33px, transparent 33px),
    linear-gradient(90deg, transparent 0 44px, var(--malina-kreska) 44px 45px, transparent 45px),
    linear-gradient(90deg, transparent 0 49px, var(--malina-kreska) 49px 50px, transparent 50px),
    linear-gradient(90deg, transparent 0 4px, var(--malina-kreska) 4px 14px, transparent 14px),
    linear-gradient(90deg, transparent 0 42px, var(--malina-kreska) 42px 52px, transparent 52px);
  background-size: 56px 1px, 56px 3px, 56px 3px, 56px 3px, 56px 3px, 56px 3px, 56px 3px, 56px 3px, 56px 7px, 56px 4px;
  background-position: left 0px top 11px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 1px, left 0px top 4px;
  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__piony`. */
.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: linia budowy ze zdarzeniami, dwa piony nad początkiem i końcem */
.znak__piony {
  flex: none; width: 34px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%);
  background-size: 34px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 8px 9px, 8px 6px;
  background-position: left 0px bottom 1px, left 3px bottom 0px, left 7px bottom 0px, left 14px bottom 0px, left 17px bottom 0px, left 20px bottom 0px, left 27px bottom 0px, left 31px bottom 0px, left 1px bottom 5px, left 25px 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(--malina-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(--malina-pismo); }
/* pozycja bieżąca: pod napisem linia budowy i dwa piony nad jej końcami.
   ⚠⚠ 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(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%);
  background-size: 100% 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 18% 6px, 16% 4px;
  background-position: left 0px bottom 1px, left 4% bottom 0px, left 14% bottom 0px, left 40% bottom 0px, left 50% bottom 0px, left 60% bottom 0px, right 14% bottom 0px, right 4% bottom 0px, left 2% bottom 4px, right 2% bottom 4px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — dwa piony nad jedną budową ---------------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--glina);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__glina {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--glina);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--glina-cien) 0%, rgba(220, 207, 196, 0) 66%),
    linear-gradient(170deg, var(--glina) 0%, var(--glina-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__piony {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (cała linia budowy z obiema płytami), 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(--malina-pismo); opacity: .52;
}
.hero__piony 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(--glina) 0%, rgba(233, 223, 214, .94) 30%, rgba(233, 223, 214, .2) 50%, rgba(233, 223, 214, 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__piony {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(233, 223, 214, 0) 0%, rgba(233, 223, 214, 0) 22%, rgba(233, 223, 214, .9) 40%, rgba(233, 223, 214, .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: dłuższa linia budowy, siedem zdarzeń, dwie płyty nad początkiem i końcem.
   ⚠ 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(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%);
  background-size: 120px 2px, 1px 5px, 1px 5px, 1px 5px, 1px 5px, 1px 5px, 1px 5px, 1px 5px, 20px 18px, 18px 12px;
  background-position: left 0px bottom 2px, left 8px bottom 0px, left 18px bottom 0px, left 48px bottom 0px, left 57px bottom 0px, left 68px bottom 0px, left 100px bottom 0px, left 110px bottom 0px, left 4px bottom 7px, left 96px bottom 7px;
  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(--malina-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(--wino-noc);
  background-image: linear-gradient(180deg, var(--wino-blask) 0%, var(--wino-noc) 62%);
  color: var(--na-winie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--malina-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-winie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-winie); }
/* ⚠⚠ 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-winie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-winie-cichy); border-inline-start-color: var(--malina-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--malina-jasny); text-decoration-color: var(--malina-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-winie); }

/* --- 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 LINIĄ BUDOWY Z DWOMA PIONAMI.
   ⚠ 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(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%);
  background-size: 40px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 10px 7px, 9px 5px;
  background-position: left 0px bottom 1px, left 3px bottom 0px, left 8px bottom 0px, left 17px bottom 0px, left 20px bottom 0px, left 24px bottom 0px, left 32px bottom 0px, left 37px bottom 0px, left 1px bottom 5px, left 30px bottom 5px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--malina-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--malina-jasny);
  background-image:
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%);
  background-size: 40px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 10px 7px, 9px 5px;
  background-position: left 0px bottom 1px, left 3px bottom 0px, left 8px bottom 0px, left 17px bottom 0px, left 20px bottom 0px, left 24px bottom 0px, left 32px bottom 0px, left 37px bottom 0px, left 1px bottom 5px, left 30px bottom 5px;
  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(--malina-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--malina-pismo);
  text-decoration-line: underline; text-decoration-color: var(--malina-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 linią budowy z dwoma pionami.
   WYLICZENIE to rzeczy do sprawdzenia — zdarzenia w innym miejscu linii
   co pozycję: inny etap, te same dwa piony.
   ⚠ 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(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%);
  background-size: 32px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 8px 7px, 8px 5px;
  background-position: left 0px bottom 1px, left 2px bottom 0px, left 6px bottom 0px, left 13px bottom 0px, left 16px bottom 0px, left 19px bottom 0px, left 26px bottom 0px, left 30px bottom 0px, left 1px bottom 5px, left 24px bottom 5px;
  background-repeat: no-repeat;
  color: var(--malina-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(--malina-jasny);
  background-image:
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%);
  background-size: 32px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 8px 7px, 8px 5px;
  background-position: left 0px bottom 1px, left 2px bottom 0px, left 6px bottom 0px, left 13px bottom 0px, left 16px bottom 0px, left 19px bottom 0px, left 26px bottom 0px, left 30px bottom 0px, left 1px bottom 5px, left 24px bottom 5px;
  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: linia budowy z dwoma pionami — zdarzenia środka w innym miejscu 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(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%);
  background-size: 36px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 9px 8px, 8px 5px;
  background-position: left 0px bottom 1px, left 3px bottom 0px, left 7px bottom 0px, left 14px bottom 0px, left 18px bottom 0px, left 22px bottom 0px, left 29px bottom 0px, left 33px bottom 0px, left 1px bottom 5px, left 27px bottom 5px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%);
  background-size: 36px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 9px 8px, 8px 5px;
  background-position: left 0px bottom 1px, left 3px bottom 0px, left 7px bottom 0px, left 12px bottom 0px, left 15px bottom 0px, left 24px bottom 0px, left 29px bottom 0px, left 33px bottom 0px, left 1px bottom 5px, left 27px bottom 5px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%);
  background-size: 36px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 9px 8px, 8px 5px;
  background-position: left 0px bottom 1px, left 3px bottom 0px, left 7px bottom 0px, left 16px bottom 0px, left 21px bottom 0px, left 24px bottom 0px, left 29px bottom 0px, left 33px bottom 0px, left 1px bottom 5px, left 27px bottom 5px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%);
  background-size: 36px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 9px 8px, 8px 5px;
  background-position: left 0px bottom 1px, left 3px bottom 0px, left 7px bottom 0px, left 14px bottom 0px, left 18px bottom 0px, left 22px bottom 0px, left 29px bottom 0px, left 33px bottom 0px, left 1px bottom 5px, left 27px bottom 5px;
  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(--malina-pismo);
  text-decoration-line: underline; text-decoration-color: var(--malina-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(--malina-jasny); text-decoration-color: var(--malina-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(--malina-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(243, 234, 238, .07);
  color: var(--na-winie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--malina-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(--wino-noc); border-color: var(--wino-noc); color: var(--na-winie); }
.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(--malina-jasny); color: var(--na-winie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--malina-jasny); border-color: var(--malina-jasny); color: var(--wino-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(--malina-pismo); color: var(--karta);
  border: 2px solid var(--malina-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(--wino-noc); border-color: var(--wino-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(--malina-jasny); color: var(--wino-noc); border-color: var(--malina-jasny);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-winie); border-color: var(--na-winie);
}

/* --- 11. KARTY KATALOGU — LINIA BUDOWY Z PIONAMI 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: linia budowy ze zdarzeniami, dwa piony nad końcami */
.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(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%),
    linear-gradient(90deg, var(--malina-kreska) 0 100%);
  background-size: 56px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 14px 8px, 12px 5px;
  background-position: left 0px bottom 1px, left 4px bottom 0px, left 10px bottom 0px, left 24px bottom 0px, left 28px bottom 0px, left 33px bottom 0px, left 46px bottom 0px, left 52px bottom 0px, left 1px bottom 5px, left 43px bottom 5px;
  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(--malina-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(--malina-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(--malina-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--malina-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(--malina-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--malina-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(--wino-noc); color: var(--na-winie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--wino-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--wino-blask) 0%, rgba(74, 42, 56, 0) 64%),
    linear-gradient(180deg, var(--wino-blask) 0%, var(--wino-noc) 58%);
}
.stopka__piony {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--malina-jasny) 2px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 6px, var(--malina-jasny) 6px 7px, transparent 7px),
    linear-gradient(90deg, transparent 0 11px, var(--malina-jasny) 11px 12px, transparent 12px),
    linear-gradient(90deg, transparent 0 22px, var(--malina-jasny) 22px 23px, transparent 23px),
    linear-gradient(90deg, transparent 0 27px, var(--malina-jasny) 27px 28px, transparent 28px),
    linear-gradient(90deg, transparent 0 32px, var(--malina-jasny) 32px 33px, transparent 33px),
    linear-gradient(90deg, transparent 0 44px, var(--malina-jasny) 44px 45px, transparent 45px),
    linear-gradient(90deg, transparent 0 49px, var(--malina-jasny) 49px 50px, transparent 50px),
    linear-gradient(90deg, transparent 0 4px, var(--malina-jasny) 4px 14px, transparent 14px),
    linear-gradient(90deg, transparent 0 42px, var(--malina-jasny) 42px 52px, transparent 52px);
  background-size: 56px 1px, 56px 3px, 56px 3px, 56px 3px, 56px 3px, 56px 3px, 56px 3px, 56px 3px, 56px 7px, 56px 4px;
  background-position: left 0px top 11px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 10px, left 0px top 1px, left 0px top 4px;
  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-winie);
}
/* pod znakiem stopki: linia budowy ze zdarzeniami, dwa piony nad końcami */
.stopka__znak::after {
  content: ""; display: block; width: 56px; height: 13px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%),
    linear-gradient(90deg, var(--malina-jasny) 0 100%);
  background-size: 56px 1px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 1px 3px, 14px 8px, 12px 5px;
  background-position: left 0px bottom 1px, left 4px bottom 0px, left 10px bottom 0px, left 24px bottom 0px, left 28px bottom 0px, left 33px bottom 0px, left 46px bottom 0px, left 52px bottom 0px, left 1px bottom 5px, left 43px bottom 5px;
  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-winie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--malina-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — PIONOWA LINIA BUDOWY Z DWOMA PŁYTAMI -------
   ⚠⚠ 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: linia budowy z góry na dół, zdarzenia jako poziome kreski, dwie płyty w lewo nad początkiem i końcem */
  .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(--malina-kreska) 0 100%),
      linear-gradient(90deg, var(--malina-kreska) 0 100%),
      linear-gradient(90deg, var(--malina-kreska) 0 100%),
      linear-gradient(90deg, var(--malina-kreska) 0 100%),
      linear-gradient(90deg, var(--malina-kreska) 0 100%),
      linear-gradient(90deg, var(--malina-kreska) 0 100%),
      linear-gradient(90deg, var(--malina-kreska) 0 100%),
      linear-gradient(90deg, var(--malina-kreska) 0 100%),
      linear-gradient(90deg, var(--malina-kreska) 0 100%),
      linear-gradient(90deg, var(--malina-kreska) 0 100%);
    background-size: 1px 80%, 3px 1px, 3px 1px, 3px 1px, 3px 1px, 3px 1px, 3px 1px, 3px 1px, 12px 9%, 9px 9%;
    background-position: left 20px top 10%, left 19px top 14%, left 19px top 19%, left 19px top 40%, left 19px top 46%, left 19px top 52%, left 19px top 78%, left 19px top 84%, left 4px top 12%, left 7px top 77%;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--malina-jasny) 0 100%),
      linear-gradient(90deg, var(--malina-jasny) 0 100%),
      linear-gradient(90deg, var(--malina-jasny) 0 100%),
      linear-gradient(90deg, var(--malina-jasny) 0 100%),
      linear-gradient(90deg, var(--malina-jasny) 0 100%),
      linear-gradient(90deg, var(--malina-jasny) 0 100%),
      linear-gradient(90deg, var(--malina-jasny) 0 100%),
      linear-gradient(90deg, var(--malina-jasny) 0 100%),
      linear-gradient(90deg, var(--malina-jasny) 0 100%),
      linear-gradient(90deg, var(--malina-jasny) 0 100%);
    background-size: 1px 80%, 3px 1px, 3px 1px, 3px 1px, 3px 1px, 3px 1px, 3px 1px, 3px 1px, 12px 9%, 9px 9%;
    background-position: left 20px top 10%, left 19px top 14%, left 19px top 19%, left 19px top 40%, left 19px top 46%, left 19px top 52%, left 19px top 78%, left 19px top 84%, left 4px top 12%, left 7px top 77%;
    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__glina, .naglowek__piony, .hero__glina, .hero__piony,
  .hero__zanik, .stopka__plyta, .stopka__piony { 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; }
}