@charset "utf-8";
/* =====================================================================
   KRÓJ — system projektowy makiety studiomody.com (przebudowa premium)
   Seria STRONY-WWW-ST-A2. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.

   IDEA. Ubranie zaczyna się od kroju: od arkusza, na którym wykreślono
   linie cięcia, naddatek szwu, kierunek nitki i nacięcia montażowe. Widok
   jest zbudowany jak plansza lookbooka — czarne plansze, kość słoniowa
   arkusza, jeden cynobrowy znacznik krawiecki. Ornament to WYŁĄCZNIE
   geometria wykroju: linie, przerywane odsunięcia, strzałka kierunku
   nitki, trójkątne nacięcia i kółka nawiertów. Żadnych rysunków ubrań.

   ⚠ ROZJAZD z siostrą studiomody.pl („Szew”: indygo, rzemiosło,
   perforacja): tutaj czerń i kość słoniowa, ostry róg, redakcyjna
   antykwa o wysokim kontraście grubości i wąski grotesk.

   ⚠ Kolejność ważna dla pułapek: reguły ogólne PRZED komponentami, a każdy
   komponent stojący w prozie ma prefiks „.tresc”, żeby wygrać
   specyficzność z „.tresc p a” (0-2-1).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --papier:          #F4F0E8;   /* kość słoniowa — arkusz */
  --papier-karta:    #FFFDF9;   /* plansza */
  --tlo-2:           #E6E0D4;   /* płótno surowe — pasmo drugoplanowe */
  --wiodaca-jasna:   #F7E0D8;   /* cynober rozbielony — plakietki */
  /* pismo */
  --atrament:        #14110F;   /* czerń ciepła */
  --atrament-cichy:  #4E463E;
  /* barwa wiodąca = czerń; akcentem jest cynober */
  --wiodaca:         #14110F;
  --wiodaca-ciemna:  #100E0C;
  --cynober:         #D9401E;   /* znacznik krawiecki — kreski, ramki, ornament */
  --cynober-ciemny:  #B83313;   /* ten sam cynober do TEKSTU na jasnym */
  --cynober-jasny:   #EE6640;   /* ten sam cynober do TEKSTU na czerni */
  --akcent:          #B83313;
  --linia:           #7A7062;
  --linia-cicha:     #D8D1C3;
  --na-wiodacej:     #F4F0E8;
  --na-akcencie:     #FFFDF9;

  /* powierzchnie ciemne (hero, pasmo nocne, plansza ciemna, stopka) */
  --czern:           #100E0C;
  --czern-2:         #1C1916;
  --grafit:          #2A2521;
  --kosc:            #F4F0E8;
  --kosc-cicha:      #CFC6B6;
  --linia-noc:       #6E6357;
  --linia-noc-cicha: #35302A;
  /* ⚠ RECENZJA: dwubarwna kreska znacznikowa GINĘŁA na czerni — jej ciemna
     połowa była rysowana atramentem (#14110F na #100E0C = 1,0:1). Na ciemnych
     powierzchniach ciemną połowę rysuje ta barwa (4,5:1 wobec czerni stopki). */
  --linia-noc-jasna: #8A7F70;

  /* ornamenty — wyłącznie dekoracja, nigdy nośnik informacji */
  --orn-kreska:      rgba(122, 112, 98, .30);
  --orn-kreska-mocna: rgba(122, 112, 98, .42);
  --orn-cynober:     rgba(217, 64, 30, .26);
  --orn-noc:         rgba(244, 240, 232, .09);
  --orn-noc-mocna:   rgba(244, 240, 232, .16);

  --kroj-naglowek: "DM Serif Display", Georgia, "Times New Roman", "Nimbus Roman", "Liberation Serif", serif;
  --kroj-tekst:    "Archivo Narrow", "Arial Narrow", "Liberation Sans Narrow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ⚠⚠ MIARA W REM, NIE W EM I NIE W CH (pułapka 9). Wąski grotesk ma
     wąskie zero, więc „ch” kłamie o jedną czwartą wiersza. 30rem daje
     ~70 znaków w wierszu. */
  /* ⭐⭐ SKALA POWYŻEJ 1366: kolumna prozy rośnie SZYBCIEJ niż samo pismo.
     Poniżej ~1750 px wiąże dolna granica 30rem, czyli układ do 1366 px zostaje
     CO DO PIKSELA taki jak był; dopiero szeroki ekran dokłada wiersza ~4 znaki
     (1920: 621 -> 662 px, ok. 74 znaki). Górny zawór 34rem pilnuje, żeby na
     2560 px wiersz nie rozjechał się do 100 znaków. */
  --kolumna:        clamp(30rem, 34.5vw, 34rem);   /* kolumna prozy */
  /* ⚠⚠ RECENZJA: przy 1920 margines zewnętrzny wychodził 187 px (siatka kart)
     i 298 px (plansza), czyli DWA RAZY więcej niż przyjęte w serii ~95 px.
     Dlatego pasmo dociągnięto do 92rem — ale wtedy zaczęło DOTYKAĆ krawędzi
     okna (7 px), bo 92rem to przy 1920 aż 1906 px. Zawór 92rem zostaje jako
     ogranicznik dla ekranów 2200 px i szerszych; o margines przy 1920 dba
     dziś --rynna (blok 6b), a nie ten zawór: pasmo ma 1728 px i po 96 px
     marginesu z każdej strony. */
  --pas-szer:       92rem;   /* zawór dla bardzo szerokich ekranów */
  /* ⚠ plansza rośnie razem z oknem, ale NIGDY nie przerasta pasma: przy 1366
     i 1440 zostaje dokładnie tam, gdzie była (64rem), a dopiero powyżej ~1500
     idzie za oknem, żeby przy 1920 nie zostawiać 298 px marginesu. */
  /* ⚠ 88vw zamiast 82vw i zawór 92rem zamiast 78rem: przy 1366 px wychodzi
     dokładnie ta sama liczba co dotąd (1202 px — wiąże 64rem), a przy 1920 px
     płyta przestaje być o 166 px na stronę węższa od pasma i jej wewnętrzne
     szyny mają realne miejsce na barek nagłówka. */
  --plyta-szer:     min(max(64rem, 88vw), 92rem);
  /* ⚠⚠ DWIE RÓŻNE RYNNY, NIE JEDNA.
     --margines to WEWNĘTRZNE wyściełanie pasma (padding), --rynna to
     ZEWNĘTRZNA rama arkusza (odstęp pasma od krawędzi okna). Do 1366 px
     działa wyłącznie --margines, czyli układ zostaje bez zmian. Od 1367 px
     te same piksele przenoszą się z paddingu do ramy: treść stoi tam gdzie
     stała, ale MODUŁ przestaje dotykać krawędzi okna (było 7 px). */
  --margines:       clamp(20px, 5vw, 112px);   /* wewnętrzna rynna pasma */
  --rynna:          0px;                       /* zewnętrzna rama arkusza */
  --plyta-pad:      clamp(20px, 5vw, 112px);   /* wyściełanie płyty (własne, nie z pasma) */

  /* ⚠⚠ RECENZJA: wielka cyfra obrysowa wchodziła w ostatnią literę nagłówka
     karty (768–1440) i była ścinana krawędzią karty (1366, 390). Cyfra ma
     teraz WŁASNY PAS u góry karty: nigdy nie dotyka tekstu i nigdy nie wychodzi
     poza kartę, bo jej pole liczy się z tych samych zmiennych co pas. */
  --karta-x:        clamp(1.2rem, .9rem + 1.2vw, 2.2rem);   /* padding boczny karty */
  --karta-y:        clamp(1.4rem, 1rem + 1.4vw, 2.4rem);    /* padding dolny karty */
  --cyfra:          clamp(3rem, 2.4rem + 1.5vw, 4.4rem);    /* plansza */
  --cyfra-duza:     clamp(3.6rem, 2.9rem + 1.8vw, 5.4rem);  /* zapowiedź wpisu */
  --cyfra-gora:     .34rem;                                  /* odsunięcie od górnej krawędzi */
  --cyfra-pas:      calc(var(--cyfra-gora) + var(--cyfra) + 1.05rem);
  --cyfra-pas-duzy: calc(var(--cyfra-gora) + var(--cyfra-duza) + 1.05rem);

  /* promień 0 px — ostry róg arkusza wykroju; nie ma tokenu, bo w całej
     makiecie nie ma ANI JEDNEGO zaokrąglenia do sparametryzowania */
  --kreska:         3px;     /* znacznik krawiecki */
  --cien-plyta:     0 30px 70px -34px rgba(16, 14, 12, .48), 0 2px 0 0 rgba(16, 14, 12, .06);
  --cien-karta:     0 22px 44px -28px rgba(16, 14, 12, .55);
  --zachodzenie:    clamp(1.8rem, 1rem + 2.6vw, 4.6rem);
}

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

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* pułapka 6: „clip” leczy przepełnienia od pasów full-bleed, nie psując sticky */
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(--kroj-tekst);
  font-size: 1.02rem;
  line-height: 1.72;
  overflow-wrap: break-word;
  font-feature-settings: "kern" 1;
}

img, svg { max-width: 100%; height: auto; }
/* ⚠⚠ pułapka „globalne strong,b{color}” — pogrubienie samą wagą pisma */
strong, b { color: inherit; font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (B7 mierzy prostokąt) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 190px; height: 48px;
  display: flex; align-items: center;
  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.6rem;
  background: var(--atrament); color: var(--na-wiodacej);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pas poziomy (nagłówek, stopka, hero): bez szyn siatki */
.rama {
  width: 100%;
  max-width: min(100% - 2 * var(--rynna), var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z pustymi szynami po bokach: proza
   stoi w środkowym torze (symetrycznie — bramka B13), a bloki oznaczone
   klasą .szeroki rozpychają się na całe pasmo.
   ⚠ Płyta używa DOKŁADNIE tych samych szyn, więc kolumna prozy ma jedną
   krawędź w całym serwisie i sonda bramki B13 nie waha się między dwoma
   układami. */
.kontener {
  width: 100%;
  max-width: min(100% - 2 * var(--rynna), var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki,
.kontener > .zestaw,
.kontener > .znaki,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: pelna-start / pelna-end; }
/* ⚠⚠ RECENZJA: etykieta przycisku („PRZECZYTAJ, DLACZEGO MATERIAŁY SIĘ MECHACĄ")
   nie mieściła się w kolumnie prozy, łamała się na dwa wiersze i strzałka wisiała
   200 px dalej w pustej czerni. Wiersz przycisku zaczyna się tam, gdzie proza,
   ale wolno mu rosnąć w prawo aż do krawędzi pasma — sam przycisk ma szerokość
   swojej treści (width: fit-content niżej), więc nic się nie rozjeżdża.
   ⚠ B13 mierzy akapity dłuższe niż 80 znaków; etykieta przycisku ma 39, więc
   sonda kolumny prozy tego wiersza nie widzi. */
.kontener > .cta,
.kontener > .przejscie { grid-column: tekst-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--papier);
  border-block-end: 1px solid var(--linia-cicha);
}
.naglowek::after {
  content: ""; display: block; height: var(--kreska);
  background: linear-gradient(90deg,
    var(--cynober) 0 clamp(60px, 12%, 200px),
    var(--wiodaca) clamp(60px, 12%, 200px) 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .2rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* sygnatura słowna — WYŁĄCZNIE typograficzna, bez sygnetu, igły i wieszaka */
.znak {
  display: inline-flex; align-items: baseline; gap: .22em;
  min-height: 48px; align-content: center; flex-wrap: wrap;
  text-decoration: none;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.15rem, 1rem + .45vw, 1.7rem);
  line-height: 1.15; letter-spacing: .01em;
}
.znak__a { font-weight: 400; font-style: italic; color: var(--atrament); }
.znak__b {
  font-weight: 400; color: var(--cynober-ciemny);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .84em; align-self: center;
  border-block-end: 2px solid transparent;
}
.znak:hover .znak__b { border-block-end-color: var(--cynober); }

/* menu na zwykłej liście — bez <details>, więc pułapka T7 nie ma jak wejść */
.menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0 clamp(.1rem, 1vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 760px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 48px;   /* B7 */
  padding-inline: .7em;
  font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--atrament-cichy);
}
.menu__link::before {
  content: ""; position: absolute; inset-block-start: 50%;
  inset-inline-start: 0; width: 0; height: 1px;
  background: var(--cynober); transform: translateY(-.62em);
  transition: width .22s ease;
}
.menu__link:hover { color: var(--atrament); }
.menu__link:hover::before { width: calc(100% - 1.4em); }
.menu__link[aria-current="page"] { color: var(--atrament); }
.menu__link[aria-current="page"]::before { width: calc(100% - 1.4em); height: var(--kreska); background: var(--cynober); }

/* --- 5. HERO --------------------------------------------------------- */
.tresc { display: block; counter-reset: sekcja; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--czern);
  background-image:
    radial-gradient(84% 70% at 88% 0%, rgba(217, 64, 30, .30) 0%, rgba(217, 64, 30, 0) 58%),
    radial-gradient(60% 56% at 2% 100%, rgba(122, 112, 98, .34) 0%, rgba(122, 112, 98, 0) 62%),
    linear-gradient(152deg, #2A2521 0%, #191512 44%, #0C0B0A 100%);
  color: var(--kosc);
  padding-block: clamp(3rem, 1.4rem + 5.4vw, 7.8rem) clamp(3.4rem, 1.6rem + 6vw, 8.6rem);
}
/* ORNAMENT WYKROJU — inline SVG, aria-hidden, zero informacji.
   ⚠ bramka B6 mierzy KAŻDY <svg> wobec tła progiem 3:1, więc barwa
   nośna ornamentu to kość słoniowa (17:1 na czerni); subtelność robi
   stroke-opacity wewnątrz rysunku, nie przygaszony kolor. */
.hero__wykroj {
  position: absolute; z-index: 0; pointer-events: none;
  inset-block-start: 50%; inset-inline-end: -12%;
  width: clamp(330px, 48vw, 940px); aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--kosc);
}
.hero__wykroj svg { width: 100%; height: auto; display: block; }
/* ⚠ na wąskim ekranie ornament wchodził POD tytuł i lid — schodzi w prawy
   dolny róg i zostaje fakturą, a nie tłem tekstu */
@media (max-width: 900px) {
  .hero__wykroj {
    inset-block-start: auto; inset-block-end: -18%;
    inset-inline-end: -34%;
    width: min(112vw, 520px);
    transform: none; opacity: .5;
  }
  .hero { padding-block-end: clamp(6rem, 22vw, 9rem); }
}
/* ⚠⚠ RECENZJA: przy 360–390 px rysunek wykroju biegł POD lidem, a cynobrowe
   kreski skali wypadały dokładnie pod wyrazami i czytały się jak podkreślenie
   albo skreślenie w środku zdania („jak", „Nikt", „i nagle"). Odsunięcie
   ornamentu nie wystarczy — dopóki jest wyjęty z układu (position:absolute),
   przy dowolnie długim lidzie znowu na niego wejdzie. Dlatego poniżej 620 px
   ornament WRACA DO UKŁADU jako ostatni element hero: żadna kreska nie ma
   fizycznej możliwości przeciąć wiersza tekstu. */
@media (max-width: 620px) {
  .hero { display: flex; flex-direction: column; padding-block-end: clamp(1.4rem, 5vw, 2.4rem); }
  .hero__rama { order: 1; }
  .hero__wykroj {
    order: 2; position: static; inset: auto; transform: none;
    width: min(76vw, 330px); aspect-ratio: 1; opacity: .58;
    margin-block-start: clamp(1.6rem, 7vw, 2.8rem);
    margin-inline-start: auto;
    margin-inline-end: calc(-.42 * var(--margines));
  }
}
.orn-akcent { stroke: var(--cynober); }
.orn-akcent-pelny { fill: var(--cynober); }
/* siatka arkusza pod ornamentem */
.hero::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--orn-noc) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, var(--orn-noc) 0 1px, transparent 1px 76px);
  mask-image: linear-gradient(105deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 52%, rgba(0,0,0,0) 78%);
  pointer-events: none;
}
.hero__rama { position: relative; z-index: 1; }
.hero__blok { max-width: 46rem; }

.hero .tytul {
  margin: 0 0 clamp(1.1rem, .7rem + 1.1vw, 2.2rem);
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(2.3rem, 1.25rem + 3.1vw, 4.9rem);
  line-height: 1.04; letter-spacing: -.022em;
  color: var(--kosc);
  text-wrap: balance;
}
/* znacznik krawiecki nad tytułem — trzy kreski o malejącej długości */
.hero .tytul::before {
  content: ""; display: block;
  width: clamp(84px, 12vw, 190px); height: var(--kreska);
  margin-block-end: clamp(1.2rem, .8rem + 1.2vw, 2.4rem);
  background:
    linear-gradient(90deg, var(--cynober) 0 42%, transparent 42% 50%,
                    var(--kosc) 50% 78%, transparent 78% 86%,
                    var(--kosc) 86% 100%);
}
.hero .lid {
  margin: 0; max-width: 40rem;
  font-size: 1.16rem; line-height: 1.66;
  color: var(--kosc-cicha);
}
/* linia kierunku nitki pod lidem */
.hero .lid::after {
  content: ""; display: block;
  width: clamp(120px, 22vw, 320px); height: 1px;
  margin-block-start: clamp(1.4rem, 1rem + 1.4vw, 2.6rem);
  background: linear-gradient(90deg, var(--kosc-cicha), rgba(207, 198, 182, 0));
}

/* --- 6. PASMA I PLANSZE ---------------------------------------------- */
.pas { position: relative; display: flow-root; }
.pas > .kontener { position: relative; z-index: 1; }

.pas--wstep {
  background-color: var(--papier);
  padding-block: clamp(2.6rem, 1.4rem + 3.2vw, 5.2rem);
}
.pas--wstep::before {
  content: ""; position: absolute; z-index: 0; inset-block: 0;
  inset-inline-start: 0; width: min(38%, 460px);
  background-image: repeating-linear-gradient(0deg, var(--orn-kreska) 0 1px, transparent 1px 14px);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,0));
  pointer-events: none;
}

.pas--arkusz {
  background-color: var(--papier);
  padding-block: clamp(2.2rem, 1.2rem + 2.8vw, 4.6rem);
}

.pas--plotno {
  background-color: var(--tlo-2);
  padding-block: clamp(2.8rem, 1.5rem + 3.4vw, 5.6rem);
}
.pas--plotno::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, var(--orn-kreska-mocna) 0 1px, transparent 1px 11px);
  mask-image: radial-gradient(120% 90% at 100% 0%, rgba(0,0,0,.75), rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.pas--plotno + .pas--plotno { padding-block-start: 0; }

/* ⚠⚠ RECENZJA: ostatni wiersz pasma kończył się 35 px nad krawędzią nachodzącej
   planszy, przy rytmie strony 100–150 px — czytało się jak przypadkowe dosunięcie
   tekstu do krawędzi bloku. Pasmo STOJĄCE PRZED planszą dostaje zapas dolny
   równy zachodzeniu powiększonemu o pełny prześwit (przy 1920 ~73 px ponad
   krawędź planszy, przy 1366 ~48 px). */
.pas:has(+ .pas--plyta) {
  padding-block-end: calc(var(--zachodzenie) + clamp(2rem, 1.2rem + 2.4vw, 4.4rem));
}

/* pasmo, na którym leży PLANSZA nachodząca na sąsiada */
.pas--plyta {
  background-color: var(--papier);
  padding-block: 0 clamp(1.8rem, 1rem + 2.2vw, 3.6rem);
}
.pas--plyta::before {
  content: ""; position: absolute; z-index: 0; inset-block: 0;
  inset-inline-end: 0; width: min(34%, 420px);
  background-image: repeating-linear-gradient(90deg, var(--orn-kreska) 0 1px, transparent 1px 14px);
  mask-image: linear-gradient(270deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  pointer-events: none;
}
.plyta {
  /* ⚠ plansza jest WĘŻSZA od pasma, ale nadal WYŚRODKOWANA, więc kolumna prozy
     stoi dokładnie tam co w pozostałych pasmach — sonda bramki B13 nie waha się
     między dwiema krawędziami, a plansza przestaje być białą płachtą. */
  max-width: min(100% - 2 * var(--rynna), var(--plyta-szer));
  /* ⚠ płyta ma WŁASNE wyściełanie: gdy od 1367 px --margines pasma schodzi do
     zera (piksele idą do ramy arkusza), tekst płyty nie może dotknąć jej
     obwódki. --plyta-pad to ta sama liczba co dawny --margines. */
  padding-inline: var(--plyta-pad);
  position: relative; z-index: 2;
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 4rem);
  /* ⚠ znacznik górnej krawędzi rysujemy TŁEM, nie pseudoelementem: ::before
     planszy jest zarezerwowany na znacznik narożny prawej szyny (niżej), a dwie
     reguły o tej samej nazwie po cichu wygaszały ornament. */
  background-color: var(--papier-karta);
  background-image: linear-gradient(90deg,
    var(--cynober) 0 clamp(90px, 16%, 260px),
    var(--atrament) clamp(90px, 16%, 260px) 100%);
  background-size: 100% var(--kreska);
  background-repeat: no-repeat;
  background-position: left top;
  background-origin: border-box; background-clip: border-box;
  border: 1px solid var(--linia-cicha);
  box-shadow: var(--cien-plyta);
}

/* pasmo nocne i plansza ciemna — nadpisujemy TOKENY, więc komponenty
   w środku dostają wariant na czerni bez osobnych reguł (pułapka
   „globalny kolor na odwrotnej jasności”) */
.na-czerni {
  --papier:          var(--czern);
  --papier-karta:    var(--czern-2);
  --tlo-2:           var(--grafit);
  --wiodaca-jasna:   var(--grafit);
  --atrament:        var(--kosc);
  --atrament-cichy:  var(--kosc-cicha);
  --cynober-ciemny:  var(--cynober-jasny);
  --akcent:          var(--cynober-jasny);
  --linia:           var(--linia-noc);
  --linia-cicha:     var(--linia-noc-cicha);
  --orn-kreska:      var(--orn-noc);
  --orn-kreska-mocna: var(--orn-noc-mocna);
  --na-wiodacej:     var(--czern);
  --na-akcencie:     var(--czern);
  --wiodaca:         var(--kosc);
  --wiodaca-ciemna:  var(--kosc);
  color: var(--kosc);
}
.pas--noc {
  position: relative; overflow: hidden;
  background-color: var(--czern);
  background-image:
    radial-gradient(70% 60% at 92% 4%, rgba(217, 64, 30, .22) 0%, rgba(217, 64, 30, 0) 60%),
    radial-gradient(56% 50% at 4% 96%, rgba(122, 112, 98, .26) 0%, rgba(122, 112, 98, 0) 64%);
  padding-block: clamp(3rem, 1.6rem + 3.6vw, 6rem);
}
.pas--noc::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--orn-noc) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(90deg, var(--orn-noc) 0 1px, transparent 1px 76px);
  mask-image: radial-gradient(90% 120% at 8% 0%, rgba(0,0,0,.9), rgba(0,0,0,0) 72%);
  pointer-events: none;
}
.pas--noc::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: var(--kreska);
  background: linear-gradient(90deg, var(--cynober) 0 clamp(90px, 18%, 300px), rgba(217, 64, 30, 0) 100%);
}

/* ORNAMENT SZYN — miarka krawiecka. Pojawia się dopiero od 1180 px, czyli
   tam, gdzie po bokach kolumny prozy realnie robi się miejsce. Lewa szyna
   dostaje miarkę z podziałką, prawa — znaczniki narożne. Zero informacji. */
@media (min-width: 1180px) {
  .pas > .kontener:not(:has(.zestaw)):not(:has(.znaki)):not(:has(.lista-wpisow))::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset-block: clamp(1.6rem, 3vw, 3.6rem);
    inset-inline-start: var(--margines);
    width: 26px;
    background-image:
      linear-gradient(90deg, var(--linia) 0 1px, transparent 1px),
      repeating-linear-gradient(180deg, var(--linia-cicha) 0 1px, transparent 1px 21px);
    background-size: 100% 100%, 11px 100%;
    background-repeat: no-repeat, no-repeat;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.95) 18%, rgba(0,0,0,.95) 82%, rgba(0,0,0,0) 100%);
  }
  /* obie szyny WYŁĄCZNIE tam, gdzie NIE stoi blok rozpychający się na całą
     szerokość — inaczej miarka prześwitywała w odstępach między planszami */
  .pas > .kontener:not(:has(.zestaw)):not(:has(.znaki)):not(:has(.lista-wpisow))::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset-block-start: clamp(2rem, 4vw, 4.4rem);
    inset-inline-end: var(--margines);
    width: 74px; height: 118px;
    background-image:
      linear-gradient(180deg, var(--cynober) 0 3px, transparent 3px),
      linear-gradient(180deg, var(--linia-cicha) 0 1px, transparent 1px),
      linear-gradient(180deg, var(--linia-cicha) 0 1px, transparent 1px),
      linear-gradient(90deg, var(--linia-cicha) 0 1px, transparent 1px);
    background-size: 44px 3px, 74px 1px, 30px 1px, 1px 118px;
    background-position: right top, right 22px, right 40px, right top;
    background-repeat: no-repeat;
  }
}

/* --- 6b. SKALA POWYŻEJ 1366 PX ---------------------------------------
   ⭐⭐ ZASADA UŻYTKOWNIKA: makieta ma ROSNĄĆ powyżej 1366 px, ale arkusz ma
   przy tym ODDYCHAĆ. Pomiar z 2026-09-01 pokazał wadę odwrotną niż w reszcie
   serii: najszerszy moduł treści zostawiał przy 1920 px po 7 px marginesu,
   czyli pasmo praktycznie dotykało krawędzi okna. Nie dlatego, że treść była
   dosunięta — wyściełanie pasma dawało jej 96 px oddechu — tylko dlatego, że
   te 96 px siedziało WEWNĄTRZ modułu (padding), a nie na zewnątrz.

   Naprawa jest dwuczęściowa:
   (1) GEOMETRIA — od 1367 px te same piksele przenoszą się z paddingu do ramy
       arkusza (--rynna). Treść stoi tam, gdzie stała (przesunięcie 7 px),
       a moduł dostaje uczciwe 96 px marginesu z każdej strony przy 1920.
       Formuła rynny to DOKŁADNIE dawna formuła marginesu (5vw), więc przejście
       przez 1366/1367 px jest ciągłe: 1366 -> treść 1229 px, 1367 -> 1230 px.
   (2) ROLA DLA SZEROKOŚCI — od 1500 px nagłówek sekcji razem z ozdobną cyfrą
       wychodzi z kolumny prozy do lewej szyny (barek), a siatka znaków idzie
       na trzy kolumny. Przy 1920 px na ekranie jest WIĘCEJ TREŚCI W POZIOMIE,
       a nie ten sam układ z węższą bielą po bokach.
   ⚠ Poniżej 1367 px NIC się nie zmienia — to nie jest przebudowa mobilna. */
@media (min-width: 1367px) {
  :root {
    --rynna:    clamp(68px, 5vw, 120px);   /* ta sama formuła co dawny --margines */
    --margines: 0px;                       /* piksele poszły do ramy arkusza */
  }
}

@media (min-width: 1500px) {
  /* BAREK — nagłówek sekcji obok prozy, nie nad nią.
     Wchodzi tylko tam, gdzie szyna jest naprawdę pusta: pasma z siatką kart
     rozpychają się na pełne pasmo i barku nie dostają (ten sam warunek co
     ornament szyn wyżej, żeby oba nigdy nie stanęły w tym samym miejscu). */
  .pas > .kontener:not(:has(.zestaw)):not(:has(.znaki)):not(:has(.lista-wpisow))::after {
    /* miarka krawiecka wypełniała pustkę lewej szyny — pustki już nie ma */
    content: none;
  }
  .pas > .kontener:not(:has(.zestaw)):not(:has(.znaki)):not(:has(.lista-wpisow)) > h2 {
    grid-column: pelna-start / tekst-start;
    align-self: start;
    margin: 0;
    padding-block-start: 0;
    padding-inline-end: clamp(2rem, 2.4vw, 3.4rem);
    font-size: clamp(1.5rem, .8rem + 1.1vw, 2.05rem);
    /* ⚠⚠ PUŁAPKA: body ma overflow-wrap: break-word, więc w wąskiej szynie
       nagłówek łamał się W ŚRODKU SŁOWA („regenero- / wanej"). Żadna bramka
       tego nie widzi — łapie to tylko własny zrzut. */
    overflow-wrap: normal;
    hyphens: auto;
  }
  /* Nagłówek stoi obok PIERWSZEGO akapitu. Gdy akapitów jest więcej, szyna
     obejmuje dwa wiersze siatki — inaczej wysoki nagłówek rozpychałby wiersz
     i między akapitem pierwszym a drugim robiła się dziura. */
  .pas > .kontener:not(:has(.zestaw)):not(:has(.znaki)):not(:has(.lista-wpisow)) > h2:has(+ p + p) {
    grid-row: span 2;
  }
  /* Ozdobna cyfra wychodzi spod tekstu i staje się nagłówkiem barku. */
  .pas > .kontener:not(:has(.zestaw)):not(:has(.znaki)):not(:has(.lista-wpisow)) > h2::before {
    position: static; display: block;
    inset: auto;
    font-size: 2rem; margin-block-end: .45rem;
  }
  /* Kreska prowadząca zamyka barek od dołu zamiast biec nad nagłówkiem. */
  .pas > .kontener:not(:has(.zestaw)):not(:has(.znaki)):not(:has(.lista-wpisow)) > h2::after {
    inset-block-start: auto; inset-block-end: -.75rem;
    inset-inline: 0 clamp(2rem, 2.4vw, 3.4rem);
    background: linear-gradient(90deg, var(--cynober) 0 3.2rem, var(--linia-cicha) 3.2rem);
  }
}

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
/* nagłówek sekcji z numerem planszy i linią prowadzącą */
.tresc h2 {
  counter-increment: sekcja;
  position: relative;
  margin: clamp(2.4rem, 1.4rem + 2.2vw, 3.8rem) 0 .9rem;
  padding-block-start: clamp(1.5rem, 1rem + 1.2vw, 2.3rem);
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.6rem);
  line-height: 1.14; letter-spacing: -.014em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
.tresc h2::before {
  content: counter(sekcja, decimal-leading-zero);
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  font-family: var(--kroj-tekst); font-weight: 700;
  font-size: .76rem; line-height: 1; letter-spacing: .2em;
  color: var(--cynober-ciemny);
}
.tresc h2::after {
  content: ""; position: absolute;
  inset-block-start: .3rem; inset-inline-start: 3rem; inset-inline-end: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cynober) 0 2.6rem, var(--linia-cicha) 2.6rem);
}
.kontener > h2:first-child { margin-block-start: 0; }
/* od 1180 px numer sekcji wychodzi na lewy margines i rośnie do rozmiaru
   ozdobnej cyfry rysowanej obrysem — arkusz dostaje paginację planszy */
@media (min-width: 1180px) {
  .tresc h2::before {
    inset-block-start: -.02em; inset-inline-start: -5.6rem;
    font-family: var(--kroj-naglowek); font-weight: 400;
    font-size: 2.7rem; line-height: 1; letter-spacing: 0;
    color: transparent;
    -webkit-text-stroke: 1px var(--cynober);
  }
  .tresc h2::after {
    inset-inline-start: 0;
    background: linear-gradient(90deg, var(--cynober) 0 3.2rem, var(--linia-cicha) 3.2rem);
  }
}

.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.6rem) 0 .5rem; text-wrap: balance;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: 1.28rem; line-height: 1.28; color: var(--atrament);
}

.tresc p { margin: 0 0 1.15em; }
.tresc p:last-child { margin-block-end: 0; }

.tresc .wprowadzenie {
  font-size: 1.14rem; line-height: 1.62; color: var(--atrament);
}

.tresc p a, .tresc li a {
  color: var(--cynober-ciemny);
  text-decoration-line: underline;
  text-decoration-color: var(--cynober);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.tresc p a:hover, .tresc li a:hover {
  color: var(--atrament);
  text-decoration-thickness: 2px;
}

/* --- 8. ZESTAW PLANSZ (wyliczenia rozpisane na plansze lookbooka) ---- */
.tresc .zestaw {
  margin: clamp(1.4rem, .9rem + 1.4vw, 2.6rem) 0 clamp(1.6rem, 1rem + 1.6vw, 3rem);
  padding: 0; list-style: none;
  display: grid; gap: clamp(.9rem, .6rem + .9vw, 1.6rem);
  grid-template-columns: 1fr;
  /* ⚠⚠ RECENZJA: rząd wyrównywany do najwyższej karty zostawiał w krótkiej
     karcie 150–180 px pustej bieli w obwódce — czytało się jak niewypełniony
     element, nie jak oddech (pułapka 10 z katalogu: w KOLUMNACH start). */
  align-items: start;
}
@media (min-width: 720px)  { .tresc .zestaw { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .tresc .zestaw--troje { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ⚠⚠ PAS NUMERU. Karta ma u góry własny pas na wielką cyfrę: wysokość pasa
   i rozmiar cyfry liczą się z TEJ SAMEJ zmiennej, więc prześwit między cyfrą
   a pierwszym wierszem tekstu (0,15·cyfra + 0,85rem, czyli 25–30 px) nie zależy
   od szerokości okna ani od długości nagłówka. Kreska włosowa zamyka pas,
   żeby pusta przestrzeń czytała się jak główka planszy, a nie jak dziura. */
.tresc .plansza {
  counter-increment: plansza;
  position: relative; overflow: hidden;
  background-color: var(--papier-karta);
  background-image: linear-gradient(90deg, var(--linia-cicha) 0 100%);
  background-repeat: no-repeat;
  background-size: calc(100% - 2 * var(--karta-x)) 1px;
  background-position: var(--karta-x) calc(var(--cyfra-pas) - .58rem);
  border: 1px solid var(--linia-cicha);
  box-shadow: var(--cien-karta);
  padding: var(--cyfra-pas) var(--karta-x) var(--karta-y);
}
/* duża ozdobna cyfra — obrys, nie wypełnienie; ornament, nie informacja */
.tresc .plansza::before {
  content: counter(plansza, decimal-leading-zero);
  position: absolute; inset-block-start: var(--cyfra-gora); inset-inline-end: var(--karta-x);
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-variant-numeric: lining-nums;
  font-size: var(--cyfra); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--orn-cynober);
  pointer-events: none;
}
.tresc .plansza::after {
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline-start: 0; width: 2.6rem; height: var(--kreska);
  background: var(--cynober);
}
.tresc .plansza > p { position: relative; margin: 0; }
.tresc .plansza__slowo {
  display: block;
  text-wrap: balance;          /* ⚠ RECENZJA: „…struktura i / wykończenie." */
  margin-block-end: .45rem;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: 1.22rem; line-height: 1.24; letter-spacing: -.005em;
  color: var(--cynober-ciemny);
}
/* wariant „w wierszu” — fraza, która jest dopiero POCZĄTKIEM zdania */
.tresc .plansza__slowo--wbieg {
  display: inline; margin: 0;
  font-size: 1.1em; line-height: inherit; letter-spacing: 0;
}
.tresc .zestaw { counter-reset: plansza; }

/* --- 9. ZNAKI (nagłówek trzeciego stopnia jako plansza) -------------- */
.tresc .znaki {
  margin: clamp(1.4rem, .9rem + 1.4vw, 2.6rem) 0 clamp(1.6rem, 1rem + 1.6vw, 3rem);
  display: grid; gap: clamp(.9rem, .6rem + .9vw, 1.6rem);
  grid-template-columns: 1fr;
  align-items: start;   /* ⚠ jak wyżej — „Żelazko — prasowanie" zostawiało 150 px pustki */
}
@media (min-width: 780px)  { .tresc .znaki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tresc .znak-karta {
  position: relative; overflow: hidden;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  box-shadow: var(--cien-karta);
  padding: clamp(1.3rem, 1rem + 1.2vw, 2.2rem) clamp(1.2rem, .9rem + 1.2vw, 2.2rem)
           clamp(1.3rem, 1rem + 1.2vw, 2.2rem) clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
}
.tresc .znak-karta::before {
  content: ""; position: absolute; inset-block: -1px;
  inset-inline-start: -1px; width: var(--kreska);
  background: var(--cynober);
}
.tresc .znak-karta h3 {
  margin: 0 0 .5rem; text-wrap: balance;
  font-size: clamp(1.16rem, 1.05rem + .4vw, 1.44rem);
  color: var(--atrament);
}
.tresc .znak-karta p { margin: 0; color: var(--atrament-cichy); font-size: .98rem; }

/* ⭐⭐ SKALA POWYŻEJ 1366 — ciąg dalszy bloku 6b: SIATKI KART.
   ⚠⚠ Te dwie reguły MUSZĄ stać tutaj, a nie w bloku 6b. Miały tam tę samą
   specyficzność co „@media (min-width: 780px) .tresc .znaki” z sekcji 9, więc
   późniejsza reguła po cichu je wygaszała i siatka znaków zostawała na dwóch
   kolumnach mimo pozornie poprawnego zapisu. */
@media (min-width: 1500px) {
  /* pięć znaków pielęgnacyjnych w układzie 3 + 2 zamiast 2 + 2 + 1: przy 1920 px
     karta zwęża się z 850 do 555 px, czyli wiersz opisu przestaje mieć 80 znaków
     w miejscu, w którym ma być etykietą, a nie prozą */
  .tresc .znaki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* ⚠ TYLKO zestaw pięciokartowy. Przy dwóch kolumnach sierota w ostatnim
     rzędzie zostawiała przy 1920 px 850 px pustki obok siebie. Zestawy
     cztero- i dwukartowe zostają na dwóch kolumnach, bo 2 + 2 domyka się
     bez sieroty, a 3 + 1 dołożyłoby ją tam, gdzie jej nie było. */
  .tresc .zestaw:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- 10. ODSYŁACZ KIERUNKOWY I PRZYCISK ------------------------------ */
/* akapit, którego CAŁĄ treścią jest odsyłacz — bramka B7 traktuje go jak
   samodzielny cel UI, więc musi mieć co najmniej 44 px wysokości */
.tresc .przejscie { margin-block: 1.7em 0; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .8em;
  width: fit-content; max-width: 100%; flex-wrap: wrap; row-gap: .1em;
  min-height: 52px; padding: .5em .8em; margin-inline-start: -.8em;
  font-family: var(--kroj-tekst); font-weight: 700;
  font-size: .84rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--atrament); text-decoration: none;
  border-block-end: 2px solid var(--cynober);
}
.tresc .przejscie a::after {
  content: "→"; font-size: 1.15em; line-height: 1;
  color: var(--cynober-ciemny);
  transition: transform .22s ease;
}
.tresc .przejscie a:hover {
  color: var(--cynober-ciemny);
  background: var(--wiodaca-jasna);
}
.tresc .przejscie a:hover::after { transform: translateX(5px); }

.tresc .cta { margin-block: clamp(1.9rem, 1.2rem + 1.6vw, 3.2rem) 0; }
/* ⚠⚠ SELEKTOR MUSI DORÓWNAĆ `.tresc .przejscie a` (0-2-1), inaczej przycisk
   dostanie wygląd odsyłacza kierunkowego i napis dotknie ramki. */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; gap: .9em; justify-content: center;
  /* dopasowany do treści, a gdy etykieta MUSI się złamać (360–390 px) — obie
     linie wyśrodkowane, strzałka tuż za etykietą, nie 200 px dalej */
  width: fit-content; max-width: 100%;
  flex-wrap: wrap; row-gap: .15em; text-align: center;
  min-height: 60px; padding: .9rem 2.2rem; margin-inline-start: 0;
  background: var(--wiodaca); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca);
  font-family: var(--kroj-tekst); font-weight: 700;
  font-size: .88rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 6px 6px 0 0 var(--cynober);
}
.tresc .przejscie a.przycisk::after { content: "→"; color: var(--na-wiodacej); }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover {
  background: var(--akcent); border-color: var(--akcent);
  color: var(--na-akcencie); box-shadow: 6px 6px 0 0 var(--wiodaca);
}
.tresc .przejscie a.przycisk:hover::after { color: var(--na-akcencie); }

/* --- 11. LISTA WPISÓW — plansze lookbooka ---------------------------- */
.tresc .lista-wpisow {
  margin: clamp(1.8rem, 1.1rem + 1.8vw, 3.2rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1.1rem, .7rem + 1.4vw, 2.1rem);
  counter-reset: wpis;
}
@media (min-width: 720px)  { .tresc .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .tresc .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tresc .zapowiedz {
  counter-increment: wpis;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  /* pas numeru jak w planszy — cyfra nigdy nie dotyka tytułu i nigdy nie jest
     ścięta krawędzią karty (recenzja: blog-1366, wpis-1-1366, index-390) */
  padding: var(--cyfra-pas-duzy) var(--karta-x) var(--karta-y);
  background-color: var(--papier-karta);
  background-image: linear-gradient(90deg, var(--linia-cicha) 0 100%);
  background-repeat: no-repeat;
  background-size: calc(100% - 2 * var(--karta-x)) 1px;
  background-position: var(--karta-x) calc(var(--cyfra-pas-duzy) - .58rem);
  border: 1px solid var(--linia-cicha);
  box-shadow: var(--cien-karta);
}
/* duży numer planszy — obrys w cynobrze, wyłącznie ornament */
.tresc .zapowiedz::before {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-start: var(--cyfra-gora); inset-inline-end: var(--karta-x);
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-variant-numeric: lining-nums;
  font-size: var(--cyfra-duza); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--orn-cynober);
  pointer-events: none;
}
.tresc .zapowiedz::after {
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline-start: 0; width: 3.2rem; height: var(--kreska);
  background: var(--cynober);
}
.tresc .zapowiedz > * { position: relative; }
.tresc .zapowiedz__tytul {
  counter-increment: none;
  margin: 0 0 .7rem; padding: 0;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.24rem, 1.05rem + .7vw, 1.72rem); line-height: 1.16;
  letter-spacing: -.014em; color: var(--atrament);
  text-wrap: balance;
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--atrament); text-decoration: none;
}
.tresc .zapowiedz__tytul a:hover { color: var(--cynober-ciemny); }
.tresc .zapowiedz__tekst {
  margin: 0 0 1.3rem; color: var(--atrament-cichy);
  font-size: .95rem; line-height: 1.66;
}
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a { border-block-end-width: 2px; font-size: .78rem; }

/* --- 12. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  /* ⚠ RECENZJA: na blog-1366 pasmo nocne i stopka zlewały się w jeden czarny
     obszar. Stopka stoi teraz na czerni o stopień jaśniejszej niż pasmo nocne
     (#1C1916 wobec #100E0C) i ma pełną, widoczną kreskę znacznikową. */
  background-color: var(--czern-2);
  background-image:
    radial-gradient(58% 100% at 92% 0%, rgba(217, 64, 30, .20) 0%, rgba(217, 64, 30, 0) 62%),
    radial-gradient(46% 80% at 4% 100%, rgba(122, 112, 98, .24) 0%, rgba(122, 112, 98, 0) 66%);
  color: var(--kosc);
  padding-block: clamp(2.6rem, 1.4rem + 2.8vw, 4.6rem);
}
.stopka::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--orn-noc) 0 1px, transparent 1px 76px);
  mask-image: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
  pointer-events: none;
}
.stopka::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: var(--kreska);
  /* ⚠⚠ ciemna połowa znacznika była rysowana atramentem — na czerni 1,0:1,
     czyli niewidoczna: zostawała cynobrowa kreska zaczynająca się nagle
     w połowie ekranu. Ciemną połowę rysuje teraz barwa nocna (4,5:1). */
  background: linear-gradient(90deg, var(--linia-noc-jasna) 0 62%, var(--cynober) 62% 100%);
}
.stopka__pas {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 3rem);
}
.stopka__znak {
  margin: 0;
  display: inline-flex; align-items: baseline; gap: .22em; flex-wrap: wrap;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.15rem, 1rem + .45vw, 1.7rem); line-height: 1.15;
}
.stopka .znak__a { color: var(--kosc); }
.stopka .znak__b { color: var(--cynober-jasny); border-block-end-color: transparent; }
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: 0 clamp(.4rem, 2vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 48px;   /* B7 */
  padding-inline: .3em; text-decoration: none;
  color: var(--kosc-cicha); font-weight: 600;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--kosc); border-block-end-color: var(--cynober); }
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 48px; padding: .4em 1.4em;
  border: 1px solid var(--cynober-jasny);
  color: var(--cynober-jasny); text-decoration: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--cynober-jasny); color: var(--czern); }

/* --- 13. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.7rem 0 2.4rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia-cicha);
  background: var(--papier-karta); padding: 0; overflow: hidden;
}
.próbka__pole { display: block; height: 84px; }
.próbka__opis {
  display: block; padding: .8rem 1rem;
  font-size: .82rem; line-height: 1.55; color: var(--atrament);
}

/* --- 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 { position: static; }
  .hero, .stopka, .pas--noc {
    background: #FFFFFF !important; color: #000000 !important;
  }
  .na-czerni { background: #FFFFFF !important; }
  .hero .tytul, .hero .lid, .stopka__znak, .stopka__menu a,
  .na-czerni, .na-czerni h2, .na-czerni h3, .na-czerni p,
  .znak__a, .znak__b { color: #000000 !important; }
  .hero__wykroj, .hero::before, .pas--noc::before, .pas--noc::after,
  .stopka::before, .stopka::after,
  .pas > .kontener::before, .pas > .kontener::after { display: none !important; }
  .plyta { box-shadow: none; margin-block-start: 0; max-width: 100%; }
  .zapowiedz, .plansza, .znak-karta { box-shadow: none; background: #FFFFFF; }
  .przycisk { box-shadow: none; background: #FFFFFF; color: #000000; border-color: #000000; }
  .pas--plotno, .pas--wstep, .pas--arkusz, .pas--plyta { background: #FFFFFF; }
  a { color: #000000; }
}