/* Focused reading layout for a single published post. */
body.article-page{background:linear-gradient(180deg,#f8fbff 0,#eef5ff 18rem,#f8fbff 50rem)}
body.article-page .news-topbar{display:none}
body.article-page .news-shell{width:min(100% - 28px,900px);margin:0 auto 64px}
.article-screen{padding-top:18px}
.article-appbar{height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 auto 18px}
.article-appbar h1{margin:0;color:#102657;font-size:1.08rem;font-weight:900}
.article-round-button,.article-icon-button{display:grid;place-items:center;border:1px solid #e4ecf7;background:#fff;color:#1a4da1;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease}
.article-round-button{width:46px;height:46px;justify-self:start;border-radius:16px;box-shadow:0 8px 20px rgba(53,91,151,.07)}
.article-round-button svg,.article-icon-button svg,.article__topline time svg,.article-facts svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.article-round-button:hover,.article-icon-button:hover{transform:translateY(-1px);background:#edf4ff;color:#1462e8}
.article-viewer{justify-self:end;display:flex;align-items:center;gap:8px;min-height:48px;padding:5px 6px 5px 11px;border-radius:18px;background:#fff;box-shadow:0 9px 22px rgba(53,91,151,.07);text-decoration:none}
.article-viewer>span:first-child{display:grid;gap:1px;text-align:right}.article-viewer small{color:#8090aa;font-size:.62rem}.article-viewer b{max-width:105px;overflow:hidden;color:#172b58;font-size:.78rem;white-space:nowrap;text-overflow:ellipsis}
.article-viewer__avatar,.article-author__avatar{position:relative;display:grid;place-items:center;overflow:visible;width:38px;height:38px;flex:0 0 auto;border-radius:50%;color:#fff;background:linear-gradient(135deg,#80a9fa,#1767eb);font-size:.8rem;font-weight:900}
.article-viewer__avatar img,.article-author__avatar img{width:100%;height:100%;object-fit:cover;border:2px solid #fff;border-radius:50%}
.article-viewer__avatar i{position:absolute;left:-1px;bottom:0;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#22c883}
body.article-page .article{max-width:840px;overflow:hidden;border:1px solid #e5edf8;border-radius:30px;background:#fff;box-shadow:0 18px 48px rgba(52,87,138,.1)}
body.article-page .article__head{position:relative;padding:clamp(20px,4vw,38px) clamp(20px,5.2vw,52px) 20px}
.article__topline{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:30px}.article__topline .news-type{margin:0}.article__topline time{display:inline-flex;align-items:center;gap:5px;color:#70809d;font-size:.76rem;font-weight:700}.article__topline time svg{width:18px;color:#2d78ef}
.article__actions{position:absolute;top:clamp(20px,4vw,36px);left:clamp(20px,5vw,50px);display:flex;gap:8px}.article-icon-button{width:42px;height:42px;border-radius:13px}.article-icon-button.is-saved{border-color:#8db8ff;color:#1462e8;background:#edf4ff}.article-icon-button.is-saved svg{fill:currentColor}
body.article-page .article__head h2{max-width:760px;margin:24px 0 10px;color:#102657;font-size:clamp(1.45rem,4.2vw,2.45rem);font-weight:900;line-height:1.55;letter-spacing:-.035em}
body.article-page .article__lead{max-width:760px;margin:0;color:#637492;font-size:clamp(.82rem,1.8vw,.98rem);line-height:2.1}
body.article-page .article__hero{display:block;width:calc(100% - clamp(32px,8vw,104px));height:min(405px,49vw);margin:0 auto;border-radius:22px;object-fit:cover;box-shadow:0 12px 30px rgba(19,42,85,.12)}
.article-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:clamp(20px,4vw,34px) clamp(20px,5.2vw,52px) 0;padding:16px 12px;border:1px solid #e0eafa;border-radius:18px;background:linear-gradient(135deg,#fbfdff,#f1f6ff)}
.article-facts>span{min-width:0;display:grid;grid-template-columns:25px 1fr;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:3px 11px;color:#2a70e7}.article-facts>span+span{border-right:1px solid #e1eaf7}.article-facts svg{grid-row:1/3;width:20px}.article-facts b{overflow:hidden;color:#18315d;font-size:.76rem;white-space:nowrap;text-overflow:ellipsis}.article-facts small{overflow:hidden;margin-top:3px;color:#71819f;font-size:.68rem;white-space:nowrap;text-overflow:ellipsis}
body.article-page .article__content{max-width:770px;margin:auto;padding:clamp(28px,5vw,48px) clamp(20px,5.2vw,52px) 16px;color:#314568;font-size:clamp(.9rem,1.8vw,1.02rem);line-height:2.35}body.article-page .article__content>p:first-child{margin-top:0}body.article-page .article__content h2,body.article-page .article__content h3{position:relative;padding-bottom:10px;color:#132e65;font-weight:900}body.article-page .article__content h2::after,body.article-page .article__content h3::after{content:"";position:absolute;right:0;bottom:0;width:42px;height:3px;border-radius:99px;background:#216ef1}body.article-page .article__content ul,body.article-page .article__content ol{padding-right:24px}body.article-page .article__content li::marker{color:#2475f4}
.article-author{display:flex;align-items:center;gap:11px;max-width:430px;margin:18px clamp(20px,5.2vw,52px) 0;padding:10px 12px;border:1px solid #e1eaf7;border-radius:17px;background:#fbfdff}.article-author__avatar{width:48px;height:48px}.article-author__avatar span{font-size:1rem}.article-author small,.article-author b{display:block}.article-author small{color:#7787a2;font-size:.7rem}.article-author b{margin-top:3px;color:#193461;font-size:.87rem}
body.article-page .article__foot{min-height:34px;padding:4px clamp(20px,5.2vw,52px) 24px;border:0;color:#5d76a2;font-size:.75rem}.article__foot span:empty{display:none}.related{padding:0 2px}.related h2{margin:30px 0 14px;color:#173564;font-size:1.1rem}
@media(max-width:760px){body.article-page .news-shell{width:min(100% - 20px,620px);margin-bottom:32px}.article-screen{padding-top:7px}.article-appbar{height:59px;margin-bottom:10px;direction:ltr}.article-appbar h1{direction:rtl;font-size:.95rem}.article-round-button{width:42px;height:42px;border-radius:14px}.article-viewer{min-height:41px;padding:4px 4px 4px 8px;border-radius:15px;direction:rtl}.article-viewer__avatar{width:33px;height:33px}.article-viewer b{max-width:80px;font-size:.7rem}.article-viewer small{font-size:.56rem}body.article-page .article{border-radius:23px}body.article-page .article__head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"topline actions" "title title" "lead lead";column-gap:10px;padding:20px 18px 16px}.article__topline{grid-area:topline;justify-self:start;justify-content:flex-start;min-width:0;gap:6px}.article__topline time{min-width:0}.article__topline time span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.article__actions{position:static;grid-area:actions;justify-self:end;align-self:center;gap:7px}.article-icon-button{width:37px;height:37px;border-radius:12px}.article-icon-button svg{width:18px}body.article-page .article__head h2{grid-area:title;margin:19px 0 10px;font-size:clamp(1.3rem,6vw,1.75rem);line-height:1.65}body.article-page .article__lead{grid-area:lead;font-size:.78rem;line-height:2}body.article-page .article__hero{width:calc(100% - 36px);height:clamp(190px,57vw,255px);border-radius:17px}.article-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin:20px 18px 0;padding:8px}.article-facts>span{padding:9px 7px}.article-facts>span:nth-child(3){border-right:0}.article-facts>span:nth-child(n+3){border-top:1px solid #e1eaf7}.article-facts b{font-size:.68rem}.article-facts small{font-size:.62rem}body.article-page .article__content{padding:28px 20px 10px;font-size:.88rem;line-height:2.25}.article-author{margin:14px 20px 0}.related{margin:22px auto}.related h2{margin:0 2px 12px}.related .news-card__body{padding:10px}.related .news-card p{display:none}}
@media(max-width:370px){.article-appbar{grid-template-columns:42px 1fr auto}.article-viewer>span:first-child{display:none}.article-facts>span{grid-template-columns:21px minmax(0,1fr);padding:8px 4px}.article-facts svg{width:17px}.article-facts b{font-size:.63rem}.article-facts small{font-size:.58rem}}

/* Related articles use a stable horizontal layout, so featured images never jump. */
.related .news-grid { grid-template-columns: 1fr; gap: 13px; }
.related .news-card { display: grid; grid-template-columns: 178px minmax(0, 1fr); align-items: stretch; min-height: 142px; border-radius: 22px; }
.related .news-card__image { width: 100%; height: 100%; min-height: 142px; border-radius: 0 22px 22px 0; object-fit: cover; object-position: center; }
.related .news-card__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 15px 17px; }
.related .news-card .news-type { margin-bottom: 5px; padding: 4px 8px; font-size: .62rem; }
.related .news-card h2 { display: -webkit-box; margin: 0; overflow: hidden; color: #173564; font-size: .92rem; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.related .news-card p { display: -webkit-box; min-height: 0; margin: 5px 0 0; overflow: hidden; color: #8797b1; font-size: .69rem; line-height: 1.85; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.related .news-card .news-meta { width: 100%; margin-top: auto; padding-top: 8px; color: #8494ae; font-size: .63rem; }

@media (max-width: 760px) {
  .related .news-grid { grid-template-columns: 1fr; gap: 10px; }
  .related .news-card { grid-template-columns: 112px minmax(0, 1fr); min-height: 118px; border-radius: 18px; }
  .related .news-card__image { min-height: 118px; border-radius: 0 18px 18px 0; }
  .related .news-card__body { padding: 11px 12px; }
  .related .news-card .news-type { margin-bottom: 3px; padding: 3px 7px; font-size: .55rem; }
  .related .news-card h2 { font-size: .78rem; line-height: 1.6; }
  .related .news-card p { display: -webkit-box; margin-top: 3px; font-size: .61rem; line-height: 1.75; }
  .related .news-card .news-meta { padding-top: 5px; font-size: .56rem; }
}