/* ==========================================================================
   blog.css — article-specific styles for blog posts
   Loaded via {{> head includeBlogCss=true}} on blog-* pages.
   Depends on tokens (--bg, --amber, etc.) defined in site.css.
   ========================================================================== */

.article-wrap { max-width: 780px; margin: 0 auto; padding: 160px 48px 120px; }

.article__back { display: inline-flex; align-items: center; gap: 10px; font-size: .65rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mid-gray); text-decoration: none; margin-bottom: 48px; transition: color .2s; }
.article__back:hover { color: var(--amber); }

.article__kicker { font-size: .57rem; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 20px; }
.article__rule { width: 48px; height: 1px; background: var(--amber); display: block; margin-bottom: 32px; }
.article__title { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 300; line-height: 1.08; margin-bottom: 28px; }
.article__meta { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mid-gray); margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid rgba(245,240,235,.07); }
.article__meta span { color: rgba(201,149,76,.6); }
.article__lede { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 300; line-height: 1.6; color: rgba(245,240,235,.8); margin-bottom: 52px; }

.article__body h2 { font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 300; line-height: 1.2; color: var(--warm-white); margin: 56px 0 20px; }
.article__body h2 em { font-style: italic; color: var(--amber); }
.article__body p { font-size: .97rem; color: rgba(245,240,235,.68); line-height: 1.9; margin-bottom: 24px; }
.article__body p strong { color: var(--warm-white); font-weight: 400; }
.article__body ul { margin: 8px 0 28px 0; display: flex; flex-direction: column; gap: 12px; }
.article__body ul li { font-size: .97rem; color: rgba(245,240,235,.68); line-height: 1.8; padding-left: 20px; position: relative; }
.article__body ul li::before { content: '—'; position: absolute; left: 0; color: var(--amber); }

.article__pull { font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 300; font-style: italic; line-height: 1.45; color: var(--warm-white); border-left: 2px solid rgba(201,149,76,.3); padding: 4px 0 4px 36px; margin: 52px 0; }
.article__pull em { color: var(--amber); font-style: italic; }

.article__cta { background: var(--panel); border-left: 2px solid var(--amber); padding: 40px 48px; margin: 64px 0 0; }
.article__cta p { font-size: .93rem; color: rgba(245,240,235,.65); line-height: 1.85; margin-bottom: 20px; }
.article__cta p:last-child { margin-bottom: 0; }

/* RELATED POSTS */
.related { background: var(--panel); padding: 80px; margin-top: 0; }
.related__inner { max-width: 780px; margin: 0 auto; }
.related h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 300; margin-bottom: 40px; }
.related h3 em { font-style: italic; color: var(--amber); }
.related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(245,240,235,.06); }
.related__card { background: var(--panel); padding: 36px 32px; text-decoration: none; color: inherit; transition: background .2s; }
.related__card:hover { background: var(--surface); }
.related__card span { font-size: .52rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 12px; }
.related__card h4 { font-family: var(--serif); font-size: 1.1rem; font-weight: 300; line-height: 1.3; color: rgba(245,240,235,.85); }

/* BLOG MOBILE */
@media (max-width: 960px) {
  .article-wrap { padding: 140px 24px 80px; }
  .related { padding: 60px 24px; }
  .related__grid { grid-template-columns: 1fr; }
  .author-bio { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 600px) {
  .article-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .related { padding-left: 20px !important; padding-right: 20px !important; }
  .related__grid { grid-template-columns: 1fr !important; }
}