/* Long-form blog posts (loaded only by post pages that use it, on top of site.css). */

/* reading progress */
.post-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none}
.post-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--leaf),var(--forest));transform-origin:0 50%;transform:scaleX(0)}

/* hero */
.post-hero .wrap{padding-bottom:56px}
.post-hero h1{font-size:clamp(2rem,3.9vw,3.1rem);line-height:1.08;text-wrap:balance}
.post-hero .lead{margin-bottom:0}
.post-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px;color:var(--mut);font-size:.92rem}
.post-byline img{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--rule);padding:4px;object-fit:contain}
.post-byline .who{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600}
.post-byline .dot{width:4px;height:4px;border-radius:50%;background:var(--rule)}
.post-feat{margin:0}
.post-feat figcaption{margin-top:14px;font-size:.86rem;color:var(--mut);line-height:1.5}

/* layout: sticky contents + article */
.post-layout{display:grid;grid-template-columns:250px minmax(0,720px);gap:72px;justify-content:center;align-items:start}
.toc{position:sticky;top:calc(110px + env(safe-area-inset-top,0px));font-size:.92rem}
.toc details{border:1px solid var(--rule);border-radius:var(--r);background:#fff}
.toc summary{list-style:none;cursor:pointer;padding:16px 18px;font-family:var(--disp);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);display:flex;justify-content:space-between;align-items:center}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--forest);border-bottom:2px solid var(--forest);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.toc details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.toc ol{list-style:none;margin:0;padding:0 10px 12px;counter-reset:toc;max-height:calc(100vh - 220px);overflow:auto}
.toc li{counter-increment:toc}
.toc ol a{display:flex;gap:10px;padding:8px 10px;border-radius:6px;color:var(--mut);text-decoration:none;line-height:1.35;border-left:2px solid transparent;transition:color .15s,background .15s,border-color .15s}
.toc ol a::before{content:counter(toc,decimal-leading-zero);font-family:var(--disp);font-weight:700;font-size:.78rem;color:#9AA79F;padding-top:1px;min-width:1.4em}
.toc ol a:hover{color:var(--forest);background:var(--mist)}
.toc ol a.on{color:var(--forest);background:var(--leaf-soft);border-left-color:var(--forest);font-weight:600}
.toc ol a.on::before{color:var(--forest)}
.toc-cta{margin-top:16px;padding:18px;border-radius:var(--r);background:var(--mist);border:1px solid var(--rule)}
.toc-cta p{margin:0 0 12px;font-size:.9rem;color:var(--char);line-height:1.5}
.toc-cta .btn{width:100%;justify-content:center;padding:12px 16px;font-size:.92rem}

/* article typography */
.post-body{font-size:1.07rem;line-height:1.75;color:#2e3a33}
.post-body>p,.post-body li{font-size:1.07rem}
.post-body p{margin:0 0 20px}
.post-body .intro{font-size:1.2rem;line-height:1.7;color:var(--ink)}
.post-body h2{font-size:clamp(1.5rem,2.4vw,1.85rem);line-height:1.2;letter-spacing:-.02em;margin:64px 0 16px;color:var(--ink)}
.post-body h2:first-child{margin-top:0}
.post-body h2 .h-step{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf);font-weight:800;margin-bottom:8px}
.post-body h3{font-size:1.18rem;margin:32px 0 8px;color:var(--ink)}
.post-body a{color:var(--forest);text-decoration:underline;text-decoration-color:rgba(11,90,52,.35);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color .15s}
.post-body a:hover{text-decoration-color:var(--forest)}
.post-body ul,.post-body ol{margin:0 0 24px;padding:0}
.post-body ul{list-style:none}
.post-body ul li{position:relative;padding-left:26px;margin-bottom:12px}
.post-body ul li::before{content:"";position:absolute;left:4px;top:.68em;width:8px;height:8px;border-radius:2px;background:var(--leaf);transform:rotate(45deg)}
.post-body li strong{color:var(--ink)}

/* numbered process */
.post-body ol.post-steps{list-style:none;counter-reset:st;border-left:2px solid var(--leaf-soft);margin-left:16px}
.post-steps li{counter-increment:st;position:relative;padding:0 0 18px 30px}
.post-steps li::before{content:counter(st);position:absolute;left:-17px;top:0;width:32px;height:32px;border-radius:50%;background:var(--forest);color:#fff;font-family:var(--disp);font-weight:800;font-size:.9rem;display:grid;place-items:center;box-shadow:0 0 0 4px #fff}
.post-steps li:last-child{padding-bottom:0}

/* figures */
.post-fig{margin:36px 0 40px}
.post-fig img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--rule);background:var(--mist)}
.post-fig figcaption{margin-top:12px;padding-left:14px;border-left:2px solid var(--leaf);font-size:.9rem;line-height:1.55;color:var(--mut)}
.post-fig.side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--mist);border-radius:var(--r);padding:22px}
.post-fig.side img{border:0}
.post-fig.side figcaption{margin:0;font-size:1rem;color:var(--char)}

/* table */
.post-table{margin:28px 0 20px;overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r)}
.post-table table{width:100%;border-collapse:collapse;font-size:.98rem;line-height:1.5;min-width:480px}
.post-table caption{caption-side:bottom;text-align:left;padding:12px 16px;font-size:.86rem;color:var(--mut);background:var(--mist);border-top:1px solid var(--rule)}
.post-table th,.post-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.post-table thead th{background:var(--forest);color:#fff;font-family:var(--disp);font-weight:700;font-size:.86rem;letter-spacing:.04em;border:0}
.post-table tbody th{font-family:var(--disp);font-weight:700;color:var(--ink)}
.post-table tbody tr:nth-child(even){background:#FAFCFA}
.post-table tbody tr:last-child>*{border-bottom:0}

/* tip box */
.post-tip{margin:28px 0;padding:20px 22px 20px 22px;border-radius:var(--r);background:var(--mist);border:1px solid var(--rule);border-left:4px solid var(--leaf)}
.post-tip b.lbl{display:block;font-family:var(--disp);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);margin-bottom:6px}
.post-tip p{margin:0;font-size:1rem}

/* FAQ inside the article */
.post-body .faq{margin-top:12px}
.post-body .faq summary{padding:20px 44px 20px 0}
.post-body .faq summary h3{margin:0;font-size:1.08rem;line-height:1.4;display:inline}
.post-body .faq details p{font-size:1.02rem}

/* closing call to action */
.post-cta{margin:64px 0 0;padding:40px;border-radius:12px;background:var(--forest);color:#dcebe1;position:relative;overflow:hidden}
.post-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--char) 75%)}
.post-body .post-cta h2{color:#fff;margin:0 0 12px}
.post-cta p{color:#dcebe1}
.post-body .post-cta a:not(.btn){color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.post-cta .btns{margin-top:22px}
.post-body .post-cta .btn{text-decoration:none}
.post-body .post-cta .btn-w{color:var(--forest)}
.post-body .post-cta .btn-ghost{color:#fff}
.post-body .post-cta .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* author box */
.post-author{display:flex;gap:18px;align-items:flex-start;margin-top:40px;padding:24px;border:1px solid var(--rule);border-radius:var(--r)}
.post-author img{width:56px;height:56px;flex:none;border-radius:50%;border:1px solid var(--rule);padding:6px;background:#fff;object-fit:contain}
.post-author b{display:block;font-family:var(--disp);color:var(--ink);font-size:1.02rem;margin-bottom:4px}
.post-author p{margin:0;font-size:.95rem;color:var(--mut);line-height:1.6}

@media (max-width:1020px){
  .post-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .toc{position:static}
  .toc ol{max-height:none}
  .toc-cta{display:none}
}
@media (max-width:640px){
  .post-body .intro{font-size:1.1rem}
  .post-body h2{margin-top:48px}
  .post-fig.side{grid-template-columns:1fr;padding:16px;gap:14px}
  .post-cta{padding:28px 22px 34px}
  .post-author{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.post-progress{display:none}}

/* blog index: featured post */
.feat-post{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);margin-bottom:56px;box-shadow:0 30px 60px -44px rgba(7,63,37,.55);transition:border-color .2s,box-shadow .2s}
.feat-post:hover{border-color:var(--forest);color:var(--ink);box-shadow:0 34px 70px -42px rgba(7,63,37,.6)}
.feat-post .fp-img{position:relative;overflow:hidden;background:var(--mist);min-height:100%}
.feat-post .fp-img img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feat-post:hover .fp-img img{transform:scale(1.04)}
.feat-post .fp-tag{position:absolute;top:18px;left:18px;background:var(--forest);color:#fff;font-family:var(--disp);font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.feat-post .fp-body{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:44px 44px 40px;position:relative}
.feat-post .fp-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,var(--char) 75%)}
.feat-post .kick{margin:0}
.feat-post h2{font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
.feat-post p{margin:0;color:var(--mut);font-size:1.02rem;line-height:1.6}
.feat-post .fp-meta{font-size:.88rem;color:var(--mut)}
.feat-post .fp-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--disp);font-weight:700;color:var(--forest)}
.feat-post .fp-go::after{content:"\2192";transition:transform .2s}
.feat-post:hover .fp-go::after{transform:translateX(4px)}
.blog-more{font-size:1.25rem;margin:0 0 20px}
@media (max-width:1020px){.feat-post{grid-template-columns:1fr}.feat-post .fp-body{padding:30px 26px 34px}}