:root { --ink:#202123; --muted:#6f7274; --cream:#f5efe7; --orange:#ef5b2a; --blue:#234f67; --line:#ddd8d1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:#fffdf9; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:0; }
a { color:inherit; text-decoration:none; }
.site-header { align-items:center; background:#fffdf9; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:24px 6vw; position:sticky; top:0; z-index:2; }
.brand { font-size:2rem; font-weight:800; letter-spacing:-.08em; }.brand span { color:var(--orange); margin-left:3px; }
nav { color:var(--muted); display:flex; font-size:.94rem; gap:30px; } nav a:hover { color:var(--orange); }
.back-link { border:1px solid var(--ink); border-radius:999px; font-size:.9rem; padding:10px 16px; }
.eyebrow,.article-tag { color:var(--orange); font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.blog-hero { background:var(--cream); padding:110px 12vw 100px; }.blog-hero h1 { font-size:clamp(3.8rem,8vw,8rem); letter-spacing:-.07em; line-height:.9; margin:0; max-width:980px; }.blog-hero h1 em { color:var(--blue); font-style:normal; }.blog-hero p:last-child { color:var(--muted); font-size:1.2rem; line-height:1.5; margin:30px 0 0; max-width:510px; }
.blog-shell { margin:0 auto; max-width:1180px; padding:80px 6vw; }.post-grid { display:grid; gap:26px; grid-template-columns:repeat(3,1fr); }.post-card { border-top:5px solid var(--blue); display:block; }.post-card:nth-child(2) { border-color:var(--orange); }.post-card:nth-child(3) { border-color:#cfaa42; }.post-card img { display:block; height:240px; object-fit:cover; width:100%; }.post-card-content { padding:24px 4px 10px; }.post-card h2 { font-size:1.8rem; letter-spacing:-.05em; line-height:1; margin:12px 0; }.post-card p:not(.article-tag) { color:var(--muted); line-height:1.55; }.read-more { color:var(--blue); font-weight:800; }
.article-hero { background:var(--cream); display:grid; gap:60px; grid-template-columns:1fr 1fr; padding:85px 12vw; }.article-hero-text h1 { font-size:clamp(3rem,6vw,6.5rem); letter-spacing:-.07em; line-height:.9; margin:14px 0 25px; }.article-hero-text .standfirst { color:var(--muted); font-size:1.25rem; line-height:1.55; max-width:530px; }.article-visual { align-self:center; width:100%; }.article-visual img { display:block; width:100%; }.author { align-items:center; display:flex; gap:12px; margin-top:28px; }.author-avatar { align-items:center; background:var(--blue); border-radius:50%; color:#fff; display:flex; font-weight:800; height:42px; justify-content:center; width:42px; }.author small { color:var(--muted); display:block; margin-top:4px; }
.article-layout { display:grid; gap:70px; grid-template-columns:minmax(0,720px) 250px; justify-content:center; padding:80px 6vw; }.article-body { font-size:1.12rem; line-height:1.75; }.article-body h2 { font-size:2.3rem; letter-spacing:-.05em; line-height:1; margin:55px 0 18px; }.article-body h3 { color:var(--blue); font-size:1.25rem; margin-top:35px; }.article-body p { margin:0 0 22px; }.article-body ul { margin:0 0 24px; padding-left:22px; }.article-body li { margin:8px 0; }.article-body blockquote { border-left:5px solid var(--orange); color:var(--blue); font-size:1.5rem; line-height:1.3; margin:40px 0; padding:8px 0 8px 25px; }.article-body code { background:#f0ece6; padding:2px 5px; }.article-aside { border-top:3px solid var(--orange); height:max-content; padding-top:18px; position:sticky; top:110px; }.article-aside strong { display:block; margin-bottom:15px; }.article-aside a { border-bottom:1px solid var(--line); color:var(--blue); display:block; font-size:.93rem; line-height:1.3; padding:12px 0; }.related { background:var(--blue); color:#fff; padding:70px 12vw; }.related h2 { font-size:2.8rem; margin:0 0 30px; }.related-grid { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }.related-card { border:1px solid #ffffff55; padding:22px; }.related-card:hover { background:#ffffff12; }.related-card p { color:#d9e3e7; line-height:1.45; }.related-card span { color:#f4bf5b; font-weight:800; }.author-page { margin:0 auto; max-width:850px; padding:110px 6vw; }.author-page h1 { font-size:clamp(3rem,7vw,6rem); letter-spacing:-.07em; line-height:.9; }.author-page p { color:var(--muted); font-size:1.2rem; line-height:1.6; max-width:600px; }.author-links { display:flex; gap:14px; margin-top:35px; }.author-links a { background:var(--blue); color:#fff; padding:14px 18px; }
.article-body .toc { background:var(--cream); border-left:4px solid var(--orange); margin:0 0 38px; padding:22px 28px; }.toc strong { display:block; margin-bottom:10px; }.toc ol { margin:0; padding-left:22px; }.toc li { margin:7px 0; }.toc a { color:var(--blue); font-weight:700; }.fact-box { background:#234f67; color:#fff; margin:35px 0; padding:25px 28px; }.fact-box strong { color:#f4bf5b; display:block; font-size:1.8rem; margin-bottom:8px; }.article-body .data-table { border-collapse:collapse; font-size:.95rem; margin:25px 0 35px; width:100%; }.data-table th,.data-table td { border-bottom:1px solid var(--line); padding:12px 10px; text-align:left; vertical-align:top; }.data-table th { background:var(--cream); color:var(--blue); }.source-list { border-top:1px solid var(--line); font-size:.92rem; margin-top:55px; padding-top:20px; }.source-list a { color:var(--blue); text-decoration:underline; }.updated { color:var(--muted); font-size:.88rem; }
@media (max-width:800px) { nav { display:none; }.blog-hero,.article-hero { padding:75px 8vw; }.post-grid,.related-grid { grid-template-columns:1fr; }.article-hero { display:block; }.article-visual { margin-top:45px; }.article-layout { display:block; padding:60px 8vw; }.article-aside { margin-top:60px; position:static; }.back-link { font-size:.8rem; padding:8px 11px; } }
.brand img { display:block; height:42px; width:auto; }
.post-card img,.article-visual img { object-fit:contain; background:var(--cream); }