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

   Idea: serwis uczy porządkować sprawy wspólnej przestrzeni, więc widok jest
   ułożony jak PLAN OSIEDLA. Kwartały (pasma sekcji) leżą obok siebie, ścieżki
   (kreski i strzałki) prowadzą od jednego do drugiego, a treść stoi na
   tabliczkach informacyjnych: biała płyta, obwódka, jeden róg zaokrąglony
   mocniej niż pozostałe.

   ⚠ ZASADA CZYTELNOŚCI: siatka planu NIGDY nie biegnie pod dłuższą prozą.
   Rysuje się w pasach brzegowych, w narożnikach i pod płytą — nad tekstem
   zawsze jest spokojna, jednolita powierzchnia.

   ⚠ 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 — ciepły piasek podwórka */
  --papier:          #FAF6EC;   /* podłoże wszystkich widoków */
  --papier-karta:    #FFFFFF;   /* tabliczka informacyjna */
  --tlo-2:           #F0E6D2;   /* pasmo piasku */
  --wiodaca-jasna:   #DFEBD2;   /* pasmo trawy, pola odsyłaczy */
  /* pismo */
  --atrament:        #17211A;   /* grafit z domieszką zieleni */
  --atrament-cichy:  #4C544A;
  /* barwa wiodąca — zieleń trawnika między blokami */
  --wiodaca:         #3F7135;   /* powierzchnie, kreski, obwódki */
  --wiodaca-ciemna:  #2A5223;   /* nagłówki i odsyłacze na jasnym */
  --akcent:          #A0472A;   /* cegła — wskazanie, hover */
  --linia:           #7E7A66;   /* obwódki — element nietekstowy */
  --linia-cicha:     #DED4BE;   /* ornament — wyłącznie dekoracja */
  --na-wiodacej:     #FFFFFF;
  --na-akcencie:     #FFFFFF;
  --zrodlo-tlo:      #F0E6D2;

  /* powierzchnie ciemne — wieczór na podwórku */
  --glebia:          #16281D;
  --glebia-2:        #0F1C15;
  --hero-tlo:        #17301F;
  --karta-ciemna:    #1E3628;
  --tlo2-ciemne:     #24402F;
  --linia-ciemna:    #6E9079;
  --na-ciemnym:      #F4F0E4;
  --cichy-ciemny:    #CFD8C6;
  --trawa-jasna:     #BFDCA6;
  --niebo:           #2F5F80;   /* błękit nieba */
  --niebo-jasne:     #A7CFE6;
  --piasek-jasny:    #EBD9B6;

  /* ORNAMENT PLANU — wyłącznie dekoracja, nigdy nośnik informacji */
  --siatka-mala:     34px;
  --siatka-duza:     136px;
  --plan-cichy:      rgba(63, 113, 53, .10);
  --plan-mocny:      rgba(63, 113, 53, .22);
  --plan-cegla:      rgba(160, 71, 42, .20);
  --plan-noc-cichy:  rgba(191, 220, 166, .10);
  --plan-noc-mocny:  rgba(167, 207, 230, .24);

  --krój-naglowek: "Space Grotesk", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --krój-tekst:    "Lora", Georgia, "Times New Roman", "Nimbus Roman", serif;
  --krój-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* ⚠⚠ MIARA W REM, NIE W EM ani ch — jedna krawędź dla nagłówków, prozy
     i kresek. Jednostka ch w kroju o wąskim zerze zawyża liczbę znaków. */
  --kolumna:        36rem;   /* kolumna prozy ≈ 70 znaków */
  --pas-szer:       84rem;   /* maksymalna szerokość pasma treści */
  --margines:       clamp(20px, 5vw, 112px);

  --promien:        6px;
  --promien-rog:    26px;    /* JEDEN róg tabliczki, mocniej zaokrąglony */
  --promien-karta:  10px;
  --cien-plyta:     0 28px 60px -30px rgba(22, 40, 29, .42), 0 2px 10px -4px rgba(22, 40, 29, .14);
  --cien-karta:     0 18px 38px -24px rgba(22, 40, 29, .44), 0 1px 4px -2px rgba(22, 40, 29, .12);
  --zachodzenie:    clamp(1.6rem, 1rem + 2.4vw, 4.2rem);
}

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

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* ⚠ pułapka 6: clip leczy przepełnienia pasm full-bleed, nie psując sticky */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.75;
  /* ⚠ pułapka 12: długie wyrazy i ścieżki rozpychały widok na 360 px (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: 200px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.5rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  font-family: var(--krój-naglowek); font-weight: 600; letter-spacing: .04em;
  text-decoration: none;
  border-radius: 0 0 var(--promien-rog) 0;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy) */
.rama {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z pustymi szynami po bokach: proza stoi
   w środkowym torze (symetrycznie — bramka B13), a bloki oznaczone klasą
   .szeroki rozpychają się na całe pasmo. */
.kontener {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: pelna-start / pelna-end; }
/* ⚠ JEDNA KRAWĘDŹ: hero zaczyna się dokładnie tam, gdzie proza widoku,
   a rośnie w prawo. Osobna, szersza kolumna hero dawałaby dwie różne lewe
   krawędzie i tytuł nie stałby nad tym, co zapowiada. */
.kontener--hero > * { grid-column: tekst-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--papier);
  border-block-end: 1px solid var(--linia-cicha);
  box-shadow: 0 12px 30px -28px rgba(22, 40, 29, .6);
}
/* ścieżka pod paskiem: trawa → niebo → cegła */
.naglowek::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg,
    var(--wiodaca) 0%, var(--wiodaca) 28%,
    var(--niebo) 28%, var(--niebo) 62%,
    var(--akcent) 62%, var(--akcent) 74%,
    var(--linia-cicha) 74%, var(--linia-cicha) 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .35rem 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;   /* B7 */
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.02rem, .94rem + .3vw, 1.4rem);
  line-height: 1.2; letter-spacing: -.012em;
  text-decoration: none; color: var(--wiodaca-ciemna);
  padding-inline-end: .2em;
}
.znak__tekst { position: relative; padding-block-end: .16em; }
.znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 2.6em; height: 3px; border-radius: 2px;
  background: var(--akcent);
  transition: width .25s ease;
}
.znak:hover .znak__tekst::after { width: 100%; }

/* ⚠ B5: nawigacja MA się kurczyć i zawijać. Menu jest zbudowane na zwykłej
   liście, bez <details> — pułapka T7 nie ma tu zastosowania. */
.menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: .1rem clamp(.15rem, 1vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 760px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
  .menu__link { padding-inline: .45em; }
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .7em;
  font-family: var(--krój-naglowek); font-weight: 500; font-size: .8rem;
  letter-spacing: .09em; 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: 3px; border-radius: 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: 700; }
.menu__link[aria-current="page"]::after {
  width: calc(100% - 1.4em);
  background: linear-gradient(90deg, var(--wiodaca) 55%, var(--akcent) 55%);
}

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

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--hero-tlo);
  background-image:
    radial-gradient(72% 60% at 84% 4%, rgba(47, 95, 128, .60) 0%, rgba(47, 95, 128, 0) 64%),
    radial-gradient(62% 56% at 4% 98%, rgba(63, 113, 53, .55) 0%, rgba(63, 113, 53, 0) 66%),
    radial-gradient(46% 38% at 96% 92%, rgba(160, 71, 42, .26) 0%, rgba(160, 71, 42, 0) 70%),
    linear-gradient(158deg, #1D3B26 0%, #17301F 52%, #10241a 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(2.8rem, 1.5rem + 4.6vw, 7rem) clamp(4rem, 2.2rem + 5.6vw, 8.6rem);
}
/* ⚠ ZASŁONA: plan biegnie POD tytułem i lidem, a kreski ornamentu czytały się
   jak podkreślenia w tekście. Miękki gradient kładziemy MIĘDZY ornamentem
   (z-index 0) a kolumną treści (z-index 2) — tekst dostaje spokojne podłoże,
   a rysunek planu zostaje widoczny po prawej stronie. */
.hero::before {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(19, 38, 26, .55) 0%, rgba(19, 38, 26, .52) 38%,
    rgba(19, 38, 26, .30) 58%, rgba(19, 38, 26, 0) 76%);
}
/* KRAWĘŻNIK — pas kostki brukowej, którym podwórko wchodzi pod hero */
.hero::after {
  content: ""; position: absolute; z-index: 2;
  inset-inline: 0; inset-block-end: 0;
  height: clamp(16px, 1.9vw, 30px);
  background:
    repeating-linear-gradient(90deg,
      var(--papier) 0 44px, var(--linia-cicha) 44px 47px);
}
/* ORNAMENT: plan osiedla (inline SVG) — bez treści, aria-hidden */
.hero__plan {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -10%;
  width: clamp(360px, 52vw, 1020px); aspect-ratio: 760 / 560;
  transform: translateY(-52%);
  color: var(--trawa-jasna);        /* B6: barwa ornamentu wobec tła hero */
  pointer-events: none;
}
/* ⚠ maska: rysunek planu ma się URYWAĆ, zanim dojdzie do kolumny tekstu.
   Maskujemy ORNAMENT, a nie całe hero — dzięki temu barwne gradienty tła
   zostają nietknięte, a kreskowana aleja nie czyta się jak podkreślenie. */
.hero__plan {
  -webkit-mask-image: linear-gradient(90deg, transparent 0 34%, rgba(0, 0, 0, .45) 58%, #000 80%);
          mask-image: linear-gradient(90deg, transparent 0 34%, rgba(0, 0, 0, .45) 58%, #000 80%);
}
.hero__plan svg { width: 100%; height: auto; display: block; }
/* PLAC — miękka poświata w lewym górnym rogu */
.hero__plac {
  position: absolute; z-index: 0;
  inset-block-start: -20%; inset-inline-start: -10%;
  width: clamp(300px, 42vw, 800px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 217, 182, .22) 0%, rgba(235, 217, 182, 0) 66%);
  pointer-events: none;
}
.hero .kontener { position: relative; z-index: 3; }
/* ⚠ na wąskim ekranie proza hero leży wprost na ornamencie — wyciszamy plan */
@media (max-width: 900px) {
  .hero__plan { opacity: .5; inset-inline-end: -26%; }
}

.hero .tytul {
  margin: 0 0 clamp(1rem, .7rem + 1vw, 2rem);
  max-width: 17em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.2rem, 1.3rem + 2.8vw, 4.9rem);
  line-height: 1.04; letter-spacing: -.026em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
/* trzy kreski planu nad tytułem — sygnał kwartału, nie informacja */
.hero .tytul::before {
  content: ""; display: block;
  width: clamp(78px, 11vw, 170px); height: 6px;
  margin-block-end: clamp(1rem, .8rem + 1vw, 2.1rem);
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--trawa-jasna) 0 34%, transparent 34% 40%,
    var(--niebo-jasne) 40% 74%, transparent 74% 80%,
    var(--piasek-jasny) 80% 100%);
}
.hero .lid {
  margin: 0; max-width: 44rem;
  font-size: clamp(1.06rem, 1rem + .18vw, 1.24rem); line-height: 1.66;
  color: #E6E9DA;
}
.hero--maly { padding-block: clamp(2.4rem, 1.4rem + 3.4vw, 5.4rem) clamp(3.4rem, 2rem + 4.4vw, 7rem); }
.hero--maly .tytul { font-size: clamp(2rem, 1.24rem + 2.25vw, 4.2rem); }

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

/* pasmo wstępu — piasek z pasem planu u góry */
.pas--wstep {
  background-color: var(--papier);
  padding-block: clamp(2.4rem, 1.4rem + 3vw, 5rem);
}
.pas--wstep .kontener > p { font-size: 1.06rem; }

/* pasmo piasku */
.pas--piasek {
  /* ⚠ overflow: ornament szyny ma stałą wysokość i na krótkim pasmie wystawałby
     poza nie. Pasma nie goszczą płyty nachodzącej, więc przycięcie nic nie psuje. */
  overflow: hidden;
  background-color: var(--tlo-2);
  background-image:
    repeating-linear-gradient(90deg, var(--plan-mocny) 0 1px, transparent 1px var(--siatka-duza)),
    repeating-linear-gradient(0deg,  var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala)),
    repeating-linear-gradient(90deg, var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala));
  background-repeat: repeat-x;
  background-size: 100% 136px, 100% 136px, 100% 136px;
  background-position: 0 0;
  padding-block: clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem);
}
/* pasmo trawy */
.pas--trawa {
  overflow: hidden;
  background-color: var(--wiodaca-jasna);
  background-image:
    repeating-linear-gradient(0deg,  var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala)),
    repeating-linear-gradient(90deg, var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala)),
    repeating-linear-gradient(90deg, var(--plan-mocny) 0 1px, transparent 1px var(--siatka-duza));
  background-repeat: repeat-x;
  background-size: 100% 120px, 100% 120px, 100% 120px;
  background-position: 0 100%;
  padding-block: clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem);
}
/* ⚠ pułapka 19: ornament marginesowy kotwiczymy do .kontener, nie do OKNA.
   Poniżej 1240 px szyna ma zerową szerokość, więc ornament w ogóle nie powstaje —
   inaczej wszedłby pod kolumnę prozy. */
@media (min-width: 1240px) {
  .pas--trawa > .kontener::before,
  .pas--piasek > .kontener::before,
  .pas--indeks > .kontener::before {
    /* ⚠⚠ z-index:-1, nie 0. Element POZYCJONOWANY z z-index:0 maluje się NAD
       niepozycjonowanymi dziećmi kontenera — na arkuszu systemu siatka planu
       przechodziła po próbkach barw. Kontener ma własny kontekst układania
       (z-index:1), więc -1 chowa ornament pod treść, a nie pod pasmo. */
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset-block-start: clamp(26px, 3.2vw, 78px);
    height: clamp(170px, 20vw, 400px);
    width: clamp(76px, 8.4vw, 150px);
    background-image:
      repeating-linear-gradient(0deg,  var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala)),
      repeating-linear-gradient(90deg, var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala));
  }
  /* NAROŻNIK KWARTAŁU — gruby kątownik zamyka wycinek siatki, żeby czytał się
     jak fragment rysunku planu, a nie jak przypadkowa tabelka */
  .pas--trawa > .kontener::before {
    inset-inline-start: var(--margines);
    border-inline-start: 3px solid var(--plan-mocny);
    border-block-start: 3px solid var(--plan-mocny);
  }
  .pas--piasek > .kontener::before,
  .pas--indeks > .kontener::before {
    inset-inline-end: var(--margines);
    border-inline-end: 3px solid var(--plan-mocny);
    border-block-end: 3px solid var(--plan-mocny);
  }
  .pas--piasek > .kontener::before,
  .pas--indeks > .kontener::before { inset-block-start: auto; inset-block-end: clamp(26px, 3.2vw, 78px); }
}

/* pasmo, na którym leży TABLICZKA nachodząca na sąsiada */
.pas--plyta {
  background-color: var(--papier);
  background-image:
    repeating-linear-gradient(90deg, var(--plan-mocny) 0 1px, transparent 1px var(--siatka-mala)),
    repeating-linear-gradient(0deg,  var(--plan-mocny) 0 1px, transparent 1px var(--siatka-mala));
  background-repeat: no-repeat;
  background-size: 306px 306px, 306px 306px;
  background-position: right -40px top 30px, right -40px top 30px;
  padding-block: 0 clamp(1.6rem, 1rem + 2vw, 3.6rem);
  padding-inline: clamp(8px, 2vw, 32px);
}
.pas--plyta:nth-of-type(even) {
  background-position: left -40px bottom 40px, left -40px bottom 40px;
}

/* TABLICZKA INFORMACYJNA — biała płyta, obwódka, jeden róg zaokrąglony */
.tablica {
  /* ⚠ Tabliczka jest WĘŻSZA od pasma: przy 1920 px pasmo ma 84rem, a płyta 47rem,
     więc kolumna prozy (36rem) nie tonie w pustej bieli. Kolumna zostaje w tym
     samym miejscu co w pasmach bez płyty — obie są wyśrodkowane. */
  --pas-szer: 47rem;
  --margines: clamp(16px, 2.4vw, 46px);
  position: relative; z-index: 2;
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(1.7rem, 1rem + 2.4vw, 3.6rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta) var(--promien-rog) var(--promien-karta) var(--promien-rog);
  box-shadow: var(--cien-plyta);
  overflow: hidden;
}
/* ETYKIETA W NAGŁÓWKU tabliczki — pasek trawy przechodzący w niebo */
.tablica::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 8px;
  background: linear-gradient(90deg,
    var(--wiodaca) 0 42%, var(--niebo) 42% 78%, var(--akcent) 78% 100%);
}
/* RAMKA RYSUNKU — cienka, kreskowana obwódka w marginesie tabliczki; to ten sam
   gest, co ramka arkusza planu. Nie niesie informacji, więc jest pseudoelementem. */
.tablica::after {
  content: ""; position: absolute; z-index: 0;
  inset: clamp(9px, 1.1vw, 20px);
  inset-block-start: clamp(15px, 1.5vw, 26px);
  border: 1px dashed var(--linia-cicha);
  border-radius: 4px 18px 4px 18px;
  pointer-events: none;
}
.tablica > * { position: relative; z-index: 1; }
.tablica--plaska { margin-block-start: 0; }

/* tabliczka na trawie — rozdroże odsyłaczy */
/* ROZDROŻE — zielona tabliczka odsyłaczy; stoi na pasmie piasku, żeby jej
   powierzchnia różniła się od podłoża (na trawie zlewała się z pasmem). */
.tablica--trawa {
  background: var(--wiodaca-jasna);
  border-color: var(--wiodaca);
}
.tablica--trawa::after { border-color: var(--wiodaca); border-style: dashed; }

/* --- 7. PASMO NOCNE (mocny akcent) ----------------------------------- */
/* Nadpisujemy TOKENY, więc każdy komponent w środku dostaje wariant na
   ciemnym bez osobnych reguł (pułapka „kolor na odwrotnej jasności"). */
.na-nocy {
  --papier:          var(--glebia);
  --papier-karta:    var(--karta-ciemna);
  --tlo-2:           var(--tlo2-ciemne);
  --wiodaca-jasna:   var(--tlo2-ciemne);
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--cichy-ciemny);
  --wiodaca:         var(--trawa-jasna);
  --wiodaca-ciemna:  var(--piasek-jasny);
  --na-wiodacej:     var(--glebia);
  --akcent:          var(--niebo-jasne);
  --na-akcencie:     var(--glebia);
  --linia:           var(--linia-ciemna);
  --linia-cicha:     #2E4A38;
  --zrodlo-tlo:      var(--tlo2-ciemne);
  color: var(--atrament);
}
.pas--noc {
  position: relative; overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(58% 70% at 92% 4%, rgba(47, 95, 128, .46) 0%, rgba(47, 95, 128, 0) 64%),
    radial-gradient(46% 52% at 2% 96%, rgba(63, 113, 53, .40) 0%, rgba(63, 113, 53, 0) 66%),
    repeating-linear-gradient(90deg, var(--plan-noc-cichy) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg,  var(--plan-noc-cichy) 0 1px, transparent 1px 34px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, 340px 340px, 340px 340px;
  background-position: 0 0, 0 0, left -50px bottom -40px, left -50px bottom -40px;
  padding-block: clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem);
}
.pas--noc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--trawa-jasna) 0 24%, var(--niebo-jasne) 24% 68%, var(--piasek-jasny) 68% 100%);
}
.tablica--noc {
  background: var(--karta-ciemna);
  border-color: #2E4A38;
  margin-block-start: 0;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .7);
}
.tablica--noc::before {
  background: linear-gradient(90deg,
    var(--trawa-jasna) 0 42%, var(--niebo-jasne) 42% 78%, var(--piasek-jasny) 78% 100%);
}

/* --- 8. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.1rem, 1.3rem + 2vw, 3.4rem) 0 .8rem;
  padding-block-start: clamp(1.1rem, .8rem + 1vw, 1.9rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.42rem, 1.05rem + 1.3vw, 2.3rem);
  line-height: 1.16; letter-spacing: -.018em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* ŚCIEŻKA — kreska planu nad nagłówkiem sekcji */
.tresc h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(44px, 5.4vw, 84px); height: 4px; border-radius: 2px;
  background: var(--wiodaca);
}
/* PLAC — cegiełka na końcu ścieżki */
.tresc h2::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: clamp(52px, 6.6vw, 100px);
  width: 10px; height: 10px; border-radius: 2px;
  transform: translateY(-3px);
  background: var(--akcent);
}
.kontener > h2:first-child { margin-block-start: 0; }

/* numer kwartału — tabliczka z numerem w nagłówku sekcji (tekst ze źródła) */
.tresc .h2__nr {
  display: inline-block;
  margin-inline-end: .42em;
  padding: .04em .38em .1em;
  border: 2px solid var(--wiodaca);
  border-radius: var(--promien) 14px var(--promien) 14px;
  color: var(--wiodaca-ciemna);
  font-variant-numeric: lining-nums tabular-nums;
}

.tresc h3 {
  position: relative;
  margin: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem) 0 .45rem;
  padding-inline-start: 1.05em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .35vw, 1.42rem);
  line-height: 1.3; letter-spacing: -.01em;
  color: var(--atrament);
}
.tresc h3::before {
  content: ""; position: absolute; inset-inline-start: 0;
  inset-block: .28em .3em; width: 5px; border-radius: 3px;
  background: var(--akcent);
}

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

/* pierwsza litera akapitu wstępu — inicjał tabliczki */
.tresc .wprowadzenie::first-letter,
.pas--wstep .kontener > p:first-child::first-letter {
  float: inline-start;
  margin: .06em .16em 0 0;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 3.1em; line-height: .82;
  color: var(--wiodaca);
}

/* ⚠⚠ PUŁAPKA #1 SERII: „.tresc p a" (0-2-2 z :not) BIŁO „.tresc .przejscie a"
   (0-2-1) i „.tresc .zapowiedz__tytul a" — drogowskaz oraz tytuł tabliczki wpisu
   dostawały podkreślenie odsyłacza prozy. Dlatego reguła prozy WYKLUCZA akapity
   komponentów i bierze tylko BEZPOŚREDNIE odsyłacze pozycji listy. */
.tresc p:not(.przejscie):not(.cta):not(.zapowiedz__wiecej) a:not(.przycisk),
.tresc li > a:not(.przycisk) {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--akcent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.tresc p:not(.przejscie):not(.cta):not(.zapowiedz__wiecej) a:not(.przycisk):hover,
.tresc li > a:not(.przycisk):hover {
  color: var(--akcent); text-decoration-thickness: 2px;
}

/* --- 9. ODSYŁACZ KIERUNKOWY (drogowskaz) ----------------------------- */
/* akapit, którego CAŁĄ treścią jest odsyłacz — w źródle osobny wiersz.
   ⚠ bramka B7 traktuje go jak samodzielny cel UI, więc musi mieć 44 px. */
.tresc .przejscie { margin-block: 1.7em 1.9em; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 54px;
  padding: .5em 1.5em .5em 1.35em;
  background: var(--papier-karta);
  border: 2px solid var(--wiodaca);
  border-radius: var(--promien) 20px var(--promien) 20px;
  font-family: var(--krój-naglowek); font-weight: 600; font-size: .98rem;
  letter-spacing: -.005em; line-height: 1.25;
  color: var(--wiodaca-ciemna);
  text-decoration: none;
  box-shadow: 0 14px 28px -22px rgba(22, 40, 29, .8);
}
.tresc .przejscie a::after {
  content: "→"; font-size: 1.05em; line-height: 1;
  transition: transform .25s ease;
}
.tresc .przejscie a:hover {
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border-color: var(--wiodaca-ciemna);
}
.tresc .przejscie a:hover::after { transform: translateX(4px); }

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

/* --- 10. PRZYCISK ---------------------------------------------------- */
.tresc .cta { margin-block: clamp(1.7rem, 1.2rem + 1.4vw, 2.8rem) 0; }
/* ⚠⚠ SELEKTOR MUSI DORÓWNAĆ `.tresc .przejscie a` (0-2-1), inaczej przycisk
   dostanie wygląd odsyłacza kierunkowego. */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk,
.tresc .cta a.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  min-height: 58px; padding: .8rem 2rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border: 2px solid var(--wiodaca-ciemna);
  border-radius: var(--promien) 22px var(--promien) 22px;
  font-family: var(--krój-naglowek); font-weight: 600; font-size: 1rem;
  letter-spacing: .01em; line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 22px 42px -24px rgba(22, 40, 29, .9);
}
.tresc .przejscie a.przycisk::after, .tresc .cta a.przycisk::after { content: "→"; }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover,
.tresc .cta a.przycisk:hover {
  background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie);
}

/* --- 11. ŹRÓDŁO — tabliczka przypisu --------------------------------- */
.tresc .zrodlo {
  margin: 0;
  padding: clamp(1rem, .7rem + .9vw, 1.6rem) clamp(1.1rem, .7rem + 1.1vw, 1.8rem);
  background: var(--zrodlo-tlo);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 5px solid var(--akcent);
  border-radius: var(--promien) 18px 18px var(--promien);
  font-size: .94rem; line-height: 1.62;
  color: var(--atrament-cichy);
}
.pas--zrodla {
  background-color: var(--papier);
  padding-block: clamp(1.8rem, 1.2rem + 2vw, 3.4rem) clamp(2.4rem, 1.4rem + 3vw, 5rem);
}

/* --- 12. LISTA WPISÓW — tabliczki na słupkach ------------------------ */
.tresc .lista-wpisow {
  margin: clamp(1.6rem, 1rem + 1.6vw, 2.8rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  counter-reset: wpis;
}
@media (min-width: 900px)  { .tresc .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1340px) { .tresc .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tresc .zapowiedz {
  counter-increment: wpis;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.4rem) clamp(1.3rem, .9rem + 1.2vw, 2.2rem)
           clamp(1.3rem, .9rem + 1.2vw, 2.2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta) var(--promien-rog) var(--promien-karta) var(--promien-rog);
  box-shadow: var(--cien-plyta);
}
.tresc .zapowiedz::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 8px;
  background: linear-gradient(90deg,
    var(--wiodaca) 0 42%, var(--niebo) 42% 78%, var(--akcent) 78% 100%);
}
/* duża ozdobna cyfra — ornament, nie informacja (jest pseudoelementem) */
.tresc .zapowiedz::after {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-end: -.14em; inset-inline-end: .04em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 6.4rem; line-height: 1;
  color: var(--wiodaca-jasna);
  pointer-events: none;
}
.tresc .zapowiedz > * { position: relative; z-index: 1; }
.tresc .zapowiedz__tytul {
  margin: 0 0 .6rem; padding: 0; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.14rem, 1rem + .5vw, 1.5rem); line-height: 1.24;
  letter-spacing: -.018em;
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--wiodaca-ciemna); text-decoration: none;
}
.tresc .zapowiedz__tytul a:hover { color: var(--akcent); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1.2rem; color: var(--atrament-cichy); font-size: .97rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .6em; min-height: 46px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0 .1rem; text-decoration: none;
  color: var(--wiodaca-ciemna); font-family: var(--krój-naglowek); font-weight: 600;
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  border-block-end: 3px solid var(--akcent);
}
.tresc .zapowiedz__wiecej a::after { content: "→"; }
.tresc .zapowiedz__wiecej a:hover { color: var(--akcent); }
/* indeks wpisów leży na pasmie piasku */
.pas--indeks {
  overflow: hidden;
  background-color: var(--tlo-2);
  background-image:
    repeating-linear-gradient(90deg, var(--plan-mocny) 0 1px, transparent 1px var(--siatka-duza)),
    repeating-linear-gradient(0deg,  var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala)),
    repeating-linear-gradient(90deg, var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala));
  background-repeat: repeat-x;
  background-size: 100% 136px, 100% 136px, 100% 136px;
  background-position: 0 0;
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 4rem) clamp(2.8rem, 1.6rem + 3.6vw, 6rem);
}

/* --- 13. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--glebia-2);
  background-image:
    radial-gradient(56% 92% at 86% 0%, rgba(47, 95, 128, .40) 0%, rgba(47, 95, 128, 0) 62%),
    radial-gradient(44% 80% at 6% 100%, rgba(63, 113, 53, .34) 0%, rgba(63, 113, 53, 0) 66%),
    repeating-linear-gradient(90deg, var(--plan-noc-cichy) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg,  var(--plan-noc-cichy) 0 1px, transparent 1px 34px);
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
  background-size: auto, auto, 100% 102px, 100% 102px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  color: var(--na-ciemnym);
  padding-block: clamp(2.4rem, 1.4rem + 2.6vw, 4.4rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--trawa-jasna) 0 24%, var(--niebo-jasne) 24% 68%, var(--piasek-jasny) 68% 100%);
}
.stopka__pas {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 3rem);
}
.stopka__znak {
  margin: 0; font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.02rem, .94rem + .3vw, 1.36rem);
  letter-spacing: -.012em; color: var(--na-ciemnym);
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.4rem, 1.8vw, 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(--trawa-jasna); font-family: var(--krój-naglowek); font-weight: 500;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  border-block-end: 3px solid transparent;
}
.stopka__menu a:hover { color: var(--na-ciemnym); border-block-end-color: var(--niebo-jasne); }
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: .4em 1.3em;
  border: 2px solid var(--niebo-jasne);
  border-radius: var(--promien) 18px var(--promien) 18px;
  color: var(--niebo-jasne); text-decoration: none;
  font-family: var(--krój-naglowek); font-size: .8rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--niebo-jasne); color: var(--glebia-2); }

/* --- 14. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.6rem 0 2.2rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien) 18px var(--promien) 18px;
  background: var(--papier-karta); padding: 0; overflow: hidden;
  box-shadow: var(--cien-karta);
}
.próbka__pole { display: block; height: 78px; }
.próbka__opis {
  display: block; padding: .8rem 1rem;
  font-family: var(--krój-maszyna); font-size: .78rem;
  color: var(--atrament); line-height: 1.55;
}
.tresc .wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.8rem) clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-inline-start: 5px solid var(--wiodaca);
  border-radius: var(--promien) 18px 18px var(--promien);
  font-family: var(--krój-maszyna);
  font-size: .9rem; line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
}
.tresc .kroki {
  margin: .6em 0 1.9em; padding: 0; list-style: none;
  counter-reset: krok; display: grid; gap: .75rem;
}
.tresc .kroki li {
  counter-increment: krok; position: relative;
  padding: 1em 1.3em 1em 4.1em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--wiodaca);
  border-radius: var(--promien) 18px 18px var(--promien);
  box-shadow: var(--cien-karta);
}
.tresc .kroki li::before {
  content: counter(krok); position: absolute;
  inset-inline-start: 1em; inset-block-start: .9em;
  width: 2.2em; height: 2.2em; display: grid; place-items: center;
  background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  border: 2px solid var(--wiodaca);
  border-radius: var(--promien) 12px var(--promien) 12px;
  font-family: var(--krój-naglowek); font-weight: 700; font-size: 1em;
  font-variant-numeric: lining-nums tabular-nums; line-height: 1;
}
.tresc .wyliczenie {
  margin: .4em 0 1.7em; padding: 0; list-style: none;
  display: grid; gap: .55rem;
}
.tresc .wyliczenie li {
  position: relative; padding: .8em 1.2em .8em 2.8em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien) 18px var(--promien) 18px;
  color: var(--atrament);
}
.tresc .wyliczenie li::before {
  content: ""; position: absolute;
  inset-inline-start: 1.2em; inset-block-start: 1.5em;
  width: 1em; height: 4px; border-radius: 2px; background: var(--wiodaca);
}
.tresc .odsylacz { color: var(--atrament-cichy); }

/* --- 15. WIDOK SZEROKI — kompozycja powyżej 1366 px ------------------- */
/* ⭐⭐ ZASADA UŻYTKOWNIKA: makieta ma ROSNĄĆ powyżej 1366 px, a rosnąć znaczy
   „przybywa TREŚCI W POZIOMIE", nie „ubywa marginesu".
   POMIAR 2026-09-01 (pomiar-skali.mjs, index.html, file://):
     margines najszerszego modułu treści @1920 …… 90 | 90 px  (cel 70–130 — OK)
     kolumna prozy @1920 ……………………………………… 912 px  (≈91 znaków — ZA SZEROKO)
   Wadą była PROZA, nie margines: lid hero miał własną miarę 44rem, szerszą od
   kolumny prozy serwisu (36rem), a jednocześnie oba boki pasm stały puste —
   przy 1920 px szyny .kontener miały po 401 px pustki, a tabliczka 47rem
   zostawiała po ~473 px tła z każdej strony.

   POPRAWKA MA DWA RUCHY I OBA SĄ KONIECZNE:
   (1) lid schodzi do miary kolumny prozy — jedna miara na cały serwis;
   (2) odzyskana szerokość DOSTAJE ROLĘ, a nie zamienia się w biel:
       · nagłówek sekcji wychodzi z kolumny prozy na BAREK po jej lewej
         stronie (dosunięty do prozy, więc lewa krawędź kolumny tekstu
         zostaje jedyną osią pionową kompozycji — także w hero),
       · drogowskaz kończący sekcję staje w SZYNIE po prawej stronie prozy,
       · tabliczka rozsuwa się z 47rem do 72rem, żeby barek i szyna w ogóle
         miały gdzie stanąć,
       · rozdroże złożone z samych drogowskazów układa się w RZĄD,
       · rysunek planu w hero przestaje być tłem pod tekstem i staje się
         osobną PRAWĄ KOLUMNĄ, zaczynającą się dokładnie na prawej krawędzi
         kolumny prozy.
   ⚠ Poniżej 1366 px nie zmienia się nic — to nie jest przebudowa mobilna. */

@media (min-width: 1366px) {
  /* ⚠⚠ WADA GŁÓWNA POMIARU: lid hero miał 44rem = 912 px ≈ 91 znaków w wierszu.
     Rozciągnięta proza męczy w czytaniu. Jedna miara dla całego serwisu. */
  .hero .lid { max-width: var(--kolumna); }
}

@media (min-width: 1500px) {
  .kontener {
    /* odstęp barku i szyny od kolumny prozy — jednocześnie padding nagłówka,
       więc kreska ścieżki kończy się dokładnie na krawędzi jego tekstu */
    --barek-odstep: clamp(1.5rem, 2vw, 2.9rem);
  }

  /* TABLICZKA — dopiero teraz ma własne szyny. 47rem starczało na samą prozę,
     72rem mieści barek z nagłówkiem po lewej i drogowskaz po prawej.
     Kolumna prozy NIE DRGA: tabliczka i pasmo są wyśrodkowane tak samo. */
  .tablica { --pas-szer: 72rem; }
  /* wstęp zostaje wąską tabliczką ogłoszeniową — nie ma nagłówka, więc szyny
     byłyby pustą bielą; 56rem czyta się jak świadomie mniejsza płyta */
  .pas--wstep .tablica { --pas-szer: 56rem; }
  /* rozdroże z jednym drogowskazem też zostaje wąskie */
  .tablica--trawa { --pas-szer: 47rem; }

  /* --- BAREK: nagłówek sekcji obok prozy, nie nad nią -------------------- */
  .kontener > h2 {
    grid-column: pelna-start / tekst-start;
    align-self: start;
    max-width: 18rem;
    margin: 0 0 1rem auto;
    padding-inline: 0 var(--barek-odstep);
    text-align: end;
    font-size: clamp(1.28rem, .70rem + .95vw, 1.82rem);
    /* ⚠⚠ PUŁAPKA ZŁAPANA W PIERWSZEJ FALI SERII: body ma
       overflow-wrap: break-word i w wąskiej kolumnie bocznej łamie nagłówek
       W ŚRODKU SŁOWA („proporcjo-nalnie"). ŻADNA BRAMKA TEGO NIE WIDZI.
       Miara barku jest dobrana tak, aby najdłuższe słowo nagłówków serwisu
       („proporcjonalnie", 15 znaków) mieściło się w wierszu także w kroju
       ZAPASOWYM, gdy Google Fonts nie wstanie; hyphens to druga linia obrony. */
    hyphens: auto;
  }
  .kontener > h2:first-child { margin-block-start: 0; }
  /* ścieżka i cegiełka lustrzane — kreska kończy się tam, gdzie nagłówek */
  .kontener > h2::before {
    inset-inline-start: auto;
    inset-inline-end: var(--barek-odstep);
  }
  .kontener > h2::after {
    inset-inline-start: auto;
    inset-inline-end: calc(var(--barek-odstep) + clamp(52px, 6.6vw, 100px));
  }

  /* --- SZYNA: drogowskaz obok prozy ------------------------------------- */
  /* ⚠ Automatyczne rozmieszczanie siatki: wszystkie dzieci .kontener mają
     JAWNĄ kolumnę, więc kursor nigdy się nie cofa — nagłówek ląduje w wierszu
     pierwszego akapitu, a drogowskaz w wierszu ostatniego. Bez jawnej kolumny
     dla każdego dziecka akapity wpadałyby w szyny.
     ⚠ Rozdroże (.tablica--trawa) jest WYŁĄCZONE: składa się z samych
     drogowskazów, więc :last-child wyprowadziłby jeden z nich w bok. */
  .kontener:not(.tablica--trawa) > p.przejscie:last-child {
    grid-column: tekst-end / pelna-end;
    align-self: start;
    margin-block: 0;
    padding-inline-start: var(--barek-odstep);
  }
  /* ⚠⚠ P-15: drogowskaz rozpięty na całą szerokość NIE MOŻE być rzędem flex.
     Strzałka jest wtedy OSOBNYM elementem rzędu, więc siada przy prawej
     krawędzi pudełka, a napis — który w wąskiej szynie i tak się zawija —
     zostaje po lewej. Między nimi otwiera się pas pustego tła, a strzałka
     wisi w połowie wysokości bloku tekstu (`align-items: center`), zamiast
     iść za ostatnim słowem. Zmierzone przy 1920 px: napisy łamały się na
     3–4 wiersze, „Zobacz wszystkie poradniki" na trzy — słowo na wiersz.
     Blok oddaje napisowi całą szerokość pudełka (ok. 30 px odzyskane ze
     strzałki i odstępu), a strzałka wraca do biegu tekstu — za ostatnim
     słowem, bez okazji do złamania wiersza, bo między nimi nie ma spacji
     (ta sama zasada, co przy końcowej kropce w P-3).
     Odstęp pionowy .7em zamiast .5em, żeby napis stał W ŚRODKU pudełka:
     przy sztywnym `min-height` .5em zostawiało u dołu 7,6 px więcej niż
     u góry, bo o wysokości decydowało min-height, a nie dopełnienie. */
  .kontener:not(.tablica--trawa) > p.przejscie:last-child a {
    display: block; width: 100%;
    padding-block: .7em;
    text-align: start;
  }
  .kontener:not(.tablica--trawa) > p.przejscie:last-child a.przycisk { text-align: center; }
  .kontener:not(.tablica--trawa) > p.przejscie:last-child a::after { margin-inline-start: .45em; }

  /* --- ROZDROŻE: drogowskazy w rzędzie ---------------------------------- */
  /* :has() sprawdza, czy drogowskazów jest co najmniej trzy. Gdy jest jeden,
     reguła nie działa i tabliczka zostaje taka jak dotąd — brak wsparcia dla
     :has() daje ten sam, bezpieczny układ. */
  .kontener.tablica--trawa:has(> p:nth-of-type(3)) {
    --pas-szer: 72rem;
    display: flex; flex-wrap: wrap; align-items: stretch;
    gap: clamp(1rem, 1.5vw, 2rem);
  }
  .kontener.tablica--trawa:has(> p:nth-of-type(3)) > .przejscie {
    flex: 1 1 16rem; margin: 0;
  }
  /* ⚠ P-15, ta sama rzecz w trybie kafelkowym rozdroża — patrz komentarz wyżej. */
  .kontener.tablica--trawa:has(> p:nth-of-type(3)) > .przejscie a {
    display: block; width: 100%; height: 100%;
    padding-block: .7em;
    text-align: start;
  }
  .kontener.tablica--trawa:has(> p:nth-of-type(3)) > .przejscie a::after { margin-inline-start: .45em; }

  /* --- ORNAMENT SZYNY: ustępuje treści --------------------------------- */
  /* Szyna marginesu była lekarstwem na pustkę. Po lewej stoi teraz nagłówek,
     więc wycinek siatki przenosi się na PRAWĄ stronę pasma trawy (narożnik
     obraca się razem z nim), a z tabliczek znika zupełnie — tam szyna należy
     do drogowskazu. */
  .pas--trawa > .kontener::before {
    inset-inline-start: auto;
    inset-inline-end: var(--margines);
    border-inline-start: 0;
    border-inline-end: 3px solid var(--plan-mocny);
  }
  .pas--piasek > .kontener.tablica::before,
  .pas--trawa  > .kontener.tablica::before { content: none; }
  /* ⚠ ZŁAPANE NA WŁASNYM ZRZUCIE: gdy sekcja kończy się drogowskazem, karta
     drogowskazu i wycinek siatki stają w tej samej szynie — biała płytka
     zasłaniała środek ornamentu, a nad nią i pod nią sterczały jego krawędzie.
     Bramki tego nie widzą. W takiej sekcji szyna należy do drogowskazu. */
  .pas--trawa  > .kontener:has(> p.przejscie:last-child)::before,
  .pas--piasek > .kontener:has(> p.przejscie:last-child)::before,
  .pas--indeks > .kontener:has(> p.przejscie:last-child)::before { content: none; }

  /* Tabliczka, która nie kończy się drogowskazem, miałaby prawą szynę pustą.
     Dostaje w niej ten sam wycinek planu z narożnikiem, którym pasma znaczą
     swoje szyny: biel przestaje być polem po niczym, a język ornamentu zostaje
     jeden na cały serwis. Rysunek stoi ZA kolumną prozy (proza kończy się na
     50% + kolumna/2), więc zasada „siatka nigdy pod prozą" jest spełniona.
     ⚠ To tło, nie pseudoelement: ::before tabliczki trzyma pasek etykiety,
     a ::after kreskowaną ramkę rysunku — oba są już zajęte. */
  .tablica:not(:has(> p.przejscie:last-child)) {
    --szyna-x: calc(var(--margines) + 1.4rem);
    --szyna-y: clamp(64px, 6vw, 116px);
    --szyna-w: clamp(96px, 8vw, 150px);
    --szyna-h: clamp(150px, 15vw, 260px);
    background-image:
      linear-gradient(var(--plan-mocny), var(--plan-mocny)),
      linear-gradient(var(--plan-mocny), var(--plan-mocny)),
      repeating-linear-gradient(0deg,  var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala)),
      repeating-linear-gradient(90deg, var(--plan-cichy) 0 1px, transparent 1px var(--siatka-mala));
    background-repeat: no-repeat;
    background-size:
      3px var(--szyna-h), var(--szyna-w) 3px,
      var(--szyna-w) var(--szyna-h), var(--szyna-w) var(--szyna-h);
    background-position:
      right var(--szyna-x) bottom var(--szyna-y),
      right var(--szyna-x) bottom var(--szyna-y),
      right var(--szyna-x) bottom var(--szyna-y),
      right var(--szyna-x) bottom var(--szyna-y);
  }
  /* ⚠ na pasmie nocnym zielony ornament dzienny byłby niewidoczny */
  .na-nocy .tablica:not(:has(> p.przejscie:last-child)) {
    --plan-cichy: var(--plan-noc-cichy);
    --plan-mocny: var(--plan-noc-mocny);
  }

  /* --- HERO: rysunek planu jako prawa kolumna --------------------------- */
  /* ⚠ Prawa krawędź kolumny prozy to dokładnie 50% + kolumna/2, bo kolumna
     jest wyśrodkowana w oknie na KAŻDYM pasmie. Dzięki temu rysunek zaczyna
     się tam, gdzie kończy się tekst, i zasada „siatka planu nigdy nie biegnie
     pod prozą" jest spełniona z definicji, a nie przez dobraną maskę. */
  .hero__plan {
    inset-inline-start: calc(50% + var(--kolumna) / 2);
    inset-inline-end: 0;
    width: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0 1%, rgba(0, 0, 0, .55) 16%, #000 34%);
            mask-image: linear-gradient(90deg, transparent 0 1%, rgba(0, 0, 0, .55) 16%, #000 34%);
  }
  /* tytuł zatrzymuje się przed rysunkiem — hero czyta się jako dwie kolumny */
  .hero .tytul { max-width: 14em; }
}

/* --- 16. 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--noc, .tablica--noc {
    background: #FFFFFF !important; color: #000000 !important;
  }
  .hero .tytul, .hero .lid, .stopka__znak { color: #000000 !important; }
  .hero__plan, .hero__plac, .hero::after, .stopka::before, .pas--noc::before { display: none !important; }
  .tablica { box-shadow: none; margin-block-start: 0; }
  .pas--piasek, .pas--trawa, .pas--indeks, .pas--plyta { background: #FFFFFF; }
  a { color: #000000; }
}