/* =====================================================================
   hokiwa.pl — MAKIETA PREMIUM
   „SERIA DOWODÓW, NIE JEDNO PRZEŁĄCZENIE — KAŻDY DOWÓD OSOBNO, KAŻDY WYŻEJ”
   ---------------------------------------------------------------------
   Teza serwisu, jego własnymi słowami: h2 „**Migracja jest serią dowodów,
   nie jednym przełączeniem**”; „**Starą centralę wyłącza się po dowodach,
   nie po udanym jednym połączeniu**”; h1 „**najpierw zachowaj wiedzę,
   potem wymień urządzenie**”; „Jedno połączenie […] potwierdza tylko jedną
   trasę w jednej chwili”.

   Rysunek (zmierzony): pięć pełnych pól wznoszących się schodami — pięć
   osobnych dowodów, każdy dokładany osobno, każdy podnosi migrację
   o stopień; pola się nie stykają. Na górze z prawej PUSTY obrys —
   wyłączenie starej centrali, dopiero po wszystkich dowodach.

   ⚠⚠ TO NIE STOS WARSTW betamax.pl: tam warstwy ZDEJMOWANE po jednej,
   poziomo; tu dowody DOKŁADANE po jednym, każdy na WŁASNEJ wysokości,
   a koniec jest osobnym pustym obrysem. Wysokość jest treścią.

   ⚠⚠ CZEGO TU NIE MA — I DLACZEGO:
   * ŻADNYCH DRÓG DO REKORDU — otocertyfikat.pl (tam kreski prowadzą
     do kwadratu; tu nie ma drogi, są osobne pola).
   * ŻADNYCH PÓL W RZĘDZIE NA JEDNEJ WYSOKOŚCI — ostróda, dellmont;
     ŻADNEJ MACIERZY — fritzboxfon; ŻADNYCH PAR, TORÓW, WIERSZY, OPERACJI,
     HASŁA — poprzednie TELEFON.
   * ŻADNEGO PRZEŁĄCZNIKA, SUWAKA, STRZAŁKI, CENTRALI, SŁUCHAWKI, PTASZKA,
     CZERWIENI — zakazy rodziny TELEFON; bez cyfr i liter (kanon 13).
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: morska noc #172E2E (teal-czerń) — sąsiedzi: stal
   zimowa olecka (PV, bardziej niebieska), zieleń nocna dellmont.pl #17241F
   (zieleńsza); w TELEFON płyty teal nie ma. Lawenda #4B3F94 — sąsiad:
   śliwa darmowe-rozmowy.pl #5A2D5C (czerwono-fioletowa, na jasnej);
   lawenda jest niebiesko-fioletowa, na ciemnym. **Lawenda na morskiej
   nocy** to para, której w serii nie ma.

   ⚠ FAUSTINA ma wagi 400 i 700 — waga 500 szkieletu idzie na 400.
   ⚠ CHIVO MONO w wadze 400.

   ⚠ SZKIELET przeniesiony z otocertyfikat.pl; ozdobniki i tokeny
   przepisane. Kopiowanie SZKIELETU dozwolone, PROJEKTU nie.

   ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz /
   dokladka.py. Domena na liście premium-recznie.txt.
   ⚠ KANON 9b i 9c: odsyłacz w wykazie ma cel dotykowy 44 px I barwę.
   ⚠ KANON 2c: h3 i .zajawka mają własną barwę na ciemnym paśmie.
   ⚠ KANON 13c: nadpisania list `background-position` mają tyle wartości,
   ile warstw ma baza — albo nie istnieją.
   ⚠ Proporcja kadru 3,3 ≥ 2,0 — przy 390 px rysunek mieści się nad tytułem.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --morska:       #172E2E;
  --morska-noc:   #0E1D1D;
  --morska-blask: #2C4646;
  --papier:       #F3F5F5;
  --karta:        #FFFFFF;

  --tekst:       #161C1C;   /* 15.77 / 17.26 */
  --tekst-cichy: #465252;   /* 7.41 / 8.11 */
  --na-morskiej: #EAF2F2;   /* 12.60 / 15.25 / 8.92 na blasku */
  --na-morskiej-cichy: #B6CACA; /* 8.38 / 10.14 / 5.93 na blasku */

  /* lawenda — TRZY wartości (kanon, punkt 12), policzone skryptem */
  --lawenda-pismo:  #4B3F94; /* PISMO — 7.87 / 8.61 */
  --lawenda-kreska: #6A5EBA; /* kreski — 4.89 / 5.35 (na blasku 1.89 — patrz sekcja 8) */
  --lawenda-jasna:  #CBC3F2; /* na płytach — 8.61 / 10.42 / 6.10 na blasku */

  --obwodka:       #6F7878; /* 4.14 / 4.53 */
  --linia-cicha:   #DFE5E5;
  --obwodka-ciemna:#8FA8A8; /* 5.68 / 6.88 / 4.02 na blasku */
  /* przyciski: biel na piśmie 8.61, noc na jasnej 10.42 */

  --kroj-naglowek: "Faustina", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Mulish", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Chivo 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: 4px;
  --cien-karta: 0 16px 34px -28px rgba(23, 46, 46, .5);
}

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

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

/* --- 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(--morska);
  background-image: linear-gradient(180deg, var(--morska-noc) 0%, var(--morska) 62%, var(--morska-blask) 100%);
}
/* wzdłuż dolnej krawędzi: dowody wznoszące się schodami i pusty obrys
   na końcu; okres 84 px. */
.naglowek__dowody {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 20px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--lawenda-jasna) 0px 6px, transparent 6px 84px),
    repeating-linear-gradient(90deg, transparent 0 10px, var(--lawenda-jasna) 10px 16px, transparent 16px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--lawenda-jasna) 20px 26px, transparent 26px 84px),
    repeating-linear-gradient(90deg, transparent 0 30px, var(--lawenda-jasna) 30px 36px, transparent 36px 84px),
    repeating-linear-gradient(90deg, transparent 0 42px, var(--lawenda-jasna) 42px 50px, transparent 50px 84px),
    repeating-linear-gradient(90deg, transparent 0 42px, var(--lawenda-jasna) 42px 50px, transparent 50px 84px),
    repeating-linear-gradient(90deg, transparent 0 42px, var(--lawenda-jasna) 42px 44px, transparent 44px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--lawenda-jasna) 48px 50px, transparent 50px 84px);
  background-size: 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 2px, 100% 2px, 100% 8px, 100% 8px;
  background-position: 0 13px, 0 9px, 0 5px, 0 1px, 0 1px, 0 7px, 0 1px, 0 1px;
  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-morskiej); text-decoration: none; }
/* znak rozpoznawczy: trzy dowody schodami i pusty obrys na końcu */
.znak__dowody {
  flex: none; width: 36px; height: 18px;
  background-image:
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%);
  background-size: 5px 5px, 5px 5px, 5px 5px, 9px 2px, 9px 2px, 2px 9px, 2px 9px;
  background-position: left 0px top 8px, left 8px top 4px, left 16px top 0px, left 26px top 0px, left 26px top 7px, left 26px top 0px, left 33px top 0px;
  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(--lawenda-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-morskiej-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.008em;
}
.menu__link:hover { color: var(--na-morskiej); }
/* pozycja bieżąca: pod napisem trzy dowody schodami i pusty obrys (px od lewej).
   ⚠⚠ 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-morskiej); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 5px; inset-inline: .5em;
  height: 11px;
  background-image:
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%);
  background-size: 4px 4px, 4px 4px, 4px 4px, 8px 2px, 8px 2px, 2px 8px, 2px 8px;
  background-position: left 0px top 6px, left 7px top 3px, left 14px top 0px, left 23px top 0px, left 23px top 6px, left 23px top 0px, left 29px top 0px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — seria dowodów, nie jedno przełączenie --------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--morska);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--morska);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--morska-blask) 0%, rgba(44, 70, 70, 0) 62%),
    linear-gradient(180deg, var(--morska) 0%, var(--morska-noc) 100%);
}
.hero__dowody {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (wszystkie dowody i pusty obrys), obok
     kolumny, nie pod nią — szerokość liczona od 1320 do 1920 px.
     ⚠⚠ Obcięcie z prawej zabrałoby pusty obrys — a bez niego schody nie
     mają celu, do którego się nie doszło. Kadr ciasny (3,3 ≥ 2,0). */
  inset-block-start: 50%; inset-inline-end: 2%;
  width: clamp(26rem, 28vw, 36rem); aspect-ratio: 430 / 130;
  transform: translateY(-50%);
  color: var(--lawenda-jasna); opacity: .4;
}
.hero__dowody svg { width: 100%; height: 100%; }
/* Scrim gaśnie na 40 procentach szerokości, a rysunek stoi w prawym torze —
   wszystkie dowody i pusty obrys zostają czytelne. Pierwszy (najniższy)
   dowód nie może być przygaszony: to on jest początkiem serii. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(14, 29, 29, .95) 0%, rgba(14, 29, 29, .86) 22%, rgba(14, 29, 29, .1) 40%, rgba(14, 29, 29, 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__dowody {
    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, 29, 29, 0) 0%, rgba(14, 29, 29, 0) 22%, rgba(14, 29, 29, .9) 40%, rgba(14, 29, 29, .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-morskiej); }
/* nad tytułem: pięć dowodów schodami i pusty obrys — największa skala
   w arkuszu, dziewięć warstw */
.hero .tytul::before {
  content: ""; display: block;
  width: 11rem; height: 34px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%);
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px, 10px 10px, 22px 3px, 22px 3px, 3px 22px, 3px 22px;
  background-position: left 0px top 24px, left 22px top 18px, left 44px top 12px, left 66px top 6px, left 88px top 0px, left 112px top 0px, left 112px top 19px, left 112px top 0px, left 131px top 0px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-morskiej);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-morskiej-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(--lawenda-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(--morska-noc);
  background-image: linear-gradient(180deg, var(--morska) 0%, var(--morska-noc) 100%);
  color: var(--na-morskiej);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--lawenda-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-morskiej-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-morskiej); }
/* ⚠⚠ 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-morskiej); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-morskiej-cichy); border-inline-start-color: var(--lawenda-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--lawenda-jasna); text-decoration-color: var(--lawenda-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-morskiej); }

/* --- 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 STOI NAD trzema dowodami schodami i pustym obrysem. 7 warstw.
   ⚠⚠ Pozycje składnią `left … bottom …` (kotwica u dołu: pierwszy dowód
   najniżej). */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  display: block; width: 4.4rem; margin-block-end: .7rem; padding-block-end: 1rem;
  background-image:
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%);
  background-size: 5px 5px, 5px 5px, 5px 5px, 9px 2px, 9px 2px, 2px 9px, 2px 9px;
  background-position: left 0px bottom 0px, left 8px bottom 3px, left 16px bottom 6px, left 26px bottom 0px, left 26px bottom 7px, left 26px bottom 0px, left 33px bottom 0px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .72rem; letter-spacing: -.01em; line-height: 1.5;
  color: var(--lawenda-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--lawenda-jasna);
  background-image:
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%);
}
.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem;
  font-family: var(--kroj-naglowek); font-weight: 400;
  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(--lawenda-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--lawenda-pismo);
  text-decoration-line: underline; text-decoration-color: var(--lawenda-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 w PEŁNYM PUDEŁKU: krok wykonany
   jest dowodem (pełnym polem), nie założeniem.
   WYLICZENIE to rzeczy do sprawdzenia — dowody schodami i pusty obrys:
   pozycja wykazu to jeden dowód do zebrania osobno.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   ⚠ Pismo w pudełku to --karta na --lawenda-pismo; na ciemnym paśmie
   pudełko odwraca się na --lawenda-jasna z pismem --morska-noc.
   -------------------------------------------------------------------- */
.tresc .kroki { margin: .4em 0 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: .6em;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 1.6rem; padding-inline: .4rem;
  background: var(--lawenda-pismo); color: var(--karta);
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .7rem;
}
.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 { background: var(--lawenda-jasna); color: var(--morska-noc); }

.tresc .wyliczenie { margin: .4em 0 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 1.9rem; }
/* znacznik: trzy dowody schodami i pusty obrys.
   ⚠ SIEDEM warstw; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c). */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 26px; height: 11px;
  background-image:
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%);
  background-size: 4px 4px, 4px 4px, 4px 4px, 8px 2px, 8px 2px, 2px 8px, 2px 8px;
  background-position: left 0px top 6px, left 6px top 3px, left 12px top 0px, left 20px top 0px, left 20px top 6px, left 20px top 0px, left 26px top 0px;
  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(--lawenda-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(--lawenda-pismo);
  text-decoration-line: underline; text-decoration-color: var(--lawenda-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(--lawenda-jasna); text-decoration-color: var(--lawenda-jasna);
}
.tresc .hero .wyliczenie li a:not(.przycisk):hover,
.tresc .hero .kroki li a:not(.przycisk):hover { color: var(--na-morskiej); }
/* ⚠ Znacznik wykazu w hero i w ciemnym paśmie: --lawenda-kreska na blasku
   #2C4646 daje 1,89:1 — poniżej progu 3:1 dla kresek. Na ciemnym idzie
   --lawenda-jasna. */
.tresc .hero .wyliczenie li::before,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%);
}

.tresc .zrodlo {
  margin: 1.6em 0 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem);
  background: var(--karta); border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--lawenda-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(234, 242, 242, .07);
  color: var(--na-morskiej-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--lawenda-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(--morska); border-color: var(--morska); color: var(--na-morskiej); }
.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(--lawenda-jasna); color: var(--na-morskiej); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--lawenda-jasna); border-color: var(--lawenda-jasna); color: var(--morska); }

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

/* --- 11. KARTY KATALOGU — DOWODY 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 dowody schodami i pusty obrys */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 4.4rem; height: 12px;
  background-image:
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
    linear-gradient(90deg, var(--lawenda-kreska) 0 100%);
  background-size: 5px 5px, 5px 5px, 5px 5px, 10px 2px, 10px 2px, 2px 10px, 2px 10px;
  background-position: left 0px top 6px, left 9px top 3px, left 18px top 0px, left 29px top 0px, left 29px top 8px, left 29px top 0px, left 37px top 0px;
  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(--lawenda-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: 400;
  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(--lawenda-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(--lawenda-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--lawenda-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(--lawenda-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--lawenda-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(--morska-noc); color: var(--na-morskiej);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--morska-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--morska-blask) 0%, rgba(44, 70, 70, 0) 64%),
    linear-gradient(180deg, var(--morska) 0%, var(--morska-noc) 84%);
}
/* ten sam pas co w nagłówku */
.stopka__dowody {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 20px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--lawenda-jasna) 0px 6px, transparent 6px 84px),
    repeating-linear-gradient(90deg, transparent 0 10px, var(--lawenda-jasna) 10px 16px, transparent 16px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--lawenda-jasna) 20px 26px, transparent 26px 84px),
    repeating-linear-gradient(90deg, transparent 0 30px, var(--lawenda-jasna) 30px 36px, transparent 36px 84px),
    repeating-linear-gradient(90deg, transparent 0 42px, var(--lawenda-jasna) 42px 50px, transparent 50px 84px),
    repeating-linear-gradient(90deg, transparent 0 42px, var(--lawenda-jasna) 42px 50px, transparent 50px 84px),
    repeating-linear-gradient(90deg, transparent 0 42px, var(--lawenda-jasna) 42px 44px, transparent 44px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--lawenda-jasna) 48px 50px, transparent 50px 84px);
  background-size: 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 2px, 100% 2px, 100% 8px, 100% 8px;
  background-position: 0 13px, 0 9px, 0 5px, 0 1px, 0 1px, 0 7px, 0 1px, 0 1px;
  background-repeat: repeat-x;
  opacity: .55;
}
.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-morskiej);
}
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 22px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
    linear-gradient(90deg, var(--lawenda-jasna) 0 100%);
  background-size: 7px 7px, 7px 7px, 7px 7px, 7px 7px, 14px 2px, 14px 2px, 2px 14px, 2px 14px;
  background-position: left 0px top 12px, left 14px top 8px, left 28px top 4px, left 42px top 0px, left 58px top 0px, left 58px top 12px, left 58px top 0px, left 70px top 0px;
  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-morskiej-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .74rem; letter-spacing: -.008em;
}
.stopka__menu a:hover { color: var(--lawenda-jasna); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — DOWODY PIONOWO W PRAWYM TORZE -----------
   ⚠⚠ KANON 10: tory boczne SYMETRYCZNE, środkowy w REM, row-gap ZEROWY,
   ozdobnik w TORZE SIATKI (nie pseudoelementem `main.tresc`).
   -------------------------------------------------------------------- */
@media screen and (min-width: 1560px) {
  .pasmo > .kontener, .hero__kontener {
    display: grid;
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna)) [proza-end]
      minmax(0, 1fr) [pelna-end];
    column-gap: var(--rowek); row-gap: 0; align-items: start; max-width: none;
  }
  .hero__kontener {
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna-hero)) [proza-end]
      minmax(0, 1fr) [pelna-end];
  }
  .pasmo > .kontener > *, .hero__kontener > * { grid-column: proza; max-width: none; margin-inline: 0; }
  .pasmo > .kontener > h2 {
    grid-column: pelna-start / proza-start;
    justify-self: end; text-align: end;
    max-width: var(--szyna); margin-block: 0;
  }
  /* ⚠ Ozdobnik numeru jest zakotwiczony od lewej w px; przy wyrównaniu
     nagłówka do prawej nie przestawiamy ANI JEDNEJ warstwy (kanon 13c). */
  .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: trzy dowody schodzące schodami w prawo i w dół, pusty obrys
     na dole (koniec po dowodach) */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 1.5rem; min-height: 5rem;
    background-image:
      linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
      linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
      linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
      linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
      linear-gradient(90deg, var(--lawenda-kreska) 0 100%),
      linear-gradient(180deg, var(--lawenda-kreska) 0 100%),
      linear-gradient(180deg, var(--lawenda-kreska) 0 100%);
    background-size: 6px 6px, 6px 6px, 6px 6px, 10px 2px, 10px 2px, 2px 10px, 2px 10px;
    background-position: left 0px top 12%, left 6px top 30%, left 12px top 48%, left 8px bottom 8px, left 8px bottom 0px, left 8px bottom 0px, left 16px bottom 0px;
    background-repeat: no-repeat;
    opacity: .6;
  }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
      linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
      linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
      linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
      linear-gradient(90deg, var(--lawenda-jasna) 0 100%),
      linear-gradient(180deg, var(--lawenda-jasna) 0 100%),
      linear-gradient(180deg, var(--lawenda-jasna) 0 100%);
    opacity: .7;
  }
}

/* --- 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__dowody, .hero__plyta, .hero__dowody,
  .hero__scrim, .stopka__plyta, .stopka__dowody { 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: none !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%) !important;
  }
  .tresc .kroki li::before { background: none !important; color: #000 !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; }
}