/* =====================================================================
   internet6g.pl — MAKIETA PREMIUM
   „RZĄD ETAPÓW O MALEJĄCYM WYPEŁNIENIU — DZIŚ USTALONE JEST TYLKO TO,
   CO PEŁNE”
   ---------------------------------------------------------------------
   Teza serwisu, jego własnymi słowami: h1 „**Internet 6G zaczyna się dziś
   od czytania statusu, nie od kupowania zasięgu**”; „**Przejście między
   poziomami wymaga nowych dowodów, nie mocniejszego przymiotnika**”;
   „**Studium może prowadzić do specyfikacji, ale jeszcze nią nie jest**”;
   h2 „**Najpierw nazwij rodzaj dowodu**”.

   Rysunek (zmierzony): pięć równych pól w rzędzie — etapy od ramy do
   zasięgu. Wypełnienie to STATUS dziś: pierwsze pełne, dalej coraz mniej,
   ostatnie puste i blade. Czytanie statusu = czytanie wypełnienia.

   ⚠⚠ POLA RÓWNE I OSOBNE, WYPEŁNIENIE MALEJE MONOTONICZNIE od lewej,
   wewnątrz obrysu z marginesem. W ozdobnikach trzy pola: pełne,
   w połowie, puste.

   ⚠⚠ CZEGO TU NIE MA — I DLACZEGO:
   * ŻADNYCH NIERÓWNYCH PÓL W JEDNYM OBRYSIE — pisz (bez porządku, różne
     dokumenty); tu pola równe, osobne, wypełnienie w jednym kierunku.
   * ŻADNYCH RÓL ZE ZNAKAMI — dellmont; ŻADNEJ MACIERZY — fritzboxfon;
     ŻADNYCH OKIEN Z RÓWNYM ZNAKIEM — internet4g (tam położenie, tu ILOŚĆ);
     ŻADNEGO PASA PEŁNY/ZAŁOŻONY — karpacz; ŻADNYCH SCHODÓW — hokiwa.
   * ŻADNEJ ANTENY, FAL, GLOBUSA, KALENDARZA, STRZAŁKI, CYFR, CZERWIENI —
     zakazy rodziny TELEFON; bez liter (kanon 13).
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: pergamin #F0EBDC stoi między słomą #EDE8C8,
   piaskiem #EFEAE1 i kredą #EEEDE4 — jasne płyty wyczerpane, różnica
   drobna. Oliwka #4E5218 — sąsiedzi: oliwka panele.warszawa.pl #5A5A14
   (PV, ciemna płyta), limonka blada contactcenter (jasna, na graficie);
   tu ciemna oliwka jako PISMO na pergaminie. **Oliwka na pergaminie**
   to para, której w rodzinie nie ma.

   ⚠ FRANK RUHL LIBRE ma wagi 400 i 700 — waga 500 szkieletu idzie na 400.
   ⚠ XANH MONO w wadze 400.

   ⚠ SZKIELET przeniesiony z aquadvantage.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 {
  --pergamin:      #F0EBDC;   /* jasna płyta nagłówka i hero — pergamin, ciepły */
  --pergamin-cien: #DED6C2;   /* ⚠ najciemniejszy punkt jasnej płyty — pismo liczone TAKŻE tu */
  --papier:      #F9F7F0;
  --karta:       #FFFFFF;
  --noc:         #1E1F14;   /* pasmo domykające i stopka — noc oliwkowa */
  --noc-blask:   #3A3C28;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1B1B14;   /* 16.14 / 17.31 / 14.52 na płycie / 11.95 na cieniu */
  --tekst-cichy: #4B4B40;   /* 8.23 / 8.82 / 7.41 na płycie / 6.09 na cieniu */
  --na-nocy:     #F1F0E6;   /* 14.55 / 9.88 na blasku */
  --na-nocy-cichy: #C3C2AE;   /* 9.24 / 6.27 na blasku */

  /* oliwka ciemna — TRZY wartości (kanon, punkt 12), policzone skryptem */
  --oliwka-pismo:  #4E5218; /* PISMO — 7.70 / 8.25 / 6.93 na płycie / 5.70 na cieniu */
  --oliwka-kreska: #6E7422; /* kreski — 4.68 / 5.02 / 4.21 na płycie / 3.47 na cieniu */
  --oliwka-jasna:  #D5DA86; /* na ciemnych płytach — 11.26 / 7.65 na blasku */

  --obwodka:       #6D6C60; /* 4.94 / 5.30 / 4.45 na płycie / 3.66 na cieniu */
  --linia-cicha:   #E5E1D6;
  --obwodka-ciemna:#94957E; /* 5.44 / 3.69 na blasku */
  /* przyciski: biel na piśmie 8.25, noc na jasnej 11.26 */

  --kroj-naglowek: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Radio Canada", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Xanh Mono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;

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

  --promien:       2px;
  --promien-karta: 3px;
  --cien-karta: 0 16px 34px -28px rgba(30, 31, 20, .42);
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* B13 warunek 1 i 2 */
  font-size: clamp(1rem, .9rem + .3vw, 1.34rem);
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
}
body {
  margin: 0; background: var(--papier); color: var(--tekst);
  font-family: var(--kroj-tekst); font-size: 1rem; line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
::selection { background: var(--oliwka-jasna); color: var(--noc); }
:focus-visible { outline: 3px solid var(--oliwka-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--oliwka-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(--oliwka-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. PERGAMIN I PAPIER ---------------------------------------- */
/* ⚠ Nagłówek i hero są JASNE, więc pismo w nich jest CIEMNE. */
.naglowek, .hero { position: relative; isolation: isolate; color: var(--tekst); }
.naglowek { background: var(--pergamin); }

/* --- 3. KONTENER ----------------------------------------------------- */
.kontener {
  width: 100%; max-width: calc(var(--kolumna-szeroka) + 2 * var(--margines));
  margin-inline: auto; padding-inline: var(--margines);
}
.pasmo > .kontener > *  { max-width: var(--kolumna);      margin-inline: auto; }
.hero__kontener > *     { max-width: var(--kolumna-hero); margin-inline: auto; }
/* ⚠ KANON 10b: karty biorą szerszą miarę SAME — nie ma opakowania listy. */
.pasmo > .kontener > .zapowiedz    { max-width: var(--kolumna-szeroka); }
.pasmo > .kontener > .lista-wpisow { max-width: var(--kolumna-szeroka); }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek__pergamin {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--pergamin);
  background-image: linear-gradient(180deg, var(--pergamin) 0%, var(--pergamin-cien) 100%);
}
/* wzdłuż dolnej krawędzi: trzy pola etapów — pełne, w połowie, puste;
   okres 84 px.
   ⚠⚠ NAZWA WARSTWY NIE MOŻE BRZMIEĆ `naglowek__pas` — tak nazywa się
   KONTENER nagłówka w HTML generatora (`.kontener.naglowek__pas`); 6.09
   kolizja nazw rozsypała nagłówek (kontener stał się 13-pikselowym paskiem). */
.naglowek__etapy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--oliwka-kreska) 0px 16px, transparent 16px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--oliwka-kreska) 24px 40px, transparent 40px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--oliwka-kreska) 24px 40px, transparent 40px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--oliwka-kreska) 24px 26px, transparent 26px 84px),
    repeating-linear-gradient(90deg, transparent 0 38px, var(--oliwka-kreska) 38px 40px, transparent 40px 84px),
    repeating-linear-gradient(90deg, transparent 0 27px, var(--oliwka-kreska) 27px 37px, transparent 37px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--oliwka-kreska) 48px 64px, transparent 64px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--oliwka-kreska) 48px 64px, transparent 64px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--oliwka-kreska) 48px 50px, transparent 50px 84px),
    repeating-linear-gradient(90deg, transparent 0 62px, var(--oliwka-kreska) 62px 64px, transparent 64px 84px);
  background-size: 100% 13px, 100% 2px, 100% 2px, 100% 13px, 100% 13px, 100% 5px, 100% 2px, 100% 2px, 100% 13px, 100% 13px;
  background-position: 0 1px, 0 1px, 0 12px, 0 1px, 0 1px, 0 6px, 0 1px, 0 12px, 0 1px, 0 1px;
  background-repeat: repeat-x;
  opacity: .6;
}
/* ⚠ To jest KONTENER nagłówka z HTML generatora — nazwa `naglowek__pas` jest
   zajęta przez HTML, warstwa ozdobna nazywa się `naglowek__etapy`. */
.naglowek__pas {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem clamp(1rem, 3vw, 2.6rem); justify-content: space-between;
  padding-block: clamp(.9rem, .6rem + .8vw, 1.5rem) clamp(1.2rem, .9rem + .9vw, 1.9rem);
}
.znak { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--tekst); text-decoration: none; }
/* znak rozpoznawczy: trzy pola etapów — pełne, w połowie, puste */
.znak__etapy {
  flex: none; width: 36px; height: 18px;
  background-image:
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%);
  background-size: 10px 16px, 10px 2px, 10px 2px, 2px 16px, 2px 16px, 4px 5px, 10px 2px, 10px 2px, 2px 16px, 2px 16px;
  background-position: left 0px top 1px, left 13px top 1px, left 13px top 15px, left 13px top 1px, left 21px top 1px, left 16px top 9px, left 26px top 1px, left 26px top 15px, left 26px top 1px, left 34px top 1px;
  background-repeat: no-repeat;
}
.znak__slowo {
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.08rem, .96rem + .46vw, 1.4rem); letter-spacing: -.01em;
}
.znak:hover .znak__slowo { color: var(--oliwka-pismo); }

.menu { min-width: 0; }
.menu__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(.2rem, 1vw, 1.1rem); margin: 0; padding: 0; list-style: none; }
.menu__link {
  position: relative; display: inline-flex; align-items: center; min-height: 46px;  /* B7 */
  padding-inline: .5em;
  color: var(--tekst-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .78rem; letter-spacing: -.01em;
}
.menu__link:hover { color: var(--oliwka-pismo); }
/* pozycja bieżąca: pod napisem trzy pola etapów (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(--tekst); font-weight: 600; }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 5px;
  inset-inline-start: calc(.5em + 2px); inset-inline-end: calc(.5em + 2px);
  height: 11px;
  background-image:
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%);
  background-size: 12px 11px, 12px 2px, 12px 2px, 2px 11px, 2px 11px, 6px 2px, 12px 2px, 12px 2px, 2px 11px, 2px 11px;
  background-position: left 0px top 0px, left 16px top 0px, left 16px top 9px, left 16px top 0px, left 26px top 0px, left 19px top 6px, left 32px top 0px, left 32px top 9px, left 32px top 0px, left 42px top 0px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — rząd etapów o malejącym wypełnieniu ------------------ */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--pergamin);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__pergamin {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--pergamin);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--pergamin-cien) 0%, rgba(222, 214, 194, 0) 66%),
    linear-gradient(170deg, var(--pergamin) 0%, var(--pergamin-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__etapy {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (wszystkie pięć pól, od pełnego do
     pustego), obok kolumny (1320–1920 px), nie pod nią.
     ⚠⚠ Obcięcie z prawej zabrałoby puste pole — a bez niego rząd wygląda na
     „prawie gotowy”, czyli dokładnie na to, czemu serwis zaprzecza. */
  inset-block-start: 54%; inset-inline-end: 2%;
  width: clamp(26rem, 30vw, 38rem); aspect-ratio: 430 / 130;
  transform: translateY(-50%);
  color: var(--oliwka-pismo); opacity: .38;
}
.hero__etapy svg { width: 100%; height: 100%; }
/* zanik od lewej — w jasnym rejestrze warstwa jest JASNA. Rysunek stoi
   po prawej w całości, więc zanik chroni tylko kolumnę tekstu. */
.hero__zanik {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    var(--pergamin) 0%, rgba(240, 235, 220, .94) 30%, rgba(240, 235, 220, .2) 50%, rgba(240, 235, 220, 0) 100%);
}
.hero__kontener { position: relative; z-index: 3; }
/* ⚠ EKRANY DO 1319 px: rysunek dostaje WŁASNE MIEJSCE nad tytułem (kontener
   dostaje górne dopełnienie równe wysokości rysunku), a zanik zaczyna się
   dopiero pod nim — z boku wchodziłby pod akapit. */
@media (max-width: 1319px) {
  .hero__kontener { padding-block-start: clamp(6rem, 26vw, 12rem); }
  .hero__etapy {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(240, 235, 220, 0) 0%, rgba(240, 235, 220, 0) 22%, rgba(240, 235, 220, .9) 40%, rgba(240, 235, 220, .9) 100%);
  }
}

/* ⚠ Tu barwa tytułu jest ta sama w hero i poza nim, bo hero JEST jasne —
   ale reguła zostaje jawna, żeby specimen.html też był poprawny
   (kanon, punkt 4). */
.tytul {
  margin: 0 0 clamp(.9rem, .6rem + .8vw, 1.5rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2rem, 1.26rem + 2.9vw, 3.8rem);
  line-height: 1.12; letter-spacing: -.018em;
  color: var(--tekst); text-wrap: balance;
}
.hero .tytul { color: var(--tekst); }
/* nad tytułem: trzy pola etapów — pełne, w połowie, puste — największa
   skala w arkuszu, dziesięć 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(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%);
  background-size: 52px 34px, 52px 3px, 52px 3px, 3px 34px, 3px 34px, 44px 13px, 52px 3px, 52px 3px, 3px 34px, 3px 34px;
  background-position: left 0px top 0px, left 62px top 0px, left 62px top 31px, left 62px top 0px, left 111px top 0px, left 66px top 17px, left 124px top 0px, left 124px top 31px, left 124px top 0px, left 173px top 0px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--tekst);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--tekst-cichy); }
/* ⚠⚠ KANON 3c i 3d: swoistość (0-3-1), ale TYLKO proza — nie pigułka odsyłacza. */
.tresc .hero p:not(.przejscie) a:not(.przycisk) { color: var(--oliwka-pismo); }

/* --- 6. PASMA TREŚCI ------------------------------------------------- */
.tresc { display: block; counter-reset: pasmo; }
.pasmo {
  position: relative; counter-increment: pasmo;
  padding-block: clamp(2.2rem, 1.5rem + 2.4vw, 4.2rem);
  background: var(--papier);
}
.pasmo:nth-of-type(even) { background: var(--karta); }
.pasmo + .pasmo::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 1px; background: var(--linia-cicha);
}
/* ⚠⚠ KANON 1 i 3 */
.pasmo:last-of-type:not(:nth-of-type(1)) {
  background-color: var(--noc);
  background-image: linear-gradient(180deg, var(--noc-blask) 0%, var(--noc) 62%);
  color: var(--na-nocy);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--oliwka-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-nocy-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-nocy); }
/* ⚠⚠ 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-nocy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-nocy-cichy); border-inline-start-color: var(--oliwka-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--oliwka-jasna); text-decoration-color: var(--oliwka-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-nocy); }

/* --- 7. TYPOGRAFIA TREŚCI ------------------------------------------- */
.tresc h2 {
  margin: 0 0 clamp(.7rem, .5rem + .5vw, 1.1rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.08vw, 2.16rem);
  line-height: 1.2; letter-spacing: -.016em;
  color: var(--tekst); text-wrap: balance;
}
/* numer sekcji STOI NAD trzema polami etapów — pełne, w połowie, puste.
   ⚠ Pudełko ma stałą wysokość w px u dołu (padding 12 px), więc przesunięcia
   ozdobnika w px, składnią `left … bottom …`. */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  /* ⚠ `flex` (blokowy), nie `inline-flex`: inline stawał w jednym wierszu
     z pierwszym słowem tytułu (zmierzone 6.09). */
  display: flex; width: max-content; align-items: flex-start; justify-content: flex-start;
  min-width: 4.2rem; height: 2rem; margin-block-end: .6rem; padding-block-end: 12px;
  background-image:
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%);
  background-size: 12px 11px, 12px 2px, 12px 2px, 2px 11px, 2px 11px, 6px 2px, 12px 2px, 12px 2px, 2px 11px, 2px 11px;
  background-position: left 0px bottom 0px, left 16px bottom 0px, left 16px bottom 9px, left 16px bottom 0px, left 26px bottom 0px, left 19px bottom 3px, left 32px bottom 0px, left 32px bottom 9px, left 32px bottom 0px, left 42px bottom 0px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .76rem; letter-spacing: -.01em;
  color: var(--oliwka-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--oliwka-jasna);
  background-image:
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-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.08rem, .98rem + .4vw, 1.32rem); line-height: 1.34; color: var(--tekst);
}
.tresc p { margin: 0 0 1.1em; }
.tresc p:last-child { margin-block-end: 0; }
.wprowadzenie { font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); line-height: 1.66; }
.zajawka {
  margin: 0 0 1.3em; padding-inline-start: 1.1rem;
  border-inline-start: 4px solid var(--oliwka-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--oliwka-pismo);
  text-decoration-line: underline; text-decoration-color: var(--oliwka-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
   etapem pełnym.
   WYLICZENIE to rzeczy do sprawdzenia — trzy pola etapów o malejącym
   wypełnieniu: pozycja wykazu to pytanie „jaki jest status?”.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   ⚠ Pismo w pudełku to --karta na --oliwka-pismo; na ciemnym paśmie
   pudełko odwraca się na --oliwka-jasna z pismem --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
   element `<a>`, nie `<li>`, więc padding listy go NIE ratuje. Zmierzone
   4.09→5.09 na tej domenie: `<a>` „Czy ten dokument trzeba drukować?”
   259 × 20 px przy progu 44.
   ⚠ `display: inline-block`, NIE `inline-flex`: flex nie zawija tekstu,
   więc długi tytuł wyszedłby za krawędź i zapalił B5 (brak przewijania
   w poziomie 360–1920). */
.tresc .kroki li > a { display: inline-block; min-height: 44px; padding-block: .7rem; }
.tresc .kroki li::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: .5em;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 1.7rem; padding-inline: .4rem;
  background: var(--oliwka-pismo); color: var(--karta);
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li { border-block-end-color: var(--obwodka-ciemna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li::before {
  background: var(--oliwka-jasna); color: var(--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 pola etapów — pełne, w połowie, puste.
   ⚠ Dziesięć warstw; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c).
   ⚠ Wariantów `nth-child` tu NIE MA — pozycje wykazu są równorzędne. */
.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(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%);
  background-size: 7px 11px, 7px 2px, 7px 2px, 2px 11px, 2px 11px, 1px 2px, 7px 2px, 7px 2px, 2px 11px, 2px 11px;
  background-position: left 0px top 0px, left 9px top 0px, left 9px top 9px, left 9px top 0px, left 14px top 0px, left 12px top 6px, left 18px top 0px, left 18px top 9px, left 18px top 0px, left 23px top 0px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%);
}

/* ⚠⚠ KANON 9c: odsyłacz w wykazie nie jest objęty regułami prozy (te celują
   w `<a>` wewnątrz `<p>`), więc bez własnej reguły dostaje DOMYŚLNY BŁĘKIT
   przeglądarki. Tutaj hero jest JASNE, więc bramka B6 by przeszła — ale to
   i tak barwa spoza projektu, a ten serwis MA w hero spis treści
   („Wybierz pytanie, które blokuje decyzję”), więc reguła jest konieczna. */
.tresc .wyliczenie li a:not(.przycisk),
.tresc .kroki li a:not(.przycisk) {
  color: var(--oliwka-pismo);
  text-decoration-line: underline; text-decoration-color: var(--oliwka-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc .wyliczenie li a:not(.przycisk):hover,
.tresc .kroki li a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }
/* w ciemnym paśmie domykającym — barwa jasna */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li a:not(.przycisk),
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li a:not(.przycisk) {
  color: var(--oliwka-jasna); text-decoration-color: var(--oliwka-jasna);
}

.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(--oliwka-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(241, 240, 230, .07);
  color: var(--na-nocy-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--oliwka-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(--noc); border-color: var(--noc); color: var(--na-nocy); }
.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(--oliwka-jasna); color: var(--na-nocy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--oliwka-jasna); border-color: var(--oliwka-jasna); color: var(--noc); }

/* --- 10. POLE WEZWANIA I PRZYCISK ----------------------------------- */
.tresc .cta { margin-block: clamp(1.7rem, 1.2rem + 1.3vw, 2.7rem) 1.7em; }  /* KANON 7 (P-1) */
/* ⚠⚠ KANON 5: swoistość musi dorównać `.tresc .przejscie a` (0-2-1). */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 56px; padding: .85rem 1.9rem;
  background: var(--oliwka-pismo); color: var(--karta);
  border: 2px solid var(--oliwka-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(--noc); border-color: var(--noc);
}
/* ⚠ pułapka „.tresc p a bije .przycisk” */
.tresc p a.przycisk { color: var(--karta); text-decoration: none; }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk {
  background: var(--oliwka-jasna); color: var(--noc); border-color: var(--oliwka-jasna);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-nocy); border-color: var(--na-nocy);
}

/* --- 11. KARTY KATALOGU — POLA ETAPÓW NA GÓRNEJ KRAWĘDZI ------------ */
.lista-wpisow {
  margin: clamp(1.6rem, 1.1rem + 1.4vw, 2.8rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.7rem); counter-reset: wpis;
}
@media (min-width: 900px)  { .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zapowiedz {
  counter-increment: wpis; position: relative; display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem) clamp(1.2rem, .9rem + 1vw, 1.8rem) clamp(1.2rem, .9rem + 1vw, 1.8rem);
  background: var(--karta); border: 1px solid var(--obwodka);
  border-radius: var(--promien-karta); box-shadow: var(--cien-karta);
}
.pasmo:nth-of-type(even) .zapowiedz { background: var(--papier); }
/* na górnej krawędzi karty: trzy pola etapów — pełne, w połowie, puste */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 3.4rem; height: 12px;
  background-image:
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
    linear-gradient(90deg, var(--oliwka-kreska) 0 100%);
  background-size: 14px 12px, 14px 2px, 14px 2px, 2px 12px, 2px 12px, 8px 3px, 14px 2px, 14px 2px, 2px 12px, 2px 12px;
  background-position: left 0px top 0px, left 18px top 0px, left 18px top 10px, left 18px top 0px, left 30px top 0px, left 21px top 6px, left 36px top 0px, left 36px top 10px, left 36px top 0px, left 48px 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: .74rem; color: var(--oliwka-pismo);
}
/* ⚠⚠ KANON 6: tytuł karty JEST h2 — cofamy reguły „.tresc h2” tym samym
   prefiksem, RAZEM Z OZDOBNIKIEM NUMERU (background, min-width, height,
   padding, display: inline-flex). */
.tresc .zapowiedz__tytul {
  margin: .3rem 2.4rem .5rem 0; padding: 0; border: 0;
  width: auto; min-width: 0; height: auto; background: none; max-width: none; display: block;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.06rem, .98rem + .4vw, 1.3rem); line-height: 1.3; letter-spacing: -.012em;
  color: var(--tekst);
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
/* ⚠ „.tresc li a” (0-1-2) bije „.zapowiedz__tytul a” (0-1-1). */
.tresc .zapowiedz__tytul a { display: block; min-height: 44px; color: var(--tekst); text-decoration: none; }
.tresc .zapowiedz__tytul a:hover { color: var(--oliwka-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(--oliwka-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--oliwka-kreska);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--tekst); border-block-end-color: var(--tekst); }
/* ⚠ `.zapowiedz__wiecej` ma OBIE klasy naraz (`zapowiedz__wiecej przejscie`). */
.tresc .zapowiedz .przejscie a {
  background: none; border: 0; border-block-end: 2px solid var(--oliwka-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--oliwka-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(--noc); color: var(--na-nocy);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--noc-blask) 0%, rgba(58, 60, 40, 0) 64%),
    linear-gradient(180deg, var(--noc-blask) 0%, var(--noc) 58%);
}
/* ten sam pas co w nagłówku */
.stopka__etapy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--oliwka-jasna) 0px 16px, transparent 16px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--oliwka-jasna) 24px 40px, transparent 40px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--oliwka-jasna) 24px 40px, transparent 40px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--oliwka-jasna) 24px 26px, transparent 26px 84px),
    repeating-linear-gradient(90deg, transparent 0 38px, var(--oliwka-jasna) 38px 40px, transparent 40px 84px),
    repeating-linear-gradient(90deg, transparent 0 27px, var(--oliwka-jasna) 27px 37px, transparent 37px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--oliwka-jasna) 48px 64px, transparent 64px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--oliwka-jasna) 48px 64px, transparent 64px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--oliwka-jasna) 48px 50px, transparent 50px 84px),
    repeating-linear-gradient(90deg, transparent 0 62px, var(--oliwka-jasna) 62px 64px, transparent 64px 84px);
  background-size: 100% 13px, 100% 2px, 100% 2px, 100% 13px, 100% 13px, 100% 5px, 100% 2px, 100% 2px, 100% 13px, 100% 13px;
  background-position: 0 1px, 0 1px, 0 12px, 0 1px, 0 1px, 0 6px, 0 1px, 0 12px, 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.04rem, .96rem + .4vw, 1.3rem); color: var(--na-nocy);
}
/* pod znakiem stopki: trzy pola etapów — pełne, w połowie, puste */
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 22px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
    linear-gradient(90deg, var(--oliwka-jasna) 0 100%);
  background-size: 24px 22px, 24px 2px, 24px 2px, 2px 22px, 2px 22px, 18px 8px, 24px 2px, 24px 2px, 2px 22px, 2px 22px;
  background-position: left 0px top 0px, left 28px top 0px, left 28px top 20px, left 28px top 0px, left 50px top 0px, left 31px top 11px, left 56px top 0px, left 56px top 20px, left 56px top 0px, left 78px 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-nocy-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--oliwka-jasna); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — POLA ETAPÓW 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;
  }
  .pasmo > .kontener > h2::before { margin-inline-start: auto; }
  .pasmo > .kontener > h2 + * { margin-block-start: 0; }
  /* ⚠⚠ KANON 8 (P-17) */
  .pasmo > .kontener > h3 { margin-block: clamp(1.9rem, 1.2rem + 1.4vw, 2.7rem) 0; }
  .pasmo > .kontener > h3 + * { margin-block-start: .5rem; }
  /* ⚠ KANON 10b: karty biorą szerszy tor SAME, bo nie ma opakowania listy. */
  .pasmo > .kontener > .zapowiedz    { grid-column: proza-start / pelna-end; max-width: none; }
  .pasmo > .kontener > .lista-wpisow { grid-column: proza-start / pelna-end; max-width: none; }
  .hero__kontener > .tytul { grid-column: proza; }

  /* trzy pola jedno pod drugim: pełne u góry, w połowie, puste u dołu */
  .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(--oliwka-kreska) 0 100%),
      linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
      linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
      linear-gradient(180deg, var(--oliwka-kreska) 0 100%),
      linear-gradient(180deg, var(--oliwka-kreska) 0 100%),
      linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
      linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
      linear-gradient(90deg, var(--oliwka-kreska) 0 100%),
      linear-gradient(180deg, var(--oliwka-kreska) 0 100%),
      linear-gradient(180deg, var(--oliwka-kreska) 0 100%);
    background-size: 18px 14px, 18px 2px, 18px 2px, 2px 14px, 2px 14px, 12px 5px, 18px 2px, 18px 2px, 2px 14px, 2px 14px;
    background-position: left 0px top 0px, left 0px top 20px, left 0px top 32px, left 0px top 20px, left 16px top 20px, left 3px top 26px, left 0px top 40px, left 0px top 52px, left 0px top 40px, left 16px top 40px;
    background-repeat: no-repeat;
    opacity: .45;
    -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
  }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%),
      linear-gradient(90deg, var(--oliwka-jasna) 0 100%);
    opacity: .55;
  }
}

/* --- 14. ARKUSZ SYSTEMU (specimen.html — dokument warsztatowy) ------ */
.próbki { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.próbka__pole { display: block; height: 3.2rem; border: 1px solid var(--obwodka); }
.próbka__opis { display: block; font-family: var(--kroj-maszyna); font-size: .78rem; color: var(--tekst-cichy); padding-block-start: .35em; }

/* --- 15. RUCH I DRUK ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media print {
  .naglowek__pergamin, .naglowek__etapy, .hero__pergamin, .hero__etapy,
  .hero__zanik, .stopka__plyta, .stopka__etapy { display: none !important; }
  html { font-size: 11pt; }
  body, .naglowek, .hero, .stopka, .pasmo, .pasmo:nth-of-type(even),
  .pasmo:last-of-type:not(:nth-of-type(1)) { background: #fff !important; color: #000 !important; }
  .tytul, .hero .tytul, .tresc h2, .tresc h3, .znak__slowo, .stopka__znak,
  .hero p, .stopka__menu a, .menu__link { color: #000 !important; }
  .tresc .hero p:not(.przejscie) a:not(.przycisk) { color: #000 !important; }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo { color: #000 !important; border-inline-start-color: #000 !important; }
  .pasmo > .kontener > h2::before { color: #000 !important; border-color: #000 !important; }
  .tresc .kroki li::before { background: none !important; color: #000 !important; border-color: #000 !important; }
  .tresc .wyliczenie li::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .zapowiedz::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;
  }
  .stopka__znak::after {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .pasmo > .kontener > h2::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .zapowiedz::after { color: #000 !important; }
  a.przycisk { background: none !important; color: #000 !important; border-color: #000 !important; }
  .pasmo > .kontener > *, .hero__kontener > * { max-width: none; }
  .pasmo > .kontener::after { display: none; }
}