/* =====================================================================
   linphone.pl — MAKIETA PREMIUM
   „ZMIEŃ JEDNO NARAZ — W KAŻDEJ PRÓBIE INNE JEDNO POLE PEŁNE”
   ---------------------------------------------------------------------
   Teza serwisu, jego własnymi słowami: „**Jeśli jednocześnie przełączysz
   transport, kodeki, serwer STUN i urządzenie audio, poprawa nie wskaże
   przyczyny, a pogorszenie będzie trudne do cofnięcia**”; „**Najpierw
   sprawdź rejestrację, potem zestawienie rozmowy, następnie drogę mediów,
   urządzenia audio i dopiero na końcu jakość**”; h2 „**Zacznij od
   właściwego pytania**”.

   Rysunek (zmierzony): cztery rzędy (próby) po cztery równe pola; w każdym
   rzędzie DOKŁADNIE jedno pełne i w każdym INNE — przekątna pełnych.
   Rzędy rozdziela większa przerwa niż kolumny: osobne próby, nie siatka.

   ⚠⚠ TO NIE MACIERZ fritzboxfon.pl (jedno pełne w całości — objaw wskazuje
   warstwę): tu pełne jest W KAŻDYM rzędzie inne, treścią jest przekątna.
   W ozdobnikach trzy próby po trzy pola.

   ⚠⚠ CZEGO TU NIE MA — I DLACZEGO:
   * ŻADNYCH PÓL O MALEJĄCYM WYPEŁNIENIU — internet6g; ŻADNYCH OKIEN —
     internet4g; ŻADNYCH RZĘDÓW Z PRZERWAMI — internetmobilny (tu każde
     pole obecne, różni je wypełnienie); ŻADNYCH NIERÓWNYCH PÓL — pisz.
   * ŻADNEJ SŁUCHAWKI, SUWAKA, PRZEŁĄCZNIKA, MIKROFONU, PTASZKA, KŁÓDKI,
     CZERWIENI — zakazy rodziny TELEFON; bez cyfr i liter (kanon 13).
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: lód jasny #EAF0F5 — sąsiedzi: lód ketrzyna
   #E3EAEE (PV, ciemniejszy), stal jasna doadowania.pl #DDE2E5; najjaśniejsza
   chłodna płyta serii. Brąz #5A3E2A — sąsiedzi: kość internet5g.com.pl
   #5C4636 (szarszy, na winie), terakota doadowania.pl #7A3C20 (czerwieńsza).
   **Brąz na lodzie** to para, której w serii nie ma.

   ⚠ BRYGADA 1918 ma wagi 400 i 700 — waga 500 szkieletu idzie na 400.
   ⚠ ROBOTO 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 {
  --lod:         #EAF0F5;   /* jasna płyta nagłówka i hero — lód jasny, chłodny */
  --lod-cien:    #D6E0E8;   /* ⚠ najciemniejszy punkt jasnej płyty — pismo liczone TAKŻE tu */
  --papier:      #F6F8FA;
  --karta:       #FFFFFF;
  --noc:         #1E2328;   /* pasmo domykające i stopka — noc stalowa */
  --noc-blask:   #374149;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1A1D20;   /* 15.90 / 16.93 / 14.74 na płycie / 12.65 na cieniu */
  --tekst-cichy: #484F55;   /* 7.81 / 8.32 / 7.24 na płycie / 6.21 na cieniu */
  --na-nocy:     #EEF2F5;   /* 14.07 / 9.26 na blasku */
  --na-nocy-cichy: #BCC6CE;   /* 9.13 / 6.01 na blasku */

  /* brąz — TRZY wartości (kanon, punkt 12), policzone skryptem */
  --braz-pismo:  #5A3E2A; /* PISMO — 9.14 / 9.73 / 8.47 na płycie / 7.27 na cieniu */
  --braz-kreska: #7E5C44; /* kreski — 5.63 / 6.00 / 5.22 na płycie / 4.48 na cieniu */
  --braz-jasny:  #E2C6B0; /* na ciemnych płytach — 9.76 / 6.42 na blasku */

  --obwodka:       #6B7178; /* 4.63 / 4.93 / 4.29 na płycie / 3.68 na cieniu */
  --linia-cicha:   #E0E6EB;
  --obwodka-ciemna:#93A1AB; /* 5.98 / 3.93 na blasku */
  /* przyciski: biel na piśmie 9.73, noc na jasnej 9.76 */

  --kroj-naglowek: "Brygada 1918", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Albert Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Roboto 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, 35, 40, .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(--braz-jasny); color: var(--noc); }
:focus-visible { outline: 3px solid var(--braz-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--braz-jasny); }
/* ⚠ NIE „1px + clip” — cel dotykowy 1x1 px, B7 zapala czerwień. */
.omin {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 40;
  display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1.2rem;
  background: var(--braz-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. LÓD 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(--lod); }

/* --- 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__lod {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--lod);
  background-image: linear-gradient(180deg, var(--lod) 0%, var(--lod-cien) 100%);
}
/* wzdłuż dolnej krawędzi: trzy próby po trzy pola, przekątna pełnych;
   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__proby {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--braz-kreska) 0px 12px, transparent 12px 84px),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(126, 92, 68, .3) 16px 28px, transparent 28px 84px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(126, 92, 68, .3) 32px 44px, transparent 44px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, rgba(126, 92, 68, .3) 0px 12px, transparent 12px 84px),
    repeating-linear-gradient(90deg, transparent 0 16px, var(--braz-kreska) 16px 28px, transparent 28px 84px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(126, 92, 68, .3) 32px 44px, transparent 44px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, rgba(126, 92, 68, .3) 0px 12px, transparent 12px 84px),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(126, 92, 68, .3) 16px 28px, transparent 28px 84px),
    repeating-linear-gradient(90deg, transparent 0 32px, var(--braz-kreska) 32px 44px, transparent 44px 84px);
  background-size: 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px;
  background-position: 0 1px, 0 1px, 0 1px, 0 6px, 0 6px, 0 6px, 0 11px, 0 11px, 0 11px;
  background-repeat: repeat-x;
  opacity: .75;
}
/* ⚠ To jest KONTENER nagłówka z HTML generatora — nazwa `naglowek__pas` jest
   zajęta przez HTML, warstwa ozdobna nazywa się `naglowek__proby`. */
.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 próby po trzy pola, przekątna pełnych */
.znak__proby {
  flex: none; width: 34px; height: 18px;
  background-image:
    linear-gradient(90deg, var(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%);
  background-size: 10px 4px, 10px 4px, 10px 4px, 10px 4px, 10px 4px, 10px 4px, 10px 4px, 10px 4px, 10px 4px;
  background-position: left 0px top 0px, left 12px top 0px, left 24px top 0px, left 0px top 7px, left 12px top 7px, left 24px top 7px, left 0px top 14px, left 12px top 14px, left 24px top 14px;
  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(--braz-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(--braz-pismo); }
/* pozycja bieżąca: pod napisem trzy próby po trzy pola, przekątna pełnych
   (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(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%);
  background-size: 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px;
  background-position: left 0px top 0px, left 12px top 0px, left 24px top 0px, left 0px top 4px, left 12px top 4px, left 24px top 4px, left 0px top 8px, left 12px top 8px, left 24px top 8px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — zmień jedno naraz ------------------------------------ */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--lod);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__lod {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--lod);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--lod-cien) 0%, rgba(214, 224, 232, 0) 66%),
    linear-gradient(170deg, var(--lod) 0%, var(--lod-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__proby {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (cztery próby po cztery pola), obok
     kolumny (1320–1920 px), nie pod nią.
     ⚠⚠ Obcięcie kolumny albo rzędu złamałoby przekątną — a przekątna jest
     treścią. Kadr ciasny (3,3 ≥ 2,0). */
  inset-block-start: 54%; inset-inline-end: 2%;
  width: clamp(26rem, 30vw, 38rem); aspect-ratio: 430 / 130;
  transform: translateY(-50%);
  color: var(--braz-pismo); opacity: .38;
}
.hero__proby 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(--lod) 0%, rgba(234, 240, 245, .94) 30%, rgba(234, 240, 245, .2) 50%, rgba(234, 240, 245, 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__proby {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(234, 240, 245, 0) 0%, rgba(234, 240, 245, 0) 22%, rgba(234, 240, 245, .9) 40%, rgba(234, 240, 245, .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 próby po trzy pola, przekątna pełnych — 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(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%);
  background-size: 52px 8px, 52px 8px, 52px 8px, 52px 8px, 52px 8px, 52px 8px, 52px 8px, 52px 8px, 52px 8px;
  background-position: left 0px top 0px, left 62px top 0px, left 124px top 0px, left 0px top 13px, left 62px top 13px, left 124px top 13px, left 0px top 26px, left 62px top 26px, left 124px top 26px;
  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(--braz-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(--braz-jasny); height: 2px; opacity: .8; }
/* ⚠⚠ KANON 2: TYLKO BEZPOŚREDNIE DZIECI KONTENERA */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p  { color: var(--na-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(--braz-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--braz-jasny); text-decoration-color: var(--braz-jasny); }
.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 próbami po trzy pola z przekątną pełnych.
   ⚠ 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(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%);
  background-size: 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px, 10px 2px;
  background-position: left 0px bottom 0px, left 12px bottom 0px, left 24px bottom 0px, left 0px bottom 4px, left 12px bottom 4px, left 24px bottom 4px, left 0px bottom 8px, left 12px bottom 8px, left 24px bottom 8px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .76rem; letter-spacing: -.01em;
  color: var(--braz-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--braz-jasny);
  background-image:
    linear-gradient(90deg, var(--braz-jasny) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, var(--braz-jasny) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, var(--braz-jasny) 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(--braz-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--braz-pismo);
  text-decoration-line: underline; text-decoration-color: var(--braz-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
   jednym zmienionym polem.
   WYLICZENIE to rzeczy do sprawdzenia — trzy próby z przekątną pełnych:
   pozycja wykazu to jedna rzecz zmieniana naraz.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   ⚠ Pismo w pudełku to --karta na --braz-pismo; na ciemnym paśmie
   pudełko odwraca się na --braz-jasny 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(--braz-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(--braz-jasny); 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 próby po trzy pola, przekątna pełnych.
   ⚠ Dziewięć 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: 22px; height: 11px;
  background-image:
    linear-gradient(90deg, var(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%);
  background-size: 6px 2px, 6px 2px, 6px 2px, 6px 2px, 6px 2px, 6px 2px, 6px 2px, 6px 2px, 6px 2px;
  background-position: left 0px top 0px, left 8px top 0px, left 16px top 0px, left 0px top 4px, left 8px top 4px, left 16px top 4px, left 0px top 8px, left 8px top 8px, left 16px top 8px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--braz-jasny) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, var(--braz-jasny) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, var(--braz-jasny) 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(--braz-pismo);
  text-decoration-line: underline; text-decoration-color: var(--braz-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(--braz-jasny); text-decoration-color: var(--braz-jasny);
}

.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(--braz-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(238, 242, 245, .07);
  color: var(--na-nocy-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--braz-jasny);
}

/* --- 9. ODSYŁACZ KIERUNKOWY ----------------------------------------- */
/* ⚠ B7: samodzielny odsyłacz jest celem UI — min. 44 px. */
.tresc .przejscie { margin-block: 1.7em 0; }
.tresc .przejscie + .przejscie { margin-block-start: .7em; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 50px; padding: .5em 1.3em;
  background: var(--karta); border: 1px solid var(--obwodka);
  border-radius: var(--promien-karta);
  color: var(--tekst); text-decoration: none; font-weight: 600; font-size: .99rem;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.tresc .przejscie a::after { content: "→"; font-size: 1.04em; line-height: 1; transition: transform .22s ease; }
.tresc .przejscie a:hover { background: var(--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(--braz-jasny); color: var(--na-nocy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--braz-jasny); border-color: var(--braz-jasny); 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(--braz-pismo); color: var(--karta);
  border: 2px solid var(--braz-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(--braz-jasny); color: var(--noc); border-color: var(--braz-jasny);
}
.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 — TRZY PRÓBY 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 próby po trzy pola, przekątna pełnych */
.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(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
    linear-gradient(90deg, var(--braz-kreska) 0 100%);
  background-size: 14px 2px, 14px 2px, 14px 2px, 14px 2px, 14px 2px, 14px 2px, 14px 2px, 14px 2px, 14px 2px;
  background-position: left 0px top 0px, left 18px top 0px, left 36px top 0px, left 0px top 5px, left 18px top 5px, left 36px top 5px, left 0px top 10px, left 18px top 10px, left 36px top 10px;
  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(--braz-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(--braz-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(--braz-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--braz-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(--braz-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--braz-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(55, 65, 73, 0) 64%),
    linear-gradient(180deg, var(--noc-blask) 0%, var(--noc) 58%);
}
/* ten sam pas co w nagłówku */
.stopka__proby {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--braz-jasny) 0px 12px, transparent 12px 84px),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(226, 198, 176, .3) 16px 28px, transparent 28px 84px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(226, 198, 176, .3) 32px 44px, transparent 44px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, rgba(226, 198, 176, .3) 0px 12px, transparent 12px 84px),
    repeating-linear-gradient(90deg, transparent 0 16px, var(--braz-jasny) 16px 28px, transparent 28px 84px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(226, 198, 176, .3) 32px 44px, transparent 44px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, rgba(226, 198, 176, .3) 0px 12px, transparent 12px 84px),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(226, 198, 176, .3) 16px 28px, transparent 28px 84px),
    repeating-linear-gradient(90deg, transparent 0 32px, var(--braz-jasny) 32px 44px, transparent 44px 84px);
  background-size: 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px, 100% 3px;
  background-position: 0 1px, 0 1px, 0 1px, 0 6px, 0 6px, 0 6px, 0 11px, 0 11px, 0 11px;
  background-repeat: repeat-x;
  opacity: .7;
}
.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 próby po trzy pola, przekątna pełnych */
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 20px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--braz-jasny) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, var(--braz-jasny) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
    linear-gradient(90deg, var(--braz-jasny) 0 100%);
  background-size: 24px 4px, 24px 4px, 24px 4px, 24px 4px, 24px 4px, 24px 4px, 24px 4px, 24px 4px, 24px 4px;
  background-position: left 0px top 0px, left 28px top 0px, left 56px top 0px, left 0px top 8px, left 28px top 8px, left 56px top 8px, left 0px top 16px, left 28px top 16px, left 56px top 16px;

  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(--braz-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — TRZY PRÓBY 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 próby jedna pod drugą, w każdej trzy pola, przekątna pełnych */
  .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(--braz-kreska) 0 100%),
      linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
      linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
      linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
      linear-gradient(90deg, var(--braz-kreska) 0 100%),
      linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
      linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
      linear-gradient(90deg, rgba(126, 92, 68, .3) 0 100%),
      linear-gradient(90deg, var(--braz-kreska) 0 100%);
    background-size: 6px 8px, 6px 8px, 6px 8px, 6px 8px, 6px 8px, 6px 8px, 6px 8px, 6px 8px, 6px 8px;
    background-position: left 0px top 0px, left 8px top 0px, left 16px top 0px, left 0px top 14px, left 8px top 14px, left 16px top 14px, left 0px top 28px, left 8px top 28px, left 16px top 28px;
    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(--braz-jasny) 0 100%),
      linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
      linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
      linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
      linear-gradient(90deg, var(--braz-jasny) 0 100%),
      linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
      linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
      linear-gradient(90deg, rgba(226, 198, 176, .3) 0 100%),
      linear-gradient(90deg, var(--braz-jasny) 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__lod, .naglowek__proby, .hero__lod, .hero__proby,
  .hero__zanik, .stopka__plyta, .stopka__proby { 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%) !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%) !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%) !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%) !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; }
}