/* Article page ------------------------------------------------------------ */
/* Card bits (.article__tag, .article__meta) are shared with the homepage cards. */
.article__tag { display: inline-block; padding: 5px 12px; border-radius: 4px; background: var(--sky); color: var(--sky-ink); font-size: var(--fs-xs); font-weight: 600; }
.article__meta { font-size: var(--fs-2xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.article__meta b { color: var(--ink); }

.article-page { padding-bottom: var(--section-y); }
.article-page__head { max-width: calc(800px + var(--gutter) * 2); padding-top: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.article-page__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.article-page__back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article-page__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; }
.article-page__dek { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.article-page__image { width: 100%; max-width: 1190px; margin: 40px auto 0; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-lg); }

.article-page__body { max-width: calc(720px + var(--gutter) * 2); padding-top: 48px; font-size: 1.125rem; line-height: 1.7; }
.article-page__body > * + * { margin-top: 20px; }
.article-page__body h2 { margin-top: 44px; font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.025em; }
.article-page__body ul, .article-page__body ol { display: grid; gap: 10px; padding-left: 0; }
.article-page__body ul li { position: relative; padding-left: 24px; }
.article-page__body ul li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.article-page__body ol { counter-reset: step; }
.article-page__body ol li { position: relative; padding-left: 36px; counter-increment: step; }
.article-page__body ol li::before { content: counter(step); position: absolute; left: 0; top: 0.2em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8125rem; font-weight: 700; }
.article-page__note { padding: 16px 20px; border-radius: var(--radius); background: var(--highlight); border: 1px solid var(--highlight-line); font-size: 1rem; }
.article-page__disclaimer { margin-top: 48px !important; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }