@charset "utf-8";
/* =====================================================================
   STYKÓWKA — system projektowy makiety fotografslubny.olsztyn.pl
   Seria STRONY-WWW-ST-CBF. HTML+CSS, zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.

   IDEA: stykówka to arkusz, na którym ogląda się CAŁY materiał — klatka
   po klatce, z numerem przy każdej. Serwis uczy dokładnie tego: patrzeć
   na pełny reportaż zamiast na kilka najlepszych ujęć. Dlatego widok jest
   arkuszem: pasma leżą jak rzędy klatek, każde ma narożniki kadru,
   siatkę trójpodziału pod treścią i wielki numer klatki w rogu, a między
   pasmami biegnie perforacja kliszy.

   ⚠ Kolejność ważna 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). Pogrubienie wyłącznie wagą pisma (strong,b).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root{
  /* powierzchnie jasne — kość słoniowa */
  --papier:          #F7F2E9;   /* ciepła kość słoniowa — podłoże arkusza */
  --papier-karta:    #FFFDF8;   /* odbitka, płyta */
  --tlo-2:           #EFE6D8;   /* pasmo drugoplanowe — karton stykówki */
  --wiodaca-jasna:   #F3E2E1;   /* przemyty bordo — kapsułki i pola */
  /* pismo na jasnym */
  --atrament:        #241C1E;   /* grafit */
  --atrament-cichy:  #55474A;
  /* barwa wiodąca */
  --wiodaca:         #7C1D33;   /* bordo — powierzchnie, kreski, akcenty */
  --wiodaca-ciemna:  #5E1226;   /* nagłówki i odsyłacze na jasnym */
  --akcent:          #7C5A10;   /* mosiądz ciemny — tekst akcentu na jasnym */
  --linia:           #8C7A66;   /* obwódka widoczna (element nietekstowy) */
  --linia-cicha:     #DDD1BF;   /* kreska dekoracyjna */
  --na-wiodacej:     #FFFDF8;
  --na-akcencie:     #FFFDF8;

  /* powierzchnie ciemne */
  --grafit:          #241A1C;   /* pasek nagłówka */
  --hero-tlo:        #33131E;   /* plansza portfolio */
  --glebia:          #2A1119;   /* pasmo nocne, stopa */
  --glebia-2:        #1C0B11;   /* stopka */
  --karta-ciemna:    #3B1824;
  --kapsula-ciemna:  #45202C;
  --mosiadz:         #D9B36A;   /* mosiądz jasny — akcent na ciemnym */
  --roz-jasny:       #F0D3D6;   /* wtórny tekst na ciemnym */
  --na-ciemnym:      #F7F2E9;

  /* ornamenty — wyłącznie warstwa wizualna, nigdy nośnik informacji */
  --orn-linia:        rgba(94, 18, 38, .10);
  --orn-linia-mocna:  rgba(94, 18, 38, .20);
  --orn-mosiadz:      rgba(217, 179, 106, .16);
  --orn-mosiadz-mocna:rgba(217, 179, 106, .34);
  --orn-jasny:        rgba(247, 242, 233, .16);
  --numer-jasny:      rgba(94, 18, 38, .085);
  --numer-ciemny:     rgba(217, 179, 106, .16);
  --perf-ciemna:      rgba(247, 242, 233, .30);
  --perf-mosiadz:     rgba(217, 179, 106, .40);

  /* pismo — dwie rodziny z pełnym latin-ext (polskie diakrytyki) */
  --krój-naglowek: "Cormorant Garamond", Garamond, "EB Garamond", Georgia, "Times New Roman", serif;
  --krój-tekst:    "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --krój-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* ⚠⚠ MIARA W REM, NIE W EM ani w ch (pułapka 9): jedna krawędź dla
     nagłówków, prozy i kresek, i skala rosnąca razem z korzeniem (B13). */
  --kolumna:        36rem;                    /* kolumna prozy ~75 znaków */
  --pas-szer:       84rem;                    /* maksymalna szerokość pasma */
  --margines:       clamp(20px, 5vw, 112px);
  --wciecie:        clamp(10px, 1.8vw, 30px); /* wcięcie pasma z płytą */
  --szyna-odstep:   3.4rem;                   /* szyna nagłówków ↔ łam prozy */

  --promien:        2px;   /* kadr ma ostre narożniki */
  --promien-plyta:  4px;
  --kadr-bok:       clamp(18px, 2.4vw, 46px); /* długość ramienia narożnika */
  --kadr-gr:        2px;

  --cien-plyta:  0 30px 60px -30px rgba(36, 26, 28, .55), 0 2px 12px -6px rgba(36, 26, 28, .22);
  --cien-karta:  0 20px 40px -24px rgba(36, 26, 28, .50), 0 1px 4px -2px rgba(36, 26, 28, .16);
  --zachodzenie: clamp(1.8rem, 1.1rem + 2.4vw, 4.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;
}

body{
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.72;
  /* ⚠ długie adresy urzędowe w prozie rozpychały widok na 360 px (B5) */
  overflow-wrap: break-word;
}

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

:focus-visible{
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}

/* 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: 190px; 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.5rem;
  background: var(--mosiadz); color: var(--glebia-2);
  font-weight: 600; letter-spacing: .05em; text-decoration: none;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy)                        */
.rama{
  position: relative;
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z pustymi szynami po bokach: proza
   stoi w środkowym torze (symetrycznie — bramka B13 mierzy oba marginesy),
   a bloki .szeroki rozpychają się na całe pasmo. */
.kontener{
  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)
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: pelna-start / pelna-end; }
.kontener > .dalej { grid-column: tekst-start / pelna-end; }
/* hero zaczyna się dokładnie tam, gdzie proza widoku, a rośnie w prawo */
.kontener--hero > * { grid-column: tekst-start / pelna-end; }

/* --- 4. ORNAMENTY WSPÓLNE -------------------------------------------- */
/* NAROŻNIKI KADRU — osiem kresek złożonych z gradientów na JEDNYM elemencie.
   Bez treści, bez znaczenia; leżą pod tekstem (z-index 0). */
.kadr{
  position: absolute; z-index: 0; pointer-events: none;
  inset: clamp(10px, 1.6vw, 30px);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa));
  background-size:
    var(--kadr-bok) var(--kadr-gr), var(--kadr-gr) var(--kadr-bok),
    var(--kadr-bok) var(--kadr-gr), var(--kadr-gr) var(--kadr-bok),
    var(--kadr-bok) var(--kadr-gr), var(--kadr-gr) var(--kadr-bok),
    var(--kadr-bok) var(--kadr-gr), var(--kadr-gr) var(--kadr-bok);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* SZYNY ARKUSZA — dwie pionowe włoskowate linie prowadzące, zakotwiczone do
   krawędzi kolumny prozy (a nie do krawędzi okna, pułapka 19). Przy wąskim
   oknie wyjeżdżają poza ekran i po prostu znikają — tło nie przewija strony. */
.siatka{
  position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--siatka-barwa), var(--siatka-barwa)),
    linear-gradient(var(--siatka-barwa), var(--siatka-barwa));
  background-size: 1px 100%, 1px 100%;
  background-position:
    calc(50% - var(--kolumna) / 2 - 3.2rem) 0,
    calc(50% + var(--kolumna) / 2 + 3.2rem) 0;
}
/* SIATKA TRÓJPODZIAŁU — wyłącznie plansza hero: tam czyta się jak celownik
   nad ornamentem, a nie jak kreska przez zdanie. */
.hero .siatka{
  background-size: auto; background-position: 0 0;
  background-image:
    linear-gradient(to right,  transparent 33.2%, var(--siatka-barwa) 33.2% 33.32%, transparent 33.32%),
    linear-gradient(to right,  transparent 66.5%, var(--siatka-barwa) 66.5% 66.62%, transparent 66.62%),
    linear-gradient(to bottom, transparent 33.2%, var(--siatka-barwa) 33.2% 33.4%,  transparent 33.4%),
    linear-gradient(to bottom, transparent 66.5%, var(--siatka-barwa) 66.5% 66.7%,  transparent 66.7%);
}

/* PERFORACJA KLISZY — pasek „dziurek" na styku pasm */
.perforacja{
  position: absolute; z-index: 2; inset-inline: 0;
  height: 16px; display: block; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 13px, var(--perf-barwa) 13px 28px, transparent 28px 42px);
  background-size: auto 8px;
  background-position: center;
  background-repeat: repeat-x;
}

/* --- 5. NAGŁÓWEK ----------------------------------------------------- */
.naglowek{
  position: sticky; inset-block-start: 0; z-index: 30;
  background-color: var(--grafit);
  background-image:
    radial-gradient(120% 200% at 84% 0%, rgba(124, 29, 51, .55) 0%, rgba(124, 29, 51, 0) 62%);
  color: var(--na-ciemnym);
  box-shadow: 0 14px 34px -26px rgba(28, 11, 17, .9);
}
.naglowek::after{
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--mosiadz) 42%, rgba(217, 179, 106, .18) 100%);
}
.naglowek__pas{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .35rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* SYGNATURA SŁOWNA — typograficzna, w narożnikach kadru; nigdy nie udaje
   logotypu firmy (pułapka T9: serwis nie ma właściciela ani marki). */
.znak{
  position: relative;
  display: inline-flex; align-items: center; min-height: 48px;
  padding-inline: clamp(12px, 1.4vw, 20px);
  text-decoration: none; color: var(--na-ciemnym);
}
.znak__kadr{
  --kadr-barwa: var(--mosiadz);
  --kadr-bok: 12px;
  --kadr-gr: 2px;
  inset: 0;
  opacity: .85;
}
.znak__tekst{
  position: relative; z-index: 1;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.12rem, 1rem + .42vw, 1.62rem);
  line-height: 1.16; letter-spacing: .006em;
}
.znak:hover .znak__kadr { opacity: 1; --kadr-bok: 18px; }

/* ⚠ pułapka B5: „flex:none" na nawigacji nie pozwala jej się zwężyć i lista
   wyjeżdża poza ekran przy 360 px. Menu jest zwykłą listą — bez <details>,
   więc pułapka T7 (::details-content) w ogóle nie występuje. */
.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: .1rem clamp(.1rem, 1vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link{
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .8em;
  font-weight: 500; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--roz-jasny);
}
.menu__link::after{
  content: ""; position: absolute; inset-block-end: .5rem;
  inset-inline-start: .8em; width: 0; height: 2px;
  background: var(--mosiadz); transition: width .25s ease;
}
.menu__link:hover{ color: var(--na-ciemnym); }
.menu__link:hover::after{ width: calc(100% - 1.6em); }
.menu__link[aria-current="page"]{ color: var(--mosiadz); font-weight: 600; }
.menu__link[aria-current="page"]::before{
  content: ""; position: absolute; inset-block-start: .45rem; inset-inline-start: .8em;
  width: 10px; height: 2px; background: var(--mosiadz);
}
.menu__link[aria-current="page"]::after{ width: calc(100% - 1.6em); height: 2px; }
@media (max-width: 760px){
  .naglowek__pas{ justify-content: flex-start; }
  .menu, .menu__lista{ justify-content: flex-start; }
  .menu__link{ padding-inline: .55em; letter-spacing: .1em; }
}

/* --- 6. HERO — CIEMNA PLANSZA PORTFOLIO ------------------------------ */
.tresc{ display: block; }

.hero{
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--hero-tlo);
  background-image:
    radial-gradient(72% 62% at 88% 4%,  rgba(138, 32, 58, .78) 0%, rgba(138, 32, 58, 0) 64%),
    radial-gradient(60% 56% at 2% 98%,  rgba(90, 24, 38, .85) 0%, rgba(90, 24, 38, 0) 66%),
    radial-gradient(46% 40% at 96% 92%, rgba(217, 179, 106, .16) 0%, rgba(217, 179, 106, 0) 70%),
    linear-gradient(157deg, #421826 0%, #33131E 48%, #200A12 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3.2rem, 1.6rem + 5.4vw, 8rem) clamp(4rem, 2.2rem + 5.6vw, 8.6rem);
}
.hero .kadr{ --kadr-barwa: var(--mosiadz); opacity: .62; }
.hero .siatka{ --siatka-barwa: rgba(247, 242, 233, .11); inset: clamp(10px, 1.6vw, 30px); }
.hero .kontener{ position: relative; z-index: 1; }

/* PRZESŁONA — dekoracyjna kompozycja inline SVG (aria-hidden, bez treści).
   ⚠ B6 mierzy `color` ikony wobec tła: mosiądz na planszy = 8,47:1.
   Delikatność robimy stroke-opacity, nie barwą. */
.hero__przeslona{
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -12%;
  width: clamp(320px, 44vw, 880px); aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--mosiadz);
  pointer-events: none;
}
.hero__przeslona svg{ width: 100%; height: auto; display: block; }
.hero__poswiata{
  position: absolute; z-index: 0;
  inset-block-start: -26%; inset-inline-start: -14%;
  width: clamp(260px, 38vw, 720px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 211, 214, .20) 0%, rgba(240, 211, 214, 0) 66%);
  pointer-events: none;
}
/* ⚠⚠ RECENZJA: poniżej 768 px kreski przesłony i siatka trójpodziału biegły
   POD wierszami lidu i przecinały litery. Siatka trójpodziału znika, a przesłona
   przestaje być warstwą pod tekstem — wchodzi w tok jako emblemat NAD tytułem,
   więc żadna kreska nie może już przeciąć wiersza. */
@media (max-width: 767px){
  .hero .siatka{ display: none; }
  .hero__przeslona{
    position: relative; z-index: 1; display: block;
    inset: auto; transform: none;
    width: min(46vw, 190px); aspect-ratio: 1;
    margin-inline-start: var(--margines);
    margin-block-end: clamp(.8rem, 3vw, 1.5rem);
    opacity: 1;
  }
  .hero__poswiata{ inset-block-start: -18%; opacity: .9; }
}

.hero .perforacja{ --perf-barwa: var(--perf-ciemna); inset-block-end: 6px; }
.hero::after{
  content: ""; position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--mosiadz) 50%, rgba(217, 179, 106, .2) 100%);
}

.hero .tytul{
  margin: 0 0 clamp(1.1rem, .7rem + 1.1vw, 2.1rem);
  max-width: 15em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5rem);
  line-height: 1.02; letter-spacing: -.014em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
/* mosiężna kreska nad tytułem — sygnał krawędzi kadru, nie informacja */
.hero .tytul::before{
  content: ""; display: block;
  width: clamp(64px, 9vw, 148px); height: 3px;
  margin-block-end: clamp(1rem, .7rem + 1vw, 2.1rem);
  background: linear-gradient(90deg, var(--mosiadz), rgba(217, 179, 106, 0));
}
.hero .lid{
  margin: 0; max-width: 46rem;
  font-size: 1.22rem; line-height: 1.66;
  color: var(--roz-jasny);
}
.hero--wewnetrzna{
  padding-block: clamp(2.4rem, 1.2rem + 4vw, 6rem) clamp(3rem, 1.6rem + 4.4vw, 6.6rem);
}
.hero--wewnetrzna .tytul{ font-size: clamp(2rem, 1.1rem + 2.9vw, 4.1rem); }

/* --- 7. PASMA -------------------------------------------------------- */
/* flow-root: ujemny margines płyty ma PRZESUNĄĆ płytę, nie całe pasmo */
.pas{ position: relative; display: flow-root; }
.pas > .kontener{ position: relative; z-index: 1; }

/* wielki numer klatki — ornament stykówki, pseudoelement, nie treść */
.pas--stykowka, .pas--papier, .pas--noc{ counter-increment: klatka; }
.pas--stykowka::after, .pas--papier::after, .pas--noc::after{
  content: counter(klatka, decimal-leading-zero);
  position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: clamp(6px, 1vw, 22px);
  /* kotwica przy PRAWEJ szynie kolumny — numer klatki na marginesie arkusza */
  inset-inline-start: calc(50% + var(--kolumna) / 2 + 4.4rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(4rem, 8vw, 9rem); line-height: .86;
  letter-spacing: -.02em;
  color: var(--numer-jasny);
}
@media (max-width: 1023px){
  .pas--stykowka::after, .pas--papier::after, .pas--noc::after{ display: none; }
}

/* ⚠⚠ RECENZJA: prawy margines niósł wielki numer klatki, lewy — dwa włoskowate
   narożniki, więc szyny ważyły nierówno i lewa strona była martwym kremem.
   Lewa szyna dostaje KRAWĘDŹ STYKÓWKI: włoskowatą linię, skalę kreskową
   i kolumnę perforacji. Zero treści, zero znaczenia — sama masa wizualna
   dobrana do masy numeru. Kotwica idzie do krawędzi KOLUMNY (pułapka 19),
   dokładnie symetrycznie do numeru: 4,4rem od łamu po obu stronach. */
.pas--stykowka::before, .pas--papier::before{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-block: clamp(20px, 2.6vw, 56px);
  inset-inline-start: calc(50% - var(--kolumna) / 2 - 7.6rem);
  width: 3.2rem;
  background-repeat: no-repeat;
  background-image:
    /* 1. włoskowata linia prowadząca — prawa krawędź szyny */
    linear-gradient(var(--orn-linia-mocna), var(--orn-linia-mocna)),
    /* 2. skala kreskowa dobita do linii */
    repeating-linear-gradient(180deg, var(--orn-linia-mocna) 0 1px, transparent 1px 29px),
    /* 3. perforacja — kolumna prostokątnych okien jak na brzegu kliszy */
    repeating-linear-gradient(180deg, transparent 0 16px, var(--orn-linia) 16px 38px, transparent 38px 54px);
  background-size: 1px 100%, .62rem 100%, 1.5rem 100%;
  background-position: right 0 top 0, right 0 top 0, right 1.15rem top 0;
}
@media (max-width: 1023px){
  .pas--stykowka::before, .pas--papier::before{ content: none; }
}
/* pasmo, w którym numerację niesie sama siatka kart (blog): bez drugiego
   systemu numeracji i bez szyny, bo karty zajmują całą szerokość pasma */
.pas--karty{ counter-increment: none; }
.pas--karty::after, .pas--karty::before{ content: none; }

.pas--papier, .pas--stykowka{ border-block-start: 1px solid var(--linia-cicha); }
.pas--papier{
  background-color: var(--papier);
  background-image:
    radial-gradient(78% 62% at 94% 6%, rgba(124, 29, 51, .07) 0%, rgba(124, 29, 51, 0) 64%),
    radial-gradient(60% 50% at 4% 96%, rgba(124, 90, 16, .05) 0%, rgba(124, 90, 16, 0) 68%);
  padding-block: clamp(2.4rem, 1.4rem + 3vw, 5rem);
}
.pas--papier .siatka{ --siatka-barwa: rgba(94, 18, 38, .14); }
.pas--papier .kadr{ --kadr-barwa: var(--linia-cicha); }
.pas--stykowka{
  overflow: hidden;
  background-color: var(--tlo-2);
  background-image:
    radial-gradient(72% 60% at 6% 4%, rgba(124, 29, 51, .085) 0%, rgba(124, 29, 51, 0) 64%),
    radial-gradient(58% 52% at 96% 98%, rgba(124, 90, 16, .08) 0%, rgba(124, 90, 16, 0) 68%);
  padding-block: clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem);
}
.pas--stykowka .siatka{ --siatka-barwa: var(--orn-linia-mocna); }
.pas--stykowka .kadr{ --kadr-barwa: var(--orn-linia-mocna); }

/* PASMO NOCNE — pełnowymiarowa ciemna klatka. Nadpisujemy TOKENY, więc każdy
   komponent w środku dostaje wariant ciemny bez osobnych reguł (pułapka
   „globalny kolor na powierzchni o odwrotnej jasności"). */
.pas--noc, .pas--stopa, .plyta--ciemna{
  --papier:         var(--glebia);
  --papier-karta:   var(--karta-ciemna);
  --tlo-2:          var(--kapsula-ciemna);
  --wiodaca-jasna:  var(--kapsula-ciemna);
  --atrament:       var(--na-ciemnym);
  --atrament-cichy: var(--roz-jasny);
  --wiodaca:        var(--mosiadz);
  --wiodaca-ciemna: var(--mosiadz);
  --akcent:         var(--mosiadz);
  --na-wiodacej:    var(--glebia-2);
  --na-akcencie:    var(--glebia-2);
  --linia:          #A57F63;
  --linia-cicha:    #5B2C3B;
  --numer-jasny:    var(--numer-ciemny);
  color: var(--na-ciemnym);
}
.pas--noc{
  overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(70% 62% at 90% 6%, rgba(138, 32, 58, .52) 0%, rgba(138, 32, 58, 0) 64%),
    radial-gradient(54% 48% at 4% 96%, rgba(217, 179, 106, .12) 0%, rgba(217, 179, 106, 0) 68%);
  padding-block: clamp(2.8rem, 1.6rem + 3.6vw, 6rem);
}
.pas--noc .siatka{ --siatka-barwa: var(--orn-mosiadz-mocna); }
.pas--noc .kadr{ --kadr-barwa: var(--orn-mosiadz-mocna); }
.pas--noc::before{
  content: ""; position: absolute; z-index: 0; inset-block: 0; inset-inline-start: 0;
  width: 16px;
  background-image: repeating-linear-gradient(180deg,
    transparent 0 13px, var(--perf-mosiadz) 13px 28px, transparent 28px 42px);
  background-size: 6px auto; background-position: center; background-repeat: repeat-y;
}
/* pierwszy akapit pasma nocnego prowadzi wzrok — większy stopień pisma */
.pas--noc .kontener > p:first-of-type{ font-size: 1.1rem; }

/* PASMO Z PŁYTĄ — biała odbitka nachodząca na sąsiada (warstwa na warstwie) */
.pas--plyta{
  background-color: var(--papier);
  padding-block: 0 clamp(1.4rem, .9rem + 1.8vw, 3rem);
  padding-inline: var(--wciecie);
}
.plyta{
  position: relative; z-index: 2; overflow: hidden;
  max-width: min(100%, 64rem);
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(1.8rem, 1.1rem + 2.6vw, 4rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-plyta);
  box-shadow: var(--cien-plyta);
}
.plyta .kadr{ --kadr-barwa: var(--orn-linia-mocna); inset: clamp(8px, 1.2vw, 18px); }
/* gzyms płyty — bordo → mosiądz na górnej krawędzi odbitki */
.plyta::before{
  content: ""; position: absolute; z-index: 1; inset-block-start: 0;
  inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--mosiadz) 55%, rgba(217, 179, 106, .18) 100%);
}
.plyta > *{ position: relative; z-index: 1; }
.plyta > p:first-of-type{ font-size: 1.12rem; color: var(--atrament); }

/* PASMO WYCIĄGU — jedno pasmo arkusza ma INNĄ FORMĘ, nie inny odcień kremu:
   z klatki robi się powiększenie, czyli biała odbitka wyciągnięta na osobną
   płytę i położona na różanym kartonie z rastrem. Pasmo nie jest klatką, więc
   nie bierze numeru — numeracja arkusza biegnie dalej bez dziury.
   ⚠ RECENZJA: dolne 2800 px indexu było czterema pasmami o IDENTYCZNEJ
   geometrii; to pasmo łamie rytm formą, drugie pasmo nocne — barwą. */
.pas--wyciag{
  overflow: hidden;
  border-block-start: 1px solid var(--linia-cicha);
  background-color: var(--wiodaca-jasna);
  background-image:
    repeating-linear-gradient(135deg, rgba(94, 18, 38, .045) 0 1px, transparent 1px 12px),
    radial-gradient(70% 62% at 8% 2%, rgba(124, 29, 51, .10) 0%, rgba(124, 29, 51, 0) 62%),
    radial-gradient(58% 54% at 96% 98%, rgba(124, 90, 16, .10) 0%, rgba(124, 90, 16, 0) 66%);
  padding-block: clamp(2.6rem, 1.6rem + 3.2vw, 5.6rem);
  padding-inline: var(--wciecie);
}
.pas--wyciag .siatka{ --siatka-barwa: var(--orn-linia-mocna); }
/* znaczniki cięcia po obu bokach wyciągu — obie szyny ważą tu tyle samo */
.pas--wyciag::before, .pas--wyciag::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-block: clamp(24px, 3vw, 64px);
  width: clamp(12px, 1.5vw, 26px);
  background-image: repeating-linear-gradient(180deg,
    var(--orn-linia-mocna) 0 2px, transparent 2px 27px);
}
.pas--wyciag::before{ inset-inline-start: clamp(12px, 2.4vw, 46px); }
.pas--wyciag::after{ inset-inline-end: clamp(12px, 2.4vw, 46px); }
@media (max-width: 1023px){
  .pas--wyciag::before, .pas--wyciag::after{ content: none; }
}
.plyta--wyciag{
  margin-block-start: 0;
  padding-block: clamp(2rem, 1.2rem + 2.8vw, 4.4rem);
}
.plyta > h2:first-of-type{ margin-block-start: 0; }

/* PASMO ZAMYKAJĄCE — ciemna stopa arkusza z perforacją u góry */
.pas--stopa{
  overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(64% 70% at 12% 0%, rgba(138, 32, 58, .46) 0%, rgba(138, 32, 58, 0) 66%),
    radial-gradient(52% 60% at 94% 100%, rgba(217, 179, 106, .12) 0%, rgba(217, 179, 106, 0) 70%);
  padding-block: clamp(2.8rem, 1.6rem + 3.4vw, 5.4rem);
}
.pas--stopa .siatka{ --siatka-barwa: var(--orn-mosiadz-mocna); }
.pas--stopa .kadr{ --kadr-barwa: var(--orn-mosiadz-mocna); }
.pas--stopa .perforacja{ --perf-barwa: var(--perf-mosiadz); inset-block-start: 8px; }
.pas--stopa::before{
  content: ""; position: absolute; z-index: 1; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, rgba(217, 179, 106, .12) 0%, var(--mosiadz) 48%, rgba(217, 179, 106, .12) 100%);
}

/* --- 8. TYPOGRAFIA --------------------------------------------------- */
.tresc h2{
  position: relative;
  margin: clamp(2.2rem, 1.4rem + 2vw, 3.6rem) 0 .8rem;
  padding-block-start: clamp(1.1rem, .8rem + 1vw, 1.9rem);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.62rem, 1.1rem + 1.7vw, 2.85rem);
  line-height: 1.1; letter-spacing: -.008em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* narożnik kadru nad każdym nagłówkiem sekcji */
.tresc h2::before{
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(34px, 4.4vw, 62px); height: clamp(14px, 1.6vw, 22px);
  border-block-start: 2px solid var(--wiodaca);
  border-inline-start: 2px solid var(--wiodaca);
}
.kontener > h2:first-child, .plyta > h2:first-child{ margin-block-start: 0; }

.tresc h3{
  position: relative;
  margin: clamp(1.7rem, 1.1rem + 1.3vw, 2.6rem) 0 .5rem;
  padding-inline-start: 1.1em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.3rem, 1.05rem + .7vw, 1.85rem);
  line-height: 1.24; color: var(--atrament);
}
.tresc h3::before{
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: .52em;
  width: .68em; height: 2px; background: var(--akcent);
}

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

/* wprowadzenie i zajawka — kiedy stoją poza planszą hero */
.tresc .wprowadzenie, .tresc .zajawka{ font-size: 1.1rem; color: var(--atrament); }

/* ⚠⚠ pułapka 1: `.tresc p a` (0-2-1) bije komponenty o niższej specyficzności —
   przycisk kierunkowy i tytuł odbitki dostawały wtedy podkreślenie odsyłacza
   prozy. Reguła prozy WYKLUCZA więc akapity i pozycje list, które są
   komponentami; wyklucza też sam odsyłacz z klasą .przycisk. */
.tresc p:not(.przejscie):not(.zapowiedz__wiecej):not(.zapowiedz__tekst) a:not(.przycisk),
.tresc li:not(.zapowiedz) a:not(.przycisk){
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--akcent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.tresc p:not(.przejscie):not(.zapowiedz__wiecej):not(.zapowiedz__tekst) a:not(.przycisk):hover,
.tresc li:not(.zapowiedz) a:not(.przycisk):hover{
  color: var(--wiodaca); text-decoration-thickness: 2px;
}
/* ⚠ adresy urzędowe w prozie potrafią rozepchnąć widok na 360 px */
.tresc .zrodlo a{ overflow-wrap: anywhere; }

/* --- 9. ODSYŁACZ KIERUNKOWY (kadr) ----------------------------------- */
/* akapit, którego CAŁĄ treścią jest odsyłacz — w źródle osobny wiersz.
   ⚠ B7 traktuje go jak samodzielny cel UI, więc musi mieć ≥44 px. */
.tresc .przejscie{ margin-block: 1.7em 2em; }
.tresc .przejscie a{
  position: relative;
  display: inline-flex; align-items: center; gap: .8em;
  min-height: 54px;
  padding: .6em 1.5em .6em 1.4em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  font-weight: 600; font-size: 1rem; letter-spacing: .004em;
  color: var(--wiodaca-ciemna);
  text-decoration: none;
  box-shadow: 0 14px 28px -22px rgba(36, 26, 28, .8);
}
.tresc .przejscie a::before{
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  --kadr-barwa: var(--wiodaca);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa)),
    linear-gradient(var(--kadr-barwa), var(--kadr-barwa));
  background-size: 13px 2px, 2px 13px, 13px 2px, 2px 13px, 13px 2px, 2px 13px, 13px 2px, 2px 13px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
}
.tresc .przejscie a::after{
  content: "→"; font-size: 1.05em; line-height: 1;
  transition: transform .25s ease;
}
.tresc .przejscie a:hover{
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej); border-color: var(--wiodaca-ciemna);
}
.tresc .przejscie a:hover::before{ --kadr-barwa: var(--mosiadz); }
.tresc .przejscie a:hover::after{ transform: translateX(4px); }
.pas--stopa .przejscie a, .pas--noc .przejscie a{ background: var(--kapsula-ciemna); color: var(--mosiadz); }
.pas--stopa .przejscie a:hover, .pas--noc .przejscie a:hover{ background: var(--mosiadz); color: var(--glebia-2); }

/* rząd odsyłaczy zamykających widok — komponent pasma „stopa" */
.tresc .dalej{
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: clamp(.7rem, .4rem + .8vw, 1.3rem);
  margin-block: clamp(.4rem, .2rem + .6vw, 1.2rem) clamp(1.4rem, .9rem + 1.4vw, 2.6rem);
}
.tresc .dalej .przejscie{ margin: 0; }

/* pozycja listy, której CAŁĄ treścią jest odsyłacz */
.tresc li > a:only-child{
  display: inline-flex; align-items: center; min-height: 44px; padding-block: .2rem;
}

/* --- 10. PRZYCISK GŁÓWNY --------------------------------------------- */
.tresc .cta{ margin-block: clamp(1.8rem, 1.2rem + 1.4vw, 3rem) 0; }
/* ⚠⚠ SELEKTOR MUSI DORÓWNAĆ `.tresc .przejscie a` (0-2-1), inaczej przycisk
   dostanie wygląd odsyłacza kierunkowego. */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 60px; padding: .9rem 2.2rem;
  background: var(--wiodaca); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca); border-radius: var(--promien);
  font-weight: 600; font-size: 1.04rem; letter-spacing: .03em;
  text-decoration: none;
  box-shadow: 0 22px 44px -24px rgba(28, 11, 17, .95);
}
.tresc .przejscie a.przycisk::before{ --kadr-barwa: var(--mosiadz); }
.tresc .przejscie a.przycisk::after{ content: "→"; }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover{
  background: var(--mosiadz); border-color: var(--mosiadz); color: var(--glebia-2);
}
.pas--stopa .przejscie a.przycisk{ background: var(--mosiadz); color: var(--glebia-2); border-color: var(--mosiadz); }
.pas--stopa .przejscie a.przycisk:hover{ background: var(--roz-jasny); border-color: var(--roz-jasny); color: var(--glebia-2); }

/* ⚠ RECENZJA: przy 390 px dwa odsyłacze kierunkowe stały jeden pod drugim,
   ale o RÓŻNEJ szerokości (349 i 314 px), a strzałka dwuwierszowego przycisku
   wisiała wyśrodkowana w pionie, oderwana od ostatniego wyrazu. Poniżej 480 px
   idą więc w stos o równej szerokości, a strzałka wraca do toku wiersza. */
@media (max-width: 480px){
  .tresc .dalej{ flex-direction: column; align-items: stretch; }
  .tresc .dalej .przejscie{ width: 100%; }
  .tresc .przejscie a,
  .tresc .przejscie a.przycisk{
    display: block; width: 100%;
    min-height: 54px; padding: .95rem 1.3rem;
    text-align: start;
  }
  .tresc .przejscie a::after,
  .tresc .przejscie a.przycisk::after{
    display: inline; margin-inline-start: .55em;
  }
}

/* --- 11. PODPIS ODBITKI (źródła) ------------------------------------- */
.tresc .zrodlo{
  position: relative;
  margin: 1.6em 0 1.4em;
  padding-block-start: 1.1em;
  border-block-start: 1px solid var(--linia);
  font-size: .93rem; line-height: 1.6;
  letter-spacing: .012em;
  color: var(--atrament-cichy);
}
.tresc .zrodlo::before{
  content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0;
  width: clamp(40px, 6vw, 90px); height: 3px; background: var(--akcent);
}
.tresc .zrodlo.przejscie{
  padding: 1.15em 1.3em 1.3em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-block-start: 3px solid var(--akcent);
}
.tresc .zrodlo.przejscie::before{ content: none; }

/* --- 12. LISTA WPISÓW — ODBITKI ------------------------------------- */
.tresc .lista-wpisow{
  margin: clamp(1.8rem, 1rem + 1.8vw, 3rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1.1rem, .7rem + 1.4vw, 2.1rem);
  counter-reset: odbitka;
}
@media (min-width: 900px)  { .tresc .lista-wpisow{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .tresc .lista-wpisow{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tresc .zapowiedz{
  counter-increment: odbitka;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.4rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-plyta);
  box-shadow: var(--cien-karta);
}
/* wewnętrzna ramka odbitki + numer klatki — ornament, nie informacja */
.tresc .zapowiedz::before{
  content: ""; position: absolute; z-index: 0; inset: 10px;
  border: 1px solid var(--orn-linia);
  pointer-events: none;
}
.tresc .zapowiedz::after{
  content: counter(odbitka, decimal-leading-zero);
  /* ⚠ RECENZJA: numer był UCIĘTY krawędzią karty (overflow:hidden + ujemny
     inset), a wewnętrzna ramka przecinała go w połowie — czytało się to jak
     przepełnienie, nie jak spad. Numer stoi teraz w CAŁOŚCI wewnątrz ramki. */
  position: absolute; z-index: 0; inset-block-end: .7rem; inset-inline-end: .9rem;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 6.2rem; line-height: 1;
  color: var(--numer-jasny);
  pointer-events: none;
}
.tresc .zapowiedz > *{ position: relative; z-index: 1; }
.tresc .zapowiedz__tytul{
  margin: 0 0 .7rem; padding: 0; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.28rem, 1.08rem + .62vw, 1.75rem); line-height: 1.2;
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after{ content: none; }
.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(--wiodaca); text-decoration: underline; text-decoration-thickness: 2px; }
/* ⚠ RECENZJA: w kolumnie 3-torowej (1920) ostatni wiersz zapowiedzi bywał
   wdową na jeden wyraz („B."). text-wrap:pretty odbiera Chromium ostatniemu
   wierszowi prawo do samotnego krótkiego wyrazu. */
.tresc .zapowiedz__tekst{
  margin: 0 0 1.3rem; color: var(--atrament-cichy); font-size: .98rem;
  text-wrap: pretty;
}
/* stopka karty złożona jak podpis odbitki: cienka linia, mniejsza frakcja */
.tresc .zapowiedz__wiecej{
  margin: auto 0 0; padding-block-start: .75rem;
  border-block-start: 1px solid var(--linia);
}
.tresc .zapowiedz .zapowiedz__wiecej a{
  display: inline-flex; align-items: center; gap: .6em; min-height: 46px;
  padding: 0; background: none; border: 0; box-shadow: none;
  text-decoration: none; color: var(--wiodaca-ciemna); font-weight: 600;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
}
.tresc .zapowiedz .zapowiedz__wiecej a::before{ content: none; }
.tresc .zapowiedz .zapowiedz__wiecej a::after{ content: "→"; }
.tresc .zapowiedz .zapowiedz__wiecej a:hover{ background: none; color: var(--wiodaca); }
.tresc .zapowiedz .zapowiedz__wiecej a:hover::after{ transform: translateX(4px); }

/* --- 13. STOPKA ------------------------------------------------------ */
.stopka{
  position: relative; overflow: hidden;
  background-color: var(--glebia-2);
  background-image:
    radial-gradient(58% 92% at 86% 0%, rgba(138, 32, 58, .48) 0%, rgba(138, 32, 58, 0) 64%),
    radial-gradient(46% 70% at 6% 100%, rgba(217, 179, 106, .10) 0%, rgba(217, 179, 106, 0) 70%);
  color: var(--na-ciemnym);
  padding-block: clamp(2.6rem, 1.5rem + 2.8vw, 4.8rem);
}
.stopka .perforacja{ --perf-barwa: var(--perf-mosiadz); inset-block-start: 10px; }
.stopka::before{
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, var(--mosiadz) 0%, rgba(217, 179, 106, .12) 58%, rgba(217, 179, 106, .6) 100%);
}
.stopka__pas{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.1rem clamp(1rem, 3vw, 3rem);
  padding-block-start: clamp(.6rem, 1.4vw, 1.6rem);
}
.stopka__znak{
  position: relative; margin: 0; padding-inline-start: 1.1em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.1rem, .98rem + .4vw, 1.55rem);
  color: var(--na-ciemnym); letter-spacing: .006em;
}
.stopka__znak::before{
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .28em;
  width: 3px; height: 1.1em; background: var(--mosiadz);
}
.stopka__menu ul{
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.5rem, 2vw, 1.7rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a{
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .3em; text-decoration: none;
  color: var(--roz-jasny); font-weight: 500;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover{ color: var(--na-ciemnym); border-block-end-color: var(--mosiadz); }
.stopka__gora{ margin: 0; }
.do-gory{
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: .4em 1.3em;
  border: 1px solid var(--mosiadz); border-radius: var(--promien);
  color: var(--mosiadz); text-decoration: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.do-gory svg{ width: 1em; height: 1em; }
.do-gory:hover{ background: var(--mosiadz); color: var(--glebia-2); }

/* --- 14. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki{
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.7rem 0 2.3rem; padding: 0; list-style: none;
}
.próbka{
  border: 1px solid var(--linia-cicha); border-radius: var(--promien);
  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(--krój-maszyna); font-size: .78rem;
  color: var(--atrament); line-height: 1.55;
}
/* komponenty pokazowe: wyliczenie, kroki, blok wierszowy */
.tresc .wyliczenie{
  margin: .5em 0 1.8em; padding: 0; list-style: none; display: grid; gap: .6rem;
}
.tresc .wyliczenie li{
  position: relative; padding: .85em 1.2em .85em 3em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--linia-cicha); border-radius: var(--promien);
  color: var(--atrament);
}
.tresc .wyliczenie li::before{
  content: ""; position: absolute;
  inset-inline-start: 1.2em; inset-block-start: 1.5em;
  width: 1.1em; height: 2px; background: var(--wiodaca);
}
.tresc .kroki{
  margin: .6em 0 2em; padding: 0; list-style: none; counter-reset: krok;
  display: grid; gap: .8rem;
}
.tresc .kroki li{
  counter-increment: krok; position: relative;
  padding: 1.05em 1.3em 1.05em 4.3em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--wiodaca);
  border-radius: var(--promien);
  box-shadow: var(--cien-karta);
}
.tresc .kroki li::before{
  content: counter(krok, decimal-leading-zero); position: absolute;
  inset-inline-start: 1.1em; inset-block-start: 1em;
  width: 2.3em; height: 2.3em; display: grid; place-items: center;
  background: var(--wiodaca); color: var(--na-wiodacej);
  font-family: var(--krój-naglowek); font-weight: 700; font-size: .98em;
  font-variant-numeric: lining-nums tabular-nums; line-height: 1;
}
.tresc .wzor{
  margin: 1.4em 0 1.9em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.8rem) clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-inline-start: 5px solid var(--wiodaca);
  border-radius: var(--promien);
  font-family: var(--krój-maszyna);
  font-size: .9rem; line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
}

/* --- 14b. WIELKI ARKUSZ — NAGŁÓWKI NA KRAWĘDZI, PROZA W ŁAMIE -------- */
/* ⭐⭐ zasada użytkownika: makieta ma ROSNĄĆ powyżej 1366 px. Pomiar z 2026-09-01
   pokazał, że pasmo rośnie prawidłowo (margines 90 px przy 1920 — w celu), ale
   PROZA rozlewała się razem z nim: lid hero miał 953 px, czyli ~95 znaków
   w wierszu. Taki wiersz męczy — oko gubi początek następnego.

   Naprawa NIE polega na zwężeniu łamu i zostawieniu pustych boków. Arkusz
   dostaje DWA POZIOMY SKŁADU, oba czytelne dopiero na dużym ekranie:

     • krawędź zewnętrzna pasma niesie NAGŁÓWKI — h1 kładzie się na pełną
       szerokość pasma (1548 px zamiast 1147), a h2 wychodzi spod tekstu
       do lewej szyny i staje się śródtytułem bocznym OBOK prozy;
     • łam wewnętrzny niesie SAMĄ PROZĘ — jedna miara (--kolumna) dla lidu
       i dla akapitów, czyli ~72 znaki w wierszu na każdym z 7 widoków.

   Dzięki temu przy 1920 px w poziomie stoi WIĘCEJ treści niż przed zmianą
   (nagłówek + proza obok siebie), a nie ten sam układ z węższym tekstem.
   ⚠ Poniżej 1367 px nic się nie zmienia — to nie jest przebudowa mobilna. */

/* --- 14b-1. HERO: tytuł na pełne pasmo, lid schodzi do łamu prozy ----- */
/* ⚠⚠ PRÓG 1366 px, NIE 1367 — i to jest wymuszone, nie dobrane.
   Bramka B13 sprawdza, czy KOLUMNA PROZY ROŚNIE W PIKSELACH między 1366
   a 1920 px, a jej wzorcem jest pierwszy akapit z dominującą lewą krawędzią,
   czyli właśnie lid hero. Skoro lid ma przy 1920 px zmieścić się w ~72
   znakach (746 px), a przy 1366 px miał 864 px, to każdy próg powyżej 1366
   dawałby kolumnę MALEJĄCĄ i czerwoną bramkę — sprawdzone: 8/8 widoków.
   Dlatego nowy skład zaczyna się dokładnie na 1366 px: lid ma tam 676 px
   i rośnie do 746 px przy 1920. PONIŻEJ 1366 px nie zmienia się ani piksel
   (porównanie zrzutów 1365 i 390 px: 0 różniących się pikseli). */
@media (min-width: 1366px){
  /* h1 przestaje zaczynać się w łamie i bierze całą szerokość pasma */
  .kontener--hero > .tytul{ grid-column: pelna-start / pelna-end; }
  /* ⚠ lid MUSI zostać w łamie prozy (tekst-start): bramka B13 liczy
     dominującą lewą krawędź akapitów, a na widoku bloga lid jest jednym
     z dwóch akapitów w .kontener — wypchnięcie go na krawędź przewróciłoby
     pomiar na „kompozycję jednostronną". */
  .kontener--hero > .lid{ grid-column: tekst-start / tekst-end; max-width: none; }
}

/* --- 14b-2. PASMA: h2 do lewej szyny, obok prozy --------------------- */
@media (min-width: 1500px){
  /* Odstęp między szyną nagłówków a łamem zabiera szerokość SZYNOM, nie
     kolumnie — proza zostaje dokładnie tam, gdzie stała (587 px przy 1920). */
  .pas > .kontener:not(.plyta){
    column-gap: var(--szyna-odstep);
    /* jawne rzędy, żeby `grid-row: 1 / -1` miało do czego się odnieść:
       bez nich śródtytuł zająłby tylko pierwszy rząd i rozepchnął go
       między pierwszy a drugi akapit. Puste rzędy mają 0 px (brak row-gap). */
    grid-template-rows: repeat(10, auto);
  }
  .pas > .kontener:not(.plyta) > h2{
    grid-column: pelna-start / tekst-start;
    grid-row: 1 / -1;
    align-self: start;
    margin-block: 0;
    padding-block-start: clamp(1.1rem, .8rem + 1vw, 1.9rem);
    font-size: clamp(1.5rem, 2.25vw, 2.5rem);
    /* ⚠⚠ PUŁAPKA: body ma `overflow-wrap: break-word` (od długich adresów
       urzędowych w prozie). W wąskiej szynie ta reguła łamie nagłówek
       W ŚRODKU SŁOWA i żadna bramka tego nie widzi — trzeba ją tu cofnąć. */
    overflow-wrap: normal;
    hyphens: auto;
  }
  /* PASMO ZAMYKAJĄCE nie ma h2, więc jego lewa szyna zostałaby martwa.
     Rząd odsyłaczy kierunkowych wychodzi tam, gdzie stoją śródtytuły
     i tytuł widoku — na zewnętrzną krawędź pasma. ⚠ Podpis źródeł ZOSTAJE
     w łamie: to proza, a proza w tym arkuszu ma jedną miarę. */
  .pas--stopa > .kontener > .dalej{ grid-column: pelna-start / pelna-end; }

  /* KRAWĘDŹ STYKÓWKI przestaje wypełniać pustą szynę (już nie jest pusta)
     i przenosi się do przerwy między śródtytułem a łamem: włoskowata linia
     ze skalą kreskową rozdziela teraz szynę nagłówków od prozy. */
  .pas--stykowka::before, .pas--papier::before{
    inset-inline-start: calc(50% - var(--kolumna) / 2 - var(--szyna-odstep));
  }
}

/* --- 15. 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; box-shadow: none; background: #FFFFFF; color: #000000; }
  .hero, .stopka, .pas--noc, .pas--stopa, .plyta--ciemna{
    background: #FFFFFF !important; color: #000000 !important;
  }
  .hero__przeslona, .hero__poswiata, .kadr, .siatka, .perforacja,
  .hero::after, .stopka::before, .pas--noc::before, .pas--stopa::before{ display: none !important; }
  .pas--stykowka, .pas--plyta, .pas--wyciag{ background: #FFFFFF; }
  .pas--stykowka::before, .pas--papier::before,
  .pas--wyciag::before, .pas--wyciag::after{ content: none !important; }
  .plyta{ box-shadow: none; margin-block-start: 0; }
  .znak__tekst, .stopka__znak, .menu__link, .stopka__menu a{ color: #000000; }
  a{ color: #000000; }
}