/* Plum blog posts (shared by every post) */
/* ---------- blog post: "the ledger" ---------- */
.post{--col:720px}
.ph-hero{position:relative;padding:64px 0 70px;overflow:hidden}
.ph-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-weight:700;font-size:14px;color:var(--mute);margin:0 0 22px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--plum)}
.ph-hero h1{font-size:clamp(46px,5.6vw,84px);line-height:.92}
.ph-hero h1 .k{white-space:nowrap}
.ph-hero .dek{font-size:21px;line-height:1.5;color:var(--plum2);margin:26px 0 0;max-width:34ch}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.meta li{display:flex;align-items:center;gap:8px;background:#fff;border:2.5px solid var(--plum);border-radius:999px;padding:6px 14px 6px 6px;font-weight:700;font-size:14.5px}
.meta li i{width:28px;height:28px}
.meta li img{width:28px;height:28px;border-radius:50%;border:2px solid var(--plum)}
/* hero cheque */
.cheque{position:relative;transform:rotate(3deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.cheque:hover{transform:rotate(-1deg) scale(1.02)}
.chq{background:#fff;border:3px solid var(--plum);border-radius:22px;box-shadow:0 0 0 11px var(--green);padding:24px 26px;position:relative;background-image:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(45,179,74,.05) 10px 20px)}
.chq .row{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:14px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.chq .amt2{font:800 56px/1 var(--display);letter-spacing:-.03em;margin:18px 0 6px;color:var(--plum)}
.chq .pay{border-bottom:2.5px solid var(--plum);padding:8px 0 6px;font:700 18px var(--display);display:flex;justify-content:space-between}
.chq .memo{margin-top:16px;font-size:14px;color:var(--plum2);font-weight:600}
.chq .sig{position:absolute;right:22px;bottom:14px;font:italic 700 26px var(--display);color:var(--blue);transform:rotate(-8deg)}
.cheque .s1{position:absolute;width:110px;left:-40px;top:-50px;transform:rotate(-14deg)}
.cheque .s2{position:absolute;width:96px;right:-26px;bottom:-56px;transform:rotate(12deg)}
.cheque .q{position:absolute;left:50%;bottom:-74px;translate:-50% 0;white-space:nowrap;font:800 18px var(--display);background:var(--yellow);border:2.5px solid var(--plum);border-radius:999px;padding:8px 16px;transform:rotate(-3deg)}
/* reading progress pencil */
.prog{position:fixed;left:0;top:0;height:6px;width:0;background:var(--pink);z-index:70;border-right:3px solid var(--plum);box-shadow:0 2px 0 var(--plum)}
/* body layout */
.pbody{display:block;max-width:calc(var(--col) + 64px);padding-top:40px}
.toc{position:sticky;top:24px;background:#fff;border:3px solid var(--plum);border-radius:22px;padding:18px 18px 14px}
.toc b{display:block;font:800 13px var(--body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.toc a{display:flex;gap:10px;align-items:baseline;padding:7px 8px;margin:0 -8px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px;line-height:1.3;color:var(--plum2)}
.toc a span{font:800 12px var(--body);color:var(--mute);flex:none;width:18px}
.toc a.on{background:var(--yellow);color:var(--plum)}
.toc .tcta{margin-top:12px;display:block;text-align:center;background:var(--plum);color:#fff;border-radius:999px;padding:11px;font-weight:800;font-size:14.5px;text-decoration:none;box-shadow:0 0 0 4px var(--pink)}
.prose{font-size:19px;line-height:1.75;color:#3d2639}
.prose>p:first-of-type::first-letter{float:left;font:800 92px/.8 var(--display);color:var(--plum);margin:8px 12px 0 0;background:var(--yellow);border:3px solid var(--plum);border-radius:18px;padding:12px 12px 6px;box-shadow:0 0 0 6px var(--orange)}
.prose h2{font-size:clamp(34px,3.4vw,46px);margin:70px 0 18px;scroll-margin-top:30px;display:flex;align-items:center;gap:14px;max-width:none}
.prose h2 .no{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c,var(--pink));border:3px solid var(--plum);font:800 22px var(--display)}
.prose h3{font-size:24px;margin:34px 0 8px}
.prose p{margin:0 0 20px}
.prose strong{color:var(--plum);background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.prose ul.dots{list-style:none;padding:0;margin:0 0 22px}
.prose ul.dots li{position:relative;padding-left:34px;margin:10px 0}
.prose ul.dots li::before{content:"";position:absolute;left:4px;top:.55em;width:14px;height:14px;border-radius:50%;background:var(--pink);border:2.5px solid var(--plum)}
.prose a.btn{color:#fff;text-decoration:none}
.prose a:not(.btn){color:var(--plum);font-weight:700;text-decoration-color:var(--pink);text-decoration-thickness:3px;text-underline-offset:3px}
/* tl;dr sticky note */
.tldr{background:var(--yellow);border:3px solid var(--plum);border-radius:6px 26px 26px 26px;padding:24px 26px;margin:0 0 40px;transform:rotate(-1deg);position:relative;font-size:18px;line-height:1.6}
.tldr::before{content:"";position:absolute;left:50%;top:-14px;width:110px;height:28px;margin-left:-55px;background:rgba(244,166,232,.85);border:2px solid rgba(58,15,51,.25);transform:rotate(2deg)}
.tldr b{display:block;font:800 14px var(--body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.tldr ol{margin:0;padding-left:22px}.tldr li{margin:6px 0}
/* margin note */
.note{position:relative;background:#fff;border:3px solid var(--plum);border-radius:22px;padding:20px 22px 20px 92px;margin:30px 0;font-size:17px;line-height:1.6;box-shadow:0 0 0 8px var(--c,var(--blue))}
.note .ni{position:absolute;left:14px;top:50%;translate:0 -50%;width:64px}
.note b{display:block;font:800 19px var(--display);margin-bottom:2px}
/* calculator */
.calc{background:#fff;border:3px solid var(--plum);border-radius:30px;box-shadow:0 0 0 11px var(--pink);padding:30px 30px 26px;margin:34px 0 40px;position:relative}
.calc .cst{position:absolute;right:-24px;top:-40px;width:96px;transform:rotate(14deg)}
.calc h3{margin:0;font-size:30px}
.calc .sub{margin:6px 0 22px;color:var(--mute);font-size:16px;font-weight:500}
.calc .in{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc label{display:grid;gap:8px;font:700 15px var(--body)}
.calc label output{font:800 22px var(--display);color:var(--plum)}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:999px;background:var(--bg);border:2.5px solid var(--plum);outline:none}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--yellow);border:3px solid var(--plum);cursor:grab;box-shadow:0 0 0 4px var(--orange)}
.calc input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--yellow);border:3px solid var(--plum);cursor:grab}
.stack{display:flex;height:72px;border:3px solid var(--plum);border-radius:18px;overflow:hidden;margin:26px 0 14px}
.stack i{display:grid;place-items:center;font:800 13px var(--body);color:var(--plum);transition:flex-basis .45s cubic-bezier(.3,1.3,.5,1);min-width:0;overflow:hidden;white-space:nowrap;border-right:3px solid var(--plum)}
.stack i:last-child{border-right:0}
.legend2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin:0;padding:0;list-style:none}
.legend2 li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px}
.legend2 li i{width:18px;height:18px;border-radius:6px;border:2.5px solid var(--plum);flex:none}
.legend2 li b{margin-left:auto;font:800 18px var(--display);font-variant-numeric:tabular-nums}
.calc .keep{margin-top:18px;display:flex;justify-content:space-between;align-items:center;background:var(--plum);color:#fff;border-radius:18px;padding:16px 20px}
.calc .keep span{font-weight:700}.calc .keep b{font:800 34px var(--display);color:var(--yellow)}
.calc .fine2{margin:12px 0 0;font-size:13.5px;color:var(--mute);font-weight:500}
/* instalment calendar */
.cal4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0 36px}
.cal4 button{all:unset;cursor:pointer;position:relative;background:#fff;border:3px solid var(--plum);border-radius:20px;overflow:hidden;text-align:center;transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.cal4 button .mo2{display:block;background:var(--red);color:#fff;font:800 15px var(--body);letter-spacing:.12em;padding:8px 0;border-bottom:3px solid var(--plum)}
.cal4 button .dd{display:block;font:800 56px/1 var(--display);padding:14px 0 6px}
.cal4 button small{display:block;font-weight:700;font-size:13px;color:var(--mute);padding-bottom:12px}
.cal4 button .stp{position:absolute;inset:auto 0 8px;margin:auto;width:70%;border:4px double var(--green);color:var(--green);border-radius:10px;font:800 15px var(--display);padding:3px 0;transform:rotate(-10deg) scale(2);opacity:0;transition:transform .3s cubic-bezier(.5,1.6,.5,1),opacity .2s;background:rgba(255,255,255,.85)}
.cal4 button.on .stp{opacity:1;transform:rotate(-10deg) scale(1)}.cal4 button.on small{visibility:hidden}
.cal4 button:hover{transform:rotate(-2deg) translateY(-4px)}
.calhint{margin:-20px 0 30px;text-align:center;font-weight:700;color:var(--mute);font-size:15px}
/* deduction checklist */
.ded{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 10px}
.ded button{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--plum);border-radius:18px;padding:12px 14px;font:700 16px var(--body);transition:background .15s,transform .25s cubic-bezier(.3,1.7,.5,1)}
.ded button i{width:28px;height:28px;border-radius:9px;border:3px solid var(--plum);flex:none;display:grid;place-items:center;background:var(--bg)}
.ded button i svg{width:14px;opacity:0;color:#fff}
.ded button.on{background:var(--green-l)}
.ded button.on i{background:var(--green)}.ded button.on i svg{opacity:1}
.ded button:hover{transform:rotate(-1deg)}
.dedc{display:flex;align-items:center;gap:14px;margin:14px 0 34px;font:800 20px var(--display)}
.dedc .bar3{flex:1;height:16px;border:2.5px solid var(--plum);border-radius:999px;overflow:hidden;background:#fff}
.dedc .bar3 i{display:block;height:100%;width:0;background:var(--green);transition:width .4s cubic-bezier(.3,1.3,.5,1)}
/* pull quote */
.pull{margin:44px -40px;padding:34px 40px;background:var(--plum);color:#fff;border-radius:30px;font:800 clamp(28px,3vw,38px)/1.15 var(--display);letter-spacing:-.02em;position:relative}
.pull .ps2{position:absolute;right:-20px;top:-40px;width:90px;transform:rotate(12deg)}
.pull span{color:var(--yellow)}
/* map of areas */
.areas2{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 30px}
.areas2 span{border:2.5px solid var(--plum);border-radius:999px;padding:8px 14px;font-weight:700;font-size:15px;background:#fff}
.areas2 span:nth-child(3n+1){background:var(--yellow-l)}.areas2 span:nth-child(3n+2){background:var(--pink-l)}.areas2 span:nth-child(3n){background:var(--blue-l)}
/* faq + end cta */
.pfaq details{background:#fff;border:3px solid var(--plum);border-radius:20px;padding:0 22px;margin:12px 0}
.pfaq summary{list-style:none;cursor:pointer;padding:18px 0;font:800 19px var(--display);display:flex;justify-content:space-between;gap:16px}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:2.5px solid var(--plum);display:grid;place-items:center;background:var(--yellow);font:700 20px/1 var(--body)}
.pfaq details[open]{box-shadow:0 0 0 7px var(--pink)}
.pfaq details[open] summary::after{content:"\2212";background:var(--pink)}
.pfaq details p{margin:0 0 18px;font-size:17px}
.endcta{margin:70px 11px 0;background:var(--yellow);border:3px solid var(--plum);border-radius:30px;box-shadow:0 0 0 11px var(--orange);padding:34px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.endcta .ps{display:flex}.endcta .ps img{width:84px;height:84px;border-radius:50%;border:3px solid var(--plum)}.endcta .ps img+img{margin-left:-22px}
.endcta h3{font-size:30px;margin:0 0 6px}.prose .endcta p{margin:0 0 22px;font-size:17px;color:var(--plum2)}
.prose .disc{margin:56px 0 0;font-size:14px;color:var(--mute);font-weight:500}
.rail{position:sticky;top:24px}
.rail .rs{width:120px;margin:40px auto 0;transform:rotate(8deg)}
@media (max-width:860px){.pull{margin:44px 0}}
@media (max-width:900px){
 .ph-hero .wrap{grid-template-columns:1fr;gap:70px}.cheque{max-width:440px;margin:0 auto 40px}
 .pbody{grid-template-columns:1fr}.toc{position:relative;top:0}.toc .tcta{display:none}
 .cal4{grid-template-columns:repeat(2,1fr)}.ded{grid-template-columns:1fr}
 .endcta{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:640px){
 .ph-hero h1{font-size:44px}.ph-hero h1 .k{white-space:normal}.ph-hero .dek{font-size:18.5px}
 .prose{font-size:17.5px}.prose h2{font-size:30px;gap:10px}.prose h2 .no{width:42px;height:42px;font-size:18px}
 .prose>p:first-of-type::first-letter{font-size:70px;padding:10px 9px 4px}
 .calc{padding:24px 18px 20px}.calc .in{grid-template-columns:1fr}.legend2{grid-template-columns:1fr}.calc .keep b{font-size:28px}.calc .cst{width:70px;right:-8px;top:-34px}
 .stack{height:56px}.stack i{font-size:0}
 .note{padding:18px 18px 18px 18px}.note .ni{position:static;translate:none;width:56px;margin-bottom:6px}
 .pull{padding:28px 22px}.pull .ps2{width:66px;right:-6px}
 .chq .amt2{font-size:44px}.cheque .s1{width:80px;left:-14px}.cheque .s2{width:74px;right:-6px}
}

/* blog cards, index, related */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.bc{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:3px solid var(--plum);border-radius:26px;padding:26px 24px 22px;text-decoration:none;color:var(--plum);transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.bc:hover{transform:rotate(-1.2deg) translateY(-6px);box-shadow:0 0 0 10px var(--rc)}
.bci{width:74px;height:74px;margin:-4px 0 6px -6px;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.bc:hover .bci{transform:rotate(-10deg) scale(1.08)}
.bcc{align-self:flex-start;font:800 12.5px var(--body);letter-spacing:.1em;text-transform:uppercase;background:var(--bg);border:2px solid var(--plum);border-radius:999px;padding:4px 10px}
.bc b{font:800 23px/1.15 var(--display);letter-spacing:-.01em}
.bcd{font-size:15.5px;color:var(--plum2);line-height:1.5}
.bcm{margin-top:auto;padding-top:8px;font-weight:800;font-size:14.5px}
.bchips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.bchips button{font:700 15px var(--body);color:var(--plum);background:#fff;border:2.5px solid var(--plum);border-radius:999px;padding:10px 16px;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.bchips button:hover{transform:rotate(-2deg)}
.bchips button.on{background:var(--yellow);box-shadow:0 0 0 5px var(--orange)}
.bhero{padding-bottom:20px}.bhero .wrap{padding-top:30px}
.rel{padding:90px 0 0}.rel h2{font-size:clamp(36px,4vw,54px);margin-bottom:34px}
.tbl{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0 30px;border:3px solid var(--plum);border-radius:18px;overflow:hidden;background:#fff;font-size:16px}
.tbl th{background:var(--yellow);text-align:left;font:800 15px var(--display);padding:12px 14px;border-bottom:3px solid var(--plum)}
.tbl td{padding:11px 14px;border-bottom:2px solid rgba(58,15,51,.1);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
@media (max-width:1000px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bgrid{grid-template-columns:1fr;gap:28px}.tbl{font-size:14.5px;display:block;overflow-x:auto}}
.bhero .tag{justify-self:start}
@media (max-width:640px){.chq .row span:last-child{display:none}.chq .row{letter-spacing:.04em}}