/* ======================================================================
   Kaszubska Bacówka - wspólny arkusz wszystkich stron.
   Kierunek B „Złota godzina” (2026-09-23): minimalizm aplikacyjny z ciepłem.
   - tło z koloru ściany domków (#F6E5BA zmierzone na zdjęciu, rozjaśnione)
   - jeden akcent: chaber z malowanego wzoru
   - krój systemowy, więc na iPhonie strona wygląda jak aplikacja
   - ikona: margerytka wycięta ze zdjęcia medalionu na szczycie domku Bocian
   ====================================================================== */

/* >>> CENA: wpisz tu stawkę, a pokaże się na wszystkich stronach <<<
   Przykład: --cena-od:"450";   Najniższa stawka za domek: doba poza sezonem (mama, 25.09; D6). */
:root{ --cena-od:"1000"; }
.cena::before{content:var(--cena-od)}

:root{
  --tlo:#FBF4E4; --plyta:#FFFCF4; --plyta-2:#F4EAD2; --kreska:#EADFC6;
  --tekst:#1E232B; --cichy:#5C6069; --akcent:#3A5FA8; --na-akcencie:#FFFFFF; --gwiazdka:#C07F0A;
  --akcent-zmierzch:#4B5487; --poswiata:rgba(214,166,92,.24); --kafel-cieply:#FAF0DC;
  --szklo:rgba(255,251,242,.82); --szklo-kreska:rgba(255,255,255,.6);
  --cien:0 10px 30px rgba(60,44,12,.10);
  --r-duzy:28px; --r-sredni:22px; --r-maly:16px;
  --uklad:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tlo:#16130E; --plyta:#211C15; --plyta-2:#2B251C; --kreska:#372F24;
    --tekst:#F2EBDD; --cichy:#B4AB9B; --akcent:#9DB8EE; --na-akcencie:#14120D; --gwiazdka:#F2B84B;
    --akcent-zmierzch:#B8B4DE; --poswiata:rgba(242,184,75,.14); --kafel-cieply:#2A2219;
    --szklo:rgba(33,28,21,.76); --szklo-kreska:rgba(255,255,255,.10);
    --cien:0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --tlo:#16130E; --plyta:#211C15; --plyta-2:#2B251C; --kreska:#372F24;
  --tekst:#F2EBDD; --cichy:#B4AB9B; --akcent:#9DB8EE; --na-akcencie:#14120D; --gwiazdka:#F2B84B;
  --akcent-zmierzch:#B8B4DE; --poswiata:rgba(242,184,75,.14); --kafel-cieply:#2A2219;
  --szklo:rgba(33,28,21,.76); --szklo-kreska:rgba(255,255,255,.10);
  --cien:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
/* płynnie tylko w obrębie strony: klasę dodaje skrypt po wczytaniu. Globalne smooth sprawiało, że po wejściu
   z podstrony w index.html#kontakt strona przewijała się od góry przez 1,6 s (pomiar 25.09) */
html.plynnie{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html.plynnie{scroll-behavior:auto} }
body{margin:0; background:var(--tlo); color:var(--tekst); font-family:var(--uklad);
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; letter-spacing:-.025em; line-height:1.1; text-wrap:balance}
p,ul,ol{margin:0}
img{display:block; max-width:100%; height:auto}
/* height:auto jest konieczne: atrybuty width/height na <img> działają jak podpowiedź
   prezentacyjna i nadpisałyby aspect-ratio ustawione niżej w arkuszu */
a{color:var(--akcent)}
:focus-visible{outline:3px solid var(--akcent); outline-offset:3px; border-radius:10px}

.obszar{width:100%; max-width:1200px; margin-inline:auto; padding-inline:20px}
.sekcja{padding-block:clamp(44px,6vw,84px)}
/* env(safe-area-inset-top): w aplikacji Claude na iPhonie strona sięga pod górny pasek aplikacji, który zgłasza się jako
   bezpieczny margines (ok. 68 pt); bez niego kotwice i tytuły lądowały pod paskiem (25.09). W Safari i na komputerze 0. */
[id]{scroll-margin-top:calc(80px + env(safe-area-inset-top, 0px))}
/* sekcje strony głównej mają własny odstęp u góry, więc link z menu ustawia ich górną krawędź prawie przy górze ekranu:
   nie widać końcówki poprzedniej sekcji, a tytuł ląduje tuż pod paskiem (komputer) albo pod przyciskiem Menu
   i pasem rozmycia (telefon). 24.09: przy 96 px tytuł stał 132–340 px od góry i wyglądało, że link nie dojechał. */
.sekcja[id]{scroll-margin-top:16px}
/* telefon: tytuł sekcji po kotwicy stoi 80 px pod górą (24 px pod przyciskiem Menu), tak jak tytuł podstrony;
   scroll-margin = 80 px minus górny margines sekcji (36 px do 599, potem clamp). 25.09: 50 px pod Menu było za dużo */
@media (max-width:899px){ .sekcja[id]{scroll-margin-top:calc(80px + env(safe-area-inset-top, 0px) - clamp(44px,6vw,84px))} }
@media (max-width:599px){ .sekcja[id]{scroll-margin-top:calc(44px + env(safe-area-inset-top, 0px))} }
.naglowek{display:grid; gap:10px; max-width:640px; margin-bottom:24px}
.naglowek h2{font-size:clamp(27px,3.6vw,40px); font-weight:800}
.naglowek p{color:var(--cichy); font-size:17.5px}

/* ---------- przyciski ---------- */
.przycisk{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--akcent); color:var(--na-akcencie); text-decoration:none; font-weight:650;
  font-size:16px; border-radius:999px; padding:14px 22px; white-space:nowrap;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .25s ease, background-position .6s ease, background-color .2s ease}
.przycisk:active{transform:scale(.97)}
/* główne przyciski: chaber przechodzi w zmierzch, cicho, jak niebo w scenie „Spędź dzień w Bacówce” */
.przycisk:not(.przycisk-obrys){background:linear-gradient(135deg, var(--akcent), var(--akcent-zmierzch)); background-size:180% 180%; background-position:0% 0%}
/* najechanie myszką (tylko tam, gdzie jest mysz): przycisk lekko się unosi, a zmierzch przesuwa się jak światło */
@media (hover:hover){
  .przycisk:hover{transform:translateY(-1px)}
  .przycisk:not(.przycisk-obrys):hover{background-position:100% 100%; box-shadow:0 10px 22px -8px color-mix(in srgb, var(--akcent) 70%, transparent)}
  .przycisk-obrys:hover{background:color-mix(in srgb, var(--akcent) 9%, transparent)}
  .kontakt-lista a:hover{background:var(--plyta-2)}
  .kontakt-lista a:hover .strzalka{transform:translateX(2px)}
  .pytanie summary:hover{background:color-mix(in srgb, var(--plyta-2) 55%, transparent)}
}
.kontakt-lista .strzalka{transition:transform .2s ease}
/* błysk: przy najechaniu po głównym przycisku raz przechodzi pas światła; przy zjechaniu wraca bez animacji,
   więc każde najechanie daje jeden błysk */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .przycisk:not(.przycisk-obrys){position:relative; overflow:hidden}
  .przycisk:not(.przycisk-obrys)::after{content:""; position:absolute; top:0; bottom:0; left:0; width:55%; pointer-events:none;
    background:linear-gradient(105deg, transparent 15%, rgba(255,255,255,.42) 50%, transparent 85%);
    transform:translateX(-110%) skewX(-12deg)}
  .przycisk:not(.przycisk-obrys):hover::after{transform:translateX(200%) skewX(-12deg); transition:transform .9s cubic-bezier(.45,.05,.35,1)}
}
@media (prefers-reduced-motion:reduce){ .przycisk:hover{transform:none} }
/* ikony dwutonowe: kontur w kolorze tekstu obok, w środku przyciszone ciepłe światło */
.duo{fill:var(--poswiata)}   /* bez .ikona: wypełnienie w ikonie bez tej klasy zakryłoby rysunek */
.przycisk:not(.przycisk-obrys) .ikona .duo{fill:rgba(255,255,255,.26)}
.przycisk-obrys{background:transparent; color:var(--akcent); border-color:var(--akcent)}
.nr{font-variant-numeric:tabular-nums; white-space:nowrap}
.link-strzalka{font-weight:650; text-decoration:none}
.link-strzalka:hover{text-decoration:underline; text-underline-offset:4px}
/* SMS ma sens tylko w telefonie */
@media (min-width:900px){ .tylko-telefon{display:none!important} }

.chipy{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.chipy li{display:inline-flex; align-items:center; gap:7px; background:var(--plyta-2); color:var(--tekst);
  font-size:14.5px; font-weight:600; padding:8px 14px; border-radius:999px}
.chipy .ikona{flex:0 0 auto; width:18px; height:18px; color:var(--akcent)}
/* ikony: jedna biblioteka (Phosphor), zawsze w kolorze akcentu, zawsze obok tekstu */
.przycisk .ikona{flex:0 0 auto; width:20px; height:20px}

.przewijak{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:4px}
.przewijak::-webkit-scrollbar{display:none}

/* ================= NAWIGACJA =================
   Komputer: pełny pasek w szklanej pastylce, przyklejony u góry.
   Telefon: sam przycisk „Menu” w prawym górnym rogu. Na stronie głównej pojawia się
   dopiero po zjechaniu z pierwszego ekranu, razem z paskiem na dole; na podstronach od razu. */
.nawigacja{position:fixed; z-index:50}
.marka{display:flex; align-items:center; gap:10px; color:var(--tekst); text-decoration:none}
/* znak w kole: w pastylce paska z odstępem 6 px koło 34 px jest dokładnie współśrodkowe z jej łukiem */
.marka .znak-marki{width:34px; height:34px}   /* logo: margerytka z medalionu Bociana (SVG, od 25.09 zamiast zdjęcia) */
.marka b{font-size:15.5px; font-weight:750; letter-spacing:-.015em; white-space:nowrap}
.nav-cena{color:var(--tekst); font-size:15px; font-weight:650; white-space:nowrap}
.linki a{color:var(--tekst); text-decoration:none; font-weight:600; font-size:15px; white-space:nowrap}
.linki a:hover, .linki a[aria-current="page"]{color:var(--akcent)}
.menu-przycisk .ikona-zamknij, .menu-przycisk[aria-expanded="true"] .ikona-otworz{display:none}
.menu-przycisk[aria-expanded="true"] .ikona-zamknij{display:block}

@media (max-width:899px){
  .nawigacja{top:calc(12px + env(safe-area-inset-top, 0px)); right:16px;
    transition:opacity .25s ease, transform .25s ease, visibility .25s}
  .nawigacja .marka, .nawigacja .przycisk, .nav-cena, .nawigacja .linki{display:none}
  /* pełne tło, nie szklane rozmycie: przy „odbiciu” strony na iPhonie WebKit przycina pływające elementy
     z backdrop-filter (tak znikała połowa przycisku SMS na dole, 24.09) */
  .menu-przycisk{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 17px 0 14px;
    border-radius:999px; border:1px solid var(--kreska); background:var(--plyta); color:var(--tekst);
    font:inherit; font-size:15px; font-weight:650; cursor:pointer;
    box-shadow:0 8px 28px rgba(20,14,4,.18)}
  .menu-przycisk svg{width:20px; height:20px}
  /* strona główna: pierwszy ekran bez niczego na zdjęciu, przycisk czeka na przewinięcie */
  .nawigacja:not(.nawigacja-stala){opacity:0; visibility:hidden; transform:translateY(-8px)}
  body[data-po-hero="tak"] .nawigacja{opacity:1; visibility:visible; transform:none}
  /* menu: panel wyrasta z przycisku (przycięcie od kształtu pastylki do pełnej karty, ten sam promień 22 px),
     przycisk stapia się z panelem, pozycje wjeżdżają po kolei, tło strony przygasa i się rozmywa.
     Zamknięcie (klasa .zamyka, skrypt menu) chowa panel z powrotem w przycisk. */
  .menu-przycisk{position:relative; z-index:2; transition:background-color .25s ease, box-shadow .25s ease, border-color .25s ease}
  .nawigacja.otwarta:not(.zamyka) .menu-przycisk{background:transparent; border-color:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none}
  .nawigacja.otwarta .linki{display:grid; align-content:start; position:absolute; z-index:1; top:0; right:0;
    width:min(320px, calc(100vw - 32px)); padding:60px 10px 12px;
    background:var(--szklo); border:1px solid var(--szklo-kreska); border-radius:22px;
    -webkit-backdrop-filter:blur(24px) saturate(170%); backdrop-filter:blur(24px) saturate(170%);
    box-shadow:0 26px 60px -14px rgba(20,14,4,.4);
    animation:menu-wyrasta .46s cubic-bezier(.2,.9,.25,1) both}
  .nawigacja.otwarta .linki a{padding:11px 16px; border-radius:14px; font-size:25px; font-weight:750; letter-spacing:-.02em;
    animation:menu-pozycja .42s cubic-bezier(.2,.8,.2,1) both}
  .nawigacja.otwarta .linki a:nth-child(1){animation-delay:.1s}
  .nawigacja.otwarta .linki a:nth-child(2){animation-delay:.14s}
  .nawigacja.otwarta .linki a:nth-child(3){animation-delay:.18s}
  .nawigacja.otwarta .linki a:nth-child(4){animation-delay:.22s}
  .nawigacja.otwarta .linki a:nth-child(5){animation-delay:.26s}
  .nawigacja.otwarta .linki a:active{background:var(--plyta-2)}
  .nawigacja.otwarta::before{content:""; position:fixed; inset:0; z-index:0; background:rgba(20,14,4,.26);
    -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:menu-tlo .3s ease both}
  .nawigacja.zamyka .linki{animation:menu-chowa .24s cubic-bezier(.4,0,.7,.2) both}
  .nawigacja.zamyka .linki a{animation:menu-znika .12s ease both}
  .nawigacja.zamyka::before{animation:menu-znika .24s ease both}
}
@keyframes menu-wyrasta{from{clip-path:inset(0 0 calc(100% - 44px) calc(100% - var(--przycisk-w, 100px)) round 22px)} to{clip-path:inset(0 round 22px)}}
@keyframes menu-chowa{from{clip-path:inset(0 round 22px)} to{clip-path:inset(0 0 calc(100% - 44px) calc(100% - var(--przycisk-w, 100px)) round 22px)}}
@keyframes menu-pozycja{from{opacity:0; transform:translateY(-12px)}}
@keyframes menu-tlo{from{opacity:0}}
@keyframes menu-znika{to{opacity:0}}
@media (prefers-reduced-motion:reduce){ .nawigacja.otwarta .linki, .nawigacja.otwarta .linki a, .nawigacja.otwarta::before{animation:none} }
@media (min-width:900px){
  .nawigacja{top:14px; left:50%; transform:translateX(-50%); width:min(1160px, calc(100% - 40px));
    display:flex; align-items:center; gap:22px; padding:6px; border-radius:999px;
    background:var(--szklo); border:1px solid var(--szklo-kreska);
    -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
    box-shadow:0 8px 28px rgba(20,14,4,.18)}
  .nawigacja .linki{display:flex; gap:26px; margin-left:auto}
  .menu-przycisk, .linki .na-telefonie{display:none}
  .nawigacja .przycisk{display:inline-flex; padding:10px 18px; font-size:15px}
  .nav-cena{display:inline; padding-left:22px; border-left:1px solid var(--kreska)}
}
/* węższy laptop: menu musi zostać w jednej linii */
@media (min-width:900px) and (max-width:1199px){
  .nav-cena{display:none}
  .nawigacja .przycisk .nr{display:none}
  .nawigacja .linki{gap:18px}
}
@media (prefers-reduced-transparency:reduce){
  .menu-przycisk{background:var(--plyta); -webkit-backdrop-filter:none; backdrop-filter:none}
}
@media (prefers-reduced-transparency:reduce) and (min-width:900px){
  .nawigacja{background:var(--plyta); -webkit-backdrop-filter:none; backdrop-filter:none}
}

/* ================= STRONA GŁÓWNA: HERO ================= */
.hero{position:relative; min-height:min(88svh, 820px); display:flex; align-items:flex-end;
  color:#FFFFFF; isolation:isolate; overflow:hidden}
.hero picture, .hero picture img{position:absolute; inset:0; width:100%; height:100%; z-index:-2}
.hero picture img{object-fit:cover; object-position:36% 50%}
/* otwarcie strony: zdjęcie osiada (4,5 s, krócej niż 5 s, po których ruch wymagałby pauzy),
   a podtytuł i przyciski wchodzą po kolei. Raz, bez pętli. Tytuł stoi od razu: to on jest miarą
   LCP dla Google (zdjęcie na cały ekran Chrome traktuje jak tło), a tekst wchodzący z przezroczystości
   w ogóle się nie liczy, więc strona nie miałaby żadnej miary. */
@media (prefers-reduced-motion:no-preference){
  .hero picture img{animation:osiadanie 4.5s cubic-bezier(.2,.7,.2,1) both}
  .hero-tekst > :nth-child(2){animation:wejscie .7s cubic-bezier(.22,.8,.3,1) .2s both}
  .hero-tekst > :nth-child(3){animation:wejscie .7s cubic-bezier(.22,.8,.3,1) .34s both}
}
@keyframes osiadanie{from{transform:scale(1.06)}}
@keyframes wejscie{from{opacity:0; transform:translateY(14px)}}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(22,16,6,.86) 0%, rgba(22,16,6,.55) 32%, rgba(22,16,6,0) 60%)}
.hero-dol{padding-bottom:clamp(28px,5vw,64px)}
.hero-tekst{display:grid; gap:12px; max-width:720px}
.hero h1{font-size:clamp(40px,7.4vw,84px); font-weight:800; letter-spacing:-.035em; line-height:1}
.hero-tekst p{font-size:clamp(18px,1.9vw,22px); color:#F4EBDD}
.hero-akcje{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
/* przyciski w nagłówku jak pływająca para na dole: szklana „Napisz SMS” i niebieska „Zadzwoń”
   (24.09: wcześniej białe, jedyne takie na stronie i najjaśniejsza rzecz w nagłówku, obok tytułu) */
.hero-akcje .przycisk{box-shadow:0 12px 28px -10px rgba(20,14,4,.5)}
.hero-akcje .przycisk-sms{background:var(--szklo); border:1px solid var(--szklo-kreska); color:var(--tekst);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%)}
.hero-akcje .przycisk-sms .ikona{color:var(--akcent)}
/* telefon: dokładnie ta para co na dole (te same proporcje), numer w przycisku chowam, bo się nie mieści */
@media (max-width:599px){
  .hero-akcje{display:grid; grid-template-columns:1fr 1.2fr; gap:8px}
  .hero-akcje .przycisk{height:52px; padding-inline:14px}
  .hero-akcje .nr{display:none}
}
@media (min-width:900px){ .hero picture img{object-position:50% 62%} }
/* telefon: kadr przesunięty w lewo, żeby na wąskim ekranie została cała ściana szczytowa z malowanym kwiatem
   (przy środku zostawał z niej skrawek przy krawędzi) */
@media (max-width:599px){ .hero picture img{object-position:12% 50%} }
/* telefon: nagłówek na cały ekran (svh: wysokość przy widocznych paskach przeglądarki, więc nic nie ucieka pod nie) */
/* tekst i przyciski wyżej niż przy samej krawędzi: dół ekranu zasłania pływający pasek Safari (iOS 26), pasek domowy
   iPhone'a, a w podglądzie w aplikacji Claude także dolny brzeg arkusza (24.09 przyciski były tam ucięte) */
@media (max-width:899px){ .hero{min-height:100vh; min-height:100svh}
  .hero-dol{padding-bottom:calc(max(64px, 9svh) + env(safe-area-inset-bottom, 0px))} }
/* wideo ze wschodu słońca: 5 s, raz, bez dźwięku; tylko telefon, wstawiane skryptem */
.hero-wideo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  opacity:0; transition:opacity 1.2s ease}   /* wejście i powrót do zdjęcia po końcu klipu */
.hero-wideo.gra{opacity:1}

/* ================= OD RANA DO NOCY ================= */
/* telefon: tytuł krócej, „Dzień w Bacówce”, bo obok przycisku Menu pełny się nie mieści (24.09) */
@media (max-width:599px){ .tylko-szeroko{display:none} #t-dzien::first-letter{text-transform:uppercase} }
.dzien .przewijak{margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px}
.karta-nastroju{flex:0 0 min(72%, 300px); scroll-snap-align:start; margin:0}
.karta-nastroju img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-sredni)}
.karta-nastroju figcaption{font-size:15.5px; font-weight:650; margin-top:10px}
.karta-nastroju figcaption span{display:block; font-weight:400; color:var(--cichy); font-size:14.5px}

/* ===== „Spędź dzień w Bacówce” (dawniej „Od rana do nocy”) jako scena przewijana =====
   Gdzie przeglądarka zna animacje sterowane przewijaniem (Chrome, Edge, Safari 26+) i gość nie
   ogranicza ruchu: sekcja zatrzymuje się na ekranie, a przewijanie przesuwa porę dnia. Niebo za
   zdjęciami idzie od świtu przez złotą godzinę do nocy, zdjęcia przechodzą jedno w drugie.
   Nigdzie indziej nic się nie zmienia: zostaje zwykły poziomy przewijak. */
:root{--niebo-swit:#F4E3CC; --niebo-dzien:#F6EEDC; --niebo-zlota:#F0C98C; --niebo-zmierzch:#4E4466; --niebo-noc:#101827;
      --scena-tekst:#1E232B; --scena-tekst-noc:#F2EBDD}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --niebo-swit:#2A241D; --niebo-dzien:#2B271F; --niebo-zlota:#4A3520; --niebo-zmierzch:#2B2338; --niebo-noc:#0B101B;
  --scena-tekst:#F2EBDD; --scena-tekst-noc:#F2EBDD} }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
  /* .sekcja.dzien, nie .dzien: telefonowe .sekcja{padding-block:36px} stoi niżej w arkuszu i wygrywało,
     dając 36 px kremowego pasa między nagłówkiem a sceną (24.09) */
  .sekcja.dzien{view-timeline:--dzien block; height:360svh; max-width:none; padding:0; margin:0}
  /* scena nie ma dolnego marginesu, więc następna sekcja bierze oba: odstęp jak między innymi sekcjami (25.09: był o połowę mniejszy) */
  .sekcja.dzien + .sekcja{padding-top:calc(2 * clamp(44px,6vw,84px))}
  @media (max-width:599px){ .sekcja.dzien + .sekcja{padding-top:72px} }
  /* kotwica (#domki z menu) ma trafiać tytułem tam, gdzie przed zmianą: dodatkowy margines odejmuję od scroll-margin */
  .sekcja.dzien + .sekcja[id]{scroll-margin-top:calc(16px - clamp(44px,6vw,84px))}
  @media (max-width:899px){ .sekcja.dzien + .sekcja[id]{scroll-margin-top:calc(80px + env(safe-area-inset-top, 0px) - 2 * clamp(44px,6vw,84px))} }
  @media (max-width:599px){ .sekcja.dzien + .sekcja[id]{scroll-margin-top:calc(8px + env(safe-area-inset-top, 0px))} }
  .dzien-scena{position:sticky; top:0; height:100svh; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr); grid-template-columns:minmax(0,1fr);
    gap:14px; padding:calc(74px + env(safe-area-inset-top, 0px)) 20px calc(96px + env(safe-area-inset-bottom, 0px));
    background:var(--niebo-swit); color:var(--scena-tekst); border-radius:0 0 var(--r-duzy) var(--r-duzy);
    animation:niebo linear both; animation-timeline:--dzien; animation-range:contain 0% contain 100%}
  .dzien .naglowek{margin:0}
  .dzien .przewijak{position:relative; display:block; overflow:visible; margin:0; padding:0; min-height:0}
  /* kolumna flex, nie siatka: w Safari zdjęcie z height:100% w wierszu siatki brało wysokość całej karty
     i podpis lądował na zdjęciu (11.10, Igor w Safari na komputerze; w Chrome było dobrze) */
  .dzien .karta-nastroju{position:absolute; inset:0; margin:0; display:flex; flex-direction:column; gap:12px}
  /* zdjęcia przenikają się, a podpisy zmieniają skokowo w połowie przejścia, żeby się nie nakładały */
  .dzien .karta-nastroju img, .dzien .karta-nastroju figcaption{animation:karta linear both; animation-timeline:--dzien}
  .dzien .karta-nastroju figcaption{animation-name:podpis}
  .dzien .karta-nastroju img{flex:1 1 0; min-height:0; width:100%; height:auto; aspect-ratio:auto; object-fit:cover; border-radius:var(--r-duzy)}
  .dzien .karta-nastroju figcaption{flex:0 0 auto}
  .dzien .karta-nastroju figcaption{position:relative; margin:0; font-size:18px; color:inherit}
  .dzien .karta-nastroju figcaption span{color:inherit; opacity:.78; font-size:15px}
  .dzien .karta-nastroju:nth-child(1) > *{animation-range:contain 0% contain 30%}
  .dzien .karta-nastroju:nth-child(2) > *{animation-range:contain 22% contain 55%}
  .dzien .karta-nastroju:nth-child(3) > *{animation-range:contain 47% contain 80%}
  .dzien .karta-nastroju:nth-child(4) > *{animation-range:contain 72% contain 100%}
  .dzien .karta-nastroju:nth-child(1) img{animation-name:karta-pierwsza}
  .dzien .karta-nastroju:nth-child(1) figcaption{animation-name:podpis-pierwszy}
  .dzien .karta-nastroju:nth-child(4) img{animation-name:karta-ostatnia}
  .dzien .karta-nastroju:nth-child(4) figcaption{animation-name:podpis-ostatni}
  /* telefon: scena na cały ekran, zdjęcia od krawędzi do krawędzi, tytuł u góry i podpis u dołu na zdjęciu;
     pod tekstem przyciemnienie. Pora dnia widać na samych zdjęciach, niebo za nimi jest zakryte. */
  @media (max-width:599px){
    .dzien-scena{display:block; padding:0}
    /* tytuł w jednej linii z przyciskiem Menu, jak nagłówek w aplikacji; scena nad rozmyciem górnej krawędzi
       (z-index 45), żeby tytuł nie był rozmyty, ale pod Menu (50) i pod przyciskami na dole (48) */
    .dzien-scena{z-index:46}
    .dzien .naglowek{position:absolute; z-index:3; top:0; left:0; right:0; padding:calc(12px + env(safe-area-inset-top, 0px)) 136px 0 20px}
    .dzien .naglowek h2{color:#FFFFFF; line-height:44px; white-space:nowrap; font-size:clamp(22px, 6.8vw, 28px)}
    .dzien .przewijak{position:absolute; inset:0}
    .dzien .karta-nastroju{display:block}
    .dzien .karta-nastroju img{position:absolute; inset:0; height:100%; border-radius:0}
    .dzien .karta-nastroju figcaption{position:absolute; z-index:3; left:20px; right:20px;
      bottom:calc(92px + env(safe-area-inset-bottom, 0px)); color:#FFFFFF; font-size:21px}
    .dzien .karta-nastroju figcaption span{font-size:15.5px; opacity:.85}
    .dzien-scena::before, .dzien-scena::after{content:""; position:absolute; z-index:2; left:0; right:0; pointer-events:none}
    .dzien-scena::before{top:0; height:38%; background:linear-gradient(rgba(14,10,4,.62), rgba(14,10,4,0))}
    .dzien-scena::after{bottom:0; height:46%; background:linear-gradient(rgba(14,10,4,0), rgba(14,10,4,.72))}
  }
  @media (min-width:900px){
    .dzien-scena{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); column-gap:48px;
      padding:110px max(40px, calc((100vw - 1160px) / 2)) 48px}
    .dzien .naglowek{align-self:center}
    .dzien .naglowek h2{font-size:clamp(40px,5vw,64px)}
  }
}}
@keyframes niebo{
  0%{background-color:var(--niebo-swit); color:var(--scena-tekst)}
  28%{background-color:var(--niebo-dzien)}
  50%{background-color:var(--niebo-zlota)}
  54%{background-color:var(--niebo-zlota)}
  /* złoto → zmierzch krótko, a tekst przełącza się skokowo w środku: przy tle w połowie drogi
     żaden kolor tekstu nie ma pełnego kontrastu, więc ta strefa ma trwać kilkadziesiąt pikseli */
  57.4%{color:var(--scena-tekst)}
  57.5%{color:var(--scena-tekst-noc)}
  60%{background-color:var(--niebo-zmierzch)}
  80%{background-color:var(--niebo-noc)}
  100%{background-color:var(--niebo-noc); color:var(--scena-tekst-noc)}
}
@keyframes karta{0%{opacity:0} 22%{opacity:1} 78%{opacity:1} 100%{opacity:0}}
/* podpisy: poprzedni znika przed przełączeniem (26, 51, 76% sceny), następny pojawia się po nim; bez nakładania */
@keyframes podpis{0%, 12.7%{opacity:0} 14.5%, 85.5%{opacity:1} 87.3%, 100%{opacity:0}}
@keyframes podpis-pierwszy{0%, 84%{opacity:1} 86%, 100%{opacity:0}}
@keyframes podpis-ostatni{0%, 15%{opacity:0} 17.1%, 100%{opacity:1}}
@keyframes karta-pierwsza{0%, 70%{opacity:1} 100%{opacity:0}}
@keyframes karta-ostatnia{0%{opacity:0} 30%, 100%{opacity:1}}
@media (min-width:900px){
  .dzien .przewijak{margin-inline:0; padding-inline:0; display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr)); overflow:visible}
  .karta-nastroju{flex:none}
}

/* ================= DOMKI ================= */
.domki-uklad{display:grid; gap:26px}
.domki-tekst{display:grid; gap:18px; align-content:start}
.domki-tekst h2{font-size:clamp(27px,3.6vw,40px); font-weight:800}
.domki-tekst p{color:var(--cichy); font-size:17.5px; max-width:52ch}
.domki-wzor{margin:0}
.domki-media{position:relative; border-radius:var(--r-duzy); overflow:hidden}
.domki-wzor img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover}
.domki-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease}
.domki-media video{pointer-events:none}
.domki-media video.gra{opacity:1; pointer-events:auto; cursor:zoom-in}
.klip-przycisk{position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:10px 15px 10px 12px;
  border:1px solid var(--szklo-kreska); border-radius:999px; background:var(--szklo); color:var(--tekst); font:inherit; font-size:14.5px;
  font-weight:650; cursor:pointer; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 6px 20px rgba(20,14,4,.18)}
.klip-przycisk svg{color:var(--akcent)}
/* pauza klipu (22 s): nagłówek na telefonie i sekcja domków na komputerze; pojawia się, gdy klip gra.
   Tło 55%: przy 38% biała ikona na jasnym niebie (14.–16. s klipu) miała 2,8:1, a element sterujący potrzebuje 3:1 */
.klip-pauza{position:absolute; z-index:2; top:14px; right:14px; width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(20,14,4,.55); color:#FFFFFF; cursor:pointer;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility 0s linear .3s; -webkit-tap-highlight-color:transparent;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.hero .klip-pauza{top:calc(12px + env(safe-area-inset-top, 0px)); right:16px}
.klip-pauza.widoczny{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s ease}
.klip-pauza .ikona-graj, .klip-pauza.wstrzymany .ikona-pauza{display:none}
.klip-pauza.wstrzymany .ikona-graj{display:block}
/* pełny ekran klipu (komputer): przycisk ze strzałkami obok pauzy, okno to samo co przy zdjęciach */
.klip-pelny{right:66px}
.podglad-film video{display:block; height:calc(100dvh - 190px); width:auto; max-width:100%; aspect-ratio:9/16;
  object-fit:cover; border-radius:12px; cursor:pointer}
.domki-wzor figcaption{font-size:14.5px; color:var(--cichy); margin-top:10px}
@media (max-width:899px){ .domki-wzor img{aspect-ratio:4/3; object-position:45% 50%} }
@media (min-width:900px){
  .domki-uklad{grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
  .domki-wzor img{aspect-ratio:4/5}
}

/* ================= W ŚRODKU ================= */
.wnetrza .przewijak{margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px}
.wnetrze{flex:0 0 min(84%, 360px); scroll-snap-align:start; margin:0}
.wnetrze img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sredni)}
.wnetrze figcaption{font-size:15px; font-weight:600; margin-top:9px}
.lista{margin-top:26px; background:var(--plyta); border:1px solid var(--kreska);
  border-radius:var(--r-sredni); list-style:none; padding:0; max-width:640px}   /* bez overflow:hidden: iskry z kozy wylatują ponad kartę */
.lista li{display:flex; align-items:flex-start; gap:14px; padding:14px 18px; border-top:1px solid var(--kreska); font-size:16px}
.lista .ikona{flex:0 0 auto; width:22px; height:22px; margin-top:1px; color:var(--akcent)}
.lista li:first-child{border-top:0}
.lista li span{display:block; color:var(--cichy); font-size:14.5px; margin-top:2px}
.wiecej{margin-top:18px}
@media (min-width:900px){
  .wnetrza-uklad{display:grid; grid-template-columns:1.5fr 1fr; gap:18px 40px; align-items:start}
  .wnetrza-okno{grid-column:1; grid-row:1}
  .wnetrza-uklad > .wiecej{grid-column:1; grid-row:2; margin:0}
  .wnetrza-uklad > .lista{grid-column:2; grid-row:1}
  .wnetrza .przewijak{margin:0; padding:0; overflow:visible; display:grid;
    grid-template-columns:repeat(6, 1fr); grid-auto-rows:170px; gap:12px}
  .wnetrze{flex:none; display:flex; flex-direction:column}
  .wnetrze img{aspect-ratio:auto; flex:1; min-height:0; height:100%}
  .wnetrze:nth-child(1){grid-column:span 4; grid-row:span 2}
  .wnetrze:nth-child(n+2){grid-column:span 2; grid-row:span 2}
  .lista{margin-top:0}
}

/* ===== „W środku” na komputerze: scena stoi, zdjęcia w lewej kolumnie przesuwają się w bok =====
   Rozmiar zdjęć jak w zwykłym układzie, lista wyposażenia po prawej. Na telefonie zwykłe przesuwanie palcem. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (min-width:900px) {
  /* scena na cały ekran sama daje miejsce nad i pod treścią, więc sekcja nie dokłada swoich marginesów, a zdjęcia rosną
     z wysokością ekranu; wcześniej przed i po „W środku” było 390 i 315 px pustki przy 155 px między innymi sekcjami (25.09) */
  .sekcja.wnetrza{padding-block:0}
  .wnetrza-tor{view-timeline:--wnetrza block; height:260svh}
  .wnetrza-scena{position:sticky; top:0; height:100svh; display:grid; align-content:center; gap:26px; padding-block:70px}
  .wnetrza-scena .naglowek{margin:0}
  .wnetrza-uklad{align-items:center}
  /* środek listy na środku samych zdjęć: pod zdjęciami jest jeszcze podpis (9 + 23 px), więc lista idzie o połowę wyżej */
  .wnetrza-uklad > .lista{margin-bottom:32px}
  .wnetrza-okno{container-type:inline-size; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent)}
  .wnetrza-okno .przewijak{display:flex; gap:12px; width:max-content; overflow:visible; margin:0; padding:0;
    animation:przesun linear both; animation-timeline:--wnetrza; animation-range:contain 0% contain 100%}
  .wnetrza-okno .wnetrze{flex:0 0 auto; height:clamp(340px, 100svh - 330px, 600px); display:grid; grid-template-rows:minmax(0,1fr) auto; grid-column:auto; grid-row:auto}
  .wnetrza-okno .wnetrze img{height:100%; width:auto; min-height:0; flex:none}
  .wnetrza-okno .wnetrze img[width="1200"]{aspect-ratio:4/3}
  .wnetrza-okno .wnetrze img[width="900"]{aspect-ratio:3/4}
}}
@keyframes przesun{to{transform:translateX(calc(-100% + 100cqw))}}

/* ================= NA TERENIE ================= */
.teren-foto{display:block; margin:0 0 22px; position:relative}
.teren-foto img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-duzy)}
/* zdjęcia pozycji z listy: dwie warstwy nad bramą, nowa wchodzi nad starą (skrypt na stronie głównej) */
.teren-foto .warstwa{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-position:50% 50%;
  opacity:0; transition:opacity .55s ease}
.teren-foto .warstwa.widoczna{opacity:1}
.wiersze{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.wiersz{position:relative; overflow:hidden; display:flex; gap:14px; align-items:center; background:var(--plyta);
  border:1px solid var(--kreska); border-radius:var(--r-sredni); padding:10px 16px 10px 10px;
  transition:border-color .3s ease, background-color .3s ease, transform .15s ease}
.wiersz.aktywna{background:var(--plyta-2)}
.wiersz img{flex:0 0 72px; width:72px; height:72px; object-fit:cover; border-radius:calc(var(--r-sredni) - 11px)}
.wiersz b{display:block; font-size:16.5px; font-weight:650}
/* display:block: jako zwykły span dostawał interlinię z większego tytułu obok (26 px na 14 px tekstu) */
.wiersz span{display:block; color:var(--cichy); font-size:14.5px; line-height:1.4; margin-top:2px}
/* telefon: zdjęcie od krawędzi do krawędzi stoi w miejscu, pod nim pas kart przewijanych w bok (jak opinie);
   karta, która jest cała na ekranie, wyznacza zdjęcie (skrypt na stronie głównej). Cała sekcja mieści się na
   jednym ekranie. Brama na telefonie się nie pobiera (pusty obrazek w <picture>), od razu widać pierwszą pozycję.
   24.09: wcześniej zdjęcie było przyklejone, a wybór szedł za przewijaniem w pionie; Igor słusznie to odrzucił. */
@media (max-width:639px){
  .teren-foto{margin:0 -20px 12px; aspect-ratio:4/3; overflow:hidden; background:var(--plyta-2)}
  .teren-foto picture{display:block; height:100%}
  .teren-foto img{height:100%; aspect-ratio:auto; border-radius:0}
  .wiersze{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:-20px; padding:0 20px 4px; scroll-padding-inline:20px}
  .wiersze::-webkit-scrollbar{display:none}
  .wiersz{flex:0 0 82%; scroll-snap-align:start; gap:12px; padding:8px 14px 8px 8px; cursor:pointer}
  .wiersz img{flex:0 0 60px; width:60px; height:60px; border-radius:calc(var(--r-sredni) - 9px)}
  .wiersz b{font-size:16px}
  .wiersz span{font-size:14px; line-height:1.4}
}
/* od 640 px lista to jeden panel z liniami między wierszami, jak „W środku”, „Okolica” i pytania
   (25.09: sześć osobnych kart w ramkach, wybrana z kolorową ramką, odstawało od reszty strony).
   Zdjęcie ma co najmniej min(640 px, 62vw) wysokości, a panel ciągnie się do niego i dzieli ją na sześć równych wierszy. */
@media (min-width:640px){
  .teren-uklad{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,40px); align-items:stretch}
  .teren-foto{min-height:min(640px, 62vw)}
  .wiersze{gap:0; align-self:stretch; grid-auto-rows:1fr; background:var(--plyta); border:1px solid var(--kreska); border-radius:var(--r-sredni); overflow:hidden}
  .wiersz{background:transparent; border:0; border-top:1px solid var(--kreska); border-radius:0; padding:14px 18px 14px 14px}
  .wiersz:first-child{border-top:0}
  .wiersz.aktywna{background:var(--plyta-2)}
  .wiersz img{flex-basis:72px; width:72px; height:72px; border-radius:calc(var(--r-sredni) - 14px)}
  .wiersze .wiersz:active{transform:none}
  .teren-foto{margin:0}
  /* wysokość wyznacza lista, zdjęcie ją wypełnia (inaczej pionowa brama rozpychała panel i zostawała w nim pustka) */
  .teren-foto picture{display:block; position:absolute; inset:0}
  .teren-foto img{height:100%; aspect-ratio:auto; object-position:50% 2%}
}
@media (prefers-reduced-motion:reduce){ .teren-foto .warstwa, .wiersz{transition:none} }

/* ================= BACA ================= */
/* Baca: krótka anegdota, bez karty; okrągły portret zamiast dużego zdjęcia.
   Wyśrodkowana, jako przerywnik między dwiema szerokimi sekcjami (grupy i okolica). */
.baca{display:grid; gap:20px; justify-items:center; text-align:center; max-width:640px; margin-inline:auto}
.baca-portret{width:128px; height:128px; border-radius:50%; object-fit:cover; object-position:60% 45%;
  border:4px solid var(--plyta); box-shadow:0 0 0 1px var(--kreska), var(--cien)}
.baca div{display:grid; gap:10px; justify-items:center}
.baca h2{font-size:clamp(25px,3vw,34px); font-weight:800}
.baca p{color:var(--cichy); font-size:17px; max-width:42ch; text-wrap:balance}
/* zwierzęta: plakietka jak fakty o domkach, pod nią drobna uwaga; zamiast pogrubienia w środku wyśrodkowanego akapitu */
.baca-zwierzeta, .grupy-razem{display:grid; gap:8px; justify-items:center; margin-top:6px}
.grupy-razem{justify-items:start; margin-top:2px}
.baca-zwierzeta span, .grupy-razem span{display:inline-flex; align-items:center; gap:8px; background:var(--plyta-2); color:var(--tekst);
  font-size:15px; font-weight:650; line-height:1.3; padding:9px 16px 9px 13px; border-radius:999px; text-wrap:balance}
.baca-zwierzeta .ikona, .grupy-razem .ikona{flex:0 0 auto; width:20px; height:20px; color:var(--akcent)}
.baca-zwierzeta small, .grupy-razem small{font-size:15px; color:var(--cichy)}
@media (min-width:900px){ .baca{gap:26px} .baca-portret{width:168px; height:168px} }

/* ================= OKOLICA ================= */
.odleglosci{list-style:none; margin:0; padding:0; border-top:1px solid var(--kreska); max-width:780px}
.odleglosci li{display:flex; justify-content:space-between; gap:18px; align-items:baseline;
  padding:14px 10px; margin-inline:-8px; border-bottom:1px solid var(--kreska); border-radius:12px}
.odleglosci b{font-weight:650; font-size:16.5px}
.odleglosci small{display:block; color:var(--cichy); font-size:14.5px; margin-top:2px}
.odleglosci .ile{flex:0 0 auto; color:var(--akcent); font-weight:750; font-size:16.5px;
  font-variant-numeric:tabular-nums}

/* ================= GRUPY ================= */
.grupy{display:grid; gap:20px; background:var(--plyta); border:1px solid var(--kreska); border-radius:var(--r-duzy);
  padding:clamp(12px,2vw,20px); box-shadow:var(--cien)}
/* zaokrąglenia współśrodkowe: wewnętrzne = zewnętrzne minus odstęp (padding + 1 px ramki) */
.grupy img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:max(8px, calc(var(--r-duzy) - clamp(12px,2vw,20px) - 1px))}
.grupy-tekst{display:grid; gap:12px; align-content:center; padding:4px 6px 8px}
.grupy h2{font-size:clamp(27px,3.6vw,40px); font-weight:800}
.grupy p{font-size:17px}
.grupy-akcje{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.grupy-akcje .przycisk{padding-inline:18px}
@media (max-width:899px){ .grupy-akcje .przycisk{flex:1 1 100%} }
@media (min-width:900px){ .grupy{grid-template-columns:1fr 1fr; gap:36px; padding:20px} .grupy > img{order:2} .grupy-tekst{padding:12px 0 12px 20px} }

/* ================= PYTANIA: rozwijane odpowiedzi, bez skryptu ================= */
/* komputer: nagłówek i lista na środku, jak Baca; na telefonie lista i tak ma całą szerokość */
@media (min-width:900px){ #pytania .naglowek{margin-inline:auto; text-align:center; justify-items:center} }
.pytania{max-width:760px; margin-inline:auto; background:var(--plyta); border:1px solid var(--kreska); border-radius:var(--r-sredni); overflow:hidden}
.pytanie + .pytanie{border-top:1px solid var(--kreska)}
.pytanie summary{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px;
  font-size:16.5px; font-weight:650; cursor:pointer; list-style:none}
.pytanie summary::-webkit-details-marker{display:none}
.pytanie summary .ikona{flex:0 0 auto; width:20px; height:20px; color:var(--akcent); transition:transform .2s ease}
.pytanie[open] summary .ikona{transform:rotate(45deg)}
.pytanie.zamyka summary .ikona{transform:none}
/* odpowiedź: wyraźny odstęp od pytania (18 + 14 px) i od kreski pod spodem; rozwijanie płynne (skrypt na stronie głównej) */
.odpowiedz p{padding:14px 22px 24px; max-width:64ch; color:var(--cichy); font-size:16px; line-height:1.6}
@media (prefers-reduced-motion:reduce){ .pytanie summary .ikona{transition:none} }

/* ================= MAPA OKOLICY =================
   Obrazek rysuje narzedzia/mapa-okolicy.py z danych OpenStreetMap. Położenia pinezek (procenty)
   wypisuje ten sam skrypt: środek wsi Szumleś Szlachecki, Ośrodek Narciarski Trzepowo, wieś Przywidz,
   Będomin, Wieżyca. Podpis ustawia klasa: w prawo (domyślnie), .pin-lewo, .pin-gora, .pin-dol. */
.okolica-uklad{display:grid; gap:22px}
@media (min-width:900px){ .okolica-uklad{grid-template-columns:1.15fr 1fr; gap:36px; align-items:start} }
.mapa-okolicy{margin:0}
.mapa-ramka{position:relative; border-radius:var(--r-duzy); overflow:hidden; border:1px solid var(--kreska)}
.mapa-ramka img{display:block; width:100%; height:auto}
.mapa-okolicy figcaption{margin-top:8px; color:var(--cichy); font-size:12.5px}
.mapa-okolicy figcaption a{color:inherit}
.pin{position:absolute; width:0; height:0}
.pin i{position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%;
  background:var(--tekst); border:2px solid var(--plyta); box-shadow:0 1px 3px rgba(20,14,4,.3)}
.pin b, .mapa-kierunek{position:absolute; white-space:nowrap; background:var(--plyta); color:var(--tekst);
  font-size:12.5px; font-weight:650; line-height:1; padding:6px 9px; border-radius:999px;
  box-shadow:0 0 0 1px var(--kreska), 0 2px 8px rgba(20,14,4,.16)}
.pin b{top:0; left:11px; transform:translateY(-50%)}
.pin small, .mapa-kierunek small{font-size:12px; font-weight:500; color:var(--cichy); margin-left:5px}
.pin-lewo b{left:auto; right:11px}
.pin-gora b{left:0; top:-11px; transform:translate(-50%,-100%)}
.pin-dol b{left:0; top:13px; transform:translate(-50%,0)}
.pin-glowna i{left:-9px; top:-9px; width:18px; height:18px; background:var(--akcent); border-width:3px}
.pin-glowna b{background:var(--akcent); color:var(--na-akcencie)}
.mapa-kierunek{top:12px; right:12px; display:inline-flex; align-items:center; gap:0}
.mapa-kierunek .ikona{width:14px; height:14px; margin-left:5px; color:var(--akcent)}
.pin-bacowka{left:56.3%; top:67.8%}
/* kręgi 5 i 10 km jak radar: od Bacówki wychodzą trzy fale co 1,5 s, każda ze stałą prędkością
   (promień 640 w 4,2 s, więc 5 km po 1,55 s, 10 km po 3,1 s). Pierwsza fala odsłania miejsca w okolicy,
   druga zostawia krąg 5 km (1,5 + 1,55 = 3,05 s), trzecia krąg 10 km (3 + 3,1 = 6,1 s). Pinezka Bacówki
   błyska przy wyjściu każdej fali. Raz, przy pierwszym wejściu mapy w ekran; całość 7,2 s
   (24.09 zwolnione na prośbę Igora; przy „Ogranicz ruch” fal nie ma). */
.mapa-kregi{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.krag{fill:none; stroke:var(--akcent); stroke-opacity:.5; stroke-width:1.5; stroke-dasharray:2 5; stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.krag-5{fill:var(--akcent); fill-opacity:.05}
.krag-podpis{position:absolute; left:56.3%; transform:translate(-50%,-50%); white-space:nowrap; font-size:12px; font-weight:650; line-height:1;
  color:var(--akcent); background:var(--plyta); padding:3px 7px; border-radius:999px; box-shadow:0 0 0 1px var(--kreska)}
.krag-podpis-5{left:76.0%; top:67.8%}
.krag-podpis-10{top:17.9%}
.krag-fala{fill:none; stroke:var(--akcent); stroke-width:2; vector-effect:non-scaling-stroke; opacity:0;
  transform-box:view-box; transform-origin:676px 641px}
.mapa-okolicy.animuj .krag, .mapa-okolicy.animuj .krag-podpis{opacity:0}
.mapa-okolicy.widoczna .krag-fala{animation:fala 4.2s linear}
.mapa-okolicy.widoczna .krag-fala:nth-child(2){animation-delay:1.5s}
.mapa-okolicy.widoczna .krag-fala:nth-child(3){animation-delay:3s}
@keyframes fala{0%{transform:scale(0); opacity:.85} 70%{opacity:.55} 100%{transform:scale(1); opacity:0}}
/* miejsca pojawiają się, gdy dotrze do nich pierwsza fala (odległość od Bacówki w viewBox / 640 × 4,2 s);
   „backwards”, nie „both”: po wejściu pinezka wraca do zwykłych stylów, więc przygaszanie przy wyborze z listy działa */
.mapa-okolicy.animuj:not(.widoczna) .pin[data-miejsce], .mapa-okolicy.animuj:not(.widoczna) .mapa-kierunek{opacity:0}
.mapa-okolicy.widoczna .pin-trzepowo{animation:pin-pojaw .5s cubic-bezier(.2,.9,.3,1.3) 1.22s backwards}
.mapa-okolicy.widoczna .pin-przywidz{animation:pin-pojaw .5s cubic-bezier(.2,.9,.3,1.3) 2.25s backwards}
.mapa-okolicy.widoczna .pin-bedomin{animation:pin-pojaw .5s cubic-bezier(.2,.9,.3,1.3) 2.69s backwards}
.mapa-okolicy.widoczna .pin-wiezyca{animation:pin-pojaw .5s cubic-bezier(.2,.9,.3,1.3) 3.66s backwards}
.mapa-okolicy.widoczna .pin-jezioro{animation:pin-pojaw .5s cubic-bezier(.2,.9,.3,1.3) 1.15s backwards}
.mapa-okolicy.widoczna .mapa-kierunek{animation:pin-pojaw .5s cubic-bezier(.2,.9,.3,1.3) 4.2s backwards}
@keyframes pin-pojaw{from{opacity:0; transform:scale(.6)}}
/* ślad fali: krąg pojawia się od razu pełny i wyraźny, potem w niecałe dwie sekundy przygasa do zwykłej kreski */
.mapa-okolicy.widoczna .krag-5{animation:slad 1.8s ease-out 3.05s both}
.mapa-okolicy.widoczna .krag-10{animation:slad 1.8s ease-out 6.1s both}
@keyframes slad{0%{opacity:0} 1%{opacity:1; stroke-opacity:1; stroke-width:2.5} 100%{opacity:1; stroke-opacity:.5; stroke-width:1.5}}
.mapa-okolicy.widoczna .krag-podpis{opacity:1; transition:opacity .5s ease}
.mapa-okolicy.widoczna .krag-podpis-5{transition-delay:3.05s}
.mapa-okolicy.widoczna .krag-podpis-10{transition-delay:6.1s}
/* „tu jesteś”: błysk wokół pinezki przy wyjściu każdej z trzech fal, potem spokój */
.pin-glowna i::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--akcent); opacity:0; pointer-events:none}
.mapa-okolicy.widoczna .pin-glowna i::after{animation:tu-jestes 1.5s ease-out 3}
@keyframes tu-jestes{0%{transform:scale(1); opacity:.75} 100%{transform:scale(2.8); opacity:0}}
@media (prefers-reduced-motion:reduce){
  .mapa-okolicy.widoczna .krag-fala, .mapa-okolicy.widoczna .pin-glowna i::after{animation:none}
}
/* lista i mapa: wskazane miejsce się wyróżnia, reszta przygasa */
.pin{transition:opacity .25s ease}
.pin i{transition:transform .25s ease, background-color .25s ease}
.pin[data-miejsce]{cursor:pointer}
.mapa-okolicy.wybrana .pin[data-miejsce]:not(.aktywna){opacity:.3}
.pin.aktywna{z-index:2}
.pin.aktywna i{transform:scale(1.4); background:var(--akcent)}
.pin.aktywna b{box-shadow:0 0 0 2px var(--akcent), 0 4px 12px rgba(20,14,4,.2)}
.odleglosci li[data-miejsce]{cursor:pointer; transition:background-color .2s ease, transform .15s ease}
.odleglosci li.aktywna{background:var(--plyta-2)}
.pin-trzepowo{left:62.9%; top:50.0%}
.pin-przywidz{left:75.3%; top:40.7%}
.pin-bedomin{left:23.9%; top:81.5%}
.pin-wiezyca{left:23.9%; top:25.6%}
.pin-jezioro{left:42.8%; top:74.8%}   /* kąpielisko nad Jeziorem Lubańskim w Nowej Karczmie (OSM), 4,5 km drogą */
/* telefon: mapa ma ~335 px, a pinezki Przywidz, Trzepowo i Bacówka stoją co ~25 px w pionie.
   Niższe etykiety (22 zamiast 24,5 px) i podpis 10 km na okręgu pod kątem 35°, bo nad Wieżycą i obok jej etykiety brak miejsca. */
@media (max-width:899px){
  .pin b, .mapa-kierunek{font-size:12px; padding:5px 8px}
  .krag-podpis-10{left:88.6%; top:39.2%}
}

/* ================= OPINIE ================= */
.opinie{display:grid; gap:18px; grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): treść nie rozpycha strony */
/* najwęższe telefony (320 px, np. iPhone SE 1. gen.): ocena z gwiazdkami potrzebowała 306 px przy 280 miejsca
   i cała strona przewijała się w bok (audyt 27.09) */
@media (max-width:359px){
  .ocena .ocena-liczba b{font-size:48px}
  .ocena .gwiazdki-duze svg{width:22px; height:22px}
  .ocena{column-gap:12px}
}
.ocena{background:var(--plyta); border:1px solid var(--kreska); border-radius:var(--r-duzy);
  padding:24px; display:grid; gap:6px; align-content:start}
.ocena-liczba{display:flex; align-items:baseline; gap:10px}
.ocena-liczba b{font-size:clamp(56px,8vw,80px); font-weight:800; letter-spacing:-.04em; line-height:1}
.ocena-liczba span{color:var(--cichy); font-size:18px}
.ocena p{font-size:16.5px}
.ocena-fb{display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--kreska);
  color:var(--tekst); text-decoration:none; font-size:15px}
.ocena-fb:hover b{color:var(--akcent)}
.ocena-fb .ikona-marka{flex:0 0 auto; width:18px; height:18px; margin:0; vertical-align:0}
.cytaty{display:grid; gap:12px; align-content:start}
.cytat{margin:0; padding:18px 20px; background:var(--plyta); border:1px solid var(--kreska);
  border-radius:var(--r-sredni)}
.cytat blockquote{margin:0; font-size:17px; line-height:1.5}
.cytat figcaption{margin-top:8px; color:var(--cichy); font-size:14.5px}
.omnibus{color:var(--cichy); font-size:13.5px; margin-top:4px}
/* gwiazdki: szare pod spodem, bursztynowe na wierzchu przycięte do oceny (--ocena, domyślnie 5) */
.gwiazdki{position:relative; display:inline-flex; width:max-content; line-height:0; margin-bottom:10px}
.gwiazdki-puste, .gwiazdki-pelne{display:flex; gap:2px}
.gwiazdki-puste{color:var(--kreska)}
.gwiazdki-pelne{position:absolute; top:0; bottom:0; left:0; overflow:hidden; color:var(--gwiazdka);
  width:calc(var(--ocena, 5) / 5 * 100%)}
.gwiazdki svg{flex:0 0 auto; width:18px; height:18px}
.gwiazdki-duze{margin:12px 0 4px}
.gwiazdki-duze svg{width:26px; height:26px}
/* tylko notka pod opiniami: sama klasa .omnibus jest też w cenniku i tam ta reguła wpychała notkę na karty (24.09) */
@media (min-width:900px){ .opinie{grid-template-columns:.7fr 1.6fr; gap:28px} .opinie > .omnibus{grid-column:2; margin-top:-14px} }

/* ================= KONTAKT ================= */
.kontakt{background:var(--plyta); border:1px solid var(--kreska); border-radius:var(--r-duzy);
  padding:clamp(18px,4vw,44px); display:grid; gap:24px; box-shadow:var(--cien)}
.kontakt h2{font-size:clamp(27px,3.6vw,40px); font-weight:800}
.kontakt-lewa{display:grid; gap:18px}
.gospodyni{display:flex; align-items:center; gap:16px}
/* >>> ZDJĘCIE MAMY: podmień <span class="zdjecie-mamy ..."> na
   <img class="zdjecie-mamy ..." src="foto/mama.jpg" alt="Jola, gospodyni Bacówki"> <<<
   104 px na telefonie, 128 px na komputerze: stoi przy tym, do kogo się dzwoni, więc ma być wyraźna (wcześniej 80 px) */
.zdjecie-mamy{flex:0 0 auto; width:104px; height:104px; border-radius:50%; object-fit:cover}
@media (min-width:900px){ .zdjecie-mamy{width:128px; height:128px} }
/* prawdziwe zdjęcie: ta sama obwódka co portret Bacy */
img.zdjecie-mamy{border:4px solid var(--plyta); box-shadow:0 0 0 1px var(--kreska), var(--cien)}
span.zdjecie-mamy{display:grid; place-items:center; background:var(--plyta-2);
  border:2px dashed var(--akcent); color:var(--cichy); font-size:14px; font-weight:600; text-align:center; line-height:1.15}
.gospodyni b{display:block; font-size:18px}
.gospodyni div span{color:var(--cichy); font-size:15px}
.od-gospodyni{margin:0; font-size:17px; line-height:1.55; color:var(--tekst); max-width:44ch}
/* dane kontaktowe jako wiersze z ikoną, jak karta kontaktu w telefonie */
.kontakt-lista{list-style:none; margin:0; padding:0}
.kontakt-lista li + li{border-top:1px solid var(--kreska)}
.kontakt-lista a{display:flex; align-items:center; gap:12px; margin:0 -10px; padding:14px 10px; border-radius:11px;
  color:var(--tekst); text-decoration:none; transition:background-color .15s ease, transform .15s ease}
.kontakt-lista a:active{background:var(--plyta-2)}
.kontakt-lista a:hover b{color:var(--akcent)}
.kontakt-lista .ikona{flex:0 0 auto; width:24px; height:24px; color:var(--akcent)}
.kontakt-lista .tekst{display:grid; gap:1px; min-width:0; flex:1 1 auto}
.kontakt-lista b{font-size:16px; font-weight:650; overflow-wrap:anywhere}
.kontakt-lista small{color:var(--cichy); font-size:14px}
.kontakt-lista .strzalka{flex:0 0 auto; width:16px; height:16px; color:var(--cichy)}
@media (min-width:900px){ .kontakt{grid-template-columns:1.1fr 1fr; align-items:center; gap:40px} }

/* ================= STOPKA ================= */
.stopka{padding-block:0 calc(96px + env(safe-area-inset-bottom, 0px)); color:var(--cichy);
  font-size:14.5px; display:flex; flex-wrap:wrap; justify-content:center; text-align:center; gap:10px 26px}
.stopka a{color:var(--cichy)}
/* telefon i wąskie okno: koniec strony jako jeden podpis w jednej osi (25.09): przerywnik, pod nim nazwa i adres,
   pod nimi linki; bez linii i bez małej margerytki (stała 250 px pod dużą i powtarzała ten sam kwiat).
   Komputer (od 900 px) zostaje przy dawnym układzie: linia, małe logo, stopka do lewej (decyzja Igora). */
.stopka-marka{flex-basis:100%; display:grid; justify-items:center; gap:2px; margin-bottom:4px}
.stopka-marka .znak-marki{display:none}
.stopka-marka b{color:var(--tekst); font-weight:750}
.stopka-marka span{color:var(--cichy); font-size:13.5px}
@media (min-width:900px){
  .stopka{padding-block:30px 40px; justify-content:flex-start; text-align:left; border-top:1px solid var(--kreska); margin-top:10px}
  .stopka-marka{grid-template-columns:28px auto; justify-content:start; justify-items:start; column-gap:10px; row-gap:0; align-items:center}
  .stopka-marka .znak-marki{display:block; grid-column:1; grid-row:1 / span 2; width:28px; height:28px}
  .stopka-marka b, .stopka-marka span:not(.znak-marki){grid-column:2}
}
/* telefon: linki w stopce i „Przeczytaj wszystkie” mają cel dotyku 44 px wysokości, tekst się nie zmienia */
@media (max-width:899px){
  .stopka a, .ocena .link-strzalka{display:inline-block; padding-block:11px; margin-block:-11px}
  .stopka{row-gap:22px}
}
.ikona-marka{width:16px; height:16px; vertical-align:-3px; margin-right:6px}

/* ================= PASEK POD KCIUKIEM (telefon) =================
   Strona główna: pojawia się po zjechaniu z hero. Podstrony: widoczny zawsze. */
/* przyciski pod kciukiem: dwie pływające pastylki nad treścią, bez paska na całą szerokość (24.09, Igor:
   „same buttony wystarczą”). „Napisz SMS” szklana, „Zadzwoń” w kolorze akcentu. Treść pod nimi się rozmywa. */
.pasek-dolny{position:fixed; left:12px; right:12px; max-width:440px; margin-inline:auto; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); z-index:48;
  display:grid; grid-template-columns:1fr 1.2fr; gap:8px;
  /* schowany: przesunięty o własną wysokość, odstęp od dołu i obszar pod paskiem domowym, z zapasem;
     bez obszaru bezpiecznego przycisk wystawał na iPhonie o kilkanaście punktów */
  transform:translateY(calc(100% + 40px + env(safe-area-inset-bottom, 0px))); transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.pasek-dolny .przycisk{height:52px; padding-inline:14px; box-shadow:0 12px 28px -10px rgba(20,14,4,.45)}
/* pełne tło zamiast szklanego rozmycia: iPhone przy „odbiciu” na końcu strony przycina pływające elementy
   z backdrop-filter na granicy dokumentu (błąd WebKit) i znikała dolna połowa przycisku (24.09, zrzut Igora) */
.pasek-dolny .przycisk-obrys{background:var(--plyta); border:1px solid var(--kreska); color:var(--tekst)}
.pasek-dolny .przycisk-obrys .ikona{color:var(--akcent)}
body[data-po-hero="tak"] .pasek-dolny, .pasek-dolny.zawsze{transform:none}
@media (min-width:900px){ .pasek-dolny{display:none} }
@media (prefers-reduced-motion:reduce){ .pasek-dolny,.przycisk{transition:none} }

/* ================= PODSTRONY: wspólne ================= */
.podstrona-czolo{padding-block:clamp(28px,6vw,110px) clamp(18px,3vw,30px); display:grid; gap:12px; max-width:760px}
.podstrona-czolo h1{font-size:clamp(34px,5.4vw,58px); font-weight:800; letter-spacing:-.035em}
.podstrona-czolo p{color:var(--cichy); font-size:18px}
/* na komputerze menu jest przyklejone u góry i ma ok. 72 px: tytuł musi zacząć się pod nim na każdej szerokości */
/* telefon: tytuł pod przyciskiem Menu, komputer: pod paskiem nawigacji */
/* telefon: tytuł 24 px pod pływającym przyciskiem Menu (kończy się na 56 px); 25.09 było 76 px, a w aplikacji Claude
   tytuł wchodził pod jej pasek, bo nie liczył bezpiecznego marginesu */
@media (max-width:899px){ .podstrona-czolo{padding-top:calc(82px + env(safe-area-inset-top, 0px))} }
@media (min-width:900px){ .podstrona-czolo{padding-top:120px} }
.bez-lamania{white-space:nowrap}
/* .tylko-podglad znika przy budowie wersji produkcyjnej; .projekt-prawny zostaje, dopóki ktoś go świadomie nie usunie */
.tylko-podglad, .projekt-prawny{background:var(--plyta-2); border:2px dashed var(--akcent); border-radius:var(--r-sredni);
  padding:14px 18px; font-size:15px; max-width:760px}
.tylko-podglad b, .projekt-prawny b{display:block; margin-bottom:2px}
.luka{display:inline-block; min-width:2.6em; border-bottom:2px dashed var(--akcent); text-align:center}

/* ================= GALERIA ================= */
.filtr{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:4px -20px 20px;
  padding:4px 20px}
.filtr::-webkit-scrollbar{display:none}
.filtr button{flex:0 0 auto; font:inherit; font-size:15px; font-weight:650; padding:10px 16px;
  border-radius:999px; border:1px solid var(--kreska); background:var(--plyta); color:var(--tekst); cursor:pointer}
.filtr button span{color:var(--cichy); font-weight:500; margin-left:4px}
.filtr button[aria-pressed="true"]{background:var(--akcent); border-color:var(--akcent); color:var(--na-akcencie)}
.filtr button[aria-pressed="true"] span{color:var(--na-akcencie)}
/* galeria w grupach tematycznych: śródtytuł jak nazwy grup zasad w cenniku (mały, przygaszony) */
.galeria-grupa + .galeria-grupa{margin-top:28px}
.galeria-grupa h2{font-size:14.5px; font-weight:650; letter-spacing:0; color:var(--cichy); margin:0 0 10px 2px}
@media (min-width:760px){ .galeria-grupa + .galeria-grupa{margin-top:36px} .galeria-grupa h2{margin-bottom:12px} }
.foto{margin:0}
/* od 600 px: rzędy wyrównane do obu krawędzi, jak w Zdjęciach. Kafelek rośnie proporcjonalnie do swoich proporcji
   (--r = szerokość/wysokość, z generatora), więc w rzędzie wszystkie mają równą wysokość, a kolejność czyta się od
   lewej do prawej. Kolumny (columns) zostawiały w małych grupach puste kolumny i nierówne dna (27.09). Ostatni rząd
   nie rozciąga się dzięki niewidocznemu wypełniaczowi. */
@media (min-width:600px){
  .siatka{display:flex; flex-wrap:wrap; gap:10px; --wys:190px}
  .siatka::after{content:""; flex-grow:1000000}
  .foto{flex:var(--r, 1.333) 1 calc(var(--r, 1.333) * var(--wys)); min-width:0}
  .foto img{aspect-ratio:var(--r, 1.333)}
  .foto.film img{height:auto; object-fit:cover; object-position:50% 45%}   /* plakat 9:16 w kafelku 3:4 */
}
@media (min-width:760px){ .siatka{gap:14px; --wys:210px} }
@media (min-width:1100px){ .siatka{--wys:230px} }
.foto button{display:block; width:100%; padding:0; border:0; background:var(--plyta-2);
  border-radius:var(--r-maly); overflow:hidden; cursor:zoom-in; transition:transform .15s ease}
.foto img{width:100%; height:auto; transition:transform .3s ease}
.foto button:hover img{transform:scale(1.03)}
/* kafelek filmu w galerii: znak odtwarzania na środku i czas w rogu, jak wideo w Zdjęciach na iPhonie */
.foto.film button{position:relative}
.film-znak{position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; display:grid; place-items:center;
  border-radius:50%; background:rgba(20,14,4,.55); border:1px solid rgba(255,255,255,.4); color:#FFFFFF;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.film-znak svg{margin-left:3px}
.film-czas{position:absolute; right:8px; bottom:8px; padding:2px 8px; border-radius:999px; background:rgba(20,14,4,.55);
  color:#FFFFFF; font-size:12.5px; font-weight:650; font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .foto img{transition:none} .foto button:hover img{transform:none} }
/* telefon: galeria jak Zdjęcia w iPhonie, trzy kolumny kwadratów od krawędzi do krawędzi, 2 px odstępu
   (24.09, z wersji próbnej) */
@media (max-width:599px){
  .siatka{columns:auto; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2px; margin-inline:-20px;
    grid-auto-flow:dense}   /* drugi film (2 na 2) w środku siatki: bez dziury przed nim (27.09) */
  .foto{margin:0}
  .foto button{border-radius:0; aspect-ratio:1/1; height:100%}
  .foto img{width:100%; height:100%; object-fit:cover}
  .siatka .foto.film{grid-column:span 2; grid-row:span 2}   /* film: kafelek 2 na 2, pierwszy w siatce */
  .siatka .foto.film-prawo{grid-column:2 / span 2}   /* „Przyjazd” po prawej, dla równowagi z filmem w „Domki” */
  .foto.film img{object-position:45% 55%}
  .foto button:active{transform:none; opacity:.75}
}
.podglad{position:fixed; inset:0; width:auto; height:auto; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:#0E0C09; color:#F2EBDD; overscroll-behavior:contain}
/* okno rozpięte na cały ekran (inset:0), nie na wyliczone 100dvh, które w ramce podglądu nie pokrywało dołu;
   strona pod oknem stoi, a fokus trzyma samo okno bez obwódki (przycisk „Zamknij” nie wygląda na wybrany) */
html:has(dialog.podglad[open]){overflow:hidden}
.podglad:focus, .podglad:focus-visible{outline:none}
.podglad::backdrop{background:#0E0C09}
.podglad[open]{display:grid; grid-template-rows:auto 1fr auto; animation:pojaw .22s ease-out}
.podglad[open]::backdrop{animation:pojaw .22s ease-out}
.podglad figure img{transition:opacity .25s ease}
.podglad figure img.laduje{opacity:0}
@keyframes pojaw{from{opacity:0}}
.podglad-gora{display:flex; justify-content:space-between; align-items:center;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 8px}
.podglad-gora span{font-size:14.5px; color:#C9C1B2; font-variant-numeric:tabular-nums}
.podglad figure{margin:0; display:grid; place-items:center; min-height:0; padding:0 12px}
.podglad figure img{max-width:100%; max-height:calc(100dvh - 170px); width:auto; height:auto;
  object-fit:contain; border-radius:12px}
.podglad figcaption{text-align:center; font-size:15.5px; padding:12px 16px 0; text-wrap:balance}
.podglad-dol{display:flex; justify-content:center; gap:12px; padding:12px 16px calc(16px + env(safe-area-inset-bottom, 0px))}
.podglad button{font:inherit; font-size:15.5px; font-weight:650; color:#F2EBDD; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:11px 20px; cursor:pointer}
.podglad button:hover{background:rgba(255,255,255,.18)}

/* galeria: karta pożegnalna po ostatnim zdjęciu w podglądzie (napis z bramy i kontakt); okno zawsze ciemne */
.podglad-koniec{display:none}
.podglad-zdjec.na-koncu figure{display:none}
.podglad-zdjec.na-koncu .podglad-koniec{display:grid; align-content:center; justify-items:center; gap:12px; min-height:0;
  padding:0 24px; text-align:center; animation:pojaw .3s ease-out}
.podglad-koniec img{width:auto; height:auto; max-width:min(58vw, 280px); max-height:calc(100dvh - 420px); border-radius:12px; margin-bottom:6px}
.podglad-koniec h2{margin:0; font-size:clamp(30px, 8vw, 42px); font-weight:800; letter-spacing:-.025em; color:#F2EBDD}
.podglad-koniec p{margin:0; max-width:32ch; color:#C9C1B2; font-size:16px; text-wrap:balance}
.podglad-koniec-kontakt{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px}
.podglad-link{display:inline-flex; align-items:center; font-size:15.5px; font-weight:650; color:#F2EBDD; text-decoration:none;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:11px 20px}
.podglad-link:hover{background:rgba(255,255,255,.18)}
.podglad-zdjec.bez-bramy .podglad-koniec img{display:none}
@media (max-height:620px){ .podglad-koniec img{display:none} }

/* ================= CENNIK ================= */
.sezony{display:grid; gap:14px}
@media (min-width:760px){ .sezony{grid-template-columns:1fr 1fr} }
.karta-ceny{background:var(--plyta); border:1px solid var(--kreska); border-radius:var(--r-duzy); padding:22px 24px}
.karta-ceny h3{font-size:21px; font-weight:800}
.karta-ceny .kiedy{color:var(--cichy); font-size:15px; margin-top:4px}
.karta-ceny dl{display:grid; grid-template-columns:1fr auto; gap:10px 16px; margin:16px 0 0}
.karta-ceny dt{color:var(--cichy); font-size:16px}
.karta-ceny dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.cennik-blok{margin-top:clamp(36px,5vw,56px)}
.cennik-blok > h2{font-size:clamp(24px,3vw,32px); font-weight:800; margin-bottom:16px}
/* rezerwacja jako oś: numery połączone linią, w jednej karcie (24.09; wcześniej cztery wysokie karty) */
.kroki{list-style:none; margin:0; padding:20px 20px 4px; display:grid; counter-reset:krok;
  background:var(--plyta); border:1px solid var(--kreska); border-radius:var(--r-sredni)}
.kroki li{counter-increment:krok; position:relative; padding:0 0 20px 46px}
.kroki li::before{content:counter(krok); position:absolute; left:0; top:-2px; display:grid; place-items:center; width:30px; height:30px;
  border-radius:50%; background:var(--akcent); color:var(--na-akcencie); font-weight:800; font-size:15px}
.kroki li::after{content:""; position:absolute; left:14px; top:32px; bottom:2px; width:2px; border-radius:2px; background:var(--kreska)}
.kroki li:last-child::after{display:none}
.kroki b{display:block; font-size:17px}
.kroki span{color:var(--cichy); font-size:15px}
/* dane do przelewu w kroku 2 (decyzja D4, 25.09): etykieta obok wartości, przycisk kopiowania pod spodem */
.przelew{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; align-items:baseline; margin-top:10px;
  padding:12px 14px; background:var(--plyta-2); border-radius:var(--r-maly)}
.kroki .przelew span{font-size:14px}
.kroki .przelew b{display:block; font-size:15px; font-weight:650; color:var(--tekst)}
.przelew .nr-konta{font-variant-numeric:tabular-nums}
/* numer łamie się tylko między dwiema grupami cyfr, jak w aplikacjach bankowych */
.kroki .przelew .nr-konta span{display:inline-block; white-space:nowrap; color:inherit; font-size:inherit}
/* telefon: etykieta nad wartością, żeby numer miał całą szerokość */
@media (max-width:599px){ .przelew{grid-template-columns:minmax(0,1fr); gap:0} .kroki .przelew span:not(.nr-konta span){margin-top:6px} .kroki .przelew > span:first-child{margin-top:0} }
.przelew .kopiuj{grid-column:1 / -1; justify-self:start; margin-top:6px; min-height:44px; padding:0 16px; font:inherit; font-size:14.5px;
  font-weight:650; color:var(--akcent); background:var(--plyta); border:1px solid var(--kreska); border-radius:999px; cursor:pointer}
.przelew .kopiuj:active{transform:scale(.97)}
/* „Jak zarezerwować” na przewijaniu: gdy krok mija linię na 60% wysokości ekranu, jego numer się zapala, tytuł
   nabiera koloru, a odcinek do następnego kroku wypełnia się chabrem (--p od 0 do 1); w górę wszystko się cofa.
   Steruje skrypt cennika (klasa .ozywione), bo animacji sterowanych przewijaniem w CSS nie obsługiwał iPhone
   Igora (25.09). Bez skryptu i przy „ogranicz ruch” kroki są od razu zapalone, jak wyżej. Opis kroku zawsze czytelny. */
.kroki.ozywione li::before{transition:background-color .35s ease, color .35s ease, box-shadow .35s ease, transform .4s cubic-bezier(.3,1.6,.5,1)}
.kroki.ozywione li:not(.zapalony)::before{background:var(--plyta); color:var(--cichy); box-shadow:inset 0 0 0 2px var(--kreska); transform:scale(.88)}
.kroki.ozywione li::after{background:linear-gradient(var(--akcent), var(--akcent)) no-repeat top / 100% calc(var(--p, 0) * 100%), var(--kreska)}
.kroki.ozywione > li > b{transition:color .35s ease, transform .35s ease}
.kroki.ozywione > li:not(.zapalony) > b{color:var(--cichy); transform:translateX(6px)}
.udogodnienia{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px;
  margin:0; padding:0; list-style:none}
.udogodnienia li{display:flex; align-items:center; gap:12px; padding:13px 14px; background:linear-gradient(160deg, var(--plyta), var(--kafel-cieply));
  border:1px solid var(--kreska); border-radius:var(--r-maly); font-size:15px; font-weight:600; line-height:1.3}
.udogodnienia .ikona{flex:0 0 auto; width:24px; height:24px; color:var(--akcent)}
@media (min-width:700px){ .udogodnienia{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))} }
.zasady-lista{list-style:none; margin:0; padding:0; background:var(--plyta); border:1px solid var(--kreska);
  border-radius:var(--r-sredni); overflow:hidden; max-width:820px}
.zasady-lista li{display:flex; justify-content:space-between; gap:18px; padding:14px 18px;
  border-top:1px solid var(--kreska); font-size:16px}
.zasady-lista li:first-child{border-top:0}
.zasady-lista .etykieta{display:flex; align-items:flex-start; gap:12px}
.zasady-lista .etykieta .ikona{flex:0 0 auto; width:22px; height:22px; margin-top:1px; color:var(--akcent)}
.zasady-lista li b{font-weight:650; text-align:right; flex:0 0 auto; max-width:55%}
/* blok z własną interlinią: jako zwykły dopisek w wierszu brał 16 px × 1,55 z rodzica (jak podpisy w „Na terenie”) */
.zasady-lista small{display:block; color:var(--cichy); font-size:14.5px; line-height:1.4; margin-top:2px}
.cennik-podtytul{font-size:14.5px; font-weight:650; color:var(--cichy); margin:22px 0 8px 4px}

/* ================= TEKSTY PRAWNE ================= */
.prawne{max-width:760px}
/* regulamin: spis treści z nazwami paragrafów w panelu, dwie kolumny czytane z góry w dół (29.09; wcześniej
   13 kółek z samymi numerami) */
.spis-tresci{max-width:760px; margin:4px 0 36px; padding:12px 14px; background:var(--plyta);
  border:1px solid var(--kreska); border-radius:var(--r-sredni)}
/* kolumny (columns), nie siatka: przy siatce długi tytuł §10 wydłużał cały wiersz i obok §3 zostawała dziura */
.spis-tresci ol{list-style:none; margin:0; padding:0; columns:2; column-gap:14px}
.spis-tresci li{break-inside:avoid}
.spis-tresci a{display:flex; gap:6px; padding:7px 8px; border-radius:calc(var(--r-sredni) - 12px);
  font-size:15px; line-height:1.3; color:var(--tekst); text-decoration:none}
.spis-tresci a:hover{background:var(--plyta-2); color:var(--akcent)}
.spis-tresci .par{flex:0 0 2.4em; color:var(--akcent); font-weight:700; font-variant-numeric:tabular-nums}
@media (max-width:599px){ .spis-tresci{padding:6px 8px} .spis-tresci ol{columns:1} .spis-tresci a{font-size:15px; padding:6px 6px} }
/* paragrafy: każdy w bloku oddzielonym cienką linią, numery ustępów w kolorze akcentu */
.prawne .paragraf + .paragraf{margin-top:28px; padding-top:24px; border-top:1px solid var(--kreska)}
.prawne h2{font-size:clamp(21px,2.6vw,26px); font-weight:800; margin:0 0 12px; letter-spacing:-.02em}
.prawne h2 .par{color:var(--akcent); margin-right:2px; font-variant-numeric:tabular-nums}
.prawne h3{font-size:18px; font-weight:750; margin:22px 0 8px}
.prawne p{margin:0 0 12px}
.prawne ol, .prawne ul{margin:0 0 12px; padding-left:24px; display:grid; gap:8px}
.prawne ol ol{list-style:lower-alpha; margin-top:8px}
.prawne li::marker{color:var(--akcent); font-weight:700}
.prawne ol ol > li::marker{color:var(--cichy); font-weight:600}
.druk-naglowek, .tylko-druk{display:none}
.prawne .stopka-dok{color:var(--cichy); font-size:15px; margin-top:30px}

/* ================= 404 ================= */
.blad{display:grid; gap:28px; padding:88px 0 40px}
.blad-tekst{display:grid; gap:14px; max-width:620px}
.blad-foto{width:100%; max-width:420px; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-duzy)}
@media (min-width:900px){
  .blad{min-height:70svh; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; padding-top:120px}
  .blad-foto{order:2; max-width:none; aspect-ratio:4/5}
}
.blad h1{font-size:clamp(34px,6vw,60px); font-weight:800; letter-spacing:-.035em}
.blad p{color:var(--cichy); font-size:18px}
.blad .akcje{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}

/* górna krawędź na telefonie: treść rozmywa się pod pływającym przyciskiem Menu, jak w iOS, zamiast wjeżdżać
   pod niego ostro. Samo rozmycie tego, co pod spodem (bez koloru), więc działa też na niebie w scenie dnia.
   Tylko gdy przycisk jest widoczny: na stronie głównej po zjechaniu ze zdjęcia, na podstronach zawsze. */
@media (max-width:899px){
  body:not([data-po-hero="nie"])::before{content:""; position:fixed; z-index:45; top:0; left:0; right:0; pointer-events:none;
    height:calc(64px + env(safe-area-inset-top, 0px));
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    -webkit-mask-image:linear-gradient(#000 45%, transparent); mask-image:linear-gradient(#000 45%, transparent)}
  /* to samo przy dolnej krawędzi, pod pływającymi przyciskami */
  body:not([data-po-hero="nie"])::after{content:""; position:fixed; z-index:39; bottom:0; left:0; right:0; pointer-events:none;
    height:calc(84px + env(safe-area-inset-bottom, 0px));
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    -webkit-mask-image:linear-gradient(transparent, #000 60%); mask-image:linear-gradient(transparent, #000 60%)}
}
/* ================= TELEFON JAK APLIKACJA (do 599 px) =================
   Audyt z 24.09: na telefonie strona wyglądała jak strona, nie jak aplikacja. Zasady:
   zdjęcia i mapa od krawędzi do krawędzi (bez zaokrągleń, bo dotykają brzegu ekranu),
   karty tylko tam, gdzie grupują listę (jak w Ustawieniach), fakty jako kafelki,
   opinie w pasie przewijanym w bok (jak oceny w App Store), gęstszy rytm sekcji. */
@media (max-width:599px){
  .sekcja{padding-block:36px}
  /* fakty o domkach: kafelki w dwóch kolumnach zamiast siedmiu pastylek w pięciu rzędach */
  .chipy{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .chipy li{border-radius:var(--r-maly); padding:12px 12px; gap:10px; font-size:14.5px; line-height:1.25; align-items:center}
  /* ostatni kafelek na całą szerokość: treść na środku, żeby nie wisiała przy lewej krawędzi (25.09) */
  .chipy li:last-child:nth-child(odd){grid-column:1 / -1; justify-content:center}
  .chipy .ikona{width:22px; height:22px}
  /* zdjęcia od krawędzi do krawędzi */
  .domki-wzor .domki-media{margin-inline:-20px; border-radius:0}
  .domki-wzor figcaption{margin-top:8px}
  .mapa-ramka{margin-inline:-20px; border-radius:0; border-inline:0}
  /* grupy: bez karty; zdjęcie na całą szerokość, tekst na tle strony; przyciski zostają jeden pod drugim, bo obok siebie nie mieszczą się przy 390 px */
  .grupy{background:none; border:0; box-shadow:none; padding:0; gap:18px; grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): inaczej zdjęcie szersze o 40 px rozpycha kolumnę i całą stronę */
  .grupy > img{margin-inline:-20px; width:calc(100% + 40px); max-width:none; border-radius:0}
  .grupy-tekst{padding:0}
  /* opinie: ocena w jednym wierszu (liczba po lewej, gwiazdki i liczba opinii po prawej) */
  .ocena{grid-template-columns:auto 1fr; column-gap:16px; row-gap:4px; align-items:center; padding:20px}
  .ocena-liczba{grid-row:span 2}
  .ocena .gwiazdki-duze{margin:0; align-self:end}
  .ocena p{align-self:start; font-size:15.5px; color:var(--cichy)}
  .ocena .link-strzalka, .ocena-fb{grid-column:1 / -1}
  .ocena .link-strzalka{margin-top:10px}
  /* cytaty: pas przewijany w bok, od krawędzi do krawędzi, następna karta wystaje */
  .cytaty{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:-20px; padding-inline:20px; scroll-padding-inline:20px; padding-bottom:4px}
  .cytaty::-webkit-scrollbar{display:none}
  .cytat{flex:0 0 84%; scroll-snap-align:start; display:flex; flex-direction:column}
  .cytat figcaption{margin-top:auto; padding-top:10px}
  /* kontakt: bez wielkiej karty; gospodyni na tle strony, dane jako lista pogrupowana jak w Ustawieniach */
  .kontakt{background:none; border:0; box-shadow:none; padding:0}
  .kontakt-lista{background:var(--plyta); border:1px solid var(--kreska); border-radius:var(--r-sredni); padding:0 16px}
  /* większe karty „W środku” (kwadrat, prawie cała szerokość) i wyższe zdjęcie wzoru (24.09, z wersji próbnej) */
  .wnetrze{flex-basis:88%}
  .wnetrze img{aspect-ratio:1/1}
  .domki-wzor img{aspect-ratio:4/5}
}

/* ================= JAK W APLIKACJI: przejścia i dotyk ================= */
/* przejścia między stronami: stara strona łagodnie przechodzi w nową zamiast białego mignięcia
   (Chrome, Edge, Safari 18.2+; gdzie indziej zwykłe przejście). Pasek nawigacji i przyciski pod kciukiem
   mają własne nazwy, więc nie migają razem ze stroną, tylko stoją albo płynnie się przesuwają. */
@view-transition{navigation:auto}
.nawigacja{view-transition-name:nawigacja}
.pasek-dolny{view-transition-name:przyciski-dol}
::view-transition-old(root), ::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} }
/* zdjęcia: do czasu wczytania w ich miejscu jest ich uśredniony kolor (tło w znaczniku, narzedzia/kolory.py),
   a po wczytaniu obraz przez pół sekundy wyostrza się z lekkiego rozmycia (klasę dodaje skrypt) */
img.weszlo{animation:wyostrz .5s ease-out}
@keyframes wyostrz{from{filter:blur(4px) saturate(.6)}}
@media (prefers-reduced-motion:reduce){ img.weszlo{animation:none} }
/* zdjęcia na stronie głównej otwierają się na cały ekran (skrypt strony głównej, przeglądarka .podglad z galerii) */
#w-srodku .wnetrze img, #domki .domki-wzor img, #grupy .grupy > img, .teren-foto{cursor:zoom-in}
/* stuknięcie: karta lekko się wciska, jak w iOS (Safari pokazuje :active tylko przy nasłuchu touchstart,
   który jest w skrypcie każdej strony) */
.wiersz, .kontakt-lista a, .pytanie summary, .foto button, .odleglosci li[data-miejsce], .karta-ceny{-webkit-tap-highlight-color:transparent}
.pytanie summary{transition:background-color .15s ease, transform .15s ease}
.wiersz:active, .kontakt-lista a:active, .foto button:active, .odleglosci li[data-miejsce]:active{transform:scale(.98)}
.pytanie summary:active{transform:scale(.99)}
@media (prefers-reduced-motion:reduce){
  .wiersz:active, .kontakt-lista a:active, .foto button:active, .odleglosci li[data-miejsce]:active, .pytanie summary:active{transform:none}
}
/* cennik na telefonie: przełącznik „Poza sezonem / W sezonie” zamiast dwóch kart jedna pod drugą (jak w iOS);
   od 760 px karty stoją obok siebie i przełącznika nie ma. Bez skryptu przełącznik jest ukryty, karty obie. */
.przelacznik-sezonu{position:relative; display:grid; grid-template-columns:1fr 1fr; margin:0 0 14px; padding:4px;
  background:var(--plyta-2); border-radius:999px}
.przelacznik-sezonu::before{content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  background:var(--plyta); border-radius:999px; box-shadow:0 2px 8px rgba(40,30,10,.14); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.przelacznik-sezonu[data-wybrany="1"]::before{transform:translateX(100%)}
.przelacznik-sezonu button{position:relative; z-index:1; height:40px; border:0; background:none; border-radius:999px;
  font:inherit; font-size:15px; font-weight:650; color:var(--cichy); cursor:pointer; -webkit-tap-highlight-color:transparent}
.przelacznik-sezonu button[aria-selected="true"]{color:var(--tekst)}
@media (min-width:760px){ .przelacznik-sezonu{display:none} }
@media (max-width:759px){ .sezony.z-przelacznikiem .karta-ceny[hidden]{display:none} .sezony.z-przelacznikiem .karta-ceny{animation:karta-sezonu .3s ease both}
  .sezony.z-przelacznikiem .karta-ceny h3{display:none} }   /* nazwa sezonu jest już na przełączniku (karta ma aria-labelledby) */
@keyframes karta-sezonu{from{opacity:0; transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){ .przelacznik-sezonu::before{transition:none} .sezony.z-przelacznikiem .karta-ceny{animation:none} }
/* ================= CENNIK: układ ================= */
/* jedna wyśrodkowana kolumna jak pytania na stronie głównej: karty, listy i oś mają tę samą szerokość
   (wcześniej karty na całą szerokość, a listy na 60%, z pustką po prawej) */
.cennik{max-width:800px}
/* regulamin i polityka: ta sama wyśrodkowana kolumna co cennik (wcześniej tekst stał przy lewym brzegu, z pustką po prawej) */
.dokument{max-width:800px}
/* skróty do sekcji pod tytułem: długa strona, jak zakładki w aplikacji; przewijane w bok na telefonie */
.skroty{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:4px -20px 0; padding:0 20px 4px}
.skroty::-webkit-scrollbar{display:none}
.skroty a{flex:0 0 auto; padding:9px 15px; border-radius:999px; background:var(--plyta-2); color:var(--tekst);
  font-size:14.5px; font-weight:650; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:transform .15s ease, background-color .15s ease}
.skroty a:active{transform:scale(.96)}
@media (hover:hover){ .skroty a:hover{background:color-mix(in srgb, var(--akcent) 12%, var(--plyta-2))} }
@media (min-width:800px){ .skroty{margin-inline:0; padding-inline:0; flex-wrap:wrap} }
/* zasady w czterech krótkich grupach z nagłówkami, jak w Ustawieniach iPhone'a (wcześniej 10 wierszy jednym ciągiem) */
.grupy-zasad{display:grid; gap:20px}
.grupy-zasad h3{font-size:14.5px; font-weight:650; color:var(--cichy); margin:0 0 8px 4px}
/* „W cenie” w kolumnie cennika: dwie kolumny wszędzie (10 kafelków = 5 równych rzędów; po trzy zostawał jeden sam) */
.cennik .udogodnienia{grid-template-columns:repeat(2, minmax(0,1fr))}

/* ============ ORNAMENTY ============
   Motywy z medalionu na szczycie Bociana (SVG z wzor/fragmenty.py, wstawia je narzedzia/podstrony.py).
   Proste i wyraźne, najwyżej jeden na sekcję (25.09). Motyw zależy od miejsca: na rogu karty dla grup
   margerytka, z boku przy tytule „Na terenie” róża, duży tulipan tam, gdzie ma miejsce (margines obok pytań,
   nagłówek cennika), na końcu strony przerywnik. Odpadły: gałązki i bukiet (zbyt złożone), wąski tulipan przy
   tytule (wątły przy okrągłych kwiatach), margerytka na rogu zdjęcia domków i róża przy „Okolicy” (decyzja 25.09). */
:root{--o-niebo:#93ADE0; --o-blekit:#6F86C6; --o-zolc:#E9CD74; --o-lisc:#74B89E; --o-jagoda:#B24E5C; --o-kreska:#3B342C}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --o-niebo:#9DB5EA; --o-blekit:#7F95D6; --o-zolc:#E6CB72; --o-lisc:#7CC3A7; --o-jagoda:#D06A78; --o-kreska:#D8CDBB} }
:root[data-theme="dark"]{--o-niebo:#9DB5EA; --o-blekit:#7F95D6; --o-zolc:#E6CB72; --o-lisc:#7CC3A7; --o-jagoda:#D06A78; --o-kreska:#D8CDBB}
.ornament{display:block; flex:none; pointer-events:none}
.ornament svg{display:block; height:100%; width:auto}

/* z boku: prawy górny róg sekcji, na wysokości tytułu; na węższym ekranie nagłówek robi mu miejsce */
#teren, #pytania, .podstrona-czolo{position:relative}
.orn-bok{position:absolute; z-index:1; right:20px; top:clamp(44px,6vw,84px); height:clamp(96px, 10vw, 132px)}
@media (max-width:899px){ .sekcja:has(> .orn-bok, > .pytania-obok > .orn-bok) .naglowek{padding-right:clamp(76px, 17vw, 120px)} }
@media (max-width:599px){ .orn-bok{top:30px; right:14px; height:84px} }
/* pytania: od 1100 px duży tulipan na lewym marginesie, obok listy (lista ma 760 px i stoi na środku) */
@media (min-width:1100px){ .pytania-obok{position:relative}
  .orn-faq{top:50%; right:calc(50% + 380px + 40px); height:230px; transform:translateY(-50%)} }
/* cennik: tulipan przy prawej krawędzi nagłówka, na wysokości tytułu i opisu */
/* w nagłówku podstrony ornament stoi w drugiej kolumnie, na środku wysokości tytułu i wstępu (jak tulipan przy pytaniach) */
.podstrona-czolo:has(> .orn-bok){grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(24px,6vw,40px)}
.podstrona-czolo > :not(.orn-bok){grid-column:1}
.podstrona-czolo > .orn-bok{position:static; grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:end}

/* na rogu: kwiat zahacza o róg karty dla grup */
.grupy{position:relative}
.orn-pieczatka{position:absolute; z-index:1; width:104px; height:104px; top:-40px; left:-6px; transform:rotate(-14deg)}
/* karta dla grup: od 1200 px pełny rozmiar i wysunięcie w lewo, ale nie dalej niż do krawędzi ekranu
   (karta stoi 20 px od brzegu, dopóki okno nie jest szersze niż 1200 px) */
@media (min-width:1200px){ .orn-pieczatka{width:124px; height:124px; top:-46px; left:clamp(-42px, calc(-12px - (100vw - 1200px) / 2), -6px)} }
/* 900–1199 px: karta jest niższa i tytuł podchodzi pod kwiat, więc tekst w karcie schodzi niżej */
@media (min-width:900px) and (max-width:1199px){ .grupy-tekst{padding-top:52px} }
/* od 1200 px kwiat jest większy (124 px): tytuł schodzi niżej, żeby płatki go nie dotykały (25.09, Igor: „za bardzo nachodzi”) */
@media (min-width:1200px){ .grupy-tekst{padding-top:58px} }
/* telefon: karty nie ma, więc kwiat siedzi na dolnej krawędzi zdjęcia, po prawej, w tej samej komórce siatki
   co zdjęcie; bez podanej kolumny zdjęcie dostałoby drugą, pustą kolumnę obok kwiatu */
@media (max-width:599px){
  .grupy > img{grid-row:1; grid-column:1}
  .orn-pieczatka{position:relative; grid-row:1; grid-column:1; align-self:end; justify-self:end; top:auto; left:auto;
    width:96px; height:96px; margin-right:4px; transform:translateY(50%) rotate(-14deg)}
}

/* koniec strony: duży przerywnik otwiera podpis strony (stopkę); nad nim odstęp jak między sekcjami, pod nim blisko
   nazwa i adres. Treść przed nim kończy się bez własnego odstępu. */
.ornament-koniec{height:clamp(84px, 9vw, 120px); display:flex; justify-content:center; margin:clamp(44px,6vw,84px) auto 14px}
@media (max-width:599px){ .ornament-koniec{margin-top:36px} }
/* komputer: przerywnik w połowie między końcem treści a linią stopki (margines stopki się z nim pokrywa) */
@media (min-width:900px){ .ornament-koniec{margin-bottom:clamp(44px,6vw,84px)} }

/* ================= NIESPODZIANKI (skrypt: NIESPODZIANKI_JS w podstrony.py) ================= */
/* „Kocha, lubi, szanuje” na margerytce na końcu strony */
.ornament-koniec{position:relative}
/* ornamenty mają pointer-events:none; tu klika się tylko sam rysunek, nie cały pas na szerokość strony */
.ornament-koniec[role="button"]{touch-action:manipulation; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none}
.ornament-koniec[role="button"] svg{pointer-events:auto; cursor:pointer}
.ornament-koniec:focus{outline:none}
.ornament-koniec:focus-visible svg{outline:2px solid var(--akcent); outline-offset:6px; border-radius:var(--r-maly)}
.ornament-koniec .platek{transform-box:fill-box; transform-origin:center}
.wyliczanka{position:absolute; left:50%; bottom:calc(100% + 6px); transform:translate(-50%, 6px); white-space:nowrap;
  font-size:15px; font-weight:650; color:var(--tekst); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1)}
.wyliczanka.widac{opacity:1; transform:translate(-50%, 0)}
@media (prefers-reduced-motion:reduce){ .wyliczanka{transform:translateX(-50%); transition:opacity .2s ease} .wyliczanka.widac{transform:translateX(-50%)} }
/* Baca: trzy stuknięcia w zdjęcie */
.baca{position:relative}
.baca-portret{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.baca-hau{position:absolute; top:2px; left:calc(50% + 56px); padding:5px 12px; border-radius:14px 14px 14px 4px;
  background:var(--plyta); border:1px solid var(--kreska); box-shadow:0 6px 18px rgba(20,14,4,.12);
  font-size:15px; font-weight:750; pointer-events:none; animation:hau 2.6s ease both}
@media (min-width:900px){ .baca-hau{left:calc(50% + 74px)} }
@keyframes hau{0%{opacity:0; transform:translateY(6px) scale(.7)} 12%{opacity:1; transform:none} 80%{opacity:1} 100%{opacity:0}}
.lapa{position:absolute; top:calc(100% + 14px); width:20px; height:20px; color:var(--cichy); opacity:0; pointer-events:none;
  animation:lapa 1.2s ease both}
.lapa svg{width:100%; height:100%; transform:rotate(90deg)}
@keyframes lapa{0%{opacity:0} 25%{opacity:.8} 70%{opacity:.8} 100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .baca-hau{animation:none} }
/* iskry z płomieni (cennik „W cenie”, strona główna „Koza z drewnem”) i „trwa teraz” przy ciszy nocnej */
li[data-iskry]{position:relative; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.iskra{position:absolute; z-index:2; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #FFE7A8 0 30%, #F29A2E 70%); box-shadow:0 0 6px 1px rgba(242,154,46,.7)}
.trwa-teraz{display:block; width:max-content; margin-top:4px; padding:1px 8px; border-radius:999px;
  font-size:12.5px; font-weight:650; line-height:1.5; color:var(--akcent); background:color-mix(in srgb, var(--akcent) 14%, transparent)}
.trwa-teraz.obok{display:inline-block; margin:0 0 0 8px; vertical-align:1px}
/* para nad balią w „Dodatkowo” */
[data-para]{position:relative; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
/* smugi pary: wąskie, jasne i rozmyte; na kremowym tle ciemniejsza szarość wyglądała jak plama (25.09) */
.para{position:absolute; z-index:2; width:5px; height:11px; border-radius:50%; pointer-events:none;
  background:rgba(160,164,176,.6); filter:blur(1.3px)}
/* para z napisu „Sauna po zmroku” w scenie dnia: faliste kreski w kolorze napisu (biały na zdjęciu, jasny na nocnym niebie) */
.para-napis{position:absolute; z-index:2; width:.55em; height:1.6em; pointer-events:none; line-height:0}
.para-napis svg{display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-dasharray:34; stroke-dashoffset:34; filter:blur(.3px)}
/* cennik, krok 4: gdy się zapala, numer zamienia się w klucz (przekręca go skrypt); bez ożywienia zostaje numer */
.kroki .klucz{position:absolute; left:0; top:-2px; z-index:1; display:grid; place-items:center; width:30px; height:30px;
  color:var(--na-akcencie); opacity:0; pointer-events:none; transition:opacity .35s ease}
.kroki .klucz svg{width:17px; height:17px}
.kroki.ozywione li.zapalony > .klucz{opacity:1}
.kroki.ozywione li.krok-klucz.zapalony::before{color:transparent}
/* cennik: basen (latem) i śnieg przy świętach (zawsze); skrypt w NIESPODZIANKI_JS */
[data-basen], [data-snieg]{position:relative; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
/* płatki przelatują za tekstem wiersza (tekst nad nimi), przygaszone, żeby nie czytały się jak znak przy cenie */
[data-snieg] > *{position:relative; z-index:1}
.platek-sniegu{position:absolute; z-index:0; pointer-events:none; line-height:0; color:color-mix(in srgb, var(--akcent) 70%, transparent)}
.platek-sniegu svg{display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round}
/* trzy ptaki nad „Żuraw, Bocian i Jastrząb” */
#domki .domki-tekst{position:relative}
.ptak{position:absolute; left:0; z-index:2; color:var(--tekst); opacity:.8; pointer-events:none; line-height:0}
.ptak svg{display:block; fill:currentColor; overflow:visible}
.ptak .skrzydlo{transform-box:view-box; transform-origin:0 0; animation:machaj-p .5s ease-in-out var(--faza, 0s) infinite alternate}
.ptak .skrzydlo-l{animation-name:machaj-l}
@keyframes machaj-p{from{transform:rotate(-12deg)} to{transform:rotate(24deg)}}
@keyframes machaj-l{from{transform:rotate(12deg)} to{transform:rotate(-24deg)}}
/* 404: trop Bacy prowadzi do przycisków */
.blad-trop{display:flex; gap:12px; margin:2px 0 -4px; color:var(--cichy)}
.blad-trop svg{width:20px; height:20px; transform:rotate(90deg); opacity:0; animation:trop .4s ease forwards}
.blad-trop svg:nth-child(odd){margin-top:-6px} .blad-trop svg:nth-child(even){margin-top:6px}
.blad-trop svg:nth-child(1){animation-delay:.3s} .blad-trop svg:nth-child(2){animation-delay:.55s} .blad-trop svg:nth-child(3){animation-delay:.8s}
.blad-trop svg:nth-child(4){animation-delay:1.05s} .blad-trop svg:nth-child(5){animation-delay:1.3s} .blad-trop svg:nth-child(6){animation-delay:1.55s}
.blad-trop svg:nth-child(7){animation-delay:1.8s}
@keyframes trop{to{opacity:.75}}
@media (prefers-reduced-motion:reduce){ .blad-trop svg{animation:none; opacity:.75} }
/* bąbelki przy zdjęciu mamy w masce do nurkowania */
.gospodyni{position:relative}
img.zdjecie-mamy{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.babel{position:absolute; z-index:2; border-radius:50%; pointer-events:none;
  border:1.5px solid color-mix(in srgb, var(--akcent) 60%, transparent);
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.85) 0 18%, transparent 42%),
             color-mix(in srgb, var(--akcent) 14%, transparent)}
main > .sekcja:last-child, .blad{padding-bottom:0}
main > :last-child > :last-child, main > :last-child > :last-child > :last-child{margin-bottom:0}

/* ================= DRUK (regulamin i polityka) =================
   Mama drukuje regulamin do każdego domku (29.09). A4, biały papier, jasne kolory także przy trybie ciemnym
   w systemie, nagłówek ze znakiem i telefonem do gospodyni, tekst w dwóch kolumnach, w stopce nazwa dokumentu
   i numer strony (pola marginesu @page, Chrome 131+). Na ekranie nic z tego nie widać. */
/* stopka w polach marginesu nie dziedziczy kroju strony: krój wpisany wprost (inaczej drukowała się szeryfowa) */
@page{size:A4; margin:10mm 10.5mm 13mm}
@page regulamin{ @bottom-left{content:"Regulamin wynajmu · Kaszubska Bacówka"; font-size:7.5pt; color:#6B6F76; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif}
                 @bottom-right{content:counter(page) " / " counter(pages); font-size:7.5pt; color:#6B6F76; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif} }
@page polityka{ @bottom-left{content:"Polityka prywatności · Kaszubska Bacówka"; font-size:7.5pt; color:#6B6F76; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif}
                @bottom-right{content:counter(page) " / " counter(pages); font-size:7.5pt; color:#6B6F76; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif} }
@media print{
  :root{--tlo:#FFFFFF !important; --plyta:#FFFFFF !important; --plyta-2:#F4F1EA !important; --kreska:#D9D4C8 !important;
        --tekst:#1E232B !important; --cichy:#5C6069 !important; --akcent:#3A5FA8 !important; color-scheme:light}
  html, body{background:#FFFFFF !important; color:#1E232B}
  body{font-size:8.7pt; line-height:1.3; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .nawigacja, .pasek-dolny, .stopka, .ornament-koniec, .spis-tresci, .orn-bok{display:none !important}
  .druk-regulamin{page:regulamin} .druk-polityka{page:polityka}
  main.obszar{max-width:none; margin:0; padding:0}
  .druk-naglowek{display:flex; align-items:center; gap:3mm; padding-bottom:2.5mm; border-bottom:.4mm solid var(--akcent)}
  .druk-naglowek .znak-marki{width:11mm; height:11mm; flex:0 0 auto}
  .druk-naglowek b{display:block; font-size:11pt; font-weight:750; letter-spacing:-.01em}
  .druk-naglowek span{display:block; font-size:8pt; color:var(--cichy)}
  .druk-naglowek .druk-kontakt{margin-left:auto; text-align:right}
  .druk-naglowek .druk-kontakt b{font-size:11pt; font-variant-numeric:tabular-nums}
  .tylko-druk{display:inline}
  .podstrona-czolo{padding:3mm 0 2mm !important; display:block; gap:0; max-width:none}
  .podstrona-czolo h1{font-size:18pt; letter-spacing:-.03em; margin:0}
  .podstrona-czolo p{font-size:9pt; margin:1mm 0 0; color:var(--cichy)}
  /* projekt przed akceptacją prawnika: jedna wyraźna linia zamiast całej ramki (znika z wersji ostatecznej) */
  .projekt-prawny{font-size:0; padding:1.5mm 3mm; margin:0 0 3mm; border:.3mm dashed var(--akcent); border-radius:2mm; background:none}
  .projekt-prawny b{font-size:8pt; margin:0}
  .prawne{max-width:none; columns:2; column-gap:6mm; column-rule:.2mm solid var(--kreska)}
  .prawne .paragraf{break-inside:auto}
  .prawne .paragraf + .paragraf{margin-top:2.2mm; padding-top:0; border-top:0}
  .prawne h2{font-size:9.8pt; margin:0 0 1mm; letter-spacing:-.005em; break-after:avoid}
  .prawne h3{font-size:9.6pt; margin:2.5mm 0 1mm; break-after:avoid}
  .prawne p{margin:0 0 1mm}
  .prawne ol, .prawne ul{margin:0 0 1mm; padding-left:5.4mm; gap:.6mm}   /* 5,4 mm: mieści numer „10.” */
  .prawne ol ol{margin-top:.8mm}
  .prawne li{break-inside:avoid}
  .prawne a{color:inherit; text-decoration:none}
  .prawne .stopka-dok{font-size:8.5pt; margin-top:3mm}
  .luka{border-bottom-width:.3mm}
}