@charset "utf-8";
/* =====================================================================
   WARSTWA — system projektowy makiety dermio.pl (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: skóra i pielęgnacja to WARSTWY. Widok jest zbudowany z pasm, które
   nachodzą na siebie jak przekrój: głęboka śliwka na dole kompozycji,
   pudrowy róż w środku, ciepły krem na wierzchu. Płyty treści leżą jedna
   na drugiej z miękkim cieniem, a ornament to koncentryczne łuki.

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

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --papier:          #FBF7F4;   /* ciepły krem — podłoże */
  --papier-karta:    #FFFFFF;   /* płyta */
  --tlo-2:           #F3E4E2;   /* puder — pasmo drugoplanowe */
  --wiodaca-jasna:   #F1DCE0;   /* kapsułki, plakietki, numery */
  /* pismo */
  --atrament:        #241019;   /* śliwkowa czerń */
  --atrament-cichy:  #57424C;
  /* barwa wiodąca */
  --wiodaca:         #6B2350;   /* śliwka — powierzchnie i kreski */
  --wiodaca-ciemna:  #4A1638;   /* nagłówki i odsyłacze na jasnym */
  --akcent:          #7E5F1E;   /* złoto przygaszone — tekst akcentu */
  --linia:           #8A6E77;
  --linia-cicha:     #E8D6D2;
  --na-wiodacej:     #FFFFFF;
  --na-akcencie:     #FFFFFF;

  /* powierzchnie ciemne (panel i stopka) */
  --glebia:          #2C0F24;
  --glebia-2:        #1E0A19;
  --hero-tlo:        #2B0E23;
  --sliwka-karta:    #3A1730;
  --kapsula-ciemna:  #42162F;
  --roz-jasny:       #F0CBD1;
  --zloto-jasne:     #D8B87A;
  --na-ciemnym:      #FBF7F4;
  --zrodlo-tlo:      #FAF1EA;

  /* ornamenty — wyłącznie dekoracja, nigdy nośnik informacji */
  --orn-sliwka:      rgba(107, 35, 80, .085);
  --orn-sliwka-mocna: rgba(107, 35, 80, .16);
  --orn-zloto:       rgba(216, 184, 122, .16);
  --orn-zloto-mocna: rgba(216, 184, 122, .30);

  --krój-naglowek: "Playfair Display", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --krój-tekst:    "Jost", "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.
     34rem ≈ 70–79 znaków w wierszu dla Jost; miara w em dawała przy 1920
     wiersz o ćwierć dłuższy niż przy 1366. */
  --kolumna:        34rem;   /* kolumna prozy — h2, akapity, listy */
  --kolumna-hero:   46rem;   /* szersza kolumna hero */
  --pas-szer:       82rem;   /* maksymalna szerokość pasma treści */
  --margines:       clamp(20px, 5vw, 112px);

  --plakietka-tlo:  #F1DCE0;
  --plakietka-tekst: #4A1638;

  --promien:        10px;
  --promien-duzy:   24px;
  --promien-karta:  18px;
  --cien-plyta:     0 26px 60px -28px rgba(44, 15, 36, .38), 0 2px 10px -4px rgba(44, 15, 36, .16);
  --cien-karta:     0 18px 38px -22px rgba(44, 15, 36, .40), 0 1px 4px -2px rgba(44, 15, 36, .14);
  --zachodzenie:    clamp(1.6rem, 1rem + 2.2vw, 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.4rem);
  -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.72;
  /* ⚠ długie adresy http w prozie rozpychały widok na 360 px (bramka B5) */
  overflow-wrap: break-word;
}

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

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
  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)                        */
.rama {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z pustymi szynami po bokach: proza
   stoi w środkowym torze (symetrycznie, bramka B13), a bloki oznaczone
   klasą .szeroki rozpychają się na całe pasmo. */
.kontener {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: pelna-start / pelna-end; }
/* ⚠ JEDNA KRAWĘDŹ: hero zaczyna się dokładnie tam, gdzie proza widoku, a rośnie
   w prawo. Osobna, szersza kolumna hero dawała dwie różne lewe krawędzie
   (przy 1440 px różnicę 114 px) i tytuł nie stał nad tym, co zapowiada. */
.kontener--hero > * { 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 10px 30px -26px rgba(44, 15, 36, .55);
}
.naglowek::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--zloto-jasne) 46%, var(--tlo-2) 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .4rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.55rem, 1.1vw, 1.05rem);
}

/* sygnatura słowna — typograficzna; nigdy nie udaje logotypu firmy (T9) */
.znak {
  display: inline-flex; align-items: center; min-height: 46px;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.05rem, .95rem + .32vw, 1.45rem);
  line-height: 1.2; letter-spacing: .005em;
  text-decoration: none; color: var(--wiodaca-ciemna);
  padding-inline-end: .2em;
}
.znak .znak__tekst { position: relative; padding-block-end: .12em; }
.znak .znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 2.4em; height: 2px; background: var(--zloto-jasne);
  transition: width .25s ease;
}
.znak:hover .znak__tekst::after { width: 100%; }

/* ⚠ pułapka B5: „flex:none" na nawigacji nie pozwalało jej się zwężyć i lista
   menu wystawała poza ekran przy 360 px (scrollWidth 510). Nawigacja MA się
   kurczyć i zawijać — menu jest zbudowane na zwykłej liście, bez <details>. */
.menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: .1rem clamp(.15rem, 1.1vw, 1.1rem);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 720px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
  .menu__link { padding-inline: .5em; }
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .75em;
  font-weight: 500; font-size: .84rem;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--atrament-cichy);
}
.menu__link::after {
  content: ""; position: absolute; inset-block-end: .55rem;
  inset-inline-start: .75em; width: 0; height: 2px;
  background: var(--wiodaca); transition: width .25s ease;
}
.menu__link:hover { color: var(--wiodaca-ciemna); }
.menu__link:hover::after { width: calc(100% - 1.5em); }
.menu__link[aria-current="page"] { color: var(--wiodaca-ciemna); font-weight: 600; }
.menu__link[aria-current="page"]::after {
  width: calc(100% - 1.5em); height: 3px;
  background: linear-gradient(90deg, var(--wiodaca), var(--zloto-jasne));
}

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

.hero {
  position: relative; isolation: isolate;
  overflow: hidden;
  background-color: var(--hero-tlo);
  background-image:
    radial-gradient(78% 62% at 82% 6%, rgba(160, 78, 108, .78) 0%, rgba(160, 78, 108, 0) 62%),
    radial-gradient(66% 58% at 6% 96%, rgba(168, 112, 84, .52) 0%, rgba(168, 112, 84, 0) 64%),
    radial-gradient(50% 40% at 96% 88%, rgba(216, 184, 122, .20) 0%, rgba(216, 184, 122, 0) 70%),
    linear-gradient(158deg, #52193C 0%, #33112A 46%, #1E0A19 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3rem, 1.6rem + 5vw, 7.5rem) clamp(4.5rem, 2.4rem + 6vw, 9.5rem);
}
/* miękki łuk, którym krem wchodzi pod hero — warstwa na warstwie */
.hero::after {
  content: ""; position: absolute; z-index: 0;
  inset-inline: -6%; inset-block-end: -2px;
  height: clamp(30px, 4.6vw, 86px);
  background: var(--papier);
  border-start-start-radius: 60% 100%;
  border-start-end-radius: 60% 100%;
}
/* ORNAMENT: koncentryczne warstwy (inline SVG) — bez treści, aria-hidden */
.hero__warstwy {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -14%;
  width: clamp(340px, 46vw, 900px); aspect-ratio: 1;
  transform: translateY(-52%);
  color: var(--na-ciemnym);          /* B6: barwa ikony wobec tła hero */
  pointer-events: none;
}
.hero__warstwy svg { width: 100%; height: auto; display: block; }
.hero__poswiata {
  position: absolute; z-index: 0;
  inset-block-start: -22%; inset-inline-start: -12%;
  width: clamp(280px, 40vw, 760px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 214, 196, .26) 0%, rgba(238, 214, 196, 0) 66%);
  pointer-events: none;
}
.hero .kontener { position: relative; z-index: 1; }

.hero .tytul {
  margin: 0 0 clamp(1.1rem, .7rem + 1vw, 2rem);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(2.15rem, 1.3rem + 2.6vw, 4.1rem);
  line-height: 1.06; letter-spacing: -.018em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
/* cienka złota kreska nad tytułem — sygnał warstwy, nie informacja */
.hero .tytul::before {
  content: ""; display: block;
  width: clamp(56px, 8vw, 120px); height: 3px;
  margin-block-end: clamp(1.1rem, .8rem + 1vw, 2.2rem);
  background: linear-gradient(90deg, var(--zloto-jasne), rgba(216, 184, 122, 0));
}
.hero .tytul { max-width: 15em; }
.hero .lid {
  margin: 0;
  max-width: 42rem;
  font-size: 1.28rem; line-height: 1.62;
  color: #F3E3E6;
}

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

.pas--wstep {
  background-color: var(--papier);
  background-image:
    repeating-radial-gradient(circle at 3% 42%, transparent 0 34px, var(--orn-sliwka) 34px 35px);
  background-repeat: no-repeat;
  background-size: 760px 760px;
  background-position: left -260px center;
  padding-block: clamp(2.6rem, 1.4rem + 3.4vw, 5.4rem);
}
.pas--wstep .kontener > p:first-child {
  font-size: 1.12rem; line-height: 1.7; color: var(--atrament);
}

.pas--krem  { background-color: var(--papier); padding-block: clamp(1.4rem, .8rem + 1.6vw, 3rem); }
.pas--puder {
  background-color: var(--tlo-2);
  background-image:
    repeating-radial-gradient(circle at 97% 8%, transparent 0 30px, var(--orn-sliwka) 30px 31px);
  background-repeat: no-repeat;
  background-size: 640px 640px;
  background-position: right -190px top -170px;
  padding-block: clamp(2.8rem, 1.6rem + 3.6vw, 5.8rem);
}
.pas--puder + .pas--puder { padding-block-start: 0; }

/* pasmo, na którym leży biała PŁYTA nachodząca na sąsiada */
.pas--plyta {
  background-color: var(--papier);
  background-image:
    repeating-radial-gradient(circle at 98% 62%, transparent 0 32px, var(--orn-sliwka) 32px 33px);
  background-repeat: no-repeat;
  background-size: 700px 700px;
  background-position: right -250px bottom -120px;
  padding-block: 0 clamp(1.6rem, 1rem + 2vw, 3.4rem);
  padding-inline: clamp(10px, 2.2vw, 34px);
}
.plyta {
  position: relative; z-index: 2;
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(1.8rem, 1.1rem + 2.4vw, 3.8rem);
  background: var(--papier-karta);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-plyta);
  border: 1px solid var(--linia-cicha);
  overflow: hidden;
}
/* gzyms płyty — cienka kreska śliwka→złoto na górnej krawędzi */
.plyta::before {
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline: clamp(24px, 9%, 150px); height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--wiodaca), var(--zloto-jasne) 70%, rgba(216, 184, 122, .15));
}
/* płyta ciemna — MOCNY AKCENT. Nadpisujemy TOKENY, więc każdy komponent
   w środku dostaje wariant na ciemnym bez osobnych reguł (pułapka
   „globalny kolor na odwrotnej jasności"). */
.plyta--ciemna {
  --papier:         var(--glebia);
  --papier-karta:   var(--sliwka-karta);
  --tlo-2:          var(--kapsula-ciemna);
  --wiodaca-jasna:  var(--kapsula-ciemna);
  --atrament:       var(--na-ciemnym);
  --atrament-cichy: #E4CDD3;
  --wiodaca:        var(--zloto-jasne);
  --wiodaca-ciemna: var(--roz-jasny);
  --na-wiodacej:    var(--glebia);
  --akcent:         var(--zloto-jasne);
  --na-akcencie:    var(--glebia);
  --linia:          #8C5F76;
  --linia-cicha:    #5A2A46;
  --zrodlo-tlo:     var(--kapsula-ciemna);
  --plakietka-tlo:  var(--zloto-jasne);
  --plakietka-tekst: var(--glebia);
  background-color: var(--glebia);
  background-image:
    radial-gradient(70% 60% at 88% 4%, rgba(160, 78, 108, .40) 0%, rgba(160, 78, 108, 0) 60%),
    repeating-radial-gradient(circle at 92% 96%, transparent 0 28px, var(--orn-zloto) 28px 29px);
  border-color: #4B1F3C;
  color: var(--na-ciemnym);
}
.pas--noc {
  position: relative; overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(64% 58% at 90% 6%, rgba(160, 78, 108, .42) 0%, rgba(160, 78, 108, 0) 62%),
    radial-gradient(50% 46% at 4% 96%, rgba(168, 112, 84, .30) 0%, rgba(168, 112, 84, 0) 66%),
    repeating-radial-gradient(circle at 6% 6%, transparent 0 30px, var(--orn-zloto) 30px 31px);
  color: var(--na-ciemnym);
  padding-block: clamp(2.8rem, 1.6rem + 3.4vw, 5.6rem);
}
.pas--noc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, rgba(216, 184, 122, .1) 0%, var(--zloto-jasne) 50%, rgba(216, 184, 122, .1) 100%);
}
.pas--glebia { background-color: var(--papier); padding-block: 0 clamp(2rem, 1.2rem + 2.4vw, 4rem); padding-inline: clamp(10px, 2.2vw, 34px); }

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.2rem, 1.4rem + 2vw, 3.4rem) 0 .85rem;
  padding-block-start: clamp(1rem, .7rem + .9vw, 1.7rem);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.45rem, 1.05rem + 1.35vw, 2.35rem);
  line-height: 1.18; letter-spacing: -.01em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* cienka ZŁOTA kreska nad każdym nagłówkiem sekcji */
.tresc h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(46px, 6vw, 92px); height: 2px;
  background: linear-gradient(90deg, var(--akcent), rgba(216, 184, 122, .25));
}
.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: 1.24rem; line-height: 1.3; color: var(--atrament);
}

.tresc p { margin: 0 0 1.1em; }
.tresc p:last-child { margin-block-end: 0; }

.tresc .wprowadzenie { font-size: 1.1rem; }

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

/* --- 8. KAPSUŁKI (wyliczenia) ---------------------------------------- */
.tresc .wyliczenie {
  margin: .4em 0 1.7em; padding: 0; list-style: none;
  display: grid; gap: .6rem;
}
.tresc .wyliczenie li {
  position: relative;
  padding: .85em 1.25em .85em 2.9em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--linia-cicha);
  border-radius: 999px;
  color: var(--atrament);
}
.tresc .wyliczenie li::before {
  content: ""; position: absolute;
  inset-inline-start: 1.25em; inset-block-start: 1.35em;
  width: .62em; height: .62em; border-radius: 50%;
  background: var(--wiodaca);
  box-shadow: 0 0 0 4px rgba(107, 35, 80, .12);
}
@media (max-width: 640px) {
  .tresc .wyliczenie li { border-radius: var(--promien-karta); }
}

/* --- 9. PLAKIETKI KROKÓW --------------------------------------------- */
.tresc .kroki {
  margin: .6em 0 1.9em; padding: 0; list-style: none;
  counter-reset: krok;
  display: grid; gap: .75rem;
}
.tresc .kroki li {
  counter-increment: krok; position: relative;
  padding: 1.05em 1.3em 1.05em 4.2em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--zloto-jasne);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
}
.tresc .kroki li::before {
  content: counter(krok); position: absolute;
  inset-inline-start: 1.05em; inset-block-start: .95em;
  width: 2.2em; height: 2.2em;
  display: grid; place-items: center;
  background: var(--plakietka-tlo); color: var(--plakietka-tekst);
  border-radius: 12px;
  font-family: var(--krój-naglowek); font-weight: 700; font-size: 1.02em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

/* --- 10. ŹRÓDŁO ------------------------------------------------------ */
.tresc .zrodlo {
  margin: 1.4em 0 1.8em;
  padding: 1.05em 1.3em 1.05em 1.4em;
  background: var(--zrodlo-tlo);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--akcent);
  border-radius: var(--promien-karta);
  font-size: .95rem; line-height: 1.62;
  color: var(--atrament);
}

/* --- 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: .92rem; 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 .przejscie { margin-block: 1.6em 1.9em; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 52px;
  padding: .55em 1.5em .55em 1.35em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--linia-cicha);
  border-radius: 999px;
  font-weight: 600; font-size: 1rem; letter-spacing: .005em;
  color: var(--wiodaca-ciemna);
  text-decoration: none;
  box-shadow: 0 12px 26px -20px rgba(44, 15, 36, .6);
}
.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(--wiodaca-ciemna); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca-ciemna); border-radius: 999px;
  font-weight: 600; font-size: 1.02rem; letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 20px 40px -22px rgba(44, 15, 36, .85);
}
.tresc .przejscie a.przycisk::after { content: "→"; }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover {
  background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie);
}

/* --- 14. LISTA WPISÓW ------------------------------------------------ */
.tresc .lista-wpisow {
  margin: clamp(1.6rem, 1rem + 1.6vw, 2.8rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  counter-reset: wpis;
}
@media (min-width: 860px)  { .tresc .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1320px) { .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.3rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-plyta);
}
/* duża ozdobna cyfra — ornament, nie informacja (jest pseudoelementem) */
.tresc .zapowiedz::before {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-end: -.08em; inset-inline-end: .06em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 6rem; line-height: 1;
  color: var(--wiodaca-jasna);
  pointer-events: none;
}
.tresc .zapowiedz > * { position: relative; }
.tresc .zapowiedz__tytul {
  margin: 0 0 .6rem; padding: 0; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.16rem, 1.02rem + .5vw, 1.5rem); line-height: 1.26;
}
.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(--wiodaca); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1.2rem; color: var(--atrament-cichy); font-size: .98rem; }
.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: .88rem; letter-spacing: .1em; text-transform: uppercase;
  border-block-end: 2px solid var(--zloto-jasne);
}
.tresc .zapowiedz__wiecej a::after { content: "→"; }
.tresc .zapowiedz__wiecej a:hover { color: var(--wiodaca); border-block-end-color: var(--wiodaca); }

/* --- 15. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(60% 90% at 88% 0%, rgba(160, 78, 108, .38) 0%, rgba(160, 78, 108, 0) 62%),
    repeating-radial-gradient(circle at 8% 100%, transparent 0 30px, var(--orn-zloto) 30px 31px);
  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(--zloto-jasne) 0%, rgba(216, 184, 122, .1) 60%, rgba(216, 184, 122, .55) 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.05rem, .95rem + .32vw, 1.4rem);
  color: var(--na-ciemnym); letter-spacing: .005em;
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.5rem, 2vw, 1.7rem);
  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(--roz-jasny); font-weight: 500;
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--na-ciemnym); border-block-end-color: var(--zloto-jasne); }
.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(--zloto-jasne); border-radius: 999px;
  color: var(--zloto-jasne); text-decoration: none;
  font-size: .84rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--zloto-jasne); color: var(--glebia); }

/* --- 16. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 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: 80px; }
.próbka__opis {
  display: block; padding: .8rem 1rem;
  font-family: var(--krój-maszyna); font-size: .8rem;
  color: var(--atrament); line-height: 1.55;
}

/* --- 18. ARKUSZ SZEROKI — kompozycja powyżej 1366 px ------------------
   ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px, a odzyskana
   szerokość MA DOSTAĆ ROLĘ. Sam wąski tekst pośrodku szerokiego ekranu to
   nie jest skala — to ten sam układ z mniejszymi białymi polami po bokach.

   Do 1366 px układ zostaje BEZ ZMIAN (jedna kolumna, nagłówek nad prozą).
   Od 1440 px arkusz rozkłada się na trzy tory:

     ┌── BAREK ────┐ ┌──── PROZA ─────┐ ┌── MARGINALIA ──┐
     │ nagłówek H2 │ │ akapity, wzór, │ │ noty źródłowe  │
     │ + ornament  │ │ odsyłacz       │ │ (od 1700 px)   │
     └─────────────┘ └────────────────┘ └────────────────┘
                     └─ wyliczenia i kroki: proza + marginalia, 2 kolumny ─┘

   Efekt przy 1920: kolumna prozy zostaje WĄSKA (34rem ≈ 70 znaków, wcześniej
   lid hero rozciągał się na 870 px ≈ 87 znaków), a odzyskana szerokość niesie
   treść — nagłówek stoi OBOK tekstu, listy idą na dwie kolumny, noty źródłowe
   wychodzą na zewnętrzny margines. Marginesy pasma zostają nietknięte (110 px).

   ⚠ PUŁAPKA: „overflow-wrap: break-word" z <body> łamie nagłówek W ŚRODKU
   SŁOWA w wąskim barku i żadna bramka tego nie widzi. Barek dostaje `normal`.
   ⚠ PUŁAPKA: noty źródłowe i wyliczenia MUSZĄ zostać poza kolumną prozy albo
   razem z nią — akapit rozciągnięty na barek + prozę miałby ~110 znaków.
   ===================================================================== */
@media (min-width: 1440px) {
  :root {
    --bark:         17rem;                       /* zewnętrzna kolumna nagłówka */
    --bark-odstep:  clamp(2.2rem, 3vw, 3.6rem);  /* rynna między torami */
    --orn-bark:     var(--orn-sliwka-mocna);     /* ornament barku na jasnym */
  }
  .plyta--ciemna, .pas--noc { --orn-bark: var(--orn-zloto-mocna); }

  /* ⚠⚠ JEDNA KRAWĘDŹ — warunek konieczny barku.
     Do 1366 px proza stała w ŚRODKOWYM torze między dwiema szynami 1fr, więc
     szyny same pochłaniały to, że pasmo z płytą jest węższe od pozostałych
     (`.pas--plyta` ma własny padding, a `.plyta` obwódkę 1 px): tekst płyty
     i tekst pudru trafiały w tę samą krawędź. Barek jest torem STAŁYM po
     lewej, więc różnica przestaje się rozkładać po równo i cała ląduje po
     prawej — kolumna tekstu w płycie stawała o 1 px (przy 1920) i o 34 px
     (przy 1440–1560) na prawo od kolumny w pudrze. Gołym okiem widać to jako
     drgającą lewą krawędź akapitów, a bramka B13 zaczyna losować wzorzec
     kolumny między dwoma zaokrągleniami.
     Dlatego odstęp płyty od krawędzi ekranu przenosimy z PASMA do wspólnej
     szerokości arkusza, a obwódkę płyty kompensujemy paddingiem. Wszystkie
     kontenery — hero, pasma, płyty, rama nagłówka i stopki — mają odtąd
     identyczną szerokość i identyczną lewą krawędź tekstu. */
  :root { --pas-szer: min(82rem, calc(100vw - 68px)); }
  .pas--plyta, .pas--glebia { padding-inline: 0; }
  .plyta { padding-inline: calc(var(--margines) - 1px); }

  /* trzy tory zamiast dwóch pustych szyn */
  .pas > .kontener,
  .kontener--hero {
    grid-template-columns:
      [pelna-start bark-start] minmax(0, var(--bark))
      [bark-end tekst-start] minmax(0, var(--kolumna))
      [tekst-end dop-start] minmax(0, 1fr) [dop-end pelna-end];
    column-gap: var(--bark-odstep);
  }

  /* NAGŁÓWEK SEKCJI wychodzi spod prozy i staje się nagłówkiem barku.
     ⚠ tylko bezpośrednie dziecko kontenera — h2 kart bloga zostaje w karcie. */
  .pas > .kontener > h2 {
    grid-column: bark-start / bark-end;
    align-self: start;
    margin: 0;
    padding-block-start: clamp(.8rem, .5rem + .5vw, 1.15rem);
    font-size: clamp(1.5rem, 1.05rem + .85vw, 2rem);
    line-height: 1.14;
    overflow-wrap: normal;            /* ⚠ nie łamać nagłówka w środku słowa */
    hyphens: auto;
  }
  .pas > .kontener > h2::before { width: clamp(52px, 4.2vw, 84px); }
  /* ORNAMENT BARKU — koncentryczne warstwy pod nagłówkiem, czysta dekoracja
     (pseudoelement, zero treści). Wypełnia tor, którego nie zajmuje proza. */
  .pas > .kontener > h2::after {
    content: "";
    position: absolute; pointer-events: none;
    inset-inline-start: 0;
    inset-block-start: calc(100% + clamp(1.6rem, 2vw, 2.8rem));
    width: min(100%, 15rem);
    height: clamp(96px, 8vw, 168px);
    background: repeating-radial-gradient(circle at 4% 100%,
      transparent 0 25px, var(--orn-bark) 25px 26px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.15) 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.15) 78%, transparent 100%);
  }

  /* pasmo wstępu nie ma nagłówka — barek dostaje sam znak warstw */
  .pas--wstep > .kontener::before {
    content: "";
    grid-column: bark-start / bark-end;
    align-self: start;
    margin-block-start: .55rem;
    height: clamp(58px, 5vw, 96px);
    background:
      linear-gradient(90deg, var(--wiodaca), rgba(107, 35, 80, 0)) left top / 100% 2px no-repeat,
      linear-gradient(90deg, rgba(107, 35, 80, .70), rgba(107, 35, 80, 0)) left 0 top 16px / 74% 2px no-repeat,
      linear-gradient(90deg, rgba(107, 35, 80, .50), rgba(107, 35, 80, 0)) left 0 top 32px / 52% 2px no-repeat,
      linear-gradient(90deg, rgba(107, 35, 80, .32), rgba(107, 35, 80, 0)) left 0 top 48px / 32% 2px no-repeat;
  }

  /* MARGINALIA nigdy nie są pustym polem: zewnętrzny tor niesie noty źródłowe
     (od 1700 px), listy i karty, a pod nimi — na całej wysokości pasma — leży
     ornament warstw. Bez niego prawa strona arkusza zostawała biała i wracał
     dokładnie ten problem, od którego zaczęliśmy: mniejszy margines zamiast
     większej treści.
     ⚠ ornament jest POZYCJONOWANY ABSOLUTNIE, więc nie jest elementem siatki
     i nie miesza kolejności wierszy; dzieci dostają z-index 1, żeby karty
     bloga nie zniknęły pod nim. */
  .pas > .kontener > * { position: relative; z-index: 1; }
  .pas > .kontener::after {
    content: "";
    position: absolute; z-index: 0; pointer-events: none;
    inset-block: clamp(1.6rem, 2.2vw, 3rem);
    inset-inline-end: var(--margines);
    width: clamp(190px, 17.5vw, 336px);
    background: repeating-radial-gradient(circle at 108% 30%,
      transparent 0 29px, var(--orn-bark) 29px 30px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 52%, #000 100%);
  }

  /* WYLICZENIA I KROKI — proza + marginalia, dwa tory zamiast jednego */
  .pas > .kontener > .wyliczenie,
  .pas > .kontener > .kroki {
    grid-column: tekst-start / dop-end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(.75rem, 1.1vw, 1.3rem);
  }

  /* HERO — tytuł na pełnym arkuszu, lid dosunięty do kolumny prozy widoku,
     żeby zapowiedź stała dokładnie nad torem, w którym płynie tekst.
     ⚠ 42rem dawało przy 1920 wiersz 870 px (≈87 znaków) — stąd 40rem. */
  .hero .kontener--hero > .tytul { grid-column: pelna-start / pelna-end; }
  .hero .kontener--hero > .lid {
    grid-column: tekst-start / dop-end;
    max-width: 40rem;
  }
  /* znak warstw w barku hero — na wysokości lidu, wiąże tytuł z kolumną tekstu */
  .hero .kontener--hero::after {
    content: "";
    grid-column: bark-start / bark-end;
    align-self: start;
    margin-block-start: .7rem;
    height: clamp(58px, 5vw, 96px);
    background:
      linear-gradient(90deg, var(--zloto-jasne), rgba(216, 184, 122, 0)) left top / 100% 2px no-repeat,
      linear-gradient(90deg, rgba(216, 184, 122, .70), rgba(216, 184, 122, 0)) left 0 top 16px / 74% 2px no-repeat,
      linear-gradient(90deg, rgba(216, 184, 122, .50), rgba(216, 184, 122, 0)) left 0 top 32px / 52% 2px no-repeat,
      linear-gradient(90deg, rgba(216, 184, 122, .32), rgba(216, 184, 122, 0)) left 0 top 48px / 32% 2px no-repeat;
  }
}

/* Od 1700 px tor marginaliów jest już dość szeroki na notę źródłową (~35
   znaków). Nota wychodzi z kolumny prozy na zewnętrzny margines i staje
   dokładnie przy akapicie, który opisuje — proza przestaje być nią przerywana. */
@media (min-width: 1700px) {
  .pas > .kontener > .zrodlo {
    grid-column: dop-start / dop-end;
    align-self: start;
    margin-block: .35em 1.2em;
    padding: .85em 1em .85em 1.1em;
    font-size: .88rem; line-height: 1.58;
  }
  /* ODSYŁACZ KIERUNKOWY też wychodzi na margines i staje się kartą następnego
     kroku. W torze o szerokości ~335 px kapsułka i tak łamałaby się na dwa
     wiersze, więc dostaje prostokątny promień i strzałkę dosuniętą do prawej
     — czytelniej niż dwuwierszowa pigułka.
     ⚠ kolejność czytania zostaje: karta stoi PO akapicie, który zamyka sekcję. */
  .pas > .kontener > .przejscie {
    grid-column: dop-start / dop-end;
    align-self: start;
    margin-block: .35em 1.2em;
  }
  .tresc .pas > .kontener > .przejscie a,
  .pas > .kontener > .przejscie a.przycisk {
    display: flex; width: 100%;
    justify-content: space-between; align-items: center;
    gap: 1em;
    padding: 1.05em 1.15em;
    border-radius: var(--promien-karta);
    text-align: start;
    line-height: 1.4;
  }
  .pas > .kontener > .przejscie a::after { margin-inline-start: auto; }
}

/* --- 17. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; }
  .naglowek { position: static; box-shadow: none; }
  .hero, .stopka, .plyta--ciemna {
    background: #FFFFFF !important; color: #000000 !important;
  }
  .hero__warstwy, .hero__poswiata, .hero::after, .stopka::before { display: none !important; }
  .plyta { box-shadow: none; margin-block-start: 0; }
  .pas--puder, .pas--wstep { background: #FFFFFF; }
  a { color: #000000; }
}