:root{
  --s1:.5rem;
  --s2:1rem;
  --s3:1.5rem;
  --s4:2.5rem;
  --s5:4rem;
  --s6:6rem;
  --wave:clamp(64px,9.5vw,150px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c1);color:var(--on-dark);
  font:400 1.04rem/1.72 Mulish,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Baloo 2",system-ui,sans-serif;font-weight:600;line-height:1.15;margin:0}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s3)}
.mid{max-width:760px;margin:0 auto;text-align:center}
/* fokus bierze kolor tekstu warstwy — stały ring zniknąłby na żółtym pasie */
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:8px}

/* --- warstwy i fale --- */
.band{position:relative;padding:var(--s6) 0 calc(var(--wave) + var(--s5))}

/* --- przerwy między sekcjami TYLKO na stronie głównej -------------------------
   Kamil (2026-08-07): „inne odstępy są ok, tylko na index są za duże". I ma rację
   arytmetycznie: podstrona ma JEDNĄ falę, główna SZEŚĆ, więc ta sama przerwa
   sumuje się tu sześć razy. Zmierzone przed zmianą: 304 px między treścią
   sąsiednich sekcji, strona główna 7767 px wysokości.

   Skąd te 304 px: fala 137 px (`--wave` przy 1440 px) + dolny oddech `--s5` 64 px
   + górny padding następnego pasa `--s6` 96 px. Fala to 46% przerwy, bo pas
   REZERWUJE jej tyle miejsca ile ma wysokości - żeby nie weszła na tekst.

   Fal nie ruszamy (Kamil: „nie zmieniać fal, mi nie przeszkadza że tekst wejdzie
   na falę"), tylko przestajemy tę rezerwę w pełni opłacać: `--zachodzenie` mówi,
   ile treść wchodzi w obszar fali. Jest to bezpieczne, bo fala ma `z-index:1`,
   a `.band>.wrap` ma 2 - tekst rysuje się NAD falą, nigdy pod nią. Dodatkowo
   górna część elementu `.wave` jest przezroczysta (ścieżka zaczyna się ~1/4
   wysokości), więc pierwsze ~30 px zachodzenia trafia w puste miejsce.

   Zakres: `.glowna` siedzi tylko na elemencie main strony głównej (szkielet.py), więc
   podstrony zostają bez zmian. Reguła mobilna w @media ma własny padding
   i nadpisuje to poniżej 960 px - na telefonie nic się nie zmienia. */
/* UWAGA: W KOMENTARZACH TEGO PLIKU NIE PISAĆ DOSŁOWNYCH ZNACZNIKÓW HTML.
   build_site.py czyta ten plik wyrażeniami regularnymi po surowym tekście i nie
   odróżnia komentarza od treści. Zepsułem to dwa razy pod rząd jednym komentarzem:
     - znacznik SVG fali w komentarzu   -> „spodziewalem sie 6 fal, znaleziono 7",
     - słowo main w nawiasach ostrokątnych -> wyrażenie szukające treści strony
       trafiło w komentarz i wciągnęło cały nagłówek, co wyszło jako „stare logo
       PNG w HTML" (asercja o zupełnie innym brzmieniu niż przyczyna).
   Pisać nazwy klas (`.wave`) albo nazwy elementów bez nawiasów. */
.glowna{--zachodzenie:96px}
.glowna .band{padding-bottom:calc(var(--wave) + var(--s5) - var(--zachodzenie))}
/* `.band + .band` = każdy pas OPRÓCZ hero. Hero zostaje z własnym odstępem od
   nagłówka strony, bo tam przerwy nikt nie kwestionował. */
.glowna .band + .band{padding-top:var(--s4)}
/* Ostatni pas nie ma fali, więc nie ma czego odliczać - inaczej dostałby ujemną
   rezerwę i stopka podjechałaby pod tekst. */
.glowna .b7{padding-bottom:var(--s5)}
.band>.wrap{position:relative;z-index:2}
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:var(--wave);display:block;z-index:1}
/* Przejście rozciągnięte na maksymalny obszar. Każdy pas pokazuje czysty kolor tylko
   między 26% i 50% swojej wysokości; powyżej dochodzi jeszcze z barwy poprzednika (q),
   poniżej już schodzi w stronę następnika (p). Fala niesie zaledwie wycinek p->q, więc
   jej krawędź jest widoczna, ale miękka. W sumie jedno przejście barwne rozkłada się na
   dolną połowę jednego pasa + falę + górną ćwiartkę pasa następnego. */
.b1{background:linear-gradient(180deg,var(--c1-light) 0%,var(--c1) 30%,var(--p1) 100%);color:var(--on-dark)}
.b2{background:linear-gradient(180deg,var(--q1) 0%,var(--c2) 20%,var(--c2) 38%,var(--p2) 100%);color:var(--on-warm)}
.b3{background:linear-gradient(180deg,var(--q2) 0%,var(--c3) 20%,var(--c3) 38%,var(--p3) 100%);color:var(--on-yellow)}
.b4{background:linear-gradient(180deg,var(--q3) 0%,var(--c4) 20%,var(--c4) 38%,var(--p4) 100%);color:var(--on-dark)}
.b5{background:linear-gradient(180deg,var(--q4) 0%,var(--c5) 20%,var(--c5) 38%,var(--p5) 100%);color:var(--on-dark)}
.b6{background:linear-gradient(180deg,var(--q5) 0%,var(--c6) 20%,var(--c6) 38%,var(--p6) 100%);color:var(--on-dark)}
.b7{background:linear-gradient(180deg,var(--q6) 0%,var(--c7) 26%,var(--c7) 100%);color:var(--on-dark);padding-bottom:var(--s5)}

/* --- nagłówek --- */
/* jasny pasek na czerwonej warstwie — musi nieść własny ciemny tekst */
.top{position:sticky;top:0;z-index:60;background:rgba(255,251,247,.94);backdrop-filter:blur(8px);color:var(--ink)}
.top .wrap{display:flex;align-items:center;gap:var(--s3);min-height:74px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand img{width:46px;height:46px;border-radius:50%}
.brand b{font-family:"Baloo 2";font-weight:700;font-size:1.1rem;display:block;line-height:1.15}
.brand small{font-size:.74rem;color:var(--ink-soft)}
nav{margin-left:auto;display:flex;align-items:center;gap:1.35rem}
nav a{text-decoration:none;font-size:.95rem;font-weight:600;color:var(--ink-soft);transition:color .2s}
nav a:hover{color:var(--c6)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;
  padding:.8rem 1.7rem;border-radius:999px;text-decoration:none;font-family:"Baloo 2";font-weight:600;
  font-size:1rem;cursor:pointer;border:2px solid transparent;transition:transform .22s,background .22s,color .22s,box-shadow .22s}
.btn-solid{background:var(--c6);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.btn-solid:hover{background:var(--c7);transform:translateY(-2px)}
.btn-line{border-color:currentColor}
.btn-line:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.btn-cream{background:#FFFBF7;color:var(--c7)}
.btn-cream:hover{background:#fff;transform:translateY(-2px)}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--ink-soft);border-radius:14px;width:48px;height:48px;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px}

/* --- hero --- */
.hero{padding-top:var(--s5)}
.hero h1{font-size:clamp(2.3rem,6vw,4.2rem);max-width:20ch;margin:var(--s3) auto 0}
.hero h1 span{color:var(--c3)}
.hero .kick{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.2);
  color:#fff;border-radius:999px;padding:.45rem 1.1rem;font-weight:700;font-size:.88rem}
.hero p.lead{margin:var(--s3) auto 0;max-width:50ch;font-size:1.14rem;color:var(--dim-on-dark)}
.hero-act{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s4)}
/* Słoneczko usunięte 2026-08-07 na prośbę Kamila. Razem z nim wyleciały reguły
   `.sun` i `@keyframes pulse` - animacja bez elementu do animowania to koszt
   utrzymania bez efektu, a przy następnym czytaniu pliku ktoś traci minutę na
   szukaniu, gdzie to widać. Wraz z tym: `.sun{color:...}` w gen_f3.py
   i gen_f3_warianty.py. Pas hero zaczyna się teraz od plakietki `.kick`. */

/* pasek faktów na fali */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s5)}
.qi{background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.08);border-radius:20px;color:var(--ink);
  padding:var(--s3);display:flex;gap:.8rem;align-items:flex-start;text-align:left}
.qi svg{flex:0 0 24px;color:var(--c1);margin-top:2px}
.qi b{display:block;font-family:"Baloo 2";font-size:1.08rem}
.qi span{font-size:.9rem;color:var(--ink-soft)}

/* --- typografia sekcji --- */
.sec-h{font-size:clamp(1.85rem,4vw,2.9rem);max-width:24ch}
.mid .sec-h{margin-left:auto;margin-right:auto}
.sec-p{margin-top:var(--s3);color:var(--ink-soft);max-width:56ch}
.mid .sec-p{margin-left:auto;margin-right:auto}
.b1 .sec-p,.b4 .sec-p,.b5 .sec-p,.b6 .sec-p,.b7 .sec-p{color:var(--dim-on-dark)}
.b2 .sec-p{color:var(--on-warm)}
.b3 .sec-p{color:var(--on-yellow)}

/* --- filary --- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.pill-card{background:rgba(255,255,255,.9);border-radius:24px;padding:var(--s4) var(--s3);text-align:center;
  color:var(--ink);transition:transform .28s,background .28s}
.pill-card:hover{transform:translateY(-6px);background:#fff}
.pill-card .ring{width:64px;height:64px;border-radius:50%;background:#FFF3E0;display:grid;place-items:center;
  margin:0 auto var(--s3);color:var(--c1)}
.pill-card h3{font-size:1.3rem;margin-bottom:.6rem}
.pill-card p{font-size:.95rem;color:var(--ink-soft)}

/* --- rytm dnia jako fala --- */
.flow{margin-top:var(--s5);position:relative}
.flow ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.flow li{display:grid;grid-template-columns:64px 1fr;gap:var(--s3);align-items:start;
  background:rgba(255,255,255,.88);border-radius:22px;padding:var(--s3);color:var(--ink);
  transition:background .25s,transform .25s}
.flow li:hover{background:#fff;transform:translateX(6px)}
/* schodkowe przesunięcie — układa się w falę, nie w prostą kolumnę */
.flow li:nth-child(1){margin-left:0}
.flow li:nth-child(2){margin-left:3%}
.flow li:nth-child(3){margin-left:5.5%}
.flow li:nth-child(4){margin-left:5.5%}
.flow li:nth-child(5){margin-left:3%}
.flow li:nth-child(6){margin-left:0}
.flow .n{width:56px;height:56px;border-radius:50%;background:var(--c4);color:#fff;
  display:grid;place-items:center;font-family:"Baloo 2";font-weight:700;font-size:1.2rem}
.flow h3{font-size:1.22rem;margin-bottom:.35rem}
.flow p{font-size:.95rem;color:var(--ink-soft)}

/* --- tydzień --- */
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2);margin-top:var(--s5)}
.wd{background:rgba(255,251,247,.93);border-radius:22px;padding:var(--s3);text-align:center;
  color:var(--ink);transition:transform .28s,background .28s}
.wd:hover{transform:translateY(-8px);background:#fff}
/* falowanie kart — środkowa najwyżej */
.wd:nth-child(1),.wd:nth-child(5){margin-top:calc(var(--s3) * 1.6)}
.wd:nth-child(2),.wd:nth-child(4){margin-top:calc(var(--s3) * .7)}
.wd .day{font-family:"Baloo 2";font-weight:700;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c6)}
.wd h3{font-size:1.12rem;margin:.6rem 0 .45rem}
.wd p{font-size:.87rem;color:var(--ink-soft)}
.wd .mark{margin:0 auto var(--s2);color:var(--c5)}

/* --- baśń --- */
.tale{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center;margin-top:var(--s4)}
.blob{overflow:hidden;border-radius:58% 42% 50% 50% / 42% 46% 54% 58%}
.blob img{width:100%;aspect-ratio:1;object-fit:cover}
.tale blockquote{margin:0;font-family:"Baloo 2";font-weight:600;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25}
.tale cite{display:block;margin-top:var(--s3);font-style:normal;font-size:.86rem;color:var(--dim-on-dark)}
.tale p.body{margin-top:var(--s3);color:var(--dim-on-dark)}

/* --- kadra --- */
.crew{display:grid;grid-template-columns:230px 1fr;gap:var(--s4);align-items:center;
  background:rgba(255,248,236,.16);border:1px solid rgba(255,243,226,.3);border-radius:28px;padding:var(--s4);margin-top:var(--s5)}
.ph{aspect-ratio:1;border-radius:50%;border:2px dashed rgba(255,243,226,.45);
  display:grid;place-items:center;text-align:center;padding:var(--s2);
  font-size:.86rem;font-weight:600;color:var(--dim-on-dark);line-height:1.4}
.ph svg{margin:0 auto .5rem;display:block;opacity:.65}
.crew h3{font-size:1.5rem;margin-bottom:.7rem}
.crew p{color:var(--dim-on-dark)}
.crew .role{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
/* Wariant bez portretu. Pierwsza wersja zawężała tekst do 64ch i to rozwiązywało
   problem długości wiersza, ale tworzyło nowy: kolumna tekstu zajmowała 60%
   szerokości karty, resztę zostawiała pustą, a sam biogram schodził na czternaście
   wierszy w dół. Karta była wysoka i w dwóch trzecich pusta.
   Teraz biogram idzie w DWÓCH kolumnach: długość wiersza zostaje krótka (~56 znaków,
   czyli to samo, po co było `64ch`), tekst wypełnia całą szerokość karty, a wysokość
   spada o połowę. Treść bez zmian - nic nie skrócone. */
/* Wariant bez portretu: slot na zdjęcie znika, a tekst zajmuje jego miejsce -
   więc każdy akapit potrzebuje mniej wierszy i cała karta jest niższa.
   Dokładnie tak, jak Kamil to opisał (2026-08-07): „wystarczyło usunąć miejsce
   na zdjęcie, wypełnić je tekstem i wtedy pole w którym jest tekst trochę się
   zmniejszało - robiło się niższe".
   Wcześniej stało tu `minmax(0,64ch)` i to było źródło problemu: tekst zwężony
   do 64 znaków zostawiał 40% karty puste, a wysokości nie oddawał ani o piksel.
   Zmierzone na 1440 px: 526 px (64ch) -> %s px (pełna szerokość).

   Cena tego układu jest realna i warto ją znać: wiersz robi się długi (zmierzone
   niżej), a przyjęty zakres czytelności to 45-75 znaków. Jeśli kiedyś okaże się
   za szeroko, właściwą poprawką jest `max-width` na tej karcie, nie zwężanie
   samego tekstu - inaczej pusty margines wraca. */
.crew-bez-portretu{grid-template-columns:minmax(0,1fr)}
.crew-bez-portretu .role{margin-bottom:.2rem}
.crew-bez-portretu p+p{margin-top:var(--s2)}
/* Zdanie o eurytmii dotyczy INNEJ osoby (Beata Kosowicz). W jednym ciągu z biogramem
   Magdy czyta się jak jego część, dlatego stoi pod kreską, poza kolumnami. */
.crew-dopisek{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid rgba(255,243,226,.22)}

/* --- zdjęcia w sekcjach --- */
/* Pasek trzech kadrów. `aspect-ratio` na obrazku, mimo że pliki są już obcięte
   do 3:2 przy kodowaniu: to rezerwuje miejsce PRZED pobraniem obrazu, więc tekst
   pod paskiem nie przeskakuje w dół w trakcie wczytywania (CLS). Atrybuty
   width/height w HTML robią to samo, ale tylko dopóki CSS nie nadpisze szerokości. */
.pasek-zdjec{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s4)}
.pasek-zdjec img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.16)}
/* Wariant kwadratowy - przy osi dnia. Kwadrat, nie 3:2, bo Kamil poprosił, żeby
   te cztery kadry wyglądały „jak na dole strony", a tam stoi zapowiedź galerii
   z kwadratami. Dwa różne kształty czwórek zdjęć na jednej stronie czytałyby się
   jak niedokończona decyzja. */
.pasek-zdjec.kwadraty img{aspect-ratio:1;border-radius:16px}
/* `.kadr-sekcji` (jeden duży kadr 720 px przy osi dnia) usunięte 2026-08-07:
   Kamil poprosił o cztery zdjęcia w tym miejscu zamiast jednego, więc sekcja
   używa teraz `.pasek-zdjec.kwadraty`. Reguła nie zostaje „na wypadek gdyby" -
   martwy CSS to koszt czytania pliku bez żadnego efektu na stronie. */

/* --- zapowiedź galerii --- */
/* Cztery kwadraty + jedno zdanie i link. Powód istnienia tej sekcji: galeria była
   dostępna wyłącznie z menu, a nikt nie klika w menu, żeby sprawdzić, czy warto.
   Kwadraty, nie 3:2 — cztery kadry o różnych proporcjach w jednym rzędzie muszą
   mieć wspólny kształt, a kwadrat obcina najmniej z pionu i z poziomu naraz. */
.zapowiedz{margin-top:var(--s5);text-align:center}
.zapowiedz-siatka{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);
  margin-top:var(--s3)}
.zapowiedz-siatka img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.18)}
.zapowiedz .btn{margin-top:var(--s3)}

/* --- kontakt --- */
.cta-h{font-size:clamp(2rem,4.6vw,3.2rem);max-width:26ch;margin:var(--s2) auto 0}
.contact-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s5);text-align:left}
.ci{background:rgba(255,248,236,.1);border-radius:20px;padding:var(--s3);display:flex;gap:.9rem;align-items:flex-start}
.ci svg{flex:0 0 22px;color:var(--gold);margin-top:3px}
/* Te dwie linie naprawiają błąd, który Kamil zobaczył jako „sekcje na telefonie
   są krzywo - z lewej większy odstęp niż z prawej". Zmierzone na 390 px: karty
   `.ci` miały 398 px w kolumnie 342 px, a cały dokument 422 px przy ekranie
   390 px - czyli strona przewijała się w poziomie i wszystkie sekcje jechały
   w bok, nie tylko kontakt.
   Przyczyna: `komorowpunktprzedszkolny@gmail.com` to 34 znaki bez spacji, a pole
   elastyczne (`flex`) domyślnie ma `min-width:auto`, więc NIE MOŻE zwężyć się
   poniżej najdłuższego niepodzielnego słowa. Karta rosła, żeby ten adres
   pomieścić. `min-width:0` zdejmuje tę blokadę, `overflow-wrap:anywhere`
   pozwala złamać sam adres - potrzebne oba, bo bez drugiego adres wystaje
   z karty zamiast ją rozpychać.
   Dlaczego nie `overflow-x:hidden` na `body`: to schowałoby objaw i zabrało
   przewijanie w poziomie tam, gdzie jest potrzebne (szerokie tabele w treści). */
.ci>div{min-width:0}
.ci a{overflow-wrap:anywhere}
.ci b{display:block;font-family:"Baloo 2";font-size:1.06rem}
.ci span{font-size:.9rem;color:var(--dim-on-dark)}
.ci a{text-decoration:none;border-bottom:1px solid rgba(255,243,226,.4)}
.ci a:hover{border-color:var(--gold)}

footer{background:var(--c7);color:var(--dim-on-dark);padding:var(--s3) 0 var(--s4);font-size:.87rem}
.foot{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,243,226,.18);padding-top:var(--s3)}
footer a{text-decoration:none;border-bottom:1px solid rgba(255,243,226,.3)}
footer a:hover{color:var(--gold);border-color:var(--gold)}

@media (max-width:960px){
  .quick,.three,.contact-list{grid-template-columns:1fr}
  .week{grid-template-columns:1fr 1fr}
  .wd:nth-child(n){margin-top:0}
  .tale,.crew{grid-template-columns:1fr;gap:var(--s4);text-align:center}
  .crew .ph{max-width:220px;margin:0 auto}
  /* Wysrodkowanie z reguly powyzej ma sens przy zdjeciu nad tekstem. Bez zdjecia
     zostaja same akapity, a wysrodkowany czterozdaniowy biogram to choragiewka. */
  .crew-bez-portretu{text-align:left}
  /* Trzy i cztery kadry w rzedzie na telefonie daja paski szerokosci znaczka
     pocztowego - schodzimy do dwoch kolumn, nie do jednej: jedna kolumna
     zamienilaby zapowiedz galerii w czterokrotnie wyzsza sciane zdjec. */
  .pasek-zdjec,.zapowiedz-siatka{grid-template-columns:1fr 1fr}
  .crew-bez-portretu{grid-template-columns:1fr}
  .flow li{grid-template-columns:48px 1fr}
  .flow li:nth-child(n){margin-left:0}
  .flow .n{width:44px;height:44px;font-size:1.02rem}
  nav{display:none;position:absolute;top:74px;left:0;right:0;background:#FFFBF7;
    flex-direction:column;align-items:stretch;padding:var(--s3);gap:var(--s2);
    border-bottom:2px solid var(--c3);z-index:50}
  nav.open{display:flex}
  .burger{display:block}
  .band{padding:var(--s5) 0 calc(var(--wave) + var(--s4))}
}
@media (max-width:560px){.week{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}


/* --- rant pigmentu sterowany paleta ---------------------------------
   Sciezka rantu jest w HTML zawsze. To, czy ja widac, ustala palette.css
   przez --rant-krycie. Dzieki temu przelaczenie f3c <-> f3b nie rusza HTML-a. */
.wave .rant{stroke:var(--rant);opacity:var(--rant-krycie)}

/* --- jasne pasy => ciemny tekst -------------------------------------
   Szablon powstal dla nasyconych barw i bialego tekstu. Kazde miejsce,
   ktore liczylo na bialy tekst albo biala polprzezroczystosc, znika na
   pastelu - dlatego wszystkie sa tu odwrocone. */
body{color:var(--ink)}
.btn-solid{background:var(--ink);color:#FFFBF7;box-shadow:0 6px 16px rgba(31,93,41,.24)}
.btn-solid:hover{background:#14421C}
.btn-line{border-color:rgba(31,93,41,.5)}
.btn-line:hover{background:rgba(31,93,41,.09)}
.btn-cream{background:#FFFDFA;color:var(--ink);box-shadow:0 4px 14px rgba(31,93,41,.14)}
nav a:hover{color:var(--akcent)}
.hero h1 span{color:var(--akcent)}
/* .kick mial color:#fff wpisane na sztywno - na jasnym pasie znikal */
.hero .kick{background:rgba(255,255,255,.62);border:1px solid rgba(31,93,41,.2);color:var(--ink)}
.sun{color:var(--akcent)}
.qi{background:rgba(255,255,255,.86);border-color:rgba(31,93,41,.12)}
.qi svg{color:var(--akcent)}
.pill-card{background:rgba(255,255,255,.82)}
.pill-card .ring{background:#FFFFFF;color:var(--akcent);box-shadow:0 2px 8px rgba(31,93,41,.12)}
.flow .n{background:var(--ink);color:#FFFBF7}
.wd{background:rgba(255,255,255,.8)}
.wd .mark{color:var(--akcent)}
.crew{background:rgba(255,255,255,.62);border:1px solid rgba(31,93,41,.16)}
/* Kreska nad zdaniem o eurytmii jest w koncepcji kremowa (jasny tekst na ciemnym
   pasie). Na jasnej karcie kremowa linia jest niewidoczna - stad ciemna.
   Pulapka, w ktora tu wdepnalem: dopisanie tej reguly do gen_f3.py i
   gen_f3_warianty.py NIC nie zmienilo na stronie, bo style.css powstaje z F2
   plus ten blok, a pliki f3* to osobne makiety. Nadpisania dla jasnej palety
   trzeba dodawac TUTAJ. */
.crew-dopisek{border-top-color:rgba(31,93,41,.18)}
.ph{border:2px dashed rgba(31,93,41,.34);color:var(--ink-soft)}
.ci{background:rgba(255,255,255,.62)}
.ci svg{color:var(--akcent)}
.ci a{border-bottom-color:rgba(31,93,41,.35)}
footer{color:var(--ink)}
footer a{border-bottom-color:rgba(31,93,41,.35)}


/* ====================================================================
   SZKIELET WIELOSTRONICOWY (koncepcje/_generator/szkielet.py)
   Nawigacja wedlug 2.2 planu, stopka wedlug 3.1 S13.
   ==================================================================== */

/* link dla klawiatury - niewidoczny, dopoki nie dostanie fokusu */
.przeskocz{position:absolute;left:-9999px;top:0;z-index:100;padding:.7rem 1.1rem;
  background:#FFFBF7;color:var(--ink);border-radius:0 0 12px 0;font-weight:700}
.przeskocz:focus{left:0}

.top .wrap{gap:var(--s2)}
nav.menu{margin-left:auto;gap:1.05rem}
nav.menu>a,.grupa-p{white-space:nowrap}
nav.menu a[aria-current="page"]{color:var(--akcent)}
/* CTA obok menu, nie w nim - inaczej znika razem z menu pod hamburgerem */
.cta-top{min-height:44px;padding:.55rem 1.15rem;font-size:.94rem}

/* jedno rozwijane menu; reszta plasko */
.grupa{position:relative;display:flex;align-items:center}
.grupa-p{display:inline-flex;align-items:center;gap:.32rem;background:none;border:0;padding:0;
  font:600 .95rem/1.6 Mulish,system-ui,sans-serif;color:var(--ink-soft);cursor:pointer;
  transition:color .2s}
.grupa-p:hover{color:var(--akcent)}
.grupa.aktywna>.grupa-p{color:var(--akcent)}
.grupa-p svg{transition:transform .2s}
.grupa.open>.grupa-p svg{transform:rotate(180deg)}
.grupa-lista{display:none;position:absolute;top:calc(100% + .85rem);left:-1rem;z-index:70;
  margin:0;padding:.45rem;list-style:none;min-width:236px;background:#FFFBF7;
  border:1px solid rgba(31,93,41,.14);border-radius:16px;box-shadow:0 12px 30px rgba(31,93,41,.16)}
.grupa.open>.grupa-lista{display:block}
.grupa-lista a{display:block;padding:.55rem .8rem;border-radius:10px}
.grupa-lista a:hover{background:rgba(31,93,41,.07)}

/* --- podstrony: dwa pasy zamiast siedmiu ---------------------------
   Siedmiobarwna kolejnosc z glownej jest sztywna, wiec podstrona bierze
   pierwszy pas na naglowek i jeden pas na tresc. Ten drugi schodzi na dole
   do --q6, zeby wejsc w stopke (--c7) bez uskoku. */
.b-tresc{background:linear-gradient(180deg,var(--q1) 0%,var(--c2) 16%,var(--c2) 44%,var(--q6) 100%);
  color:var(--ink);padding-bottom:var(--s5)}
/* --- naglowek podstrony: tresc ZAWSZE zaczyna sie na tej samej wysokosci ------
   Problem, ktory to naprawia (zauwazony przez Kamila 2026-08-07 na zrzutach):
   odstep pod tytulem byl identyczny na wszystkich podstronach, ale sam TYTUL
   mial rozna wysokosc. Przy kolumnie 760 px „Galeria" i „Wspolpraca z rodzicami"
   mieszcza sie w jednym wierszu, a „Pedagogika waldorfska w przedszkolu",
   „Zapisy na rok szkolny 2026/2027", „Rytm dnia w przedszkolu waldorfskim",
   „Kameralny punkt przedszkolny w Komorowie" i „Kontakt i informacje
   organizacyjne" zawijaja sie na dwa. Skutek: przy przechodzeniu miedzy
   stronami pierwszy akapit skakal o ~63 px w dol i z powrotem.

   Rozwiazanie: blok tytulu rezerwuje wysokosc DWOCH wierszy (min-height) i tytul
   jest w nim wysrodkowany w pionie, a od dolu sekcji odejmujemy jeden wiersz
   (ujemny margines). Dzieki temu:
     - tytul jednowierszowy zostaje tam, gdzie byl (roznica 1 px na zaokragleniu),
     - tytul dwuwierszowy PODNOSI tresc o jeden wiersz, zamiast ja spychac,
     - sam tytul nie zmienia ani stopnia pisma, ani zawijania - tego Kamil
       wyraznie nie chcial ruszac.
   Ujemny margines, a nie mniejszy padding-bottom, bo padding sekcji jest
   ustawiany w dwoch miejscach (.band i to samo w @media dla waskich ekranow) -
   odejmowanie na marginesie dziala w kazdym z tych przypadkow bez powtarzania
   rachunku, wiec nie da sie zmienic jednego i zapomniec o drugim. */
.podstrona-hero{padding-top:var(--s4);
  --h1-px:clamp(2rem,5vw,3.4rem);
  --h1-wiersz:calc(var(--h1-px) * 1.15)}   /* 1.15 = line-height naglowkow */
.podstrona-hero>.wrap{display:flex;align-items:center;justify-content:center;
  min-height:calc(var(--h1-wiersz) * 2);
  margin-bottom:calc(-1 * var(--h1-wiersz))}
.podstrona-hero h1{font-size:var(--h1-px);max-width:26ch;margin:0 auto}
.b-tresc h2{font-size:clamp(1.55rem,3.4vw,2.25rem);margin-top:var(--s5)}
.b-tresc h2:first-child{margin-top:0}
.b-tresc p{max-width:64ch}
/* proza ciagla (polityka prywatnosci): jedna kolumna czytelnej dlugosci.
   64ch to ok. 75 znakow w tym kroju - gorna granica, przy ktorej oko jeszcze
   trafia z konca wiersza na poczatek nastepnego. Bez tego tekst prawny
   rozciaga sie na 1120 px i staje sie nieczytalny wlasnie tam, gdzie ktos
   naprawde probuje go przeczytac. */
.proza{max-width:68ch}
.proza h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-top:var(--s4)}
.proza p, .proza ul{margin-top:var(--s2)}
.proza ul{padding-left:1.2rem}
.proza li{margin-top:.35rem}
.proza a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
/* --- tabela (cennik) -------------------------------------------------
   Bez tych regul dziala domyslna tabela przegladarki: <th> wysrodkowane,
   szerokosc kolumn dopasowana do najdluzszej komorki, zero linii. Cennik
   wygladal wtedy jak dwie kolumny plywajace niezaleznie od siebie i od
   akapitow wokol - kwota "1500 zl" stala tuz przy koncu opisu, a nie
   w jednej pionowej linii z pozostalymi.
   Tu: cala szerokosc kolumny tekstu, nazwy przy lewej krawedzi, kwoty przy
   prawej, linia miedzy wierszami zamiast pustki. `tabular-nums` daje cyfrom
   jednakowa szerokosc, wiec "1500 zl" i "16 500 zl" zgadzaja sie w pionie
   znak w znak (w kroju proporcjonalnym "1" jest wezsze i konce rozjezdzaja sie).
   Selektor na .b-tresc, nie .proza: tabela ma wygladac tak samo niezaleznie
   od klasy gniazda tresci (patrz Strona.klasa_tresci). */
/* Tabela wychodzi poza kolumnę tekstu (68ch): pięć kolumn w szerokości akapitu
   daje po jednym słowie na wiersz. Szerokość = tyle, ile ma .wrap w środku,
   więc tabela nigdy nie rozpycha strony. Na wąskim ekranie przewija się w poziomie
   we własnym pudełku - to jedyny sposób, żeby tabela o pięciu kolumnach nie
   zmusiła do przewijania w poziomie CAŁEJ strony. */
/* `left:50%` + `translateX(-50%)` wyśrodkowuje tabelę na środku kolumny tekstu,
   a ten pokrywa się ze środkiem strony (gniazdo treści to `.wrap.proza`, więc
   `margin:0 auto` z `.wrap` centruje całą kolumnę).
   Bez tych dwóch linii tabela ROZPYCHAŁA STRONĘ w poziomie: rosła w prawo od
   lewej krawędzi akapitu (x=405 przy oknie 1440) i kończyła się na 1477 px,
   czyli 37 px za krawędzią okna. Zmierzone, nie przewidziane - i widoczne tylko
   jako pozioma belka przewijania, której łatwo nie zauważyć na dużym monitorze. */
.b-tresc .tabela{margin-top:var(--s3);overflow-x:auto}
.b-tresc .tabela.szeroka{width:calc(min(1120px, 100vw) - 2 * var(--s3));
  position:relative;left:50%;transform:translateX(-50%)}
.b-tresc table{width:100%;border-collapse:collapse}
.b-tresc .szeroka table{min-width:34rem}
.b-tresc th,.b-tresc td{text-align:left;padding:.62rem .6rem;vertical-align:top;
  border-bottom:1px solid rgba(31,93,41,.16)}
.b-tresc th{font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft);border-bottom-color:rgba(31,93,41,.34)}
/* Do prawej i bez zawijania TYLKO kolumny liczbowe (klasę nadaje konwerter po
   sprawdzeniu zawartości komórek). "16 500 zł" rozbite na dwa wiersze czyta się
   jak dwie osobne kwoty, ale to samo `nowrap` na kolumnie ze zdaniem rozsadza
   tabelę - patrz komentarz w szkielet.py przy funkcji `liczbowa`. */
.b-tresc th.liczba,.b-tresc td.liczba{text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.b-tresc tbody tr:last-child td{border-bottom:0}
.b-tresc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;background:rgba(31,93,41,.08);padding:.1em .35em;border-radius:5px}
/* --- galeria ---------------------------------------------------------
   Kolumny CSS (`columns`), nie grid. Zdjecia maja rozne proporcje: pion z lasu
   obok poziomu z sali. W gridzie kazdy rzad rownalby sie do najwyzszego kadru
   i miedzy zdjeciami zostawalyby dziury; z kolumnami kadry uklada sie ciasno
   i bez ani jednej linii JS. Kolejnosc czyta sie w dol kolumny, a nie w poprzek -
   w galerii to bez znaczenia, w tekscie bylo by nie do przyjecia.

   Gniazdo tresci tej strony NIE ma klasy .proza (patrz Strona.klasa_tresci):
   68ch scisnelo by siatke do szerokosci akapitu. Same podpisy juz maja
   ograniczona dlugosc wiersza, bo kolumna jest wezsza od 68ch. */
.galeria-tresc h2{font-size:clamp(1.4rem,2.8vw,1.9rem);margin-top:var(--s5)}
.galeria-tresc h2:first-child{margin-top:0}
/* Wstep i zakonczenie to kolumna WYSRODKOWANA w .wrap (margin-inline auto),
   a nie tekst wysrodkowany (text-align). Rozniica jest istotna: przy siatce
   zdjec na cala szerokosc akapit dosuniety do lewej krawedzi wyglada jak
   omylkowo zostawiony, ale wysrodkowanie samych wierszy zrobiloby z 4-wierszowego
   akapitu choragiewke, ktora czyta sie zle. Naglowki sekcji galerii (.galeria-naglowek)
   zostaja na pelnej szerokosci, bo stoja nad siatka, nie nad akapitem. */
.galeria-tresc>p, .galeria-tresc>h2{max-width:64ch;margin-left:auto;margin-right:auto}
.galeria-tresc>p{margin-top:var(--s2)}
.galeria-tresc>h2.galeria-naglowek{max-width:none}
/* Naglowki wstepu i zakonczenia („Czego zdjecia nie pokaza", „Najlepiej zobaczyc
   na wlasne oczy") wysrodkowane w wierszu - stoja nad wysrodkowana kolumna tekstu,
   wiec dosuniete do lewej wygladaly jak zaczepione o nic. Naglowki sekcji galerii
   (.galeria-naglowek) zostaja przy lewej krawedzi, bo pod nimi zaczyna sie siatka
   zdjec na pelna szerokosc i to jej lewa krawedz je ustawia. */
.galeria-tresc>h2:not(.galeria-naglowek){text-align:center}
.galeria{columns:3 260px;column-gap:var(--s2);margin-top:var(--s3)}
.galeria figure{break-inside:avoid;margin:0 0 var(--s2)}
.galeria img{width:100%;height:auto;display:block;border-radius:16px;
  background:rgba(255,255,255,.5);box-shadow:0 8px 22px rgba(31,93,41,.16)}
.galeria figcaption{margin-top:.55rem;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}

/* --- baner zgod ------------------------------------------------------
   Pasek przy dolnej krawedzi, nie okno na cala strone: tresc musi byc czytelna,
   kiedy baner wisi (cookie wall jest niedozwolony). Trzy przyciski maja te sama
   wage wizualna - „Zgadzam sie" nie jest wieksze ani jaskrawsze od „Tylko
   niezbedne", bo utrudnienie odmowy uniewaznia zgode. */
.zgody{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#FFFDFA;
  border-top:1px solid rgba(31,93,41,.18);box-shadow:0 -10px 30px rgba(31,93,41,.14);
  color:var(--ink);padding:var(--s3) 0}
.zgody-in{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center}
.zgody-tekst p{max-width:70ch;font-size:.94rem;line-height:1.6}
.zgody-h{font-size:1rem;margin-bottom:.25rem}
.zgody-wybor{display:grid;gap:.55rem;margin-top:var(--s2)}
.zgody-poz{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;
  line-height:1.5;max-width:70ch;cursor:pointer}
.zgody-poz input{margin-top:.25rem;flex:0 0 auto;width:1.05rem;height:1.05rem;accent-color:var(--ink)}
.zgody-akcje{display:flex;flex-direction:column;gap:.6rem;align-items:stretch}
.zgody-akcje .btn{min-height:44px;padding:.55rem 1.15rem;font-size:.94rem;white-space:nowrap}
.zgody-wiecej,.zgody-ustawienia{background:none;border:0;padding:0;color:inherit;
  font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline;
  text-underline-offset:.15em}
.zgody-wiecej:hover,.zgody-ustawienia:hover{color:var(--akcent)}
.zgody-ustawienia{font-size:inherit}
@media (max-width:760px){
  .zgody-in{grid-template-columns:1fr}
  /* Na telefonie pasek moze zajac duzo wysokosci - ograniczamy i pozwalamy
     przewijac SAM baner, zeby nie zaslonil calego ekranu tresci. */
  .zgody{max-height:72vh;overflow-y:auto}
}

/* --- mapa wczytywana na klikniecie ----------------------------------
   Plan wdrozenia (2.2, /kontakt.html) odrzucil iframe Google Maps z dwoch
   powodow: ~900 kB przy wejsciu na strone i przekazanie IP odwiedzajacego
   do Google jeszcze przed jakakolwiek zgoda. Oba te powody znikaja, gdy iframe
   powstaje dopiero po klikniecie - i tak jest to zrobione. Do tego czasu
   w kadrze jest zaslona z wyjasnieniem i link otwierajacy Mapy w nowej karcie,
   wiec kto nie chce klikac, i tak dostaje droge do mapy.
   aspect-ratio, a nie stala wysokosc: po podmianie na iframe uklad nie skacze. */
.mapa{margin-top:var(--s3);aspect-ratio:16/10;border-radius:20px;overflow:hidden;
  border:1px solid rgba(31,93,41,.18);background:rgba(255,255,255,.55)}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.mapa-zaslona{height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s2);padding:var(--s3);text-align:center}
.mapa-info{max-width:52ch;font-size:.94rem;color:var(--ink-soft)}
.mapa-alt{font-size:.9rem}
.mapa-alt a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
@media (max-width:600px){.mapa{aspect-ratio:4/5}}

/* widoczny znacznik szkieletu - patrz komentarz w HTML */
.szkic{border:2px dashed rgba(31,93,41,.4);border-radius:18px;padding:var(--s3);
  background:rgba(255,255,255,.55);font-weight:600}
.szkic ul{margin:.7rem 0 0;padding-left:1.25rem;font-weight:400}
.szkic li{margin-top:.3rem;font-size:.95rem}

/* --- stopka trzykolumnowa (3.1 S13) ------------------------------- */
.stopka-kol{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  padding:var(--s4) 0 var(--s3)}
.stopka-h{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.stopka-kol p{margin-top:.5rem}
.stopka-kol ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.45rem}

/* --- szerokosc rzedu nawigacji: ZMIERZONA, nie oszacowana ------------------
   Prawdziwymi metrykami Baloo 2 z assets_fonty/ rzad naglowka w wersji
   desktopowej potrzebowal 1123 px:
     marka (logo 46 + odstep 12 + napis 224) = 282
     menu (5 etykiet po .95rem + 4 odstepy po 1.35rem) = 594
     CTA „Umów spotkanie” z paddingiem = 191
     odstepy wlasne = 56
   A `.wrap` ma `max-width:1120px` PRZY `box-sizing:border-box` i paddingu
   2x16 px, czyli realnie **1088 px na tresc**. Brakowalo 35 px i to na
   najszerszym ekranie - nie w jakims waskim przedziale.

   Dwie oszczednosci zamiast jednej duzej: mniejszy odstep (-22 px) i mniejszy
   stopien pisma menu (-31 px). Razem 1070 px, czyli 18 px zapasu. Wybralem to,
   a nie skrocenie etykiet, bo etykiety sa z 2.2 planu i sa fraza SEO. */
nav{gap:1rem}
nav a{font-size:.9rem}

/* Prog hamburgera: 960 -> 1120 (2026-08-07) -> 1200 (dodanie „Galerii”).
   Przy 960 pelne menu bylo wlaczone od 961 px, gdzie `.wrap` daje tylko 929 px
   na tresc - nawigacja nie miala gdzie sie zmiescic na calym przedziale
   961-1120 px.

   Ostatnie podniesienie: szosta pozycja „Galeria” to +48,6 px etykiety
   i +16 px odstepu, razem +64,6 px. Tu dwa niezalezne pomiary NIE ZGADZAJA SIE
   ze soba i to jest wprost powod, dla ktorym prog jest tak wysoki:
     - model zapisany wyzej w tym pliku (marka 282, menu 541, CTA 191) daje
       po dodaniu Galerii 1134,6 px, czyli 47 px PONAD dostepne 1088;
     - swiezy pomiar metrykami z assets_fonty/ (marka 222,8 - <b> i <small>
       stoja jedno pod drugim, wiec liczy sie szerszy, nie suma; menu 543;
       CTA 158,1) daje 989,5 px, czyli 98 px zapasu.
   Rozbieznosci nie da sie rozstrzygnac bez rzeczywistego renderu, a przegladarki
   nikt jeszcze na to nie uruchomil. Prog 1200 px jest bezpieczny w OBU modelach
   (1134,6 + 2x16 = 1167 <= 1200). Cena: viewporty 1121-1200 px dostaja
   hamburgera. Typowe laptopy (1280, 1366, 1440) sa powyzej.
   Gdy ktos zweryfikuje uklad w przegladarce i okaze sie, ze zapas jest realny,
   prog wolno obnizyc - ale nie na podstawie samego rachunku.
   UWAGA: ten sam prog jest w JS (matchMedia) - musza byc rowne, inaczej
   CSS pokaze liste rozwinieta, a ARIA powie, ze jest zwinieta. */
@media (max-width:1200px){
  /* Na dotyku dropdown w dropdownie jest wrogi (2.2), wiec lista jest
     rozwinieta w calosci, a „O przedszkolu” zostaje samym podpisem grupy. */
  .grupa{display:block}
  .grupa-p{pointer-events:none;font-size:.78rem;letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:.3rem}
  .grupa-p svg{display:none}
  .grupa-lista{display:block;position:static;min-width:0;padding:0 0 .4rem .9rem;
    background:none;border:0;box-shadow:none}
  .cta-top{margin-left:auto}
  .burger{margin-left:.5rem}
  .stopka-kol{grid-template-columns:1fr;gap:var(--s3)}
}
@media (max-width:480px){
  /* Napis marki schodzi z naglowka na waskim ekranie - ZMIERZONE, nie na oko.
     Prawdziwymi metrykami Baloo 2 (assets_fonty/) rzad naglowka potrzebuje
     504,8 px: logo 46 + odstep 12 + "Przedszkole z natury" 224 + CTA 152,8
     + hamburger 38 + padding 32. Na 360 px brakuje 145 px, na 414 px brakuje 91 -
     czyli na KAZDYM typowym telefonie. Flexbox nie zglasza tego bledem, tylko
     zawija napis marki na trzy linie i rozpycha naglowek.
     Zdejmujemy napis, nie CTA: 2.2 planu wymaga przycisku "Umow spotkanie"
     widocznego przez cala strone, a nazwa jest i tak w logo, w <title>
     i w <h1> kazdej strony. Po zmianie rzad wazy 268,8 px - mieści sie
     z zapasem 91 px na 360 px. */
  .brand b, .brand small{display:none}
  .cta-top{padding:.5rem .9rem;font-size:.86rem}
}