/* ====================================================================
   „TRAKT" — olsztyn.warmia.pl · przebudowa premium 2026-08-30
   Kronika miejska: cegła gotyku na ciemnym atramencie, papier, muzeum.
   Jeden system tokenów; zero JS; zero zdjęć; grafika = CSS + inline SVG.
   Pułapki: linki prozy przez :not(.przycisk); strong{color:inherit};
   overflow-x:clip na html/body; ozdobniki kotwiczone do komponentów,
   NIGDY do main.tresc (B13c); menu bez <details> (T7 nie dotyczy).
   ==================================================================== */

:root {
  /* papiery i powierzchnie */
  --papier:        #FAF6F0;
  --karta:         #FFFFFF;
  --tlo2:          #F2EAE0;
  --wiodaca-jasna: #EED9CB;
  /* atramenty */
  --atrament:      #241B14;
  --atrament-cichy:#5C4A3B;
  /* cegła gotyku */
  --wiodaca:       #8F3320;   /* 7,33:1 na papierze */
  --wiodaca-ciemna:#6C2415;   /* 10,26:1 na papierze */
  --cegla-zar:     #C96540;   /* rozgrzana cegła — kreski, węzły (4,70:1 na nocy) */
  --akcent:        #1F5A56;   /* 7,35:1 na papierze */
  --linia:         #A57A62;   /* 3,51:1 — element nietekstowy */
  --linia-cicha:   #D9C7B8;   /* dekoracja */
  /* NOC — ciemne panele i hero (atramentowo-ceglaste) */
  --noc:           #1D1310;   /* podstawa mierzalna (kolor tła) */
  --noc-glebia:    #170F0C;
  --noc-cegla:     #43200F;
  --na-nocy:       #FAF6F0;   /* 16,92:1 na nocy */
  --na-nocy-cichy: #E7D5C4;   /* 12,76:1 na nocy */
  --na-nocy-link:  #EED9CB;   /* 13,38:1 na nocy */
  --na-nocy-rok:   #EFB08C;   /* 9,77:1 na nocy */
  --na-wiodacej:   #FFFFFF;
  /* miary
     ⚠⚠ PRZEBUDOWA SKALI 2026-08-31 (decyzja użytkownika: „makieta ma ROSNĄĆ
     powyżej 1366 px, a nie dokładać marginesu"). Przy 1920 px najszerszy moduł
     treści zostawiał po 285 px z każdej strony, a kolumna prozy rozlewała się
     do 1056 px (≈105 znaków w wierszu). Były to DWIE wady naraz, więc i dwie
     zmiany naraz: kontener ROŚNIE (83rem ≈ 1720 px przy 1920 => ~100 px
     marginesu), a proza WĘŻEJE (38rem ≈ 787 px ≈ 76 znaków).
     ⚠ PODWÓJNY MARGINES: kontener miał własne wypełnienie 5vw/112px OBOK
     max-width. Skoro szerokość ogranicza teraz max-width, wypełnienie zeszło
     do roli rowka (4vw/56px) — inaczej margines liczyłby się dwa razy. */
  --kolumna:       38rem;                       /* łam prozy w rem => rośnie z pismem */
  --szeroki:       83rem;                       /* ≈1720 px przy 1920 => ~100 px marginesu */
  --margines:      clamp(20px, 4vw, 56px);      /* rowek WEWNĄTRZ kontenera, nie margines strony */
  --rowek:         clamp(1.8rem, 3.4vw, 5rem);  /* odstęp między łamem sygnatury a prozą */
  --zakladka:      4.25rem;                     /* nachodzenie płyty na hero */
  --promien:       0px;                         /* gotycka ostrość */
  --cien-plyty:    0 1px 2px rgba(36,27,20,.07), 0 30px 60px -28px rgba(23,15,12,.55);
  --cien-karty:    0 1px 2px rgba(36,27,20,.06), 0 16px 40px -18px rgba(108,36,21,.35);
  --gradient-cegly: linear-gradient(90deg, var(--wiodaca-ciemna), var(--wiodaca) 45%, var(--cegla-zar));
  --pismo-naglowka: "Spectral", Georgia, "Times New Roman", serif;
  --pismo-tekstu:  "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- reset i podłoże ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem); }
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(--pismo-tekstu);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
strong, b { color: inherit; }            /* pułapka nr 1, wariant 4 */
::selection { background: var(--wiodaca); color: var(--na-wiodacej); }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.naglowek :focus-visible, .stopka :focus-visible,
.pas--noc :focus-visible, .hero :focus-visible { outline-color: var(--na-nocy-rok); }

/* skip-link — pełne pole trafienia (B7), treść schowana clip-path */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 200px; height: 48px; display: flex; align-items: center;
  margin: 0; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  color: var(--wiodaca-ciemna);
}
.omin:focus {
  position: fixed; z-index: 60; 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;
}

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

/* ====================================================================
   NAGŁÓWEK — „gzyms": ceglasty grzbiet, atramentowy pas, sygnatura
   ==================================================================== */
.naglowek {
  background-color: var(--noc);
  background-image: linear-gradient(180deg, #26180F, var(--noc) 78%);
  border-top: 4px solid var(--wiodaca);
  border-image: var(--gradient-cegly) 1;
  box-shadow: inset 0 -1px 0 rgba(250,246,240,.10);
  padding-block: .55rem;
}
.naglowek__pas {
  display: flex; flex-direction: column; align-items: center;
  gap: .15rem 2.5rem; padding-block: .5rem;
}
.znak {
  font-family: var(--pismo-naglowka); font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.8rem);
  letter-spacing: .015em;
  color: var(--na-nocy); text-decoration: none;
  display: inline-flex; align-items: center; gap: .55em; min-height: 44px;
}
.znak::before {
  content: ""; flex: none; width: .62em; height: .62em;
  background: var(--gradient-cegly);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(201,101,64,.22);
}
.menu__lista {
  display: flex; flex-wrap: wrap; justify-content: center;
  list-style: none; margin: 0; padding: 0; gap: 0 .3rem;
}
.menu__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .35em .8em;
  color: var(--na-nocy-cichy); text-decoration: none;
  font-weight: 500; letter-spacing: .015em;
  box-shadow: inset 0 -3px 0 transparent;
}
.menu__link:hover { color: var(--na-nocy); box-shadow: inset 0 -3px 0 rgba(201,101,64,.55); }
.menu__link[aria-current="page"] {
  color: var(--na-nocy); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--cegla-zar);
}
@media (min-width: 860px) {
  .naglowek__pas { flex-direction: row; justify-content: space-between; }
  .menu__lista { justify-content: flex-end; }
}

/* ====================================================================
   HERO — atramentowo-ceglasty trakt z planem miasta
   ==================================================================== */
.hero {
  position: relative; overflow: hidden;
  background-color: var(--noc);
  background-image:
    radial-gradient(70rem 34rem at 82% -12%, rgba(201,101,64,.30), transparent 62%),
    radial-gradient(46rem 30rem at 8% 108%, rgba(31,90,86,.16), transparent 60%),
    linear-gradient(148deg, var(--noc-glebia) 0%, #241812 36%, #33190F 64%, var(--noc-cegla) 100%);
  padding-block: clamp(3.4rem, 4rem + 3.5vw, 8rem) calc(clamp(3rem, 3rem + 3vw, 6.5rem) + var(--zakladka));
  box-shadow: inset 0 -1px 0 rgba(250,246,240,.08);
}
.hero__ornament {
  position: absolute; inset-block: -4%; right: -4%;
  width: clamp(340px, 62%, 1100px); height: 108%;
  color: var(--na-nocy);            /* pomiar B6: biel na nocy 16,92:1 */
  pointer-events: none;
}
.hero__wnetrze { position: relative; z-index: 1; text-align: center; }
.tytul {
  font-family: var(--pismo-naglowka); font-weight: 700;
  font-size: clamp(2.05rem, 1.05rem + 3vw, 4.6rem);
  line-height: 1.08; letter-spacing: -.012em;
  color: var(--na-nocy);
  max-width: 17em; margin: 0 auto;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.tytul::before {
  content: ""; display: block; width: 4.2rem; height: 4px;
  background: var(--gradient-cegly); margin: 0 auto 1.5rem;
}
.hero .wprowadzenie, .hero .zajawka {
  color: var(--na-nocy-cichy);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.28rem);
  line-height: 1.72;
  max-width: 40em; margin: 1.5rem auto 0;
}
.hero .zajawka { font-family: var(--pismo-naglowka); font-style: italic; font-weight: 500; }
.hero a:not(.przycisk) {
  color: var(--na-nocy-link); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: rgba(238,217,203,.55);
}
.hero a:not(.przycisk):hover { color: var(--na-nocy); text-decoration-color: var(--cegla-zar); }

/* ====================================================================
   PASY SEKCJI — pełna szerokość, naprzemienne powierzchnie
   ==================================================================== */
.pas { position: relative; padding-block: clamp(2.6rem, 2rem + 3.5vw, 5.75rem); }
.pas .kontener { position: relative; z-index: 1; }
.pas--papier { background: var(--papier); }
.pas--tlo2 {
  background-color: var(--tlo2);
  background-image: linear-gradient(180deg, rgba(217,199,184,.35), rgba(217,199,184,0) 14%);
  border-block: 1px solid #E7DACA;
}
.pas--jasna {
  background-color: var(--wiodaca-jasna);
  background-image:
    radial-gradient(44rem 22rem at 90% 0%, rgba(143,51,32,.10), transparent 60%),
    linear-gradient(180deg, rgba(165,122,98,.22), rgba(165,122,98,0) 12%);
  border-block: 1px solid #E2C6B2;
}
.pas--noc {
  background-color: var(--noc);
  background-image:
    radial-gradient(56rem 30rem at 86% -8%, rgba(201,101,64,.24), transparent 62%),
    linear-gradient(150deg, var(--noc-glebia), #2B1A10 58%, var(--noc-cegla) 100%);
  color: #F3E8DA;                      /* 14,6:1 na nocy */
  box-shadow: inset 0 1px 0 rgba(250,246,240,.07), inset 0 -1px 0 rgba(250,246,240,.07);
}
.pas.pas--noc .kontener > h2 { color: var(--na-nocy); }
.pas--noc .kontener a:not(.przycisk) {
  color: var(--na-nocy-link);
  text-decoration-color: rgba(238,217,203,.5);
}
.pas--noc .kontener a:not(.przycisk):hover { color: var(--na-nocy); text-decoration-color: var(--cegla-zar); }

/* PŁYTA — biała karta nachodząca na hero (muzealna gablota) */
.pas--plyta { background: transparent; padding-block: 0 clamp(2.4rem, 2rem + 2.5vw, 4.5rem); margin-top: calc(-1 * var(--zakladka)); z-index: 2; }
.pas--plyta > .kontener {
  background: var(--karta);
  max-width: var(--szeroki);
  margin-inline: auto;
  /* ⚠ wypełnienie boczne = --margines, żeby proza w płycie stała na tej samej
     krawędzi co proza w pozostałych pasach (jedna pionowa linia przez cały widok);
     górne większe, bo mieści ozdobną cyfrę przystanku wychodzącą nad nagłówek. */
  padding: clamp(2rem, 1.4rem + 3.4vw, 5.4rem) calc(var(--margines) - 1px) clamp(2rem, 1.5rem + 2vw, 3.4rem);
  border: 1px solid #ECDFCE;
  border-top: 5px solid var(--wiodaca);
  border-image: none;
  box-shadow: var(--cien-plyty);
}
.pas--plyta > .kontener::before {
  content: ""; position: absolute; inset-inline: -1px; top: -5px; height: 5px;
  background: var(--gradient-cegly);
}
@media (max-width: 519px) { .pas--plyta { margin-top: calc(-1 * var(--zakladka) + 1.5rem); } }

/* --- kolumna prozy --------------------------------------------------- */
.pas .kontener > p, .pas .kontener > h2, .pas .kontener > h3,
.pas .kontener > .os, .pas .kontener > ol, .pas .kontener > ul:not(.lista-wpisow):not(.próbki) {
  max-width: var(--kolumna); margin-inline: auto;
}
p { margin-block: 0 1.15em; }
.pas .kontener > p:last-child { margin-bottom: 0; }

/* nagłówki sekcji — „numery przystanków": wielka cyfra ozdobna + gzyms */
main { counter-reset: przystanek; }
.pas .kontener > h2 {
  counter-increment: przystanek;
  font-family: var(--pismo-naglowka); font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + .95vw, 2.35rem);
  line-height: 1.22; letter-spacing: -.008em;
  color: var(--wiodaca-ciemna);
  position: relative;
  margin-block: 0 1em;
  padding-top: 1.9rem;
  text-wrap: balance;
}
.pas .kontener > h2::before {
  content: counter(przystanek, decimal-leading-zero) / "";
  position: absolute; z-index: -1;
  top: -.32em; left: -.14em;
  font-size: 2.9em; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: rgba(143,51,32,.13);
}
.pas .kontener > h2::after {
  content: ""; display: block; width: 3.1rem; height: 4px;
  background: var(--gradient-cegly); margin-top: .5em;
}
.pas--noc .kontener > h2::before { color: rgba(250,246,240,.13); }
.pas--jasna .kontener > h2::before { color: rgba(108,36,21,.14); }
h3 {
  font-family: var(--pismo-naglowka); font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.6rem);
  color: var(--wiodaca-ciemna); margin-block: 1.6em .6em;
}

/* odsyłacze w prozie */
.pas a:not(.przycisk) {
  color: var(--akcent); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: rgba(31,90,86,.4);
}
.pas a:not(.przycisk):hover { color: var(--wiodaca-ciemna); text-decoration-color: var(--wiodaca); }

/* inicjał otwarcia wpisu */
.inicjal::first-letter {
  font-family: var(--pismo-naglowka); font-weight: 700;
  font-size: 3.05em; line-height: .82;
  float: left; padding: .06em .14em 0 0;
  color: var(--wiodaca);
}

/* ====================================================================
   OŚ CZASU — pięć dat jako trakt z ceglastymi węzłami (ciemny pas)
   ==================================================================== */
.os { position: relative; }
.os__lista { list-style: none; margin: 0; padding: 0; position: relative; }
.os__lista::before {
  content: ""; position: absolute; left: .52rem; top: .5rem; bottom: .6rem;
  width: 3px; background: linear-gradient(180deg, var(--cegla-zar), rgba(201,101,64,.28));
}
.os__lista li { position: relative; padding-left: 2.7rem; margin-block: 0 1.55rem; }
.os__lista li:last-child { margin-bottom: 0; }
.os__lista li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.1rem; height: 1.1rem;
  background: var(--cegla-zar);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--noc), 0 0 0 5px rgba(201,101,64,.4);
}
.os__rok {
  display: block;
  font-family: var(--pismo-naglowka); font-weight: 700;
  font-size: 1.5em; line-height: 1.15; letter-spacing: .02em;
  color: var(--na-nocy-rok);
  font-variant-numeric: tabular-nums;
}

/* wyliczenie poza osią (specimen, jasne pasy) */
.wyliczenie:not(.os__lista) { list-style: none; padding: 0; }
.wyliczenie:not(.os__lista) li { position: relative; padding-left: 1.7rem; margin-block: .55em; }
.wyliczenie:not(.os__lista) li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 1rem; height: 3px; background: var(--wiodaca);
}

/* kroki (specimen) */
.kroki { counter-reset: krok; list-style: none; padding: 0; }
.kroki li { counter-increment: krok; position: relative; padding-left: 2.7rem; margin-block: .9em; }
.kroki li::before {
  content: counter(krok);
  position: absolute; left: 0; top: .1em;
  width: 1.85rem; height: 1.85rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pismo-naglowka); font-weight: 700;
  background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  border: 1px solid var(--linia);
}

/* wzór/schemat (specimen) */
.wzor {
  font-family: ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
  font-size: .94em; line-height: 1.8;
  background: var(--tlo2); border-left: 4px solid var(--wiodaca);
  padding: 1.1em 1.3em; overflow-x: auto;
}
.odsylacz {
  background: var(--wiodaca-jasna); border-left: 4px solid var(--wiodaca);
  padding: 1em 1.2em; font-weight: 500;
}

/* ====================================================================
   PRZYCISKI I PRZEJŚCIA
   ==================================================================== */
.cta { margin-top: 1.9rem; }
.przycisk {
  display: inline-flex; align-items: center; gap: .65em;
  min-height: 44px; padding: .78em 1.55em;
  background-color: var(--wiodaca);
  background-image: linear-gradient(135deg, var(--wiodaca), var(--wiodaca-ciemna));
  color: var(--na-wiodacej); font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid #571C0F;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 26px -12px rgba(108,36,21,.65);
}
.przycisk::after {
  content: ""; flex: none; width: .48em; height: .48em;
  border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor;
  transform: rotate(45deg);
}
.przycisk:hover {
  background-image: linear-gradient(135deg, #9C3A24, var(--wiodaca));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 30px -12px rgba(108,36,21,.8);
  transform: translateY(-2px);
}
/* odsyłacz-przejście bez klasy przycisku (Czytaj dalej, specimen) */
.przejscie > a:not(.przycisk) {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 44px; padding: .55em 1.25em;
  border: 2px solid var(--wiodaca);
  color: var(--wiodaca-ciemna); font-weight: 700;
  text-decoration: none;
}
.przejscie > a:not(.przycisk)::after {
  content: ""; flex: none; width: .44em; height: .44em;
  border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor;
  transform: rotate(45deg);
}
.przejscie > a:not(.przycisk):hover {
  background: var(--wiodaca); color: var(--na-wiodacej);
}

/* ====================================================================
   BLOG — muzealne fiszki z gzymsem i numerem inwentarzowym
   ==================================================================== */
.pas--indeks { background: transparent; padding-block: 0 clamp(3rem, 2.4rem + 3vw, 6rem); margin-top: calc(-1 * var(--zakladka)); z-index: 2; }
.lista-wpisow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  counter-reset: fiszka;
}
@media (min-width: 700px)  { .lista-wpisow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .lista-wpisow { grid-template-columns: repeat(3, 1fr); } }
.zapowiedz {
  counter-increment: fiszka;
  position: relative;
  background: var(--karta);
  border: 1px solid #ECDFCE;
  box-shadow: var(--cien-karty);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  padding-top: clamp(2.1rem, 1.8rem + 1.4vw, 3.1rem);
  display: flex; flex-direction: column;
}
.zapowiedz::before {
  content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 6px;
  background: var(--gradient-cegly);
}
.zapowiedz::after {
  content: counter(fiszka, decimal-leading-zero) / "";
  position: absolute; top: 1.05rem; right: 1.1rem;
  font-family: var(--pismo-naglowka); font-weight: 600;
  font-size: .92rem; letter-spacing: .12em;
  color: var(--atrament-cichy);
  border: 1px solid var(--linia);
  padding: .18em .55em;
}
.zapowiedz__tytul { margin: 0 0 .5em; font-size: clamp(1.28rem, 1.1rem + .55vw, 1.7rem); line-height: 1.28; font-family: var(--pismo-naglowka); font-weight: 600; }
.pas .zapowiedz__tytul a {
  display: inline-block; padding-block: .5em; min-height: 44px;
  color: var(--wiodaca-ciemna); text-decoration: none; font-weight: 600;
}
.pas .zapowiedz__tytul a:hover { color: var(--akcent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.zapowiedz__tekst { color: var(--atrament-cichy); margin: 0 0 1.4em; }
.zapowiedz__wiecej { margin: auto 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .zapowiedz { transition: transform .18s ease, box-shadow .18s ease; }
  .zapowiedz:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(36,27,20,.06), 0 26px 52px -20px rgba(108,36,21,.45); }
  .przycisk, .przejscie > a, .menu__link { transition: background-color .15s ease, background-image .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
}

/* ====================================================================
   SPECIMEN — próbki barw
   ==================================================================== */
.próbki { list-style: none; margin: 1.4rem auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.próbka { background: var(--karta); border: 1px solid #ECDFCE; box-shadow: var(--cien-karty); }
.próbka__pole { display: block; height: 4.4rem; }
.próbka__opis { display: block; padding: .6rem .8rem; font-size: .85rem; line-height: 1.45; color: var(--atrament); }

/* ====================================================================
   STOPKA — kolofon na nocnym pasie
   ==================================================================== */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--noc);
  background-image:
    radial-gradient(48rem 22rem at 88% 120%, rgba(201,101,64,.20), transparent 62%),
    linear-gradient(160deg, #22150F, var(--noc) 62%);
  border-top: 4px solid var(--wiodaca);
  border-image: var(--gradient-cegly) 1;
  padding-block: clamp(2.2rem, 2rem + 1.5vw, 3.6rem);
  color: var(--na-nocy-cichy);
}
.stopka__ornament {
  position: absolute; inset-block: -30%; right: -6%;
  width: clamp(300px, 46%, 760px); height: 160%;
  color: var(--na-nocy); pointer-events: none;
}
.stopka__wnetrze {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: .9rem 2.5rem; text-align: center;
}
.stopka__znak {
  font-family: var(--pismo-naglowka); font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.7rem);
  color: var(--na-nocy); margin: 0;
  display: inline-flex; align-items: center; gap: .55em;
}
.stopka__znak::before {
  content: ""; flex: none; width: .62em; height: .62em;
  background: var(--gradient-cegly); transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(201,101,64,.22);
}
.stopka__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .3rem; }
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .3em .8em; color: var(--na-nocy-cichy);
  text-decoration: none; font-weight: 500;
  box-shadow: inset 0 -3px 0 transparent;
}
.stopka__menu a:hover { color: var(--na-nocy); box-shadow: inset 0 -3px 0 rgba(201,101,64,.55); }
@media (min-width: 860px) {
  .stopka__wnetrze { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ====================================================================
   TRAKT OTWARTY — układ dwułamowy powyżej 1180 px
   ⚠⚠ TO JEST ODPOWIEDŹ NA DWA CELE NARAZ, NIE NA JEDEN.
   Samo poszerzenie kontenera zrobiłoby z prozy wiersze po ~105 znaków, więc
   szerokość odzyskana z marginesów dostała KONKRETNE ROLE:
     • łam sygnatury (ozdobna cyfra przystanku + nagłówek + gzyms) staje OBOK
       prozy, a nie nad nią — nagłówki zjeżdżają z kolumny tekstu na zewnątrz;
     • hero rozkłada się na tytuł (lewa) i wprowadzenie (prawa kolumna z
       ceglastą krawędzią) — dwa bloki treści w poziomie zamiast jednego;
     • oś czasu powyżej 1500 px zamienia się w POZIOMY trakt na całą szerokość
       (pięć przystanków w rzędzie zamiast pięciu wierszy jeden pod drugim);
     • fiszki bloga i próbki barw dostają szerszy kontener wewnętrzny.
   Proza w każdym z tych układów zostaje wąska (--kolumna) i wyrównana do
   jednej krawędzi — to ona pilnuje długości wiersza, nie kontener.
   ==================================================================== */
@media (min-width: 1180px) {

  /* --- HERO: tytuł i wprowadzenie obok siebie ----------------------- */
  .hero__wnetrze {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--kolumna));
    column-gap: var(--rowek);
    align-items: end;
    text-align: left;
  }
  .tytul { max-width: none; margin: 0; font-size: clamp(2.4rem, 1.1rem + 2.35vw, 3.9rem); }
  .tytul::before { margin: 0 0 1.4rem; }
  .hero .wprowadzenie, .hero .zajawka {
    max-width: var(--kolumna); margin: 0;
    border-inline-start: 3px solid var(--cegla-zar);
    padding-inline-start: clamp(1.1rem, 1.5vw, 1.9rem);
  }
  /* ⚠ plan miasta przenosi się pod TYTUŁ (lewa kolumna). Zostawiony po prawej
     leżałby dokładnie pod wprowadzeniem — czyli powtórzyłby wadę „ozdobnik pod
     kolumną tekstu", tyle że w hero, gdzie bramka B13c go nie mierzy. */
  .hero__ornament { right: auto; left: -6%; width: clamp(340px, 52%, 980px); }

  /* --- SEKCJE: łam sygnatury po lewej, proza po prawej --------------- */
  .pas > .kontener {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--kolumna));
    column-gap: var(--rowek);
    align-items: start;
  }
  .pas > .kontener > h2 {
    grid-column: 1;
    max-width: none; margin-inline: 0;
    /* ujemny margines wyciąga cyfrę przystanku nad wiersz, a PIERWSZY WIERSZ
       nagłówka zostawia na wysokości pierwszego wiersza prozy obok */
    margin-top: -1.9rem;
  }
  .pas > .kontener > h2::before { font-size: 3.3em; top: -.30em; left: -.05em; }
  .pas > .kontener > h2::after { width: 100%; margin-top: .62em; }
  .pas > .kontener > p,
  .pas > .kontener > h3,
  .pas > .kontener > ol,
  .pas > .kontener > ul:not(.lista-wpisow):not(.próbki),
  .pas > .kontener > .os {
    grid-column: 2; max-width: var(--kolumna); margin-inline: 0;
  }
  /* ⚠ PUŁAPKA: element siatki z `margin-inline: auto` NIE rozciąga się na łam —
     automatyczne marginesy wyłączają `stretch` i pudełko dostaje szerokość
     fit-content. Próbki barw kurczyły się przez to do 455 px na łamie 1608 px.
     Rozpiętość `1 / -1` musi więc iść RAZEM z wyzerowaniem marginesu. */
  .pas > .kontener > .lista-wpisow,
  .pas > .kontener > .próbki { grid-column: 1 / -1; max-width: none; margin-inline: 0; }

  /* --- OTWARCIE WPISU: płyta bez nagłówka ---------------------------- */
  /* proza stoi na tej samej krawędzi co wszędzie, a pusty łam sygnatury
     dostaje ceglasty znak traktu, żeby nie był dziurą po nagłówku */
  .pas--otwarcie > .kontener::after {
    content: ""; grid-column: 1; grid-row: 1;
    justify-self: start; align-self: start;
    width: clamp(3.4rem, 4.4vw, 5.6rem); height: clamp(3.4rem, 4.4vw, 5.6rem);
    margin: .9rem 0 0 .6rem;
    background: var(--gradient-cegly); opacity: .2;
    transform: rotate(45deg);
    box-shadow: 0 0 0 1px rgba(165,122,98,.5), 0 0 0 16px rgba(143,51,32,.05);
  }
}

/* --- OŚ CZASU jako POZIOMY trakt: dopiero gdy zmieści się pięć przystanków
   ⚠ Poniżej 1500 px oś zostaje pionowa i siedzi w kolumnie prozy — inaczej
   wiersze dat rozlałyby się na całą szerokość kontenera (ta sama wada, którą
   naprawiamy w prozie). */
@media (min-width: 1500px) {
  .pas > .kontener > .os { grid-column: 1 / -1; max-width: none; }
  .os__lista {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2.2rem 1.9rem;
  }
  .os__lista::before { content: none; }
  .os__lista li {
    padding-left: 0; padding-top: 2.3rem; margin-block: 0;
    border-top: 3px solid rgba(201,101,64,.6);
  }
  .os__lista li::before { left: 0; top: -.62rem; width: 1.1rem; height: 1.1rem; }
}

/* ====================================================================
   RUCH I DRUK
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .naglowek, .stopka, .omin { display: none; }
  .hero, .pas--noc { background: none !important; color: #000; box-shadow: none; }
  .hero .wprowadzenie, .hero .zajawka, .tytul, .pas--noc h2, .os__rok { color: #000; }
  .hero__ornament, .stopka__ornament { display: none; }
  .pas, .hero { padding-block: 1.2rem; }
  a { color: #000; }
}