@charset "utf-8";
/* =====================================================================
   NOMENKLATURA — system projektowy makiety nilotica.eu (przebudowa premium)
   Seria STRONY-WWW-ST-A2. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.

   IDEA: serwis wyjaśnia NAZWĘ. „Nilotica" to nie marka, tylko epitet
   podgatunkowy, a cały tekst wraca do pytania „co ta nazwa znaczy".
   Layout jest więc zbudowany jak arkusz nomenklatury: kursywa nazw
   naukowych staje się materiałem kompozycji, siatka pochylonych włosowych
   linii (kąt kursywy, 12° od pionu) jest fakturą wszystkich pasm, a każda
   sekcja dostaje numer rangi jak pozycja w kluczu do oznaczania.
   Karty czytają się jak fiszki gatunków: nazwa kursywą, cienka kreska pod.

   ⚠ ROZJAZD ŚWIADOMY: siostra nilotica.pl (seria ST-CBF) ma projekt
   „Zielnik" — botanika, papier, oliwkowa zieleń, Crimson Pro. Tutaj jest
   NAUKOWO i TYPOGRAFICZNIE: chłodna zieleń świerkowa, sepia, kość
   słoniowa, Literata + Manrope, zero motywów roślinnych.

   ⚠ Kolejność ważna dla pułapek: reguły ogólne PRZED komponentami, a każdy
   komponent, który stoi w prozie, ma prefiks „.tresc", żeby wygrać
   specyficzność z „.tresc p a" (0-2-1).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --kosc:            #F5F1E6;   /* kość słoniowa — podłoże (barwa nierafinowanego shea) */
  --karta:           #FFFDF5;   /* płyta i fiszka */
  --pergamin:        #EAE3D1;   /* pasmo drugoplanowe — sepia rozbielona */
  --pergamin-hero:   #EFE9DA;   /* najjaśniejszy przystanek gradientu hero */
  --sepia-jasna:     #DED2B8;   /* plakietki, numery, wyróżnienia */

  /* pismo na jasnym */
  --atrament:        #17211B;   /* zielonoczarny atrament */
  --atrament-cichy:  #454F47;

  /* barwa wiodąca — zieleń świerkowa */
  --zielen:          #2E5D45;   /* powierzchnie, kreski, ornament */
  --zielen-ciemna:   #1D4230;   /* nagłówki i odsyłacze na jasnym, tło przycisku */
  --zielen-karta:    #17392A;   /* karta na ciemnym paśmie */
  --glebia:          #102A1F;   /* ciemne pasmo */
  --glebia2:         #0A1C14;   /* stopka, najgłębszy przystanek */

  /* akcent — sepia */
  --sepia:           #6F4E1F;   /* akcent tekstowy na jasnym */
  --sepia-jasny:     #C9A45C;   /* akcent na ciemnym */
  --sepia-jasny2:    #D9B876;   /* akcent mocniejszy na ciemnym */

  /* kreski */
  --linia:           #6E6A57;   /* kreski widoczne — element nietekstowy, próg 3:1 */
  --linia-cicha:     #8E866F;   /* włosowe kreski wewnątrz kart */

  --na-ciemnym:      #F1EEE2;
  --na-ciemnym-cichy:#C6D2C7;
  --na-wiodacej:     #F5F1E6;
  --nota-tlo:        #1D4230;   /* tlo ciemnej plyty — token WLASNY, bo .na-ciemnym nadpisuje --zielen-ciemna */

  /* ornament — WYŁĄCZNIE dekoracja, nigdy nośnik informacji */
  --orn-zielen:      rgba(29, 66, 48, .055);
  --orn-zielen-mocna:rgba(29, 66, 48, .12);
  --orn-sepia:       rgba(111, 78, 31, .07);
  --orn-zloto:       rgba(201, 164, 92, .13);
  --orn-zloto-mocna: rgba(201, 164, 92, .26);

  /* ⚠ KĄT KURSYWY — jedna stała dla całej makiety. Siatka pasm, podkreślenia
     menu i ornamenty hero są pochylone dokładnie tak samo (12° od pionu). */
  --kat-kursywy:     102deg;

  --krój-naglowek: "Literata", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --krój-tekst:    "Manrope", "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 (pułapka 9): jedna krawędź dla nagłówków, prozy
     i kresek. Miara w em daje przy 1920 wiersz o ćwierć dłuższy niż przy 1366. */
  --kolumna:        36rem;
  --pas-szer:       84rem;
  --margines:       clamp(20px, 5vw, 108px);

  /* ⚠ szerokość ciemnego panelu hero — token, bo od 1600 px panel MUSI rosnąć
     razem z miarą tytułu (inaczej im szerszy ekran, tym pustszy hero). */
  --panel-szer:     clamp(150px, 20vw, 30rem);
  /* ⚠ MIARA TYTUŁU HERO — jedna zmienna dla nagłówka i dla włosowej kreski pod
     nim. Rośnie skokowo razem ze stopniem pisma, żeby liczba wierszy H1 przy
     1920 px NIE ROSŁA względem 1366 px (recenzja). */
  --miara-tytulu:   calc(280px + 47vw);

  --promien:        3px;        /* system detalu: krawędzie CIĘTE, nie miękkie */
  --promien-karta:  4px;
  --cien-plyta:     0 30px 64px -30px rgba(16, 42, 31, .42), 0 2px 8px -3px rgba(16, 42, 31, .14);
  --cien-karta:     0 18px 40px -26px rgba(16, 42, 31, .44), 0 1px 3px -1px rgba(16, 42, 31, .12);
  --cien-nota:      0 40px 90px -40px rgba(10, 28, 20, .70), 0 4px 14px -6px rgba(10, 28, 20, .35);
  --zachodzenie:    clamp(1.8rem, 1rem + 2.6vw, 4.6rem);
}

/* --- 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;
  /* pułapka 6 — pasy pełnej szerokości i ornamenty nie mogą dawać przewijania */
  overflow-x: clip;
}
@supports not (overflow: clip) { html { overflow-x: hidden; } }

body {
  margin: 0;
  background: var(--kosc);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.74;
  overflow-wrap: break-word;
  overflow-x: clip;
}

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

:focus-visible {
  outline: 3px solid var(--sepia);
  outline-offset: 3px;
  border-radius: var(--promien);
}

/* 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(--zielen-ciemna); color: var(--na-wiodacej);
  font-weight: 700; letter-spacing: .06em; text-decoration: none;
  border-radius: 0 0 var(--promien) 0;
}

/* --- 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 oznaczone klasą
   .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; }
/* ⚠ DWIE ŚWIADOME KRAWĘDZIE, obie konsekwentne w całej makiecie:
   1) KRAWĘDŹ PASMA — tytuł widoku i szyna rangi (numer + kreska przez całe pasmo),
   2) KOLUMNA PROZY — akapity, nagłówki sekcji, karty; wyśrodkowana (bramka B13).
   Tytuł hero stoi na krawędzi pasma, dokładnie nad numerem pierwszej rangi. */
.kontener--hero > * { grid-column: pelna-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--kosc);
  border-block-end: 1px solid var(--linia-cicha);
  box-shadow: 0 12px 34px -30px rgba(16, 42, 31, .8);
}
/* gzyms — trzy pasma jak nagłówek tabeli taksonomicznej */
.naglowek::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg,
    var(--zielen-ciemna) 0 22%, var(--zielen) 22% 46%,
    var(--sepia) 46% 62%, var(--sepia-jasny) 62% 78%, var(--pergamin) 78% 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .3rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* SYGNATURA SŁOWNA — jedno słowo KURSYWĄ, jak epitet podgatunkowy w druku
   naukowym. Bez sygnetu, bez listka, bez słoika: nic, co udaje logotyp (T9). */
.znak {
  display: inline-flex; align-items: baseline; gap: .5em;
  min-height: 46px; padding-block: .5rem;
  text-decoration: none; color: var(--zielen-ciemna);
}
.znak__tekst {
  position: relative;
  font-family: var(--krój-naglowek); font-style: italic; font-weight: 600;
  font-size: clamp(1.2rem, 1.02rem + .5vw, 1.7rem);
  line-height: 1.1; letter-spacing: -.01em;
  padding-block-end: .16em;
}
.znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0;
  height: 2px; background: var(--sepia);
  transform-origin: left; transition: transform .25s ease;
}
.znak:hover .znak__tekst::after { transform: scaleY(2); }
/* drobna „ranga" po sygnaturze — czysty ornament, dwie kreski i kropka */
.znak__ranga {
  display: inline-block; width: 2.6em; height: .62em;
  background:
    linear-gradient(var(--zielen) 0 0) left  center / 1.1em 2px no-repeat,
    linear-gradient(var(--sepia)  0 0) right center / 1.1em 2px no-repeat;
  flex: none;
}
@media (max-width: 600px) { .znak__ranga { display: none; } }

/* ⚠ pułapka B5: „flex:none" na nawigacji nie pozwala jej się zwężyć i lista
   wystaje poza ekran przy 360 px. Nawigacja MA się kurczyć i zawijać.
   ⚠ T7: menu NIE jest zbudowane na <details> — zwykła lista, więc pułapka
   niewidocznego menu na desktopie nie ma jak wystąpić. */
.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: .7em;
  font-weight: 600; font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: var(--atrament-cichy);
}
/* podkreślenie POCHYLONE — ten sam kąt co kursywa i siatka pasm */
.menu__link::after {
  content: ""; position: absolute; inset-block-end: .5rem;
  inset-inline-start: .7em; width: 0; height: 2px;
  background: var(--zielen); transform: skewX(-12deg);
  transition: width .25s ease;
}
.menu__link:hover { color: var(--zielen-ciemna); }
.menu__link:hover::after { width: calc(100% - 1.4em); }
.menu__link[aria-current="page"] { color: var(--zielen-ciemna); }
.menu__link[aria-current="page"]::after {
  width: calc(100% - 1.4em); height: 3px;
  background: linear-gradient(90deg, var(--zielen-ciemna) 0 60%, var(--sepia) 60% 100%);
}
@media (max-width: 760px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
  .menu__link { padding-inline: .45em; letter-spacing: .1em; }
}

/* --- 5. HERO — ARKUSZ NOMENKLATURY ----------------------------------- */
.tresc { display: block; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--pergamin-hero);
  background-image:
    radial-gradient(120% 96% at 88% 4%, rgba(46, 93, 69, .22) 0%, rgba(46, 93, 69, 0) 58%),
    radial-gradient(84% 72% at 2% 96%, rgba(111, 78, 31, .18) 0%, rgba(111, 78, 31, 0) 62%),
    repeating-linear-gradient(var(--kat-kursywy), transparent 0 22px, rgba(29, 66, 48, .075) 22px 23px),
    repeating-linear-gradient(180deg, transparent 0 71px, rgba(110, 106, 87, .085) 71px 72px),
    linear-gradient(168deg, #F8F4EA 0%, #EDE6D5 52%, #DFD6BE 100%);
  padding-block: clamp(2.8rem, 1.4rem + 5vw, 7rem) clamp(4.6rem, 2.4rem + 7vw, 10rem);
}
/* PANEL — pełnokolorowa, ciemna kolumna z ornamentem po prawej stronie hero.
   To ona sprawia, że pierwszy ekran nie jest kartką papieru. */
.hero__panel {
  position: absolute; z-index: 0;
  inset-block: 0; inset-inline-end: 0;
  width: var(--panel-szer);
  background-color: var(--glebia);
  background-image:
    radial-gradient(90% 70% at 78% 8%, rgba(46, 93, 69, .85) 0%, rgba(46, 93, 69, 0) 62%),
    repeating-linear-gradient(var(--kat-kursywy), transparent 0 30px, var(--orn-zloto) 30px 31px),
    linear-gradient(198deg, #1B4231 0%, #102A1F 58%, #0A1C14 100%);
  color: var(--sepia-jasny);
  display: grid; place-items: center;
  overflow: hidden;
}
.hero__panel::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 3px; background: linear-gradient(180deg, var(--sepia-jasny), rgba(201, 164, 92, .12));
}
.hero__panel svg { width: 118%; height: auto; display: block; opacity: .92; }
@media (max-width: 1199px) {
  .hero { padding-block-end: clamp(9.5rem, 5rem + 17vw, 13rem); }
  .hero__panel {
    inset-block: auto 0; inset-inline: 0;
    width: auto; height: clamp(124px, 26vw, 220px);
    /* ⚠ NAPRAWA PO RECENZJI: ornament dosunięty do prawej krawędzi pasa,
       tak jak przy 1200+ stoi przy prawej krawędzi ekranu. */
    place-items: center end;
    padding-inline-end: clamp(14px, 4vw, 56px);
  }
  .hero__panel::before { inset-block: 0 auto; inset-inline: 0; width: auto; height: 3px;
    background: linear-gradient(90deg, var(--sepia-jasny), rgba(201, 164, 92, .12)); }
  /* ⚠⚠ NAPRAWA PO RECENZJI: było height:168% pasa — widać było ŚRODKOWE 60%
     rysunku, czyli łuk wchodzący i wychodzący poza kadr plus samotny odcinek
     kreski obok. Ornament ma się mieścić w pasie W CAŁOŚCI, a wachlarz kresek
     i znaczniki narożne (nieczytelne przy 124–220 px) znikają. */
  .hero__panel svg { width: auto; height: 100%; opacity: 1; }
  .hero__panel .orn__wachlarz,
  .hero__panel .orn__znacznik { display: none; }
}
.hero .kontener { position: relative; z-index: 1; }

.hero .tytul {
  position: relative;
  margin: 0;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 2.5vw, 3.9rem);
  line-height: 1.04; letter-spacing: -.022em;
  color: var(--zielen-ciemna);
  text-wrap: balance;
  max-width: min(100%, var(--miara-tytulu));
}
/* ⚠⚠ NAPRAWA PO RECENZJI: miara 44rem znaczyła przy 1920 px zaledwie 912 px
   na kolumnie hero szerokiej ~1340 px — im szerszy ekran, tym pustszy hero
   i tym więcej wierszy H1 (przy 1366 trzy, przy 1920 cztery). Miara rośnie
   teraz razem ze stopniem pisma, do tych samych 52rem, które ma włosowa
   kreska pod tytułem, a ciemny panel poszerza się jej naprzeciw. */
@media (min-width: 1600px) { :root { --panel-szer: clamp(340px, 23vw, 34rem); } }

/* ⚠ ŁĄCZNIK TYPOGRAFICZNY — w polskim składzie myślnik nie zaczyna wiersza.
   Wiąże pauzę z poprzedzającym słowem; nie zmienia ani jednego znaku treści. */
.lacz { white-space: nowrap; }
/* nad tytułem: kreska rangi — gruby odcinek zieleni + cienki sepii */
.hero .tytul::before {
  content: ""; display: block;
  width: clamp(96px, 14vw, 210px); height: 6px;
  margin-block-end: clamp(1.2rem, .8rem + 1.4vw, 2.6rem);
  background: linear-gradient(90deg,
    var(--zielen-ciemna) 0 42%, var(--sepia) 42% 58%, rgba(111, 78, 31, .25) 58% 100%);
}
/* pod tytułem: włosowa linia arkusza, przycięta do szerokości kolumny hero */
.hero .tytul::after {
  content: ""; display: block;
  margin-block-start: clamp(1.2rem, .8rem + 1.2vw, 2.4rem);
  height: 1px; width: min(100%, var(--miara-tytulu));
  background: linear-gradient(90deg, var(--linia) 0 12%, rgba(110, 106, 87, .55) 55%, rgba(110, 106, 87, 0) 100%);
}

/* HERO Z JEDNOWYRAZOWYM TYTUŁEM ------------------------------------------
   ⚠⚠ NAPRAWA PO RECENZJI: „Czytelnia" złożona tą samą skalą co zdanie-tytuł
   zostawiała przy 1920 px około tysiąca pikseli pustego pergaminu — jedyny
   widok, którego pierwszy ekran czytał się jak kartka z jednym słowem.
   Krótki tytuł dostaje więc DWIE rzeczy: własną, znacznie większą skalę
   i LINIJKĘ ARKUSZA — ozdobnik podziałki biegnący przez całe pasmo, ten sam
   motyw co szyna rangi. Linijka zastępuje włosową kreskę pod tytułem, żeby
   nie stawiać dwóch kresek jedna nad drugą. */
.hero--krotki .tytul {
  font-size: clamp(2.6rem, 1.1rem + 5.4vw, 7.2rem);
  letter-spacing: -.03em;
  max-width: none;
}
.hero--krotki .tytul::after { content: none; }
.hero__linijka {
  display: block; position: relative;
  height: clamp(48px, 4vw + 16px, 132px);
  margin-block-start: clamp(1.3rem, .8rem + 1.4vw, 2.8rem);
  border-block-end: 1px solid var(--linia);
  background-image:
    repeating-linear-gradient(90deg, rgba(29, 66, 48, .34) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(111, 78, 31, .46) 0 2px, transparent 2px 170px);
  background-size: 100% 32%, 100% 70%;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
}
.hero__linijka::before {
  content: ""; position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  width: clamp(96px, 14vw, 210px); height: 4px;
  background: linear-gradient(90deg,
    var(--zielen-ciemna) 0 42%, var(--sepia) 42% 58%, rgba(111, 78, 31, .25) 58% 100%);
}
/* linijka kończy się PRZED ciemnym panelem — inaczej podziałka gaśnie na
   ciemnym tle i wygląda, jakby ktoś uciął ozdobnik w przypadkowym miejscu */
@media (min-width: 1200px) { .hero__linijka { width: calc(100% - var(--panel-szer)); } }
/* na wąskim ekranie podziałka zlewa się w szarą smugę — zostaje sama kreska */
@media (max-width: 899px) {
  .hero__linijka { height: clamp(26px, 4vw, 40px); background-image: none; }
}

/* --- 6. PASMA I PŁYTY ------------------------------------------------ */
/* ⚠ BEZ overflow:hidden na .pas — ciemna plyta i tafla NACHODZA na sasiednie
   pasmo ujemnym marginesem, a clip na sekcji uciolby to zachodzenie.
   Przepelnienia obcinaja same komponenty (.hero, .nota, .tafla, karty). */
.pas { position: relative; display: flow-root; }
.pas > .kontener { position: relative; z-index: 1; }

/* pasmo kości słoniowej — faktura pochylonych włosowych linii */
.pas--kosc {
  overflow: hidden;
  background-color: var(--kosc);
  background-image:
    repeating-linear-gradient(var(--kat-kursywy), transparent 0 30px, var(--orn-zielen) 30px 31px);
  padding-block: clamp(2.6rem, 1.4rem + 3.4vw, 5.6rem);
}
/* pasmo sepii — mocniejsze, z poziomym rytmem tabeli */
.pas--pergamin {
  overflow: hidden;
  background-color: var(--pergamin);
  background-image:
    radial-gradient(70% 56% at 96% 4%, rgba(46, 93, 69, .12) 0%, rgba(46, 93, 69, 0) 62%),
    repeating-linear-gradient(var(--kat-kursywy), transparent 0 24px, var(--orn-sepia) 24px 25px),
    repeating-linear-gradient(180deg, transparent 0 63px, rgba(110, 106, 87, .10) 63px 64px);
  padding-block: clamp(2.8rem, 1.5rem + 3.6vw, 6rem);
}
.pas--pergamin::before,
.pas--kosc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, rgba(110, 106, 87, .5), rgba(110, 106, 87, .12) 70%, transparent);
}
/* pasmo pod PŁYTĘ — biała tafla nachodząca na sąsiada */
.pas--tafla {
  background-color: var(--kosc);
  background-image:
    radial-gradient(60% 50% at 4% 92%, rgba(111, 78, 31, .10) 0%, rgba(111, 78, 31, 0) 64%),
    repeating-linear-gradient(var(--kat-kursywy), transparent 0 34px, var(--orn-zielen) 34px 35px);
  padding-block: 0 clamp(1.8rem, 1rem + 2.2vw, 3.8rem);
  padding-inline: clamp(8px, 2vw, 30px);
}
.tafla {
  position: relative; z-index: 2;
  max-width: min(100%, 62rem);
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(1.9rem, 1.1rem + 2.6vw, 4rem);
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien-plyta);
  overflow: hidden;
}
/* gzyms tafli — pasek rangi na górnej krawędzi */
.tafla::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--zielen-ciemna) 0 26%, var(--zielen) 26% 44%, var(--sepia) 44% 56%, rgba(111, 78, 31, .18) 56% 100%);
}

/* pasmo ciemne — MOCNY AKCENT. Nadpisujemy TOKENY, więc każdy komponent
   w środku dostaje wariant na ciemnym bez osobnych reguł (pułapka
   „globalny kolor na powierzchni o odwrotnej jasności"). */
.na-ciemnym {
  --kosc:            var(--glebia);
  --karta:           var(--zielen-karta);
  --pergamin:        var(--zielen-karta);
  --sepia-jasna:     var(--zielen-karta);
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--na-ciemnym-cichy);
  --zielen:          var(--sepia-jasny);
  --zielen-ciemna:   var(--sepia-jasny2);
  --sepia:           var(--sepia-jasny);
  --linia:           #6C7F6F;
  --linia-cicha:     #3A5346;
  --na-wiodacej:     var(--glebia2);
  --orn-zielen:      var(--orn-zloto);
  --orn-sepia:       var(--orn-zloto);
  color: var(--na-ciemnym);
}
.pas--gabinet {
  overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(66% 60% at 92% 4%, rgba(46, 93, 69, .60) 0%, rgba(46, 93, 69, 0) 62%),
    radial-gradient(52% 48% at 2% 98%, rgba(111, 78, 31, .34) 0%, rgba(111, 78, 31, 0) 66%),
    repeating-linear-gradient(var(--kat-kursywy), transparent 0 30px, var(--orn-zloto) 30px 31px);
  padding-block: clamp(3rem, 1.6rem + 3.8vw, 6.2rem);
}
.pas--gabinet::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--sepia-jasny) 0 18%, rgba(201, 164, 92, .12) 18% 62%, var(--sepia-jasny) 62% 78%, rgba(201, 164, 92, .12) 78% 100%);
}

/* --- 7. NOTA OTWIERAJĄCA (ciemna płyta nachodząca na hero) ------------ */
.pas--nota {
  background-color: var(--kosc);
  background-image:
    repeating-linear-gradient(var(--kat-kursywy), transparent 0 30px, var(--orn-zielen) 30px 31px);
  padding-block: 0 clamp(2rem, 1.2rem + 2.4vw, 4.2rem);
  padding-inline: clamp(8px, 2vw, 30px);
}
.nota {
  position: relative; z-index: 3;
  max-width: min(100%, 62rem);
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(2rem, 1.2rem + 2.8vw, 4.2rem);
  background-color: var(--nota-tlo);
  background-image:
    radial-gradient(72% 66% at 94% 2%, rgba(46, 93, 69, .70) 0%, rgba(46, 93, 69, 0) 60%),
    radial-gradient(58% 54% at 0% 100%, rgba(10, 28, 20, .85) 0%, rgba(10, 28, 20, 0) 62%),
    repeating-linear-gradient(var(--kat-kursywy), transparent 0 26px, var(--orn-zloto) 26px 27px);
  border-radius: var(--promien);
  box-shadow: var(--cien-nota);
  overflow: hidden;
}
.nota::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--sepia-jasny) 0 32%, rgba(201, 164, 92, .18) 32% 100%);
}
.tresc .nota .wprowadzenie {
  font-size: 1.2rem; line-height: 1.68;
  color: var(--na-ciemnym);
}
.tresc .nota p { color: var(--na-ciemnym); }

/* ⚠⚠ NAPRAWA PO RECENZJI: poniżej 1200 px ciemny pas hero i ciemna płyta noty
   stały krawędź w krawędź i czytały się jako JEDNA zielona bryła wysokości
   ~600 px, rozdzielona wyłącznie 3-pikselową złotą kreską. Warstwowość, która
   przy 1920 px jest atutem, tam znikała. Płyta przestaje więc nachodzić na pas
   i zaczyna się dopiero pod nim: między nimi zostaje pasek kości słoniowej
   z fakturą arkusza, a cień płyty ma na czym się położyć. */
@media (max-width: 1199px) {
  .nota { margin-block-start: clamp(1.9rem, 1.1rem + 2.4vw, 3.6rem); }
}

@media (max-width: 720px) {
  .pas--nota, .pas--tafla { padding-inline: 0; }
  .nota, .tafla { border-radius: 0; border-inline: 0; }
}

/* --- 8. TYPOGRAFIA --------------------------------------------------- */
.tresc { counter-reset: ranga; }
.pas--sekcja { counter-reset: stopien; }

/* SZYNA RANGI — pusty element ozdobny przed każdym nagłówkiem sekcji.
   Biegnie przez CAŁĄ szerokość pasma: kursywny numer stoi na krawędzi pasma,
   a kreska prowadzi wzrok do wyśrodkowanej kolumny prozy. Element nie ma
   treści i jest aria-hidden, więc nie istnieje ani dla czytnika ekranu,
   ani dla kontroli zgodności tekstu. */
.tresc .ranga {
  position: relative;
  height: clamp(1.9rem, 1.5rem + .9vw, 2.9rem);
  margin: 0 0 clamp(.9rem, .6rem + .8vw, 1.7rem);
  counter-increment: ranga;
}
.tresc .ranga::before {
  content: counter(ranga, decimal-leading-zero);
  position: absolute; inset-block-end: .5rem; inset-inline-start: 0;
  font-family: var(--krój-naglowek); font-style: italic; font-weight: 600;
  /* ⚠ NAPRAWA PO RECENZJI: tracking .3em rozsuwał „01" na „0 1" — odstęp między
     cyframi dorównywał spacji międzywyrazowej. Para cyfr ma być JEDNĄ liczbą,
     więc mniejszy tracking i większy stopień pisma. */
  font-size: .95rem; letter-spacing: .08em; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--sepia);
}
.tresc .ranga::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg,
    var(--zielen) 0 3.6em, var(--linia) 3.6em 74%, rgba(110, 106, 87, .22) 100%);
}

.tresc h2 {
  position: relative;
  margin: 0 0 1rem;
  padding-block-start: 0;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.6rem);
  line-height: 1.14; letter-spacing: -.014em;
  color: var(--zielen-ciemna);
  text-wrap: balance;
}

.tresc h3 {
  position: relative;
  margin: clamp(1.8rem, 1.2rem + 1.3vw, 2.6rem) 0 .5rem;
  padding-inline-start: 1.15em;
  font-family: var(--krój-naglowek); font-style: italic; font-weight: 600;
  font-size: clamp(1.12rem, 1rem + .42vw, 1.45rem);
  line-height: 1.28; color: var(--atrament);
}
.tresc h3::before {
  content: ""; position: absolute;
  inset-block-start: .55em; inset-inline-start: 0;
  width: .55em; height: .55em;
  background: var(--zielen); transform: skewX(-12deg);
}

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

/* NAZWA NAUKOWA — kursywa jest tu materiałem kompozycji, nie ozdobą */
.tresc .okaz {
  font-family: var(--krój-naglowek); font-style: italic; font-weight: 600;
  font-size: 1.03em; letter-spacing: .002em;
  color: var(--zielen-ciemna);
}
.tresc .nota .okaz, .pas--gabinet .okaz { color: var(--sepia-jasny2); }

/* odsyłacze w prozie — ⚠ pułapka: `.tresc p a` (0-2-1) bije `.przycisk` (0-1-0) */
.tresc p a:not(.przycisk), .tresc li a:not(.przycisk) {
  color: var(--zielen-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--sepia);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.tresc p a:not(.przycisk):hover, .tresc li a:not(.przycisk):hover {
  color: var(--sepia); text-decoration-thickness: 2px;
}

/* --- 9. STOPIEŃ — akapit z ponumerowanego ciągu ---------------------- */
/* Źródło buduje trzy widoki z wyliczeń prowadzonych prozą („Pierwsze:…",
   „Krok pierwszy:…"). Zostają akapitami — dostają tylko oprawę. */
.tresc .stopien {
  counter-increment: stopien;
  position: relative;
  margin-block: 0 .8rem;
  padding: clamp(1rem, .7rem + .9vw, 1.5rem) clamp(1rem, .7rem + 1vw, 1.7rem)
           clamp(1rem, .7rem + .9vw, 1.5rem) clamp(3.4rem, 2.4rem + 2.6vw, 5.2rem);
  background: var(--karta);
  border: 1px solid var(--linia);
  border-inline-start: 4px solid var(--zielen);
  border-radius: var(--promien);
  box-shadow: var(--cien-karta);
}
.tresc .stopien::before {
  content: counter(stopien, decimal-leading-zero);
  position: absolute;
  inset-block-start: clamp(.8rem, .5rem + .8vw, 1.3rem);
  inset-inline-start: clamp(1rem, .7rem + .9vw, 1.6rem);
  font-family: var(--krój-naglowek); font-style: italic; font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1vw, 2.1rem); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--sepia); opacity: .85;
}
.tresc .stopien__etykieta {
  color: var(--zielen-ciemna); font-weight: 700;
  letter-spacing: .01em;
}

/* --- 10. FISZKA GATUNKU ---------------------------------------------- */
.tresc .fiszki {
  display: grid; gap: clamp(.9rem, .6rem + 1vw, 1.6rem);
  margin-block: clamp(1.4rem, 1rem + 1.2vw, 2.4rem) 0;
}
@media (min-width: 800px)  { .tresc .fiszki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .tresc .fiszki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tresc .fiszka {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.2rem, .9rem + 1.1vw, 2rem);
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
}
.tresc .fiszka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--zielen) 0 55%, var(--sepia) 55% 100%);
}
/* pochylona faktura arkusza w rogu fiszki — ornament, nie informacja */
.tresc .fiszka::after {
  content: ""; position: absolute; z-index: 0;
  inset-block-end: -30%; inset-inline-end: -18%;
  width: 62%; aspect-ratio: 1;
  background: repeating-linear-gradient(var(--kat-kursywy), transparent 0 9px, var(--orn-zielen-mocna) 9px 10px);
  pointer-events: none;
}
.tresc .fiszka > * { position: relative; z-index: 1; }
.tresc .fiszka h3 {
  margin: .35rem 0 .55rem; padding-inline-start: 0;
  font-size: clamp(1.16rem, 1.02rem + .5vw, 1.5rem);
  color: var(--zielen-ciemna);
}
.tresc .fiszka h3::before { content: none; }
.tresc .fiszka h3::after {
  content: ""; display: block; width: 3.2em; height: 2px;
  margin-block-start: .5rem; background: var(--sepia);
}
.tresc .fiszka p { font-size: .96rem; color: var(--atrament); margin-block-end: 0; }

/* --- 11. ETAP — kroki przerobu (h3 + akapit w rzędzie kart) ---------- */
.tresc .etapy {
  display: grid; gap: clamp(.9rem, .6rem + 1vw, 1.5rem);
  margin-block: clamp(1.4rem, 1rem + 1.2vw, 2.4rem) 0;
  counter-reset: etap;
}
/* ⚠⚠ NAPRAWA PO RECENZJI: pięć kart w siatce trzykolumnowej zostawiało pustą
   szóstą komórkę wielkości całej karty — blok czytał się tak, jakby zabrakło
   treści. Siatka stoi teraz na 4 (dwie kolumny) i 6 (trzy kolumny) torach po
   pół karty, a reguła NIEPEŁNEGO OSTATNIEGO RZĘDU rozciąga jego karty tak,
   żeby rząd domykał się równo. Reguła jest ogólna — działa dla każdej liczby
   kart, nie tylko dla pięciu (arkusz systemu ma ich trzy). */
@media (min-width: 780px) {
  .tresc .etapy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tresc .etap { grid-column: span 2; }
  /* nieparzysta liczba kart — ostatnia bierze cały rząd */
  .tresc .etap:nth-child(2n+1):nth-last-child(1) { grid-column: span 4; }
}
@media (min-width: 1280px) {
  .tresc .etapy { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tresc .etap { grid-column: span 2; }
  /* ⚠⚠ ZDJĘCIE REGUŁY DWUKOLUMNOWEJ. Selektor z pseudoklasami ma (0,4,0)
     i bije samo `.tresc .etap` (0,2,2) TAKŻE tutaj — bez tego zdjęcia arkusz
     systemu (3 karty) rozpychał trzecią kartę na 4 z 6 torów i przerzucał ją
     do drugiego rzędu, czyli dokładnie odtwarzał naprawianą dziurę. */
  .tresc .etap:nth-child(2n+1):nth-last-child(1) { grid-column: span 2; }
  /* ostatni rząd na dwie karty — każda na półtorej kolumny */
  .tresc .etap:nth-child(3n+1):nth-last-child(2),
  .tresc .etap:nth-child(3n+1):nth-last-child(2) ~ .etap { grid-column: span 3; }
  /* ostatni rząd na jedną kartę — bierze cały rząd */
  .tresc .etap:nth-child(3n+1):nth-last-child(1) { grid-column: span 6; }
}
.tresc .etap {
  counter-increment: etap;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.2rem, .9rem + 1.1vw, 2rem);
  padding-block-start: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem);
  background-color: var(--pergamin);
  border: 1px solid var(--linia);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
}
/* duża ozdobna cyfra w tle karty */
.tresc .etap::before {
  content: counter(etap, decimal-leading-zero);
  position: absolute; inset-block-start: -.14em; inset-inline-end: .04em;
  font-family: var(--krój-naglowek); font-style: italic; font-weight: 700;
  font-size: 5.6rem; line-height: 1;
  color: var(--sepia-jasna); opacity: .9;
  pointer-events: none;
}
.tresc .etap > * { position: relative; z-index: 1; }
.tresc .etap h3 {
  margin: 0 0 .5rem; padding-inline-start: 0;
  color: var(--zielen-ciemna);
}
.tresc .etap h3::before { content: none; }
.tresc .etap h3::after {
  content: ""; display: block; width: 2.8em; height: 2px;
  margin-block-start: .5rem; background: var(--zielen);
}
.tresc .etap p { font-size: .95rem; margin-block-end: 0; }

/* --- 12. ODSYŁACZ KIERUNKOWY ----------------------------------------- */
/* 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 0; }
.tresc .przejscie + .przejscie { margin-block-start: .7em; }
.tresc .przejscie a:not(.przycisk) {
  display: inline-flex; align-items: center; gap: .8em;
  min-height: 52px;
  padding: .5em 1.4em .5em 1.2em;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-inline-start: 4px solid var(--sepia);
  border-radius: var(--promien);
  font-family: var(--krój-tekst); font-weight: 700; font-size: .98rem;
  letter-spacing: .005em; color: var(--zielen-ciemna);
  text-decoration: none;
  box-shadow: var(--cien-karta);
}
.tresc .przejscie a:not(.przycisk)::after {
  content: "→"; font-size: 1.05em; line-height: 1; color: var(--sepia);
  transition: transform .25s ease;
}
.tresc .przejscie a:not(.przycisk):hover {
  background: var(--zielen-ciemna); color: var(--na-wiodacej);
  border-color: var(--zielen-ciemna); border-inline-start-color: var(--sepia);
}
.tresc .przejscie a:not(.przycisk):hover::after { transform: translateX(5px); color: var(--na-wiodacej); }

/* 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;
}

/* --- 13. PRZYCISK ---------------------------------------------------- */
.tresc .cta { margin-block: clamp(1.8rem, 1.2rem + 1.4vw, 3rem) 0; }
/* ⚠⚠ SELEKTOR MUSI DORÓWNAĆ `.tresc .przejscie a` (0-2-1) */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; gap: .85em; justify-content: center;
  min-height: 58px; padding: .8rem 2rem;
  background: var(--zielen-ciemna); color: var(--na-wiodacej);
  border: 1px solid var(--zielen-ciemna);
  border-inline-start: 5px solid var(--sepia);
  border-radius: var(--promien);
  font-family: var(--krój-tekst); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 22px 44px -24px rgba(10, 28, 20, .9);
}
.tresc .przejscie a.przycisk::after,
.tresc a.przycisk::after { content: "→"; color: inherit; }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover {
  background: var(--sepia); border-color: var(--sepia); color: var(--na-wiodacej);
  border-inline-start-color: var(--zielen-ciemna);
}
.nota .przycisk, .pas--gabinet .przycisk {
  background: var(--sepia-jasny); color: var(--glebia2);
  border-color: var(--sepia-jasny); border-inline-start-color: var(--na-ciemnym);
}
.nota .przycisk:hover, .pas--gabinet .przycisk:hover {
  background: var(--na-ciemnym); color: var(--glebia2);
  border-color: var(--na-ciemnym); border-inline-start-color: var(--sepia-jasny);
}

/* --- 14. LISTA WPISÓW ------------------------------------------------ */
.tresc .lista-wpisow {
  margin: clamp(1.6rem, 1rem + 1.6vw, 3rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  counter-reset: wpis;
}
@media (min-width: 840px)  { .tresc .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .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.5rem, 1rem + 1.4vw, 2.6rem);
  padding-block-start: clamp(2.6rem, 1.8rem + 2vw, 4rem);
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-plyta);
}
.tresc .zapowiedz::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 5px;
  background: linear-gradient(90deg, var(--zielen-ciemna) 0 40%, var(--sepia) 40% 62%, rgba(111, 78, 31, .2) 62% 100%);
}
/* duża ozdobna cyfra — ornament, nie informacja (jest pseudoelementem) */
.tresc .zapowiedz::after {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-end: -.16em; inset-inline-end: .04em;
  font-family: var(--krój-naglowek); font-style: italic; font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 7.5rem; line-height: 1;
  color: var(--sepia-jasna); opacity: .85;
  pointer-events: none;
}
.tresc .zapowiedz > * { position: relative; z-index: 1; }
.tresc .zapowiedz__tytul {
  margin: 0 0 1.1rem; padding: 0; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.2rem, 1.02rem + .58vw, 1.62rem); line-height: 1.24;
  color: var(--zielen-ciemna);
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
/* ⚠⚠ PUŁAPKA SPECYFICZNOŚCI — DRUGI NAWRÓT TEJ SAMEJ RODZINY.
   `.tresc li a:not(.przycisk)` ma (0,2,2) i biło `.tresc .zapowiedz__tytul a`
   (0,2,1): deklarowane w komponencie „text-decoration:none" NIGDY nie działało,
   więc wszystkie trzy tytuły kart Czytelni miały włosowe sepiowe podkreślenie
   i czytały się jak powiększony odsyłacz z prozy. Naprawiono wcześniej
   „Czytaj dalej" (tam `.tresc .zapowiedz .zapowiedz__wiecej a` daje 0,3,1),
   ale nie tytuł. Prefiks `.zapowiedz` podnosi selektor do (0,3,1) i wygrywa. */
.tresc .zapowiedz .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--zielen-ciemna); text-decoration: none;
}
.tresc .zapowiedz .zapowiedz__tytul a:hover,
.tresc .zapowiedz .zapowiedz__tytul a:focus-visible {
  color: var(--sepia);
  text-decoration-line: underline; text-decoration-color: var(--sepia);
  text-decoration-thickness: 2px; text-underline-offset: .16em;
}
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .7em; min-height: 46px;
  padding: .35em 1.1em; text-decoration: none;
  color: var(--zielen-ciemna); font-weight: 700;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--linia);
  border-inline-start: 3px solid var(--sepia);
  border-radius: var(--promien);
  background: var(--karta);
}
.tresc .zapowiedz .zapowiedz__wiecej a::after { content: "→"; }
.tresc .zapowiedz .zapowiedz__wiecej a:hover { background: var(--zielen-ciemna); color: var(--na-wiodacej); border-color: var(--zielen-ciemna); border-inline-start-color: var(--sepia); }

/* --- 15. BLOK WIERSZOWY I LISTY ARKUSZA ------------------------------ */
.tresc .wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.8rem) clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--karta);
  border: 1px solid var(--linia);
  border-inline-start: 5px solid var(--zielen);
  border-radius: var(--promien);
  font-family: var(--krój-maszyna);
  font-size: .92rem; line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
}
.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 3.8em;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-inline-start: 4px solid var(--sepia);
  border-radius: var(--promien);
  box-shadow: var(--cien-karta);
}
.tresc .kroki li::before {
  content: counter(krok, decimal-leading-zero); position: absolute;
  inset-inline-start: 1em; inset-block-start: .9em;
  font-family: var(--krój-naglowek); font-style: italic; font-weight: 700;
  font-size: 1.15em; line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--sepia);
}
.tresc .wyliczenie {
  margin: .4em 0 1.7em; padding: 0; list-style: none;
  display: grid; gap: .55rem;
}
.tresc .wyliczenie li {
  position: relative; padding: .3em 0 .3em 2.2em;
  border-block-end: 1px solid var(--linia-cicha);
}
.tresc .wyliczenie li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: 1em;
  width: 1.35em; height: 2px; background: var(--zielen);
  transform: skewX(-12deg);
}

/* --- 16. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--glebia2);
  background-image:
    radial-gradient(58% 90% at 90% 0%, rgba(46, 93, 69, .58) 0%, rgba(46, 93, 69, 0) 62%),
    radial-gradient(46% 70% at 4% 100%, rgba(111, 78, 31, .30) 0%, rgba(111, 78, 31, 0) 66%),
    repeating-linear-gradient(var(--kat-kursywy), transparent 0 28px, var(--orn-zloto) 28px 29px);
  color: var(--na-ciemnym);
  padding-block: clamp(2.6rem, 1.5rem + 2.8vw, 4.8rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--sepia-jasny) 0 22%, rgba(201, 164, 92, .14) 22% 46%,
    var(--na-ciemnym-cichy) 46% 58%, rgba(201, 164, 92, .14) 58% 78%, var(--sepia-jasny) 78% 100%);
}
.stopka__znak-svg {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -6%;
  width: clamp(240px, 34vw, 620px); aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--sepia-jasny);
  pointer-events: none;
}
.stopka__znak-svg svg { width: 100%; height: auto; display: block; opacity: .5; }
/* ⚠⚠ NAPRAWA PO RECENZJI: przy 390 px wielki łuk przechodził dokładnie przez
   wyrazy „MASŁA ROŚLINNE" i „CZYTELNIA" w menu stopki (kontrast trzymał próg —
   7,53:1 spadało do 5,98:1 — ale napis leżał na jaśniejszej smudze), a kwadrat
   22x22 px wisiał samotnie nad menu, oderwany od wachlarza kresek, który przy
   tej szerokości i tak jest już niewidoczny. Ornament schodzi więc w PUSTY
   dolny prawy narożnik stopki, gaśnie, a kwadrat znika razem z wachlarzem.
   ⚠ Zmiana opacity nie rusza pomiaru B6: kontrast liczony jest z computed
   `color`, nie z krycia — próg 3:1 dla elementu nietekstowego zostaje. */
@media (max-width: 699px) {
  .stopka__znak-svg {
    inset-block-start: auto; inset-block-end: -14%;
    inset-inline-end: -24%;
    width: clamp(190px, 54vw, 320px);
    transform: none;
  }
  .stopka__znak-svg svg { opacity: .3; }
  .stopka__znak-svg .orn__wachlarz,
  .stopka__znak-svg .orn__znacznik { display: none; }
}
.stopka__pas {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 3rem);
}
.stopka__znak {
  margin: 0;
  font-family: var(--krój-naglowek); font-style: italic; font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.85rem);
  color: var(--na-ciemnym); letter-spacing: -.01em;
}
.stopka__znak::after {
  content: ""; display: block; width: 3.4em; height: 2px;
  margin-block-start: .45rem; background: var(--sepia-jasny);
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.5rem, 2vw, 1.6rem);
  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(--sepia-jasny); font-weight: 600;
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--na-ciemnym); border-block-end-color: var(--sepia-jasny); }
.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-jasny); border-radius: var(--promien);
  color: var(--sepia-jasny); text-decoration: none;
  font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--sepia-jasny); color: var(--glebia2); }

/* --- 17. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 1.6rem 0 2.2rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia); border-radius: var(--promien-karta);
  background: var(--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.6;
}

/* --- 18. 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; }
  .hero, .stopka, .nota, .pas--gabinet {
    background: #FFFFFF !important; color: #000000 !important;
  }
  .hero__panel, .stopka__znak-svg, .stopka::before, .nota::before,
  .hero__linijka { display: none !important; }
  .tafla, .nota, .zapowiedz, .fiszka, .etap, .stopien { box-shadow: none; margin-block-start: 0; }
  .pas--pergamin, .pas--kosc, .pas--tafla, .pas--nota { background: #FFFFFF; }
  .tresc .nota p, .pas--gabinet p, .pas--gabinet h2 { color: #000000 !important; }
  a { color: #000000; }
}