/* extracted from articles/_template.html */
/* ---------- Article: hero ---------- */
.ar-hero { padding: 160px var(--pad) 0; background: var(--ink); position: relative; }
.ar-hero-inner { max-width: 1100px; margin: 0 auto; }
.ar-crumbs { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-50); font-weight: 600; margin-bottom: 28px; }
.ar-crumbs a { color: var(--paper-70); text-decoration: none; }
.ar-crumbs a:hover { color: var(--accent-text); }
.ar-crumbs .sep { color: var(--paper-30); margin: 0 10px; }
.ar-cat { display: inline-block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 8px 16px; font-weight: 700; margin-bottom: 28px; }
.ar-hero h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 4.4rem); letter-spacing: -.03em; line-height: 1.02; max-width: 920px; }
.ar-hero h1 .italic { font-family: var(--f-italic); font-style: italic; font-weight: 300; }
.ar-meta { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--paper-10); display: flex; gap: 48px; flex-wrap: wrap; font-size: 13px; color: var(--paper-70); }
.ar-meta .lbl { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-40); font-weight: 600; margin-bottom: 6px; }
.ar-meta .val { color: var(--paper); font-weight: 500; font-size: 14px; }
.ar-cover { margin-top: 56px; }
.ar-cover-img { max-width: 1400px; margin: 0 auto; aspect-ratio: 16/7; background-size: cover; background-position: center; position: relative; }
.ar-cover-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(12,27,18,.45) 100%); }
/* ---------- Article: body ---------- */
.ar-body { background: var(--ink); padding: 90px var(--pad) 120px; }
.ar-body-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 760px 1fr; gap: 40px; align-items: start; }
.ar-side-l, .ar-side-r { position: sticky; top: 120px; }
.ar-prose { font-family: var(--f-body); font-weight: 300; font-size: 19px; line-height: 1.65; color: var(--paper-80); }
.ar-intro { font-size: 22px; line-height: 1.55; color: var(--paper); font-weight: 300; padding-bottom: 36px; border-bottom: 1px solid var(--paper-10); margin-bottom: 48px; letter-spacing: -.005em; }
.ar-prose h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.55rem, 2.4vw, 2.1rem); letter-spacing: -.02em; line-height: 1.15; color: var(--paper); margin: 64px 0 24px; }
.ar-prose h2 .num { font-family: var(--f-italic); font-style: italic; font-weight: 300; color: var(--accent-text); margin-right: 14px; font-size: 0.72em; }
.ar-prose h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; color: var(--paper); margin: 40px 0 14px; }
.ar-prose p { margin-bottom: 22px; }
.ar-prose p strong { color: var(--paper); font-weight: 500; }
.ar-prose p a { color: var(--accent-text); border-bottom: 1px solid var(--accent-soft); text-decoration: none; }
.ar-prose p a:hover { border-bottom-color: var(--accent-text); }
.ar-prose ul { list-style: none; padding: 0; margin: 0 0 28px; }
.ar-prose ul li { position: relative; padding-left: 32px; margin-bottom: 14px; font-size: 18px; line-height: 1.55; }
.ar-prose ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 16px; height: 1px; background: var(--accent); }
.ar-prose .callout { margin: 48px 0; padding: 36px 40px; background: var(--ink-2); border-left: 3px solid var(--accent); position: relative; }
.ar-prose .callout::before { content: '↳'; position: absolute; top: 20px; right: 28px; font-family: var(--f-italic); font-style: italic; color: var(--accent-text); font-size: 40px; opacity: .4; }
.ar-prose .callout p { font-size: 18px; line-height: 1.55; color: var(--paper); margin: 0; }
/* Side rail: TOC + share */
.ar-toc { font-size: 12px; }
.ar-toc .lbl { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper-40); font-weight: 600; margin-bottom: 18px; }
.ar-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.ar-toc ol li { counter-increment: toc; margin-bottom: 14px; font-size: 13px; line-height: 1.4; }
.ar-toc ol li a { color: var(--paper-60); text-decoration: none; display: flex; gap: 12px; }
.ar-toc ol li a::before { content: counter(toc, decimal-leading-zero); color: var(--paper-30); font-family: var(--f-body); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ar-toc ol li a:hover { color: var(--accent-text); }
.ar-share { margin-top: 48px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-50); font-weight: 600; }
.ar-share a { color: var(--paper-70); text-decoration: none; display: block; margin-top: 14px; }
.ar-share a:hover { color: var(--accent-text); }
/* Right rail: author + CTA */
.ar-author-card { padding: 28px; border: 1px solid var(--paper-10); background: var(--ink-2); }
.ar-author-card .lbl { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper-40); font-weight: 600; margin-bottom: 14px; }
.ar-author-card .name { font-family: var(--f-display); font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.ar-author-card .role { font-size: 12px; color: var(--paper-60); margin-bottom: 14px; }
.ar-author-card .bio { font-size: 13px; color: var(--paper-70); line-height: 1.5; }
.ar-cta-card { margin-top: 24px; padding: 28px; background: var(--accent); color: var(--accent-ink); }
.ar-cta-card .lbl { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; opacity: .65; margin-bottom: 10px; }
.ar-cta-card .h { font-family: var(--f-display); font-size: 22px; font-weight: 400; letter-spacing: -.015em; line-height: 1.15; margin-bottom: 14px; }
.ar-cta-card .sub { font-size: 13px; line-height: 1.5; opacity: .85; margin-bottom: 18px; }
.ar-cta-card .btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; background: var(--accent-ink); color: var(--accent); text-decoration: none; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
/* Tags + footer */
.ar-tags { margin-top: 72px; padding-top: 36px; border-top: 1px solid var(--paper-10); display: flex; gap: 10px; flex-wrap: wrap; }
.ar-tags a { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--paper-15); color: var(--paper-70); text-decoration: none; font-weight: 600; }
.ar-tags a:hover { border-color: var(--accent-text); color: var(--accent-text); }
/* Related */
.ar-related { padding: 100px var(--pad); background: var(--ink-2); border-top: 1px solid var(--paper-08); }
.ar-related-inner { max-width: var(--max); margin: 0 auto; }
.ar-related .head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; flex-wrap: wrap; gap: 24px; }
.ar-related h2 { font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.ar-related h2 .italic { font-family: var(--f-italic); font-style: italic; }
.ar-related .all { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.ar-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--paper-08); }
/* Back nav */
.ar-backnav { padding: 32px var(--pad); border-bottom: 1px solid var(--paper-08); background: var(--ink); position: relative; }
.ar-backnav a { color: var(--paper-70); text-decoration: none; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; max-width: var(--max); margin: 0 auto; display: block; }
.ar-backnav a:hover { color: var(--accent-text); }
/* Reading progress bar */
.ar-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0%; z-index: 100; transition: width .1s; }
@media (max-width: 1100px) {
.ar-body-inner { grid-template-columns: 1fr; max-width: 760px; }
.ar-side-l, .ar-side-r { position: static; }
.ar-side-l { order: -1; margin-bottom: 16px; }
.ar-side-r { margin-top: 48px; }
.ar-related-grid { grid-template-columns: 1fr; }
}