/* Plugezy blog. Shares the homepage design language. */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --ink:#0d0d0f; --text:#26262b; --muted:#71717a; --faint:#a1a1aa;
  --line:#e7e5e0; --paper:#ffffff; --paper-2:#f7f6f3;
  --accent:#0d9488; --accent-d:#0a6f66; --orange:#ea580c;
  --ease:cubic-bezier(0.16,1,0.3,1); --maxw:1080px; --read:720px;
}
html { scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body { font-family:'Inter',-apple-system,sans-serif; color:var(--text); background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:'Sora',sans-serif; color:var(--ink); letter-spacing:-0.03em; line-height:1.1; font-weight:700; }
::selection { background:var(--ink); color:#fff; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.eyebrow { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); display:inline-block; margin-bottom:18px; }

/* nav */
.nav-wrap { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(180%); border-bottom:1px solid transparent; transition:border-color .3s; }
.nav-wrap.scrolled { border-bottom-color:var(--line); }
.nav { max-width:var(--maxw); margin:0 auto; padding:15px 28px; display:flex; align-items:center; justify-content:space-between; }
.logo { font-family:'Sora'; font-weight:700; font-size:19px; color:var(--ink); display:flex; align-items:center; gap:9px; letter-spacing:-0.02em; }
.logo svg { width:23px; height:23px; }
.nav-r { display:flex; align-items:center; gap:30px; }
.nav-r > a:not(.btn) { font-size:14.5px; color:var(--muted); transition:color .2s; }
.nav-r > a:not(.btn):hover { color:var(--ink); }
.btn { font-family:'Sora',sans-serif; font-weight:600; font-size:14px; padding:9px 18px; border-radius:9px; background:var(--ink); color:#fff; box-shadow:inset 0 0 0 1.5px var(--ink); transition:background .25s var(--ease),color .25s var(--ease); }
.btn:hover { background:#fff; color:var(--ink); }

/* blog index */
.bhead { padding:80px 0 24px; }
.bhead h1 { font-size:clamp(36px,5vw,56px); font-weight:800; }
.bhead p { font-size:18px; color:var(--muted); margin-top:16px; max-width:52ch; }
.posts { max-width:var(--maxw); margin:0 auto; padding:24px 28px 100px; }
.post-link { display:block; padding:32px 0; border-top:1px solid var(--line); transition:background .2s; }
.post-link:last-child { border-bottom:1px solid var(--line); }
.post-link .pm { font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--faint); letter-spacing:0.04em; margin-bottom:12px; }
.post-link h2 { font-size:clamp(22px,3vw,30px); font-weight:700; max-width:24ch; transition:color .2s; }
.post-link:hover h2 { color:var(--accent-d); }
.post-link p { font-size:16px; color:var(--muted); margin-top:12px; max-width:62ch; }
.post-link .more { font-family:'Sora'; font-weight:600; font-size:14.5px; color:var(--ink); margin-top:16px; display:inline-flex; align-items:center; gap:8px; }

/* article */
.article { max-width:var(--read); margin:0 auto; padding:64px 28px 40px; }
.article .pm { font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--faint); letter-spacing:0.04em; margin-bottom:20px; }
.article h1 { font-size:clamp(32px,4.6vw,48px); font-weight:800; margin-bottom:22px; }
.article .standfirst { font-size:20px; color:var(--muted); line-height:1.55; margin-bottom:8px; }
.article-body { max-width:var(--read); margin:0 auto; padding:8px 28px 40px; }
.article-body h2 { font-size:clamp(22px,3vw,28px); font-weight:700; margin:44px 0 14px; }
.article-body h3 { font-size:19px; font-weight:700; margin:28px 0 10px; }
.article-body p { font-size:17px; color:var(--text); margin-bottom:18px; }
.article-body ul { margin:0 0 18px; padding-left:0; list-style:none; }
.article-body li { position:relative; padding-left:24px; margin-bottom:11px; font-size:17px; color:var(--text); }
.article-body li::before { content:''; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.article-body a { color:var(--accent-d); text-decoration:underline; text-underline-offset:2px; }
.article-body strong { color:var(--ink); font-weight:600; }
.article-body code { font-family:'JetBrains Mono',monospace; font-size:0.88em; background:var(--paper-2); border:1px solid var(--line); border-radius:5px; padding:2px 6px; }

/* end CTA */
.cta-box { max-width:var(--read); margin:48px auto 0; padding:0 28px; }
.cta-inner { background:var(--ink); border-radius:16px; padding:40px 36px; }
.cta-inner h3 { color:#fff; font-size:24px; margin-bottom:10px; }
.cta-inner p { color:#a1a1aa; font-size:16px; margin-bottom:22px; max-width:46ch; }
.cta-inner .btn { background:#fff; color:var(--ink); box-shadow:none; padding:12px 22px; font-size:15px; }
.cta-inner .btn:hover { background:var(--accent); color:#fff; }

/* footer */
footer { padding:40px 0; border-top:1px solid var(--line); margin-top:40px; }
.foot { max-width:var(--maxw); margin:0 auto; padding:0 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:13.5px; color:var(--muted); }
.foot .fl { display:flex; gap:24px; }
.foot a:hover { color:var(--ink); }

@media (max-width:720px) {
  .nav-wrap { position:static; }
  .nav-r > a:not(.btn) { display:none; }
  .foot { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.001ms!important; scroll-behavior:auto!important; } }