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

   IDEA: temat serwisu to DECYZJA, nie paczka. Widok jest zbudowany jak
   ważenie racji — grafitowe pasma i kremowe płyty kładą się naprzemiennie,
   a każdą sekcję otwiera duża ozdobna cyfra stojąca w marginesie, jak
   odważnik przy szali. Miedź jest jedyną barwą ciepłą i pojawia się
   oszczędnie: włos linii, obwódka, cyfra, przycisk. Zero opakowań,
   zero wstążek, zero kokard.

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

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --papier:          #FAF6F0;   /* kremowa biel — podłoże */
  --papier-karta:    #FFFFFF;   /* płyta i karty */
  --tlo-2:           #EFE7DB;   /* piaskowe pasmo drugoplanowe */
  --wiodaca-jasna:   #F3E7D8;   /* pola odsyłaczy, plakietki */
  /* pismo */
  --atrament:        #16191C;   /* grafitowa czerń */
  --atrament-cichy:  #4B535B;
  /* barwa wiodąca: miedź */
  --wiodaca:         #A85A24;   /* miedź — kreski i powierzchnie */
  --wiodaca-ciemna:  #8A4718;   /* miedź przygaszona — nagłówki, odsyłacze */
  --akcent:          #2F5D52;   /* patyna — wskazanie i obrys skupienia */
  --linia:           #82796F;
  --linia-cicha:     #E2D8C9;
  --na-wiodacej:     #FFFFFF;
  --na-akcencie:     #FFFFFF;

  /* powierzchnie ciemne (hero, pasmo nocne, stopka) */
  --grafit:          #22262B;
  --grafit-2:        #171A1E;
  --grafit-3:        #2E343A;
  --miedz-jasna:     #E0A063;   /* miedź na grafitcie */
  --miedz-blada:     #C98B45;
  --na-ciemnym:      #F4EDE3;
  --na-ciemnym-cichy:#D8CFC2;

  /* ornamenty — wyłącznie warstwa wizualna, nigdy nośnik informacji */
  --orn-miedz:       rgba(168, 90, 36, .085);
  --orn-miedz-mocna: rgba(168, 90, 36, .20);
  --orn-grafit:      rgba(34, 38, 43, .07);
  --orn-cyfra:       rgba(168, 90, 36, .55);
  --orn-cyfra-noc:   rgba(224, 160, 99, .48);
  --szyna:           rgba(168, 90, 36, .26);
  --szyna-noc:       rgba(224, 160, 99, .26);

  --krój-naglowek: "Spectral", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --krój-tekst:    "Manrope", "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.
     Miara w em dawała przy 1920 wiersz o ćwierć dłuższy niż przy 1366,
     bo nagłówek i akapit mają inny stopień pisma. */
  --kolumna:        34rem;   /* kolumna prozy (≈68 znaków dla Manrope) */
  /* ⭐⭐ SKALA POWYŻEJ 1366 px (decyzja użytkownika 2026-08-31). Pasmo miało
     76rem i DODATKOWO wewnętrzne wypełnienie 5vw — marginesu było podwójnie,
     więc przy 1920 px zostawało po 173 px pustego pola z każdej strony przy
     regule serii ~95 px. Pasmo rośnie do 84rem, a wypełnienie spada z 5vw/112px
     do 3,4vw/62px: przy 1920 px daje to ok. 90 px marginesu.
     ⚠ Odzyskane 166 px NIE idą w szerszą prozę (byłby wiersz 105-znakowy),
     tylko w SZYNY: lewa niesie cyfrę sekcji i nagłówki, prawa karty odsyłaczy,
     a siatki kart dostają więcej kolumn. Patrz sekcja 16. */
  --pas-szer:       84rem;   /* maksymalna szerokość pasma treści */
  --margines:       clamp(22px, 3.4vw, 62px);
  --rynna:          clamp(1.4rem, 2.2vw, 3rem);   /* odstęp szyna ↔ kolumna prozy */

  --promien:        8px;
  --promien-karta:  16px;
  --promien-duzy:   26px;
  --cien-plyta:     0 30px 64px -32px rgba(22, 25, 28, .40), 0 2px 10px -5px rgba(22, 25, 28, .18);
  --cien-karta:     0 20px 40px -26px rgba(22, 25, 28, .38), 0 1px 3px -2px rgba(22, 25, 28, .14);
  --cien-noc:       0 26px 56px -30px rgba(0, 0, 0, .70);
  --zachodzenie:    clamp(1.6rem, 1rem + 2.2vw, 4rem);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.72;
  /* ⚠ pułapka 6: pasy pełnej szerokości i ornamenty potrafią wypchnąć widok
     w bok. „clip" leczy to bez psucia position:sticky w nagłówku. */
  overflow-x: clip;
  /* ⚠ długie ścieżki w prozie rozpychały widok na 360 px (bramka B5) */
  overflow-wrap: break-word;
}

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

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
  border-radius: var(--promien);
}

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (B7 mierzy prostokąt) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 190px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.5rem;
  background: var(--grafit-2); color: var(--na-ciemnym);
  font-weight: 600; letter-spacing: .04em; text-decoration: none;
  border-radius: 0 0 var(--promien) 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 mierzy jednostronność),
   a bloki z klasą .szeroki rozpychają się na całe pasmo. Szyny nie są puste
   z lenistwa: w lewej stoją ozdobne cyfry sekcji. */
.kontener {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  column-gap: var(--rynna);
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki { grid-column: pelna-start / pelna-end; }
/* hero: tytuł zaczyna się 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: 30;
  background: var(--papier);
  box-shadow: 0 12px 32px -28px rgba(22, 25, 28, .8);
}
.naglowek::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg,
    var(--grafit) 0%, var(--wiodaca) 34%, var(--miedz-jasna) 58%, var(--linia-cicha) 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .3rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* sygnatura słowna — typograficzna; nigdy nie udaje logotypu firmy (T8, T9) */
.znak {
  display: inline-flex; align-items: center; min-height: 46px;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.08rem, .96rem + .34vw, 1.5rem);
  line-height: 1.18; letter-spacing: .002em;
  text-decoration: none; color: var(--atrament);
  padding-inline-end: .2em;
}
.znak__tekst { position: relative; padding-block-end: .14em; }
.znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 2.2em; height: 2px; background: var(--wiodaca);
  transition: width .25s ease;
}
.znak:hover .znak__tekst::after { width: 100%; }

/* ⚠ pułapka B5: „flex:none" na nawigacji nie pozwala jej się zwężyć i lista
   wystaje poza ekran przy 360 px. Nawigacja MA się kurczyć i zawijać —
   menu jest zwykłą listą, bez <details> (pułapka T7 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(.1rem, 1vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .7em;
  font-weight: 600; font-size: .78rem;
  letter-spacing: .13em; 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(--atrament); }
.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(--miedz-jasna));
}
@media (max-width: 760px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
  .menu__link { padding-inline: .45em; letter-spacing: .09em; }
}

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

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--grafit-2);
  background-image:
    radial-gradient(72% 58% at 84% 8%,  rgba(168, 90, 36, .40) 0%, rgba(168, 90, 36, 0) 62%),
    radial-gradient(58% 52% at 4% 92%,  rgba(90, 104, 116, .34) 0%, rgba(90, 104, 116, 0) 66%),
    radial-gradient(44% 38% at 96% 92%, rgba(224, 160, 99, .16) 0%, rgba(224, 160, 99, 0) 70%),
    linear-gradient(162deg, #2B3036 0%, #20242A 44%, #13161A 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3.2rem, 1.6rem + 5vw, 8rem) clamp(4rem, 2rem + 6vw, 9rem);
}
/* kremowy łuk, którym papier wchodzi pod pasmo grafitu — warstwa na warstwie */
.hero::after {
  content: ""; position: absolute; z-index: 0;
  inset-inline: -6%; inset-block-end: -2px;
  height: clamp(26px, 4.2vw, 78px);
  background: var(--papier);
  border-start-start-radius: 58% 100%;
  border-start-end-radius: 58% 100%;
}
/* ORNAMENT: szala — belka, dwie czasze i kręgi. Bez treści, aria-hidden. */
.hero__szala {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -12%;
  width: clamp(330px, 45vw, 880px); aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--miedz-jasna);          /* B6: barwa ikony wobec tła hero */
  pointer-events: none;
}
.hero__szala svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .hero__szala {
    inset-block-start: auto; inset-block-end: -4%; inset-inline-end: -42%;
    transform: none; width: clamp(300px, 84vw, 560px); opacity: .55;
  }
}
.hero__mgla {
  position: absolute; z-index: 0;
  inset-block-start: -24%; inset-inline-start: -14%;
  width: clamp(280px, 42vw, 780px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 160, 99, .17) 0%, rgba(224, 160, 99, 0) 66%);
  pointer-events: none;
}
/* siatka punktów w dolnym pasie hero */
.hero__punkty {
  position: absolute; z-index: 0;
  inset-inline-start: 0; inset-block-end: 0;
  width: min(52%, 620px); height: 46%;
  background-image: radial-gradient(circle, rgba(224, 160, 99, .28) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to top, #000 0%, transparent 82%);
  pointer-events: none;
}
.hero .kontener { position: relative; z-index: 1; }

.hero .tytul {
  margin: 0 0 clamp(1.1rem, .7rem + 1vw, 2.1rem);
  max-width: 15em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(2.35rem, 0.85rem + 4.15vw, 5.4rem);
  line-height: 1.03; letter-spacing: -.021em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
/* miedziana kreska nad tytułem — sygnał pasma, nie informacja */
.hero .tytul::before {
  content: ""; display: block;
  width: clamp(64px, 9vw, 148px); height: 3px;
  margin-block-end: clamp(1.1rem, .8rem + 1vw, 2.3rem);
  background: linear-gradient(90deg, var(--miedz-jasna), rgba(224, 160, 99, 0));
}
.hero .lid {
  margin: 0; max-width: 40rem;
  font-size: 1.16rem; line-height: 1.66;
  color: var(--na-ciemnym-cichy);
}

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

.pas--wstep {
  background-color: var(--papier);
  padding-block: clamp(2.6rem, 1.4rem + 3.2vw, 5rem);
}
.pas--wstep .kontener > p {
  font-size: 1.14rem; line-height: 1.68; color: var(--atrament);
}
/* włos miedzi nad akapitem wstępu */
.pas--wstep .kontener > p::before {
  content: ""; display: block; width: 3.4em; height: 2px;
  margin-block-end: 1.5em; background: var(--wiodaca);
}

.pas--krem {
  overflow: hidden;
  background-color: var(--papier);
  background-image:
    radial-gradient(64% 62% at 96% 42%, rgba(168, 90, 36, .10) 0%, rgba(168, 90, 36, 0) 66%),
    radial-gradient(circle, var(--orn-miedz-mocna) 1.5px, transparent 1.7px);
  background-size: auto, 28px 28px;
  padding-block: clamp(2.6rem, 1.4rem + 3.4vw, 5.4rem);
}
/* ORNAMENT pasma kremowego: czasze szali w prawej szynie (6B — sama dekoracja) */
.pas__luk {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -5%;
  width: clamp(240px, 28vw, 560px); aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--wiodaca);
  pointer-events: none;
}
.pas__luk svg { width: 100%; height: auto; display: block; }
@media (max-width: 1023px) { .pas__luk { opacity: .55; inset-inline-end: -22%; } }

/* ⭐ szyna ozdobnych cyfr — pionowy włos w lewej szynie kolumny (od 1180 px) */
@media (min-width: 1180px) {
  .pas--sekcja::after {
    content: ""; position: absolute; z-index: 0; inset-block: 0;
    inset-inline-start: 50%;
    transform: translateX(calc(-1 * (var(--kolumna) / 2) - 9rem));
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--szyna) 14%,
                var(--szyna) 86%, transparent 100%);
  }
}
.pas--sand {
  background-color: var(--tlo-2);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 62px, var(--orn-grafit) 62px 63px);
  padding-block: clamp(2.8rem, 1.5rem + 3.6vw, 5.6rem);
}
/* pasmo, na którym leży kremowobiała PŁYTA nachodząca na sąsiada */
.pas--plyta {
  background-color: var(--papier);
  background-image: radial-gradient(circle, var(--orn-miedz) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  padding-block: 0 clamp(1.6rem, 1rem + 2vw, 3.4rem);
  padding-inline: clamp(10px, 1.8vw, 30px);
}
.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(--linia-cicha);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-plyta);
  overflow: hidden;
}
/* gzyms płyty — cienka kreska grafit→miedź na górnej krawędzi */
.plyta::before {
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline: clamp(24px, 9%, 160px); height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--grafit), var(--wiodaca) 62%, rgba(168, 90, 36, .12));
}

/* pasmo nocne — 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--noc {
  position: relative; overflow: hidden;
  --papier:          var(--grafit);
  --papier-karta:    var(--grafit-3);
  --tlo-2:           var(--grafit-3);
  --wiodaca-jasna:   var(--grafit-3);
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--na-ciemnym-cichy);
  --wiodaca:         var(--miedz-jasna);
  --wiodaca-ciemna:  var(--miedz-jasna);
  --akcent:          var(--miedz-jasna);
  --na-wiodacej:     var(--grafit-2);
  --linia:           #7C848C;
  --linia-cicha:     #3C434A;
  --orn-cyfra:       var(--orn-cyfra-noc);
  --szyna:           var(--szyna-noc);
  background-color: var(--grafit);
  background-image:
    radial-gradient(62% 56% at 88% 6%, rgba(168, 90, 36, .34) 0%, rgba(168, 90, 36, 0) 62%),
    radial-gradient(48% 44% at 6% 96%, rgba(90, 104, 116, .30) 0%, rgba(90, 104, 116, 0) 66%),
    radial-gradient(circle, rgba(224, 160, 99, .10) 1.4px, transparent 1.6px);
  background-size: auto, auto, 26px 26px;
  color: var(--na-ciemnym);
  padding-block: clamp(3rem, 1.6rem + 3.6vw, 5.8rem);
}
.pas--noc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg,
    rgba(224, 160, 99, .06) 0%, var(--miedz-jasna) 46%, rgba(224, 160, 99, .06) 100%);
}

/* pasmo zamykające — ciemna płyta z przyciskami */
.pas--finisz {
  position: relative; overflow: hidden;
  --papier:          var(--grafit-2);
  --papier-karta:    var(--grafit-3);
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--na-ciemnym-cichy);
  --wiodaca:         var(--miedz-jasna);
  --wiodaca-ciemna:  var(--miedz-jasna);
  --linia-cicha:     #3C434A;
  background-color: var(--grafit-2);
  background-image:
    radial-gradient(70% 60% at 12% 10%, rgba(168, 90, 36, .30) 0%, rgba(168, 90, 36, 0) 64%),
    linear-gradient(180deg, #1B1F24 0%, #131619 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3rem, 1.7rem + 3.6vw, 5.6rem);
}
.pas--finisz::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--wiodaca-ciemna) 0%, var(--miedz-jasna) 40%, rgba(224,160,99,.05) 100%);
}
.pas--finisz .kontener { position: relative; z-index: 1; }
.finisz__krata {
  position: absolute; z-index: 0; inset-block: 0; inset-inline-end: 0;
  width: min(46%, 560px);
  background-image: radial-gradient(circle, rgba(224, 160, 99, .22) 1px, transparent 1.2px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to left, #000 0%, transparent 88%);
  pointer-events: none;
}

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.2rem, 1.4rem + 2vw, 3.4rem) 0 .9rem;
  padding-block-start: clamp(.9rem, .6rem + .9vw, 1.6rem);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.5rem, 1.08rem + 1.4vw, 2.45rem);
  line-height: 1.16; letter-spacing: -.012em;
  color: var(--atrament);
  text-wrap: balance;
}
/* miedziana kreska nad każdym nagłówkiem sekcji */
.tresc h2::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(48px, 6vw, 96px); height: 2px;
  background: linear-gradient(90deg, var(--wiodaca), rgba(168, 90, 36, .18));
}
.kontener > h2:first-child,
.plyta > h2:first-child { margin-block-start: 0; }

/* ⭐ MOTYW PRZEWODNI: duża ozdobna cyfra sekcji. Rysowana pseudoelementem,
   więc nie ma jej w DOM-ie i nie jest treścią — to ornament (6B). */
.pas--sekcja { counter-increment: sekcja; }
.pas--sekcja .kontener > h2::before {
  content: counter(sekcja, decimal-leading-zero);
  display: block;
  margin-block-end: .35em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem);
  line-height: .82; letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--orn-cyfra);
  font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 1180px) {
  .pas--sekcja .kontener > h2::before {
    position: absolute; margin: 0;
    inset-inline-end: calc(100% + .5em);
    inset-block-start: -.06em;
    font-size: clamp(4.2rem, 5vw, 6.4rem);
  }
}

.tresc h3 {
  margin: clamp(1.7rem, 1.1rem + 1.3vw, 2.5rem) 0 .5rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.14rem, 1.02rem + .34vw, 1.44rem);
  line-height: 1.3; color: var(--wiodaca-ciemna);
}
.tresc h3::before {
  content: ""; display: inline-block;
  width: .9em; height: 2px; margin-inline-end: .55em;
  vertical-align: .32em; background: var(--wiodaca);
}

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

/* ⚠⚠ pułapka „.proza a bije .przycisk": reguła linku prozy MUSI wykluczyć
   komponenty, inaczej przycisk dostaje kolor linku (czasem własnego tła). */
.tresc p a:not(.przycisk):not(.wskaz__cel):not(.indeks__cel):not(.wiecej),
.tresc li a:not(.przycisk):not(.wskaz__cel):not(.indeks__cel):not(.zapowiedz__link):not(.wiecej) {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--wiodaca);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.tresc p a:not(.przycisk):not(.wiecej):hover,
.tresc li a:not(.przycisk):not(.zapowiedz__link):not(.wiecej):hover { text-decoration-thickness: 2px; }

/* --- 8. WSKAZANIE (odsyłacz zapisany w źródle jako osobny wiersz) ----- */
/* Źródło zapisuje te wiersze w postaci „LINK W TEKŚCIE: „…" — /ścieżka/",
   ale nazwa pola, cudzysłowy i ścieżka to zapis REDAKCYJNY, nie treść dla
   czytelnika. Na stronie zostaje sam tekst odsyłacza, złożony jako odsyłacz;
   ścieżka mieszka wyłącznie w href. */
/* ⚠ reguły .wskaz__lab/__tyt/__sep/__wiersz, .cta__lab/__tyt/__sep oraz
   .indeks__lab/__tyt/__sep usunięto razem z rusztowaniem redakcyjnym w HTML —
   arkusz nie ma prawa opisywać układu, którego w makiecie już nie ma. */
.tresc .wskaz {
  position: relative;
  display: grid; gap: .28rem;
  margin: 1.9em 0 2em;
  padding: clamp(1rem, .7rem + .9vw, 1.6rem) clamp(1rem, .7rem + 1.1vw, 1.9rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--wiodaca);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
}
.tresc .wskaz__cel {
  display: inline-block; min-height: 44px; padding-block: .6em;
  font-family: var(--krój-maszyna); font-size: .84rem; letter-spacing: .005em;
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-color: var(--wiodaca);
  text-decoration-thickness: 1px; text-underline-offset: .25em;
  overflow-wrap: anywhere;
}
.tresc .wskaz__cel:hover { text-decoration-thickness: 2px; }
/* ⚠ Karta wskazania niesie teraz WYŁĄCZNIE tekst odsyłacza ze źródła (nazwa
   pola redakcyjnego i nazwa widoku docelowego zniknęły — adres mieszka w href).
   Odsyłacz przejmuje typografię, którą wcześniej niósł .wskaz__tyt, żeby po
   usunięciu tamtych elementów karta nie zrobiła się pustym pudełkiem. */
.tresc .wskaz__cel--tytul {
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.06rem, .98rem + .34vw, 1.36rem);
  line-height: 1.32; letter-spacing: 0;
  padding-block: .34em; text-underline-offset: .18em;
  overflow-wrap: normal;
}

/* --- 9. PRZYCISK I PASMO ZAMYKAJĄCE ---------------------------------- */
.tresc .cta-rzad { display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.9rem); margin: 0; }
@media (min-width: 900px) {
  .tresc .cta-rzad--dwa { grid-template-columns: 1fr 1fr; align-items: start; }
}
.tresc .cta {
  display: grid; gap: .34rem; align-content: start;
  padding: clamp(1.1rem, .8rem + 1vw, 1.8rem) clamp(1.1rem, .8rem + 1.1vw, 1.9rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
}
.tresc .przycisk {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 52px; margin-block-start: .5rem;
  padding: .7em 1.4em;
  background: var(--grafit); color: var(--papier);
  font-family: var(--krój-maszyna); font-size: .82rem; font-weight: 500;
  letter-spacing: .01em; text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--grafit);
  box-shadow: 0 12px 26px -18px rgba(22, 25, 28, .9);
  overflow-wrap: anywhere;
  transition: background .2s ease, transform .2s ease;
}
.tresc .przycisk::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 2px;
  background: var(--miedz-jasna);
}
.tresc .przycisk:hover { background: var(--grafit-2); transform: translateY(-1px); }
/* ⚠ Górny margines przycisku oddzielał go od tytułu kafla. Tytuł zniknął wraz
   z rusztowaniem redakcyjnym — bez zerowania zostałaby po nim pusta szpara. */
.tresc .cta > .przycisk { margin-block-start: 0; }
.pas--finisz .cta, .pas--noc .cta {
  background: rgba(255, 255, 255, .045);
  border-color: #3C434A;
  box-shadow: var(--cien-noc);
}
.pas--finisz .przycisk, .pas--noc .przycisk {
  background: var(--miedz-jasna); color: var(--grafit-2);
  border-color: var(--miedz-jasna); font-weight: 600;
}
.pas--finisz .przycisk::before, .pas--noc .przycisk::before { background: var(--grafit-2); }
.pas--finisz .przycisk:hover, .pas--noc .przycisk:hover { background: var(--miedz-blada); }

/* --- 10. KARTY PYTAŃ (wyliczenia ze źródła) -------------------------- */
/* „Karta jak lista pytań": numer, cienka kreska, jedno zdanie. */
.tresc .pytania {
  counter-reset: pyt;
  margin: .6em 0 2em; padding: 0; list-style: none;
  display: grid; gap: clamp(.7rem, .4rem + .8vw, 1.2rem);
}
@media (min-width: 860px)  { .tresc .pytania { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ⭐ Odzyskana szerokość idzie w KOLUMNY. Listy czterokartowe mieszczą się
   powyżej 1440 px w jednym rzędzie, gęste (5–6 kart) stoją po trzy.
   ⚠ Kolejność: „--gesta" MUSI stać po regule ogólnej — obie mają tę samą
   specyficzność (0-2-0), więc rozstrzyga miejsce w arkuszu. */
@media (min-width: 1440px) { .tresc .pytania { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tresc .pytania--gesta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tresc .pytania li {
  counter-increment: pyt;
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1rem, .75rem + .8vw, 1.5rem) clamp(1rem, .75rem + .9vw, 1.6rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
}
.tresc .pytania li::before {
  content: counter(pyt, decimal-leading-zero);
  display: block; margin-block-end: .5rem; padding-block-end: .5rem;
  border-block-end: 1px solid var(--linia-cicha);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 1.5rem; line-height: 1; letter-spacing: -.02em;
  color: var(--wiodaca-ciemna);
  font-variant-numeric: lining-nums tabular-nums;
}
.tresc .pytania li::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: clamp(1rem, .75rem + .9vw, 1.6rem);
  width: 2.1em; height: 3px; background: var(--wiodaca);
  border-radius: 0 0 3px 3px;
}
.pas--noc .pytania li { background: rgba(255, 255, 255, .05); }

/* --- 11. INDEKS INSTRUKCJI (blok wierszowy ze źródła) ---------------- */
/* ⚠ Źródło zapisuje ten blok jako WIERSZE, nie akapit (ostrzeżenie inwentarza).
   Każdy wiersz zostaje osobnym wierszem także w makiecie. */
.tresc .indeks {
  display: grid; gap: 0;
  margin: 1.6em 0 0; padding: 0;
  border-block-start: 2px solid var(--wiodaca);
}
/* ⚠ Wiersz indeksu niesie już tylko tekst odsyłacza — kolumna po etykiecie
   pola zostawiłaby puste wcięcie szerokości odstępu, więc kolumna jest jedna. */
.indeks__poz {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(0, 1fr);
  gap: .15rem;
  padding-block: clamp(.7rem, .5rem + .5vw, 1.1rem);
  border-block-end: 1px solid var(--linia-cicha);
}
.indeks__poz > .indeks__cel, .indeks__poz > .przycisk { grid-column: 1; }
/* ⚠ jak wyżej: odsyłacz jest jedyną treścią wiersza, więc niesie typografię
   dawnego .indeks__tyt — inaczej indeks byłby listą drobnych wierszy. */
.tresc .indeks__cel {
  display: inline-block; min-height: 44px; padding-block: .5em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.28rem); line-height: 1.3;
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-color: var(--wiodaca);
  text-decoration-thickness: 1px; text-underline-offset: .25em;
  overflow-wrap: anywhere;
}
.tresc .indeks__cel:hover { text-decoration-thickness: 2px; }
.tresc .indeks .przycisk { margin-block: .5rem 0; justify-self: start; }

/* --- 12. LISTA WPISÓW ------------------------------------------------ */
.tresc .lista-wpisow {
  counter-reset: wpis;
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.9rem);
}
@media (min-width: 900px)  { .tresc .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .tresc .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tresc .zapowiedz {
  counter-increment: wpis;
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem) clamp(1.2rem, .9rem + 1.1vw, 2rem)
           clamp(1.1rem, .8rem + .9vw, 1.7rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
  overflow: hidden;
}
.tresc .zapowiedz::before {
  content: counter(wpis, decimal-leading-zero);
  display: block; margin-block-end: .7rem; padding-block-end: .7rem;
  border-block-end: 1px solid var(--linia-cicha);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.8rem, 2.3rem + 1.3vw, 3.8rem); line-height: .92;
  letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.4px var(--orn-cyfra);
  font-variant-numeric: lining-nums tabular-nums;
  pointer-events: none;
}
.tresc .zapowiedz::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; background: linear-gradient(90deg, var(--grafit), var(--wiodaca) 70%, rgba(168,90,36,.1));
}
.tresc .zapowiedz__tytul {
  position: relative; margin: 0 0 .7rem; padding: 0;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.2rem, 1.04rem + .5vw, 1.6rem);
  line-height: 1.24; letter-spacing: -.01em;
}
.tresc .zapowiedz__tytul::after { content: none; }
.tresc .zapowiedz__tytul .zapowiedz__link {
  display: block; min-height: 44px;                     /* B7 */
  color: var(--atrament); text-decoration: none;
}
.tresc .zapowiedz__tytul .zapowiedz__link:hover { color: var(--wiodaca-ciemna); }
.tresc .zapowiedz__tekst {
  margin: 0 0 1.1rem; font-size: .96rem; color: var(--atrament-cichy);
}
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej .wiecej {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 46px; padding: .4em 1.25em .4em 1.1em;
  background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  border: 1px solid var(--linia-cicha);
  border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none;
}
.tresc .zapowiedz__wiecej .wiecej::after {
  content: ""; width: 16px; height: 2px; background: currentColor;
}
.tresc .zapowiedz__wiecej .wiecej:hover { background: var(--papier); }

/* --- 13. SPECIMEN — próbki palety ------------------------------------ */
.probki {
  margin: 1.2rem 0 2rem; padding: 0; list-style: none;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.probka {
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
  overflow: hidden;
}
.probka__pole { display: block; height: 74px; }
.probka__opis {
  display: block; padding: .7rem .9rem .8rem;
  font-family: var(--krój-maszyna); font-size: .76rem; line-height: 1.5;
  color: var(--atrament-cichy);
}
.skala-pisma { margin: 1rem 0 2rem; }
.skala-pisma > span {
  display: block; font-family: var(--krój-naglowek); color: var(--atrament);
  line-height: 1.1; margin-block-end: .35rem;
}

/* --- 14. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--grafit-2);
  background-image:
    radial-gradient(58% 70% at 88% 0%, rgba(168, 90, 36, .28) 0%, rgba(168, 90, 36, 0) 64%),
    linear-gradient(180deg, #1C2025 0%, #121518 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(2.4rem, 1.4rem + 2.6vw, 4.4rem);
  margin-block-start: 0;
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--grafit-3) 0%, var(--wiodaca) 30%, var(--miedz-jasna) 60%, rgba(224,160,99,.05) 100%);
}
.stopka__pas {
  position: relative; z-index: 1;
  display: grid; gap: 1.2rem clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .stopka__pas { grid-template-columns: auto 1fr auto; }
}
.stopka__znak {
  margin: 0;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .34vw, 1.44rem);
  line-height: 1.2; color: var(--na-ciemnym);
}
.stopka__znak::after {
  content: ""; display: block; width: 2.4em; height: 2px;
  margin-block-start: .55em; background: var(--miedz-jasna);
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.6rem, 2vw, 1.8rem);
  margin: 0; padding: 0; list-style: none;
  justify-content: flex-start;
}
@media (min-width: 900px) { .stopka__menu ul { justify-content: center; } }
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: .2em;
  color: var(--na-ciemnym-cichy); text-decoration: none;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.stopka__menu a:hover { color: var(--miedz-jasna); }
.stopka__gora { margin: 0; }
@media (min-width: 900px) { .stopka__gora { justify-self: end; } }
.do-gory {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: .4em 1.15em;
  border: 1px solid var(--miedz-jasna); border-radius: 999px;
  color: var(--miedz-jasna); text-decoration: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.do-gory svg { width: 15px; height: 15px; flex: 0 0 auto; }
.do-gory:hover { color: var(--na-ciemnym); border-color: var(--na-ciemnym); }

/* --- 16. UKŁAD SZEROKI: ROZKŁADÓWKA ---------------------------------- */
/* ⭐⭐ Sens tej sekcji: powyżej 1366 px strona ma ROSNĄĆ TREŚCIĄ, a nie samym
   marginesem. Pasmo poszerzono w tokenach (76rem → 84rem, wypełnienie 5vw →
   3,4vw), więc przy 1920 px zostaje ok. 90 px marginesu zamiast 173 px.
   Odzyskane miejsce dostaje tu konkretne role — inaczej byłby to ten sam układ
   z węższymi białymi polami, czyli nic.

   Trzy role, trzy tory siatki .kontener:
     LEWA SZYNA  — cyfra sekcji i nagłówki (h2, h3) dosunięte do rynny;
     ŚRODEK      — proza, wciąż 34rem (≈68 znaków); NIE rozciągamy jej;
     PRAWA SZYNA — karty odsyłaczy (.wskaz) stojące OBOK prozy, nie pod nią.

   ⚠⚠ Dlaczego to działa bez zmiany HTML: dzieci .kontener mają jawną kolumnę,
   więc rozkładanie rzadkie (grid-auto-flow: row, domyślne) układa je tak:
   nagłówek trafia do lewej szyny, a kolejny akapit ląduje w TYM SAMYM wierszu
   po prawej — kursor cofa kolumnę tylko przy nagłówku, więc wiersz rośnie
   dopiero wtedy. Dzięki temu każdy h3 stoi obok swojego akapitu.
   ⚠ Akapity MUSZĄ zostać bezpośrednimi dziećmi .kontener — bramka B13 szuka
   kolumny prozy selektorem „main .kontener > p". Dlatego cała rozkładówka jest
   zrobiona wyłącznie w CSS; ani jeden znacznik nie został przeniesiony. */

/* ---- 16a. HERO: tytuł i lid obok siebie, nie jeden pod drugim ---- */
@media (min-width: 1200px) {
  /* ⚠ własna siatka hero kasuje linie nazwane z .kontener, więc dzieci trzeba
     ustawić od nowa — inaczej „grid-column: tekst-start / pelna-end" trafia
     w nieistniejące linie. */
  .kontener.kontener--hero {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    column-gap: var(--rynna);
    align-items: end;
  }
  .kontener--hero > * { grid-column: auto; }
  .kontener--hero > .tytul {
    grid-column: 1 / 2; grid-row: 1;
    margin-block-end: 0;
  }
  .kontener--hero > .lid {
    grid-column: 2 / 3; grid-row: 1;
    max-width: 36rem;          /* lid zostaje prozą, nie pasem na pół ekranu */
  }
}

/* ---- 16b. ROZKŁADÓWKA od 1440 px ---- */
/* Próg 1440, a nie 1180: przy węższym oknie szyna miałaby ok. 210 px i nagłówek
   łamałby się po pięć znaków. Poniżej progu układ zostaje bez zmian. */
@media (min-width: 1440px) {
  .kontener {
    align-items: start;
    row-gap: clamp(1.1rem, 0.85rem + 0.35vw, 1.5rem);
  }
  /* odstępy pionowe przejmuje row-gap — marginesy własne bloków zerujemy,
     inaczej sumowałyby się z odstępem wiersza */
  .tresc .kontener > p,
  .tresc .kontener > h2,
  .tresc .kontener > h3,
  .tresc .kontener > .wskaz,
  .tresc .kontener > .indeks { margin: 0; }
  .tresc .kontener > .szeroki .pytania,
  .tresc .kontener > .szeroki .probki,
  .tresc .kontener > .szeroki.skala-pisma { margin-block: 0; }

  /* NAGŁÓWKI → lewa szyna, dosunięte do rynny */
  .tresc .kontener > h2,
  .tresc .kontener > h3 {
    grid-column: pelna-start / tekst-start;
    align-self: start;
    text-align: right;
    padding-block-start: 0;
  }
  .tresc .kontener > h2 {
    font-size: clamp(1.35rem, 1rem + 0.95vw, 1.95rem);
  }
  /* kreskę nad nagłówkiem zastępuje w tym układzie cyfra sekcji i włos rynny */
  .tresc .kontener > h2::after { content: none; }
  /* cyfra sekcji wraca na tor pisma: stoi NAD nagłówkiem, też do prawej */
  .pas--sekcja .kontener > h2::before {
    position: static; inset: auto;
    display: block; margin: 0 0 0.22em;
    font-size: clamp(3.4rem, 3.2vw, 5.2rem);
    line-height: 0.8;
  }
  /* kreska przy h3 przestaje być wcięciem w wierszu, a staje się znakiem nad nim */
  .tresc .kontener > h3::before {
    display: block; width: 1.9em;
    margin: 0 0 0.55em auto;
    vertical-align: baseline;
  }
  /* światło przed nowym blokiem h3 dokładane RÓWNO nagłówkowi i jego akapitowi,
     żeby oba zostały wyrównane do wspólnej linii wiersza */
  .tresc .kontener > h3,
  .tresc .kontener > h3 + p { padding-block-start: clamp(0.9rem, 0.7vw, 1.5rem); }

  /* KARTA ODSYŁACZA → prawa szyna, obok prozy */
  .tresc .kontener > .wskaz {
    grid-column: tekst-end / pelna-end;
    align-self: start;
  }
  .tresc .kontener > .wskaz .wskaz__cel--tytul {
    font-size: clamp(1rem, 0.94rem + 0.16vw, 1.14rem);
  }

  /* INDEKS INSTRUKCJI → całe pasmo, cztery kolumny w jednym rzędzie.
     ⚠ Widok bloga nie ma nagłówka sekcji, więc indeks nie zostaje w kolumnie
     prozy — inaczej obie szyny stałyby puste, a o to właśnie chodziło, żeby
     odzyskana szerokość niosła treść. */
  .tresc .kontener > .indeks {
    grid-column: pelna-start / pelna-end;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--rynna);
  }

  /* włos rynny: przenosimy go spod prozy do przerwy między szyną a kolumną */
  .pas--sekcja::after {
    transform: translateX(calc(-1 * (var(--kolumna) / 2) - var(--rynna) / 2));
  }
}

/* --- 15. RUCH, DRUK -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
@media print {
  .naglowek, .stopka__menu, .stopka__gora, .hero__szala, .hero__mgla,
  .hero__punkty, .finisz__krata, .omin { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .pas--noc, .pas--finisz, .stopka {
    background: #fff !important; color: #000 !important;
  }
  .hero .tytul, .hero .lid, .pas--noc *, .pas--finisz *, .stopka__znak { color: #000 !important; }
  .plyta, .cta, .wskaz, .zapowiedz, .pytania li { box-shadow: none; border-color: #999; }
  .kontener { display: block; max-width: 100%; padding-inline: 0; }
  /* druk nie ma szyn — nagłówki wracają na tor prozy */
  .tresc .kontener > h2, .tresc .kontener > h3 { text-align: left; }
}