/* =====================================================================
   fotowoltaika.beskidy.pl — MAKIETA PREMIUM „JEDEN ADRES, KILKA PUNKTÓW
   ODNIESIENIA”
   ---------------------------------------------------------------------
   Teza serwisu: h1 „Fotowoltaika w Beskidach ZACZYNA SIĘ OD KONKRETNEGO
   PUNKTU”; h2 „JEDEN ADRES, KILKA PUNKTÓW ODNIESIENIA” — „Zidentyfikuj
   miejsce, dla którego powstał profil: środek planowanej powierzchni, punkt
   na gruncie czy stanowisko obserwacji. PROFIL POLICZONY DLA PUNKTU NA MAPIE
   NIE OPISUJE AUTOMATYCZNIE WIDOKU Z PRZYSZŁEJ PŁASZCZYZNY”; h2 „Teren
   i bliskie przeszkody to DWA MODELE”; wpis-1 „Każdej przeszkodzie nadaj
   identyfikator”.

   Rysunek (zmierzony): JEDEN cienki obrys 960×260 (kreska 2) — adres, jedna
   nazwa dla całości. W nim TRZY pełne punkty 22 px w różnych miejscach
   (300,168), (628,286), (866,196), a z każdego JEDEN odcinek (kreska 4)
   o innej długości (141, 321, 166 px) i innym kącie (21°, 8°, 155°).
   Odcinki nie są równoległe, nie przecinają się, nie kończą przy tej samej
   krawędzi. Adres jest wspólny, zapisy nie.

   ⚠⚠ TO NIE JEST MAPA ANI SYLWETA GÓR — obrys jest prostokątem, odcinki są
   proste, a ich sens to ZASIĘG WIDOKU Z PUNKTU, nie rzeźba terenu.
   ⚠⚠ ŻADNYCH TRZECH ŚLADÓW ZBIEGAJĄCYCH SIĘ W PUNKCIE (zdradzam.pl — tu
   ROZCHODZĄ SIĘ z trzech różnych punktów), ŻADNYCH PROMIENI I SEKTORÓW
   WOKÓŁ ŚRODKA (adreswlondynie.pl — nie ma tu środka), ŻADNEGO PUNKTU
   W OBSZARZE (czystepowietrze.ketrzyn.pl, przewodnik.mazury.pl — tam JEDEN
   punkt rozstrzyga przynależność; tu trzy punkty NIE rozstrzygają niczego
   osobno), ŻADNYCH DWÓCH NIEZALEŻNYCH DRÓG DO REKORDU (otocertyfikat.pl),
   ŻADNEJ MATRYCY (dobrykandydat.pl), ŻADNEJ ROSNĄCEJ GĘSTOŚCI (pap2t.pl).
   ⚠ Żadnego słońca, panelu z ramką, domu, chmurki, drzewa, sylwety Beskidów.
   Bez liter i cyfr. Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: przestrzeń barwna serii wyczerpana (PLAN-PREMIUM,
   5.09). Turkus atramentowy sąsiaduje z petrolem czystepowietrze.miasta.pl
   (#1E5A5E — zieleńszy, jaśniejszy) i błękitem sygnałowym wirtualnykantor.pl
   (#14588F — wyraźnie niebieski). Różnicę robi zestaw: CHŁODNY akcent na
   CIEPŁEJ, popielatej płycie — w rodzinie PV druga domena po dachsolarny.com,
   który ma odwrotnie: CIEPŁE złoto na CHŁODNEJ, ciemnej płycie.
   ⚠ JASNOŚĆ PŁYTY jest w tej rodzinie świadomie naprzemienna.

   ⚠ SZKIELET przeniesiony z cieplemieszkanie.gmina.pl (jasna płyta, karty
   `lista-wpisow`); źródło jest już po naprawie list z 6.09, więc arkusz ma
   `margin-inline: auto` dla `.kroki`, `.wyliczenie` i `.zrodlo`.
   Kopiowanie SZKIELETU dozwolone, PROJEKTU nie.

   ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz /
   dokladka.py. Domena wchodzi na premium-recznie.txt. Seria ST-CBF.
   ⚠ KANON 2b (`.zrodlo` w wpis-2), 9b i 9c (`wyliczenie` i `kroki` — w tej
   domenie tylko w specimen).
   ⚠ Rodzina PV (RODZINA-PV.md).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --popiel:      #E6E4DF;   /* jasna płyta nagłówka i hero — popiel górski */
  --popiel-cien: #D8D5CF;
  --papier:      #F5F4F1;
  --karta:       #FFFFFF;
  --grafit-noc:  #1E2224;   /* pasmo domykające i stopka — grafit mglisty */
  --grafit-blask:#363C3F;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1D1F1E;   /* 13,04 / 11,32 na cieniu / 15,07 / 16,57 */
  --tekst-cichy: #4F5352;   /*  6,14 / 5,33 na cieniu / 7,09 */
  --na-graficie:       #EDEFEF; /* 13,89 / 9,70 na blasku */
  --na-graficie-cichy: #B6BBBB; /*  8,26 / 5,77 na blasku */

  /* turkus atramentowy — TRZY wartości (kanon, punkt 12), policzone */
  --turkus-pismo:  #10535F; /* PISMO — 6,82 / 5,91 na cieniu / 7,87 / 8,66 */
  --turkus-kreska: #1C7383; /* kreski — 4,32 / 3,74 na cieniu / 4,99 / 5,48 */
  --turkus-jasny:  #9FD8E4; /* na ciemnych płytach — 10,25 / 7,16 na blasku */

  --obwodka:       #6F7472; /* 3,74 na popiele / 3,25 na cieniu / 4,32 */
  --linia-cicha:   #DDDAD4;
  --obwodka-ciemna:#8E9698; /* 5,32 na graficie / 3,72 na blasku */

  --kroj-naglowek: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Schibsted Grotesk", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Noto Sans Mono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;

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

  --promien:       2px;
  --promien-karta: 3px;
  --cien-karta: 0 16px 34px -28px rgba(30, 34, 36, .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(--turkus-jasny); color: var(--grafit-noc); }
:focus-visible { outline: 3px solid var(--turkus-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--turkus-jasny); }
/* ⚠ NIE „1px + clip” — cel dotykowy 1x1 px, B7 zapala czerwień. */
.omin {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 40;
  display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1.2rem;
  background: var(--turkus-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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__popiel {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--popiel);
  background-image: linear-gradient(180deg, var(--popiel) 0%, var(--popiel-cien) 100%);
}
/* wzdłuż dolnej krawędzi: szereg obrysów adresu, w każdym trzy punkty
   odniesienia w innych miejscach i jeden krótki odcinek; 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__punkty {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 4px, var(--turkus-kreska) 4px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 4px, var(--turkus-kreska) 4px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 4px, var(--turkus-kreska) 4px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 51px, var(--turkus-kreska) 51px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 9px, var(--turkus-kreska) 9px 12px, transparent 12px),
    linear-gradient(90deg, transparent 0 24px, var(--turkus-kreska) 24px 27px, transparent 27px),
    linear-gradient(90deg, transparent 0 41px, var(--turkus-kreska) 41px 44px, transparent 44px);
  background-size: 56px 1px, 56px 1px, 56px 11px, 56px 11px, 56px 3px, 56px 3px, 56px 3px;
  background-position: left 0px top 1px, left 0px bottom 1px, left 0px top 1px, left 0px top 1px, left 0px bottom 6px, left 0px bottom 3px, left 0px bottom 7px;
  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__punkty`. */
.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 adresu, trzy punkty w różnych miejscach, jeden ukos */
.znak__punkty {
  flex: none; width: 34px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-kreska) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 34px 1px, 34px 1px, 1px 14px, 1px 14px, 3px 3px, 3px 3px, 3px 3px, 7px 5px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 33px bottom 0px, left 5px bottom 7px, left 15px bottom 3px, left 25px bottom 8px, left 9px bottom 3px;
  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(--turkus-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(--turkus-pismo); }
/* pozycja bieżąca: pod napisem obrys adresu z trzema punktami.
   ⚠⚠ 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(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%);
  background-size: 100% 1px, 100% 1px, 1px 10px, 1px 10px, 3px 3px, 3px 3px, 3px 3px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, right 0px bottom 0px, left 14% bottom 5px, left 46% bottom 2px, right 16% bottom 6px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — jeden adres, kilka punktów odniesienia ---------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--popiel);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__popiel {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--popiel);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--popiel-cien) 0%, rgba(216, 213, 207, 0) 66%),
    linear-gradient(170deg, var(--popiel) 0%, var(--popiel-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__punkty {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (cały obrys adresu i wszystkie odcinki), 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(--turkus-pismo); opacity: .52;
}
.hero__punkty 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(--popiel) 0%, rgba(230, 228, 223, .94) 30%, rgba(230, 228, 223, .2) 50%, rgba(230, 228, 223, 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__punkty {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(230, 228, 223, 0) 0%, rgba(230, 228, 223, 0) 22%, rgba(230, 228, 223, .9) 40%, rgba(230, 228, 223, .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 adresu — trzy punkty i dwa odcinki o różnych kątach.
   ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */
.hero .tytul::before {
  content: ""; display: block;
  width: 124px; height: 34px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-kreska) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--turkus-kreska) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 124px 1px, 124px 1px, 1px 34px, 1px 34px, 5px 5px, 5px 5px, 5px 5px, 14px 9px, 12px 8px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 123px bottom 0px, left 16px bottom 20px, left 54px bottom 7px, left 92px bottom 16px, left 23px bottom 20px, left 61px 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(--turkus-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(--turkus-jasny); height: 2px; opacity: .8; }
/* ⚠⚠ KANON 2: TYLKO BEZPOŚREDNIE DZIECI KONTENERA */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p  { color: var(--na-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(--turkus-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--turkus-jasny); text-decoration-color: var(--turkus-jasny); }
.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 OBRYSEM ADRESU Z PUNKTAMI.
   ⚠ Pudełko ma stałą wysokość w px u dołu (padding 14 px), więc przesunięcia
   ozdobnika w px; WSZYSTKO kotwiczone do dołu (ozdobnik w dolnych 12 px). */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  /* ⚠ `flex` (blokowy), nie `inline-flex`. Ozdobnik w dolnych 12 px pudełka. */
  display: flex; width: max-content; align-items: flex-start; justify-content: flex-start;
  min-width: 3.6rem; height: 2rem; margin-block-end: .6rem; padding-block-end: 14px;
  background-image:
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-kreska) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 40px 1px, 40px 1px, 1px 12px, 1px 12px, 3px 3px, 3px 3px, 3px 3px, 6px 5px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 39px bottom 0px, left 5px bottom 6px, left 17px bottom 2px, left 30px bottom 7px, left 9px bottom 2px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--turkus-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--turkus-jasny);
  background-image:
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-jasny) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 40px 1px, 40px 1px, 1px 12px, 1px 12px, 3px 3px, 3px 3px, 3px 3px, 6px 5px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 39px bottom 0px, left 5px bottom 6px, left 17px bottom 2px, left 30px bottom 7px, left 9px bottom 2px;
  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(--turkus-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--turkus-pismo);
  text-decoration-line: underline; text-decoration-color: var(--turkus-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 obrysem adresu z punktami.
   WYLICZENIE to rzeczy do sprawdzenia — punkty w innych miejscach co pozycję:
   ten sam adres, inne punkty odniesienia.
   ⚠ 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(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-kreska) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 32px 1px, 32px 1px, 1px 12px, 1px 12px, 3px 3px, 3px 3px, 3px 3px, 5px 5px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 31px bottom 0px, left 4px bottom 6px, left 13px bottom 2px, left 24px bottom 7px, left 8px bottom 2px;
  background-repeat: no-repeat;
  color: var(--turkus-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(--turkus-jasny);
  background-image:
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-jasny) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 32px 1px, 32px 1px, 1px 12px, 1px 12px, 3px 3px, 3px 3px, 3px 3px, 5px 5px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 31px bottom 0px, left 4px bottom 6px, left 13px bottom 2px, left 24px bottom 7px, left 8px bottom 2px;
  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.6rem; }
/* znacznik: obrys adresu — punkty w innych miejscach co pozycję */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 36px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%);
  background-size: 36px 1px, 36px 1px, 1px 14px, 1px 14px, 3px 3px, 3px 3px, 3px 3px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 35px bottom 0px, left 5px bottom 8px, left 16px bottom 3px, left 28px bottom 7px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%);
  background-size: 36px 1px, 36px 1px, 1px 14px, 1px 14px, 3px 3px, 3px 3px, 3px 3px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 35px bottom 0px, left 6px bottom 3px, left 17px bottom 8px, left 27px bottom 4px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%);
  background-size: 36px 1px, 36px 1px, 1px 14px, 1px 14px, 3px 3px, 3px 3px, 3px 3px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 35px bottom 0px, left 4px bottom 6px, left 19px bottom 2px, left 29px bottom 8px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%);
  background-size: 36px 1px, 36px 1px, 1px 14px, 1px 14px, 3px 3px, 3px 3px, 3px 3px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 35px bottom 0px, left 5px bottom 8px, left 16px bottom 3px, left 28px bottom 7px;
  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(--turkus-pismo);
  text-decoration-line: underline; text-decoration-color: var(--turkus-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(--turkus-jasny); text-decoration-color: var(--turkus-jasny);
}

.tresc .zrodlo {
  margin: 1.6em auto 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem);
  background: var(--karta); border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--turkus-kreska); border-radius: var(--promien);
  font-size: .93rem; line-height: 1.6; color: var(--tekst-cichy);
}
.pasmo:nth-of-type(even) .zrodlo { background: var(--papier); }
/* ⚠⚠ KANON 2b — blok z własnym jasnym tłem w ciemnym paśmie. */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wzor {
  background: rgba(237, 239, 239, .07);
  color: var(--na-graficie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--turkus-jasny);
}

/* --- 9. ODSYŁACZ KIERUNKOWY ----------------------------------------- */
/* ⚠ B7: samodzielny odsyłacz jest celem UI — min. 44 px. */
.tresc .przejscie { margin-block: 1.7em 0; }
.tresc .przejscie + .przejscie { margin-block-start: .7em; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 50px; padding: .5em 1.3em;
  background: var(--karta); border: 1px solid var(--obwodka);
  border-radius: var(--promien-karta);
  color: var(--tekst); text-decoration: none; font-weight: 600; font-size: .99rem;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.tresc .przejscie a::after { content: "→"; font-size: 1.04em; line-height: 1; transition: transform .22s ease; }
.tresc .przejscie a:hover { background: var(--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(--turkus-jasny); color: var(--na-graficie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--turkus-jasny); border-color: var(--turkus-jasny); 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(--turkus-pismo); color: var(--karta);
  border: 2px solid var(--turkus-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(--turkus-jasny); color: var(--grafit-noc); border-color: var(--turkus-jasny);
}
.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 — OBRYS ADRESU 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 adresu, trzy punkty, jeden ukos */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 56px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(90deg, var(--turkus-kreska) 0 100%),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-kreska) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 56px 1px, 56px 1px, 1px 14px, 1px 14px, 3px 3px, 3px 3px, 3px 3px, 9px 6px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 55px bottom 0px, left 7px bottom 8px, left 24px bottom 3px, left 42px bottom 7px, left 12px 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(--turkus-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(--turkus-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(--turkus-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--turkus-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(--turkus-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--turkus-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(54, 60, 63, 0) 64%),
    linear-gradient(180deg, var(--grafit-blask) 0%, var(--grafit-noc) 58%);
}
.stopka__punkty {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 4px, var(--turkus-jasny) 4px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 4px, var(--turkus-jasny) 4px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 4px, var(--turkus-jasny) 4px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 51px, var(--turkus-jasny) 51px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 9px, var(--turkus-jasny) 9px 12px, transparent 12px),
    linear-gradient(90deg, transparent 0 24px, var(--turkus-jasny) 24px 27px, transparent 27px),
    linear-gradient(90deg, transparent 0 41px, var(--turkus-jasny) 41px 44px, transparent 44px);
  background-size: 56px 1px, 56px 1px, 56px 11px, 56px 11px, 56px 3px, 56px 3px, 56px 3px;
  background-position: left 0px top 1px, left 0px bottom 1px, left 0px top 1px, left 0px top 1px, left 0px bottom 6px, left 0px bottom 3px, left 0px bottom 7px;
  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: obrys adresu, trzy punkty, jeden ukos */
.stopka__znak::after {
  content: ""; display: block; width: 56px; height: 14px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(90deg, var(--turkus-jasny) 0 100%),
    linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-jasny) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 56px 1px, 56px 1px, 1px 14px, 1px 14px, 3px 3px, 3px 3px, 3px 3px, 9px 6px;
  background-position: left 0px top 0px, left 0px bottom 0px, left 0px bottom 0px, left 55px bottom 0px, left 7px bottom 8px, left 24px bottom 3px, left 42px bottom 7px, left 12px bottom 3px;
  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(--turkus-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — PIONOWY OBRYS ADRESU Z PUNKTAMI ------------
   ⚠⚠ 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: obrys adresu na całą wysokość, w nim trzy punkty i dwa ukosy o przeciwnych kierunkach */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 1.5rem; min-height: 2.4rem;
    background-image:
      linear-gradient(90deg, var(--turkus-kreska) 0 100%),
      linear-gradient(90deg, var(--turkus-kreska) 0 100%),
      linear-gradient(90deg, var(--turkus-kreska) 0 100%),
      linear-gradient(90deg, var(--turkus-kreska) 0 100%),
      linear-gradient(90deg, var(--turkus-kreska) 0 100%),
      linear-gradient(90deg, var(--turkus-kreska) 0 100%),
      linear-gradient(90deg, var(--turkus-kreska) 0 100%),
      linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-kreska) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(to bottom right, transparent calc(50% - 1px), var(--turkus-kreska) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    background-size: 20px 1px, 20px 1px, 1px 92%, 1px 92%, 4px 4px, 4px 4px, 4px 4px, 9px 7px, 8px 6px;
    background-position: left 2px top 4%, left 2px bottom 4%, left 2px top 4%, left 21px top 4%, left 6px top 18%, left 14px top 46%, left 8px top 74%, left 10px top calc(18% + 4px), left 6px top calc(60% - 6px);
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--turkus-jasny) 0 100%),
      linear-gradient(90deg, var(--turkus-jasny) 0 100%),
      linear-gradient(90deg, var(--turkus-jasny) 0 100%),
      linear-gradient(90deg, var(--turkus-jasny) 0 100%),
      linear-gradient(90deg, var(--turkus-jasny) 0 100%),
      linear-gradient(90deg, var(--turkus-jasny) 0 100%),
      linear-gradient(90deg, var(--turkus-jasny) 0 100%),
      linear-gradient(to top right, transparent calc(50% - 1px), var(--turkus-jasny) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(to bottom right, transparent calc(50% - 1px), var(--turkus-jasny) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    background-size: 20px 1px, 20px 1px, 1px 92%, 1px 92%, 4px 4px, 4px 4px, 4px 4px, 9px 7px, 8px 6px;
    background-position: left 2px top 4%, left 2px bottom 4%, left 2px top 4%, left 21px top 4%, left 6px top 18%, left 14px top 46%, left 8px top 74%, left 10px top calc(18% + 4px), left 6px top calc(60% - 6px);
    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__popiel, .naglowek__punkty, .hero__popiel, .hero__punkty,
  .hero__zanik, .stopka__plyta, .stopka__punkty { display: none !important; }
  html { font-size: 11pt; }
  body, .naglowek, .hero, .stopka, .pasmo, .pasmo:nth-of-type(even),
  .pasmo:last-of-type:not(:nth-of-type(1)) { background: #fff !important; color: #000 !important; }
  .tytul, .hero .tytul, .tresc h2, .tresc h3, .znak__slowo, .stopka__znak,
  .hero p, .stopka__menu a, .menu__link { color: #000 !important; }
  .tresc .hero p:not(.przejscie) a:not(.przycisk) { color: #000 !important; }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo { color: #000 !important; border-inline-start-color: #000 !important; }
  .pasmo > .kontener > h2::before { color: #000 !important; border-color: #000 !important; }
  .tresc .kroki li::before { background: none !important; color: #000 !important; border-color: #000 !important; }
  .tresc .wyliczenie li::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .zapowiedz::before,
  .stopka__znak::after {
    background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !important;
  }
  .pasmo > .kontener > h2::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(to top right, transparent calc(50% - 1px), #000 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) !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; }
}