/* ══════════════════════════════════════════════════════════════════════════
   „POLAK Z SERCEM" — ARKUSZ MARKI AKCJI
   23.09.2026. Dotyczy stron ZEWNĘTRZNYCH akcji: /polak-z-sercem
   oraz /polakzsercem/*. Nie dotyczy paneli.

   ── SKĄD SĄ TE BARWY ──────────────────────────────────────────────────────
   Nie wymyślone. Odczytane pipetą z plików, które wgrała Katarzyna Szczepanik
   (wrzutnia, katalog /opt/ksm-gotow/baza-parafii/):

     #C21319  czerwień znaku      — „Polak z Sercem - logo full color_ poziom.png"
                                    (2364×1182) oraz web/znaki/polak-z-sercem-znak.png;
                                    barwa dominująca obu plików.
     #E02F29  czerwień serc       — serca na ilustracjach 1-3.png, 1-5.png, 1-6.png
                                    i na 5.png (trzy dłonie).
     #FAD347  żółć dłoni          — 5.png, barwa dominująca (9438 próbek na 160 px).
     #FFFDF2  krem ilustracji     — tło dłoni na 1-3.png / 1-5.png / 1-6.png.
     #000000  czerń typografii    — napis POLAK Z SERCEM w znaku poziomym.

   Odcienie pochodne (#8E0D12, #A00F14, #2A2622, #605A50, #FFF6E8, #FFE9EA)
   powstały przez przyciemnienie albo rozjaśnienie powyższych — wyłącznie po to,
   żeby dobić kontrast do progu. Każda para jest zmierzona; liczby stoją
   przy tokenach niżej.

   ── KONTRAST (obliczony wzorem WCAG, potwierdzony pomiarem z renderu) ─────
     #C21319 na #FFFDF2 ....... 6,05:1
     #FFFDF2 na #C21319 ....... 6,05:1
     #2A2622 na #FFFDF2 ...... 14,72:1   pismo główne
     #605A50 na #FFFDF2 ....... 6,69:1   pismo drugorzędne
     #8E0D12 na #FFFDF2 ....... 9,29:1   czerwień jako pismo
     #FAD347 na #8E0D12 ....... 6,53:1   żółć jako pismo na ciemnej czerwieni
     #FFE9EA na #C21319 ....... 5,32:1   nadtytuł na czerwieni
   ŻÓŁĆ #FAD347 NA CZERWIENI #C21319 TO 4,26:1 — PONIŻEJ PROGU.
   Dlatego żółć na jasnej czerwieni występuje tylko jako kreska i ornament,
   nigdy jako pismo. Na ciemnej czerwieni #8E0D12 wolno jej być pismem.

   ── KROJE ─────────────────────────────────────────────────────────────────
   Poppins 600/700 — nagłówki. Wybrany dlatego, że napis POLAK Z SERCEM
   w znaku jest geometrycznym groteskiem wersalikowym; Poppins jest
   najbliższym geometrykiem, który LEŻY JUŻ NA NASZYM SERWERZE.
   Lato 400/700 + kursywa — tekst. Krój wskazany w kroje-ksiegi.css
   jako propozycja do księgi (rozstrzygnięcie ks. Andrzeja z 21.09.2026).

   Oba pobrane raz z fonts.gstatic.com i zapisane u nas w /ksm/wspolne/fonty/.
   Strona NIE ODWOŁUJE SIĘ do żadnej obcej domeny — nagłówek
   Content-Security-Policy ma `font-src 'self' data:`, więc krój z cudzego
   serwera i tak by nie wszedł. Licencje: SIL OFL 1.1 (obie rodziny).

   POLSKIE ZNAKI: ó leży w podzbiorze `latin`, a ą ć ę ł ń ś ź ż w `latin-ext`.
   Wpięte są OBA podzbiory każdej grubości — bez tego polski wyraz rozpadłby
   się na dwa kroje w środku słowa.

   WAGA — policzona, nie oszacowana:
     Poppins 600 + 700 (latin + latin-ext) ....  33 592 B
     Lato 400 + 700 + kursywa 400 (oba podz.) .. 87 968 B
     razem ....................................  121 560 B
   Przeglądarka pobiera tylko te podzbiory, których użyje.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── KROJE ──────────────────────────────────────────────────────────────── */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(/ksm/wspolne/fonty/poppins-600-latin-ext.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:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(/ksm/wspolne/fonty/poppins-600-latin.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:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(/ksm/wspolne/fonty/poppins-700-latin-ext.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:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(/ksm/wspolne/fonty/poppins-700-latin.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:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/ksm/wspolne/fonty/Lato-400-normal-latin-ext.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:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/ksm/wspolne/fonty/Lato-400-normal-latin.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:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/ksm/wspolne/fonty/Lato-700-normal-latin-ext.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:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/ksm/wspolne/fonty/Lato-700-normal-latin.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:'Lato';font-style:italic;font-weight:400;font-display:swap;
  src:url(/ksm/wspolne/fonty/Lato-400-italic-latin-ext.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:'Lato';font-style:italic;font-weight:400;font-display:swap;
  src:url(/ksm/wspolne/fonty/Lato-400-italic-latin.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;}

/* ── BARWY ──────────────────────────────────────────────────────────────── */
:root{
  --pzs-czerwien:      #C21319;  /* znak */
  /* DWA TOKENY, NIE JEDEN. `--pzs-czerwien-c` to TŁO (nagłówek, pasek liczb,
     pasek nawigacji) i zostaje ciemne w obu motywach — to barwa marki.
     `--pzs-czerwien-pismo` to czerwień JAKO PISMO i w motywie nocnym musi się
     odwrócić na jasną. Dopóki był jeden token, motyw ciemny robił z tła
     nagłówka róż #F0A8AC i biały napis miał na nim 1,93:1. Zmierzone
     23.09.2026 przeglądarką, zanim rozdzieliłem te role. */
  --pzs-czerwien-c:    #8E0D12;  /* CIEMNE TŁO — nie zmienia się w nocy */
  --pzs-czerwien-pismo:#8E0D12;  /* czerwień jako pismo, 9,29:1 na kremie */
  --pzs-ciemne:        #2A2622;  /* ciemna powierzchnia — pasek górny, stopka */
  --pzs-czerwien-s:    #A00F14;  /* pośrednia — gradient */
  --pzs-serce:         #E02F29;  /* serca z ilustracji */
  --pzs-zolc:          #FAD347;  /* dłonie z 5.png — ornament */
  /* ŻÓŁĆ JAKO PISMO NA CZERWIENI. Brandowa #FAD347 daje na najjaśniejszym
     przystanku gradientu (#C21319) 4,26:1 — poniżej progu 4,5. Rozjaśniony
     wariant tej samej żółci: 4,57:1 na #C21319, 6,04:1 na #A00F14,
     7,02:1 na #8E0D12. Ornament (kreska) zostaje przy barwie z pliku. */
  --pzs-zolc-pismo:    #FBDC6B;
  --pzs-krem:          #FFFDF2;  /* tło ilustracji */
  --pzs-krem-c:        #FFF6E8;  /* krem cieplejszy — pasy sekcji */
  --pzs-rozowy:        #FFE9EA;  /* nadtytuł na czerwieni, 5,32:1 */
  --pzs-atrament:      #2A2622;  /* pismo główne, 14,72:1 na kremie */
  --pzs-atrament-2:    #605A50;  /* pismo drugorzędne, 6,69:1 na kremie */
  --pzs-linia:         #E4DCC8;
  --pzs-linia-m:       #CFC4A8;
  --pzs-plansza:       #FFFFFF;
  --pzs-cien:          0 10px 30px rgba(42,38,34,.09);
  --pzs-cien-m:        0 18px 44px rgba(142,13,18,.16);
  --pzs-promien:       16px;
}

/* Motyw ciemny serwisu. Czerwień znaku zostaje — to marka. Zmieniają się
   powierzchnie: krem ustępuje ciemnemu tłu, pismo się odwraca.
   Zmierzone: #F4EFE4 na #1B1815 = 15,41:1; #F0A8AC na #1B1815 = 9,18:1. */
:root[data-motyw="ciemny"], :root[data-theme="dark"]{
  --pzs-krem:       #1B1815;
  --pzs-krem-c:     #232019;
  --pzs-plansza:    #262219;
  --pzs-atrament:   #F4EFE4;
  --pzs-atrament-2: #C9C0AE;
  --pzs-linia:      #3B352B;
  --pzs-linia-m:    #4E4739;
  --pzs-czerwien-pismo: #F0A8AC;  /* 9,18:1 na #1B1815, 8,23:1 na #262219 */
  --pzs-cien:       0 10px 30px rgba(0,0,0,.45);
}

/* ── PODSTAWA ───────────────────────────────────────────────────────────── */
.pzs{
  font-family:'Lato',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px; line-height:1.65;
  color:var(--pzs-atrament);
  background:var(--pzs-krem);
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;            /* nic nie wypycha strony w bok */
}
/* W motywie nocnym motyw.css przestawia `body` na granat serwisu regułą
   `:root[data-theme="dark"] body` (waga 0-1-1). Strona akcji ma własny grunt —
   ciepłą czerń dobraną do czerwieni znaku — więc bierze wagę 0-2-1 i zostaje
   przy swoim. To nie jest walka z motywem: tokeny nocne stoją wyżej w tym
   arkuszu i są zmierzone (#F4EFE4 na #1B1815 = 15,41:1). */
:root[data-motyw="ciemny"] body.pzs, :root[data-theme="dark"] body.pzs{
  background:var(--pzs-krem); color:var(--pzs-atrament)}

.pzs h1,.pzs h2,.pzs h3,.pzs h4,.pzs .pzs-liczba{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:700; line-height:1.15; text-wrap:balance; letter-spacing:-.012em;
  color:var(--pzs-atrament); margin:0;
}
.pzs p{margin:0 0 14px; text-wrap:pretty}
.pzs img{max-width:100%;height:auto}
.pzs a{color:var(--pzs-czerwien-pismo)}
.pzs :focus-visible{outline:3px solid var(--pzs-czerwien);outline-offset:3px;border-radius:4px}

.pzs-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.pzs-waski{max-width:760px;margin:0 auto;padding:0 20px}
.pzs-sekcja{padding:52px 0}
.pzs-sekcja--krem{background:var(--pzs-krem-c)}
.pzs-nad{font:700 16px/1.45 'Poppins',system-ui,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pzs-czerwien-pismo);margin-bottom:12px}
.pzs-lead{font-size:18px;line-height:1.6;color:var(--pzs-atrament-2);max-width:66ch}

/* Kreska z żółci — ornament, nigdy pismo. */
.pzs-kreska{width:64px;height:5px;border-radius:3px;background:var(--pzs-zolc);margin:14px 0 22px}
.pzs-kreska--srodek{margin-left:auto;margin-right:auto}

/* ── PRZYCISKI (min. 44 px wysokości dotyku) ────────────────────────────── */
.pzs-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 26px;border-radius:100px;border:2px solid transparent;
  font:700 16px/1.2 'Poppins',system-ui,sans-serif;text-decoration:none;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease}
/* KAŻDY WARIANT MA WYŻSZĄ WAGĘ NIŻ `.pzs a`. Bez tego reguła barwy odnośnika
   (`.pzs a{color:…}`, waga 0-1-1) wygrywała z `.pzs-btn--obrys` (0-1-0)
   i przycisk obrysowy dostawał ciemną czerwień na czerwieni — 1,26:1,
   czyli napis, którego praktycznie nie widać. Zmierzone na zrzucie
   z 23.09.2026, zanim to poprawiłem. */
.pzs .pzs-btn--glowny{background:var(--pzs-czerwien);color:#fff}          /* 6,17:1 */
.pzs .pzs-btn--glowny:hover{background:var(--pzs-czerwien-c);transform:translateY(-1px)}
.pzs .pzs-btn--jasny{background:var(--pzs-krem);color:var(--pzs-czerwien-pismo)} /* 9,29:1 */
.pzs .pzs-btn--jasny:hover{background:#fff}
.pzs .pzs-btn--obrys{background:rgba(0,0,0,.16);color:#fff;border-color:rgba(255,255,255,.72)}
.pzs .pzs-btn--obrys:hover{background:rgba(0,0,0,.30)}
.pzs .pzs-btn--obrys-c{background:transparent;color:var(--pzs-czerwien-pismo);border-color:var(--pzs-czerwien-pismo)}

/* ── PLANSZE ────────────────────────────────────────────────────────────── */
.pzs-karta{background:var(--pzs-plansza);border:1px solid var(--pzs-linia);
  border-radius:var(--pzs-promien);padding:22px 22px 24px;box-shadow:var(--pzs-cien)}
.pzs-karta h3{font-size:19px;margin-bottom:8px}
.pzs-karta p{font-size:16px;color:var(--pzs-atrament-2);margin:0}
.pzs-siatka{display:grid;gap:18px}
.pzs-siatka--2{grid-template-columns:repeat(2,1fr)}
.pzs-siatka--3{grid-template-columns:repeat(3,1fr)}
.pzs-siatka--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.pzs-siatka--3,.pzs-siatka--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pzs-siatka--2,.pzs-siatka--3,.pzs-siatka--4{grid-template-columns:1fr}}

/* ── POLA FORMULARZY (≥44 px, pismo ≥16 px — żeby telefon nie przybliżał) ─ */
/* `input` BEZ ATRYBUTU `type` NIE PASUJE do selektora `input[type=text]` —
   dlatego wyliczanie typów przepuszczało pola takie jak `<input id="w-nazwa">`
   i zostawały 22 px wysokości. Bierzemy więc wszystkie pola poza tymi, które
   mają własny kształt: znacznikiem, przełącznikiem i przyciskiem. */
.pzs input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]),
.pzs select,.pzs textarea{
  width:100%;min-height:48px;padding:12px 14px;font:400 16px/1.4 'Lato',system-ui,sans-serif;
  color:var(--pzs-atrament);background:var(--pzs-plansza);
  border:1.5px solid var(--pzs-linia-m);border-radius:10px}
.pzs textarea{min-height:96px;resize:vertical}
.pzs label{font-size:16px;font-weight:700;color:var(--pzs-atrament);display:block;margin-bottom:6px}
.pzs input,.pzs select,.pzs textarea,.pzs button{font-size:16px}
.pzs ::placeholder{color:var(--pzs-atrament-2);opacity:1}

/* ── NAGŁÓWEK STRON AKCJI ───────────────────────────────────────────────── */
.pzs-hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--pzs-czerwien) 0%,var(--pzs-czerwien-s) 58%,var(--pzs-czerwien-c) 100%)}
.pzs-hero::after{content:"";position:absolute;right:-70px;bottom:-120px;width:420px;height:594px;
  background:url(/ksm/znaki/pzs-dlon-krem.png) right bottom/contain no-repeat;opacity:.14;pointer-events:none}
.pzs-hero__tresc{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:44px 20px 52px}
.pzs-hero h1{color:#fff;font-size:clamp(34px,7vw,58px)}
.pzs-hero .pzs-nad{color:var(--pzs-rozowy)}       /* 5,32:1 */
.pzs-hero p{color:#FFF1F2;font-size:18px;max-width:58ch}   /* 5,62:1 */
@media(max-width:700px){.pzs-hero::after{width:250px;height:354px;right:-50px;bottom:-90px;opacity:.12}}

/* ── ZNAK AKCJI ─────────────────────────────────────────────────────────── */
.pzsz-godlo{display:block;width:clamp(210px,40vw,300px);height:auto;margin-bottom:18px}

/* ── LICZBY ─────────────────────────────────────────────────────────────── */
.pzs-liczba{font-size:clamp(26px,4.2vw,38px);color:var(--pzs-czerwien-pismo);
  font-variant-numeric:tabular-nums;display:block;line-height:1.1}
.pzs-liczba__opis{font-size:16.5px;color:var(--pzs-atrament-2);display:block;margin-top:6px}
.pzs-liczba__uwaga{font-size:16px;color:var(--pzs-atrament-2);display:block;margin-top:5px;font-style:italic}

/* ── MIEJSCE NA TO, CZEGO JESZCZE NIE MA ────────────────────────────────── */
.pzs-puste{border:2px dashed var(--pzs-linia-m);border-radius:var(--pzs-promien);
  padding:24px;background:transparent;color:var(--pzs-atrament-2);font-size:16.5px}
.pzs-puste b{display:block;font:700 16px/1.3 'Poppins',system-ui,sans-serif;
  color:var(--pzs-atrament);margin-bottom:8px}

/* ── TABELE — przewijają się same, strona nie jedzie w bok ──────────────── */
.pzs-tabela-obudowa{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--pzs-linia);border-radius:12px;background:var(--pzs-plansza)}
.pzs-tabela{border-collapse:collapse;width:100%;min-width:560px;font-size:16.5px}
.pzs-tabela th,.pzs-tabela td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--pzs-linia)}
.pzs-tabela th{font:700 16px/1.3 'Poppins',system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;color:var(--pzs-czerwien-pismo);background:var(--pzs-krem-c)}
.pzs-tabela tr:last-child td{border-bottom:none}

@media(max-width:400px){
  .pzs{font-size:16px}
  .pzs-sekcja{padding:38px 0}
  .pzs-wrap,.pzs-waski,.pzs-hero__tresc{padding-left:16px;padding-right:16px}
}