.article-page{padding:54px 0 90px;background:var(--surface-tint);min-height:65vh}
.article-wrap{width:min(900px,calc(100% - 40px));margin:0 auto}
.article-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;color:var(--primary);font-weight:600;text-decoration:none}
.article-back:hover{text-decoration:underline}
.article-hero{position:relative;min-height:240px;border-radius:28px;overflow:hidden}
.article-hero .bl-cover-illus{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-hero .bl-cover-motif{position:absolute;inset:0}
.article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,14,32,.24),transparent)}
.article-header{position:relative;z-index:1;max-width:790px;margin:-54px auto 0;padding:0 32px}
.article-header .bl-tags{margin-bottom:14px}
.article-header h1{margin:0;color:var(--ink);font-family:'Fraunces',serif;font-size:clamp(32px,5vw,52px);line-height:1.1;letter-spacing:-.035em}
.article-byline{margin-top:17px;color:var(--ink-faint);font-size:14px}
.article-body{max-width:790px;margin:36px auto 0;padding:0 32px;color:var(--ink-soft);font-size:17px;line-height:1.78}
.article-body p{margin:0 0 22px}
.article-body h2{margin:36px 0 12px;color:var(--ink);font-family:'Inter',sans-serif;font-size:23px;line-height:1.35}
.article-footer-link{display:inline-flex;margin-top:20px;color:var(--primary);font-weight:600;text-decoration:none}
.article-footer-link:hover{text-decoration:underline}
@media(max-width:600px){
  .article-page{padding:34px 0 62px}
  .article-wrap{width:min(100% - 28px,900px)}
  .article-hero{min-height:180px;border-radius:20px}
  .article-header{margin-top:-34px;padding:0 18px}
  .article-header h1{font-size:34px}
  .article-body{margin-top:28px;padding:0 18px;font-size:16px}
  .article-body h2{font-size:20px}
}