/* Spokojne łydki – książeczka w rozdziałach (archetyp kapitoly)
   Tokeny: atrament #1c1c5f, indygo #2c2c96, miedź #c08c59 (ciemna #7a5328),
   cytryna #c3c322, papier #f5f5fa, lawenda #e2e2f3, tekst #1b1b2d.
   Ostre rogi, twarde przesunięte cienie, naprzemiennie pełne barwne płaszczyzny i jasne strony. */

:root {
  --atrament: #1c1c5f;
  --indygo: #2c2c96;
  --miedz: #c08c59;
  --miedz-ciemna: #7a5328;
  --cytryna: #c3c322;
  --papier: #f5f5fa;
  --lawenda: #e2e2f3;
  --tekst: #1b1b2d;
  --kolumna: 42rem;
  --naglowek: "Unbounded", "Golos Text", sans-serif;
  --tresc: "Golos Text", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font-family: var(--tresc);
  font-size: 19px;
  line-height: 1.65;
  padding-bottom: 96px;
}

img { max-width: 100%; height: auto; display: block; }
small { font-size: .9rem; }

a { color: var(--indygo); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cytryna);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--naglowek);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 0 0 .8em;
}
h2 { font-size: clamp(1.45rem, 2.5vw, 2.05rem); font-weight: 600; }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.3rem); font-weight: 600; margin-top: 2.2em; }
p { margin: 0 0 1.1em; }

/* ---------- hlavička ---------- */
.grzbiet {
  background: var(--papier);
  border-bottom: 3px solid var(--atrament);
}
.grzbiet-wnetrze {
  max-width: 72rem;
  margin: 0 auto;
  padding: .7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.znak {
  font-family: var(--naglowek);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--atrament);
  text-decoration: none;
}

/* ---------- tlačítka ---------- */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--naglowek);
  font-weight: 600;
  color: var(--atrament);
  background: var(--cytryna);
  text-decoration: none;
  border: 3px solid var(--atrament);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--atrament);
  transition: transform .12s ease, box-shadow .12s ease;
}
.przycisk:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--atrament); }
.przycisk-maly { min-height: 50px; padding: .45rem 1.1rem; font-size: 18px; box-shadow: 4px 4px 0 var(--atrament); }
.przycisk-duzy { min-height: 84px; min-width: 320px; padding: 1rem 2rem; font-size: 22px; }
.przycisk-sredni { min-height: 66px; padding: .8rem 1.6rem; font-size: 19px; }
.na-ciemnym .przycisk { border-color: var(--cytryna); box-shadow: 6px 6px 0 var(--miedz); }

/* ---------- strona tytułowa ---------- */
.okladka {
  background: var(--atrament);
  padding: 3.2rem 1.5rem 4.2rem;
}
.arkusz {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  background: var(--papier);
  padding: 3rem 3.4rem 2.6rem;
  box-shadow: 16px 16px 0 var(--miedz);
}
/* znaczniki cięcia jak na arkuszu drukarskim */
.ciecie { position: absolute; width: 26px; height: 26px; pointer-events: none; }
.ciecie::before, .ciecie::after { content: ""; position: absolute; background: var(--lawenda); }
.ciecie::before { width: 26px; height: 2px; }
.ciecie::after { width: 2px; height: 26px; }
.ciecie-lg { top: -38px; left: -38px; }
.ciecie-lg::before { bottom: 0; left: 0; } .ciecie-lg::after { right: 0; top: 0; }
.ciecie-pg { top: -38px; right: -38px; }
.ciecie-pg::before { bottom: 0; right: 0; } .ciecie-pg::after { left: 0; top: 0; }
.ciecie-ld { bottom: -38px; left: -38px; }
.ciecie-ld::before { top: 0; left: 0; } .ciecie-ld::after { right: 0; bottom: 0; }
.ciecie-pd { bottom: -38px; right: -38px; }
.ciecie-pd::before { top: 0; right: 0; } .ciecie-pd::after { left: 0; bottom: 0; }

.wydanie {
  font-size: 1rem;
  color: var(--miedz-ciemna);
  margin-bottom: 1.4rem;
}
.okladka h1 {
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 700;
  color: var(--atrament);
  margin-bottom: .5em;
}
.okladka h1 span { display: block; font-weight: 400; font-size: .52em; margin-top: .45em; color: var(--indygo); }
.perex { font-size: 1.1rem; max-width: 36rem; }
.okladka .przycisk-duzy { margin: .6rem 0 2.2rem; }

.spis { border-top: 3px solid var(--atrament); padding-top: 1.1rem; }
.spis h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .6rem; color: var(--atrament); }
.spis ol { list-style: none; margin: 0; padding: 0; }
.spis li { border-bottom: 1px solid var(--lawenda); }
.spis a {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  gap: .8rem;
  align-items: baseline;
  padding: .55rem 0;
  color: var(--tekst);
  text-decoration: none;
}
.spis a:hover .tyt { text-decoration: underline; }
.spis .nr { font-family: var(--naglowek); font-weight: 600; color: var(--miedz-ciemna); }
.spis .str { font-family: var(--naglowek); font-size: .95rem; color: var(--indygo); }

/* ---------- rozdziały ---------- */
.rozdzial { padding: 4.2rem 1.5rem 2.4rem; }
.rozdzial-gesty { padding: 3.6rem 1.5rem 2.4rem; }
.rozdzial > .strona { max-width: var(--kolumna); margin: 0 auto; }
.tlo-papier { background: var(--papier); }
.tlo-lawenda { background: var(--lawenda); }
.tlo-indygo { background: var(--indygo); color: #f5f5fa; }
.tlo-atrament { background: var(--atrament); color: #f5f5fa; }
.tlo-indygo a:not(.przycisk), .tlo-atrament a:not(.przycisk) { color: #f5f5fa; }
.na-ciemnym .przycisk { color: var(--atrament); }

/* żywa pagina – běžící záhlaví */
.pagina {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--naglowek);
  font-size: .9rem;
  color: var(--miedz-ciemna);
  border-bottom: 2px solid currentColor;
  padding-bottom: .45rem;
  margin: 0 0 2.6rem;
}
.tlo-indygo .pagina, .tlo-atrament .pagina { color: var(--cytryna); }
.pagina span:last-child { text-align: right; }

/* inicjał */
.inicjal::first-letter {
  float: left;
  font-family: var(--naglowek);
  font-weight: 700;
  font-size: 5.4em;
  line-height: .82;
  margin: .06em .14em 0 0;
  color: var(--indygo);
}
.tlo-lawenda .inicjal::first-letter { color: var(--atrament); }
.tlo-indygo .inicjal::first-letter, .tlo-atrament .inicjal::first-letter { color: var(--cytryna); }

/* folio – číslo strany dole */
.folio {
  text-align: center;
  font-family: var(--naglowek);
  font-size: 1rem;
  margin: 2.6rem 0 0;
  color: var(--miedz-ciemna);
}
.folio::before, .folio::after { content: ""; display: inline-block; width: 2.4rem; height: 2px; background: currentColor; vertical-align: middle; margin: 0 .8rem; }
.tlo-indygo .folio, .tlo-atrament .folio { color: var(--cytryna); }

.zrodlo { font-size: .9rem; color: var(--miedz-ciemna); white-space: nowrap; }
.tlo-indygo .zrodlo, .tlo-atrament .zrodlo { color: var(--lawenda); }
.fakt { border-left: 4px solid var(--miedz); padding-left: 1.1rem; }
.tlo-indygo .fakt { border-left-color: var(--cytryna); }

/* rycina obr. 1 */
.rycina { margin: 2.6rem auto; max-width: 560px; }
.rycina img { width: 100%; background: #fff; box-shadow: 10px 10px 0 var(--atrament); }
.rycina figcaption, .zdjecie-cale figcaption, .poslowie-fot figcaption { font-size: .95rem; margin-top: 1rem; line-height: 1.5; }
.podpis-obr { font-family: var(--naglowek); font-weight: 600; margin-right: .3em; }

.przyczyny { margin-top: 2.4rem; }
.przyczyny > h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); font-weight: 700; color: var(--atrament); }
.przyczyna h4 { font-size: 1.2rem; font-weight: 600; margin-top: 1.4em; }
.przyczyna + .przyczyna { border-top: 1px solid rgba(28, 28, 95, .25); padding-top: .4rem; }

/* obr. 2 – celostranová fotka */
.zdjecie-cale { margin: 0; background: var(--atrament); color: #f5f5fa; padding: 0 0 2.6rem; }
.zdjecie-cale img { width: 100%; }
.zdjecie-cale figcaption { max-width: var(--kolumna); margin: 1.4rem auto 0; padding: 0 1.5rem; }
.zdjecie-cale .folio { color: var(--cytryna); margin-top: 1.6rem; }

/* sceny */
.scena { margin-top: 3rem; }
.scena h3 { margin-top: 0; padding-top: 1.4rem; border-top: 3px solid var(--atrament); }
.posrodku { margin: 3.4rem 0 0; }

/* notatki czytelników */
.notatki { margin: 2rem 0 0; display: grid; gap: 1.8rem; }
.notatka { margin: 0; padding-left: 1.4rem; border-left: 4px solid var(--indygo); }
.notatka blockquote { margin: 0; font-size: 1.18rem; font-style: italic; }
.notatka blockquote p { margin: 0 0 .4rem; }
.notatka cite { font-style: normal; font-size: 1rem; color: var(--miedz-ciemna); font-weight: 600; }

/* pytania */
.pytania { margin-top: 1.4rem; border-top: 3px solid var(--atrament); }
.pytanie { border-bottom: 1px solid rgba(28, 28, 95, .3); }
.pytanie summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.08rem;
  padding: 1.05rem 2.4rem 1.05rem 0;
  position: relative;
}
.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary::after {
  content: "+";
  position: absolute;
  right: .3rem;
  top: .8rem;
  font-family: var(--naglowek);
  font-size: 1.4rem;
  color: var(--indygo);
}
.pytanie[open] summary::after { content: "–"; }
.pytanie p { margin: 0 0 1.2rem; }

/* posłowie */
.poslowie-fot { margin: 0 0 2.4rem; }
.poslowie-fot img { width: 100%; box-shadow: 12px 12px 0 var(--miedz); }
.poslowie .przycisk-duzy { margin-top: 1rem; }

/* ---------- patička ---------- */
.stopka {
  background: var(--papier);
  border-top: 3px solid var(--atrament);
  padding: 1.6rem 1.5rem;
  font-size: .95rem;
}
.stopka-wnetrze {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem 2rem;
}
.stopka nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.stopka a { color: var(--atrament); }

/* ---------- podstrony ---------- */
.krotka { min-height: 100vh; display: flex; flex-direction: column; }
.krotka main { flex: 1; }
.kartka {
  max-width: 46rem;
  margin: 2.4rem auto;
  background: #fff;
  padding: 2.8rem 3rem;
  box-shadow: 12px 12px 0 var(--lawenda);
  border-top: 6px solid var(--atrament);
}
.kartka h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--atrament); }
.kartka h2 { font-size: 1.15rem; margin-top: 1.8em; }
.kartka .pagina { margin-bottom: 2rem; }

.formularz { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.formularz label { display: grid; gap: .35rem; font-weight: 600; font-size: 1rem; }
.formularz input, .formularz textarea {
  font: inherit;
  font-weight: 400;
  padding: .75rem .9rem;
  border: 2px solid var(--atrament);
  border-radius: 0;
  background: var(--papier);
  color: var(--tekst);
}
.formularz button { justify-self: start; cursor: pointer; }
#kontaktDakujeme { margin-top: 1.4rem; padding: 1.2rem 1.4rem; background: var(--lawenda); border-left: 4px solid var(--indygo); }

/* ---------- popup a lišta (engine) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 48, .84);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-overlay.show { display: flex; }
.modal {
  position: relative;
  width: min(640px, 100%);
  background: var(--papier);
  color: var(--tekst);
  border: 4px solid var(--atrament);
  box-shadow: 14px 14px 0 var(--miedz);
  padding: 2.8rem 2.4rem 2.4rem;
  text-align: center;
  max-height: 94vh;
  overflow-y: auto;
}
.modal .close {
  position: absolute;
  top: .5rem;
  right: .6rem;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--atrament);
  cursor: pointer;
}
.modal .badge {
  display: inline-block;
  background: var(--atrament);
  color: var(--cytryna);
  font-family: var(--naglowek);
  font-weight: 600;
  font-size: 1rem;
  padding: .35rem .9rem;
  margin-bottom: 1rem;
}
.modal h3 { font-size: 46px; color: var(--indygo); margin: .2em 0 .3em; }
.modal > p { font-size: 1.3rem; font-weight: 600; }
.modal .offer { margin: 1.2rem 0 1.6rem; padding: 1rem; background: var(--lawenda); }
.modal .offer p { margin: .3rem 0; }
.modal .btn { white-space: normal; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--naglowek);
  font-weight: 600;
  border-radius: 0;
}
.btn-cta {
  background: var(--cytryna);
  color: var(--atrament);
  border: 3px solid var(--atrament);
  box-shadow: 5px 5px 0 var(--atrament);
  min-height: 60px;
  padding: .6rem 1.3rem;
  font-size: 18px;
}
.btn-cta-xl { width: 100%; min-height: 86px; font-size: 22px; padding: 1rem 1.4rem; }

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--atrament);
  color: #f5f5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: .7rem 1rem;
  border-top: 3px solid var(--cytryna);
}
.sticky-cta > span { font-size: 1.05rem; }
.sticky-cta .btn { flex: 0 0 auto; box-shadow: 4px 4px 0 var(--miedz); border-color: var(--cytryna); }

/* ---------- mobil ---------- */
@media (max-width: 720px) {
  body { font-size: 18px; padding-bottom: 150px; }
  .grzbiet-wnetrze { padding: .55rem 1rem; }
  .znak { font-size: 1rem; }
  .przycisk-maly { font-size: 16px; padding: .4rem .7rem; min-height: 48px; }
  .okladka { padding: 1.4rem .9rem 2.6rem; }
  .arkusz { padding: 1.6rem 1.2rem 1.6rem; box-shadow: 8px 8px 0 var(--miedz); }
  .ciecie { display: none; }
  .wydanie { margin-bottom: .8rem; font-size: .95rem; }
  .okladka h1 { font-size: 1.75rem; }
  .perex { font-size: 1.05rem; }
  .przycisk-duzy { min-width: 0; width: 100%; font-size: 20px; min-height: 80px; padding: .9rem 1rem; }
  .okladka .przycisk-duzy { margin: .2rem 0 1.8rem; }
  .spis a { grid-template-columns: 2.4rem 1fr auto; gap: .5rem; }
  .rozdzial { padding: 3.6rem 1.1rem 2.4rem; }
  .rozdzial-gesty { padding: 2.6rem 1.1rem 2rem; }
  .pagina { font-size: .9rem; margin-bottom: 1.8rem; }
  .inicjal::first-letter { font-size: 4.2em; }
  .rycina { max-width: 100%; }
  .rycina img { box-shadow: 6px 6px 0 var(--atrament); }
  .zdjecie-cale img { max-height: 70vh; object-fit: cover; object-position: 52% 15%; }
  .zrodlo { white-space: normal; }
  .kartka { margin: 1.4rem .8rem; padding: 1.6rem 1.2rem; box-shadow: 6px 6px 0 var(--lawenda); }
  .modal { padding: 2.6rem 1.2rem 1.4rem; }
  .modal h3 { font-size: 34px; }
  .btn-cta-xl { font-size: 20px; min-height: 76px; }
  .sticky-cta { flex-direction: column; gap: .5rem; padding: .6rem .8rem; text-align: center; }
  .sticky-cta > span { font-size: .95rem; }
  .sticky-cta .btn { min-height: 60px; width: 100%; }
}