/* ==========================================================================
   Tydzien Uwaznosci z Mysia Gryzinska - warstwa wizualna landingu

   Jezyk wizualny przeniesiony wprost z e-bookow dobroSTART 2025:
   kroje (League Spartan + Lato + pismo reczne), paleta probkowana z okladki,
   ziarnisty papier, recznie rysowane ramki, bordiura z lisci jako przekladka.
   ========================================================================== */

/* ---------- fonty ----------------------------------------------------------
   League Spartan i Lato to kroje, ktorymi zlozone sa e-booki (sprawdzone
   w metadanych obu PDF-ow). Caveat stoi w miejscu ElementarzDwa - kroju
   elementarzowego z ksiazek, ktory jest komercyjny; role ma te sama, czyli
   nazwy dni i etykiety pisane recznie.
   Kazda rodzina w dwoch podzbiorach (latin + latin-ext), zakresy unicode-range
   przepisane z arkusza CSS2 Google Fonts.                                   */

/* League Spartan jest fontem zmiennym: jeden plik obsluguje cala os wagi
   100-900, wiec deklarujemy zakres zamiast osobnych plikow na 700 i 900. */
@font-face{font-family:'League Spartan';src:url(../fonts/leaguespartan-var.woff2)format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'League Spartan';src:url(../fonts/leaguespartan-var-ext.woff2)format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Lato;src:url(../fonts/lato-400.woff2)format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;src:url(../fonts/lato-400-ext.woff2)format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;src:url(../fonts/lato-700.woff2)format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;src:url(../fonts/lato-700-ext.woff2)format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;src:url(../fonts/lato-400i.woff2)format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;src:url(../fonts/lato-400i-ext.woff2)format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Caveat;src:url(../fonts/caveat-700.woff2)format('woff2');
  font-weight:700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Caveat;src:url(../fonts/caveat-700-ext.woff2)format('woff2');
  font-weight:700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* ---------- zetony -------------------------------------------------------
   Kolory zdjete probnikiem wprost z okladki e-booka (najczestsze wartosci
   pikseli): czerwien tytulu #BF2F2B, krem #EAE2D8. Tekst jest czarny, tak
   jak w ksiazce - nie granatowy.                                           */
:root{
  --papier:#EFC3A2;
  --papier-jasny:#F8E2CE;
  --papier-ciemny:#E3A97F;
  --czerwien:#BF2F2B;
  --czerwien-cien:#8E211F;
  --pomarancz:#E8792B;
  --zielen:#00913F;
  --zloto:#F0B323;
  --zolc:#FBD345;
  --oliwka:#828F24;
  --braz:#6B4E42;
  --atrament:#1A1A1A;
  --atrament-cichy:#5B5049;
  --krem:#EAE2D8;
  --biel:#fff;

  --cien-miekki:0 10px 34px rgba(107,78,66,.16);
  --cien-karta:0 14px 40px rgba(107,78,66,.14);
  --cien-medalion:0 18px 60px rgba(107,78,66,.30);

  --tempo:cubic-bezier(.22,.61,.36,1);
  --szpalta:min(1140px,92vw);
  --pas-lisci:clamp(52px,7vw,86px);
}

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

html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:Lato,system-ui,sans-serif;
  font-size:clamp(1rem,.97rem + .2vw,1.1rem);
  line-height:1.75;
  color:var(--atrament);
  background:var(--papier-jasny);
  overflow-x:hidden;
}

/* Ziarno papieru. W e-bookach faktura jest wyrazna, ale wystepuje na tlach -
   biel medalionu i kart jest w ksiazce czysta. Nakladka przez multiply na
   calej stronie brudzila te biele na szaro, dlatego krycie jest niskie:
   na brzoskwiniowym tle ziarno widac, na bieli praktycznie nie.
   pointer-events:none, zeby nie przechwytywala klikniec. */
body::after{
  content:'';position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.2;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23z)' opacity='.42'/%3E%3C/svg%3E");
}

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

::selection{background:var(--zolc);color:var(--atrament)}

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


/* ---------- typografia ---------------------------------------------------
   League Spartan Black wersalikami to tytul z okladki. Krojem tym skladamy
   wylacznie naglowki - w tekscie ciaglym jest nieczytelny.                  */
h1,h2,h3{
  font-family:'League Spartan',Lato,sans-serif;
  color:var(--czerwien);
  margin:0 0 .55em;
  text-wrap:balance;
}
h1{font-weight:900;font-size:clamp(2.4rem,6.5vw,4.6rem);line-height:.92;
   letter-spacing:-.015em;text-transform:uppercase}
h2{font-weight:900;font-size:clamp(1.85rem,4.2vw,3rem);line-height:1.02;
   letter-spacing:-.012em;text-transform:uppercase}
h3{font-weight:700;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.2;
   letter-spacing:-.005em;color:var(--braz)}

p{margin:0 0 1.1em}
strong{font-weight:700}
a{color:var(--czerwien);text-decoration-thickness:.09em;text-underline-offset:.18em}
a:hover{color:var(--pomarancz)}

/* Nadtytul pisany recznie - odpowiednik pomaranczowego "Zadanie 1"
   z e-booka, ktore zapowiada, co bedzie sie dzialo nizej. */
.nadtytul{
  font-family:Caveat,cursive;font-weight:700;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  color:var(--pomarancz);line-height:1;margin:0 0 .15em;
}

.wiodacy{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);color:var(--atrament-cichy);
  max-width:58ch;margin-bottom:1.6rem}

.cytat{
  font-family:Caveat,cursive;font-weight:700;
  font-size:clamp(1.55rem,3vw,2.25rem);
  line-height:1.25;color:var(--zielen);
  margin:1.8rem 0;padding-left:1.4rem;
  border-left:5px solid var(--zolc);
}

.srodek{width:var(--szpalta);margin-inline:auto}
.wysrodkowany{text-align:center;margin-inline:auto}
.waski{max-width:58ch}


/* ---------- sekcje -------------------------------------------------------
   Odstepy trzyma wylacznie klasa .sekcja. Swiadomie nie stylujemy elementu
   <section>, zeby nie tworzyc pary selektorow o roznej specyficznosci,
   ktore zaczna sie nawzajem znosic przy wyjatkach.                          */
/* Kazda sekcja to osobny "ekran": zajmuje co najmniej cala wysokosc okna, a jej
   tresc siedzi w pionie na srodku. Dzieki temu na telefonie nastepna sekcja nie
   podglada juz zza dolnej krawedzi poprzedniej - zeby ja zobaczyc, trzeba
   przewinac. svh (maly viewport) zamiast vh: na telefonie pasek adresu nie
   docina wtedy dolu ekranu. min-height, nie height, wiec sekcje z nadmiarem
   tresci (siedem kart mocy) rosna swobodnie ponad ekran. */
.sekcja{padding:clamp(3.5rem,8vw,7rem) 0;position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center}
.sekcja--krem{background:var(--krem)}
.sekcja--biel{background:var(--biel)}
.sekcja--papier{background:linear-gradient(180deg,var(--papier-jasny),var(--papier))}

.naglowek-sekcji{max-width:60ch;margin:0 auto clamp(2.2rem,4vw,3.4rem);text-align:center}
.naglowek-sekcji .wiodacy{margin-inline:auto}


/* ---------- bordiura z lisci jako przekladka -----------------------------
   Ten sam pasek, ktory w e-booku zamyka kazda strone od dolu.

   Nad lisciami pasek jest przezroczysty, wiec musi lezec NA sekcji, a nie
   miedzy sekcjami. Ustawiony miedzy nimi pokazywalby w przeswitach tlo
   <body>, ktore nie zgadza sie z zadna z sasiadek - i zamiast przekladki
   powstawal trzeci pas koloru. Ujemny margines wsuwa pasek w sasiada:
   wersja podstawowa (liscie rosna w gore) wchodzi w sekcje nad soba,
   odwrocona (liscie zwisaja w dol) w sekcje pod soba. Sekcje maja na tyle
   duze wciecia, ze pasek nie siega tresci.                                 */
.liscie{height:var(--pas-lisci);
  background:url(../img/bordiur-liscie.webp) repeat-x bottom/auto 100%;
  position:relative;z-index:3;
  margin-top:calc(-1 * var(--pas-lisci));margin-bottom:0}
.liscie--gora{transform:scaleY(-1);
  margin-top:0;margin-bottom:calc(-1 * var(--pas-lisci))}


/* ---------- nawigacja ---------------------------------------------------- */
.nawigacja{position:sticky;top:0;z-index:60;
  background:rgba(248,226,206,.86);backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(107,78,66,.14)}
.nawigacja__pas{display:flex;align-items:center;gap:1.5rem;justify-content:space-between;
  padding:.55rem 0}
.nawigacja__logo{height:clamp(26px,3.4vw,36px);width:auto}
.nawigacja__lista{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nawigacja__lista a{
  font-family:'League Spartan',sans-serif;font-weight:700;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.02em;
  color:var(--atrament);text-decoration:none;padding:.35rem 0;
  border-bottom:3px solid transparent;transition:color .2s var(--tempo),border-color .2s var(--tempo)}
.nawigacja__lista a:hover{color:var(--czerwien)}
.nawigacja__lista a.aktywna{color:var(--czerwien);border-bottom-color:var(--zloto)}

/* Przycisk menu jest potrzebny wylacznie na waskim ekranie - i tylko wtedy,
   gdy dziala JavaScript, bo to on przelacza aria-expanded. */
.nawigacja__przelacznik{display:none}

/* Hamburger: trzy kreski z jednego elementu (srodkowa to on sam, skrajne to
   pseudoelementy). Po otwarciu srodkowa gasnie, a skrajne skladaja sie w X. */
.nawigacja__kreski,
.nawigacja__kreski::before,
.nawigacja__kreski::after{
  display:block;width:22px;height:2.5px;border-radius:2px;
  background:currentColor;transition:transform .22s var(--tempo),opacity .15s linear}
.nawigacja__kreski{position:relative}
.nawigacja__kreski::before,.nawigacja__kreski::after{content:'';position:absolute;left:0}
.nawigacja__kreski::before{top:-7px}
.nawigacja__kreski::after{top:7px}
.nawigacja__przelacznik[aria-expanded="true"] .nawigacja__kreski{background:transparent}
.nawigacja__przelacznik[aria-expanded="true"] .nawigacja__kreski::before{transform:translateY(7px) rotate(45deg)}
.nawigacja__przelacznik[aria-expanded="true"] .nawigacja__kreski::after{transform:translateY(-7px) rotate(-45deg)}

@media(max-width:780px){
  /* Wariant bez JavaScriptu: lista zostaje w pasku, tylko ciasniej upakowana.
     Chowanie jej bez przycisku, ktory potrafi ja wydobyc, odcieloby nawigacje
     calkowicie - a to ta sama pulapka, ktora opisuje ruch.js. */
  .nawigacja__lista{gap:.3rem .85rem;justify-content:flex-end;flex:1}
  .nawigacja__lista a{font-size:.78rem;padding:.15rem 0;border-bottom-width:2px}

  /* Wysokosc przycisku to pole dotyku, nie ozdoba: 42 px to minimum, w ktore
     palec trafia bez celowania. Pasek nie rosnie przez to wyzej, bo oddaje
     mu swoje wlasne wciecie. */
  .ruch .nawigacja__pas{padding-block:.2rem}
  .ruch .nawigacja__przelacznik{
    display:inline-flex;align-items:center;gap:.6rem;
    font-family:'League Spartan',sans-serif;font-weight:700;font-size:.82rem;
    text-transform:uppercase;letter-spacing:.08em;
    color:var(--atrament);background:transparent;border:0;
    min-height:44px;padding:0 .2rem 0 .6rem;cursor:pointer}
  .ruch .nawigacja__przelacznik:hover{color:var(--czerwien)}

  /* Panel wysuwa sie spod paska. Zwiniety jest niewidoczny takze dla
     klawiatury (visibility, nie samo opacity), wiec tabulator nie wpada
     w odnosniki, ktorych nie widac. */
  .ruch .nawigacja__lista{
    position:absolute;top:100%;left:0;right:0;
    /* jedna kolumna na cala szerokosc - bez tego siatka dziedziczy
       justify-content z wariantu paskowego i sciska pozycje do prawej */
    display:grid;grid-template-columns:1fr;justify-content:normal;gap:0;flex:none;
    background:var(--papier-jasny);
    border-bottom:2px solid rgba(107,78,66,.14);
    box-shadow:var(--cien-miekki);
    padding:.2rem clamp(1rem,4vw,2rem) .6rem;
    visibility:hidden;opacity:0;translate:0 -10px;
    transition:opacity .2s var(--tempo),translate .2s var(--tempo),visibility .2s}
  .ruch .nawigacja__przelacznik[aria-expanded="true"]+.nawigacja__lista{
    visibility:visible;opacity:1;translate:0}

  .ruch .nawigacja__lista li+li{border-top:1px solid rgba(107,78,66,.14)}
  .ruch .nawigacja__lista a{
    display:block;font-size:1rem;padding:.85rem .2rem;
    border-bottom:0;border-left:4px solid transparent;padding-left:.9rem}
  .ruch .nawigacja__lista a.aktywna{border-left-color:var(--zloto)}
}


/* ---------- przyciski ---------------------------------------------------- */
.przycisk{
  display:inline-block;
  font-family:'League Spartan',sans-serif;font-weight:800;
  font-size:clamp(1rem,1.6vw,1.15rem);text-transform:uppercase;letter-spacing:.015em;
  text-decoration:none;text-align:center;
  color:var(--biel);background:var(--czerwien);
  padding:1rem 2.3rem;border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 6px 0 var(--czerwien-cien),0 12px 26px rgba(143,33,31,.28);
  transition:transform .14s var(--tempo),box-shadow .14s var(--tempo),background .2s}
.przycisk:hover{color:var(--biel);transform:translateY(3px);
  box-shadow:0 3px 0 var(--czerwien-cien),0 8px 18px rgba(143,33,31,.3)}
.przycisk:active{transform:translateY(6px);box-shadow:0 0 0 var(--czerwien-cien)}
.przycisk:disabled{background:#C4B6A9;box-shadow:0 6px 0 #A2948A;cursor:not-allowed;transform:none}
.przycisk--zloty{background:var(--pomarancz);box-shadow:0 6px 0 #B35204,0 12px 26px rgba(179,82,4,.28)}
.przycisk--zloty:hover{box-shadow:0 3px 0 #B35204,0 8px 18px rgba(179,82,4,.3)}


/* ==========================================================================
   HERO - okladka e-booka odbudowana jako scena z warstw
   ========================================================================== */
/* Dolne wciecie robi miejsce dla bordiury z lisci, ktora wchodzi na hero
   od dolu - inaczej liscie sieglyby przycisku. */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(.4rem,1.4vw,1rem) 0 var(--pas-lisci);
  /* Hero to pierwszy pelny ekran. Scena (wieniec z Mysia) jest kwadratowa,
     wiec na waskim, wysokim telefonie nigdy nie wypelni ekranu sama - reszte
     wysokosci rozkladamy rowno nad i pod nia (justify-content:center), zeby
     wieniec wisial spokojnie na srodku, a nie tuz pod paskiem menu. */
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  /* Rozjasnienie tla siedzi tam, gdzie stanie wieniec - dzieki temu wolna
     przestrzen wokol niego czyta sie jak swiadoma poswiata kadrujaca scene,
     a nie jak pusty margines u gory. Srodek podaje --ognisko: na szerokim
     ekranie wyzej, na telefonie dokladnie za wiencem (patrz reguly nizej). */
  --ognisko:42%;
  background:
    radial-gradient(ellipse 78% 58% at 50% var(--ognisko),var(--papier-jasny),transparent 72%),
    linear-gradient(170deg,var(--papier) 0%,var(--papier-ciemny) 100%);
}

/* Rogi zostaja puste. Byly tam przygaszone drzewa jako kulisy, ale odbieraly
   wiencowi skale: oko czytalo trzy plamy zamiast jednego kola. Teraz cala
   szerokosc pracuje na scene, wiec sama scena moze byc znacznie wieksza. */
.hero__scena{
  position:relative;z-index:2;
  width:min(840px,94vw);margin:0 auto;
  aspect-ratio:1/1;
  display:grid;place-items:center;
}

/* Wieniec: bordiura z lisci zawinieta w pierscien (narzedzia/ekstrakcja_hero.py) */
.hero__wieniec{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:1;
  filter:drop-shadow(0 14px 30px rgba(107,78,66,.28));
  animation:obrot 260s linear infinite;
  transform-origin:50% 50%;
}

/* Medalion: bialy krazek z cienkim ciemnym pierscieniem - dokladnie jak
   na okladce, gdzie nachodzi na wewnetrzne liscie wienca. */
.hero__medalion{
  position:relative;z-index:3;
  width:62%;aspect-ratio:1;border-radius:50%;
  background:var(--biel);
  border:3px solid var(--atrament);
  box-shadow:var(--cien-medalion),inset 0 0 0 9px var(--biel),inset 0 0 0 11px rgba(26,26,26,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* Uwaga: procenty w padding licza sie od szerokosci sceny, a nie od samego
     medalionu - dlatego wartosci wygladaja na male. Wciecie musi byc na tyle
     duze, zeby najszersze wiersze (logotyp, przycisk) miescily sie w kole
     takze na wysokosci swoich krancow, gdzie cieciwa jest juz krotsza.
     Wciecie dolne jest wieksze od gornego: tresc przesuwa sie przez to
     w gore, a w dolnej czesci kola zostaje puste biale pole, na ktore
     wchodzi Mysia - dokladnie jak na okladce e-booka. */
  padding:7% 10% 11%;
}
/* Logotyp dobroSTART z medalionu wypadl - stoi w pasku nawigacji i w stopce,
   a w kole zabieral miejsce tytulowi. Tytul wraca przez to do roli, ktora
   nalezy mu sie na okladce: jest najwiekszym napisem w srodku. */
.hero__tytul{
  font-size:clamp(1.35rem,4.4vw,2.65rem);
  letter-spacing:0;
  line-height:.98;margin:0 0 .35em;color:var(--czerwien);
}
.hero__z-mysia{
  font-family:'League Spartan',sans-serif;font-weight:500;
  font-size:clamp(.8rem,2.5vw,1.5rem);
  color:var(--atrament);margin:0 0 .6em;letter-spacing:-.01em;
}
/* Wiersze z tasma i terminem maja wlasne klasy tylko po to, zeby odstepy
   w medalionie dalo sie skrocic na telefonie po jednym. Domyslny margines
   akapitu (1,1em) jest liczony od kroju tekstu, a nie od tych napisow, wiec
   w kole robi sie z niego kilkadziesiat pikseli powietrza. */
.hero__dla{margin:0 0 1.1em}
.hero__kiedy{margin:0 0 1.1em}
/* Etykieta na tasmie - w e-booku slowo "Przedszkole" jest naklejone
   paskiem washi pod tytulem. */
.washi{
  display:inline-block;
  font-family:Caveat,cursive;font-weight:700;
  font-size:clamp(.85rem,2.2vw,1.35rem);line-height:1.1;
  color:var(--braz);background:rgba(234,226,216,.95);
  padding:.16em 1.1em;
  box-shadow:0 1px 0 rgba(107,78,66,.18);
  transform:rotate(-1.4deg);
}
.washi::before,.washi::after{content:'';display:inline-block;width:0}

/* Termin razem z numerem edycji w jednym wierszu - w kole liczy sie kazdy
   wiersz, a jedno i drugie i tak czyta sie razem. Bez plakietki: zolte pole
   dokladalo w srodku kola trzeci prostokat obok tasmy i przycisku. Zielen
   jest tu jedynym sladem koloru marki, odkad logotyp wyprowadzil sie
   z medalionu. */
.hero__termin{
  display:inline-block;margin:.7em 0 0;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(.66rem,1.55vw,.95rem);text-transform:uppercase;letter-spacing:.07em;
  color:var(--zielen)}

.hero__akcja{margin:1.15em 0 0}
.przycisk--medalion{
  font-size:clamp(.6rem,1.35vw,.95rem);
  padding:.85em 1.7em;
  box-shadow:0 5px 0 var(--czerwien-cien),0 10px 22px rgba(143,33,31,.28)}
.przycisk--medalion:hover{box-shadow:0 2px 0 var(--czerwien-cien),0 7px 16px rgba(143,33,31,.3)}

/* Postacie sceny. Mysia wychodzi ponizej wienca i konczy w bordiurze
   z lisci - stoi w nich po kolana, zamiast byc ucieta prosta kreska. */
.hero__mysia{
  position:absolute;z-index:4;
  bottom:-9%;left:50%;
  width:clamp(140px,27%,265px);
  transform:translateX(-50%);
  animation:oddech 7s ease-in-out infinite;
  filter:drop-shadow(0 12px 22px rgba(107,78,66,.3))}

/* Pan Pulapka zwisa na nici, po prawej stronie wienca.
   Nic jest pseudoelementem wisiora, wiec buja sie razem z pajakiem jako
   jedna sztywna calosc, obracana wokol punktu zaczepienia u gory.

   Wlasna nic pseudoelementu przedluza nic, ktora jest juz namalowana
   w sprite: ta biegnie od gornej krawedzi obrazka w dol i ma dokladnie
   4 z 300 px szerokosci, srodkiem na 45,2% szerokosci. Stad te ulamkowe
   procenty - dociagniete "na oko" do srodka i pomalowane na szaro dawaly
   dwie rozne nici, ktore sie nie spotykaly. */
.hero__wisior{
  --nic:clamp(26px,6vw,74px);
  position:absolute;z-index:4;top:-1%;right:4%;
  width:clamp(96px,22%,200px);padding-top:var(--nic);
  transform-origin:45.2% 0;
  animation:hustawka 6.5s ease-in-out infinite}
.hero__wisior::before{
  content:'';position:absolute;top:0;left:44.7%;
  width:1.34%;height:calc(var(--nic) + 1px);background:#fff}
.hero__pulapka{width:100%;filter:drop-shadow(0 8px 14px rgba(107,78,66,.28))}

/* Pan Pulapka i Pani Bzyk sa w tej scenie aktorami, nie ozdoba - to oni
   towarzysza Dzieciom przez caly tydzien. Dlatego sa duzi i zostaja
   widoczni takze na telefonie. Pani Bzyk patrzy w prawo, wiec stoi po lewej
   stronie wienca - inaczej odlatywalaby od sceny zamiast w nia. */
.hero__bzyk{
  position:absolute;z-index:4;top:11%;left:3%;
  width:clamp(100px,23%,210px);
  animation:fruwanie 8s ease-in-out infinite;
  filter:drop-shadow(0 8px 14px rgba(107,78,66,.26))}

/* Paralaksa. Przesuniecie idzie wlasciwoscia translate, a nie transform,
   bo transform jest tu juz zajety przez animacje (obrot wienca, oddech Mysi,
   hustawka Pana Pulapki). translate sklada sie z transformem zamiast go
   nadpisywac, wiec obie rzeczy dzialaja naraz bez przeliczania w JS. */
[data-warstwa]{translate:var(--px,0) var(--py,0)}

/* Telefon rzadzi sie tu inna arytmetyka niz szeroki ekran. Wszystkie napisy
   w medalionie siedza juz na dolnych krancach swoich clamp-ow, wiec wysokosc
   tekstu przestaje maleć razem z ekranem - a kolo maleje dalej. Efekt: tresc
   rozpychala medalion w jajko (264 x 306 px przy szerokosci 390), a przycisk
   zjezdzal na uszy Mysi. Lekarstwem jest skrocenie odstepow miedzy wierszami,
   a nie dalsze powiekszanie kola: dopiero wtedy tresc miesci sie w okregu
   i zostaje pod nia biale pole, w ktorym staje Mysia. */
@media(max-width:640px){
  /* Na telefonie wieniec stoi w pionie na srodku hero, wiec i poswiata schodzi
     za jego srodek. */
  .hero{padding-top:0;--ognisko:48%}

  /* Gorne 5,5% grafiki wienca to czysta przezroczystosc (kanal alfa jest
     pusty az do 50. wiersza z 900), wiec podciagniecie sceny o tyle w gore
     nie chowa ani jednego liscia - zabiera tylko pusty pas miedzy paskiem
     nawigacji a sloncem. */
  .hero__scena{margin-top:-5.5%}

  .hero__medalion{width:76%;padding:5% 8% 19%;line-height:1.35}
  .hero__tytul{margin-bottom:.3em}
  .hero__z-mysia{margin-bottom:.5em}
  .hero__dla{margin-bottom:.5em}
  .hero__kiedy{margin-bottom:0}
  .hero__termin{margin-top:.5em}
  .hero__akcja{margin-top:.85em}

  .hero__mysia{width:clamp(110px,25%,265px);bottom:-13%}
  /* Scena stoi wyzej, wiec pajak dostaje dluzsza nic zamiast wisiec
     przy samym pasku nawigacji. */
  .hero__wisior{width:clamp(78px,18%,200px);top:4%}
  .hero__bzyk{width:clamp(80px,19%,210px)}
}


/* ---------- liczniki ----------------------------------------------------- */
.liczniki{display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:820px;margin-inline:auto}
.licznik{
  background:var(--biel);border-radius:28px;padding:2rem 1.5rem 1.8rem;text-align:center;
  box-shadow:var(--cien-karta);border-bottom:7px solid var(--zloto);
  display:flex;flex-direction:column;align-items:center}
.licznik__obraz{height:clamp(96px,14vw,140px);width:auto;margin-bottom:.6rem}
.licznik__liczba{
  font-family:'League Spartan',sans-serif;font-weight:900;
  font-size:clamp(3.2rem,8vw,5rem);line-height:.9;color:var(--czerwien);
  margin:0;font-variant-numeric:tabular-nums}
.licznik__opis{
  font-family:'League Spartan',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.88rem;
  color:var(--braz);margin:.35rem 0 0}


/* ---------- rozkladowka: tekst obok ilustracji ---------------------------
   Rytm e-booka - strona tekstu, obok pelnoszpaltowa ilustracja.            */
.rozkladowka{display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.rozkladowka__tekst>:last-child{margin-bottom:0}
.rozkladowka__obraz{justify-self:center;max-width:min(420px,100%)}
.rozkladowka__obraz img{filter:drop-shadow(0 18px 34px rgba(107,78,66,.24))}
/* odwrocenie kolejnosci na szerokich ekranach, bez zmiany kolejnosci w HTML */
@media(min-width:820px){
  .rozkladowka--odwrotna .rozkladowka__obraz{order:-1}
}

.okladka-ebooka{border-radius:18px;box-shadow:var(--cien-karta);
  transform:rotate(-1.6deg);transition:transform .4s var(--tempo)}
.okladka-ebooka:hover{transform:rotate(0) scale(1.02)}

/* Fotografia miedzy rysunkami. Zeby nie wypadla z reszty strony, dostaje te
   sama nierowna ramke co pola zadan w e-booku i lekki przechyl - jak zdjecie
   przyklejone do zeszytu. Selektor jest scalony z rodzicem swiadomie: musi
   zdjac drop-shadow ustawiony wyzej dla ilustracji z kanalem alfa, ktory na
   prostokatnym zdjeciu dublowalby sie z cieniem ramki. */
.rozkladowka__obraz .portret{
  filter:none;
  border:3px solid var(--atrament);
  border-radius:44px 34px 48px 38px/38px 48px 34px 44px;
  box-shadow:var(--cien-karta);
  transform:rotate(1.5deg);transition:transform .4s var(--tempo)}
.rozkladowka__obraz .portret:hover{transform:rotate(0) scale(1.02)}


/* ---------- ramka rysowana odreczna --------------------------------------
   W e-booku pola z zadaniami obrysowane sa podwojna, nierowna kreska.
   Odtwarzamy ja dwiema ramkami o roznych, asymetrycznych promieniach -
   dzieki temu zaden rog nie jest identyczny z pozostalymi.                  */
.ramka{
  position:relative;
  background:var(--biel);
  border:2.5px solid var(--atrament);
  border-radius:46px 38px 50px 40px/40px 50px 38px 46px;
  padding:clamp(1.5rem,3.5vw,2.4rem);
}
.ramka::before{
  content:'';position:absolute;inset:6px;pointer-events:none;
  border:1.5px solid var(--atrament);opacity:.45;
  border-radius:40px 48px 36px 46px/48px 38px 46px 40px;
}
.ramka>:last-child{margin-bottom:0}

.wskazowka{
  background:#FFF6EC;border:2.5px solid var(--pomarancz);
  border-radius:34px 28px 36px 30px/30px 36px 28px 34px;
  padding:clamp(1.2rem,3vw,1.8rem) clamp(1.3rem,3vw,1.9rem);
  margin:1.8rem 0}
.wskazowka>:last-child{margin-bottom:0}


/* ==========================================================================
   SIEDEM SUPERMOCY - uklad niesie tresc: 5 dni w placowce, 2 w domu
   ========================================================================== */
/* Siedem kart w jednej siatce: piec kolumn na dni w placowce, kolumna cezury,
   dwie kolumny na weekend. Wszystkie karty maja te sama szerokosc, bo dziela
   ten sam uklad odstepow. Naglowki grup i cezura maja pozycje jawne, karty
   dosypuja sie automatycznie do drugiego wiersza, omijajac zajeta kolumne. */
.tydzien-pas{display:grid;align-items:start;
  grid-template-columns:repeat(5,1fr) auto repeat(2,1fr);
  gap:.75rem clamp(.65rem,1.1vw,1.1rem)}

.grupa-dni__tytul{grid-row:1}
.grupa-dni__tytul--placowka{grid-column:1/6}
.grupa-dni__tytul--weekend{grid-column:7/9}
.cezura{grid-row:1/3;grid-column:6}
.moc{grid-row:2}

/* Cezura miedzy piatkiem a sobota - pionowa kreska z podpisem. To jedyne
   miejsce, gdzie uklad mowi cos, czego nie mowi tekst: weekend jest inny,
   bo dzieje sie w domu z rodzicami. */
.cezura{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  padding:0 clamp(.2rem,.8vw,.7rem)}
.cezura__kreska{flex:1;width:3px;background:repeating-linear-gradient(180deg,
  var(--braz) 0 9px,transparent 9px 18px);opacity:.45;border-radius:2px}
.cezura__podpis{
  font-family:Caveat,cursive;font-weight:700;font-size:1.15rem;
  color:var(--braz);writing-mode:vertical-rl;text-orientation:mixed;
  letter-spacing:.04em;white-space:nowrap}

.grupa-dni__tytul{
  font-family:'League Spartan',sans-serif;font-weight:700;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--braz);
  margin:0 0 .9rem;text-align:center}

.moc{
  background:var(--biel);border-radius:24px;padding:1.3rem .9rem 1.5rem;
  text-align:center;box-shadow:var(--cien-miekki);
  display:flex;flex-direction:column;height:100%;
  border-bottom:5px solid var(--zloto);
  transition:transform .3s var(--tempo),box-shadow .3s var(--tempo)}
.moc:hover{transform:translateY(-6px);box-shadow:var(--cien-karta)}
.moc--weekend{border-bottom-color:var(--zielen);background:#FBFAF7}
.moc__dzien{
  font-family:Caveat,cursive;font-weight:700;
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1;
  color:var(--czerwien);margin:0 0 .5rem}
.moc--weekend .moc__dzien{color:var(--zielen)}
.moc__obraz{height:clamp(90px,11vw,150px);display:flex;align-items:center;justify-content:center;
  margin-bottom:.8rem}
.moc__obraz img{max-height:100%;width:auto}
.moc__etykieta{
  display:block;font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--pomarancz);margin-bottom:.2rem}
.moc__nazwa{
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(.82rem,1.15vw,.98rem);line-height:1.22;
  letter-spacing:-.005em;color:var(--atrament);margin:auto 0 0}

/* Ponizej 1050 px piec kolumn robi z kart waskie slupki, wiec siatka
   splaszcza sie do trzech kolumn, a cezura - ktora ma sens tylko jako
   pionowa przerwa w rzedzie - ustepuje miejsca naglowkom grup. Kolejnosc
   w HTML jest juz czytelna sama z siebie, wiec wystarczy zdjac pozycje. */
@media(max-width:1050px){
  .tydzien-pas{grid-template-columns:repeat(3,1fr);gap:1rem}
  .grupa-dni__tytul{grid-row:auto;grid-column:1/-1;margin-top:.6rem}
  .grupa-dni__tytul--placowka{margin-top:0}
  .moc{grid-row:auto}
  .cezura{display:none}
}
@media(max-width:640px){
  .tydzien-pas{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:400px){
  .tydzien-pas{grid-template-columns:1fr}
}


/* ---------- formularz ---------------------------------------------------- */
.formularz{
  background:var(--biel);border-radius:32px;
  padding:clamp(1.6rem,4vw,3rem);
  box-shadow:var(--cien-karta);max-width:660px;margin-inline:auto;
  border-bottom:7px solid var(--zloto)}
.pole{margin-bottom:1.25rem}
.pole label{display:block;font-weight:700;margin-bottom:.35rem;color:var(--atrament)}
.pole input,.pole select{
  width:100%;padding:.9rem 1.05rem;font:inherit;color:var(--atrament);
  background:#FCFAF6;border:2px solid #DCD2C7;border-radius:16px;
  transition:border-color .2s,box-shadow .2s}
.pole input:hover,.pole select:hover{border-color:#C3B6A8}
.pole input:focus,.pole select:focus{
  outline:none;border-color:var(--pomarancz);box-shadow:0 0 0 4px rgba(232,121,43,.2)}
.pole--blad input,.pole--blad select{border-color:var(--czerwien);background:#FDF1F0}
.pole__blad{color:var(--czerwien);font-size:.9rem;font-weight:700;margin:.35rem 0 0}
.pole__blad:empty{display:none}

.zgoda{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1rem;
  font-size:.95rem;line-height:1.55;cursor:pointer}
.zgoda input{margin-top:.3rem;width:22px;height:22px;flex:0 0 auto;
  accent-color:var(--czerwien);cursor:pointer}
.zgoda--blad{color:var(--czerwien)}

/* Pole-pulapka na boty. Nie uzywamy display:none ani type=hidden - czesc
   botow je pomija; ma byc w ukladzie, ale poza ekranem. */
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.brakujace{font-size:.92rem;color:var(--braz);margin:.8rem 0 0;min-height:1.4em}

.komunikat{border-radius:22px;padding:1.2rem 1.5rem;margin-bottom:1.5rem;font-weight:700}
.komunikat--ok{background:#E7F5EC;border:2.5px solid var(--zielen);color:#0B5B2C}
.komunikat--blad{background:#FDF1F0;border:2.5px solid var(--czerwien);color:var(--czerwien-cien)}

.formularz__stopka{font-size:.9rem;color:var(--atrament-cichy);margin:1.2rem 0 0}


/* ==========================================================================
   KSIEGARNIA - zaproszenie na mysiagryzinska.pl
   Zielen jest tu po to, zeby oko wiedzialo, ze zaczyna sie cos innego niz
   kolejny akapit o programie - ale przygaszona, spod skoszonej trawy.
   Pelna zielen dobroSTART na calym polu krzyczala mocniej niz cokolwiek
   innego na stronie i rozbijala jej spokojny rytm; zostaje w naglowku,
   gdzie robi ta sama robote na kilkuset pikselach zamiast na kilkuset
   tysiacach.
   ========================================================================== */
.ksiegarnia{
  background:
    radial-gradient(ellipse 66% 50% at 50% 62%,rgba(255,255,255,.5),transparent 72%),
    linear-gradient(168deg,#E4EDD6 0%,#D2E0BF 100%);
  text-align:center;overflow:hidden;
  /* The leaf border above the footer grows up into this section; keep the
     button clear of it on narrow screens. */
  padding-bottom:calc(clamp(2rem,4vw,3rem) + var(--pas-lisci))}
.ksiegarnia h2{color:#2F6B33}

/* Polka: okladki stoja lekko przechylone, kazda w inna strone, tak jak
   ksiazki oparte o siebie na regale. Po najechaniu prostuja sie i unosza. */
.polka{
  list-style:none;margin:0 auto;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:clamp(1.2rem,3.5vw,2.8rem)}
.polka__ksiazka{width:min(240px,68vw)}
.polka__ksiazka img{
  width:100%;border-radius:4px 10px 10px 4px;
  box-shadow:0 16px 34px rgba(74,86,52,.30),-3px 0 0 rgba(255,255,255,.6);
  transition:transform .45s var(--tempo),box-shadow .45s var(--tempo)}
.polka__ksiazka:nth-child(1) img{transform:rotate(-3.2deg)}
.polka__ksiazka:nth-child(2) img{transform:rotate(1.1deg)}
.polka__ksiazka:nth-child(3) img{transform:rotate(3.4deg)}
.polka__ksiazka img:hover{
  transform:rotate(0) translateY(-10px) scale(1.03);
  box-shadow:0 26px 46px rgba(74,86,52,.38),-3px 0 0 rgba(255,255,255,.75)}

.ksiegarnia__akcja{margin:clamp(2.2rem,4vw,3rem) 0 0}


/* ---------- stopka ------------------------------------------------------- */
.stopka{background:var(--atrament);color:#E4DED6;padding:clamp(2.5rem,5vw,3.8rem) 0 1.6rem;
  font-size:.94rem;position:relative;z-index:2}
.stopka a{color:var(--zolc)}
.stopka a:hover{color:var(--zloto)}
/* Zageszczenie wierszy dotyczy wylacznie bloku z danymi organizatora.
   Napisane szerzej, jako `.stopka p`, bilo specyficznoscia (0,1,1) we
   wszystkie pozniejsze klasy jednoczlonowe - .stopka__tytul i .autorka
   tracily przez to swoje odstepy, choc w arkuszu stoja nizej. */
.stopka__marka p{margin:0 0 .35em}

.stopka__pas{display:grid;gap:2rem clamp(2rem,5vw,4rem);align-items:start;
  grid-template-columns:1.6fr 1fr}
@media(max-width:520px){.stopka__pas{grid-template-columns:1fr}}

.stopka__logo{width:150px;margin-bottom:.9rem}
.stopka__program{font-weight:700;color:#F4EFE8}
.stopka__cicho{color:#9E958C;font-size:.88rem}

.stopka__tytul{
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:#9E958C;margin:0 0 .9em}

.stopka__lista{list-style:none;margin:0;padding:0;display:grid;gap:.55em}

/* Ikona i podpis jako jedna linia bazowa: ikona nie moze skakac przy
   zawijaniu tekstu, wiec siedzi we flexie z wyrownaniem do gory. */
.stopka__odnosnik{display:inline-flex;align-items:flex-start;gap:.6em;
  text-decoration:none;line-height:1.5}
.stopka__odnosnik:hover{text-decoration:underline}
.stopka__odnosnik--bierny{color:#9E958C;font-size:.88rem}
.ikona{flex:0 0 auto;margin-top:.15em;opacity:.85}

/* Patrons strip, right-aligned (the illustrator credit moved to .stopka__dol).
   Znaki patronow na bialych podkladkach - oba logotypy sa ciemne albo
   czerwone i na czarnej stopce zniknelyby. Podkladka jest rozwiazaniem
   technicznym, a nie ozdoba, wiec jest maksymalnie cicha: bialy prostokat
   z zaokraglonym rogiem i nic wiecej. */
.uznania{
  display:flex;flex-wrap:wrap;gap:2rem clamp(2rem,5vw,4rem);
  align-items:center;justify-content:flex-end;
  margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid rgba(228,222,214,.16)}
.patronat__tytul{
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;
  color:#B8AFA5;margin:0 0 .9em;text-align:right}
.patroni{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;
  justify-content:flex-end}
.patroni__znak{
  display:flex;align-items:center;justify-content:center;
  background:var(--biel);border-radius:18px;padding:1rem 1.6rem;
  height:clamp(84px,9vw,104px);transition:transform .25s var(--tempo)}
.patroni__znak img{max-height:100%;width:auto}
.patroni__znak--kwadrat{padding:.7rem 1.1rem}
/* A wide, flat wordmark at full pad height outweighs the other marks. */
.patroni__znak--plaski{padding-block:1.75rem}
.patroni__znak:hover{transform:translateY(-4px)}

/* Podpis autorki ilustracji. Cala strona stoi na rysunkach Justyny
   Wojtowicz - od okladki e-booka po ikony dni - wiec jej nazwisko dostaje
   wlasny pas i krój pisany recznie, ten sam, ktorym w ksiazkach podpisane
   sa dni tygodnia. */
.autorka{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.2em .5em;margin:0}
.autorka .ikona{width:26px;height:26px;opacity:.6;align-self:center;margin:0}
.autorka__wstep{color:#B8AFA5;font-size:.95rem}
.autorka__nazwisko{
  font-family:Caveat,cursive;font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.35rem);line-height:1;
  color:var(--zolc)}

.stopka__dol{
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
  align-items:center;
  margin-top:clamp(1.8rem,3.5vw,2.6rem);padding-top:1.3rem;
  border-top:1px solid rgba(228,222,214,.16)}
.stopka__dol p{margin:0}


/* ---------- strony pomocnicze (regulamin, komunikaty) -------------------- */
.karta-komunikat{
  background:var(--biel);border-radius:32px;box-shadow:var(--cien-karta);
  padding:clamp(2rem,5vw,3.5rem);max-width:660px;
  margin:clamp(2rem,8vw,5rem) auto;text-align:center;
  border-bottom:7px solid var(--zloto)}
.karta-komunikat__obraz{max-width:220px;margin:0 auto 1.5rem}
.karta-komunikat__akcja{margin-top:2rem}

.dokument{max-width:min(78ch,92vw);padding-block:clamp(2rem,5vw,3.5rem)}
.dokument h2{font-size:clamp(1.4rem,3vw,2rem);margin-top:2.4rem}
.dokument h3{margin-top:1.8rem}
.dokument ol,.dokument ul{padding-left:1.4rem}
.dokument li{margin-bottom:.45em}
.dokument code{background:var(--krem);padding:.1em .4em;border-radius:6px;font-size:.92em}
.dokument__wersja{margin-top:3rem;font-size:.9rem;color:var(--braz)}


/* ==========================================================================
   RUCH
   Zasada: strona ma uspokajac, a nie migotac. Wszystkie animacje sa dlugie
   i lagodne, zadna nie zapetla sie szybciej niz w 6 sekund.
   ========================================================================== */
@keyframes oddech{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%    {transform:translateX(-50%) translateY(-10px) scale(1.018)}
}
@keyframes obrot{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hustawka{
  0%,100%{transform:rotate(-3.2deg)}
  50%    {transform:rotate(3.2deg)}
}
@keyframes fruwanie{
  0%,100%{transform:translate(0,0) rotate(-4deg)}
  33%    {transform:translate(-10px,-14px) rotate(3deg)}
  66%    {transform:translate(8px,-6px) rotate(-2deg)}
}

/* Odslanianie sekcji przy przewijaniu. Chowamy wylacznie pod klasa .ruch,
   ktora dokleja ruch.js jeszcze przed pierwszym malowaniem. Bez dzialajacego
   JavaScriptu regula ponizej w ogole nie wchodzi, wiec cala tresc - w tym
   formularz zapisu - jest widoczna od razu. */
.ruch .odslon{opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--tempo),transform .75s var(--tempo)}
.ruch .odslon.widoczna{opacity:1;transform:none}
.odslon--zwloka-1{transition-delay:.09s}
.odslon--zwloka-2{transition-delay:.18s}
.odslon--zwloka-3{transition-delay:.27s}
.odslon--zwloka-4{transition-delay:.36s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ruch .odslon{opacity:1;transform:none}
  .hero__wieniec,.hero__mysia,.hero__wisior,.hero__bzyk{animation:none}
}

@media print{
  .nawigacja,.liscie,body::after{display:none}
  body{background:#fff}
}