/* Hubbuna blog (/blog, /blog/<slug>), 28 Oct 2026. Layout after DuitMap /panduan (header band, topic chips, featured card, cover grid),
   colours from the Linen landing (lp3). Pages are static HTML written by /workspace/hubbuna/blog/add_post.py. */
.blog-page{--b-rose:var(--lp-rose,#B5546B);--b-rose-ink:var(--lp-rose-ink,#9A3C55);--b-blush:var(--lp-blush,#F9E4DF);--b-blush-2:var(--lp-blush-2,#F3D3CC);--b-bg:var(--lp-bg,#FFF8F6);--b-green:var(--lp-green,#4E6A56);--b-ink:var(--ink,#1F2A22);--b-muted:#5E5457}
.blog-page main.bw{max-inline-size:1080px;padding-block-end:40px;overflow-wrap:break-word}
.blog-page .sitenav .navblog{margin-inline-end:4px}
.bcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;font-size:13.5px;color:var(--b-muted)}
.bcrumb li+li::before{content:"›";margin-inline:8px;color:var(--b-rose)}
.bcrumb a{color:var(--b-rose-ink);text-decoration:none}.bcrumb a:hover{text-decoration:underline}
.bcrumb [aria-current]{display:inline-block;max-inline-size:min(60vw,420px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
/* index header band */
.bhead{position:relative;background:radial-gradient(70% 90% at 85% 10%,var(--b-blush) 0,rgba(249,228,223,.5) 45%,transparent 80%),var(--b-bg);border:1px solid var(--b-blush-2);border-radius:22px;padding:18px 20px 22px;margin:14px 0 22px}
.bhead .lp-kicker{margin:14px 0 2px;white-space:normal;block-size:auto}
.bhead h1{font:400 34px/1.08 var(--display,var(--serif));letter-spacing:-.01em;color:var(--sage-d,#2F4536);margin:0 0 10px;max-inline-size:16em}
.blead{margin:0;max-inline-size:640px;font-size:17px;line-height:1.55;color:var(--b-ink)}
.bstat{margin:12px 0 0;font-size:14px;color:var(--b-muted);font-weight:600}
/* topic chips (CSS-only radio filter; every post stays in the HTML) */
.bfr{position:absolute;opacity:0;inline-size:1px;block-size:1px;margin:0;pointer-events:none}
.bchips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;margin:0 -2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.bchips::-webkit-scrollbar{display:none}
.bchips label{flex:0 0 auto;cursor:pointer;border:1.5px solid var(--b-blush-2);border-radius:999px;padding:10px 16px;min-block-size:44px;box-sizing:border-box;display:inline-flex;align-items:center;font-weight:600;font-size:14px;line-height:1.2;color:var(--b-rose-ink);background:#fff;white-space:nowrap}
.bchips label:hover{border-color:var(--b-rose)}.bchips label span{color:var(--b-muted);font-weight:500;margin-inline-start:6px}
#bf-all:checked~.bchips label[for=bf-all]{background:var(--b-rose-ink);color:#fff;border-color:var(--b-rose-ink)}#bf-all:checked~.bchips label[for=bf-all] span{color:#F9E4DF}
#bf-all:focus-visible~.bchips label[for=bf-all]{outline:2px solid var(--b-rose);outline-offset:2px}
.bdup[hidden]{display:none}
/* cards */
.bpost{position:relative;display:flex;flex-direction:column;border:1px solid var(--b-blush-2);border-radius:18px;overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s}
.bpost:hover{box-shadow:0 12px 30px rgba(120,60,70,.14);transform:translateY(-2px)}.bpost:focus-within{outline:2px solid var(--b-rose);outline-offset:2px}
.bcov{aspect-ratio:1200/630;background:var(--b-blush);overflow:hidden}.bcov img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.bbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.btags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.btag{align-self:flex-start;background:var(--b-blush);color:var(--b-rose-ink);font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:4px 10px;line-height:1.3}
.bnew{background:var(--b-green);color:#fff;font-weight:700;font-size:12px;line-height:1.3;border-radius:999px;padding:4px 10px;text-transform:uppercase;letter-spacing:.5px}
.bt{margin:0;font:500 19px/1.3 var(--font)}.bt a{color:var(--b-ink);text-decoration:none}.bt a::after{content:"";position:absolute;inset:0;z-index:1}.bpost:hover .bt a{color:var(--b-rose-ink)}
.bex{margin:0;color:var(--b-muted);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bmeta{margin:auto 0 0;padding-block-start:4px;font-size:13.5px;color:var(--b-muted)}
.bsec{margin:30px 0 12px;font:400 26px/1.15 var(--display,var(--serif));color:var(--sage-d,#2F4536)}
.bgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.bfeat .bt{font-size:22px}
.brss{margin:18px 0 0;font-size:14px}.brss a{color:var(--b-rose-ink)}
.bidx-cta{margin-block-start:30px}
/* post */
.bart{max-inline-size:720px;margin-inline:auto;padding-block-start:14px}
.bhd{margin:14px 0 18px}
.bhd h1{font:400 34px/1.1 var(--display,var(--serif));letter-spacing:-.01em;color:var(--sage-d,#2F4536);margin:10px 0 12px}
.bdek{font-size:18px;line-height:1.55;color:var(--b-ink);margin:0 0 10px}
.bhd .bmeta{margin:0}
.bhero{margin:0 0 22px;border-radius:18px;overflow:hidden;background:var(--b-blush);aspect-ratio:1200/630}.bhero img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.bsum{background:var(--b-bg);border:1px solid var(--b-blush-2);border-radius:16px;padding:6px 18px 10px;margin:0 0 18px}
.bsum-h{font:500 22px/1.1 var(--hand,cursive);color:var(--b-rose);margin:10px 0 4px}
.bsum ul{margin:0;padding-inline-start:20px}.bsum li{margin-block:6px;line-height:1.5;font-size:15.5px}
.btoc{border:1px solid var(--b-blush-2);border-radius:14px;padding:0 16px;margin:0 0 22px;background:#fff}
.btoc summary{cursor:pointer;font-weight:600;min-block-size:48px;display:flex;align-items:center;color:var(--b-rose-ink)}
.btoc ol{margin:0 0 12px;padding-inline-start:22px}.btoc li{margin-block:6px}.btoc a{color:var(--b-ink);text-decoration:none}.btoc a:hover{color:var(--b-rose-ink);text-decoration:underline}
.bprose{font:400 18px/1.75 var(--reading,Georgia,serif);color:var(--b-ink)}
.bprose h2{font:400 28px/1.15 var(--display,var(--serif));color:var(--sage-d,#2F4536);margin:36px 0 10px;scroll-margin-top:16px}
.bprose h3{font:600 20px/1.3 var(--font);margin:26px 0 8px}
.bprose p{margin:0 0 16px}.bprose ul,.bprose ol{margin:0 0 18px;padding-inline-start:24px}.bprose li{margin-block:6px}
.bprose a{color:var(--b-rose-ink)}
.bprose strong{font-weight:650}
.bq{margin:22px 0;padding:18px 20px 16px;background:linear-gradient(180deg,var(--b-bg),#fff);border:1px solid var(--b-blush-2);border-inline-start:4px solid var(--b-rose);border-radius:14px}
.bq blockquote{margin:0}.bq blockquote p{margin:0;font-size:19px;line-height:1.6;font-style:italic}
.bq .ar{font:400 24px/1.9 var(--arabic,serif);margin:0 0 8px;text-align:right}
.bq figcaption{margin-block-start:10px;font:600 13.5px/1.4 var(--font);letter-spacing:.2px;color:var(--b-rose-ink)}
.bfaq,.bsrc{margin-block-start:34px}
.bfaq h2,.bsrc h2,.bcta-box h2{font:400 26px/1.15 var(--display,var(--serif));color:var(--sage-d,#2F4536);margin:0 0 10px}
.bfaq details{border-block-end:1px solid var(--b-blush-2)}.bfaq summary{cursor:pointer;font-weight:600;min-block-size:52px;display:flex;align-items:center;padding-block:8px}
.bfaq details p{margin:0 0 14px;line-height:1.6;color:var(--b-ink)}
.bsrc ul{margin:0;padding-inline-start:20px;columns:1}.bsrc li{margin-block:6px;font-size:15px}.bsrc a{color:var(--b-rose-ink);overflow-wrap:anywhere}
.bsrc .muted{line-height:1.5}
.bcta-box{position:relative;margin-block-start:36px;padding:24px 22px 18px;border-radius:20px;background:radial-gradient(80% 120% at 100% 0,var(--b-blush) 0,var(--b-bg) 60%);border:1px solid var(--b-blush-2);overflow:hidden}
.bcta-orn{position:absolute;inset-block-start:14px;inset-inline-end:16px;inline-size:30px;block-size:30px;color:var(--b-rose);opacity:.35}
.bcta-box h2{padding-inline-end:36px}.bcta-box p{margin:0 0 12px;line-height:1.6}
.bcta-box .btn{text-decoration:none}.bcta-box .small{font-size:13.5px}
.brel{max-inline-size:1080px;margin:40px auto 0}.brel .bt{font-size:17px}
@media(min-width:620px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.bhead{padding:22px 32px 28px}.bhead h1{font-size:44px}.bhd h1{font-size:44px}.bsrc ul{columns:2;column-gap:28px}}
@media(min-width:900px){.bw .bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.bfeat{flex-direction:row}.bfeat .bcov{flex:0 0 58%;aspect-ratio:auto;min-block-size:320px}
 .bfeat .bbody{padding:28px 30px;justify-content:center;gap:10px}.bfeat .bt{font-size:28px;line-height:1.22}.bfeat .bex{font-size:16px}.bfeat .bmeta{margin:6px 0 0}}
@media(prefers-reduced-motion:reduce){.bpost{transition:none}.bpost:hover{transform:none}}