/* ============================================================
   HEADER — sticky nav, links, logo
   ============================================================ */

header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,248,245,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 40px; height: 92px; }
.nav-links {
  display: flex; align-items: center; gap: 34px; margin-left: auto;
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--gold); transition: width .25s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav .btn { padding: 13px 22px; }

/* mobile nav toggle button */
.menu-btn { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--ink); }
.menu-btn svg { width: 28px; height: 28px; }

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: 14px; }
.logo .mark { width: 40px; height: 48px; flex: none; }
.logo .word { display: flex; flex-direction: column; line-height: 1; }
.logo .word b {
  font-family: var(--serif); font-weight: 700; font-size: 27px;
  letter-spacing: .14em; color: var(--ink);
}
.logo .word span {
  font-size: 9.5px; font-weight: 600; letter-spacing: .34em;
  color: var(--body); margin-top: 4px;
}
.logo.on-dark .word b { color: #fff; }
.logo.on-dark .word span { color: rgba(255,255,255,.7); }