*{margin:0;padding:0;box-sizing:border-box}
:root{--ink:#141414;--paper:#fdfcf8;--muted:#5b5b5b;--accent:#2a52c9;--linia:rgba(20,20,20,.14);
  --wob1:255px 15px 225px 15px/15px 225px 15px 255px;
  --wob2:15px 225px 15px 255px/225px 15px 255px 15px}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonty/caveat-700-latin-ext.woff2) format('woff2');
  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';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonty/caveat-700-latin.woff2) format('woff2');
  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:'Kalam';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonty/kalam-400-latin-ext.woff2) format('woff2');
  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:'Kalam';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonty/kalam-400-latin.woff2) format('woff2');
  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:'Kalam';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonty/kalam-700-latin-ext.woff2) format('woff2');
  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:'Kalam';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonty/kalam-700-latin.woff2) format('woff2');
  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}

html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Kalam','Segoe UI',system-ui,sans-serif;
  font-size:19px;line-height:1.62;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle, rgba(20,20,20,.11) 1.1px, transparent 1.1px);
  background-size:22px 22px}
.w{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 20px}
a{color:var(--accent)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:99}

nav.g{display:flex;align-items:center;justify-content:space-between;padding:20px 0;
  border-bottom:2.5px solid var(--ink);margin-bottom:34px}
nav.g .marka{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:20px;
  text-decoration:none;color:var(--ink)}
nav.g .marka svg{width:21px;height:21px}
nav.g a.of{font-family:'Caveat','Segoe UI',sans-serif;font-weight:700;font-size:23px;
  text-decoration:none;background:var(--accent);color:var(--paper);
  padding:7px 17px 4px;border-radius:var(--wob2);transform:rotate(-1deg);display:inline-block}

h1{font-family:'Caveat','Segoe UI',sans-serif;font-weight:700;line-height:1.02;
  font-size:clamp(36px,6.4vw,56px);margin:0 0 14px}
.kat{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.meta{font-size:15px;color:var(--muted);margin-bottom:26px}
.lid{font-family:Georgia,'Times New Roman',serif;font-size:19.5px;line-height:1.6;margin:0 0 30px}

/* Korpus artykulu NIE jest pisany Kalamem, choc cala reszta serwisu tak.
   Kalam to charakter pisma na krotkie zdania sprzedazowe - na osiem minut
   ciaglego czytania meczy oczy i obniza zrozumienie. Georgia jest tu juz
   uzyta (sekcja z opinia na stronie glownej), wiec to nie jest trzeci krój
   z powietrza, tylko ten sam wybor "tekst do czytania" co tam.
   Szkielet strony - nawigacja, naglowki, karty, CTA - zostaje odreczny,
   wiec zeszyt sie nie rozpada. */
article p,article li,.tab,.uwaga,.odp{font-family:Georgia,'Times New Roman',serif}
article p,article li{font-size:18.5px;line-height:1.68}

figure{margin:0 0 34px}
figure img{width:100%;height:auto;display:block;border:2.5px solid var(--ink);border-radius:var(--wob1)}
figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:right}
figcaption a{color:var(--muted)}

article h2{font-family:'Caveat','Segoe UI',sans-serif;font-weight:700;
  font-size:clamp(28px,4.6vw,38px);line-height:1.1;margin:40px 0 6px;color:var(--accent)}
article h3{font-size:21px;font-weight:700;margin:28px 0 6px}
article p{margin:0 0 16px}
article ul,article ol{margin:0 0 18px;padding-left:22px}
article li{margin:0 0 8px}
article strong{font-weight:700}
.odp{border-left:4px solid var(--accent);padding:2px 0 2px 16px;margin:0 0 18px;font-weight:700}
.tab{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:17px}
.tab th,.tab td{border:2px solid var(--ink);padding:9px 12px;text-align:left}
.tab th{font-weight:700;background:rgba(42,82,201,.07)}
.uwaga{border:2.5px dashed var(--accent);border-radius:var(--wob2);padding:14px 18px;
  margin:0 0 22px;background:rgba(42,82,201,.05);font-size:17px}

.cta{border:2.5px solid var(--ink);border-radius:var(--wob1);padding:26px 26px 30px;
  margin:44px 0 10px;text-align:center;transform:rotate(-.4deg)}
.cta h2{font-family:'Caveat','Segoe UI',sans-serif;font-size:32px;color:var(--ink);margin:0 0 10px}
.cta p{font-size:17px;color:var(--muted);max-width:460px;margin:0 auto 18px}
.cta a{font-family:'Caveat','Segoe UI',sans-serif;font-weight:700;font-size:28px;line-height:1;
  text-decoration:none;background:var(--accent);color:var(--paper);
  padding:13px 26px 10px;border-radius:var(--wob2);display:inline-block;transform:rotate(1deg)}

.tez{margin:44px 0 0;border-top:2.5px dashed var(--linia);padding-top:22px}
.tez h2{font-family:'Caveat','Segoe UI',sans-serif;font-size:28px;color:var(--ink);margin:0 0 12px}
.tez a{display:block;margin-bottom:8px}

.lista{display:grid;gap:26px;margin-bottom:40px}
@media(min-width:700px){.lista{grid-template-columns:1fr 1fr}}
.karta{border:2.5px solid var(--ink);border-radius:var(--wob1);overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column}
.karta:nth-child(even){border-radius:var(--wob2)}
.karta img{width:100%;height:170px;object-fit:cover;display:block;border-bottom:2.5px solid var(--ink)}
.karta .in{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.karta h2{font-family:'Caveat','Segoe UI',sans-serif;font-size:27px;line-height:1.06;margin:6px 0 8px}
.karta h2 a{text-decoration:none;color:var(--ink)}
.karta p{font-size:16px;color:var(--muted);flex:1;margin:0 0 12px}
.karta .m{font-size:13px;color:var(--muted)}

footer{border-top:2.5px solid var(--ink);margin-top:56px;padding:26px 0 40px;
  font-size:15px;color:var(--muted)}
footer a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.cta,.cta a,nav.g a.of{transform:none}}