/* =====================================================================
   kantory24.pl — MAKIETA PREMIUM „TABLICA KURSÓW”
   ---------------------------------------------------------------------
   Metafora: emaliowana tablica w okienku kantoru. Ciemna płyta, wiersze
   walut na włosowych kreskach i DWIE kolumny liczb — kupno i sprzedaż.
   Odległość między kolumnami to spread; w tym projekcie jest NARYSOWANA,
   nie opisana. Pod płytą leży papier kwitu — to, co dostajesz przy okienku.
   Pełny zapis decyzji: PROJEKT-PREMIUM.md.

   ⚠⚠ ARKUSZ PISANY RĘCZNIE. Nie uruchamiać `motyw.py`, `szkielet.py
   --nadpisz` ani `dokladka.py` — kasują tę pracę razem ze znacznikiem.
   Domena jest na liście `nie-wgrywac/noc-20260830/premium-recznie.txt`.

   ⚠ KONTRAKT BRAMKI B13 (pomiary.mjs), spełniany świadomie:
     1. pismo prozy rośnie 1366 -> 1920  — bo `html` ma font-size w clamp(vw),
        a proza mierzy się w rem;
     2. kolumna prozy rośnie W PIKSELACH — bo `--kolumna` jest w rem;
     3. kompozycja nie jest jednostronna — tory boczne są SYMETRYCZNE (1fr|1fr),
        więc lewy margines równa się prawemu przy każdej szerokości;
     4. B13c: ozdobnik nie wchodzi pod kolumnę — pas podziałki spreadu NIE jest
        pseudoelementem `main.tresc` kotwiczonym do krawędzi okna, tylko
        siedzi w PRAWYM TORZE SIATKI, więc pod prozę nie ma jak wejść.
   ⚠ Sonda B13 mierzy `main .kontener > p`. Pasma dzielą treść na kilka
     kontenerów, ale akapity zostają BEZPOŚREDNIMI dziećmi kontenera —
     selektor sondy działa dalej.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie */
  --tablica:        #14202E;   /* płyta tablicy: nagłówek, hero, stopka */
  --tablica-noc:    #0C141F;   /* dno gradientu płyty */
  --tablica-blask:  #1E3047;   /* rozjaśnienie płyty pod tytułem */
  --papier:         #F7F3EA;   /* papier kwitu — ziemia treści */
  --papier-kwit:    #FFFDF8;   /* karty i pola uniesione */
  --papier-cien:    #EFE8DA;   /* pasmo o innej roli */

  /* pismo */
  --atrament:       #1B2531;   /* 13,99:1 na papierze */
  --atrament-cichy: #4E5A6B;   /*  6,23:1 na papierze */
  --na-ciemnym:     #EEE8DB;   /* 13,50:1 na płycie */
  --na-ciemnym-cichy: #B9C2CF; /*  9,08:1 na płycie */

  /* mosiądz — okucia kontuaru. TRZY WARTOŚCI, KAŻDA DO INNEJ ROBOTY.
     ⚠⚠ To nie jest kaprys: mosiądz jasny ma na papierze kontrast 3,06:1,
     czyli wolno nim RYSOWAĆ (próg 3:1 dla elementu nietekstowego), ale nie
     wolno nim PISAĆ (próg 4,5:1). Do pisma na papierze służy odmiana ciemna
     (4,81:1), a na płycie — jasna (10,2:1). */
  --mosiadz:        #B4832E;   /* kreski i znaczniki na papierze */
  --mosiadz-ciemny: #8A6320;   /* PISMO i odsyłacze na papierze */
  --mosiadz-jasny:  #E8C983;   /* pismo i kreski na płycie */

  /* obwódki */
  --obwodka:        #8C8271;   /* 3,42:1 — obwódka, która coś znaczy */
  --linia-cicha:    #E3DBCB;   /* włos wyłącznie dekoracyjny */
  --obwodka-ciemna: #33455C;   /* obwódki na płycie */

  --kroj-naglowek: "Bitter", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-liczba:   "IBM Plex Mono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;

  /* ⚠ MIARA W REM, NIE W EM — w em ta sama liczba daje inną szerokość dla
     każdego bloku i kreska pod nagłówkiem wychodzi dwa razy dłuższa niż
     tekst pod nią. W rem wszystkie bloki mają JEDNĄ krawędź. */
  --kolumna:         34rem;   /* proza i nagłówki sekcji */
  --kolumna-hero:    37rem;   /* tytuł — szersza, bo pismo większe */
  --kolumna-szeroka: 56rem;   /* kwity katalogu */
  --margines:        clamp(20px, 5vw, 104px);

  /* płyta szerokoekranowa: szyna numeru | proza | podziałka spreadu */
  --szyna:  16rem;
  --rowek:  2.6rem;
  --skala:  7rem;

  --promien:       3px;
  --promien-kwit: 10px;
  --kreska:        1px;
  --cien-kwit:  0 18px 40px -28px rgba(20, 32, 46, .55);
  --cien-plyta: 0 26px 54px -30px rgba(12, 20, 31, .70);
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* ⭐⭐ TU MIESZKA WARUNEK 1 I 2 BRAMKI B13: korzeń rośnie z szerokością
     okna, więc razem z nim rośnie pismo prozy I kolumna mierzona w rem.
     Przy 1366 px wypada 12,3 px * ... = 17,1 px, przy 1920 — 21,4 px. */
  font-size: clamp(1rem, .9rem + .3vw, 1.34rem);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--kroj-tekst);
  font-size: 1rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--mosiadz-jasny); color: var(--tablica); }

:focus-visible {
  outline: 3px solid var(--mosiadz);
  outline-offset: 2px;
}
.na-plycie :focus-visible, .naglowek :focus-visible, .hero :focus-visible,
.stopka :focus-visible { outline-color: var(--mosiadz-jasny); }

/* odsyłacz pomijający — ⚠ NIE „1px + clip”: to cel dotykowy 1x1 px i B7
   słusznie świeci czerwono. Chowamy przez przesunięcie za krawędź. */
.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(--mosiadz-jasny); color: var(--tablica);
  font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. PŁYTA I PAPIER — dwie powierzchnie całej strony -------------
   Nagłówek i hero to jedna ciemna płyta tablicy. Wszystko poniżej leży na
   papierze kwitu. Granicę rysuje mosiężna kreska — okucie kontuaru.
   -------------------------------------------------------------------- */
.naglowek, .hero { position: relative; isolation: isolate; color: var(--na-ciemnym); }
.naglowek { background: var(--tablica); }

/* --- 3. KONTENER ----------------------------------------------------- */
.kontener {
  width: 100%;
  max-width: calc(var(--kolumna-szeroka) + 2 * var(--margines));
  margin-inline: auto;
  padding-inline: var(--margines);
}
/* Kolumna prozy jest WĘŻSZA niż kontener i wyśrodkowana — stąd równe
   marginesy, czyli warunek 3 bramki B13. */
.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 — górna krawędź tablicy ----------------------------- */
.naglowek__plyta {
  position: absolute; z-index: 0; inset: 0;
  background:
    linear-gradient(180deg, var(--tablica-noc) 0%, var(--tablica) 62%, var(--tablica-blask) 100%);
}
/* taśma kursów: rytmiczne kreski wzdłuż dolnej krawędzi — echo paska
   notowań. Sam rytm, bez animacji (B9: zero JavaScriptu, a ruch dla ruchu
   i tak łamie „prefers-reduced-motion”). */
.naglowek__tasma {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 6px;
  background-image:
    repeating-linear-gradient(90deg,
      var(--mosiadz) 0 2px, transparent 2px 13px);
  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);
}

/* sygnatura: mosiężny krążek i nazwa serwisu */
.znak {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 46px;
  color: var(--na-ciemnym); text-decoration: none;
}
.znak__moneta {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--mosiadz-jasny) 0 34%, var(--mosiadz) 36% 100%);
  box-shadow: inset 0 0 0 2px rgba(12, 20, 31, .55);
}
.znak__slowo {
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.14rem, 1rem + .5vw, 1.5rem);
  letter-spacing: -.008em;
}
.znak:hover .znak__slowo { color: var(--mosiadz-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-ciemnym-cichy); text-decoration: none;
  font-family: var(--kroj-liczba); font-weight: 400;
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
}
.menu__link::after {
  content: ""; position: absolute;
  inset-block-end: 9px; inset-inline-start: .5em;
  width: 0; height: 2px; background: var(--mosiadz-jasny);
  transition: width .22s ease;
}
.menu__link:hover { color: var(--na-ciemnym); }
.menu__link:hover::after { width: calc(100% - 1em); }
/* pozycja bieżąca: kreska ORAZ krążek — kolor nie jest jedynym nośnikiem.
   ⚠ Odstęp krążka w PIKSELACH, nie w rem: pudełko ma sztywne
   `min-height: 46px`, więc wiersz wersalików stoi w nim stale ok. 15 px
   od góry i miara skalowana korzeniem nasunęłaby krążek na litery
   (zmierzona pułapka P-11 z przewodnik.warmia.pl). */
.menu__link[aria-current="page"] { color: var(--na-ciemnym); font-weight: 500; }
.menu__link[aria-current="page"]::after { width: calc(100% - 1em); }
.menu__link[aria-current="page"]::before {
  content: ""; position: absolute;
  inset-block-start: 5px; inset-inline-start: calc(50% - 3px);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mosiadz-jasny);
}

/* --- 5. HERO — tablica kursów ---------------------------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--tablica);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background:
    radial-gradient(78% 62% at 22% 0%, var(--tablica-blask) 0%, rgba(30, 48, 71, 0) 64%),
    linear-gradient(180deg, var(--tablica) 0%, var(--tablica-noc) 100%);
}
/* wiersze tablicy */
.hero__wiersze {
  position: absolute; z-index: 1; inset: 0;
  background-image: repeating-linear-gradient(180deg,
    rgba(233, 227, 214, .10) 0 1px, transparent 1px 44px);
}
/* DWIE mosiężne prowadnice: kolumna kupna i kolumna sprzedaży. Przerwa
   między nimi to spread. Poniżej 900 px schodzą do jednej — na wąskim
   ekranie dwie kolumny liczb i tak by się nie zmieściły. */
/* ⚠ Prowadnice i rysunek notowań stoją w PRAWEJ części płyty, bo tam nie ma
   tekstu. Pierwsza wersja rozkładała je na całej szerokości i przygaszała
   mocnym scrimem — na zrzucie 1920 tablica była wtedy praktycznie niewidoczna,
   czyli metafora całego projektu nie docierała do oglądającego. */
.hero__kolumny {
  position: absolute; z-index: 1; inset-block: 0; inset-inline: 0;
  background-image:
    linear-gradient(90deg, var(--mosiadz-jasny) 0 100%),
    linear-gradient(90deg, var(--mosiadz-jasny) 0 100%);
  background-size: 2px 100%, 2px 100%;
  background-position: 68% 0, 86% 0;
  background-repeat: no-repeat;
  opacity: .40;
}
@media (max-width: 1099px) {
  .hero__kolumny { background-size: 2px 100%, 0 0; background-position: 86% 0, 0 0; opacity: .28; }
}
/* rysunek notowań — abstrakcyjne wiersze tablicy, BEZ ANI JEDNEJ LITERY */
.hero__notowania {
  position: absolute; z-index: 1; inset: 0;
  color: var(--mosiadz-jasny);
  opacity: .34;
}
.hero__notowania svg { width: 100%; height: 100%; }
/* przygaszenie pod tekstem — inaczej rysunek konkuruje z tytułem */
/* Scrim ma JEDNO zadanie: dać tytułowi spokojne tło. Kończy się na 62
   procentach szerokości, żeby tablica po prawej została widoczna. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(12, 20, 31, .93) 0%, rgba(12, 20, 31, .88) 40%, rgba(12, 20, 31, .10) 62%, rgba(12, 20, 31, 0) 100%);
}
.hero__kontener { position: relative; z-index: 3; }

/* ⚠ Barwa jasna należy do TYTUŁU W HERO, nie do klasy `.tytul` jako takiej.
   `specimen.html` (dokument warsztatowy generatora) używa tej klasy BEZ płyty
   pod nią — przy barwie wpisanej w samą klasę tytuł wychodził jasny na
   papierze, kontrast 1,10:1, i B6 słusznie to złapała. */
.tytul {
  margin: 0 0 clamp(.9rem, .6rem + .8vw, 1.5rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2.1rem, 1.34rem + 3vw, 4.05rem);
  line-height: 1.05; letter-spacing: -.018em;
  color: var(--atrament);
  text-wrap: balance;
}
.hero .tytul { color: var(--na-ciemnym); }
/* mosiężna kreska nad tytułem — okucie tablicy */
.tytul::before {
  content: ""; display: block;
  width: 4.6rem; height: 3px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background: linear-gradient(90deg, var(--mosiadz-jasny) 0 58%, var(--mosiadz) 58% 100%);
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem;
  color: var(--na-ciemnym);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem);
  line-height: 1.62;
}
.hero p { color: var(--na-ciemnym-cichy); }
/* ⚠⚠ SWOISTOŚĆ MUSI BYĆ WYŻSZA, NIE TYLKO KOLEJNOŚĆ WCZEŚNIEJSZA.
   `.hero p a:not(.przycisk)` i `.tresc p a:not(.przycisk)` mają TĘ SAMĄ
   swoistość (0-2-1), a reguła prozy stoi w arkuszu NIŻEJ — więc wygrywała
   i odsyłacz w akapicie hero dostawał barwę przeznaczoną na papier.
   Zmierzone bramką B6 na fontawesome.pl/blog: 2,32:1 (ciemna cytryna na
   ciemnej płycie). ⚠ W kantory24.pl i spamy.pl ta sama wada SIEDZIAŁA
   UŚPIONA — tam żaden akapit hero nie ma odsyłacza, więc bramka jej nie
   widziała. Prefiks `.tresc` podnosi wagę do (0-3-1) i rozstrzyga wprost. */
/* ⚠⚠ „p:not(.przejscie)” — REGUŁA HERO NIE MOŻE SIĘGAĆ DO PIGUŁKI ODSYŁACZA.
   Podniesienie swoistości do (0-3-1) (kanon 3c) naprawiło jedną rzecz i zepsuło
   drugą: reguła zaczęła bić `.tresc .przejscie a` (0-2-1) i malowała barwą
   „na płycie” tekst odsyłacza kierunkowego, który ma WŁASNE, BIAŁE pudełko.
   Zmierzone bramką B6 na emigracjapodatkowa.pl/index: 1,99:1 — jasna terakota
   na bieli. To konwencja tej serii, widoczna też w arkuszach generatora:
   reguła prozy dotyczy WYŁĄCZNIE akapitów, które SAME nie są odsyłaczem
   kierunkowym. Zasięg zmierzony: odsyłacz nie-przyciskowy stoi w hero
   w 3 z 10 makiet (adreswanglii nie ma tej reguły w ogóle), ale poprawka
   idzie do WSZYSTKICH, bo wada jest w regule, nie w treści. */
.tresc .hero p:not(.przejscie) a:not(.przycisk) { color: var(--mosiadz-jasny); }

/* --- 6. PASMA TREŚCI ------------------------------------------------- */
.tresc { display: block; }
.pasmo {
  position: relative;
  padding-block: clamp(2.2rem, 1.5rem + 2.4vw, 4.2rem);
  background: var(--papier);
}
/* co drugie pasmo na cieniu papieru — rytm bez dodatkowej klasy w znaczniku */
.pasmo:nth-of-type(even) { background: var(--papier-cien); }
/* włosowa kreska między pasmami — wiersz tablicy przeniesiony na papier */
.pasmo + .pasmo::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 1px; background: var(--linia-cicha);
}
/* OSTATNIE pasmo wraca na płytę i domyka tablicę.
   ⚠⚠ BARWA PEŁNA I GRADIENT OSOBNO, NIE SKRÓTEM `background`. Skrót ustawia
   `background-color` na przezroczystą i zostawia sam `background-image`.
   Skutek zmierzony bramką B6: sonda kontrastu nie ma czego zmierzyć pod
   jasnym pismem, więc wędruje do przodka i liczy je NA PAPIERZE — wyszło
   1,10:1 dla nagłówków i 1,62:1 dla prozy w siedmiu widokach.
   I bramka miała rację merytorycznie, nie tylko formalnie: gdyby gradient
   się nie odmalował (druk, tryb wymuszonych barw, starszy silnik), jasne
   pismo faktycznie zostałoby na jasnym papierze. */
.pasmo:last-of-type:not(:nth-of-type(1)) {
  background-color: var(--tablica-noc);
  background-image: linear-gradient(180deg, var(--tablica) 0%, var(--tablica-noc) 100%);
  color: var(--na-ciemnym);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--mosiadz); height: 3px; opacity: .8; }
/* ⚠⚠ DWIE POPRAWKI W TYCH REGUŁACH, obie zmierzone bramką B6.
   1. „:not(:nth-of-type(1))” — PASMO DOMYKAJĄCE MUSI COŚ DOMYKAĆ. Widok bloga
      ma DOKŁADNIE JEDNO pasmo (indeks wpisów), więc było ono jednocześnie
      pierwszym i ostatnim, i cały indeks lądował na ciemnej płycie.
   2. „> .kontener >” — TYLKO BEZPOŚREDNIE DZIECI. Bez tego „.pasmo:last-of-type p”
      ma swoistość (0,2,1) i BIJE komponent „.tresc .zapowiedz__tekst” (0,2,0),
      więc jasne pismo pasma wchodziło DO ŚRODKA białych kart katalogu:
      zmierzone 1,77:1 dla opisu karty i 1,58:1 dla „Czytaj dalej”.
      To ta sama rodzina pułapki, co „.tresc li a” bijące klasę komponentu. */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p { color: var(--na-ciemnym-cichy); }

/* --- 7. TYPOGRAFIA TREŚCI ------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: 0 0 clamp(.7rem, .5rem + .5vw, 1.1rem);
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.42rem, 1.14rem + 1.05vw, 2.16rem);
  line-height: 1.16; letter-spacing: -.012em;
  color: var(--atrament);
  text-wrap: balance;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-ciemnym); }
/* ⚠⚠ KANON 2c: h3 i .zajawka mają WŁASNĄ CIEMNĄ barwę z jasnego tła, więc
   w ciemnym paśmie dają 1,07:1. Reguła była UTAJONA we wszystkich arkuszach
   premium i zapaliła się dopiero na otoenergia.pl (4.09), bo tylko tam
   ostatnie pasmo w ogóle zawiera h3. */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3 { color: var(--na-ciemnym); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-ciemnym-cichy); border-inline-start-color: var(--mosiadz-jasny); }
/* numer wiersza tablicy — licznik CSS, więc w DOM-ie NIE MA ŻADNEGO DOPISKU
   i kontrola treści 1:1 nic tu nie widzi. */
.tresc { counter-reset: pasmo; }
.pasmo { counter-increment: pasmo; }
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  display: block;
  margin-block-end: .5rem;
  font-family: var(--kroj-liczba); font-weight: 500;
  font-size: .82rem; letter-spacing: .12em;
  color: var(--mosiadz-ciemny);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before { color: var(--mosiadz-jasny); }

.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.1rem, 1.02rem + .34vw, 1.32rem);
  line-height: 1.28; color: var(--atrament);
}
.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.64; }
.zajawka {
  margin: 0 0 1.3em; padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--mosiadz);
  color: var(--atrament-cichy);
  font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--mosiadz-ciemny);
  text-decoration-line: underline;
  text-decoration-color: var(--mosiadz);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.tresc p a:not(.przycisk):hover { color: var(--atrament); text-decoration-thickness: 2px; }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--mosiadz-jasny); text-decoration-color: var(--mosiadz-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-ciemnym); }

/* --- 8. LISTY W PROZIE (zapas systemu) ------------------------------ */
.tresc .wyliczenie { margin: .4em 0 1.4em; padding: 0; list-style: none; display: grid; gap: .55rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 1.7rem; }
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .62em; inset-inline-start: 0;
  width: .78rem; height: 2px; background: var(--mosiadz);
}
.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 2.6rem;
  border-block-end: 1px dotted var(--obwodka);
}
/* ⚠ kreskę zdejmujemy OSTATNIEJ POZYCJI W UKŁADZIE, nie ostatniej w DOM-ie —
   przy dwóch szpaltach to nie ta sama pozycja (poprawka P-2). Tu wykaz jest
   jednoszpaltowy, więc `last-child` jest poprawny; gdyby doszły szpalty,
   regułę trzeba przeliczyć. */
.tresc .kroki li:last-child { border-block-end: 0; }
.tresc .kroki li::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: .72em;
  font-family: var(--kroj-liczba); font-weight: 500; font-size: .84rem;
  color: var(--mosiadz-ciemny);
}
.tresc .zrodlo {
  margin: 1.6em 0 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem);
  background: var(--papier-kwit);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--mosiadz);
  border-radius: var(--promien);
  font-size: .93rem; line-height: 1.58; color: var(--atrament-cichy);
}

/* ⚠⚠ KANON 2b — ELEMENT Z WŁASNYM JASNYM TŁEM WEWNĄTRZ CIEMNEGO PASMA.
   Reguła pasma domykającego celuje w BEZPOŚREDNIE dzieci kontenera (punkt 2)
   i to poprawnie wyłącza karty leżące w `.lista-wpisow`. Ale `.zrodlo` JEST
   bezpośrednim dzieckiem kontenera, a przy tym nosi WŁASNE, jasne tło —
   więc dostawało jasne pismo pasma na swojej białej tabliczce.
   Zmierzone bramką B6 na biurowlondynie.pl: 1,75–1,93:1 w sześciu widokach.
   Wniosek ogólny: każdy blok, który sam maluje sobie tło, musi mieć w ciemnym
   paśmie JAWNY wariant — inaczej dziedziczy barwę pisma przeznaczoną na tło,
   którego u siebie nie ma. Dotyczy `.zrodlo` i `.wzor`.
   ⚠ W pięciu pozostałych makietach ta wada SIEDZIAŁA UŚPIONA — tam treść nie
   używa klasy `.zrodlo`, więc bramka nie miała czym jej złamać. Poprawione
   wszędzie, nie tylko tam, gdzie się ujawniła. */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wzor {
  background: rgba(233, 227, 214, .07);
  color: var(--na-ciemnym-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--mosiadz-jasny);
}

/* --- 9. ODSYŁACZ KIERUNKOWY ----------------------------------------- */
/* akapit, którego CAŁĄ treścią jest odsyłacz. ⚠ B7 traktuje go jak
   samodzielny cel UI, więc musi mieć co najmniej 44 px wysokości. */
.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(--papier-kwit);
  border: 1px solid var(--obwodka);
  border-radius: var(--promien);
  color: var(--atrament); 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(--tablica); border-color: var(--tablica); color: var(--na-ciemnym);
}
.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(--mosiadz-jasny); color: var(--na-ciemnym);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--mosiadz-jasny); color: var(--tablica); border-color: var(--mosiadz-jasny); }

/* --- 10. POLE WEZWANIA I PRZYCISK ----------------------------------- */
/* ⚠⚠ DOLNY MARGINES NIE MOŻE BYĆ ZEREM (poprawka P-1): następny akapit ma
   górny margines 0, więc napis dotykałby krawędzi przycisku. */
.tresc .cta { margin-block: clamp(1.7rem, 1.2rem + 1.3vw, 2.7rem) 1.7em; }
/* ⚠⚠ SELEKTOR MUSI DORÓWNAĆ `.tresc .przejscie a` (0-2-1). Generator daje
   temu akapitowi OBIE klasy naraz: <p class="cta przejscie"><a class="przycisk">.
   Sama klasa `.przycisk` (0-1-0) przegrywa mimo pozycji niżej i przycisk
   dostaje wygląd odsyłacza kierunkowego. */
.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(--tablica); color: var(--na-ciemnym);
  border: 2px solid var(--tablica); border-radius: var(--promien);
  font-family: var(--kroj-tekst); font-weight: 600;
  font-size: 1.01rem; letter-spacing: .008em;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--mosiadz);
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.tresc .przejscie a.przycisk::after { content: "→"; }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover {
  background: var(--mosiadz-ciemny); border-color: var(--mosiadz-ciemny);
  box-shadow: 2px 2px 0 var(--tablica); transform: translate(2px, 2px);
}
/* ⚠ pułapka „.tresc p a bije .przycisk” — tekst przycisku tracił kolor */
.tresc p a.przycisk { color: var(--na-ciemnym); text-decoration: none; }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk {
  background: var(--mosiadz-jasny); color: var(--tablica); border-color: var(--mosiadz-jasny);
  box-shadow: 4px 4px 0 rgba(233, 227, 214, .22);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover { background: var(--na-ciemnym); border-color: var(--na-ciemnym); }

/* --- 11. KWITY KATALOGU (lista wpisów) ------------------------------
   Karta wpisu to KWIT z okienka: papier o ząbkowanej górnej krawędzi,
   numer w kroju o stałej szerokości i mosiężna kreska odcinka.
   -------------------------------------------------------------------- */
.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: kwit;
}
@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: kwit;
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  background: var(--papier-kwit);
  border: 1px solid var(--obwodka);
  border-radius: 0 0 var(--promien-kwit) var(--promien-kwit);
  box-shadow: var(--cien-kwit);
}
/* perforacja górnej krawędzi kwitu */
.zapowiedz::before {
  content: ""; position: absolute; inset-inline: -1px; inset-block-start: -1px; height: 7px;
  background-image: radial-gradient(circle at 5px 0, transparent 0 4px, var(--obwodka) 4px 4.6px, transparent 4.7px);
  background-size: 10px 7px; background-repeat: repeat-x;
}
.zapowiedz::after {
  content: counter(kwit, decimal-leading-zero);
  position: absolute; inset-block-start: .9rem; inset-inline-end: 1rem;
  font-family: var(--kroj-liczba); font-weight: 500; font-size: .8rem;
  color: var(--mosiadz-ciemny);
}
/* ⚠⚠ tytuł kwitu JEST nagłówkiem h2, więc łapią go WSZYSTKIE reguły
   „.tresc h2” — razem z licznikiem pasma i kreską. Klasa sama (0-1-0) tego
   nie cofnie, potrzebny ten sam prefiks (0-2-0). */
.tresc .zapowiedz__tytul {
  margin: 0 0 .5rem; padding: 0; border: 0; background: none; max-width: none;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.08rem, 1rem + .42vw, 1.3rem); line-height: 1.26;
  letter-spacing: -.004em;
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
/* ⚠ specyficzność: „.tresc li a” (0-1-2) bije „.zapowiedz__tytul a” (0-1-1),
   więc tytuł kwitu dostawał podkreślenie prozy. Prefiks wyrównuje wagę. */
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--atrament); text-decoration: none;
}
.tresc .zapowiedz__tytul a:hover { color: var(--mosiadz-ciemny); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1rem; color: var(--atrament-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(--mosiadz-ciemny); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--mosiadz);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--atrament); border-block-end-color: var(--atrament); }

/* --- 12. STOPKA — dolna krawędź tablicy ----------------------------- */
.stopka {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2rem, 1.4rem + 2vw, 3.6rem);
  background: var(--tablica-noc);
  color: var(--na-ciemnym);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background:
    radial-gradient(70% 120% at 82% 100%, var(--tablica-blask) 0%, rgba(30, 48, 71, 0) 66%),
    linear-gradient(180deg, var(--tablica) 0%, var(--tablica-noc) 82%);
}
.stopka__tasma {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 6px;
  background-image: repeating-linear-gradient(90deg, var(--mosiadz) 0 2px, transparent 2px 13px);
  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.06rem, .98rem + .4vw, 1.34rem);
  color: var(--na-ciemnym);
}
.stopka__znak::after {
  content: ""; display: block; width: 3.4rem; height: 2px; margin-block-start: .6rem;
  background: var(--mosiadz-jasny);
}
.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-ciemnym-cichy); text-decoration: none;
  font-family: var(--kroj-liczba); font-size: .78rem;
  letter-spacing: .07em; text-transform: uppercase;
}
.stopka__menu a:hover { color: var(--mosiadz-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — PŁYTA Z SZYNĄ NUMERU ---------------------
   Powyżej progu kontener staje się siatką o TRZECH torach:

     [pelna-start] szyna 1fr [proza-start] 34rem [proza-end] 1fr [pelna-end]
                   numer                   proza              podziałka spreadu

   ⚠⚠ TORY BOCZNE MUSZĄ ZOSTAĆ SYMETRYCZNE (1fr | 1fr). Szerszy tor prawy to
   natychmiastowa czerwień B13 warunek 3 (prawy margines > 150 px i > 2,5x
   lewy). Symetria daje lewy = prawy przy każdej szerokości.
   ⚠ Środkowy tor MUSI zostać w rem. „max-width: 680px” dałoby tę samą
   liczbę przy 1366 i 1920, czyli czerwień B13 warunek 2.
   ⚠ row-gap MUSI być zerowy — nagłówek w szynie rozkłada nadwyżkę wysokości
   na wiersze siatki i przy niezerowym rowku między akapitami otwierają się
   szczeliny.
   -------------------------------------------------------------------- */
@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;
  }
  /* nagłówek sekcji schodzi do LEWEJ szyny i staje obok swojej prozy */
  .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 { text-align: end; }
  /* ⚠⚠ ODSTĘP POD ŚRÓDTYTUŁEM ≠ ODSTĘP NAD NIM. W przepływie h3 ma proporcję
     ok. 5:1 i dlatego wiąże się ze swoim akapitem; w siatce trzeba to
     odtworzyć jawnie, inaczej nagłówek wisi w powietrzu (poprawka P-17). */
  .pasmo > .kontener > h3 { margin-block: clamp(1.9rem, 1.2rem + 1.4vw, 2.7rem) 0; }
  .pasmo > .kontener > h3 + * { margin-block-start: .5rem; }
  /* pierwszy akapit po nagłówku sekcji nie dostaje własnego odstępu górnego */
  .pasmo > .kontener > h2 + * { margin-block-start: 0; }
  /* kwity i tytuł idą na całą ramkę */
  .pasmo > .kontener > .lista-wpisow { grid-column: proza-start / pelna-end; max-width: none; }
  /* ⚠⚠ TYTUŁ ZOSTAJE W TORZE PROZY. Pierwsza wersja rozpinała go na całą
     ramkę (pelna-start/pelna-end) i na zrzucie 1920 wyglądało to jak dwie
     rozjechane kolumny: nagłówek zaczynał się przy lewej krawędzi, a akapit
     wprowadzenia dopiero 240 px dalej. Wspólna krawędź lewa jest tu warta
     więcej niż szeroki tytuł. Lewa szyna hero dostaje w zamian mosiężny znak
     kursu — pusty pas przestaje być pustką. */
  .hero__kontener > .tytul { grid-column: proza; max-width: none; }
  .hero__kontener::before {
    content: ""; grid-column: pelna-start / proza-start; grid-row: 1;
    justify-self: end; align-self: start;
    /* ⚠ Znak kursu: PIERŚCIEŃ z poprzeczką, nie krążek z refleksem.
       Pierwsza wersja miała radialny refleks pokrywający tylko część koła
       i na zrzucie 1920 czytała się jak przypadkowo przyciemniona połowa
       okręgu — jak błąd, nie jak moneta. Teraz to czysty pierścień
       z pionową i poziomą kreską: dwie osie, po których czyta się tabelę. */
    width: 5rem; height: 5rem; margin-block-start: .7rem;
    border-radius: 50%;
    border: 2px solid var(--mosiadz);
    background-image:
      linear-gradient(90deg, transparent 0 calc(50% - 1px), var(--mosiadz) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%),
      linear-gradient(180deg, transparent 0 calc(50% - 1px), var(--mosiadz) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%);
    background-size: 100% 100%, 100% 100%;
    opacity: .62;
  }

  /* PODZIAŁKA SPREADU — ozdobnik w PRAWYM TORZE.
     ⚠⚠ Świadomie NIE jest to pseudoelement `main.tresc` kotwiczony do
     krawędzi okna: taki ozdobnik przy wyśrodkowanej kolumnie wchodzi pod
     ostatnie ~150 px każdego wiersza na każdej szerokości 1240–1764 px
     (zmierzona wada z 29.08). Siedząc w torze siatki nie ma jak wejść
     pod prozę — i dlatego B13c mierzy tu zero. */
  /* PODZIAŁKA SPREADU — pionowa listwa z kreskami.
     ⚠⚠ PIERWSZA WERSJA BYŁA BŁĘDEM PROJEKTOWYM, złapanym na własnym zrzucie:
     pas 7 rem gęstych kresek poziomych czytał się jak akapit nieczytelnego
     tekstu obok każdego pasma — czyli jak błąd renderowania, nie ozdoba.
     Teraz jest tym, czym miał być: JEDNA mosiężna listwa pionowa z krótkimi
     kreskami podziałki, przyklejona do lewej krawędzi prawego toru.
     ⚠ Ozdobnik siedzi w TORZE SIATKI, nie jest pseudoelementem `main.tresc`
     kotwiczonym do krawędzi okna — dlatego nie ma jak wejść pod prozę
     (zmierzona wada z 29.08) i dlatego B13c mierzy tu zero. */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 2.4rem; min-height: 4rem;
    border-inline-start: 1px solid var(--mosiadz);
    background-image: repeating-linear-gradient(180deg,
      var(--mosiadz) 0 1px, transparent 1px 22px);
    background-size: .8rem 100%; background-repeat: repeat-y;
    opacity: .34;
    -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 {
    border-inline-start-color: var(--mosiadz-jasny);
    background-image: repeating-linear-gradient(180deg, var(--mosiadz-jasny) 0 1px, transparent 1px 22px);
  }
}

/* --- 14. ARKUSZ SYSTEMU (specimen.html — dokument warsztatowy) -------
   specimen.html zostaje w postaci generatorowej i NIE JEST częścią dostawy
   premium (nie ma go ani w korzeniu, ani w paczce FTP). Tyle stylu, żeby
   dokument dał się przeglądać. */
.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-radius: var(--promien); border: 1px solid var(--obwodka); }
.próbka__opis { display: block; font-family: var(--kroj-liczba); font-size: .8rem; color: var(--atrament-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__tasma, .hero__plyta, .hero__wiersze,
  .hero__kolumny, .hero__notowania, .hero__scrim,
  .stopka__plyta, .stopka__tasma { display: none !important; }
  html { font-size: 11pt; }
  body, .naglowek, .hero, .stopka, .pasmo, .pasmo:last-of-type {
    background: #fff !important; color: #000 !important;
  }
  .tytul, .tresc h2, .tresc h3, .znak__slowo, .stopka__znak { color: #000 !important; }
  .hero p, .pasmo:last-of-type p, .pasmo:last-of-type .zajawka,
  .stopka__menu a, .menu__link { color: #000 !important; border-inline-start-color: #000 !important; }
  a.przycisk { background: none !important; color: #000 !important; box-shadow: none !important; }
  .pasmo > .kontener > *, .hero__kontener > * { max-width: none; }
  .pasmo > .kontener::after { display: none; }
}