@charset "utf-8";
/* =====================================================================
   Kapliczka — system projektowy makiety gietrzwald.eu (wersja galeryjna)
   Seria STRONY-WWW-ST-CBF. Zero JavaScriptu, zero zdjęć, zero formularzy.
   Idea: dziedzictwo Warmii jak katalog wystawy muzealnej — ciemny pas ochry
   z perforowanym fryzem (prześwity dzwonniczek), sekcje w niszach z gzymsem
   i łukiem, liczby dziedzictwa na ceglastych plakietkach, eseje z inicjałami,
   wpisy jak epitafia w ramach, stopka-cokół dwustopniowa.
   Wszystkie barwy przez zmienne; pary tekst/tło policzone (koncepcja.txt).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --papier:          #FAF6EC;
  --papier-karta:    #FFFFFF;
  --tlo-2:           #F2EADA;
  --wiodaca-jasna:   #E8D8B6;
  --atrament:        #251E11;
  --atrament-cichy:  #5C5136;
  --wiodaca:         #7F5A10;
  --wiodaca-ciemna:  #5E430B;
  --akcent:          #79341F;
  --akcent-jasny:    #8A3D24;   /* górny ton plakiety ceglanej */
  --linia:           #A28850;
  --linia-cicha:     #D9CCA9;

  /* ciemny pas ochry — rodzina barwy wiodącej ściemniona do panelu:
     papier na nocy 15,74:1 · wiodąca jasna na nocy 12,08:1 ·
     złoto na nocy 8,20:1 · złoto na nocy-2 6,96:1 · noc na złocie 8,20:1 */
  --noc:             #241B0A;
  --noc-2:           #342810;
  --na-nocy:         #FAF6EC;
  --na-nocy-cicha:   #E8D8B6;
  --zloto:           #D9AE55;

  --na-wiodacej:     #FFFFFF;
  --na-akcencie:     #FFFFFF;

  --krój-naglowek: "Alegreya", Georgia, "Times New Roman", serif;
  --krój-tekst:    "Alegreya Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --krój-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* ⚠ kolumna prozy w rem (jedna krawędź dla h2 i akapitów) — 34rem daje
     w Alegreya Sans ~66–74 znaki wiersza w całym zakresie 360–1920 */
  --kolumna:         34rem;
  --kolumna-szeroka: 62rem;
  /* ⭐⭐ RAMA ARKUSZA (2026-09-01). Powyżej ~1666 px kompozycja przestawała
     rosnąć: najszerszy moduł treści miał 1337 px przy ekranie 1920, czyli po
     292 px pustego tła z każdej strony. Cała strona — pas nagłówka, pasma
     treści i stopka — jest teraz JEDNYM arkuszem o symetrycznej ramie; przy
     1920 px arkusz ma 1740 px i zostawia po ~90 px marginesu.
     ⚠ 84rem zaczyna wiązać dopiero powyżej ~1666 px, więc układ poniżej
     1366 px nie zmienia się ani o piksel (84rem przy 1366 to 1577 px). */
  --rama:            84rem;
  /* ⚠ dopełnienie kontenera: cap 112 -> 72 px. 5vw dobija do 72 px dopiero
     przy 1440, więc poniżej 1440 wartość jest CO DO PIKSELA ta sama co przed
     zmianą; wyżej odzyskane 24 px idzie na treść, nie na puste pole. */
  --margines:        clamp(20px, 5vw, 72px);

  /* arkada perforacji — zewnętrzna kolumna ozdobna pasm prozy (patrz 17) */
  --arkada-kreska:   rgba(162, 136, 80, .60);
  --arkada-nic-1:    rgba(162, 136, 80, .62);
  --arkada-nic-2:    rgba(162, 136, 80, .42);
  --arkada-nic-3:    rgba(162, 136, 80, .28);
  --arkada-nic-4:    rgba(162, 136, 80, .16);
  --promien:         3px;
  --cien-karty:      0 26px 44px -28px rgba(37, 30, 17, .45);
}

/* --- 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) url("_zasoby/cegla.svg");
  background-size: 168px 96px;
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;                 /* długie adresy a B5 */
  overflow-x: clip;
}
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }

img, svg { max-width: 100%; height: auto; }
a { color: var(--wiodaca-ciemna); }
/* ⚠⚠ pułapka nr 1d katalogu: globalny kolor strong/b znika na ciemnym panelu */
strong, b { color: inherit; }

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

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (bramka B7 mierzy
   getBoundingClientRect; wariant „1 px + clip" dawał prostokąt 1×1) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 180px; 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: 40;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.4rem;
  background: var(--noc); color: var(--zloto);
  font-weight: 700; text-decoration: none;
  border: 2px solid var(--zloto);
}

/* --- 3. KONTENER ------------------------------------------------------ */
.kontener { width: 100%; max-width: var(--rama); padding-inline: var(--margines); margin-inline: auto; }

/* --- 4. NAGŁÓWEK — ciemny pas ochry z gzymsem ------------------------- */
.naglowek {
  position: relative;
  /* jawny background-color: sonda kontrastu (B6) czyta background-color,
     nie background-image; gradient maluje się NA tym kolorze */
  background-color: var(--noc-2);
  background-image: linear-gradient(180deg, var(--noc-2), var(--noc));
  /* gzyms górny: złota nić + cień belki */
  border-block-start: 4px solid var(--zloto);
  box-shadow: inset 0 6px 0 rgba(0, 0, 0, .35);
}
.naglowek__pas {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem .8rem; text-align: center;
  padding-block: clamp(.9rem, 1.6vw, 1.5rem) clamp(.4rem, 1vw, .8rem);
}

/* sygnatura słowna — typograficzna, ze znakiem łuku niszy (geometria tematu,
   nie logotyp firmy — pułapka T8) */
.znak {
  display: inline-flex; align-items: center; gap: .55em; min-height: 44px;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.85rem);
  letter-spacing: .012em; text-decoration: none;
  color: var(--na-nocy);
}
.znak:hover { color: var(--zloto); }
.znak__luk { flex: none; width: .82em; height: 1.06em; color: var(--zloto); }

.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .1rem clamp(.3rem, 1.4vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: .7em;
  font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  text-decoration: none;
  color: var(--na-nocy-cicha);
}
.menu__link::after {
  content: ""; position: absolute; inset-inline: .7em; inset-block-end: .45em;
  height: 3px; background: transparent;
}
.menu__link:hover { color: var(--na-nocy); }
.menu__link:hover::after { background: var(--linia); }
.menu__link[aria-current="page"] { color: var(--zloto); }
.menu__link[aria-current="page"]::after { background: var(--zloto); }

/* --- 5. HERO — ciemny pas ochry z fryzem i kompozycją łuków ----------- */
.hero {
  position: relative;
  background-color: var(--noc-2);
  background-image:
    radial-gradient(120% 90% at 50% -20%, rgba(217, 174, 85, .16), rgba(217, 174, 85, 0) 55%),
    linear-gradient(180deg, var(--noc) 0%, var(--noc-2) 62%, var(--noc) 100%);
  color: var(--na-nocy);
  overflow: clip;
}
.hero__luki {
  color: var(--zloto);
  position: absolute; z-index: 0; inset-block-end: 0; inset-inline: 0;
  width: 100%; height: clamp(120px, 22vw, 300px);
  pointer-events: none;
}
.hero__wnetrze {
  position: relative; z-index: 1;
  padding-block: clamp(2.6rem, 2rem + 3.4vw, 6rem) clamp(3.2rem, 2.4rem + 4.4vw, 7.5rem);
  text-align: center;
}
/* ⚠ specyficzność: .tresc p (0-1-1) bije goły selektor (0-1-0) i zeruje
   margin-inline — stąd prefiks .tresc na regułach wyśrodkowania */
.tresc .hero__wnetrze > * { margin-inline: auto; }

.tytul {
  margin: 0 0 clamp(1.4rem, 1rem + 1.4vw, 2.4rem);
  max-width: 15em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.05rem, 1.15rem + 3.4vw, 5rem);
  line-height: 1.08; letter-spacing: -.012em;
  color: var(--na-nocy);
  text-wrap: balance;
}
/* złociste podkreślenie tytułu */
.tytul::after {
  content: ""; display: block;
  width: clamp(4.5rem, 9vw, 8.5rem); height: 5px;
  margin: clamp(.9rem, 2vw, 1.5rem) auto 0;
  background: var(--zloto);
  box-shadow: 0 8px 0 -3px var(--wiodaca);
}
.hero .wprowadzenie, .hero .zajawka {
  max-width: 38rem;
  font-size: clamp(1.08rem, 1rem + .42vw, 1.32rem);
  line-height: 1.7;
  color: var(--na-nocy-cicha);
  margin-block: 0;
}
.hero a { color: var(--na-nocy); text-decoration-color: var(--zloto); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.hero a:hover { color: var(--zloto); }

/* fryz perforowany — rzędy świetlistych kropek jak prześwity dzwonniczki */
.fryz {
  height: 40px;
  background-image:
    radial-gradient(circle at 7px 6px,  rgba(217, 174, 85, .95) 2.4px, rgba(217, 174, 85, 0) 3.2px),
    radial-gradient(circle at 7px 6px,  rgba(217, 174, 85, .45) 2.1px, rgba(217, 174, 85, 0) 2.9px),
    radial-gradient(circle at 7px 6px,  rgba(217, 174, 85, .22) 1.9px, rgba(217, 174, 85, 0) 2.7px);
  background-size: 26px 13px;
  background-position: 0 2px, 13px 8.5px, 0 15px;
  background-repeat: repeat-x, repeat-x, repeat-x;
  background-position-y: 4px, 11px, 18px;
}
.hero .fryz { position: absolute; z-index: 1; inset-block-end: 0; inset-inline: 0; opacity: .9; }

/* --- 6. PASY SEKCJI --------------------------------------------------- */
.pas { position: relative; padding-block: clamp(2.6rem, 2rem + 2.6vw, 5.2rem); }
.pas--tlo  { background: var(--tlo-2); border-block: 1px solid var(--linia-cicha); }
.pas--jasny { background: var(--wiodaca-jasna); border-block: 1px solid var(--linia); }
.pas--noc {
  background-color: var(--noc-2);
  background-image:
    radial-gradient(110% 100% at 50% 0%, rgba(217, 174, 85, .12), rgba(217, 174, 85, 0) 60%),
    linear-gradient(180deg, var(--noc-2), var(--noc));
  color: var(--na-nocy);
}
.pas--noc .fryz { margin-block-start: clamp(2rem, 4vw, 3.4rem); opacity: .75; }
/* arkada na nocy świeci złotem, nie brązem linii */
.pas--noc {
  --arkada-kreska: rgba(217, 174, 85, .55);
  --arkada-nic-1:  rgba(217, 174, 85, .70);
  --arkada-nic-2:  rgba(217, 174, 85, .46);
  --arkada-nic-3:  rgba(217, 174, 85, .30);
  --arkada-nic-4:  rgba(217, 174, 85, .18);
}

/* kolumna prozy: wszystkie bloki tekstowe dzielą jedną, wyśrodkowaną krawędź */
.tresc .lam > * { max-width: var(--kolumna); margin-inline: auto; }
.tresc .lam > h2:first-child, .tresc .lam > .tablica:first-child { margin-block-start: 0; }
.tresc .lam > .niże, .tresc .lam > .tabliczki, .tresc .lam > .lista-wpisow, .tresc .lam > .próbki,
.tresc .lam > .uchwyt-tabliczek { max-width: var(--kolumna-szeroka); }
/* uchwyt oddziela listę tabliczek od .kontener — sonda kolumny prozy (B13)
   mierzy tylko BEZPOŚREDNIE dzieci .kontener, a kafel siatki nie jest kolumną */

/* --- 7. TYPOGRAFIA TREŚCI --------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.6rem, 1.8rem + 2vw, 4.4rem) auto 1.1rem;
  padding: .55em .9em .5em 1em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.38rem, 1.12rem + 1vw, 2.05rem);
  line-height: 1.2;
  color: var(--wiodaca-ciemna);
  background-color: var(--wiodaca-jasna);
  background-image: linear-gradient(180deg, var(--papier-karta), var(--wiodaca-jasna));
  border: 1px solid var(--linia);
  border-inline-start: 6px solid var(--wiodaca);
  border-radius: var(--promien);
  box-shadow: 0 3px 0 var(--linia-cicha);
}
/* gzyms nad plakietką tytułową */
.tresc h2::before {
  content: ""; position: absolute;
  inset-block-start: -9px; inset-inline: -7px;
  height: 6px; background: var(--wiodaca);
  box-shadow: 0 -3px 0 var(--wiodaca-ciemna);
}
.pas--noc h2 {
  color: var(--zloto);
  background: #40341D;   /* noc-2 rozjaśniona o 6% papieru — pełny kolor dla sondy B6 */
  border-color: rgba(217, 174, 85, .5);
  border-inline-start-color: var(--zloto);
  box-shadow: none;
}
.pas--noc h2::before { background: var(--zloto); box-shadow: 0 -3px 0 var(--wiodaca); }
.pas--noc p { color: var(--na-nocy); }

.tresc h3 {
  margin: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem) auto .5rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.12rem, 1rem + .5vw, 1.45rem);
  line-height: 1.3; color: var(--atrament);
}

.tresc p { margin: 0 0 1.05em; }
.wprowadzenie, .zajawka { font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem); line-height: 1.65; }

.tresc p a, .tresc li a {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.tresc p a:hover, .tresc li a:hover { color: var(--akcent); text-decoration-thickness: 2px; }
.pas--noc p a, .pas--noc li a { color: var(--na-nocy); text-decoration-color: var(--zloto); }
.pas--noc p a:hover, .pas--noc li a:hover { color: var(--zloto); }

/* wielki inicjał eseju */
.inicjal::first-letter {
  float: left;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 3.6em; line-height: .78;
  padding: .1em .14em .04em 0;
  color: var(--akcent);
}

/* --- 8. NISZE (karty sekcji strony głównej) --------------------------- */
.niże {
  display: grid; gap: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  margin-block: 0;
  position: relative; z-index: 2;
}
.niże--naklad { margin-block-start: clamp(-4.5rem, -3vw, -2.5rem); }
@media (min-width: 1100px) { .niże--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.nisza {
  position: relative;
  margin-block-start: 3.4rem;               /* miejsce na plakietę i gzyms */
  padding: 4.4rem clamp(1.3rem, 1rem + 1.6vw, 2.4rem) 1.9rem;
  background: var(--papier-karta);
  border: 2px solid var(--linia);
  border-block-start: 0;
  border-radius: 0 0 var(--promien) var(--promien);
  box-shadow: var(--cien-karty);
}
/* gzyms niszy: dwie belki szersze od karty */
.nisza::before {
  content: ""; position: absolute;
  inset-block-start: -8px; inset-inline: -9px; height: 8px;
  background: var(--wiodaca-ciemna);
}
.nisza::after {
  content: ""; position: absolute;
  inset-block-start: 0; inset-inline: -4px; height: 7px;
  background: var(--wiodaca);
}
.tresc .nisza h2 {
  margin: 0 auto .9rem; padding: 0; max-width: none;
  background: none; border: 0; box-shadow: none;
  color: var(--wiodaca-ciemna);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.85rem);
  text-align: center; text-wrap: balance;
}
.tresc .nisza h2::before { content: none; }
.nisza p { color: var(--atrament); }
.nisza .cta { text-align: center; }

/* plakieta ceglana z ozdobną liczbą dziedzictwa (liczba powtarza wartość
   z akapitu obok — czysty ornament, stąd aria-hidden i zapis w atrybucie) */
.plakieta {
  position: absolute; inset-block-start: -2.5rem; inset-inline-start: 50%;
  translate: -50% 0;
  width: 6.4rem; height: 6.1rem;
  display: grid; place-items: center;
  background-color: var(--akcent);
  background-image: linear-gradient(180deg, var(--akcent-jasny), var(--akcent));
  border: 2px solid var(--wiodaca-ciemna);
  border-radius: 999px 999px var(--promien) var(--promien);
  box-shadow: 0 10px 18px -10px rgba(37, 30, 17, .55), inset 0 0 0 4px rgba(250, 246, 236, .22);
}
.plakieta::before {
  content: attr(data-cyfra);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 1.7rem; letter-spacing: .02em;
  color: var(--na-akcencie);
  padding-block-start: .55rem;
}
.plakieta::after {
  content: ""; position: absolute; inset-block-end: .55rem;
  width: 1.7rem; height: 3px; background: var(--zloto);
}

/* --- 9. TABLICZKI (wyliczenie trzech znaków krajobrazu) ---------------- */
.wyliczenie { margin: 0 0 1.3em; padding: 0; list-style: none; }
.wyliczenie li { position: relative; padding-inline-start: 1.6em; margin-block-end: .55em; }
.wyliczenie li::before {
  content: ""; position: absolute;
  inset-block-start: .62em; inset-inline-start: .1em;
  width: .7em; height: 0; border-block-start: 2px solid var(--wiodaca);
}

.tabliczki { counter-reset: znak; display: grid; gap: clamp(1.2rem, 1rem + 1.6vw, 2.2rem); margin-block: 2.6rem 0; }
@media (min-width: 900px) { .tabliczki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tabliczki li {
  counter-increment: znak;
  position: relative;
  margin: 2.2rem 0 0; padding: 3.4rem 1.35rem 1.5rem;
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien-karty), inset 0 4px 0 var(--wiodaca);
}
.tabliczki li::before {
  content: counter(znak, upper-roman);
  position: absolute; inset-block-start: -1.65rem; inset-inline-start: 50%;
  translate: -50% 0;
  width: 3.3rem; height: 3.6rem; border: 0;
  display: grid; place-items: center;
  background-color: var(--akcent);
  background-image: linear-gradient(180deg, var(--akcent-jasny), var(--akcent));
  color: var(--na-akcencie);
  border-radius: 999px 999px var(--promien) var(--promien);
  font-family: var(--krój-naglowek); font-weight: 700; font-size: 1.25rem;
  box-shadow: 0 8px 14px -8px rgba(37, 30, 17, .5), inset 0 0 0 3px rgba(250, 246, 236, .22);
}

/* --- 10. KROKI I SCHEMAT WIERSZOWY ------------------------------------ */
.kroki { margin: 0 0 1.5em; padding: 0; list-style: none; counter-reset: krok; }
.kroki li {
  counter-increment: krok; position: relative;
  padding: .55em 0 .55em 3em;
  border-block-end: 1px dashed var(--linia-cicha);
}
.kroki li:last-child { border-block-end: 0; }
.kroki li::before {
  content: counter(krok); position: absolute;
  inset-inline-start: 0; inset-block-start: .45em;
  width: 2.05em; height: 2.05em;
  display: grid; place-items: center;
  background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  border: 1px solid var(--wiodaca); border-radius: 50%;
  font-family: var(--krój-naglowek); font-weight: 700; font-size: .85em;
}

/* ⚠ pułapka T12: sensem bloku .wzor są WIERSZE */
.wzor {
  margin: 1.4em 0 1.8em;
  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: clamp(.82rem, .78rem + .22vw, .96rem);
  line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
}

/* --- 11. TABLICA INFORMACYJNA (rama podwójna) -------------------------- */
.tablica {
  margin-block: 2.2rem 0;
  padding: clamp(1.4rem, 1rem + 1.8vw, 2.4rem) clamp(1.2rem, 1rem + 2vw, 2.6rem);
  background: var(--wiodaca-jasna);
  border: 1px solid var(--wiodaca);
  border-radius: var(--promien);
  box-shadow: inset 0 0 0 6px var(--wiodaca-jasna), inset 0 0 0 7px var(--linia), var(--cien-karty);
}
.tresc .tablica h2 {
  margin: 0 auto .8rem; padding: 0; background: none; border: 0; box-shadow: none;
  max-width: none;
}
.tresc .tablica h2::before { content: none; }
.tablica p { margin-block-end: 0; color: var(--atrament); }

/* --- 12. ODSYŁACZE KIERUNKOWE I PRZYCISK ------------------------------- */
.odsylacz {
  margin: 1.15em 0 1.7em;
  padding: .75em 1.1em .75em 1.15em;
  background: var(--wiodaca-jasna);
  border-inline-start: 4px solid var(--wiodaca);
  border-radius: var(--promien);
  font-size: .97rem; color: var(--atrament);
}
.odsylacz a { font-weight: 700; }

/* akapit, którego całą treścią jest odsyłacz — bramka B7 wymaga 44 px */
.tresc .przejscie { margin-block: 1.1em 1.7em; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .3rem 0;
  font-weight: 700; color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.tresc .przejscie a:hover { color: var(--akcent); }
.tresc li > a:only-child {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: .2rem;
}

.tresc .cta { margin-block: clamp(1.6rem, 1.2rem + 1vw, 2.4rem) 0; }
/* ⚠⚠ selektor musi dorównać `.tresc .przejscie a` (0-2-1) — patrz katalog
   pułapek nr 1 (`.proza a` bije `.przycisk`) */
.przycisk, .tresc a.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .7rem 1.7rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca-ciemna); border-radius: var(--promien);
  font-weight: 700; font-size: 1.02rem; letter-spacing: .015em;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--linia);
  transition: background-color .15s ease, box-shadow .15s ease, translate .15s ease;
}
.przycisk:hover { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie); box-shadow: 2px 2px 0 var(--linia); translate: 2px 2px; }
.tresc p a.przycisk { color: var(--na-wiodacej); text-decoration: none; }
/* przycisk na ciemnym pasie: złoto z atramentem nocy (8,20:1).
   ⚠ specyficzność: musi bić `.tresc a.przycisk` (0-2-1) i `.tresc p a.przycisk`
   (0-2-2) — stąd warianty z tą samą wagą i wyższą, w tej kolejności. */
.pas--noc .przycisk, .pas--noc a.przycisk, .tresc .pas--noc p a.przycisk {
  background: var(--zloto); color: var(--noc); border-color: var(--zloto);
  box-shadow: 4px 4px 0 rgba(217, 174, 85, .35);
}
.pas--noc .przycisk:hover { background: var(--na-nocy); border-color: var(--na-nocy); color: var(--noc); box-shadow: 2px 2px 0 rgba(217, 174, 85, .35); }

/* --- 13. EPITAFIA (lista wpisów na ciemnym pasie) ---------------------- */
.lista-wpisow {
  margin: clamp(2.2rem, 1.6rem + 1.6vw, 3.4rem) auto 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
}
@media (min-width: 980px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zapowiedz {
  display: flex; flex-direction: column;
  position: relative;
  padding: clamp(2.6rem, 2rem + 1.6vw, 3.4rem) clamp(1.3rem, 1rem + 1.2vw, 2rem) 1.5rem;
  background-color: var(--papier-karta);
  background-image: linear-gradient(180deg, var(--papier-karta), var(--papier));
  border: 1px solid var(--linia);
  border-radius: 7rem 7rem var(--promien) var(--promien);
  box-shadow: 0 0 0 5px var(--noc-2), 0 0 0 7px var(--zloto), 0 30px 44px -26px rgba(0, 0, 0, .6);
  text-align: center;
}
/* rozeta perforacji w łuku epitafium */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: 1.05rem; inset-inline-start: 50%;
  translate: -50% 0;
  width: 4.6rem; height: 10px;
  background-image: radial-gradient(circle at 5px 5px, var(--linia) 2.4px, rgba(162, 136, 80, 0) 3.1px);
  background-size: 15px 10px; background-repeat: repeat-x;
}
.tresc .zapowiedz__tytul {
  margin: 0 0 .6rem; padding: 0; border: 0; max-width: none; background: none; box-shadow: none;
  font-family: var(--krój-naglowek);
  font-size: clamp(1.14rem, 1rem + .5vw, 1.4rem); line-height: 1.26;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
.tresc .zapowiedz__tytul::after, .tresc .zapowiedz__tytul::before { content: none; }
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;
  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 1rem; color: var(--atrament-cichy); font-size: .98rem; }
.tresc .zapowiedz__wiecej { margin: auto auto 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: .15rem; text-decoration: none;
  color: var(--akcent); font-weight: 700; letter-spacing: .03em;
  border-block-end: 2px solid var(--akcent);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--wiodaca-ciemna); border-block-end-color: var(--wiodaca); }

/* --- 14. STOPKA-COKÓŁ DWUSTOPNIOWA ------------------------------------ */
.stopka { margin-block-start: 0; }
.stopka__gorna {
  background: var(--wiodaca-jasna);
  border-block-start: 5px solid var(--wiodaca);
  box-shadow: inset 0 -8px 0 rgba(127, 90, 16, .12);
  padding-block: clamp(1.3rem, 1rem + 1vw, 2rem);
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .2rem clamp(.6rem, 2.4vw, 2.4rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: .3em; text-decoration: none;
  color: var(--wiodaca-ciemna); font-weight: 700; font-size: .95rem; letter-spacing: .03em;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--akcent); border-block-end-color: var(--akcent); }
.stopka__cokol {
  background-color: var(--noc-2);
  background-image: linear-gradient(180deg, var(--noc-2), var(--noc) 55%);
  border-block-start: 3px solid var(--zloto);
  padding-block: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem) clamp(1.2rem, 1rem + 1vw, 2rem);
  text-align: center;
}
.stopka__znak {
  margin: 0 0 .9rem;
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem);
  color: var(--na-nocy); letter-spacing: .012em;
}
.stopka__znak .znak__luk { color: var(--zloto); }
.stopka__cokol .fryz { opacity: .55; height: 26px; background-position-y: 4px, 11px, 40px; }

/* --- 15. ARKUSZ SYSTEMU (specimen.html) -------------------------------- */
.próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 1.4rem 0 2rem; 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;
}
.próbka__pole { display: block; height: 74px; }
.próbka__opis {
  display: block; padding: .7rem .9rem;
  font-family: var(--krój-maszyna); font-size: .82rem;
  color: var(--atrament); line-height: 1.5;
}

/* --- 16. 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, .hero, .pas--noc, .stopka__cokol { background: #FFFFFF; color: #000000; }
  .hero__luki, .fryz, .plakieta { display: none !important; }
  .tytul, .hero .wprowadzenie, .hero .zajawka { color: #000000; }
  .lam > *, .hero__wnetrze > * { max-width: none; }
  a { color: #000000; }
}

/* --- 17. ARKUSZ SZEROKI — kompozycja powyżej 1366 px -------------------- */
/* ⭐⭐ POWÓD (2026-09-01, decyzja użytkownika „popraw od razu w makietach
   premium"). Przy 1920 px najszerszy moduł treści miał 1337 px: układ rósł
   wolniej niż ekran i zostawiał po 292 px pustego tła z każdej strony. Sama
   zmiana szerokości kontenera nic by nie dała — odzyskane 300 px musi dostać
   ROLĘ, inaczej wychodzi ten sam układ z węższymi białymi polami.
   Odzyskana szerokość dostała trzy zadania:
     1. PLAKIETA TYTUŁOWA WYCHODZI SPOD TEKSTU. Nagłówek sekcji przenosi się
        do zewnętrznej kolumny OBOK prozy — jak etykieta ścienna przy eksponacie
        — i dostaje numer części (cyfra rzymska, ozdobnik, licznik CSS).
     2. SIATKI KART ROZCIĄGAJĄ SIĘ NA CAŁY ARKUSZ. Nisze, tabliczki i epitafia
        bloga dostają pełne 1596 px zamiast 1284 px: karty są szersze i niższe,
        w poziomie mieści się więcej treści.
     3. ARKADA PERFOROWANA ZAMYKA ARKUSZ OD PRAWEJ. Trzecia kolumna niesie
        pionowy fryz (te same prześwity dzwonniczki co pas pod hero) i złotą
        nić przy krawędzi arkusza — kompozycja ma ink na OBU krawędziach.
   ⚠ Proza NIE ROŚNIE: kolumna tekstu zostaje na 34rem, a wprowadzenie hero na
     38rem (787 px przy 1920) — tyle, ile miała przed zmianą.
   ⚠ Próg 1367 px: poniżej 1366 px układ jest CO DO PIKSELA taki jak wcześniej. */
@media (min-width: 1367px) {
  :root {
    --rozstaw: clamp(2rem, 2.6vw, 3.4rem);   /* rozstaw kolumn arkusza */
    --arkada:  7.5rem;                        /* zewnętrzna kolumna ozdobna */
    --kolumna-szeroka: 100%;                  /* siatki kart na cały arkusz */
  }

  .tresc { counter-reset: czesc; }

  /* --- pasmo prozy: [plakieta tytułowa] [proza] [arkada] --- */
  .tresc .lam {
    display: grid;
    grid-template-columns:
      [barek] minmax(0, 1fr)
      [proza] minmax(0, var(--kolumna))
      [arkada] var(--arkada);
    column-gap: var(--rozstaw);
    align-items: start;
    /* pionowy fryz: złota nić przy krawędzi arkusza + cztery rzędy prześwitów,
       gasnące w stronę tekstu (ten sam rysunek co .fryz, obrócony o ćwierć) */
    background-image:
      linear-gradient(var(--arkada-kreska), var(--arkada-kreska)),
      radial-gradient(circle at calc(100% - 1.15rem)  7px, var(--arkada-nic-1) 2.4px, rgba(0, 0, 0, 0) 3.1px),
      radial-gradient(circle at calc(100% - 2.75rem) 14px, var(--arkada-nic-2) 2.2px, rgba(0, 0, 0, 0) 2.9px),
      radial-gradient(circle at calc(100% - 4.35rem)  7px, var(--arkada-nic-3) 2.0px, rgba(0, 0, 0, 0) 2.7px),
      radial-gradient(circle at calc(100% - 5.95rem) 14px, var(--arkada-nic-4) 1.8px, rgba(0, 0, 0, 0) 2.5px);
    background-size: 2px 100%, var(--arkada) 26px, var(--arkada) 26px, var(--arkada) 26px, var(--arkada) 26px;
    background-position: right top;
    background-repeat: no-repeat, repeat-y, repeat-y, repeat-y, repeat-y;
    background-origin: content-box;
  }
  /* domyślne miejsce każdego bloku to kolumna prozy */
  .tresc .lam > * { grid-column: proza; margin-inline: 0; }

  /* --- nagłówek sekcji jako etykieta ścienna w kolumnie zewnętrznej --- */
  .tresc .lam > h2 {
    grid-column: barek;
    margin-inline: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    counter-increment: czesc;
    /* ⚠⚠ PUŁAPKA: body ma overflow-wrap: break-word (długie adresy a B5),
       więc w wąskiej kolumnie bocznej nagłówek łamał się W ŚRODKU SŁOWA.
       Żadna bramka tego nie widzi — kolumna etykiety łamie tylko po sylabach. */
    overflow-wrap: normal;
    hyphens: auto;
  }
  /* numer części — duża cyfra wychodzi spod tekstu i staje się nagłówkiem barku */
  .tresc .lam > h2::after {
    content: counter(czesc, upper-roman);
    order: -1; align-self: stretch;
    margin-block-end: .34em; padding-block-end: .12em;
    font-family: var(--krój-naglowek); font-weight: 700;
    font-size: 1.45em; line-height: 1; letter-spacing: .07em;
    color: var(--akcent);
    border-block-end: 3px solid var(--wiodaca);
  }
  .pas--noc .lam > h2::after { color: var(--zloto); border-block-end-color: var(--zloto); }

  /* --- tablica informacyjna: etykieta obok tekstu, nie nad nim --- */
  .tresc .lam > .tablica {
    grid-column: barek / arkada;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--kolumna));
    column-gap: var(--rozstaw);
    align-items: start;
  }
  .tresc .lam > .tablica > h2 { grid-column: 1; margin-inline: 0; }
  .tresc .lam > .tablica > p  { grid-column: 2; }

  /* --- SIATKI KART rozpinają się na CAŁY arkusz — od plakiety tytułowej po
         arkadę. Siatka arkusza zostaje ta sama, więc nagłówek dalej stoi
         w barku, a akapity dalej trzymają kolumnę prozy.
         ⚠⚠ PIERWSZA WERSJA zwijała takie pasmo do jednej kolumny i dosuwała
         WSZYSTKO do lewej krawędzi. Wyglądało to spójnie, ale bramka B13
         słusznie zgłosiła KOMPOZYCJĘ JEDNOSTRONNĄ na arkuszu systemu: akapit
         szeroki na 704 px przy lewej ścianie zostawiał 1054 px pustego pola
         po prawej. Kolumna prozy MUSI zostać na swoim miejscu także tutaj. */
  .tresc .lam > .niże,
  .tresc .lam > .uchwyt-tabliczek,
  .tresc .lam > .lista-wpisow,
  .tresc .lam > .tabliczki,
  .tresc .lam > .próbki {
    grid-column: barek / -1;
    margin-inline: 0;
  }
  /* ⚠ arkada znika w takim paśmie — karta rozciągnięta na całą szerokość
     przykryłaby ją, a prześwity wyglądałyby jak kropki w szczelinach siatki. */
  .tresc .lam:has(> .niże, > .uchwyt-tabliczek, > .lista-wpisow, > .tabliczki, > .próbki) {
    background-image: none;
  }
}

/* druk: arkusz wraca do jednej szpalty (blok 17 dotyczy ekranu, ale @media
   min-width łapie też szeroką stronę drukowaną) */
@media print {
  .tresc .lam { display: block; background-image: none; }
  .tresc .lam > .tablica { display: block; }
  .tresc .lam > h2 { display: block; }
  .tresc .lam > h2::after { content: none; }
}