/* ============================================================
   ZATOKA — przewodnikolsztyn.pl („Olsztyn nad wodą")
   Premium: lewy panel nawigacji w głębi teal, treść na jasnym
   tle z falistymi przejściami, karty jak boje, pory roku
   w czterech barwnych panelach. Zero JS, zero zdjęć.
   Wszystkie wartości barw WYŁĄCZNIE przez zmienne :root.
   ============================================================ */

:root{
  /* — paleta bazowa (motyw.json) — */
  --papier:#F3F8F7;
  --karta:#FFFFFF;
  --tlo2:#E6F0EE;
  --wiodaca-jasna:#CBE4E0;
  --atrament:#132422;
  --atrament-cichy:#3A534F;
  --wiodaca:#0E6560;
  --wiodaca-ciemna:#0A4B47;
  --akcent:#8A4B15;
  --linia:#5E8F8A;
  --linia-cicha:#BAD4D0;
  /* — głębia zatoki (odcienie tej samej rodziny teal) — */
  --glebia:#083F3B;        /* panel nawigacji, pomiar bieli: 11,77:1 */
  --dno:#06302D;           /* stopka, pomiar bieli: 14,30:1 */
  --wiodaca-zywsza:#107068;/* górny ton gradientu przycisku */
  --tafla:#A9CDC8;         /* trzecie pasmo fal hero */
  --piana:#E4F1EF;         /* tekst cichy na ciemnych panelach: 9,3:1 */
  /* — cztery pory roku (jasne tinty + ciemne słowa, pomiary w koncepcji) — */
  --wiosna-tlo:#EAF4E2; --wiosna-slowo:#2E5E23; --wiosna-pas:#4C8A3F;
  --lato-tlo:#FBF0DB;   --lato-slowo:#7A4A0E;   --lato-pas:#C07818;
  --jesien-tlo:#F9E9DF; --jesien-slowo:#8A3B12; --jesien-pas:#B4551E;
  --zima-tlo:#E4EEF7;   --zima-slowo:#1C4E70;   --zima-pas:#2E6E9E;
  /* — pisma — */
  --pismo-naglowek:"Archivo","Arial Narrow",Arial,sans-serif;
  --pismo-tekst:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* — wymiary — */
  --panel:20rem;
  --brzeg:clamp(1.25rem,4vw,3.5rem);
  --kontener-tekst:50rem;
  --kontener-szeroki:72rem;
  /* ⭐⭐ SKALA POWYŻEJ 1366 px — patrz blok „POWYŻEJ 1600 px" na końcu arkusza.
     --proza to DOKŁADNIE 50rem - 2 x 3,5rem brzegu, więc kolumna tekstu ma tę
     samą szerokość niezależnie od tego, czy sekcja ma bark z nagłówkiem, czy nie.
     Przy 1920 px wypada 798 px, czyli około 75 znaków w wierszu. */
  --proza:43rem;
  --proza-hero:42rem;
  --rowek:3rem;
  /* rama powłoki: 0 px do 1600, potem płynnie do 96 px (przy 1920 wychodzi 95,5) */
  --rama:clamp(0px,(100vw - 1600px)/3.35,96px);
  --promien:22px;
  --promien-maly:12px;
  --pas-pion:clamp(2.75rem,6vw,5rem);
  /* — cienie: miękkie, w barwie głębi — */
  --cien-1:0 8px 24px -12px rgba(6,48,45,.35);
  --cien-2:0 22px 48px -20px rgba(6,48,45,.42);
  --cien-3:0 30px 60px -22px rgba(6,48,45,.5);
}

/* ⭐⭐ B13 — skala rośnie powyżej 1366 px (procentowo, wszystko w rem) */
html{font-size:100%}
@media (min-width:1440px){html{font-size:107%}}
@media (min-width:1700px){html{font-size:116%}}

/* ============================================================
   POWŁOKA — jeden arkusz strony (panel + treść + stopka).
   ⚠⚠ Do 1600 px --rama wynosi 0 i powłoka jest dokładnie tak szeroka jak okno,
   czyli układ mobilny i laptopowy nie zmienia się ani o piksel. Powyżej 1600 px
   rama rośnie płynnie do 96 px: przy 1920 px arkusz zostawia po 95,5 px z KAŻDEJ
   strony, więc kompozycja przestaje być jednostronna (dotąd: 371 px po lewej
   z panelu i 0 px po prawej, bo pasma dobijały do ściany okna).
   ============================================================ */
.powloka{
  margin-inline:var(--rama);
  background:var(--papier);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* pułapka nr 6: clip nie psuje position:sticky/fixed */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
body{
  margin:0;
  /* ⚠ tło OKNA, nie strony: widać je tylko w ramie powłoki powyżej 1600 px */
  background:var(--tlo2);
  color:var(--atrament);
  font-family:var(--pismo-tekst);
  font-size:1.0625rem;
  line-height:1.68;
  overflow-wrap:break-word;
}
h1,h2,h3{font-family:var(--pismo-naglowek);line-height:1.15;margin:0 0 .6em}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.35em}
li{margin-bottom:.45em}
svg{display:block}
/* pułapka nr 1 (wariant 4): pogrubienie nigdy nie niesie własnej barwy */
strong,b{color:inherit;font-weight:700}

/* ---------- odsyłacze prozy (pułapka nr 1: nigdy nie malują przycisków) ---------- */
main a:not(.przycisk){
  color:var(--wiodaca-ciemna);
  text-decoration:underline;
  text-decoration-color:var(--linia);
  text-decoration-thickness:.09em;
  text-underline-offset:.18em;
}
main a:not(.przycisk):hover{color:var(--akcent);text-decoration-color:var(--akcent)}
a:focus-visible{outline:3px solid var(--akcent);outline-offset:2px;border-radius:4px}
.pas--glebia a:focus-visible,.hero a:focus-visible,.naglowek a:focus-visible,.stopka a:focus-visible{outline-color:var(--karta)}

/* ---------- skip-link (cel dotykowy ≥44 px także poza ekranem) ---------- */
.omin{
  position:absolute;left:.75rem;top:.75rem;z-index:60;
  display:inline-flex;align-items:center;min-height:48px;
  padding:.6rem 1.4rem;border-radius:999px;
  background:var(--karta);color:var(--wiodaca-ciemna);
  font-weight:600;text-decoration:none;box-shadow:var(--cien-2);
  transform:translateY(-220%);
}
.omin:focus{transform:none}
.omin:focus-visible{outline:3px solid var(--akcent);outline-offset:2px}

/* ============================================================
   NAGŁÓWEK: mobile — ciemna belka z żetonami menu;
   desktop (≥1024) — STAŁY LEWY PANEL w głębi zatoki
   ============================================================ */
.naglowek{
  background:linear-gradient(170deg,var(--wiodaca-ciemna),var(--dno));
  background-color:var(--glebia);
  color:var(--karta);
  position:relative;
  z-index:5;
}
.naglowek__pas{
  display:flex;flex-direction:column;gap:.9rem;align-items:center;
  padding:1.1rem var(--brzeg) 1.2rem;
  position:relative;z-index:1;
}
.znak{
  display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  color:var(--karta);text-decoration:none;
  font-family:var(--pismo-naglowek);font-weight:700;
  font-size:1.35rem;letter-spacing:.01em;
}
.znak__fala{width:2.6rem;height:auto;color:var(--wiodaca-jasna);flex:none}
.znak:hover .znak__tekst{text-decoration:underline;text-decoration-color:var(--wiodaca-jasna);text-underline-offset:.22em}
.menu__lista{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;
}
.menu__poz{margin:0}
.menu__link{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.35rem 1.15rem;border-radius:999px;
  color:var(--karta);text-decoration:none;font-weight:500;font-size:.98rem;
  border:1px solid var(--linia);
  background:transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.menu__link:hover{background:var(--wiodaca);border-color:var(--wiodaca-jasna)}
.menu__link:focus-visible{outline:3px solid var(--karta);outline-offset:2px}
.menu__link[aria-current="page"]{
  background:var(--karta);color:var(--wiodaca-ciemna);
  border-color:var(--karta);font-weight:700;
}

/* fale i kręgi wody w panelu — czysty CSS, wyłącznie dekoracja */
.naglowek__woda{display:none}

@media (min-width:1024px){
  /* ⚠⚠ PANEL NIE JEST JUŻ position:fixed. Powód: powyżej 1600 px powłoka ma
     własną ramę, a element przyklejony do OKNA rozjeżdżałby się z arkuszem
     o kilkadziesiąt pikseli. Zamiast tego panel jest zwykłą kolumną siatki na
     całą wysokość strony, a przykleja się jego wnętrze. Na ekranie efekt jest
     ten sam, ale panel trzyma się arkusza, nie okna. */
  .powloka{display:grid;grid-template-columns:var(--panel) minmax(0,1fr)}
  .naglowek{
    grid-column:1;grid-row:1/3;
    box-shadow:inset -18px 0 40px -30px rgba(0,0,0,.55);
  }
  .tresc{grid-column:2;grid-row:1;min-width:0}
  .stopka{grid-column:2;grid-row:2;min-width:0}
  .naglowek__pas{
    position:sticky;top:0;
    align-items:flex-start;
    padding:2.4rem 1.9rem 2rem;
    gap:2.6rem;
    min-height:100vh;max-height:100vh;overflow-y:auto;
  }
  .znak{font-size:1.5rem;line-height:1.25}
  .znak__fala{width:3rem}
  .menu{width:100%}
  .menu__lista{flex-direction:column;gap:.35rem;justify-content:flex-start}
  .menu__link{
    width:100%;min-height:48px;border:0;border-radius:var(--promien-maly);
    padding:.6rem 1rem .6rem 1.15rem;font-size:1.02rem;
    position:relative;
  }
  .menu__link::before{
    content:"";position:absolute;left:0;top:22%;bottom:22%;width:4px;
    border-radius:4px;background:transparent;
    transition:background-color .18s ease;
  }
  .menu__link:hover{background:var(--wiodaca)}
  .menu__link:hover::before{background:var(--wiodaca-jasna)}
  .menu__link[aria-current="page"]{background:var(--karta);color:var(--wiodaca-ciemna)}
  .menu__link[aria-current="page"]::before{background:var(--akcent);top:18%;bottom:18%}
  .naglowek__woda{
    display:block;margin-top:auto;width:100%;height:9rem;
    background:
      repeating-radial-gradient(circle at 18% 130%,
        transparent 0 1.35rem, rgba(255,255,255,.07) 1.35rem 1.55rem),
      repeating-radial-gradient(circle at 88% 160%,
        transparent 0 2rem, rgba(255,255,255,.05) 2rem 2.25rem);
    pointer-events:none;
  }
}

/* ============================================================
   KONTENERY I PASMA
   ============================================================ */
.kontener{width:100%;max-width:var(--kontener-szeroki);margin-inline:auto;padding-inline:var(--brzeg)}
.kontener--tekst{max-width:var(--kontener-tekst)}
/* ⚠ akapit w szerokim kontenerze (arkusz systemu) też jest prozą: przy 1366 px
   rozlewał się na 937 px, czyli ponad 100 znaków w wierszu. */
.pas>.kontener:not(.kontener--tekst)>p{max-width:var(--proza)}
.pas{padding-block:var(--pas-pion);position:relative}
.pas>.kontener{position:relative;z-index:1}
.pas--tlo2{background:var(--tlo2)}
.pas--jasna{background:var(--wiodaca-jasna)}
.pas--glebia{
  background:linear-gradient(180deg,var(--wiodaca),var(--glebia));
  background-color:var(--wiodaca-ciemna);
  color:var(--karta);
}
.pas--glebia p{color:var(--piana)}
.pas--glebia h2{color:var(--karta)}
.pas--glebia a:not(.przycisk),
.pas--glebia main a:not(.przycisk){color:var(--karta);text-decoration-color:var(--wiodaca-jasna)}
.pas--glebia a:not(.przycisk):hover{color:var(--wiodaca-jasna);text-decoration-color:var(--karta)}
/* pas bez dolnego oddechu, gdy kończy go pełna fala */
.pas--do-fali{padding-bottom:0}

/* karta-arkusz: biała tafla położona na pasie */
.karta{
  background:var(--karta);
  border-radius:var(--promien);
  box-shadow:var(--cien-2);
  padding-block:clamp(1.9rem,4vw,3rem);
  position:relative;z-index:2;
}
.karta--nasuwana{margin-top:calc(-1*clamp(2.5rem,7vw,5.5rem))}

/* fale pełnej szerokości (inline SVG, aria-hidden, barwa = currentColor) */
.fala{width:100%;height:clamp(2.6rem,6vw,4.6rem)}
.fala--w-pasie{margin-top:var(--pas-pion);margin-bottom:-1px}

/* ząbki: przejście między jasnymi pasmami — czysty CSS */
.zabki{
  height:1.15rem;
  background-repeat:repeat-x;
  background-size:2.3rem 1.15rem;
}
.zabki--do-tlo2{background-color:var(--papier);
  background-image:radial-gradient(circle at 1.15rem -.7rem,var(--tlo2) 1.16rem,transparent calc(1.16rem + 1.5px))}
.zabki--do-papieru{background-color:var(--tlo2);
  background-image:radial-gradient(circle at 1.15rem -.7rem,var(--papier) 1.16rem,transparent calc(1.16rem + 1.5px))}
.zabki--do-jasnej{background-color:var(--papier);
  background-image:radial-gradient(circle at 1.15rem -.7rem,var(--wiodaca-jasna) 1.16rem,transparent calc(1.16rem + 1.5px))}

/* ============================================================
   HERO — tafla zatoki: głęboki teal, kręgi wody, pasma fal
   ============================================================ */
.hero{
  background:linear-gradient(150deg,var(--wiodaca) -10%,var(--wiodaca-ciemna) 45%,var(--glebia));
  background-color:var(--wiodaca-ciemna);
  color:var(--karta);
  position:relative;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-radial-gradient(circle at 84% 18%,
      transparent 0 1.8rem, rgba(255,255,255,.05) 1.8rem 2.05rem),
    repeating-radial-gradient(circle at 96% 70%,
      transparent 0 2.6rem, rgba(255,255,255,.035) 2.6rem 2.9rem);
}
.hero__wnetrze{position:relative;z-index:1;padding-top:clamp(2.8rem,7vw,6rem);padding-bottom:clamp(1.5rem,4vw,3rem)}
.tytul{
  font-size:clamp(2.35rem,1.35rem + 3.6vw,5rem);
  font-weight:700;line-height:1.06;letter-spacing:-.015em;
  margin:0 0 .45em;max-width:16em;
  text-wrap:balance;
}
.hero .wprowadzenie,.hero .zajawka-hero{
  color:var(--wiodaca-jasna);
  font-size:clamp(1.05rem,1rem + .35vw,1.3rem);
  /* ⚠ było 44em, czyli 1062 px przy 1920 px — ponad 100 znaków w wierszu.
     Szerokość, którą tu oddajemy, dostaje lewa kolumna hero (patrz blok 1600). */
  line-height:1.7;max-width:34em;margin-bottom:.5em;
}
.hero__fale{position:relative;z-index:1}

/* ============================================================
   NAGŁÓWKI SEKCJI
   ============================================================ */
h2{
  color:var(--wiodaca-ciemna);
  font-size:clamp(1.5rem,1.25rem + 1vw,2.3rem);
  font-weight:700;letter-spacing:-.01em;
  margin-top:0;
}
h2::after{
  content:"";display:block;height:.32rem;width:4.5rem;margin-top:.45rem;
  border-radius:99px;
  background:linear-gradient(90deg,var(--wiodaca) 55%,var(--linia-cicha));
}
.pas--glebia h2::after{background:linear-gradient(90deg,var(--wiodaca-jasna) 55%,var(--linia))}

/* wpisy: duże liczby ozdobne przy śródtytułach */
.wpis-tresc{counter-reset:czesc}
.wpis-tresc h2{counter-increment:czesc;position:relative;padding-top:.4rem}
.wpis-tresc h2::before{
  content:"0" counter(czesc);
  position:absolute;right:0;top:-.55em;z-index:-1;
  font-size:2.6em;font-weight:700;color:var(--wiodaca-jasna);
  letter-spacing:-.03em;
}

/* proza wpisu: inicjał jak koło na wodzie */
.wpis-wstep::first-letter{
  float:left;
  font-family:var(--pismo-naglowek);font-weight:700;
  font-size:3.1em;line-height:.9;
  color:var(--wiodaca);
  padding:.06em .12em 0 0;
}

/* zajawka nasunięta na hero */
.zajawka{
  font-size:1.12rem;line-height:1.65;color:var(--atrament-cichy);
  border-left:.35rem solid var(--wiodaca);
  padding-left:1.1rem;margin:0 0 1.15em;
}

/* ============================================================
   PRZYCISKI
   ============================================================ */
.cta{margin:1.5rem 0 .4rem}
a.przycisk{
  display:inline-flex;align-items:center;gap:.65rem;
  min-height:48px;padding:.7rem 1.7rem;
  border-radius:999px;border:0;
  background:linear-gradient(180deg,var(--wiodaca-zywsza),var(--wiodaca));
  background-color:var(--wiodaca);
  color:var(--karta);font-weight:600;font-size:1rem;
  text-decoration:none;
  box-shadow:0 14px 26px -14px rgba(10,75,71,.65);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
a.przycisk::after{content:"→";font-family:var(--pismo-naglowek);transition:transform .18s ease}
a.przycisk:hover{
  background:linear-gradient(180deg,var(--akcent),var(--akcent));
  background-color:var(--akcent);
  transform:translateY(-2px);
  box-shadow:0 18px 30px -14px rgba(138,75,21,.6);
}
a.przycisk:hover::after{transform:translateX(4px)}
a.przycisk:focus-visible{outline:3px solid var(--akcent);outline-offset:3px}
.pas--glebia a.przycisk{
  background:linear-gradient(180deg,#9c5619,var(--akcent));
  background-color:var(--akcent);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.5);
}
.pas--glebia a.przycisk:hover{background:var(--karta);background-color:var(--karta);color:var(--wiodaca-ciemna)}
.pas--glebia a.przycisk:focus-visible{outline-color:var(--karta)}
a.przycisk--cichy{
  background:var(--karta);background-color:var(--karta);
  color:var(--wiodaca-ciemna);
  border:2px solid var(--wiodaca);
  box-shadow:none;
}
a.przycisk--cichy:hover{background:var(--wiodaca);background-color:var(--wiodaca);color:var(--karta);border-color:var(--wiodaca)}

/* ============================================================
   CZTERY PORY ROKU — panele w barwach pór
   ============================================================ */
ul.pory{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:1.3rem}
@media (min-width:720px){ul.pory{grid-template-columns:1fr 1fr}}
.pora{
  margin:0;border-radius:var(--promien);
  padding:1.5rem 1.5rem 1.4rem;
  box-shadow:var(--cien-1);
  border-top:.4rem solid;
  color:var(--atrament);
  transition:transform .18s ease,box-shadow .18s ease;
}
.pora:hover{transform:translateY(-4px);box-shadow:var(--cien-2)}
.pora__nazwa{
  display:block;font-family:var(--pismo-naglowek);font-weight:700;
  font-size:1.45rem;letter-spacing:.01em;margin-bottom:.35rem;
}
.pora--wiosna{background:var(--wiosna-tlo);border-top-color:var(--wiosna-pas)}
.pora--wiosna .pora__nazwa{color:var(--wiosna-slowo)}
.pora--lato{background:var(--lato-tlo);border-top-color:var(--lato-pas)}
.pora--lato .pora__nazwa{color:var(--lato-slowo)}
.pora--jesien{background:var(--jesien-tlo);border-top-color:var(--jesien-pas)}
.pora--jesien .pora__nazwa{color:var(--jesien-slowo)}
.pora--zima{background:var(--zima-tlo);border-top-color:var(--zima-pas)}
.pora--zima .pora__nazwa{color:var(--zima-slowo)}

/* ============================================================
   KARTY WPISÓW — boje na wodzie
   ============================================================ */
ul.lista-wpisow{
  list-style:none;margin:2.2rem 0 0;padding:0;
  display:grid;gap:1.5rem;
  counter-reset:wpis;
  align-items:stretch;
}
@media (min-width:1100px){ul.lista-wpisow{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zapowiedz{
  margin:0;counter-increment:wpis;
  background:var(--karta);
  border-radius:var(--promien);
  overflow:hidden;
  box-shadow:var(--cien-2);
  display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;z-index:2;
}
.zapowiedz:hover{transform:translateY(-6px);box-shadow:var(--cien-3)}
.zapowiedz__pas{
  background:linear-gradient(140deg,var(--wiodaca),var(--wiodaca-ciemna));
  background-color:var(--wiodaca);
  color:var(--wiodaca-jasna);
  min-height:4.6rem;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:.8rem 1.4rem .55rem;
  position:relative;
}
.zapowiedz__pas::after{
  content:"0" counter(wpis);
  font-family:var(--pismo-naglowek);font-weight:700;
  font-size:2.1rem;line-height:1;color:var(--karta);
}
.zapowiedz__pas .fala-mala{width:5.2rem;height:1.3rem;color:var(--wiodaca-jasna)}
.zapowiedz__tytul{font-size:1.25rem;line-height:1.3;margin:0;padding:1.05rem 1.4rem .35rem}
main .zapowiedz__tytul a{
  display:block;min-height:44px;
  color:var(--wiodaca-ciemna);text-decoration:none;
}
main .zapowiedz__tytul a:hover{color:var(--akcent);text-decoration:underline;text-decoration-color:var(--akcent);text-underline-offset:.16em}
.zapowiedz__tekst{padding:0 1.4rem;color:var(--atrament-cichy);margin-bottom:1rem}
.zapowiedz__wiecej{margin:auto 1.4rem 1.3rem;padding-top:.2rem}
main .zapowiedz__wiecej a.przycisk{min-height:44px;padding:.45rem 1.25rem;font-size:.95rem}

/* ============================================================
   STOPKA — dno zatoki
   ============================================================ */
.do-stopki{background:transparent}
.stopka{
  background:linear-gradient(180deg,var(--dno),var(--dno));
  background-color:var(--dno);
  color:var(--karta);
  position:relative;
}
.stopka::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 12% 120%,
    transparent 0 1.6rem, rgba(255,255,255,.045) 1.6rem 1.82rem);
}
.stopka__wnetrze{
  position:relative;
  display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between;
  padding-block:2.2rem 2.4rem;
}
.stopka__znak{
  margin:0;display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--pismo-naglowek);font-weight:700;font-size:1.2rem;
}
.stopka__znak .znak__fala{width:2.3rem;color:var(--wiodaca-jasna)}
.stopka__menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.stopka__menu li{margin:0}
.stopka__menu a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--wiodaca-jasna);text-decoration:none;font-size:.98rem;
}
.stopka__menu a:hover{color:var(--karta);text-decoration:underline;text-underline-offset:.2em}

/* ============================================================
   SPECIMEN
   ============================================================ */
ul.próbki{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.próbka{margin:0;background:var(--karta);border-radius:var(--promien-maly);box-shadow:var(--cien-1);overflow:hidden}
.próbka__kolor{height:4.6rem}
.próbka__opis{padding:.7rem .9rem;font-size:.9rem;color:var(--atrament-cichy)}
.próbka__opis strong{display:block;color:var(--atrament)}

/* ============================================================
   POWYŻEJ 1600 px — ODZYSKANA SZEROKOŚĆ DOSTAJE ROLĘ
   ⭐⭐ Zasada serii: makieta ma ROSNĄĆ, a nie dokładać marginesu. Same szersze
   pasma nic nie dają — rozciągnięta proza to 100 znaków w wierszu, czyli wada,
   nie poprawa. Dlatego szerokość jest tu ROZDZIELONA:
     • kontener treści rośnie z 50rem do 72rem (przy 1920 px: 928 -> 1336 px),
     • KOLUMNA PROZY zostaje wąska — 43rem, czyli 798 px ≈ 75 znaków,
     • cała różnica (przy 1920 px około 353 px) idzie na BARK sekcji: nagłówek H2
       z regułą, a we wpisach dodatkowo ozdobna cyfra części, przenoszą się do
       zewnętrznej, lewej kolumny — dotąd cyfra leżała POD tekstem,
     • pasma galeryjne (cztery pory roku, próbki palety) rozlewają się na pełną
       szerokość kontenera i dostają więcej kolumn: pory roku 2 -> 4,
     • hero: tytuł na pełną szerokość, zajawka zawieszona w prawej kolumnie,
       w lewej kręgi na wodzie.
   ============================================================ */
@media (min-width:1600px){
  /* ---- pasmo tekstowe: bark z nagłówkiem + wąska kolumna prozy ---- */
  .pas > .kontener--tekst:has(> h2):not(.kontener--rozlewa){
    max-width:var(--kontener-szeroki);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--proza));
    column-gap:var(--rowek);row-gap:0;
    align-items:start;
  }
  .pas > .kontener--tekst:has(> h2):not(.kontener--rozlewa) > *{grid-column:2}
  /* ⚠ nagłówek zajmuje bark na całą wysokość sekcji, więc kolejne akapity
     układają się w drugiej kolumnie od pierwszego wiersza w dół. */
  .pas > .kontener--tekst:has(> h2):not(.kontener--rozlewa) > h2{
    grid-column:1;grid-row:1/span 30;align-self:start;margin-bottom:0;
    /* ⚠ body ma overflow-wrap:break-word — w wąskim barku łamało to nagłówek
       W ŚRODKU SŁOWA („zagospodarowan|y"). W barku łamiemy tylko na spacjach,
       a stopień schodzi tak, żeby najdłuższe słowo („zagospodarowany") mieściło
       się w kolumnie: przy 1920 px to 38 px pisma na 353 px szerokości. */
    overflow-wrap:normal;hyphens:auto;text-wrap:balance;
    font-size:clamp(1.5rem,1rem + 1.05vw,2.05rem);
  }
  /* ---- pasma galeryjne ---- */
  .kontener--rozlewa{max-width:var(--kontener-szeroki)}
  .kontener--rozlewa ul.pory{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* ---- hero ---- */
  .hero__wnetrze{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--proza-hero));
    column-gap:var(--rowek);
    align-items:start;
  }
  .hero__wnetrze > .tytul{grid-column:1/-1;grid-row:1}
  .hero__wnetrze > .wprowadzenie{grid-column:2;grid-row:2;max-width:none;margin-bottom:0}
  /* kręgi na wodzie w lewej kolumnie hero — czysta ozdoba, zero treści.
     :has() pilnuje, żeby nie pojawiały się w hero wpisu, gdzie nie ma zajawki. */
  .hero__wnetrze:has(> .wprowadzenie)::after{
    content:"";grid-column:1;grid-row:2;align-self:end;
    min-height:5.5rem;border-radius:var(--promien-maly);
    background:repeating-radial-gradient(circle at 7% 122%,
      transparent 0 1.7rem, rgba(255,255,255,.10) 1.7rem 1.9rem);
  }
  /* ---- ozdobna cyfra części wpisu: spod tekstu do barku ---- */
  .wpis-tresc .kontener--tekst > h2::before{
    position:static;display:block;
    font-size:3.1em;line-height:.82;
    color:var(--wiodaca-jasna);
    margin-bottom:.1em;
  }
  /* na pasie jasnym cyfra w barwie wiodącej jasnej byłaby niewidoczna (to samo tło) */
  .wpis-tresc .pas--jasna .kontener--tekst > h2::before{color:var(--linia)}
}

/* Rama powłoki jest już wyraźna (44 px i więcej) — arkusz dostaje zaokrąglenie
   i miękki cień, żeby odsunięcie od krawędzi czytało się jako decyzja, a nie luz. */
@media (min-width:1750px){
  .powloka{border-radius:var(--promien);box-shadow:0 40px 90px -55px rgba(6,48,45,.6)}
  .naglowek{border-start-start-radius:var(--promien);border-end-start-radius:var(--promien)}
  .hero{border-start-end-radius:var(--promien);overflow:hidden}
  .stopka{border-end-end-radius:var(--promien);overflow:hidden}
}

/* ============================================================
   RUCH, DRUK
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .zapowiedz:hover,.pora:hover,a.przycisk:hover{transform:none}
}
@media print{
  .naglowek,.stopka,.do-stopki,.fala,.hero__fale,.zabki,.omin{display:none}
  .powloka{display:block;margin:0;background:#fff}
  .tresc,.stopka{margin-left:0}
  body{background:#fff;color:#000}
  .hero,.pas--glebia{background:#fff;color:#000}
  .hero .wprowadzenie,.pas--glebia p,.pas--glebia h2,.tytul{color:#000}
  .karta,.zapowiedz,.pora{box-shadow:none;border:1px solid #999}
}