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

   IDEA. Serwis uczy złożyć sprawdzalną teczkę JEDNEGO miejsca nad wodą,
   więc widok jest zbudowany jak poszyt akt: kraftowa okładka, wszyte
   pasma-arkusze w trzech fakturach (papier, makulatura, płyta), pola
   danych z monospace'ową plakietką i głęboka tafla jeziora tam, gdzie
   dokument otwiera się i zamyka (hero, panel domykający, stopka).

   ⚠ Kolejność ważna dla pułapek: 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), a odsyłacz prozy jest pisany
   jako :not(.przycisk) — inaczej tekst przycisku znika (pułapka 1).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne — kraft i makulatura */
  --papier:          #F3EDE1;   /* kraft — podłoże wszystkich widoków */
  --papier-karta:    #FFFCF6;   /* arkusz wszyty w poszyt */
  --tlo-2:           #E4DAC7;   /* makulatura — pasmo drugoplanowe */
  --wiodaca-jasna:   #CFE3E2;   /* woda w płyciznie — pola, plakietki */
  --pole-tlo:        #FBF6EC;   /* wnętrze pola danych */
  /* pismo */
  --atrament:        #17201F;   /* grafit */
  --atrament-cichy:  #444E4E;
  /* barwa wiodąca — jezioro */
  --wiodaca:         #0D5B5F;   /* głęboki turkus: kreski i powierzchnie */
  --wiodaca-ciemna:  #07403F;   /* nagłówki i odsyłacze na jasnym */
  --akcent:          #7D5200;   /* musztarda przygaszona — tekst statusu */
  --linia:           #7E7666;
  --linia-cicha:     #D9CFBB;
  --na-wiodacej:     #FFFCF6;
  --na-akcencie:     #FFFCF6;

  /* powierzchnie ciemne — tafla i głębia */
  --glebia:          #06302F;
  --glebia-2:        #041F20;
  --hero-1:          #0B4E52;
  --hero-2:          #083C40;
  --musztarda:       #E0A625;   /* ostrzegawcza — plakietki na ciemnym */
  --lazur-jasny:     #9CD6D2;   /* odsyłacze na ciemnym */
  --na-ciemnym:      #F3EDE1;

  /* ornamenty — wyłącznie dekoracja, nigdy nośnik informacji */
  --orn-woda:        rgba(13, 91, 95, .10);
  --orn-woda-mocna:  rgba(13, 91, 95, .20);
  --orn-linia:       rgba(23, 32, 31, .055);
  --orn-musztarda:   rgba(224, 166, 37, .34);
  --orn-perf:        rgba(243, 237, 225, .20);

  --krój-naglowek: "Chivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-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 ani w ch: jedna krawędź dla nagłówków, prozy
     i kresek, a przy 1920 wiersz nie robi się o ćwierć dłuższy niż przy 1366. */
  --kolumna:        36rem;                    /* łam prozy ≈70 znaków */
  --margines:       clamp(20px, 5vw, 112px);  /* 96 px przy 1920 (bramka B13) */
  --brzeg-pasma:    clamp(10px, 2vw, 34px);

  /* ⚠ PO RECENZJI 2026-08-31 — kompozycja ma rosnąć szybciej niż samo pismo.
     Płyta miała 62rem (1162 px przy 1366 → 1285 px przy 1920, czyli 67% okna).
     Wzór px+vw daje ≈1180 px przy 1366 i ≈1450 px przy 1920 (75% okna), a łam
     prozy zostaje bez zmian, bo szyny siatki wchłaniają nadmiar. */
  --plyta-szer:     min(100%, calc(516px + 48.6vw));
  /* wysokość strefy, w której WOLNO rysować fale przy dolnej krawędzi pasma
     i stopki; treść dostaje tyle samo miejsca w padding-bottom, więc ornament
     nie ma jak wejść w wiersz tekstu na ŻADNEJ szerokości (recenzja: fala
     przekreślała zdanie przy 1920, przy 1366 już nie) */
  --strefa-fal:     clamp(72px, 8.6vw, 168px);
  --promien:        4px;
  --promien-pole:   6px;
  --promien-karta:  8px;
  --cien-plyta:     0 26px 52px -34px rgba(6, 48, 47, .55), 0 2px 0 0 rgba(23, 32, 31, .06);
  --cien-karta:     0 20px 38px -28px rgba(6, 48, 47, .58), 0 1px 0 0 rgba(23, 32, 31, .05);
  --cien-plakietka: 0 8px 16px -12px rgba(6, 48, 47, .6);
  --zachodzenie:    clamp(1.8rem, 1.1rem + 2.4vw, 4.4rem);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.72;
  /* ⚠ długie adresy urzędowe 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 wyłącznie wagą pisma */
strong, b { color: inherit; font-weight: 700; }

: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;
  color: var(--atrament);
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 80;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.6rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  font-family: var(--krój-maszyna); font-weight: 500;
  letter-spacing: .06em; text-decoration: none;
  border-inline-end: 4px solid var(--musztarda);
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy) */
.rama { width: 100%; 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 oba marginesy), a bloki
   z klasą .szeroki rozpychają się na całe pasmo. */
.kontener {
  width: 100%; margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki,
.kontener > .lista-wpisow,
.kontener > .probki { grid-column: pelna-start / pelna-end; }
/* hero: jedna krawędź z prozą, 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: var(--papier);
  background-image: linear-gradient(180deg, #F7F2E8 0%, var(--papier) 100%);
  border-block-end: 1px solid var(--linia-cicha);
  box-shadow: 0 14px 30px -28px rgba(6, 48, 47, .8);
}
/* taśma segregatora — cienki pas turkus→musztarda pod paskiem nagłówka */
.naglowek__tasma {
  position: absolute; inset-block-end: -1px; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--wiodaca) 0 22%, var(--musztarda) 22% 30%, var(--wiodaca-jasna) 30% 62%,
    var(--linia-cicha) 62% 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 (T9) */
.znak {
  display: inline-flex; align-items: center; gap: .7em; min-height: 48px;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1rem, .9rem + .34vw, 1.42rem);
  line-height: 1.15; letter-spacing: -.005em;
  text-decoration: none; color: var(--wiodaca-ciemna);
}
/* zaczep teczki — kwadrat z wyciętym narożnikiem, czysta dekoracja */
.znak__zaczep {
  flex: none; width: 1.1em; height: 1.1em;
  background: var(--wiodaca);
  clip-path: polygon(0 0, 68% 0, 100% 32%, 100% 100%, 0 100%);
  box-shadow: inset -.28em .28em 0 0 var(--musztarda);
}
.znak__tekst { position: relative; padding-block-end: .1em; }
.znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 100%; height: 2px; background: rgba(224, 166, 37, .5);
  transition: background .25s ease;
}
.znak:hover .znak__tekst::after { background: var(--musztarda); }

/* ⚠ nawigacja MA się kurczyć i zawijać (B5 przy 360 px); menu jest zwykłą
   listą — bez <details>, więc pułapka T7 w ogóle nie powstaje. */
.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-family: var(--krój-maszyna); font-weight: 500;
  font-size: .74rem; letter-spacing: .11em; 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); font-weight: 600; }
.menu__link[aria-current="page"]::after {
  width: calc(100% - 1.4em); height: 3px;
  background: linear-gradient(90deg, var(--wiodaca) 0 60%, var(--musztarda) 60% 100%);
}
/* ⚠ PO RECENZJI 2026-08-31: na 390 px menu zawijało się w dwa rzędy gołych
   odsyłaczy z nierówną przerwą — najtańszy fragment całej makiety, oglądany
   jako pierwszy. Teraz jest PASKIEM na makulaturze: siatka 2×2 z włosowymi
   separatorami (tło paska prześwituje przez 1 px szczeliny), równa wysokość
   obu rzędów, pozycja bieżąca na jaśniejszym arkuszu. */
@media (max-width: 780px) {
  .naglowek__pas { justify-content: flex-start; row-gap: 0; padding-block-end: 0; }
  .menu {
    flex: 1 0 100%;
    margin-inline: calc(-1 * var(--margines));
    justify-content: stretch;
    background: var(--linia-cicha);
    border-block-start: 1px solid var(--linia-cicha);
  }
  .menu__lista {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;      /* ⚠ oba rzędy tej samej wysokości — wymóg recenzji */
    gap: 1px; width: 100%;
  }
  .menu__poz { background: var(--tlo-2); display: flex; }
  .menu__link {
    width: 100%; min-height: 50px;
    /* stopień i światło dobrane pomiarem: „ODPRAWA PRZED WYJŚCIEM" (22 znaki)
       mieści się w JEDNYM wierszu komórki także przy 360 px */
    font-size: .68rem; letter-spacing: .04em;
    padding-inline: .65rem; justify-content: flex-start;
  }
  .menu__link::after { inset-block-end: .55rem; inset-inline-start: .65rem; }
  .menu__link:hover::after { width: calc(100% - 1.3rem); }
  .menu__link[aria-current="page"] { background: var(--papier-karta); }
  .menu__link[aria-current="page"]::after { width: calc(100% - 1.3rem); }
}

/* --- 5. HERO — okładka poszytu --------------------------------------- */
.tresc { display: block; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--glebia-2);
  background-image:
    radial-gradient(74% 64% at 84% 2%, rgba(21, 112, 116, .82) 0%, rgba(21, 112, 116, 0) 62%),
    radial-gradient(58% 60% at 4% 98%, rgba(10, 72, 76, .78) 0%, rgba(10, 72, 76, 0) 66%),
    linear-gradient(152deg, var(--hero-1) 0%, var(--hero-2) 44%, var(--glebia-2) 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3rem, 1.5rem + 5.2vw, 7.6rem) clamp(4.4rem, 2.2rem + 6.4vw, 9.6rem);
}
/* tafla wody — ornament inline SVG, bez treści, aria-hidden */
.hero__tafla {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -8%;
  width: clamp(420px, 62vw, 1180px);
  transform: translateY(-50%);
  color: var(--na-ciemnym);       /* B6: barwa ornamentu wobec tła */
  pointer-events: none;
}
.hero__tafla svg { display: block; width: 100%; height: auto; }
.hero__blask {
  position: absolute; z-index: 0;
  inset-block-start: -26%; inset-inline-start: -10%;
  width: clamp(300px, 44vw, 820px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(156, 214, 210, .22) 0%, rgba(156, 214, 210, 0) 66%);
  pointer-events: none;
}
/* perforacja poszytu — rytm dziurek przy grzbiecie (tylko od 900 px) */
.hero__perforacja { display: none; }
@media (min-width: 900px) {
  .hero__perforacja {
    display: block; position: absolute; z-index: 1;
    inset-block: 0; inset-inline-start: clamp(14px, 1.5vw, 30px); width: 12px;
    background-image: radial-gradient(circle at 50% 50%, var(--orn-perf) 0 4.5px, transparent 5px);
    background-size: 12px 44px; background-repeat: repeat-y;
    pointer-events: none;
  }
}
.hero .kontener { position: relative; z-index: 2; }
.hero__tekst { position: relative; max-width: min(100%, 52rem); }
.hero__tekst > :not(.hero__oslona) { position: relative; z-index: 1; }

/* ⚠⚠ OSŁONA TYTUŁU — poprawka po recenzji 2026-08-31.
   Ornament hero był rysowany NA nagłówku: kreski siatki kartoteki trafiały
   w x-height H1 („osiem pól,", „muszą wskazywać"), kwadraciki pól odhaczenia
   siadały na literach, a krótkie kreski czytały się jak urwane podkreślenie.
   Efekt docelowy z recenzji: ornament ma mieć krycie 0 w prostokącie zajętym
   przez H1 i lid. Realizujemy to PŁYTĄ Z ROZMYCIEM, a nie maską gradientową:
   maska musiałaby znać geometrię ornamentu (a ta zmienia się z każdą
   szerokością), natomiast płyta jest zakotwiczona do samego bloku tekstu,
   więc działa identycznie przy 360 i przy 1920 px. filter:blur() ma pełne
   wsparcie — mask-composite:intersect już nie. */
.hero__oslona {
  position: absolute; z-index: 0; pointer-events: none;
  inset: -1.3rem -3rem -1.1rem -2.6rem;
  border-radius: 72px;
  /* ⚠ przy szerokim oknie ostatni wiersz H1 kończy się grubo przed prawą
     krawędzią bloku, więc jednolita płyta zostawiała w pustym narożniku
     ciemną plamę. Krycie schodzi po 80% szerokości — litery są nadal w pełni
     osłonięte, a narożnik wtapia się w gradient tafli. */
  background: linear-gradient(90deg,
    rgba(4, 31, 32, .94) 0 80%, rgba(4, 31, 32, .60) 100%);
  filter: blur(46px);
}
/* sygnał sekcji — trzy kreski i kwadrat, czysta dekoracja */
.hero__sygnal {
  display: block; width: 7.2rem; height: 10px;
  margin-block-end: clamp(1.1rem, .8rem + 1vw, 2rem);
  background-image:
    linear-gradient(90deg, var(--musztarda) 0 2.2rem, transparent 2.2rem),
    linear-gradient(90deg, transparent 0 2.6rem, var(--lazur-jasny) 2.6rem 4.2rem, transparent 4.2rem),
    linear-gradient(90deg, transparent 0 4.6rem, rgba(243, 237, 225, .45) 4.6rem 5.4rem, transparent 5.4rem);
  background-size: 100% 4px, 100% 4px, 100% 4px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}
.hero .tytul {
  margin: 0;
  font-family: var(--krój-naglowek); font-weight: 700;
  /* ⚠ recenzja: H1 zajmował 58% szerokości przy 1366 i tylko 44% przy 1920.
     Człon vw podniesiony z 3,6 na 4,3 — przy 390 px nic się nie zmienia
     (nadal wchodzi dolna granica clamp), przy 1920 px pismo rośnie z 92 na
     ~102 px, a blok tekstu z 46 na 52 rem. */
  font-size: clamp(2.3rem, .95rem + 4.3vw, 5.4rem);
  line-height: 1.02; letter-spacing: -.028em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
.hero .lid {
  margin: clamp(1.2rem, .9rem + 1.2vw, 2.2rem) 0 0;
  max-width: 34rem;
  padding-inline-start: clamp(.9rem, .6rem + .8vw, 1.6rem);
  border-inline-start: 3px solid var(--musztarda);
  font-size: 1.16rem; line-height: 1.62;
  color: #EFE9DD;
}
/* ⚠ PO RECENZJI 2026-08-31: przy 1920 px lewy pas 582 px był CAŁKOWICIE pusty
   (stał tam sam rządek perforacji), więc kompozycja rosła wolniej niż okno.
   Lewa szyna hero dostaje drugi plan: grzbiet poszytu — pionowa listwa
   z rytmem szwów, musztardową zakładką u góry i trzema kreskami sygnatury
   u dołu. Czysta dekoracja, aria-hidden, zero nowych informacji. */
.hero__grzbiet { display: none; }
@media (min-width: 1180px) {
  .hero__grzbiet {
    /* ⚠ z-index 3 = NAD osłoną tytułu: osłona jest rozmyta na 46 px, więc
       przy wspólnej osi nitki zjadałaby kreskę grzbietu. Grzbiet kończy się
       2,6 rem przed łamem, więc nie ma jak wejść na tekst. */
    display: block; position: absolute; z-index: 3; pointer-events: none;
    inset-block: clamp(3.4rem, 5vw, 6.4rem);
    inset-inline-start: var(--margines);
    /* dokładnie szyna siatki: (okno − 2×margines − łam) / 2, minus prześwit.
       ⚠ prześwit 2,6 rem jest TEN SAM co przy szwie pasma i linijce płyty,
       więc pionowa kreska grzbietu, szwu i linijki stoi na jednej osi przez
       cały widok — jedna nitka poszytu od hero po stopkę. */
    width: calc((100% - 2 * var(--margines) - var(--kolumna)) / 2 - 2.6rem);
    /* ⚠ żadnej krawędzi na sztywno: i szew, i krawędź grzbietu, i tinta gasną
       na końcach, więc w hero nie pojawia się jasny prostokąt */
    background-image:
      repeating-linear-gradient(180deg,
        rgba(243, 237, 225, .21) 0 2px, transparent 2px 58px),
      linear-gradient(180deg, rgba(243, 237, 225, 0) 0%, rgba(243, 237, 225, .30) 12%,
        rgba(243, 237, 225, .30) 86%, rgba(243, 237, 225, 0) 100%),
      radial-gradient(88% 58% at 100% 42%,
        rgba(156, 214, 210, .13) 0%, rgba(156, 214, 210, 0) 76%);
    background-size: 38px 100%, 1px 100%, 100% 100%;
    background-position: calc(100% - 7px) 0, 100% 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
  /* zakładka teczki na grzbiecie — krótka, wygaszona na obu końcach */
  .hero__grzbiet::before {
    content: ""; position: absolute;
    inset-block-start: 11%; inset-inline-end: -2px; width: 5px;
    height: clamp(64px, 8vw, 124px);
    background: linear-gradient(180deg, rgba(224, 166, 37, 0) 0%, var(--musztarda) 22%,
      var(--musztarda) 74%, rgba(224, 166, 37, 0) 100%);
  }
  /* sygnatura porządkowa u dołu grzbietu — trzy kreski, rytm z hero__sygnal */
  .hero__grzbiet::after {
    content: ""; position: absolute;
    inset-block-end: 0; inset-inline-end: 0; width: 7.4rem; height: 22px;
    background-image:
      linear-gradient(90deg, transparent 0 2.4rem, rgba(156, 214, 210, .55) 2.4rem 7.4rem),
      linear-gradient(90deg, transparent 0 4.2rem, rgba(243, 237, 225, .34) 4.2rem 7.4rem),
      linear-gradient(90deg, transparent 0 5.6rem, rgba(224, 166, 37, .55) 5.6rem 7.4rem);
    background-size: 100% 3px, 100% 3px, 100% 3px;
    background-position: 0 0, 0 9px, 0 18px;
    background-repeat: no-repeat;
  }
}

/* wariant ornamentu = wariant kadru; treść bez zmian */
.hero--pola .hero__tafla { inset-inline-end: -14%; width: clamp(460px, 66vw, 1260px); }
.hero--odprawa .hero__tafla { inset-inline-end: -6%; opacity: .95; }
.hero--teczki .hero__tafla { inset-block-start: 58%; inset-inline-end: -12%; }
.hero--krag .hero__tafla { inset-inline-end: -18%; width: clamp(440px, 64vw, 1220px); }

/* --- 6. PASMA -------------------------------------------------------- */
.pas { position: relative; display: flow-root; }  /* flow-root: ujemny margines
    płyty przesuwa PŁYTĘ, a nie całe pasmo (sklejanie marginesów) */
.pas > .kontener { position: relative; z-index: 1; }

/* pasmo wstępu — arkusz zgłoszenia wsunięty pod okładkę */
.pas--wstep {
  background: var(--papier);
  padding-block: 0 clamp(1.6rem, 1rem + 2vw, 3.4rem);
  padding-inline: var(--brzeg-pasma);
}
.pas--wstep .plyta { margin-block-start: calc(-1 * var(--zachodzenie)); }

/* płycizna — pasmo w barwie wody z kręgami na tafli.
   ⚠ Świadomie NIE jest kolejnym odcieniem kraftu: trzy jasne pasma w tym samym
   cieple czytały się jak jedna płachta papieru. Rytm widoku to woda → makulatura
   → biała płyta → głębia, a nie cztery odcienie beżu. */
.pas--papier {
  position: relative; overflow: hidden;
  background-color: var(--wiodaca-jasna);
  background-image: linear-gradient(180deg, rgba(255, 252, 246, .62) 0%, rgba(255, 252, 246, 0) 42%);
  padding-block: clamp(2.8rem, 1.6rem + 3.6vw, 5.8rem);
}
/* ⚠⚠ PO RECENZJI 2026-08-31 — „kręgi na wodzie" były tłem CAŁEGO pasma, więc
   ich łuki wchodziły pod prawy koniec wierszy prozy („bieżąca ocena.",
   „i »historia", „zrozumieć") i w powiększeniu czytały się jak zabrudzenie
   skanu. Ornament przeniesiony do PRAWEJ SZYNY siatki: zaczyna się 2,5 rem za
   krawędzią łamu, a gdy szyny nie ma (wąskie okno) sam schodzi do zera
   szerokości i znika. To ta sama arytmetyka, której pilnuje bramka B13c. */
.pas--papier::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-block: 0; inset-inline-end: 0;
  inset-inline-start: calc(var(--margines)
    + (100% - 2 * var(--margines) - var(--kolumna)) / 2 + var(--kolumna) + 2.5rem);
  background-image:
    repeating-radial-gradient(circle at 100% 24%, transparent 0 44px, var(--orn-woda-mocna) 44px 46px);
  background-repeat: no-repeat;
  background-size: 1020px 1020px;
  background-position: right -330px top -200px;
}
.pas--papier::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg,
    rgba(13, 91, 95, .25) 0 62%, var(--wiodaca) 62% 74%, var(--musztarda) 74% 80%,
    rgba(13, 91, 95, .25) 80% 100%);
}

/* ⚠ PO RECENZJI 2026-08-31 — przy 1920 px lewa szyna jasnych pasm stała pusta
   tak samo jak lewa połowa hero. Biegnie przez nią teraz SZEW POSZYTU: ta sama
   podziałka, co na grzbiecie w hero, zakotwiczona arytmetyką siatki (4 rem na
   lewo od łamu), więc nigdy nie wchodzi pod tekst — a przy wąskim oknie sama
   wyjeżdża poza ekran i znika. */
.pas__szew { display: none; }
@media (min-width: 1180px) {
  .pas--papier > .pas__szew,
  .pas--makulatura > .pas__szew {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    inset-block: clamp(1.8rem, 3vw, 3.6rem);
    inset-inline-start: calc((100% - var(--kolumna)) / 2 - 4.2rem);
    width: 34px;
    background-image:
      repeating-linear-gradient(180deg, rgba(13, 91, 95, .20) 0 2px, transparent 2px 58px),
      linear-gradient(180deg, rgba(13, 91, 95, 0) 0%, rgba(13, 91, 95, .26) 14%,
        rgba(13, 91, 95, .26) 84%, rgba(13, 91, 95, 0) 100%);
    background-size: 34px 100%, 1px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat, no-repeat;
  }
}

/* makulatura w linie — arkusz do zapisania */
.pas--makulatura {
  background-color: var(--tlo-2);
  background-image: repeating-linear-gradient(180deg, transparent 0 32px, var(--orn-linia) 32px 33px);
  padding-block: clamp(2.8rem, 1.6rem + 3.6vw, 5.8rem);
}
.pas--makulatura::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--wiodaca) 0 14%, var(--musztarda) 14% 19%, rgba(126, 118, 102, .35) 19% 100%);
}

/* pasmo z płytą — biały arkusz wszyty w poszyt */
.pas--plyta {
  position: relative; overflow: hidden;
  background-color: var(--papier);
  padding-block: clamp(2.4rem, 1.4rem + 3vw, 5rem);
  padding-inline: var(--brzeg-pasma);
}
/* lustrzane odbicie kręgów — w LEWEJ szynie, nigdy pod łamem */
.pas--plyta::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-block: 0; inset-inline-start: 0;
  inset-inline-end: calc(var(--margines)
    + (100% - 2 * var(--margines) - var(--kolumna)) / 2 + var(--kolumna) + 2.5rem);
  background-image:
    repeating-radial-gradient(circle at 0% 84%, transparent 0 40px, var(--orn-woda) 40px 42px);
  background-repeat: no-repeat;
  background-size: 900px 900px;
  background-position: left -330px bottom -230px;
}
.plyta {
  position: relative; z-index: 2;
  max-width: var(--plyta-szer);
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 4rem);
  padding-inline: clamp(20px, 4vw, 76px);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-plyta);
}
/* ⚠ PO RECENZJI 2026-08-31 — płyta urosła o ~165 px przy 1920, więc jej szyny
   zrobiły się szerokie. Zamiast pustego papieru biegnie w nich LINIJKA
   MARGINESOWA arkusza: pionowa kreska z podziałką, ten sam rytm co szew
   pasma i grzbiet hero. Element jest w toku siatki (obszar kolumny tekstu),
   więc pozycjonuje się WZGLĘDEM ŁAMU, a nie względem okna — ozdobnik nie ma
   jak wejść pod tekst. */
.plyta__linijka { display: none; }
@media (min-width: 1180px) {
  .plyta > .plyta__linijka {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    inset-block: .4rem 1.2rem;
    inset-inline-start: -3.8rem; width: 26px;
    background-image:
      repeating-linear-gradient(180deg, var(--linia-cicha) 0 2px, transparent 2px 58px),
      linear-gradient(180deg, rgba(217, 207, 187, 0) 0%, var(--linia-cicha) 9%,
        var(--linia-cicha) 91%, rgba(217, 207, 187, 0) 100%);
    background-size: 26px 100%, 1px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat, no-repeat;
  }
}

/* gzyms płyty — turkus przechodzący w musztardę na górnej krawędzi */
.plyta::before {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline: -1px;
  height: 5px; border-radius: var(--promien-karta) var(--promien-karta) 0 0;
  background: linear-gradient(90deg, var(--wiodaca) 0 46%, var(--musztarda) 46% 58%,
    var(--wiodaca-jasna) 58% 100%);
}
/* zagięty narożnik arkusza */
.plyta::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0;
  width: 34px; height: 34px;
  background: linear-gradient(315deg, var(--papier) 0 50%, transparent 50%);
  border-inline-start: 1px solid var(--linia-cicha);
  border-block-start: 1px solid var(--linia-cicha);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-end-end-radius: var(--promien-karta);
}

/* panel głębi — tafla jeziora, na której poszyt się domyka */
.pas--glebia {
  position: relative; overflow: hidden;
  background-color: var(--glebia-2);
  background-image:
    radial-gradient(66% 60% at 88% 4%, rgba(21, 112, 116, .70) 0%, rgba(21, 112, 116, 0) 64%),
    radial-gradient(52% 52% at 2% 96%, rgba(10, 72, 76, .70) 0%, rgba(10, 72, 76, 0) 66%),
    linear-gradient(160deg, var(--hero-2) 0%, var(--glebia) 52%, var(--glebia-2) 100%);
  /* ⚠⚠ PO RECENZJI 2026-08-31 — pas fal był zakotwiczony PROCENTOWO do wysokości
     panelu, więc przy 1920 px podjeżdżał w tekst i przekreślał wiersz
     („…co nadal trzeba potwierdzić, i nie przenosi"), a przy 1366 px już nie.
     Teraz treść dostaje w padding-bottom dokładnie tyle miejsca, ile mierzy
     strefa fal, a ornament jest maską przycięty do tej strefy — więc odległość
     fali od ostatniego wiersza jest STAŁA na każdej szerokości. */
  padding-block: clamp(3rem, 1.8rem + 3.8vw, 6.2rem)
                 calc(clamp(2.6rem, 1.5rem + 2.6vw, 4.4rem) + var(--strefa-fal));
  /* ⚠⚠ nadpisujemy TOKENY, więc każdy komponent w środku dostaje wariant
     na ciemnym bez osobnych reguł (pułapka „kolor na odwrotnej jasności") */
  --papier:         var(--glebia);
  --papier-karta:   #0A3B3B;
  --pole-tlo:       #0A3B3B;
  --tlo-2:          #0A3B3B;
  --wiodaca-jasna:  #0E4746;
  --atrament:       var(--na-ciemnym);
  --atrament-cichy: #D6D0C2;
  --wiodaca:        var(--musztarda);
  --wiodaca-ciemna: var(--lazur-jasny);
  --akcent:         var(--musztarda);
  --na-wiodacej:    var(--glebia-2);
  --na-akcencie:    var(--glebia-2);
  --linia:          #6E8C89;
  --linia-cicha:    #17504F;
  color: var(--na-ciemnym);
}
.pas--glebia::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, rgba(224, 166, 37, .15) 0 12%, var(--musztarda) 12% 20%,
    rgba(156, 214, 210, .28) 20% 100%);
}
.pas__tafla {
  position: absolute; z-index: 0; inset: 0; overflow: hidden;
  color: var(--na-ciemnym);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0,
    transparent calc(100% - var(--strefa-fal) - 2rem), #000 calc(100% - var(--strefa-fal)), #000 100%);
  mask-image: linear-gradient(180deg, transparent 0,
    transparent calc(100% - var(--strefa-fal) - 2rem), #000 calc(100% - var(--strefa-fal)), #000 100%);
}
.pas__tafla svg {
  display: block; position: absolute;
  inset-block-end: -9%; inset-inline-end: -10%;
  width: clamp(420px, 60vw, 1120px); max-width: none; height: auto;
}
.pas__perforacja { display: none; }
@media (min-width: 900px) {
  .pas__perforacja {
    display: block; position: absolute; z-index: 1;
    inset-block: 0; inset-inline-start: clamp(14px, 1.5vw, 30px); width: 12px;
    background-image: radial-gradient(circle at 50% 50%, var(--orn-perf) 0 4.5px, transparent 5px);
    background-size: 12px 44px; background-repeat: repeat-y;
    pointer-events: none;
  }
}

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.2rem, 1.4rem + 2vw, 3.6rem) 0 .9rem;
  padding-block-start: clamp(1rem, .7rem + .9vw, 1.7rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.6rem);
  line-height: 1.14; letter-spacing: -.018em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* zakładka sekcji: turkusowa kreska z musztardowym zębem */
.tresc h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(58px, 7vw, 116px); height: 4px;
  background: linear-gradient(90deg, var(--wiodaca) 0 66%, var(--akcent) 66% 100%);
}
.kontener > h2:first-child { margin-block-start: 0; }

.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.6rem) 0 .5rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.16rem, 1.02rem + .5vw, 1.5rem);
  line-height: 1.28; color: var(--atrament);
}
.tresc h3::before {
  content: ""; display: inline-block; vertical-align: .18em;
  width: .62em; height: .62em; margin-inline-end: .55em;
  background: var(--akcent);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}

/* ⚠ recenzja (drobiazg): akapity kończyły się pojedynczym słowem w osobnym
   wierszu („akwenu.", „powrotu."). text-wrap:pretty odsuwa łamanie tak, żeby
   ostatni wiersz nie był jednowyrazowy — działa też na krótkich kolumnach kart. */
.tresc p { margin: 0 0 1.15em; text-wrap: pretty; }
.tresc li, .hero .lid { text-wrap: pretty; }
.tresc p:last-child { margin-block-end: 0; }
.tresc .wprowadzenie { font-size: 1.08rem; }
.tresc .zajawka {
  margin-block-end: 1.6em;
  font-size: 1.06rem; color: var(--atrament-cichy);
}

/* ⚠ pułapka 1: „.proza a" (0-1-1) bije „.przycisk" (0-1-0) i tekst przycisku
   znika. Odsyłacz prozy pisany jako :not(.przycisk). */
.tresc p a:not(.przycisk), .tresc li a:not(.przycisk) {
  color: var(--wiodaca-ciemna); font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: var(--akcent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.tresc p a:not(.przycisk):hover, .tresc li a:not(.przycisk):hover {
  color: var(--wiodaca); text-decoration-thickness: 2px;
}
/* ⚠⚠ NIE piszemy tu reguły „.pas--glebia li a" — miała (0-2-2) i biła
   „.tresc .zapowiedz__tytul a" (0-2-1), przez co tytuł JASNEJ karty leżącej
   na ciemnym pasmie dostawał lazur na kremie (1,9:1). Barwa odsyłacza idzie
   wyłącznie tokenem: pasmo głębi podmienia --wiodaca-ciemna na lazur,
   a karta przywraca sobie komplet tokenów jasnych. */

/* --- 8. PLAKIETKA POLA ----------------------------------------------- */
/* Znacznik pola pochodzi ze ŹRÓDŁA (**Następny krok:**) i jest składany jak
   etykieta rubryki w aktach: monospace, ramka, musztardowy ząb.
   ⚠ Pole PRZYCISK znacznika NIE dostaje: „PRZYCISK:" to nazwa pola źródła,
   a nie tekst dla czytelnika — czytnik zwraca sam napis przycisku i jego cel. */
.tresc .znacznik {
  display: inline-flex; align-items: center;
  margin-inline-end: .85em;
  padding: .3em .7em .3em .62em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--wiodaca);
  border-inline-start: 4px solid var(--akcent);
  border-radius: var(--promien);
  font-family: var(--krój-maszyna); font-weight: 500;
  font-size: .74rem; letter-spacing: .04em; white-space: nowrap;
  color: var(--wiodaca-ciemna);
  box-shadow: var(--cien-plakietka);
}
.pas--glebia .tresc .znacznik {
  background: #0E4746; border-color: var(--musztarda);
  border-inline-start-color: var(--musztarda); color: var(--na-ciemnym);
}

/* --- 9. POLA DANYCH -------------------------------------------------- */
/* pole ze źródłem urzędowym — rubryka z datą odczytu w prozie */
.tresc .pole-zrodla {
  margin: 1.5em 0 1.7em;
  padding: clamp(1rem, .7rem + .8vw, 1.5rem) clamp(1rem, .7rem + 1vw, 1.7rem);
  background: var(--pole-tlo);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--wiodaca);
  border-radius: var(--promien-pole);
  box-shadow: var(--cien-karta);
  font-size: .98rem;
}
.tresc .pole-zrodla a { overflow-wrap: anywhere; }
.pas--glebia .tresc .pole-zrodla { background: #0A3B3B; border-color: #17504F;
  border-inline-start-color: var(--musztarda); }

/* pole zapytania — w źródle stoi surowy zapis adresu usługi WFS; składamy je
   jak rubrykę „zapytanie", żeby długi ciąg wyglądał jak dana, a nie jak błąd */
.tresc .pole-zapytanie {
  margin: 1.5em 0 1.8em;
  padding: clamp(1rem, .7rem + .9vw, 1.6rem) clamp(1rem, .7rem + 1vw, 1.7rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-inline-start: 4px solid var(--akcent);
  border-radius: var(--promien-pole);
  font-family: var(--krój-maszyna);
  font-size: .82rem; line-height: 1.8; letter-spacing: -.01em;
  color: var(--atrament);
  overflow-wrap: anywhere;
}

/* pole akcji — pas domykający z przyciskiem (bez plakietki: patrz wyżej) */
.tresc .pole-akcji {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 0;
  margin: 1.8em 0 1.6em;
  padding-block-start: 1.4em;
  border-block-start: 1px dashed var(--linia);
}
/* pole „następny krok" — domknięcie arkusza */
.tresc .pole-krok .znacznik { display: flex; width: max-content; max-width: 100%;
  margin: 0 0 .9em; }
.tresc .pole-krok {
  margin: 1.9em 0 0;
  padding: clamp(1.1rem, .8rem + 1vw, 1.9rem) clamp(1.1rem, .8rem + 1.1vw, 2rem);
  background: var(--wiodaca-jasna);
  border-radius: var(--promien-pole);
  border-inline-start: 5px solid var(--wiodaca);
  font-size: 1.06rem;
}
.pas--glebia .tresc .pole-krok {
  background: rgba(156, 214, 210, .10);
  border-inline-start-color: var(--musztarda);
}

/* --- 10. ODSYŁACZ KIERUNKOWY ----------------------------------------- */
/* Akapit, którego CAŁĄ treścią jest odsyłacz. ⚠ Kropka zdania ze źródła stoi
   ZA odsyłaczem, więc odsyłacz nie może być zamkniętym prostokątem — inaczej
   kropka wygląda jak zabrudzenie obok przycisku. Rubryką jest AKAPIT, strzałka
   to jego pseudoelement, a odsyłacz zostaje odsyłaczem.
   ⚠ bramka B7 traktuje taki akapit jak samodzielny cel UI — min. 44 px. */
.tresc .przejscie {
  position: relative;
  margin: 1.7em 0 1.9em;
  padding: .55em 1.3em .55em 3.4em;
  background: var(--pole-tlo);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 5px solid var(--akcent);
  border-radius: var(--promien-pole);
  box-shadow: var(--cien-karta);
  font-size: 1.02rem;
}
.tresc .przejscie::before {
  content: "→";
  position: absolute; inset-inline-start: 1.15em; inset-block-start: .62em;
  font-size: 1.1em; line-height: 1.5; color: var(--akcent);
}
.tresc .przejscie a {
  display: inline-flex; align-items: center; min-height: 52px;
  font-weight: 700;
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--akcent);
  text-decoration-thickness: 2px;
  text-underline-offset: .24em;
}
.tresc .przejscie a:hover { color: var(--wiodaca); text-decoration-color: var(--wiodaca); }
.pas--glebia .tresc .przejscie { background: rgba(156, 214, 210, .10); border-color: #17504F; }

/* --- 11. PRZYCISK ---------------------------------------------------- */
/* ⚠⚠ selektor musi dorównać „.tresc .przejscie a" (0-2-1), inaczej przycisk
   dostanie wygląd odsyłacza kierunkowego. */
.przycisk,
.tresc a.przycisk,
.tresc .pole-akcji a.przycisk {
  display: inline-flex; align-items: center; gap: .8em; justify-content: center;
  min-height: 58px; padding: .8rem 1.9rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca-ciemna);
  border-block-end: 4px solid var(--akcent);
  border-radius: var(--promien);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 1rem; letter-spacing: .005em; text-decoration: none;
  box-shadow: 0 18px 34px -24px rgba(6, 48, 47, .9);
}
.tresc .pole-akcji a.przycisk::after { content: "→"; font-weight: 400; }
.przycisk:hover, .tresc a.przycisk:hover {
  background: var(--wiodaca); border-color: var(--wiodaca);
  border-block-end-color: var(--musztarda);
}
.pas--glebia .przycisk, .pas--glebia .tresc a.przycisk {
  background: var(--musztarda); color: var(--glebia-2);
  border-color: var(--musztarda); border-block-end-color: var(--lazur-jasny);
}

/* --- 12. LISTA KONTROLNA --------------------------------------------- */
/* Pole odhaczenia jest RYSUNKIEM (CSS), nie kontrolką formularza. */
.tresc .lista-kontrolna {
  margin: 1.2em 0 1.8em; padding: 0; list-style: none;
  display: grid; gap: .5rem;
}
.tresc .lista-kontrolna li {
  position: relative;
  padding: .85em 1.1em .85em 3.4em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-pole);
  box-shadow: 0 10px 22px -20px rgba(6, 48, 47, .6);
}
.tresc .lista-kontrolna li::before {
  content: ""; position: absolute;
  inset-inline-start: 1.05em; inset-block-start: 1.05em;
  width: 1.35em; height: 1.35em;
  border: 2px solid var(--wiodaca);
  border-radius: 3px;
  background: var(--wiodaca-jasna);
}
.tresc .lista-kontrolna li::after {
  content: ""; position: absolute;
  inset-inline-start: 1.42em; inset-block-start: 1.42em;
  width: .61em; height: .61em;
  background: var(--akcent); opacity: .55;
}

/* --- 13. SPIS AKT (indeks artykułów) --------------------------------- */
.tresc .spis-akt {
  margin: 1em 0 1.8em; padding: 0; list-style: none;
  display: grid; gap: .55rem; counter-reset: akt;
}
.tresc .spis-akt li {
  counter-increment: akt; position: relative;
  padding: 0 1rem 0 4.2rem;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--wiodaca);
  border-radius: var(--promien-pole);
}
.tresc .spis-akt li::before {
  content: counter(akt, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block: 0;
  width: 3.2rem; display: grid; place-items: center;
  font-family: var(--krój-maszyna); font-weight: 600; font-size: .9rem;
  color: var(--akcent);
  border-inline-end: 1px dashed var(--linia-cicha);
}
.tresc .spis-akt li a {
  display: flex; align-items: center; min-height: 56px;   /* B7 */
  padding-block: .6em;
  text-decoration: none; color: var(--wiodaca-ciemna); font-weight: 700;
}
.tresc .spis-akt li a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* --- 14. WYLICZENIE (lista ogólna) ----------------------------------- */
.tresc .wyliczenie { margin: .6em 0 1.7em; padding: 0; list-style: none; display: grid; gap: .5rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 1.9em; }
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em;
  width: 1.05em; height: 3px; background: var(--wiodaca);
}

/* --- 15. KARTY WPISÓW ------------------------------------------------ */
.tresc .lista-wpisow {
  margin: 0; padding: 0; list-style: none; counter-reset: wpis;
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 2.1rem);
}
/* ⚠⚠ PO RECENZJI 2026-08-31 — przy 1366 px trzy wpisy stały w siatce
   2-kolumnowej: karta 03 zostawała sama w drugim rzędzie, a obok niej połowa
   szerokości pasma pustej ciemnej tafli (największa dziura w serwisie).
   Spis akt tej serii ma DOKŁADNIE tyle pozycji, ile wpisów, więc etap
   dwukolumnowy jest tu zawsze nieparzysty i został skasowany: albo jedna
   kolumna, albo trzy. Próg 1000 px wynika z pomiaru — przy 1000 px karta ma
   ~280 px światła, a tytuł mieści się w czterech wierszach. */
@media (min-width: 1000px) { .tresc .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tresc .zapowiedz {
  counter-increment: wpis;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.4rem);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-plyta);
  /* karta zostaje JASNA także na ciemnym pasmie — pełny zestaw tokenów */
  --papier-karta:   #FFFCF6;
  --pole-tlo:       #FBF6EC;
  --atrament:       #17201F;
  --atrament-cichy: #444E4E;
  --wiodaca:        #0D5B5F;
  --wiodaca-ciemna: #07403F;
  --wiodaca-jasna:  #CFE3E2;
  --akcent:         #7D5200;
  --linia-cicha:    #D9CFBB;
  --na-wiodacej:    #FFFCF6;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  color: var(--atrament);
}
/* zakładka teczki na górnej krawędzi karty.
   ⚠⚠ PUŁAPKA 1 (równa specyficzność): „.tresc .zapowiedz__zaczep" (0-2-0)
   przegrywała z późniejszą regułą „.tresc .zapowiedz > *" (0-2-0), więc listwa
   NIE była absolutna — wpadała w tok dokumentu pod górnym marginesem karty
   i przechodziła poziomo przez ŚRODEK ozdobnej cyfry. Recenzja odczytała to
   jako „cyfra przekreślona i przycięta naraz". Selektor podniesiony do 0-3-0. */
.tresc .zapowiedz > .zapowiedz__zaczep {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 6px;
  background: linear-gradient(90deg, var(--wiodaca) 0 34%, var(--akcent) 34% 44%, var(--linia-cicha) 44% 100%);
}
/* duża ozdobna sygnatura porządkowa — ornament, nie informacja.
   ⚠ Recenzja: cyfra była ucięta prawą krawędzią karty i przekreślona listwą
   gzymsu. Zjeżdża do DOLNEGO prawego narożnika (tam karta ma światło obok
   „Czytaj dalej"), stoi w całości wewnątrz karty i nie ma nad sobą żadnej
   poziomej kreski. */
.tresc .zapowiedz::before {
  content: counter(wpis, decimal-leading-zero);
  position: absolute;
  inset-block-end: -.03em; inset-inline-end: .55rem; inset-block-start: auto;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: clamp(3.8rem, 3.1rem + 1.6vw, 5.4rem); line-height: 1;
  color: var(--wiodaca-jasna);
  pointer-events: none;
}
.tresc .zapowiedz > * { position: relative; }
.tresc .zapowiedz__tytul {
  margin: .3rem 0 .7rem; padding: 0; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.16rem, 1rem + .55vw, 1.52rem); line-height: 1.2;
  color: var(--wiodaca-ciemna);
}
.tresc .zapowiedz__tytul::before { content: none; }
.tresc .zapowiedz .zapowiedz__tytul a {
  display: block; min-height: 44px;              /* B7 */
  color: var(--wiodaca-ciemna); text-decoration: none;
}
.tresc .zapowiedz .zapowiedz__tytul a:hover {
  color: var(--wiodaca); text-decoration: underline; text-decoration-thickness: 2px;
}
.tresc .zapowiedz__tekst { margin: 0 0 1.3rem; color: var(--atrament-cichy); font-size: .97rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .6em; min-height: 46px;   /* B7 */
  padding-inline: .1rem;
  font-family: var(--krój-maszyna); font-weight: 600;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wiodaca-ciemna); text-decoration: none;
  border-block-end: 2px solid var(--akcent);
}
.tresc .zapowiedz .zapowiedz__wiecej a { text-decoration: none; }
.tresc .zapowiedz .zapowiedz__wiecej a::after { content: "→"; }
.tresc .zapowiedz .zapowiedz__wiecej a:hover { color: var(--wiodaca); border-block-end-color: var(--wiodaca); }

/* --- 16. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--glebia-2);
  background-image:
    radial-gradient(58% 90% at 90% 0%, rgba(21, 112, 116, .58) 0%, rgba(21, 112, 116, 0) 64%),
    linear-gradient(180deg, var(--glebia) 0%, var(--glebia-2) 100%);
  color: var(--na-ciemnym);
  /* ⚠⚠ PO RECENZJI 2026-08-31 — fala przechodziła przez wiersz menu stopki przy
     1920 px („KARTA MIEJSCA", „ODPRAWA PRZED WYJŚCIEM") i czytała się jak
     podkreślenie połowy pozycji. Ta sama zasada co w panelu głębi: strefa fal
     jest wpisana w padding-bottom, więc wiersz menu ZAWSZE stoi nad nią. */
  padding-block: clamp(2.6rem, 1.5rem + 2.8vw, 4.8rem)
                 calc(clamp(2rem, 1.2rem + 1.8vw, 3.2rem) + var(--strefa-fal));
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--musztarda) 0 16%, var(--lazur-jasny) 16% 24%,
    rgba(156, 214, 210, .18) 24% 100%);
}
.stopka__tafla {
  position: absolute; z-index: 0; inset: 0; overflow: hidden;
  opacity: .62;
  color: var(--na-ciemnym);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0,
    transparent calc(100% - var(--strefa-fal) - 1.6rem), #000 calc(100% - var(--strefa-fal)), #000 100%);
  mask-image: linear-gradient(180deg, transparent 0,
    transparent calc(100% - var(--strefa-fal) - 1.6rem), #000 calc(100% - var(--strefa-fal)), #000 100%);
}
.stopka__tafla svg {
  display: block; position: absolute;
  inset-block-end: -14%; inset-inline-start: -4%;
  width: clamp(520px, 74vw, 1320px); max-width: none; height: auto;
}
.stopka__pas {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 3rem);
}
.stopka__znak {
  display: inline-flex; align-items: center; gap: .7em;
  margin: 0; font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.02rem, .92rem + .34vw, 1.4rem);
  color: var(--na-ciemnym); letter-spacing: -.005em;
}
.stopka__zaczep {
  flex: none; width: 1.1em; height: 1.1em;
  background: var(--lazur-jasny);
  clip-path: polygon(0 0, 68% 0, 100% 32%, 100% 100%, 0 100%);
  box-shadow: inset -.28em .28em 0 0 var(--musztarda);
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.5rem, 2vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .3em; text-decoration: none;
  color: var(--lazur-jasny);
  font-family: var(--krój-maszyna); font-weight: 500;
  font-size: .76rem; letter-spacing: .11em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--na-ciemnym); border-block-end-color: var(--musztarda); }
.stopka__gora { margin: 0; margin-inline-start: auto; }
.do-gory {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: .4em 1.2em;
  border: 1px solid var(--musztarda); border-radius: var(--promien);
  color: var(--musztarda); text-decoration: none;
  font-family: var(--krój-maszyna); font-weight: 500;
  font-size: .76rem; letter-spacing: .11em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--musztarda); color: var(--glebia-2); }

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

/* --- 17b. ARKUSZ ROZŁOŻONY — SKALA POWYŻEJ 1500 px ------------------
   ⚠⚠ POMIAR 2026-09-01. Makieta rosła powyżej 1366 px prawie wyłącznie
   MARGINESEM: płyta kończyła się na 1449 px (po 235 px pustego papieru
   z każdej strony), a w środku arkusza stały jeszcze dwie puste szyny po
   ~255 px. Razem 586 px niczego na stronę przy 1920 px.

   Rozciągnięcie samego kontenera było ZAKAZANE — łam prozy zrobiłby się
   105-znakowy. Dlatego odzyskana szerokość dostaje ROLE, każda inną:
     • ARKUSZ   — płyta zostawia po 100 px papieru zamiast 235;
     • NAGŁÓWEK — H2/H3 idą przez CAŁE pasmo (1728 px zamiast 746 px);
     • RUBRYKA  — odsyłacz kierunkowy i „następny krok" stają OBOK prozy
                  w prawej szynie, nie pod nią, a pas przycisku rozciąga się
                  przez łam i rubrykę razem;
     • ŁAM      — proza rośnie z 746 na 812 px (≈78 znaków, nadal w normie);
     • OPRAWA   — lewa szyna zwęża się z 491 na 228 px i zostaje tym, czym
                  była w zamyśle: marginesem oprawy ze szwem poszytu.
   Kompozycja pasma biegnie teraz od 96 do 1824 px zamiast od 587 do 1333.

   ⚠⚠ DLACZEGO NIE DWIE SZPALTY PROZY. Wersja dwułamowa została zbudowana
   i ZMIERZONA (wyglądała lepiej i skracała widok o 20%), ale łamie kontrakt
   bramki B13 i nie da się tego obejść bez psucia typografii. B13 warunek 3
   wymaga, by prawy margines łamu nie przekraczał 2,5× lewego. Dla dwóch
   szpalt po w px z przerwą g przy 1920 px: lewy = (1920−2w−g)/2, prawy =
   lewy+w+g, a nierówność spełnia się dopiero dla w ≤ 530 px — poniżej dolnej
   granicy czytelnego łamu (640 px). Wewnątrz płyty jest jeszcze ciaśniej,
   bo wcięcie arkusza zjada lewy margines: żaden dobór szerokości nie spełnia
   naraz „łam rośnie 1366→1920" i „kompozycja nie jest jednostronna".
   Kontraktu bramki NIE ruszam (to wyzwalacz eskalacji), więc łam zostaje
   JEDEN, a szerokość idzie w nagłówki, rubrykę i sam arkusz.
   ⚠ Poniżej 1500 px nie zmienia się nic: 360–1499 px zostaje na starych
   regułach, więc widok mobilny oraz bramki B5 i B7 stoją nietknięte.     */
@media (min-width: 1500px) {
  :root {
    /* arkusz zostawia DOKŁADNIE po 100 px papieru, niezależnie od okna */
    --plyta-szer: min(100%, calc(100vw - 200px));
    /* łam rośnie, ale ma twardy sufit w pikselach: 812 px ≈ 78 znaków.
       Bez sufitu przy 2560 px miara w rem dałaby ~96 znaków w wierszu. */
    --kolumna:    min(39.5rem, 812px);
    --rozstaw:    clamp(1.8rem, 3vw, 3.6rem);
    /* margines oprawy — mieści szew poszytu (34 px) z prześwitem */
    --szyna:      clamp(6rem, 11.9vw, 11rem);
  }

  /* Siatka pasma: OPRAWA — ŁAM — RUBRYKA. Rubryka jest szyną elastyczną,
     więc przy 1920 px ma 573 px w paśmie i 413 px w płycie. */
  .kontener {
    column-gap: var(--rozstaw);
    grid-template-columns:
      [pelna-start szyna-start] minmax(0, var(--szyna))
      [szyna-end tekst-start]   minmax(0, var(--kolumna))
      [tekst-end bok-start]     minmax(0, 1fr) [bok-end pelna-end];
  }

  /* NAGŁÓWKI przez całe pasmo — to jest ta treść, która przy 1920 px stoi
     w poziomie zamiast łamać się na dwa wiersze. Zakładka sekcji (h2::before)
     siada przy okazji na marginesie oprawy i domyka lewą krawędź układu. */
  .kontener > h2,
  .kontener > h3 { grid-column: pelna-start / pelna-end; }

  /* RUBRYKA — noty kierunkowe przenoszą się spod prozy OBOK prozy.
     ⚠ span 2: bez tego wysoka karta („następny krok" ma 105 znaków)
     rozpychała wiersz siatki i robiła dziurę między akapitami łamu;
     nadmiar wysokości wchłania pusty wiersz pod spodem. */
  .kontener > .przejscie,
  .kontener > .pole-krok {
    grid-column: bok-start / bok-end;
    grid-row: auto / span 2;
    align-self: start;
  }
  .kontener > .pole-krok { margin-block-start: 0; }
  /* ⚠ Sufit na notę: rubryka jest szyną elastyczną, więc przy 2560 px rosła
     do 1124 px i „następny krok" (105 znaków) miał ~107 znaków w wierszu.
     Nota nigdy nie jest szersza od łamu. */
  .kontener > .przejscie,
  .kontener > .pole-krok { max-width: var(--kolumna); }
  /* ⚠ Pas przycisku NIE idzie do rubryki: przy 413 px etykieta „Uporządkuj
     tożsamość i status miejsca" łamie przycisk na trzy wiersze. Zostaje pasem
     domykającym przez łam i rubrykę razem, a pustą prawą część dostaje LINIA
     WIODĄCA — ten sam chwyt, co w spisie treści. */
  .kontener > .pole-akcji { grid-column: tekst-start / bok-end; }
  .kontener > .pole-akcji::after {
    content: ""; flex: 1 1 0; min-width: 2rem; height: 2px;
    margin-inline-start: 1.6rem;
    background: linear-gradient(90deg,
      var(--linia-cicha) 0 22%, rgba(217, 207, 187, .55) 22% 46%,
      rgba(217, 207, 187, .18) 46% 100%);
  }
  .pas--glebia .kontener > .pole-akcji::after {
    background: linear-gradient(90deg,
      rgba(156, 214, 210, .40) 0 22%, rgba(156, 214, 210, .22) 22% 46%,
      rgba(156, 214, 210, .07) 46% 100%);
  }

  .kontener > .szeroki,
  .kontener > .lista-wpisow,
  .kontener > .probki { grid-column: pelna-start / pelna-end; }

  /* --- ozdobniki pustych szyn gasną, bo pustych szyn już nie ma ---
     ⚠⚠ Szew pasma, linijka płyty i kręgi na wodzie powstały 31.08 PO TO, żeby
     zapełnić boki, w których nic nie stało. Od 1500 px stoi tam nagłówek pasma
     (idzie przez CAŁE pasmo) i rubryka. Zmierzone: szew wypadał na 265–299 px,
     a H2 zaczyna się na 96 px i biegnie przez ten punkt — kreska przechodziła
     PRZEZ wiersz nagłówka („Najpierw |punkt| na brzegu"). Kręgi zaczynały się
     na 1246 px, a jednowierszowy H2 sięga ~1366 px, więc wchodziły pod jego
     koniec. To dokładnie ta wada, którą recenzja kazała usunąć 31.08, tylko
     przeniesiona o piętro wyżej — więc ozdobniki ustępują miejsca treści.
     Rytm poszytu niosą dalej: perforacja przy krawędzi, grzbiet okładki
     w hero, gzyms i zagięty narożnik arkusza oraz zakładka sekcji przy H2. */
  .pas--papier > .pas__szew,
  .pas--makulatura > .pas__szew { display: none; }
  .plyta > .plyta__linijka { display: none; }
  .pas--papier::after,
  .pas--plyta::after { content: none; }
  /* grzbiet okładki ZOSTAJE — hero nie ma nagłówka idącego przez całe pasmo,
     więc lewa szyna jest tam nadal wolna; szerokość liczona z tej samej oprawy */
  .hero__grzbiet { width: calc(var(--szyna) - 2.6rem); }

  /* ⚠⚠ Arkusz zgłoszenia (pasmo wstępu) NIE dostaje pełnej szerokości.
     To jedno–dwa zdania wsunięte pod okładkę; rozciągnięte na 1720 px byłyby
     dokładnie tą wadą, którą naprawiamy — wielki arkusz z jednym akapitem.
     Zostaje wsuwem szerokości łamu z zapasem i wraca do jednej szpalty, żeby
     przycisk nie wpadł do rubryki węższej od samego przycisku.
     Wyjątek: arkusz systemu (specimen.html) ma we wstępie H2 i próbki barw,
     więc jemu pełna szerokość się należy. */
  .pas--wstep .plyta:not(:has(> h2)) {
    max-width: min(var(--plyta-szer),
      calc(var(--kolumna) + 2 * clamp(20px, 4vw, 76px) + 8rem));
    grid-template-columns:
      [pelna-start szyna-start tekst-start] minmax(0, var(--kolumna))
      [tekst-end bok-start bok-end szyna-end pelna-end];
  }
  .pas--wstep .plyta:not(:has(> h2)) > * { grid-column: tekst-start / tekst-end; }
}

/* --- 18. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; }
  .naglowek { position: static; box-shadow: none; }
  .hero, .stopka, .pas--glebia { background: #FFFFFF !important; color: #000000 !important; }
  .hero .tytul, .hero .lid, .pas--glebia, .stopka__znak { color: #000000 !important; }
  .hero__tafla, .hero__blask, .hero__perforacja, .hero__grzbiet, .hero__oslona,
  .pas__tafla, .pas__perforacja,
  .stopka__tafla, .naglowek__tasma { display: none !important; }
  .pas--papier::after, .pas--plyta::after, .pas__szew,
  .plyta__linijka { display: none !important; }
  .plyta { box-shadow: none; margin-block-start: 0; }
  .pas--makulatura, .pas--papier, .pas--plyta { background: #FFFFFF; }
  a { color: #000000; }
}