@charset "utf-8";
/* =====================================================================
   Węgieł — system projektowy makiety olsztynek.mazury.pl (wersja premium)
   Seria STRONY-WWW-ST-NQ. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy.
   Idea: ciesielski węgieł chałup skansenu. Strona zbudowana jak ściana
   z belek: ciemny hero z ornamentem słojów, pełnoszerokie pasma-belki
   naprzemiennie len/ciemne drewno, plakietki nagłówków wpuszczone w spoinę
   między pasmami jak zamek ciesielski, karty-deski z czopem w narożniku,
   stopka-podwalina. Akcent mchu na przyciskach i wskazaniach.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* baza z motyw.json */
  --papier:          #F8F5EF;
  --papier-karta:    #FFFFFF;
  --tlo-2:           #EFE8DC;
  --wiodaca-jasna:   #E2D2BC;
  --atrament:        #20180F;
  --atrament-cichy:  #564734;
  --wiodaca:         #6E4A22;
  --wiodaca-ciemna:  #523517;
  --akcent:          #39611F;
  --linia:           #967A56;
  --linia-cicha:     #D5C6B0;
  --na-wiodacej:     #FFFFFF;
  --na-akcencie:     #FFFFFF;
  /* dołożone odcienie TEJ SAMEJ rodziny (ciemne drewno + jasny mech),
     wszystkie pary policzone: biel na każdym ciemnym >= 13:1,
     wiodąca jasna na każdym ciemnym >= 10:1, mech jasny >= 9,5:1,
     linia #967A56 na desce 3,88:1 i na podwalinie 4,47:1 (nietekstowe). */
  --drewno-hero:     #2A1D10;   /* tło hero, dół gradientu            */
  --drewno-hero-2:   #3B2A16;   /* góra gradientu hero                */
  --deska-ciemna:    #2E2113;   /* ciemne pasmo-belka w treści        */
  --podwalina:       #1E1509;   /* stopka                             */
  --mech-jasny:      #B9D48E;   /* akcent mchu na ciemnych deskach    */
  --akcent-ciemny:   #2E4E19;   /* mech po najechaniu                 */

  --kroj-naglowek: "Zilla Slab", "Courier New", Georgia, serif;
  --kroj-tekst:    "Asap", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* kolumna prozy w REM (jedna krawędź dla h2 i akapitów; ~66–76 znaków).
     ⭐⭐ SKALA POWYŻEJ 1366: --szeroka rośnie z pismem korzenia, a wypełnienie
     --margines ma TWARDY SUFIT, żeby powyżej 1500 px szerokość szła w treść,
     a nie w białe pole. Przy 1920: łam 77rem ≈ 1595 px + 2 × 68 px = 1731 px,
     czyli 94 px marginesu z każdej strony (reguła serii celuje w ~95 px).
     Proza zostaje wąska (--kolumna), bo szerokość odbiera ją LISTWA. */
  --kolumna:   34rem;
  --szeroka:   77rem;
  --margines:  clamp(20px, 4.2vw, 68px);
  /* listwa = zewnętrzna kolumna na plakietkę nagłówka i przycisk;
     rowek = spoina ciesielska między listwą a prozą (i oś czasu we wpisie) */
  --listwa:    26rem;
  --rowek:     clamp(2rem, 2.4vw, 3rem);
  --pas-pad:   clamp(2.7rem, 2rem + 2.6vw, 4.8rem);
  --promien:   4px;
  --cien-deski: 0 1px 2px rgba(32, 24, 15, .10), 0 14px 34px -18px rgba(32, 24, 15, .45);
}

/* --- 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 katalogu: pasy full-bleed i ornamenty nie mogą dokładać
   przewijania poziomego; clip nie psuje position:sticky */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

body {
  margin: 0;
  background: var(--papier);
  /* delikatny słój papieru — matowa faktura zamiast gołej bieli */
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 74, 34, .035) 0 1px, transparent 1px 11px);
  color: var(--atrament);
  font-family: var(--kroj-tekst);
  font-size: 1rem;
  line-height: 1.68;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--wiodaca-ciemna); overflow-wrap: anywhere; }
/* pułapka „czwarty wariant": kolor pogrubienia nigdy na sztywno */
strong, b { color: inherit; }

:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; border-radius: var(--promien); }
.naglowek :focus-visible, .stopka :focus-visible,
.hero :focus-visible, .pas--ciemny :focus-visible { outline-color: var(--mech-jasny); }

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (bramka B7) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 180px; 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: 40;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.4rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  font-weight: 700; text-decoration: none;
}

/* --- 3. KONTENERY -----------------------------------------------------
   Dwie szerokości o wspólnej osi: wąska kolumna prozy (wyśrodkowana,
   bramka B13 mierzy właśnie ją) i szeroki łam kart oraz hero. */
.kontener { width: 100%; padding-inline: var(--margines); margin-inline: auto; }
.kontener--tekst  { max-width: calc(var(--kolumna) + 2 * var(--margines)); }
.kontener--szeroki { max-width: calc(var(--szeroka) + 2 * var(--margines)); }

/* --- 4. NAGŁÓWEK — ciemna płyta nad hero ------------------------------ */
.naglowek {
  position: relative;
  background: var(--drewno-hero);
  /* rowek mchu — sygnał barwy akcentu już od pierwszego piksela */
  border-block-start: 4px solid var(--akcent);
}
.naglowek::after {           /* jaśniejszy rowek oddzielający płytę od hero */
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
  height: 1px; background: rgba(226, 210, 188, .28);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .4rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.6rem, 1.2vw, 1.05rem);
  max-width: calc(var(--szeroka) + 2 * var(--margines));
}

/* sygnatura słowna — typograficzna; nigdy nie udaje logotypu firmy (T8) */
.znak {
  display: inline-flex; align-items: center; gap: .55em; min-height: 44px;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.14rem, 1rem + .55vw, 1.56rem);
  letter-spacing: .01em; text-decoration: none;
  color: var(--na-wiodacej);
}
.znak::before {              /* czop — kwadrat wiodącej z rowkiem mchu */
  content: ""; flex: none; width: .62em; height: .62em;
  background: var(--wiodaca-jasna);
  box-shadow: .22em .22em 0 var(--akcent);
}
.znak:hover { color: var(--wiodaca-jasna); }

.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 clamp(.15rem, 1vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: .7em;
  font-weight: 700; font-size: .95rem; letter-spacing: .03em;
  text-decoration: none;
  border-block-end: 3px solid transparent;
  color: var(--wiodaca-jasna);
  transition: color .15s, border-color .15s;
}
.menu__link:hover { color: var(--na-wiodacej); border-block-end-color: var(--linia); }
.menu__link[aria-current="page"] { color: var(--na-wiodacej); border-block-end-color: var(--mech-jasny); }

/* --- 5. HERO — głęboki brąz, słoje, odważny tytuł --------------------- */
.hero {
  position: relative;
  overflow: clip;
  background-color: var(--drewno-hero);
  background-image:
    linear-gradient(160deg, var(--drewno-hero-2) 0%, var(--drewno-hero) 46%, #241809 100%);
  color: var(--na-wiodacej);
  padding-block: clamp(3.1rem, 2rem + 4.4vw, 7rem) clamp(3.6rem, 2.4rem + 4.6vw, 7.6rem);
}
.hero::after {               /* listwa czopów — złącze hero z pierwszą belką */
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 10px;
  background: repeating-linear-gradient(90deg,
    var(--wiodaca) 0 26px, rgba(226, 210, 188, .22) 26px 27px, transparent 27px 52px);
}
.hero__wnetrze { position: relative; z-index: 1; max-width: calc(var(--szeroka) + 2 * var(--margines)); }
.hero__tekst { max-width: 46rem; }

.hero__sloje {               /* wielkoformatowy ornament słojów (dekoracja 6B) */
  position: absolute; z-index: 0;
  inset-inline-end: -6%; inset-block-end: -34%;
  width: min(56vw, 46rem); height: auto;
  color: var(--papier);      /* pomiar B6 czyta color; rysunek niesie stroke-opacity */
  pointer-events: none;
}

.tytul {
  position: relative;
  margin: 0 0 clamp(1rem, .7rem + 1vw, 1.7rem);
  padding-block-start: clamp(1.1rem, 2.2vw, 1.9rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2.35rem, 1.5rem + 3vw, 4.9rem);
  line-height: 1.06; letter-spacing: -.018em;
  color: var(--na-wiodacej);
  text-wrap: balance;
}
.tytul::before {             /* węgieł — kątownik nad tytułem */
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(54px, 7vw, 104px); height: clamp(14px, 2vw, 24px);
  border-block-start: 4px solid var(--mech-jasny);
  border-inline-start: 4px solid var(--wiodaca-jasna);
}
.lid {
  margin: 0;
  max-width: 40em;
  font-size: clamp(1.08rem, 1rem + .42vw, 1.34rem);
  line-height: 1.62;
  color: var(--wiodaca-jasna);
}

/* --- 6. PASMA-BELKI --------------------------------------------------- */
.tresc { position: relative; }
.pas { position: relative; padding-block: var(--pas-pad); }
.pas > .kontener { position: relative; z-index: 1; }

.pas--papier { background: transparent; }
.pas--len    { background: var(--tlo-2);
               border-block: 1px solid var(--linia-cicha); }
.pas--jasna  { background: var(--wiodaca-jasna);
               border-block: 1px solid var(--linia-cicha); }
.pas--ciemny {
  background-color: var(--deska-ciemna);
  background-image: linear-gradient(105deg, rgba(110, 74, 34, .30) 0%, rgba(110, 74, 34, 0) 55%);
  color: var(--na-wiodacej);
}
.pas--koncowy { padding-block-end: calc(var(--pas-pad) + 1.4rem); }

/* ornament słojów w jasnych pasmach — cichy, w rodzinie drewna */
.pas__sloje {
  position: absolute; z-index: 0;
  inset-inline-end: 0; inset-block-end: 0;
  width: clamp(230px, 24vw, 430px); height: auto;
  color: var(--wiodaca-ciemna);
  pointer-events: none;
}

/* plakietka nagłówka sekcji — belka WPUSZCZONA w spoinę między pasmami */
.pas > .kontener--tekst > h2:first-child {
  margin-block-start: calc(-1 * var(--pas-pad) - .95em);
}
.tresc h2 {
  width: fit-content;
  margin: clamp(2.2rem, 1.6rem + 1.6vw, 3.4rem) 0 1rem;
  padding: .42em .95em .42em .8em;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.42rem, 1.15rem + 1vw, 2.1rem);
  line-height: 1.2; letter-spacing: -.01em;
  color: var(--wiodaca-ciemna);
  background: var(--wiodaca-jasna);
  border-inline-start: .5em solid var(--wiodaca);
  border-radius: var(--promien);
  box-shadow: var(--cien-deski);
  position: relative;
}
.tresc h2::after {           /* czop w narożniku plakietki */
  content: ""; position: absolute;
  inset-block-start: -5px; inset-inline-end: -5px;
  width: 11px; height: 11px;
  background: var(--akcent);
}
/* plakietka na ciemnej desce — jaśniejsza belka, rowek mchu zostaje */
.pas--ciemny h2 { background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
                  border-inline-start-color: var(--akcent); }

.tresc h3 {
  margin: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem) 0 .5rem;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.12rem, 1rem + .5vw, 1.44rem);
  line-height: 1.3; color: var(--atrament);
}

.tresc p { margin: 0 0 1.05em; }
.pas > .kontener--tekst > :last-child { margin-block-end: 0; }

.tresc p a:not(.przycisk), .tresc li a:not(.przycisk) {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.tresc p a:not(.przycisk):hover, .tresc li a:not(.przycisk):hover {
  color: var(--akcent); text-decoration-thickness: 2px;
}
.pas--ciemny p a:not(.przycisk), .pas--ciemny li a:not(.przycisk) {
  color: var(--na-wiodacej); text-decoration-color: var(--mech-jasny);
}
.pas--ciemny p a:not(.przycisk):hover, .pas--ciemny li a:not(.przycisk):hover {
  color: var(--mech-jasny);
}
/* odsyłacz w lidzie hero — ciemne drewno pod spodem, więc jak na desce */
.hero p a:not(.przycisk), .hero li a:not(.przycisk) {
  color: var(--na-wiodacej); text-decoration-color: var(--mech-jasny);
}
.hero p a:not(.przycisk):hover, .hero li a:not(.przycisk):hover {
  color: var(--mech-jasny);
}

/* tablica na ciemnej desce (godziny otwarcia) — obita listwą */
.pas--ciemny .tablica {
  padding: clamp(1.1rem, .8rem + 1.2vw, 1.9rem) clamp(1.1rem, .8rem + 1.4vw, 2rem);
  background: rgba(248, 245, 239, .05);
  border: 1px solid var(--linia);
  border-block-start: 5px solid var(--wiodaca);
  border-radius: var(--promien);
  box-shadow: inset 0 1px 0 rgba(226, 210, 188, .14), var(--cien-deski);
}

/* --- 7. LISTY --------------------------------------------------------- */
.wyliczenie { margin: 0 0 1.3em; padding: 0; list-style: none; }
.wyliczenie li { position: relative; padding-inline-start: 1.5em; margin-block-end: .55em; }
.wyliczenie li::before {     /* kwadratowy punktor warsztatowy */
  content: ""; position: absolute;
  inset-block-start: .52em; inset-inline-start: .05em;
  width: .55em; height: .55em;
  background: var(--wiodaca);
  box-shadow: 2px 2px 0 var(--linia-cicha);
}

/* rząd tabliczek warsztatowych — wyliczenia eksponowane jako deski */
.tabliczki { margin: clamp(1.4rem, 1rem + 1.2vw, 2.4rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .7rem + 1vw, 1.7rem);
}
/* ⭐ siatka rośnie z ekranem: powyżej ~1500 px w rzędzie mieści się więcej desek,
   a przy trzech pozycjach auto-fit zwija puste ścieżki i rozciąga istniejące. */
.tabliczki { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.tabliczki li {
  position: relative; margin: 0;
  padding: clamp(1.15rem, .9rem + 1vw, 1.8rem) clamp(1.05rem, .8rem + 1vw, 1.6rem)
           clamp(1.15rem, .9rem + 1vw, 1.8rem) calc(clamp(1.05rem, .8rem + 1vw, 1.6rem) + 1.15em);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-block-start: 6px solid var(--wiodaca);
  border-radius: var(--promien);
  box-shadow: var(--cien-deski);
}
.tabliczki li::before {      /* czop wpuszczony w narożnik deski */
  content: ""; position: absolute;
  inset-block-start: .95em; inset-inline-start: .9em;
  width: .6em; height: .6em;
  background: var(--akcent);
  box-shadow: 2px 2px 0 var(--wiodaca-jasna);
}
.tabliczki li::after { content: none; }

.kroki { margin: 0 0 1.5em; padding: 0; list-style: none; counter-reset: krok; }
.kroki li {
  counter-increment: krok; position: relative;
  padding: .55em 0 .55em 3em;
  border-block-end: 1px dashed var(--linia-cicha);
}
.kroki li:last-child { border-block-end: 0; }
.kroki li::before {
  content: counter(krok); position: absolute;
  inset-inline-start: 0; inset-block-start: .45em;
  width: 2.05em; height: 2.05em;
  display: grid; place-items: center;
  background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  border: 1px solid var(--wiodaca); border-radius: var(--promien);
  font-family: var(--kroj-naglowek); font-weight: 700; font-size: .85em;
}

/* --- 8. BLOK WIERSZOWY (schemat ze źródła) ---------------------------- */
.wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.8rem) clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-inline-start: 5px solid var(--wiodaca);
  border-radius: var(--promien);
  box-shadow: var(--cien-deski);
  font-family: var(--kroj-maszyna);
  font-size: clamp(.82rem, .78rem + .22vw, .96rem);
  line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
}

/* --- 9. ODSYŁACZE KIERUNKOWE ------------------------------------------ */
.odsylacz {
  margin: 1.15em 0 1.7em;
  padding: .75em 1.1em .75em 1.15em;
  background: var(--wiodaca-jasna);
  border-inline-start: 4px solid var(--wiodaca);
  border-radius: var(--promien);
  font-size: .97rem; color: var(--atrament);
}
.odsylacz a { font-weight: 700; }

/* akapit, którego CAŁĄ treścią jest odsyłacz — bramka B7 wymaga 44 px */
.tresc .przejscie { margin-block: 1.1em 0; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .3rem 0;
  font-weight: 700; color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.tresc .przejscie a:hover { color: var(--akcent); }
.tresc li > a:only-child {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: .2rem;
}

/* --- 10. PRZYCISK — mech, złącze czopowe ------------------------------ */
.tresc .cta { margin-block: clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem) 0; }
/* ⚠⚠ specyficzność musi bić `.tresc .przejscie a` (0-2-1) i `.tresc p a` */
.przycisk, .tresc a.przycisk, .tresc p a.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .72rem 1.7rem;
  background: var(--akcent); color: var(--na-akcencie);
  border: 1px solid var(--akcent-ciemny); border-radius: var(--promien);
  font-weight: 700; font-size: 1.02rem; letter-spacing: .015em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(248, 245, 239, .25), 5px 5px 0 var(--wiodaca-jasna);
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.przycisk:hover, .tresc p a.przycisk:hover {
  background: var(--akcent-ciemny); color: var(--na-akcencie);
  transform: translate(2px, 2px);
  box-shadow: inset 0 1px 0 rgba(248, 245, 239, .25), 3px 3px 0 var(--wiodaca-jasna);
}
.pas--ciemny .przycisk, .pas--ciemny .tresc p a.przycisk, .tresc .pas--ciemny p a.przycisk {
  box-shadow: inset 0 1px 0 rgba(248, 245, 239, .25), 5px 5px 0 var(--wiodaca);
}
.pas--ciemny .przycisk:hover, .tresc .pas--ciemny p a.przycisk:hover {
  box-shadow: inset 0 1px 0 rgba(248, 245, 239, .25), 3px 3px 0 var(--wiodaca);
}

/* --- 11. LISTA WPISÓW — karty-deski ----------------------------------- */
.lista-wpisow {
  margin: clamp(1.2rem, .9rem + 1vw, 2rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1.1rem, .7rem + 1.3vw, 2rem);
}
.lista-wpisow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }

.zapowiedz {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, .9rem + 1.2vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-block-start: 6px solid var(--wiodaca);
  border-radius: var(--promien);
  box-shadow: var(--cien-deski);
  transition: transform .18s, box-shadow .18s;
}
.zapowiedz:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(32, 24, 15, .10), 0 22px 44px -18px rgba(32, 24, 15, .5);
}
.zapowiedz::before {         /* czop wpuszczony w górną listwę karty */
  content: ""; position: absolute;
  inset-block-start: -6px; inset-inline-start: 1.15rem;
  width: 12px; height: 12px;
  background: var(--akcent);
}
/* tytuł karty JEST nagłówkiem h2 — cofamy plakietkę tym samym prefiksem */
.tresc .zapowiedz__tytul {
  width: auto; margin: 0 0 .55rem; padding: 0;
  border: 0; background: none; box-shadow: none;
  font-family: var(--kroj-naglowek);
  font-size: clamp(1.14rem, 1rem + .5vw, 1.4rem); line-height: 1.26;
  color: var(--wiodaca-ciemna);
}
.tresc .zapowiedz__tytul::after, .tresc .zapowiedz__tytul::before { content: none; }
.tresc .zapowiedz .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--wiodaca-ciemna); text-decoration: none;
}
.tresc .zapowiedz .zapowiedz__tytul a:hover { color: var(--akcent); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1.1rem; color: var(--atrament-cichy); font-size: .98rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .5em; 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 .zapowiedz__wiecej a::before {
  content: ""; flex: none; width: .5em; height: .5em; background: var(--akcent);
}
.tresc .zapowiedz .zapowiedz__wiecej a:hover { color: var(--akcent); border-block-end-color: var(--akcent); }

/* --- 12. WPIS — oś czasu i inicjał ------------------------------------ */
.widok--wpis .pas--proza .kontener--tekst > p:first-of-type::first-letter {
  float: left;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: 3.15em; line-height: .84;
  padding: .08em .14em .04em 0;
  color: var(--wiodaca);
}
@media (min-width: 1100px) {
  .widok--wpis .pas--proza .kontener--tekst { position: relative; }
  .widok--wpis .pas--proza .kontener--tekst::before {   /* pion osi czasu */
    content: ""; position: absolute;
    inset-block: .4rem;
    /* 2,3 rem na lewo od KRAWĘDZI TEKSTU (kontener ma padding --margines) */
    inset-inline-start: calc(var(--margines) - 2.3rem);
    width: 3px; background: var(--linia-cicha);
  }
  .widok--wpis .pas--proza h2 { margin-inline-start: 0; }
  .widok--wpis .pas--proza h2::before {                 /* sęk na osi */
    content: ""; position: absolute;
    inset-block-start: .75em; inset-inline-start: -2.3rem;
    translate: calc(-50% + 1.5px) 0;
    width: 13px; height: 13px;
    background: var(--wiodaca); border: 3px solid var(--papier);
    box-shadow: 0 0 0 1px var(--linia);
  }
}

/* --- 13. STOPKA-PODWALINA --------------------------------------------- */
.stopka {
  position: relative;
  background: var(--podwalina);
  color: var(--na-wiodacej);
  border-block-start: 7px solid var(--wiodaca);
  padding-block: clamp(2.2rem, 1.6rem + 2vw, 3.6rem);
}
.stopka::before {            /* jaśniejszy rowek podwaliny */
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 3px;
  height: 1px; background: rgba(226, 210, 188, .35);
}
.stopka .kontener {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem clamp(1rem, 3vw, 3rem);
  max-width: calc(var(--szeroka) + 2 * var(--margines));
}
.stopka__znak {
  margin: 0; display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.06rem, 1rem + .3vw, 1.3rem);
  color: var(--na-wiodacej); letter-spacing: .01em;
}
.stopka__znak::before {
  content: ""; flex: none; width: .58em; height: .58em;
  background: var(--wiodaca-jasna); box-shadow: .22em .22em 0 var(--akcent);
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: 0 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(--wiodaca-jasna); font-weight: 700; font-size: .95rem;
  border-block-end: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.stopka__menu a:hover { color: var(--na-wiodacej); border-block-end-color: var(--mech-jasny); }

/* --- 14. 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(--promien);
  background: var(--papier-karta); padding: 0; overflow: hidden;
  box-shadow: var(--cien-deski);
}
.próbka__pole { display: block; height: 74px; }
.próbka__opis {
  display: block; padding: .7rem .9rem;
  font-family: var(--kroj-maszyna); font-size: .82rem;
  color: var(--atrament); line-height: 1.5;
}

/* --- 14b. SZEROKI EKRAN — ŚCIANA NA PEŁNĄ BELKĘ -----------------------
   ⭐⭐ ZASADA SERII: powyżej 1366 px makieta ma ROSNĄĆ, a nie dokładać
   marginesu. Sama szersza rama tego nie załatwia — rozciągnięta proza daje
   105-znakowe wiersze i jest gorsza niż wąska. Dlatego odzyskana szerokość
   dostaje ROLE:
     • hero rozkłada się na dwie kolumny (tytuł | lid) — lid zwęża się
       z 46rem do 34rem, choć hero zajmuje cały łam;
     • pasma-belki dostają LISTWĘ: plakietka nagłówka i przycisk stają OBOK
       prozy, w zewnętrznej kolumnie, zamiast nad nią i pod nią;
     • proza zostaje przy --kolumna (34rem ≈ 68 znaków) na każdej szerokości;
     • spoinę zamyka pionowa listwa czopowa, a ornament słojów wchodzi
       w zewnętrzną kolumnę zamiast uciekać poza krawędź okna.
   ---------------------------------------------------------------------- */

/* HERO — dwa łamy: tytuł na belce nośnej, lid w sąsiednim polu.
   ⚠ ten sam próg co pasma: jeden „szeroki tryb", bez pośredniego stanu,
   w którym lid stoi wysoką kolumną nad pustym polem tytułu */
@media (min-width: 1340px) {
  .hero__tekst {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    column-gap: clamp(2rem, 3vw, 3.6rem);
    align-items: end;
  }
  .hero .tytul {
    grid-column: 1; margin-block-end: 0;
    /* ⚠ „balance" zwężał tytuł do połowy łamu i robił dziurę między kolumnami */
    text-wrap: wrap;
    font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5.4rem);
  }
  .hero .lid {
    grid-column: 2;
    max-width: var(--kolumna);        /* proza zostaje wąska mimo szerokiego hero */
    padding-inline-start: clamp(1.4rem, 1.6vw, 2.2rem);
    border-inline-start: 3px solid rgba(226, 210, 188, .34);
  }
  /* ornament nie może wejść pod lid — schodzi w dół i pod tytuł */
  .hero__sloje { inset-inline-end: 26%; inset-block-end: -52%; width: min(38vw, 34rem); }
}

/* PASMA-BELKI — listwa nagłówków obok prozy */
@media (min-width: 1340px) {
  .pas > .kontener--tekst {
    /* ten sam łam co karty i hero: marginesu tyle samo, treści więcej */
    max-width: calc(var(--szeroka) + 2 * var(--margines));
    display: grid;
    grid-template-columns:
      [listwa] minmax(0, var(--listwa))
      [proza]  minmax(0, var(--kolumna))
      [ozdoba] minmax(0, 1fr);
    column-gap: var(--rowek);
    /* ⚠ rytm pionowy zostaje na marginesach akapitów — row-gap dokładałby
       odstęp między KAŻDYM akapitem, bo każdy siedzi w osobnym wierszu siatki */
    row-gap: 0;
    align-items: start;
  }
  /* Pasmo bez nagłówka (wstęp bloga) nie ma czego postawić na listwie.
     ⚠⚠ Dosunięcie takiej samotnej prozy do lewej krawędzi łamu jest CZERWIENIĄ
     B13: przy 1920 zostawało 1053 px (55% ekranu) martwego pola po prawej.
     Lead dostaje więc oś łamu — stoi pośrodku, bez listwy i bez spoiny. */
  .pas > .kontener--tekst:not(:has(> h2)) {
    grid-template-columns:
      [pusta]  minmax(0, 1fr)
      [proza]  minmax(0, var(--kolumna))
      [ozdoba] minmax(0, 1fr);
  }
  .pas > .kontener--tekst:not(:has(> h2))::after { content: none; }
  /* nagłówek i wezwanie idą na listwę, cała proza zostaje w swoim łamie */
  .pas > .kontener--tekst > h2   { grid-column: listwa; text-wrap: balance; }
  .pas > .kontener--tekst > p,
  .pas > .kontener--tekst > h3,
  .pas > .kontener--tekst > ul,
  .pas > .kontener--tekst > ol,
  .pas > .kontener--tekst > .wzor,
  .pas > .kontener--tekst > .odsylacz { grid-column: proza; }
  .pas > .kontener--tekst > p.cta     { grid-column: listwa; margin-block-start: .2rem; }

  /* listwa czopowa — pionowa spoina domykająca łam od zewnątrz */
  .pas > .kontener--tekst::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset-block: .4rem;
    inset-inline-start: calc(var(--margines) + var(--listwa) + 2 * var(--rowek) + var(--kolumna));
    inset-inline-end: var(--margines);
    /* ⚠ w paśmie bez nagłówka kolumna zewnętrzna jest dwa razy szersza —
       bez sufitu pole słojów rozlewałoby się na pół ekranu */
    max-width: clamp(160px, 18vw, 330px);
    background:
      /* pionowa spoina */
      linear-gradient(var(--linia), var(--linia)) 0 0 / 3px 100% no-repeat,
      /* czopy wpuszczone w spoinę */
      repeating-linear-gradient(180deg, var(--wiodaca) 0 17px, rgba(110, 74, 34, 0) 17px 58px)
        0 0 / 14px 100% no-repeat,
      /* pole słojów — kolumna zewnętrzna dostaje materiał, nie pustkę */
      repeating-linear-gradient(90deg, rgba(110, 74, 34, .12) 0 1px, rgba(110, 74, 34, 0) 1px 9px)
        22px 0 / calc(100% - 22px) 100% no-repeat;
  }
  .pas--ciemny > .kontener--tekst::after {
    background:
      linear-gradient(var(--linia), var(--linia)) 0 0 / 3px 100% no-repeat,
      repeating-linear-gradient(180deg, var(--wiodaca-jasna) 0 17px, rgba(226, 210, 188, 0) 17px 58px)
        0 0 / 14px 100% no-repeat,
      repeating-linear-gradient(90deg, rgba(226, 210, 188, .13) 0 1px, rgba(226, 210, 188, 0) 1px 9px)
        22px 0 / calc(100% - 22px) 100% no-repeat;
  }

  /* ornament słojów wchodzi w zewnętrzną kolumnę łamu, nie w krawędź okna */
  .pas__sloje {
    inset-inline-end: max(0px, calc((100vw - var(--szeroka) - 2 * var(--margines)) / 2));
    width: clamp(240px, 17vw, 330px);
  }

  /* WPIS — plakietki dosunięte do spoiny, oś czasu w rowku między łamami */
  .widok--wpis .pas--proza > .kontener--tekst > h2 {
    justify-self: end; margin-block-start: 0;
  }
  /* skoro nagłówek stoi OBOK akapitu, odstęp między rozdziałami niesie akapit */
  .widok--wpis .pas--proza > .kontener--tekst > p {
    margin-block-end: clamp(1.9rem, 1.4rem + 1.5vw, 3.2rem);
  }
  .widok--wpis .pas--proza .kontener--tekst::before {
    inset-inline-start: calc(var(--margines) + var(--listwa) + var(--rowek) / 2);
  }
  .widok--wpis .pas--proza h2::before {
    inset-block-start: .78em;
    inset-inline-start: auto;
    inset-inline-end: calc(-1 * (var(--rowek) / 2) - 8px);
    translate: none;
  }
}

/* --- 15. RUCH I DRUK -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zapowiedz:hover, .przycisk:hover, .tresc p a.przycisk:hover { transform: none; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; }
  .hero, .pas--ciemny, .naglowek, .stopka { background: #FFFFFF !important; color: #000000; }
  .hero__sloje, .pas__sloje, .hero::after { display: none !important; }
  a { color: #000000; }
}