@font-face{font-family:Archivo; src:url(fonts/archivo.woff2) format('woff2');
  font-weight:500 800; font-style:normal; font-display:swap}
@font-face{font-family:'IBM Plex Mono'; src:url(fonts/plexmono-400.woff2) format('woff2');
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'IBM Plex Mono'; src:url(fonts/plexmono-500.woff2) format('woff2');
  font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'IBM Plex Mono'; src:url(fonts/plexmono-600.woff2) format('woff2');
  font-weight:600; font-style:normal; font-display:swap}
@font-face{font-family:'Source Serif 4'; src:url(fonts/sourceserif4.woff2) format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap}

:root{
  --paper:#F4F5F7; --card:#FFFFFF; --ink:#12161D; --graphite:#5C6573;
  --rule:#DCE0E7; --rule-strong:#12161D; --open:#C2410C; --dark:#0A0D12;
  --display:"Archivo","Helvetica Neue",sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.25rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1.0625rem; line-height:1.62; font-synthesis-weight:none}
a{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; text-decoration-color:#AEB5C0}
a:hover{text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px}

.wrap{width:min(100% - 2.5rem, 74rem); margin-inline:auto}

/* sticky masthead — same as home */
.topbar{position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid var(--rule)}
/* the hairline only earns its place once something has scrolled under the bar */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .topbar{border-bottom-color:transparent;
      animation-name:topbar-rule; animation-duration:auto; animation-fill-mode:both;
      animation-timing-function:linear; animation-timeline:scroll(root); animation-range:0 2rem}
    @keyframes topbar-rule{from{border-bottom-color:transparent} to{border-bottom-color:var(--rule)}}
  }
}
.masthead{padding:1.5rem 0; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap}
.mark{font-family:var(--mono); font-weight:600; font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
.masthead nav{font-family:var(--mono); font-size:.8125rem; display:flex; gap:1.5rem}
.masthead nav a{color:var(--graphite); text-decoration:none}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a[aria-current="page"]{color:var(--ink)}

/* hero */
.hero{padding:4.5rem 0 0}
.kicker{font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); margin:0 0 2rem}
.hero h1{font-family:var(--display); font-weight:800; margin:0;
  font-size:clamp(2.7rem,8vw,6.25rem); line-height:.92; letter-spacing:-.045em}
.hero p{margin:2.5rem 0 0; max-width:52ch; font-size:1.3125rem; color:#1E242E}

/* entries */
.entries{padding:4.5rem 0 5.5rem; border-top:2px solid var(--rule-strong); margin-top:3.5rem}
.entry{border-bottom:1px solid var(--rule); padding:2.75rem 0}
.entry:first-of-type{padding-top:2rem}
.entry:last-of-type{border-bottom:none}

.entry-meta{font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--graphite); display:flex; gap:.9rem; align-items:baseline; margin:0 0 .9rem}
.entry-meta .kind{font-weight:600}
.entry-meta .kind.build{color:var(--open)}

.entry h2{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,3.4vw,2.1rem);
  letter-spacing:-.03em; line-height:1.08; margin:0; max-width:22ch}
.entry .dek{margin:1.15rem 0 0; max-width:62ch; font-size:1.1875rem; color:#1E242E}
.entry p{margin:1.15rem 0 0; max-width:62ch}
.entry ul{margin:1.15rem 0 0; padding-left:1.1rem; max-width:62ch}
.entry li{margin:.4rem 0}
.entry code{font-family:var(--mono); font-size:.875em; background:var(--card); border:1px solid var(--rule);
  border-radius:3px; padding:.05em .35em}

.pull{margin:1.5rem 0 0; padding:1rem 1.15rem; background:var(--card); border-left:2px solid var(--ink);
  border-radius:0 6px 6px 0; max-width:62ch}
.pull p{margin:0; font-size:1rem}
.pull span{font-family:var(--mono); font-weight:600; font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--graphite); display:block; margin:0 0 .45rem}

/* footer */
footer{border-top:1px solid var(--rule); padding:2rem 0 3rem; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.75rem; color:var(--graphite)}

/* lista wpisów */
.list{padding:3rem 0 5.5rem; border-top:2px solid var(--rule-strong); margin-top:3.5rem}
.item{border-bottom:1px solid var(--rule); padding:2.25rem 0}
.item:last-child{border-bottom:none}
.item h2{font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,3vw,1.9rem);
  letter-spacing:-.03em; line-height:1.1; margin:0; max-width:24ch}
.item h2 a{text-decoration:none}
.item h2 a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em}
.item p{margin:.9rem 0 0; max-width:62ch; color:#1E242E}
.item .more{font-family:var(--mono); font-size:.8125rem; color:var(--graphite); text-decoration:none; display:inline-block; margin-top:.9rem}
.item .more:hover{color:var(--ink)}

/* pojedynczy wpis */
.back{font-family:var(--mono); font-size:.8125rem; color:var(--graphite); text-decoration:none; display:inline-block; margin:2.5rem 0 0}
.back:hover{color:var(--ink)}
.post{padding:1.5rem 0 5.5rem; max-width:none}
.post h1{font-family:var(--display); font-weight:800; margin:1.25rem 0 0;
  font-size:clamp(2.1rem,5.5vw,3.6rem); line-height:1.02; letter-spacing:-.04em; max-width:20ch}
.post .dek{margin:1.5rem 0 0; max-width:56ch; font-size:1.3125rem; color:#1E242E}
.post .body{margin-top:2.5rem; border-top:1px solid var(--rule); padding-top:2rem}
.post .body p:first-child{margin-top:0}

/* śródtytuły i wezwanie do działania we wpisie */
.entry h3, .post .body h3{font-family:var(--display); font-weight:700; font-size:1.375rem;
  letter-spacing:-.02em; line-height:1.15; margin:2.5rem 0 0; max-width:30ch}
.cta{margin:2.5rem 0 0; padding:1.4rem 1.5rem; background:var(--ink); border-radius:8px; max-width:62ch}
.cta p{margin:0; color:#F4F5F7; font-size:1.0625rem}
.cta b{color:#FFFFFF; font-weight:600}
.cta a{color:#F4F5F7; text-decoration-color:#7C8698}
.cta a:hover{text-decoration-color:#F4F5F7}
.cta a:focus-visible{outline-color:#F4F5F7}

/* przełącznik języka */
.langs{display:flex; gap:.4rem; padding:.35rem 0 0; margin:0 0 -.75rem}
.langs a{
  font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--graphite);
  border:1px solid var(--rule); border-radius:2px; padding:.3rem .55rem; line-height:1;
  background:var(--card); transition:color .12s ease, border-color .12s ease}
.langs a:hover{color:var(--ink); border-color:var(--rule-strong)}
.langs a[aria-current]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.langs a:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* masthead na wąskich ekranach — pasek musi zostać niski */
@media (max-width:44rem){
  html{scroll-padding-top:5.5rem}
  .masthead{padding:.6rem 0 .65rem; gap:.25rem .8rem}
  .masthead .mark{font-size:.75rem; letter-spacing:.06em}
  .masthead nav{gap:.2rem .8rem; flex-wrap:wrap; font-size:.6875rem; line-height:1.3}
}

/* diagram we wpisie */
.diagram{margin:2.5rem 0 0; max-width:none}
.diagram img{width:100%; height:auto; border:1px solid var(--rule); border-radius:4px; background:var(--card)}
.diagram figcaption{font-family:var(--mono); font-size:.8125rem; line-height:1.5; color:var(--graphite);
  margin-top:.85rem; max-width:62ch}