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

   IDEA: mapa nieba jest PRZYRZĄDEM, nie obrazkiem. Serwis wygląda więc jak
   panel odczytu: ciemna kopuła współrzędnych w nagłówku, siatka azymut/
   wysokość jako faktura, sekcje ułożone jako ponumerowane pola przyrządu,
   liczby i wzory składane krojem o stałej szerokości.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* podłoża ciemne — obudowa przyrządu */
  --noc:            #0A1420;   /* nagłówek, stopka */
  --stal:           #10233A;   /* kopuła hero, ciemne pasma sekcji */
  --stal-2:         #16324C;   /* panele wewnątrz ciemnych pasm */
  --stal-3:         #1B4368;   /* jaśniejszy stop gradientu hero */

  /* podłoża jasne — arkusz roboczy */
  --papier:         #EEF2F6;
  --papier-karta:   #FFFFFF;
  --tlo-2:          #DDE5EC;   /* pasmo płyty */
  --wiodaca-jasna:  #DDE5EC;

  /* atramenty */
  --atrament:       #0D141C;
  --atrament-cichy: #3E4A57;
  --wiodaca:        #1E4A6E;   /* powierzchnie: przyciski, plakietki */
  --wiodaca-ciemna: #10395B;   /* tekst i odsyłacze na jasnym tle */
  --mgla:           #B9CBDA;   /* tekst drugiego planu NA ciemnym */

  /* akcenty */
  --cyjan:          #62E0EE;   /* podświetlenie ekranu — TYLKO na ciemnym */
  --cyjan-ciemny:   #0B5C6E;   /* ten sam akcent do tekstu na jasnym */
  --bursztyn:       #F0B429;   /* ostrzeżenie na ciemnym */
  --bursztyn-ciemny:#8A5300;   /* ostrzeżenie na jasnym */

  /* linie */
  --linia:          #6E7E8D;   /* obwódka — element nietekstowy, 3,71:1 */
  --linia-cicha:    #C6D0D9;   /* wyłącznie dekoracja */
  --linia-noc:      rgba(185,203,218,.24);
  --akcent:         #0B5C6E;

  --na-wiodacej:    #FFFFFF;
  --na-akcencie:    #FFFFFF;

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

  /* --- miary układu ---
     ⚠ B13: kolumna prozy i stopień pisma MUSZĄ rosnąć powyżej 1366 px,
     a kompozycja nie może być jednostronna. Dlatego korzeń skaluje się
     z szerokością okna, a siatka sekcji ROZPINA SIĘ na całe pasmo
     (kolumna głowy jest elastyczna) zamiast stać wyśrodkowana w środku
     pustego pola — wyśrodkowanie było drugim źródłem martwego marginesu.
     ⚠⚠ PUŁAPKA PODWÓJNEGO MARGINESU (2026-08-31): pas miał sztywne 74rem
     I DODATKOWO wypełnienie do 64 px, więc przy 1920 px zostawało 218 px
     marginesu z każdej strony przy celu ~95 px. Teraz pas jest PŁYNNY
     (90,5vw), a wypełnienie CELOWO małe — margines pasma 91 px + 40 px
     wypełnienia = 131 px do pierwszej litery. */
  --pas:            clamp(62rem, 90.5vw, 92rem); /* 1236 px @1366 · 1738 px @1920
        ⚠ dolny próg 62rem, nie 70rem: przy 70rem pas przy 1024 px był szerszy
        od okna, więc arkusz płyty dotykał krawędzi ekranu. */
  --przerwa:        clamp(2rem, 2.4vw, 3.6rem);  /* odstęp między kolumnami sekcji */
  --proza:          37rem;   /* kolumna prozy ≈ 78 znaków przy 1920 */
  --bok:            clamp(15rem, 18vw, 18rem);   /* kolumna zewnętrzna od 1560 px */
  --margines:       clamp(20px, 3.4vw, 40px);
  --promień:        4px;
  --promień-duzy:   10px;
  --krok-siatki:    clamp(26px, 3.2vw, 54px);

  --cień-płyta:  0 1px 0 rgba(13,20,28,.05), 0 18px 40px -28px rgba(13,20,28,.55);
  --cień-karta:  0 1px 0 rgba(13,20,28,.06), 0 26px 56px -34px rgba(13,20,28,.6);
}

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

html {
  font-size: clamp(1rem, 0.593rem + 0.55vw, 1.28rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* ⚠ pułapka 6: clip leczy przepełnienia od pasów full-bleed, nie psując sticky */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.68;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; height: auto; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: var(--krój-naglowek);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.12;
  margin: 0;
}

/* ⚠ pułapka 1 (wariant „globalne strong{color}”): pogrubienie samą wagą pisma,
   kolor zawsze dziedziczony — inaczej strong w ciemnym paśmie znika. */
strong, b { font-weight: 600; color: inherit; }
em { font-style: italic; }

a { color: var(--wiodaca-ciemna); overflow-wrap: anywhere; }

:focus-visible {
  outline: 3px solid var(--cyjan-ciemny);
  outline-offset: 3px;
  border-radius: var(--promień);
}
.hero :focus-visible, .sekcja--ciemna :focus-visible,
.naglowek :focus-visible, .stopka :focus-visible { outline-color: var(--cyjan); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (bramka B7) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 190px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.4rem;
  background: var(--cyjan); color: var(--noc);
  font-family: var(--krój-naglowek); font-weight: 700; text-decoration: none;
}

/* --- 3. KONTENER ------------------------------------------------------ */
.kontener {
  width: 100%;
  max-width: var(--pas);
  margin-inline: auto;
  padding-inline: var(--margines);
}

/* =====================================================================
   4. NAGŁÓWEK — pas przyrządu
   ===================================================================== */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: var(--noc);
  color: #FFFFFF;
  border-block-end: 1px solid var(--linia-noc);
}
.naglowek::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyjan) 0%, rgba(98,224,238,.15) 34%, rgba(98,224,238,0) 70%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 1.6rem;
  padding-block: .55rem;
}

.znak {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 46px;
  color: #FFFFFF; text-decoration: none;
  font-family: var(--krój-naglowek);
  font-weight: 700; font-size: 1.02rem;
  letter-spacing: .005em;
}
.znak__ikona { flex: none; width: 26px; height: 26px; color: var(--cyjan); }
.znak__tekst { display: block; }
.znak:hover .znak__tekst { text-decoration: underline; text-underline-offset: 5px; }

.menu { flex: none; }
.menu__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .1rem .2rem;
}
.menu__link {
  display: flex; align-items: center;
  min-height: 46px; padding: .35rem .8rem;
  color: var(--mgla); text-decoration: none;
  font-family: var(--krój-naglowek);
  font-size: .84rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.menu__link:hover { color: #FFFFFF; border-block-end-color: var(--linia-noc); }
.menu__link[aria-current="page"] {
  color: var(--cyjan);
  border-block-end-color: var(--cyjan);
}

@media (max-width: 719px) {
  .naglowek__pas { padding-block: .45rem .1rem; }
  .menu { width: 100%; }
  .menu__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .menu__link {
    justify-content: flex-start;
    border-block-end: 2px solid transparent;
    border-inline-start: 2px solid var(--linia-noc);
    padding-inline: .7rem;
  }
  .menu__link[aria-current="page"] { border-inline-start-color: var(--cyjan); }
}

/* =====================================================================
   5. HERO — kopuła współrzędnych
   ===================================================================== */
.hero {
  position: relative; isolation: isolate;
  overflow: hidden;
  background-color: var(--stal);
  background-image:
    radial-gradient(115% 95% at 12% -18%, var(--stal-3) 0%, rgba(27,67,104,0) 62%),
    linear-gradient(168deg, #12283F 0%, #0F2137 46%, #0A1420 100%);
  color: #FFFFFF;
  padding-block: clamp(2.6rem, 5.4vw, 5.6rem) clamp(3rem, 5vw, 5rem);
  border-block-end: 1px solid rgba(98,224,238,.28);
}
/* warstwa 1: siatka azymut/wysokość */
.hero__siatka {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, rgba(98,224,238,.16) 0 1px, transparent 1px var(--krok-siatki)),
    repeating-linear-gradient(to bottom, rgba(185,203,218,.10) 0 1px, transparent 1px var(--krok-siatki));
  -webkit-mask-image: radial-gradient(125% 105% at 26% 6%, #000 0%, rgba(0,0,0,.42) 52%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(125% 105% at 26% 6%, #000 0%, rgba(0,0,0,.42) 52%, rgba(0,0,0,0) 100%);
}
/* warstwa 2: linia horyzontu z podziałką */
.hero__horyzont {
  position: absolute; inset-inline: 0; inset-block-end: clamp(2.2rem, 4vw, 4.2rem);
  height: 14px; z-index: 0; pointer-events: none;
}
.hero__horyzont::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px;
  background: linear-gradient(90deg, rgba(98,224,238,0) 0%, rgba(98,224,238,.55) 18%,
              rgba(98,224,238,.55) 82%, rgba(98,224,238,0) 100%);
}
.hero__horyzont::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 10px;
  background-image: repeating-linear-gradient(to right,
      rgba(185,203,218,.42) 0 1px, transparent 1px calc(var(--krok-siatki) / 2));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.hero__kontener { position: relative; z-index: 2; }
.hero__uklad {
  display: grid; gap: clamp(1.8rem, 3.4vw, 3.4rem);
  align-items: center;
}
.hero__tekst { min-width: 0; }

.tytul {
  font-size: clamp(2.15rem, 1.1rem + 3.1vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.04;
  text-wrap: balance;
  margin-block-end: clamp(1.1rem, 1.8vw, 1.7rem);
}
.tytul__akcent { color: var(--cyjan); display: block; }

.hero__lid {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1.06rem, 1rem + .28vw, 1.24rem);
  line-height: 1.62;
  color: #FFFFFF;
}
.hero__nota {
  margin-block: clamp(1.3rem, 2.2vw, 2rem) 0;
  max-width: 36rem;
  padding: 1rem 1.2rem 1rem 1.4rem;
  background: rgba(10,20,32,.55);
  border: 1px solid var(--linia-noc);
  border-inline-start: 3px solid var(--cyjan);
  border-radius: 0 var(--promień) var(--promień) 0;
  color: var(--mgla);
  font-size: .97rem; line-height: 1.6;
}

/* figura: kopuła azymut/wysokość (inline SVG, wyłącznie ornament) */
.hero__figura { position: relative; min-width: 0; color: var(--mgla); }
.hero__kopula { width: 100%; height: auto; }
.hero__linijka {
  margin-block-start: 1rem; height: 16px;
  background-image: repeating-linear-gradient(to right,
      rgba(185,203,218,.5) 0 1px, transparent 1px 14px);
  border-block-start: 1px solid var(--linia-noc);
}

@media (min-width: 1000px) {
  .hero { display: flex; align-items: center; min-height: min(84vh, 820px); }
  .hero__uklad { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
  /* figura wychodzi poza kolumnę do krawędzi pasma — kompozycja nie kończy się
     na łamie tekstu. ⚠ pułapka 19: ornament wieszamy na kontenerze, nie na oknie. */
  .hero__figura { margin-inline-end: calc(var(--margines) * -0.9); }
}
@media (max-width: 999px) {
  .hero__figura { max-width: 30rem; margin-inline: auto; opacity: .95; }
}

/* =====================================================================
   6. SEKCJE — pola przyrządu
   ===================================================================== */
.tresc { counter-reset: sekcja; display: block; }

.sekcja { position: relative; padding-block: clamp(2.6rem, 4.6vw, 4.6rem); }
.sekcja > .kontener { position: relative; z-index: 1; }
.sekcja--jasna { background: var(--papier); }
/* podziałka w marginesach jasnego pasma — arkusz leży na przyrządzie,
   a nie na pustej kartce. Wyłącznie ornament, bez podpisów. */
.sekcja--jasna::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom, rgba(30,74,110,.13) 0 1px, transparent 1px var(--krok-siatki)),
    repeating-linear-gradient(to right, rgba(30,74,110,.07) 0 1px, transparent 1px var(--krok-siatki));
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.15) 20%, transparent 34%,
                                       transparent 66%, rgba(0,0,0,.15) 80%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.15) 20%, transparent 34%,
                                       transparent 66%, rgba(0,0,0,.15) 80%, #000 100%);
}
@media (max-width: 999px) { .sekcja--jasna::before { display: none; } }
.sekcja--plyta {
  background-color: var(--tlo-2);
  background-image:
    repeating-linear-gradient(to right, rgba(30,74,110,.07) 0 1px, transparent 1px var(--krok-siatki)),
    repeating-linear-gradient(to bottom, rgba(30,74,110,.05) 0 1px, transparent 1px var(--krok-siatki));
}
.sekcja--ciemna {
  background-color: var(--stal);
  background-image:
    radial-gradient(90% 130% at 88% 0%, rgba(27,67,104,.85) 0%, rgba(16,35,58,0) 60%),
    repeating-linear-gradient(to bottom, rgba(185,203,218,.07) 0 1px, transparent 1px var(--krok-siatki));
  color: #FFFFFF;
  border-block: 1px solid rgba(98,224,238,.24);
}

/* siatka sekcji: nagłówek po lewej, proza po prawej.
   ⚠ B13: akapity prozy MUSZĄ zostać bezpośrednimi dziećmi .kontener */
.kontener--sekcja { display: block; }
@media (min-width: 1000px) {
  /* ⭐⭐ Kolumna głowy jest ELASTYCZNA (1fr), a nie sztywna 18rem: siatka
     rozpina się wtedy na całe pasmo i kolumna prozy kończy się dokładnie na
     jego prawej krawędzi. Wersja ze sztywnymi kolumnami i justify-content:
     center zostawiała przy 1440 px po ~116 px pustego pola po obu stronach
     WEWNĄTRZ kontenera — margines, którego nie widziała żadna bramka. */
  .kontener--sekcja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--proza);
    column-gap: var(--przerwa);
    align-items: start;
  }
  .kontener--sekcja > * { grid-column: 2; }
  /* ⚠ pułapka 7: sticky w siatce — blokiem zawierającym jest OBSZAR siatki,
     a ten obejmuje całą sekcję, więc głowa nie ucieka poza własne pasmo.
     ⚠ „1 / -1" bez jawnych wierszy wskazuje linię siatki JAWNEJ (czyli 1),
     dlatego rozpiętość podana jest przez span. */
  .kontener--sekcja > .sekcja__glowa {
    grid-column: 1; grid-row: 1 / span 40;
    position: sticky; inset-block-start: 5.5rem;
  }
  /* Arkusz płyty dostaje DOKŁADNIE pole kontenera: własna szerokość PLUS
     własne wypełnienie ustawiłyby jego kolumnę prozy o --margines w lewo
     względem pozostałych pasm. To ta sama pułapka podwójnego marginesu,
     tu widoczna jako rozjechane łamy sąsiednich sekcji. */
  .sekcja--plyta .kontener--sekcja {
    width: auto;
    max-width: var(--pas);
    padding-inline: var(--margines);
  }
}
/* płyta: proza na białym arkuszu położonym na barwnym paśmie.
   ⚠ pułapka 2: własne padding-inline, bo skrót padding z .kontener nie działa —
   arkusz ma być WĘŻSZY od pasma, więc szerokość liczymy jawnie.
   ⚠⚠ Reguła obowiązuje TYLKO w układzie jednokolumnowym (do 999 px). Od 1000 px
   arkusz dostaje dokładnie pole kontenera — inaczej kolumna prozy w pasmach
   płyty stałaby o --margines w lewo względem pozostałych pasm. */
.sekcja--plyta .kontener--sekcja {
  /* ⚠ background-color, NIE skrót „background": skrót zeruje background-image,
     a od 1560 px kontener sekcji rysuje tłem podziałkę kolumny zewnętrznej
     (reguła .kontener--sekcja ma NIŻSZĄ specyficzność i przegrałaby ze skrótem). */
  background-color: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promień-duzy);
  box-shadow: var(--cień-płyta);
  padding-block: clamp(1.5rem, 3vw, 2.6rem);
  padding-inline: clamp(1.1rem, 2.4vw, 2rem);
  width: calc(100% - 2 * var(--margines));
  max-width: calc(var(--pas) - 2 * var(--margines));
}

/* narożniki arkusza — znaki pasowania jak na ramce przyrządu.
   ⚠ Oba znaki rysuje JEDEN pseudoelement (::after) czterema warstwami tła.
   Powód: od 1500 px ::before kontenera sekcji jest numerem pola w kolumnie
   zewnętrznej, a pseudoelementy są tylko dwa. */
.sekcja--plyta .kontener--sekcja { position: relative; }
.sekcja--plyta .kontener--sekcja::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(var(--wiodaca), var(--wiodaca)),
    linear-gradient(var(--wiodaca), var(--wiodaca)),
    linear-gradient(var(--wiodaca), var(--wiodaca)),
    linear-gradient(var(--wiodaca), var(--wiodaca));
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px;
  background-position: left top, left top, right bottom, right bottom;
  background-repeat: no-repeat;
}

/* --- głowa sekcji: numer, tytuł, kreska prowadząca --- */
.sekcja__glowa { position: relative; margin-block-end: 1.4rem; }
.sekcja__nr {
  display: block;
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: .86;
  letter-spacing: -.05em;
  color: rgba(30,74,110,.20);
  margin-block-end: .35rem;
}
.sekcja__nr::before { content: counter(sekcja, decimal-leading-zero); }
.sekcja--ciemna .sekcja__nr { color: rgba(98,224,238,.30); }
.sekcja { counter-increment: sekcja; }
/* Widok, w którym numery stoją JUŻ w treści (podstrona „Ustawienia mapy”):
   ozdobna cyfra byłaby drugim numerem tej samej sekcji, więc jej miejsce
   zajmuje podziałka — ten sam rytm, zero podwójnej informacji. */
.widok--numerowana .sekcja__nr {
  height: clamp(1.9rem, 3vw, 2.8rem);
  margin-block-end: .55rem;
  background-image: repeating-linear-gradient(to right,
      rgba(30,74,110,.45) 0 2px, transparent 2px 13px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
}
.widok--numerowana .sekcja__nr::before { content: ""; }
.widok--numerowana .sekcja--ciemna .sekcja__nr {
  background-image: repeating-linear-gradient(to right,
      rgba(98,224,238,.55) 0 2px, transparent 2px 13px);
}

/* ⚠ pułapka: „text-wrap: balance" + overflow-wrap:break-word w wąskiej kolumnie
   głowy potrafi ROZCIĄĆ najdłuższy wyraz („nieprzystosowan/ej"). Balansowanie
   zostaje tylko przy H1 w hero, a stopień pisma tytułu sekcji jest dobrany tak,
   żeby najdłuższy wyraz treści mieścił się w kolumnie 18rem przy każdej
   szerokości od 1000 px w górę. */
.sekcja__tytul {
  font-size: clamp(1.34rem, 1rem + 1vw, 1.78rem);
  hyphens: auto;
  font-weight: 700;
  color: var(--wiodaca-ciemna);
  padding-block-start: .8rem;
  border-block-start: 3px solid var(--wiodaca);
}
.sekcja--ciemna .sekcja__tytul { color: #FFFFFF; border-block-start-color: var(--cyjan); }
.widok--numerowana .sekcja__tytul { padding-block-start: .7rem; }

/* --- proza --- */
.kontener--sekcja > p {
  margin-block: 0 1.15em;
  font-size: 1.05rem;
  max-width: var(--proza);
}
.kontener--sekcja > p:last-child { margin-block-end: 0; }
.sekcja--ciemna .kontener--sekcja > p { color: #FFFFFF; }

/* odsyłacz wewnątrz prozy — ⚠ pułapka 1: wykluczamy komponenty przyciskowe */
.kontener--sekcja p a:not(.plyta-cta):not(.przycisk) {
  color: var(--wiodaca-ciemna);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(16,57,91,.45);
}
.kontener--sekcja p a:not(.plyta-cta):not(.przycisk):hover { text-decoration-color: currentColor; }
.sekcja--ciemna .kontener--sekcja p a:not(.plyta-cta):not(.przycisk) {
  color: var(--cyjan);
  text-decoration-color: rgba(98,224,238,.5);
}

/* --- 7. PŁYTKA KIERUNKOWA (.przejscie) ------------------------------- */
.przejscie { margin-block: 1.7rem .2rem; max-width: var(--proza); }
.plyta-cta {
  display: flex; align-items: center; gap: .9rem;
  min-height: 56px;
  padding: .75rem 1.05rem;
  background: var(--wiodaca);
  color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca);
  border-radius: var(--promień);
  text-decoration: none;
  font-family: var(--krój-naglowek);
  font-size: .95rem; font-weight: 600; letter-spacing: .005em;
  box-shadow: var(--cień-płyta);
  transition: background-color .18s ease, transform .18s ease;
}
.plyta-cta__strzalka { flex: none; width: 22px; height: 22px; margin-inline-start: auto; }
.plyta-cta:hover { background: var(--wiodaca-ciemna); transform: translateX(3px); }
.sekcja--ciemna .plyta-cta {
  background: var(--papier-karta);
  color: var(--wiodaca-ciemna);
  border-color: var(--papier-karta);
}
.sekcja--ciemna .plyta-cta:hover { background: var(--mgla); }

/* --- 8. PANEL UWAGI -------------------------------------------------- */
.uwaga {
  position: relative;
  padding: 1.05rem 1.2rem 1.05rem 3.3rem;
  background: rgba(240,180,41,.10);
  border: 1px solid rgba(138,83,0,.35);
  border-inline-start: 3px solid var(--bursztyn-ciemny);
  border-radius: 0 var(--promień) var(--promień) 0;
}
.uwaga__znak {
  position: absolute; inset-inline-start: 1.1rem; inset-block-start: 1.25rem;
  width: 22px; height: 22px; color: var(--bursztyn-ciemny);
}
.sekcja--ciemna .uwaga {
  background: rgba(240,180,41,.12);
  border-color: rgba(240,180,41,.45);
  border-inline-start-color: var(--bursztyn);
}
.sekcja--ciemna .uwaga__znak { color: var(--bursztyn); }

/* --- 9. WZÓR — pole odczytu ------------------------------------------ */
.wzor {
  font-family: var(--krój-maszyna);
  font-size: .93rem;
  line-height: 1.55;
  padding: 1rem 1.15rem;
  background: var(--stal);
  color: #FFFFFF;
  border: 1px solid var(--stal-2);
  border-inline-start: 3px solid var(--cyjan);
  border-radius: var(--promień);
  box-shadow: var(--cień-płyta);
}
.sekcja--ciemna .wzor {
  background: var(--noc);
  border-color: rgba(98,224,238,.3);
}

/* --- 10. PANEL ŹRÓDŁOWY (koniec wpisu) ------------------------------- */
.zrodlo {
  position: relative;
  padding: 1.15rem 1.3rem 1.15rem 1.5rem;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--wiodaca);
  border-radius: 0 var(--promień) var(--promień) 0;
  box-shadow: var(--cień-płyta);
  font-size: .98rem;
  color: var(--atrament-cichy);
}
.sekcja--ciemna .zrodlo {
  background: rgba(10,20,32,.55);
  border-color: var(--linia-noc);
  border-inline-start-color: var(--cyjan);
  color: var(--mgla);
}

/* =====================================================================
   11. NOTATNIK — wiersze zapowiedzi i karty
   ===================================================================== */
.notka__tytul {
  font-size: clamp(1.2rem, 1rem + .7vw, 1.56rem);
  hyphens: auto;
  color: var(--wiodaca-ciemna);
  padding-block-start: .75rem;
  border-block-start: 3px solid var(--wiodaca);
}
.sekcja--ciemna .notka__tytul { color: #FFFFFF; border-block-start-color: var(--cyjan); }

.lista-wpisow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.1rem, 2vw, 1.6rem);
}
@media (min-width: 900px)  { .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zapowiedz {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promień-duzy);
  box-shadow: var(--cień-karta);
  overflow: hidden;
}
.zapowiedz__pasek {
  height: 74px;
  background-color: var(--stal);
  background-image:
    radial-gradient(70% 160% at 82% 0%, rgba(27,67,104,.9) 0%, rgba(16,35,58,0) 65%),
    repeating-linear-gradient(to right, rgba(98,224,238,.22) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(to bottom, rgba(185,203,218,.13) 0 1px, transparent 1px 22px);
  border-block-end: 2px solid var(--cyjan);
}
.zapowiedz__tresc { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.zapowiedz__tytul { font-size: 1.16rem; line-height: 1.22; margin-block-end: .7rem; }
.zapowiedz__tytul a {
  display: block;
  color: var(--wiodaca-ciemna);
  text-decoration: none;
}
.zapowiedz__tytul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.zapowiedz__tekst { margin: 0 0 1.2rem; font-size: .99rem; color: var(--atrament-cichy); }
.zapowiedz__wiecej { margin: auto 0 0; max-width: none; }
.zapowiedz__wiecej .plyta-cta { min-height: 48px; font-size: .9rem; }

/* =====================================================================
   12. STOPKA — pas zamknięcia
   ===================================================================== */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--noc);
  background-image:
    radial-gradient(90% 150% at 84% 0%, rgba(27,67,104,.7) 0%, rgba(10,20,32,0) 62%),
    repeating-linear-gradient(to right, rgba(98,224,238,.10) 0 1px, transparent 1px var(--krok-siatki)),
    repeating-linear-gradient(to bottom, rgba(185,203,218,.07) 0 1px, transparent 1px var(--krok-siatki));
  color: var(--mgla);
  border-block-start: 2px solid var(--cyjan);
  padding-block: clamp(2.4rem, 4vw, 3.6rem) clamp(1.6rem, 3vw, 2.6rem);
}
.stopka__uklad {
  display: grid; gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
}
@media (min-width: 860px) {
  .stopka__uklad { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; }
}
.stopka__znak {
  margin: 0;
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.95rem);
  letter-spacing: -.02em;
  line-height: 1.14;
  color: #FFFFFF;
  max-width: 16rem;
}
.stopka__kreska {
  width: 100%; height: 34px; margin-block-start: 1rem;
  color: var(--mgla);
}
.stopka__menu ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
}
.stopka__menu a {
  display: flex; align-items: center;
  min-height: 46px; padding: .3rem 0;
  color: var(--mgla); text-decoration: none;
  font-family: var(--krój-naglowek);
  font-size: .92rem; font-weight: 600;
  letter-spacing: .04em;
  border-block-end: 1px solid var(--linia-noc);
  transition: color .18s ease, padding-inline-start .18s ease;
}
.stopka__menu a:hover { color: var(--cyjan); padding-inline-start: .5rem; }

.do-gory {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .5rem 1.1rem;
  color: #FFFFFF; text-decoration: none;
  font-family: var(--krój-naglowek);
  font-size: .86rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--mgla);
  border-radius: var(--promień);
  transition: background-color .18s ease, color .18s ease;
}
.do-gory svg { width: 18px; height: 18px; }
.do-gory:hover { background: var(--cyjan); color: var(--noc); border-color: var(--cyjan); }

/* =====================================================================
   13. ARKUSZ SYSTEMU (specimen.html) — nie jest stroną serwisu
   ===================================================================== */
.próbki {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: grid; gap: .6rem;
}
@media (min-width: 700px) { .próbki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.próbka { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.próbka__pole {
  flex: none; width: 60px; height: 44px;
  border: 1px solid var(--linia);
  border-radius: var(--promień);
}
.próbka__opis { font-size: .93rem; color: var(--atrament-cichy); }
.sekcja--ciemna .próbka__opis { color: var(--mgla); }

.kroki { margin: 0 0 1.2rem; padding: 0 0 0 1.4rem; }
.kroki li { margin-block-end: .6rem; }
.wyliczenie { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.wyliczenie li { position: relative; padding-inline-start: 1.6rem; margin-block-end: .6rem; }
.wyliczenie li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .72em;
  width: 1rem; height: 3px; background: var(--wiodaca);
}
.sekcja--ciemna .wyliczenie li::before { background: var(--cyjan); }

.przycisk {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 52px; padding: .7rem 1.4rem;
  background: var(--wiodaca); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca); border-radius: var(--promień);
  font-family: var(--krój-naglowek); font-weight: 600;
  text-decoration: none;
}
.przycisk:hover { background: var(--wiodaca-ciemna); }

/* =====================================================================
   13b. POWYŻEJ 1560 px — TRZECIA KOLUMNA: pole przyrządu z podziałką
   ⭐⭐ ZASADA UŻYTKOWNIKA: makieta ma ROSNĄĆ powyżej 1366 px, a nie tylko
   dokładać marginesu (pomiar 2026-08-31: 218 px marginesu przy celu ~95 px).
   Do 1559 px sekcja jest dwukolumnowa (głowa + proza) i rozpięta na całe
   pasmo. Od 1560 px odzyskana szerokość dostaje ROLE:
     · kolumna głowy rośnie z 18rem (361 px) do ~478 px, więc tytuł sekcji
       stoi w dwóch–trzech wierszach zamiast sześciu i może urosnąć,
     · KOLUMNA ZEWNĘTRZNA --bok (346 px przy 1920) bierze numer pola,
       pionową podziałkę przyrządu i PŁYTKĘ KIERUNKOWĄ — czyli elementy,
       które wcześniej leżały POD prozą i wydłużały stronę,
     · kolumna prozy zostaje przy 37rem (742 px ≈ 78 znaków przy 1920).
       ⚠⚠ To jest osobny cel: samo rozciągnięcie kontenera zrobiłoby
       z prozy wiersze po ~105 znaków, czyli pogorszyło stronę.
   ⚠ Do kolumny zewnętrznej wolno przenieść WYŁĄCZNIE blok będący OSTATNIM
   dzieckiem sekcji. Algorytm rozmieszczania siatki (sparse) cofa kursor
   przy powrocie do kolumny niższej, więc blok wyjęty ze ŚRODKA zepchnąłby
   następny akapit o wiersz niżej i w kolumnie prozy powstałaby dziura.
   Dlatego .wzor, .uwaga i .zrodlo zostają w kolumnie prozy — wzór stoi tuż
   pod zdaniem, które go zapowiada dwukropkiem, a panel źródłowy to proza.
   ===================================================================== */
@media (min-width: 1560px) {
  .kontener--sekcja {
    --skala-kreska: rgba(30,74,110,.28);
    --skala-os:     rgba(30,74,110,.42);
    --skala-numer:  rgba(30,74,110,.22);
    grid-template-columns: minmax(0, 1fr) var(--proza) var(--bok);
    /* pionowa podziałka przy wewnętrznej krawędzi kolumny zewnętrznej —
       ta sama rodzina ornamentu co linijka hero i horyzont w stopce.
       ⚠ tło pozycjonuje się względem PADDING-BOXa, stąd --margines w calc. */
    background-image:
      repeating-linear-gradient(to bottom, var(--skala-kreska) 0 1px, transparent 1px 16px),
      linear-gradient(var(--skala-os), var(--skala-os));
    background-repeat: no-repeat, no-repeat;
    background-size: 20px 100%, 1px 100%;
    background-position:
      right calc(var(--bok) + var(--margines) - 20px) top 0,
      right calc(var(--bok) + var(--margines) - 1px) top 0;
  }
  .sekcja--ciemna .kontener--sekcja {
    --skala-kreska: rgba(98,224,238,.30);
    --skala-os:     rgba(98,224,238,.45);
    --skala-numer:  rgba(98,224,238,.30);
  }
  /* NUMER POLA przenosi się z głowy do kolumny zewnętrznej i rośnie. */
  .kontener--sekcja::before {
    content: counter(sekcja, decimal-leading-zero);
    grid-column: 3; grid-row: 1; align-self: start;
    margin-inline-start: 2.2rem;
    padding-block-start: .8rem;
    border-block-start: 3px solid var(--wiodaca);
    font-family: var(--krój-naglowek);
    font-weight: 800;
    font-size: clamp(3.2rem, 4.4vw, 5.4rem);
    line-height: .84;
    letter-spacing: -.05em;
    color: var(--skala-numer);
  }
  .sekcja--ciemna .kontener--sekcja::before { border-block-start-color: var(--cyjan); }
  .sekcja__glowa .sekcja__nr { display: none; }
  /* Widok, w którym numery stoją JUŻ w treści: zamiast cyfry ta sama
     podziałka co dotąd w głowie — ten sam rytm, zero podwójnej informacji. */
  .widok--numerowana .kontener--sekcja::before {
    content: "";
    height: clamp(2.2rem, 3vw, 3.2rem);
    background-image: repeating-linear-gradient(to right,
        var(--skala-os) 0 2px, transparent 2px 13px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
  }
  /* ⚠ Pseudoelement nie przyjmuje aria-hidden, którym wyciszony jest .sekcja__nr.
     Zapis „content: X / ''" daje mu PUSTY tekst zastępczy dla czytnika ekranu. */
  @supports (content: "a" / "b") {
    .kontener--sekcja::before { content: counter(sekcja, decimal-leading-zero) / ""; }
    .widok--numerowana .kontener--sekcja::before { content: "" / ""; }
  }

  /* POLE ODCZYTU (.wzor) rozpina się na kolumnę prozy I kolumnę zewnętrzną:
     wzór nie jest prozą, więc dłuższy wiersz mu nie szkodzi, a przy 1920 px
     mieści się w JEDNYM wierszu zamiast łamać się na dwa.
     ⚠ Rozpięcie zaczyna się w kolumnie prozy, więc wiersz siatki nie zostaje
     pusty i akapit po wzorze nie odskakuje — inaczej niż przy przeniesieniu
     bloku w całości do kolumny trzeciej. */
  .kontener--sekcja > .wzor { grid-column: 2 / -1; max-width: none; }

  /* PŁYTKA KIERUNKOWA staje obok prozy, nie pod nią (zawsze ostatnie dziecko). */
  .kontener--sekcja > .przejscie {
    grid-column: 3;
    max-width: none;
    margin-block: 0;
    margin-inline-start: 2.2rem;
  }

  /* tytuł sekcji korzysta z szerszej kolumny głowy */
  .sekcja__tytul { font-size: clamp(1.7rem, .9rem + 1.05vw, 2.1rem); }

  /* stopka: cztery pozycje w dwóch kolumnach zamiast jednej długiej listy */
  .stopka__menu ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 2vw, 2.6rem);
  }
}

/* =====================================================================
   14. DRUK
   ===================================================================== */
@media print {
  .naglowek, .stopka, .hero__siatka, .hero__horyzont, .hero__figura { display: none; }
  .hero, .sekcja--ciemna { background: #FFFFFF !important; color: #000000 !important; }
  .hero *, .sekcja--ciemna * { color: #000000 !important; }
  .sekcja { padding-block: 1rem; }
  body { background: #FFFFFF; }
}