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

   Idea: balsam to CIEPŁA MASA ZAMKNIĘTA W PUSZCE. Widok jest złożony jak
   taka puszka rozłożona na warstwy: ciemny palisander wieczka (hero, pas
   nocny, stopka), złota nitka rantu, kość słoniowa podłoża (płyty treści)
   i terakota substancji czynnej (pasma, punktory, przyciski). Ornament to
   wyłącznie abstrakcyjna geometria: rytm rombów i wachlarz promieni —
   żadnego symbolu, cytatu kulturowego ani znaku religijnego.

   ⚠ 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-1-2).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne — kość słoniowa i piasek */
  --papier:          #F7F0E4;   /* kość słoniowa — podłoże widoków */
  --papier-karta:    #FFFAF2;   /* płyta, karta, słoiczek */
  --tlo-2:           #EFDFC9;   /* piasek — pasmo drugoplanowe */
  --wiodaca-jasna:   #F6DCC6;   /* rozcieńczona terakota: pola, punktory */
  /* pismo */
  --atrament:        #221310;   /* palisandrowa czerń */
  --atrament-cichy:  #57433C;
  /* barwa wiodąca */
  --wiodaca:         #A03B17;   /* terakota — powierzchnie i kreski */
  --wiodaca-ciemna:  #7C2A0E;   /* nagłówki i odsyłacze na jasnym */
  --akcent:          #7B5714;   /* złoto przygaszone — tekst akcentu */
  --linia:           #8C6C5C;
  --linia-cicha:     #E3D2BC;
  --na-wiodacej:     #FFFAF2;
  --na-akcencie:     #FFFAF2;

  /* powierzchnie ciemne — palisander */
  --glebia:          #2B1611;
  --glebia-2:        #1A0D0A;
  --panel:           #3A1D16;
  --kapsula-ciemna:  #46251B;
  --na-ciemnym:      #F8F0E4;
  --zloto:           #DDB061;
  --terakota-jasna:  #EFA97F;
  --sepia-pismo:     #E7CBB4;

  /* ornament — wyłącznie dekoracja, nigdy nośnik informacji */
  --orn-terakota:     rgba(160, 59, 23, .10);
  --orn-terakota-m:   rgba(160, 59, 23, .12);
  --orn-terakota-c:   rgba(160, 59, 23, .055);
  --orn-zloto:        rgba(221, 176, 97, .14);
  --orn-zloto-m:      rgba(221, 176, 97, .19);
  --orn-kosc:         rgba(248, 240, 228, .12);

  /* KRATA ROMBÓW — dwie ukośne siatki, rytm zapożyczony z geometrii,
     nie z żadnego konkretnego wzoru kulturowego. */
  --krata-jasna:
    repeating-linear-gradient(45deg, transparent 0 27px, var(--orn-terakota) 27px 28px),
    repeating-linear-gradient(-45deg, transparent 0 27px, var(--orn-terakota) 27px 28px);
  /* wariant cichy — pod płytę, żeby biel nie była pustą kartką */
  --krata-cicha:
    repeating-linear-gradient(45deg, transparent 0 39px, var(--orn-terakota-c) 39px 40px),
    repeating-linear-gradient(-45deg, transparent 0 39px, var(--orn-terakota-c) 39px 40px);
  --krata-ciemna:
    repeating-linear-gradient(45deg, transparent 0 30px, var(--orn-zloto) 30px 31px),
    repeating-linear-gradient(-45deg, transparent 0 30px, var(--orn-zloto) 30px 31px);
  /* WACHLARZ PROMIENI — pole rozchodzących się kresek */
  --promienie:
    repeating-conic-gradient(from 200deg at 96% 0%,
      var(--orn-terakota-m) 0deg .55deg, transparent .55deg 6.4deg);
  --promienie-zloto:
    repeating-conic-gradient(from 168deg at 4% 100%,
      var(--orn-zloto-m) 0deg .5deg, transparent .5deg 5.6deg);

  --kroj-naglowek: "Cormorant Garamond", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --kroj-tekst:    "Karla", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-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.
     Jednostka ch w kroju o wąskim zerze zawyża liczbę znaków w wierszu. */
  --kolumna:        38rem;   /* kolumna prozy — 714 px @1366, 787 px @1920 */
  /* ⚠⚠ NAPRAWA SKALI 2026-09-01. Było: `--pas-szer: 68rem` (1409 px @1920)
     PLUS `padding-inline: var(--margines)` (104 px) — margines liczony DWA
     RAZY, więc przy 1920 po bokach zostawało 256 px zamiast ~95 px.
     Teraz `--pas-szer` to szerokość CAŁEJ ramy RAZEM z wypełnieniem, a odstęp
     od krawędzi okna daje osobny `--luz-strony`. Suma jest jedna i widoczna. */
  --pas-szer:       1740px;                        /* rama treści z wypełnieniem */
  --margines:       clamp(20px, 3.6vw, 68px);      /* wypełnienie WEWNĄTRZ ramy */
  --luz-strony:     clamp(0px, calc(3.6vw - 24px), 48px);  /* odstęp od krawędzi okna */
  --szyna-gap:      clamp(2.2rem, 2.6vw, 3.6rem);  /* prześwit szyna↔kolumna (≥1500) */

  --promien:        6px;
  --promien-karta:  20px;
  --promien-plyta:  26px;
  --promien-sloik:  32px;
  --cien-plyta:     0 30px 64px -30px rgba(34, 19, 16, .42), 0 2px 10px -4px rgba(34, 19, 16, .16);
  --cien-karta:     0 20px 40px -24px rgba(34, 19, 16, .44), 0 1px 4px -2px rgba(34, 19, 16, .14);
  --cien-sloik:     0 26px 52px -26px rgba(34, 19, 16, .48), 0 2px 6px -3px rgba(34, 19, 16, .18);
  --zachodzenie:    clamp(1.8rem, 1.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.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--kroj-tekst);
  font-size: 1rem;
  line-height: 1.72;
  overflow-wrap: break-word;
}
/* ⚠ pułapka 6: „clip" leczy przepełnienia pasm full-bleed, nie psując sticky */
@supports (overflow-x: clip) { body { overflow-x: clip; } }

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

:focus-visible {
  outline: 3px solid var(--wiodaca);
  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: 700; letter-spacing: .04em; text-decoration: none;
  border-radius: 0 0 var(--promien-karta) 0;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy) */
.rama {
  width: min(calc(100% - 2 * var(--luz-strony)), 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: min(calc(100% - 2 * var(--luz-strony)), 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 > .probki { grid-column: pelna-start / pelna-end; }
/* ⚠ JEDNA KRAWĘDŹ: hero zaczyna się dokładnie tam, gdzie proza widoku,
   a rośnie w prawo — tytuł stoi 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-color: var(--papier);
  background-image: var(--krata-jasna);
  background-position: center;
  box-shadow: 0 12px 34px -28px rgba(34, 19, 16, .7);
}
/* rant wieczka — złota nitka pod paskiem nagłówka */
.naglowek::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg,
    var(--wiodaca) 0%, var(--zloto) 34%, var(--wiodaca) 62%, var(--tlo-2) 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, T9) */
.znak {
  display: inline-flex; align-items: center; min-height: 46px;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + .55vw, 1.85rem);
  line-height: 1.15; letter-spacing: .015em;
  text-decoration: none; color: var(--wiodaca-ciemna);
  padding-inline-end: .2em;
}
.znak .znak__tekst { position: relative; padding-block-end: .16em; }
.znak .znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 2.2em; height: 2px;
  background: linear-gradient(90deg, var(--wiodaca), var(--zloto));
  transition: width .28s ease;
}
.znak:hover .znak__tekst::after { width: 100%; }

/* ⚠ pułapka B5: nawigacja MA się kurczyć i zawijać — menu stoi na zwykłej
   liście, bez <details>, więc pułapka T7 (::details-content) nie występuje. */
.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, 1vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 760px) {
  .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: .8em;
  font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--atrament-cichy);
}
/* romb pod pozycją menu — znak rytmu, nie ikona niosąca treść */
.menu__link::after {
  content: ""; position: absolute; inset-block-end: .5rem;
  inset-inline-start: calc(50% - 3px);
  width: 6px; height: 6px; transform: rotate(45deg) scale(0);
  background: var(--wiodaca); transition: transform .25s ease;
}
.menu__link:hover { color: var(--wiodaca-ciemna); }
.menu__link:hover::after { transform: rotate(45deg) scale(1); }
.menu__link[aria-current="page"] { color: var(--wiodaca-ciemna); }
.menu__link[aria-current="page"]::after {
  transform: rotate(45deg) scale(1);
  background: var(--zloto); box-shadow: 0 0 0 1px var(--wiodaca);
}

/* --- 5. HERO — ciemny panel palisandrowy ----------------------------- */
.tresc { display: block; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(74% 66% at 84% 4%, rgba(176, 66, 26, .70) 0%, rgba(176, 66, 26, 0) 62%),
    radial-gradient(58% 54% at 4% 98%, rgba(221, 176, 97, .26) 0%, rgba(221, 176, 97, 0) 66%),
    var(--krata-ciemna),
    linear-gradient(158deg, #6A2A18 0%, #3A1B13 44%, #1A0D0A 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3.2rem, 1.6rem + 5.4vw, 8rem) clamp(4.6rem, 2.4rem + 6.4vw, 10rem);
}
/* ZĄBKOWANY RANT — pasek rombów, którym kość słoniowa wchodzi pod hero */
.hero::after {
  content: ""; position: absolute; z-index: 2;   /* ⚠ rant zamyka hero NAD ornamentem */
  inset-inline: -2%; inset-block-end: -1px;
  height: clamp(18px, 1.6vw, 30px);
  background:
    linear-gradient(var(--papier), var(--papier)) center bottom / 100% 46% no-repeat,
    repeating-conic-gradient(from 135deg at 50% 0%,
      var(--papier) 0deg 90deg, transparent 90deg 360deg) 0 0 / clamp(26px, 2.4vw, 44px) 100%;
}
.hero__zar {
  position: absolute; z-index: 0;
  inset-block-start: -26%; inset-inline-start: -14%;
  width: clamp(300px, 42vw, 820px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 169, 127, .26) 0%, rgba(239, 169, 127, 0) 66%);
  pointer-events: none;
}
.hero .kontener { position: relative; z-index: 1; }

.hero .tytul {
  margin: 0 0 clamp(1.1rem, .7rem + 1.1vw, 2.1rem);
  max-width: 15em;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(2.4rem, 1.25rem + 3.4vw, 5.4rem);
  line-height: 1.03; letter-spacing: -.014em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
/* złota linia z rombem — sygnał wieczka nad tytułem */
.hero .tytul::before {
  content: ""; display: block;
  width: clamp(70px, 10vw, 168px); height: 3px;
  margin-block-end: clamp(1.1rem, .8rem + 1.1vw, 2.3rem);
  background:
    linear-gradient(90deg, var(--zloto) 0%, rgba(221, 176, 97, .12) 100%);
}

/* ⚠⚠ NAPRAWA PO RECENZJI (zarzuty 1 i 2): ornament hero NIE JEST JUŻ wieszany
   na krawędzi okna i wygaszany maską. Maska jest miękka i zależy od szerokości
   okna, więc przy 768–1150 px lity romb rozety wchodził POD litery akapitu
   wiodącego (1,6:1). Teraz odstęp jest GEOMETRYCZNY: akapit i ornament stoją
   w dwóch osobnych kolumnach jednej siatki, a odstęp między nimi (column-gap)
   nigdzie nie schodzi poniżej 40 px. Poniżej 900 px ornament schodzi POD tekst
   — jest kolejnym wierszem siatki, więc kolizja jest niemożliwa z definicji.
   ⚠ Ornament stoi w wierszu AKAPITU, nie całego hero: dzięki temu H1 zachowuje
   pełną miarę (dwa wiersze przy 1920) i nie musi być zwężany. */
.hero__dol {
  display: grid;
  /* ⚠ dolny próg 2,6rem: gdy ornament stoi POD akapitem (poniżej 900 px),
     prześwit pionowy nie schodzi poniżej ~41 px — ten sam luz co w poziomie */
  row-gap: clamp(2.6rem, 1.6rem + 1.6vw, 3.6rem);
}
@media (min-width: 900px) {
  .hero__dol {
    grid-template-columns: minmax(0, min(var(--kolumna), 66%)) minmax(0, 1fr);
    /* ⚠ DOLNY PRÓG 2,5rem = min. 40 px prześwitu przy KAŻDEJ szerokości ≥900 px */
    column-gap: clamp(2.5rem, 1rem + 2vw, 4.4rem);
    align-items: start;
  }
}

.hero .lid {
  margin: 0; max-width: 100%;
  font-size: clamp(1.06rem, .98rem + .34vw, 1.34rem);
  line-height: 1.62;
  color: var(--sepia-pismo);
  text-wrap: pretty;            /* ⚠ zarzut „SIEROTA": ostatni wiersz nie jednowyrazowy */
}

/* ORNAMENT: rozeta promieni i rombów (inline SVG) — bez treści, aria-hidden.
   Komórka siatki wyznacza początek ornamentu; rysunek wychodzi z niej w prawo
   i w dół, a przycina go overflow hero. */
.hero__rozeta {
  position: relative; display: block;
  block-size: clamp(150px, 44vw, 240px);
  color: var(--zloto);          /* B6: barwa ornamentu wobec tła hero — 8,53:1 */
  pointer-events: none;
}
.hero__rozeta svg {
  position: absolute; display: block; height: auto; max-width: none;
  inset-block-start: 0;
  inset-inline-start: 50%; transform: translateX(-50%);
  width: min(92vw, 420px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, #000 26%, rgba(0,0,0,.26) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, #000 26%, rgba(0,0,0,.26) 100%);
}
@media (min-width: 900px) {
  .hero__rozeta { block-size: clamp(210px, 20vw, 400px); }
  .hero__rozeta svg {
    inset-inline-start: 0; transform: none;
    /* ⚠⚠ ŚRODEK ROZETY MUSI TRAFIĆ W KADR. Rysunek zaczyna się na lewej krawędzi
       swojej komórki, więc jego szerokość wyznacza, gdzie wypadnie środek: przy
       zbyt szerokim rysunku w kadrze zostaje sama rzadka obwódka promieni i hero
       wygląda na pusty. Dwa człony max() opisują dwa zakresy (do 1366 px kadr
       rośnie z oknem, powyżej — kontener stoi, a margines rośnie szybciej). */
    width: clamp(340px, max(56vw - 150px, 91vw - 630px), 880px);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.34) 0%, rgba(0,0,0,.8) 22%, #000 48%);
            mask-image: linear-gradient(to right, rgba(0,0,0,.34) 0%, rgba(0,0,0,.8) 22%, #000 48%);
  }
}

/* wiązanie wyrazów — jedyny sposób na usunięcie sieroty i wiszącego przyimka
   BEZ dotykania treści: widoczny tekst zostaje co do znaku, zmienia się tylko
   miejsce, w którym wolno złamać wiersz. */
.spójka { white-space: nowrap; }

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

/* pasmo wstępu — piasek z wachlarzem promieni */
.pas--wstep {
  overflow: hidden;
  background-color: var(--tlo-2);
  background-image: var(--promienie);
  padding-block: clamp(2.6rem, 1.4rem + 3.4vw, 5.6rem);
}
.pas--wstep .kontener > p:first-child {
  font-size: clamp(1.02rem, .96rem + .26vw, 1.22rem);
  line-height: 1.68; color: var(--atrament);
}

/* pasmo, na którym leży PŁYTA nachodząca na sąsiada */
.pas--plyta {
  background-color: var(--papier);
  background-image: var(--krata-jasna);
  background-position: center;
  padding-block: 0 clamp(1.6rem, 1rem + 2vw, 3.6rem);
}
/* ⚠ PŁYTA MA STAĆ W TEJ SAMEJ OSI CO PASMA. Wcięcie płyty od krawędzi okna
   dawało wcześniej wypełnienie pasma, ale wtedy 100% wewnątrz `.kontener`
   znaczyło co innego niż w pasmach bez wypełnienia i po zdjęciu podwójnego
   marginesu obie krawędzie rozjeżdżały się o 30 px. Wcięcie jest teraz
   „luzem strony" samej płyty: `max()` bierze większy z dwóch — przy 390 px
   wygrywa 10 px płyty (jak dotąd), przy 1920 px wspólny luz strony. */
.pas--plyta > .kontener {
  --luz-strony: max(clamp(0px, calc(3.6vw - 24px), 48px), clamp(10px, 2.2vw, 34px));
}
.plyta {
  position: relative; z-index: 2;
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 4.2rem);
  /* ⚠⚠ OBWÓDKA PŁYTY ODJĘTA OD WYPEŁNIENIA. Płyta ma 1 px obwódki, pasma nie
     mają żadnej, więc jej pole treści zaczynało się 1 px dalej niż w paśmie.
     Przy szynach 1fr:1fr błąd rozkładał się po połowie i znikał w zaokrągleniu;
     przy szynach .75fr:.25fr rozjechał kolumnę prozy na 745 i 746 px, a bramka
     B13 brała wtedy PRÓBKĘ Z INNEJ SEKCJI przy 1366 niż przy 1920 i zgłaszała
     „pismo prozy nie rośnie". Jedna krawędź dla płyt i pasm — jedna próbka. */
  padding-inline: calc(var(--margines) - 1px);
  background-color: var(--papier-karta);
  background-image: var(--krata-cicha);
  background-position: center;
  border-radius: var(--promien-plyta);
  box-shadow: var(--cien-plyta);
  border: 1px solid var(--linia-cicha);
  overflow: hidden;
}
/* gzyms płyty: złota nitka + romb w narożniku */
.plyta::before {
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline: clamp(26px, 9%, 160px); height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--wiodaca), var(--zloto) 66%, rgba(221, 176, 97, .12));
}
.plyta::after {
  content: ""; position: absolute; z-index: 0;
  inset-block-start: clamp(-90px, -6vw, -40px); inset-inline-end: clamp(-90px, -6vw, -40px);
  width: clamp(150px, 16vw, 280px); aspect-ratio: 1;
  transform: rotate(45deg);
  border: 1px solid var(--linia-cicha);
  background: linear-gradient(135deg, var(--wiodaca-jasna), rgba(246, 220, 198, 0));
  pointer-events: none;
}
.plyta > * { position: relative; z-index: 1; }

/* pasmo piaskowe — krata rombów */
.pas--piasek {
  overflow: hidden;
  background-color: var(--tlo-2);
  background-image: var(--krata-jasna);
  background-position: center;
  padding-block: clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem);
}
/* pasmo żaru — rozcieńczona terakota z wachlarzem */
.pas--zar {
  overflow: hidden;
  background-color: var(--wiodaca-jasna);
  background-image: var(--promienie);
  padding-block: clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem);
}
/* ⚠⚠ NAPRAWA PO RECENZJI (zarzut „RYTM"): płyta wjeżdża na pasmo ujemnym
   marginesem `--zachodzenie`, więc ostatni wiersz akapitu pasma kończył się
   31 px nad złotym gzymsem płyty, przy 136 px wypełnienia samej płyty (1:4).
   Pasmo, po którym idzie płyta, ODDAJE tę wysokość z powrotem — pod ostatnim
   wierszem zostaje co najmniej jedna pełna interlinia powietrza. */
.pas--wstep:has(+ .pas--plyta),
.pas--piasek:has(+ .pas--plyta),
.pas--zar:has(+ .pas--plyta) {
  padding-block-end: calc(clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem) + var(--zachodzenie));
}

/* ⚠ NAPRAWA PO RECENZJI (zarzut „POWTÓRZENIE"): identyczna biała płyta wracała
   trzy razy pod rząd. Co druga stoi teraz na piaskowym podłożu, w odwróconym
   układzie figura–tło: pasmo jaśnieje do koloru karty, płyta ciemnieje do
   piasku. Jeden parametr systemu, żadnego nowego komponentu.
   Pomiar: atrament #221310 na piasku #EFDFC9 = 13,75:1; nagłówek #7C2A0E =
   7,32:1; obwódka #8C6C5C = 3,64:1. */
.pas--plyta--piasek { background-color: var(--papier-karta); }
.plyta--piasek {
  background-color: var(--tlo-2);
  background-image: var(--krata-cicha);
  border-color: var(--linia);
}
.plyta--piasek::before {
  background: linear-gradient(90deg, var(--zloto), var(--wiodaca) 58%, rgba(160, 59, 23, .12));
}
.plyta--piasek::after {
  border-color: var(--linia);
  background: linear-gradient(135deg, var(--papier-karta), rgba(255, 250, 242, 0));
}

/* pasmo nocne — palisander na całą szerokość */
.pas--noc {
  position: relative; overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(62% 58% at 88% 6%, rgba(176, 66, 26, .46) 0%, rgba(176, 66, 26, 0) 62%),
    var(--promienie-zloto),
    var(--krata-ciemna);
  color: var(--na-ciemnym);
  padding-block: clamp(2.8rem, 1.6rem + 3.6vw, 6rem);
}
.pas--noc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, rgba(221, 176, 97, .12) 0%, var(--zloto) 48%, rgba(221, 176, 97, .12) 100%);
}

/* CIEMNE POWIERZCHNIE — nadpisujemy TOKENY, więc każdy komponent w środku
   dostaje wariant na ciemnym bez osobnych reguł (pułapka „globalny kolor
   na powierzchni o odwrotnej jasności").
   ⚠ Reguła MUSI obejmować także `.pas--noc`: bez tego nagłówek sekcji
   w paśmie nocnym zostawał w barwie wiodącej ciemnej (1,79:1), a karta
   wykazu malowała jasny prostokąt pod jasnym pismem (1,09:1). */
.plyta--ciemna, .pas--noc {
  --papier:          var(--glebia);
  --papier-karta:    var(--panel);
  --tlo-2:           var(--kapsula-ciemna);
  --wiodaca-jasna:   var(--kapsula-ciemna);
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--sepia-pismo);
  --wiodaca:         var(--zloto);
  --wiodaca-ciemna:  var(--terakota-jasna);
  --na-wiodacej:     var(--glebia);
  --akcent:          var(--zloto);
  --na-akcencie:     var(--glebia);
  --linia:           #B08464;
  --linia-cicha:     #5C3325;
  color: var(--na-ciemnym);
}
.plyta--ciemna {
  background-color: var(--glebia);
  background-image:
    radial-gradient(72% 62% at 90% 2%, rgba(176, 66, 26, .40) 0%, rgba(176, 66, 26, 0) 60%),
    var(--krata-ciemna);
  border-color: #5C3325;
}
.plyta--ciemna::after {
  border-color: #5C3325;
  background: linear-gradient(135deg, rgba(221, 176, 97, .16), rgba(221, 176, 97, 0));
}

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.4rem, 1.5rem + 2.2vw, 3.8rem) 0 .8rem;
  padding-block-start: clamp(1.5rem, 1rem + 1.3vw, 2.4rem);
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.7rem, 1.15rem + 1.9vw, 3rem);
  line-height: 1.12; letter-spacing: -.008em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* romb + złota nitka nad nagłówkiem sekcji */
.tresc h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 13px; height: 13px; transform: rotate(45deg) translate(-1px, -1px);
  background: var(--wiodaca);
}
.tresc h2::after {
  content: ""; position: absolute; inset-block-start: 6px; inset-inline-start: 24px;
  width: clamp(48px, 8vw, 130px); height: 2px;
  background: linear-gradient(90deg, var(--zloto), rgba(221, 176, 97, .1));
}
.kontener > h2:first-child, .plyta > h2:first-child { margin-block-start: 0; }

.tresc h3 {
  position: relative;
  margin: clamp(1.7rem, 1.1rem + 1.3vw, 2.6rem) 0 .45rem;
  padding-inline-start: 1.35em;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.85rem);
  line-height: 1.24; letter-spacing: .002em;
  color: var(--atrament);
}
.tresc h3::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: .52em;
  width: .5em; height: .5em; transform: rotate(45deg);
  border: 2px solid var(--wiodaca);
}

.tresc p { margin: 0 0 1.15em; }
.tresc p:last-child { margin-block-end: 0; }
.tresc .wprowadzenie { font-size: clamp(1.02rem, .96rem + .26vw, 1.22rem); }

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

/* --- 8. SKŁAD — wykaz w postaci kropli ------------------------------- */
/* Komponent grupujący krótkie akapity źródła, które CZYTA SIĘ jak wykaz.
   Tekst zostaje 1:1, zmienia się wyłącznie oprawa. Punktor to kropla
   balsamu: koło ścięte w jednym narożniku, obrócone o 45°. */
.tresc .sklad {
  margin: 1.5em 0 2em;
  display: grid; gap: .7rem;
  padding: clamp(1rem, .6rem + 1.2vw, 1.7rem);
  background: var(--wiodaca-jasna);
  background-image: var(--krata-jasna);
  background-position: center;
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-plyta);
}
.tresc .sklad > p {
  position: relative; margin: 0;
  padding: .9em 1.25em .9em 3.2em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta) var(--promien-karta) var(--promien-karta) 6px;
  box-shadow: 0 10px 22px -18px rgba(34, 19, 16, .5);
}
.tresc .sklad > p::before {
  content: ""; position: absolute;
  inset-inline-start: 1.25em; inset-block-start: 1.28em;
  width: .68em; height: .68em;
  background: var(--wiodaca);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 0 4px rgba(160, 59, 23, .13);
}

/* --- 9. KATEGORIE — bloki z rombem i cyfrą --------------------------- */
.tresc .kategorie {
  margin: 1.5em 0 2em;
  display: grid; gap: 1rem;
  counter-reset: kat;
}
.tresc .kategorie > p {
  counter-increment: kat;
  position: relative; margin: 0;
  padding: 1.2em 1.4em 1.2em 4.6em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--wiodaca);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
}
/* romb pod cyfrą (::before) i sama cyfra (::after) — ornament + numer */
.tresc .kategorie > p::before {
  content: ""; position: absolute;
  inset-inline-start: 1.15em; inset-block-start: 1.05em;
  width: 2.3em; height: 2.3em; transform: rotate(45deg);
  background: var(--wiodaca-jasna);
  border: 1px solid var(--wiodaca);
  border-radius: 6px;
}
.tresc .kategorie > p::after {
  content: counter(kat, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 1.15em; inset-block-start: 1.05em;
  width: 2.3em; height: 2.3em;
  display: grid; place-items: center;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: 1.02em; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--wiodaca-ciemna);
}

/* --- 9b. TRÓJKA PODPUNKTÓW I SZEROKIE PASMA -------------------------- */
/* ⚠ NAPRAWA PO RECENZJI (zarzut „SKALA POWYŻEJ 1600"): kolumna 745 px stała
   w paśmie 1920 px, więc 1175 px szerokości było samym tłem, a wachlarz
   promieni prowadził oko w pustkę. Powyżej 1600 px treść pasma WYCHODZI
   w prawą połowę: trzy podpunkty z rombami stają się tryptykiem na całą
   szerokość pasma, a pasmo żaru o kształcie „nagłówek + dwa akapity" składa
   się w dwie kolumny. Kolumna prozy mierzona przez B13 (bezpośrednie akapity
   .kontener) pozostaje nietknięta. */
.tresc .pary { grid-column: tekst-start / tekst-end; display: grid; }
.tresc .para > h3 { margin-block-start: clamp(1.7rem, 1.1rem + 1.3vw, 2.6rem); }
.tresc .pary > .para:first-child > h3 { margin-block-start: 0; }
@media (min-width: 1500px) {
  .tresc .pary {
    grid-column: pelna-start / pelna-end;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;          /* 1: nagłówek, 2: proza */
    column-gap: clamp(2.6rem, 3vw, 4.4rem);
    margin-block-start: clamp(1.6rem, 1.2rem + .8vw, 2.6rem);
  }
  /* ⚠⚠ A23: rząd trzech kolumn ROZJEŻDŻAŁ SIĘ. Każda kolumna była osobnym
     pudełkiem, więc proza zaczynała się tam, gdzie skończył się WŁASNY
     nagłówek. Nagłówek środkowej kolumny („Co jest w środku") mieści się
     w jednym wierszu, skrajne łamią się na dwa — i akapit środkowy startował
     o cały wiersz wyżej (pomiar: 42 px przy 1920, 39 px przy 1600, 37 px przy
     1500). Romby i nagłówki stały w jednej linii, bloki tekstu pod nimi nie.
     `subgrid` wpina wiersze kolumny w wiersze rzędu: wszystkie nagłówki
     dostają wysokość najwyższego z nich, a cała proza rusza z jednej linii —
     niezależnie od tego, na ile wierszy złamie się który nagłówek.
     Poniżej 1500 px kolumny stoją jedna pod drugą i reguła nie działa.
     ⚠ `align-items: start` MUSIAŁO stąd zniknąć: kolumna wpięta w subgrid
     musi rozciągać się na oba wiersze rzędu, inaczej nie ma czego wpinać. */
  .tresc .pary > .para {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .tresc .pary > .para > h3 { margin-block-start: 0; align-self: start; }
  .tresc .pary > .para > p  { align-self: start; }
}

/* --- 10. WYLICZENIE I KROKI (arkusz systemu, zapas dla motywu) -------- */
.tresc .wyliczenie {
  margin: .5em 0 1.8em; padding: 0; list-style: none;
  display: grid; gap: .6rem;
}
.tresc .wyliczenie li {
  position: relative;
  padding: .8em 1.25em .8em 2.9em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta);
  color: var(--atrament);
}
.tresc .wyliczenie li::before {
  content: ""; position: absolute;
  inset-inline-start: 1.2em; inset-block-start: 1.28em;
  width: .6em; height: .6em; transform: rotate(45deg);
  background: var(--wiodaca);
}
.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);
  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(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  border: 1px solid var(--wiodaca);
  border-radius: 10px;
  font-family: var(--kroj-naglowek); font-weight: 700; font-size: 1.02em;
  font-variant-numeric: lining-nums tabular-nums; line-height: 1;
}
/* blok wierszowy ze źródła (schemat) */
.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(--kroj-maszyna);
  font-size: .92rem; line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
}
/* akapit-uwaga (np. zdanie zamykające o charakterze informacyjnym) */
.tresc .nota {
  margin: 1.5em 0 0;
  padding: 1.1em 1.35em 1.1em 1.5em;
  background: var(--tlo-2);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--zloto);
  border-radius: var(--promien-karta);
  font-size: .96rem; line-height: 1.64;
  color: var(--atrament);
}

/* ⚠ NAPRAWA PO RECENZJI (zarzut „MIARA WIERSZA"): przy 390 px trzy zagnieżdżone
   zaokrąglone pudełka (płyta → piaskowy panel → biały wiersz) zjadały po
   20–24 px z każdej strony i wykaz miał ~34 znaki w wierszu wobec ~44
   w prozie obok. Poniżej 660 px komponenty wychodzą na pełną szerokość
   ekranu, a piaskowy panel oddaje CAŁE wypełnienie poziome — zostaje samo
   tło i punktor. Miara wykazu: ~42 znaki, czyli miara prozy.
   ⚠ Ujemny margines równy dokładnie --margines: pasmo nie może się przewinąć
   w poziomie (B5), bo poniżej 651 px szyny siatki mają szerokość 0. */
@media (max-width: 660px) {
  .tresc .sklad {
    margin-inline: calc(-1 * var(--margines));
    padding-inline: 0;
    border-inline: 0;
    border-radius: 0;
  }
  .tresc .sklad > p {
    border-inline: 0; border-radius: 0; box-shadow: none;
    padding: .85em 1.15em .85em 2.15em;
  }
  .tresc .sklad > p::before { inset-inline-start: .78em; inset-block-start: 1.2em; }
  .tresc .kategorie > p {
    margin-inline: calc(-1 * var(--margines));
    border-radius: 0;
    padding: 3.6em 1.15em 1.25em;
  }
  .tresc .kategorie > p::before,
  .tresc .kategorie > p::after { inset-inline-start: 1.15em; inset-block-start: .95em; }
}

/* --- 11. ODSYŁACZE KIERUNKOWE I PRZYCISK ----------------------------- */
/* 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.5em 1.1em; }
.tresc .przejscie:last-child { margin-block-end: 0; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .8em;
  min-height: 54px;
  padding: .55em 1.6em .55em 1.4em;
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: 999px;
  font-weight: 700; font-size: .98rem; letter-spacing: .005em;
  color: var(--wiodaca-ciemna);
  text-decoration: none;
  box-shadow: 0 14px 28px -22px rgba(34, 19, 16, .6);
}
/* grot w postaci rombu — jeden język znaków w całym systemie */
.tresc .przejscie a::after {
  content: ""; flex: none;
  width: .6em; height: .6em; transform: rotate(45deg);
  background: var(--wiodaca);
  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 { background: var(--zloto); transform: rotate(45deg) translate(2px, -2px); }

/* ROZDROŻE — trzy odsyłacze „co dalej" stojące OBOK SIEBIE, nie jedno pod
   drugim. To jeden z modułów, którym oddajemy szerokość odzyskaną z marginesu:
   przy 1920 px rząd trzech kart zajmuje całą ramę, przy telefonie wraca do
   kolumny. Treść odsyłaczy zostaje co do znaku — zmienia się wyłącznie układ. */
.tresc .rozdroze {
  display: grid; gap: clamp(.7rem, 1.2vw, 1.3rem);
  margin-block: clamp(1.4rem, 1rem + 1vw, 2.2rem) 0;
}
.tresc .rozdroze > .przejscie { margin: 0; display: flex; }
@media (min-width: 1180px) {
  .tresc .rozdroze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* ⚠ selektor musi dorównać `.tresc .przejscie a` (0-2-1) — stąd `.rozdroze` */
  .tresc .rozdroze > .przejscie a {
    inline-size: 100%;
    align-items: flex-start; justify-content: space-between; gap: 1em;
    padding: 1.05em 1.3em;
    border-radius: var(--promien-karta);
    line-height: 1.42;
  }
  .tresc .rozdroze > .przejscie a::after { margin-block-start: .42em; }
}

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

.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 i napis dotknie ramki. */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; gap: .8em; justify-content: center;
  min-height: 60px; padding: .9rem 2.2rem;
  background: var(--wiodaca); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca); border-radius: 999px;
  font-weight: 700; font-size: 1rem; letter-spacing: .03em;
  text-decoration: none;
  box-shadow: 0 22px 44px -24px rgba(34, 19, 16, .9), inset 0 0 0 1px rgba(255, 250, 242, .16);
}
.tresc .przejscie a.przycisk::after,
.przycisk::after {
  content: ""; flex: none;
  width: .6em; height: .6em; transform: rotate(45deg);
  background: var(--zloto);
  transition: transform .25s ease;
}
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover {
  background: var(--wiodaca-ciemna); border-color: var(--zloto); color: var(--na-wiodacej);
}

/* --- 12. SŁOICZKI — lista wpisów ------------------------------------- */
.tresc .lista-wpisow {
  margin: clamp(1.4rem, .9rem + 1.4vw, 2.6rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1.1rem, .7rem + 1.5vw, 2.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.5rem, 1rem + 1.4vw, 2.5rem);
  background: var(--papier-karta);
  background-image: var(--krata-jasna);
  background-position: center;
  border-radius: var(--promien-sloik);
  /* PIERŚCIEŃ słoiczka: nitka złota, prześwit papieru, obwódka */
  box-shadow:
    0 0 0 1px var(--linia-cicha),
    0 0 0 6px var(--papier-karta),
    0 0 0 7px var(--zloto),
    var(--cien-sloik);
}
/* wieczko: łuk w barwie wiodącej na górnej krawędzi */
.tresc .zapowiedz::before {
  content: ""; position: absolute; z-index: 0;
  inset-block-start: 0; inset-inline: -12%;
  height: clamp(46px, 5vw, 76px);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, var(--wiodaca-jasna), rgba(246, 220, 198, 0));
  pointer-events: none;
}
/* duża ozdobna cyfra — ornament, nie informacja (jest pseudoelementem) */
.tresc .zapowiedz::after {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; z-index: 0;
  inset-block-end: -.12em; inset-inline-end: .05em;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 7rem; line-height: 1;
  color: var(--wiodaca-jasna);
  pointer-events: none;
}
.tresc .zapowiedz > * { position: relative; z-index: 1; }
.tresc .zapowiedz__tytul {
  margin: 0 0 1rem; padding: 0; border: 0; background: none;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.9rem); line-height: 1.2;
  color: var(--wiodaca-ciemna);
}
.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__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .65em; min-height: 46px;
  padding-inline: .1rem; text-decoration: none;
  color: var(--wiodaca-ciemna); font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  border-block-end: 2px solid var(--zloto);
}
.tresc .zapowiedz__wiecej a::after {
  content: ""; width: .55em; height: .55em; transform: rotate(45deg);
  background: var(--wiodaca);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--wiodaca); border-block-end-color: var(--wiodaca); }

/* ⚠ NAPRAWA PO RECENZJI (zarzut „PUSTKA"): na blogu ciemne pasmo zamykające
   miało JEDEN element w lewej jednej trzeciej, 200 px wysokości na desktopie
   i 270 px na telefonie, po czym przechodziło w równie ciemną stopkę — razem
   ~600 px nieprzerwanej ciemności z dwoma elementami. Pasmo jest teraz
   SCALONE ze stopką: niskie, z kreską prowadzącą przez całą szerokość kadru,
   a stopka nie otwiera się drugą złotą krawędzią. */
.pas--zamkniecie { padding-block: clamp(1.4rem, .9rem + 1.2vw, 2.4rem); }
.pas--zamkniecie > .kontener > .przejscie {
  grid-column: pelna-start / pelna-end;
  display: flex; align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  margin-block: 0;
}
.pas--zamkniecie > .kontener > .przejscie::after {
  content: ""; flex: 1 1 auto; min-inline-size: 32px; block-size: 1px;
  background: linear-gradient(90deg, var(--zloto), rgba(221, 176, 97, .06));
}
main:has(.pas--zamkniecie) + .stopka::before { content: none; }
main:has(.pas--zamkniecie) + .stopka { padding-block-start: clamp(1.8rem, 1rem + 1.8vw, 3.4rem); }

/* --- 13. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--glebia-2);
  background-image:
    radial-gradient(58% 96% at 86% 0%, rgba(176, 66, 26, .40) 0%, rgba(176, 66, 26, 0) 62%),
    var(--promienie-zloto),
    var(--krata-ciemna);
  color: var(--na-ciemnym);
  padding-block: clamp(2.6rem, 1.5rem + 2.8vw, 4.8rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--zloto) 0%, rgba(221, 176, 97, .1) 52%, var(--wiodaca) 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(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + .7vw, 2rem);
  color: var(--na-ciemnym); letter-spacing: .015em;
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.5rem, 2vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .3em; text-decoration: none;
  color: var(--sepia-pismo); font-weight: 700;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--na-ciemnym); border-block-end-color: var(--zloto); }
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: .4em 1.4em;
  border: 1px solid var(--zloto); border-radius: 999px;
  color: var(--zloto); text-decoration: none;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--zloto); color: var(--glebia-2); }

/* --- 14. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .probki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.6rem 0 2.4rem; padding: 0; list-style: none;
}
.probka {
  border: 1px solid var(--linia-cicha); border-radius: var(--promien-karta);
  background: var(--papier-karta); padding: 0; overflow: hidden;
  box-shadow: var(--cien-karta);
}
.probka__pole { display: block; height: 84px; }
.probka__opis {
  display: block; padding: .8rem 1rem;
  font-family: var(--kroj-maszyna); font-size: .78rem;
  color: var(--atrament); line-height: 1.55;
}
.ornamentarium {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.6rem 0 2.4rem; padding: 0; list-style: none;
}
.ornamentarium li {
  border: 1px solid var(--linia-cicha); border-radius: var(--promien-karta);
  overflow: hidden; background: var(--papier-karta);
}
.ornamentarium .pole { display: block; height: 120px; }
.ornamentarium .pole--krata { background-color: var(--papier); background-image: var(--krata-jasna); }
.ornamentarium .pole--promienie { background-color: var(--tlo-2); background-image: var(--promienie); }
.ornamentarium .pole--noc { background-color: var(--glebia); background-image: var(--krata-ciemna); }
.ornamentarium .opis {
  display: block; padding: .8rem 1rem; font-size: .82rem;
  color: var(--atrament); line-height: 1.55;
  border-block-start: 1px solid var(--linia-cicha);
}

/* --- 14b. UKŁAD SZEROKI — „WIECZKO I WNĘTRZE" (od 1500 px) ------------ */
/* ⭐⭐ ZASADA UŻYTKOWNIKA: makieta ma ROSNĄĆ powyżej 1366 px, a nie dokładać
   marginesu. Sam szerszy kontener nie wystarczy — zrobiłby z prozy wiersze po
   sto znaków albo zostawił ten sam układ w większej bieli. Odzyskana szerokość
   dostaje więc ROLE:
     • nagłówek sekcji schodzi w LEWĄ SZYNĘ i staje OBOK swojego tekstu —
       układ czyta się jak puszka rozłożona na warstwy: wieczko z boku,
       zawartość w środku;
     • wykaz kropel i kategorie składają się w dwie kolumny i wychodzą
       z kolumny prozy w prawo, aż do krawędzi ramy;
     • tryptyk podpunktów i kafle wpisów idą na CAŁĄ szerokość ramy;
     • rozdroże odsyłaczy zmienia się w rząd trzech kart.
   Kolumna prozy zostaje wąska (38rem = 787 px przy 1920, ~78 znaków) — to jest
   drugi cel, osobny od pierwszego: szerzej ma być STRONA, nie WIERSZ. */
@media (min-width: 1500px) {
  .kontener {
    grid-template-columns:
      [pelna-start szyna-start] minmax(0, .75fr)
      [szyna-end tekst-start] minmax(0, var(--kolumna))
      [tekst-end] minmax(0, .25fr) [pelna-end];
    column-gap: var(--szyna-gap);
    align-items: start;
  }
  /* nagłówek sekcji stoi w szynie, w tym samym wierszu co pierwszy akapit;
     romb i złota nitka nad nim zostają — to one wyrównują się z prozą */
  .tresc .kontener > h2 { grid-column: szyna-start / szyna-end; margin-block-start: 0; }
  /* hero ma własną, jednotorową ramę — tytuł i tak stoi nad wszystkim */
  .kontener--hero {
    grid-template-columns:
      [pelna-start szyna-start szyna-end tekst-start] minmax(0, 1fr) [tekst-end pelna-end];
  }
  /* wykaz kropel i kategorie — dwie kolumny od kolumny prozy do prawej krawędzi */
  .tresc .kontener > .sklad,
  .tresc .kontener > .kategorie { grid-column: tekst-start / pelna-end; }
  .tresc .sklad,
  .tresc .kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  /* pasmo wstępu nie ma nagłówka — żeby szyna nie była dziurą, dostaje
     tę samą złotą nitkę, którą nagłówki noszą nad sobą */
  .pas--wstep > .kontener::before {
    content: ""; grid-column: szyna-start / szyna-end; grid-row: 1;
    align-self: start; justify-self: start;
    margin-block-start: .9em;
    inline-size: min(100%, 15rem); block-size: 3px;
    background: linear-gradient(90deg, var(--wiodaca), var(--zloto) 62%, rgba(221, 176, 97, .12));
  }
}

/* --- 15. 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; background-image: none; }
  .hero, .stopka, .pas--noc, .plyta--ciemna {
    background: #FFFFFF !important; background-image: none !important; color: #000000 !important;
  }
  .hero__rozeta, .hero__zar, .hero::after, .stopka::before, .plyta::after { display: none !important; }
  .plyta { box-shadow: none; margin-block-start: 0; border-color: #999999; }
  .pas--piasek, .pas--wstep, .pas--zar, .pas--plyta { background: #FFFFFF; background-image: none; }
  .tresc .zapowiedz { box-shadow: none; border: 1px solid #999999; background-image: none; }
  a { color: #000000; }
}