.article-page { padding-top: 84px; }
.article-hero { padding: 86px 28px 70px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.article-hero-inner { width: min(980px, 100%); margin: 0 auto; }
.breadcrumbs { margin-bottom: 48px; display: flex; gap: 10px; color: var(--muted); font-size: 12px; }
.breadcrumbs a { text-underline-offset: 4px; }
.article-kicker { margin: 0 0 18px; color: var(--forest); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.article-hero h1 { max-width: 940px; margin: 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.18; letter-spacing: -.045em; }
.article-meta { margin-top: 30px; display: flex; gap: 20px; color: var(--muted); font: 700 12px/1.4 var(--font-mono); }
.article-cover { width: min(1180px, calc(100% - 56px)); max-height: 660px; margin: 0 auto; overflow: hidden; background: #e7ede7; }
.article-cover img { width: 100%; height: min(58vw, 660px); object-fit: cover; }
.article-body { width: min(820px, calc(100% - 56px)); margin: 76px auto 88px; color: #283a34; font-size: 17px; line-height: 1.95; }
.article-body h2 { margin: 60px 0 24px; color: var(--ink); font-size: clamp(27px, 3vw, 38px); line-height: 1.35; }
.article-body h3 { margin: 42px 0 18px; color: var(--ink); font-size: clamp(21px, 2.2vw, 28px); line-height: 1.45; }
.article-body p { margin: 0 0 24px; }
.article-body li { margin: 0 0 12px 1.4em; padding-left: .4em; }
.article-body figure { margin: 46px 0; }
.article-body figure img { width: 100%; max-height: 720px; object-fit: contain; background: #eef2ed; }
.article-body figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.english-summary { padding: 40px; background: #edf2ea; border-left: 4px solid var(--forest); }
.english-summary .button { margin-top: 20px; }
.article-footer { width: min(980px, calc(100% - 56px)); margin: 0 auto 110px; padding-top: 28px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.article-footer a { color: var(--forest); font-weight: 800; text-decoration: none; }
@media (max-width: 820px) { .article-page { padding-top: 68px; } .article-hero { padding: 56px 22px 48px; } .breadcrumbs { margin-bottom: 34px; } .article-body { margin-top: 54px; } }
@media (max-width: 520px) { .article-cover, .article-body, .article-footer { width: calc(100% - 36px); } .article-hero { padding-left: 18px; padding-right: 18px; } .article-cover img { height: 70vw; } .article-body { font-size: 16px; } .english-summary { padding: 24px; } .article-footer { align-items: flex-start; flex-direction: column; } }