/* dominikbuksa.pl · strona glowna, zajawka w budowie
   Wzorzec: ElementX zaokraglona Home (Figma MQr2DkJG426W0INwId4IaZ, wezel 136:289, 1440x1985)
   Tokeny odczytane z projektu, nie zgadywane. Skala rem 1:1 przy 1440. Zero cieni. */
:root{
  --jasny:#d1d1d1; --ciemny:#0f0f0f; --linia:#1c1c1c; --mgla:#4a96cf;
  --tekst-j:#0f0f0f; --tekst-c:#fff; --limonka:rgb(149,255,10);
  --disp:'Inter',system-ui,sans-serif; --mono:'Geist Mono','SF Mono',monospace;
  --r:1rem; --r-mal:.5rem; --r-pig:999px;
  --odstep:3rem; --blok:1.5rem; --el:.75rem;
  --szklo-tlo:rgba(209,209,209,.06); --szklo-obrys:1px solid rgba(209,209,209,.22);
  --szklo-filtr:blur(2px) url("#refrakcja") saturate(165%) brightness(1.2);
  --szklo-zapas:blur(18px) saturate(180%) brightness(1.2);
  --sp:cubic-bezier(.22,.68,.24,1);
}
html{font-size:clamp(13.5px,1.1111vw,20px)}
*{box-sizing:border-box}
body{margin:0;background:var(--jasny);color:var(--tekst-j);font-family:var(--disp);font-weight:300;
  font-size:.8125rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.04em;line-height:.96}
p{margin:0}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);background:#000;color:#fff;border:0}
.skip:focus{width:auto;height:auto;clip-path:none;padding:.75rem 1.125rem;z-index:99}

/* tlo: szesc rozmytych owali + siatka 48 px */
.mesh{position:fixed;inset:0;overflow:hidden;pointer-events:none;opacity:.1;z-index:0}
.mesh i{position:absolute;width:47.5rem;height:47.5rem;border-radius:50%;background:var(--mgla);filter:blur(8.75rem)}
.mesh i:nth-child(1){left:-16.25rem;top:-16.75rem} .mesh i:nth-child(2){left:43.75rem;top:-16.75rem}
.mesh i:nth-child(3){left:13.75rem;top:-2.6875rem} .mesh i:nth-child(4){left:58.75rem;top:-2.6875rem}
.mesh i:nth-child(5){left:-16.25rem;top:25.4375rem} .mesh i:nth-child(6){left:43.75rem;top:25.4375rem}
.siatka{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;
  background-image:linear-gradient(to right,var(--linia) 1px,transparent 1px),linear-gradient(to bottom,var(--linia) 1px,transparent 1px);
  background-size:3rem 3rem;background-position:1.5rem 0}

/* uklad: sidebar 232 + panel 1184, odstep 8 px, wysokosc okna */
.ekran{position:relative;z-index:1;display:grid;grid-template-columns:14.5rem 1fr;gap:.5rem;
  height:100vh;padding:.5rem;max-width:90rem;margin:0 auto}

/* SIDEBAR jasny, promien 16 */
.sidebar{background:var(--jasny);border:1px solid rgba(15,15,15,.25);border-radius:var(--r);
  padding:1.0625rem 1rem;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto}
.logo{display:flex;align-items:center;gap:.625rem;padding:.25rem 0 .75rem}
.logo span{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:var(--r-mal);
  background:var(--ciemny);color:#fff;font-weight:900;font-size:.6875rem;letter-spacing:-.04em}
.logo b{font-weight:700;font-size:.8125rem;letter-spacing:-.02em}
.grupa{margin:.625rem 0 .125rem;font:500 .6875rem var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.5}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}
.menu a{display:flex;align-items:center;gap:.625rem;height:2.25rem;padding:0 .875rem;border-radius:var(--r);
  border:.5px solid transparent;transition:background .25s,border-color .25s,transform .35s var(--sp)}
.menu a:hover{background:rgba(15,15,15,.06);border-color:rgba(15,15,15,.12)}
.menu a.teraz{background:var(--ciemny);color:#fff;border-color:var(--ciemny)}
.menu a:focus-visible{outline:2px solid var(--ciemny);outline-offset:2px}
.menu .ik{display:grid;place-items:center;width:1rem;height:1rem;flex:0 0 auto}
.menu .ik svg{width:1rem;height:1rem}
.menu .nazwa{flex:1;font-weight:400;font-size:.8125rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu kbd{display:grid;place-items:center;width:1rem;height:1rem;border-radius:.25rem;
  background:rgba(15,15,15,.08);font:500 .6875rem var(--mono);flex:0 0 auto}
.menu a.teraz kbd{background:rgba(255,255,255,.18)}
.menu.male a{height:1.875rem;font-size:.75rem}
.menu .strz{width:.75rem;height:.75rem;opacity:.45;flex:0 0 auto}
.motyw{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:.1875rem;padding:.1875rem;
  background:rgba(15,15,15,.25);border-radius:var(--r)}
.motyw button{height:1.75rem;border:0;border-radius:.8125rem;background:transparent;color:#fff;
  font:400 .6875rem var(--disp);transition:background .25s}
.motyw button:hover{background:rgba(255,255,255,.12)}
.motyw button.teraz{background:var(--jasny);color:var(--ciemny);font-weight:700}
.motyw button:focus-visible{outline:2px solid var(--jasny);outline-offset:1px}

/* PANEL ciemny, przewija sie wewnetrznie */
.panel{position:relative;background:var(--ciemny);border:1px solid rgba(15,15,15,.25);border-radius:var(--r);
  color:var(--tekst-c);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.panel::-webkit-scrollbar{width:.5rem}
.panel::-webkit-scrollbar-thumb{background:rgba(209,209,209,.22);border-radius:999px}
.kropki{position:sticky;top:0;z-index:3;display:flex;gap:.375rem;align-items:center;justify-content:center;
  height:2.5rem;background:var(--jasny);border-radius:var(--r) var(--r) 0 0}
.kropki i{width:.1875rem;height:.1875rem;border-radius:50%;background:rgba(15,15,15,.3)}
.tresc{padding:1.5rem 2.375rem 3rem;max-width:70rem}
.stan{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:var(--r-pig);
  background:var(--szklo-tlo);border:var(--szklo-obrys);backdrop-filter:var(--szklo-filtr);-webkit-backdrop-filter:var(--szklo-filtr);
  font:400 .6875rem var(--mono);letter-spacing:.02em;color:rgba(255,255,255,.8)}
.dioda{width:.375rem;height:.375rem;border-radius:50%;background:var(--limonka);flex:0 0 auto;
  animation:tetno 2.2s ease-in-out infinite}
@keyframes tetno{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
h1{margin:1.25rem 0 .75rem;font-size:6.25rem;letter-spacing:-.05em}
.intro{font-size:1.125rem;font-weight:300;color:rgba(255,255,255,.82);max-width:45rem}
.chip{display:inline-flex;align-items:center;gap:.4375rem;margin-left:.375rem;padding:.1875rem .625rem;
  border-radius:var(--r-pig);background:var(--szklo-tlo);border:var(--szklo-obrys);
  font:400 .75rem var(--mono);color:rgba(255,255,255,.9);white-space:nowrap}
.chip .kropka{width:.375rem;height:.375rem;border-radius:50%;background:var(--limonka)}

/* siedem kart wprowadzajacych, kazda do zamkniecia */
.karty{display:grid;grid-template-columns:repeat(4,1fr);gap:.0625rem;margin:2rem 0 0;
  border:var(--szklo-obrys);border-radius:var(--r);overflow:hidden;background:rgba(209,209,209,.1)}
.karta{position:relative;min-height:6.0625rem;padding:.875rem 2.125rem .875rem 1rem;background:var(--ciemny);
  transition:background .3s,opacity .45s var(--sp),transform .45s var(--sp)}
.karta:hover{background:#151516}
.karta h2{font-size:.8125rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.3125rem}
.karta p{font-size:.75rem;color:rgba(255,255,255,.62);line-height:1.45}
.karta.znika{opacity:0;transform:scale(.96)}
.zamknij{position:absolute;top:.5rem;right:.5rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;
  border:0;border-radius:.375rem;background:transparent;color:rgba(255,255,255,.4);transition:background .2s,color .2s}
.zamknij svg{width:.75rem;height:.75rem}
.zamknij:hover{background:rgba(255,255,255,.1);color:#fff}
.zamknij:focus-visible{outline:2px solid var(--limonka);outline-offset:1px}
.karty.pusto{display:none}

.cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;height:2.75rem;padding:0 1.25rem;border-radius:var(--r-pig);
  border:var(--szklo-obrys);background:var(--szklo-tlo);backdrop-filter:var(--szklo-filtr);-webkit-backdrop-filter:var(--szklo-filtr);
  font-weight:700;font-size:.8125rem;letter-spacing:-.01em;color:#fff;
  transition:background .3s,color .3s,transform .35s var(--sp)}
.btn:hover{background:rgba(209,209,209,.16);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--limonka);outline-offset:3px}
.btn.glowny{background:var(--jasny);color:var(--ciemny);border-color:var(--jasny)}
.btn.glowny:hover{background:#fff}
.btn .strz{width:.875rem;height:.875rem}

.sekcja{margin-top:2.5rem}
.sekcja header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.875rem}
.sekcja h2{font-size:1.1875rem;font-weight:700;letter-spacing:-.02em}
.wszystko{display:inline-flex;align-items:center;gap:.375rem;padding:.3125rem .625rem;border-radius:var(--r-mal);
  border:var(--szklo-obrys);font:400 .8125rem var(--disp);color:rgba(255,255,255,.8);transition:background .25s}
.wszystko:hover{background:rgba(209,209,209,.12);color:#fff}
.wszystko:focus-visible{outline:2px solid var(--limonka);outline-offset:2px}
.wkrotce,.licznik{font:500 .6875rem var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:.25rem .5rem;border-radius:var(--r-mal);background:var(--szklo-tlo);border:var(--szklo-obrys);color:rgba(255,255,255,.7)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.g4.male{grid-template-columns:repeat(6,1fr)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.kafel{padding:1.0625rem;border:var(--szklo-obrys);border-radius:var(--r);background:var(--szklo-tlo);
  transition:background .3s,transform .4s var(--sp)}
.kafel:hover{background:rgba(209,209,209,.12)}
.kafel .data{font:500 .6875rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.5rem}
.kafel h3{font-size:.875rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.375rem}
.kafel .opis{font-size:.75rem;color:rgba(255,255,255,.6);line-height:1.45}
.kafel.akt{min-height:10.4375rem;display:flex;flex-direction:column}
.kafel.akt .opis{margin-top:auto}
.kafel.pusty{min-height:11.5rem;display:flex;flex-direction:column;gap:.75rem;border-style:dashed}
.kafel.pusty .plama{flex:1;border-radius:var(--r-mal);background:repeating-linear-gradient(45deg,rgba(209,209,209,.05) 0 .5rem,transparent .5rem 1rem)}
.kafel.narz{min-height:5.25rem}
.kafel.kontakt:hover{transform:translateY(-2px)}
.stopka{margin-top:3rem;padding-top:1.5rem;border-top:var(--szklo-obrys)}
.stopka p{font-size:.75rem;color:rgba(255,255,255,.5);max-width:34rem}

/* pigulka stanu, przyklejona */
.pigulka{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:.625rem;height:2.25rem;padding:0 .875rem;border-radius:var(--r-pig);
  background:rgba(15,15,15,.78);border:1px solid rgba(255,255,255,.14);color:#fff;
  backdrop-filter:var(--szklo-filtr);-webkit-backdrop-filter:var(--szklo-filtr);
  font:400 .75rem var(--mono);letter-spacing:.02em}
.pigulka b{font-weight:500}
.pigulka .sep{width:1px;height:.875rem;background:rgba(255,255,255,.2)}
.pigulka a{color:var(--limonka);border-bottom:1px solid transparent}
.pigulka a:hover{border-color:var(--limonka)}
@supports not (backdrop-filter:url(#refrakcja)){
  .stan,.chip,.btn,.pigulka{backdrop-filter:var(--szklo-zapas);-webkit-backdrop-filter:var(--szklo-zapas)}
}
/* motyw jasny: panel zostaje ciemny, tlo i sidebar jasniejsze */
html[data-motyw="light"]{--jasny:#e8e8e8}
html[data-motyw="dark"]{--jasny:#1a1a1b;--tekst-j:#f0f0f0}
html[data-motyw="dark"] .sidebar{border-color:rgba(255,255,255,.14)}
html[data-motyw="dark"] .menu a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
html[data-motyw="dark"] .menu a.teraz{background:#f0f0f0;color:#0f0f0f;border-color:#f0f0f0}
html[data-motyw="dark"] .menu kbd{background:rgba(255,255,255,.12)}
html[data-motyw="dark"] .logo span{background:#f0f0f0;color:#0f0f0f}
html[data-motyw="dark"] .kropki{background:#1a1a1b}
html[data-motyw="dark"] .kropki i{background:rgba(255,255,255,.28)}
html[data-motyw="dark"] .motyw button.teraz{background:#f0f0f0}

@media (max-width:1199.98px){
  h1{font-size:4.25rem} .karty{grid-template-columns:1fr 1fr} .g4{grid-template-columns:1fr 1fr}
  .g4.male{grid-template-columns:repeat(3,1fr)} .tresc{padding:1.25rem 1.5rem 2.5rem}
}
@media (max-width:809.98px){
  body{overflow:auto}
  .ekran{grid-template-columns:1fr;height:auto;gap:.5rem}
  .sidebar{order:2;overflow:visible}
  .panel{order:1;overflow:visible;min-height:auto}
  .karty{grid-template-columns:1fr} .g4,.g4.male,.g2{grid-template-columns:1fr}
  h1{font-size:2.75rem} .intro{font-size:1rem} .btn{width:100%;justify-content:space-between}
  .motyw{margin-top:1rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== WIDOKI PODSTRON: wspolny uklad, zmienia sie tylko panel ===== */
.kontekst{position:sticky;top:2.5rem;z-index:2;margin:0 2.375rem;padding:.4375rem 1rem;
  border-radius:var(--r-pig);background:var(--szklo-tlo);border:var(--szklo-obrys);
  backdrop-filter:var(--szklo-filtr);-webkit-backdrop-filter:var(--szklo-filtr);
  font:500 .75rem var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.82);width:max-content}
.tresc h1{margin:1.25rem 0 .75rem;font-size:3.25rem;letter-spacing:-.04em}
.tresc .lead{max-width:44rem;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.78);font-weight:300}
.tresc .lead + .lead{margin-top:.875rem}
.grupa-li{list-style:none}
.jezyk{margin-left:auto;display:grid;place-items:center;width:1.875rem;height:1.5rem;border-radius:var(--r-mal);
  background:rgba(15,15,15,.1);border:1px solid rgba(15,15,15,.14);
  font:600 .6875rem var(--mono);letter-spacing:.04em;transition:background .25s}
.jezyk:hover{background:rgba(15,15,15,.2)}
.jezyk:focus-visible{outline:2px solid var(--ciemny);outline-offset:2px}
html[data-motyw="dark"] .jezyk{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.logo a{display:block}
.nazwa.male{font-size:.75rem;opacity:.86}
.odp{margin-top:var(--el);font:400 .75rem var(--mono);color:rgba(255,255,255,.55)}

/* O MNIE: lista wpisow z data po prawej */
.lista-wpisow{display:flex;flex-direction:column}
.wpis{display:grid;grid-template-columns:1fr 6rem;gap:1rem;align-items:start;
  padding:1.125rem 0;border-top:var(--szklo-obrys)}
.wpis:first-child{border-top:0}
.wpis .data{grid-column:2;text-align:right;font:400 .75rem var(--mono);color:rgba(255,255,255,.5);white-space:nowrap}
.wpis .wt{grid-column:1;grid-row:1}
.wpis h3{font-size:.875rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.25rem}
.wpis .opis{font-size:.8125rem;color:rgba(255,255,255,.6);line-height:1.45}
.lista-wierszy{display:flex;flex-direction:column}
.wiersz{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:1rem 0;border-top:var(--szklo-obrys)}
.wiersz:first-child{border-top:0}
.wiersz .rok{font:400 .8125rem var(--mono);color:rgba(255,255,255,.55)}
.wiersz h3{font-size:.875rem;font-weight:700;margin-bottom:.1875rem}
.wiersz .opis{font-size:.8125rem;color:rgba(255,255,255,.6)}
.narz-grupy{display:flex;flex-direction:column;gap:1.25rem}
.stos-narz .etykieta{font:500 .6875rem var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:.5rem}
.ikonki{display:flex;flex-wrap:wrap;gap:.375rem}
.narz-chip{padding:.3125rem .625rem;border-radius:var(--r-mal);background:var(--szklo-tlo);
  border:var(--szklo-obrys);font-size:.75rem;color:rgba(255,255,255,.86)}

/* PROJEKTY: karta rozsuwana */
.projekty{display:flex;flex-direction:column;gap:.75rem;margin-top:1.75rem}
.projekt{border:var(--szklo-obrys);border-radius:var(--r);overflow:hidden;background:var(--szklo-tlo);
  transition:background .3s}
.projekt:hover{background:rgba(209,209,209,.1)}
.pr-karta{display:grid;grid-template-columns:20rem 1fr;gap:1.5rem;width:100%;padding:1rem;
  border:0;background:none;text-align:left;cursor:pointer;align-items:center}
.pr-karta:focus-visible{outline:2px solid var(--limonka);outline-offset:-3px;border-radius:var(--r)}
.pr-obraz{display:block;border-radius:var(--r-mal);overflow:hidden;background:#111;aspect-ratio:16/10}
.pr-obraz img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--sp)}
.projekt:hover .pr-obraz img{transform:scale(1.03)}
.pr-info{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.pr-chipy{display:flex;flex-wrap:wrap;gap:.3125rem}
.pr-chipy span{padding:.1875rem .5rem;border-radius:var(--r-pig);background:rgba(209,209,209,.1);
  border:var(--szklo-obrys);font:500 .625rem var(--mono);letter-spacing:.05em;color:rgba(255,255,255,.72);white-space:nowrap}
.pr-tytul{display:block;font-family:var(--disp);font-weight:900;font-size:1.5rem;line-height:1.1;
  letter-spacing:-.03em;color:#fff}
.pr-tytul.dlugi{font-size:1.0625rem;font-weight:700;line-height:1.3;letter-spacing:-.015em}
.pr-meta{display:block;font:400 .8125rem var(--mono);color:rgba(255,255,255,.55)}
.pr-rozwin{display:inline-flex;align-items:center;gap:.375rem;margin-top:.25rem;
  font:500 .75rem var(--disp);color:var(--limonka)}
.pr-rozwin .chev{width:.875rem;height:.875rem;transition:transform .4s var(--sp)}
.projekt.otwarty .pr-rozwin .chev{transform:rotate(180deg)}
.pr-tresc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--sp)}
.projekt.otwarty .pr-tresc{grid-template-rows:1fr}
.pr-wnetrze{overflow:hidden;min-height:0;padding:0 1rem}
.projekt.otwarty .pr-wnetrze{padding:0 1rem 1.375rem}
.pr-wnetrze .lead{max-width:none;font-size:.875rem;line-height:1.55}
.pr-wnetrze .fakty{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.125rem;
  padding-top:1.125rem;border-top:var(--szklo-obrys)}
.pr-wnetrze .fakty b{display:block;font-family:var(--disp);font-weight:700;font-size:1.375rem;
  letter-spacing:-.025em;color:#fff}
.pr-wnetrze .fakty span{display:block;margin-top:.1875rem;font-size:.75rem;color:rgba(255,255,255,.6);max-width:13rem}
.wiecej{margin-top:1.5rem;font:400 .8125rem var(--mono);color:rgba(255,255,255,.45)}

/* TEKSTY i LEKTURY: stany puste */
.teksty-karty{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.75rem}
.tekst-karta{padding:1.125rem;border:var(--szklo-obrys);border-radius:var(--r);background:var(--szklo-tlo)}
.tekst-karta.pusta{border-style:dashed;display:flex;flex-direction:column;gap:.75rem;min-height:11rem}
.tekst-karta .plama{flex:1;border-radius:var(--r-mal);
  background:repeating-linear-gradient(45deg,rgba(209,209,209,.05) 0 .5rem,transparent .5rem 1rem)}
.tekst-karta h3{font-size:.875rem;font-weight:700}
.teksty-siatka{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}
.tekst-wiersz{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.875rem 1rem;border:var(--szklo-obrys);border-radius:var(--r);background:var(--szklo-tlo)}
.tekst-wiersz.pusty{border-style:dashed;color:rgba(255,255,255,.45)}
.tekst-wiersz .tytul{font-size:.8125rem}
.tag{padding:.1875rem .5rem;border-radius:var(--r-mal);background:rgba(209,209,209,.08);
  font:500 .625rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.lektury-siatka{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1.75rem}
.lektura{display:flex;gap:.75rem;padding:1rem;border:var(--szklo-obrys);border-radius:var(--r);
  background:var(--szklo-tlo);min-height:5.8125rem}
.lektura.pusta{border-style:dashed}
.lektura .favi{width:1rem;height:1rem;border-radius:.25rem;background:rgba(209,209,209,.12);flex:0 0 auto;margin-top:.125rem}
.lektura h3{font-size:.8125rem;font-weight:700;margin-bottom:.375rem;color:rgba(255,255,255,.7)}

/* NARZEDZIA */
.narzedzie{padding:1.0625rem;border:var(--szklo-obrys);border-radius:var(--r);background:var(--szklo-tlo);
  min-height:10.4375rem;display:flex;flex-direction:column;gap:.5rem;transition:background .3s,transform .4s var(--sp)}
.narzedzie:hover{background:rgba(209,209,209,.12);transform:translateY(-2px)}
.narzedzie .ikona{display:grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:.5rem;
  background:rgba(209,209,209,.12);font:900 .875rem var(--disp);color:#fff}
.narzedzie h3{font-size:.9375rem;font-weight:700;letter-spacing:-.01em}
.narzedzie .opis{font-size:.75rem;color:rgba(255,255,255,.6);line-height:1.45;margin-top:auto}

@media (max-width:1199.98px){
  .pr-karta{grid-template-columns:14rem 1fr;gap:1rem}
  .lektury-siatka{grid-template-columns:1fr 1fr}
  .tresc h1{font-size:2.5rem}
}
@media (max-width:809.98px){
  .kontekst{margin:0 1.125rem;top:2.25rem}
  .pr-karta{grid-template-columns:1fr;gap:.875rem}
  .pr-tytul{font-size:1.25rem} .pr-tytul.dlugi{font-size:.9375rem}
  .teksty-karty,.teksty-siatka,.lektury-siatka{grid-template-columns:1fr}
  .wpis{grid-template-columns:1fr}
  .wpis .data{grid-column:1;grid-row:2;text-align:left;margin-top:.25rem}
  .wiersz{grid-template-columns:1fr;gap:.25rem}
  .tresc h1{font-size:2rem}
  .pr-wnetrze .fakty{gap:1.125rem}
}