/* =====================================================================
   betamax.pl — MAKIETA PREMIUM
   „STOS WARSTW PRZEŁĄCZANYCH PO JEDNEJ — MOŻLIWOŚĆ POWROTU ZNIKA OSTATNIA”
   ---------------------------------------------------------------------
   Metafora z RODZINA-TELEFON.md (6.09). Teza serwisu, jego własnymi
   słowami: h2 „**Przełączaj jedną warstwę naraz**”; h2 „**Obserwuj, zanim
   wycofasz możliwość powrotu**”; „**Udany test nowego aparatu nie dowodzi,
   że stary przestał odbierać**”; „**Rollback powinien przywracać znany
   stan, a nie tworzyć trzeci wariant konfiguracji**”.

   Rysunek (zmierzony): sześć warstw jedna nad drugą — cztery górne puste
   obrysy (przełączone), piąta w trakcie (lewa połowa pełna), najniższa
   PEŁNA i SZERSZA (możliwość powrotu — zostaje najdłużej). Nic nie
   zawraca. W ozdobnikach trzy warstwy: pusta, w trakcie, pełna szersza.

   ⚠⚠ WARSTWY W JEDNYM STOSIE; PRZEŁĄCZONE = PUSTE; W TRAKCIE = PÓŁ;
   POWRÓT = PEŁNY I SZERSZY NA SAMYM DOLE (13b).

   ⚠⚠ CZEGO TU NIE MA — I DLACZEGO:
   * ŻADNEJ DROGI POWROTU — otoserwer.pl (tam rysunek zawraca; tu czas,
     nie kierunek: najniższa warstwa zostaje najdłużej).
   * ŻADNEGO RZĘDU ETAPÓW — internet6g (obok siebie, status; tu jedna nad
     drugą, kolejność zdejmowania). ŻADNEJ MACIERZY — fritzboxfon.
     ŻADNYCH TRZECH WARSTW podpiskwalifikowany (tam środkowa usuwalna).
   * ŻADNEJ WTYCZKI, KABLA, SŁUCHAWKI, STRZAŁKI, PTASZKA, CYFR, CZERWIENI —
     zakazy rodziny TELEFON; bez liter (kanon 13).
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: rdza sucha #3E2A22 — sąsiad: brąz ciemny
   numerzagraniczny.com #33261E (ciemniejszy, neutralny); rdza czerwieńsza
   i jaśniejsza. Błękit lodowy #BFE0F0 — sąsiad: aqua numerzagraniczny.com
   #A6E4EC (zielonkawa); pary „ciepła ciemna płyta + chłodny jasny akcent”
   są w rodzinie dwie — zapisane.

   ⚠ ENRIQUETA ma wagi 400 i 700 — waga 500 szkieletu idzie na 400.
   ⚠ VICTOR 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 {
  --rdza:       #3E2A22;
  --rdza-noc:   #2A1B15;
  --rdza-blask: #55403A;
  --papier:     #F6F3F1;
  --karta:      #FFFFFF;

  --tekst:       #1E1613;   /* 16.12 / 17.81 */
  --tekst-cichy: #544A45;   /* 7.78 / 8.60 */
  --na-rdzy:     #F3ECE7;   /* 11.52 / 14.19 / 8.24 na blasku */
  --na-rdzy-cichy: #D9C8BF; /* 8.32 / 10.24 / 5.95 na blasku */

  /* błękit lodowy — TRZY wartości (kanon, punkt 12), policzone skryptem */
  --lod-pismo:  #2A5F80; /* PISMO — 6.24 / 6.89 */
  --lod-kreska: #4A8FB4; /* kreski — 3.23 / 3.57 (na blasku 2.70 — patrz sekcja 8) */
  --lod-jasny:  #BFE0F0; /* na płytach — 9.71 / 11.96 / 6.94 na blasku */

  --obwodka:       #7D726D; /* 4.22 / 4.67 */
  --linia-cicha:   #E8E1DD;
  --obwodka-ciemna:#AC978C; /* 4.85 / 5.97 / 3.47 na blasku */
  /* przyciski: biel na piśmie 6.89, noc na jasnej 11.96 */

  --kroj-naglowek: "Enriqueta", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Gantari", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Victor 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(62, 42, 34, .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(--lod-jasny); color: var(--rdza); }
:focus-visible { outline: 3px solid var(--lod-pismo); outline-offset: 2px; }
.naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--lod-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(--lod-jasny); color: var(--rdza); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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(--rdza);
  background-image: linear-gradient(180deg, var(--rdza-noc) 0%, var(--rdza) 62%, var(--rdza-blask) 100%);
}
/* wzdłuż dolnej krawędzi: stos — pusta, w trakcie, pełna szersza; okres 84 px. */
.naglowek__stos {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 7px, transparent 7px 84px),
    repeating-linear-gradient(90deg, transparent 0 59px, var(--lod-jasny) 59px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 7px, transparent 7px 84px),
    repeating-linear-gradient(90deg, transparent 0 59px, var(--lod-jasny) 59px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 33px, transparent 33px 84px),
    repeating-linear-gradient(90deg, transparent 0 2px, var(--lod-jasny) 2px 64px, transparent 64px 84px);
  background-size: 100% 1px, 100% 1px, 100% 3px, 100% 3px, 100% 1px, 100% 1px, 100% 3px, 100% 3px, 100% 3px, 100% 3px;
  background-position: 0 0, 0 2px, 0 0, 0 0, 0 5px, 0 7px, 0 5px, 0 5px, 0 5px, 0 10px;
  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-rdzy); text-decoration: none; }
/* znak rozpoznawczy: stos — pusta, w trakcie, pełna szersza */
.znak__stos {
  flex: none; width: 40px; height: 18px;
  background-image:
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%);
  background-size: 34px 1px, 34px 1px, 1px 4px, 1px 4px, 34px 1px, 34px 1px, 1px 4px, 1px 4px, 17px 4px, 40px 4px;
  background-position: left 3px top 2px, left 3px top 5px, left 3px top 2px, left 36px top 2px, left 3px top 8px, left 3px top 11px, left 3px top 8px, left 36px top 8px, left 3px top 8px, left 0px top 14px;
  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(--lod-jasny); }

.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-rdzy-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.008em;
}
.menu__link:hover { color: var(--na-rdzy); }
/* pozycja bieżąca: pod napisem stos — pusta, w trakcie, pełna szersza
   (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-rdzy); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em;
  height: 9px;
  background-image:
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%);
  background-size: 22px 1px, 22px 1px, 1px 2px, 1px 2px, 22px 1px, 22px 1px, 1px 2px, 1px 2px, 11px 2px, 26px 2px;
  background-position: left 2px top 1px, left 2px top 2px, left 2px top 1px, left 23px top 1px, left 2px top 4px, left 2px top 5px, left 2px top 4px, left 23px top 4px, left 2px top 4px, left 0px top 7px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — stos warstw, powrót na dole -------------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--rdza);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--rdza);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--rdza-blask) 0%, rgba(85, 64, 58, 0) 62%),
    linear-gradient(180deg, var(--rdza) 0%, var(--rdza-noc) 100%);
}
.hero__stos {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (wszystkie sześć warstw), obok kolumny,
     nie pod nią — szerokość liczona od 1320 do 1920 px.
     ⚠⚠ Obcięcie u dołu zabrałoby pełną, szerszą warstwę — a bez niej stos
     mówi „wszystko przełączone”, gdy treścią jest to, co zostaje NAJDŁUŻEJ. */
  inset-block-start: 50%; inset-inline-end: 2%;
  width: clamp(26rem, 28vw, 36rem); aspect-ratio: 430 / 130;
  transform: translateY(-50%);
  color: var(--lod-jasny); opacity: .4;
}
.hero__stos svg { width: 100%; height: 100%; }
/* Scrim gaśnie na 40 procentach szerokości, a rysunek stoi w prawym torze —
   cały stos zostaje czytelny. Najniższa warstwa nie może być przygaszona:
   to ona jest treścią. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(42, 27, 21, .95) 0%, rgba(42, 27, 21, .86) 22%, rgba(42, 27, 21, .1) 40%, rgba(42, 27, 21, 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__stos {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .5;
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(42, 27, 21, 0) 0%, rgba(42, 27, 21, 0) 22%, rgba(42, 27, 21, .9) 40%, rgba(42, 27, 21, .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-rdzy); }
/* nad tytułem: stos — pusta, w trakcie, pełna szersza — największa skala
   w arkuszu, dziesięć warstw */
.hero .tytul::before {
  content: ""; display: block;
  width: 11rem; height: 40px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%);
  background-size: 152px 3px, 152px 3px, 3px 10px, 3px 10px, 152px 3px, 152px 3px, 3px 10px, 3px 10px, 76px 10px, 176px 10px;
  background-position: left 12px top 0px, left 12px top 7px, left 12px top 0px, left 161px top 0px, left 12px top 15px, left 12px top 22px, left 12px top 15px, left 161px top 15px, left 12px top 15px, left 0px top 30px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-rdzy);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-rdzy-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(--lod-jasny); }

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

/* --- 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 stosem — pusta, w trakcie, pełna szersza. 10 warstw.
   ⚠⚠ Pozycje składnią `left … bottom …`. */
.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(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%);
  background-size: 22px 1px, 22px 1px, 1px 2px, 1px 2px, 22px 1px, 22px 1px, 1px 2px, 1px 2px, 11px 2px, 26px 2px;
  background-position: left 2px bottom 7px, left 2px bottom 6px, left 2px bottom 6px, left 23px bottom 6px, left 2px bottom 4px, left 2px bottom 3px, left 2px bottom 3px, left 23px bottom 3px, left 2px bottom 3px, left 0px 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(--lod-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--lod-jasny);
  background-image:
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-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.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(--lod-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--lod-pismo);
  text-decoration-line: underline; text-decoration-color: var(--lod-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 PUSTEJ RAMCE: warstwa przełączona
   to pusta ramka, i tak wygląda krok wykonany.
   WYLICZENIE to rzeczy do sprawdzenia — stos w miniaturze: pozycja wykazu
   to jedno pytanie „która warstwa jeszcze stoi?”.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   -------------------------------------------------------------------- */
.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: .64em;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 1.5rem; padding-inline: .35rem;
  background: var(--karta); color: var(--lod-pismo);
  border: 2px solid var(--lod-kreska);
  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: transparent; color: var(--lod-jasny); border-color: var(--lod-jasny); }

.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: stos — pusta, w trakcie, pełna szersza.
   ⚠ DZIESIĘĆ 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(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%);
  background-size: 22px 1px, 22px 1px, 1px 3px, 1px 3px, 22px 1px, 22px 1px, 1px 3px, 1px 3px, 11px 3px, 26px 3px;
  background-position: left 2px top 0px, left 2px top 2px, left 2px top 0px, left 23px top 0px, left 2px top 4px, left 2px top 6px, left 2px top 4px, left 23px top 4px, left 2px top 4px, left 0px top 8px;
  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(--lod-jasny); }

/* ⚠⚠ 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(--lod-pismo);
  text-decoration-line: underline; text-decoration-color: var(--lod-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(--lod-jasny); text-decoration-color: var(--lod-jasny);
}
.tresc .hero .wyliczenie li a:not(.przycisk):hover,
.tresc .hero .kroki li a:not(.przycisk):hover { color: var(--na-rdzy); }
/* ⚠ Znacznik wykazu w hero i w ciemnym paśmie: --lod-kreska na blasku
   #55403A daje 2,70:1 — poniżej progu 3:1 dla kresek. Na ciemnym idzie
   --lod-jasny. */
.tresc .hero .wyliczenie li::before,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 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(--lod-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(243, 236, 231, .07);
  color: var(--na-rdzy-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--lod-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(--rdza); border-color: var(--rdza); color: var(--na-rdzy); }
.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(--lod-jasny); color: var(--na-rdzy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--lod-jasny); border-color: var(--lod-jasny); color: var(--rdza); }

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

/* --- 11. KARTY KATALOGU — STOS 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: stos — pusta, w trakcie, pełna szersza */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 4.4rem; height: 14px;
  background-image:
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%),
    linear-gradient(90deg, var(--lod-kreska) 0 100%);
  background-size: 60px 1px, 60px 1px, 1px 4px, 1px 4px, 60px 1px, 60px 1px, 1px 4px, 1px 4px, 30px 4px, 70px 4px;
  background-position: left 5px top 0px, left 5px top 3px, left 5px top 0px, left 64px top 0px, left 5px top 5px, left 5px top 8px, left 5px top 5px, left 64px top 5px, left 5px top 5px, left 0px 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: .72rem; color: var(--lod-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(--lod-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(--lod-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--lod-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(--lod-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--lod-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(--rdza-noc); color: var(--na-rdzy);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--rdza-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--rdza-blask) 0%, rgba(85, 64, 58, 0) 64%),
    linear-gradient(180deg, var(--rdza) 0%, var(--rdza-noc) 84%);
}
/* ten sam pas co w nagłówku */
.stopka__stos {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 7px, transparent 7px 84px),
    repeating-linear-gradient(90deg, transparent 0 59px, var(--lod-jasny) 59px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 7px, transparent 7px 84px),
    repeating-linear-gradient(90deg, transparent 0 59px, var(--lod-jasny) 59px 60px, transparent 60px 84px),
    repeating-linear-gradient(90deg, transparent 0 6px, var(--lod-jasny) 6px 33px, transparent 33px 84px),
    repeating-linear-gradient(90deg, transparent 0 2px, var(--lod-jasny) 2px 64px, transparent 64px 84px);
  background-size: 100% 1px, 100% 1px, 100% 3px, 100% 3px, 100% 1px, 100% 1px, 100% 3px, 100% 3px, 100% 3px, 100% 3px;
  background-position: 0 0, 0 2px, 0 0, 0 0, 0 5px, 0 7px, 0 5px, 0 5px, 0 5px, 0 10px;
  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-rdzy);
}
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 24px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%),
    linear-gradient(90deg, var(--lod-jasny) 0 100%);
  background-size: 68px 2px, 68px 2px, 2px 6px, 2px 6px, 68px 2px, 68px 2px, 2px 6px, 2px 6px, 34px 6px, 80px 6px;
  background-position: left 6px top 0px, left 6px top 4px, left 6px top 0px, left 72px top 0px, left 6px top 9px, left 6px top 13px, left 6px top 9px, left 72px top 9px, left 6px top 9px, left 0px top 18px;
  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-rdzy-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .74rem; letter-spacing: -.008em;
}
.stopka__menu a:hover { color: var(--lod-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — STOS 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 (stos położony): pusta, w trakcie, pełna szersza — od lewej */
  .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(--lod-kreska) 0 100%),
      linear-gradient(90deg, var(--lod-kreska) 0 100%),
      linear-gradient(90deg, var(--lod-kreska) 0 100%),
      linear-gradient(90deg, var(--lod-kreska) 0 100%),
      linear-gradient(90deg, var(--lod-kreska) 0 100%),
      linear-gradient(90deg, var(--lod-kreska) 0 100%),
      linear-gradient(90deg, var(--lod-kreska) 0 100%),
      linear-gradient(90deg, var(--lod-kreska) 0 100%),
      linear-gradient(90deg, var(--lod-kreska) 0 100%),
      linear-gradient(90deg, var(--lod-kreska) 0 100%);
    background-size: 2px 60px, 2px 60px, 5px 2px, 5px 2px, 2px 60px, 2px 60px, 5px 2px, 5px 2px, 5px 30px, 5px 72px;
    background-position: left 3px top 6px, left 6px top 6px, left 3px top 6px, left 3px top 64px, left 11px top 6px, left 14px top 6px, left 11px top 6px, left 11px top 64px, left 11px top 6px, left 19px top 0px;
    background-repeat: no-repeat;
    opacity: .6;
  }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--lod-jasny) 0 100%),
      linear-gradient(90deg, var(--lod-jasny) 0 100%),
      linear-gradient(90deg, var(--lod-jasny) 0 100%),
      linear-gradient(90deg, var(--lod-jasny) 0 100%),
      linear-gradient(90deg, var(--lod-jasny) 0 100%),
      linear-gradient(90deg, var(--lod-jasny) 0 100%),
      linear-gradient(90deg, var(--lod-jasny) 0 100%),
      linear-gradient(90deg, var(--lod-jasny) 0 100%),
      linear-gradient(90deg, var(--lod-jasny) 0 100%),
      linear-gradient(90deg, var(--lod-jasny) 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__stos, .hero__plyta, .hero__stos,
  .hero__scrim, .stopka__plyta, .stopka__stos { 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%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .tresc .kroki li::before { border-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; }
}