:root {
    --ink: #182033;
    --muted: #5d6472;
    --paper: #fffdf8;
    --blue: #183f78;
    --red: #c93846;
    --gold: #e5b44e;
    --line: #e8e2d7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, system-ui, sans-serif;
    line-height: 1.75;
}
a { color: var(--blue); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; background: white; padding: .75rem; }
.blog-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .85rem max(1.2rem, calc((100% - 1120px) / 2));
    background: rgba(255,253,248,.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}
.brand { color: var(--ink); font-family: "Playfair Display", serif; font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.nav-links, .language-links { display: flex; gap: 1rem; align-items: center; }
.nav-links a, .language-links a { text-decoration: none; font-weight: 600; }
.language-links a[aria-current="page"] { color: var(--red); }
.blog-hero {
    padding: 6rem 1.25rem 5rem;
    color: white;
    text-align: center;
    background: linear-gradient(125deg, #122e5b, #1f5596 65%, #a92d3a);
}
.eyebrow { color: #ffe39b; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.blog-hero h1 { max-width: 900px; margin: .6rem auto 1.2rem; font: 700 clamp(2.2rem, 5vw, 4.4rem)/1.08 "Playfair Display", serif; }
.blog-hero p { max-width: 760px; margin: 0 auto; font-size: 1.15rem; }
.blog-main { width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; }
.intro { max-width: 820px; margin: 4rem auto; text-align: center; }
.intro h2, .cta h2 { font: 700 2rem/1.25 "Playfair Display", serif; }
.article-grid { display: grid; gap: 1.4rem; }
.guide {
    scroll-margin-top: 6rem;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.4rem;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(29,45,72,.07);
}
.guide-number { display: grid; place-items: center; width: 56px; height: 56px; color: white; background: var(--blue); border-radius: 50%; font-weight: 800; }
.guide h2 { margin: 0 0 .35rem; font: 700 clamp(1.45rem, 3vw, 2rem)/1.25 "Playfair Display", serif; }
.guide .summary { margin-top: 0; color: var(--muted); font-size: 1.05rem; }
.guide h3 { margin: 1.35rem 0 .25rem; font-size: 1.05rem; }
.guide ul { padding-left: 1.25rem; }
.tip { padding: 1rem 1.2rem; background: #f4f7fb; border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0; }
.byline { color: var(--muted); font-size: .9rem; }
.cta { margin: 4rem 0; padding: 3rem 1.5rem; color: white; text-align: center; background: var(--blue); border-radius: 18px; }
.cta a { display: inline-block; margin-top: .8rem; padding: .75rem 1.2rem; color: var(--ink); background: #ffe39b; border-radius: 999px; font-weight: 800; text-decoration: none; }
.blog-footer { padding: 2rem 1rem; color: var(--muted); text-align: center; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
    .blog-nav { align-items: flex-start; flex-wrap: wrap; }
    .nav-links { order: 3; width: 100%; }
    .guide { grid-template-columns: 1fr; }
    .guide-number { width: 44px; height: 44px; }
}