/* =====================================================================
   czystepowietrze.ketrzyn.pl — MAKIETA PREMIUM „DWA OBSZARY POD JEDNĄ
   NAZWĄ — PUNKT ROZSTRZYGA”
   ---------------------------------------------------------------------
   Teza serwisu: h1 „Jedna sprawa, WŁAŚCIWA GMINA i udokumentowana
   ścieżka”; „Słowo «Kętrzyn» NIE ROZSTRZYGA JESZCZE, DO KTÓREGO SAMORZĄDU
   NALEŻY BUDYNEK… DWIE ODRĘBNE JEDNOSTKI”; „porządkowanie sprawy zaczyna
   się OD ADRESU BUDYNKU, NIE OD NAZWY”; h3 „DWA REKORDY, NIE DWIE PISOWNIE
   TEGO SAMEGO URZĘDU”; wpis-1 „NIE USTALAJ GMINY WEDŁUG SIEDZIBY URZĘDU”.

   Rysunek (zmierzony): DWIE GRANICE tą samą kreską (grubość 8): zewnętrzna
   12 wierzchołków, 1030 × 350 px, obejmuje wewnętrzną (8 wierzchołków,
   289 × 198 px) — jedna WOKÓŁ drugiej, jak gmina wiejska wokół miasta.
   W pierścieniu między nimi JEDEN PEŁNY punkt r 18 (budynek): 110 px od
   granicy wewnętrznej, 66 px od zewnętrznej. W środku obszaru wewnętrznego
   PUSTY kwadrat 30 × 30 (siedziba urzędu) — o położeniu domu nie
   rozstrzyga. Najwęższe miejsce pierścienia 56 px: obszary się nie stykają.

   ⚠⚠ OBIE GRANICE MUSZĄ BYĆ NARYSOWANE TĄ SAMĄ KRESKĄ — ta sama nazwa,
   ten sam wygląd; rozróżnia je tylko położenie PUNKTU.
   ⚠⚠ ŻADNYCH LINII ZBIEGAJĄCYCH SIĘ W PUNKCIE (ZBIEG LINII zdradzam.pl) —
   „trzy niezależne ślady” zostają w treści.
   ⚠⚠ ŻADNEJ DUŻEJ PUSTEJ RAMY (darmowycertyfikat.pl), ŻADNEGO POLA
   Z WYŁĄCZENIAMI (otofachowcy.pl), ŻADNEGO ZAPASU MIĘDZY OBRYSEM A PEŁNĄ
   RZECZĄ (studiomody.com.pl) — tu w środku jest DRUGI OBRYS, nic się nie
   styka, a rzecz dzieje się w przestrzeni między obrysami.
   ⚠ Żadnej mapy z herbem, pinezki, domu, komina, drzewa. Bez liter i cyfr.
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: purpura katastralna sąsiaduje ze śliwką
   kancelaria.lapy.pl (fioletowa, na szałwii), maliną niezwyklyprezent.com
   (jasna, na granacie) i wrzosem radioportal.pl (szary); jest czerwieńsza,
   nasycona i stoi na ŻÓŁTAWYM pergaminie. Pergamin sąsiaduje z wapnem
   bliźniaka cieplemieszkanie.gmina.pl — jest wyraźnie bardziej żółty.

   ⚠ M PLUS CODE LATIN 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; wyrównanie ozdobników do prawej/dołu czterowartościowo
   (`right 3px bottom 3px`); na jasnej płycie ozdobniki biorą `--purpura-kreska`.
   ⚠ 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 {
  --pergamin:      #EDE6D2;   /* jasna płyta nagłówka i hero — pergamin mapowy */
  --pergamin-cien: #E0D7BC;
  --papier:        #F8F5EC;
  --karta:         #FFFFFF;
  --atrament-noc:  #1B2130;   /* pasmo domykające i stopka — atrament stalowy */
  --atrament-blask:#343C50;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1E1C1A;   /* 13,63 / 11,82 na cieniu / 15,58 / 16,99 */
  --tekst-cichy: #4F4B45;   /*  6,95 / 6,03 na cieniu / 7,94 */
  --na-atramencie:       #ECE9E1; /* 13,25 / 9,07 na blasku */
  --na-atramencie-cichy: #B9B6C2; /*  8,06 / 5,52 na blasku */

  /* purpura katastralna — TRZY wartości (kanon, punkt 12), policzone */
  --purpura-pismo:  #7A2352; /* PISMO — 7,70 / 6,67 na cieniu / 8,80 / 9,59 */
  --purpura-kreska: #A63A78; /* kreski — 4,82 / 4,18 na cieniu / 5,51 / 6,00 */
  --purpura-jasna:  #E7A9CF; /* na ciemnych płytach — 8,40 / 5,75 na blasku */

  --obwodka:       #7D786E; /* 3,52 na pergaminie / 4,03 / 4,39 */
  --linia-cicha:   #E4DECC;
  --obwodka-ciemna:#8A90A6; /* 5,07 na atramencie / 3,47 na blasku */

  --kroj-naglowek: "Manuale", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "DM Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "M PLUS Code Latin", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;

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

  --promien:       2px;
  --promien-karta: 3px;
  --cien-karta: 0 16px 34px -28px rgba(27, 33, 48, .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(--purpura-jasna); color: var(--atrament-noc); }
:focus-visible { outline: 3px solid var(--purpura-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--purpura-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(--purpura-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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__pergamin {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--pergamin);
  background-image: linear-gradient(180deg, var(--pergamin) 0%, var(--pergamin-cien) 100%);
}
/* wzdłuż dolnej krawędzi: szereg OBRYSÓW, w każdym mniejszy obrys po prawej
   i pełny punkt po lewej; okres 60 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__granica {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, var(--purpura-kreska) 0 44px, transparent 44px),
    linear-gradient(90deg, var(--purpura-kreska) 0 44px, transparent 44px),
    linear-gradient(90deg, var(--purpura-kreska) 0 2px, transparent 2px),
    linear-gradient(90deg, transparent 0 42px, var(--purpura-kreska) 42px 44px, transparent 44px),
    linear-gradient(90deg, transparent 0 26px, var(--purpura-kreska) 26px 40px, transparent 40px),
    linear-gradient(90deg, transparent 0 26px, var(--purpura-kreska) 26px 40px, transparent 40px),
    linear-gradient(90deg, transparent 0 26px, var(--purpura-kreska) 26px 28px, transparent 28px),
    linear-gradient(90deg, transparent 0 38px, var(--purpura-kreska) 38px 40px, transparent 40px),
    radial-gradient(circle at 12px 6.5px, var(--purpura-kreska) 0 2px, transparent 2.6px);
  background-size: 60px 2px, 60px 2px, 60px 13px, 60px 13px, 60px 2px, 60px 2px, 60px 7px, 60px 7px, 60px 13px;
  background-position: left 0px top 0px, left 0px top 11px, left 0px top 0px, left 0px top 0px, left 0px top 3px, left 0px top 8px, left 0px top 3px, left 0px top 3px, left 0px top 0px;
  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__granica`. */
.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: obrys, w nim mniejszy obrys po prawej i pełny punkt po lewej */
.znak__granica {
  flex: none; width: 34px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    radial-gradient(circle, var(--purpura-kreska) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 14px, 2px 14px, 12px 2px, 12px 2px, 2px 6px, 2px 6px, 5px 5px;
  background-position: left 0px bottom 12px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 4px bottom 8px, right 4px bottom 4px, right 4px bottom 4px, right calc(4px + 12px - 2px) bottom 4px, left 7px bottom 4px;
  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(--purpura-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(--purpura-pismo); }
/* pozycja bieżąca: pod napisem obrys z mniejszym obrysem i punktem.
   ⚠⚠ 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(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    radial-gradient(circle, var(--purpura-kreska) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 10px, 2px 10px, 12px 2px, 12px 2px, 2px 4px, 2px 4px, 5px 5px;
  background-position: left 0px bottom 8px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 3px bottom 5px, right 3px bottom 3px, right 3px bottom 3px, right calc(3px + 12px - 2px) bottom 3px, left 6px bottom 3px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — dwa obszary pod jedną nazwą -------------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--pergamin);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__pergamin {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--pergamin);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--pergamin-cien) 0%, rgba(224, 215, 188, 0) 66%),
    linear-gradient(170deg, var(--pergamin) 0%, var(--pergamin-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__granica {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (obie granice), 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(--purpura-pismo); opacity: .52;
}
.hero__granica 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(--pergamin) 0%, rgba(237, 230, 210, .94) 30%, rgba(237, 230, 210, .2) 50%, rgba(237, 230, 210, 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__granica {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(237, 230, 210, 0) 0%, rgba(237, 230, 210, 0) 22%, rgba(237, 230, 210, .9) 40%, rgba(237, 230, 210, .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 obrys — w nim obrys wewnętrzny po prawej i pełny punkt po lewej.
   ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */
.hero .tytul::before {
  content: ""; display: block;
  width: 8.4rem; height: 22px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    radial-gradient(circle, var(--purpura-kreska) 0 3.5px, transparent 4.1px);
  background-size: 100% 3px, 100% 3px, 3px 22px, 3px 22px, 2.6rem 3px, 2.6rem 3px, 3px 10px, 3px 10px, 8.0px 8.0px;
  background-position: left 0px bottom 19px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 6px bottom 13px, right 6px bottom 6px, right 6px bottom 6px, right calc(6px + 2.6rem - 3px) bottom 6px, left 1.4rem 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(--purpura-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(--atrament-noc);
  background-image: linear-gradient(180deg, var(--atrament-blask) 0%, var(--atrament-noc) 62%);
  color: var(--na-atramencie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--purpura-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-atramencie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-atramencie); }
/* ⚠⚠ 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-atramencie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-atramencie-cichy); border-inline-start-color: var(--purpura-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--purpura-jasna); text-decoration-color: var(--purpura-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-atramencie); }

/* --- 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 OBRYSEM Z PUNKTEM.
   ⚠ Pudełko ma stałą wysokość w px u dołu (padding 14 px), więc przesunięcia
   ozdobnika w px. */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  /* ⚠ `flex` (blokowy), nie `inline-flex`. Ozdobnik w dolnych 11 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(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    radial-gradient(circle, var(--purpura-kreska) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 11px, 2px 11px, 12px 2px, 12px 2px, 2px 5px, 2px 5px, 5px 5px;
  background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 3px bottom 6px, right 3px bottom 3px, right 3px bottom 3px, right calc(3px + 12px - 2px) bottom 3px, left 6px bottom 3px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--purpura-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--purpura-jasna);
  background-image:
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    radial-gradient(circle, var(--purpura-jasna) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 11px, 2px 11px, 12px 2px, 12px 2px, 2px 5px, 2px 5px, 5px 5px;
  background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 3px bottom 6px, right 3px bottom 3px, right 3px bottom 3px, right calc(3px + 12px - 2px) bottom 3px, left 6px bottom 3px;
  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(--purpura-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--purpura-pismo);
  text-decoration-line: underline; text-decoration-color: var(--purpura-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 droga sprawy po kolei — numer nad obrysem z punktem.
   WYLICZENIE to rzeczy do ustalenia — punkt w innym miejscu pierścienia
   co pozycję: każdy adres jest gdzie indziej.
   ⚠ 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(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    radial-gradient(circle, var(--purpura-kreska) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 11px, 2px 11px, 10px 2px, 10px 2px, 2px 5px, 2px 5px, 5px 5px;
  background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 3px bottom 6px, right 3px bottom 3px, right 3px bottom 3px, right calc(3px + 10px - 2px) bottom 3px, left 5px bottom 3px;
  background-repeat: no-repeat;
  color: var(--purpura-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(--purpura-jasna);
  background-image:
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    radial-gradient(circle, var(--purpura-jasna) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 11px, 2px 11px, 10px 2px, 10px 2px, 2px 5px, 2px 5px, 5px 5px;
  background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 3px bottom 6px, right 3px bottom 3px, right 3px bottom 3px, right calc(3px + 10px - 2px) bottom 3px, left 5px bottom 3px;
  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: obrys z obrysem wewnętrznym po prawej; pełny punkt co pozycję gdzie indziej */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 30px; height: 12px;
  background-image:
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    radial-gradient(circle, var(--purpura-kreska) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 12px, 2px 12px, 9px 2px, 9px 2px, 2px 5px, 2px 5px, 5px 5px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 3px bottom 6px, right 3px bottom 3px, right 3px bottom 3px, right calc(3px + 9px - 2px) bottom 3px, left 5px bottom 3px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before { background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 3px bottom 6px, right 3px bottom 3px, right 3px bottom 3px, right calc(3px + 9px - 2px) bottom 3px, left 9px bottom 3px; }
.tresc .wyliczenie li:nth-child(3n)::before   { background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 3px bottom 6px, right 3px bottom 3px, right 3px bottom 3px, right calc(3px + 9px - 2px) bottom 3px, left 12px bottom 3px; }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    radial-gradient(circle, var(--purpura-jasna) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 12px, 2px 12px, 9px 2px, 9px 2px, 2px 5px, 2px 5px, 5px 5px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 3px bottom 6px, right 3px bottom 3px, right 3px bottom 3px, right calc(3px + 9px - 2px) bottom 3px, left 5px bottom 3px;
  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(--purpura-pismo);
  text-decoration-line: underline; text-decoration-color: var(--purpura-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(--purpura-jasna); text-decoration-color: var(--purpura-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(--purpura-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, 233, 225, .07);
  color: var(--na-atramencie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--purpura-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(--atrament-noc); border-color: var(--atrament-noc); color: var(--na-atramencie); }
.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(--purpura-jasna); color: var(--na-atramencie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--purpura-jasna); border-color: var(--purpura-jasna); color: var(--atrament-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(--purpura-pismo); color: var(--karta);
  border: 2px solid var(--purpura-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(--atrament-noc); border-color: var(--atrament-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(--purpura-jasna); color: var(--atrament-noc); border-color: var(--purpura-jasna);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-atramencie); border-color: var(--na-atramencie);
}

/* --- 11. KARTY KATALOGU — OBRYS Z PUNKTEM 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: obrys z obrysem wewnętrznym i pełnym punktem */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 5rem; height: 12px;
  background-image:
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    linear-gradient(90deg, var(--purpura-kreska) 0 100%),
    radial-gradient(circle, var(--purpura-kreska) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 12px, 2px 12px, 1.2rem 2px, 1.2rem 2px, 2px 5px, 2px 5px, 5px 5px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 4px bottom 6px, right 4px bottom 3px, right 4px bottom 3px, right calc(4px + 1.2rem - 2px) bottom 3px, left 1rem bottom 3px;
  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(--purpura-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(--purpura-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(--purpura-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--purpura-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(--purpura-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--purpura-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(--atrament-noc); color: var(--na-atramencie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--atrament-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--atrament-blask) 0%, rgba(52, 60, 80, 0) 64%),
    linear-gradient(180deg, var(--atrament-blask) 0%, var(--atrament-noc) 58%);
}
.stopka__granica {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, var(--purpura-jasna) 0 44px, transparent 44px),
    linear-gradient(90deg, var(--purpura-jasna) 0 44px, transparent 44px),
    linear-gradient(90deg, var(--purpura-jasna) 0 2px, transparent 2px),
    linear-gradient(90deg, transparent 0 42px, var(--purpura-jasna) 42px 44px, transparent 44px),
    linear-gradient(90deg, transparent 0 26px, var(--purpura-jasna) 26px 40px, transparent 40px),
    linear-gradient(90deg, transparent 0 26px, var(--purpura-jasna) 26px 40px, transparent 40px),
    linear-gradient(90deg, transparent 0 26px, var(--purpura-jasna) 26px 28px, transparent 28px),
    linear-gradient(90deg, transparent 0 38px, var(--purpura-jasna) 38px 40px, transparent 40px),
    radial-gradient(circle at 12px 6.5px, var(--purpura-jasna) 0 2px, transparent 2.6px);
  background-size: 60px 2px, 60px 2px, 60px 13px, 60px 13px, 60px 2px, 60px 2px, 60px 7px, 60px 7px, 60px 13px;
  background-position: left 0px top 0px, left 0px top 11px, left 0px top 0px, left 0px top 0px, left 0px top 3px, left 0px top 8px, left 0px top 3px, left 0px top 3px, left 0px top 0px;
  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-atramencie);
}
/* pod znakiem stopki: obrys z obrysem wewnętrznym i pełnym punktem */
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 13px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    linear-gradient(90deg, var(--purpura-jasna) 0 100%),
    radial-gradient(circle, var(--purpura-jasna) 0 2px, transparent 2.6px);
  background-size: 100% 2px, 100% 2px, 2px 13px, 2px 13px, 1.2rem 2px, 1.2rem 2px, 2px 6px, 2px 6px, 5px 5px;
  background-position: left 0px bottom 11px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, right 4px bottom 7px, right 4px bottom 3px, right 4px bottom 3px, right calc(4px + 1.2rem - 2px) bottom 3px, left 1rem bottom 4px;
  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-atramencie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--purpura-jasna); text-decoration: underline; text-underline-offset: .3em; }

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

  /* PIONOWY obrys: obrys wewnętrzny u dołu, pełny punkt u góry */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 1.5rem; min-height: 5rem;
    background-image:
      linear-gradient(90deg, var(--purpura-kreska) 0 100%),
      linear-gradient(90deg, var(--purpura-kreska) 0 100%),
      linear-gradient(180deg, var(--purpura-kreska) 0 100%),
      linear-gradient(180deg, var(--purpura-kreska) 0 100%),
      linear-gradient(90deg, var(--purpura-kreska) 0 100%),
      linear-gradient(90deg, var(--purpura-kreska) 0 100%),
      linear-gradient(180deg, var(--purpura-kreska) 0 100%),
      linear-gradient(180deg, var(--purpura-kreska) 0 100%),
      radial-gradient(circle, var(--purpura-kreska) 0 2px, transparent 2.6px);
    background-size: 14px 2px, 14px 2px, 2px 100%, 2px 100%, 6px 2px, 6px 2px, 2px 30px, 2px 30px, 5px 5px;
    background-position: left 0px top 0px, left 0px bottom 0px, left 0px top 0px, left 12px top 0px, left 4px bottom 42px, left 4px bottom 14px, left 4px bottom 14px, left 8px bottom 14px, left 4px top 10px;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--purpura-jasna) 0 100%),
      linear-gradient(90deg, var(--purpura-jasna) 0 100%),
      linear-gradient(180deg, var(--purpura-jasna) 0 100%),
      linear-gradient(180deg, var(--purpura-jasna) 0 100%),
      linear-gradient(90deg, var(--purpura-jasna) 0 100%),
      linear-gradient(90deg, var(--purpura-jasna) 0 100%),
      linear-gradient(180deg, var(--purpura-jasna) 0 100%),
      linear-gradient(180deg, var(--purpura-jasna) 0 100%),
      radial-gradient(circle, var(--purpura-jasna) 0 2px, transparent 2.6px);
    background-size: 14px 2px, 14px 2px, 2px 100%, 2px 100%, 6px 2px, 6px 2px, 2px 30px, 2px 30px, 5px 5px;
    background-position: left 0px top 0px, left 0px bottom 0px, left 0px top 0px, left 12px top 0px, left 4px bottom 42px, left 4px bottom 14px, left 4px bottom 14px, left 8px bottom 14px, left 4px top 10px;
    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__pergamin, .naglowek__granica, .hero__pergamin, .hero__granica,
  .hero__zanik, .stopka__plyta, .stopka__granica { 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%) !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; }
}