@charset "utf-8";
/* =====================================================================
   CISZA — system projektowy makiety spowiednik.pl (przebudowa premium)
   Seria STRONY-WWW-ST-CBF. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy, zero pól tekstowych.

   IDEA. Temat jest intymny, więc premium bierze się z POWŚCIĄGLIWOŚCI, nie
   z efektu. Motywem przewodnim jest SZCZELINA — wąska pionowa przerwa, przez
   którą wpada światło. Wraca jako: pionowa kreska wisząca przy nagłówkach,
   szyna biegnąca wzdłuż kolumny prozy, znacznik pozycji listy, snop pionowych
   linii w hero i faktura stopki. Ornament jest wyłącznie abstrakcyjny:
   światło, szczelina, linia.
   ⚠⚠ ŚWIADOMIE ZERO SYMBOLI RELIGIJNYCH. Żadnego krzyża, świecy, witraża,
   sylwetki, kraty konfesjonału ani barwy liturgicznej. Nazwa domeny kusi
   w tę stronę, a serwis wprost NIE jest sakramentem, duchownym ani miejscem
   przyjmującym sekrety.

   ⚠ Kolejność ma znaczenie dla pułapek: reguły ogólne PRZED komponentami,
   a każdy komponent stojący w prozie ma prefiks „.tresc”, żeby wygrać
   specyficzność z „.tresc p a” (0-2-1).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne — dużo światła */
  --papier:          #FBF9F5;   /* ciepła biel — podłoże */
  --papier-karta:    #FFFFFF;   /* płyta, karta */
  --tlo-2:           #F0ECE3;   /* kamień — pasmo drugoplanowe */
  --wiodaca-jasna:   #E8E3D7;   /* pola numerów, plakietki */

  /* powierzchnie ciemne — noc */
  --noc:             #0D1424;   /* najgłębsza — hero, stopka */
  --noc-2:           #111A2E;   /* panel „moment ciszy” */
  --noc-3:           #17223A;   /* karta na ciemnym */
  --noc-4:           #1E2B47;   /* pole ciche na ciemnym */

  /* pismo */
  --atrament:        #141821;   /* proza na jasnym  — 16,89:1 */
  --atrament-cichy:  #4C5261;   /* zajawki, podpisy — 7,43:1 */
  --wiodaca:         #22314F;   /* granat: kreski i powierzchnie */
  --wiodaca-ciemna:  #1B2740;   /* nagłówki i odsyłacze na jasnym */
  --akcent:          #7A5C18;   /* przygaszone złoto — tekst na jasnym */
  --zloto:           #D8BC85;   /* złoto świecy na ciemnym */
  --zloto-cieple:    #E3CB9C;
  --na-ciemnym:      #F6F2EA;
  --na-ciemnym-cichy:#C9CEDA;
  --na-wiodacej:     #FBF9F5;
  --linia:           #89826F;   /* obwódki — element nietekstowy 3,25:1 */
  --linia-cicha:     #D5CDBA;   /* ramka kartki */
  --linia-noc:       #2C3A57;   /* ramka na ciemnym */
  --linia-noc-mocna: #68748F;

  /* ornamenty — wyłącznie warstwa wizualna, nigdy nośnik informacji */
  --orn-granat:      rgba(34, 49, 79, .075);
  --orn-granat-mocny: rgba(34, 49, 79, .14);
  --orn-zloto:       rgba(216, 188, 133, .13);
  --orn-zloto-mocny: rgba(216, 188, 133, .30);
  --orn-swiatlo:     rgba(246, 242, 234, .09);

  --kroj-naglowek: "Cormorant Garamond", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --kroj-tekst:    "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* ⚠⚠ MIARA W REM, NIE W EM ani w ch — jedna krawędź dla nagłówków, prozy
     i kresek; ch w kroju o wąskim zerze zawyża liczbę znaków w wierszu. */
  --kolumna:   35rem;   /* łam prozy ≈ 68 znaków */
  --pas-szer:  60rem;   /* szerokość płyty/pasma treści */
  --rama-szer: 84rem;   /* pasek nagłówka i stopki — szerszy niż kolumna */
  --margines:  clamp(20px, 5vw, 104px);
  /* ⚠ pasek nagłówka i stopki ma WŁASNY, węższy margines: przy marginesie
     kolumny sygnatura i menu nie mieściły się w jednym wierszu przy 1366 px
     (brakowało 29 px) i pasek łamał się na dwa rzędy. */
  --margines-rama: clamp(20px, 3.2vw, 84px);
  /* luz — tor, o który poszerzają się bloki „.szeroki”. Na wąskim ekranie
     musi być ZEREM, inaczej odbiera kolumnie prozy ponad 50 px na 360. */
  --luz:       clamp(0px, calc((100vw - 46rem) * .16), 6rem);
  --szyna:     2.6rem;  /* odległość kreski wiszącej od kolumny prozy */
  --rynna:     calc(var(--luz) + 1.7rem);  /* szyna światła obok kolumny */

  --promien:       2px;
  --promien-duzy:  3px;
  --cien-plyta: 0 30px 60px -34px rgba(13, 20, 36, .40), 0 2px 6px -3px rgba(13, 20, 36, .10);
  --cien-karta: 0 18px 34px -26px rgba(13, 20, 36, .38), 0 1px 3px -2px rgba(13, 20, 36, .10);
  --zachodzenie: clamp(1.4rem, .9rem + 1.8vw, 3.4rem);
}

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

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@supports (overflow: clip) { html { overflow-x: clip; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--kroj-tekst);
  font-size: 1rem;
  line-height: 1.78;
  /* ⚠ długie adresy urzędowe w prozie rozpychały widok na 360 px (bramka B5) */
  overflow-wrap: break-word;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg { max-width: 100%; height: auto; }
/* ⚠⚠ pułapka „globalne strong,b{color}” — pogrubiamy samą wagą pisma */
strong, b { color: inherit; font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
  border-radius: var(--promien);
}
.pas--noc :focus-visible, .naglowek :focus-visible, .stopka :focus-visible,
.hero :focus-visible { outline-color: var(--zloto); }

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (B7 mierzy prostokąt) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 200px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.6rem;
  background: var(--noc); color: var(--zloto);
  border-block-end: 1px solid var(--zloto);
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  font-size: .82rem; text-decoration: none;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — poziomy pasek nagłówka i stopki. ⚠ SZERSZY niż płyta treści:
   przy 68rem sygnatura i menu nie mieściły się w jednym wierszu i pasek
   łamał się na dwa rzędy, co od razu psuło pierwsze wrażenie. */
.rama {
  width: 100%;
  max-width: min(100%, var(--rama-szer));
  margin-inline: auto;
  padding-inline: var(--margines-rama);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z pustymi szynami po bokach: proza stoi
   w środkowym torze (symetrycznie — bramka B13 odrzuca kompozycję
   jednostronną), bloki „.szeroki” sięgają toru luzu, a pasy pełnej
   szerokości — samych krawędzi płyty. */
.kontener {
  position: relative;
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [szeroki-start] minmax(0, var(--luz))
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, var(--luz))
    [szeroki-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki,
.kontener > .warstwy,
.kontener > .kroki,
.kontener > .wyliczenie,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: szeroki-start / szeroki-end; }
.kontener > .pelny { grid-column: pelna-start / pelna-end; }

/* SZYNY ŚWIATŁA — dwie pionowe kreski obejmujące kolumnę treści; to ta sama
   szczelina, co w hero, tylko rozciągnięta na całą wysokość pasma. Ornament
   kotwiczony do KONTENERA, nie do okna (pułapka 19): 50% kontenera to zawsze
   środek kolumny, bo padding jest symetryczny. Pseudoelementy są pozycjonowane
   absolutnie, więc nie zakładają toru siatki.
   ⚠ Kreska stoi o „rynnę” od kolumny, czyli ZAWSZE poza blokami .szeroki —
   inaczej karta z własnym tłem przecinałaby ją w połowie. */
.pas > .kontener::before,
.pas > .kontener::after {
  content: ""; position: absolute; z-index: 0;
  inset-block: clamp(1.6rem, 3vw, 3.4rem);
  width: 1px;
  background: linear-gradient(180deg,
              transparent 0, var(--linia-cicha) 8%,
              var(--linia-cicha) 74%, transparent 100%);
  pointer-events: none;
}
.pas > .kontener::before { inset-inline-start: calc(50% - var(--kolumna) / 2 - var(--rynna)); }
.pas > .kontener::after  { inset-inline-start: calc(50% + var(--kolumna) / 2 + var(--rynna)); }
.pas > .kontener > * { position: relative; z-index: 1; }
@media (max-width: 1079px) {
  .pas > .kontener::before, .pas > .kontener::after { display: none; }
}
/* szyny na ciemnym paśmie muszą być z jaśniejszej strony palety */
.pas--noc > .kontener::before,
.pas--noc > .kontener::after,
.pas--nokturn > .kontener::before,
.pas--nokturn > .kontener::after {
  background: linear-gradient(180deg,
              transparent 0, var(--linia-noc-mocna) 10%,
              var(--linia-noc-mocna) 72%, transparent 100%);
}

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--noc);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 26px, var(--orn-swiatlo) 26px 27px);
  color: var(--na-ciemnym);
  border-block-end: 1px solid var(--linia-noc);
}
.naglowek::after {
  content: ""; display: block; height: 1px;
  background: linear-gradient(90deg,
              rgba(216, 188, 133, 0) 0%, var(--zloto) 34%,
              rgba(216, 188, 133, .18) 68%, rgba(216, 188, 133, 0) 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .2rem clamp(.8rem, 2.2vw, 2.6rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* sygnatura słowna — wyłącznie typograficzna, nigdy nie udaje logotypu (T9) */
.znak {
  display: inline-flex; align-items: center; min-height: 46px;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.12rem, 1rem + .42vw, 1.6rem);
  /* ⚠ pułapka 5 z katalogu: przy interlinii poniżej ~1,2 akcent pod pierwszym
     wyrazem wchodzi w drugi wiersz, gdy sygnatura łamie się na 360–390 px. */
  line-height: 1.42; letter-spacing: .045em;
  text-decoration: none; color: var(--na-ciemnym);
  padding-inline-end: .2em;
}
.znak__tekst { position: relative; padding-block-end: .1em; }
/* ⚠ RECENZJA: kreska o szerokości 1,6em podkreślała tylko „Spo”, kończyła się
   w środku wyrazu, przecinało ją zejście litery „p”, a przy złamaniu sygnatury
   na dwa wiersze (360–390 px) lądowała pod „rozmową”, zderzając się z „ą”.
   Teraz akcent jest ZWIĄZANY Z PIERWSZYM WYRAZEM: obejmuje go w całości, stoi
   pod linią zejść i nie przeskakuje, bo wyraz nigdy się nie łamie. */
.znak__slowo { position: relative; white-space: nowrap; }
.znak__slowo::after {
  content: ""; position: absolute;
  inset-inline: -.04em; inset-block-end: -.26em;
  height: 2px; background: var(--zloto);
  transition: background .3s ease;
}
.znak:hover .znak__slowo::after { background: var(--zloto-cieple); }

/* ⚠ nawigacja MA się kurczyć i zawijać (B5 na 360 px). Menu na zwykłej
   liście — bez <details>, więc pułapka T7 nie ma tu zastosowania. */
.menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0 clamp(.1rem, .8vw, .95rem);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 760px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
  .menu__lista { margin-inline-start: -.55em; }
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .5em;
  font-weight: 500; font-size: .76rem;
  letter-spacing: .11em; text-transform: uppercase;
  text-decoration: none; color: var(--na-ciemnym-cichy);
  transition: color .2s ease;
}
/* ⚠⚠ RECENZJA: znacznik pozycji bieżącej był pionową kreską 1 x 11 px stojącą
   8 px przed literą „S” — czyli DOKŁADNIE w rozmiarze i miejscu glifu „|”,
   więc menu czytało się „|START”. Znacznik jest teraz KRESKĄ WIODĄCĄ POD
   ETYKIETĄ: 2 px, na pełnej szerokości pozycji, w złocie świecy. Najechanie
   daje kreskę cichszą, więc stan bieżący różni się grubością i nasyceniem,
   nie samą barwą (kolor nigdy nie jest jedynym nośnikiem znaczenia). */
.menu__link::after {
  content: ""; position: absolute;
  inset-block-end: .5rem; inset-inline: .5em;
  height: 2px; background: transparent;
  transition: background .2s ease;
}
.menu__link:hover { color: var(--na-ciemnym); }
.menu__link:hover::after { background: rgba(216, 188, 133, .45); }
.menu__link[aria-current="page"] { color: var(--zloto-cieple); }
.menu__link[aria-current="page"]::after { background: var(--zloto); }

/* --- 5. HERO — ciemny pas z jednym promieniem światła ----------------- */
.tresc { display: block; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--noc);
  background-image:
    radial-gradient(58% 78% at 50% -6%, rgba(216, 188, 133, .20) 0%, rgba(216, 188, 133, 0) 62%),
    radial-gradient(88% 70% at 50% 4%, rgba(45, 68, 112, .60) 0%, rgba(45, 68, 112, 0) 68%),
    radial-gradient(60% 50% at 8% 100%, rgba(29, 43, 74, .55) 0%, rgba(29, 43, 74, 0) 70%),
    linear-gradient(178deg, #16223A 0%, #101A2E 52%, #0B1120 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3.4rem, 1.8rem + 5.6vw, 9rem) clamp(4.2rem, 2rem + 6.4vw, 10rem);
  text-align: center;
}
.hero--krotki {
  padding-block: clamp(2.8rem, 1.6rem + 4vw, 6.4rem) clamp(3.4rem, 1.8rem + 4.6vw, 7.4rem);
}
/* ORNAMENT: snop pionowych linii — światło przez szczelinę. Inline SVG,
   aria-hidden, bez jednej nowej informacji. */
.hero__szczelina {
  position: absolute; z-index: 0; inset: 0;
  display: block;
  color: var(--na-ciemnym);     /* B6: barwa ikony wobec tła hero — 16,46:1 */
  pointer-events: none;
}
.hero__szczelina svg { width: 100%; height: 100%; display: block; }
/* zasłona — przygasza snop dokładnie tam, gdzie stoi tytuł i lid; bez niej
   pionowe linie przechodziły przez tekst i utrudniały czytanie na 390 px */
.hero__zaslona {
  position: absolute; z-index: 0; inset: 0;
  background: radial-gradient(64% 54% at 50% 54%,
              rgba(11, 17, 32, .78) 0%, rgba(11, 17, 32, .46) 44%,
              rgba(11, 17, 32, 0) 78%);
  pointer-events: none;
}
.hero__blask {
  position: absolute; z-index: 0;
  inset-block-start: -34%; inset-inline-start: 50%;
  width: clamp(340px, 52vw, 900px); aspect-ratio: 1 / 1.25;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 30%,
              rgba(227, 203, 156, .17) 0%, rgba(227, 203, 156, .05) 38%,
              rgba(227, 203, 156, 0) 68%);
  pointer-events: none;
}
/* ⚠ RECENZJA: poniżej 480 px linie snopu przechodziły przez wiersze lidu
   i tło pod tekstem wyglądało jak niedokończone maskowanie. Na wąskim ekranie
   snop jest cichszy, a zasłona kryje CAŁY blok tytułu i lidu, nie tylko środek
   pasa. Powyżej 560 px zostaje wersja pełna — tam linie nie wchodzą w tekst. */
@media (max-width: 560px) {
  .hero__szczelina { opacity: .46; }
  .hero__zaslona {
    background:
      radial-gradient(84% 44% at 50% 60%, rgba(11, 17, 32, .93) 0%,
                      rgba(11, 17, 32, .80) 56%, rgba(11, 17, 32, 0) 100%),
      linear-gradient(180deg, rgba(11, 17, 32, 0) 0%, rgba(11, 17, 32, .52) 22%,
                      rgba(11, 17, 32, .82) 46%, rgba(11, 17, 32, .82) 90%,
                      rgba(11, 17, 32, .30) 100%);
  }
}
.hero > .kontener { position: relative; z-index: 1; }
/* w hero treść jest wyśrodkowana i szersza niż łam prozy */
.kontener--hero > * { grid-column: szeroki-start / szeroki-end; }

.hero .tytul {
  margin: 0;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(2.35rem, 1.1rem + 3.9vw, 5.2rem);
  line-height: 1.06; letter-spacing: .028em;
  color: var(--na-ciemnym);
  max-width: 17em; margin-inline: auto;
  text-wrap: balance;
}
.hero--krotki .tytul { font-size: clamp(2rem, 1.05rem + 2.9vw, 4rem); max-width: 19em; }
/* szczelina nad tytułem — pionowa kreska światła, nie ozdobnik-atrakcja */
.hero .tytul::before {
  content: ""; display: block;
  width: 1px; height: clamp(2.6rem, 1.6rem + 2.4vw, 5rem);
  margin: 0 auto clamp(1.4rem, .9rem + 1.4vw, 2.8rem);
  background: linear-gradient(180deg, rgba(216, 188, 133, 0), var(--zloto));
}
.hero .wprowadzenie, .hero .zajawka {
  margin: clamp(1.5rem, 1rem + 1.4vw, 2.8rem) auto 0;
  max-width: 36rem;
  font-size: 1.12rem; line-height: 1.74;
  color: var(--na-ciemnym-cichy);
  text-wrap: pretty;
}
/* domknięcie hero: cienka szczelina światła nad krawędzią papieru */
.hero::after {
  content: ""; position: absolute; z-index: 0;
  inset-block-end: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg,
              rgba(216, 188, 133, 0) 12%, rgba(216, 188, 133, .55) 50%,
              rgba(216, 188, 133, 0) 88%);
}

/* --- 6. PASMA -------------------------------------------------------- */
/* flow-root: ujemny margines płyty ma PRZESUNĄĆ płytę, a nie całe pasmo */
.pas { position: relative; display: flow-root; }

.pas--papier { background-color: var(--papier); padding-block: clamp(2.2rem, 1.2rem + 3vw, 4.6rem); }

.pas--kamien {
  background-color: var(--tlo-2);
  background-image:
    radial-gradient(74% 62% at 50% 0%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--orn-granat) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--orn-granat) 29px 30px);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, clamp(90px, 18vw, 300px) 100%, clamp(90px, 18vw, 300px) 100%;
  background-position: center top, left top, right top;
  padding-block: clamp(2.6rem, 1.4rem + 3.4vw, 5.2rem);
  border-block: 1px solid var(--linia-cicha);
}
.pas--kamien + .pas--kamien { border-block-start: 0; }

/* pasmo, na którym leży biała PŁYTA — kartka notesu, cienka ramka, cichy cień */
.pas--karta,
.pas--wstep { background-color: var(--papier); padding-block: clamp(1.6rem, 1rem + 2vw, 3.4rem); }
.pas--karta > .kontener,
.pas--wstep > .kontener {
  /* ⚠ background-COLOR, nie skrót „background”: skrót skasowałby gzyms,
     który jest warstwą obrazu tła (::after trzyma szynę światła). */
  background-color: var(--papier-karta);
  /* ⚠ RECENZJA: gzyms miał ok. 200 px szerokości i w skali strony czytał się
     jak brudny wiersz pikseli albo artefakt kompresji. Teraz biegnie przez
     CAŁĄ szerokość płyty i wygasa do zera przy obu krawędziach. */
  background-image: linear-gradient(90deg,
              rgba(122, 92, 24, 0) 0%, rgba(122, 92, 24, .30) 12%,
              var(--akcent) 50%,
              rgba(122, 92, 24, .30) 88%, rgba(122, 92, 24, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: center top;
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-plyta);
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 4.2rem);
}
/* wstęp NACHODZI na hero — jedyne miejsce, gdzie warstwy zachodzą na siebie */
.pas--wstep { padding-block-start: 0; }
.pas--wstep > .kontener {
  margin-block-start: calc(-1 * var(--zachodzenie));
  z-index: 2;
}


/* PANEL CISZY — jedyne ciemne pasmo w środku strony. Nadpisujemy TOKENY, więc
   każdy komponent w środku dostaje wariant na ciemnym bez osobnych reguł
   (pułapka „globalny kolor na powierzchni o odwrotnej jasności”). */
.pas--noc {
  --papier:          var(--noc-2);
  --papier-karta:    var(--noc-3);
  --tlo-2:           var(--noc-3);
  --wiodaca-jasna:   var(--noc-4);
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--na-ciemnym-cichy);
  --wiodaca:         var(--zloto);
  --wiodaca-ciemna:  var(--na-ciemnym);
  --akcent:          var(--zloto);
  --na-wiodacej:     var(--noc);
  --linia:           var(--linia-noc-mocna);
  --linia-cicha:     var(--linia-noc);
  position: relative; overflow: hidden;
  background-color: var(--noc-2);
  background-image:
    radial-gradient(64% 74% at 50% 0%, rgba(216, 188, 133, .10) 0%, rgba(216, 188, 133, 0) 60%),
    radial-gradient(80% 80% at 50% 6%, rgba(37, 56, 94, .55) 0%, rgba(37, 56, 94, 0) 70%),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--orn-zloto) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--orn-zloto) 29px 30px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, clamp(90px, 18vw, 320px) 100%, clamp(90px, 18vw, 320px) 100%;
  background-position: center, center, left top, right top;
  color: var(--na-ciemnym);
  padding-block: clamp(3rem, 1.6rem + 3.8vw, 6.2rem);
}
.pas--noc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg,
              rgba(216, 188, 133, 0) 10%, var(--zloto) 50%, rgba(216, 188, 133, 0) 90%);
}

.pas--indeks {
  background-color: var(--tlo-2);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 29px, var(--orn-granat) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--orn-granat) 29px 30px);
  background-repeat: no-repeat, no-repeat;
  background-size: clamp(90px, 16vw, 260px) 100%, clamp(90px, 16vw, 260px) 100%;
  background-position: left top, right top;
  border-block-start: 1px solid var(--linia-cicha);
  padding-block: clamp(2.6rem, 1.4rem + 3.4vw, 5.4rem);
}

/* ⚠⚠ RECENZJA: „od drugiego ekranu w dół to ten sam prostokąt 6–9 razy”.
   Dwa dodatkowe opracowania pasma łamią rytm co trzecią sekcję. Oba korzystają
   z TEJ SAMEJ siatki kolumny prozy, więc kolumna nie przestaje być mierzalna
   (bramka B13 liczy dominującą lewą krawędź akapitów w <main>). */

/* WYIMEK — pasmo kamienne bez płyty. Nagłówek schodzi do roli nadtytułu
   (wersaliki, światło międzyliterowe, złoto przygaszone 5,28:1 na kamieniu),
   a pierwszy akapit jest podany dużym szeryfem jak akapit wiodący. */
.pas--wyimek {
  background-color: var(--tlo-2);
  background-image:
    radial-gradient(78% 76% at 50% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 66%),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--orn-granat-mocny) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--orn-granat-mocny) 29px 30px);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, clamp(70px, 12vw, 190px) 100%, clamp(70px, 12vw, 190px) 100%;
  background-position: center top, left top, right top;
  border-block: 1px solid var(--linia-cicha);
  padding-block: clamp(3rem, 1.6rem + 3.8vw, 6.4rem);
}
.pas--wyimek > .kontener > h2 {
  margin-block: 0 clamp(1rem, .7rem + .8vw, 1.7rem);
  padding-block-start: clamp(1rem, .8rem + .7vw, 1.7rem);
  font-family: var(--kroj-tekst); font-weight: 600;
  font-size: clamp(.8rem, .74rem + .26vw, .98rem);
  line-height: 1.5; letter-spacing: .2em; text-transform: uppercase;
  color: var(--akcent);
}
.pas--wyimek > .kontener > h2::before {
  inset-block-start: 0; inset-inline-start: 0;
  width: clamp(44px, 7vw, 88px); height: 2px;
  background: var(--akcent);
}
.pas--wyimek > .kontener > p:not(.odsylacz):not(.zrodlo):not(.cta):first-of-type {
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.3rem, 1.02rem + 1.05vw, 2.15rem);
  line-height: 1.44; letter-spacing: .008em;
  color: var(--wiodaca-ciemna);
  margin-block-end: 1em;
}
.pas--wyimek > .kontener > p:not(.odsylacz):not(.zrodlo):not(.cta)
                        + p:not(.odsylacz):not(.zrodlo):not(.cta) { color: var(--atrament-cichy); }

/* NOKTURN — płyta na nocnym granacie postawiona na papierze. Nadpisuje żetony
   barw na SAMEJ PŁYCIE (nie na paśmie), więc komponenty w środku dostają
   wariant na ciemnym bez osobnych reguł, a pasmo dokoła zostaje jasne. */
.pas--nokturn { background-color: var(--papier); padding-block: clamp(1.8rem, 1rem + 2.2vw, 3.8rem); }
.pas--nokturn > .kontener {
  --papier:          var(--noc-2);
  --papier-karta:    var(--noc-3);
  --tlo-2:           var(--noc-3);
  --wiodaca-jasna:   var(--noc-4);
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--na-ciemnym-cichy);
  --wiodaca:         var(--zloto);
  --wiodaca-ciemna:  var(--na-ciemnym);
  --akcent:          var(--zloto);
  --na-wiodacej:     var(--noc);
  --linia:           var(--linia-noc-mocna);
  --linia-cicha:     var(--linia-noc);
  background-color: var(--noc-3);
  background-image:
    radial-gradient(70% 80% at 50% 0%, rgba(216, 188, 133, .10) 0%, rgba(216, 188, 133, 0) 62%),
    linear-gradient(90deg, rgba(216, 188, 133, 0) 0%, rgba(216, 188, 133, .34) 12%,
                    var(--zloto) 50%, rgba(216, 188, 133, .34) 88%, rgba(216, 188, 133, 0) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: auto, 100% 2px;
  background-position: center top, center top;
  border: 1px solid var(--linia-noc);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-plyta);
  color: var(--na-ciemnym);
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 4.2rem);
}

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.4rem, 1.5rem + 2.2vw, 4rem) 0 .9rem;
  padding-block-start: clamp(.3rem, .2rem + .3vw, .7rem);
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.62rem, 1.15rem + 1.6vw, 2.85rem);
  line-height: 1.16; letter-spacing: .012em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* SZCZELINA PRZY nagłówku — pionowa kreska, nie pozioma linijka.
   ⚠ RECENZJA: kreska stała SAMOTNIE kilkadziesiąt pikseli nad nagłówkiem
   i czytała się jak osierocony znacznik. Teraz wisi PRZY PIERWSZYM WIERSZU:
   poniżej 1080 px tuż przy krawędzi kolumny, powyżej — w szynie poza kolumną. */
.tresc h2::before {
  content: ""; position: absolute;
  inset-block-start: .3em; inset-inline-start: -.8rem;
  width: 2px; height: 1.3em;
  background: linear-gradient(180deg, var(--akcent), rgba(122, 92, 24, .18));
}
/* od 1080 px kreska WISI w szynie, poza kolumną prozy */
@media (min-width: 1080px) {
  .tresc h2::before {
    inset-block-start: .34em; inset-inline-start: calc(-1 * var(--szyna));
    height: 1.5em;
    background: linear-gradient(180deg, var(--akcent), rgba(122, 92, 24, .1));
  }
}
.kontener > h2:first-child { margin-block-start: 0; }

.tresc h3 {
  margin: clamp(1.5rem, 1.1rem + 1.1vw, 2.3rem) 0 .45rem;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.24rem, 1.08rem + .5vw, 1.62rem);
  line-height: 1.28; letter-spacing: .01em;
  color: var(--wiodaca-ciemna);
}

.tresc p { margin: 0 0 1.15em; }
.tresc p:last-child { margin-block-end: 0; }

/* ⚠ pułapka: „.tresc p a” (0-2-1) bije „.przycisk” (0-1-0) i tekst przycisku
   znika w kolorze własnego tła. Wyłączamy klasy komponentów z reguły linku. */
.tresc p a:not(.przycisk), .tresc li a:not(.przycisk) {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--akcent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-thickness .15s ease;
}
.tresc p a:not(.przycisk):hover, .tresc li a:not(.przycisk):hover {
  color: var(--akcent); text-decoration-thickness: 2px;
}

/* wstęp — proza podana z większym światłem */
/* pierwszy akapit pasma wstępu — proza podana krojem nagłówkowym; na widoku
   listy wpisów to JEDYNY akapit prozy w kolumnie, więc bramka B13 mierzy
   właśnie jego stopień pisma (⚠ lekcja: za krótkie wstępy usuwały kolumnę). */
.pas--wstep > .kontener > p:first-child {
  font-family: var(--kroj-naglowek);
  font-size: clamp(1.32rem, 1.05rem + 1vw, 2.05rem);
  font-weight: 500; line-height: 1.42; letter-spacing: .008em;
  color: var(--wiodaca-ciemna);
  margin-block-end: 1em;
}
.pas--wstep > .kontener > p:first-child + p { color: var(--atrament-cichy); }

/* --- 8. WARSTWY (bloki nagłówek + akapit obok siebie) ---------------- */
.tresc .warstwy {
  display: grid; gap: 1px;
  margin-block: clamp(1.4rem, 1rem + 1.4vw, 2.6rem) clamp(1.4rem, 1rem + 1.4vw, 2.4rem);
  background: var(--linia-cicha);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy);
  overflow: hidden;
}
@media (min-width: 900px) { .tresc .warstwy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tresc .warstwa {
  position: relative;
  background: var(--papier-karta);
  padding: clamp(1.3rem, .9rem + 1.2vw, 2.2rem) clamp(1.2rem, .8rem + 1.2vw, 2.1rem);
}
.tresc .warstwa::before {
  content: ""; position: absolute;
  inset-block-start: clamp(1.5rem, 1rem + 1.2vw, 2.4rem);
  inset-inline-start: 0; width: 2px; height: 1.6rem;
  background: var(--akcent);
}
.tresc .warstwa h3 { margin-block-start: 0; }
.tresc .warstwa p { margin-block-end: 0; color: var(--atrament-cichy); }

/* --- 9. KROKI (listy numerowane ze źródła) --------------------------- */
.tresc .kroki {
  margin: 1.2em 0 1.9em; padding: 0; list-style: none;
  counter-reset: krok;
  display: grid; gap: 1px;
  background: var(--linia-cicha);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy);
  overflow: hidden;
}
@media (min-width: 1000px) { .tresc .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tresc .kroki li {
  counter-increment: krok; position: relative;
  background: var(--papier-karta);
  padding: clamp(1.1rem, .8rem + 1vw, 1.8rem) clamp(1.1rem, .8rem + 1vw, 1.8rem)
           clamp(1.1rem, .8rem + 1vw, 1.8rem) clamp(3.6rem, 2.6rem + 2.4vw, 5.4rem);
  color: var(--atrament);
}
/* duża ozdobna cyfra — numer pozycji listy, którą numeruje samo źródło */
.tresc .kroki li::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute;
  inset-inline-start: clamp(1.1rem, .8rem + 1vw, 1.8rem);
  inset-block-start: calc(clamp(1.1rem, .8rem + 1vw, 1.8rem) - .12em);
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.7rem; line-height: 1;
  color: var(--akcent);
  letter-spacing: .02em;
}
.tresc .kroki li::after {
  content: ""; position: absolute;
  inset-block: clamp(1.1rem, .8rem + 1vw, 1.8rem);
  inset-inline-start: clamp(2.9rem, 2.1rem + 1.9vw, 4.3rem);
  width: 1px; background: var(--linia-cicha);
}

/* --- 10. WYLICZENIE -------------------------------------------------- */
.tresc .wyliczenie {
  margin: 1.1em 0 1.8em; padding: 0; list-style: none;
  display: grid; gap: .1rem;
}
@media (min-width: 1000px) { .tresc .wyliczenie { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2.4rem); } }
.tresc .wyliczenie li {
  position: relative;
  padding: .55em 0 .55em 1.7em;
  color: var(--atrament);
  border-block-end: 1px solid var(--linia-cicha);
}
/* znacznik pozycji = szczelina, czyli pionowa kreska */
.tresc .wyliczenie li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: .95em;
  width: 2px; height: .95em;
  background: var(--akcent);
}

/* --- 11. ODSYŁACZ KIERUNKOWY (osobny wiersz w źródle) ---------------- */
.tresc .odsylacz {
  position: relative;
  margin: 1.6em 0 1.9em;
  padding: 1em clamp(.85rem, .55rem + 1vw, 1.3rem) 1em clamp(.95rem, .65rem + 1.1vw, 1.5rem);
  background: var(--wiodaca-jasna);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 2px solid var(--akcent);
  border-radius: 0 var(--promien) var(--promien) 0;
  font-size: .98rem; line-height: 1.68;
  color: var(--atrament);
}
/* ⚠⚠ NAPRAWA 2026-08-31 — pole odsyłacza straciło RUSZTOWANIE REDAKCYJNE:
   nazwę pola („Link:”), cudzysłowy, strzałkę i nazwę strony docelowej. Zostaje
   sam tekst odsyłacza ze źródła i jest on JEDYNĄ zawartością akapitu, więc:
   1) blokowa etykieta nie ma już czego opisywać — reguła .odsylacz__etykieta
      usunięta (żaden widok jej nie używa);
   2) po skasowaniu wiersza etykiety pole zapadłoby się do wysokości ~19 px,
      dlatego odsyłacz przejmuje stopień pisma prozy (bez zmniejszania) i sam
      wypełnia pole;
   3) ⚠ BRAMKA B7: odsyłacz przestał być „odsyłaczem w prozie” (nie ma obok
      niego innego tekstu w akapicie), więc musi mieć własne pole trafienia
      ≥ 44 px — stąd min-height 44 px i symetryczne dopełnienie w pionie,
      które dodatkowo trzyma tekst na osi pola;
   4) ⚠ „white-space: nowrap” zdjęty razem ze ścieżką: nierozrywalne zdanie
      („Przygotuj przeprosiny bez wymuszania wybaczenia”) rozepchnęłoby widok
      360 px i zapaliło bramkę B5. */
.tresc .odsylacz a.odsylacz__cel {
  display: inline-block;
  min-height: 44px;
  padding-block: .55em;
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--akcent);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.tresc .odsylacz a.odsylacz__cel:hover { color: var(--akcent); text-decoration-thickness: 2px; }

/* na paśmie kamiennym pole odsyłacza w barwie wiodącej jasnej ginęło w tle —
   tam bierze biel karty */
.pas--kamien .tresc .odsylacz,
.pas--indeks .tresc .odsylacz,
.tresc .pas--kamien .odsylacz,
.tresc .pas--indeks .odsylacz { background: var(--papier-karta); }

/* --- 12. ŹRÓDŁO ------------------------------------------------------ */
.tresc .zrodlo {
  margin: 1.5em 0 1.9em;
  padding: 1.05em 1.3em 1.05em 1.5em;
  background: var(--papier);
  border: 1px dashed var(--linia);
  border-radius: var(--promien);
  font-size: .93rem; line-height: 1.7;
  color: var(--atrament-cichy);
}
/* ⚠ NAPRAWA 2026-08-31: w polu źródła nie ma już adresu ani odsyłacza —
   zostaje sama nazwa instytucji słownie (zasada „zero linków wyprowadzających”),
   więc reguła łamiąca długie adresy stała się bezprzedmiotowa i została zdjęta. */

/* --- 13. PRZEJŚCIE I PRZYCISK ---------------------------------------- */
.tresc .cta { margin-block: clamp(1.8rem, 1.2rem + 1.6vw, 3.2rem) 0; }
/* ⚠⚠ selektor przycisku MUSI dorównać „.tresc p a” (0-2-1), inaczej przycisk
   dostanie wygląd zwykłego odsyłacza prozy. */
.przycisk,
.tresc a.przycisk,
.tresc p a.przycisk {
  display: inline-flex; align-items: center; gap: .9em;
  justify-content: center;
  min-height: 58px; padding: .9rem clamp(1.6rem, 1.2rem + 1.2vw, 2.6rem);
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca-ciemna);
  border-radius: var(--promien);
  font-family: var(--kroj-tekst); font-weight: 500;
  font-size: .88rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 18px 34px -24px rgba(13, 20, 36, .8);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tresc p a.przycisk::before,
.tresc a.przycisk::before {
  content: ""; width: 1px; height: 1.55em;
  background: currentColor; opacity: .55;
}
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc p a.przycisk:hover {
  background: var(--akcent); border-color: var(--akcent); color: var(--na-wiodacej);
}
.tresc .pas--noc a.przycisk { background: var(--zloto); color: var(--noc); border-color: var(--zloto); }
.tresc .pas--noc a.przycisk:hover { background: var(--na-ciemnym); border-color: var(--na-ciemnym); color: var(--noc); }

/* --- 14. LISTA WPISÓW — kartki notesu -------------------------------- */
.tresc .lista-wpisow {
  margin: clamp(1.4rem, 1rem + 1.6vw, 2.6rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  counter-reset: wpis;
}
@media (min-width: 820px)  { .tresc .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .tresc .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* pasmo indeksu dostaje SZERSZY kontener i pełny tor — trzy karty w torze
   „szerokim” wychodziły po 325 px i tytuły łamały się po dwa słowa */
.pas--indeks > .kontener { max-width: min(100%, var(--rama-szer)); }
.pas--indeks > .kontener > .lista-wpisow { grid-column: pelna-start / pelna-end; }

.tresc .zapowiedz {
  counter-increment: wpis;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-karta);
}
/* duża ozdobna cyfra — ornament w pseudoelemencie, nie informacja.
   ⚠⚠ RECENZJA: cyfra była UCIĘTA dolną i prawą obwódką karty (karta ma
   overflow:hidden), a okrągłe dna „0” i „3” kończyły się płasko — czytało się
   to jak błąd renderowania, nie jak zamierzony spad. Odsunięcia są teraz podane
   w EM WŁASNEGO STOPNIA PISMA cyfry, więc zapas od obu obwódek jest taki sam
   na każdej szerokości; zmierzony na zrzutach wynosi ≥14 px. */
.tresc .zapowiedz::before {
  content: counter(wpis, decimal-leading-zero);
  position: absolute;
  inset-block-end: .09em; inset-inline-end: .20em;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-variant-numeric: lining-nums;
  font-size: clamp(3.4rem, 2.4rem + 2.6vw, 5.6rem); line-height: 1;
  color: var(--tlo-2);
  pointer-events: none;
}
/* szczelina karty — ⚠ RECENZJA: kreska wisiała ok. 60 px nad tytułem, z pustką
   pomiędzy, i czytała się jak osierocony znacznik. Teraz biegnie WZDŁUŻ CAŁEJ
   LEWEJ KRAWĘDZI karty i jest jej elementem konstrukcyjnym, nie ozdobnikiem. */
.tresc .zapowiedz::after {
  content: ""; position: absolute;
  inset-block: 0; inset-inline-start: 0;
  width: 3px; height: auto;
  background: linear-gradient(180deg, var(--akcent) 0%,
              rgba(122, 92, 24, .55) 52%, rgba(122, 92, 24, .14) 100%);
}
.tresc .zapowiedz > * { position: relative; }
.tresc .zapowiedz__tytul {
  margin: 0 0 .7rem; padding: 0; border: 0; background: none;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.28rem, 1.08rem + .7vw, 1.85rem); line-height: 1.2;
  letter-spacing: .01em;
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
/* ⚠⚠ PUŁAPKA SPECYFICZNOŚCI: „.tresc li a:not(.przycisk)” ma 0-2-2 i biło
   „.tresc .zapowiedz__tytul a” (0-2-1) — tytuł karty dostawał podkreślenie
   odsyłacza prozy. Komponenty karty muszą mieć 0-3-1. */
.tresc .zapowiedz .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--wiodaca-ciemna); text-decoration: none;
}
.tresc .zapowiedz .zapowiedz__tytul a:hover { color: var(--akcent); text-decoration: none; }
.tresc .zapowiedz__tekst {
  margin: 0 0 1.4rem; color: var(--atrament-cichy); font-size: .96rem; line-height: 1.72;
}
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .8em; min-height: 46px;
  padding-inline: 0; text-decoration: none;
  color: var(--wiodaca-ciemna); font-weight: 500;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}
.tresc .zapowiedz .zapowiedz__wiecej a::after {
  content: ""; width: clamp(22px, 3vw, 44px); height: 1px;
  background: var(--akcent); transition: width .25s ease;
}
.tresc .zapowiedz .zapowiedz__wiecej a:hover { color: var(--akcent); }
.tresc .zapowiedz .zapowiedz__wiecej a:hover::after { width: clamp(32px, 5vw, 68px); }

/* --- 15. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--noc);
  background-image:
    radial-gradient(70% 120% at 50% 0%, rgba(37, 56, 94, .55) 0%, rgba(37, 56, 94, 0) 66%),
    repeating-linear-gradient(90deg, transparent 0 26px, var(--orn-zloto) 26px 27px);
  color: var(--na-ciemnym);
  padding-block: clamp(2.6rem, 1.5rem + 2.8vw, 5rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg,
              rgba(216, 188, 133, 0) 8%, var(--zloto) 50%, rgba(216, 188, 133, 0) 92%);
}
/* ⚠ trzy elementy w jednym rzędzie „space-between” zawijały się tak, że
   powrót na górę lądował pod sygnaturą. Stopka jest teraz dwupoziomowa:
   sygnatura, włosowa linia, a pod nią nawigacja i powrót. */
.stopka__pas { position: relative; display: block; }
.stopka__znak {
  margin: 0 0 clamp(1.2rem, .8rem + 1.4vw, 2.4rem);
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 2.3rem);
  color: var(--na-ciemnym); letter-spacing: .045em;
}
.stopka__dol {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .4rem clamp(1rem, 3vw, 3rem);
  border-block-start: 1px solid var(--linia-noc);
  padding-block-start: clamp(.4rem, .8vw, .9rem);
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: 0 clamp(.5rem, 2vw, 1.8rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .2em; text-decoration: none;
  color: var(--na-ciemnym-cichy); font-weight: 500;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  border-block-end: 1px solid transparent;
}
.stopka__menu a:hover { color: var(--na-ciemnym); border-block-end-color: var(--zloto); }
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 46px; padding: .4em 1.3em;
  border: 1px solid var(--zloto); border-radius: var(--promien);
  color: var(--zloto); text-decoration: none;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--zloto); color: var(--noc); }

/* --- 16. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.6rem 0 2.4rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia-cicha); border-radius: var(--promien-duzy);
  background: var(--papier-karta); padding: 0; overflow: hidden;
  box-shadow: var(--cien-karta);
}
.próbka__pole { display: block; height: 84px; }
.próbka__opis {
  display: block; padding: .8rem 1rem;
  font-family: var(--kroj-maszyna); font-size: .78rem;
  color: var(--atrament); line-height: 1.6;
}
.tresc .skala { margin: 1.4rem 0 2rem; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .skala li { border-block-end: 1px solid var(--linia-cicha); padding-block-end: .6rem; }
.tresc .skala .okaz {
  font-family: var(--kroj-naglowek); font-weight: 500; line-height: 1.12; display: block;
  color: var(--wiodaca-ciemna);
}
.tresc .wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .7rem + 1.2vw, 1.8rem) clamp(1rem, .7rem + 1.4vw, 2rem);
  background: var(--papier);
  border: 1px solid var(--linia);
  border-inline-start: 2px solid var(--wiodaca);
  border-radius: var(--promien);
  font-family: var(--kroj-maszyna);
  font-size: .88rem; line-height: 1.9; letter-spacing: .01em;
  color: var(--atrament);
}

/* --- 18. POWYŻEJ 1560 px — ODZYSKANA SZEROKOŚĆ DOSTAJE ROLĘ ---------- */
/* ⭐⭐ POWÓD. Pomiar z 2026-09-01: przy 1920 px najszerszy moduł treści miał
   1243 px (60rem) i zostawiał po 338 px pustego tła z każdej strony, podczas
   gdy pasek nagłówka i stopki sięgał już 84rem (1740 px). Kompozycja nie rosła
   razem z ekranem — pasek pływał nad wąską kolumną.

   ⚠ SAMO POSZERZENIE PASM NIC BY NIE DAŁO: rozciągnięta proza to sto znaków
   w wierszu, czyli wada zamiast poprawy. Dlatego odzyskane 500 px jest
   ROZDZIELONE, a KOLUMNA PROZY ZOSTAJE NIETKNIĘTA (35rem, przy 1920 px
   725 px ≈ 68 znaków — dokładnie tyle, co dotąd):

     • płyta treści dorasta do paska nagłówka (84rem, przy 1920 px 1740 px,
       czyli po ~90 px marginesu) — treść i pasek stoją wreszcie w jednej ramie;
     • NAGŁÓWEK SEKCJI WYCHODZI Z KOLUMNY do BARKU po lewej stronie prozy —
       to ta sama szczelina, tylko teraz oddziela margines redakcyjny od tekstu;
     • ODSYŁACZ KIERUNKOWY I POLE ŹRÓDŁA stają OBOK prozy, w prawym barku,
       zamiast pod nią — czytelnik widzi „dokąd dalej" bez przewijania;
     • siatki idą na WIĘCEJ KOLUMN: warstwy 2 -> 4, kroki 2 -> 4 (z dużą cyfrą
       przeniesioną SPOD tekstu NAD tekst), wyliczenie 2 -> 3, próbki palety
       tyle, ile się zmieści;
     • hero: tytuł dostaje pełną szerokość arkusza, lid zostaje wąski (36rem).

   ⚠⚠ BARKI SĄ RÓWNE (oba minmax(0,1fr)), więc KOLUMNA PROZY ZOSTAJE DOKŁADNIE
   POŚRODKU EKRANU — tam, gdzie stała przed zmianą i gdzie stoi w paśmie wstępu,
   które celowo zachowuje dawną, węższą płytę „kartki". Bramka B13 mierzy lewy
   i prawy margines prozy: przy 1920 px wychodzi 597|597.

   ⚠ PUŁAPKA: body ma overflow-wrap:break-word (długie adresy przy 360 px).
   W wąskim barku łamałoby to nagłówek W ŚRODKU SŁOWA („odpowiedzial|ność").
   W barku łamiemy więc tylko na spacjach, a stopień pisma nagłówka schodzi tak,
   żeby najdłuższe słowo serwisu („odpowiedzialność", 16 znaków) mieściło się
   w barku przy każdej szerokości od 1560 px w górę.

   ⚠ Poniżej 1560 px NIC SIĘ NIE ZMIENIA — to nie jest przebudowa mobilna. */
@media (min-width: 1560px) {
  :root {
    /* margines arkusza od krawędzi okna — ta sama rama dla paska i dla treści */
    --rama-boczna: clamp(2.6rem, 4vw, 5.6rem);
    /* rowek między barkiem a kolumną prozy */
    --rowek: 3.4rem;
  }

  /* ---- 18a. ARKUSZ: pasma treści dorastają do paska nagłówka ---- */
  .hero > .kontener--hero,
  .pas--indeks > .kontener,
  .pas > .kontener:has(> h2) {
    --margines: clamp(2.4rem, 3.4vw, 3.6rem);
    max-width: min(var(--rama-szer), calc(100% - 2 * var(--rama-boczna)));
  }

  /* ---- 18b. HERO: tytuł na pełną szerokość arkusza ---- */
  /* ⚠ lid ma własne max-width: 36rem i zostaje wąski — rośnie tylko tytuł. */
  .hero > .kontener--hero > * { grid-column: pelna-start / pelna-end; }

  /* ---- 18c. PASMO TEKSTOWE: bark | kolumna prozy | bark ---- */
  .pas > .kontener:has(> h2) {
    /* szyny światła stoją teraz w rowkach, a nie w torze luzu */
    --rynna: 2.2rem;
    --szyna: 1.6rem;
    /* ⚠ „szeroki" celowo równa się „pełnej": siatki mają sięgać obu barków,
       inaczej odzyskana szerokość znowu byłaby pustym polem. */
    grid-template-columns:
      [pelna-start szeroki-start bark-start] minmax(0, 1fr)
      [bark-end] var(--rowek)
      [tekst-start] minmax(0, var(--kolumna))
      [tekst-end] var(--rowek)
      [obok-start] minmax(0, 1fr) [obok-end szeroki-end pelna-end];
    align-items: start;
    row-gap: 0;
  }
  /* ⚠ nagłówek zajmuje bark na całą wysokość sekcji (span 30), więc kolejne
     akapity układają się w kolumnie prozy od pierwszego wiersza w dół,
     a bloki pełnej szerokości trafiają POD prozę, w kolejności ze źródła. */
  .pas > .kontener:has(> h2) > h2 {
    grid-column: bark-start / bark-end;
    grid-row: 1 / span 30;
    align-self: start;
    margin-block: 0;
    overflow-wrap: normal;
    hyphens: auto;
  }
  /* ⚠ stopień pisma podany W CZYSTYM vw, nie w rem: bark rośnie razem z oknem,
     więc nagłówek ma rosnąć tą samą miarą. Górna granica 2,1rem trzyma go
     w ryzach na ekranach szerszych niż arkusz. */
  .pas:not(.pas--wyimek) > .kontener:has(> h2) > h2 {
    font-size: clamp(1.4rem, 2.05vw, 2.1rem);
    line-height: 1.2;
  }
  /* ⚠ RECENZJA WŁASNEGO ZRZUTU: w czterech kolumnach nagłówek karty (32 px)
     dorównywał nagłówkowi sekcji w barku i hierarchia się spłaszczała.
     Karta jest teraz węższa, więc i jej nagłówek schodzi o stopień. */
  .tresc .warstwa h3 { font-size: clamp(1.12rem, .88rem + .55vw, 1.42rem); }
  /* odsyłacz kierunkowy i pole źródła — notatka na marginesie, obok prozy */
  .pas > .kontener:has(> h2) > .odsylacz,
  .pas > .kontener:has(> h2) > .zrodlo {
    grid-column: obok-start / obok-end;
    align-self: start;
    margin-block: .35em 1.5em;
    overflow-wrap: normal;
  }

  /* ---- 18d. SIATKI: więcej kolumn, nie szersze karty ---- */
  /* ⚠ auto-fit, nie repeat(4): arkusz systemu ma w tym samym komponencie dwie
     warstwy zamiast czterech — sztywne cztery tory zostawiłyby tam dwie dziury. */
  .tresc .warstwy { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .tresc .wyliczenie { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
  /* ⚠ 15rem, nie 19rem: przy 1560 px szersza miara dawała trzy tory na cztery
     kroki i czwarty zostawał sierotą w drugim rzędzie. */
  .tresc .kroki { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  /* ⭐ duża cyfra kroku wychodzi SPOD tekstu i staje się nagłówkiem kafla:
     w czterech kolumnach boczna rynna na numer zjadałaby jedną trzecią kafla. */
  .tresc .kroki li {
    padding: clamp(1.4rem, 1rem + 1vw, 2.1rem);
  }
  .tresc .kroki li::before {
    position: static;
    display: block;
    font-size: 2.3rem;
    line-height: 1;
    margin-block-end: .45rem;
  }
  .tresc .kroki li::after { display: none; }

  /* ---- 18e. PASMO INDEKSU: karty wpisów w szerszym arkuszu ---- */
  .pas--indeks > .kontener { --margines: clamp(2.4rem, 3.4vw, 3.6rem); }
}

/* --- 17. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; }
  .naglowek { position: static; background: #FFFFFF; color: #000000; border-block-end: 1px solid #000000; }
  .naglowek::after, .stopka::before, .pas--noc::before, .hero::after { display: none !important; }
  .hero, .stopka, .pas--noc {
    background: #FFFFFF !important; color: #000000 !important;
  }
  .hero__szczelina, .hero__blask { display: none !important; }
  .hero .tytul, .stopka__znak, .znak { color: #000000; }
  .pas--karta > .kontener, .pas--wstep > .kontener { box-shadow: none; margin-block-start: 0; border-color: #000000; }
  .pas--kamien, .pas--indeks { background: #FFFFFF; }
  a { color: #000000; }
}