.article-page { max-width: 920px; padding-block: 38px 50px; min-height: calc(100vh - 180px); }
.article-back { display: inline-block; color: #9a5e76; font-size: 13px; padding-block: 8px; }
.article-back:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.article-heading { margin: 24px 0 27px; padding-bottom: 26px; border-bottom: 2px solid #a6758a; }
.article-heading time { display: block; margin-bottom: 14px; color: #948090; font-size: 12px; }
.article-page h1 { font: 500 39px/1.35 var(--serif); color: #45344a; letter-spacing: -.7px; }
.article-image { width: 100%; height: auto; max-height: 390px; object-fit: cover; border-radius: 3px; }
.article-image.article-companions { height: 320px; object-fit: contain; padding: 20px; background: #f7f4f7; }
.article-body { max-width: 780px; margin: 30px auto; }
.article-body p, .article-missing p { font-size: 16px; line-height: 1.95; color: #6a5c6e; }
.article-body p+p { margin-top: 18px; }
.article-bottom { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 32px; }
.article-missing { margin-block: 34px; }
.article-missing p { margin-top: 20px; }
html[lang="ar"] .article-page h1 { letter-spacing: 0; }
html[lang="ar"] .article-body p { font-size: 18px; }
@media(max-width:600px) {
  .article-page { padding-block: 24px 32px; }
  .article-page h1 { font-size: 28px; }
  .article-heading { margin-top: 20px; padding-bottom: 20px; }
  .article-body { margin-top: 22px; }
  .article-body p, .article-missing p { font-size: 14px; }
  html[lang="ar"] .article-body p { font-size: 16px; }
  .article-image.article-companions { height: 240px; }
}