/* Blog article only: uses the same colour tokens, shared page width and
   header/footer implementation as the supplied SS Web Design Era homepage. */
body.blog-post-page {
  background: var(--bg, #0a0a0e);
  color: var(--text, #f7f3ec);
}
body.blog-post-page #main-content.blog-article-main {
  display: block;
  width: min(calc(100% - 40px), var(--max, 1250px));
  max-width: 1250px;
  min-height: 65vh;
  margin: 0 auto;
  padding: clamp(44px, 5vw, 76px) 0 clamp(64px, 6vw, 96px);
}
body.blog-post-page .blog-article {
  width: min(100%, 900px);
  max-width: 900px;
  margin-inline: auto;
  padding: 0;
  overflow-wrap: anywhere;
}
body.blog-post-page .blog-back-link {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--gold, #e8c582);
  text-decoration: none;
}
body.blog-post-page .blog-article .eyebrow {
  margin: 0 0 14px;
  color: var(--gold, #e8c582);
}
body.blog-post-page .blog-article .article-taxonomy {
  margin: 0 0 12px;
  color: var(--gold, #e8c582);
}
body.blog-post-page .blog-article h1 {
  font: 500 clamp(34px, 4vw, 54px)/1.18 Georgia, serif;
  color: var(--gold-bright, #f5ddac);
  margin: 0 0 24px;
}
body.blog-post-page .blog-article > p:not(.article-taxonomy) {
  max-width: 830px;
  color: var(--muted, #b6b0ab);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.8;
  margin: 0 0 26px;
}
body.blog-post-page .blog-article .article-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  border-radius: 12px;
  margin: 26px auto 42px;
}
body.blog-post-page .blog-article .article-body {
  font-size: 18px;
  line-height: 1.85;
  margin: 34px 0;
}
body.blog-post-page .blog-article .article-body h2 {
  color: var(--gold-bright, #f5ddac);
  font: 500 clamp(24px, 3vw, 32px)/1.28 Georgia, serif;
  margin: 35px 0 16px;
}
body.blog-post-page .blog-article .article-body p { margin: 0 0 22px; }
body.blog-post-page .blog-article .article-body strong { color: var(--gold, #e8c582); }
body.blog-post-page .blog-article .blog-internal-links {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border, rgba(232,197,130,.2));
}
body.blog-post-page .blog-article .blog-internal-links h2 {
  color: var(--gold, #e8c582);
  font: 500 26px/1.3 Georgia, serif;
}
body.blog-post-page .blog-article .blog-internal-links li {
  margin: 10px 0;
  line-height: 1.65;
}
body.blog-post-page .blog-article .blog-internal-links a { color: var(--gold, #e8c582); }
@media (max-width: 640px) {
  body.blog-post-page #main-content.blog-article-main {
    width: calc(100% - 32px);
    padding-top: 36px;
    padding-bottom: 60px;
  }
  body.blog-post-page .blog-article .article-body { font-size: 16px; }
}

/* Final article-only alignment; avoid changes to the shared header/footer. */
body.blog-post-page #main-content.blog-article-main {
  width: min(calc(100% - 48px), 1240px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(44px, 5vw, 72px) 0 88px;
}
body.blog-post-page #main-content.blog-article-main > article.blog-article {
  box-sizing: border-box;
  width: min(100%, 1040px);
  max-width: 1040px;
  min-width: 0;
  margin: 0 auto;
  padding-inline: clamp(0px, 2.4vw, 22px);
}
body.blog-post-page .blog-article .article-body {
  max-width: 100%;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.85;
}
body.blog-post-page .blog-article .article-body p,
body.blog-post-page .blog-article .article-body h2 {
  max-width: 100%;
}
body.blog-post-page .blog-article .article-cover {
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 640px) {
  body.blog-post-page #main-content.blog-article-main {
    width: calc(100% - 32px);
    padding: 32px 0 60px;
  }
  body.blog-post-page #main-content.blog-article-main > article.blog-article {
    padding-inline: 0;
  }
}

/* Archive-aligned full-width article: same 1240px shell as blog.php.
   Scoped to blog posts; leave shared header/footer styling untouched. */
body.blog-post-page #main-content.blog-article-main {
  box-sizing: border-box;
  width: min(calc(100% - 48px), 1240px);
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(40px, 5vw, 72px) 0 80px;
}
body.blog-post-page #main-content.blog-article-main > article.blog-article {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}
body.blog-post-page .blog-article .article-body,
body.blog-post-page .blog-article .blog-internal-links,
body.blog-post-page .blog-article .article-cover {
  width: 100%;
  max-width: none;
}
body.blog-post-page .blog-article .article-body {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.82;
}
@media (max-width: 640px) {
 body.blog-post-page #main-content.blog-article-main {
   width: calc(100% - 32px);
   padding: 32px 0 60px;
 }
}

/* Gold-border treatment for all public blog posts, not the global website. */
body.blog-post-page #main-content.blog-article-main > article.blog-article {
  border: 1px solid rgba(233, 185, 92, .65);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(32, 23, 33, .78), rgba(12, 11, 17, .94));
  padding: clamp(20px, 3.4vw, 48px);
  box-shadow: 0 0 0 1px rgba(245, 198, 109, .06), 0 14px 38px rgba(0, 0, 0, .20);
  overflow: hidden;
}
body.blog-post-page .blog-article .article-cover {
  border: 1px solid rgba(241, 192, 98, .7);
  border-radius: 16px;
  background: #0b0a0e;
}
body.blog-post-page .blog-article .blog-internal-links {
  border: 1px solid rgba(233, 185, 92, .5);
  border-radius: 14px;
  background: rgba(28, 20, 30, .7);
  padding: clamp(18px, 2vw, 28px);
  margin-top: 28px;
}
body.blog-post-page .blog-article .blog-internal-links h2 { margin-top: 0; }
body.blog-post-page .blog-article .blog-internal-links ul { padding-left: 22px; }
@media (max-width: 640px) {
  body.blog-post-page #main-content.blog-article-main > article.blog-article {
    border-radius: 14px;
    padding: 18px;
  }
  body.blog-post-page .blog-article .article-cover { border-radius: 10px; }
}