:root { color-scheme: dark; --ink:#f7f2e8; --muted:#b8b5ad; --line:rgba(255,255,255,.14); --panel:rgba(19,25,40,.88); --accent:#ffd166; --accent-2:#8ed6c3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 80% 0%,#243653 0,#111827 42%,#080c16 100%); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.75; }
a { color:var(--accent); }
.blog-shell { width:min(100% - 32px,980px); margin:0 auto; padding:22px 0 48px; }
.blog-nav,.blog-footer { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.blog-nav { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:18px; }
.brand { color:var(--ink); font-weight:900; text-decoration:none; letter-spacing:.02em; }
.blog-nav-links { display:flex; gap:16px; flex-wrap:wrap; }
.blog-nav a,.blog-footer a { text-decoration:none; font-size:.92rem; font-weight:750; }
.blog-hero { max-width:760px; padding:76px 0 42px; }
.blog-index-hero { padding-bottom:34px; }
.eyebrow { color:var(--accent-2); font-size:.78rem; font-weight:900; letter-spacing:.16em; margin:0 0 12px; text-transform:uppercase; }
h1,h2 { line-height:1.18; letter-spacing:-.025em; }
h1 { font-size:clamp(2.4rem,7vw,5rem); margin:0 0 20px; }
h2 { font-size:clamp(1.5rem,3vw,2rem); margin:42px 0 12px; }
.dek { color:var(--muted); font-size:clamp(1.05rem,2vw,1.3rem); margin:0 0 20px; max-width:650px; }
.article-meta { color:var(--muted); display:flex; flex-wrap:wrap; gap:12px 22px; font-size:.88rem; }
.blog-article { background:var(--panel); border:1px solid var(--line); border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.22); padding:clamp(24px,6vw,64px); }
.blog-article p { max-width:720px; margin:0 0 20px; }
.blog-article .lead { color:#fff8df; font-size:1.2rem; font-weight:700; line-height:1.6; }
.blog-article hr { border:0; border-top:1px solid var(--line); margin:56px 0 48px; }
.localized-article { border-left:3px solid var(--accent-2); padding-left:clamp(18px,4vw,32px); }
.article-grid { display:grid; gap:22px; }
.section-heading h2 { margin:0 0 18px; }
.article-card { display:grid; grid-template-columns:minmax(220px,.9fr) minmax(0,1.1fr); overflow:hidden; color:var(--ink); text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 70px rgba(0,0,0,.22); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.article-card:hover,.article-card:focus-visible { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 30px 80px rgba(0,0,0,.3); }
.article-card-image { min-height:250px; background:linear-gradient(135deg,#203a53,#111827); }
.article-card-image img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.article-card-body { display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,5vw,48px); }
.article-card-type { color:var(--accent-2); font-size:.78rem; font-weight:900; letter-spacing:.08em; margin:0 0 12px; text-transform:uppercase; }
.article-card h3 { font-size:clamp(1.6rem,3vw,2.35rem); line-height:1.15; margin:0 0 14px; }
.article-card-body > p:not(.article-card-type) { color:var(--muted); margin:0 0 22px; }
.read-more { color:var(--accent); font-weight:850; }
.article-back { margin:28px 0 -40px; }
.article-back a { font-size:.92rem; font-weight:800; text-decoration:none; }
.blog-language-note { margin-top:32px; padding:24px 28px; border:1px solid var(--line); border-radius:18px; background:rgba(19,25,40,.58); }
.blog-language-note h2 { margin:0 0 8px; font-size:1.35rem; }
.blog-language-note p { color:var(--muted); margin:0; }
.blog-footer { color:var(--muted); border-top:1px solid var(--line); margin-top:30px; padding-top:20px; }
@media (max-width:680px) { .article-card { grid-template-columns:1fr; } .article-card-image { min-height:210px; max-height:260px; } }
@media (max-width:560px) { .blog-shell { width:min(100% - 22px,980px); } .blog-hero { padding-top:48px; } .blog-article { border-radius:16px; padding:22px 18px; } .blog-nav-links { width:100%; } .article-back { margin-top:20px; margin-bottom:-28px; } .blog-language-note { padding:20px; } }