/* =====================================================================
   czystepowietrze.powiat.pl — MAKIETA PREMIUM „ADRES ZALEŻY OD CZYNNOŚCI,
   NIE OD ODLEGŁOŚCI”
   ---------------------------------------------------------------------
   Teza serwisu: h1 „Czyste Powietrze BEZ BŁĄDZENIA MIĘDZY URZĘDAMI”;
   „WŁAŚCIWY ADRES ZALEŻY OD RODZAJU CZYNNOŚCI, NIE OD TEGO, KTÓRY URZĄD
   JEST NAJBLIŻEJ”; „POWIAT NIE STAJE SIĘ OPERATOREM TYLKO DLATEGO, ŻE
   PUBLIKUJE ZAPROSZENIE”; „INFORMACJA NIE TWORZY KOMPETENCJI”; „ODDZIEL
   DOTACJĘ OD FORMALNOŚCI BUDOWLANEJ — równolegle, ale oddzielnie”.

   Rysunek (zmierzony): PEŁNY punkt r 18 (sprawa) w (150,300); tuż obok,
   120 px dalej, DUŻY PUSTY obrys 150 × 110 (najbliższy urząd); daleko,
   873 px (7,2×), MAŁY PEŁNY znak 60 × 60 (właściwa instytucja). Dotacja:
   PEŁNA prosta kreska 8 px, 834 px, do dalekiego znaku — MIJA bliski obrys
   w odległości 46 px. Formalność budowlana: KRESKA PRZERYWANA 14/12, 6 px,
   125 px, do bliskiego obrysu. Obie z punktu, nigdzie się nie łączą.

   ⚠⚠ PEŁNA KRESKA MUSI MIJAĆ BLISKI OBRYS, NIE DOTYKAĆ GO — to jest cała
   treść (asercja w hero.py). ⚠⚠ DWIE KRESKI RÓŻNEJ JAKOŚCI, NIE DWA
   RÓWNOLEGŁE TORY (CHRONOLOGIA emigracjapodatkowa.pl, ROZDZIELNIK
   firmowyadres.pl). ⚠⚠ ŻADNEGO DOPASOWANIA PO KSZTAŁCIE (lokatorski.pl),
   WĘZŁA Z PROMIENIAMI (wielkafirma.pl), MATRYCY, BLOKU NA PODSTAWIE.
   ⚠ Żadnej mapy z herbem, budynku urzędu, drogowskazu, pinezki, strzałki.
   Bez liter i cyfr. Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: czekolada jako akcent na JASNEJ płycie jest pierwsza
   (karmel, orzech, mosiądz — na ciemnych; rdza pap2.pl — pomarańczowa).
   Trzcina sąsiaduje z wapnem i pergaminem bliźniaków — ciągnie w zieleń.
   Grafit zimny sąsiaduje z węglem cieplemieszkanie.olsztyn.pl (cieplejszy).

   ⚠ GOOGLE SANS CODE zamówione w jednej wadze (400).

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

   ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz /
   dokladka.py. Domena na liście premium-recznie.txt. Seria ST-CBF.
   ⚠ KANON 9b i 9c (`kroki` w blogu i wpis-1, `wyliczenie` w trzech widokach);
   ozdobniki na jasnej płycie biorą `--czekolada-kreska`; przesunięcia w px/rem
   od lewej i `right Xpx` od prawej; w pudełkach wyższych niż ozdobnik —
   wszystko do DOŁU.
   ⚠ 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 {
  --trzcina:      #E9E8D8;   /* jasna płyta nagłówka i hero — trzcina (zielonkawa kość) */
  --trzcina-cien: #DBD9C4;
  --papier:       #F6F5EC;
  --karta:        #FFFFFF;
  --grafit-noc:   #23272E;   /* pasmo domykające i stopka — grafit zimny */
  --grafit-blask: #3E4450;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1E1C18;   /* 13,77 / 11,94 na cieniu / 15,55 / 17,01 */
  --tekst-cichy: #514D45;   /*  6,81 / 5,90 na cieniu / 7,68 */
  --na-graficie:       #ECEBE4; /* 12,54 / 8,18 na blasku */
  --na-graficie-cichy: #B8B9B4; /*  7,59 / 4,95 na blasku */

  /* czekolada — TRZY wartości (kanon, punkt 12), policzone */
  --czekolada-pismo:  #5A3A22; /* PISMO — 8,24 / 7,14 na cieniu / 9,30 / 10,18 */
  --czekolada-kreska: #7D5537; /* kreski — 5,27 / 4,57 na cieniu / 5,95 / 6,51 */
  --czekolada-jasna:  #D9B99A; /* na ciemnych płytach — 8,11 / 5,29 na blasku */

  --obwodka:       #7A786C; /* 3,59 na trzcinie / 4,06 / 4,44 */
  --linia-cicha:   #DEDCC9;
  --obwodka-ciemna:#8F949C; /* 4,91 na graficie / 3,21 na blasku */

  --kroj-naglowek: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Gantari", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Google Sans Code", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;

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

  --promien:       2px;
  --promien-karta: 3px;
  --cien-karta: 0 16px 34px -28px rgba(35, 39, 46, .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(--czekolada-jasna); color: var(--grafit-noc); }
:focus-visible { outline: 3px solid var(--czekolada-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--czekolada-jasna); }
/* ⚠ 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(--czekolada-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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__trzcina {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--trzcina);
  background-image: linear-gradient(180deg, var(--trzcina) 0%, var(--trzcina-cien) 100%);
}
/* wzdłuż dolnej krawędzi: szereg układów: punkt, pusty obrys tuż nad nim,
   pełna kreska MIJAJĄCA obrys, mały pełny znak na jej końcu; 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__adresy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    radial-gradient(circle at 4.5px 10.5px, var(--czekolada-kreska) 0 2.4px, transparent 3px),
    linear-gradient(90deg, transparent 0 7px, var(--czekolada-kreska) 7px 47px, transparent 47px),
    linear-gradient(90deg, transparent 0 47px, var(--czekolada-kreska) 47px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 12px, var(--czekolada-kreska) 12px 26px, transparent 26px),
    linear-gradient(90deg, transparent 0 12px, var(--czekolada-kreska) 12px 26px, transparent 26px),
    linear-gradient(90deg, transparent 0 12px, var(--czekolada-kreska) 12px 14px, transparent 14px),
    linear-gradient(90deg, transparent 0 24px, var(--czekolada-kreska) 24px 26px, transparent 26px),
    repeating-linear-gradient(90deg, transparent 0 4px, var(--czekolada-kreska) 4px 6px, transparent 6px 56px);
  background-size: 56px 13px, 56px 2px, 56px 5px, 56px 2px, 56px 2px, 56px 7px, 56px 7px, 56px 1px;
  background-position: left 0px top 0px, left 0px top 10px, left 0px top 8px, left 0px top 1px, left 0px top 6px, left 0px top 1px, left 0px top 1px, 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__adresy`. */
.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: punkt, pusty obrys nad kreską, pełna kreska do pełnego znaku */
.znak__adresy {
  flex: none; width: 34px; height: 14px;
  background-image:
    radial-gradient(circle, var(--czekolada-kreska) 0 2px, transparent 2.6px),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%);
  background-size: 5px 5px, calc(100% - 11px) 2px, 5px 5px, 12px 2px, 12px 2px, 2px 7px, 2px 7px;
  background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 8px bottom 10px, left 8px bottom 5px, left 8px bottom 5px, left calc(8px + 10px) 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(--czekolada-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(--czekolada-pismo); }
/* pozycja bieżąca: pod napisem punkt, obrys, kreska mijająca, znak.
   ⚠⚠ 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:
    radial-gradient(circle, var(--czekolada-kreska) 0 1.5px, transparent 2.1px),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%);
  background-size: 4.0px 4.0px, calc(100% - 10.0px) 2px, 5px 5px, 10px 2px, 10px 2px, 2px 5px, 2px 5px;
  background-position: left 0px bottom 0px, left 4.0px bottom 0.5px, right 0px bottom 0px, left 7px bottom 7.5px, left 7px bottom 4.5px, left 7px bottom 4.5px, left calc(7px + 8px) bottom 4.5px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — adres zależy od czynności, nie od odległości ---------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--trzcina);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__trzcina {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--trzcina);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--trzcina-cien) 0%, rgba(219, 217, 196, 0) 66%),
    linear-gradient(170deg, var(--trzcina) 0%, var(--trzcina-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__mapa {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (punkt, obrys, cała kreska i znak), 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(--czekolada-pismo); opacity: .52;
}
.hero__mapa 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(--trzcina) 0%, rgba(233, 232, 216, .94) 30%, rgba(233, 232, 216, .2) 50%, rgba(233, 232, 216, 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__mapa {
    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, 232, 216, 0) 0%, rgba(233, 232, 216, 0) 22%, rgba(233, 232, 216, .9) 40%, rgba(233, 232, 216, .9) 100%);
  }
}

/* ⚠ Tu barwa tytułu jest ta sama w hero i poza nim, bo hero JEST jasne —
   ale reguła zostaje jawna, żeby specimen.html też był poprawny
   (kanon, punkt 4). */
.tytul {
  margin: 0 0 clamp(.9rem, .6rem + .8vw, 1.5rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2rem, 1.26rem + 2.9vw, 3.8rem);
  line-height: 1.12; letter-spacing: -.018em;
  color: var(--tekst); text-wrap: balance;
}
.hero .tytul { color: var(--tekst); }
/* nad tytułem: większy układ z kropkowaną kreską do bliskiego obrysu.
   ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */
.hero .tytul::before {
  content: ""; display: block;
  width: 8.4rem; height: 22px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    radial-gradient(circle, var(--czekolada-kreska) 0 3.5px, transparent 4.1px),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    repeating-linear-gradient(180deg, var(--czekolada-kreska) 0 2px, transparent 2px 4px);
  background-size: 8.0px 8.0px, calc(100% - 14.0px) 2px, 5px 5px, 26px 3px, 26px 3px, 3px 12px, 3px 12px, 2px 8px;
  background-position: left 0px bottom 0px, left 8.0px bottom 2.5px, right 0px bottom 0px, left 1.2rem bottom 15.5px, left 1.2rem bottom 6.5px, left 1.2rem bottom 6.5px, left calc(1.2rem + 23px) bottom 6.5px, left 3.5px bottom 8.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(--czekolada-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(--grafit-noc);
  background-image: linear-gradient(180deg, var(--grafit-blask) 0%, var(--grafit-noc) 62%);
  color: var(--na-graficie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--czekolada-jasna); 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-graficie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-graficie); }
/* ⚠⚠ 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-graficie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-graficie-cichy); border-inline-start-color: var(--czekolada-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--czekolada-jasna); text-decoration-color: var(--czekolada-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-graficie); }

/* --- 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 UKŁADEM PUNKT–OBRYS–KRESKA–ZNAK.
   ⚠ 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:
    radial-gradient(circle, var(--czekolada-kreska) 0 2px, transparent 2.6px),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%);
  background-size: 5px 5px, calc(100% - 11px) 2px, 5px 5px, 12px 2px, 12px 2px, 2px 6px, 2px 6px;
  background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 10px bottom 9px, left 10px bottom 5px, left 10px bottom 5px, left calc(10px + 10px) bottom 5px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--czekolada-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--czekolada-jasna);
  background-image:
    radial-gradient(circle, var(--czekolada-jasna) 0 2px, transparent 2.6px),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%);
  background-size: 5px 5px, calc(100% - 11px) 2px, 5px 5px, 12px 2px, 12px 2px, 2px 6px, 2px 6px;
  background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 10px bottom 9px, left 10px bottom 5px, left 10px bottom 5px, left calc(10px + 10px) 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(--czekolada-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--czekolada-pismo);
  text-decoration-line: underline; text-decoration-color: var(--czekolada-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 układem punkt–obrys–kreska–znak.
   WYLICZENIE to rzeczy do sprawdzenia — bliski obrys co pozycję w innym
   miejscu nad kreską: nieważne, gdzie stoi najbliższy urząd, kreska idzie
   do znaku.
   ⚠ 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:
    radial-gradient(circle, var(--czekolada-kreska) 0 2px, transparent 2.6px),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%);
  background-size: 5px 5px, calc(100% - 11px) 2px, 5px 5px, 10px 2px, 10px 2px, 2px 6px, 2px 6px;
  background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 8px bottom 9px, left 8px bottom 5px, left 8px bottom 5px, left calc(8px + 8px) bottom 5px;
  background-repeat: no-repeat;
  color: var(--czekolada-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(--czekolada-jasna);
  background-image:
    radial-gradient(circle, var(--czekolada-jasna) 0 2px, transparent 2.6px),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%);
  background-size: 5px 5px, calc(100% - 11px) 2px, 5px 5px, 10px 2px, 10px 2px, 2px 6px, 2px 6px;
  background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 8px bottom 9px, left 8px bottom 5px, left 8px bottom 5px, left calc(8px + 8px) 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: punkt, kreska do znaku; bliski obrys co pozycję gdzie indziej nad kreską */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 30px; height: 12px;
  background-image:
    radial-gradient(circle, var(--czekolada-kreska) 0 2px, transparent 2.6px),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%);
  background-size: 5px 5px, calc(100% - 11px) 2px, 5px 5px, 9px 2px, 9px 2px, 2px 6px, 2px 6px;
  background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 7px bottom 9px, left 7px bottom 5px, left 7px bottom 5px, left calc(7px + 7px) bottom 5px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before { background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 13px bottom 9px, left 13px bottom 5px, left 13px bottom 5px, left calc(13px + 7px) bottom 5px; }
.tresc .wyliczenie li:nth-child(3n)::before   { background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 18px bottom 9px, left 18px bottom 5px, left 18px bottom 5px, left calc(18px + 7px) bottom 5px; }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    radial-gradient(circle, var(--czekolada-jasna) 0 2px, transparent 2.6px),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%);
  background-size: 5px 5px, calc(100% - 11px) 2px, 5px 5px, 9px 2px, 9px 2px, 2px 6px, 2px 6px;
  background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 7px bottom 9px, left 7px bottom 5px, left 7px bottom 5px, left calc(7px + 7px) 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(--czekolada-pismo);
  text-decoration-line: underline; text-decoration-color: var(--czekolada-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(--czekolada-jasna); text-decoration-color: var(--czekolada-jasna);
}

.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(--czekolada-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, 235, 228, .07);
  color: var(--na-graficie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--czekolada-jasna);
}

/* --- 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(--grafit-noc); border-color: var(--grafit-noc); color: var(--na-graficie); }
.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(--czekolada-jasna); color: var(--na-graficie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--czekolada-jasna); border-color: var(--czekolada-jasna); color: var(--grafit-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(--czekolada-pismo); color: var(--karta);
  border: 2px solid var(--czekolada-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(--grafit-noc); border-color: var(--grafit-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(--czekolada-jasna); color: var(--grafit-noc); border-color: var(--czekolada-jasna);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-graficie); border-color: var(--na-graficie);
}

/* --- 11. KARTY KATALOGU — PUNKT, OBRYS I KRESKA 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: punkt, pusty obrys, kreska mijająca, pełny znak */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 5rem; height: 12px;
  background-image:
    radial-gradient(circle, var(--czekolada-kreska) 0 2px, transparent 2.6px),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
    linear-gradient(90deg, var(--czekolada-kreska) 0 100%);
  background-size: 5px 5px, calc(100% - 11px) 2px, 5px 5px, 16px 2px, 16px 2px, 2px 6px, 2px 6px;
  background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 1rem bottom 9px, left 1rem bottom 5px, left 1rem bottom 5px, left calc(1rem + 14px) 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(--czekolada-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(--czekolada-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(--czekolada-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--czekolada-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(--czekolada-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--czekolada-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(--grafit-noc); color: var(--na-graficie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--grafit-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--grafit-blask) 0%, rgba(62, 68, 80, 0) 64%),
    linear-gradient(180deg, var(--grafit-blask) 0%, var(--grafit-noc) 58%);
}
.stopka__adresy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    radial-gradient(circle at 4.5px 10.5px, var(--czekolada-jasna) 0 2.4px, transparent 3px),
    linear-gradient(90deg, transparent 0 7px, var(--czekolada-jasna) 7px 47px, transparent 47px),
    linear-gradient(90deg, transparent 0 47px, var(--czekolada-jasna) 47px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 12px, var(--czekolada-jasna) 12px 26px, transparent 26px),
    linear-gradient(90deg, transparent 0 12px, var(--czekolada-jasna) 12px 26px, transparent 26px),
    linear-gradient(90deg, transparent 0 12px, var(--czekolada-jasna) 12px 14px, transparent 14px),
    linear-gradient(90deg, transparent 0 24px, var(--czekolada-jasna) 24px 26px, transparent 26px),
    repeating-linear-gradient(90deg, transparent 0 4px, var(--czekolada-jasna) 4px 6px, transparent 6px 56px);
  background-size: 56px 13px, 56px 2px, 56px 5px, 56px 2px, 56px 2px, 56px 7px, 56px 7px, 56px 1px;
  background-position: left 0px top 0px, left 0px top 10px, left 0px top 8px, left 0px top 1px, left 0px top 6px, left 0px top 1px, left 0px top 1px, 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-graficie);
}
/* pod znakiem stopki: punkt, pusty obrys, kreska mijająca, pełny znak */
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 13px; margin-block-start: .6rem;
  background-image:
    radial-gradient(circle, var(--czekolada-jasna) 0 2px, transparent 2.6px),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
    linear-gradient(90deg, var(--czekolada-jasna) 0 100%);
  background-size: 5px 5px, calc(100% - 11px) 2px, 5px 5px, 16px 2px, 16px 2px, 2px 7px, 2px 7px;
  background-position: left 0px bottom 0px, left 5px bottom 1px, right 0px bottom 0px, left 1rem bottom 10px, left 1rem bottom 5px, left 1rem bottom 5px, left calc(1rem + 14px) 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-graficie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--czekolada-jasna); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — PIONOWY UKŁAD PUNKT–OBRYS–KRESKA–ZNAK ------
   ⚠⚠ 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: punkt u góry, pełna kreska w dół do pełnego znaku, pusty obrys obok kreski, kropki do obrysu */
  .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:
      radial-gradient(circle, var(--czekolada-kreska) 0 2.5px, transparent 3.1px),
      linear-gradient(180deg, var(--czekolada-kreska) 0 100%),
      linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
      linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
      linear-gradient(90deg, var(--czekolada-kreska) 0 100%),
      linear-gradient(180deg, var(--czekolada-kreska) 0 100%),
      linear-gradient(180deg, var(--czekolada-kreska) 0 100%),
      repeating-linear-gradient(90deg, var(--czekolada-kreska) 0 2px, transparent 2px 4px);
    background-size: 6px 6px, 2px calc(100% - 12px), 6px 6px, 8px 2px, 8px 2px, 2px 26px, 2px 26px, 6px 2px;
    background-position: left 0px top 0px, left 2px top 6px, left 0px bottom 0px, left 8px top 12px, left 8px top 36px, left 8px top 12px, left 14px top 12px, left 5px top 4px;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      radial-gradient(circle, var(--czekolada-jasna) 0 2.5px, transparent 3.1px),
      linear-gradient(180deg, var(--czekolada-jasna) 0 100%),
      linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
      linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
      linear-gradient(90deg, var(--czekolada-jasna) 0 100%),
      linear-gradient(180deg, var(--czekolada-jasna) 0 100%),
      linear-gradient(180deg, var(--czekolada-jasna) 0 100%),
      repeating-linear-gradient(90deg, var(--czekolada-jasna) 0 2px, transparent 2px 4px);
    background-size: 6px 6px, 2px calc(100% - 12px), 6px 6px, 8px 2px, 8px 2px, 2px 26px, 2px 26px, 6px 2px;
    background-position: left 0px top 0px, left 2px top 6px, left 0px bottom 0px, left 8px top 12px, left 8px top 36px, left 8px top 12px, left 14px top 12px, left 5px top 4px;
    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__trzcina, .naglowek__adresy, .hero__trzcina, .hero__mapa,
  .hero__zanik, .stopka__plyta, .stopka__adresy { 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%) !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; }
}