:root{ --ink:#151717; --dim:#8a9aa2; --dim2:#5a6363; --line:rgba(21,23,23,.12); --paper:#fff; }
*{box-sizing:border-box}
html{font-size:.5208333333vw}
@media(max-width:400px){html{font-size:10px}}
@media(min-width:1920px){html{font-size:2.6666666667vw}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Instrument Sans",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:88rem;margin:0 auto;padding:0 3.2rem}
a{color:inherit}

header.site-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site-nav .inner{max-width:73.6rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.6rem 3.2rem}
.brand{font-weight:800;font-size:1.9rem;text-decoration:none;color:var(--ink);letter-spacing:-.02em}
.nav-cta{background:var(--ink);color:#fff;border-radius:2.2rem;padding:.9rem 1.8rem;font-size:1.35rem;font-weight:700;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:#000}

article{padding:6.4rem 0 4rem}
.kicker{font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim2)}
h1{font-size:clamp(3.6rem,5vw,5.8rem);font-weight:700;letter-spacing:-.015em;line-height:1.1;margin:1.4rem 0 2.6rem}
p.lede{font-size:2.8rem;line-height:1.55;color:var(--dim2);margin:0 0 3.6rem}
h2{font-size:3.7rem;font-weight:700;letter-spacing:-.01em;margin:5.2rem 0 1.8rem;scroll-margin-top:9rem}
p{font-size:2.4rem;line-height:1.65;color:#1f2323;margin:0 0 2.4rem}
ol,ul{padding-left:2.2rem}
li{font-size:2.4rem;margin-bottom:1.4rem;line-height:1.6}
li b{font-weight:700}
b,strong{font-weight:700}
i{font-style:italic}

.toc{border:1px solid var(--line);border-radius:1.4rem;padding:2.4rem 2.8rem;margin:0 0 3.6rem}
.toc .toc-title{font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim2);margin-bottom:1.4rem;display:block}
.toc ol{margin:0;padding-left:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;font-size:2rem;margin-bottom:0;border-top:1px solid var(--line);padding:1.2rem 0;display:flex;gap:1.4rem}
.toc li:first-child{border-top:none}
.toc li:before{content:counter(toc,decimal-leading-zero);color:var(--dim);font-variant-numeric:tabular-nums;font-size:1.3rem;padding-top:.2rem}
.toc a{text-decoration:none;font-weight:600}
.toc a:hover{color:var(--dim2)}

.stat-row{display:grid;grid-template-columns:12rem 1fr;gap:2.4rem;align-items:baseline;border-top:1px solid var(--line);padding:2.6rem 0}
.stat-row:first-of-type{border-top:1px solid var(--line);margin-top:2.8rem}
.stat-row .n{font-size:4rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-row .l{font-size:2rem;color:var(--dim2);line-height:1.6}
.src{font-size:1.6rem;color:var(--dim);margin:-1.2rem 0 2.4rem;border-bottom:1px solid var(--line);padding-bottom:2.4rem}

.flag{border:1.5px solid var(--ink);border-radius:1.4rem;padding:2.2rem 2.4rem;margin:2rem 0 3rem}
.flag .flag-title{font-weight:700;margin-bottom:.6rem;display:block;font-size:1.6rem}
.flag p{margin:0;font-size:2rem;color:var(--dim2)}

.cta-box{background:var(--ink);color:#fff;border-radius:1.6rem;padding:4rem;margin-top:5rem;text-align:center}
.cta-box p{color:#c7cdd0;margin:0 0 1.8rem;font-size:2.2rem}
.cta-box a{display:inline-block;background:#fff;color:var(--ink);text-decoration:none;font-weight:700;padding:1.3rem 2.8rem;border-radius:2.4rem;font-size:1.5rem}

.author-box{display:flex;align-items:center;gap:2rem;border-top:1px solid var(--line);margin-top:5rem;padding-top:3.2rem}
.author-box .avatar{width:5.6rem;height:5.6rem;border-radius:999px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;flex:none}
.author-box .name{font-size:2.1rem;font-weight:700;margin-bottom:.3rem}
.author-box .role{font-size:1.8rem;color:var(--dim2)}

footer{padding:3.6rem 0 6rem;color:var(--dim);font-size:1.3rem;text-align:center;border-top:1px solid var(--line);margin-top:4rem}
footer a{color:var(--dim2);text-decoration:underline}

.czas-czytania{display:inline-block;margin-left:1.2rem;color:var(--dim);font-weight:600}
.przeczytaj-tez{border-top:1px solid var(--line);margin-top:5rem;padding-top:3.2rem}
.przeczytaj-tez .pt-naglowek{font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim2);margin-bottom:2rem}
.przeczytaj-tez a{display:block;text-decoration:none;font-size:2.3rem;font-weight:700;padding:1.6rem 0;border-top:1px solid var(--line)}
.przeczytaj-tez a:first-of-type{border-top:none}
.przeczytaj-tez a:hover{color:var(--dim2)}
.przeczytaj-tez span{display:block;font-size:1.8rem;font-weight:400;color:var(--dim2);margin-top:.4rem}

/* ===== TELEFON: typografia zeskalowana do normalnych rozmiarow =====
   Na waskich ekranach 1rem = 10px, wiec desktopowe 2.4rem dawaloby 24px
   tekstu podstawowego — za duzo. Ten blok dziala TYLKO ponizej 640px;
   wersja na laptopa pozostaje nietknieta. */
@media (max-width: 640px){
  .wrap{padding:0 2rem}
  .kicker{font-size:1.2rem}
  h1{font-size:2.8rem;margin:1rem 0 1.8rem}
  p.lede{font-size:1.8rem;line-height:1.55;margin-bottom:2.6rem}
  h2{font-size:2.2rem;margin:3.6rem 0 1.4rem}
  h3{font-size:1.8rem}
  p{font-size:1.6rem;line-height:1.65;margin-bottom:1.8rem}
  li{font-size:1.6rem;margin-bottom:1rem;line-height:1.6}
  .toc li{font-size:1.5rem;padding:1rem 0}
  .toc li:before{font-size:1.1rem}
  .stat-row .n{font-size:2.6rem}
  .stat-row .l{font-size:1.4rem}
  .src{font-size:1.3rem}
  .flag .flag-title{font-size:1.4rem}
  .flag p{font-size:1.5rem}
  .cta-box p{font-size:1.6rem}
  .cta-box a{font-size:1.4rem;padding:1.1rem 2.2rem}
  .author-box .name{font-size:1.7rem}
  .author-box .role{font-size:1.4rem}
  .author-box .avatar{width:4.4rem;height:4.4rem;font-size:1.6rem}
  .przeczytaj-tez a{font-size:1.7rem;padding:1.2rem 0}
  .przeczytaj-tez span{font-size:1.4rem}
  .przeczytaj-tez .pt-naglowek{font-size:1.3rem}
  footer{font-size:1.2rem}
}