. Sama klasa `.przycisk` ma
0-1-0 i przegrywa mimo pozycji nizej, wiec przycisk dostawal `padding: .3rem 0`
i `min-height: 44px` zamiast `.7rem 1.6rem` i 52 px — NAPIS DOTYKAL RAMKI
(zmierzone na 3 domenach: 0–4 px odstepu zamiast ~30 px). Wada byla we
WSZYSTKICH 143 makietach od poczatku serii i zadna bramka jej nie widziala. */
.przycisk, .tresc a.przycisk {
display: inline-flex; align-items: center; justify-content: center;
min-height: 52px; padding: .7rem 1.6rem;
background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
border: 1px solid var(--wiodaca-ciemna); border-radius: var(--promień);
font-weight: 700; font-size: 1.02rem; letter-spacing: .01em;
text-decoration: none;
box-shadow: 3px 3px 0 var(--wiodaca-jasna);
}
.przycisk:hover { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie); box-shadow: 3px 3px 0 var(--tlo-2); }
/* ⚠ pułapka „.proza a bije .przycisk" — tekst przycisku znikał */
.tresc p a.przycisk { color: var(--na-wiodacej); text-decoration: none; }
/* --- 11. LISTA WPISÓW ------------------------------------------------ */
.lista-wpisow {
margin: clamp(1.8rem, 1.2rem + 1.6vw, 3rem) 0 0; padding: 0; list-style: none;
display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.8rem);
}
@media (min-width: 900px) { .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zapowiedz { display: flex; flex-direction: column; padding: clamp(1.1rem, .8rem + 1vw, 1.7rem); background: var(--papier-karta); border: 1px solid var(--linia-cicha); border-radius: var(--promień); box-shadow: 4px 4px 0 var(--wiodaca-jasna); }
/* ⚠ tytuł karty JEST nagłówkiem h2, więc łapią go wszystkie reguły „.tresc h2"
(0-1-1) — obwódka, gzyms i kreska sekcji pojawiały się w środku karty.
Klasa sama (0-1-0) tego nie cofnie; potrzebny ten sam prefiks. */
.tresc .zapowiedz__tytul {
margin: 0 0 .5rem; padding: 0; border: 0; max-width: none; background: none;
font-family: var(--krój-naglowek);
font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); line-height: 1.28;
}
.tresc .zapowiedz__tytul::after, .tresc .zapowiedz__tytul::before { content: none; }
/* ⚠ specyficzność: „.tresc li a" (0-1-2) bije „.zapowiedz__tytul a" (0-1-1),
więc tytuł karty dostawał podkreślenie prozy. Prefiks wyrównuje wagę. */
.tresc .zapowiedz__tytul a {
display: block; min-height: 44px;
color: var(--wiodaca-ciemna); text-decoration: none;
}
.tresc .zapowiedz__tytul a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1rem; color: var(--atrament-cichy); font-size: .98rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
display: inline-flex; align-items: center; min-height: 44px;
padding-inline: .1rem; 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); }
/* --- 12. STOPKA ------------------------------------------------------ */
.stopka {
background: var(--tlo-2);
border-block-start: 1px solid var(--linia);
padding-block: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}
.stopka .kontener {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: .8rem clamp(1rem, 3vw, 3rem);
}
.stopka__znak {
margin: 0; font-family: var(--krój-naglowek); font-weight: 700;
font-size: 1.05rem; color: var(--atrament); letter-spacing: .01em;
}
.stopka__menu ul {
display: flex; flex-wrap: wrap; gap: .2rem clamp(.6rem, 2vw, 1.8rem);
margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
display: inline-flex; align-items: center; min-height: 44px; /* B7 */
padding-inline: .2em; text-decoration: none;
color: var(--atrament-cichy); font-weight: 700; font-size: .95rem;
border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--wiodaca-ciemna); border-block-end-color: var(--wiodaca); }
/* --- 13. 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-cicha); 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: .82rem;
color: var(--atrament); line-height: 1.5;
}
/* --- 13B. SZEROKIE EKRANY — SIATKA REDAKCYJNA Z SZYNĄ NAGŁÓWKÓW -------
Wstawić DOKŁADNIE między pusty wiersz 457 (koniec sekcji 13) a wiersz 458,
czyli tuż przed nagłówek sekcji 14 „RUCH I DRUK". Powód miejsca: blok musi stać PO
regułach szerokości komponentów (234–236, 386–387, 389, 394), bo wygrywa
z nimi KOLEJNOŚCIĄ przy tej samej specyficzności 0-2-0 — bez !important
i bez podbijania wagi — a jednocześnie PRZED @media print, którego wiersz
„.tresc .kontener > * { max-width: none }" ma zostać ostatnim słowem druku.
⚠ W CAŁYM BLOKU NIE MA ANI JEDNEGO ZNAKU PROCENTU — łącznie z komentarzami.
To celowe: szablon WSPOLNE jest formatowany operatorem modulo, więc każdy
literalny znak procentu trzeba by podwoić, a niezdublowany znak procentu
przed nawiasem wysadza generator na wszystkich 138 domenach naraz. Blok nie
wprowadza też żadnego nowego tokenu podstawienia, więc słownik `dane`
(wiersze 657–689 motyw.py) zostaje bez zmian. Szerokości podane niżej jako
„1fr" są jednostkami siatki, nie ułamkami procentowymi.
CO TO JEST. Dziś przy 1920 px każdy blok treści ma 704 px (34rem × korzeń
20,72 px), a po bokach stoi po 608 px pustki. Kontener ma przy tym pełne
1728 px i to on — nie kolumna — jest właściwą miarą makiety. Ta łatka NIE
rozciąga prozy (34rem to już sufit dla krojów wąskich, ~79 znaków — patrz
komentarz przy --kolumna). Zamiast tego zamienia kontener w trzytorową
siatkę redakcyjną:
[pelna-start] szyna 1fr [tekst-start] 34rem [tekst-end] 1fr [pelna-end]
nagłówki proza moduły + ozdobnik
Powyżej progu nagłówki h2/h3 schodzą do LEWEJ SZYNY i stają OBOK swojej
prozy, tytuł rozpina się na całą ramkę, a bloki modułowe (karty, wykazy,
kroki, odsyłacze, schematy) wychodzą w PRAWO poza kolumnę tekstu. Powstają
trzy powtarzalne krawędzie pionowe zamiast jednej: lewa krawędź ramki
(tytuł + wszystkie nagłówki), lewa krawędź prozy (proza + wszystkie moduły)
i prawa krawędź ramki (tytuł, karty, ozdobnik). To jest różnica między
„kartką pośrodku ekranu" a układem, w którym widać rusztowanie.
⭐⭐ PROZA NIE DRGA — TO NIE JEST OSZCZĘDNOŚĆ, TYLKO WARUNEK BEZPIECZEŃSTWA.
Przy symetrycznych torach 1fr wolna przestrzeń dzieli się po równo, a
column-gap wchodzi po obu stronach kolumny, więc lewa krawędź prozy wypada
dokładnie tam, gdzie dziś: margines + (wnętrze − 34rem) / 2. Przy 1920 to
607,76 px z obu stron — CO DO PIKSELA tyle, co przy „margin-inline: auto".
Skutek: wszystkie trzy warunki bramki B13 (pismo rośnie, kolumna rośnie
639 -> 704 px, kompozycja nie jest jednostronna) mierzą po łatce dokładnie
te same liczby co przed nią, a ozdobnik zakotwiczony formułą
calc(50pct + var(--kolumna) / 2 + 1.5rem) nadal zaczyna się 31 px ZA prozą,
więc B13c też się nie rusza. Łatka nie dotyka kontraktu żadnej bramki.
⚠ NIE ZMIENIAĆ tych trzech rzeczy przy późniejszych poprawkach:
1. tory boczne muszą zostać SYMETRYCZNE (1fr | 1fr). Szersza szyna prawa
to natychmiastowa czerwień B13 warunek 3 (prawy margines > 150 px
i > 2,5 × lewy). Szersza szyna lewa jest formalnie dozwolona, ale
przesuwa prozę spod ozdobnika i wymaga przeliczenia B13c.
2. środkowy tor musi zostać w rem (minmax(0, var(--kolumna))). Każde
„max-width: 680px" albo „min(34rem, 680px)" daje tę samą liczbę przy
1366 i 1920, czyli czerwień B13 warunek 2.
3. row-gap MUSI być zerowy. Nagłówek w szynie rozkłada swoją nadwyżkę
wysokości na 40 wierszy siatki; przy niezerowym row-gap te puste
wiersze przestają mieć zerową wysokość i między akapitami otwiera się
czterdzieści szczelin.
⚠ ŁATKA JEST CZYSTO CSS-OWA I MUSI TAKA ZOSTAĆ. Wstawienie choćby jednego
opakowującego między .kontener a akapity: (a) łamie B1 (treść 1:1)
i B10 (nagłówek identyczny), (b) unieważnia selektor sondy B13
„main .kontener > p", która spada wtedy na ścieżkę awaryjną „main p",
trafia na blogu w akapit KARTY i melduje fałszywą czerwień „kolumna nie
rośnie". Cały układ stoi na płaskim DOM-ie: main.tresc > div.kontener >
14 rodzajów bezpośrednich dzieci, i na niczym więcej.
--------------------------------------------------------------------- */
:root {
/* rowek między szyną a prozą. ⭐ Wchodzi jako column-gap, NIE jako padding
nagłówka — padding-inline-end zderzyłby się ze skrótem `padding` wariantu
H2 „plakietka" (0-1-1 kontra 0-2-1) i zrobiłby z plakietki prostokąt
z asymetrycznym marginesem wewnętrznym. Jako gap nie dotyka żadnego
z czterech wariantów H2 ani czterech wariantów TYTUŁU. */
--rowek: clamp(1.2rem, 2.2vw, 2.6rem);
/* ⚠⚠ POPRAWKA v2 — REKOMPENSATA PRZEZ ODJĘCIE BYŁA BŁĘDNA I ZMIERZONA.
Marginesy sąsiadów nie sklejają się w siatce, więc odstęp = dolny margines
poprzednika + górny następnika. Pierwsza wersja próbowała to wyrównać
tokenem „dzisiejszy odstęp minus 1.05em" — co jest poprawne WYŁĄCZNIE
wtedy, gdy poprzednikiem jest akapit prozy. Pomiar adreswanglii.pl/index
przy 1366 px: przed h2 stoi p.odsylacz.przejscie z dolnym marginesem
1.7em = 31,9 px, więc odstęp wychodził 31,9 + 37,3 = 69 px zamiast 57 px,
a cała strona rosła o 122 px WZGLĘDEM DZISIEJSZEJ (6 z 14 zmierzonych
widoków było wyższych niż baza).
Rozwiązanie v2 jest odwrotne i dokładne: ZERUJEMY DOLNY MARGINES
POPRZEDNIKA (reguła w 13B.4), a tokeny mają PEŁNE wartości bazowe —
identyczne z „.tresc h2" i „.tresc h3" w arkuszu. Wtedy odstęp = górny
margines następnika, czyli dokładnie ta liczba, którą dawało sklejanie. */
--odstep-sekcji: clamp(2.4rem, 1.6rem + 2vw, 3.8rem);
--odstep-podsekcji: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem);
/* ⚠⚠ ODSTĘP POD ŚRÓDTYTUŁEM ≠ ODSTĘP NAD NIM (poprawka P-17, 2026-09-04).
W przepływie (poniżej progu szyny) h3 ma `margin: 0 .5rem`, czyli
proporcję ok. 5:1 — i dlatego nagłówek WIĄŻE SIĘ ze swoim akapitem.
W siatce szyny reguła `> h3 + *` dawała następnikowi --odstep-podsekcji,
czyli DOKŁADNIE TYLE SAMO, ile h3 ma nad sobą. Zmierzone renderem:
1366 px (przepływ): nad 42 px / pod 9 px → poprawnie
1500 px (szyna): nad 44 px / pod 44 px → nagłówek wisi w powietrzu
1920 px (szyna): nad 52 px / pod 52 px → to samo
Ten token przywraca w szynie tę samą proporcję, którą ma przepływ. */
--odstep-po-podsekcji: .5rem;
}
/* === 13B.1 PODWOZIE — próg 1200 px =================================== */
/* ⚠ „screen and": poniżej progu makieta ma wyglądać co do piksela jak dziś
(telefon, tablet i laptop 1024 — bramki B5, B7, B1c i B5b nie mają prawa
drgnąć), a arkusz druku ma dalej kończyć się na własnym „max-width: none".
Bez „screen and" siatka weszłaby też do @media print, gdyby strona była
drukowana na arkuszu szerszym niż 1200 px. */
@media screen and (min-width: 1200px) {
.tresc .kontener {
display: grid;
/* Nazwane linie zamiast numerów, bo to JEDYNY sposób, żeby płaskie
rodzeństwo (h2, p, ul, ol, article) przydzielać do torów regułą per
klasa, bez opakowań w HTML. minmax(0, …) w każdym torze, bo bez
dolnego zera tor przyjmuje rozmiar min-content najdłuższego tokenu
(„PL.ZIPOP.1393.PP.3019011.1991", 29 znaków bez miejsca łamania)
i rozpycha widok — czyli czerwień B5. */
grid-template-columns:
[pelna-start] minmax(0, 1fr)
[tekst-start] minmax(0, var(--kolumna))
[tekst-end] minmax(0, 1fr) [pelna-end];
/* row-gap 0 — patrz warunek 3 w nagłówku bloku. */
gap: 0 var(--rowek);
}
/* ⚠⚠ POPRAWKA v2 — OŚ OZDOBNIKA. Ozdobnik układów „pole" (30 makiet)
i „siatka" (13) jest zakotwiczony formułą calc(polowa + var(--kolumna)/2
+ 1.5rem), czyli do prawej krawędzi WYŚRODKOWANEJ prozy — 1343 px przy
1920. Łatka rozpycha bloki poza tę oś, więc tekst zaczyna leżeć na
fakturze: zmierzone sondą zasięgu wierszy (Range.getClientRects) 34
elementy w 18 z 21 widoków, przy zerze w bazie. Bramka B13c tego NIE
WIDZI, bo porównuje oś z prawą krawędzią akapitu wzorcowego (1312 px),
a nie z najszerszym blokiem — czyli świeci zielono przy 218 px zachodzenia.
Podmieniamy pseudoelementowi WŁASNĄ wartość --kolumna tak, żeby ta sama
formuła wypadła na prawej krawędzi bloków modułowych (46rem od tekst-start):
polowa + K/2 + 1.5rem = polowa + 34rem/2 + 46rem => K = 55rem
⭐ Miara w rem, nie w procentach — łatka nadal nie zawiera ANI JEDNEGO
znaku procentu, więc wchodzi do szablonu motyw.py dosłownie.
⚠ Podmiana działa wyłącznie na pseudoelemencie (własność własna bije
dziedziczoną): proza, tytuł i wszystkie inne reguły dalej widzą 34rem,
a bramka B13c dostaje oś 1561 px wobec prozy kończącej się na 1312 px —
zapas rośnie z 31 px do 249 px. */
.tresc::after { --kolumna: 55rem; }
/* Baza: WSZYSTKO ląduje w torze prozy i zachowuje dzisiejszą szerokość.
Ta reguła kasuje „max-width: var(--kolumna); margin-inline: auto"
z wiersza 234 — o szerokości decyduje teraz tor, nie ograniczenie
elementu. Równa specyficzność (0-2-0), wygrywa kolejność. */
.tresc .kontener > * {
grid-column: tekst-start / tekst-end;
max-width: none;
margin-inline: 0;
/* ⚠ domyślne min-width elementu siatki to auto, czyli min-content —
jedno długie słowo rozpycha wtedy tor mimo minmax(0,…). */
min-width: 0;
}
/* ⚠ te dwa mają WŁASNE reguły max-width o specyficzności 0-3-0
(wiersze 235–236), których reguła „> *" (0-2-0) nie zdejmie. */
.tresc .kontener > .lista-wpisow,
.tresc .kontener > .próbki { max-width: none; }
/* --- 13B.2 KTO WYCHODZI POZA KOLUMNĘ PROZY ------------------------- */
/* TYTUŁ NA CAŁĄ RAMKĘ — winieta widoku.
⚠ To jest ten jeden blok, który świadomie NIE dzieli lewej krawędzi z prozą,
i trzeba wiedzieć dlaczego to nie jest wada „dwóch lewych krawędzi" opisana
przy --kolumna-szeroka. Tam nagłówek sekcji stał w kolumnie 34rem, a rząd
kart uciekał do krawędzi paska i tytuł przestawał stać nad tym, co nazywa.
Tu jest odwrotnie: krawędź tytułu to krawędź RAMKI, a tę samą krawędź mają
już dziś sygnatura w pasku nagłówka i sygnatura w stopce (oba .kontener mają
to samo padding-inline: var(--margines) i NIE są objęte regułą z wiersza 234).
Tytuł dostaje więc krawędź powtórzoną trzy razy na stronie, a powyżej 1500 px
dokłada się do niej czwarte powtórzenie — szyna nagłówków.
⭐ To zarazem blok, który sonda pomiarowa widzi jako najszerszy element
treści: 1728 px przy marginesie 96 px z obu stron przy oknie 1920 (kontener
ma pełne 1920 px i wypada z pomiaru przez warunek „szerokość >= okno − 2").
Precedens w serii: przewodnikgietrzwald.pl ma w pomiar-skali-final.tsv
dokładnie „tytul / 1728 / 96 / 96". Wariant TYTUŁU dostaje przy okazji
pełnowymiarową kreskę: „podkreslenie" ciągnie linię przez całą ramkę,
„gzyms" kładzie na niej gzyms, „pion" i „rog" siadają na jej lewym końcu. */
.tresc .kontener > .tytul { grid-column: pelna-start / pelna-end; }
/* Odsyłacze kierunkowe i przyciski (p.cta.przejscie, p.odsylacz.przejscie
i goły p.przejscie — 1935 sztuk w serii). Powód nie jest dekoracyjny:
etykieta do 66 znaków przy stopniu 1.02rem łamała się w kolumnie 704 px
na dwa wiersze i przycisk rósł w dół zamiast w bok.
⚠ 46rem, nie „do końca ramki": pas o szerokości 1216 px z czterdziestoma
znakami przy lewej krawędzi to nie jest moduł, tylko rozjechany akapit.
Miara MUSI być w rem — w px zamarłaby i to jest dokładnie ten kształt,
który B13 warunek 2 uznaje za „układ nie rośnie". */
.tresc .kontener > .przejscie { grid-column: tekst-start / pelna-end; max-width: 46rem; }
/* p.wzor — schemat adresu, 7 wierszy rozdzielonych
, wiersz do 55 znaków
WERSALIKAMI. Przy dzisiejszych 704 px minus 2×41 px wypełnienia i 6 px
obwódek zostaje 615 px, a taki wiersz w kroju maszynowym 19,9 px zajmuje
około 656 px: schemat już dziś bywa łamany i przestaje być schematem
— czytelnik widzi dziewięć wierszy adresu zamiast siedmiu. To jedyny blok
serii, który wymaga szerokości NIE MNIEJSZEJ niż dzisiejsza. */
.tresc .kontener > .wzor { grid-column: tekst-start / pelna-end; max-width: 46rem; }
/* Indeks bloga, arkusz systemu i luźne karty zapowiedzi biorą całą ramkę.
⚠ To poprawia też udokumentowany rozjazd: ul.lista-wpisow miało 58rem
(1202 px), a bliźniacze article.zapowiedz w 16 domenach łapało się na
regułę ogólną i dostawało 704 px. Teraz obie postaci indeksu mają tę samą
miarę — 1728 px przy 1920. */
.tresc .kontener > .lista-wpisow,
.tresc .kontener > .próbki,
.tresc .kontener > .zapowiedz { grid-column: pelna-start / pelna-end; }
/* Wykazy i kroki na dwie szpalty — ale TYLKO od czterech pozycji.
⚠ Trzypozycyjny wykaz w dwóch szpaltach daje układ 2 + 1 sierota,
czyli gorzej niż dziś; przy mniej niż czterech pozycjach lista zostaje
w kolumnie prozy i nic się nie zmienia.
⚠⚠ SZPALTY ROBI MULTICOL, NIE GRID. To jest warunek merytoryczny, nie
stylistyczny: ol.kroki niesie KOLEJNOŚĆ CZYNNOŚCI (do 13 pozycji), a
siatka o dwóch kolumnach układa 1,2 / 3,4 — czytelnik dostałby kroki
w poprzek. Multicol leje treść W DÓŁ pierwszej szpalty i dopiero potem
w drugą, więc daje 1,2,3 | 4,5,6 — kolejność czytania zostaje zgodna
z kolejnością w DOM. Tego samego mechanizmu używamy dla ul.wyliczenie,
żeby obie listy zachowywały się tak samo.
⚠ :has() — gdyby przeglądarka go nie znała, cała reguła jest odrzucana
i listy po prostu zostają w kolumnie prozy. Degradacja do dzisiejszego
stanu, nie do stanu zepsutego. */
.tresc .kontener > .wyliczenie:has(> li:nth-child(4)),
.tresc .kontener > .kroki:has(> li:nth-child(4)) {
grid-column: tekst-start / pelna-end;
/* ⚠ POPRAWKA v2: ten sam sufit co moduły. Bez niego druga szpalta biegła
do 1824 px, czyli 263 px NA FAKTURZE ozdobnika (zmierzone: pozycje
wykazu 1299–1756 w adreswanglii.pl/podstrona-1). Przy 46rem prawa
krawędź wykazu pokrywa się z osią ozdobnika i z krawędzią odsyłaczy —
zamiast piątej krawędzi pionowej powstaje powtórzenie czwartej. */
max-width: 46rem;
columns: 2;
column-gap: var(--rowek);
}
/* pozycja listy bywa dłuższa (254 znaki) niż cały akapit prozy — rozcięta
między szpalty rozpada się na dwa kikuty */
.tresc .kontener > .wyliczenie > li,
.tresc .kontener > .kroki > li { break-inside: avoid; }
/* ⚠⚠ POPRAWKA P-2 (2026-09-04) — KRESKA WISZĄCA NAD PUSTYM DOŁEM.
`.kroki li:last-child { border-block-end: 0 }` zdejmuje kreskę OSTATNIEMU
W DOM. Po zejściu do dwóch szpalt ostatni na ekranie jest ostatni w LEWEJ
szpalcie — on kreskę zachowuje i wisi nad pustym miejscem (zmierzone
91 px w podpiskwalifikowany.olsztyn.pl, pozycje 2|3 przy pięciu krokach),
a jedyny element bez kreski siedzi na dole PRAWEJ szpalty.
Rozwiązanie: w trybie dwuszpaltowym kreskę ma KAŻDA pozycja, także ostatnia
— wtedy obie szpalty kończą się tak samo i kreska czyta się jako domknięcie
wykazu, a nie jako urwana linia. W jednej szpalcie (poniżej progu i przy
wykazach krótszych niż 4 pozycje) nic się nie zmienia: ostatnia pozycja
nadal jest bez kreski.
⚠ Nierówna wysokość szpalt (2|3) NIE jest wadą — to praca `column-fill:
balance` na pozycjach o różnej wysokości. Wadą była wyłącznie kreska. */
.tresc .kontener > .kroki:has(> li:nth-child(4)) > li:last-child {
border-block-end: 1px dashed var(--linia-cicha);
}
/* --- 13B.3 KARTA ZAPOWIEDZI JAKO WIERSZ INDEKSU -------------------- */
/* Dotyczy 16 domen, w których karty stoją jako luźne article.zapowiedz
zamiast w ul.lista-wpisow (blog + 3 strony główne). Na pełnej ramce
karta pionowa dałaby jeden wiersz tekstu długi na 157 znaków, więc
zamiast kafelka robimy WIERSZ INDEKSU: tytuł w stałej szynie, streszczenie
w mierze czytelnej, odsyłacz dobity do prawej krawędzi ramki.
⚠ Specyficzność: reguły bazowe kart to „.tresc .zapowiedz__tekst" (0-2-0);
tutaj trzeba 0-4-0, inaczej „margin: auto 0 0" z wiersza 396 zostaje. */
.tresc .kontener > .zapowiedz {
flex-direction: row;
align-items: flex-start;
gap: clamp(1.2rem, 2.4vw, 2.8rem);
}
.tresc .kontener > .zapowiedz > .zapowiedz__tytul { flex: 0 0 clamp(13rem, 18vw, 21rem); margin: 0; }
/* ⚠ POPRAWKA v2: 42rem = 870 px przy 1920, czyli ~89 znaków w wierszu przy
stopniu .98rem — a seria stoi świadomie na 66–79 znakach (dlatego
--kolumna to 34rem, nie 36rem). Streszczenie wraca do miary wiersza. */
.tresc .kontener > .zapowiedz > .zapowiedz__tekst { flex: 1 1 auto; max-width: var(--kolumna); margin: 0; }
.tresc .kontener > .zapowiedz > .zapowiedz__wiecej { flex: 0 0 auto; margin: 0 0 0 auto; }
/* karty nie mają własnych marginesów pionowych, a w siatce z zerowym
row-gap stykałyby się obwódkami wariantu KARTA */
.tresc .kontener > .zapowiedz + .zapowiedz { margin-block-start: clamp(.7rem, 1.2vw, 1.3rem); }
/* --- 13B.4 RYTM ---------------------------------------------------- */
/* ⚠⚠ POPRAWKA v2. Odstęp w siatce = dolny margines poprzednika + górny
następnika (brak sklejania). Zamiast zgadywać rekompensatę po stronie
następnika — co działa tylko wtedy, gdy poprzednikiem jest akapit prozy —
ZERUJEMY DOLNY MARGINES POPRZEDNIKA przed każdym blokiem, który ma własny
górny margines. Wtedy odstęp równa się dokładnie temu górnemu marginesowi,
czyli liczbie, którą dawało sklejanie w przepływie.
Bloki z własnym górnym marginesem w arkuszu bazowym (sprawdzone):
h2 (clamp 2.4–3.8rem), h3 (1.8–2.6rem), .przejscie (1.1em),
.cta (clamp 1.8–2.8rem), .wzor (1.4em), .lista-wpisow (clamp 1.8–3rem).
Akapity prozy i wykazy mają górny margines 0 — ich poprzedników NIE WOLNO
zerować, bo odstęp spadłby do zera. Stąd jawna lista, a nie „> * + *".
⚠ :has() — brak obsługi oznacza powrót do dzisiejszego, sumującego się
odstępu, czyli degradację do stanu sprzed poprawki, nie do zepsutego. */
.tresc .kontener > *:has(+ h2),
.tresc .kontener > *:has(+ h3),
.tresc .kontener > *:has(+ .przejscie),
.tresc .kontener > *:has(+ .cta),
.tresc .kontener > *:has(+ .wzor),
.tresc .kontener > *:has(+ .lista-wpisow) { margin-block-end: 0; }
}
/* === 13B.5 SZYNA NAGŁÓWKÓW — próg 1500 px ============================ */
/* ⚠ DLACZEGO 1500, A NIE 1200. Szerokość szyny to (wnętrze − 34rem − 2 rowki)/2.
Przy 1200 px daje to 204 px, przy 1366 — 265 px, przy 1500 — 315 px, przy
1920 — 470 px. Nagłówek o medianie 38 znaków przy stopniu 25,8 px potrzebuje
około 24 znaków w wierszu, żeby zmieścić się w dwóch — a 24 znaki to właśnie
315 px. Poniżej tego progu szyna produkuje nagłówki pięcio- i sześciowierszowe,
czyli wadę zamiast układu. Między 1200 a 1500 pracuje samo 13B.2: tytuł,
moduły i karty już się rozpychają, nagłówki jeszcze stoją nad prozą. */
@media screen and (min-width: 1500px) {
.tresc .kontener { counter-reset: sekcja; }
/* (Tytuł jest już na pełnej ramce od 1200 px — patrz 13B.2. Od tego progu
jego lewą krawędź powtarza dodatkowo KAŻDY nagłówek w szynie, więc winieta
przestaje być pojedynczym wyjątkiem i staje się osią całego widoku.) */
/* --- nagłówki schodzą do szyny ------------------------------------- */
/* ⚠⚠ POPRAWKA v2 — DO SZYNY IDZIE WYŁĄCZNIE h2. W pierwszej wersji schodził
tam także h3 i psuł 331 miejsc w serii, w których po nagłówku sekcji stoi
od razu nagłówek podsekcji: h3 wraca wtedy do tego samego toru, jego blok
40 wierszy nie może nałożyć się na blok h2, więc PRZESKAKUJE ZA NIEGO,
a h2 zostaje sam z pustym pasem 1258 px obok siebie (widać na
adreswanglii.pl/podstrona-1, sekcja „Co oznaczają poszczególne elementy").
h3 zostaje w torze prozy, ze swoim dzisiejszym stopniem pisma — siada
wtedy obok h2, dokładnie tam, gdzie zaczyna się jego treść. */
.tresc .kontener > h2 {
grid-column: pelna-start / tekst-start;
/* ⚠⚠ span 40, NIGDY span 1. Nagłówek musi obejmować CAŁĄ wysokość swojej
sekcji, inaczej proza zaczyna się dopiero POD nim i cała operacja nic
nie daje. Przy 40 wierszach kolejny nagłówek — bo jego tor (1) jest
mniejszy od bieżącego (2) — przeskakuje ZA blok poprzednika, a jego
akapity ustawiają się obok niego. Puste wiersze mają zerową wysokość
(row-gap: 0), więc na ekranie nie powstaje ani piksel przerwy.
Zapas jest policzony: najgęstsza zmierzona sekcja serii ma 14 bloków,
najgęstszy widok 46; 40 wierszy na sekcję nigdy się nie kończy. */
grid-row: span 40;
/* bez tego nagłówek rozciągnąłby się na całą wysokość sekcji — a wariant
H2 „plakietka" ma TŁO i zrobiłby z tego kolorowy słup, a wariant „linia"
zsunąłby swoją kreskę ::after o kilkaset pikseli pod tekst */
align-self: start;
/* ⚠ body ma „overflow-wrap: break-word" (potrzebne dla adresów w prozie).
W wąskiej szynie łamie ono nagłówek W ŚRODKU SŁOWA („zagospodarowan|y").
hyphens: auto podstawia przed nim poprawny podział sylabiczny; twarde
łamanie zostaje jako ostatnia deska ratunku dla tokenów bez miejsca
podziału — i musi zostać, bo .tresc ma overflow: hidden, więc nagłówek,
który wyjdzie poza tor, zostanie OBCIĘTY, a nie pokaże paska przewijania.
Żadna bramka nie widzi ani jednego, ani drugiego. */
hyphens: auto;
text-wrap: balance;
}
/* Stopień pisma w szynie. ⚠ Przy 1500 px wychodzi 25,8 px — świadomie POWYŻEJ
granicy 24 px, od której bramka B6 przestaje traktować napis jako „tekst
duży" i podnosi próg kontrastu z 3:1 na 4,5:1. Zapas jest cienki (1,8 px),
ale nawet jego utrata nic nie psuje: h2 ma barwę --wiodaca-ciemna na
--papier albo (wariant „plakietka") na --wiodaca-jasna, a obie pary mają
na wszystkich 138 paletach nie mniej niż 4,81:1, czyli zdają także próg
ostrzejszy. Nie obniżać jednak clamp-a bez powtórzenia tego rachunku. */
.tresc .kontener > h2 {
counter-increment: sekcja;
font-size: clamp(1.18rem, .95rem + .5vw, 1.62rem);
line-height: 1.24;
}
/* ⚠⚠ POPRAWKA P-16 (2026-09-04) — H3 BYŁ WIĘKSZY OD H2 W SZYNIE.
Reguła wyżej ZMNIEJSZA h2, bo szyna jest wąska — ale h3 zostawał przy
stopniu bazowym clamp(1.1rem, 1rem + .5vw, 1.42rem) i przy 1920 px dobijał
do sufitu 1.42rem. Rachunek przy korzeniu 20,72 px:
h2 = .95rem + .5vw = 19,68 + 9,60 = 29,28 px
h3 = sufit 1.42rem = 29,42 px ← WIĘKSZY
Odwrócona hierarchia: podnagłówek w kolumnie prozy czytał się jako
nagłówek równorzędny sekcji, a tytuł sekcji w szynie jak podpis obok niego.
Poza szyną (poniżej 1500 px) wady nie ma: h2 ma tam clamp bazowy
(przy 1366 px 33,64 px wobec 25,61 px h3), więc poprawka należy TUTAJ.
Nowy stopień h3 w szynie: .86rem + .34vw, sufit 1.3rem
1500 px (korzeń 19,25): h3 21,66 px wobec h2 25,79 px → 0,84
1920 px (korzeń 20,72): h3 24,35 px wobec h2 29,28 px → 0,83
Oba rosną między 1500 a 1920 px (+12,4 % i +13,5 %), więc B13 zdane.
⚠ Próg 24 px z bramki B6 dotyczy h2 (barwa --wiodaca-ciemna). h3 ma barwę
--atrament, czyli tę samą co proza, i zdaje 4,5:1 niezależnie od stopnia. */
.tresc .kontener > h3 {
font-size: clamp(1.02rem, .86rem + .34vw, 1.3rem);
}
/* --- rytm sekcji: KOLEJNOŚĆ TYCH CZTERECH REGUŁ JEST ZNACZĄCA ------- */
/* Nagłówek w szynie i pierwszy blok jego sekcji leżą w TYM SAMYM wierszu
siatki, więc muszą dostać IDENTYCZNY odstęp górny — inaczej nagłówek
zawiśnie kilkadziesiąt pikseli nad albo pod swoim akapitem. Wszystkie
cztery reguły mają specyficzność 0-2-1, więc rozstrzyga kolejność:
„> h3" stoi na końcu, żeby dla pary „h2 + h3" (331 miejsc w serii —
nagłówek, po którym NIE MA prozy) wygrał odstęp podsekcji, ten sam,
który dostanie prozę stojącą obok h3. */
.tresc .kontener > h2 + * { margin-block-start: var(--odstep-sekcji); }
.tresc .kontener > h3 + * { margin-block-start: var(--odstep-po-podsekcji); }
.tresc .kontener > h2 { margin-block: var(--odstep-sekcji) 0; }
.tresc .kontener > h3 { margin-block: var(--odstep-podsekcji) 0; }
/* --- numer sekcji: jedyny stały znak graficzny szyny ---------------- */
/* ⚠ DO USUNIĘCIA JEDNĄ REGUŁĄ, jeżeli użytkownik uzna cyfrę za dopisek.
Uzasadnienie, dla którego zostaje: to nie jest tekst ze źródła, tylko
ornament liczbowy — dokładnie ten sam mechanizm, którym arkusz od początku
numeruje ol.kroki („content: counter(krok)", wiersz 302). Bramka B1 czyta
WYŁĄCZNIE HTML (html.parser) i pseudoelementów nie widzi, więc nie ma tu
ani dopisku w rozumieniu bramki, ani obejścia jej kontraktu.
Krój maszynowy i wersaliki cyfr czytają się jak numer arkusza, a nie jak
treść; barwa --wiodaca ma na --papier i na --wiodaca-jasna (plakietka)
nie mniej niż 4,81:1 na każdej palecie serii.
Karty bloga są bezpieczne z dwóch powodów naraz: nie są bezpośrednimi
dziećmi .kontener, a poza tym arkusz już zeruje ich pseudoelementy
regułą „.tresc .zapowiedz__tytul::after, ::before { content: none }". */
.tresc .kontener > h2::before {
content: counter(sekcja, decimal-leading-zero);
display: block;
margin-block-end: .4em;
font-family: var(--krój-maszyna);
font-size: .68em;
font-weight: 400;
letter-spacing: .06em; /* v2: .18em czytało się jak dwa osobne znaki */
line-height: 1;
color: var(--wiodaca);
}
}
/* === 13B.6 TRZECIA SZPALTA WYKAZÓW — próg 1600 px ==================== */
/* Dopiero tutaj wykaz o dziewięciu i więcej pozycjach ma z czego zrobić trzy
szpalty: przy 1600 px pas modułowy ma 1053 px, czyli po 328 px na szpaltę,
a pozycja o medianie 53 znaków mieści się w dwóch wierszach. Przy dziewięciu
pozycjach oszczędza to cztery wiersze wysokości — to jest realne niesienie
treści w poziomie, a nie ten sam układ z mniejszą bielą. */
@media screen and (min-width: 1600px) {
.tresc .kontener > .wyliczenie:has(> li:nth-child(9)),
.tresc .kontener > .kroki:has(> li:nth-child(9)) { columns: 3; }
}
/* --- 14. 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, .stopka { border-color: #000000; }
.tresc::after, .tresc::before, .naglowek::after, .naglowek::before { display: none !important; }
.tresc .kontener > * { max-width: none; }
a { color: #000000; }
}