/* ============================================================
   Shop Notes (blog) — hub + single-post styles
   Layers on top of base.css + make-page.css (shares chrome,
   tokens, buttons, header, footer, crumbbar, .sec, .reveal).
   ============================================================ */

/* ---- blog hub hero ---- */
.bhero{padding:clamp(46px,6vw,80px) 0 0;}
.bhero .container{max-width:820px;text-align:center;}
.bhero .h2{margin:16px 0 16px;font-size:clamp(34px,4.6vw,60px);}
.bhero .lead{margin:0 auto;max-width:60ch;}
.cat-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:30px;}
.cat-chips a{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--fog);border-radius:var(--r-pill,999px);color:var(--steel-700);transition:border-color .15s,color .15s,background .15s;}
.cat-chips a.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.cat-chips a:hover{border-color:var(--acc);color:var(--acc);}
.cat-chips a.on:hover{color:#fff;background:var(--acc);border-color:var(--acc);}

/* ---- post tag + meta (shared) ---- */
.ptag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc);background:var(--acc-soft);padding:6px 12px;border-radius:var(--r-pill,999px);}
.pmeta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--steel-400);text-transform:uppercase;}
.pmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--steel-300);}

/* ---- featured post ---- */
.featpost{display:grid;grid-template-columns:1.08fr .92fr;gap:0;border:1px solid var(--fog);border-radius:16px;overflow:hidden;
  background:#fff;box-shadow:0 1px 2px rgba(17,19,21,.05);margin-bottom:28px;transition:box-shadow .2s,transform .2s;}
.featpost:hover{box-shadow:0 20px 44px rgba(17,19,21,.1);transform:translateY(-3px);}
.featpost .thumb{position:relative;min-height:360px;background:var(--mist);}
.featpost .thumb image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}
.featpost .thumb .badge{position:absolute;top:18px;left:18px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;background:var(--navy);color:#fff;padding:7px 13px;border-radius:6px;}
.featpost .fp-body{padding:44px 44px;display:flex;flex-direction:column;justify-content:center;}
.featpost .fp-body h2{font-size:clamp(26px,2.9vw,40px);font-weight:900;letter-spacing:-.02em;line-height:1.04;margin:16px 0 14px;color:var(--navy);}
.featpost .fp-body p{font-size:16px;color:var(--steel-500);line-height:1.6;margin-bottom:22px;max-width:48ch;}
.featpost .fp-body .pmeta{margin-top:4px;}
@media(max-width:820px){.featpost{grid-template-columns:1fr;}.featpost .thumb{min-height:240px;}}

/* ---- post grid ---- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.pcard{display:flex;flex-direction:column;border:1px solid var(--fog);border-radius:14px;overflow:hidden;background:#fff;
  text-decoration:none;color:var(--navy);box-shadow:0 1px 2px rgba(17,19,21,.05);transition:transform .2s var(--ease),box-shadow .2s;}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,19,21,.1);}
.pcard .thumb{position:relative;height:200px;background:var(--mist);}
.pcard .thumb image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}
.pcard .thumb .ptag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(4px);}
.pcard .pc-body{padding:24px 24px 22px;display:flex;flex-direction:column;flex:1;gap:12px;}
.pcard h3{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.18;color:var(--navy);}
.pcard p{font-size:14.5px;color:var(--steel-500);line-height:1.55;flex:1;}
.pcard .pmeta{margin-top:auto;padding-top:14px;border-top:1px solid var(--fog);}
@media(max-width:920px){.post-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr;}}

/* ---- single article ---- */
.article{max-width:760px;margin:0 auto;}
.article-head{text-align:center;max-width:760px;margin:0 auto;}
.article-head .ptag{margin-bottom:20px;}
.article-head h1,.article h1{font-family:var(--font-display);font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.015em;line-height:1.05;color:var(--navy);margin-bottom:20px;text-wrap:balance;}
.article-meta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.article-meta .au{display:flex;align-items:center;gap:10px;}
.article-meta .av{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-display,'Saira Condensed');font-weight:800;font-size:15px;}
.article-meta b{font-size:14px;font-weight:700;color:var(--navy);}
.article-meta .pmeta{font-size:12px;}
.article-fig{border-radius:16px;overflow:hidden;margin:44px 0;box-shadow:0 20px 50px rgba(17,19,21,.14);}
.article-fig image-slot,.article-fig img{width:100%;height:clamp(300px,42vw,460px);display:block;background:var(--mist);object-fit:cover;}

/* article prose */
.article .prose{max-width:none;}
.article .prose h2{font-family:var(--font-display,'Saira Condensed');font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.4vw,32px);
  letter-spacing:-.01em;color:var(--navy);margin:42px 0 16px;line-height:1.08;}
.article .prose h3{font-size:20px;font-weight:800;color:var(--navy);margin:30px 0 12px;}
.article .prose p{font-size:17.5px;line-height:1.75;color:var(--steel-700);margin-bottom:20px;}
.article .prose ul{margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px;}
.article .prose ul li{position:relative;padding-left:30px;font-size:17px;line-height:1.6;color:var(--steel-700);}
.article .prose ul li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:2px;background:var(--acc);transform:rotate(45deg);}
.article .prose strong{color:var(--navy);font-weight:700;}
.article blockquote{margin:34px 0;padding:8px 0 8px 28px;border-left:3px solid var(--acc);
  font-family:var(--font-display,'Saira Condensed');font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);
  line-height:1.12;letter-spacing:-.01em;color:var(--navy);}
.takeaways{background:var(--navy);color:#fff;border-radius:14px;padding:34px 36px;margin:40px 0;}
.takeaways h3{font-family:var(--font-display,'Saira Condensed');font-weight:800;text-transform:uppercase;font-size:22px;color:#fff;margin:0 0 18px;display:flex;align-items:center;gap:10px;}
.takeaways h3 svg{width:22px;height:22px;color:var(--acc-mid);}
.takeaways ul{display:flex;flex-direction:column;gap:13px;margin:0;padding:0;}
.takeaways li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:rgba(255,255,255,.92);}
.takeaways li svg{width:20px;height:20px;color:var(--acc-mid);flex:none;margin-top:1px;}

/* inline CTA inside article */
.inline-cta{background:var(--acc-soft);border:1px solid #f3cdd1;border-radius:14px;padding:28px 30px;margin:40px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.inline-cta div b{display:block;font-family:var(--font-display,'Saira Condensed');font-weight:800;text-transform:uppercase;font-size:22px;color:var(--navy);letter-spacing:-.01em;}
.inline-cta div span{font-size:15px;color:var(--steel-600,#3A3F43);}

/* author box */
.author-box{display:flex;gap:18px;align-items:center;border-top:1px solid var(--fog);border-bottom:1px solid var(--fog);padding:28px 0;margin:48px 0;}
.author-box .av{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-display,'Saira Condensed');font-weight:800;font-size:22px;flex:none;}
.author-box b{font-size:16px;font-weight:800;color:var(--navy);display:block;}
.author-box p{font-size:14px;color:var(--steel-500);line-height:1.55;margin:4px 0 0;}

/* related */
.related .sec-head{margin-bottom:40px;}

/* takeaways: stop the generic prose list/heading styles from bleeding into the dark box */
.article .prose .takeaways h3{color:#fff;}
.article .prose .takeaways ul li{padding-left:0;color:rgba(255,255,255,.92);font-size:16px;line-height:1.55;}
.article .prose .takeaways ul li::before{content:none;}