/* =====================================================================
   fotowoltaika.ilawa.pl — MAKIETA PREMIUM „TEN SAM SYGNAŁ, INNY OKRES”
   ---------------------------------------------------------------------
   Teza serwisu: h1 „Fotowoltaika w Iławie, GDY BUDYNEK BYWA PUSTY”; h2
   „NAJPIERW OPISZ STAN OCZEKIWANY” — „podstawą jest KALENDARZ, w którym
   OKRES łączysz z przewidywaną obecnością, zwykłym poborem, dostępnością”;
   h2 „ZDALNY EKRAN TO SYGNAŁ, NIE OGLĘDZINY”; wpis-1 „BRAK DANYCH NIE
   OZNACZA BRAKU PRODUKCJI” — „Sam wykres nie rozstrzyga, która wersja jest
   prawdziwa”.

   Rysunek (zmierzony): JEDNA wspólna linia czasu 1020 px, podzielona na
   PIĘĆ okresów o różnej długości (210, 120, 280, 190, 220). W każdym okresie
   stoi na linii blok STANU OCZEKIWANEGO o innej wysokości (64, 22, 96, 40,
   78). Nad linią, w każdym okresie, jeden IDENTYCZNY kwadrat 16 px — sygnał
   z ekranu zawsze wygląda tak samo. Sygnały są równe, oczekiwania nie.

   ⚠⚠ SEDNO: to okres nadaje sygnałowi znaczenie, nie odwrotnie. Assert
   w hero.py pilnuje, że okresy mają różne długości, stany różne wysokości,
   a sygnały są identyczne i nie dotykają bloków.
   ⚠ ROZMOWA W RODZINIE: fotowoltaika.czeladz.pl mówi „cztery odpowiedzi na
   czterech OSOBNYCH podstawach — wspólnej krawędzi nie ma”, bo pochodzą
   z różnych rejestrów. Tutaj wspólna linia JEST, bo wszystkie okresy dotyczą
   JEDNEGO obiektu. Dwa rysunki są świadomie odwrotne.
   ⚠⚠ ŻADNYCH SŁUPKÓW Z PODZIAŁKĄ (deszczomierz — przyrząd pomiarowy: tu nie
   ma osi, skali ani jednostek, a treścią jest RÓWNOŚĆ sygnałów przy
   NIERÓWNYCH okresach), ŻADNEGO PASKA MIESIĄCA Z SUMĄ POD SPODEM
   (kontowmbanku.com.pl — tam wiele drobnych zdarzeń i jedna belka sumy),
   ŻADNEJ OSI ZDARZEŃ Z PIONAMI (mojecieplo.powiat.pl), ŻADNYCH WARSTW
   (betamax.pl — choć wpis-1 mówi „rozdziel cztery warstwy”), ŻADNEGO
   ŁAŃCUCHA (dermenic.pl), ŻADNEJ MATRYCY (dobrykandydat.pl).
   ⚠ Żadnego słońca, panelu, domu, wykresu produkcji, ekranu, ikony alarmu.
   Bez liter i cyfr. Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: przestrzeń barwna serii wyczerpana (PLAN-PREMIUM,
   5.09). Zieleń butelkowa sąsiaduje z mchem cieplemieszkanie.gmina.pl
   (#35594A — szarszy, bardziej stonowany) i szmaragdem
   czystepowietrze.wolomin.pl (#175A3E — ciemniejszy, chłodniejszy).
   W rodzinie PV to PIERWSZA zieleń: dachsolarny ma złoto, beskidy turkus,
   czeladź fiolet. Płyta jasna, chłodna; pasmo domykające atramentowe.

   ⚠ SZKIELET przeniesiony z cieplemieszkanie.gmina.pl (jasna płyta, karty
   `lista-wpisow`) — źródło jest już po naprawie list z 6.09.
   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-1), 9b i 9c (`wyliczenie` w index, wpis-1,
   wpis-2, wpis-3; `kroki` tylko w specimen).
   ⚠ Rodzina PV (RODZINA-PV.md).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --len:         #E7E8E4;   /* jasna płyta nagłówka i hero — siwy len */
  --len-cien:    #D9DAD5;
  --papier:      #F5F6F3;
  --karta:       #FFFFFF;
  --atrament-noc:  #1A1F26; /* pasmo domykające i stopka — atrament nocny */
  --atrament-blask:#333B45; /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1C1E1D;   /* 13,62 / 11,92 na cieniu / 15,45 / 16,76 */
  --tekst-cichy: #4D524F;   /*  6,47 / 5,67 na cieniu / 7,35 */
  --na-atramencie:       #EBEEF1; /* 14,22 / 9,74 na blasku */
  --na-atramencie-cichy: #B2B9C0; /*  8,36 / 5,72 na blasku */

  /* zieleń butelkowa — TRZY wartości (kanon, punkt 12), policzone */
  --zielen-pismo:  #1F5B45; /* PISMO — 6,46 / 5,66 na cieniu / 7,33 / 7,95 */
  --zielen-kreska: #2C7C5E; /* kreski — 4,11 / 3,60 na cieniu / 4,66 / 5,06 */
  --zielen-jasna:  #A6DCC6; /* na ciemnych płytach — 10,78 / 7,38 na blasku */

  --obwodka:       #6E7370; /* 3,92 na lnie / 3,44 na cieniu / 4,45 */
  --linia-cicha:   #DEDFDA;
  --obwodka-ciemna:#8C949C; /* 5,39 na atramencie / 3,69 na blasku */

  --kroj-naglowek: "Roboto Serif", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Hanken Grotesk", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Oxygen 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(26, 31, 38, .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(--zielen-jasna); color: var(--atrament-noc); }
:focus-visible { outline: 3px solid var(--zielen-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--zielen-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(--zielen-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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__len {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--len);
  background-image: linear-gradient(180deg, var(--len) 0%, var(--len-cien) 100%);
}
/* wzdłuż dolnej krawędzi: linia czasu z granicami okresów, bloki stanu
   o różnej wysokości i identyczne kwadraty sygnału nad nimi; 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__okresy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--zielen-kreska) 2px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 19px, var(--zielen-kreska) 19px 20px, transparent 20px),
    linear-gradient(90deg, transparent 0 38px, var(--zielen-kreska) 38px 39px, transparent 39px),
    linear-gradient(90deg, transparent 0 3px, var(--zielen-kreska) 3px 18px, transparent 18px),
    linear-gradient(90deg, transparent 0 9px, var(--zielen-kreska) 9px 11px, transparent 11px),
    linear-gradient(90deg, transparent 0 20px, var(--zielen-kreska) 20px 37px, transparent 37px),
    linear-gradient(90deg, transparent 0 27px, var(--zielen-kreska) 27px 29px, transparent 29px),
    linear-gradient(90deg, transparent 0 39px, var(--zielen-kreska) 39px 53px, transparent 53px),
    linear-gradient(90deg, transparent 0 45px, var(--zielen-kreska) 45px 47px, transparent 47px);
  background-size: 56px 1px, 56px 4px, 56px 4px, 56px 3px, 56px 2px, 56px 6px, 56px 2px, 56px 2px, 56px 2px;
  background-position: left 0px bottom 0px, left 0px bottom 0px, left 0px bottom 0px, left 0px bottom 1px, left 0px bottom 9px, left 0px bottom 1px, left 0px bottom 9px, left 0px bottom 1px, left 0px bottom 9px;
  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__okresy`. */
.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: trzy okresy różnej długości, bloki różnej wysokości, identyczne sygnały */
.znak__okresy {
  flex: none; width: 34px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%);
  background-size: 34px 1px, 1px 4px, 1px 4px, 7px 4px, 2px 2px, 11px 7px, 2px 2px, 10px 2px, 2px 2px;
  background-position: left 0px bottom 0px, left 9px bottom 0px, left 22px bottom 0px, left 1px bottom 1px, left 3px bottom 10px, left 10px bottom 1px, left 14px bottom 10px, left 23px bottom 1px, left 27px bottom 10px;
  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(--zielen-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(--zielen-pismo); }
/* pozycja bieżąca: pod napisem linia okresów z identycznymi sygnałami.
   ⚠⚠ 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(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%);
  background-size: 100% 1px, 1px 4px, 1px 4px, 32% 3px, 30% 6px, 31% 2px, 2px 2px, 2px 2px, 2px 2px;
  background-position: left 0px bottom 0px, left 34% bottom 0px, left 66% bottom 0px, left 1% bottom 1px, left 35% bottom 1px, right 1% bottom 1px, left 17% bottom 8px, left 50% bottom 8px, right 17% bottom 8px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — ten sam sygnał, inny okres --------------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--len);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__len {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--len);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--len-cien) 0%, rgba(217, 218, 213, 0) 66%),
    linear-gradient(170deg, var(--len) 0%, var(--len-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__okresy {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (cała linia czasu i wszystkie sygnały), 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(--zielen-pismo); opacity: .52;
}
.hero__okresy 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(--len) 0%, rgba(231, 232, 228, .94) 30%, rgba(231, 232, 228, .2) 50%, rgba(231, 232, 228, 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__okresy {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(231, 232, 228, 0) 0%, rgba(231, 232, 228, 0) 22%, rgba(231, 232, 228, .9) 40%, rgba(231, 232, 228, .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: pięć okresów różnej długości, bloki różnej wysokości, pięć identycznych sygnałów.
   ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */
.hero .tytul::before {
  content: ""; display: block;
  width: 124px; height: 32px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%);
  background-size: 124px 1px, 1px 4px, 1px 4px, 1px 4px, 1px 4px, 24px 10px, 4px 4px, 14px 4px, 4px 4px, 30px 16px, 4px 4px, 20px 7px, 4px 4px, 26px 13px, 4px 4px;
  background-position: left 0px bottom 0px, left 26px bottom 0px, left 42px bottom 0px, left 74px bottom 0px, left 96px bottom 0px, left 1px bottom 1px, left 11px bottom 22px, left 27px bottom 1px, left 32px bottom 22px, left 43px bottom 1px, left 56px bottom 22px, left 75px bottom 1px, left 83px bottom 22px, left 97px bottom 1px, left 108px bottom 22px;
  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(--zielen-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(--zielen-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(--zielen-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--zielen-jasna); text-decoration-color: var(--zielen-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 LINIĄ OKRESÓW.
   ⚠ 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(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%);
  background-size: 40px 1px, 1px 4px, 1px 4px, 11px 3px, 2px 2px, 9px 6px, 2px 2px, 14px 2px, 2px 2px;
  background-position: left 0px bottom 0px, left 13px bottom 0px, left 24px bottom 0px, left 1px bottom 1px, left 5px bottom 9px, left 14px bottom 1px, left 17px bottom 9px, left 25px bottom 1px, left 31px bottom 9px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--zielen-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--zielen-jasna);
  background-image:
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%);
  background-size: 40px 1px, 1px 4px, 1px 4px, 11px 3px, 2px 2px, 9px 6px, 2px 2px, 14px 2px, 2px 2px;
  background-position: left 0px bottom 0px, left 13px bottom 0px, left 24px bottom 0px, left 1px bottom 1px, left 5px bottom 9px, left 14px bottom 1px, left 17px bottom 9px, left 25px bottom 1px, left 31px bottom 9px;
  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(--zielen-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--zielen-pismo);
  text-decoration-line: underline; text-decoration-color: var(--zielen-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc p a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }

/* --- 8. KROKI I WYLICZENIA -------------------------------------------
   KROKI to czynności po kolei — numer nad linią okresów.
   WYLICZENIE to rzeczy do sprawdzenia — inne wysokości bloków co pozycję:
   inny stan oczekiwany, ten sam sygnał.
   ⚠ 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(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%);
  background-size: 32px 1px, 1px 4px, 1px 4px, 9px 3px, 2px 2px, 7px 6px, 2px 2px, 10px 2px, 2px 2px;
  background-position: left 0px bottom 0px, left 11px bottom 0px, left 20px bottom 0px, left 1px bottom 1px, left 4px bottom 9px, left 12px bottom 1px, left 14px bottom 9px, left 21px bottom 1px, left 25px bottom 9px;
  background-repeat: no-repeat;
  color: var(--zielen-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(--zielen-jasna);
  background-image:
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%);
  background-size: 32px 1px, 1px 4px, 1px 4px, 9px 3px, 2px 2px, 7px 6px, 2px 2px, 10px 2px, 2px 2px;
  background-position: left 0px bottom 0px, left 11px bottom 0px, left 20px bottom 0px, left 1px bottom 1px, left 4px bottom 9px, left 12px bottom 1px, left 14px bottom 9px, left 21px bottom 1px, left 25px bottom 9px;
  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.7rem; }
/* znacznik: linia okresów — inne wysokości bloków co pozycję */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 38px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%);
  background-size: 38px 1px, 1px 4px, 1px 4px, 9px 4px, 2px 2px, 11px 8px, 2px 2px, 12px 2px, 2px 2px;
  background-position: left 0px bottom 0px, left 11px bottom 0px, left 24px bottom 0px, left 1px bottom 1px, left 4px bottom 11px, left 12px bottom 1px, left 16px bottom 11px, left 25px bottom 1px, left 30px bottom 11px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%);
  background-size: 38px 1px, 1px 4px, 1px 4px, 9px 2px, 2px 2px, 11px 5px, 2px 2px, 12px 9px, 2px 2px;
  background-position: left 0px bottom 0px, left 11px bottom 0px, left 24px bottom 0px, left 1px bottom 1px, left 4px bottom 11px, left 12px bottom 1px, left 16px bottom 11px, left 25px bottom 1px, left 30px bottom 11px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%);
  background-size: 38px 1px, 1px 4px, 1px 4px, 9px 7px, 2px 2px, 11px 3px, 2px 2px, 12px 5px, 2px 2px;
  background-position: left 0px bottom 0px, left 11px bottom 0px, left 24px bottom 0px, left 1px bottom 1px, left 4px bottom 11px, left 12px bottom 1px, left 16px bottom 11px, left 25px bottom 1px, left 30px bottom 11px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%);
  background-size: 38px 1px, 1px 4px, 1px 4px, 9px 4px, 2px 2px, 11px 8px, 2px 2px, 12px 2px, 2px 2px;
  background-position: left 0px bottom 0px, left 11px bottom 0px, left 24px bottom 0px, left 1px bottom 1px, left 4px bottom 11px, left 12px bottom 1px, left 16px bottom 11px, left 25px bottom 1px, left 30px bottom 11px;
  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(--zielen-pismo);
  text-decoration-line: underline; text-decoration-color: var(--zielen-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(--zielen-jasna); text-decoration-color: var(--zielen-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(--zielen-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(235, 238, 241, .07);
  color: var(--na-atramencie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--zielen-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(--zielen-jasna); color: var(--na-atramencie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--zielen-jasna); border-color: var(--zielen-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(--zielen-pismo); color: var(--karta);
  border: 2px solid var(--zielen-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(--zielen-jasna); color: var(--atrament-noc); border-color: var(--zielen-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 — LINIA OKRESÓW 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: trzy okresy, bloki różnej wysokości, identyczne sygnały */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 56px; height: 15px;
  background-image:
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%),
    linear-gradient(90deg, var(--zielen-kreska) 0 100%);
  background-size: 56px 1px, 1px 4px, 1px 4px, 16px 4px, 3px 3px, 14px 8px, 3px 3px, 20px 3px, 3px 3px;
  background-position: left 0px bottom 0px, left 18px bottom 0px, left 34px bottom 0px, left 1px bottom 1px, left 8px bottom 11px, left 19px bottom 1px, left 25px bottom 11px, left 35px bottom 1px, left 44px bottom 11px;
  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(--zielen-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(--zielen-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(--zielen-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--zielen-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(--zielen-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--zielen-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(51, 59, 69, 0) 64%),
    linear-gradient(180deg, var(--atrament-blask) 0%, var(--atrament-noc) 58%);
}
.stopka__okresy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--zielen-jasna) 2px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 19px, var(--zielen-jasna) 19px 20px, transparent 20px),
    linear-gradient(90deg, transparent 0 38px, var(--zielen-jasna) 38px 39px, transparent 39px),
    linear-gradient(90deg, transparent 0 3px, var(--zielen-jasna) 3px 18px, transparent 18px),
    linear-gradient(90deg, transparent 0 9px, var(--zielen-jasna) 9px 11px, transparent 11px),
    linear-gradient(90deg, transparent 0 20px, var(--zielen-jasna) 20px 37px, transparent 37px),
    linear-gradient(90deg, transparent 0 27px, var(--zielen-jasna) 27px 29px, transparent 29px),
    linear-gradient(90deg, transparent 0 39px, var(--zielen-jasna) 39px 53px, transparent 53px),
    linear-gradient(90deg, transparent 0 45px, var(--zielen-jasna) 45px 47px, transparent 47px);
  background-size: 56px 1px, 56px 4px, 56px 4px, 56px 3px, 56px 2px, 56px 6px, 56px 2px, 56px 2px, 56px 2px;
  background-position: left 0px bottom 0px, left 0px bottom 0px, left 0px bottom 0px, left 0px bottom 1px, left 0px bottom 9px, left 0px bottom 1px, left 0px bottom 9px, left 0px bottom 1px, left 0px bottom 9px;
  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: trzy okresy, bloki różnej wysokości, identyczne sygnały */
.stopka__znak::after {
  content: ""; display: block; width: 56px; height: 15px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%),
    linear-gradient(90deg, var(--zielen-jasna) 0 100%);
  background-size: 56px 1px, 1px 4px, 1px 4px, 16px 4px, 3px 3px, 14px 8px, 3px 3px, 20px 3px, 3px 3px;
  background-position: left 0px bottom 0px, left 18px bottom 0px, left 34px bottom 0px, left 1px bottom 1px, left 8px bottom 11px, left 19px bottom 1px, left 25px bottom 11px, left 35px bottom 1px, left 44px bottom 11px;
  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(--zielen-jasna); text-decoration: underline; text-underline-offset: .3em; }

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

  /* PIONOWO: linia czasu, trzy okresy różnej długości, bloki różnej szerokości, identyczne sygnały */
  .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(--zielen-kreska) 0 100%),
      linear-gradient(90deg, var(--zielen-kreska) 0 100%),
      linear-gradient(90deg, var(--zielen-kreska) 0 100%),
      linear-gradient(90deg, var(--zielen-kreska) 0 100%),
      linear-gradient(90deg, var(--zielen-kreska) 0 100%),
      linear-gradient(90deg, var(--zielen-kreska) 0 100%),
      linear-gradient(90deg, var(--zielen-kreska) 0 100%),
      linear-gradient(90deg, var(--zielen-kreska) 0 100%),
      linear-gradient(90deg, var(--zielen-kreska) 0 100%);
    background-size: 1px 84%, 4px 1px, 4px 1px, 9px 14%, 3px 3px, 4px 14%, 3px 3px, 13px 14%, 3px 3px;
    background-position: left 3px top 8%, left 3px top 34%, left 3px top 62%, left 4px top 12%, left 19px top calc(12% + 5%), left 4px top 40%, left 19px top calc(40% + 5%), left 4px top 68%, left 19px top calc(68% + 5%);
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--zielen-jasna) 0 100%),
      linear-gradient(90deg, var(--zielen-jasna) 0 100%),
      linear-gradient(90deg, var(--zielen-jasna) 0 100%),
      linear-gradient(90deg, var(--zielen-jasna) 0 100%),
      linear-gradient(90deg, var(--zielen-jasna) 0 100%),
      linear-gradient(90deg, var(--zielen-jasna) 0 100%),
      linear-gradient(90deg, var(--zielen-jasna) 0 100%),
      linear-gradient(90deg, var(--zielen-jasna) 0 100%),
      linear-gradient(90deg, var(--zielen-jasna) 0 100%);
    background-size: 1px 84%, 4px 1px, 4px 1px, 9px 14%, 3px 3px, 4px 14%, 3px 3px, 13px 14%, 3px 3px;
    background-position: left 3px top 8%, left 3px top 34%, left 3px top 62%, left 4px top 12%, left 19px top calc(12% + 5%), left 4px top 40%, left 19px top calc(40% + 5%), left 4px top 68%, left 19px top calc(68% + 5%);
    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__len, .naglowek__okresy, .hero__len, .hero__okresy,
  .hero__zanik, .stopka__plyta, .stopka__okresy { 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; }
}