@charset "utf-8";
/* =====================================================================
   OKAZ — system projektowy makiety naturalnykosmetyk.com
   Seria STRONY-WWW-ST-A2. HTML+CSS, zero JavaScriptu, zero zdjęć,
   zero formularzy, zero znaków firmowych. Wszystkie barwy przez zmienne.

   IDEA. Serwis uczy schodzić z obietnicy z frontu opakowania na opisany
   rewers. Arkusz zielnika jest dokładnie tym przedmiotem: roślina nie jako
   ładny listek z etykiety, tylko jako okaz przymocowany do arkusza, opisany
   i ponumerowany. Stąd len jako podłoże, sepia jako atrament opisu, ciepła
   zieleń suszonej rośliny — i ornament, który zawsze jest RYSUNKIEM okazu
   (kontur blaszki + żyłkowanie), nigdy okrągłą pieczątką udającą certyfikat.

   ⚠ Kolejność reguł ma znaczenie dla pułapek katalogu INSTRUKCJI:
   ogólne przed komponentami, a każdy komponent stojący w prozie ma prefiks
   wygrywający specyficzność z regułą odsyłacza w akapicie.
   ⚠⚠ ŚWIADOMIE NIE MA pseudoelementu na „main.tresc" — ornament kotwiczony
   do okna wchodzi wtedy pod kolumnę tekstu (bramka B13c). Wszystkie ornamenty
   wiszą na pasmach i na kontenerze.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --papier:          #F3EFE3;  /* len — podłoże serwisu */
  --papier-karta:    #FBF8F0;  /* arkusz montażowy — karty okazów */
  --tlo-2:           #DCE6DA;  /* seledyn — pasmo drugoplanowe */
  --wiodaca-jasna:   #E7EEE4;  /* seledyn jasny — noty, plakietki */
  /* pismo */
  --atrament:        #211E17;
  --atrament-cichy:  #55503F;
  /* zieleń zielnika */
  --wiodaca:         #3D6B48;  /* kreski, ornament, obwódki — próg 3:1 */
  --wiodaca-ciemna:  #24492F;  /* nagłówki i odsyłacze na jasnym */
  --akcent:          #8A4B22;  /* sepia — etykiety okazów */
  --linia:           #6C6553;
  --linia-cicha:     #B9B29A;  /* WYŁĄCZNIE włos ornamentu */
  --na-wiodacej:     #FBF8F0;
  --na-akcencie:     #FBF8F0;
  /* powierzchnie ciemne */
  --glebia:          #14291C;
  --glebia-2:        #0F2016;
  --panel:           #1C3823;
  --na-ciemnym:      #F0EDE2;
  --seledyn-pismo:   #BFD3BE;
  --sepia-jasna:     #D9A96C;
  --obwodka-ciemna:  #8AA487;   /* obwódka elementu interaktywnego na ciemnym */

  /* role kontekstowe — nadpisywane na pasmach */
  --tlo:             var(--papier);
  --pismo:           var(--atrament);
  --pismo-ciche:     var(--atrament-cichy);
  --naglowek-barwa:  var(--wiodaca-ciemna);
  --link:            var(--wiodaca-ciemna);
  --etykieta:        var(--akcent);
  --kreska:          rgba(61, 107, 72, .34);
  --kreska-mocna:    var(--wiodaca);
  --cyfra:           rgba(61, 107, 72, .28);
  --orn:             var(--wiodaca);
  --przycisk-tlo:    var(--wiodaca-ciemna);
  --przycisk-pismo:  var(--na-wiodacej);

  /* pismo */
  --kroj-naglowek: "Cormorant Garamond", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --kroj-tekst: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* miara — ⚠ w rem, nie w ch: ch w kroju o wąskim zerze kłamie */
  --kolumna:   38rem;
  --pas-szer:  84rem;
  --margines:  clamp(24px, 5vw, 96px);
  --rytm:      clamp(2.6rem, 1.6rem + 2.6vw, 5.4rem);

  --promien:      3px;
  --promien-duzy: 6px;
  --cien-karta:   0 22px 44px -30px rgba(20, 41, 28, .55), 0 2px 6px -3px rgba(20, 41, 28, .18);
  --cien-plyta:   0 40px 80px -46px rgba(15, 32, 22, .62), 0 3px 10px -5px rgba(15, 32, 22, .22);

  /* faktura lnu — powtarzalny gradient, bez obrazków */
  --faktura:
    repeating-linear-gradient(90deg, rgba(33, 30, 23, .022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(33, 30, 23, .018) 0 1px, transparent 1px 4px);
  --faktura-ciemna:
    repeating-linear-gradient(90deg, rgba(240, 237, 226, .030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(240, 237, 226, .022) 0 1px, transparent 1px 4px);
}

/* --- 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: clip leczy przepełnienia pasm pełnej szerokości, nie psując sticky */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

body {
  margin: 0;
  background-color: var(--papier);
  background-image: var(--faktura);
  color: var(--atrament);
  font-family: var(--kroj-tekst);
  font-size: 1rem;
  line-height: 1.68;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

svg { max-width: 100%; }
/* ⚠⚠ pułapka „globalne strong,b{color}" — pogrubiamy wyłącznie wagą pisma */
strong, b { color: inherit; font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}
.pas--glebia :focus-visible, .pas--zamkniecie :focus-visible,
.hero :focus-visible, .naglowek :focus-visible, .stopka :focus-visible {
  outline-color: var(--sepia-jasna);
}

/* definicje kształtu okazu — nie zajmują miejsca i nic nie rysują same z siebie */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* skip-link — schowany, ale z PEŁNYM polem trafienia (bramka B7 mierzy prostokąt) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 190px; height: 48px; overflow: hidden;
  color: var(--atrament); clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 80;
  width: auto; height: auto; clip-path: none;
  display: flex; align-items: center;
  padding: .9rem 1.6rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  font-weight: 600; letter-spacing: .05em; text-decoration: none;
  border-block-end: 3px solid var(--sepia-jasna);
}

/* --- 3. RAMY UKŁADU -------------------------------------------------- */
.rama {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);   /* ⚠ pułapka 2: nigdy „padding: X 0" */
}

.kontener {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  position: relative;
  z-index: 1;
}
/* Kolumna prozy stoi POŚRODKU pasma, a szyny po bokach niosą ornament i cyfry.
   Dzięki temu kompozycja nie jest jednostronna (bramka B13). */
@media (min-width: 900px) {
  .kontener {
    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 { grid-column: pelna-start / pelna-end; }
  /* ⚠ JEDNA KRAWĘDŹ: tytuł hero zaczyna się dokładnie tam, gdzie proza widoku,
     i rośnie w prawo — inaczej powstają dwie różne lewe krawędzie strony. */
  .kontener--hero > .tytul { grid-column: tekst-start / pelna-end; }
}

/* --- 4. PASMA -------------------------------------------------------- */
.pas { position: relative; padding-block: var(--rytm); }
.pas > .kontener > * + * { margin-block-start: 1.05em; }

.pas--len {
  background-color: var(--papier);
  background-image: var(--faktura);
}
.pas--seledyn {
  background-color: var(--tlo-2);
  background-image: var(--faktura);
  border-block: 1px solid rgba(61, 107, 72, .22);
}
.pas--glebia, .pas--zamkniecie {
  --tlo: var(--glebia);
  --pismo: var(--na-ciemnym);
  --pismo-ciche: var(--seledyn-pismo);
  --naglowek-barwa: var(--papier);
  --link: var(--sepia-jasna);
  --etykieta: var(--sepia-jasna);
  --kreska: rgba(217, 169, 108, .38);
  --kreska-mocna: var(--sepia-jasna);
  --cyfra: rgba(191, 211, 190, .30);
  --orn: var(--seledyn-pismo);
  --przycisk-tlo: var(--sepia-jasna);
  --przycisk-pismo: var(--glebia-2);
  background-color: var(--glebia);
  background-image: var(--faktura-ciemna),
    radial-gradient(120% 130% at 12% 0%, rgba(61, 107, 72, .45) 0%, rgba(20, 41, 28, 0) 62%);
  color: var(--na-ciemnym);
  overflow: clip;
}
.pas--zamkniecie {
  background-color: var(--glebia-2);
  background-image: var(--faktura-ciemna),
    radial-gradient(130% 120% at 88% 8%, rgba(61, 107, 72, .40) 0%, rgba(15, 32, 22, 0) 60%);
  padding-block: calc(var(--rytm) * 1.15);
}
.pas--glebia .kontener > p, .pas--zamkniecie .kontener > p { color: var(--na-ciemnym); }
.pas--wstep { padding-block-start: 0; }
.pas--prowadzenie { padding-block: calc(var(--rytm) * .72); }

/* ⚠⚠ ZARZUT RECENZJI 3: pasmo zamknięcia Czytelni miało przy 1920 ok. 320 px
   wysokości na JEDNĄ linijkę tekstu — wyglądało na sekcję niedokończoną. Strona
   główna ma tu pełny komponent wezwania (etykieta + hasło antykwą + ogon), ale
   źródło Czytelni nie daje na to ani jednego znaku, a treści dopisać nie wolno.
   Pasmo schodzi więc do wysokości swojej zawartości i zmienia się w PASEK POWROTU. */
.pas--powrot { padding-block: clamp(2.1rem, 1.5rem + 1.5vw, 3.4rem); }
/* ⚠⚠ ZARZUT RECENZJI 1: gałąź przechodziła przez środek liter jedynego odsyłacza,
   a łodyga zlewała się z jego podkreśleniem. DWA niezależne zabezpieczenia:
   (1) ornament pasma jest zamaskowany do szyn bocznych, (2) sam odsyłacz stoi na
   NIEPRZEZROCZYSTEJ płytce powrotu — więc nawet gdyby maska gdzieś nie sięgnęła,
   ornament fizycznie nie ma jak dotknąć liter. Warunek „prostokąt odsyłacza czysty
   na KAŻDEJ szerokości" jest spełniony z geometrii, nie z ustawienia kadru. */
.pas__plansza--rynny {
  --rynna: linear-gradient(180deg, #000 0 20%, transparent 33% 67%, #000 80% 100%);
  -webkit-mask-image: var(--rynna); mask-image: var(--rynna);
}
@media (min-width: 900px) {
  .pas__plansza--rynny {
    --rynna: linear-gradient(90deg, #000 0 calc(50% - var(--kolumna) / 2 - 3rem),
      transparent calc(50% - var(--kolumna) / 2 - 1.2rem) calc(50% + var(--kolumna) / 2 + 1.2rem),
      #000 calc(50% + var(--kolumna) / 2 + 3rem) 100%);
  }
}
.odsylacz--plytka a {
  padding: .85rem clamp(1.1rem, 2.2vw, 1.9rem);
  min-height: 58px;
  background-color: var(--glebia);
  background-image: var(--faktura-ciemna);
  border: 1px solid var(--sepia-jasna);
  border-radius: var(--promien);
  box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .85);
  position: relative;
}
/* narożniki arkusza montażowego — ten sam detal co w ramie hero */
.odsylacz--plytka a::before, .odsylacz--plytka a::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 2px solid var(--sepia-jasna); pointer-events: none;
}
.odsylacz--plytka a::before { inset-block-start: 5px; inset-inline-start: 5px; border-width: 2px 0 0 2px; }
.odsylacz--plytka a::after  { inset-block-end: 5px; inset-inline-end: 5px; border-width: 0 2px 2px 0; }
.odsylacz--plytka a:hover { border-color: var(--na-ciemnym); }

/* ornament pasma zamknięcia — pod treścią (⚠ pułapka 4: ornament nad tekstem) */
.pas__plansza {
  position: absolute; inset: 0; z-index: 0;
  display: block; color: var(--orn); pointer-events: none;
}
.pas__plansza .plansza { width: 100%; height: 100%; display: block; }

/* Ornament szyny bocznej — wisi na paśmie, nie na oknie (⚠ pułapka 19).
   ⚠⚠ ZARZUT RECENZJI 8: przy 1920 obie szyny stały puste poza cyfrą działu,
   więc powyżej 1366 px rosły wyłącznie marginesy. PODZIAŁ RÓL JEST TERAZ TWARDY:
   szyna LEWA należy do ozdobnej cyfry działu, szyna PRAWA do ornamentu. Dzięki
   temu nic się nie nakłada, a ornament wchodzi do co najmniej co drugiego pasma
   prozy w każdym widoku. Próg zszedł z 1400 na 1300 px, żeby kompozycja rosła
   już na typowym laptopie, a nie dopiero na FHD. */
.pas--zbok { overflow: clip; }
.bok { display: none; }
@media (min-width: 1300px) {
  .bok {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    inset-block-start: 16%; height: 70%;
    width: min(220px, 14vw);
    /* prawa szyna: lustro dawnego położenia, liczone od PRAWEJ krawędzi okna.
       Prześwit między kolumną prozy a ornamentem to stałe 2,6 rem na każdej
       szerokości — nic nie zbliża się do wiersza. */
    inset-inline-end: calc(50% - var(--kolumna) / 2 - min(220px, 14vw) - 2.6rem);
    color: var(--orn); opacity: .95;
  }
  .bok--1 { inset-block-start: 22%; height: 62%; }
  .bok--2 { inset-block-start: 12%; height: 76%; }
  .bok__plansza { width: 100%; height: 100%; display: block; }
}

/* --- 5. TYPOGRAFIA --------------------------------------------------- */
.tytul {
  font-family: var(--kroj-naglowek);
  font-weight: 600;
  font-size: clamp(2.05rem, 1.28rem + 3.35vw, 5.2rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--naglowek-barwa);
  text-wrap: balance;
}
.tytul::before {
  content: ""; display: block;
  width: clamp(3.4rem, 6vw, 6.4rem); height: 2px;
  background: var(--kreska-mocna);
  margin-block-end: clamp(1rem, 2vw, 1.9rem);
}

.kontener > h2 {
  font-family: var(--kroj-naglowek);
  font-weight: 600;
  font-size: clamp(1.62rem, 1.12rem + 1.7vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -.006em;
  color: var(--naglowek-barwa);
  margin-block: 0 .1em;
  padding-block-start: clamp(.6rem, 1.4vw, 1.15rem);
  border-block-start: 1px solid var(--kreska);
  position: relative;
  counter-increment: dzial;
}
.pas > .kontener > h2 { margin-block-start: calc(var(--rytm) * .52); }
.pas > .kontener > h2:first-child { margin-block-start: 0; }

/* ⭐ ozdobna cyfra działu — RYSUJE JĄ LICZNIK ARKUSZA STYLÓW, więc nie ma jej
   w dokumencie i nie może zostać wzięta za informację ze źródła. Powtarza
   wyłącznie porządek, który w prozie i tak stoi słowami. */
@media (min-width: 1180px) {
  .kontener > h2::before {
    content: counter(dzial, decimal-leading-zero);
    position: absolute;
    inset-inline-end: calc(100% + 2.4rem);
    inset-block-start: -.06em;
    font-family: var(--kroj-naglowek);
    font-size: 2.9em; font-weight: 500; line-height: .92;
    letter-spacing: .01em;
    /* ⚠ antykwa daje domyślnie cyfry tekstowe — „01" czyta się wtedy jak „OI" */
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    color: var(--cyfra);
  }
}
/* ⚠⚠ ZARZUT RECENZJI 7: cyfra działu „01" stała ok. 150 px nad kartą „01" tej samej
   siatki — dwie różne jedynki w jednym kadrze czytały się jak pomyłka numeracji.
   Sekcja, po której idzie NUMEROWANA siatka, nie dostaje własnej cyfry ANI nie
   zwiększa licznika, więc numeracja pozostałych działów zostaje ciągła. */
.kontener > h2.dzial--cicho { counter-increment: none; }
.kontener > h2.dzial--cicho::before { content: none; }
.tresc { counter-reset: dzial; }

h3 {
  font-family: var(--kroj-naglowek);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.8rem);
  line-height: 1.25;
  color: var(--naglowek-barwa);
  margin-block: 1.6em .2em;
}

.kontener > p { margin-block: 0; color: var(--pismo); }
.pas > .kontener > h2 + p { margin-block-start: .9em; }

/* ⚠⚠ SPECYFICZNOŚĆ: „.kontener > p" (0,1,1) bije „.lid" (0,1,0) i ZEROWAŁO ten
   margines — lid dotykał tytułu na każdej szerokości, a żadna bramka tego nie widzi.
   Selektor musi mieć dwie klasy. */
.kontener > .lid {
  font-size: clamp(1.06rem, .96rem + .42vw, 1.42rem);
  line-height: 1.58;
  color: var(--pismo-ciche);
  /* ⚠ pułapka 5: antykwa o dużym świetle ma glify wyższe niż wiersz przy
     interlinii 1,1 — ogonek „y" schodzi poniżej pudełka nagłówka. */
  margin-block: clamp(2.2rem, 3.4vw, 3.6rem) 0;
  max-width: 34em;
  padding-inline-start: clamp(0px, 1vw, 1.1rem);
  border-inline-start: 2px solid rgba(217, 169, 108, .5);
}
.prowadzenie {
  font-family: var(--kroj-naglowek);
  font-size: clamp(1.28rem, 1.02rem + 1.05vw, 2.05rem);
  line-height: 1.36;
  color: var(--wiodaca-ciemna);
  padding-inline-start: clamp(1rem, 2vw, 1.9rem);
  border-inline-start: 3px solid var(--akcent);
}

/* odsyłacz w prozie — ⚠ pułapka 1: NIE MOŻE bić przycisku */
.kontener p a:not(.przycisk), .okaz__tekst a:not(.przycisk), .nota p a:not(.przycisk) {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--kreska-mocna);
}
.kontener p a:not(.przycisk):hover, .okaz__tekst a:not(.przycisk):hover {
  text-decoration-thickness: 2px;
  color: var(--akcent);
}
.pas--glebia .kontener p a:not(.przycisk):hover,
.pas--zamkniecie .kontener p a:not(.przycisk):hover { color: var(--na-ciemnym); }

/* --- 6. NAGŁÓWEK SERWISU --------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 40;
  background-color: var(--glebia);
  background-image: var(--faktura-ciemna),
    linear-gradient(100deg, rgba(61, 107, 72, .40) 0%, rgba(20, 41, 28, 0) 58%);
  border-block-end: 1px solid rgba(217, 169, 108, .30);
  box-shadow: 0 14px 34px -28px rgba(15, 32, 22, .9);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .2rem clamp(1rem, 3vw, 3.2rem);
  padding-block: clamp(.5rem, .9vw, .95rem);
}
/* sygnatura WYŁĄCZNIE typograficzna — bez listka, pieczątki i sygnetu.
   ⚠ Listek przy nazwie byłby dokładnie tą „grafiką stworzoną przez markę",
   którą podstrona o certyfikatach każe odróżniać od znaku jednostki (T8/T9). */
.znak {
  display: inline-flex; align-items: center; min-height: 46px;
  text-decoration: none; color: var(--na-ciemnym);
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.14rem, 1rem + .42vw, 1.66rem);
  letter-spacing: .015em;
}
.znak__tekst { position: relative; padding-block-end: .16em; color: var(--na-ciemnym); }
.znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 2.6em; height: 2px; background: var(--sepia-jasna);
  transition: width .3s ease;
}
.znak:hover .znak__tekst::after, .znak:focus-visible .znak__tekst::after { width: 100%; }

/* ⚠ menu bez JavaScriptu i BEZ <details> — zwykła lista, która się zawija.
   Dzięki temu nie występuje pułapka T7 (::details-content), a bramka B5b
   widzi wszystkie pozycje na każdej szerokości. */
.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(.2rem, 1.1vw, 1.5rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  display: inline-flex; align-items: center; min-height: 46px;
  padding-inline: .35rem; padding-block: .1rem;
  color: var(--seledyn-pismo); text-decoration: none;
  font-size: clamp(.86rem, .8rem + .16vw, 1rem);
  font-weight: 600; letter-spacing: .045em; text-transform: uppercase;
  position: relative;
}
.menu__link::after {
  content: ""; position: absolute; inset-block-end: 8px; inset-inline: .35rem;
  height: 2px; background: var(--sepia-jasna);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.menu__link:hover { color: var(--na-ciemnym); }
.menu__link:hover::after { transform: scaleX(1); }
.menu__link[aria-current="page"] { color: var(--na-ciemnym); }
.menu__link[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 720px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu { flex: 1 0 100%; justify-content: flex-start; }
  .menu__lista { justify-content: flex-start; gap: 0 .9rem; }
  .menu__link { padding-inline: 0; }
  .menu__link::after { inset-inline: 0; }
}

/* --- 7. HERO --------------------------------------------------------- */
.hero {
  position: relative; overflow: clip;
  --tlo: var(--glebia);
  --pismo: var(--na-ciemnym);
  --pismo-ciche: var(--seledyn-pismo);
  --naglowek-barwa: var(--papier);
  --link: var(--sepia-jasna);
  --kreska-mocna: var(--sepia-jasna);
  --orn: var(--seledyn-pismo);
  background-color: var(--glebia);
  background-image: var(--faktura-ciemna),
    radial-gradient(112% 96% at 76% 6%, rgba(61, 107, 72, .62) 0%, rgba(20, 41, 28, 0) 58%),
    linear-gradient(168deg, rgba(28, 56, 35, .85) 0%, rgba(15, 32, 22, .96) 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3.4rem, 2rem + 7vw, 9rem);
}
.hero__plansza {
  position: absolute; inset: 0; z-index: 0; display: block;
  color: var(--seledyn-pismo); pointer-events: none;
}
.hero__plansza .plansza { width: 100%; height: 100%; display: block; }
/* arkusz montażowy — podwójna ramka wpisana w pasmo */
.hero__rama {
  position: absolute; z-index: 0; pointer-events: none;
  inset: clamp(8px, 2.2vw, 34px);
  border: 1px solid rgba(217, 169, 108, .34);
  box-shadow: inset 0 0 0 5px rgba(15, 32, 22, .0), inset 0 0 0 6px rgba(191, 211, 190, .14);
}
.hero__rama::before, .hero__rama::after {
  content: ""; position: absolute; width: 26px; height: 26px;
  border: 2px solid var(--sepia-jasna);
}
.hero__rama::before { inset-block-start: -1px; inset-inline-start: -1px; border-width: 2px 0 0 2px; }
.hero__rama::after  { inset-block-end: -1px; inset-inline-end: -1px; border-width: 0 2px 2px 0; }
.hero .lid { max-width: 33em; }
.hero--start { padding-block: clamp(4rem, 2.2rem + 9vw, 11.5rem); }
.hero--dzial2 { background-image: var(--faktura-ciemna),
    radial-gradient(108% 92% at 22% 4%, rgba(61, 107, 72, .58) 0%, rgba(20, 41, 28, 0) 56%),
    linear-gradient(172deg, rgba(28, 56, 35, .82) 0%, rgba(15, 32, 22, .96) 100%); }
.hero--czytelnia { background-image: var(--faktura-ciemna),
    radial-gradient(120% 110% at 50% 0%, rgba(61, 107, 72, .70) 0%, rgba(20, 41, 28, 0) 64%),
    linear-gradient(180deg, rgba(31, 62, 39, .9) 0%, rgba(15, 32, 22, .96) 100%); }
/* ⚠⚠ ZARZUT RECENZJI 2: rząd pięciu prasowanych łodyg biegł POD akapitem lidu
   (1024–1920 px) i obrysy liści przecinały wiersze. Łodygi schodzą do ŁAWY —
   pasa o sztywnej wysokości przy dolnej krawędzi hero — a hero dostaje o tyle
   większe wypełnienie dolne. Ornament nie ma więc jak dotknąć wiersza na ŻADNEJ
   szerokości: rozdziela je geometria, nie szczęśliwy przypadek kadru. */
:root { --lawa: clamp(122px, 15vw, 258px); }
.hero--czytelnia { padding-block-end: calc(var(--lawa) + clamp(2rem, 1.2rem + 2.4vw, 4rem)); }
.hero__lawa {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 0;
  display: block; height: var(--lawa);
  color: var(--seledyn-pismo); pointer-events: none;
}
.hero__lawa .plansza { width: 100%; height: 100%; display: block; }
.hero--wpis .tytul { font-size: clamp(1.86rem, 1.16rem + 2.85vw, 4.3rem); }
.hero--arkusz { --orn: var(--sepia-jasna); }

/* --- 8. PŁYTA (arkusz nachodzący na hero) ---------------------------- */
.plyta {
  /* ⚠ wypełnienie i odstęp kolumn ŻYJĄ W ZMIENNYCH, bo sekcja 17 rysuje z nich
     włos dzielący arkusz — powtórzony clamp rozjechałby się przy pierwszej zmianie */
  --plyta-pad: clamp(1.7rem, 1rem + 2.6vw, 3.6rem);
  --plyta-gap: clamp(1.6rem, 3vw, 3.4rem);
  background-color: var(--papier-karta);
  background-image: var(--faktura);
  border: 1px solid rgba(108, 101, 83, .35);
  box-shadow: var(--cien-plyta);
  padding: var(--plyta-pad);
  position: relative; z-index: 2;
}
.plyta--wstep { margin-block-start: clamp(-4.6rem, -2rem - 3vw, -1.8rem); }
/* ⚠⚠ ZARZUT RECENZJI 4: płyta miała max-width 62rem, a akapit w niej 116 znaków
   w wierszu — przy 86 znakach w prozie wszystkich pasm. Najdłuższy i najgorzej
   czytelny wiersz w serwisie stał w najbardziej eksponowanym miejscu, tuż pod hero.
   Płyta ZOSTAJE szeroka (jest arkuszem nachodzącym na hero), ale tekst dostaje
   własną szpaltę o łamie prozy, a odzyskany pas po prawej — przypięty okaz.
   Łam podajemy w rem, nie w ch (⚠ pułapka 9). */
.plyta__tekst { max-width: 45rem; }
.plyta__tekst > p { margin-block: 0; font-size: clamp(1.02rem, .96rem + .3vw, 1.25rem); }
.plyta__tekst > p + p, .plyta__tekst > * + * { margin-block-start: 1.2em; }
.plyta__okaz { display: none; }
.plyta::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(3rem, 8vw, 6.5rem); height: 4px; background: var(--akcent);
}
@media (min-width: 900px) {
  .kontener > .plyta { grid-column: pelna-start / pelna-end; max-width: 62rem; margin-inline: auto; }
}
@media (min-width: 940px) {
  .plyta {
    display: grid; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) clamp(118px, 11vw, 186px);
    column-gap: var(--plyta-gap);
  }
  .plyta__okaz {
    display: block; color: var(--wiodaca); align-self: stretch;
    border-inline-start: 1px solid rgba(61, 107, 72, .28);
    padding-inline-start: clamp(1rem, 1.8vw, 1.8rem);
    min-height: 240px;
  }
  .plyta__okaz .plansza--plyta { width: 100%; height: 100%; display: block; }
}

/* --- 9. KARTY OKAZÓW -------------------------------------------------- */
.okazy-pole { margin-block-start: clamp(1.8rem, 3vw, 3rem); }
.okazy {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 1.8vw, 1.9rem);
  counter-reset: okaz;
}
@media (min-width: 760px)  { .okazy--2, .okazy--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .okazy--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ⚠⚠ ZARZUT RECENZJI 5: na 768 i 1024 px trzy karty układały się w dwie kolumny
   i pod kartą 03 zostawała pusta połowa rzędu — dziura wielkości całej karty.
   Ostatnia karta nieparzystej siatki przechodzi na obie kolumny i dostaje układ
   POZIOMY (znak i kreska metryczki w węższej szpalcie, tekst obok), więc nie jest
   rozciągniętą kartą pionową, tylko własną, świadomą odmianą komponentu. */
@media (min-width: 760px) and (max-width: 1179.98px) {
  .okazy--3 > .okaz:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid; align-items: start;
    grid-template-columns: clamp(74px, 9vw, 116px) minmax(0, 1fr);
    column-gap: clamp(1.2rem, 2.6vw, 2.4rem);
  }
  .okazy--3 > .okaz:last-child:nth-child(odd) > .okaz__znak { grid-column: 1; grid-row: 1; }
  .okazy--3 > .okaz:last-child:nth-child(odd) > .okaz__kreska {
    grid-column: 1; grid-row: 2; margin-block: .85rem 0;
  }
  .okazy--3 > .okaz:last-child:nth-child(odd) > .okaz__tekst { grid-column: 2; grid-row: 1 / span 2; }
}
.okaz {
  counter-increment: okaz;
  position: relative; overflow: hidden;
  background-color: var(--papier-karta);
  /* taśma montażowa w lewym górnym narożniku — rysowana gradientem, bez obrazka */
  background-image:
    linear-gradient(135deg, rgba(138, 75, 34, .32) 0 46%, rgba(138, 75, 34, 0) 46%),
    var(--faktura);
  background-repeat: no-repeat, repeat, repeat;
  background-size: 34px 34px, auto, auto;
  background-position: top -1px left -1px, 0 0, 0 0;
  border: 1px solid rgba(108, 101, 83, .38);
  box-shadow: var(--cien-karta);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
  padding-block-start: clamp(2.5rem, 1.6rem + 2.4vw, 3.9rem);
}
/* podwójna ramka arkusza — wewnętrzny włos w barwie zieleni */
.okaz::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(61, 107, 72, .22);
}
/* numer okazu — ornament rysowany licznikiem, nie treść dokumentu */
.okaz::before {
  content: counter(okaz, decimal-leading-zero);
  position: absolute; inset-block-start: .35rem; inset-inline-end: .9rem;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.4rem); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: rgba(138, 75, 34, .3);
}
.okaz__znak {
  display: block; width: clamp(38px, 3.4vw, 54px); height: auto;
  color: var(--wiodaca);
}
/* kreska metryczki — linia opisu okazu biegnąca od znaku rośliny */
.okaz__kreska, .zapowiedz__kreska {
  display: block; height: 1px; margin-block: .85rem 1.1rem;
  background: linear-gradient(90deg, var(--wiodaca) 0 22%, rgba(108, 101, 83, .32) 22% 100%);
}
.okaz__znak .znaczek { width: 100%; height: auto; display: block; }
.okaz__tekst {
  margin: 0; color: var(--atrament);
  font-size: clamp(.96rem, .92rem + .18vw, 1.08rem);
  line-height: 1.6;
}

/* --- 10. NOTA -------------------------------------------------------- */
.nota {
  /* ⚠ jak w płycie: wypełnienie w zmiennej, bo sekcja 17 cofa nim arkusz noty
     dokładnie o własne pole, żeby WIERSZ noty stanął w łamie prozy */
  --nota-pad: clamp(1.2rem, .9rem + 1.4vw, 2.2rem);
  background-color: var(--wiodaca-jasna);
  border-inline-start: 4px solid var(--akcent);
  border-block: 1px solid rgba(61, 107, 72, .24);
  border-inline-end: 1px solid rgba(61, 107, 72, .24);
  padding: var(--nota-pad);
}
.nota p {
  margin: 0; color: var(--atrament);
  font-size: clamp(.96rem, .92rem + .2vw, 1.1rem);
}
@media (min-width: 900px) { .kontener > .nota { grid-column: pelna-start / pelna-end; max-width: 58rem; margin-inline: auto; } }

/* --- 11. ODSYŁACZE, PRZYCISKI ---------------------------------------- */
.przejscie { margin-block-start: clamp(1.5rem, 2.6vw, 2.6rem) !important; }
.cta { margin-block-start: clamp(1.7rem, 3vw, 3rem) !important; }

.przycisk {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 52px; padding: .55rem clamp(1.2rem, 2.4vw, 2.1rem);
  background: var(--przycisk-tlo); color: var(--przycisk-pismo);
  text-decoration: none; font-weight: 600; letter-spacing: .035em;
  font-size: clamp(.94rem, .9rem + .18vw, 1.05rem);
  text-transform: uppercase;
  border-radius: var(--promien);
  box-shadow: 0 16px 30px -22px rgba(15, 32, 22, .8);
  transition: transform .22s ease, background-color .22s ease;
}
.przycisk .strzalka { width: 1.15em; height: 1.15em; flex: none; }
.przycisk:hover { transform: translateX(3px); background: var(--akcent); color: var(--na-akcencie); }
.pas--glebia .przycisk:hover, .pas--zamkniecie .przycisk:hover, .hero .przycisk:hover {
  background: var(--na-ciemnym); color: var(--glebia-2);
}
.przycisk--cichy {
  background: transparent; color: var(--wiodaca-ciemna);
  border: 1px solid var(--wiodaca); box-shadow: none;
  min-height: 46px; padding-block: .35rem;
}
.przycisk--cichy:hover { background: var(--wiodaca-ciemna); color: var(--na-wiodacej); border-color: var(--wiodaca-ciemna); }

.odsylacz a, .zapowiedz__wstep a {
  display: inline-flex; align-items: center; gap: .8rem;
  min-height: 46px;
  color: var(--link); text-decoration: none;
  font-weight: 600; letter-spacing: .03em;
  font-size: clamp(.98rem, .94rem + .2vw, 1.12rem);
}
.odsylacz__kreska {
  display: block; width: clamp(1.6rem, 3vw, 2.8rem); height: 2px;
  background: var(--kreska-mocna); flex: none;
  transition: width .25s ease;
}
.odsylacz a:hover .odsylacz__kreska, .zapowiedz__wstep a:hover .odsylacz__kreska {
  width: clamp(2.4rem, 4.4vw, 4rem);
}
.odsylacz a:hover, .zapowiedz__wstep a:hover { color: var(--akcent); }
.pas--glebia .odsylacz a:hover, .pas--zamkniecie .odsylacz a:hover { color: var(--na-ciemnym); }

/* --- 12. ZAMKNIĘCIE STRONY GŁÓWNEJ ----------------------------------- */
/* ⚠ Był tu komponent „.wezwanie" (etykieta + hasło antykwą + ogon „— prowadzi
   do …"). Powstał dlatego, że źródło zapisało to pole jako „Końcowe wezwanie do
   działania: …", czego czytnik serii nie rozpoznawał — cała DYREKTYWA REDAKCYJNA
   szła więc na stronę jako proza i czytelnik widział w domykającym pasie nazwę
   pola, strzałkę i ścieżkę. Źródło jest poprawione na PRZYCISK:, więc pas
   zamknięcia używa teraz ZWYKŁEGO „.przycisk" — tego samego, co reszta makiety;
   na ciemnym pasie bierze on barwy z „.pas--zamkniecie" (sepia jasna na głębi).
   Reguł „.wezwanie*" nie zostawiam: nie ma już widoku, który by ich używał. */

/* --- 13. CZYTELNIA — karty zielnika ---------------------------------- */
.zapowiedzi-pole { margin-block-start: clamp(1.8rem, 3vw, 3.2rem); }
.lista-wpisow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.2rem, 2.2vw, 2.2rem);
  counter-reset: okaz;
}
@media (min-width: 1080px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ⚠⚠ ZARZUT RECENZJI 6: jedna karta niosła DWA tytuły tego samego wpisu i TRZY
   odsyłacze do tego samego pliku, a wezwanie stało w połowie karty — czytało się
   to jak sklejenie dwóch zapowiedzi. Karta ma teraz dwie jednoznaczne strefy:
   METRYCZKĘ okazu (barwna plakietka u góry: nazwa karty, jej opis i zdanie
   wezwania) oraz OPIS (jeden tytuł, jeden akapit) zamknięty JEDNYM wezwaniem
   przy dolnej krawędzi. Tekst źródła zostaje co do znaku. */
.zapowiedz {
  counter-increment: okaz;
  --karta-bok: clamp(1.5rem, 1rem + 1.8vw, 2.6rem);
  --karta-gora: clamp(2.6rem, 1.7rem + 2.4vw, 4rem);
  position: relative; display: flex; flex-direction: column;
  background-color: var(--papier-karta);
  background-image: var(--faktura);
  border: 1px solid rgba(108, 101, 83, .38);
  box-shadow: var(--cien-karta);
  padding: var(--karta-gora) var(--karta-bok) var(--karta-bok);
  overflow: hidden;
}
/* metryczka bleeduje dokładnie do linii wewnętrznej ramki arkusza (inset 7px) */
.zapowiedz__metryczka {
  margin-block-start: calc(8px - var(--karta-gora));
  margin-inline: calc(8px - var(--karta-bok));
  margin-block-end: clamp(1.3rem, 1rem + .9vw, 2rem);
  padding: calc(var(--karta-gora) - 8px) calc(var(--karta-bok) - 8px) calc(var(--karta-bok) * .82);
  /* PLAKIETKA ZIELNIKA — ciemna tektura, na której drukuje się opis okazu.
     Barwna, nie biała: to ona daje karcie masę koloru i odróżnia metryczkę
     od opisu jednym spojrzeniem, bez czytania. Kontrasty policzone niżej. */
  background-color: var(--panel);
  /* ⚠ PUŁAPKA: „--faktura-ciemna" to DWA gradienty, więc warstw jest cztery, a nie
     trzy. Przy trzech wartościach listy repeat/size/position cyklują się i taśma
     montażowa (44 px) dostawała rozmiar „auto", czyli klin przez całą plakietkę.
     Wartości wypisujemy więc dla KAŻDEJ z czterech warstw osobno. */
  background-image:
    linear-gradient(135deg, rgba(217, 169, 108, .34) 0 46%, rgba(217, 169, 108, 0) 46%),
    radial-gradient(120% 150% at 88% 0%, rgba(61, 107, 72, .55) 0%, rgba(28, 56, 35, 0) 62%),
    var(--faktura-ciemna);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 44px 44px, auto, auto, auto;
  background-position: top left, 0 0, 0 0, 0 0;
  border-block-end: 2px solid var(--sepia-jasna);
}
.zapowiedz__metryczka .zapowiedz__nazwa { color: var(--papier); }   /* 11,14:1 */
.zapowiedz__metryczka .zapowiedz__znak { color: var(--seledyn-pismo); }
.zapowiedz__haslo {
  margin: clamp(.9rem, 1.6vw, 1.3rem) 0 0;
  font-family: var(--kroj-naglowek); font-style: italic;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.24rem); line-height: 1.3;
  color: var(--sepia-jasna);                                        /* 6,00:1 */
}
.zapowiedz::before {
  content: counter(okaz, decimal-leading-zero);
  position: absolute; inset-block-start: .3rem; inset-inline-end: .9rem;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.4rem); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  /* numer leży na ciemnej plakietce metryczki — barwa sepii jasnej, nie sepii */
  color: rgba(217, 169, 108, .40);
}
.zapowiedz::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(61, 107, 72, .22);
}
.zapowiedz__znak { display: block; width: clamp(38px, 3.4vw, 50px); color: var(--wiodaca); margin-block-end: .9rem; }
.zapowiedz__metryczka .zapowiedz__opis { color: var(--seledyn-pismo); }  /* 8,10:1 */
.zapowiedz__znak .znaczek { width: 100%; height: auto; display: block; }
/* ⚠ Były tu „.etyk" i „.zapowiedz__etyk" — plakietka drukowała nazwy PÓL
   źródła („KARTA WPISU:", „Opis:"), bo czytnik serii nie rozpoznawał wtedy
   tego zapisu i cała karta szła na stronę jako proza. Źródło jest
   poprawione na KARTA:/TYTUŁ:/OPIS:/LINK:, więc metryczka pokazuje samą
   treść karty: nazwę okazu, opis i zdanie wezwania. Reguł nie zostawiam —
   nie ma już widoku, który by ich używał. */
.zapowiedz__nazwa {
  display: block; margin: 0 0 .55rem;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.55rem); line-height: 1.2;
  color: var(--wiodaca-ciemna);
}
.zapowiedz__opis {
  margin: 0; color: var(--atrament-cichy);
  font-size: clamp(.92rem, .9rem + .16vw, 1rem); line-height: 1.55;
}
.zapowiedz__tytul {
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.28rem, 1.08rem + .7vw, 1.85rem);
  line-height: 1.18; letter-spacing: -.004em;
  color: var(--wiodaca-ciemna);
  margin: 0;
}
.zapowiedz__tekst {
  margin: .7rem 0 0; color: var(--atrament);
  font-size: clamp(.94rem, .92rem + .16vw, 1.02rem); line-height: 1.6;
}
.zapowiedz__wiecej {
  margin: 0 !important; margin-block-start: auto !important;
  padding-block-start: clamp(1.4rem, 2.4vw, 2.2rem);
}

/* --- 14. ARKUSZ SYSTEMU (specimen) ----------------------------------- */
.probki-pole, .skala-pole { margin-block-start: clamp(1.6rem, 2.6vw, 2.6rem); }
.probki { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 860px)  { .probki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .probki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.probka {
  background-color: var(--papier-karta);
  border: 1px solid rgba(108, 101, 83, .34);
  padding: .9rem 1rem 1rem;
}
.probka__pole {
  display: block; height: 54px; margin-block-end: .7rem;
  border: 1px solid rgba(108, 101, 83, .5);
}
.probka__pole--ciemna { border-color: rgba(240, 237, 226, .35); }
.probka__nazwa {
  display: block; font-weight: 600; color: var(--wiodaca-ciemna);
  font-size: .96rem; letter-spacing: .02em;
}
.probka__hex { color: var(--akcent); font-weight: 600; letter-spacing: .04em; }
.probka__opis {
  display: block; margin-block-start: .35rem;
  color: var(--atrament-cichy); font-size: .84rem; line-height: 1.5;
}
.skala { margin: 0 0 .7rem; color: var(--atrament); }
.skala--1 { font-family: var(--kroj-naglowek); font-size: clamp(2.4rem, 1.6rem + 3vw, 4.6rem); line-height: 1.05; font-weight: 600; color: var(--wiodaca-ciemna); }
.skala--2 { font-family: var(--kroj-naglowek); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.7rem); line-height: 1.15; font-weight: 600; color: var(--wiodaca-ciemna); }
.skala--3 { font-family: var(--kroj-naglowek); font-size: clamp(1.25rem, 1rem + .8vw, 1.8rem); font-weight: 600; color: var(--akcent); }
.skala--4 { font-size: 1rem; }
.skala--5 { font-size: .86rem; letter-spacing: .16em; text-transform: uppercase; color: var(--atrament-cichy); font-weight: 600; }
.okno-orn {
  margin-block-start: clamp(1.6rem, 2.6vw, 2.6rem);
  background-color: var(--panel);
  border: 1px solid rgba(191, 211, 190, .3);
  color: var(--seledyn-pismo);
  padding: clamp(.6rem, 1.4vw, 1.4rem);
}
.plansza--okno { width: 100%; height: clamp(180px, 24vw, 380px); display: block; }

/* --- 15. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: clip;
  background-color: var(--glebia-2);
  background-image: var(--faktura-ciemna),
    radial-gradient(120% 140% at 20% 100%, rgba(61, 107, 72, .40) 0%, rgba(15, 32, 22, 0) 62%);
  color: var(--na-ciemnym);
  border-block-start: 2px solid var(--sepia-jasna);
  padding-block: clamp(2.6rem, 1.8rem + 3vw, 5rem);
}
.stopka__orn {
  position: absolute; inset-inline: 0; inset-block-end: 0; height: 62%;
  z-index: 0; color: var(--seledyn-pismo); pointer-events: none; display: block;
}
.stopka__plansza { width: 100%; height: 100%; display: block; }
.stopka__pas {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: clamp(1.4rem, 3vw, 3rem);
}
.stopka__znak {
  margin: 0; font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.2rem, 1rem + .6vw, 1.8rem);
  color: var(--na-ciemnym); letter-spacing: .015em;
  padding-block-end: .35rem;
  border-block-end: 2px solid var(--sepia-jasna);
}
.stopka__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--seledyn-pismo); text-decoration: none;
  font-size: clamp(.9rem, .88rem + .14vw, 1rem); font-weight: 600; letter-spacing: .03em;
}
.stopka__menu a:hover { color: var(--sepia-jasna); text-decoration: underline; text-underline-offset: .22em; }
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding-inline: 1.2rem;
  color: var(--na-ciemnym); text-decoration: none;
  border: 1px solid var(--obwodka-ciemna);
  border-radius: var(--promien);
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  font-size: clamp(.8rem, .78rem + .12vw, .9rem);
}
.do-gory .strzalka { width: 1.1em; height: 1.1em; flex: none; }
.do-gory:hover { border-color: var(--sepia-jasna); color: var(--sepia-jasna); }

/* --- 16. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .przycisk:hover { transform: none; }
}
@media print {
  .naglowek, .stopka__orn, .hero__plansza, .pas__plansza, .bok, .omin { display: none !important; }
  body, .pas, .hero { background: #fff !important; color: #000 !important; }
  .hero, .pas--glebia, .pas--zamkniecie { --naglowek-barwa: #000; --pismo: #000; --pismo-ciche: #333; }
  .okaz, .zapowiedz, .plyta { box-shadow: none; break-inside: avoid; }
}

/* --- 17. ARKUSZ SZEROKI — kompozycja powyżej 1500 px -----------------
   ⭐⭐ ZASADA UŻYTKOWNIKA: makieta ma ROSNĄĆ powyżej 1366 px. Dotąd rosła
   WYŁĄCZNIE przez „html{font-size}": pismo i kolumna robiły się większe, ale
   UKŁAD zostawał ten sam — jedna szpalta pośrodku i dwie puste szyny po ~380 px.
   Pomiar z 2026-09-01 (1920 px): najszerszy moduł treści zostawiał 90 px
   marginesu (w celu), ale proza PŁYTY WSTĘPU miała 898 px, a proza NOTY
   1106 px — ok. 90 i 110 znaków w wierszu przy 78 znakach w prozie pasm.
   Najdłuższe i najgorzej czytelne wiersze serwisu stały w miejscach
   najbardziej eksponowanych.

   ⚠ Zwężenie samego wiersza NIE JEST rozwiązaniem: zamieniłoby złą prozę na
   większe puste pole. Odzyskana szerokość dostaje tu ROLE:
     • NAGŁÓWEK DZIAŁU schodzi z kolumny prozy do LEWEJ SZYNY („barek"), a
       ozdobna cyfra działu — dotąd znak wodny wiszący obok tekstu — wychodzi
       spod prozy i staje się nagłówkiem barku. Strona ma odtąd DWIE kolumny
       treści zamiast jednej szpalty i dwóch pustych pól.
     • PŁYTA WSTĘPU rozciąga się na całą szerokość arkusza (krawędź w krawędź
       z siatkami kart niżej), jej proza schodzi do łamu kolumny, a odzyskany
       pas po prawej dostaje OKAZ I PRZYCISK: wezwanie stoi OBOK prozy, nie pod
       nią, i po raz pierwszy ma własne pole zamiast ogona akapitu.
     • NOTA przestaje być pasem szerszym od wszystkiego dookoła: jej wiersz
       wyrównuje się co do piksela z kolumną prozy, a arkusz noty wychodzi poza
       nią dokładnie o własne wypełnienie — czyli zostaje wyróżnieniem, a nie
       drugą, szerszą szpaltą.
     • SIATKA PRÓBEK arkusza systemu idzie z trzech kolumn na cztery.

   ⚠ Poniżej 1500 px NIC się nie zmienia — to nie jest przebudowa mobilna
     ani zmiana układu na 1366 px.
   ⚠ Kolumna prozy MUSI rosnąć w pikselach 1366 -> 1920 (kontrakt bramki B13):
     38rem przy korzeniu 18,78 px = 714 px, 35rem przy korzeniu 20,72 px
     = 725 px. Rośnie — ale zapas jest mały, więc NIE schodzić poniżej 35rem.
   ⚠⚠ PUŁAPKA: „body{overflow-wrap:break-word}" łamie w wąskiej szynie nagłówek
     W ŚRODKU SŁOWA i żadna bramka tego nie widzi. Barek dostaje więc
     „overflow-wrap:normal", a stopień pisma jest dobrany POMIAREM: najdłuższe
     słowo serwisu („Dermatologicznie") ma 7,5 × stopień pisma, szyna ma
     338 px przy 1500 px i 411 px przy 1920 px, więc stopień nie może przekroczyć
     ~39 px przy 1500 px. Stąd clamp poniżej — przy zmianie sprawdzić od nowa.
   -------------------------------------------------------------------- */
@media (min-width: 1500px) {
  :root {
    --kolumna: 35rem;
    --barek-odstep: clamp(1.9rem, 2.4vw, 2.6rem);
  }

  /* 17a. BAREK — nagłówek działu w lewej szynie ---------------------- */
  .pas > .kontener > h2 {
    grid-column: pelna-start / tekst-start;
    text-align: end;
    padding-inline-end: var(--barek-odstep);
    font-size: clamp(1.95rem, 1.15rem + .85vw, 2.3rem);
    line-height: 1.14;
    overflow-wrap: normal;          /* ⚠⚠ patrz pułapka w nagłówku sekcji */
    hyphens: auto;
    border-block-start: 0;
  }
  /* kreska otwierająca dział biegnie przez CAŁY arkusz, nie tylko przez barek:
     szyna + kolumna + szyna = 200% szerokości barku + łam kolumny */
  .pas > .kontener > h2::after {
    content: ""; position: absolute; pointer-events: none;
    inset-block-start: 0; inset-inline-start: 0;
    width: calc(200% + var(--kolumna)); height: 1px;
    background: var(--kreska);
  }
  /* cyfra działu: z pozycji bezwzględnej obok tekstu w NAGŁÓWEK barku */
  .kontener > h2::before {
    position: static;
    display: block;
    font-size: 2.05em;
    line-height: .86;
    margin-block-end: .16em;
  }
  /* ⚠ WYJĄTEK: nagłówek, po którym idzie od razu komponent szeroki (siatka kart),
     w barku zostałby SAM, z pustą kolumną prozy obok. Taki nagłówek zostaje nad
     siatką i zachowuje swój dotychczasowy stopień oraz cyfrę przy krawędzi. */
  .pas > .kontener > h2:has(+ .szeroki) {
    grid-column: tekst-start / tekst-end;
    text-align: start;
    padding-inline-end: 0;
    font-size: clamp(1.62rem, 1.12rem + 1.7vw, 2.75rem);
    line-height: 1.16;
    overflow-wrap: break-word;
    border-block-start: 1px solid var(--kreska);
  }
  .pas > .kontener > h2:has(+ .szeroki)::after { content: none; }
  .pas > .kontener > h2:has(+ .szeroki)::before {
    position: absolute;
    inset-inline-end: calc(100% + 2.4rem);
    inset-block-start: -.06em;
    font-size: 2.9em; line-height: .92; margin-block-end: 0;
  }
  /* pierwszy wiersz prozy startuje na tej samej wysokości co barek — inaczej
     nagłówek w szynie i akapit obok stoją na dwóch różnych liniach */
  .pas > .kontener > h2 + p {
    margin-block-start: 0;
    padding-block-start: clamp(.6rem, 1.4vw, 1.15rem);
  }
  .pas > .kontener > h2:has(+ .szeroki) + p { padding-block-start: 0; }

  /* 17b. PŁYTA WSTĘPU — arkusz na pełną szerokość, wezwanie obok prozy -- */
  .kontener > .plyta { max-width: none; }
  .plyta {
    --plyta-gap: clamp(2.6rem, 4vw, 4.8rem);
    grid-template-columns: minmax(0, var(--kolumna)) minmax(0, 1fr);
    align-items: start;
  }
  /* włos dzieli arkusz na całej wysokości — także obok przycisku, więc nie
     urywa się w połowie płyty tak, jak urywała się obwódka samego okazu */
  .plyta::before {
    content: ""; position: absolute; pointer-events: none;
    inset-block: var(--plyta-pad);
    inset-inline-start: calc(var(--plyta-pad) + var(--kolumna) + var(--plyta-gap) / 2);
    width: 1px; background: rgba(61, 107, 72, .28);
  }
  /* ⚠ „display:contents" wypuszcza akapity płyty na siatkę PŁYTY, żeby wezwanie
     mogło stanąć w drugiej kolumnie bez ruszania kolejności w dokumencie */
  .plyta > .plyta__tekst { display: contents; }
  .plyta > .plyta__tekst > p:not(.cta) { grid-column: 1; grid-row: 1; max-width: none; }
  .plyta > .plyta__tekst > p.cta {
    grid-column: 2; grid-row: 2;
    padding-inline-start: clamp(1.2rem, 2vw, 2.2rem);
  }
  .plyta__okaz {
    grid-column: 2; grid-row: 1;
    /* okaz i przycisk stoją na JEDNEJ krawędzi — prawa kolumna płyty jest
       wtedy własną szpaltą, a nie dwoma elementami rzuconymi obok siebie */
    display: flex; align-items: center; justify-content: flex-start;
    border-inline-start: 0;         /* włos rysuje teraz .plyta::before */
    padding-inline-start: clamp(1.2rem, 2vw, 2.2rem);
    min-height: 0;
  }
  /* ⚠⚠ PUŁAPKA ZŁAPANA NA ZRZUCIE: „height:100%" w rodzicu o wysokości AUTO
     znaczy „auto", więc rysunek brał wysokość z proporcji viewBox — po
     poszerzeniu szyny z 186 na 579 px urósł do 868 px i płyta zrobiła się
     dwa razy wyższa od własnej prozy. Wysokość okazu podajemy więc WPROST,
     a szerokość liczy z niej przeglądarka. */
  .plyta__okaz .plansza--plyta {
    width: auto; height: clamp(240px, 16vw, 307px); max-width: 100%;
  }

  /* 17c. NOTA — wiersz w łamie prozy, arkusz o wypełnienie szerszy ----- */
  .kontener > .nota {
    grid-column: tekst-start / tekst-end;
    max-width: none;
    /* + 4px po stronie startu: tyle ma kreska sepii, żeby TEKST, a nie krawędź
       arkusza, stanął dokładnie w łamie kolumny */
    margin-inline-start: calc(-1 * var(--nota-pad) - 4px);
    margin-inline-end: calc(-1 * var(--nota-pad));
  }

  /* 17d. PRÓBKI ARKUSZA SYSTEMU — czwarta kolumna --------------------- */
  .probki { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}