@charset "utf-8";
/* =====================================================================
   PACZKA — system projektowy makiety pocztaupominkowa.pl (wersja premium)
   Seria STRONY-WWW-ST-A2. HTML+CSS: zero JavaScriptu, zero zdjęć, zero
   znaków firmowych, zero formularzy. Wszystkie barwy wyłącznie przez zmienne.

   Idea: WSTĄŻKA I PIECZĘĆ. Prezent jedzie w dwóch opakowaniach — ozdobnym
   i transportowym — więc widok też ma dwie warstwy: pasma z papieru pakowego
   (kraft) niosą kompozycję, a treść leży na przywieszkach: kartach
   z zaokrąglonym rogiem, rysowanym otworem na sznurek i cienką ramką.
   Wstążka jest kreską (czerwień), pieczęć lakowa — plamką i ciemnym pasmem,
   taśma pakowa — ukośnym pasem światła.

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

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --papier:          #FBF5EC;  /* ciepły papier — podłoże pasm jasnych */
  --papier-karta:    #FFFFFF;  /* przywieszka, płyta */
  --tlo-2:           #EFE0C9;  /* papier pakowy — pasmo drugoplanowe */
  --wiodaca-jasna:   #F7E2D9;  /* bladoczerwone pole odsyłacza kierunkowego */
  /* pismo */
  --atrament:        #2B1A12;
  --atrament-cichy:  #5B4437;
  /* barwa wiodąca — wstążka */
  --wiodaca:         #B32720;
  --wiodaca-ciemna:  #8C1C17;
  --akcent:          #86611A;  /* przygaszone złoto do tekstu na jasnym */
  --linia:           #7E6849;
  --linia-cicha:     #E3D5BE;
  --obwodka:         #D8C7A8;  /* cienka ramka przywieszki */
  --na-wiodacej:     #FFF6EE;
  --pod-karta:       var(--papier); /* barwa widoczna w otworze na sznurek */
  --numer:           #FAEDE7;  /* ozdobna cyfra porządkowa — wyłącznie ornament */
  --lak-blask:       #C93A30;  /* światło na kropli laku — ornament */

  /* powierzchnie ciemne — lak i papier pakowy */
  --glebia:          #40160F;  /* lak pieczęci */
  --glebia-2:        #2A0D09;
  --lak-karta:       #55201A;
  --kraft-jasny:     #7A4A22;
  --kraft-sredni:    #5A3417;
  --kraft-ciemny:    #33200F;
  --zloto-jasne:     #E0BC72;
  --zloto-blask:     #F0C98A;
  --na-ciemnym:      #FBF0DF;
  --cichy-ciemny:    #E3C6B4;
  --cichy-kraft:     #F0DCC2;

  /* ornamenty — wyłącznie warstwa wizualna, nigdy nośnik informacji */
  --orn-kraft:       rgba(122, 74, 34, .075);
  --orn-kraft-mocny: rgba(122, 74, 34, .16);
  --orn-wstazka:     rgba(179, 39, 32, .07);
  --orn-zloto:       rgba(224, 188, 114, .16);
  --orn-zloto-mocny: rgba(240, 201, 138, .30);

  --krój-naglowek: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --krój-tekst:    "Karla", "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.
     Jednostka „ch" w kroju o wąskim zerze zawyża liczbę znaków w wierszu,
     a miara w „em" rozjeżdża krawędź nagłówka i akapitu. */
  --kolumna:      34rem;   /* kolumna prozy ≈70 znaków */
  /* ⭐⭐ SKALA POWYŻEJ 1366. Pasmo 78rem zamarzało przy ~1763 px (rem przestaje
     nadążać za ekranem) i przy 1920 zostawiało po 152 px martwego papieru
     z każdej strony. „max(78rem, …)" nie rusza NICZEGO poniżej 1763 px — poniżej
     tej szerokości 78rem jest większe od 100vw-190px, więc wygrywa jak dotąd —
     a powyżej przejmuje człon zależny od okna i margines stoi na ~95 px.
     Górna zapora 90rem pilnuje, żeby na 4K pasmo nie rozjechało się bez końca. */
  --pas-szer:     max(78rem, min(90rem, 100vw - 190px));
  /* ⚠ Zapora 80px zamiast 112px: 5vw mija 80 px dopiero przy 1600, więc układ
     poniżej 1600 jest CO DO PIKSELA taki jak był, a przy 1920 odzyskujemy
     2 × 16 px na kolumny zamiast dokładać marginesu do marginesu. */
  --margines:     clamp(20px, 5vw, 80px);
  /* odstęp nad sekcją i pas na wstążkę nagłówka — w barku muszą być te same
     liczby po obu stronach rzędu, więc mieszkają w tokenach, nie w regule */
  --h2-margines:  clamp(2.2rem, 1.4rem + 2.1vw, 3.6rem);
  --h2-wstazka:   clamp(1rem, .7rem + .9vw, 1.7rem);

  --promien:        6px;
  --promien-karta: 14px;
  --promien-rog:   30px;   /* zaokrąglony róg przywieszki */
  --cien-plyta:    0 30px 64px -30px rgba(64, 22, 15, .40), 0 2px 8px -3px rgba(64, 22, 15, .14);
  --cien-karta:    0 20px 40px -24px rgba(64, 22, 15, .42), 0 1px 3px -1px rgba(64, 22, 15, .12);
  --zachodzenie:   clamp(1.7rem, 1rem + 2.4vw, 4.2rem);
}

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

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* ⚠ pułapka 6: „clip" leczy przepełnienia od pasów pełnej szerokości,
     nie psując position:sticky nagłówka. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.75;
  overflow-wrap: break-word;
  font-feature-settings: "kern" 1;
}

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: 200px; 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: 90;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.6rem;
  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 — poziomy pasek nagłówka i stopki */
.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 „.szeroki" i indeks
   wpisów 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; }
/* ⚠ JEDNA KRAWĘDŹ. Siatki kart zaczynają się DOKŁADNIE tam, gdzie proza
   i nagłówek sekcji, a rosną w prawo. Wcześniej były pełnej szerokości pasma
   i nagłówek stał 400 px w prawo od pierwszej karty — czytało się to jak błąd
   składu, a nie jak zamiar. */
.kontener > .szeroki { grid-column: tekst-start / pelna-end; }
/* indeks wpisów stoi w paśmie SAM (bez nagłówka nad sobą), więc może wziąć
   całe pasmo — nie ma z czym stracić krawędzi */
.kontener > .lista-wpisow { grid-column: pelna-start / pelna-end; }
/* hero zaczyna się dokładnie tam, gdzie proza, a rośnie w prawo */
.kontener--hero > * { grid-column: tekst-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 40;
  background-color: var(--tlo-2);
  background-image:
    repeating-linear-gradient(90deg, var(--orn-kraft) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #F4E8D5 0%, var(--tlo-2) 100%);
  box-shadow: 0 14px 34px -28px rgba(64, 22, 15, .8);
}
/* wstążka pod paskiem: czerwień → złoto → papier */
.naglowek::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--wiodaca) 22%,
              var(--akcent) 52%, var(--linia-cicha) 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .2rem clamp(.7rem, 1.8vw, 2rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* sygnatura słowna — typograficzna; nigdy nie udaje logotypu firmy (T9) */
.znak {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 48px;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(.98rem, .87rem + .26vw, 1.18rem);
  line-height: 1.18; letter-spacing: -.005em;
  text-decoration: none; color: var(--wiodaca-ciemna);
}
.znak__pieczec { flex: none; width: 1.85em; height: 1.85em; display: block; color: var(--wiodaca-ciemna); }
.znak__pieczec svg { width: 100%; height: 100%; display: block; }
.znak__tekst { position: relative; padding-block-end: .1em; }
.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: nawigacja MA się kurczyć i zawijać; menu jest zwykłą listą,
   bez <details>, więc pułapka T7 (::details-content) tu 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: 0 clamp(.1rem, .8vw, .8rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .62em;
  font-weight: 700; 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: .7em; 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.4em); }
.menu__link[aria-current="page"] { color: var(--wiodaca-ciemna); }
.menu__link[aria-current="page"]::after {
  width: calc(100% - 1.4em); height: 3px;
  background: linear-gradient(90deg, var(--wiodaca), var(--akcent));
}
@media (max-width: 760px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
  .menu__link { padding-inline: .45em; letter-spacing: .07em; }
}

/* --- 5. HERO — pasmo papieru pakowego -------------------------------- */
.tresc { display: block; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* ⚠ B6 czyta WYŁĄCZNIE background-color — ustawiamy NAJJAŚNIEJSZY ton
     gradientu, żeby pomiar był ostrożniejszy niż rzeczywistość. */
  background-color: var(--kraft-jasny);
  background-image:
    radial-gradient(58% 52% at 84% 6%, rgba(240, 201, 138, .30) 0%, rgba(240, 201, 138, 0) 62%),
    radial-gradient(46% 46% at 4% 92%, rgba(179, 39, 32, .30) 0%, rgba(179, 39, 32, 0) 66%),
    repeating-linear-gradient(112deg, rgba(255, 240, 215, .045) 0 2px, rgba(255, 240, 215, 0) 2px 6px),
    linear-gradient(152deg, var(--kraft-jasny) 0%, var(--kraft-sredni) 46%, var(--kraft-ciemny) 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(2.8rem, 1.6rem + 4.4vw, 6.6rem) clamp(4rem, 2.2rem + 5.6vw, 8.6rem);
}
.hero--duzy { padding-block: clamp(3.4rem, 1.8rem + 5.6vw, 8.4rem) clamp(4.6rem, 2.4rem + 6.6vw, 10rem); }

/* wstążka domykająca pasmo od dołu */
.hero::after {
  content: ""; position: absolute; z-index: 2;
  inset-inline: 0; inset-block-end: 0; height: 4px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--zloto-jasne) 48%, var(--wiodaca) 100%);
}
/* poświata pod kokardą */
.hero__poswiata {
  position: absolute; z-index: 0;
  inset-block-start: -18%; inset-inline-end: -8%;
  width: clamp(300px, 46vw, 860px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 201, 138, .22) 0%, rgba(240, 201, 138, 0) 68%);
  pointer-events: none;
}
/* ORNAMENT A — wielka kokarda (inline SVG, aria-hidden, bez treści) */
.hero__kokarda {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -16%;
  width: clamp(320px, 42vw, 820px); aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--zloto-blask);          /* B6: barwa ikony wobec tła pasma */
  opacity: .58;
  pointer-events: none;
}
.hero__kokarda svg { width: 100%; height: auto; display: block; }
@media (max-width: 920px) {
  .hero__kokarda { inset-inline-end: -30%; opacity: .3; }
  .hero__pieczec { opacity: .26; }
}
/* ORNAMENT B — pieczęć lakowa */
.hero__pieczec {
  position: absolute; z-index: 0;
  inset-block-end: -6%; inset-inline-start: -5%;
  width: clamp(150px, 19vw, 330px); aspect-ratio: 1;
  color: var(--zloto-jasne);
  opacity: .38;
  pointer-events: none;
}
.hero__pieczec svg { width: 100%; height: 100%; display: block; }
/* ORNAMENT C — ukośny pas taśmy pakowej */
.hero__tasma {
  position: absolute; z-index: 0;
  inset-block-start: 8%; inset-inline-start: -14%;
  width: 132%; height: clamp(46px, 6vw, 108px);
  transform: rotate(-6.5deg);
  background:
    linear-gradient(180deg, rgba(255, 246, 230, .10) 0%, rgba(255, 246, 230, .04) 100%);
  border-block: 1px solid rgba(255, 246, 230, .18);
  pointer-events: none;
}
.hero .kontener { position: relative; z-index: 1; }

.hero .tytul {
  margin: 0 0 clamp(1rem, .6rem + 1.1vw, 2.1rem);
  max-width: 15.5em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(2.3rem, 1.1rem + 3.4vw, 5rem);
  line-height: 1.03; letter-spacing: -.02em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
/* kreska wstążki nad tytułem — sygnał pasma, nie informacja */
.hero .tytul::before {
  content: ""; display: block;
  width: clamp(74px, 11vw, 190px); height: 4px;
  margin-block-end: clamp(1.1rem, .7rem + 1.2vw, 2.4rem);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--zloto-blask) 0%, var(--zloto-jasne) 42%, rgba(224, 188, 114, 0) 100%);
}
.hero .lid {
  margin: 0;
  max-width: 38rem;
  font-size: 1.28rem; line-height: 1.62;
  color: var(--na-ciemnym);
}
.hero .lid + .lid { margin-block-start: .9rem; }

/* --- 6. PASMA -------------------------------------------------------- */
/* flow-root: ujemny margines płyty ma PRZESUNĄĆ płytę, a nie całe pasmo.
   ⚠⚠ ŻADNEGO overflow:hidden NA .pas — ujemny margines płyty wychodzi poza
   pasmo i overflow ucięłoby ją razem z treścią (bramka B1c zobaczyłaby wtedy
   „bloki treści NIEWIDOCZNE"). Przycinamy WYŁĄCZNIE te pasma, które mają
   ornament kotwiczony absolutnie. */
.pas { position: relative; display: flow-root; }
.pas--lak, .pas--domkniecie { overflow: hidden; }
.pas > .kontener { position: relative; z-index: 1; }

/* pasmo papieru pakowego — rytm fałdy tektury */
.pas--karton {
  background-color: var(--tlo-2);
  background-image:
    repeating-linear-gradient(90deg, var(--orn-kraft) 0 1px, transparent 1px 10px),
    radial-gradient(38% 60% at 98% 8%, var(--orn-wstazka) 0%, rgba(179, 39, 32, 0) 70%);
  padding-block: clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem);
  --pod-karta: var(--tlo-2);
}
/* pasmo jasnego papieru — ukośny ślad taśmy w rogu */
.pas--papier {
  background-color: var(--papier);
  background-image:
    repeating-linear-gradient(-24deg, var(--orn-kraft) 0 2px, transparent 2px 16px),
    radial-gradient(46% 46% at 4% 96%, var(--orn-wstazka) 0%, rgba(179, 39, 32, 0) 68%);
  background-repeat: no-repeat, no-repeat;
  background-size: 620px 520px, 100% 100%;
  background-position: right -140px top -110px, left bottom;
  padding-block: clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem);
  --pod-karta: var(--papier);
}
/* pasmo, na którym leży PŁYTA nachodząca na sąsiada z góry */
.pas--plyta {
  background-color: var(--tlo-2);
  background-image:
    repeating-linear-gradient(90deg, var(--orn-kraft) 0 1px, transparent 1px 10px);
  padding-block: 0 clamp(1.8rem, 1rem + 2.2vw, 3.6rem);
  padding-inline: clamp(8px, 2.2vw, 40px);
  --pod-karta: var(--papier-karta);
}
.kontener.plyta {
  position: relative; z-index: 2;
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 4rem);
  background: var(--papier-karta);
  border: 1px solid var(--obwodka);
  border-start-start-radius: clamp(28px, 4vw, 64px);
  border-start-end-radius: var(--promien-karta);
  border-end-end-radius: clamp(28px, 4vw, 64px);
  border-end-start-radius: var(--promien-karta);
  box-shadow: var(--cien-plyta);
}
/* gzyms płyty: wstążka na górnej krawędzi */
.kontener.plyta::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline: clamp(30px, 12%, 190px); height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--wiodaca), var(--akcent) 72%, rgba(134, 97, 26, .18));
}

/* pasmo LAKU — mocny akcent. Nadpisujemy TOKENY, więc każdy komponent
   w środku dostaje wariant na ciemnym bez osobnych reguł (pułapka
   „globalny kolor na powierzchni o odwrotnej jasności"). */
.pas--lak, .pas--domkniecie {
  --papier:         var(--glebia);
  --papier-karta:   var(--lak-karta);
  --tlo-2:          var(--lak-karta);
  --wiodaca-jasna:  var(--lak-karta);
  --atrament:       var(--na-ciemnym);
  --atrament-cichy: var(--cichy-ciemny);
  --wiodaca:        var(--zloto-jasne);
  --wiodaca-ciemna: var(--zloto-blask);
  --akcent:         var(--zloto-jasne);
  --na-wiodacej:    var(--glebia);
  --linia:          var(--zloto-jasne);
  --linia-cicha:    #6B3227;
  --obwodka:        var(--zloto-jasne);
  --pod-karta:      var(--glebia);
  --numer:          rgba(240, 201, 138, .20);
  --lak-blask:      var(--zloto-blask);
  color: var(--na-ciemnym);
}
.pas--lak {
  background-color: var(--glebia);
  background-image:
    radial-gradient(60% 58% at 90% 4%, rgba(179, 39, 32, .48) 0%, rgba(179, 39, 32, 0) 64%),
    radial-gradient(48% 48% at 2% 98%, rgba(122, 74, 34, .46) 0%, rgba(122, 74, 34, 0) 68%),
    repeating-linear-gradient(90deg, var(--orn-zloto) 0 1px, transparent 1px 12px);
  padding-block: clamp(2.8rem, 1.6rem + 3.6vw, 6rem);
}
.pas--lak::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, rgba(224, 188, 114, .12) 0%, var(--zloto-jasne) 46%, rgba(224, 188, 114, .12) 100%);
}
/* ukośny pas taśmy pakowej nad pasmem laku */
.pas__tasma {
  position: absolute; z-index: 0;
  inset-block-start: -6%; inset-inline-end: -12%;
  width: 62%; height: clamp(90px, 13vw, 230px);
  transform: rotate(-15deg);
  background:
    repeating-linear-gradient(90deg, var(--orn-zloto-mocny) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, rgba(240, 201, 138, .13) 0%, rgba(240, 201, 138, .03) 100%);
  border-block: 1px solid rgba(240, 201, 138, .22);
  pointer-events: none;
}

/* pasmo domknięcia — papier pakowy z kokardą i przyciskiem */
.pas--domkniecie {
  position: relative; overflow: hidden;
  background-color: var(--kraft-jasny);
  --papier-karta:   #6B3E1C;
  --tlo-2:          #6B3E1C;
  --wiodaca-jasna:  #6B3E1C;
  --atrament-cichy: var(--cichy-kraft);
  --linia-cicha:    #96633A;
  --pod-karta:      var(--kraft-jasny);
  --numer:          rgba(251, 240, 223, .18);
  --lak-blask:      var(--zloto-blask);
  background-image:
    radial-gradient(52% 60% at 12% 8%, rgba(240, 201, 138, .22) 0%, rgba(240, 201, 138, 0) 66%),
    repeating-linear-gradient(112deg, rgba(255, 240, 215, .05) 0 2px, rgba(255, 240, 215, 0) 2px 7px),
    linear-gradient(28deg, var(--kraft-jasny) 0%, var(--kraft-sredni) 52%, var(--kraft-ciemny) 100%);
  padding-block: clamp(3rem, 1.8rem + 3.8vw, 6.4rem);
}
.pas--domkniecie::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--wiodaca-ciemna) 0%, var(--zloto-jasne) 50%, var(--wiodaca-ciemna) 100%);
}
.domkniecie__kokarda {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -6%;
  width: clamp(260px, 34vw, 620px); aspect-ratio: 2 / 1;
  transform: translateY(-50%);
  color: var(--zloto-blask); opacity: .5;
  pointer-events: none;
}
.domkniecie__kokarda svg { width: 100%; height: auto; display: block; }
.pas--domkniecie > .kontener { position: relative; z-index: 1; }

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: var(--h2-margines) 0 .8rem;
  padding-block-start: var(--h2-wstazka);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.5rem);
  line-height: 1.16; letter-spacing: -.012em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* wstążka nad nagłówkiem sekcji — czerwień przechodząca w złoto */
.tresc h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(56px, 7vw, 110px); height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--akcent) 78%, rgba(134, 97, 26, .1) 100%);
}
.kontener > h2:first-child, .kontener > *:first-child > h2 { margin-block-start: 0; }

.tresc h3 {
  margin: clamp(1.5rem, 1rem + 1.2vw, 2.3rem) 0 .45rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: 1.24rem; line-height: 1.26; color: var(--atrament);
}

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

/* odsyłacz w prozie — ⚠ pułapka: „.tresc p a" (0-2-1) potrafi przemalować
   przycisk stojący w akapicie, więc wyłączamy z niej komponenty. */
/* ⚠⚠ Wersja pierwsza brzmiała „.tresc p a" (0-2-1) i BIŁA komponenty:
   odsyłacz kierunkowy „.tresc .przejscie a" (0-2-1, ale wcześniej w arkuszu)
   dostawał podkreślenie prozy, a tytuł zapowiedzi w karcie — bo stoi w <li> —
   też. Wykluczamy komponenty JAWNIE, zamiast walczyć specyficznością. */
.tresc p:not(.przejscie):not(.cta) a:not(.przycisk),
.tresc li:not(.zapowiedz) a:not(.przycisk) {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--akcent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.tresc p:not(.przejscie):not(.cta) a:not(.przycisk):hover,
.tresc li:not(.zapowiedz) a:not(.przycisk):hover {
  color: var(--wiodaca); text-decoration-thickness: 2px;
}

/* --- 8. PANEL LISTY -------------------------------------------------- */
.tresc .panel-listy {
  position: relative;
  margin: 1.6em 0 2em;
  padding: clamp(1.3rem, .9rem + 1.4vw, 2.2rem) clamp(1.1rem, .8rem + 1.2vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--obwodka);
  border-radius: var(--promien-karta);
  border-start-start-radius: clamp(22px, 3vw, 40px);
  box-shadow: var(--cien-karta);
}
/* kawałek taśmy przyklejający listę do pasma */
.panel-listy__szpilka {
  position: absolute; z-index: 2;
  inset-block-start: -.55rem; inset-inline-start: 1.8rem;
  width: clamp(74px, 10vw, 136px); height: 1.4rem;
  transform: rotate(-2.6deg);
  background:
    linear-gradient(180deg, rgba(255, 246, 238, .34) 0%, rgba(255, 246, 238, .06) 46%,
                    rgba(64, 22, 15, .18) 100%),
    linear-gradient(100deg, var(--wiodaca) 0%, var(--wiodaca-ciemna) 100%);
  border-radius: 2px;
  box-shadow: 0 4px 12px -6px rgba(64, 22, 15, .7);
}

.tresc .wyliczenie {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .1rem;
}
.tresc .wyliczenie li {
  position: relative;
  padding: .8em 0 .8em 2.5em;
  border-block-end: 1px dashed var(--linia-cicha);
  color: var(--atrament);
}
.tresc .wyliczenie li:last-child { border-block-end: 0; padding-block-end: 0; }
.tresc .wyliczenie li:first-child { padding-block-start: 0; }
/* znacznik: zakończenie wstążki (prostokąt z wycięciem w „jaskółczy ogon") */
.tresc .wyliczenie li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: .95em;
  width: 1.5em; height: .62em;
  background: var(--wiodaca);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 26% 50%);
}
.tresc .wyliczenie li:first-child::before { inset-block-start: .35em; }
/* wariant pytań — pole do odhaczenia */
.tresc .wyliczenie--pytania li::before {
  width: 1.15em; height: 1.15em;
  background: transparent;
  border: 2px solid var(--wiodaca);
  border-radius: 4px;
  clip-path: none;
  inset-block-start: .72em;
}
.tresc .wyliczenie--pytania li:first-child::before { inset-block-start: .12em; }

/* --- 9. PRZYWIESZKI (karty z otworem na sznurek) --------------------- */
.tresc .przywieszki {
  display: grid; gap: clamp(.9rem, .5rem + 1.3vw, 1.9rem);
  margin: clamp(1.4rem, .9rem + 1.4vw, 2.6rem) 0 clamp(1.4rem, .9rem + 1.4vw, 2.4rem);
  counter-reset: przywieszka;
}
@media (min-width: 780px)  { .tresc .przywieszki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ⚠ JEDYNY MODYFIKATOR SIATKI TO „--3". Trzy karty idą w jednym rzędzie; dwie
   i cztery zostają na regule bazowej, czyli 2 kolumny (cztery = układ 2x2).
   „3 + 1 osierocona" na dole rzędu wygląda jak błąd, a nie jak rytm.
   ⚠⚠ CZTERECH KOLUMN NIE MA ŚWIADOMIE — pomiar 31.08.2026 przy 1920 px:
   pasmo .szeroki ma 1064 px, więc karta w czterech kolumnach dostaje 236 px,
   z czego na tekst zostaje 157 px, czyli ok. 15 znaków w wierszu. W układzie
   2x2 karta ma 515 px i ok. 42 znaki — tyle samo co przy 1366 px (41 znaków).
   Klasy „przywieszki--4" i „--2" były w HTML MARTWE (zero reguł w CSS), więc
   zostały z niego zdjęte, a nie dopisane tu jako reguła powtarzająca bazę. */
@media (min-width: 1180px) { .tresc .przywieszki--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tresc .przywieszka {
  counter-increment: przywieszka;
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.3rem) clamp(1.2rem, .9rem + 1.1vw, 1.9rem)
           clamp(1.3rem, .9rem + 1.1vw, 2rem) clamp(1.2rem, .9rem + 1.1vw, 1.9rem);
  background-color: var(--papier-karta);
  /* rysowany otwór na sznurek — koło w barwie pasma z ciemnym rantem */
  background-image:
    radial-gradient(circle at 1.85rem 1.75rem,
      var(--pod-karta) 0 .38rem, var(--linia) .38rem .46rem, transparent .47rem);
  border: 1px solid var(--obwodka);
  border-start-start-radius: var(--promien-rog);
  border-start-end-radius: var(--promien);
  border-end-end-radius: var(--promien-rog);
  border-end-start-radius: var(--promien);
  box-shadow: var(--cien-karta);
  padding-block-start: 2.9rem;
}
/* sznurek — pętla wchodząca w otwór; górną część pierścienia ucina
   krawędź karty (overflow:hidden), więc widać dokładnie łuk sznurka */
.przywieszka__sznurek {
  position: absolute; z-index: 1;
  inset-block-start: -1.2rem; inset-inline-start: .35rem;
  width: 3rem; height: 3rem;
  border: 2px solid var(--akcent);
  border-radius: 50%;
  opacity: .85;
  pointer-events: none;
}
/* ozdobna cyfra porządkowa — ornament, nie informacja (pseudoelement) */
.tresc .przywieszka::after {
  content: counter(przywieszka, decimal-leading-zero);
  position: absolute; inset-block-end: -.22em; inset-inline-end: .06em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 4.9rem; line-height: 1;
  color: var(--numer);
  pointer-events: none;
}
.tresc .przywieszka > p { position: relative; z-index: 1; margin: 0; }

/* --- 10. KATALOG (nagłówki trzeciego stopnia jako karty) ------------- */
.tresc .katalog {
  display: grid; gap: clamp(.9rem, .5rem + 1.2vw, 1.7rem);
  margin: clamp(1.2rem, .8rem + 1.2vw, 2.2rem) 0 clamp(1.4rem, .9rem + 1.4vw, 2.4rem);
}
@media (min-width: 780px)  { .tresc .katalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .tresc .katalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tresc .katalog__karta {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, .9rem + 1.2vw, 2rem) clamp(1.1rem, .85rem + 1vw, 1.7rem);
  background: var(--papier-karta);
  border: 1px solid var(--obwodka);
  border-start-start-radius: var(--promien);
  border-start-end-radius: clamp(22px, 3vw, 38px);
  border-end-end-radius: var(--promien);
  border-end-start-radius: clamp(22px, 3vw, 38px);
  box-shadow: var(--cien-karta);
}
/* pieczęć lakowa w rogu karty */
.katalog__lak {
  position: absolute;
  inset-block-start: -.7rem; inset-inline-end: 1.2rem;
  width: 1.5rem; height: 1.5rem; border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: radial-gradient(circle at 34% 30%, var(--lak-blask) 0%, var(--wiodaca) 42%, var(--wiodaca-ciemna) 100%);
  box-shadow: 0 3px 8px -3px rgba(64, 22, 15, .75);
}
.tresc .katalog__karta h3 {
  margin: 0 0 .55rem;
  padding-block-end: .5rem;
  border-block-end: 1px solid var(--linia-cicha);
  font-size: 1.18rem; color: var(--wiodaca-ciemna);
}
.tresc .katalog__karta p { margin: 0 0 .8em; font-size: .96rem; color: var(--atrament); }
.tresc .katalog__karta p:last-child { margin-block-end: 0; }
/* odsyłacz karty katalogu dosuwa się do dolnej krawędzi — w rzędzie kart
   równa wysokość wygląda lepiej, ale bez tego przycisk wisiałby w połowie */
.tresc .katalog__karta .przejscie { margin-block: auto 0; padding-block-start: .9rem; }

/* --- 11. ODSYŁACZ KIERUNKOWY ---------------------------------------- */
/* 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.8em; }
.tresc .przejscie a {
  position: relative;
  display: inline-flex; align-items: center; gap: .75em;
  min-height: 54px;
  padding: .5em 1.6em .5em 2.7em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--wiodaca);
  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(64, 22, 15, .8);
}
/* otwór przywieszki także w odsyłaczu — jeden system detalu */
.tresc .przejscie a::before {
  content: ""; position: absolute;
  inset-inline-start: 1.15em; inset-block-start: 50%;
  width: .62em; height: .62em; margin-block-start: -.31em;
  border: 2px solid var(--wiodaca); border-radius: 50%;
}
.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::before { border-color: var(--na-wiodacej); }
.tresc .przejscie a:hover::after { transform: translateX(4px); }
.tresc .przejscie--male { margin-block: 1.1em 0; }
.tresc .przejscie--male a {
  min-height: 46px; font-size: .88rem;
  padding: .4em 1.2em .4em 2.3em;
  letter-spacing: .04em;
}

/* pozycja listy, której CAŁĄ treścią jest odsyłacz */
.tresc li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* --- 12. PRZYCISK ---------------------------------------------------- */
.tresc .cta { margin-block: clamp(1.6rem, 1.1rem + 1.2vw, 2.6rem) 0; }
/* ⚠⚠ SELEKTOR MUSI DORÓWNAĆ „.tresc .przejscie a" (0-2-1), inaczej przycisk
   dostanie wygląd odsyłacza kierunkowego. */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 60px; padding: .9rem 2.3rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca-ciemna); border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(240, 201, 138, .55), 0 22px 44px -24px rgba(64, 22, 15, .95);
  font-family: var(--krój-tekst); font-weight: 700;
  font-size: 1.04rem; letter-spacing: .02em;
  text-decoration: none;
}
.tresc .przejscie a.przycisk::before { content: none; }
.tresc .przejscie a.przycisk::after { content: "→"; }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover {
  background: var(--wiodaca); border-color: var(--wiodaca); color: var(--na-wiodacej);
}

/* --- 13. INDEKS WPISÓW (przywieszki spisu) --------------------------- */
.tresc .indeks {
  display: grid; gap: clamp(.9rem, .5rem + 1.3vw, 1.8rem);
  margin: clamp(1.3rem, .9rem + 1.3vw, 2.4rem) 0 0;
}
@media (min-width: 1120px) { .tresc .indeks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tresc .indeks__karta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 2.9rem clamp(1.2rem, .9rem + 1.1vw, 1.9rem) clamp(1.3rem, .9rem + 1.1vw, 1.9rem);
  background-color: var(--papier-karta);
  background-image:
    radial-gradient(circle at 1.85rem 1.7rem,
      var(--pod-karta) 0 .38rem, var(--linia) .38rem .46rem, transparent .47rem);
  border: 1px solid var(--obwodka);
  border-start-start-radius: var(--promien-rog);
  border-start-end-radius: var(--promien);
  border-end-end-radius: var(--promien-rog);
  border-end-start-radius: var(--promien);
  box-shadow: var(--cien-karta);
}
.indeks__sznurek {
  position: absolute; z-index: 1;
  inset-block-start: -1.2rem; inset-inline-start: .35rem;
  width: 3rem; height: 3rem;
  border: 2px solid var(--akcent); border-radius: 50%;
  opacity: .85; pointer-events: none;
}
/* ⚠⚠ Tytuł przywieszki to NAGŁÓWEK, nie akapit z nadetykietą. Wersja wcześniejsza
   stawiała nad tytułem złotą nadetykietę z NAZWĄ POLA ŹRÓDŁA („KARTA WPISU:"),
   a opis zaczynała słowem „Opis:" — czytelnik widział nazwy pól zamiast treści.
   Rytm, który dawała nadetykieta, przejmuje teraz kreska pod tytułem; obwódka
   sznurka zostaje jedynym złotym akcentem przywieszki.
   ⚠ Selektor MUSI mieć dwie klasy („.tresc .indeks__tytul" = 0-2-0), bo inaczej
   przegrywa z „.tresc h3" (0-1-1) i tytuł traci stopień pisma oraz kolor. */
.tresc .indeks__tytul {
  margin: 0 0 .8rem;
  padding-block-end: .6rem;
  border-block-end: 1px solid var(--linia-cicha);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: 1.28rem; line-height: 1.2; color: var(--wiodaca-ciemna);
}
.tresc .indeks__opis { margin: 0 0 .4rem; font-size: .95rem; color: var(--atrament-cichy); }
.tresc .indeks__karta .przejscie { margin-block: auto 0; padding-block-start: 1rem; }

/* --- 14. ZAPOWIEDZI 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(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: 3rem clamp(1.4rem, 1rem + 1.3vw, 2.2rem) clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem);
  background-color: var(--papier-karta);
  background-image:
    radial-gradient(circle at 1.95rem 1.8rem,
      var(--pod-karta) 0 .4rem, var(--linia) .4rem .48rem, transparent .49rem);
  border: 1px solid var(--obwodka);
  border-start-start-radius: var(--promien-rog);
  border-start-end-radius: var(--promien);
  border-end-end-radius: var(--promien-rog);
  border-end-start-radius: var(--promien);
  box-shadow: var(--cien-plyta);
}
.zapowiedz__sznurek {
  position: absolute; z-index: 1;
  inset-block-start: -1.25rem; inset-inline-start: .4rem;
  width: 3.1rem; height: 3.1rem;
  border: 2px solid var(--akcent); border-radius: 50%;
  opacity: .9; pointer-events: none;
}
/* duża ozdobna cyfra — ornament (pseudoelement, nie treść) */
.tresc .zapowiedz::after {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-end: -.2em; inset-inline-end: .05em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 5.4rem; line-height: 1;
  color: var(--numer);
  pointer-events: none;
}
.tresc .zapowiedz > * { position: relative; z-index: 1; }
/* ⚠⚠ reguła wyżej ma specyficzność 0-2-0 i ODBIERAŁA sznurkowi position:absolute
   (0-1-0) — pętla wypadała w środek karty jak przypadkowe kółko. */
.tresc .zapowiedz .zapowiedz__sznurek { position: absolute; z-index: 1; }
.tresc .zapowiedz .zapowiedz__tytul a { text-decoration: none; }
.tresc .zapowiedz .zapowiedz__tytul a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz .zapowiedz__wiecej a { text-decoration: none; }
.tresc .zapowiedz__tytul {
  margin: 0 0 .7rem; padding: 0; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.2rem, 1.04rem + .55vw, 1.6rem); line-height: 1.22;
}
.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 { text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1.2rem; color: var(--atrament-cichy); font-size: .96rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .6em; min-height: 46px;
  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(--akcent);
}
.tresc .zapowiedz__wiecej a::after { content: "→"; }
.tresc .zapowiedz__wiecej a:hover { color: var(--wiodaca); border-block-end-color: var(--wiodaca); }

/* =====================================================================
   KOMPONENTY DRUGIEGO RZĘDU (sekcje 15–20)
   ---------------------------------------------------------------------
   ⚠⚠ POWÓD ISTNIENIA. Recenzja wizualna 2026-08-31: „bardzo ładnie
   zapakowana JEDNA cegła" — rytm każdego widoku brzmiał kreska + H2 +
   akapit + pigułka, cztery, pięć, sześć razy pod rząd, a podstrona
   „Pakowanie prezentu" miała dziesięć nagłówków i ANI JEDNEJ karty.
   Komponenty niżej rozbijają ten rytm, nie dotykając tekstu: budulcem
   jest WYŁĄCZNIE zdanie, które i tak stało w prozie.
     .wyimek       — zdanie-klucz wyjęte z akapitu (proza zostaje wokół),
     .zestawienie  — dwie kolumny „to kontra tamto",
     .kroki        — procedura z dużą cyfrą w pieczęci,
     .metki        — wyliczenie w prozie zamienione na przywieszki-etykiety,
     .ostrzezenie  — zdanie, które jest przestrogą, dostaje własne pole,
     .rysunek      — akapit z rysunkiem kreskowym (ornament, aria-hidden).
   ⚠ Wszystkie listy komponentów są ZAWINIĘTE w <div>, bo bramka B13 mierzy
   kolumnę prozy przez „main .kontener > ol > li" i „> ul > li" — goła lista
   w kontenerze podszywałaby się pod kolumnę tekstu i psuła pomiar skali.
   ⚠ Powyżej 1600 px KROKI dostają czwartą kolumnę, a rysunek szerszą kolumnę
   obrazu: recenzja zarzucała, że przy 1920 kompozycja nie rośnie, tylko dokłada
   pustego papieru po bokach.
   ⚠⚠ METKI NIE MAJĄ TAKIEGO SKOKU I MIEĆ GO NIE MOGĄ. Są jedynym komponentem,
   który zawija się jak tekst (flex-wrap), więc każde powiększenie metki szybsze
   niż wzrost pasma ODEJMUJE kolumny przy 1920 px zamiast je dodawać.
   ===================================================================== */

/* Płyta jest BIAŁA, więc biała karta na niej znika. Wewnątrz płyty karty
   dostają ton papieru — tokeny przestawiamy na DZIECIACH płyty, żeby nie
   przemalować tła samej płyty (ona czyta --papier-karta dla siebie). */
.kontener.plyta > * { --papier-karta: var(--papier); }

/* --- 15. WYIMEK — zdanie-klucz --------------------------------------- */
.tresc .wyimek {
  position: relative;
  margin: clamp(1.6rem, 1.1rem + 1.5vw, 2.8rem) 0;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem) clamp(1.3rem, .9rem + 1.4vw, 2.4rem)
           clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem) clamp(2.3rem, 1.6rem + 2.2vw, 3.8rem);
  background: var(--papier-karta);
  border: 1px solid var(--obwodka);
  border-start-start-radius: var(--promien-rog);
  border-start-end-radius: var(--promien);
  border-end-end-radius: var(--promien-rog);
  border-end-start-radius: var(--promien);
  box-shadow: var(--cien-karta);
}
/* wstążka wzdłuż krawędzi — sygnał „to jest wyjęte", nie ozdobnik na chybił trafił */
.tresc .wyimek::before {
  content: ""; position: absolute;
  inset-block: clamp(1.1rem, .8rem + 1vw, 1.9rem);
  inset-inline-start: clamp(1rem, .7rem + .9vw, 1.7rem);
  width: 5px; border-radius: 3px;
  background: linear-gradient(180deg, var(--wiodaca) 0%, var(--akcent) 100%);
}
.tresc .wyimek p {
  margin: 0;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.22rem, 1.02rem + .8vw, 1.8rem);
  line-height: 1.32; letter-spacing: -.012em;
  color: var(--atrament);
  text-wrap: balance;
}
.wyimek__lak {
  position: absolute; z-index: 1;
  inset-block-start: -.75rem; inset-inline-end: clamp(1rem, 4%, 2.6rem);
  width: 1.7rem; height: 1.7rem;
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: radial-gradient(circle at 34% 30%, var(--lak-blask) 0%, var(--wiodaca) 42%, var(--wiodaca-ciemna) 100%);
  box-shadow: 0 3px 8px -3px rgba(64, 22, 15, .75);
  pointer-events: none;
}
@media (min-width: 1600px) {
  .tresc .wyimek p { font-size: clamp(1.6rem, 1.1rem + 1vw, 2.05rem); }
}

/* --- 16. ZESTAWIENIE — dwie kolumny „to kontra tamto" ---------------- */
.tresc .zestawienie {
  display: grid; gap: clamp(.9rem, .5rem + 1.2vw, 1.8rem);
  margin: clamp(1.4rem, .9rem + 1.4vw, 2.4rem) 0 clamp(1.4rem, .9rem + 1.4vw, 2.4rem);
}
@media (min-width: 780px)  { .tresc .zestawienie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ⚠ WARIANTU TRZYKOLUMNOWEGO NIE MA. Reguła „.zestawienie--3" stała tu do
   31.08.2026 nieużywana: w żadnym z ośmiu widoków nie ma zestawienia o trzech
   pozycjach — wszystkie mają dokładnie dwie, bo komponent zestawia „to kontra
   tamto". Martwy kod zdjęty; wróci razem z pierwszym blokiem, który go użyje. */
.tresc .zestawienie__poz {
  position: relative;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem) clamp(1.1rem, .85rem + 1vw, 1.7rem)
           clamp(1.2rem, .9rem + 1.1vw, 1.8rem);
  background: var(--papier-karta);
  border: 1px solid var(--obwodka);
  border-start-start-radius: var(--promien);
  border-start-end-radius: clamp(20px, 3vw, 34px);
  border-end-end-radius: var(--promien);
  border-end-start-radius: clamp(20px, 3vw, 34px);
  box-shadow: var(--cien-karta);
}
/* wstążka na górnej krawędzi — jak gzyms płyty, w mniejszej skali */
.tresc .zestawienie__poz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline: clamp(16px, 9%, 54px); height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--akcent) 76%, rgba(134, 97, 26, .12) 100%);
}
.tresc .zestawienie dt {
  margin: 0 0 .5rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.08rem, 1rem + .3vw, 1.3rem); line-height: 1.24;
  color: var(--wiodaca-ciemna);
}
.tresc .zestawienie dd { margin: 0; color: var(--atrament); }

/* --- 17. KROKI — procedura z cyfrą w pieczęci ------------------------ */
.tresc .kroki { margin: clamp(1.4rem, .9rem + 1.4vw, 2.4rem) 0; }
.tresc .kroki__lista {
  display: grid; gap: clamp(.9rem, .5rem + 1.2vw, 1.7rem);
  margin: 0; padding: 0; list-style: none;
  counter-reset: krok;
}
@media (min-width: 820px)  { .tresc .kroki__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .tresc .kroki--3 .kroki__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .tresc .kroki--4 .kroki__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tresc .kroki__lista > li {
  counter-increment: krok;
  position: relative;
  padding: 4.6rem clamp(1.1rem, .85rem + 1vw, 1.7rem) clamp(1.3rem, .9rem + 1.1vw, 1.9rem);
  background: var(--papier-karta);
  border: 1px solid var(--obwodka);
  border-start-start-radius: var(--promien);
  border-start-end-radius: var(--promien-rog);
  border-end-end-radius: var(--promien);
  border-end-start-radius: var(--promien-rog);
  box-shadow: var(--cien-karta);
  color: var(--atrament);
}
/* pierścień pieczęci — ten sam gest co pętla sznurka na przywieszce */
.tresc .kroki__lista > li::after {
  content: ""; position: absolute; z-index: 0;
  inset-block-start: 1.05rem; inset-inline-start: clamp(1rem, .8rem + .9vw, 1.6rem);
  width: 3.2rem; height: 3.2rem;
  border: 2px solid var(--akcent); border-radius: 50%;
  opacity: .8;
}
/* DUŻA CYFRA — ornament porządkowy (pseudoelement, nie treść) */
.tresc .kroki__lista > li::before {
  content: counter(krok);
  position: absolute; z-index: 1;
  inset-block-start: 1.05rem; inset-inline-start: clamp(1rem, .8rem + .9vw, 1.6rem);
  width: 3.2rem; height: 3.2rem;
  display: grid; place-items: center;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 1.9rem; line-height: 1;
  color: var(--wiodaca-ciemna);
}
.tresc .kroki__lista > li > p { margin: 0 0 .8em; }
.tresc .kroki__lista > li > p:last-child { margin-block-end: 0; }

/* --- 18. METKI — wyliczenie z prozy jako przywieszki-etykiety -------- */
.tresc .metki-pas { margin: clamp(1.2rem, .8rem + 1.2vw, 2.1rem) 0; }
/* ⚠⚠ ODSTĘP W REM, NIE W VW — i to jest warunek, bez którego metki ROSNĄC
   ZWĘŻAJĄ SIĘ. Metka ma wszystkie miary związane ze stopniem pisma (font w rem,
   wyściółka w em), więc rośnie dokładnie tak jak korzeń: 1366 -> 1920 px to
   x1,103. Pasmo .szeroki w tym samym przedziale rośnie x1,139, czyli SZYBCIEJ,
   więc metek w rzędzie może tylko przybyć. Odstęp liczony w „vw" rósł x1,273 —
   wyprzedzał pasmo i zjadał tę nadwyżkę. */
.tresc .metki {
  display: flex; flex-wrap: wrap;
  gap: .85rem;
  margin: 0; padding: 0; list-style: none;
}
.tresc .metki > li {
  position: relative;
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  padding: .95em 1.2em .95em 3em;
  background-color: var(--papier-karta);
  /* otwór na sznurek — ten sam rysunek co na przywieszce, w mniejszej skali */
  background-image:
    radial-gradient(circle at 1.55em 50%,
      var(--pod-karta) 0 .32em, var(--linia) .32em .4em, transparent .41em);
  border: 1px solid var(--obwodka);
  border-start-start-radius: 22px;
  border-end-start-radius: 22px;
  border-start-end-radius: var(--promien);
  border-end-end-radius: var(--promien);
  box-shadow: var(--cien-karta);
  font-size: .97rem; line-height: 1.55;
  color: var(--atrament);
}
/* ⚠⚠ TU STAŁ SKOK OD 1600 px (font .97 -> 1.02 rem, wyściółka 3 -> 3,2 em).
   Miał być „metka rośnie na dużym ekranie", a był REGRESJĄ SZEROKOŚCI: metka
   rosła x1,16, pasmo tylko x1,139, więc przy 1920 px metek w rzędzie UBYWAŁO
   względem 1366 px. Pomiar 31.08.2026 przed zdjęciem skoku:
     index.html          1. rząd 3 metki przy 1366 -> 2 metki przy 1920,
     podstrona-1 blok 1  1. rząd 3 metki przy 1366 -> 2 metki przy 1920,
     wpis-2.html         3 rzędy przy 1366 -> 4 rzędy przy 1920.
   Metka i tak rośnie w pikselach, bo font liczony jest w rem, a korzeń rośnie
   z szerokością okna (18,78 px przy 1366 -> 20,72 px przy 1920). */

/* --- 19. OSTRZEŻENIE — zdanie, które jest przestrogą ----------------- */
.tresc .ostrzezenie {
  position: relative;
  display: grid; align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(.9rem, .6rem + .8vw, 1.4rem);
  margin: clamp(1.5rem, 1rem + 1.4vw, 2.5rem) 0;
  padding: clamp(1.2rem, .9rem + 1.1vw, 1.9rem) clamp(1.2rem, .9rem + 1.1vw, 1.9rem);
  background: var(--wiodaca-jasna);
  border: 1px solid var(--wiodaca);
  border-inline-start-width: 5px;
  border-start-start-radius: var(--promien);
  border-start-end-radius: clamp(20px, 3vw, 34px);
  border-end-end-radius: var(--promien);
  border-end-start-radius: var(--promien);
  box-shadow: var(--cien-karta);
}
.ostrzezenie__znak {
  flex: none; display: block;
  width: clamp(1.9rem, 1.6rem + .8vw, 2.6rem); height: clamp(1.9rem, 1.6rem + .8vw, 2.6rem);
  color: var(--wiodaca-ciemna);   /* B6: 7,34:1 na #F7E2D9, 8,35:1 na laku */
}
.ostrzezenie__znak svg { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) {
  .tresc .ostrzezenie { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
}
.tresc .ostrzezenie p { margin: 0 0 .8em; max-width: var(--kolumna); color: var(--atrament); }
.tresc .ostrzezenie p:last-child { margin-block-end: 0; }

/* --- 20. RYSUNEK — akapit z rysunkiem kreskowym ---------------------- */
.tresc .rysunek {
  display: grid; align-items: center;
  gap: clamp(1rem, .6rem + 1.4vw, 2.2rem);
  margin: clamp(1.4rem, .9rem + 1.4vw, 2.5rem) 0;
  padding: clamp(1.4rem, 1rem + 1.3vw, 2.2rem) clamp(1.2rem, .9rem + 1.1vw, 1.9rem);
  background: var(--papier-karta);
  border: 1px solid var(--obwodka);
  border-start-start-radius: var(--promien-rog);
  border-start-end-radius: var(--promien);
  border-end-end-radius: var(--promien-rog);
  border-end-start-radius: var(--promien);
  box-shadow: var(--cien-karta);
}
@media (min-width: 820px)  { .tresc .rysunek { grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem); } }
@media (min-width: 1600px) { .tresc .rysunek { grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); } }
.tresc .rysunek p { margin: 0 0 .9em; color: var(--atrament); }
.tresc .rysunek p:last-child { margin-block-end: 0; }
.rysunek__obraz {
  display: block; justify-self: center; width: 100%;
  color: var(--linia);            /* B6: 5,30:1 na bieli, 7,22:1 na laku */
}
.rysunek__obraz svg { width: 100%; height: auto; display: block; }

/* --- 21. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(56% 90% at 88% 0%, rgba(179, 39, 32, .42) 0%, rgba(179, 39, 32, 0) 62%),
    radial-gradient(44% 70% at 4% 100%, rgba(122, 74, 34, .42) 0%, rgba(122, 74, 34, 0) 66%),
    repeating-linear-gradient(90deg, var(--orn-zloto) 0 1px, transparent 1px 12px);
  color: var(--na-ciemnym);
  padding-block: clamp(2.4rem, 1.4rem + 2.8vw, 4.6rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--zloto-jasne) 50%, var(--wiodaca) 100%);
}
/* ukośna taśma w rogu stopki */
.stopka__tasma {
  position: absolute; z-index: 0;
  inset-block-start: -34%; inset-inline-end: -12%;
  width: 44%; height: clamp(90px, 12vw, 200px);
  transform: rotate(-13deg);
  background:
    repeating-linear-gradient(90deg, rgba(240, 201, 138, .15) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(240, 201, 138, .07) 0%, rgba(240, 201, 138, 0) 100%);
  border-block: 1px solid rgba(240, 201, 138, .13);
  pointer-events: none;
}
/* ⚠ Trzy elementy w jednym rzędzie flex zawijały się przypadkowo: przy 1920
   sygnatura łamała się na dwa wiersze, a przycisk „Wróć na górę" spadał pod nią.
   Siatka rozkłada to ŚWIADOMIE: sygnatura i menu w rzędzie, powrót w drugim. */
.stopka__pas {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}
@media (min-width: 900px) {
  .stopka__pas {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(1rem, 3vw, 3rem);
  }
  .stopka__menu { justify-self: end; }
  .stopka__gora {
    grid-column: 1 / -1; justify-self: end;
    padding-block-start: clamp(.9rem, 1.6vw, 1.6rem);
  }
}
.stopka__znak {
  margin: 0; max-width: 34em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1rem, .93rem + .26vw, 1.2rem); line-height: 1.24;
  color: var(--na-ciemnym);
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: 0 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(--cichy-ciemny); font-weight: 700;
  font-size: .76rem; letter-spacing: .085em; 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: .76rem; font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--zloto-jasne); color: var(--glebia); }

/* --- 22. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 1.6rem 0 2.2rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--obwodka); border-radius: var(--promien-karta);
  background: var(--papier-karta); padding: 0; overflow: hidden;
  box-shadow: var(--cien-karta);
}
.próbka__pole { display: block; height: 76px; }
.próbka__opis {
  display: block; padding: .8rem 1rem;
  font-family: var(--krój-maszyna); font-size: .78rem;
  color: var(--atrament); line-height: 1.55;
}
.skala-pisma { margin: 1.4rem 0 2rem; padding: 0; list-style: none; }
.skala-pisma li { margin: 0 0 .7rem; }
.skala-pisma b { font-family: var(--krój-naglowek); font-weight: 600; display: block; line-height: 1.1; }

/* =====================================================================
   23. BAREK NAGŁÓWKÓW — kompozycja powyżej 1760 px
   ---------------------------------------------------------------------
   POWÓD. Do 31.08.2026 lewa szyna siatki .kontener stała PUSTA na każdej
   szerokości: proza siedziała w środkowym torze, a bloki „.szeroki" rosły
   wyłącznie w prawo. Przy 1920 px dawało to 152 px marginesu pasma i drugie
   360 px pustej szyny po lewej — prawie 900 px ekranu bez treści, przy
   jednoczesnym wyimku o linii 941 px (za długiej do czytania).

   ROZWIĄZANIE. Powyżej 1760 px lewa szyna DOSTAJE ROBOTĘ: wjeżdża w nią
   nagłówek sekcji, dosunięty do prawej krawędzi szyny, ze wstążką odbitą
   lustrzanie. Nagłówek staje OBOK pierwszego bloku swojej sekcji, a nie nad
   nim, więc szerokość odzyskana z marginesu nie zamienia się w większe
   białe pole, tylko w drugą kolumnę kompozycji.

   ⚠ RZĄD ROBI SIĘ SAM. Nie ma tu żadnego grid-row. Algorytm automatycznego
   rozmieszczania siatki stawia element o zadanej kolumnie w pierwszym
   wolnym rzędzie OD KURSORA, a kursor cofa rząd dopiero wtedy, gdy kolumna
   maleje. Dlatego: h2 (kolumna 1) → nowy rząd, następny blok (kolumna 2)
   → TEN SAM rząd, kolejne akapity → rzędy niżej, następne h2 → znowu
   kolumna 1 i rząd niżej. Sprawdzone na wszystkich siedmiu widokach.

   ⚠ WYRÓWNANIE GÓRNEJ LINII. Margines sekcji i pas wstążki są w cieżkim
   rzędzie DWA RAZY: raz na nagłówku (margines + padding), raz na jego
   sąsiedzie w kolumnie prozy (margin-block-start = suma obu). Bez tego
   nagłówek wisiałby o wysokość wstążki niżej niż tekst obok.

   ⚠⚠ PUŁAPKA WĄSKIEJ SZYNY: body ma „overflow-wrap: break-word", co
   w wąskiej kolumnie łamie nagłówek W ŚRODKU SŁOWA („niepostrze-żenie")
   i żadna bramka tego nie widzi. Barek dostaje więc jawnie
   „overflow-wrap: normal" plus „hyphens: auto" jako siatkę bezpieczeństwa.
   ===================================================================== */
@media (min-width: 1760px) {

  /* --- nagłówek sekcji w barku ---------------------------------------- */
  .tresc .kontener > h2 {
    grid-column: pelna-start / tekst-start;
    align-self: start;
    text-align: right;
    padding-inline-end: clamp(1.7rem, 2.2vw, 3rem);
    /* mniejszy niż w układzie jednokolumnowym: to nagłówek BOCZNY, ma
       współpracować z kolumną prozy, a nie ją przekrzykiwać */
    font-size: clamp(1.5rem, .9rem + 1.1vw, 2.1rem);
    overflow-wrap: normal;
    hyphens: auto;
  }
  /* wstążka odbita lustrzanie — trzyma się prawej krawędzi barku */
  .tresc .kontener > h2::before {
    inset-inline-start: auto;
    inset-inline-end: clamp(1.7rem, 2.2vw, 3rem);
    background: linear-gradient(270deg, var(--wiodaca) 0%, var(--akcent) 78%, rgba(134, 97, 26, .1) 100%);
  }
  /* sąsiad z kolumny prozy zaczyna się na linii TEKSTU nagłówka */
  .tresc .kontener > h2 + * { margin-block-start: calc(var(--h2-margines) + var(--h2-wstazka)); }
  .tresc .kontener > h2:first-child + * { margin-block-start: var(--h2-wstazka); }

  /* --- hero: tytuł wychodzi na pełną szerokość arkusza ---------------- */
  /* ⚠ Do 31.08.2026 tytuł zaczynał się tam, gdzie proza — czyli przy 1920 px
     dopiero na 610. pikselu. Skoro w barku najdalej wysuniętą treścią są
     nagłówki sekcji, a nie proza, to i tytuł ma trzymać krawędź ARKUSZA:
     inaczej pierwszy ekran serwisu to w połowie pusty papier pakowy.
     Lead zostaje w kolumnie prozy — schodek tytuł/wprowadzenie jest tu
     zamierzony i powtarza rytm „nagłówek z lewej, tekst w kolumnie". */
  .tresc .kontener--hero > .tytul {
    grid-column: pelna-start / pelna-end;
    max-width: 19em;
  }

  /* --- wyimek: zdanie w kolumnie do czytania, pieczęć w szynie obok ---- */
  /* ⚠ To tutaj mieszkał najdłuższy wiersz makiety (941 px przy 1920).
     Wyimek zostaje szeroki jako BLOK, ale jego linia wraca do miary,
     w której da się czytać, a odzyskane pole bierze lak pieczęci. */
  .tresc .wyimek {
    display: grid;
    grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1.6rem, 2.2vw, 3.2rem);
  }
  .tresc .wyimek p { grid-column: 1; grid-row: 1; }
  .tresc .wyimek__lak {
    position: static;
    grid-column: 2; grid-row: 1;
    justify-self: center;
    inset: auto;
    width: clamp(4.6rem, 5.6vw, 7rem);
    height: clamp(4.6rem, 5.6vw, 7rem);
    box-shadow: 0 14px 30px -14px rgba(64, 22, 15, .75);
  }
}

/* --- 24. 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: #FFFFFF; }
  .hero, .stopka, .pas--lak, .pas--domkniecie, .pas--karton, .pas--plyta, .pas--papier {
    background: #FFFFFF !important; color: #000000 !important;
  }
  .hero__kokarda, .hero__pieczec, .hero__tasma, .hero__poswiata,
  .pas__tasma, .stopka__tasma, .domkniecie__kokarda,
  .przywieszka__sznurek, .indeks__sznurek, .zapowiedz__sznurek,
  .wyimek__lak, .rysunek__obraz { display: none !important; }
  .kontener.plyta, .przywieszka, .katalog__karta, .zapowiedz, .panel-listy,
  .wyimek, .zestawienie__poz, .kroki__lista > li, .metki > li, .ostrzezenie,
  .rysunek { box-shadow: none; }
  .rysunek { display: block; }
  .kontener.plyta { margin-block-start: 0; }
  a { color: #000000; }
}