/* ============================================================
   Blog/article navigation — matches the home (home.css) nav.
   Loaded AFTER landing.css so it overrides landing's nav, but only on the
   pages that include it (blog + articles). Juhannus keeps landing's own nav.
   Self-contained: no home-only CSS variables, so it renders correctly with
   only landing.css present.
   ============================================================ */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav.scrolled {
    padding: 0;
    background: rgba(10, 10, 14, 0.82);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.nav-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
    display: flex; align-items: center; justify-content: space-between;
}
.nav-logo img { height: 62px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2.1rem; }
.nav-links a {
    font-size: 0.92rem; color: rgba(240, 240, 245, 0.62); text-decoration: none;
    font-weight: 400; transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover { color: #ffffff; }
/* Outlined cream pill (home style), overriding landing's solid-cream CTA. */
.nav-cta {
    border: 1px solid rgba(230, 213, 167, 0.3); color: #e6d5a7 !important;
    background: transparent !important; padding: 0.6rem 1.3rem; border-radius: 100px;
    font-weight: 500 !important; font-size: 0.92rem !important;
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-cta:hover {
    border-color: #e6d5a7; background: rgba(230, 213, 167, 0.08) !important;
    transform: none; box-shadow: none;
}
.nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 30px; height: 22px; position: relative; }
.nav-burger span {
    position: absolute; left: 0; right: 0; height: 2px; background: #e6d5a7;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-burger span:nth-child(1) { top: 0; }
.nav-burger span:nth-child(2) { top: 10px; }
.nav-burger span:nth-child(3) { top: 20px; }
.nav-burger.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
.mobile-menu {
    position: fixed; inset: 0; z-index: 90;
    background: #0a0a0e; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.6rem;
    opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a { font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; color: #ffffff; text-decoration: none; }
.mobile-menu .nav-cta { font-family: inherit; font-size: 1rem !important; }
@media (max-width: 820px) {
    .nav-links { display: none; }
    .nav-burger { display: block; }
}