:root { --article-ink:#111827; --article-muted:#64748b; --article-blue:#2563eb; --article-line:#e5e7eb; }
* { box-sizing:border-box; }
body.article-page { margin:0; color:var(--article-ink); font-family:Poppins,Arial,sans-serif; background:#fff; }
.article-page .main-nav { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; padding:16px max(24px,calc((100% - 1180px)/2)); border-bottom:1px solid var(--article-line); background:#fff; }
.article-page .logo,.article-page .mobile-logo { display:flex; align-items:center; color:var(--article-ink); font-size:1.25rem; font-weight:800; text-decoration:none; }
.article-page .logo img,.article-page .mobile-logo img { width:24px; height:24px; margin-right:8px; object-fit:contain; filter:none; }
.article-page .nav-links { display:flex; flex-wrap:wrap; gap:22px; }
.article-page .nav-links a { color:#334155; font-size:.92rem; font-weight:600; text-decoration:none; }
.article-page .nav-links a:hover { color:var(--article-blue); }
.article-page .mobile-nav,.article-page .mobile-menu { display:none; }
.article-hero { width:min(1360px,calc(100% - 88px)); margin:0 auto; padding:64px 0 40px; }
.article-kicker { margin:0 0 20px; color:var(--article-blue); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.article-hero h1 { max-width:1000px; margin:18px 0 0; color:#050505; font-family:Poppins,Arial,sans-serif; font-size:clamp(2.6rem,5.5vw,4.8rem); font-weight:500; line-height:1.05; letter-spacing:-.045em; }
.article-intro { max-width:700px; margin:0 0 28px; color:#475569; font-size:1.12rem; line-height:1.7; }
.article-meta { display:flex; gap:8px; color:#111827; font-size:.92rem; font-weight:500; }
.article-meta span + span::before { content:"·"; margin-right:12px; }
.article-feature { width:min(1360px,calc(100% - 88px)); margin:0 auto 56px; aspect-ratio:16/7; overflow:hidden; border-radius:10px; }
.article-feature img { display:block; width:100%; max-width:100%; height:100%; object-fit:cover; object-position:center; }
.article-feature--wide { aspect-ratio:1644/656; }
.article-layout { display:grid; grid-template-columns:190px minmax(0,700px); gap:72px; width:min(960px,calc(100% - 40px)); margin:0 auto 96px; }
.article-body { color:#334155; font-size:1.03rem; line-height:1.85; }
.article-body h2 { margin:48px 0 14px; color:var(--article-ink); font-family:Georgia,serif; font-size:2rem; line-height:1.2; }
.article-body h2:first-child { margin-top:0; }
.article-body p { margin:0 0 22px; }
.article-body ul { margin:0 0 24px; padding-left:24px; }
.article-body li { margin:8px 0; }
.article-body > div[style*="background"] { margin:30px 0 !important; padding:0 0 0 20px !important; border:0 !important; border-left:4px solid #e5e7eb !important; border-radius:0 !important; background:transparent !important; color:#111827 !important; font-style:italic; }
.article-body > div[style*="background"] strong { display:block; margin-bottom:8px; color:#111827 !important; font-weight:800; }
.article-body > div[style*="background"] p { margin:0; }
.article-aside { position:sticky; top:24px; align-self:start; border-top:2px solid var(--article-ink); padding-top:14px; }
.article-aside strong { display:block; margin-bottom:14px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.article-aside a { display:block; margin:12px 0; color:var(--article-muted); font-size:.82rem; line-height:1.4; text-decoration:none; }
.article-aside a:hover { color:var(--article-blue); }
.article-share { margin-top:48px; padding-top:24px; border-top:1px solid var(--article-line); }
.article-share > strong { margin-bottom:18px; font-size:1rem; letter-spacing:0; text-transform:none; }
.article-share-links { display:flex; align-items:center; gap:10px; }
.article-share-links a,.article-share-links button { display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:0; padding:0; border:1px solid #e2e8f0; border-radius:50%; background:#fff; color:#0f172a; font-size:1.05rem; font-weight:700; line-height:1; text-decoration:none; cursor:pointer; transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.article-share-links a:hover,.article-share-links button:hover,.article-share-links a:focus-visible,.article-share-links button:focus-visible { color:#fff; background:var(--article-blue); border-color:var(--article-blue); box-shadow:0 5px 14px rgba(37,99,235,.2); transform:translateY(-1px); outline:none; }
.article-share-links svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.article-share-links .social-linkedin,.article-share-links .social-facebook { background:#0f172a; border-color:#0f172a; color:#fff; }
.article-share-links .social-linkedin:hover,.article-share-links .social-linkedin:focus-visible,.article-share-links .social-facebook:hover,.article-share-links .social-facebook:focus-visible { background:var(--article-blue); border-color:var(--article-blue); color:#fff; }
.article-share-links .social-linkedin svg,.article-share-links .social-facebook svg { display:none; }
.article-share-links .social-linkedin::before { content:"in"; font-size:.85rem; font-weight:800; line-height:1; }
.article-share-links .social-facebook::before { content:"f"; font-size:1.05rem; font-weight:800; line-height:1; }
.article-share-links .social-x { font-size:1rem; font-weight:800; }
.article-share-links .social-x svg { display:none; }
.article-share-links .social-x::before { content:"X"; font-size:.9rem; font-weight:800; line-height:1; }
.article-share-links .social-linkedin svg,.article-share-links .social-facebook svg { width:100%; height:100%; fill:none; stroke:#fff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.article-share-links .social-linkedin svg rect { fill:none; stroke:#fff; }
.article-share-links .social-linkedin svg path { fill:none; stroke:#fff; }
.article-share-links .social-facebook svg circle { fill:none; stroke:#fff; }
.article-share-links .social-facebook svg path { fill:#fff; stroke:none; }
.article-share-links .social-x svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.article-cta { margin-top:50px; padding:28px; border-radius:8px; background:#f1f5f9; }
.article-cta h2 { margin-top:0; }
.article-cta a { color:var(--article-blue); font-weight:700; }
.recommended-reads { width:min(1360px,calc(100% - 88px)); margin:0 auto 96px; }
.recommended-reads > h2 { margin:0 0 64px; color:#050505; font-family:Poppins,Arial,sans-serif; font-size:clamp(2.5rem,5vw,4.7rem); font-weight:500; letter-spacing:-.045em; line-height:1; text-align:center; }
.recommended-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
.recommended-card { color:inherit; text-decoration:none; }
.recommended-card img { display:block; width:100%; height:260px; margin-bottom:22px; border-radius:24px; object-fit:cover; }
.recommended-card span { display:block; margin-bottom:14px; color:#111827; font-size:.92rem; }
.recommended-card h3 { margin:0 0 10px; color:#050505; font-size:1.45rem; font-weight:500; letter-spacing:-.03em; line-height:1.15; }
.recommended-card p { margin:0; color:#737373; font-size:.98rem; line-height:1.35; }
.recommended-card:hover h3,.recommended-card:focus-visible h3 { color:var(--article-blue); }
.article-footer { border-top:1px solid var(--article-line); padding:28px 20px; color:var(--article-muted); text-align:center; font-size:.85rem; }
@media (max-width:1000px) { .recommended-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .recommended-card img { height:240px; } }
@media (max-width:760px) {
	.article-page { overflow-x:hidden; }
	.article-page .main-nav { min-height:60px; padding:12px 16px; }
	.article-page .main-nav > .logo,.article-page .nav-links { display:none; }
	.article-page .mobile-nav { display:flex; align-items:center; justify-content:space-between; width:100%; min-width:0; }
	.article-page .mobile-logo { min-width:0; font-size:1.05rem; white-space:nowrap; }
	.article-page .mobile-nav-right { display:flex; align-items:center; gap:4px; }
	.article-page .mobile-nav-right .icon-btn { display:grid; width:36px; height:36px; place-items:center; padding:7px; border:0; background:transparent; color:var(--article-ink); cursor:pointer; }
	.article-page .mobile-nav-right .icon-btn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
	.article-page .mobile-nav-right .icon-btn:focus-visible,.article-page .mobile-menu a:focus-visible { outline:2px solid var(--article-blue); outline-offset:2px; }
	.article-page .mobile-menu { position:absolute; top:60px; right:0; left:0; z-index:19; display:flex; flex-direction:column; max-height:0; overflow:hidden; padding:0 16px; border-bottom:1px solid var(--article-line); background:#fff; box-shadow:0 8px 18px rgba(15,23,42,.08); opacity:0; pointer-events:none; transition:max-height .2s ease,padding .2s ease,opacity .2s ease; }
	.article-page .mobile-menu.open { max-height:420px; padding:8px 16px 12px; opacity:1; pointer-events:auto; }
	.article-page .mobile-menu a { padding:12px 4px; border-bottom:1px solid #f1f5f9; color:#334155; font-size:.92rem; font-weight:600; text-decoration:none; }
	.article-page .mobile-menu a:last-child { border-bottom:0; }
	.article-hero { width:min(100% - 32px,1360px); padding-top:48px; }
	.article-meta { flex-wrap:wrap; }
	.article-feature { width:calc(100% - 32px); aspect-ratio:4/3; border-radius:10px; }
	.article-feature--wide { aspect-ratio:16/7; }
	.article-feature img { object-position:center; }
	.article-layout { display:block; }
	.article-aside { position:static; margin-bottom:48px; }
	.recommended-reads { width:calc(100% - 32px); margin-bottom:64px; }
	.recommended-reads > h2 { margin-bottom:36px; }
}
@media (max-width:520px) { .recommended-grid { grid-template-columns:1fr; } .recommended-card img { height:220px; } }