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

   Idea: serwis czyta KOSMETYK OD STRONY ETYKIETY, więc cała strona jest
   etykietą: butelkowa zieleń nadruku, lniane pasmo papieru, miedziana
   kreska wykrojnika. Wykazy ze źródła składamy jak pole INCI — cienka
   ramka, numeracja maszynowa, siatka wierszy. Pasma idą przez pełną
   szerokość okna, płyty leżą na nich z miękkim cieniem.

   ⚠ Kolejność ważna dla pułapek: reguły ogólne PRZED komponentami, a każdy
   komponent stojący w prozie ma prefiks „.tresc", żeby wygrać
   specyficzność z „.tresc p a" (0-2-1).
   ⚠⚠ NIE definiujemy ::before/::after na „main.tresc" — bramka B13c czyta
   inset-inline-start tego pseudoelementu i uznaje ornament kotwiczony do
   okna za wchodzący pod kolumnę tekstu. Ornamenty wieszamy na pasmach.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne — len i papier etykiety */
  --papier:          #F4F1E7;   /* len — podłoże wszystkich widoków */
  --papier-karta:    #FFFFFF;   /* płyta */
  --tlo-2:           #E7E2D2;   /* len ciemniejszy — pasmo drugoplanowe */
  --len-3:           #EFEADB;   /* len pośredni */
  --wiodaca-jasna:   #DCE7DF;   /* plakietka zielona */
  /* ⚠ RECENZJA: łososiowe pole źródła było najtańszym elementem makiety.
     Teraz pole źródła stoi na papierze etykiety, a rolę akcentu przejmuje
     miedziana krawędź i kreska pod adresem. */
  --chip-zrodlo:     #F1EEE1;   /* pole źródła — papier, nie łosoś */

  /* pismo */
  --atrament:        #16211C;   /* zielono-czarny atrament nadruku */
  --atrament-cichy:  #45534B;

  /* barwa wiodąca — zieleń butelkowa */
  --wiodaca:         #1D5A46;   /* powierzchnie i kreski */
  --wiodaca-ciemna:  #14442F;   /* nagłówki i odsyłacze na jasnym */
  --akcent:          #8A4318;   /* miedź — akcent tekstowy na jasnym */
  --miedz-jasna:     #E3A876;   /* miedź rozjaśniona — akcent na ciemnym */
  --linia:           #74827A;
  --linia-cicha:     #D9D3C1;
  --na-wiodacej:     #FFFFFF;
  --na-akcencie:     #FFFFFF;

  /* powierzchnie ciemne — szkło butelki */
  --butelka:         #0D2C23;
  --butelka-2:       #071B15;
  --karta-ciemna:    #14392E;
  --na-ciemnym:      #F1EEE3;
  --len-cichy:       #E3DFCF;   /* lid na ciemnym */
  --stopka-tekst:    #CFDCD2;

  /* ornamenty — wyłącznie dekoracja, nigdy nośnik informacji */
  --orn-zielen:      rgba(29, 90, 70, .10);
  --orn-zielen-moc:  rgba(29, 90, 70, .20);
  --orn-miedz:       rgba(138, 67, 24, .16);
  --orn-jasny:       rgba(241, 238, 227, .12);
  --orn-jasny-moc:   rgba(241, 238, 227, .22);

  --krój-naglowek: "Cormorant Garamond", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --krój-tekst:    "IBM Plex Sans", "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 — jedna krawędź dla nagłówków, prozy i kresek.
     33rem daje dla IBM Plex Sans ~70–76 znaków w wierszu; miara w em dawała
     przy 1920 px wiersz o ćwierć dłuższy niż przy 1366 (proza dziedziczy
     stopień KORZENIA, a korzeń rośnie razem z oknem). */
  --kolumna:        33rem;      /* kolumna prozy — h2, akapity, listy */
  --pas-szer:       64rem;      /* maksymalna szerokość pasma treści */
  /* ⚠⚠ MARGINES BYŁ LICZONY DWA RAZY (pomiar 2026-08-31): pasmo miało własną
     szerokość 68rem, a NA NIEJ jeszcze wypełnienie 4vw = 77 px. Przy 1920 px
     dawało to 199 px marginesu zewnętrznego PLUS 77 px wewnętrznego, czyli
     276 px zanim zaczynała się siatka. Wypełnienie schodzi do 56 px, a szerokość
     pasma liczy się od OKNA (patrz krok trzeci skalowania). */
  --margines:       clamp(20px, 4vw, 56px);
  --rama-brzeg:     clamp(18px, 2.6vw, 56px);   /* pasek nagłówka i stopki */

  /* SZYNY SIATKI. Do 1180 px kolumna prozy stoi POŚRODKU pasma (obie szyny
     równe). Powyżej prawa szyna rośnie, bo dostaje własny komponent: znacznik
     sekcji, a wykazy, pola źródła i panele alarmowe wchodzą w nią całą
     szerokością. ⚠ RECENZJA: wcześniej prawa szyna była o połowę szersza od
     lewej i STAŁA PUSTA — 395 px czystej bieli w każdej płycie. */
  --szyna-l:        .5fr;
  --szyna-p:        .5fr;

  --promien:        6px;
  --promien-karta:  14px;
  --promien-plyta:  20px;
  --cien-plyta:     0 30px 70px -34px rgba(7, 27, 21, .45), 0 2px 10px -4px rgba(7, 27, 21, .14);
  --cien-karta:     0 20px 42px -26px rgba(7, 27, 21, .46), 0 1px 4px -2px rgba(7, 27, 21, .12);
  --zachodzenie:    clamp(1.6rem, 1rem + 2.4vw, 4.4rem);
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.3rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

/* ⭐⭐ TRZECI KROK SKALOWANIA (2026-09-01, decyzja użytkownika: „makieta ma
   ROSNĄĆ powyżej 1366 px, a nie dokładać marginesu"). Pomiar pokazał przy 1920 px
   199 px marginesu z każdej strony przy regule serii ~95 px. Przyczyna była
   dokładnie ta z diagnozy: pasmo miało WŁASNĄ szerokość w rem (68rem = 1522 px)
   i NIEZALEŻNIE OD OKNA nie mogło urosnąć, a wypełnienie 4vw dokładało drugi
   margines od środka.
   Teraz pasmo liczy się OD OKNA: 100vw − 190 px, czyli równe 95 px marginesu
   na całym zakresie 1400–1920 px (przy 2560 px zatrzymuje je 88rem, żeby na
   monitorze panoramicznym pasmo nie stało się nieczytelnym pasem). Odzyskane
   208 px NIE zostaje bielą: 45 px bierze kolumna prozy (33rem → 35rem),
   reszta idzie w prawą szynę, w której stoją wykazy, karty kroków i panel
   alarmowy — a te powyżej 1500 px idą na trzy szpalty (sekcje 8, 9). */
@media (min-width: 1400px) {
  :root {
    --pas-szer: min(88rem, 100vw - 190px);
    --kolumna:  35rem;
  }
}
/* Stopień pisma korzenia powyżej 1600 px — proza ma rosnąć w pikselach razem
   z oknem (warunek 1 bramki B13), nie tylko pasmo. */
@media (min-width: 1600px) {
  html { font-size: clamp(1.27rem, 0.83rem + 0.474vw, 1.4rem); }
}
@media (min-width: 1180px) {
  :root { --szyna-p: .95fr; }
}

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

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
  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(--wiodaca-ciemna); color: var(--na-wiodacej);
  font-weight: 600; letter-spacing: .04em; text-decoration: none;
  border-radius: 0 0 var(--promien) 0;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy).
   ⚠ RECENZJA (wada 2): pasek stał na kontenerze treści (64rem), więc przy
   1920 px sygnatura i menu nie mieściły się obok siebie i zawijały na dwa
   wiersze, mając po bokach po ~380 px pustego marginesu. Pasek dostaje
   WŁASNY kontener: szerokość okna minus krawędź. Powyżej 1280 px sygnatura
   stoi po lewej, menu po prawej, w jednym wierszu; poniżej — świadome dwa
   rejestry rozdzielone włosem, a nie przypadkowe zawinięcie. */
.rama {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--rama-brzeg);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z szynami po bokach: proza stoi
   w środkowym torze (marginesy przy 1920 są prawie równe — bramka B13),
   a szyny niosą ornament i ozdobne cyfry sekcji. 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, var(--szyna-l))
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, var(--szyna-p)) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
/* KOMPONENTY SZEROKIE — wchodzą w prawą szynę CAŁĄ szerokością pasma.
   ⚠ RECENZJA (wada 1): to one zajmują szynę treścią; sam ornament by nie
   wystarczył. Mają własne, kryjące tło i stoją NAD znacznikiem sekcji. */
.kontener > .szeroki,
.kontener > .pole,
.kontener > .alarm,
.kontener > .zrodlo { grid-column: tekst-start / pelna-end; position: relative; z-index: 1; }
/* ⚠ RECENZJA (wada 1): nagłówek sekcji kończy się DOKŁADNIE tam, gdzie proza.
   Wcześniej biegł do końca pasma i jego włos przecinał pustkę prawej szyny. */
.kontener > h2 { grid-column: tekst-start / tekst-end; }
.kontener > .przewodniki,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: pelna-start / pelna-end; }
/* ⚠ JEDNA KRAWĘDŹ: tytuł zaczyna się dokładnie tam, gdzie proza widoku,
   i rośnie w prawo. Osobna, szersza kolumna hero dawała dwie lewe
   krawędzie i tytuł nie stał nad tym, co zapowiada. */
.kontener--hero > .tytul { grid-column: tekst-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--papier);
  border-block-end: 1px solid var(--linia-cicha);
  box-shadow: 0 12px 30px -28px rgba(7, 27, 21, .7);
}
/* kreska wykrojnika: zieleń → miedź */
.naglowek::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--akcent) 42%, var(--linia-cicha) 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 — typograficzna; nigdy nie udaje logotypu firmy (T8) */
.znak {
  display: inline-flex; align-items: center; min-height: 46px;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.1rem, .96rem + .38vw, 1.5rem);
  line-height: 1.18; letter-spacing: .005em;
  text-decoration: none; color: var(--wiodaca-ciemna);
  padding-inline-end: .2em;
}
.znak .znak__tekst { position: relative; padding-block-end: .14em; }
.znak .znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 2.6em; height: 2px; background: var(--akcent);
  transition: width .25s ease;
}
.znak:hover .znak__tekst::after { width: 100%; }

/* ⚠ pułapka B5: „flex:none" na nawigacji nie pozwala jej się zwęzić i lista
   menu wystaje poza ekran przy 360 px. Menu stoi na zwykłej liście, która
   zawija się w pasku — bez JavaScriptu i bez <details>, więc T7 nie występuje. */
.menu { flex: 0 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(.15rem, 1vw, .95rem);
  margin: 0; padding: 0; list-style: none;
}
/* DWA REJESTRY ETYKIETY — świadome, nie przypadkowe. Poniżej 1280 px sygnatura
   i menu nie mieszczą się obok siebie przy żadnym rozsądnym stopniu pisma, więc
   zamiast pozwolić im „spaść" w prawo, kładziemy menu w drugim rejestrze:
   do lewej krawędzi, pod włosem, jak druga linijka nadruku na etykiecie. */
@media (max-width: 1279px) {
  .naglowek__pas { display: block; padding-block: .55rem .1rem; }
  .znak { display: flex; }
  .menu {
    display: block; margin-block-start: .3rem;
    border-block-start: 1px solid var(--linia-cicha);
  }
  .menu__lista { justify-content: flex-start; }
  .menu__link { padding-inline: 0 clamp(.9em, 2.6vw, 1.7em); }
  .menu__link::after { inset-inline-start: 0; }
  .menu__link:hover::after,
  .menu__link[aria-current="page"]::after { width: calc(100% - clamp(.9em, 2.6vw, 1.7em)); }
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .62em;
  font-weight: 500; font-size: .76rem;
  letter-spacing: .085em; text-transform: uppercase;
  text-decoration: none; color: var(--atrament-cichy);
}
.menu__link::after {
  content: ""; position: absolute; inset-block-end: .5rem;
  inset-inline-start: .62em; width: 0; height: 2px;
  background: var(--akcent); transition: width .25s ease;
}
.menu__link:hover { color: var(--wiodaca-ciemna); }
.menu__link:hover::after { width: calc(100% - 1.24em); }
.menu__link[aria-current="page"] { color: var(--wiodaca-ciemna); font-weight: 600; }
.menu__link[aria-current="page"]::after {
  width: calc(100% - 1.24em); height: 3px;
  background: linear-gradient(90deg, var(--wiodaca), var(--akcent));
}

/* --- 5. HERO I NAGŁÓWEK WIDOKU --------------------------------------- */
.tresc { display: block; counter-reset: sekcja; }

.hero, .naglowek-widoku {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--butelka);
  background-image:
    radial-gradient(70% 62% at 84% 4%, rgba(41, 110, 86, .68) 0%, rgba(41, 110, 86, 0) 62%),
    radial-gradient(58% 54% at 4% 96%, rgba(138, 67, 24, .34) 0%, rgba(138, 67, 24, 0) 64%),
    linear-gradient(162deg, #14483A 0%, #0C2B22 48%, #061710 100%);
  color: var(--na-ciemnym);
}
.hero { padding-block: clamp(3rem, 1.4rem + 5.4vw, 7.6rem) clamp(4.6rem, 2.2rem + 6.4vw, 9.8rem); }
.naglowek-widoku { padding-block: clamp(2.4rem, 1.2rem + 3.6vw, 5.2rem) clamp(3.6rem, 1.8rem + 5vw, 7.4rem); }

/* ORNAMENT A: pionowy rytm nadruku — cienkie linie jak druk na opakowaniu */
.rytm {
  position: absolute; z-index: 0; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
      transparent 0 21px, var(--orn-jasny) 21px 22px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 62%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 62%, rgba(0,0,0,0) 100%);
}
/* ORNAMENT B: duża etykieta — inline SVG, aria-hidden, bez informacji */
/* ⚠ ornament wisi na PRAWEJ krawędzi sekcji i jest wsunięty poza nią, żeby
   przy żadnej szerokości nie wchodził pod drugi wiersz tytułu (sprawdzone
   pomiarem na zrzutach 1000–1920 px). Poniżej 1000 px w ogóle go nie ma. */
.etykieta-orn {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: clamp(-190px, -10vw, -24px);
  width: clamp(280px, 30vw, 600px);
  transform: translateY(-50%);
  color: var(--len-cichy);        /* B6: barwa ikony wobec tła hero */
  pointer-events: none;
  display: none;
}
@media (min-width: 1000px) { .etykieta-orn { display: block; } }
.etykieta-orn svg { width: 100%; height: auto; display: block; }

/* dolna krawędź hero — wykrojnik: kreska miedziana i rząd ząbków */
.hero::after, .naglowek-widoku::after {
  content: ""; position: absolute; z-index: 1;
  inset-inline: 0; inset-block-end: 0; height: 14px;
  background:
    linear-gradient(90deg, var(--miedz-jasna) 0%, rgba(227, 168, 118, .18) 46%, rgba(227, 168, 118, .55) 100%)
      no-repeat 0 0 / 100% 2px,
    repeating-linear-gradient(90deg, transparent 0 14px, var(--orn-jasny-moc) 14px 15px) no-repeat 0 2px / 100% 7px;
}
.hero .kontener, .naglowek-widoku .kontener { position: relative; z-index: 2; }

.hero .tytul, .naglowek-widoku .tytul {
  margin: 0 0 clamp(1rem, .6rem + 1vw, 1.9rem);
  font-family: var(--krój-naglowek); font-weight: 600;
  line-height: 1.02; letter-spacing: -.012em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
.hero .tytul { font-size: clamp(2.5rem, 1.35rem + 3.05vw, 4.9rem); }
.naglowek-widoku .tytul { font-size: clamp(2.1rem, 1.25rem + 2.35vw, 3.9rem); }

/* znak etykiety nad tytułem: miedziana kreska z ząbkami wykrojnika */
.hero .tytul::before, .naglowek-widoku .tytul::before {
  content: ""; display: block;
  width: clamp(84px, 12vw, 190px); height: 8px;
  margin-block-end: clamp(1rem, .7rem + 1vw, 2.1rem);
  background:
    linear-gradient(90deg, var(--miedz-jasna) 0%, rgba(227, 168, 118, .12) 100%) no-repeat 0 0 / 100% 3px,
    repeating-linear-gradient(90deg, var(--miedz-jasna) 0 2px, transparent 2px 12px) no-repeat 0 5px / 100% 3px;
}
.hero .lid, .naglowek-widoku .lid {
  margin: 0;
  font-size: 1.16rem; line-height: 1.62;
  color: var(--len-cichy);
}

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

/* płyta wstępu — pierwszy akapit po tytule, złożony większym stopniem */
.plyta--wstep > p {
  font-size: 1.1rem; line-height: 1.68;
  padding-inline-start: clamp(.9rem, 1.6vw, 1.6rem);
  border-inline-start: 3px solid var(--akcent);
}

/* pasmo lniane — z bardzo cichym rytmem nadruku */
.pas--len {
  background-color: var(--papier);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(29, 90, 70, .055) 34px 35px),
    radial-gradient(46% 40% at 4% 96%, var(--orn-miedz) 0%, rgba(138, 67, 24, 0) 70%);
  padding-block: clamp(2.4rem, 1.2rem + 3.2vw, 5.2rem);
}
/* pasmo lniane ciemniejsze — z pionowym rytmem nadruku */
.pas--kreda {
  background-color: var(--tlo-2);
  background-image: repeating-linear-gradient(90deg,
      transparent 0 26px, var(--orn-zielen) 26px 27px);
  padding-block: clamp(2.6rem, 1.4rem + 3.4vw, 5.6rem);
}
/* pasmo, na którym leży biała PŁYTA */
.pas--plyta {
  /* ⚠ padding-inline daje płycie margines na wąskich ekranach, a NIE przesuwa
     kolumny prozy na szerokich: kontener jest wyśrodkowany, więc powyżej
     ~1380 px luz centrowania i tak jest większy od tego marginesu. Gdyby
     przesuwał, w widoku byłyby DWIE lewe krawędzie prozy (i bramka B13
     mierzyłaby raz jedną, raz drugą). */
  padding-inline: clamp(0px, 1.6vw, 26px);
  background-color: var(--len-3);
  background-image:
    radial-gradient(52% 42% at 96% 0%, var(--orn-miedz) 0%, rgba(138, 67, 24, 0) 68%);
  padding-block: clamp(2rem, 1rem + 2.6vw, 4.2rem);
}
.plyta {
  position: relative; z-index: 2;
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 4.2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-plyta);
  box-shadow: var(--cien-plyta);
  overflow: hidden;
}
/* gzyms płyty — cienka kreska zieleń → miedź na górnej krawędzi */
.plyta::before {
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--akcent) 52%, rgba(138, 67, 24, .12) 100%);
}
/* znak wykrojnika w prawym górnym narożniku płyty — czysta dekoracja */
.plyta::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: clamp(.9rem, 1.7vw, 1.9rem);
  opacity: .42;
  background:
    linear-gradient(var(--akcent), var(--akcent)) no-repeat left    top    / 30px 2px,
    linear-gradient(var(--akcent), var(--akcent)) no-repeat left    top    / 2px 30px,
    linear-gradient(var(--akcent), var(--akcent)) no-repeat right   top    / 30px 2px,
    linear-gradient(var(--akcent), var(--akcent)) no-repeat right   top    / 2px 30px,
    linear-gradient(var(--akcent), var(--akcent)) no-repeat left    bottom / 30px 2px,
    linear-gradient(var(--akcent), var(--akcent)) no-repeat left    bottom / 2px 30px,
    linear-gradient(var(--akcent), var(--akcent)) no-repeat right   bottom / 30px 2px,
    linear-gradient(var(--akcent), var(--akcent)) no-repeat right   bottom / 2px 30px;
}
.plyta > * { position: relative; z-index: 1; }

/* pierwsza płyta widoku wchodzi POD hero — warstwa na warstwie */
.pas--zachodzi { padding-block-start: 0; }
.pas--zachodzi > .plyta { margin-block-start: calc(-1 * var(--zachodzenie)); }
@media (max-width: 640px) { .plyta { border-radius: var(--promien-karta); } }

/* pasmo ciemne — MOCNY AKCENT. Nadpisujemy TOKENY, więc każdy komponent
   w środku dostaje wariant „na ciemnym" bez osobnych reguł (pułapka
   „kolor ustawiony na sztywno na powierzchni o odwrotnej jasności"). */
.pas--noc {
  --papier:         var(--butelka);
  --papier-karta:   var(--karta-ciemna);
  --tlo-2:          var(--karta-ciemna);
  --len-3:          var(--karta-ciemna);
  --wiodaca-jasna:  #1B4437;
  --atrament:       var(--na-ciemnym);
  --atrament-cichy: #CFDCD2;
  --wiodaca:        var(--miedz-jasna);
  --wiodaca-ciemna: var(--miedz-jasna);
  --akcent:         var(--miedz-jasna);
  --na-wiodacej:    var(--butelka-2);
  --na-akcencie:    var(--butelka-2);
  --linia:          #6E8B7C;
  --linia-cicha:    #2A5647;
  --chip-miedz:     var(--karta-ciemna);
  position: relative; overflow: hidden;
  background-color: var(--butelka);
  background-image:
    radial-gradient(62% 58% at 88% 4%, rgba(41, 110, 86, .52) 0%, rgba(41, 110, 86, 0) 62%),
    radial-gradient(48% 46% at 4% 98%, rgba(138, 67, 24, .30) 0%, rgba(138, 67, 24, 0) 66%),
    repeating-linear-gradient(90deg, transparent 0 26px, var(--orn-jasny) 26px 27px);
  color: var(--na-ciemnym);
  padding-block: clamp(2.8rem, 1.5rem + 3.6vw, 5.8rem);
}
.pas--noc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, rgba(227, 168, 118, .12) 0%, var(--miedz-jasna) 48%, rgba(227, 168, 118, .12) 100%);
}

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  counter-increment: sekcja;
  margin: clamp(2.2rem, 1.4rem + 2vw, 3.4rem) 0 .9rem;
  padding-block-start: clamp(.9rem, .6rem + .9vw, 1.6rem);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.7rem, 1.25rem + 1.55vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.008em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* kreska nad nagłówkiem sekcji: włos przez całą szerokość sekcji
   plus mocny miedziany odcinek na początku — jak linia wykrojnika */
.tresc h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 2px;
  background:
    linear-gradient(var(--akcent), var(--akcent)) no-repeat left top / clamp(46px, 6vw, 96px) 2px,
    linear-gradient(var(--linia-cicha), var(--linia-cicha)) no-repeat left top / 100% 1px;
}
/* OZDOBNA CYFRA SEKCJI w szynie bocznej — pseudoelement z licznika,
   czyli DEKORACJA, a nie treść (bramka B1 jej nie widzi i widzieć nie ma). */
.tresc h2::after {
  content: counter(sekcja, decimal-leading-zero);
  position: absolute; inset-block-start: .1em; inset-inline-end: calc(100% + 1.5rem);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 2.3em; line-height: 1;
  color: var(--linia-cicha);
  pointer-events: none;
  display: none;
}
@media (min-width: 1180px) { .tresc h2::after { display: block; } }
.pas--kreda h2::after { color: #D2CCB8; }
.pas--noc h2::after { color: rgba(227, 168, 118, .24); }
.kontener > h2:first-child { margin-block-start: 0; }

.tresc h3 {
  margin: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem) 0 .5rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.28rem, 1.1rem + .58vw, 1.72rem);
  line-height: 1.26; color: var(--atrament);
}

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

.tresc p a, .tresc li a {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--akcent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.tresc p a:hover, .tresc li a:hover {
  color: var(--akcent); text-decoration-thickness: 2px;
}
/* ⚠ adresy urzędowe w prozie potrafią rozepchnąć widok na 360 px */
.tresc .zrodlo a { overflow-wrap: anywhere; }

/* --- 8. POLE SKŁADU (wyliczenia w rytmie wykazu INCI) ----------------- */
/* Wykaz ze źródła składamy jak pole składników na opakowaniu: cienka ramka,
   numeracja maszynowa w miedzi, siatka wierszy, dwie szpalty od 1000 px. */
.tresc .wyliczenie {
  position: relative;
  margin: 1em 0 2em; padding: clamp(1.2rem, .9rem + 1.1vw, 2.1rem) clamp(1.2rem, .9rem + 1.3vw, 2.4rem);
  list-style: none;
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
  counter-reset: skladnik;
  display: grid;
}
/* narożniki wykrojnika — dekoracja pola składu */
.tresc .wyliczenie::before, .tresc .wyliczenie::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
}
.tresc .wyliczenie::before {
  inset-block-start: 9px; inset-inline-start: 9px;
  border-block-start: 2px solid var(--akcent); border-inline-start: 2px solid var(--akcent);
}
.tresc .wyliczenie::after {
  inset-block-end: 9px; inset-inline-end: 9px;
  border-block-end: 2px solid var(--akcent); border-inline-end: 2px solid var(--akcent);
}
.tresc .wyliczenie li {
  counter-increment: skladnik;
  position: relative;
  padding: .8em 0 .8em 3.6em;
  border-block-start: 1px solid var(--linia-cicha);
  font-size: .98rem; line-height: 1.55;
}
.tresc .wyliczenie li::before {
  content: counter(skladnik, decimal-leading-zero);
  position: absolute; inset-inline-start: .1em; inset-block-start: 1.15em;
  font-family: var(--krój-maszyna); font-size: .68rem; letter-spacing: .12em;
  font-weight: 600; color: var(--akcent);
}
.tresc .wyliczenie li:first-child { border-block-start: 0; }
@media (min-width: 1000px) {
  .tresc .wyliczenie { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.4rem, 2.4vw, 3rem); }
  .tresc .wyliczenie li:nth-child(2) { border-block-start: 0; }
}
/* ⚠ RECENZJA (wada 7): kolumna numeru była dobrana pod układ DWUSZPALTOWY,
   więc na jednej szpalcie zostawało 50–60 px pustki między „01" a tekstem,
   a włos pozycji zaczynał się daleko na lewo od pierwszej litery. Poniżej
   1000 px numer stoi 2,5em od krawędzi i w linii pierwszego wiersza. */
@media (max-width: 999px) {
  /* wiersz wykazu jako JEDNA linijka etykiety: numer i tekst w rzędzie flex,
     wyrównane po LINII PISMA — nie po górnej krawędzi pudełka. */
  .tresc .wyliczenie li { display: flex; align-items: baseline; gap: .9em; padding-inline-start: 0; }
  .tresc .wyliczenie li::before { position: static; flex: 0 0 2.2em; }
}
/* ⭐⭐ EKRAN SZEROKI (2026-09-01): to TU idzie szerokość odzyskana z marginesu.
   Wykazy ze źródła mają pozycje po 27–59 znaków, więc powyżej 1500 px mieszczą
   się w TRZECH szpaltach — wykaz sześciopozycyjny kurczy się z trzech wierszy
   do dwóch, a pasmo naprawdę niesie więcej treści w poziomie.
   ⚠ Warunek „:has(li:nth-child(6))" jest po to, żeby czteropozycyjny wykaz
   z arkusza systemu nie stanął w układzie 3 + 1 sierota. */
@media (min-width: 1500px) {
  .tresc .wyliczenie:not(.wyliczenie--warstwy):has(li:nth-child(6)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tresc .wyliczenie:not(.wyliczenie--warstwy):has(li:nth-child(6)) li:nth-child(3) {
    border-block-start: 0;
  }
}

/* --- 9. KARTY KROKÓW ------------------------------------------------- */
.tresc .kroki {
  margin: .8em 0 2em; padding: 0; list-style: none;
  counter-reset: krok;
  display: grid; gap: .7rem;
}
/* ⚠ RECENZJA (wada 1): karty kroków stały w wąskiej kolumnie prozy, a prawa
   szyna obok nich była pusta. Na szerokim paśmie idą w dwie szpalty. */
@media (min-width: 1000px) {
  .tresc .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem clamp(.8rem, 1.6vw, 1.6rem); }
}
/* ⭐⭐ EKRAN SZEROKI: karty kroków na trzy szpalty. ⚠ Tylko tam, gdzie kart jest
   co najmniej sześć — trzy karty w trzech szpaltach zrobiłyby z rzędu pasek,
   a arkusz systemu ma ich dokładnie trzy. */
@media (min-width: 1500px) {
  .tresc .kroki:has(li:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tresc .kroki li {
  counter-increment: krok; position: relative;
  padding: 1.05em 1.3em 1.2em 4.4em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
  overflow: hidden;
}
.tresc .kroki li::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute; inset-inline-start: 1.05em; inset-block-start: .95em;
  width: 2.4em; height: 2.4em;
  display: grid; place-items: center;
  background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  border: 1px solid var(--wiodaca);
  border-radius: var(--promien);
  font-family: var(--krój-maszyna); font-weight: 600; font-size: .78em;
  letter-spacing: .06em; line-height: 1;
}
/* rytm wykrojnika: krótka miedziana kreska u dołu karty, coraz krótsza —
   wyłącznie faktura, nie niesie żadnej wartości ani proporcji */
.tresc .kroki li::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  height: 2px; background: var(--akcent); opacity: .5; width: 32%;
}
.tresc .kroki li:nth-child(2)::after { width: 28%; }
.tresc .kroki li:nth-child(3)::after { width: 24%; }
.tresc .kroki li:nth-child(4)::after { width: 20%; }
.tresc .kroki li:nth-child(5)::after { width: 17%; }
.tresc .kroki li:nth-child(6)::after { width: 14%; }
.tresc .kroki li:nth-child(7)::after { width: 11%; }
.tresc .kroki li:nth-child(n+8)::after { width: 8%; }

/* --- 10. POLE ŹRÓDŁA ------------------------------------------------- */
/* ⚠⚠ RECENZJA (wady 5 i 8). Było: trzywierszowy, PODKREŚLONY adres na
   łososiowym tle, łamany w środku wyrazu („…/sectors/cosmetic" / „s/cosmetic-…").
   Adresu nie wolno skrócić ani usunąć — jest treścią ze źródła (zasada 1:1),
   a zasada użytkownika „zero odsyłaczy zewnętrznych" nie pozwala go DODAĆ,
   nie każe usuwać tego, co już w treści stoi. Jest więc: pole na całą
   szerokość pasma (adres mieści się w JEDNYM wierszu od 1024 px w górę),
   sygnatura pola wersalikami w miedzi, adres pismem maszynowym bez
   podkreślenia — zamiast niego miedziana kreska pod całym wierszem.
   ⚠ Adres NIE MOŻE dostać <wbr>: bramka B12 szuka w kodzie DOSŁOWNEGO ciągu
   adresu wewnątrz <a>, a znacznik rozbiłby go na dwa kawałki. Zamiast łamania
   w środku wyrazu wiersz przewija się w poziomie WEWNĄTRZ pola (B5 mierzy
   scrollWidth dokumentu, więc własny pasek pola go nie dotyczy). */
.tresc .zrodlo {
  position: relative;
  margin: 1.6em 0 1.9em;
  padding: .95em 1.3em 1em 1.35em;
  background: var(--chip-zrodlo);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--akcent);
  border-radius: 0 var(--promien-karta) var(--promien-karta) 0;
  font-size: .94rem; line-height: 1.6;
  color: var(--atrament);
  /* ⚠⚠ MIARA WIERSZA (2026-09-01). Pole źródła wchodzi w prawą szynę, więc po
     poszerzeniu pasma jego wiersz miałby przy 1920 px ponad 120 znaków. Pole
     zachodzi na szynę o dwa firety i tam się zatrzymuje: sygnatura instytucji
     czyta się w jednym rzucie oka, a znacznik sekcji zostaje widoczny obok. */
  max-width: min(100%, var(--kolumna));
}
/* znacznik wykrojnika w prawym górnym rogu pola — ten sam detal co na płycie */
.tresc .zrodlo::after {
  content: ""; position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
  width: 14px; height: 14px; pointer-events: none; opacity: .5;
  border-block-start: 2px solid var(--akcent); border-inline-end: 2px solid var(--akcent);
}
.tresc .zrodlo .zrodlo__etyk {
  display: block; margin-block-end: .5rem;
  font-family: var(--krój-tekst); font-size: .74rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--akcent);
}
.tresc .zrodlo a.zrodlo__adres {
  display: block;
  max-width: 100%;
  overflow-x: auto; overflow-y: hidden;
  white-space: nowrap;
  padding-block-end: .4rem;
  font-family: var(--krój-maszyna);
  font-size: .78rem; letter-spacing: -.01em; line-height: 1.5;
  color: var(--wiodaca-ciemna);
  text-decoration: none;
  border-block-end: 1px solid var(--akcent);
  scrollbar-width: thin;
  scrollbar-color: var(--linia) transparent;
}
/* Poniżej 1024 px najdłuższy adres nie mieści się w jednym wierszu przy żadnym
   czytelnym stopniu pisma. Zamiast ciąć wyraz w połowie, wiersz przewija się
   w polu, a prawa krawędź gaśnie — to jest znak, że tekst biegnie dalej. */
@media (max-width: 1023px) {
  .tresc .zrodlo a.zrodlo__adres {
    font-size: .72rem;
    -webkit-mask-image: linear-gradient(90deg, #000 0 78%, rgba(0, 0, 0, .12) 100%);
            mask-image: linear-gradient(90deg, #000 0 78%, rgba(0, 0, 0, .12) 100%);
  }
}
.tresc .zrodlo a.zrodlo__adres:hover {
  color: var(--akcent); border-block-end-width: 2px; padding-block-end: calc(.4rem - 1px);
}

/* --- 11. BLOK WIERSZOWY (schemat ze źródła) -------------------------- */
.tresc .wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.8rem) clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-inline-start: 5px solid var(--wiodaca);
  border-radius: var(--promien-karta);
  font-family: var(--krój-maszyna);
  font-size: .9rem; line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
}

/* --- 12. ODSYŁACZE KIERUNKOWE ---------------------------------------- */
/* akapit, którego CAŁĄ treścią jest odsyłacz — w źródle osobny wiersz.
   ⚠ bramka B7 traktuje go jak samodzielny cel UI, więc musi mieć 44 px. */
.tresc .odsylacz { margin: 1.2em 0 1.7em; }
/* ⚠ RECENZJA (wada 1): odsyłacz kierunkowy kończył wiersz w środku pustki.
   Teraz z przycisku wychodzi kreska prowadząca do prawej krawędzi kolumny
   i zamyka ją ząbkiem wykrojnika — wiersz ma początek i koniec. */
.tresc .przejscie {
  margin-block: 1.6em 1.9em;
  display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.5rem);
}
.tresc .przejscie::after {
  content: ""; flex: 1 1 0; min-width: 0; height: 7px; align-self: center;
  background:
    linear-gradient(var(--linia), var(--linia)) no-repeat left center / 100% 1px,
    linear-gradient(var(--akcent), var(--akcent)) no-repeat right center / 2px 7px;
  opacity: .55;
}
/* w kartach kreska prowadząca nie ma dokąd prowadzić — karta sama jest ramą */
.tresc .zapowiedz__wiecej.przejscie { display: block; }
.tresc .zapowiedz__wiecej.przejscie::after { content: none; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 52px;
  padding: .5em 1.5em .5em 1.35em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--wiodaca);
  border-radius: var(--promien);
  font-weight: 600; font-size: .98rem; letter-spacing: .005em;
  color: var(--wiodaca-ciemna);
  text-decoration: none;
  box-shadow: 0 14px 28px -22px rgba(7, 27, 21, .7);
}
.tresc .przejscie a::after {
  content: "→"; font-size: 1.05em; line-height: 1;
  transition: transform .25s ease;
}
.tresc .przejscie a:hover {
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border-color: var(--wiodaca-ciemna);
}
.tresc .przejscie a:hover::after { transform: translateX(4px); }

/* 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), inaczej przycisk
   dostanie wygląd odsyłacza kierunkowego (napis dotykał ramki na 143 makietach). */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; gap: .75em;
  justify-content: center;
  min-height: 58px; padding: .85rem 2.1rem;
  background: var(--akcent); color: var(--na-akcencie);
  border: 1px solid var(--akcent); border-radius: var(--promien);
  font-weight: 600; font-size: 1rem; letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 22px 42px -24px rgba(7, 27, 21, .9);
}
.tresc .przejscie a.przycisk::after { content: "→"; }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover {
  background: var(--wiodaca-ciemna); border-color: var(--wiodaca-ciemna); color: var(--na-wiodacej);
}

/* --- 14. INDEKS PRZEWODNIKÓW (widok bazy wiedzy) --------------------- */
.tresc .przewodniki {
  margin: clamp(1.4rem, .9rem + 1.4vw, 2.6rem) 0 clamp(1.4rem, .9rem + 1.4vw, 2.4rem);
  display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.8rem);
  counter-reset: przewodnik;
}
@media (min-width: 1000px) { .tresc .przewodniki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ⚠ RECENZJA (wada 6): trzy przyciski w trzech szpaltach siadały na trzech
   różnych wysokościach, a środkowy — zawinięty na dwa wiersze — był o połowę
   szerszy. Szpalta jest kolumną flex, przycisk ma „margin-block-start:auto",
   pełną szerokość szpalty i wspólną minimalną wysokość: rząd czyta się jak
   jeden komponent, nie jak trzy niezależne bloki. */
.tresc .przewodnik {
  counter-increment: przewodnik;
  position: relative;
  display: flex; flex-direction: column;
  padding-block-start: clamp(.9rem, .7rem + .6vw, 1.4rem);
  border-block-start: 2px solid var(--wiodaca);
}
.tresc .przewodnik::before {
  content: counter(przewodnik, decimal-leading-zero);
  display: block; margin-block-end: .35rem;
  font-family: var(--krój-maszyna); font-size: .7rem; letter-spacing: .18em;
  font-weight: 600; color: var(--akcent);
}
.tresc .przewodnik h3 { margin-block: 0 .45rem; }
.tresc .przewodnik p { font-size: .97rem; color: var(--atrament-cichy); }
.tresc .przewodnik .przejscie { margin-block: 1.1em 0; margin-block-start: auto; display: block; }
.tresc .przewodnik .przejscie::after { content: none; }
.tresc .przewodnik .przejscie a {
  display: flex; width: 100%; justify-content: space-between;
  font-size: .88rem; min-height: 56px; padding-inline: 1.05em 1.15em;
  line-height: 1.3;
}

/* --- 15. KARTOTEKA WPISÓW -------------------------------------------- */
.tresc .lista-wpisow {
  margin: clamp(1.4rem, 1rem + 1.4vw, 2.4rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  counter-reset: wpis;
}
@media (min-width: 880px)  { .tresc .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1340px) { .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.4rem, 1rem + 1.3vw, 2.2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-plyta);
  box-shadow: var(--cien-plyta);
}
.tresc .zapowiedz::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--wiodaca), var(--akcent));
}
/* duża ozdobna cyfra — ornament, nie informacja (pseudoelement z licznika) */
.tresc .zapowiedz::before {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-end: -.1em; inset-inline-end: .05em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-variant-numeric: lining-nums;
  font-size: 6.4rem; line-height: 1;
  color: var(--wiodaca-jasna);
  pointer-events: none;
}
.tresc .zapowiedz > * { position: relative; }
.tresc .zapowiedz__tytul {
  counter-increment: none;
  margin: 0 0 .6rem; padding: 0; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.56rem); line-height: 1.22;
  text-wrap: balance;
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--wiodaca-ciemna); text-decoration: none;
}
.tresc .zapowiedz__tytul a:hover { color: var(--akcent); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1.2rem; color: var(--atrament-cichy); font-size: .97rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .6em; min-height: 46px;
  padding-inline: .1rem; text-decoration: none;
  color: var(--wiodaca-ciemna); font-weight: 600;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  border-block-end: 2px solid var(--akcent);
}
.tresc .zapowiedz__wiecej a::after { content: "→"; }
.tresc .zapowiedz__wiecej a:hover { color: var(--akcent); }

/* --- 16. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--butelka-2);
  background-image:
    radial-gradient(58% 92% at 86% 0%, rgba(41, 110, 86, .40) 0%, rgba(41, 110, 86, 0) 62%),
    repeating-linear-gradient(90deg, transparent 0 21px, var(--orn-jasny) 21px 22px);
  color: var(--na-ciemnym);
  padding-block: clamp(2.4rem, 1.4rem + 2.6vw, 4.4rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, var(--miedz-jasna) 0%, rgba(227, 168, 118, .1) 58%, rgba(227, 168, 118, .5) 100%);
}
.stopka__pas {
  position: relative;
  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-weight: 600;
  font-size: clamp(1.1rem, 1rem + .34vw, 1.5rem);
  color: var(--na-ciemnym); letter-spacing: .005em;
}
.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(--stopka-tekst); font-weight: 500;
  font-size: .8rem; letter-spacing: .11em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--na-ciemnym); border-block-end-color: var(--miedz-jasna); }
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: .4em 1.3em;
  border: 1px solid var(--miedz-jasna); border-radius: var(--promien);
  color: var(--miedz-jasna); text-decoration: none;
  font-size: .8rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--miedz-jasna); color: var(--butelka-2); }

/* --- 17. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.6rem 0 2.2rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia-cicha); border-radius: var(--promien-karta);
  background: var(--papier-karta); padding: 0; overflow: hidden;
  box-shadow: var(--cien-karta);
}
.próbka__pole { display: block; height: 82px; }
.próbka__opis {
  display: block; padding: .8rem 1rem;
  font-family: var(--krój-maszyna); font-size: .78rem;
  color: var(--atrament); line-height: 1.55;
}


/* --- 17b. ZNACZNIK SEKCJI W PRAWEJ SZYNIE ---------------------------- */
/* ⚠⚠ RECENZJA, WADA NR 1 — najcięższa. W każdej białej płycie prawa jedna
   trzecia stała pusta (395 x 700–800 px czystej bieli), a włos nagłówka
   przecinał tę pustkę i kończył się w niczym. Leczymy to trzema ruchami
   naraz, nie jednym:
     1. nagłówek sekcji kończy się tam, gdzie proza (patrz sekcja 3),
     2. wykazy, pola źródła i panele alarmowe wchodzą w szynę CAŁĄ szerokością,
     3. w każdej sekcji prozy prawa szyna dostaje własny komponent: znacznik
        sekcji — pionowa linijka wykrojnika z ząbkami i mały znak etykiety.
   Znacznik jest CZYSTĄ DEKORACJĄ (aria-hidden, zero treści) i stoi POD
   komponentami szerokimi, więc pole źródła przykrywa go swoim tłem. */
.szyna { display: none; }
@media (min-width: 1180px) {
  .kontener > .szyna {
    display: block; position: relative; z-index: 0;
    grid-column: tekst-end / pelna-end;
    grid-row: 1 / span 40;          /* puste wiersze mają wysokość 0 — siatka bez odstępów */
    align-self: stretch; justify-self: stretch;
    margin-inline-start: clamp(1.6rem, 2.8vw, 3.4rem);
    pointer-events: none;
  }
}
/* linijka wykrojnika: włos przez całą wysokość sekcji plus rząd miedzianych ząbków */
.szyna::before {
  content: ""; position: absolute; inset-block: .35rem 0; inset-inline-start: 0; width: 14px;
  background:
    linear-gradient(var(--linia), var(--linia)) no-repeat left top / 1px 100%,
    repeating-linear-gradient(180deg, var(--akcent) 0 1px, rgba(0,0,0,0) 1px 26px) no-repeat left top / 14px 100%;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
}
/* ZNAK ETYKIETY — ten sam motyw co ornament hero (podwójna rama, miedziany
   nagłówek nadruku, wiersze wykazu, rząd ząbków wykrojnika), złożony samymi
   gradientami, żeby nie powtarzać SVG w każdej sekcji ośmiu widoków. */
.szyna::after {
  content: ""; position: absolute; inset-block-start: .55rem; inset-inline-start: 2.9rem;
  /* ⚠ znak rośnie razem z szyną — po poszerzeniu pasma (2026-09-01) szyna ma
     przy 1920 px ~546 px i mały znak zostawiałby w niej pustkę.
     ⚠⚠ max-height jest BEZPIECZNIKIEM: bez niego znak w niskiej sekcji wychodzi
     poniżej pasma i nachodzi na następne. */
  width: clamp(6.4rem, 14vw, 15rem); aspect-ratio: 3 / 4;
  max-height: calc(100% - 1.1rem);
  border: 1px solid var(--linia); border-radius: 14px;
  outline: 1px solid var(--linia); outline-offset: -7px;
  background:
    linear-gradient(var(--akcent), var(--akcent))                                          no-repeat 13% 13% / 36% 3px,
    repeating-linear-gradient(180deg, var(--linia) 0 1px, rgba(0,0,0,0) 1px 12px)          no-repeat 13% 33% / 74% 26%,
    repeating-linear-gradient(180deg, var(--linia) 0 1px, rgba(0,0,0,0) 1px 12px)          no-repeat 13% 64% / 50% 14%,
    repeating-linear-gradient(90deg, var(--akcent) 0 2px, rgba(0,0,0,0) 2px 13px)          no-repeat 13% 88% / 62% 7px;
  opacity: .5;
}

/* ⚠⚠ ZNAK ZNIKA TAM, GDZIE SZYNĘ ZAJMUJE TREŚĆ (2026-09-01). Wada widoczna na
   zrzucie z 1920 px: karty kroków i pole składu wchodzą w szynę CAŁĄ szerokością,
   a ozdobny znak — leżący pod nimi — wystawał w przerwach między kartami i czytał
   się jak błąd renderowania. Reguła jest tego samego rodzaju co decyzja recenzji:
   szynę wypełnia albo TREŚĆ, albo ornament, nigdy jedno na drugim.
   ⚠ Pole źródła NIE jest tu wymienione: od 2026-09-01 kończy się dokładnie na
   krawędzi kolumny prozy i szyny nie dotyka. */
.kontener:has(> .pole, > .alarm, > .szeroki,
              > .przewodniki, > .lista-wpisow, > .próbki) > .szyna { display: none; }

/* --- 17c. POLE (rama komponentu szerokiego) -------------------------- */
/* Wykaz i karty kroków chodzą w oprawie „pola", żeby móc wejść w prawą szynę
   bez ruszania kolumny prozy. ⚠ Oprawa jest też zabezpieczeniem bramki B13:
   sonda kolumny treści czyta „main .kontener > ol > li" — pozycje wykazu
   złożone w DWIE szpalty nie mają prawa udawać kolumny prozy. */
.tresc .pole { margin: 1.3em 0 2.1em; }
.tresc .pole > * { margin-block: 0; }

/* --- 17d. PANEL ALARMOWY --------------------------------------------- */
/* Akapit o objawach wymagających wezwania pomocy dostaje własny komponent:
   ciemny panel w zieleni butelkowej z miedzianą krawędzią. To NIE jest nowa
   treść ani nowe ostrzeżenie — to ten sam akapit ze źródła, złożony tak, żeby
   nie ginął w prozie. Przy okazji dokłada widokowi barwnej masy (zasada 2). */
.tresc .alarm {
  position: relative; z-index: 1;
  margin: 1.8em 0 1.2em;
  padding: clamp(1.15rem, .85rem + 1vw, 1.9rem) clamp(1.25rem, .95rem + 1.2vw, 2.3rem);
  background-color: var(--butelka);
  background-image:
    radial-gradient(58% 120% at 92% 0%, rgba(41, 110, 86, .45) 0%, rgba(41, 110, 86, 0) 66%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 22px, var(--orn-jasny) 22px 23px);
  border: 1px solid var(--butelka);
  border-inline-start: 6px solid var(--miedz-jasna);
  border-radius: 0 var(--promien-karta) var(--promien-karta) 0;
  box-shadow: var(--cien-karta);
  color: var(--na-ciemnym);
  font-size: 1.06rem; line-height: 1.62;
}
.tresc .alarm > p { margin: 0; }
/* ⚠⚠ DWA TORY PANELU (2026-09-01). Panel ma stać przez CAŁE pasmo, bo to on
   daje sekcji barwną masę — ale jego akapit nie ma prawa rosnąć razem z pasmem:
   przy 1920 px wiersz miałby 118 znaków. Dlatego akapit jest osobnym elementem
   w torze o szerokości kolumny, a tor zewnętrzny bierze znak wykrojnika — ten
   sam motyw co znacznik sekcji w szynie i ornament hero. Znak jest pseudo-
   elementem, więc nie dopisuje ani jednego znaku treści. */
@media (min-width: 1180px) {
  .tresc .alarm {
    display: grid;
    grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
    column-gap: clamp(1.6rem, 3vw, 3.4rem);
    align-items: center;
  }
  .tresc .alarm > p { grid-area: 1 / 1; }
  .tresc .alarm::before {
    content: ""; grid-area: 1 / 2;
    align-self: stretch; min-height: 7rem;
    border: 1px solid rgba(227, 168, 118, .45);
    border-radius: 14px;
    outline: 1px solid rgba(227, 168, 118, .22); outline-offset: -7px;
    background:
      linear-gradient(var(--miedz-jasna), var(--miedz-jasna))                                no-repeat 11% 17% / 30% 3px,
      repeating-linear-gradient(180deg, rgba(241, 238, 227, .34) 0 1px, rgba(0,0,0,0) 1px 13px) no-repeat 11% 39% / 66% 26%,
      repeating-linear-gradient(180deg, rgba(241, 238, 227, .34) 0 1px, rgba(0,0,0,0) 1px 13px) no-repeat 11% 68% / 44% 13%,
      repeating-linear-gradient(90deg, var(--miedz-jasna) 0 2px, rgba(0,0,0,0) 2px 15px)     no-repeat 11% 88% / 54% 7px;
    opacity: .8;
    pointer-events: none;
  }
}
.tresc .alarm::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0;
  width: clamp(70px, 9vw, 140px); height: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(227, 168, 118, 0) 0%, var(--miedz-jasna) 100%);
}
.pas--noc .alarm { background-color: var(--butelka-2); border-color: var(--butelka-2); border-inline-start-color: var(--miedz-jasna); }

/* --- 17e. WYKAZ WARSTW NA STRONIE GŁÓWNEJ ---------------------------- */
/* ⚠ RECENZJA (wada 3): strona flagowa nie pokazywała ANI JEDNEGO komponentu
   z systemu — sześć razy ten sam blok prozy. Wykaz „czterech warstw" jest
   w źródle jednym ciągiem zdań; składamy go jako POLE SKŁADU (ten sam
   komponent co wykaz INCI na podstronie), nie dopisując i nie usuwając ani
   jednego znaku: pozycje wykazu czytane po kolei dają dokładnie ten sam
   tekst co dwa akapity źródła. */
.tresc .wyliczenie--warstwy { grid-template-columns: minmax(0, 1fr); }
.tresc .wyliczenie--warstwy li { font-size: .95rem; padding-block: 1em; }
@media (min-width: 1100px) {
  .tresc .wyliczenie--warstwy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tresc .wyliczenie--warstwy li:nth-child(2) { border-block-start: 0; }
}

/* --- 17f. NOTA (przypis na całą szerokość pasma) --------------------- */
.tresc .nota {
  grid-column: tekst-start / pelna-end; position: relative; z-index: 1;
  margin-block: clamp(1.8rem, 3vw, 3rem) 0;
  padding-block-start: clamp(.9rem, 1.6vw, 1.5rem);
  border-block-start: 1px solid var(--linia-cicha);
  font-size: .92rem; line-height: 1.62; color: var(--atrament-cichy);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .tresc .nota {
    grid-template-columns: minmax(0, var(--kolumna)) minmax(0, 1fr);
    column-gap: clamp(1.6rem, 3vw, 3.4rem);
  }
  .tresc .nota::after {
    content: ""; align-self: start; height: 12px; margin-block-start: .35em;
    background:
      repeating-linear-gradient(90deg, var(--akcent) 0 1px, rgba(0,0,0,0) 1px 24px) no-repeat left top / 100% 12px;
    opacity: .5;
  }
}

/* --- 17g. PŁYTA WSTĘPU ----------------------------------------------- */
.plyta--wstep > p { position: relative; z-index: 1; }
.plyta--wstep .szyna::after { max-height: calc(100% - 1.6rem); }

/* --- 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, .naglowek-widoku, .stopka, .pas--noc {
    background: #FFFFFF !important; color: #000000 !important;
  }
  .hero .tytul, .naglowek-widoku .tytul, .hero .lid, .naglowek-widoku .lid,
  .stopka__znak, .stopka__menu a { color: #000000 !important; }
  .rytm, .etykieta-orn, .hero::after, .naglowek-widoku::after, .stopka::before { display: none !important; }
  .plyta { box-shadow: none; margin-block-start: 0; }
  .pas--kreda, .pas--plyta, .pas--len, .pas--wstep { background: #FFFFFF; }
  .tresc h2::after { display: none !important; }
  a { color: #000000; }
}