.header {position: fixed; top: 0; left: 0; width: 100%; height: var(--header-h); background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid transparent; z-index: 999;}
.header.on {border-bottom-color: var(--color-line);}
.header__inner {display: flex; align-items: center; justify-content: space-between; height: 100%; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px;}

.header__logo {display: inline-flex; align-items: baseline; gap: 2px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--color-ink);}
.header__logo-mark {color: var(--color-primary);}
.header__logo-img img {width:276px;}

.header__nav .header__menu {display: flex; align-items: center; gap: 36px;}
.header__nav .header__menu a {font-size: 0.95rem; font-weight: 600; color: var(--color-body);}
.header__nav .header__menu a:hover {color: var(--color-ink);}

.header__actions {display: flex; align-items: center; gap: 18px;}
.header__user {font-size: 0.9rem; font-weight: 600; color: var(--color-body);}

.header__toggle {display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer;}
.header__toggle span {display: block; width: 100%; height: 2px; background: var(--color-ink); border-radius: 2px;}

/* ---------- mobile drawer ---------- */
.mob-nav {position: fixed; top: 0; right: -320px; width: 300px; max-width: 84vw; height: 100vh; background: #fff; padding: 20px 24px; z-index: 1001; transition: right .25s ease; box-shadow: -8px 0 24px rgba(15,23,42,.08); display: flex; flex-direction: column;}
.mob-nav.is-open {right: 0;}
.mob-nav__head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.mob-nav__title {font-weight: 800; color: var(--color-ink);}
.mob-nav__close {background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--color-muted); cursor: pointer;}
.mob-nav__list {display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px;}
.mob-nav__list a {display: block; padding: 12px 4px; font-size: 1rem; font-weight: 600; color: var(--color-ink); border-bottom: 1px solid var(--color-line);}

.mob-nav__dim {position: fixed; inset: 0; background: rgba(15,23,42,.4); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 1000;}
.mob-nav__dim.is-open {opacity: 1; visibility: visible;}

body.nav-open {overflow: hidden;}

@media (max-width: 860px) {
    .header__nav {display: none;}
    .header__actions .btn, .header__actions .header__user {display: none;}
    .header__toggle {display: flex;}
}