/* Rozniebieszczyć szarość — arkusz stylów strony
   Kroje pisma: Cormorant Garamond, EB Garamond (SIL OFL 1.1), serwowane z tego serwera. */

/* ---------- Kroje pisma ---------- */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/eb-garamond-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/eb-garamond-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/eb-garamond-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/eb-garamond-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/eb-garamond-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-300-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Zmienne ---------- */
:root {
  --tlo: #3a4048;
  --niebo-1: #555b63;
  --niebo-2: #a2a7ac;
  --atrament: #f3efe7;
  --atrament-2: rgba(243, 239, 231, 0.74);
  --atrament-3: rgba(243, 239, 231, 0.5);
  --kreska: rgba(243, 239, 231, 0.22);
  --akcent: #a9c7ee;
  --welon: 0.32;
  --welon-rgb: 6, 9, 15;
  --wx: 50%;
  --tekst: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --tytul: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --margines: clamp(1.25rem, 6vw, 7rem);
  /* paski (u góry: styl, ruch, napisz; na dole: „Czytaj”, „Poprzedni / Następny”, stopka): napisy bez przezroczystości
     na miękkiej mgiełce w barwie welonu stylu — czytelne na jasnym niebie, słońcu, białej ścianie i ciemnej plamie farby */
  --pasek-1: var(--atrament);
  --pasek-2: color-mix(in srgb, var(--atrament) 90%, transparent);
  --mgla-paska: .7;
  --mgla-stopki: .9;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--tlo);
  color: var(--atrament);
  font-family: var(--tekst);
  font-size: clamp(1.06rem, 0.96rem + 0.42vw, 1.32rem);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration-color: var(--kreska); text-underline-offset: 0.22em; text-decoration-thickness: 1px;
  transition: text-decoration-color .3s ease, color .3s ease; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 1px solid var(--akcent); outline-offset: 4px; border-radius: 1px; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }

.pomin { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: .6rem 1rem; background: rgba(10, 14, 22, .9);
  font: 500 .8rem/1 var(--tytul); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.pomin:focus { top: 1rem; }

/* ---------- Tło ---------- */
.tlo, .tlo-awaryjne, .welon { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
.tlo { z-index: 0; display: block; opacity: 0; transition: opacity 1.6s ease; }
.tlo.gotowe { opacity: 1; }
.tlo-awaryjne { z-index: 0; display: none; background: linear-gradient(to top, var(--niebo-2), var(--niebo-1) 75%); transition: background 1.2s ease; }
html.bez-gl .tlo-awaryjne { display: block; }
.tlo-awaryjne .warstwa { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0;
  transition: opacity 1.4s ease; }
.tlo-awaryjne .warstwa.widoczna { opacity: 1; }
.welon { z-index: 1;
  background:
    radial-gradient(ellipse 58% 78% at var(--wx) 52%, rgba(var(--welon-rgb), var(--welon)) 0%, rgba(var(--welon-rgb), calc(var(--welon) * .55)) 52%, rgba(var(--welon-rgb), 0) 82%),
    linear-gradient(to bottom, rgba(6, 9, 15, .18), rgba(6, 9, 15, 0) 22%, rgba(6, 9, 15, 0) 78%, rgba(6, 9, 15, .22)); }

/* ---------- Sterowanie (prawy górny róg) ---------- */
.sterowanie { position: fixed; z-index: 6; top: max(.9rem, env(safe-area-inset-top)); right: clamp(.8rem, 2.4vw, 2rem);
  display: flex; align-items: center; gap: 1.1rem; font: 500 .7rem/1 var(--tytul); letter-spacing: .2em; text-transform: uppercase; }
.sterowanie[hidden] { display: none; }
/* mgiełka pod napisami pasków: miękka plama w barwie welonu, gęsta pod literami i wygasająca ku brzegom */
.sterowanie::before, .prowadzenie::before, .dalej::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 3rem; background: rgba(var(--welon-rgb), var(--mgla-paska));
  box-shadow: 0 0 1.3rem .5rem rgba(var(--welon-rgb), var(--mgla-paska)), 0 0 4.5rem 1.8rem rgba(var(--welon-rgb), calc(var(--mgla-paska) * .5)); }
.sterowanie::before { inset: .15rem -.2rem; }
.przelacznik { display: flex; gap: .2rem; }
.sterowanie button { appearance: none; background: none; border: 0; color: var(--pasek-2); font: inherit; letter-spacing: inherit;
  text-transform: inherit; padding: .45rem .35rem; cursor: pointer; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.sterowanie button:hover { color: var(--pasek-1); }
.sterowanie button[aria-pressed="true"] { color: var(--atrament); border-bottom-color: var(--kreska); }
.sterowanie .ruch[aria-pressed="false"] { text-decoration: line-through; text-decoration-color: var(--atrament-3); }
.sterowanie .napisz-otworz { border: 1px solid var(--kreska); padding: .45rem .7rem; }

/* ---------- Czoło strony ---------- */
.czolo { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; padding: 14vh var(--margines) 18vh; }
.tytul { margin: 0; font-family: var(--tytul); font-style: italic; font-weight: 300; font-size: clamp(3.1rem, 1.6rem + 7.2vw, 9.4rem);
  line-height: .9; letter-spacing: -.012em; text-shadow: 0 2px 40px rgba(0, 0, 0, .25); }
.tytul .t1, .tytul .t2 { display: block; }
.tytul .t2 { padding-left: 1.15em; padding-bottom: .08em;
  background: linear-gradient(100deg, #e7e8ea 0%, #cfd5dc 35%, #a7c3ea 62%, #7fb0f4 82%, #cfe2ff 100%);
  background-size: 280% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rozniebieszczanie 14s ease-in-out 1.2s infinite alternate; }
@keyframes rozniebieszczanie { to { background-position: 100% 50%; } }
.podtytul { margin: 2.2rem 0 0 .2em; font: 500 .78rem/1.4 var(--tytul); letter-spacing: .38em; text-transform: uppercase;
  color: var(--atrament-2); }
.dalej { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: .8rem; text-decoration: none; font: 500 .66rem/1 var(--tytul); letter-spacing: .32em;
  text-transform: uppercase; color: var(--pasek-2); isolation: isolate; }
.dalej::before { top: -.45rem; height: 1.55rem; left: -1.3rem; right: -1.3rem; }
.dalej::after { content: ""; width: 1px; height: 3.6rem; background: linear-gradient(var(--atrament-2), transparent);
  transform-origin: top; animation: oddech 3.4s ease-in-out infinite; }
@keyframes oddech { 0%, 100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* wejście tytułu */
.czolo .tytul, .czolo .podtytul { animation: wynurzenie 2.6s cubic-bezier(.2, .7, .2, 1) both; }
.czolo .podtytul { animation-delay: .9s; }
.czolo .tytul .t2 { animation: rozniebieszczanie 14s ease-in-out 2.2s infinite alternate; }
@keyframes wynurzenie { from { opacity: 0; filter: blur(10px); transform: translateY(.4rem); } to { opacity: 1; filter: none; transform: none; } }

/* ---------- Wiersze ---------- */
main#wiersze { position: relative; z-index: 2; }
.wiersz { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 26vh var(--margines) 26vh; }
.wiersz .kolumna { width: 100%; max-width: 31rem; }
.wiersz.lewa .kolumna { margin-left: clamp(0rem, 7vw, 8rem); }
.wiersz.prawa .kolumna { margin-left: auto; margin-right: clamp(0rem, 9vw, 10rem); }
.numer { margin: 0 0 .1em -.04em; font: italic 300 clamp(3.4rem, 2rem + 5vw, 6.6rem)/1 var(--tytul); letter-spacing: .02em;
  color: var(--atrament); opacity: .3; }
.gwiazdki { margin: 0 0 2.4rem .15em; font: 400 .95rem/1 var(--tytul); letter-spacing: .7em; color: var(--atrament-3); }
.tekst { text-shadow: 0 1px 14px rgba(0, 0, 0, .38), 0 0 2px rgba(0, 0, 0, .25); }
.strofa { margin: 0 0 1.5em; }
.strofa:last-child { margin-bottom: 0; }
.w { display: block; padding-left: 1.4em; text-indent: -1.4em; }

/* Wersy wyłaniają się kolejno, gdy wiersz wchodzi w kadr (tylko gdy działa skrypt; bez niego tekst jest widoczny od razu). */
.wiersz.czeka .w, .wiersz.czeka .numer, .wiersz.czeka .gwiazdki { opacity: 0; transform: translateY(.45em); filter: blur(5px); }
.wiersz .w, .wiersz .numer, .wiersz .gwiazdki { transition: opacity 1.2s ease, transform 1.5s cubic-bezier(.2, .7, .2, 1), filter 1.5s ease;
  transition-delay: calc(var(--i, 0) * 75ms); }
.wiersz .numer { --i: 0; }
.wiersz .gwiazdki { --i: 1; }

/* ---------- Zakończenie ---------- */
/* Prowadzenie: czytelnik nie przewija strony; „Czytaj”, „Poprzedni” i „Następny” przesuwają ją same (strona.js).
   Bez skryptu klasa .prowadzona nie powstaje i strona przewija się zwyczajnie. */
html.prowadzona, html.prowadzona body { overflow: hidden; overscroll-behavior: none; }
.prowadzenie { position: fixed; z-index: 6; left: 50%; bottom: max(1.6rem, calc(env(safe-area-inset-bottom) + .8rem));
  transform: translateX(-50%); display: flex; gap: clamp(2rem, 6vw, 4rem); }
.prowadzenie[hidden], .prowadzenie button[hidden] { display: none; }
/* stopka stoi na dole przez cały czas, pasek „Poprzedni / Następny” nad nią */
html.prowadzona .stopka { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; border-top: 0;
  padding: 1.1rem var(--margines) max(.9rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(var(--welon-rgb), var(--mgla-stopki)) 0%, rgba(var(--welon-rgb), calc(var(--mgla-stopki) * .84)) 58%, rgba(var(--welon-rgb), 0) 100%); }
html.prowadzona .prowadzenie { bottom: calc(var(--wys-stopki, 0px) + .3rem); }
.prowadzenie::before { inset: .1rem -1.2rem .25rem; }
html.prowadzona .koda { padding-bottom: calc(var(--wys-stopki, 0px) + 7rem); }
/* telefon i tablet: wersy dłuższego wiersza znikają łagodnie pod paskiem, zamiast nakładać się na napisy */
@media (max-width: 1023px) {
  .prowadzenie { left: 0; right: 0; bottom: 0; transform: none; justify-content: center;
    padding: 3rem 1rem max(1rem, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgb(var(--welon-rgb)) 0%, rgb(var(--welon-rgb)) 52%, rgba(var(--welon-rgb), 0) 100%); }
  html.prowadzona .prowadzenie { bottom: var(--wys-stopki, 0px); padding-top: 2.2rem; }
  .prowadzenie::before { display: none; }
  /* wersy długiego wiersza wygasają pod paskiem i nie przechodzą przez napisy stopki */
  html.prowadzona .stopka, html.prowadzona[data-styl] .stopka { background: rgb(var(--welon-rgb)); }
}
/* Komputer: wiersz staje na środku ekranu; gdy się nie mieści, to, co nie weszło do pierwszej kolumny,
   przechodzi do drugiej (wysokość tekstu liczy strona.js). Telefon zostaje przy jednej kolumnie. */
@media (min-width: 1024px) {
  html.prowadzona .wiersz { padding-top: 12vh; padding-bottom: max(16vh, calc(var(--wys-stopki, 0px) + 5.4rem)); }
  .wiersz.dwie-kolumny .tekst { column-count: 2; column-gap: clamp(2.4rem, 4vw, 4rem); column-fill: auto; height: var(--wys-tekstu, auto); }
  html[data-styl] .wiersz.dwie-kolumny .kolumna { max-width: 52rem; }
  .wiersz.dwie-kolumny .w { break-inside: avoid; }
  html.prowadzona .wiersz.dwie-kolumny { padding-top: 10vh; padding-bottom: max(14vh, calc(var(--wys-stopki, 0px) + 5rem)); }
  .wiersz.dwie-kolumny.drobniej .kolumna { font-size: calc(1em * var(--skala-tekstu, .93)); }
}
.prowadzenie button { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--kreska); padding: .3rem 0 .5rem;
  min-height: 44px; color: var(--atrament); font: 500 .72rem/1 var(--tytul); letter-spacing: .26em; text-transform: uppercase; cursor: pointer; }
.prowadzenie button:hover, .prowadzenie button:focus-visible { border-bottom-color: currentColor; }

.koda { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 20vh var(--margines) 12vh; }
.koda-znak { display: block; width: 1px; height: 4.5rem; margin-bottom: 2.4rem; background: linear-gradient(transparent, var(--atrament-2), transparent); }
.koda-tekst { margin: 0; font: italic 300 clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem)/1.2 var(--tytul); }
.koda-akcje { display: flex; gap: 2rem; justify-content: center; margin: 2.6rem 0 0; font: 500 .78rem/1 var(--tytul);
  letter-spacing: .22em; text-transform: uppercase; }
.koda-akcje a, .koda-akcje button { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--kreska); padding: 0 0 .5rem;
  color: var(--atrament); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; cursor: pointer; }
.koda-akcje a:hover, .koda-akcje button:hover { border-bottom-color: currentColor; }
.koda-licencja { max-width: 30rem; margin: 3.4rem auto 0; font-size: .92rem; color: var(--atrament); }
.koda-licencja cite { font-style: italic; }

/* ---------- Gwiazdozbiór (spis wierszy) ---------- */
.gwiazdozbior { position: fixed; z-index: 5; right: clamp(.4rem, 1.6vw, 1.4rem); top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity .8s ease; }
.gwiazdozbior.widoczny { opacity: 1; }
.gwiazdozbior ol { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.gwiazdozbior ol::before { content: ""; position: absolute; left: 50%; top: .6rem; bottom: .6rem; width: 1px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .13), transparent); }
.gwiazdozbior a { position: relative; display: block; width: 24px; height: 20px; text-decoration: none; }
.gwiazdozbior li:nth-child(3n+1) a { transform: translateX(-5px); }
.gwiazdozbior li:nth-child(3n+2) a { transform: translateX(3px); }
.gwiazdozbior li:nth-child(5n) a { transform: translateX(-1px); }
.gwiazdozbior a::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); transform: translate(-50%, -50%); transition: all .5s ease; }
.gwiazdozbior a:hover::before, .gwiazdozbior a:focus-visible::before { background: #fff; width: 5px; height: 5px; }
.gwiazdozbior a[aria-current="true"]::before { width: 7px; height: 7px; background: #fff;
  box-shadow: 0 0 10px 2px rgba(190, 215, 255, .75), 0 0 2px #fff; }
.gwiazdozbior a::after { content: attr(data-t); position: absolute; right: 100%; top: 50%; transform: translate(-.4rem, -50%);
  white-space: nowrap; font: italic 400 1.02rem/1 var(--tytul); color: var(--atrament); text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
  opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.gwiazdozbior a:hover::after, .gwiazdozbior a:focus-visible::after { opacity: .95; transform: translate(-.9rem, -50%); }
.gwiazdozbior a:focus-visible { outline: none; }

/* ---------- Stopka ---------- */
.stopka { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .8rem 2rem; padding: 2.2rem var(--margines) max(2rem, env(safe-area-inset-bottom));
  font: 500 .7rem/1.6 var(--tytul); letter-spacing: .16em; text-transform: uppercase; color: var(--pasek-2);
  border-top: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(transparent, rgba(5, 8, 13, .35)); }
.stopka p { margin: 0; }
.stopka-linki { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.stopka a, .stopka button { appearance: none; background: none; border: 0; padding: 0; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; text-decoration: none; cursor: pointer; transition: color .3s; }
.stopka a:hover, .stopka button:hover { color: var(--pasek-1); }

/* ---------- Okno „Napisz do mnie” ---------- */
.list { width: min(35rem, calc(100vw - 1.6rem)); max-height: calc(100svh - 1.6rem); margin: auto; padding: 0;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px; color: var(--atrament);
  background: rgba(13, 17, 25, .84); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5); overflow: auto; }
.list[open] { animation: list-wejscie .5s cubic-bezier(.2, .7, .2, 1); }
.list::backdrop { background: rgba(4, 6, 10, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes list-wejscie { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
.list-formularz { padding: clamp(1.3rem, 4.5vw, 2.4rem); }
.list h2 { margin: 0; font: italic 300 clamp(2rem, 1.6rem + 1.6vw, 2.7rem)/1.05 var(--tytul); }
.list-wstep { margin: .5rem 0 1rem; color: var(--atrament-2); font-style: italic; }
.list label { display: block; margin-top: 1.3rem; font: 500 .72rem/1.3 var(--tytul); letter-spacing: .18em; text-transform: uppercase;
  color: var(--atrament-2); }
.list .opcjonalnie { color: var(--akcent); letter-spacing: .05em; text-transform: none; font-style: italic; font-size: .95rem;
  font-weight: 400; }
.list input, .list textarea { display: block; width: 100%; margin-top: .35rem; padding: .4rem 0; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .26); background: transparent; color: var(--atrament);
  font: 1.12rem/1.5 var(--tekst); outline: none; transition: border-color .3s; }
.list textarea { min-height: 8.5rem; resize: vertical; }
.list input:focus, .list textarea:focus { border-bottom-color: var(--akcent); }
.list [aria-invalid="true"] { border-bottom-color: #f0a08c; }
.list .pomoc { margin: .45rem 0 0; font-size: .88rem; color: var(--atrament-3); }
.list .rodo { margin: 1.5rem 0 0; font-size: .86rem; color: var(--atrament-3); }
.pulapka { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.list-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 1.6rem; }
.list-odpowiedzi { margin-left: auto; font: 500 .72rem/1 var(--tytul); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--atrament-2); }
.list-odpowiedzi:hover { color: var(--atrament); }
.przycisk { appearance: none; padding: .78rem 1.3rem; border: 1px solid rgba(255, 255, 255, .34); border-radius: 1px;
  background: rgba(255, 255, 255, .05); color: var(--atrament); font: 500 .74rem/1 var(--tytul); letter-spacing: .22em;
  text-transform: uppercase; cursor: pointer; transition: background .3s, border-color .3s; }
.przycisk:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }
.przycisk.cichy { border-color: transparent; background: none; color: var(--atrament-2); }
.przycisk[disabled] { opacity: .55; cursor: progress; }
.list-status { min-height: 1.4em; margin: 1rem 0 0; font-style: italic; color: var(--atrament-2); }
.list-status.blad { color: #f4b4a4; }
.list-status.ok { color: var(--akcent); }
.list.wyslano .list-formularz > :not(h2):not(.list-status):not(.list-akcje) { display: none; }
.list.wyslano .list-akcje button[type="submit"] { display: none; }

/* ---------- Podstrony ---------- */
.podstrona { position: relative; z-index: 2; max-width: 44rem; margin: 0 auto; padding: 16vh 1.4rem 10vh; min-height: 100vh; }
.podstrona h1 { margin: 0 0 1.4rem; font: italic 300 clamp(2.6rem, 1.8rem + 4vw, 4.6rem)/1 var(--tytul); }
.podstrona h2 { margin: 2.6rem 0 .6rem; font: italic 400 clamp(1.45rem, 1.2rem + 1vw, 1.9rem)/1.2 var(--tytul); }
.podstrona p, .podstrona li { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.podstrona .wstep { font-size: 1.12em; color: var(--atrament); }
.podstrona .aktualizacja { color: var(--atrament-3); font-size: .9rem; }
.powrot { margin: 0 0 3rem; font: 500 .72rem/1 var(--tytul); letter-spacing: .2em; text-transform: uppercase; }
.powrot a { text-decoration: none; color: var(--atrament-2); }
.powrot a:hover { color: var(--atrament); }
.tekst-prawny p { color: var(--atrament-2); }
.tekst-prawny strong { color: var(--atrament); font-weight: 500; }
.przyklad { padding: .9rem 1.1rem; border-left: 1px solid var(--kreska); font-style: italic; color: var(--atrament) !important;
  background: rgba(5, 8, 13, .25); }
.zrodla { list-style: none; margin: 1.2rem 0 0; padding: 0; font-size: .95rem; color: var(--atrament-2); }
.zrodla li { padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.zrodla .gdzie { display: block; font: 500 .68rem/1.4 var(--tytul); letter-spacing: .18em; text-transform: uppercase; color: var(--atrament-3); }
.odpowiedz { margin: 2.4rem 0; padding: 1.6rem 0 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.odpowiedz .data { margin: 0 0 .8rem; font: 500 .72rem/1 var(--tytul); letter-spacing: .2em; text-transform: uppercase; color: var(--atrament-3); }
.odpowiedz .tresc p { margin: 0 0 1em; }
.pusto { color: var(--atrament-3); font-style: italic; }
.podstrona-akcje { margin-top: 3rem; }

/* ---------- Mniejsze ekrany ---------- */
@media (max-width: 760px) {
  .wiersz { padding: 22vh 1.4rem 22vh; }
  .wiersz.lewa .kolumna, .wiersz.prawa .kolumna { margin: 0 auto; max-width: 28rem; }
  .gwiazdozbior { display: none; }
  .sterowanie { gap: .5rem; left: .6rem; right: .6rem; justify-content: flex-end; }
  .sterowanie button { padding: .4rem .25rem; }
  .tytul .t2 { padding-left: .6em; }
  .podtytul { letter-spacing: .28em; }
  .stopka { flex-direction: column; align-items: flex-start; }
  html.prowadzona .stopka { flex-direction: row; gap: .3rem 1rem; padding: .7rem 1rem max(.7rem, env(safe-area-inset-bottom));
    font-size: .58rem; letter-spacing: .12em; }
  html.prowadzona .stopka-linki { gap: .3rem 1rem; }
  .list-odpowiedzi { margin-left: 0; }
}

/* ---------- Ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; }
  .wiersz.czeka .w, .wiersz.czeka .numer, .wiersz.czeka .gwiazdki { opacity: 1; transform: none; filter: none; }
}
html.bez-ruchu .tytul .t2 { animation-play-state: paused; }
html.bez-ruchu .dalej::after { animation: none; }

/* ---------- Wydruk ---------- */
@media print {
  .tlo, .tlo-awaryjne, .welon, .sterowanie, .gwiazdozbior, .dalej, .pomin, .list, .koda-akcje { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .tekst { text-shadow: none; }
  .wiersz, .czolo, .koda { min-height: 0; padding: 1.5cm 0; break-inside: avoid; }
  .wiersz .kolumna { margin: 0 !important; }
  .tytul .t2 { color: #000; background: none; }
  .wiersz.czeka .w, .wiersz.czeka .numer, .wiersz.czeka .gwiazdki { opacity: 1; transform: none; filter: none; }
}