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

   IDEA: prąd wchodzący do domu jest przepływem, a serwis uczy go zmierzyć
   w dwóch miejscach naraz — w sumie rocznej i w jednej sekundzie. Strona jest
   więc zbudowana jak obwód: ciemne węzły grafitowo-zielone (nagłówek, hero,
   panele kluczowych sekcji, stopka) przełączają się z jasnymi pasmami prozy,
   a przez całą wysokość biegnie szyna z odczytem numeru sekcji.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* --- role wymagane przez dokumentację serii --- */
  --papier:          #F4F7F3;   /* jasne pasmo prozy                     */
  --papier-karta:    #FFFFFF;   /* karty                                 */
  --tlo-2:           #0C1D18;   /* ciemne panele, nagłówek, stopka       */
  --wiodaca-jasna:   #C9E7D8;   /* plakietki odczytu, pola odsyłaczy     */
  --atrament:        #0F1E19;   /* proza na jasnym                       */
  --atrament-cichy:  #48605A;   /* zajawki, podpisy                      */
  --wiodaca:         #17795A;   /* kreski, obwódki, powierzchnie         */
  --wiodaca-ciemna:  #0A5138;   /* nagłówki i odsyłacze na jasnym        */
  --akcent:          #0B6E7C;   /* wskazanie i hover na jasnym (cyjan)   */
  --linia:           #6B837C;   /* obwódki widoczne — element nietekstowy*/
  --linia-cicha:     #7A9189;   /* ornament                              */
  --na-wiodacej:     #F2FBF6;
  --na-akcencie:     #F0FCFF;

  /* --- rozszerzenie palety: rodzina grafitowo-zielona i iskra --- */
  --graf-900:        #071310;   /* pasek nagłówka, tło najgłębsze        */
  --graf-800:        #0C1D18;   /* baza ciemnych paneli (= --tlo-2)      */
  --graf-700:        #123328;   /* jaśniejszy koniec gradientu           */
  --graf-600:        #173A2D;   /* karty na ciemnym                      */
  --na-ciemnym:      #EAF3ED;   /* proza na ciemnym                      */
  --na-ciemnym-cichy:#A9C4B8;   /* podpisy na ciemnym                    */
  --iskra:           #7DF23C;   /* elektryczna limonka — tylko punkty    */
  --cyjan:           #4FD8E8;   /* druga barwa przepływu                 */
  --papier-2:        #E4EDE7;   /* pasmo drugoplanowe (jasne)            */
  --kresa-ciemna:    rgba(234,243,237,.16);

  --krój-naglowek: "Space Grotesk", "Segoe UI Semibold", "Trebuchet MS", "DejaVu Sans", Verdana, sans-serif;
  --krój-tekst:    "IBM Plex Sans", "Segoe UI", Roboto, "Noto Sans", "DejaVu Sans", Arial, sans-serif;
  --krój-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* ⚠ łam w em/rem, nigdy w ch (pułapka T9 katalogu) */
  --kolumna:         36rem;   /* kolumna prozy — h2 i akapity            */
  --kolumna-szeroka: 58rem;   /* karty pojęć                              */
  --kolumna-indeks:  72rem;   /* indeks wpisów — pasmo szersze od prozy   */
  --szyna:           13rem;   /* lewa szyna z numerem sekcji (od 1180 px) */
  --szyna-odstep:    clamp(2rem, 3.5vw, 4rem);
  --margines:        clamp(20px, 5vw, 112px);
  --promień:         6px;
  --promień-duzy:    14px;
  --cien-karta:      0 1px 2px rgba(7,19,16,.06), 0 12px 28px -14px rgba(7,19,16,.34);
  --cien-panel:      0 26px 60px -34px rgba(7,19,16,.70);
}

/* --- 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 T6: clip zamiast hidden — nie psuje przyklejania i nie robi
   z <body> kontenera przewijania; hidden zostaje jako zapas. */
html, body { overflow-x: clip; }
@supports not (overflow: 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-feature-settings: "kern" 1;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--wiodaca-ciemna); }
/* ⚠ pułapka T4 z katalogu: globalne strong{color} wchodzi na powierzchnię
   o odwrotnej jasności i tekst znika. Pogrubiamy wyłącznie wagą. */
strong, b { color: inherit; font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--iskra);
  outline-offset: 3px;
  border-radius: var(--promień);
}

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (bramka B7 mierzy
   getBoundingClientRect, nie widoczność; wariant „1 px + clip" dawał 1×1). */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 190px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.5rem;
  background: var(--iskra); color: var(--graf-900);
  font-weight: 700; text-decoration: none;
  border-radius: 0 0 var(--promień) 0;
}

/* --- 3. KONTENER I SZYNA --------------------------------------------- */
.kontener { width: 100%; padding-inline: var(--margines); }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: relative;
  background-color: var(--graf-900);
  background-image: linear-gradient(100deg, var(--graf-900) 0%, #0A1A15 55%, var(--graf-700) 100%);
  color: var(--na-ciemnym);
}
/* pas energii pod paskiem nawigacji — ornament, nie nośnik znaczenia */
.naglowek::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px;
  background-image: linear-gradient(90deg,
      var(--iskra) 0%, var(--iskra) 16%,
      var(--cyjan) 16%, var(--cyjan) 27%,
      rgba(23,121,90,.75) 27%, rgba(23,121,90,.75) 62%,
      rgba(234,243,237,.18) 62%, rgba(234,243,237,.18) 100%);
}
.naglowek__pas {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .35rem clamp(1rem, 3vw, 3.2rem);
  padding-block: clamp(.55rem, 1.1vw, 1rem);
}

/* sygnatura słowna — wyłącznie typograficzna, bez sygnetu (pułapka T8) */
.znak {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45ch;
  min-height: 44px; padding-block: .35rem;
  text-decoration: none;
  color: var(--na-ciemnym-cichy);
  font-size: .96rem;
}
.znak__nazwa {
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.16rem, 1rem + .55vw, 1.55rem);
  letter-spacing: -.02em; color: var(--na-ciemnym);
  border-block-end: 2px solid var(--iskra); padding-block-end: 2px;
}
.znak__opis {
  font-size: clamp(.78rem, .72rem + .18vw, .92rem);
  letter-spacing: .03em; color: var(--na-ciemnym-cichy);
}
.znak:hover .znak__nazwa { color: var(--iskra); border-block-end-color: var(--cyjan); }

.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .1rem clamp(.15rem, 1vw, .9rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: clamp(.5em, 1vw, .9em);
  font-weight: 600; font-size: .93rem; letter-spacing: .015em;
  text-decoration: none; border-radius: var(--promień);
  color: var(--na-ciemnym-cichy);
  transition: color .18s ease, background-color .18s ease;
}
.menu__link::after {
  content: ""; position: absolute; inset-inline: clamp(.5em, 1vw, .9em);
  inset-block-end: 6px; height: 2px; background: transparent; border-radius: 2px;
}
.menu__link:hover { color: var(--na-ciemnym); background: rgba(234,243,237,.07); }
.menu__link:hover::after { background: var(--cyjan); }
.menu__link[aria-current="page"] { color: var(--na-ciemnym); background: rgba(125,242,60,.10); }
.menu__link[aria-current="page"]::after { background: var(--iskra); }

/* --- 5. HERO --------------------------------------------------------- */
.tresc { position: relative; padding: 0; counter-reset: sekcja; }

.hero {
  position: relative; overflow: clip; isolation: isolate;
  background-color: var(--graf-800);
  background-image:
    radial-gradient(120% 130% at 82% 6%, rgba(23,121,90,.55) 0%, rgba(12,29,24,0) 58%),
    radial-gradient(90% 110% at 8% 96%, rgba(11,110,124,.42) 0%, rgba(12,29,24,0) 62%),
    linear-gradient(160deg, var(--graf-900) 0%, var(--graf-800) 46%, var(--graf-700) 100%);
  color: var(--na-ciemnym);
}
.hero::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 4px; z-index: 3;
  background-image: linear-gradient(90deg, var(--iskra) 0%, var(--cyjan) 34%, rgba(23,121,90,.6) 68%, rgba(12,29,24,0) 100%);
}
.hero__przeplyw {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  color: var(--iskra);            /* mierzone przez B6 jako element nietekstowy */
  pointer-events: none;
}
/* ⚠ zasłona pod tekstem: ornament przepływu jest efektowny, ale krzywe i węzły
   przechodzące przez wiersze prozy czytają się jak błąd składu. Lewa strona hero
   dostaje więc płynny scrim, przez który ornament ledwie prześwituje; pełną moc
   ma dopiero po prawej, gdzie nie ma tekstu. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(92deg,
      rgba(7,19,16,.94) 0%, rgba(7,19,16,.90) 34%, rgba(7,19,16,.62) 56%, rgba(7,19,16,0) 78%);
}
.hero > .kontener { position: relative; z-index: 2; }
.hero__blok {
  padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2.6rem, 1.6rem + 4vw, 5.6rem);
  /* ⚠ szerokość bloku w REM, nie w EM: przy max-width w em liczonych od pisma
     akapitu blok kurczył się do ~435 px, a tytuł 100 px łamał się W ŚRODKU
     WYRAZU („przechod|zi”). Tytuł ma własny łam liczony w swoich em. */
  max-width: 54rem;
}
/* ozdobnik nad tytułem: trzy ogniwa i przewód — czysta dekoracja */
.hero__blok::before {
  content: ""; display: block; width: clamp(96px, 16vw, 190px); height: 10px;
  margin-block-end: clamp(1.4rem, 2.4vw, 2.4rem);
  background-image:
    radial-gradient(circle at 5px 5px, var(--iskra) 0 4px, transparent 4px),
    radial-gradient(circle at 26px 5px, var(--cyjan) 0 3px, transparent 3px),
    linear-gradient(90deg, transparent 0 5px, var(--iskra) 5px 26px, rgba(234,243,237,.35) 26px 100%);
  background-size: 100% 10px, 100% 10px, 100% 2px;
  background-position: 0 0, 0 0, 0 4px;
  background-repeat: no-repeat;
}

.tytul {
  margin: 0 0 clamp(1rem, .6rem + 1vw, 1.7rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.05rem, 1.1rem + 3.6vw, 3.9rem);
  line-height: 1.06; letter-spacing: -.035em;
  color: var(--na-ciemnym);
  text-wrap: balance;
  max-width: 15em;
}
.widok--strona-glowna .tytul {
  font-size: clamp(2.3rem, 1.1rem + 4.6vw, 4.8rem);
  max-width: 9.6em;
}

.hero .wprowadzenie, .hero .zajawka {
  margin: 0 0 1.1em;
  font-size: clamp(1.06rem, .98rem + .42vw, 1.3rem);
  line-height: 1.56; color: var(--na-ciemnym);
  max-width: 30em;
}
.hero .zajawka { color: var(--na-ciemnym-cichy); }
.hero__blok p { margin: 0 0 1.05em; color: var(--na-ciemnym-cichy); max-width: 33em; }
.hero__blok p:last-child { margin-block-end: 0; }
.hero__blok .wprowadzenie { color: var(--na-ciemnym); }

/* --- 6. PASMA SEKCJI -------------------------------------------------- */
.pasmo { position: relative; overflow: clip; }
.pasmo--jasny { background: var(--papier); color: var(--atrament); }
.pasmo--tint  { background: var(--papier-2); color: var(--atrament); }
.pasmo--ciemny {
  background-color: var(--graf-800);
  background-image: linear-gradient(168deg, var(--graf-700) 0%, var(--graf-800) 52%, var(--graf-900) 100%);
  color: var(--na-ciemnym);
}
.pasmo--ciemny::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px;
  background-image: linear-gradient(90deg, var(--iskra) 0%, var(--cyjan) 30%, rgba(23,121,90,.55) 64%, rgba(7,19,16,0) 100%);
}
.pasmo > .kontener {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center;
  padding-block: clamp(2.4rem, 1.4rem + 3.2vw, 5rem);
}
/* ⚠⚠ width:100% JEST KONIECZNE. Element siatki z „margin-inline:auto" traci
   rozciąganie i dostaje szerokość TREŚCI — krótki nagłówek H2 zwężał się do
   swojej długości i wychodził wyśrodkowany, czyli wcięty o 17 px wobec prozy
   (zmierzone na zrzucie 390 px). Żadna bramka tego nie widzi. */
.pasmo > .kontener > * { min-width: 0; width: 100%; max-width: var(--kolumna); margin-inline: auto; }
.pasmo > .kontener > .karty,
.pasmo > .kontener > .lista-wpisow { max-width: var(--kolumna-szeroka); }

/* numer sekcji — duża ozdobna cyfra na szynie (ornament, nie informacja) */
.pasmo--numer { counter-increment: sekcja; }
.pasmo--numer > .kontener::before {
  content: counter(sekcja, decimal-leading-zero);
  display: block; margin-block-end: .25em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 4vw, 3.4rem); line-height: .9;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--linia-cicha);
  max-width: var(--kolumna); margin-inline: auto; width: 100%;
}
.pasmo--ciemny.pasmo--numer > .kontener::before { -webkit-text-stroke-color: rgba(125,242,60,.55); }

.pasmo--indeks > .kontener > .lista-wpisow { max-width: var(--kolumna-indeks); }
@media (min-width: 1180px) {
  .pasmo > .kontener {
    grid-template-columns: var(--szyna) minmax(0, var(--kolumna));
    column-gap: var(--szyna-odstep);
  }
  .pasmo--indeks > .kontener { grid-template-columns: minmax(0, var(--kolumna-indeks)); }
  .pasmo--indeks > .kontener > * { grid-column: 1; }
  .pasmo > .kontener > * { grid-column: 2; margin-inline: 0; }
  .pasmo > .kontener > .karty,
  .pasmo > .kontener > .lista-wpisow { grid-column: 1 / -1; max-width: none; }
  .pasmo--numer > .kontener::before {
    grid-column: 1; grid-row: 1;
    justify-self: end; text-align: right;
    width: auto; max-width: none; margin: 0;
    font-size: clamp(3.2rem, 1rem + 3.4vw, 5rem);
    padding-block-start: .1em;
  }
  /* przewód łączący ogniwa: pionowa kreska biegnąca szyną */
  .pasmo--numer > .kontener::after {
    content: ""; grid-column: 1; grid-row: 1 / span 60;
    justify-self: end; align-self: stretch;
    width: 2px; margin-block-start: clamp(4.4rem, 5vw, 6.2rem);
    background-image: linear-gradient(180deg, var(--linia-cicha) 0%, rgba(122,145,137,.18) 88%, transparent 100%);
  }
  .pasmo--ciemny.pasmo--numer > .kontener::after {
    background-image: linear-gradient(180deg, rgba(125,242,60,.5) 0%, rgba(125,242,60,.10) 88%, transparent 100%);
  }
}

@media (min-width: 1400px) {
  .pasmo > .kontener { z-index: 1; }
  .pasmo--numer::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset-block: 14%; inset-inline-end: clamp(40px, 4vw, 120px);
    width: clamp(88px, 9vw, 190px);
    background-image: radial-gradient(circle at 3px 3px, var(--linia-cicha) 0 1.6px, transparent 1.7px);
    background-size: 22px 22px; opacity: .55;
  }
  .pasmo--ciemny.pasmo--numer::after {
    background-image: radial-gradient(circle at 3px 3px, rgba(125,242,60,.6) 0 1.6px, transparent 1.7px);
    opacity: .6;
  }
}

/* --- 7. TYPOGRAFIA TREŚCI --------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: 0 0 .85rem;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.42rem, 1.1rem + 1.15vw, 2.15rem);
  line-height: 1.16; letter-spacing: -.025em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
.pasmo > .kontener > h2 { padding-block-start: .1em; }
.tresc h2::after {
  content: ""; display: block; width: 3.4rem; height: 3px; margin-block-start: .55rem;
  background-image: linear-gradient(90deg, var(--wiodaca) 0%, var(--akcent) 100%);
  border-radius: 2px;
}
.tresc .pasmo--ciemny h2 { color: var(--na-ciemnym); }
.tresc .pasmo--ciemny h2::after {
  background-image: linear-gradient(90deg, var(--iskra) 0%, var(--cyjan) 100%);
}

.tresc h3 {
  margin: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem) 0 .45rem;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.08rem, 1rem + .45vw, 1.36rem);
  line-height: 1.26; letter-spacing: -.015em;
  color: var(--atrament);
}
.tresc .pasmo--ciemny h3 { color: var(--na-ciemnym); }

.tresc p { margin: 0 0 1.1em; }
.pasmo > .kontener > p:last-child { margin-block-end: 0; }
.tresc .pasmo--ciemny p { color: var(--na-ciemnym); }

.tresc p a:not(.przycisk), .tresc li a:not(.przycisk) {
  color: var(--wiodaca-ciemna); font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: 1px; text-decoration-color: var(--wiodaca);
  text-underline-offset: .2em;
}
.tresc p a:not(.przycisk):hover, .tresc li a:not(.przycisk):hover {
  color: var(--akcent); text-decoration-thickness: 2px; text-decoration-color: var(--akcent);
}
.tresc .pasmo--ciemny p a:not(.przycisk) {
  color: var(--iskra); text-decoration-color: rgba(125,242,60,.6);
}
.tresc .pasmo--ciemny p a:not(.przycisk):hover { color: var(--cyjan); text-decoration-color: var(--cyjan); }

/* --- 8. PLAKIETKA ODCZYTU (liczby i jednostki ze źródła) --------------- */
.odczyt {
  display: inline-block; white-space: nowrap;
  font-family: var(--krój-maszyna); font-weight: 600;
  font-size: .88em; letter-spacing: .01em;
  padding: .05em .5em .1em;
  border: 1px solid var(--wiodaca);
  border-radius: 5px;
  background: var(--wiodaca-jasna);
  color: var(--atrament);
}
.odczyt__j { font-size: .82em; letter-spacing: .07em; padding-inline-start: .1em; }
.pasmo--ciemny .odczyt {
  background: var(--graf-600); border-color: rgba(125,242,60,.55); color: var(--iskra);
}

/* --- 9. KARTY POJĘĆ (grupy h3) ---------------------------------------- */
/* ⚠ pułapka T10: karty rozciągane do równej wysokości rodzą martwą pustkę,
   gdy grupy różnią się długością kilkukrotnie (na podstronie 1 „Z audytu
   energetycznego" to trzy zdania, a „Z faktury za dzisiejsze paliwo" dwa
   długie akapity). Karty dostają więc własną wysokość. */
.karty {
  display: grid; gap: clamp(.9rem, .5rem + 1.1vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin: clamp(1.4rem, 1rem + 1.2vw, 2.2rem) 0 .4rem;
}
@media (min-width: 760px)  { .karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .karty--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.karta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.1rem, .8rem + 1vw, 1.7rem) clamp(1.1rem, .8rem + 1vw, 1.7rem) clamp(.9rem, .6rem + .8vw, 1.4rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promień-duzy);
  box-shadow: var(--cien-karta);
}
.karta::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px;
  background-image: linear-gradient(180deg, var(--wiodaca) 0%, var(--akcent) 100%);
}
.tresc .karta h3 { margin: 0 0 .45rem; padding-inline-start: .2rem; }
.tresc .karta p { margin: 0 0 .8em; padding-inline-start: .2rem; color: var(--atrament-cichy); font-size: .97rem; }
.tresc .karta p:last-child { margin-block-end: 0; }

.pasmo--ciemny .karta {
  background: var(--graf-600);
  border-color: var(--kresa-ciemna);
  box-shadow: var(--cien-panel);
}
.pasmo--ciemny .karta::before {
  background-image: linear-gradient(180deg, var(--iskra) 0%, var(--cyjan) 100%);
}
.tresc .pasmo--ciemny .karta p { color: var(--na-ciemnym-cichy); }

/* --- 10. ODSYŁACZ KIERUNKOWY I PRZEJŚCIA ------------------------------- */
.tresc .odsylacz {
  margin: 1.2em 0 0;
  padding: .55em 1.1em .55em 1.15em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--wiodaca);
  border-inline-start: 5px solid var(--wiodaca);
  border-radius: var(--promień);
}
.tresc .pasmo--ciemny .odsylacz, .tresc .wezel .odsylacz {
  background: rgba(234,243,237,.06);
  border-color: var(--kresa-ciemna);
  border-inline-start-color: var(--cyjan);
}
.tresc .przejscie { margin-block: 1.2em 0; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  padding-block: .3rem;
  font-weight: 700; color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--wiodaca); text-underline-offset: .25em;
}
.tresc .przejscie a:hover { color: var(--akcent); text-decoration-color: var(--akcent); }
.tresc .pasmo--ciemny .przejscie a, .tresc .wezel .przejscie a {
  color: var(--iskra); text-decoration-color: rgba(125,242,60,.6);
}
.tresc .pasmo--ciemny .przejscie a:hover, .tresc .wezel .przejscie a:hover {
  color: var(--cyjan); text-decoration-color: var(--cyjan);
}
.tresc li > a:only-child {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: .2rem;
}

/* --- 11. PRZYCISK ------------------------------------------------------ */
.tresc .cta { margin-block: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem) 0; }
/* ⚠⚠ selektor musi dorównać `.tresc .przejscie a` (0-2-1), inaczej przycisk
   traci margines wewnętrzny — akapit ma obie klasy naraz (cta + przejscie). */
.przycisk, .tresc a.przycisk, .tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 56px; padding: .8rem 1.9rem;
  background-image: linear-gradient(135deg, var(--wiodaca-ciemna) 0%, #0C6244 100%);
  background-color: var(--wiodaca-ciemna);
  color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca-ciemna); border-radius: 999px;
  font-family: var(--krój-tekst); font-weight: 700; font-size: 1.03rem; letter-spacing: .005em;
  text-decoration: none;
  box-shadow: 0 14px 30px -16px rgba(10,81,56,.9);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.przycisk:hover, .tresc a.przycisk:hover {
  background-image: none; background-color: var(--akcent);
  border-color: var(--akcent); color: var(--na-akcencie);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -16px rgba(11,110,124,.9);
}
/* przycisk na ciemnym panelu — elektryczna limonka, napis grafitowy */
.tresc .pasmo--ciemny a.przycisk, .tresc .wezel a.przycisk,
.tresc .hero a.przycisk, .tresc .hero .przejscie a.przycisk {
  background-image: linear-gradient(135deg, var(--iskra) 0%, #63D93A 100%);
  background-color: var(--iskra);
  color: var(--graf-900); border-color: var(--iskra);
  box-shadow: 0 16px 34px -16px rgba(125,242,60,.65);
}
.tresc .pasmo--ciemny a.przycisk:hover, .tresc .wezel a.przycisk:hover,
.tresc .hero a.przycisk:hover {
  background-image: none; background-color: var(--cyjan);
  border-color: var(--cyjan); color: var(--graf-900);
}
.tresc .hero .cta { margin-block-start: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); }
.tresc .hero .przejscie a:not(.przycisk), .tresc .hero p a:not(.przycisk) { color: var(--iskra); text-decoration-color: rgba(125,242,60,.6); }
.tresc .hero p a:not(.przycisk):hover { color: var(--cyjan); text-decoration-color: var(--cyjan); }

/* --- 12. WĘZEŁ KOŃCOWY (panel domykający widok) ------------------------ */
.wezel {
  position: relative; overflow: clip;
  background-color: var(--graf-900);
  background-image:
    radial-gradient(90% 140% at 88% 10%, rgba(11,110,124,.42) 0%, rgba(7,19,16,0) 60%),
    linear-gradient(150deg, var(--graf-800) 0%, var(--graf-900) 70%);
  color: var(--na-ciemnym);
}
.wezel::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px;
  background-image: linear-gradient(90deg, rgba(7,19,16,0) 0%, rgba(23,121,90,.6) 30%, var(--cyjan) 68%, var(--iskra) 100%);
}
.wezel > .kontener {
  position: relative;
  display: grid; justify-content: center;
  padding-block: clamp(2.4rem, 1.6rem + 3vw, 4.6rem);
}
.wezel > .kontener > * { min-width: 0; max-width: var(--kolumna); margin-inline: auto; width: 100%; }
@media (min-width: 1180px) {
  .wezel > .kontener {
    grid-template-columns: var(--szyna) minmax(0, var(--kolumna));
    column-gap: var(--szyna-odstep);
  }
  .wezel > .kontener > * { grid-column: 2; margin-inline: 0; }
}
.wezel .cta { margin-block-start: 0; }
.tresc .wezel .odsylacz { width: fit-content; max-width: 100%; }

/* --- 13. LISTA WPISÓW -------------------------------------------------- */
.lista-wpisow {
  margin: clamp(1.6rem, 1.1rem + 1.6vw, 2.8rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.7rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px)  { .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zapowiedz {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.2rem, .9rem + 1vw, 1.8rem) clamp(1.2rem, .9rem + 1vw, 1.8rem) clamp(1rem, .7rem + .9vw, 1.5rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promień-duzy);
  box-shadow: var(--cien-panel);
}
.zapowiedz::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px;
  background-image: linear-gradient(180deg, var(--iskra) 0%, var(--cyjan) 55%, var(--wiodaca) 100%);
}
.zapowiedz::after {
  content: ""; position: absolute; inset-block-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  inset-inline-end: clamp(1rem, .8rem + .8vw, 1.5rem);
  width: 34px; height: 8px;
  background-image:
    radial-gradient(circle at 4px 4px, var(--wiodaca) 0 3px, transparent 3px),
    linear-gradient(90deg, transparent 0 4px, var(--linia-cicha) 4px 100%);
  background-size: 100% 8px, 100% 2px;
  background-position: 0 0, 0 3px; background-repeat: no-repeat;
}
.tresc .zapowiedz__tytul {
  margin: 0 0 .55rem; padding: 0 2.4rem .1rem .3rem; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .42vw, 1.34rem); line-height: 1.24;
  letter-spacing: -.02em; color: var(--wiodaca-ciemna);
}
.tresc .zapowiedz__tytul::after, .tresc .zapowiedz__tytul::before { content: none; }
/* ⚠ pułapka specyficzności: „.tresc li a:not(.przycisk)" (0-2-2) bije
   „.tresc .zapowiedz__tytul a" (0-2-1), więc tytuły kart w indeksie wpisów
   dostawały podkreślenie prozy. Prefiks pasma wyrównuje wagę. */
.tresc .zapowiedz .zapowiedz__tytul a,
.tresc .pasmo--ciemny .zapowiedz__tytul a { text-decoration: none; }
.tresc .zapowiedz .zapowiedz__wiecej a,
.tresc .pasmo--ciemny .zapowiedz__wiecej a { text-decoration: none; }
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--wiodaca-ciemna); text-decoration: none; font-weight: 700;
}
.tresc .zapowiedz__tytul a:hover { color: var(--akcent); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1.1rem; padding-inline-start: .3rem; color: var(--atrament-cichy); font-size: .97rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; padding-inline-start: .3rem; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  padding-inline: 0; text-decoration: none;
  color: var(--wiodaca-ciemna); font-weight: 700;
  border-block-end: 2px solid var(--wiodaca);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--akcent); border-block-end-color: var(--akcent); }

/* --- 14. STOPKA -------------------------------------------------------- */
.stopka {
  position: relative; overflow: clip;
  background-color: var(--graf-900);
  background-image: linear-gradient(120deg, var(--graf-900) 0%, #091A15 58%, var(--graf-700) 100%);
  color: var(--na-ciemnym);
}
.stopka::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px;
  background-image: linear-gradient(90deg,
      var(--iskra) 0%, var(--iskra) 12%,
      var(--cyjan) 12%, var(--cyjan) 22%,
      rgba(23,121,90,.8) 22%, rgba(23,121,90,.8) 55%,
      rgba(234,243,237,.16) 55%, rgba(234,243,237,.16) 100%);
}
.stopka__fala {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 0;
  width: 100%; height: clamp(70px, 9vw, 130px);
  color: var(--iskra); pointer-events: none;
}
.stopka__pas {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .9rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.4rem) clamp(2.6rem, 1.6rem + 3vw, 4.6rem);
}
.stopka__znak {
  margin: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45ch;
  color: var(--na-ciemnym-cichy); font-size: .96rem;
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.4rem, 1.6vw, 1.4rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: .45em; border-radius: var(--promień);
  text-decoration: none;
  color: var(--na-ciemnym-cichy); font-weight: 600; font-size: .93rem;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--iskra); border-block-end-color: var(--iskra); }

/* --- 15. ARKUSZ SYSTEMU (specimen.html) -------------------------------- */
.próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 1.4rem 0 2rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia); border-radius: var(--promień);
  background: var(--papier-karta); padding: 0; overflow: hidden;
}
.próbka__pole { display: block; height: 74px; }
.próbka__opis {
  display: block; padding: .7rem .9rem;
  font-family: var(--krój-maszyna); font-size: .8rem;
  color: var(--atrament); line-height: 1.5;
}
.wyliczenie { margin: 0 0 1.3em; padding: 0; list-style: none; }
.wyliczenie li { position: relative; padding-inline-start: 1.9em; margin-block-end: .6em; }
.wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .58em; inset-inline-start: 0;
  width: 1.1em; height: 0; border-block-start: 2px solid var(--wiodaca);
}
.wyliczenie li::after {
  content: ""; position: absolute; inset-block-start: .35em; inset-inline-start: 1.05em;
  width: .45em; height: .45em; border-radius: 50%; background: var(--akcent);
}
.kroki { margin: 0 0 1.5em; padding: 0; list-style: none; counter-reset: krok; }
.kroki li {
  counter-increment: krok; position: relative;
  padding: .6em 0 .6em 3.2em;
  border-block-end: 1px solid var(--linia-cicha);
}
.kroki li:last-child { border-block-end: 0; }
.kroki li::before {
  content: counter(krok, decimal-leading-zero); position: absolute;
  inset-inline-start: 0; inset-block-start: .5em;
  width: 2.2em; height: 2.2em;
  display: grid; place-items: center;
  background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  border: 1px solid var(--wiodaca); border-radius: 50%;
  font-family: var(--krój-maszyna); font-weight: 700; font-size: .78em;
}
.wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.7rem);
  background: var(--graf-800);
  border: 1px solid var(--wiodaca);
  border-inline-start: 5px solid var(--iskra);
  border-radius: var(--promień);
  font-family: var(--krój-maszyna);
  font-size: clamp(.8rem, .76rem + .22vw, .94rem);
  line-height: 1.9; letter-spacing: .01em;
  color: var(--na-ciemnym);
}

/* --- 16. RUCH I DRUK --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .przycisk:hover, .tresc a.przycisk:hover { transform: none; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; }
  .hero, .pasmo--ciemny, .wezel, .naglowek, .stopka {
    background: #FFFFFF !important; color: #000000 !important;
  }
  .hero__przeplyw, .stopka__fala { display: none !important; }
  .tytul, .tresc h2, .tresc h3, .tresc p, .znak__nazwa, .znak__opis { color: #000000 !important; }
  .pasmo > .kontener > * { max-width: none; }
  a { color: #000000; }
}

/* --- 17. LISTA WPISÓW: pozycje siatki i wariant ciemny ----------------- */
.lista-wpisow > li { display: flex; min-width: 0; }
.lista-wpisow > li > .zapowiedz { flex: 1 1 auto; }
.pasmo--ciemny .zapowiedz {
  background: var(--graf-600);
  border-color: var(--kresa-ciemna);
  box-shadow: var(--cien-panel);
}
.pasmo--ciemny .zapowiedz::after {
  background-image:
    radial-gradient(circle at 4px 4px, var(--iskra) 0 3px, transparent 3px),
    linear-gradient(90deg, transparent 0 4px, rgba(234,243,237,.35) 4px 100%);
}
.tresc .pasmo--ciemny .zapowiedz__tytul { color: var(--na-ciemnym); }
.tresc .pasmo--ciemny .zapowiedz__tytul a { color: var(--na-ciemnym); }
.tresc .pasmo--ciemny .zapowiedz__tytul a:hover { color: var(--iskra); }
.tresc .pasmo--ciemny .zapowiedz__tekst { color: var(--na-ciemnym-cichy); }
.tresc .pasmo--ciemny .zapowiedz__wiecej a { color: var(--iskra); border-block-end-color: var(--iskra); }
.tresc .pasmo--ciemny .zapowiedz__wiecej a:hover { color: var(--cyjan); border-block-end-color: var(--cyjan); }

/* --- 18. SKALA POWYŻEJ 1366 px ---------------------------------------- */
/* ⚠⚠ Wada zmierzona 2026-08-31 (Playwright, file://index.html): przy 1920
   najszerszy moduł TREŚCI kończył się na 1119 px i zostawiał 96 px marginesu
   z lewej, a 705 px z prawej — kompozycja jednostronna, strona rosła wolniej
   niż ekran.

   Przyczyną NIE było podwójne wcięcie kontenera (sprawdzone: .kontener ma
   wyłącznie padding-inline, bez własnej max-width — marginesu jest raz).
   Przyczyną były kolumny liczone w rem: hero miał sztywne 54rem, a pasma
   13rem szyny + 36rem prozy, więc powyżej ~1300 px cała nadwyżka szerokości
   zamieniała się w puste pole po prawej.

   Naprawa oddaje odzyskaną szerokość TREŚCI, nie marginesowi:
     • hero rozkłada się na dwie kolumny — tytuł obok kolumny tekstu,
     • pasma dostają czwartą, zewnętrzną kolumnę na ornament (proza zostaje
       dokładnie tam, gdzie była — nie wolno jej rozciągać),
     • siatki kart i indeks wpisów wychodzą z szerokości prozy na pasmo,
     • węzeł końcowy układa przycisk i odsyłacz obok siebie.
   ⚠ Proza ma zostać w 640–840 px: kolumna tekstu hero jest ZAWĘŻONA do 32rem,
     a --kolumna (36rem) nietknięta. Rozciągnięcie prozy byłoby osobną wadą. */

@media (min-width: 1400px) {

  /* 18.1 HERO — tytuł po lewej, kolumna tekstu po prawej -------------- */
  .hero__blok {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    column-gap: clamp(2.6rem, 3.6vw, 5.4rem);
    align-content: start;
  }
  /* ⚠ pułapka: ::before rodzica JEST elementem siatki. Ornament zostawiony
     na .hero__blok zająłby własną komórkę i rozpychał pierwszy wiersz kolumny
     tekstu (akapit startowałby kilkaset px niżej niż tytuł). Ornament wędruje
     więc do wnętrza tytułu, gdzie nie bierze udziału w rozstawianiu siatki. */
  .hero__blok::before { display: none; }
  .hero__blok > .tytul::before {
    content: ""; display: block; width: clamp(96px, 16vw, 190px); height: 10px;
    margin-block-end: clamp(1.4rem, 2.4vw, 2.4rem);
    background-image:
      radial-gradient(circle at 5px 5px, var(--iskra) 0 4px, transparent 4px),
      radial-gradient(circle at 26px 5px, var(--cyjan) 0 3px, transparent 3px),
      linear-gradient(90deg, transparent 0 5px, var(--iskra) 5px 26px, rgba(234,243,237,.35) 26px 100%);
    background-size: 100% 10px, 100% 10px, 100% 2px;
    background-position: 0 0, 0 0, 0 4px;
    background-repeat: no-repeat;
  }
  .hero__blok > * { grid-column: 2; }
  /* tytuł przechodzi przez wszystkie wiersze kolumny tekstu, więc nie wiąże
     swojej wysokości z wysokością pierwszego akapitu */
  .hero__blok > .tytul { grid-column: 1; grid-row: 1 / span 40; align-self: start; }

  /* kreska rozdzielająca kolumny — echo szyny; rysowana tłem, bo obie kolumny
     są zbiorami elementów, nie jednym pudełkiem, które mogłoby dostać obwódkę */
  .hero__blok:has(> p) {
    background-image: linear-gradient(rgba(234,243,237,.16), rgba(234,243,237,.16));
    background-size: 1px 100%;
    background-position: right calc(32rem + clamp(1.3rem, 1.8vw, 2.7rem)) center;
    background-repeat: no-repeat;
  }

  /* kolumna tekstu jest węższa niż dawny blok na całą szerokość hero, więc
     wiodące akapity dostają mniejszy stopień — inaczej wychodzi 45 znaków */
  .hero .wprowadzenie, .hero .zajawka {
    font-size: clamp(1.02rem, .94rem + .3vw, 1.2rem);
  }

  /* ⚠ zasłona: tekst sięga teraz prawej krawędzi kontenera, więc ornament
     przepływu musi być przygaszony na całej szerokości, a nie tylko po lewej.
     Pełną moc zachowuje wyłącznie skrajny brzeg poza kolumną tekstu. */
  .hero::before {
    background-image: linear-gradient(94deg,
        rgba(7,19,16,.96) 0%, rgba(7,19,16,.93) 42%, rgba(7,19,16,.88) 74%,
        rgba(7,19,16,.78) 92%, rgba(7,19,16,.50) 100%);
  }

  /* 18.2 PASMA — czwarta, zewnętrzna kolumna --------------------------- */
  /* ⚠ Kolumna prozy zostaje szeroka na --kolumna (36rem) — rozciągnięcie jej
     byłoby osobną wadą. Zmienia się tylko to, co jest wokół: pasma dostają
     zewnętrzną kolumnę na ornament, a siatki mogą z prozy wyjść.
     Zewnętrzne tory są NIERÓWNE (0,5fr : 1fr), bo szyna z numerem wisi po
     lewej stronie prozy: przy równych torach środkowała się grupa
     szyna+proza, a sama kolumna tekstu wypadała o ~170 px za bardzo w prawo. */
  .pasmo > .kontener {
    grid-template-columns:
      minmax(0, .5fr) var(--szyna) minmax(0, var(--kolumna)) minmax(0, 1fr);
  }
  .pasmo > .kontener > * { grid-column: 3; }
  .pasmo--numer > .kontener::before { grid-column: 2; }
  .pasmo--numer > .kontener::after  { grid-column: 2; }
  /* Dwie karty wyrównują się do lewej krawędzi prozy i wychodzą w prawo;
     od trzech kart siatka bierze całą szerokość kontenera (marginesy równe). */
  .pasmo > .kontener > .karty,
  .pasmo > .kontener > .lista-wpisow { grid-column: 3 / -1; }
  .pasmo > .kontener > .karty:has(> :nth-child(3)) { grid-column: 1 / -1; }

  /* ⚠ liczba kolumn musi wynikać z liczby kart, nie z jednej stałej. Klasa
     .karty--3 nigdy nie została użyta w widokach, więc trójka kart siedziała
     w siatce dwukolumnowej i trzecia karta zostawała sierotą obok pustego
     pola — na szerszym pasmie widać to natychmiast. */
  .karty:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* indeks wpisów bierze całą szerokość kontenera */
  .pasmo--indeks > .kontener { grid-template-columns: minmax(0, 1fr); }
  .pasmo--indeks > .kontener > * { grid-column: 1; }
  .pasmo--indeks > .kontener > .lista-wpisow { grid-column: 1; }

  /* 18.3 WĘZEŁ — przycisk i odsyłacz obok siebie ----------------------- */
  .wezel > .kontener {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    column-gap: clamp(2.4rem, 4vw, 5.6rem); row-gap: 1.1rem;
  }
  .tresc .wezel > .kontener > * {
    width: auto; max-width: min(100%, var(--kolumna)); margin-block: 0;
  }
}

@media (min-width: 1600px) {
  /* ornament siatki punktów przenosi się do zewnętrznej kolumny i rośnie —
     przy węższych ekranach wchodziłby na prozę */
  .pasmo--numer::after {
    inset-block: 12%;
    inset-inline-end: clamp(56px, 5vw, 150px);
    width: clamp(110px, 11vw, 240px);
  }
}

@media (min-width: 1760px) {
  /* czterokartowe siatki rozkładają się na cztery kolumny; pełną szerokość
     kontenera mają już od 1400 px, ale czterokolumnowy układ czeka aż tutaj,
     bo wcześniej dawałby 29 znaków w wierszu karty */
  .karty:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .karty:has(> :nth-child(4)) .karta {
    padding-inline: clamp(1rem, .7rem + .8vw, 1.45rem);
  }
}