/* Long-form article reading system — scoped to generated blog articles. */
.article-page{background:#fbfdfc;color:#20372c}
.article-page .article-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;background:radial-gradient(circle at 78% 18%,rgba(73,162,94,.12),transparent 34%),#f5fbf7;box-shadow:inset 0 -1px 0 rgba(11,92,63,.08);border-radius:0 0 42px 42px;padding:52px 24px 70px}
.article-page .article-hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(11,92,63,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,92,63,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent 8%,#000 50%,transparent 92%)}
.article-page .article-hero-inner{position:relative;z-index:1;width:min(900px,100%);margin:0 auto}
.article-page .article-back{display:inline-flex;align-items:center;gap:7px;margin:0 0 36px;color:#0b5c3f;font-size:14px;font-weight:750;text-decoration:none}
.article-page .article-back:hover,.article-page .article-back:focus-visible{color:#174a32;text-decoration:underline;text-underline-offset:4px}
.article-page .article-hero h1{max-width:900px;margin:18px auto 22px;color:#15382a;font-size:clamp(42px,5vw,62px);font-weight:800;line-height:1.03;letter-spacing:-2.6px;text-wrap:balance}
.article-page .article-hero p{max-width:700px;margin:0 auto;color:#536b60;font-size:18px;line-height:1.65;text-wrap:pretty}
.article-page .article-layout{display:grid;grid-template-columns:minmax(220px,250px) minmax(0,760px);align-items:start;gap:clamp(38px,6vw,76px);width:min(1080px,calc(100% - 48px));margin:0 auto;padding:72px 0 112px}
.article-page .article-toc{position:sticky;top:112px;align-self:start;max-height:calc(100svh - 136px);overflow:auto;padding:0;border:1px solid #cfe3d6;border-radius:18px;background:#f5fbf7;box-shadow:0 14px 34px rgba(12,67,42,.07);scrollbar-width:thin;scrollbar-color:#b8d9c3 transparent}
.article-page .article-toc::-webkit-scrollbar{width:6px}.article-page .article-toc::-webkit-scrollbar-thumb{border-radius:99px;background:#b8d9c3}
.article-page .article-toc-details{padding:20px 16px 17px}
.article-page .article-toc-summary{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;cursor:pointer;list-style:none}
.article-page .article-toc-summary::-webkit-details-marker{display:none}
.article-page .article-toc-summary:after{content:"⌄";grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:27px;height:27px;border:1px solid #c4ded0;border-radius:50%;color:#2c8151;font-size:17px;line-height:1;transition:transform .2s,background .2s}
.article-page .article-toc-details[open] .article-toc-summary:after{transform:rotate(180deg);background:#e4f5eb}
.article-page .article-toc-kicker{color:#2e7b4f;font-size:10px;font-weight:800;letter-spacing:1.05px;line-height:1.3}
.article-page .article-toc-title{color:#183f2d;font-size:18px;font-weight:800;line-height:1.25}
.article-page .article-toc-count{grid-column:1;color:#6a8175;font-size:11px;line-height:1.3}
.article-page .article-toc nav{display:grid;gap:3px;margin-top:17px;padding-top:15px;border-top:1px solid #d9eae0}
.article-page .article-toc a{position:relative;display:grid;grid-template-columns:27px minmax(0,1fr);align-items:start;gap:8px;min-height:38px;padding:9px 8px;border:1px solid transparent;border-radius:9px;color:#4e6a5c;font-size:12px;font-weight:650;line-height:1.35;text-decoration:none;transition:background .2s,border-color .2s,color .2s,transform .2s}
.article-page .article-toc a:hover,.article-page .article-toc a:focus-visible{background:#e6f6eb;border-color:#b8dbc4;color:#125833;outline:none}
.article-page .article-toc a[aria-current="location"]{background:#e2f4e9;border-color:#a7d2b6;color:#0d5832;font-weight:800;box-shadow:inset 3px 0 #3e9b5b}
.article-page .article-toc .article-toc-index{color:#2f8a52;font-size:10px;font-weight:800;letter-spacing:.3px;line-height:1.5}
.article-page .article-toc .article-toc-sub{padding-left:17px;color:#6a8377;font-size:11px;font-weight:600}
.article-page .article-toc .article-toc-sub .article-toc-index{color:#8aac9b;font-size:12px}
.article-page .article-content{min-width:0;max-width:760px;color:#20372c;counter-reset:article-section}
.article-page .article-intro{margin:0 0 46px;padding:24px 26px;border-left:3px solid #49a25e;border-radius:0 14px 14px 0;background:#f1faf5;color:#38594c;font-size:20px;line-height:1.65}
.article-page .article-content section{position:relative;margin-top:0;padding:31px 0 0 26px;border:0;border-left:2px solid #dcebe2}
.article-page .article-content section+section{margin-top:58px}
.article-page .article-content section:not(.article-conclusion):before{counter-increment:article-section;content:counter(article-section,decimal-leading-zero);position:absolute;top:31px;right:2px;color:#49a25e;font-size:12px;font-weight:800;letter-spacing:.5px}
.article-page .article-content h2{max-width:620px;margin:0 42px 15px 0;color:#173b2b;font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-1.2px;text-wrap:balance;scroll-margin-top:116px}
.article-page .article-content h3{display:flex;align-items:center;gap:10px;margin:25px 0 10px;color:#17623a;font-size:16px;font-weight:800;line-height:1.35;scroll-margin-top:116px}
.article-page .article-content h3:after{content:"";width:34px;height:1px;background:#9bcaaa}
.article-page .article-content p{margin:0;color:#536b60;font-size:16px;line-height:1.78}
.article-page .article-content p+p{margin-top:18px}
.article-page .article-content ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.article-page .article-content li{padding:12px 14px;border:1px solid #dcebe2;border-radius:10px;background:#fbfefc;color:#536b60;font-size:14px;line-height:1.55;box-shadow:0 3px 10px rgba(12,67,42,.025)}
.article-page .article-conclusion{margin-top:70px!important;padding:30px 30px 32px!important;border:1px solid #c5ded0!important;border-radius:20px;background:#f1faf5}
.article-page .article-conclusion h2{margin-right:0}.article-page .article-conclusion:before{display:none!important}
.article-page .article-conclusion .btn{margin-top:24px}
@media(max-width:900px){
  .article-page .article-hero{padding:46px 24px 60px;border-radius:0 0 34px 34px}
  .article-page .article-hero h1{font-size:clamp(38px,7vw,52px);letter-spacing:-2px}
  .article-page .article-hero p{font-size:17px}
  .article-page .article-layout{display:block;width:min(780px,calc(100% - 48px));padding:56px 0 92px}
  .article-page .article-toc{position:static;max-height:none;margin:0 0 42px}
  .article-page .article-toc-details{padding:18px 17px 16px}
  .article-page .article-toc nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px}
  .article-page .article-toc a{min-height:42px;font-size:13px}
  .article-page .article-toc .article-toc-sub{font-size:12px}
  .article-page .article-content h2{font-size:clamp(29px,5vw,36px)}
}
@media(max-width:560px){
  .article-page .article-hero{padding:38px 20px 50px;border-radius:0 0 28px 28px}
  .article-page .article-hero h1{font-size:clamp(34px,10vw,43px);line-height:1.07;letter-spacing:-1.5px}
  .article-page .article-hero p{font-size:16px;line-height:1.58}
  .article-page .article-back{margin-bottom:28px;font-size:14px}
  .article-page .article-layout{width:calc(100% - 32px);padding:40px 0 72px}
  .article-page .article-toc{margin-bottom:34px;border-radius:16px}
  .article-page .article-toc-details{padding:16px 14px}
  .article-page .article-toc-title{font-size:17px}
  .article-page .article-toc nav{grid-template-columns:1fr;gap:4px;margin-top:14px;padding-top:13px}
  .article-page .article-toc a{min-height:44px;padding:10px 8px;font-size:14px}
  .article-page .article-toc .article-toc-sub{font-size:13px}
  .article-page .article-intro{margin-bottom:36px;padding:19px 18px;font-size:18px;line-height:1.58}
  .article-page .article-content section{padding:24px 0 0 18px}
  .article-page .article-content section+section{margin-top:46px}
  .article-page .article-content section:not(.article-conclusion):before{top:24px}
  .article-page .article-content h2{margin-right:34px;font-size:clamp(28px,8.5vw,34px);line-height:1.13}
  .article-page .article-content h3{font-size:16px}
  .article-page .article-content p{font-size:16px;line-height:1.7}
  .article-page .article-content p+p{margin-top:15px}
  .article-page .article-content li{font-size:14px;padding:11px 12px}
  .article-page .article-conclusion{margin-top:52px!important;padding:23px 20px 24px!important}
}
@media(prefers-reduced-motion:reduce){.article-page .article-toc a,.article-page .article-toc-summary:after{transition:none}}