@charset "utf-8";
/* =====================================================================
   KARTUSZ — system projektowy makiety przewodnik.warmia.pl
   Seria STRONY-WWW-ST-CBF. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.

   IDEA: dawna kartografia. Widok jest czytany jak arkusz mapy — ciemny pas
   tytułowy z warstwicami i różą wiatrów, nagłówki sekcji osadzone w KARTUSZU
   (ramka z narożnikami), granice zaznaczone kreskowaniem, karty złożone jak
   wpisy inwentarza archiwalnego z podwójną linią i sygnaturą rzymską.

   ⚠ KOLEJNOŚĆ WAŻNA DLA PUŁAPEK: typografia prozy PRZED komponentami, a każdy
   komponent stojący w prozie ma prefiks „.tresc" i wyklucza się z reguły
   odsyłacza prozy przez :not(), żeby nie powtórzyć pułapki „.proza a bije
   .przycisk" (tekst przycisku w kolorze własnego tła).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root{
  /* powierzchnie jasne — papier archiwalny */
  --papier:          #F5EFE1;   /* ciepła kość słoniowa — podłoże */
  --papier-karta:    #FCF8EE;   /* karta inwentarza */
  --tlo-2:           #E8DCC6;   /* sepia jasna — pasmo drugoplanowe */
  --wiodaca-jasna:   #DCE4EC;   /* pola numerów, plakietki */
  /* pismo */
  --atrament:        #1C1A15;   /* czerń brązowa */
  --atrament-cichy:  #4E483A;
  /* barwa wiodąca — atrament pruskiego błękitu */
  --wiodaca:         #1E3A5C;   /* powierzchnie, kreski, narożniki kartusza */
  --wiodaca-ciemna:  #16283F;   /* nagłówki i odsyłacze na jasnym */
  --akcent:          #8E2B26;   /* przygaszona czerwień pieczęci */
  --linia:           #877450;   /* sepia — obwódki (element nietekstowy) */
  --linia-cicha:     #D9CBAF;   /* wyłącznie dekoracja */
  --na-wiodacej:     #F5EFE1;
  --na-akcencie:     #F5EFE1;

  /* powierzchnie ciemne — atrament na arkuszu */
  --glebia:          #12283F;
  --glebia-2:        #0C1D2E;
  --na-ciemnym:      #F3EBDA;
  --na-ciemnym-cichy:#C9D8E6;
  --sepia-jasna:     #D8B98A;
  --blekit-jasny:    #A9C2DA;

  /* role odsyłacza — przestawiane na paśmie ciemnym */
  --link:            var(--wiodaca-ciemna);
  --link-hover:      var(--akcent);
  --link-kreska:     var(--linia);

  /* ornamenty — wyłącznie warstwa wizualna, nigdy nośnik informacji */
  --orn-sepia:       rgba(135,116,80,.16);
  --orn-sepia-mocna: rgba(135,116,80,.34);
  --orn-blekit:      rgba(30,58,92,.10);
  --orn-swiatlo:     rgba(216,185,138,.16);

  --kroj-naglowek: "Cormorant Garamond", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --kroj-tekst:    "Archivo", "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 — jedna krawędź dla nagłówków, prozy i kresek;
     miara w em dawała przy 1920 wiersz o ćwierć dłuższy niż przy 1366. */
  --kolumna:      36rem;                    /* łam prozy ≈72 znaki */
  --pas-szer:     82rem;
  --margines:     clamp(20px, 5vw, 104px);
  --wciecie:      clamp(6px, 1.4vw, 22px);  /* wysunięcie kartusza poza łam */

  --promien:      2px;                       /* rytownicza ostrość narożnika */
  --zachodzenie:  clamp(1.4rem, .9rem + 2vw, 3.6rem);
  --cien-plyta:   0 34px 64px -38px rgba(18,40,63,.55), 0 2px 8px -5px rgba(18,40,63,.20);
  --cien-karta:   0 20px 40px -26px rgba(18,40,63,.45), 0 1px 3px -2px rgba(18,40,63,.14);

  /* narożniki kartusza rysowane tłem — 4 rogi, 8 warstw */
  --rog: 18px;
}

/* --- 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, .875rem + .35vw, 1.4rem);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background-color: var(--papier);
  /* faktura papieru czerpanego — dwa cienkie rastry, bez pliku graficznego */
  background-image:
    repeating-linear-gradient(90deg, rgba(135,116,80,.035) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg,  rgba(135,116,80,.028) 0 1px, transparent 1px 5px);
  color: var(--atrament);
  font-family: var(--kroj-tekst);
  font-size:1rem;
  line-height:1.72;
  /* ⚠ długie adresy w prozie potrafią rozepchnąć widok na 360 px (bramka 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: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.5rem;
  background:var(--wiodaca-ciemna); color:var(--na-wiodacej);
  font-weight:600; letter-spacing:.06em; text-decoration:none;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy) */
.rama{
  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), a bloki z klasą .szeroki
   rozpychają się na całe pasmo. WSZYSTKIE pasma mają identyczną geometrię,
   więc proza w całym serwisie ma JEDNĄ lewą krawędź. */
.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 > .warstwy,
.kontener > .lista-wpisow,
.kontener > .spis,
.kontener > .probki{ grid-column: pelna-start / pelna-end }
/* ⚠ JEDNA KRAWĘDŹ: tytuł widoku zaczyna się dokładnie tam, gdzie proza,
   a rośnie w prawo. Osobna, szersza kolumna hero dawała dwie lewe krawędzie. */
.kontener--hero > *{ grid-column: tekst-start / pelna-end }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek{
  position:relative; z-index:30;
  background-color:var(--papier-karta);
  background-image: repeating-linear-gradient(90deg, rgba(135,116,80,.05) 0 1px, transparent 1px 7px);
}
/* KRESKOWANIE GRANICY — pas pod paskiem nagłówka; ten sam motyw wraca
   pod hero i nad stopką, jak oznaczenie granicy na dawnej mapie */
.naglowek::after{
  content:""; display:block; height:9px;
  background-color:var(--papier);
  background-image:
    linear-gradient(var(--wiodaca), var(--wiodaca)),
    repeating-linear-gradient(90deg, var(--linia) 0 1.5px, transparent 1.5px 9px);
  background-size:100% 2px, 100% 100%;
  background-position:top left, top left;
  background-repeat:no-repeat, repeat-x;
}
@media (min-width:900px){
  .naglowek{ position:sticky; inset-block-start:0; box-shadow:0 14px 34px -30px rgba(18,40,63,.85) }
}
.naglowek__pas{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.2rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* sygnatura słowna — typograficzna, w kartuszu; nigdy nie udaje logotypu (T8/T9) */
.znak{
  position:relative;
  display:inline-flex; align-items:center; min-height:48px;
  padding:.28em .85em;
  text-decoration:none; color:var(--wiodaca-ciemna);
  font-family:var(--kroj-naglowek); font-weight:700;
  font-size:clamp(1.02rem, .92rem + .34vw, 1.42rem);
  line-height:1.15; letter-spacing:.13em; text-transform:uppercase;
  border-block:1px solid var(--linia);
}
.znak::before,.znak::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
}
.znak::before{ inset-block-start:-1px; inset-inline-start:-1px;
  border-block-start:2px solid var(--akcent); border-inline-start:2px solid var(--akcent) }
.znak::after{ inset-block-end:-1px; inset-inline-end:-1px;
  border-block-end:2px solid var(--akcent); border-inline-end:2px solid var(--akcent) }
.znak:hover{ color:var(--wiodaca); border-block-color:var(--wiodaca) }

/* ⚠ pułapka B5: „flex:none" nie pozwalało nawigacji się zwężyć i lista menu
   wystawała poza ekran przy 360 px. Menu MA się kurczyć i zawijać. */
.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;
}
.menu__link{
  position:relative;
  display:inline-flex; align-items:center; min-height:46px;   /* B7 */
  /* ⚠ przy 1366 px pasek nagłówka zawijał się na dwa wiersze: sygnatura
     w kartuszu plus cztery długie etykiety nie mieściły się w 1229 px. */
  padding-inline:.55em;
  font-weight:500; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--atrament-cichy);
}
.menu__link::after{
  content:""; position:absolute; inset-block-end:.5rem;
  inset-inline-start:.55em; width:0; height:2px;
  background:var(--wiodaca); transition:width .25s ease;
}
.menu__link:hover{ color:var(--wiodaca-ciemna) }
.menu__link:hover::after{ width:calc(100% - 1.1em) }
/* pozycja bieżąca ma podkreślenie I romb — kolor nie jest jedynym nośnikiem */
.menu__link[aria-current="page"]{ color:var(--wiodaca-ciemna); font-weight:600 }
.menu__link[aria-current="page"]::after{ width:calc(100% - 1.1em); height:3px; background:var(--akcent) }
.menu__link[aria-current="page"]::before{
  content:""; position:absolute; inset-block-start:5px; inset-inline-start:calc(50% - 3px);
  width:6px; height:6px; background:var(--akcent); transform:rotate(45deg);
}
/* ⚠⚠ P-11: odstęp rombu MUSI być w pikselach, nie w „rem".
   Pudełko odsyłacza ma SZTYWNE min-height:46px (wymóg B7), a wiersz wersalików
   siedzi w nim mniej więcej stale ok. 15 px od góry — niezależnie od szerokości
   okna. Zapis „.55rem" skalował się razem z korzeniem, więc przy 1920 px romb
   zjeżdżał na literę „A" w słowie START i ZAKRYWAŁ jej wierzchołek
   (zmierzony prześwit: −3,8 px przy 1920, −2,5 px przy 1366, −1,0 px przy 1000 —
   wszędzie nachodzenie, nie samo zetknięcie). Pięć pikseli daje rombowi
   pole 3,75–13,25 px od górnej krawędzi pudełka, czyli ok. 2 px nad wierszem
   tekstu i ok. 5 px nad tuszem wersalików, przy każdej szerokości. */
@media (max-width:899px){
  .naglowek__pas{ justify-content:flex-start; padding-block:.6rem .2rem }
  .menu, .menu__lista{ justify-content:flex-start }
  .menu{ flex:1 0 100%; margin-block-start:.3rem }
  .menu__lista{ display:block; width:100%; border-block-start:1px solid var(--linia-cicha) }
  .menu__poz{ border-block-end:1px solid var(--linia-cicha) }
  .menu__link{ display:flex; width:100%; padding-inline:0 }
  .menu__link::after{ inset-inline-start:0 }
  .menu__link[aria-current="page"]::before{ inset-inline-start:auto; inset-inline-end:2px; inset-block-start:calc(50% - 3px) }
}

/* --- 5. HERO — pas tytułowy arkusza ---------------------------------- */
.tresc{ display:block }

.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background-color:var(--glebia);
  background-image:
    radial-gradient(72% 62% at 82% 2%,  rgba(36,72,111,.90) 0%, rgba(36,72,111,0) 62%),
    radial-gradient(64% 58% at 2% 98%,  rgba(28,60,96,.85) 0%, rgba(28,60,96,0) 66%),
    radial-gradient(44% 40% at 96% 94%, rgba(216,185,138,.16) 0%, rgba(216,185,138,0) 72%),
    linear-gradient(162deg, #1B3D61 0%, #12283F 48%, #0A1A29 100%);
  color:var(--na-ciemnym);
  padding-block: clamp(2.6rem, 1.3rem + 4.2vw, 6.2rem) clamp(3.4rem, 1.9rem + 4.8vw, 7.4rem);
}
/* granica arkusza: kreskowanie w papierze pod ciemnym pasem */
.hero::after{
  content:""; position:absolute; z-index:2; inset-inline:0; inset-block-end:0; height:14px;
  background-image:
    linear-gradient(var(--sepia-jasna), var(--sepia-jasna)),
    repeating-linear-gradient(90deg, var(--wiodaca) 0 2px, var(--papier) 2px 11px);
  background-size:100% 2px, 100% 100%;
  background-position:top left, top left;
  background-repeat:no-repeat, repeat;
}
.hero .kontener{ position:relative; z-index:1 }

.hero .tytul{
  margin:0 0 clamp(1rem, .7rem + 1vw, 2rem);
  font-family:var(--kroj-naglowek); font-weight:600;
  font-size:clamp(2.05rem, 1.3rem + 2.1vw, 3.5rem);
  line-height:1.09; letter-spacing:.055em; text-transform:uppercase;
  color:var(--na-ciemnym);
  max-width:16em; text-wrap:balance;
}
/* podwójna linia rytownicza nad tytułem */
.hero .tytul::before{
  content:""; display:block;
  width:clamp(88px, 14vw, 240px); height:7px;
  margin-block-end:clamp(1rem, .7rem + 1vw, 1.9rem);
  border-block:1px solid var(--sepia-jasna);
}
.hero .lid{
  margin:0; max-width:40rem;
  font-size:1.1rem; line-height:1.66;
  color:var(--na-ciemnym-cichy);
}
/* PODZIAŁKA — pasek skali z dawnej mapy; czysta dekoracja, bez jednostek */
.podzialka{
  display:block; width:min(100%, 250px); height:26px;
  margin-block-start:clamp(1.5rem, 1rem + 1.4vw, 2.6rem);
  background-color:transparent;
  background-image:
    linear-gradient(var(--sepia-jasna), var(--sepia-jasna)),
    linear-gradient(var(--sepia-jasna), var(--sepia-jasna)),
    repeating-linear-gradient(90deg, var(--sepia-jasna) 0 25px, transparent 25px 50px),
    repeating-linear-gradient(90deg, var(--blekit-jasny) 0 1px, transparent 1px 25px);
  background-size:100% 1px, 100% 1px, 100% 9px, 100% 16px;
  background-position:left top 3px, left top 12px, left top 3px, left bottom;
  background-repeat:no-repeat, no-repeat, repeat-x, repeat-x;
}

/* ORNAMENTY (6B) — warstwice i róża wiatrów. Bez treści, aria-hidden.
   ⚠ B6 mierzy KAŻDY <svg> wobec tła: barwa nośna musi mieć ≥3:1, subtelność
   robimy stroke-opacity WEWNĄTRZ rysunku, nie przygaszeniem koloru. */
.orn{ position:absolute; z-index:0; pointer-events:none; display:block }
.orn svg{ width:100%; height:auto; display:block }
.hero .orn--warstwice{
  inset-block-start:50%; inset-inline-end:-12%;
  width:clamp(420px, 52vw, 1080px);
  transform:translateY(-50%);
  color:var(--sepia-jasna);
}
.hero .orn--roza{
  inset-block-end:-13%; inset-inline-start:-9%;
  width:clamp(190px, 25vw, 470px);
  transform:rotate(-8deg);
  color:var(--blekit-jasny);
}
/* ⚠ RECENZJA 2026-08-31: róża wracała w IDENTYCZNYM kadrze na każdym widoku
   i czytała się jak wklejony ten sam element, a nie jak motyw. Każdy typ widoku
   dostaje własny wycinek, skalę i obrót — ten sam znak, inne ujęcie. */
.widok--podstrona .hero .orn--roza{
  inset-block-end:-26%; inset-inline-start:-15%;
  width:clamp(215px, 31vw, 580px); transform:rotate(15deg);
}
.widok--wpis .hero .orn--roza{
  inset-block-end:3%; inset-inline-start:-20%;
  width:clamp(240px, 35vw, 660px); transform:rotate(-22deg);
}
.widok--blog .hero .orn--roza{
  inset-block-end:-36%; inset-inline-start:-5%;
  width:clamp(200px, 27vw, 520px); transform:rotate(28deg);
}
.widok--specimen .hero .orn--roza{
  inset-block-end:-9%; inset-inline-start:-13%;
  width:clamp(200px, 28vw, 540px); transform:rotate(-34deg);
}
/* ⚠⚠ RECENZJA: przy 360–390 px róża stała DOKŁADNIE na podziałce mapowej,
   a jej górny promień wchodził w ostatni wiersz lidu — dwa ornamenty w jednym
   miejscu plus ornament w tekście. Poniżej 480 px pas tytułowy niesie SAME
   warstwice (inny kadr niż na desktopie), a podziałka stoi na czystym granacie. */
@media (max-width:479px){ .hero .orn--roza{ display:none } }
/* punkty triangulacyjne — drugi znak z tej samej rodziny co róża; stoi tam,
   gdzie wcześniej powtarzała się róża (pasmo nocne), po przeciwnej stronie */
.pas--noc .orn--triangulacja{
  inset-block-start:-16%; inset-inline-end:-7%;
  width:clamp(320px, 42vw, 820px);
  color:var(--blekit-jasny);
}
.widok--wpis .pas--noc .orn--triangulacja{
  inset-block-start:50%; inset-inline-end:-17%;
  width:clamp(320px, 45vw, 900px);
  transform:translateY(-50%);
}
.widok--podstrona .pas--noc .orn--triangulacja{
  inset-block-start:-8%; inset-inline-end:-18%;
  width:clamp(340px, 46vw, 880px);
}

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

.pas--wstep{
  background-color:var(--papier);
  background-image:
    repeating-radial-gradient(circle at 4% 46%, transparent 0 38px, var(--orn-sepia) 38px 39px);
  background-repeat:no-repeat;
  background-size:820px 820px;
  background-position:left -300px center;
  padding-block: clamp(2.4rem, 1.4rem + 3vw, 5rem);
}
.pas--papier{
  background-color:var(--papier);
  background-image:
    repeating-radial-gradient(circle at 97% 12%, transparent 0 34px, var(--orn-sepia) 34px 35px);
  background-repeat:no-repeat;
  background-size:760px 760px;
  background-position:right -280px top -180px;
  padding-block: clamp(2.4rem, 1.4rem + 3vw, 5rem);
}
.pas--sepia{
  background-color:var(--tlo-2);
  background-image:
    repeating-radial-gradient(circle at 3% 92%, transparent 0 32px, var(--orn-sepia-mocna) 32px 33px);
  background-repeat:no-repeat;
  background-size:700px 700px;
  background-position:left -240px bottom -200px;
  padding-block: clamp(2.6rem, 1.5rem + 3.2vw, 5.4rem);
}
/* pasmo, na którym leży PŁYTA nachodząca na sąsiada */
.pas--plyta{
  background-color:var(--tlo-2);
  background-image:
    repeating-radial-gradient(circle at 98% 60%, transparent 0 36px, var(--orn-sepia-mocna) 36px 37px);
  background-repeat:no-repeat;
  background-size:780px 780px;
  background-position:right -280px bottom -140px;
  padding-block: 0 clamp(1.6rem, 1rem + 2vw, 3.6rem);
}
.pas--plyta--papier{
  background-color:var(--papier);
  background-image:
    repeating-radial-gradient(circle at 2% 20%, transparent 0 36px, var(--orn-sepia) 36px 37px);
  background-position:left -300px top -160px;
}
/* PŁYTA — karta inwentarza z podwójną ramką i narożnikami kartusza */
.plyta{
  /* ⚠ arkusz jest węższy od pasma: przy 1920 px kolumna prozy zajmowała
     41% białej płyty i widok czytał się jak kartka papieru. Zawężenie
     nie rusza lewej krawędzi prozy — kolumna jest wyśrodkowana, więc
     wspólna krawędź całego serwisu zostaje ta sama. */
  --pas-szer:64rem;
  position:relative; z-index:2;
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(1.9rem, 1.2rem + 2.4vw, 4rem);
  background-color:var(--papier-karta);
  background-image:
    linear-gradient(var(--wiodaca),var(--wiodaca)), linear-gradient(var(--wiodaca),var(--wiodaca)),
    linear-gradient(var(--wiodaca),var(--wiodaca)), linear-gradient(var(--wiodaca),var(--wiodaca)),
    linear-gradient(var(--wiodaca),var(--wiodaca)), linear-gradient(var(--wiodaca),var(--wiodaca)),
    linear-gradient(var(--wiodaca),var(--wiodaca)), linear-gradient(var(--wiodaca),var(--wiodaca));
  background-size:
    var(--rog) 3px, 3px var(--rog), var(--rog) 3px, 3px var(--rog),
    var(--rog) 3px, 3px var(--rog), var(--rog) 3px, 3px var(--rog);
  background-position:
    left 10px top 10px, left 10px top 10px,
    right 10px top 10px, right 10px top 10px,
    left 10px bottom 10px, left 10px bottom 10px,
    right 10px bottom 10px, right 10px bottom 10px;
  background-repeat:no-repeat;
  border:1px solid var(--linia);
  box-shadow:var(--cien-plyta);
}
/* wewnętrzna cienka ramka — druga linia kartusza.
   ⚠ pseudoelement MUSI być position:absolute, bo inaczej stanie się
   dodatkowym elementem siatki .kontener i rozbije tor kolumny. */
.plyta::before{
  content:""; position:absolute; inset:10px;
  border:1px solid var(--linia-cicha);
  pointer-events:none;
}
@media (max-width:619px){ .plyta{ border-inline:0 } }

/* MIARKA MARGINESOWA — podziałka przy prawym brzegu arkusza.
   ⚠⚠ RECENZJA 2026-08-31: miarka wisiała na .kontener, a pasmo i arkusz mają
   RÓŻNE szerokości — przy przewijaniu ornament skakał w bok o 187 px, a w krótkim
   paśmie zostawał ośmiokreskowym kikutem w pustym polu. Teraz wisi na PAŚMIE,
   ma jedną oś liczoną od krawędzi okna i biegnie przez całą wysokość pasma,
   więc sąsiednie pasma składają się na JEDNĄ ciągłą podziałkę. */
@media (min-width:1240px){
  .pas::after{
    content:""; position:absolute; z-index:0; pointer-events:none;
    inset-block:0;
    /* poza kolumną treści przy każdej szerokości: albo w marginesie okna
       (gdy kontener jest już zwężony do 82rem), albo w polu paddingu pasma */
    inset-inline-end:max(calc(var(--margines) * .18), calc((100% - var(--pas-szer)) / 2 * .42));
    width:16px;
    background-image:
      linear-gradient(var(--linia), var(--linia)),
      repeating-linear-gradient(180deg, var(--linia) 0 1.5px, transparent 1.5px 18px);
    background-size:1px 100%, 10px 100%;
    background-position:right top, right 3px top;
    background-repeat:no-repeat, repeat-y;
    opacity:.45;
  }
}

/* pasmo ciemne — panel „atrament". Nadpisujemy TOKENY, więc każdy komponent
   w środku dostaje wariant na ciemnym bez osobnych reguł. */
.pas--noc{
  --papier:          var(--glebia);
  --papier-karta:    #17324D;
  --tlo-2:           #1B3852;
  --wiodaca-jasna:   #1B3852;
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--na-ciemnym-cichy);
  --wiodaca:         var(--sepia-jasna);
  --wiodaca-ciemna:  var(--na-ciemnym);
  --na-wiodacej:     var(--glebia);
  --akcent:          var(--sepia-jasna);
  --na-akcencie:     var(--glebia);
  --linia:           #7C93AB;
  --linia-cicha:     #2C4A66;
  --link:            var(--sepia-jasna);
  --link-hover:      #F0D6AE;
  --link-kreska:     #7C93AB;
  position:relative; overflow:hidden;
  background-color:var(--glebia);
  background-image:
    radial-gradient(66% 60% at 92% 4%, rgba(36,72,111,.75) 0%, rgba(36,72,111,0) 62%),
    radial-gradient(52% 48% at 4% 98%, rgba(28,60,96,.7) 0%, rgba(28,60,96,0) 66%),
    repeating-radial-gradient(circle at 8% 8%, transparent 0 34px, var(--orn-swiatlo) 34px 35px);
  color:var(--na-ciemnym);
  padding-block: clamp(2.8rem, 1.6rem + 3.4vw, 5.8rem);
}
.pas--noc::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:2px;
  background:linear-gradient(90deg, rgba(216,185,138,.15) 0%, var(--sepia-jasna) 48%, rgba(216,185,138,.15) 100%);
}
.pas--noc .orn--warstwice{
  inset-block-start:-18%; inset-inline-end:-14%;
  width:clamp(360px, 44vw, 860px);
  color:var(--sepia-jasna);
}

/* --- 7. TYPOGRAFIA PROZY --------------------------------------------- */
/* KARTUSZ nagłówka sekcji: podwójna pozioma linia + narożniki */
.tresc h2{
  /* ⭐ KARTUSZ TYTUŁOWY jest SZERSZY niż łam: zaczyna się na krawędzi prozy
     i biegnie do prawego brzegu arkusza, jak blok tytułowy dawnej mapy.
     Dzięki temu szerokie ekrany nie stoją puste, a proza zostaje czytelna. */
  grid-column: tekst-start / pelna-end;
  position:relative; z-index:0;
  margin-block: clamp(2.4rem, 1.6rem + 2vw, 4rem) clamp(1rem, .7rem + .9vw, 1.7rem);
  margin-inline: calc(-1 * var(--wciecie));
  padding: clamp(.85rem, .6rem + .8vw, 1.35rem) var(--wciecie);
  border-block:1px solid var(--linia);
  font-family:var(--kroj-naglowek); font-weight:600;
  font-size:clamp(1.5rem, 1.05rem + 1.45vw, 2.45rem);
  line-height:1.16;
  color:var(--wiodaca-ciemna);
  text-wrap:balance;
}
.tresc h2::before,.tresc h2::after{
  content:""; position:absolute; width:13px; height:13px; pointer-events:none;
}
.tresc h2::before{ inset-block-start:-1px; inset-inline-start:-1px;
  border-block-start:3px solid var(--wiodaca); border-inline-start:3px solid var(--wiodaca) }
.tresc h2::after{ inset-block-end:-1px; inset-inline-end:-1px;
  border-block-end:3px solid var(--wiodaca); border-inline-end:3px solid var(--wiodaca) }
.kontener > h2:first-child{ margin-block-start:0 }
/* ⚠⚠ RECENZJA 2026-08-31: kartusz H2 zaczynał się na krawędzi PROZY (x=564),
   a siatka kart pod nim na krawędzi pasma (x=207) — nagłówek nie trzymał ani
   lewej, ani prawej osi sekcji, którą zapowiada, a do tego wystawał 23 px poza
   jej prawy brzeg. Gdy kontener niesie blok pełnej szerokości, kartusz dostaje
   DOKŁADNIE te same krawędzie co ten blok. */
.kontener:has(> .warstwy) > h2,
.kontener:has(> .lista-wpisow) > h2,
.kontener:has(> .probki) > h2,
.kontener:has(> .spis) > h2{
  grid-column: pelna-start / pelna-end;
  margin-inline:0;
  padding-inline:0;
}

.tresc h3{
  position:relative;
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.6rem) 0 .45rem;
  padding-inline-start:2.1em;
  font-family:var(--kroj-naglowek); font-weight:600;
  font-size:clamp(1.18rem, 1.04rem + .45vw, 1.56rem);
  line-height:1.28; color:var(--wiodaca-ciemna);
}
/* KRESKOWANIE — ten sam znak, którym mapa zaznacza granicę */
.tresc h3::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.56em;
  width:1.5em; height:.55em;
  background-image:repeating-linear-gradient(114deg, var(--linia) 0 1.5px, transparent 1.5px 6px);
}

.tresc p{ margin:0 0 1.15em }
.tresc p:last-child{ margin-block-end:0 }
.tresc .wprowadzenie{ font-size:1.08rem }

/* odsyłacz w prozie — reguła WYKLUCZA komponenty przyciskowe, żeby nie
   powtórzyć pułapki „.proza a bije .przycisk" (napis w kolorze własnego tła) */
.tresc p:not(.przejscie):not(.zapowiedz__wiecej) a,
.tresc li:not(.zapowiedz) a{
  color:var(--link);
  text-decoration-line:underline;
  text-decoration-color:var(--link-kreska);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
}
.tresc p:not(.przejscie):not(.zapowiedz__wiecej) a:hover,
.tresc li:not(.zapowiedz) a:hover{
  color:var(--link-hover); text-decoration-thickness:2px;
}

/* INICJAŁ — duża litera rytownicza otwierająca pasmo wstępu */
.pas--wstep .kontener > p:first-of-type{ font-size:1.12rem; line-height:1.66 }
.pas--wstep .kontener > p:first-of-type::first-letter{
  float:left;
  font-family:var(--kroj-naglowek); font-weight:700;
  font-size:3.5em; line-height:.8;
  padding-inline-end:.1em; padding-block-start:.06em;
  color:var(--wiodaca);
}

/* --- 8. WYLICZENIE --------------------------------------------------- */
.tresc .wyliczenie{
  margin:.5em 0 1.7em; padding:0; list-style:none;
  display:grid; gap:.5rem;
}
.tresc .wyliczenie li{ position:relative; padding:.15em 0 .15em 2.4em }
.tresc .wyliczenie li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.66em;
  width:1.6em; height:.55em;
  background-image:repeating-linear-gradient(114deg, var(--linia) 0 1.5px, transparent 1.5px 6px);
}

/* --- 9. KROKI — pieczęcie z numerem ---------------------------------- */
.tresc .kroki{
  margin:.6em 0 1.9em; padding:0; list-style:none;
  counter-reset:krok; display:grid; gap:.7rem;
}
.tresc .kroki li{
  counter-increment:krok; position:relative;
  padding:1em 1.2em 1em 4.9em;
  background-color:var(--papier-karta);
  border:1px solid var(--linia-cicha);
  border-inline-start:3px solid var(--wiodaca);
  box-shadow:var(--cien-karta);
}
.tresc .kroki li::before{
  content:counter(krok, decimal-leading-zero);
  position:absolute; inset-inline-start:1.05em; inset-block-start:.86em;
  width:2.6em; height:2.6em;
  display:grid; place-items:center;
  border:1px solid var(--linia); border-radius:50%;
  box-shadow: inset 0 0 0 3px var(--papier-karta), inset 0 0 0 4px var(--linia-cicha);
  background:var(--wiodaca-jasna); color:var(--wiodaca-ciemna);
  font-family:var(--kroj-naglowek); font-weight:700; font-size:.92em;
  font-variant-numeric:lining-nums tabular-nums; line-height:1;
}

/* --- 10. WARSTWY — karty pod nagłówkami trzeciego stopnia ------------- */
.warstwy{
  display:grid; gap:clamp(1rem, .6rem + 1.2vw, 1.9rem);
  margin-block: clamp(1.3rem, .9rem + 1.2vw, 2.4rem) clamp(1.5rem, 1rem + 1.4vw, 2.8rem);
  padding:0; list-style:none;
  counter-reset:warstwa;
}
/* auto-fit: trzy karty na szerokim paśmie, dwie na arkuszu i na tablecie —
   bez sztywnego progu, który przy węższym arkuszu ściskał kolumny do 200 px */
.warstwy{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) }
.warstwa{
  counter-increment:warstwa;
  position:relative; overflow:hidden;
  padding:clamp(1.25rem, .9rem + 1.1vw, 2.1rem);
  background-color:var(--papier-karta);
  background-image:
    linear-gradient(var(--wiodaca),var(--wiodaca)),
    linear-gradient(var(--linia-cicha),var(--linia-cicha));
  background-size:clamp(46px, 26%, 120px) 3px, 100% 1px;
  background-position:left top, left top 6px;
  background-repeat:no-repeat;
  border:1px solid var(--linia-cicha);
  box-shadow:var(--cien-karta);
  /* pole na sygnaturę — cyfra nie wchodzi w ostatni wiersz prozy */
  padding-block-end:clamp(2.3rem, 1.7rem + 1.5vw, 3.6rem);
}
/* SYGNATURA — cyfra rzymska wpisu inwentarza; ornament, nie informacja.
   ⚠⚠ RECENZJA 2026-08-31: cyfra była UCIĘTA PŁASKO dolną krawędzią karty
   (górna szeryfa jest, dolnej nie ma), więc „III" czytało się jak trzy słupki
   tabeli, a nie jak sygnatura. Teraz mieści się w całości, z dolną szeryfą
   i wyraźnym luzem do krawędzi; karta ma na nią zarezerwowane pole. */
.warstwa::before{
  content:counter(warstwa, upper-roman);
  position:absolute; inset-block-end:.5rem; inset-inline-end:.6rem;
  font-family:var(--kroj-naglowek); font-weight:700;
  font-size:4.2rem; line-height:1;
  color:var(--linia-cicha); pointer-events:none;
}
.warstwa > *{ position:relative }
.warstwa h3{ margin-block-start:.5rem }
.warstwa p{ margin-block-end:0 }

/* --- 11. ŹRÓDŁA ------------------------------------------------------ */
.zrodla{
  position:relative;
  margin-block: clamp(1.8rem, 1.2rem + 1.5vw, 3rem) 0;
  padding: clamp(1.1rem, .8rem + 1vw, 1.9rem) clamp(1.1rem, .8rem + 1.2vw, 2.1rem);
  background-color:var(--papier-karta);
  border:1px solid var(--linia);
  border-inline-start:4px solid var(--akcent);
  box-shadow:var(--cien-karta);
}
.tresc .zrodla h3{
  margin:0 0 .3rem; padding-inline-start:0;
  font-family:var(--kroj-tekst); font-weight:600;
  font-size:.84rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--atrament-cichy);
}
.tresc .zrodla h3::before{ content:none }
/* 2026-08-31: pozycje spisu źródeł w widokach wpisów to już zwykły tekst
   (nazwa źródła bez odsyłacza — adresy mieszkają w nie-wgrywac/zrodla.txt).
   Odstęp między pozycjami dawała dotąd wysokość 44 px odsyłacza, więc bez
   niego wiersze zlewały się z łamaniem długich pozycji — stąd większy gap. */
.tresc .zrodla .wyliczenie{ margin-block:.6em 0; gap:.55rem }
.tresc .zrodla .wyliczenie li{ padding-block:0 }
.tresc .zrodla .wyliczenie li a{
  display:inline-flex; align-items:center; min-height:44px;   /* B7 */
  font-weight:500;
}

/* --- 12. ODSYŁACZ KIERUNKOWY — pieczęć ------------------------------- */
.tresc .przejscie{ margin-block:1.6em 0 }
.tresc .przejscie + .przejscie{ margin-block-start:.8em }
.tresc .przejscie a{
  position:relative;
  display:inline-flex; align-items:center; gap:.85em;
  min-height:54px;
  max-width:100%;
  padding:.6em clamp(1em, .7em + .9vw, 1.5em);
  background-color:var(--wiodaca); color:var(--na-wiodacej);
  border:1px solid var(--wiodaca-ciemna);
  border-radius:var(--promien);
  box-shadow: inset 0 0 0 1px rgba(245,239,225,.22), 0 16px 30px -22px rgba(18,40,63,.9);
  font-weight:600; font-size:.84rem;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none;
}
.tresc .przejscie a::after{ content:"→"; font-size:1.15em; line-height:1; transition:transform .25s ease }
.tresc .przejscie a:hover{ background-color:var(--akcent); border-color:var(--akcent); color:var(--na-akcencie) }
.tresc .przejscie a:hover::after{ transform:translateX(4px) }

.drogowskazy{
  display:flex; flex-wrap:wrap; align-items:stretch;
  gap:clamp(.7rem, .5rem + .6vw, 1.2rem);
  margin-block: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem) 0;
}
.drogowskazy .przejscie{ margin:0; flex:1 1 21rem }
.drogowskazy .przejscie + .przejscie{ margin:0 }
.drogowskazy .przejscie a{ width:100%; justify-content:space-between }

/* --- 13. PRZYCISK ---------------------------------------------------- */
/* ⚠⚠ SELEKTOR MUSI DORÓWNAĆ „.tresc .przejscie a" (0-2-1) */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk{
  display:inline-flex; align-items:center; justify-content:center; gap:.8em;
  min-height:58px; padding:.85rem 2rem;
  background-color:var(--wiodaca-ciemna); color:var(--na-wiodacej);
  border:1px solid var(--wiodaca-ciemna); border-radius:var(--promien);
  font-weight:600; font-size:.88rem; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 20px 38px -24px rgba(18,40,63,.9);
}
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover{
  background-color:var(--akcent); border-color:var(--akcent); color:var(--na-akcencie);
}

/* --- 14. LISTA WPISÓW — karty inwentarza ----------------------------- */
.tresc .lista-wpisow{
  margin: clamp(1.4rem, 1rem + 1.4vw, 2.6rem) 0 0; padding:0; list-style:none;
  display:grid; gap:clamp(1rem, .6rem + 1.4vw, 2rem);
  counter-reset:wpis;
}
@media (min-width:880px){  .tresc .lista-wpisow{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:1280px){ .tresc .lista-wpisow{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
.tresc .zapowiedz{
  counter-increment:wpis;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(1.3rem, .9rem + 1.3vw, 2.2rem);
  background-color:var(--papier-karta);
  background-image:
    linear-gradient(var(--wiodaca),var(--wiodaca)),
    linear-gradient(var(--linia-cicha),var(--linia-cicha));
  background-size:100% 3px, 100% 1px;
  background-position:left top, left top 7px;
  background-repeat:no-repeat;
  border:1px solid var(--linia-cicha);
  box-shadow:var(--cien-plyta);
}
/* ⚠⚠ ta sama naprawa co w .warstwa::before — cyfra w całości, nie kikut */
.tresc .zapowiedz::before{
  content:counter(wpis, upper-roman);
  position:absolute; inset-block-end:.5rem; inset-inline-end:.6rem;
  font-family:var(--kroj-naglowek); font-weight:700;
  font-size:4.2rem; line-height:1;
  color:var(--wiodaca-jasna); pointer-events:none;
}
.tresc .zapowiedz > *{ position:relative }
.tresc .zapowiedz__tytul{
  margin:.45rem 0 .7rem; padding:0; border:0; background:none;
  font-family:var(--kroj-naglowek); font-weight:600;
  font-size:clamp(1.2rem, 1.04rem + .55vw, 1.62rem); line-height:1.24;
}
.tresc .zapowiedz__tytul::before,.tresc .zapowiedz__tytul::after{ content:none }
.tresc .zapowiedz__tytul a{
  display:block; min-height:44px;              /* B7 */
  color:var(--wiodaca-ciemna); text-decoration:none;
}
.tresc .zapowiedz__tytul a:hover{ color:var(--akcent); text-decoration:underline; text-decoration-thickness:2px }
.tresc .zapowiedz__tekst{ margin:0 0 1.2rem; color:var(--atrament-cichy); font-size:.97rem }
.tresc .zapowiedz__wiecej{ margin:auto 0 0 }
/* ⚠⚠ TA SAMA SPECYFICZNOŚĆ CO „.tresc .przejscie a" (0-2-1), a akapit karty ma
   OBIE klasy. Bez wyzerowania tła, obwódki i cienia napis „Czytaj dalej" dostawał
   ciemny atrament na własnym granatowym tle pieczęci — 1,29:1 (bramka B6). */
.tresc .zapowiedz__wiecej a{
  display:inline-flex; align-items:center; gap:.6em; min-height:46px;   /* B7 */
  padding:0 .05rem;
  background:none; box-shadow:none; border:0; border-radius:0;
  border-block-end:2px solid var(--linia);
  color:var(--wiodaca-ciemna); font-weight:600;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
}
.tresc .zapowiedz__wiecej a::after{ content:"→" }
.tresc .zapowiedz__wiecej a:hover{ color:var(--akcent); border-block-end-color:var(--akcent) }

/* --- 14b. SPIS CZYTELNI — inny rejestr niż karty --------------------- */
/* ⚠⚠ RECENZJA 2026-08-31: górny blok czytelni był trzykrotnym powtórzeniem tej
   samej figury (kartusz + dwa wiersze zajawki + granatowy przycisk), a te same
   trzy tytuły wracały 350 px niżej jako karty — jeden przewinięty ekran pokazywał
   ten sam prostokąt trzy razy. Górny blok jest teraz SPISEM ARKUSZY: jedna
   pozycja = jeden wiersz, sygnatura porządkowa na marginesie, hierarchia
   pozioma, cienka linia działowa. Karty poniżej zostają kartami — dwa bloki
   nie konkurują już tą samą figurą. */
.tresc .spis{
  counter-reset:pozycja;
  margin:0; padding:0; list-style:none;
  display:grid;
}
.tresc .spis__poz{
  counter-increment:pozycja;
  position:relative;
  display:grid; align-items:start;
  gap:.15rem clamp(1rem, 2vw, 2.4rem);
  grid-template-columns:[nr] auto [tresc] minmax(0,1fr);
  padding-block:clamp(1.15rem, .8rem + 1.1vw, 2rem);
  border-block-start:1px solid var(--linia-cicha);
}
.tresc .spis__poz:first-child{ border-block-start:0; padding-block-start:0 }
.tresc .spis__poz:last-child{ padding-block-end:0 }
/* sygnatura porządkowa — cyfry arabskie z zerem wiodącym, czyli inny znak
   niż rzymski znak wodny karty i niż numer w pierścieniu pieczęci */
.tresc .spis__poz::before{
  content:counter(pozycja, decimal-leading-zero);
  grid-column:nr; grid-row:1 / span 3;
  align-self:start;
  min-width:2.6em;
  font-family:var(--kroj-naglowek); font-weight:700;
  font-size:1.5rem; line-height:1.1; letter-spacing:.04em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--wiodaca);
  border-block-start:3px solid var(--wiodaca);
  padding-block-start:.5rem;
}
.tresc .spis__tytul{
  grid-column:tresc; margin:0; padding:0;
  border:0; background:none;
  font-family:var(--kroj-naglowek); font-weight:600;
  font-size:clamp(1.32rem, 1.05rem + .95vw, 2.05rem);
  line-height:1.18; letter-spacing:.005em;
  color:var(--wiodaca-ciemna); text-wrap:balance;
}
.tresc .spis__tytul::before,.tresc .spis__tytul::after{ content:none }
.tresc .spis__zajawka{
  grid-column:tresc; margin:.35rem 0 0;
  color:var(--atrament-cichy); font-size:.99rem;
}
.tresc .spis__link{ grid-column:tresc; margin:.85rem 0 0 }
/* ⚠⚠ SPECYFICZNOŚĆ: „.tresc .przejscie a" to 0-2-1 — pieczęć z granatowym tłem.
   Wiersz spisu ma nieść INNY znak niż karta i niż przycisk, więc reguła musi
   być MOCNIEJSZA (0-3-1), inaczej wraca granatowy prostokąt z zarzutu. */
.tresc .spis .przejscie a{
  /* ⚠ inline-block, nie inline-flex: przy wąskiej kolumnie etykieta na 42 znaki
     łamie się na trzy wiersze, a strzałka z pola flex zostawała wtedy sama przy
     prawej krawędzi, w pionie na środku. W przepływie inline idzie za ostatnim
     wyrazem. min-height trzyma pole trafienia 46 px (B7). */
  display:inline-block; min-height:46px;
  padding:.95em clamp(.9em, .7em + .6vw, 1.4em);
  line-height:1.55;
  background-color:transparent; color:var(--wiodaca-ciemna);
  border:1px solid var(--wiodaca);
  box-shadow:none;
  font-size:.78rem; letter-spacing:.14em;
}
.tresc .spis .przejscie a::after{ margin-inline-start:.6em }
.tresc .spis .przejscie a:hover{
  background-color:var(--wiodaca); border-color:var(--wiodaca); color:var(--na-wiodacej);
}
/* od tabletu wzwyż: jedna pozycja = jeden wiersz spisu przez całą szerokość
   arkusza. ⚠ Odsyłacze mają tu bardzo długie etykiety (do 42 znaków), więc
   czwarty tor zostawiał tytułowi 180 px i łamał wyraz w środku — odsyłacz stoi
   pod zajawką, a tytuł i zajawka dostają szerokie tory. */
@media (min-width:900px){
  .tresc .spis__poz{
    grid-template-columns:[nr] auto [tyt] minmax(0,1fr) [zaj] minmax(0,1.15fr);
    align-items:start; gap:0 clamp(1.4rem, 2.4vw, 3.2rem);
  }
  .tresc .spis__poz::before{ grid-row:1 / span 2 }
  .tresc .spis__tytul{ grid-column:tyt; grid-row:1 }
  .tresc .spis__zajawka{ grid-column:zaj; grid-row:1; margin:.2rem 0 0 }
  /* odsyłacz biegnie pod tytułem i zajawką — inaczej etykieta na 42 znaki
     łamała się w dwa wiersze wewnątrz obwiedzionego znaku */
  .tresc .spis__link{ grid-column:tyt / -1; grid-row:2; margin:1.15rem 0 0; justify-self:start }
}

/* --- 15. STOPKA ------------------------------------------------------ */
.stopka{
  position:relative; overflow:hidden;
  background-color:var(--glebia-2);
  background-image:
    radial-gradient(62% 88% at 90% 0%, rgba(36,72,111,.60) 0%, rgba(36,72,111,0) 64%),
    repeating-radial-gradient(circle at 6% 100%, transparent 0 32px, var(--orn-swiatlo) 32px 33px);
  color:var(--na-ciemnym);
  padding-block: clamp(2.4rem, 1.4rem + 2.6vw, 4.4rem);
}
/* kreskowanie granicy — domknięcie arkusza */
.stopka::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:12px;
  background-image:
    linear-gradient(var(--sepia-jasna), var(--sepia-jasna)),
    repeating-linear-gradient(90deg, var(--sepia-jasna) 0 2px, transparent 2px 11px);
  background-size:100% 2px, 100% 100%;
  background-position:top left, top left;
  background-repeat:no-repeat, repeat;
  opacity:.85;
}
.stopka .orn--warstwice{
  inset-block-end:-46%; inset-inline-start:-8%;
  width:clamp(360px, 40vw, 780px);
  color:var(--blekit-jasny);
}
.stopka__pas{
  position:relative; z-index:1;
  display:grid; gap:1.1rem clamp(1rem, 2.4vw, 2.6rem);
  align-items:center;
  padding-block-start:.6rem;
}
/* ⚠⚠ RECENZJA 2026-08-31: przy 1920 px pasek stopki łamał się 3+1 i „Czytelnia"
   zostawała sama w drugim wierszu, pod środkiem paska, przy pustym polu obok
   „Start" — czyli zawinięcie, nie zamierzony spis. Menu dostaje własny, PEŁNEJ
   SZEROKOŚCI wiersz pod sygnaturą, rozstrzelony na całą szerokość stopki:
   cztery pozycje w jednym wierszu przy każdej szerokości desktopu. */
@media (min-width:980px){
  .stopka__pas{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"znak gora" "menu menu";
    row-gap:clamp(1.1rem, .8rem + 1.1vw, 2.1rem);
  }
  .stopka__znak{ grid-area:znak; justify-self:start }
  .stopka__gora{ grid-area:gora; justify-self:end }
  .stopka__menu{
    grid-area:menu;
    padding-block-start:clamp(.6rem, .9vw, 1.1rem);
    border-block-start:1px solid rgba(216,185,138,.34);
  }
  .stopka__menu ul{ justify-content:space-between; flex-wrap:nowrap; gap:0 1rem }
  .stopka__menu a{ letter-spacing:.085em }
}
.stopka__znak{
  margin:0; padding:.28em 0;
  font-family:var(--kroj-naglowek); font-weight:700;
  font-size:clamp(1.02rem, .92rem + .34vw, 1.42rem);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--na-ciemnym);
  border-block:1px solid rgba(216,185,138,.55);
}
.stopka__menu{ min-width:0 }
.stopka__menu ul{
  display:flex; flex-wrap:wrap; gap:0 clamp(.4rem, 1.2vw, 1.1rem);
  margin:0; padding:0; list-style:none;
}
.stopka__menu a{
  display:inline-flex; align-items:center; min-height:46px;   /* B7 */
  padding-inline:.25em; text-decoration:none;
  color:var(--na-ciemnym-cichy); font-weight:500;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  border-block-end:2px solid transparent;
}
.stopka__menu a:hover{ color:var(--na-ciemnym); border-block-end-color:var(--sepia-jasna) }
.stopka__gora{ margin:0 }
.do-gory{
  display:inline-flex; align-items:center; gap:.6em;
  min-height:46px; padding:.4em 1.2em;
  border:1px solid var(--sepia-jasna); border-radius:var(--promien);
  color:var(--sepia-jasna); text-decoration:none;
  font-size:.78rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
}
.do-gory svg{ width:1em; height:1em }
.do-gory:hover{ background:var(--sepia-jasna); color:var(--glebia-2) }

/* --- 16. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.probki{
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  margin:1.6rem 0 2.2rem; padding:0; list-style:none;
}
.probka{
  border:1px solid var(--linia-cicha);
  background-color:var(--papier-karta);
  padding:0; overflow:hidden;
  box-shadow:var(--cien-karta);
}
.probka__pole{ display:block; height:82px }
.probka__opis{
  display:block; padding:.75rem .95rem;
  font-family:var(--kroj-maszyna); font-size:.78rem;
  color:var(--atrament); line-height:1.55;
}
.tresc .wzor{
  margin:1.4em 0 1.8em;
  padding:clamp(1rem,.6rem+1.4vw,1.8rem) clamp(1rem,.6rem+1.6vw,2rem);
  background-color:var(--papier-karta);
  border:1px solid var(--linia);
  border-inline-start:5px solid var(--wiodaca);
  font-family:var(--kroj-maszyna);
  font-size:.9rem; line-height:1.85;
  color:var(--atrament);
}

/* --- 16b. SKALA NA SZEROKIM EKRANIE ---------------------------------- */
/* ⚠⚠ RECENZJA 2026-08-31: przy 1920 px arkusz miał 1326 px (297 px marginesu
   na stronę), a od krawędzi okna do pierwszej litery było 587 px — 61% ekranu
   nie niosło treści, a arkusz rósł o 10% przy oknie szerszym o 40%.
   Powyżej 1620 px (tam, gdzie kontener jest już zwężony do 82rem):
     • arkusz dostaje TĘ SAMĄ szerokość co pasmo (82rem ≈ 1699 px przy 1920,
       margines 110 px) — jedna oś dla całego serwisu, arkusz przestaje być
       wysepką na pustej płycie;
     • łam prozy rośnie 36rem → 38rem (≈787 px przy piśmie 20,7 px, ~76 znaków);
     • szyny siatki przestają być równe: proza siada na lewej osi, a szerszy
       margines prawy NIESIE TREŚĆ — kartusz, siatki kart, spis, blok źródeł
       i pieczęcie odsyłaczy biegną przez całą szerokość arkusza. */
@media (min-width:1620px){
  :root{ --kolumna:38rem }
  .plyta{ --pas-szer:82rem }
  .kontener{
    grid-template-columns:
      [pelna-start] minmax(0,1fr)
      [tekst-start] minmax(0, var(--kolumna))
      [tekst-end]   minmax(0,1.55fr) [pelna-end];
  }
  .kontener > .zrodla,
  .kontener > .drogowskazy{ grid-column: tekst-start / pelna-end }
  /* ciąg kroków rozkłada się na dwa tory — pasmo niesie treść aż do prawego
     brzegu arkusza zamiast pustego pola obok wąskiej listy */
  .kontener > .kroki{ grid-column: tekst-start / pelna-end;
                      grid-template-columns:repeat(2, minmax(0,1fr));
                      gap:.8rem }
}

/* --- 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; background-image:none }
  .naglowek{ position:static; box-shadow:none }
  .hero,.stopka,.pas--noc{ background:#FFFFFF !important; color:#000000 !important }
  .hero .tytul,.pas--noc h2{ color:#000000 !important }
  .orn,.podzialka,.hero::after,.stopka::before,.pas--noc::before{ display:none !important }
  .plyta{ box-shadow:none; margin-block-start:0 }
  .pas--sepia,.pas--plyta,.pas--wstep,.pas--papier{ background:#FFFFFF }
  a{ color:#000000 }
}