/* Shared navigation for Ruri's pages; opt-in desktop frame via .site-page. Load after page-specific styles.
   Page palettes supply --accent, --text-* and the header background.
   Articles can retain their own reading widths without opting into .site-page. */
:root { --site-width:1280px; --site-gutter:40px; }
.nav-wrapper {
    height:var(--nav-height);
    border-bottom:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
    box-shadow:none;
    backdrop-filter:blur(14px);
    font-family:'Inter',sans-serif;
}
.main-nav { max-width:var(--site-width); padding-inline:var(--site-gutter); }
.nav-brand { padding:0; min-width:0; }
.nav-brand-logo {
    width:34px; height:34px;
    border:2px solid color-mix(in srgb,var(--accent) 65%,transparent);
    border-radius:5px 12px 5px 5px;
    box-shadow:none;
}
.nav-brand-text { line-height:1.3; min-width:0; }
.nav-brand-text span:first-child { font-family:'Space Grotesk',sans-serif; color:var(--text-main); }
.nav-brand-text span:last-child { color:var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-links,.nav-toggle { flex-shrink:0; }
.nav-link { font-family:'Space Grotesk',sans-serif; font-size:.85rem; line-height:1.3; white-space:nowrap; }
.nav-link:hover { color:var(--text-main); background:color-mix(in srgb,var(--accent) 6%,transparent); }
.nav-links .nav-link.is-active {
    color:var(--accent); border-bottom-color:var(--accent);
    background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent);
}
.main-nav a:focus-visible,.nav-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-5px; }
@media(min-width:769px) {
    .site-page { max-width:var(--site-width); padding-inline:var(--site-gutter); }
}
@media(min-width:769px) and (max-width:1050px) {
    :root { --site-gutter:28px; }
    .nav-brand { margin-right:20px; flex:1; }
}
@media(max-width:768px) {
    :root { --site-gutter:24px; }
    .nav-brand { margin-right:20px; flex:1; }
    .nav-links { left:0; right:0; background:inherit; }
    .main-nav { background:inherit; }
    .nav-links .nav-link.is-active { background:color-mix(in srgb,var(--accent) 8%,transparent); }
}