/* =====================================================================
   fotowoltaika.malopolska.pl — MAKIETA PREMIUM „TEN SAM WIDOK, TYLKO JEDEN
   Z METRYKĄ”
   ---------------------------------------------------------------------
   Teza serwisu: wpis-3 h1 „ZRZUT MAPY POTRZEBUJE METRYKI — INACZEJ NIE JEST
   ODTWARZALNYM DOWODEM”; „Do każdego zrzutu mapy dodaj skalę, legendę, nazwę
   warstwy, adres serwisu i czas wykonania. ZRZUT BEZ TYCH DANYCH JEST
   ILUSTRACJĄ, KTÓREJ NIE DA SIĘ ODTWORZYĆ”; „Metryka źródła ma więcej niż
   URL”; „Zrzut mapy musi dać się umieścić z powrotem”; podstrona-1 „Pięć
   statusów zamiast zielonego i czerwonego”, „NIE SUMUJ OCHRONY W JEDEN WYNIK”.

   Rysunek (zmierzony): DWA IDENTYCZNE obrysy 440×250 (kreska 3) — ten sam
   widok, ta sama wielkość, ta sama kreska. Lewy jest pusty. Prawy ma przy
   dolnej krawędzi, WEWNĄTRZ, cztery drobne pełne znaki o różnej szerokości
   (24, 40, 18, 32) — metrykę. Nic więcej ich nie różni.

   ⚠⚠ SEDNO: dowodem jest ten, który niesie swoją metrykę; bez niej to ta sama
   ilustracja. Assert w hero.py: obrysy identyczne, metryka mieści się
   wewnątrz, znaki różnej szerokości.
   ⚠⚠ ŻADNYCH DWÓCH ZARYSÓW, KTÓRE SIĘ POKRYWAJĄ (doradcaenergetyczny.com —
   tam jeden obrys leży NA drugim; tu stoją osobno i są identyczne), ŻADNYCH
   CZTERECH JEDNAKOWYCH OKŁADEK (audytorenergetyczny.com — tam cztery ramy
   o różnych wnętrzach), ŻADNYCH ZBIORÓW ZACHODZĄCYCH (fotowoltaika.kutno.pl),
   ŻADNYCH BRYŁ NA PODSTAWACH (fotowoltaika.czeladz.pl), ŻADNEGO PODZIAŁU
   PASA NA PEŁNE I PUSTE (fotowoltaika.karpacz.pl), ŻADNYCH CZTERECH KOSZYKÓW
   (pomowienia.pl — choć index mówi „cztery koszyki, których nie należy
   mieszać”; to zdanie ma już swój rysunek).
   ⚠ Żadnej mapy, legendy, skali z podziałką, słońca, panelu, herbu regionu.
   Bez liter i cyfr. Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: przestrzeń barwna serii wyczerpana (PLAN-PREMIUM,
   5.09). Limonka sąsiaduje z oliwką czystepowietrze.warmia.pl (#4F5A1E —
   brązowsza) i zielenią butelkową fotowoltaika.ilawa.pl (#1F5B45 — chłodna,
   niebieskawa, na JASNEJ płycie). Granat głęboki jest w rodzinie PV jedyną
   NIEBIESKĄ ciemną płytą (cynk chłodny, ale szary; węgiel, sepia i grafit
   oliwkowy są ciepłe). Zestaw: zimny granat + ciepła limonka.

   ⚠ SZKIELET przeniesiony z otocertyfikat.pl (ciemna płyta, blog
   `lista-wpisow`) — ten sam szkielet co czeladź, karpacz i kutno, ale inne
   tokeny, kroje i wszystkie ozdobniki. 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 tej domenie brak), 9b i 9c (`kroki`
   w podstronie-1 i wszystkich wpisach; `wyliczenie` w index, obu podstronach
   i wszystkich wpisach).
   ⚠ NAPRAWA 6.09: `.kroki`, `.wyliczenie` i `.zrodlo` mają `margin-inline: auto`.
   ⚠ Rodzina PV (RODZINA-PV.md).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --granat:       #182234;   /* płyta nagłówka i hero — granat głęboki, zimny */
  --granat-noc:   #0E1420;
  --granat-blask: #2E3A50;
  --papier:       #F3F4F6;
  --karta:        #FFFFFF;

  --tekst:        #1A1D22;   /* 15,35 na papierze, 16,90 na karcie */
  --tekst-cichy:  #4B5058;   /*  7,37 na papierze */
  --na-granacie:       #E9EDF2; /* 13,56 / 15,67 na nocy / 9,72 na blasku */
  --na-granacie-cichy: #AEB6C2; /*  7,80 / 9,01 / 5,59 na blasku */

  /* limonka — TRZY wartości (kanon, punkt 12), policzone */
  --limonka-pismo:  #4A6B12; /* PISMO — 5,61 na papierze, 6,17 na karcie */
  --limonka-kreska: #648C1E; /* kreski — 3,59 / 3,95 */
  --limonka-jasna:  #CBE39A; /* na ciemnych płytach — 11,38 / 13,16 / 8,16 na blasku */

  --obwodka:       #6E747C; /* 4,29 na papierze / 4,72 na karcie */
  --linia-cicha:   #DFE2E6;
  --obwodka-ciemna:#8C97A8; /* 5,40 na granacie / 6,24 na nocy / 3,87 na blasku */

  --kroj-naglowek: "Cormorant Infant", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Instrument Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Geist 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: 6px;}

/* --- 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(--limonka-jasna); color: var(--granat); }
:focus-visible { outline: 3px solid var(--limonka-pismo); outline-offset: 2px; }
.naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--limonka-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(--limonka-jasna); color: var(--granat); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. PŁYTY ------------------------------------------------------- */
.naglowek, .hero { position: relative; isolation: isolate; color: var(--na-granacie); }
.naglowek { background: var(--granat); }

/* --- 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; }
.pasmo > .kontener > .lista-wpisow { max-width: var(--kolumna-szeroka); }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--granat);
  background-image: linear-gradient(180deg, var(--granat-noc) 0%, var(--granat) 62%, var(--granat-blask) 100%);
}
/* wzdłuż dolnej krawędzi: dwa IDENTYCZNE obrysy, a w prawym pasek metryki
   przy dolnej krawędzi; okres 56 px */
.naglowek__metryka {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--limonka-jasna) 2px 24px, transparent 24px),
    linear-gradient(90deg, transparent 0 2px, var(--limonka-jasna) 2px 24px, transparent 24px),
    linear-gradient(90deg, transparent 0 2px, var(--limonka-jasna) 2px 3px, transparent 3px),
    linear-gradient(90deg, transparent 0 23px, var(--limonka-jasna) 23px 24px, transparent 24px),
    linear-gradient(90deg, transparent 0 32px, var(--limonka-jasna) 32px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 32px, var(--limonka-jasna) 32px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 32px, var(--limonka-jasna) 32px 33px, transparent 33px),
    linear-gradient(90deg, transparent 0 53px, var(--limonka-jasna) 53px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 35px, var(--limonka-jasna) 35px 39px, transparent 39px),
    linear-gradient(90deg, transparent 0 41px, var(--limonka-jasna) 41px 48px, transparent 48px),
    linear-gradient(90deg, transparent 0 50px, var(--limonka-jasna) 50px 53px, transparent 53px);
  background-size: 56px 1px, 56px 1px, 56px 9px, 56px 9px, 56px 1px, 56px 1px, 56px 9px, 56px 9px, 56px 2px, 56px 2px, 56px 2px;
  background-position: left 0px bottom 11px, left 0px bottom 3px, left 0px bottom 3px, left 0px bottom 3px, left 0px bottom 11px, left 0px bottom 3px, left 0px bottom 3px, left 0px bottom 3px, left 0px bottom 5px, left 0px bottom 5px, left 0px bottom 5px;
  background-repeat: repeat-x;
  opacity: .55;
}
.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.4rem, 1rem + 1vw, 2.1rem);
}
.znak { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--na-granacie); text-decoration: none; }
/* znak rozpoznawczy: dwa identyczne obrysy, metryka tylko w prawym */
.znak__metryka {
  flex: none; width: 30px; height: 16px;
  background-image:
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%);
  background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 4px 2px, 3px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 17px bottom 10px, left 17px bottom 0px, left 17px bottom 0px, left 29px bottom 0px, left 19px bottom 2px, left 24px bottom 2px;
  background-repeat: no-repeat;
}
.znak__slowo {
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.06rem, .94rem + .46vw, 1.38rem); letter-spacing: -.008em;
}
.znak:hover .znak__slowo { color: var(--limonka-jasna); }

.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(--na-granacie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.008em;
}
.menu__link:hover { color: var(--na-granacie); }
/* pozycja bieżąca: pod napisem dwa identyczne obrysy, a w prawym metryka.
   ⚠⚠ 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(--na-granacie); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em;
  height: 11px;
  background-image:
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%);
  background-size: 44% 1px, 44% 1px, 1px 11px, 1px 11px, 44% 1px, 44% 1px, 1px 11px, 1px 11px, 10% 2px, 6% 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 44% bottom 0px, right 0px bottom 10px, right 0px bottom 0px, right 0px bottom 0px, right 44% bottom 0px, right 30% bottom 2px, right 18% bottom 2px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — ten sam widok, tylko jeden z metryką ----------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--granat);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--granat);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--granat-blask) 0%, rgba(46, 58, 80, 0) 62%),
    linear-gradient(180deg, var(--granat) 0%, var(--granat-noc) 100%);
}
.hero__metryka {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (oba obrysy i metryka w prawym), obok
     kolumny, nie pod nią — szerokość liczona od 1320 do 1920 px. */
  inset-block-start: 50%; inset-inline-end: 2%;
  width: clamp(26rem, 28vw, 36rem); aspect-ratio: 1200 / 420;
  transform: translateY(-50%);
  color: var(--limonka-jasna); opacity: .4;
}
.hero__metryka svg { width: 100%; height: 100%; }
/* Scrim wygasza lewą stronę pod kolumną tytułu. Prawy obrys wraz z metryką
   musi zostać czytelny — to on jest tu dowodem. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(14, 20, 32, .95) 0%, rgba(14, 20, 32, .86) 22%, rgba(14, 20, 32, .1) 40%, rgba(14, 20, 32, 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 scrim zaczyna się
   dopiero pod nim — na 390 px rysunek z boku wchodził pod akapit
   (zmierzone 6.09 na tej domenie, poprawka po zamknięciu). */
@media (max-width: 1319px) {
  .hero__kontener { padding-block-start: clamp(6rem, 26vw, 12rem); }
  .hero__metryka {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .5;
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(14, 20, 32, 0) 0%, rgba(14, 20, 32, 0) 22%, rgba(14, 20, 32, .9) 40%, rgba(14, 20, 32, .9) 100%);
  }
}

/* ⚠ Barwa jasna należy do TYTUŁU W HERO (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: -.01em;
  color: var(--tekst); text-wrap: balance;
}
.hero .tytul { color: var(--na-granacie); }
/* nad tytułem: dwa identyczne obrysy, w prawym pasek metryki */
.hero .tytul::before {
  content: ""; display: block;
  width: 124px; height: 30px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%);
  background-size: 54px 2px, 54px 2px, 2px 28px, 2px 28px, 54px 2px, 54px 2px, 2px 28px, 2px 28px, 10px 4px, 16px 4px, 7px 4px;
  background-position: left 0px bottom 26px, left 0px bottom 0px, left 0px bottom 0px, left 52px bottom 0px, left 70px bottom 26px, left 70px bottom 0px, left 70px bottom 0px, left 122px bottom 0px, left 76px bottom 5px, left 90px bottom 5px, left 110px bottom 5px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-granacie);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-granacie-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(--limonka-jasna); }

/* --- 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(--granat-noc);
  background-image: linear-gradient(180deg, var(--granat) 0%, var(--granat-noc) 100%);
  color: var(--na-granacie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--limonka-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-granacie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-granacie); }
/* ⚠⚠ 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-granacie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-granacie-cichy); border-inline-start-color: var(--limonka-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--limonka-jasna); text-decoration-color: var(--limonka-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-granacie); }

/* --- 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.36rem, 1.06rem + 1.06vw, 2.1rem);
  line-height: 1.22; letter-spacing: -.008em;
  color: var(--tekst); text-wrap: balance;
}
/* numer sekcji NAD DWOMA OBRYSAMI I METRYKĄ W PRAWYM */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  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(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%);
  background-size: 17px 1px, 17px 1px, 1px 11px, 1px 11px, 17px 1px, 17px 1px, 1px 11px, 1px 11px, 5px 2px, 4px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 16px bottom 0px, left 23px bottom 10px, left 23px bottom 0px, left 23px bottom 0px, left 39px bottom 0px, left 25px bottom 2px, left 32px bottom 2px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--limonka-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--limonka-jasna);
  background-image:
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%);
  background-size: 17px 1px, 17px 1px, 1px 11px, 1px 11px, 17px 1px, 17px 1px, 1px 11px, 1px 11px, 5px 2px, 4px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 16px bottom 0px, left 23px bottom 10px, left 23px bottom 0px, left 23px bottom 0px, left 39px bottom 0px, left 25px bottom 2px, left 32px 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.06rem, .96rem + .4vw, 1.3rem); line-height: 1.36; 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(--limonka-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--limonka-pismo);
  text-decoration-line: underline; text-decoration-color: var(--limonka-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 procedura po kolei — numer nad dwoma obrysami, z metryką w prawym.
   WYLICZENIE to rzeczy do sprawdzenia — metryka ma INNY układ co pozycję:
   ten sam widok, inny zestaw danych o źródle.
   ⚠ 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
   `<a>`, nie `<li>` (zmierzone na pap2.pl: 259 × 20 px przy progu 44).
   ⚠ `inline-block`, NIE `inline-flex`: flex nie zawija tekstu → B5. */
.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(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%);
  background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 4px 2px, 3px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 19px bottom 10px, left 19px bottom 0px, left 19px bottom 0px, left 31px bottom 0px, left 21px bottom 2px, left 27px bottom 2px;
  background-repeat: no-repeat;
  color: var(--limonka-pismo); background: none; border: 0;
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .73rem;
}
.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(--limonka-jasna);
  background-image:
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%);
  background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 4px 2px, 3px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 19px bottom 10px, left 19px bottom 0px, left 19px bottom 0px, left 31px bottom 0px, left 21px bottom 2px, left 27px 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.4rem; }
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%);
  background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 3px 2px, 4px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 17px bottom 10px, left 17px bottom 0px, left 17px bottom 0px, left 29px bottom 0px, left 19px bottom 2px, left 24px bottom 2px;
  background-repeat: no-repeat;}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%);
  background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 7px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 17px bottom 10px, left 17px bottom 0px, left 17px bottom 0px, left 29px bottom 0px, left 20px bottom 2px;
  background-repeat: no-repeat;}
/* znacznik: dwa obrysy — metryka w prawym ma inny układ co pozycję */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 30px; height: 12px; border: 0;
  background-image:
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%);
  background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 4px 2px, 3px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 17px bottom 10px, left 17px bottom 0px, left 17px bottom 0px, left 29px bottom 0px, left 19px bottom 2px, left 25px bottom 2px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before,
.tresc .hero .wyliczenie li::before { border-color: var(--limonka-jasna); }

/* ⚠⚠ KANON 9c: ODSYŁACZ W WYKAZIE (`.wyliczenie`, `.kroki`) NIE JEST OBJĘTY
   REGUŁAMI PROZY — te celują w `<a>` wewnątrz `<p>`. Bez własnej reguły
   dostaje DOMYŚLNY BŁĘKIT PRZEGLĄDARKI rgb(0,0,238), co na ciemnej płycie
   hero daje **1,44:1**. Zmierzone 5.09 na tej domenie: „Checklista wymagań
   CMS”, „Backup i test odtwarzania”, „Migracja CMS” w `<ul class="wyliczenie">`
   w hero.
   ⚠ Selektor MUSI zawierać klasę wykazu. Goły `.tresc li a` to (0,1,2)
   i bije `.tresc .zapowiedz__tytul a` (0,2,1)? nie — ale bije
   `.zapowiedz__tytul a` (0,1,1), czyli wchodzi do tytułów kart. Dlatego
   `.tresc .wyliczenie li a` / `.tresc .kroki li a` — (0,2,2), zakres wąski. */
.tresc .wyliczenie li a:not(.przycisk),
.tresc .kroki li a:not(.przycisk) {
  color: var(--limonka-pismo);
  text-decoration-line: underline; text-decoration-color: var(--limonka-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; }
/* na ciemnej płycie hero i w ciemnym paśmie — barwa jasna */
.tresc .hero .wyliczenie li a:not(.przycisk),
.tresc .hero .kroki li a:not(.przycisk),
.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(--limonka-jasna); text-decoration-color: var(--limonka-jasna);
}
.tresc .hero .wyliczenie li a:not(.przycisk):hover,
.tresc .hero .kroki li a:not(.przycisk):hover { color: var(--na-granacie); }
/* ⚠ Znacznik wykazu w hero i w ciemnym paśmie: --limonka-kreska na blasku
   #433C35 daje 2,37:1 — poniżej progu 3:1 dla kresek. Na ciemnym idzie
   --limonka-jasna (6,20 na blasku). */
.tresc .hero .wyliczenie li::before,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%);
  background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 4px 2px, 3px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 17px bottom 10px, left 17px bottom 0px, left 17px bottom 0px, left 29px bottom 0px, left 19px bottom 2px, left 25px bottom 2px;
  background-repeat: no-repeat;
}

.tresc .hero .wyliczenie li:nth-child(3n+2)::before,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%);
  background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 3px 2px, 4px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 17px bottom 10px, left 17px bottom 0px, left 17px bottom 0px, left 29px bottom 0px, left 19px bottom 2px, left 24px bottom 2px;
  background-repeat: no-repeat;}
.tresc .hero .wyliczenie li:nth-child(3n)::before,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%);
  background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 7px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 17px bottom 10px, left 17px bottom 0px, left 17px bottom 0px, left 29px bottom 0px, left 20px bottom 2px;
  background-repeat: no-repeat;}

.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(--limonka-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(233, 237, 242, .07);
  color: var(--na-granacie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--limonka-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(--granat); border-color: var(--granat); color: var(--na-granacie); }
.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(--limonka-jasna); color: var(--na-granacie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--limonka-jasna); border-color: var(--limonka-jasna); color: var(--granat); }

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

/* --- 11. KARTY KATALOGU — Z DROGĄ DO REKORDU 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: dwa identyczne obrysy, metryka w prawym */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 56px; height: 12px;
  background-image:
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%),
    linear-gradient(90deg, var(--limonka-kreska) 0 100%);
  background-size: 25px 1px, 25px 1px, 1px 11px, 1px 11px, 25px 1px, 25px 1px, 1px 11px, 1px 11px, 7px 2px, 5px 2px, 3px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 24px bottom 0px, left 31px bottom 10px, left 31px bottom 0px, left 31px bottom 0px, left 55px bottom 0px, left 34px bottom 2px, left 43px bottom 2px, left 50px bottom 2px;
  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: .72rem; color: var(--limonka-pismo);
}
/* ⚠⚠ KANON 6: tytuł karty JEST h2 — cofamy reguły „.tresc h2” tym samym
   prefiksem, RAZEM Z RAMKĄ NUMERU (border, border-inline-end: 0, min-width,
   height, display: inline-flex, padding-inline). */
.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.04rem, .96rem + .4vw, 1.28rem); line-height: 1.32; letter-spacing: -.006em;
}
.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(--limonka-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(--limonka-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--limonka-kreska);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--tekst); border-block-end-color: var(--tekst); }
/* ⚠ `.zapowiedz__wiecej` może mieć OBIE klasy (`zapowiedz__wiecej przejscie`). */
.tresc .zapowiedz .przejscie a {
  background: none; border: 0; border-block-end: 2px solid var(--limonka-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--limonka-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(--granat-noc); color: var(--na-granacie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--granat-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--granat-blask) 0%, rgba(46, 58, 80, 0) 64%),
    linear-gradient(180deg, var(--granat) 0%, var(--granat-noc) 84%);
}
.stopka__metryka {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--limonka-jasna) 2px 24px, transparent 24px),
    linear-gradient(90deg, transparent 0 2px, var(--limonka-jasna) 2px 24px, transparent 24px),
    linear-gradient(90deg, transparent 0 2px, var(--limonka-jasna) 2px 3px, transparent 3px),
    linear-gradient(90deg, transparent 0 23px, var(--limonka-jasna) 23px 24px, transparent 24px),
    linear-gradient(90deg, transparent 0 32px, var(--limonka-jasna) 32px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 32px, var(--limonka-jasna) 32px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 32px, var(--limonka-jasna) 32px 33px, transparent 33px),
    linear-gradient(90deg, transparent 0 53px, var(--limonka-jasna) 53px 54px, transparent 54px),
    linear-gradient(90deg, transparent 0 35px, var(--limonka-jasna) 35px 39px, transparent 39px),
    linear-gradient(90deg, transparent 0 41px, var(--limonka-jasna) 41px 48px, transparent 48px),
    linear-gradient(90deg, transparent 0 50px, var(--limonka-jasna) 50px 53px, transparent 53px);
  background-size: 56px 1px, 56px 1px, 56px 9px, 56px 9px, 56px 1px, 56px 1px, 56px 9px, 56px 9px, 56px 2px, 56px 2px, 56px 2px;
  background-position: left 0px bottom 11px, left 0px bottom 3px, left 0px bottom 3px, left 0px bottom 3px, left 0px bottom 11px, left 0px bottom 3px, left 0px bottom 3px, left 0px bottom 3px, left 0px bottom 5px, left 0px bottom 5px, left 0px bottom 5px;
  background-repeat: repeat-x;
  opacity: .5;
}
.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.02rem, .94rem + .4vw, 1.28rem); color: var(--na-granacie);
}
.stopka__znak::after {
  content: ""; display: block; width: 56px; height: 12px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%),
    linear-gradient(90deg, var(--limonka-jasna) 0 100%);
  background-size: 25px 1px, 25px 1px, 1px 11px, 1px 11px, 25px 1px, 25px 1px, 1px 11px, 1px 11px, 7px 2px, 5px 2px, 3px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 24px bottom 0px, left 31px bottom 10px, left 31px bottom 0px, left 31px bottom 0px, left 55px bottom 0px, left 34px bottom 2px, left 43px bottom 2px, left 50px bottom 2px;
  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-granacie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .74rem; letter-spacing: -.008em;
}
.stopka__menu a:hover { color: var(--limonka-jasna); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — DWA OBRYSY I METRYKA W TORZE -------------
   ⚠⚠ KANON 10: tory boczne SYMETRYCZNE, środkowy w REM, row-gap ZEROWY,
   ozdobnik w TORZE SIATKI (nie pseudoelementem `main.tresc`).
   -------------------------------------------------------------------- */
@media screen and (min-width: 1560px) {
  .pasmo > .kontener, .hero__kontener {
    display: grid;
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna)) [proza-end]
      minmax(0, 1fr) [pelna-end];
    column-gap: var(--rowek); row-gap: 0; align-items: start; max-width: none;
  }
  .hero__kontener {
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna-hero)) [proza-end]
      minmax(0, 1fr) [pelna-end];
  }
  .pasmo > .kontener > *, .hero__kontener > * { grid-column: proza; max-width: none; margin-inline: 0; }
  .pasmo > .kontener > h2 {
    grid-column: pelna-start / proza-start;
    justify-self: end; text-align: end;
    max-width: var(--szyna); margin-block: 0;
  }
  /* belka dróg pod numerem stoi do prawej, bo nagłówek stoi do prawej */
  .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; }
  .pasmo > .kontener > .lista-wpisow { grid-column: proza-start / pelna-end; max-width: none; }
  .hero__kontener > .tytul { grid-column: proza; }

  /* PIONOWO: dwa identyczne obrysy jeden nad drugim, metryka w dolnym */
  .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(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%),
      linear-gradient(90deg, var(--limonka-kreska) 0 100%);
    background-size: 18px 1px, 18px 1px, 1px 32%, 1px 32%, 18px 1px, 18px 1px, 1px 32%, 1px 32%, 7px 2px, 4px 2px, 9px 2px;
    background-position: left 2px top 8%, left 2px top 40%, left 2px top 8%, left 19px top 8%, left 2px top 52%, left 2px top 84%, left 2px top 52%, left 19px top 52%, left 5px top 60%, left 5px top 67%, left 5px top 74%;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%),
      linear-gradient(90deg, var(--limonka-jasna) 0 100%);
    background-size: 18px 1px, 18px 1px, 1px 32%, 1px 32%, 18px 1px, 18px 1px, 1px 32%, 1px 32%, 7px 2px, 4px 2px, 9px 2px;
    background-position: left 2px top 8%, left 2px top 40%, left 2px top 8%, left 19px top 8%, left 2px top 52%, left 2px top 84%, left 2px top 52%, left 19px top 52%, left 5px top 60%, left 5px top 67%, left 5px top 74%;
    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: .74rem; 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__plyta, .naglowek__metryka, .hero__plyta, .hero__metryka,
  .hero__scrim, .stopka__plyta, .stopka__metryka { 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;
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
    background-size: 17px 1px, 17px 1px, 1px 11px, 1px 11px, 17px 1px, 17px 1px, 1px 11px, 1px 11px, 5px 2px, 4px 2px !important;
    background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 16px bottom 0px, left 23px bottom 10px, left 23px bottom 0px, left 23px bottom 0px, left 39px bottom 0px, left 25px bottom 2px, left 32px bottom 2px !important;
    background-repeat: no-repeat !important;
  }
  .tresc .wyliczenie li::before, .tresc .hero .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%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
    background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 4px 2px, 3px 2px !important;
    background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 17px bottom 10px, left 17px bottom 0px, left 17px bottom 0px, left 29px bottom 0px, left 19px bottom 2px, left 25px bottom 2px !important;
    background-repeat: no-repeat !important;
  }
  .tresc .kroki 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%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
    background-size: 13px 1px, 13px 1px, 1px 11px, 1px 11px, 13px 1px, 13px 1px, 1px 11px, 1px 11px, 4px 2px, 3px 2px !important;
    background-position: left 0px bottom 10px, left 0px bottom 0px, left 0px bottom 0px, left 12px bottom 0px, left 19px bottom 10px, left 19px bottom 0px, left 19px bottom 0px, left 31px bottom 0px, left 21px bottom 2px, left 27px bottom 2px !important;
    background-repeat: no-repeat !important;
  }
  .zapowiedz::before, .stopka__znak::after { background-image: none !important; background: #000 !important; height: 3px !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; }
}