@charset "utf-8";
/* =====================================================================
   Źródło — system projektowy makiety gietrzwald.warmia.pl (wydanie PREMIUM)
   Seria STRONY-WWW-ST-NQ. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.
   IDEA: sakralny splendor wydawnictwa jubileuszowego — hero na granatowym
   niebie nocnym ze złotymi arkadami, gablota porządku mszy jak tablica
   ogłoszeń bazyliki, trzy daty jako trzy smukłe arkady, stopka-predella.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* baza z motyw.json */
  --papier:          #F5F7FB;
  --papier-karta:    #FFFFFF;
  --tlo-2:           #E9EEF7;
  --wiodaca-jasna:   #D3DEF2;
  --atrament:        #161C29;
  --atrament-cichy:  #48536B;
  --wiodaca:         #2C4F9E;
  --wiodaca-ciemna:  #1F3A78;
  --akcent:          #7A5A12;
  --linia:           #6D82B0;
  --linia-cicha:     #C3CEE3;
  --na-wiodacej:     #FFFFFF;
  --na-akcencie:     #FFFFFF;
  /* odcienie dołożone W TEJ SAMEJ RODZINIE (nocne niebo + złoto koron):
     noc          #0E1730 — grunt hero i stopki (biel 16,54:1)
     noc-panel    #101C3A — pas dat i gablota  (biel 15,67:1, poświata 12,90:1)
     noc-karta    #16264E — arkady dat          (biel 14,77:1, poświata 11,33:1)
     zloto        #C8A44A — kreski/ornament na ciemnym (7,10:1 na noc-panel,
                            4,58:1 na wiodącej ciemnej — próg 3:1 z zapasem)
     zloto-jasne  #E8C979 — nagłówki na ciemnym (10,46:1 na noc-panel)
     poswiata     #D7E2F7 — proza na ciemnym    (12,90:1 na noc-panel)      */
  --noc:         #0E1730;
  --noc-panel:   #101C3A;
  --noc-karta:   #16264E;
  --zloto:       #C8A44A;
  --zloto-jasne: #E8C979;
  --poswiata:    #D7E2F7;

  --kroj-naglowek: "Cormorant Garamond", Garamond, Georgia, serif;
  --kroj-tekst:    "Lato", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ⚠ miara łamu w REM, nie w em i nie w ch (pułapka T9 + lekcja serii):
     wszystkie bloki kolumny dostają JEDNĄ krawędź niezależnie od stopnia. */
  --kolumna:         34rem;  /* proza ~66–75 znaków                        */
  --kolumna-tytul:   46rem;  /* tytuły hero — szersze od prozy             */
  --kolumna-szeroka: 62rem;  /* siatki kart i gablota                      */
  --margines:  clamp(20px, 5vw, 112px);  /* ~96 px przy 1920 (B13)         */
  --promien:   3px;
  --cien-karty: 0 24px 60px -30px rgba(14, 23, 48, .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 T6: clip, nie hidden — 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);
  color: var(--atrament);
  font-family: var(--kroj-tekst);
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--wiodaca-ciemna); overflow-wrap: anywhere; }
/* ⚠⚠ pułapka nr 1 wariant 4: żadnego koloru na sztywno dla strong/b */
strong, b { color: inherit; }

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

/* skip-link: pełne pole 180×48 (B7), treść chowa clip-path — nie zasłania
   nagłówka; przy fokusie wraca na wierzch */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 180px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--noc); color: var(--papier-karta);
  font-weight: 700; text-decoration: none;
  clip-path: inset(50%); z-index: 60;
}
.omin:focus-visible { clip-path: none; outline: 3px solid var(--zloto); outline-offset: -3px; }

/* --- 3. KONTENERY I KOLUMNA ------------------------------------------ */
.kontener {
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--margines);
}
/* kolumna prozy: bezpośrednie dzieci kontenera — mierzy je bramka B13 */
.kontener > h1, .kontener > h2, .kontener > h3,
.kontener > p, .kontener > ol, .kontener > ul {
  max-width: var(--kolumna);
  margin-inline: auto;
}
.kontener > .lista-wpisow, .kontener > .trzy-daty,
.kontener > .próbki { max-width: var(--kolumna-szeroka); }
/* proza wewnątrz białej karty i gabloty trzyma tę samą kolumnę */
.wstega > h2, .wstega > h3, .wstega > p, .wstega > ul, .wstega > ol {
  max-width: var(--kolumna); margin-inline: auto; }
.wstega > ul, .wstega > ol { margin-block: 0 1.3em; }

/* --- 4. TYPOGRAFIA ---------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--kroj-naglowek);
  font-weight: 600;
  line-height: 1.12;
  color: var(--atrament);
  text-wrap: balance;
}
h2 { font-size: clamp(1.55rem, 1.2rem + 1vw, 2.2rem); margin-block: 2.6em 0.6em; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); margin-block: 2em 0.5em; }
p  { margin-block: 0 1.15em; }

/* nagłówek sekcji z łukiem arkady — motyw przewodni rysowany CSS-em */
.kontener > h2, .wstega > h2 { text-align: center; padding-block-start: 1.35em; position: relative; }
.kontener > h2::before, .wstega > h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  translate: -50% 0;
  width: 1.05em; height: .62em;
  border: 2px solid var(--akcent); border-block-end: none;
  border-radius: 999px 999px 0 0;
}
.kontener > h2::after, .wstega > h2::after {
  content: ""; display: block; width: 4.5em; height: 1px;
  margin: .38em auto 0; background: var(--linia);
}

/* --- 5. NAGŁÓWEK — granatowa płyta ze złotą kreską -------------------- */
.naglowek {
  background: var(--noc);
  border-block-end: 1px solid var(--zloto);
  box-shadow: 0 3px 0 rgba(200, 164, 74, .22);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; gap: .4rem 2rem;
  align-items: center; justify-content: space-between;
  padding-block: .9rem;
}
.znak {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 44px;
  text-decoration: none;
}
.znak__godlo { color: var(--zloto); flex: none; }
.znak__napis {
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: 1.45rem; line-height: 1.1;
  color: var(--papier-karta); letter-spacing: .02em;
}
.menu { flex: none; }
.menu__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .1rem .35rem; justify-content: center;
}
.menu__link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: .35em .8em;
  color: var(--papier); text-decoration: none;
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  transition: color .18s ease;
}
.menu__link:hover { color: var(--zloto-jasne); }
.menu__link[aria-current="page"] {
  color: var(--zloto-jasne);
  box-shadow: inset 0 3px 0 var(--zloto);
}

/* --- 6. HERO — nocne niebo, poświata, arkady -------------------------- */
.hero {
  position: relative;
  background-color: var(--noc);
  background-image:
    radial-gradient(ellipse 62% 46% at 50% 34%, rgba(44, 79, 158, .55), rgba(44, 79, 158, 0) 72%),
    linear-gradient(178deg, var(--noc) 0%, #13234A 58%, var(--wiodaca-ciemna) 100%);
  color: var(--poswiata);
  text-align: center;
  padding-block: clamp(3.2rem, 7vw, 6.5rem) clamp(5rem, 9vw, 8.5rem);
}
.hero--nizszy { padding-block: clamp(2.6rem, 5vw, 4.6rem) clamp(4.6rem, 8vw, 7.5rem); }
.hero__wnetrze { position: relative; z-index: 1; }
.hero__aureola {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  translate: -50% 0;
  width: min(56rem, 92vw); height: auto;
  color: var(--zloto); z-index: 0; pointer-events: none;
}
.hero__arkady {
  position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 100%; height: auto; display: block;
  color: var(--zloto); z-index: 0; pointer-events: none;
}
.hero .kontener > h1, .hero .kontener > p { position: relative; z-index: 1; }
.tytul {
  max-width: var(--kolumna-tytul);
  margin: 0 auto;
  font-size: clamp(2.15rem, 1.1rem + 3.1vw, 4.6rem);
  line-height: 1.06;
  color: var(--papier);
  text-shadow: 0 2px 30px rgba(14, 23, 48, .8);
}
.tytul::after {
  /* złote zwieńczenie pod tytułem: kreska — romb — kreska */
  content: ""; display: block;
  width: clamp(9rem, 30vw, 15rem); height: 7px;
  margin: 1.1em auto 0;
  background:
    linear-gradient(var(--zloto), var(--zloto)) left  50% / 42% 1px no-repeat,
    linear-gradient(var(--zloto), var(--zloto)) right 50% / 42% 1px no-repeat,
    conic-gradient(from 45deg, var(--zloto) 0 100%) 50% 50% / 7px 7px no-repeat;
}
.wprowadzenie, .zajawka {
  font-size: clamp(1.06rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.75;
  margin-block: 1.5em 0;
}
.hero .wprowadzenie, .hero .zajawka { color: var(--poswiata); }

/* --- 7. PASY SEKCJI --------------------------------------------------- */
.pas { padding-block: clamp(2.8rem, 6vw, 5.5rem); }
.pas--jasny  { background: var(--papier); }
.pas--blekit {
  background: var(--tlo-2);
  border-block: 1px solid var(--linia-cicha);
}
.pas--noc {
  background-color: var(--noc-panel);
  background-image: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(44, 79, 158, .28), rgba(44, 79, 158, 0) 75%);
  color: var(--poswiata);
}
.pas--noc .kontener > h2 { color: var(--zloto-jasne); }
.pas--noc .kontener > h2::before { border-color: var(--zloto); }
.pas--noc .kontener > h2::after { background: var(--zloto); opacity: .55; }
.pas--noc .kontener > p { color: var(--poswiata); }
.pas > .kontener > h2:first-child { margin-block-start: 0; }

/* biała karta wciągnięta pod hero (wstęga) */
.pas--wstega { background: var(--papier); padding-block: 0 clamp(2.4rem, 5vw, 4.5rem); }
.wstega {
  position: relative; z-index: 2;
  max-width: min(66rem, calc(100% - 24px));
  margin-block-start: clamp(-4.2rem, -6vw, -2.6rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-block-start: 3px solid var(--zloto);
  border-radius: var(--promien);
  box-shadow: var(--cien-karty);
  padding: clamp(1.6rem, 4vw, 3.6rem) clamp(1rem, 4vw, 4rem) clamp(1.8rem, 4vw, 3.2rem);
}
.wstega > h2:first-child { margin-block-start: 0; }
.artykul { padding-block-end: clamp(2.6rem, 6vw, 5rem); }
.artykul .wstega { margin-block-end: 0; }

/* --- 8. LISTY --------------------------------------------------------- */
.wyliczenie { list-style: none; padding: 0; margin-block: 0 1.3em; }
.wyliczenie > li { position: relative; padding-inline-start: 1.6em; margin-block-end: .55em; }
.wyliczenie > li::before {
  content: ""; position: absolute;
  inset-block-start: .72em; inset-inline-start: 0;
  width: .95em; height: 2px; background: var(--akcent);
}
.kroki { counter-reset: krok; list-style: none; padding: 0; margin-block: 0 1.3em; }
.kroki > li { counter-increment: krok; position: relative; padding-inline-start: 2.6em; margin-block-end: .8em; }
.kroki > li::before {
  content: counter(krok);
  position: absolute; inset-inline-start: 0; inset-block-start: .05em;
  width: 1.8em; height: 1.8em;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--akcent); border-radius: 50%;
  font-family: var(--kroj-naglowek); font-weight: 700; color: var(--akcent);
}

/* trzy daty jako trzy smukłe arkady ze złotym zwieńczeniem */
.trzy-daty {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-block: 2.4rem 2.2rem;
  padding: 0; list-style: none;
}
.trzy-daty > li {
  position: relative;
  margin: 0; padding: 3.1rem 1.3rem 1.9rem;
  background-color: var(--noc-karta);   /* ⚠ jawnie, pod gradientem — B6 */
  background-image: linear-gradient(180deg, var(--noc-karta), var(--noc-panel) 88%);
  border: 1px solid var(--zloto);
  border-radius: 999px 999px var(--promien) var(--promien);
  text-align: center;
  color: var(--poswiata);
  box-shadow: inset 0 0 0 5px var(--noc-karta), inset 0 0 0 6px rgba(200, 164, 74, .38),
              0 18px 40px -24px rgba(0, 0, 0, .8);
}
.trzy-daty > li::before {
  /* złoty romb-zwieńczenie na szczycie arkady */
  content: ""; position: absolute;
  inset-block-start: 1.15rem; inset-inline-start: 50%;
  width: 9px; height: 9px;
  translate: -50% 0; rotate: 45deg;
  background: var(--zloto);
}
.trzy-daty > li::after { display: none; }
.trzy-daty .data {
  display: block;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem);
  line-height: 1.1;
  color: var(--zloto-jasne);
  margin-block-end: .45em;
}

/* --- 9. GABLOTA PORZĄDKU MSZY — serce serwisu ------------------------- */
.gablota {
  max-width: var(--kolumna-szeroka);
  margin: 2.8rem auto 0;
  background-color: var(--noc-panel);
  background-image: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(44, 79, 158, .3), rgba(44, 79, 158, 0) 75%);
  color: var(--poswiata);
  border: 1px solid var(--zloto);
  border-radius: var(--promien);
  box-shadow: inset 0 0 0 6px var(--noc-panel), inset 0 0 0 7px var(--zloto),
              var(--cien-karty);
  padding: clamp(1.9rem, 5vw, 3.6rem) clamp(1.1rem, 5vw, 4rem) clamp(1.7rem, 4vw, 2.8rem);
}
.gablota > h2 {
  margin-block: 0 1em; text-align: center;
  color: var(--zloto-jasne);
  padding-block-start: 1.3em; position: relative;
}
.gablota > h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  translate: -50% 0;
  width: 1.05em; height: .62em;
  border: 2px solid var(--zloto); border-block-end: none;
  border-radius: 999px 999px 0 0;
}
.gablota__lista { list-style: none; margin: 0 0 1.4em; padding: 0; }
.gablota__lista > li {
  padding-block: .85em;
  border-block-end: 1px solid rgba(200, 164, 74, .35);
}
.gablota__lista > li:first-child { border-block-start: 1px solid rgba(200, 164, 74, .35); }
.gablota__kiedy {
  display: block;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: 1.25rem; line-height: 1.2;
  color: var(--zloto-jasne);
  letter-spacing: .04em;
  margin-block-end: .15em;
}
.gablota > p:last-child { margin-block-end: 0; font-size: .95rem; color: var(--poswiata); }

/* --- 10. PRZYCISKI I PRZEJŚCIA --------------------------------------- */
.cta, .przejscie { text-align: center; }
a.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7em 2.2em;
  /* ⚠ jawny background-color POD gradientem — pomiar B6 czyta backgroundColor,
     a sam skrót z gradientem zostawia go przezroczystym (biały napis na białej
     karcie w pomiarze). Gradient trzyma się w rodzinie wiodącej. */
  background-color: var(--wiodaca);
  background-image: linear-gradient(180deg, var(--wiodaca), var(--wiodaca-ciemna));
  color: var(--na-wiodacej);
  font-weight: 700; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none;
  border: 1px solid var(--wiodaca-ciemna);
  border-radius: var(--promien);
  box-shadow: inset 0 0 0 1px rgba(200, 164, 74, .5), 0 14px 30px -14px rgba(31, 58, 120, .65);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.przycisk:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(232, 201, 121, .8), 0 20px 36px -14px rgba(31, 58, 120, .75);
}
.przejscie a:not(.przycisk) {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; letter-spacing: .06em;
  color: var(--wiodaca-ciemna);
  text-decoration-color: var(--zloto);
  text-underline-offset: .3em;
}
.przejscie a:not(.przycisk)::after { content: " →"; white-space: pre; color: var(--akcent); }
.przejscie a:not(.przycisk):hover { color: var(--akcent); }

/* --- 11. WPISY I DROPCAP ---------------------------------------------- */
.dropcap > p:first-of-type::first-letter {
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: 3.1em; line-height: .78;
  color: var(--akcent);
  float: left;
  padding: .08em .12em 0 0;
}

/* --- 12. LISTA WPISÓW — karty w złotych ramach z łukiem --------------- */
.lista-wpisow {
  list-style: none; margin: 2.5rem auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.5vw, 2rem);
}
.zapowiedz {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien);
  box-shadow: 0 18px 44px -26px rgba(14, 23, 48, .4);
  padding: 2.9rem 1.5rem 1.4rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.zapowiedz:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px -26px rgba(14, 23, 48, .5);
}
.zapowiedz::before {
  /* złoty łuk arkady w nadprożu karty */
  content: ""; position: absolute;
  inset-block-start: .95rem; inset-inline-start: 50%;
  translate: -50% 0;
  width: 2rem; height: 1.15rem;
  border: 2px solid var(--akcent); border-block-end: none;
  border-radius: 999px 999px 0 0;
}
.zapowiedz::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
  height: 3px; background: linear-gradient(90deg, transparent, var(--zloto), transparent);
}
.zapowiedz__tytul { margin: 0 0 .5em; font-size: 1.35rem; text-align: center; }
.zapowiedz__tytul a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding-block: .25em;
  color: var(--wiodaca-ciemna); text-decoration: none;
}
.zapowiedz__tytul a:hover { color: var(--akcent); }
.zapowiedz__tekst { color: var(--atrament-cichy); font-size: .95rem; text-align: center; flex: 1 1 auto; }
.zapowiedz__wiecej { margin-block-end: 0; }

/* --- 13. STOPKA-PREDELLA ---------------------------------------------- */
.stopka {
  background: var(--noc);
  color: var(--poswiata);
  border-block-start: 1px solid var(--zloto);
  box-shadow: inset 0 -4px 0 rgba(200, 164, 74, .18);
  margin-block-start: 0;
}
.stopka__fryz {
  height: 15px; margin-block-start: 8px;
  background-image: radial-gradient(circle at 50% 115%,
    transparent 8px, rgba(200, 164, 74, .55) 8.5px 10px, transparent 10.5px);
  background-size: 27px 15px; background-repeat: repeat-x;
  background-position: 50% 100%;
}
.stopka__pas {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.6rem 2.1rem;
}
.stopka__znak {
  margin: 0;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: 1.35rem; color: var(--papier-karta);
  letter-spacing: .02em;
}
.stopka__menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .1rem .4rem;
}
.stopka__menu a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: .3em .7em;
  color: var(--papier); text-decoration: none;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.stopka__menu a:hover { color: var(--zloto-jasne); text-decoration: underline; text-underline-offset: .3em; }

/* --- 14. SPECIMEN ------------------------------------------------------ */
.próbki { list-style: none; margin: 1.6rem auto; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.próbka { margin: 0; }
.próbka__pole { display: block; height: 3.4rem; border-radius: var(--promien); }
.próbka__opis { display: block; font-size: .82rem; color: var(--atrament-cichy); padding-block-start: .35em; }
.wzor {
  background: var(--papier-karta); border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--zloto);
  padding: 1.1em 1.4em; border-radius: var(--promien);
}
.odsylacz { color: var(--atrament-cichy); font-style: italic; }

/* --- 15. BREAKPOINTY --------------------------------------------------- */
@media (max-width: 900px) {
  .trzy-daty { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
  .lista-wpisow { grid-template-columns: 1fr; max-width: 30rem; }
}
@media (max-width: 760px) {
  .naglowek__pas { flex-direction: column; justify-content: center; padding-block: .8rem .5rem; }
  .stopka__pas { flex-direction: column; justify-content: center; text-align: center; }
}

/* --- 15b. NAWA I BARK — kompozycja powyżej 1366 px -------------------- */
/* ⭐⭐ zasada użytkownika „skala musi rosnąć powyżej 1366 px”, druga fala
   (decyzja 2026-08-31: „popraw od razu w makietach premium”).
   ZMIERZONA WADA: margines najszerszego modułu przy 1920 był w celu (90 px),
   ale kolumna prozy sięgała 1117 px — około 112 znaków w wierszu. Rozciągnięta
   proza męczy w czytaniu; winowajcą był dopisek w gablocie, który brał całą
   szerokość panelu.
   ROZWIĄZANIE nie polega na zwężeniu kolumny i zostawieniu pustego pola —
   odzyskana szerokość dostaje rolę:
     • gablota (serce serwisu) składa porządek mszy w RZĄD kolumn rozdzielonych
       złotymi pionami zamiast trzech wierszy jeden pod drugim, a dopisek wraca
       do kolumny prozy;
     • pasma tekstowe rozkładają się na BARK (nagłówek sekcji ze złotym
       zwieńczeniem, dosunięty do rynny) i NAWĘ (proza 34 rem) — nagłówek
       wychodzi SPOD tekstu i staje OBOK niego;
     • ta sama zasada wchodzi do białej wstęgi, czyli do korpusu wszystkich
       podstron i wpisów, a sama wstęga rośnie z 66 do 78 rem;
     • komponenty szerokie (arkady dat, gablota, karty wpisów) dostają
       --kolumna-szeroka 70 rem zamiast 62 rem.
   ⚠ PUŁAPKA: body ma overflow-wrap:break-word, które w wąskim barku łamie
     nagłówek W ŚRODKU SŁOWA („Gietrzwałdz-kiej”). Żadna bramka tego nie widzi,
     więc bark dostaje jawnie overflow-wrap:normal + hyphens:auto.
   ⚠ PUŁAPKA: pasmo, w którym stoi komponent szeroki, NIE dostaje barku
     (selektor :not(:has(...))) — inaczej nagłówek stałby sam w rzędzie obok
     pustego pola, nad kartami idącymi przez całą szerokość.
   ⚠ Poniżej 1366 px nic się nie zmienia — to nie jest przebudowa mobilna. */

/* 15b.1 — GABLOTA: porządek mszy w rzędzie, dopisek w kolumnie prozy */
@media (min-width: 1366px) {
  .gablota__lista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    border-block: 1px solid rgba(200, 164, 74, .35);
  }
  .gablota__lista > li {
    border-block-end: none;
    padding-block: 1.4em;
    padding-inline: clamp(1.1rem, 1.8vw, 2.2rem);
  }
  .gablota__lista > li:first-child {
    border-block-start: none;
    padding-inline-start: 0;
  }
  .gablota__lista > li + li { border-inline-start: 1px solid rgba(200, 164, 74, .35); }
  .gablota__lista > li:last-child { padding-inline-end: 0; }
  /* ⚠⚠ to jest naprawiana wada: dopisek brał 1117 px, teraz bierze kolumnę */
  .gablota > p:last-child { max-width: var(--kolumna); margin-inline: auto; }
}

/* 15b.2 — BARK I NAWA powyżej 1500 px */
@media (min-width: 1500px) {
  :root { --kolumna-szeroka: 70rem; }

  /* pasmo tekstowe: [luz] [bark 24rem] [nawa 34rem] [luz] */
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) {
    --rytm: clamp(3rem, 5vw, 5rem);
    display: grid;
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 24rem) minmax(0, var(--kolumna)) minmax(0, 1fr);
    column-gap: clamp(2rem, 3.5vw, 4.5rem);
    row-gap: var(--rytm);
    align-items: start;
  }
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > h2 {
    grid-column: 2;
    margin: 0;
    max-width: none;
  }
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > h3,
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > p,
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > ul,
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > ol {
    grid-column: 3;
    margin: 0;
  }
  /* przycisk sekcji siada tuż pod prozą, a nie o cały rytm niżej */
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > .cta,
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > .przejscie {
    margin-block-start: calc(1.4rem - var(--rytm));
  }

  /* biała wstęga — korpus podstron i wpisów — dostaje ten sam bark */
  .wstega {
    --rytm: clamp(3rem, 5vw, 5rem);
    max-width: min(78rem, calc(100% - 24px));
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, var(--kolumna));
    column-gap: clamp(2rem, 3.5vw, 4.5rem);
    row-gap: var(--rytm);
    justify-content: center;
    align-items: start;
  }
  .wstega > h2 { grid-column: 1; margin: 0; max-width: none; }
  .wstega > h3, .wstega > p, .wstega > ul, .wstega > ol { grid-column: 2; margin: 0; }
  .wstega > .cta, .wstega > .przejscie { margin-block-start: calc(1.4rem - var(--rytm)); }

  /* typografia barku: nagłówek dosunięty do rynny, złote zwieńczenie pod nim */
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > h2 {
    text-align: right;
    padding-block-start: 0;
    overflow-wrap: normal;
    hyphens: auto;
  }
  .wstega > h2 {
    text-align: right;
    padding-block-start: 0;
    overflow-wrap: normal;
    hyphens: auto;
  }
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > h2::before,
  .wstega > h2::before { content: none; }
  .pas > .kontener:not(:has(> .trzy-daty, > .lista-wpisow, > .gablota, > .wstega, > .próbki)) > h2::after,
  .wstega > h2::after {
    width: 5.5em;
    height: 7px;
    margin: .5em 0 0 auto;
    background:
      linear-gradient(var(--linia), var(--linia)) left 50% / calc(100% - 12px) 1px no-repeat,
      conic-gradient(from 45deg, var(--akcent) 0 100%) right 50% / 7px 7px no-repeat;
  }
}

/* --- 16. RUCH I DRUK --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  a.przycisk:hover, .zapowiedz:hover { transform: none; }
}
@media print {
  .naglowek, .stopka, .hero, .pas--noc, .gablota, .trzy-daty > li {
    background: none !important; color: #000 !important;
    box-shadow: none !important;
  }
  .hero__arkady, .hero__aureola, .stopka__fryz { display: none; }
  .tytul, .hero .wprowadzenie, .hero .zajawka, .pas--noc .kontener > h2,
  .pas--noc .kontener > p, .gablota > h2, .gablota__kiedy, .trzy-daty .data { color: #000 !important; text-shadow: none; }
  a.przycisk { color: #000; background: none; }
}