/* Article styles — shared by 6 blog articles */
.article-hero{padding:200px 0 80px;background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.article-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(900px 500px at 80% 20%,rgba(95,182,236,0.10),transparent 60%);pointer-events:none}
.article-hero::after{content:'';position:absolute;top:50%;right:-160px;width:560px;height:560px;background:url('../img/mark-brass.webp') no-repeat center/contain;opacity:0.05;transform:translateY(-50%);pointer-events:none;z-index:0}
@media (max-width:980px){.article-hero::after{right:-220px;width:420px;height:420px;opacity:0.04}}
.article-hero > .container{position:relative;z-index:1;max-width:880px}
.article-meta{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--brass);display:flex;gap:14px;align-items:center;margin-bottom:32px;flex-wrap:wrap}
.article-meta .sep{width:24px;height:1px;background:rgba(255,255,255,0.2)}
.article-meta .tag{color:var(--brass)}
.article-meta .meta-light{color:rgba(235,240,246,0.55)}
.article-hero h1{font-family:var(--display);font-size:clamp(36px,5.5vw,72px);font-weight:500;line-height:1.05;letter-spacing:-0.012em;text-transform:uppercase;margin-bottom:32px}
.article-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-0.04em;color:var(--brass)}
.article-hero .lede{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,26px);line-height:1.5;color:rgba(235,240,246,0.85);max-width:640px;font-weight:300}
.article-byline{display:flex;align-items:center;gap:14px;margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.10)}
.article-byline .av{width:40px;height:40px;background:var(--brass);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:16px}
.article-byline .meta{display:flex;flex-direction:column;gap:2px}
.article-byline .name{font-size:14px;font-weight:600;color:var(--paper)}
.article-byline .role{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(235,240,246,0.6)}
.article-body{padding:80px 0;background:var(--paper)}
.article-body .container{max-width:780px}
.article-body h2{font-family:var(--display);font-size:clamp(28px,3.5vw,42px);font-weight:500;line-height:1.1;letter-spacing:-0.01em;text-transform:uppercase;margin:64px 0 24px;color:var(--ink)}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:0.005em;text-transform:uppercase;margin:40px 0 16px;color:var(--ink)}
.article-body p{font-size:18px;line-height:1.7;color:var(--ink-2);margin-bottom:24px;max-width:none}
.article-body p:first-of-type::first-letter{font-family:var(--serif);font-size:5em;font-weight:300;float:left;line-height:0.85;margin:0.05em 0.12em 0 0;color:var(--brass-d)}
.article-body a{color:var(--brass-d);border-bottom:1px solid rgba(47,143,201,0.3);transition:border-color 0.2s}
.article-body a:hover{border-bottom-color:var(--brass-d)}
.article-body strong{font-weight:600;color:var(--ink)}
.article-body ul,.article-body ol{margin:24px 0;padding-left:24px}
.article-body li{font-size:18px;line-height:1.7;color:var(--ink-2);margin-bottom:12px}
.article-body blockquote{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.45;color:var(--ink);border-left:3px solid var(--brass);padding:16px 0 16px 32px;margin:48px 0;font-weight:300}
.article-callout{background:var(--paper-2);border-left:3px solid var(--brass);padding:32px 40px;margin:48px 0;border-radius:0}
.article-callout .label{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--brass-d);margin-bottom:12px;display:block}
.article-callout p{font-size:17px;line-height:1.6;color:var(--ink-2);margin-bottom:0}
/* Fine-print legal disclaimer at end of every article — sits inside
 * .container so its width/alignment match the article body, but rendered
 * smaller and quieter to read as the boilerplate it is. */
.article-disclaimer{font-family:var(--body);font-size:11.5px;color:var(--muted);margin:56px 0 0;padding-top:20px;border-top:1px solid var(--rule);line-height:1.55;letter-spacing:0.01em;font-weight:400;max-width:none}
.article-disclaimer strong{color:var(--ink-2);font-weight:600}
.article-disclaimer a{color:var(--brass-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
/* Override the article-body p first-letter drop-cap defensively. */
.article-disclaimer::first-letter{font-family:inherit;font-size:inherit;float:none;margin:0;color:inherit}
.article-foot{padding:64px 0;background:var(--paper-2);border-top:1px solid var(--rule)}
.article-foot .container{max-width:780px}
.article-foot h3{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--brass-d);margin-bottom:32px;font-weight:500}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:600px){.related-grid{grid-template-columns:1fr}}