/* getpcnow blog section. Add <link rel="stylesheet" href="blog.css"> after style.css */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&display=swap");

.blog{padding:8px 0 0;margin:0 0 48px;scroll-margin-top:16px}
.blog-head{text-align:center;margin-bottom:32px}
.blog-pill{display:inline-block;background:#efefef;border-radius:99px;padding:5px 16px;font-weight:700;font-size:14px;margin-bottom:18px}
.blog-head h2{font-size:clamp(28px,4.6vw,46px);line-height:1.08;letter-spacing:-1.6px;margin:0}
.blog-brand{color:var(--acc,#1e90ff)}

/* cards: same look as the category cards (.card in style.css) */
.bcard{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:#fff;border:1.5px solid var(--line,#e3e3e3);border-radius:18px;padding:12px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.bcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.1);border-color:var(--acc,#1e90ff)}
.bcard:active{transform:scale(.98)}
.bpic{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#d9dde3,#f4f4f4);display:grid;place-items:center}
.bpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.bcard:hover .bpic img{transform:scale(1.04)}
.bpic svg{width:26%;color:rgba(0,0,0,.28);position:relative}
.bcat{display:inline-block;background:#efefef;border-radius:99px;padding:3px 12px;font-size:13px;font-weight:500}
.bcard h3{font-size:19px;line-height:1.25;letter-spacing:-.4px;margin:0 0 6px}
.bex{color:#777;font-size:15px;line-height:1.45;margin:0}
.bmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:13px;color:#444;font-weight:500}
.bmeta span+span:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:#000;margin-right:14px;vertical-align:middle}

/* featured */
.bfeat{display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-bottom:16px}
.bfeat .bpic{min-height:340px}
.bfeat .bbody{display:flex;flex-direction:column;padding:18px 22px 10px 28px}
.bfeat .bcat{align-self:flex-start;margin-bottom:22px}
.bfeat h3{font-size:clamp(24px,3.2vw,36px);letter-spacing:-1.2px;line-height:1.1;margin-bottom:14px}
.bfeat .bex{font-size:17px;max-width:44ch}
.bfeat .bfoot{margin-top:auto;padding-top:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bby{font:500 13px/1 "DM Sans",system-ui,sans-serif;color:#555}

/* grid */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bgrid .bpic{aspect-ratio:4/3.1}
.bgrid .bcat{position:absolute;top:12px;right:12px;z-index:1;background:#fff;font-size:13px}
.bgrid .bbody{padding:14px 4px 4px}
.bgrid .bmeta{margin-top:14px}
.bempty{text-align:center;color:#777;margin:0}

/* article page */
.bcard{text-decoration:none}
.post{max-width:860px;margin:0 auto;padding-bottom:20px}
.post h1{font-size:clamp(28px,4.4vw,42px);letter-spacing:-1.3px;line-height:1.1;margin:10px 0 14px}
.postbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-bottom:22px}
.postbar .bmeta{font-size:14px;color:#555}
.shr{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:500 14px "DM Sans",sans-serif;color:#555;cursor:pointer;padding:4px 8px;border-radius:8px}
.shr:hover{background:#efefef;color:#000}
.hero-img{margin:0 0 26px}
.hero-img .bpic{aspect-ratio:16/9;border-radius:14px}
.hero-img figcaption{text-align:center;color:#777;font-size:15px;margin-top:10px}
.sumh{font-size:22px;letter-spacing:-.4px;margin:0 0 6px}
.sum{margin:0 0 28px;font-size:17px;color:#222}
.prose{font-size:17px;line-height:1.75;color:#222}
.prose h2{font-size:clamp(23px,3vw,28px);letter-spacing:-.7px;line-height:1.2;margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;letter-spacing:-.4px;margin:26px 0 8px}
.prose p{margin:0 0 16px}
.prose a{color:var(--acc,#1e90ff)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose img{max-width:100%;border-radius:14px}
.byline{color:#777;font-size:14px;margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line,#e3e3e3)}
.postmore{margin:44px 0 16px}
.post .bgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.page .bgrid{margin-top:8px;margin-bottom:40px}
.bmore{text-align:center;margin:26px 0 0}

@media(max-width:820px){
  .bfeat{grid-template-columns:1fr}
  .bfeat .bpic{min-height:220px}
  .bfeat .bbody{padding:20px 16px 14px}
  .bgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .bgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.bcard,.bpic img{transition:none}}

/* article table of contents */
.toc{background:#f6f6f6;border-radius:14px;padding:18px 22px;margin:0 0 28px}
.toc .sumh{margin:0 0 8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:6px 0}
.toc a{color:inherit;text-decoration:none;font-weight:500}
.toc a:hover{color:var(--acc,#1e90ff);text-decoration:underline}
.prose h2{scroll-margin-top:16px}
.prose code{background:#efefef;padding:2px 6px;border-radius:6px;font-size:.92em;word-break:break-word}