/* Readable blog article layout; keep existing hero image and turquoise title strip. */
.article-reader{background:#f7faf8;padding-bottom:64px;color:#27483c}.article-reader .img_boxs{margin-bottom:0}.article-reader .img_boxs img{object-fit:contain}.article-reader .titles{background:#12a89d}.article-reader .titles h1{font-size:clamp(23px,3vw,38px);line-height:1.7;margin:0 auto;max-width:1050px;padding:0 20px}.article-no-image{background:#12a89d;text-align:center;padding:38px 16px;color:white}.article-no-image h1{font-size:32px}
.article-container{max-width:1220px;padding-top:28px}.article-crumb{font-size:13px;color:#7d9189;margin-bottom:26px;line-height:2}.article-crumb a{color:#128d80;text-decoration:none}.article-crumb span{color:#5e7268}.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:27px;direction:rtl;align-items:start}.article-main{min-width:0}.article-paper{padding:clamp(20px,4vw,45px);background:white;border:1px solid #e4eee8;border-radius:15px;box-shadow:0 5px 30px #1948390d}
.article-content{font-size:17px;line-height:2.2;color:#324e42;text-align:justify;overflow-wrap:anywhere}.article-content p{margin:0 0 1.5em;line-height:2.2}.article-content h2,.article-content h3,.article-content h4{text-align:right;color:#205648;line-height:1.8;font-weight:bold;scroll-margin-top:110px}.article-content h2{font-size:25px;margin:1.8em 0 .8em;border-right:4px solid #12a89d;padding-right:14px}.article-content h3{font-size:21px;margin:1.5em 0 .8em}.article-content h4{font-size:18px;margin:1.3em 0 .6em}.article-content a{color:#098e81;text-decoration:underline;text-underline-offset:4px}.article-content a:hover{color:#065b52}.article-content img,.article-content video,.article-content iframe{max-width:100%;height:auto;border-radius:9px}.article-content figure{margin:24px auto;max-width:100%;text-align:center}.article-content figcaption{color:#728a80;font-size:13px;margin-top:8px}.article-content ul,.article-content ol{padding-right:28px;padding-left:0;margin-bottom:24px;list-style-position:outside}.article-content ul{list-style:disc}.article-content ol{list-style:decimal}.article-content li{margin-bottom:9px}.article-content blockquote{border-right:4px solid #12a89d;background:#f0f9f6;padding:20px 23px;border-radius:8px;margin:25px 0;color:#275c4b}.article-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:24px 0}.article-content th,.article-content td{border:1px solid #dcebe3;padding:12px;min-width:80px}.article-content th{background:#eff7f2}.article-content pre{direction:ltr;text-align:left;overflow:auto;background:#f1f5f2;padding:18px;border-radius:9px}.article-content strong{font-weight:700}.article-content hr{border:0;border-top:1px solid #e7eee9;margin:32px 0}
.article-toc{position:sticky;top:110px;background:#fff;border:1px solid #e4eee8;border-radius:13px;padding:23px 21px;max-height:calc(100vh - 130px);overflow:auto}.article-toc h2{font-size:17px;font-weight:700;color:#205548;margin:0 0 18px}.article-toc ol,.article-toc-mobile ol{padding-right:22px;margin:0}.article-toc li,.article-toc-mobile li{line-height:1.9;font-size:14px;margin-bottom:11px}.article-toc a,.article-toc-mobile a{color:#49685b;text-decoration:none}.article-toc a:hover,.article-toc-mobile a:hover{color:#0b9889}.article-toc-mobile{display:none}.article-end{text-align:left;margin-top:35px;border-top:1px solid #e6efea;padding-top:23px}.article-end a{color:#078e80;font-size:14px}
.article-neighbors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:24px 0}.article-neighbors a{display:flex;flex-direction:column;background:#fff;padding:19px;border:1px solid #e3ece6;border-radius:12px;text-decoration:none;gap:9px}.article-neighbors small{color:#0f9787}.article-neighbors strong{font-size:15px;color:#2e5b4c;line-height:1.8}.article-related{margin-top:38px}.article-related h2{font-size:24px;font-weight:700;color:#205548;margin:0 0 22px}.article-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.article-card{display:block;border:1px solid #e1eae4;border-radius:12px;overflow:hidden;background:white;text-decoration:none;color:#205548}.article-card img{display:block;width:100%;height:155px;object-fit:cover}.article-card span{display:block;font-size:15px;font-weight:700;line-height:1.8;padding:15px}.article-card:hover{box-shadow:0 7px 25px #173e331c}
@media(max-width:900px){.article-grid{display:block}.article-sidebar{display:none}.article-toc-mobile{display:block;border:1px solid #dcece4;background:#f3faf6;border-radius:10px;padding:18px;margin-bottom:27px}.article-toc-mobile summary{font-weight:700;color:#24584b;cursor:pointer}.article-toc-mobile ol{margin-top:14px}}
@media(max-width:600px){.article-container{padding-left:14px;padding-right:14px}.article-paper{padding:20px 17px}.article-content{font-size:16px}.article-content h2{font-size:21px}.article-content h3{font-size:19px}.article-neighbors,.article-cards{grid-template-columns:1fr}.article-reader .titles h1{font-size:24px}}


/* Reader v2: full-width related articles, one global breadcrumb and proper sticky TOC. */
.article-reader .article-container{max-width:1280px}
.article-reader .article-sidebar{align-self:stretch;min-height:100%}
.article-reader .article-sidebar .article-toc{position:sticky;top:95px;z-index:2}
.article-reader .article-related{margin:44px 0 0;clear:both}
.article-reader .article-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.article-reader .article-card img{height:210px}
.article-reader .article-card span{font-size:16px;padding:17px 19px}
.article-reader .article-content{font-size:18px!important;line-height:2.3!important;letter-spacing:normal;text-align:start}
.article-reader .article-content p,.article-reader .article-content div{line-height:inherit}
.article-reader .article-content p{margin:0 0 1.65em;max-width:100%}
.article-reader .article-content h2{font-size:clamp(23px,2.3vw,29px);line-height:1.75;margin:2em 0 .85em;padding:5px 17px 5px 0;background:linear-gradient(270deg,#eef9f6,transparent 85%);border-radius:3px}
.article-reader .article-content h3{font-size:clamp(20px,1.8vw,24px);margin:1.7em 0 .8em;color:#28644e}
.article-reader .article-content h4,.article-reader .article-content h5,.article-reader .article-content h6{font-size:19px;margin:1.45em 0 .65em;color:#376e59}
.article-reader .article-content img{display:block;max-width:100%;height:auto;margin:22px auto}
.article-reader .article-content a:not(.btn){color:#087f73;text-underline-offset:4px}
.article-reader .article-content table{width:100%;font-size:15px;line-height:1.8;background:white}
.article-reader .article-content th{background:#eaf5f0;font-weight:700}
.article-reader .article-content li{padding-right:3px;line-height:2.05}
.article-reader .article-content blockquote{font-size:1.02em;line-height:2.1}
.article-reader .article-content iframe{max-width:100%;aspect-ratio:16/9}
.article-reader .article-content *{box-sizing:border-box}
.article-reader .article-content [style*="font-size"]{line-height:1.9}
@media(max-width:900px){.article-reader .article-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.article-reader .article-content{font-size:16.5px!important;line-height:2.2!important}.article-reader .article-cards{grid-template-columns:1fr}.article-reader .article-card img{height:190px}}

/* Related cards: display the full original image, without forced cropping. */
.article-reader .article-related .article-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* v4: explicit grid placement protects the article content from inherited site layout rules. */
.article-reader .article-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  grid-template-areas: "content toc";
  align-items: stretch;
  gap: 28px;
}
.article-reader .article-grid > .article-main {
  grid-area: content;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.article-reader .article-grid > .article-sidebar {
  grid-area: toc;
  display: block;
  width: 100%;
  min-width: 0;
  align-self: stretch;
}
.article-reader .article-paper, .article-reader .article-content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.article-reader .article-content > h2:first-child,
.article-reader .article-content > :first-child h2:first-child,
.article-reader .article-content > :first-child {
  margin-top: 0;
}
.article-reader .article-paper { padding-top: clamp(26px, 4vw, 45px); }
@media (max-width: 900px) {
  .article-reader .article-grid {display: block;}
  .article-reader .article-grid > .article-sidebar {display: none;}
}