/* Blog planzajec.fun: wyglad artykulow i listy wpisow. Ladowany tylko na /blog/, po seo.css.
   uklad inspirowany: https://gwern.net/sidenote i https://practicaltypography.com/line-length.html
   (wziete: metryczka z etykietami pod tytulem, spis tresci na marginesie, szeryfowy tekst w waskiej
   kolumnie, wstawki oznaczone etykieta zamiast kolorowego paska, poprzedni/nastepny na dole). */

body.blog{
  --acc:#8DA8EE; --amber:#E0954A;
  --ink:#DCDFE8; --ink-2:#A3A9B8; --rule:rgba(255,255,255,.10); --rule-2:rgba(255,255,255,.2);
  --serif:"Source Serif 4","Iowan Old Style",Charter,Georgia,serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono-b:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --col:42rem;
}
html[data-theme="light"] body.blog{
  --acc:#2F5BD3; --amber:#B8661A;
  --ink:#1B1E2B; --ink-2:#565C6E; --rule:rgba(16,18,32,.12); --rule-2:rgba(16,18,32,.24);
}
body.blog :focus-visible{outline-color:var(--acc);border-radius:0}

/* naglowek strony: pelne tlo zamiast rozmycia + pasek postepu czytania na dolnej krawedzi */
body.blog header.top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.read-progress span{display:block;height:100%;background:var(--amber);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- artykul ---------- */
.post{display:grid;grid-template-columns:minmax(0,var(--col));justify-content:center;padding-top:8px}
.post-head{padding:18px 0 28px;border-bottom:1px solid var(--rule)}
.kicker{font:600 12px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:0 0 14px}
.kicker a{text-decoration:none;color:inherit}
.post-head h1{font:600 clamp(31px,5.4vw,46px)/1.12 var(--serif);letter-spacing:-.012em;margin:0 0 16px;text-wrap:balance}
.post-head .lead{font:400 clamp(18px,2.3vw,21px)/1.55 var(--serif);color:var(--ink-2);margin:0 0 24px}
.post-meta{display:flex;flex-wrap:wrap;gap:14px 34px;margin:0;font:14px/1.4 var(--ui)}
.post-meta dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:5px}
.post-meta dd{margin:0;color:var(--tx);display:flex;align-items:center;gap:8px;min-height:26px}
.post-meta dd img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.post-meta a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}

/* spis tresci: na telefonie rozwijany, na szerokim ekranie na lewym marginesie */
.toc-m{margin:22px 0 0;border:1px solid var(--rule);font:15px/1.45 var(--ui)}
.toc-m summary{cursor:pointer;padding:13px 16px;display:flex;justify-content:space-between;gap:12px;font-weight:600;list-style:none}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary span{font-weight:400;color:var(--soft)}
.toc-m summary::after{content:"+";color:var(--ink-2);margin-left:auto;padding-left:12px}
.toc-m[open] summary::after{content:"\2212"}
.toc-m ol{margin:0;padding:4px 16px 14px 40px;border-top:1px solid var(--rule)}
.toc-m li{margin:8px 0;color:var(--soft)}
.toc-m a{color:var(--ink);text-decoration:none}
.post-toc{display:none}

/* tresc */
.post-body{padding-top:8px;counter-reset:sec}
.post-body .prose{max-width:none;font:400 19px/1.66 var(--serif);color:var(--ink)}
.post-body .prose p{margin:0 0 20px}
.post-body .prose h2{counter-increment:sec;font:600 clamp(25px,3.4vw,30px)/1.2 var(--serif);letter-spacing:-.01em;color:var(--tx);margin:58px 0 16px;scroll-margin-top:96px}
.post-body .prose h2::before{content:counter(sec,decimal-leading-zero);display:block;font:500 12px/1 var(--mono-b);letter-spacing:.08em;color:var(--soft);margin-bottom:12px}
.post-body .prose h2:first-child{margin-top:36px}
.post-body .prose h3{font:600 17px/1.4 var(--ui);color:var(--tx);margin:34px 0 10px;scroll-margin-top:96px}
.post-body .prose ul,.post-body .prose ol{margin:0 0 22px;padding-left:24px}
.post-body .prose li{margin:0 0 10px;padding-left:4px}
.post-body .prose li::marker{color:var(--ink-2)}
.post-body .prose ol>li::marker{font:500 15px var(--mono-b)}
.post-body .prose a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post-body .prose strong,.post-body .prose b{font-weight:600;color:var(--tx)}
.post-body .prose code,.post-body kbd{font:15px var(--mono-b);background:none;border:1px solid var(--rule-2);border-radius:0;padding:0 5px}

/* wstawka z etykieta (dawne .tip z paskiem po lewej) */
.post-body .tip{border:1px solid var(--rule-2);padding:16px 20px 17px;margin:6px 0 26px;color:var(--ink);font-size:18px;line-height:1.6}
.post-body .tip .tip-label{display:block;font:600 11px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}

/* kroki: numer w kolumnie, linie miedzy krokami zamiast kart */
.post-body .steps{list-style:none;padding:0!important;margin:4px 0 26px!important;counter-reset:s;border-top:1px solid var(--rule)}
.post-body .steps li{counter-increment:s;position:relative;display:block;padding:14px 0 14px 46px!important;margin:0!important;background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0}
.post-body .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:14px;width:auto;height:auto;border:0;border-radius:0;display:block;font:500 14px/31px var(--mono-b);color:var(--amber)}

/* blok z odnosnikami do planow */
.post-body .cta-box{max-width:none;background:none;border:1px solid var(--rule-2);border-radius:0;padding:22px 22px 24px;margin:40px 0}
.post-body .cta-box b{font:600 21px/1.3 var(--serif);margin-bottom:6px}
.post-body .cta-box p{font:16px/1.55 var(--ui);color:var(--ink-2)}
body.blog .btn{border-radius:3px;font-family:var(--ui)}

/* autor */
.post-body .author-box{grid-template-columns:88px 1fr;gap:20px;margin:48px 0 0;padding:26px 0 0;border:0;border-top:1px solid var(--rule-2);border-radius:0;background:none}
.post-body .author-box img{width:88px;height:88px}
.post-body .author-box small{font:600 11px/1.4 var(--ui);letter-spacing:.12em;color:var(--soft)}
.post-body .author-box b{font:600 21px/1.3 var(--serif);margin:4px 0 2px}
.post-body .author-box .a-role{display:block;font:14px var(--ui);color:var(--ink-2);margin-bottom:10px}
.post-body .author-box p{font:16px/1.6 var(--ui);color:var(--ink-2)}
.post-body .author-links{gap:18px}
.post-body .author-links a{border:0;border-radius:0;padding:0;font-weight:500;font-size:14px;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}

/* poprzedni / nastepny */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:44px 0 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.post-nav a{display:block;padding:18px 0;text-decoration:none;color:var(--tx)}
.post-nav a+a,.post-nav span+a{border-left:1px solid var(--rule);padding-left:20px}
.post-nav .next{text-align:right}
.post-nav a:first-child{padding-right:20px}
.post-nav small{display:block;font:600 11px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.post-nav b{font:600 17px/1.35 var(--serif)}

/* czytaj dalej */
.more{max-width:var(--col);margin:56px auto 0}
.more h2{font:600 11px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:0 0 4px}
.more ol{list-style:none;margin:0;padding:0}
.more li{border-bottom:1px solid var(--rule);padding:18px 0}
.more .kicker{margin:0 0 6px;font:600 11px/1.4 var(--ui);color:var(--amber)}
.more a{font:600 20px/1.3 var(--serif);color:var(--tx);text-decoration:none}
.more p{font:14px/1.5 var(--ui);color:var(--soft);margin:6px 0 0}

@media (min-width:1100px){
  .post{grid-template-columns:200px minmax(0,var(--col));column-gap:72px;justify-content:center}
  .post-head{grid-column:2}
  .post-toc{display:block;grid-column:1;grid-row:2;font:14px/1.45 var(--ui)}
  .post-toc nav{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding-top:44px}
  .post-toc .toc-label{font:600 11px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:0 0 12px}
  .post-toc ol{list-style:none;margin:0;padding:0;counter-reset:t;border-top:1px solid var(--rule)}
  .post-toc li{counter-increment:t;border-bottom:1px solid var(--rule)}
  .post-toc a{display:grid;grid-template-columns:26px 1fr;padding:8px 0;color:var(--ink-2);text-decoration:none}
  .post-toc a::before{content:counter(t,decimal-leading-zero);font:500 11px/1.9 var(--mono-b);color:var(--soft)}
  .post-toc a[aria-current="true"]{color:var(--tx);font-weight:600}
  .post-toc a[aria-current="true"]::before{color:var(--amber)}
  .post-toc .toc-left{margin:14px 0 0;font-size:13px;color:var(--soft)}
  .post-body{grid-column:2;grid-row:2}
  .more{max-width:calc(200px + 72px + var(--col));padding-left:calc(200px + 72px)}
  .toc-m{display:none}
}
@media (max-width:640px){
  .post-body .prose{font-size:18px;line-height:1.62}
  .post-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
  .post-meta>div:first-child{grid-column:1/-1}
  .post-body .prose h2:first-child{margin-top:28px}
  .post-nav{grid-template-columns:1fr}
  .post-nav a+a,.post-nav span+a{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .post-nav .next{text-align:left}
  .post-body .author-box{grid-template-columns:64px 1fr;gap:16px}
  .post-body .author-box img{width:64px;height:64px}
}

/* ---------- lista wpisow (/blog/) ---------- */
.blog-head{max-width:56rem;margin:0 auto;padding:22px 0 30px;border-bottom:1px solid var(--rule-2)}
.blog-head h1{font:600 clamp(34px,6vw,54px)/1.08 var(--serif);letter-spacing:-.015em;margin:0 0 14px}
.blog-head .lead{font:400 clamp(18px,2.3vw,21px)/1.55 var(--serif);color:var(--ink-2);max-width:40rem;margin:0}
.blog-head .count{font:14px var(--ui);color:var(--soft);margin:18px 0 0}
.entries{list-style:none;max-width:56rem;margin:0 auto;padding:0}
.entries>li{display:grid;grid-template-columns:1fr;gap:6px;padding:26px 0;border-bottom:1px solid var(--rule)}
.entries .side{font:13px/1.5 var(--ui);color:var(--soft)}
.entries .side .kicker{margin:0 0 6px;font:600 11px/1.4 var(--ui);letter-spacing:.12em;color:var(--amber)}
.entries h2{font:600 clamp(22px,3vw,27px)/1.25 var(--serif);letter-spacing:-.008em;margin:0 0 8px}
.entries h2 a{color:var(--tx);text-decoration:none}
.entries p{font:17px/1.6 var(--serif);color:var(--ink-2);margin:0 0 12px}
.entries .by{display:flex;align-items:center;gap:8px;font:14px var(--ui);color:var(--ink-2)}
.entries .by img{width:24px;height:24px;border-radius:50%;object-fit:cover}
body.blog .blog-cta{max-width:56rem;margin:44px auto 0;background:none;border:1px solid var(--rule-2);border-radius:0}
body.blog .blog-cta b{font:600 21px/1.3 var(--serif)}
body.blog .blog-cta p{font:16px/1.55 var(--ui)}
@media (min-width:760px){
  .entries>li{grid-template-columns:170px 1fr;gap:32px;padding:30px 0}
  .entries .side{padding-top:6px}
}
body.blog .crumbs{max-width:56rem;margin:0 auto}
body.blog .crumbs.c-post{max-width:none}
@media (min-width:1100px){body.blog .crumbs.c-post{padding-left:calc(200px + 72px);max-width:calc(200px + 72px + var(--col));margin:0 auto}}
@media (max-width:1099px){body.blog .crumbs.c-post{max-width:var(--col);margin:0 auto}}