/* =====================================================================
   otoszablony.pl — MAKIETA PREMIUM „BLOK PISMA”
   ---------------------------------------------------------------------
   Metafora z zastrzeżenia, które jest prawdziwą tezą serwisu: „NIE KAŻDE
   PISMO MA TEN SAM ZESTAW CZĘŚCI”. Rysunek to KOMPOZYCJA STRONY, nie
   lista: kreski stoją tam, gdzie w piśmie stoją jego części — data u góry
   po prawej, nadawca po lewej, adresat po prawej, tytuł na środku, podpis
   na dole po prawej. ŻĄDANIE ma 18 px wysokości wobec 5–9 px reszty, bo
   serwis nazywa je „najważniejszym zdaniem”. DWIE kreski są PRZERYWANE
   (oznaczenie sprawy, załączniki) — części, których nie każde pismo ma.

   ⚠⚠ PRZERYWANIE JEST TREŚCIĄ, NIE STYLEM. Bez niego rysunek mówiłby
   „zawsze dziewięć części”, czyli dokładnie to, czemu serwis zaprzecza.
   ⚠⚠ ŻADNEJ PIECZĄTKI, GODŁA, HERBU ANI ZAWIJASA PODPISU — serwis uczy
   BUDOWY pisma, nie urzędowego rytuału.
   ⚠⚠ ŻADNEGO PIÓRA, DŁUGOPISU, TECZKI ANI SPINACZA (zakaz rodziny
   TECHNIKA na „ikony przedmiotu”).
   ⚠⚠ ŻADNYCH LITER I CYFR: kreska ma być MIEJSCEM na tekst, nie tekstem —
   inaczej rysunek zacząłby dyktować treść pisma.
   ⚠ Rysunek jest JASNY NA CIEMNYM i to jest decyzja: ciemny na jasnym
   wyszedłby jako skan pisma, a ma być SCHEMATEM UKŁADU.
   ⚠⚠ To NIE matryca dobrykandydat.pl: tam pola stoją w regularnej siatce
   i liczy się, które są puste; tu kreski mają WŁASNE MIEJSCE NA STRONIE
   i różną wagę.
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz /
   dokladka.py. Domena na liście premium-recznie.txt.
   ⚠ KANON 10b: karty to gołe `<article class="zapowiedz">` bez `<ul>`.
   ⚠ Domena leży w ST-A2 — bramki z korzenia ~/STRONY-WWW-ST-A2.
   ⚠ Kanon premium, punkty 1–19 (w tym 2c). Każda para kontrastu ma zapas
   co najmniej 0,5 nad progiem.
   ===================================================================== */

/* ⚠ NAPRAWA 2026-09-06 (Opus 5): `margin-inline: auto` dla .kroki, .wyliczenie i .zrodlo.
   Skrót `margin: … 0 …` w tych trzech regułach (swoistość 0-2-0, PÓŹNIEJ w arkuszu) bił
   `.pasmo > .kontener > * { margin-inline: auto }` i przy 1100–1439 px — czyli na typowym
   ekranie laptopa — listy i ramka źródeł stały 204 px w lewo od kolumny prozy. Powyżej progu
   siatki (1440 px) blok @media i tak ustawia `margin-inline: 0`, więc szerokie ekrany bez zmian.
   Zmierzone sondą narzedzia-fable/sonda-listy-1366.mjs na 78 arkuszach premium. */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --atrament:       #24201C;
  --atrament-noc:   #191612;
  --atrament-blask: #3A342C;
  --papier:         #F4F2EE;
  --karta:          #FFFFFF;

  --tekst:       #201C18;   /* 15,14 / 16,93 */
  --tekst-cichy: #55504A;   /*  7,13 */
  --na-atramencie: #EFEBE4; /* 13,61 / 15,17 / 10,35 na blasku */
  --na-atramencie-cichy: #B6AFA5; /* 7,44 / 8,30 / 5,66 na blasku */

  /* błękit pruski — TRZY wartości (kanon, punkt 12), policzone */
  --pruski:        #10425F; /* PISMO — 9,55 / 10,68 */
  --pruski-kreska: #3688B7; /* kreski — 3,50 / 3,92 */
  --pruski-jasny:  #8CC4DE; /* na płytach — 8,52 / 9,50 / 6,48 */

  --obwodka:       #837C74; /* 3,68 / 4,12 */
  --linia-cicha:   #E2DDD5;
  --obwodka-ciemna:#463F36;

  --kroj-naglowek: "Literata", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Manrope", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Overpass 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(36, 32, 28, .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(--pruski-jasny); color: var(--atrament); }
:focus-visible { outline: 3px solid var(--pruski); outline-offset: 2px; }
.naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--pruski-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(--pruski-jasny); color: var(--atrament); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--atrament);
  background-image: linear-gradient(180deg, var(--atrament-noc) 0%, var(--atrament) 62%, var(--atrament-blask) 100%);
}
/* wzdłuż dolnej krawędzi: kreski o RÓŻNEJ wadze, jedna gruba, jedna przerywana */
.naglowek__pismo {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 14px;
  background-image:
    repeating-linear-gradient(90deg,
      var(--pruski-jasny) 0 74px, transparent 74px 210px),                 /* żądanie — gruba */
    repeating-linear-gradient(90deg,
      transparent 0 90px, var(--pruski-jasny) 90px 132px, transparent 132px 210px), /* zwykła */
    repeating-linear-gradient(90deg,
      transparent 0 148px, var(--pruski-jasny) 148px 155px,
      transparent 155px 162px, var(--pruski-jasny) 162px 169px,
      transparent 169px 176px, var(--pruski-jasny) 176px 183px,
      transparent 183px 210px);                                            /* przerywana */
  background-size: 100% 7px, 100% 4px, 100% 4px;
  background-position: 0 100%, 0 calc(100% - 9px), 0 calc(100% - 9px);
  background-repeat: repeat-x;
  opacity: .5;
}
.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-atramencie); text-decoration: none; }
/* znak rozpoznawczy: TRZY KRESKI, ŚRODKOWA NAJGRUBSZA — waga żądania */
.znak__pismo {
  flex: none; width: 26px; height: 18px;
  background-image:
    linear-gradient(90deg, var(--pruski-jasny) 0 100%),
    linear-gradient(90deg, var(--pruski-jasny) 0 100%),
    linear-gradient(90deg, var(--pruski-jasny) 0 100%);
  background-size: 18px 3px, 26px 8px, 14px 3px;
  background-position: 0 0, 0 6px, 0 15px;
  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: -.016em;
}
.znak:hover .znak__slowo { color: var(--pruski-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-atramencie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .73rem; letter-spacing: -.01em;
}
.menu__link:hover { color: var(--na-atramencie); }
/* pozycja bieżąca: GRUBA kreska pod napisem — wybrana pozycja waży więcej.
   ⚠⚠ 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-atramencie); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 8px; inset-inline: .5em;
  height: 6px; background: var(--pruski-jasny);
}

/* --- 5. HERO — blok pisma ------------------------------------------ */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--atrament);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--atrament);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--atrament-blask) 0%, rgba(58, 52, 44, 0) 62%),
    linear-gradient(180deg, var(--atrament) 0%, var(--atrament-noc) 100%);
}
.hero__pismo {
  position: absolute; z-index: 1;
  inset-block-start: 50%; inset-inline-end: -8%;
  width: min(44rem, 72vw); aspect-ratio: 1200 / 420;
  transform: translateY(-50%);
  color: var(--pruski-jasny); opacity: .32;
}
.hero__pismo svg { width: 100%; height: 100%; }
/* Scrim kończy się na 46 procentach — po prawej leży kolumna adresata
   i podpis, a bez nich układ przestaje być układem pisma. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(25, 22, 18, .95) 0%, rgba(25, 22, 18, .88) 26%, rgba(25, 22, 18, .13) 46%, rgba(25, 22, 18, 0) 100%);
}
.hero__kontener { position: relative; z-index: 3; }

/* ⚠ 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.1; letter-spacing: -.024em;
  color: var(--tekst); text-wrap: balance;
}
.hero .tytul { color: var(--na-atramencie); }
/* nad tytułem: trzy kreski, środkowa gruba, ostatnia przerywana */
.hero .tytul::before {
  content: ""; display: block;
  width: 7rem; height: 1.4rem; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--pruski-jasny) 0 100%),
    linear-gradient(90deg, var(--pruski-jasny) 0 100%),
    repeating-linear-gradient(90deg, var(--pruski-jasny) 0 9px, transparent 9px 17px);
  background-size: 4.6rem 3px, 7rem 9px, 3.4rem 3px;
  background-position: 0 0, 0 6px, 0 19px;
  background-repeat: no-repeat, no-repeat, repeat-x;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-atramencie);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-atramencie-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(--pruski-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(--atrament-noc);
  background-image: linear-gradient(180deg, var(--atrament) 0%, var(--atrament-noc) 100%);
  color: var(--na-atramencie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--pruski-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-atramencie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-atramencie); }
/* ⚠⚠ 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-atramencie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-atramencie-cichy); border-inline-start-color: var(--pruski-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--pruski-jasny); text-decoration-color: var(--pruski-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-atramencie); }

/* --- 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: -.022em;
  color: var(--tekst); text-wrap: balance;
}
/* numer sekcji NAD GRUBĄ KRESKĄ o szerokości numeru — sekcja zaczyna się
   od swojego „najważniejszego zdania”. */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  display: block; width: 3.4rem; margin-block-end: .6rem; padding-block-end: .5rem;
  border-block-end: 7px solid var(--pruski-kreska);
  font-family: var(--kroj-maszyna); font-weight: 600;
  font-size: .72rem; letter-spacing: -.01em; line-height: 1.5;
  color: var(--pruski);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--pruski-jasny); border-block-end-color: var(--pruski-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.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(--pruski-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--pruski);
  text-decoration-line: underline; text-decoration-color: var(--pruski-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc p a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }

/* --- 8. CZĘŚCI PISMA -----------------------------------------------
   KROKI to procedura po kolei — numer w PEŁNYM pudełku.
   WYLICZENIE to CZĘŚCI pisma — krótka kreska o pełnej wadze, nie kropka:
   każda pozycja jest kawałkiem dokumentu, a nie punktem listy.
   -------------------------------------------------------------------- */
.tresc .kroki { margin: .4em auto 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; }
.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(--pruski); color: var(--karta);
  font-family: var(--kroj-maszyna); font-weight: 600; font-size: .69rem;
}
.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(--pruski-jasny); color: var(--atrament); }

.tresc .wyliczenie { margin: .4em auto 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 1.8rem; }
/* znacznik: krótka kreska o pełnej wadze — kawałek pisma */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .72em; inset-inline-start: 0;
  width: 15px; height: 5px; background: var(--pruski-kreska);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before { background: var(--pruski-jasny); }

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

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

/* --- 11. KARTY KATALOGU — CZĘŚCI O RÓŻNEJ WADZE --------------------
   ⚠⚠ KANON 10b: karty to `<article class="zapowiedz">` stojące WPROST
   w kontenerze — nie ma `<ul class="lista-wpisow">`.
   -------------------------------------------------------------------- */
.tresc .zapowiedz {
  position: relative; display: flex; flex-direction: column;
  margin-block: 0 clamp(1rem, .6rem + 1.2vw, 1.7rem);
  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);
}
.tresc .zapowiedz:last-of-type { margin-block-end: 0; }
.pasmo:nth-of-type(even) .zapowiedz { background: var(--papier); }
/* gruba kreska na górnej krawędzi — karta ma swoje najważniejsze zdanie */
.tresc .zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 3.4rem; height: 7px; background: var(--pruski-kreska);
}
/* ⚠⚠ KANON 6: tytuł karty JEST h2 — cofamy reguły „.tresc h2” tym samym
   prefiksem, RAZEM Z GRUBĄ KRESKĄ NUMERU (border-block-end + szerokość
   + padding-block-end). */
.tresc .zapowiedz__tytul {
  margin: .3rem 0 .5rem; padding: 0; border: 0;
  width: auto; background: none; max-width: none; display: block;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.06rem, .98rem + .4vw, 1.3rem); line-height: 1.3; letter-spacing: -.02em;
  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) — tu kart nie
   ma w `li`, ale prefiks zostaje dla spójności z resztą serii. */
.tresc .zapowiedz__tytul a { display: block; min-height: 44px; color: var(--tekst); text-decoration: none; }
.tresc .zapowiedz__tytul a:hover { color: var(--pruski); 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(--pruski); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--pruski-kreska);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--tekst); border-block-end-color: var(--tekst); }
/* ⚠ `.zapowiedz__wiecej` ma OBIE klasy naraz (`zapowiedz__wiecej przejscie`),
   więc reguła odsyłacza kierunkowego (0-2-1) dawała mu pudełko z obwódką. */
.tresc .zapowiedz .przejscie a {
  background: none; border: 0; border-block-end: 2px solid var(--pruski-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--pruski);
}
.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(--atrament-noc); color: var(--na-atramencie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--atrament-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--atrament-blask) 0%, rgba(58, 52, 44, 0) 64%),
    linear-gradient(180deg, var(--atrament) 0%, var(--atrament-noc) 84%);
}
.stopka__pismo {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 14px;
  background-image:
    repeating-linear-gradient(90deg, var(--pruski-jasny) 0 74px, transparent 74px 210px),
    repeating-linear-gradient(90deg, transparent 0 90px, var(--pruski-jasny) 90px 132px, transparent 132px 210px),
    repeating-linear-gradient(90deg,
      transparent 0 148px, var(--pruski-jasny) 148px 155px,
      transparent 155px 162px, var(--pruski-jasny) 162px 169px,
      transparent 169px 176px, var(--pruski-jasny) 176px 183px,
      transparent 183px 210px);
  background-size: 100% 7px, 100% 4px, 100% 4px;
  background-position: 0 0, 0 10px, 0 10px;
  background-repeat: repeat-x;
  opacity: .5;
}
.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-atramencie);
}
.stopka__znak::after {
  content: ""; display: block; width: 3.6rem; height: 7px; margin-block-start: .6rem;
  background: var(--pruski-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-atramencie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .73rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--pruski-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — KRESKI O RÓŻNEJ WADZE 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; }

  /* KRESKI O RÓŻNEJ WADZE pionowo w prawym torze, jedna przerywana */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 1.5rem; min-height: 4rem;
    background-image:
      repeating-linear-gradient(180deg, var(--pruski-kreska) 0 58px, transparent 58px 168px),
      repeating-linear-gradient(180deg, transparent 0 74px, var(--pruski-kreska) 74px 108px, transparent 108px 168px),
      repeating-linear-gradient(180deg,
        transparent 0 124px, var(--pruski-kreska) 124px 130px,
        transparent 130px 136px, var(--pruski-kreska) 136px 142px,
        transparent 142px 148px, var(--pruski-kreska) 148px 154px,
        transparent 154px 168px);
    background-size: 7px 100%, 4px 100%, 4px 100%;
    background-position: 0 0, 11px 0, 11px 0;
    background-repeat: repeat-y;
    opacity: .4;
    -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:
      repeating-linear-gradient(180deg, var(--pruski-jasny) 0 58px, transparent 58px 168px),
      repeating-linear-gradient(180deg, transparent 0 74px, var(--pruski-jasny) 74px 108px, transparent 108px 168px),
      repeating-linear-gradient(180deg,
        transparent 0 124px, var(--pruski-jasny) 124px 130px,
        transparent 130px 136px, var(--pruski-jasny) 136px 142px,
        transparent 142px 148px, var(--pruski-jasny) 148px 154px,
        transparent 154px 168px);
    opacity: .52;
  }
}

/* --- 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: .73rem; 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__pismo, .hero__plyta, .hero__pismo,
  .hero__scrim, .stopka__plyta, .stopka__pismo { 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-block-end-color: #000 !important; }
  .tresc .kroki li::before { background: none !important; color: #000 !important; border: 1px solid #000; }
  .tresc .wyliczenie li::before, .tresc .zapowiedz::before, .stopka__znak::after { background: #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; }
}