/* =========================================================
   Fundacja LaMuza
   Układ i przewijanie wzorowane na vangoghmuseum.nl:
   • prawa kolumna to przypięty (position:fixed) kadr ze zdjęciem
   • lewa to kolorowe kafle, każdy w barwie przypisanej do zdjęcia
   • kafel wysuwa się spod fotografii z lekkim opóźnieniem
   ========================================================= */

:root{
  /* Paleta „Poranek" — chłodna i jasna, celowo odległa od barw
     Van Gogh Museum (kremowa żółcień + kobalt). */
  --cream:#eff1ef;       /* mgła — tło strony */
  --cream-2:#e3e7e3;
  /* tło strony — skrypt podmienia je na odcień pokrewny barwie kafla */
  --page-bg:var(--cream);
  --ink:#171c1a;         /* grafit */
  --logo-ink:#111010;    /* jedyny kolor logo wg specyfikacji */
  --logo-ink-inv:#fbfaf9;/* wersja odwrotna, na ciemnym tle */
  --ink-soft:#4a5450;
  --blue:#0e6b5c;        /* zieleń morska — akcent: linki, przyciski, sekcja wsparcia */
  --blue-dark:#0a5348;
  --yellow:#dfc33f;      /* stłumiona cytryna — wyróżnienia w menu i stopce */
  --line:rgba(23,28,26,.18);

  /* geometria kolumn */
  /* Procenty, nie vw — i to jest tu istotne. `vw` liczy się od całej
     szerokości okna, razem z paskiem przewijania, a elementy przypięte
     do prawej krawędzi ustawiają się względem obszaru bez paska. Przy
     jednostkach vw pasek nawigacji wychodził poza kafel i nachodził na
     zdjęcie dokładnie o szerokość paska przewijania (15 px).
     Procenty w elementach przypiętych liczą się od obszaru treści,
     więc obie krawędzie spotykają się co do piksela. */
  --stage-w:40%;         /* szerokość zdjęcia, przy prawej krawędzi */
  --card-right:60%;      /* tam zaczyna się zdjęcie */
  --tuck:5%;             /* o tyle kafel chowa się pod zdjęciem */
  --gap-left:clamp(16px,1.6vw,28px);

  --pad:clamp(20px,5vw,85px);
  --head-h:92px;

  --ease:cubic-bezier(.65,0,.2,1);
}

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

html{
  scroll-behavior:smooth;
  /* strona przechodzi kartka po kartce zamiast płynąć w dół */
  scroll-snap-type:y mandatory;
}

body{
  margin:0;
  background:var(--page-bg);
  transition:background-color .9s var(--ease);
  color:var(--ink);
  font-family:"Nunito","Gotham Rounded SSm",-apple-system,Segoe UI,Arial,sans-serif;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* clip, a nie hidden — hidden zrobiłby z body osobny kontener
     przewijania i zepsuł zatrzaskiwanie ustawione na <html> */
  overflow-x:clip;
}

img{max-width:100%;display:block}

/* ---- typografia: duża, ciasny tracking, niska interlinia ---- */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.05em;line-height:1.04}
/* równa długość wierszy w nagłówkach i brak sierot w akapitach */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
h1{font-size:clamp(2.9rem,6.4vw,5.4rem);letter-spacing:-.068em;margin:0 0 .32em}
h2{font-size:clamp(2.2rem,4vw,3.8rem);letter-spacing:-.062em;margin:0 0 .34em}
h3{font-size:1.28rem;letter-spacing:-.03em;margin:0 0 .5em}

p{margin:0 0 1.1em;max-width:32em}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.22em}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}

.skip{position:fixed;left:-9999px;top:12px;z-index:200;background:var(--blue);color:#fff;padding:14px 20px;border-radius:100px}
.skip:focus{left:12px}

.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}

.eyebrow{font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin:0 0 1.1em}
.eyebrow--light{color:rgba(255,255,255,.75);opacity:1}
.meta{font-size:.95rem;opacity:.75;margin-bottom:1.4em}
.tiny{font-size:.88rem;opacity:.75;max-width:48em}

/* =========================================================
   PRZYCISKI I LINKI
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 30px;border-radius:100px;
  font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease),background .18s,color .18s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-dark)}
.btn--dark{background:var(--ink);color:var(--cream)}
.btn--dark:hover{background:#000}
/* Obrys, który przy najechaniu wypełnia się od dołu. Wypełnienie robi
   gradient jako obraz tła (nie pseudoelement) — nie tworzy własnej warstwy,
   więc nie ma mowy o przykryciu napisu. */
.btn--ghost{
  --fill:var(--ink);
  --fill-text:var(--cream);
  border-color:currentColor;color:inherit;background-color:transparent;
  background-image:linear-gradient(var(--fill),var(--fill));
  background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0;
  transition:background-size .35s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .18s var(--ease);
}
.btn--ghost:hover{background-size:100% 100%;color:var(--fill-text);border-color:var(--fill)}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--sm{min-height:46px;padding:0 22px;font-size:.95rem}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;max-width:none}

.link-arrow{position:relative;display:inline-flex;align-items:center;gap:.6em;color:inherit;font-weight:800;font-size:1.05rem}
/* podkreślenie rysuje się od lewej; kończy się przed strzałką, stąd odjęcie
   jej szerokości (1,15em) razem z odstępem (0,6em) */
.link-arrow::before{
  content:"";position:absolute;left:0;bottom:-.18em;height:2px;
  width:calc(100% - 1.75em);background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);
}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover::before{transform:scaleX(1)}
.link-arrow::after{
  content:"";width:1.15em;height:1.15em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease);
}
.link-arrow:hover::after{transform:translateX(6px)}
.link-arrow--light{color:#fff}

/* =========================================================
   NAGŁÓWEK — kremowy pasek po lewej, czarny kafel logo po prawej
   ========================================================= */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:flex-start;pointer-events:none;
}
.site-head > *{pointer-events:auto}

.site-head__bar{
  width:var(--card-right);height:var(--head-h);
  background:var(--page-bg);
  display:flex;align-items:center;gap:24px;
  padding:0 clamp(20px,3vw,48px);
  transition:background-color .9s var(--ease);
}

.nav-desk{display:flex;gap:clamp(14px,2vw,30px)}
.nav-desk a{position:relative;color:var(--ink);font-weight:700;font-size:1rem;letter-spacing:-.02em}
.nav-desk a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-desk a:hover{text-decoration:none}
.nav-desk a:hover::after{transform:scaleX(1)}

.head-act{display:flex;align-items:center;gap:14px;margin-left:auto}

/* =========================================================
   LOGO — wg specyfikacji z pakietu (img/logo-SPECYFIKACJA.txt)
   Cormorant Garamond: Light 300 nazwa, Regular 400 podpis.
   Czerń #111010 to jedyny kolor logo; na ciemnym tle biel #FBFAF9.
   Proporcje z pliku wzorcowego: podpis = 0,25 wysokości nazwy,
   odstęp między nimi = 0,11. Stąd wszystko liczone z jednej
   zmiennej --logo, żeby sygnatura skalowała się bez zniekształceń.
   ========================================================= */
.brand{
  --logo:2.5rem;
  margin-left:auto;background:var(--page-bg);color:var(--logo-ink);
  display:flex;flex-direction:column;align-items:flex-start;
  /* pole ochronne: wysokość litery M z każdej strony (~0,66 nazwy) */
  padding:calc(var(--logo)*.62) calc(var(--logo)*.66);
  text-decoration:none;
  transition:background-color .9s var(--ease);
}
.brand:hover{text-decoration:none}

.brand__nazwa{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:300;font-size:var(--logo);line-height:.95;letter-spacing:-.015em;
}
.brand__rola{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:400;font-size:calc(var(--logo)*.25);
  letter-spacing:.42em;text-transform:uppercase;
  /* światło końcowe wersalika trzeba skompensować, inaczej podpis
     wygląda na przesunięty w lewo względem nazwy */
  padding-left:.2em;
  margin-top:calc(var(--logo)*.11);
}

/* hamburger — na dużych ekranach niepotrzebny */
.burger{
  display:none;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font:inherit;font-weight:700;color:var(--ink);padding:10px 4px;
}
.burger__box{display:flex;flex-direction:column;justify-content:center;gap:6px;width:26px;height:18px}
.burger__box i{display:block;height:2.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] .burger__box i:first-child{transform:translateY(4.25px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:last-child{transform:translateY(-4.25px) rotate(-45deg)}

/* =========================================================
   MENU PEŁNOEKRANOWE
   ========================================================= */
.menu{position:fixed;inset:0;z-index:55;background:var(--blue);color:#fff;display:flex;align-items:center;opacity:0;transition:opacity .32s var(--ease)}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu__in{width:100%;max-width:1440px;margin:0 auto;padding:var(--head-h) var(--pad) 0;display:grid;grid-template-columns:1.4fr .8fr;gap:40px;align-items:center}
.menu__list{list-style:none;margin:0;padding:0}
.menu__list li{border-top:1px solid rgba(255,255,255,.25)}
.menu__list li:last-child{border-bottom:1px solid rgba(255,255,255,.25)}
.menu__list a{display:flex;align-items:baseline;gap:.7em;color:#fff;font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:700;letter-spacing:-.055em;padding:.28em 0}
.menu__list a:hover{color:var(--yellow);text-decoration:none}
.menu__list span{font-size:.85rem;font-weight:700;letter-spacing:.1em;opacity:.6}
.menu__lead{font-size:1.15rem;color:rgba(255,255,255,.85)}

/* =========================================================
   PRZYPIĘTY KADR
   ========================================================= */
.stage{
  position:fixed;top:0;right:0;z-index:4;
  width:var(--stage-w);height:100vh;height:100svh;
  pointer-events:none;
}
.stage__frame{position:relative;width:100%;height:100%;overflow:hidden}

/* Zdjęcie po prostu się pojawia — bez rozsuwania i bez najazdu.
   Wchodzące leży na wierzchu i pojawia się od razu, ustępujące gaśnie
   z opóźnieniem pod nim. Dzięki temu w trakcie zmiany nie prześwituje tło. */
.stage__img{
  position:absolute;inset:0;z-index:1;
  opacity:0;
  transition:opacity .25s var(--ease) .25s;
}
.stage__img.is-active{
  opacity:1;z-index:2;
  transition:opacity .25s var(--ease);
}
.stage__img img{width:100%;height:100%;object-fit:cover}

.scroll-hint{
  position:absolute;left:26px;bottom:26px;z-index:2;
  display:flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5);transition:opacity .35s;
}
.scroll-hint i{width:1px;height:34px;background:rgba(255,255,255,.8);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);animation:wipe 1.9s var(--ease) infinite}
@keyframes wipe{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.scroll-hint.is-gone{opacity:0}

/* =========================================================
   KAFLE — lewa, przewijana kolumna
   ========================================================= */
.flow{position:relative}

/* Sekcja jest już tylko dystansem napędzającym przewijanie — sam kafel
   wisi przypięty (niżej). Bez tego kafel odjeżdżałby razem ze stroną
   i chowania się w bok nie dałoby się zobaczyć. */
.teaser{
  position:relative;z-index:2;
  height:100vh;
  /* każdy kafel to osobna „kartka": przewijanie zatrzymuje się na niej
     i nie przeskakuje dwóch naraz */
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* dalsze sekcje też są punktami zatrzymania — bez tego przy trybie
   mandatory dolna część strony bywa nieosiągalna */
.wide,.foot{scroll-snap-align:start}

/* Przypięta talia kart: wszystkie kafle leżą w tym samym miejscu ekranu,
   widoczny jest zawsze jeden. Prawa krawędź wchodzi pod zdjęcie (--tuck),
   a kadr ma wyższą warstwę, więc kafel chowa się pod fotografią. */
.teaser__card{
  position:fixed;
  left:var(--gap-left);
  top:calc(var(--head-h) + 2vh);
  width:calc(var(--card-right) + var(--tuck) - var(--gap-left));
  height:calc(100vh - var(--head-h) - 5vh);
  display:flex;align-items:center;
  background:var(--card,var(--cream-2));
  /* Tekst w kaflu większy niż bazowe 18 px — grupa odbiorców to seniorzy.
     Uwaga: rem liczy się od <html> (16 px), a nie od body (18 px), więc
     wartość musi przekraczać 1,125rem, żeby w ogóle powiększyć tekst.
     Ustawiamy to na kaflu, nie na akapitach: .lead, .meta i .eyebrow mają
     własne rozmiary, a te zawsze wygrywają z wartością dziedziczoną. */
  font-size:1.2rem;line-height:1.6;
  padding:clamp(38px,4.4vw,80px);
  padding-right:calc(var(--tuck) + clamp(38px,4.4vw,80px));
}

/* Kafel wpływa z lewego dolnego rogu — realnym ruchem po przekątnej,
   nie odsłanianiem. Startuje przesunięty w dół i w lewo, po czym dojeżdża
   na miejsce; wygaszenie towarzyszy ruchowi, żeby wejście nie wyglądało
   jak wjazd zza krawędzi ekranu. Opóźnienie względem zmiany zdjęcia. */
/* Stan wyjściowy: kafel czeka pod dolną krawędzią.
   `visibility` przełącza się dopiero po animacji — inaczej kafel znikałby
   natychmiast, zanim ruch się pokaże. Ukrycie jest tu ważne: bez niego
   niewidoczne kafle łapałyby kliknięcia i wchodziły w kolejność tabulacji. */
.js-ready .teaser__card{
  opacity:0;
  transform:translateY(18vh);
  visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease) .14s,
             transform .75s var(--ease) .14s,
             visibility 0s linear .64s;
  will-change:transform,opacity;
}

/* wpływa od dołu w górę, na miejsce */
.js-ready .teaser.is-in .teaser__card{
  opacity:1;
  transform:none;
  visibility:visible;pointer-events:auto;
  transition:opacity .5s var(--ease) .14s,
             transform .75s var(--ease) .14s,
             visibility 0s;
}

/* chowa się w prawy bok, pod przypięte zdjęcie — bez opóźnienia,
   żeby wyjście zdążyło się rozegrać razem z wejściem następnego kafla */
.js-ready .teaser.is-out .teaser__card{
  opacity:0;
  transform:translateX(26vh);
  visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),
             transform .65s var(--ease),
             visibility 0s linear .65s;
}

.teaser__in{max-width:34rem}

/* tekst wchodzi jeszcze odrobinę później niż kafel */
/* tekst podnosi się w tę samą stronę co kafel — od dołu ku górze */
.js-ready .teaser__in > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .45s var(--ease) .30s, transform .45s var(--ease) .30s;
}
.js-ready .teaser.is-in .teaser__in > *{opacity:1;transform:none}
.js-ready .teaser.is-in .teaser__in > *:nth-child(2){transition-delay:.35s}
.js-ready .teaser.is-in .teaser__in > *:nth-child(3){transition-delay:.40s}
.js-ready .teaser.is-in .teaser__in > *:nth-child(4){transition-delay:.45s}
.js-ready .teaser.is-in .teaser__in > *:nth-child(5){transition-delay:.50s}

.lead{font-size:clamp(1.08rem,1.3vw,1.3rem);margin-bottom:1.8em;opacity:.9}

/* kafel na ciemnym tle */
.teaser--dark{color:#fff}
.teaser--dark .btn--dark{background:#fff;color:var(--ink)}
.teaser--dark .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.teaser--dark :focus-visible{outline-color:#fff}

/* obraz w treści — tylko na wąskich ekranach */
.teaser__pic{display:none}

/* =========================================================
   SEKCJE PEŁNEJ SZEROKOŚCI (ponad przypiętym kadrem)
   ========================================================= */
.wide{position:relative;z-index:6;background:var(--cream);padding:clamp(80px,10vw,150px) 0}
.h-big{font-size:clamp(2.4rem,5.2vw,4.6rem);margin-bottom:.6em;max-width:16em}

.big-links{list-style:none;margin:0 0 clamp(60px,8vw,110px);padding:0;border-top:1px solid var(--line)}
.big-links li{border-bottom:1px solid var(--line)}
.big-links a{
  display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--ink);
  font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;letter-spacing:-.05em;
  padding:.55em 0;transition:padding-left .3s var(--ease),color .2s;
}
.big-links a:hover{padding-left:.28em;color:var(--blue);text-decoration:none}
.big-links a:hover i{transform:translateX(10px)}
.big-links i{
  transition:transform .3s var(--ease);
  width:.9em;height:.9em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.news{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);background:var(--cream-2);border-radius:28px;padding:clamp(30px,4vw,60px)}
.news h3{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.news__form label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.6em}
.news__row{display:flex;flex-wrap:wrap;gap:12px}
.news__row input{flex:1 1 240px;min-height:56px;padding:0 20px;font:inherit;border:2px solid var(--ink);border-radius:100px;background:#fff;color:var(--ink)}
.news__note{font-size:.92rem;margin:.9em 0 0;min-height:1.4em;font-weight:700}

.wide--blue{background:var(--blue);color:#fff}
.wide--blue a{color:#fff}
.wide--blue :focus-visible{outline-color:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin:0 0 40px}
.card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:clamp(24px,2.6vw,36px)}
.card p{color:rgba(255,255,255,.85)}

/* =========================================================
   STOPKA
   ========================================================= */
.foot{position:relative;z-index:6;background:var(--ink);color:var(--cream);padding:clamp(60px,7vw,100px) 0 30px}
.foot a{color:var(--cream);text-decoration:underline;text-underline-offset:.2em}
.foot a:hover{color:var(--yellow)}
.foot :focus-visible{outline-color:var(--yellow)}
.foot h3{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:1.4em}
.foot p{font-size:1rem;line-height:1.8}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
/* wersja pozioma sygnatury, odwrotna — wg specyfikacji do stopki */
.foot__logo{
  --logo:2.6rem;
  display:flex;align-items:center;gap:calc(var(--logo)*.35);
  color:var(--logo-ink-inv);
}
.foot__logo-nazwa{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:300;font-size:var(--logo);line-height:1;letter-spacing:-.015em;
}
.foot__logo-kreska{width:1px;align-self:stretch;background:currentColor;margin:.27em 0}
.foot__logo-rola{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:400;font-size:calc(var(--logo)*.27);
  letter-spacing:.34em;text-transform:uppercase;
}
/* z .foot__claim samo w sobie nie wygrałoby z .foot p (niższa specyficzność),
   stąd typ elementu w selektorze */
.foot p.foot__claim{font-size:1.5rem;font-weight:700;letter-spacing:-.05em;line-height:1.15;margin-top:1.1em;max-width:9em}
.foot__bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(40px,6vw,80px);padding-top:26px;border-top:1px solid rgba(248,242,216,.2);font-size:.9rem;opacity:.75}
.foot__bar p{margin:0}

/* =========================================================
   RESPONSYWNOŚĆ — jedna kolumna, kadr wraca do treści
   ========================================================= */
@media (max-width:1000px){
  :root{--head-h:74px}

  .stage{display:none}
  .nav-desk{display:none}
  .burger{display:flex}

  .site-head__bar{order:2;flex:1;width:auto;justify-content:flex-end;padding:0 clamp(16px,4vw,28px)}
  .brand{--logo:1.6rem;order:1;margin-left:0;justify-content:center;min-height:var(--head-h)}
  .foot__logo{--logo:2rem}

  /* na wąskim ekranie treść ma zmienną wysokość — zatrzaskiwanie
     tylko by przeszkadzało, więc je wyłączamy */
  html{scroll-snap-type:none}
  .teaser{display:block;height:auto;min-height:0;scroll-snap-align:none;padding:0 var(--gap-left) clamp(18px,3vw,28px)}
  .teaser--hero{padding-top:calc(var(--head-h) + 18px)}
  /* kafle wracają do toku strony — bez przypinania i bez talii */
  .teaser__card{
    position:static;width:100%;height:auto;min-height:0;display:block;
    padding:clamp(26px,6vw,44px);
  }
  .teaser__in{max-width:none}

  /* samo wejście od dołu, krótsze. Chowania bokiem tu nie ma: kafle stoją
     jeden pod drugim i przewinięta treść ma zostać widoczna, a nie
     odjeżdżać — dlatego is-out wygląda tak samo jak is-in. Widoczność
     zawsze włączona, inaczej treść zniknęłaby po minięciu środka ekranu. */
  .js-ready .teaser__card{
    transform:translateY(26px);opacity:0;visibility:visible;pointer-events:auto;
    transition:transform .6s var(--ease),opacity .6s var(--ease);
  }
  .js-ready .teaser.is-in .teaser__card,
  .js-ready .teaser.is-out .teaser__card{
    transform:none;opacity:1;visibility:visible;pointer-events:auto;
    transition:transform .6s var(--ease),opacity .6s var(--ease);
  }
  .js-ready .teaser.is-in .teaser__card{transform:none;opacity:1}
  .js-ready .teaser__in > *{transition-delay:.12s}
  .js-ready .teaser.is-in .teaser__in > *:nth-child(n){transition-delay:.18s}

  .teaser__pic{display:block;margin:0 0 clamp(20px,4vw,32px);overflow:hidden;aspect-ratio:4/3}
  .teaser__pic img{width:100%;height:100%;object-fit:cover}
  .teaser--hero .teaser__pic{aspect-ratio:3/4}

  .menu__in{grid-template-columns:1fr;align-content:center;padding-top:calc(var(--head-h) + 20px)}
  .menu__aside{padding-bottom:40px}

  .news{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  body{font-size:17px}
  .foot__grid{grid-template-columns:1fr}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .brand{--logo:1.3rem}
  .foot__logo{--logo:1.7rem}
}

/* =========================================================
   DOSTĘPNOŚĆ
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js-ready .teaser.is-in .teaser__card{transform:none;opacity:1;visibility:visible}
  .js-ready .teaser.is-out .teaser__card{opacity:0;visibility:hidden}
  .js-ready .teaser__in > *{opacity:1;transform:none}
}

@media (prefers-contrast:more){
  :root{--ink-soft:#2a2721;--line:rgba(20,20,20,.5)}
  .eyebrow,.meta,.tiny{opacity:1}
}

@media print{
  .stage,.site-head,.menu{display:none}
  .teaser{min-height:0;display:block}
  .teaser__card{width:100%;background:none!important}
}