/* HEADER + NAV + MOBILE MENU (A12) === */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg-color) 95%,transparent);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.scrolled{border-bottom-color:var(--rule-2)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--graphite);flex:none}
.logo svg{width:30px;height:40px}
.logo-t{font-family:var(--serif);font-size:1.3rem;letter-spacing:.12em;font-variant:small-caps;line-height:1;font-weight:600;white-space:nowrap}
.logo-t small{display:block;font:500 .58rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink2);margin-top:5px}
.nav{display:flex;align-items:center;gap:clamp(.7rem,1.3vw,1.5rem)}
.nav a{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:.4em 0;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sang);transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--sang-d)}
.nav .btn{padding:.8em 1.1em;color:var(--chalk)}
.menu-btn{display:none;background:none;border:1px solid var(--graphite);border-radius:var(--r);padding:.6em .85em;font:700 .76rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);cursor:pointer;align-items:center;gap:.6em}
.menu-btn .bars{width:16px;height:10px;position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--ease),top .3s}
.menu-btn .bars::before{top:1px}.menu-btn .bars::after{top:7px}
.menu-btn[aria-expanded="true"] .bars::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{top:4px;transform:rotate(-45deg)}
@media (max-width:1060px) and (min-width:900px){.nav a{letter-spacing:.05em;font-size:.74rem}.logo-t small{display:none}}
@media (max-width:899px){
  .menu-btn{display:inline-flex}
  .nav{position:fixed;inset:72px 0 0 0;background:var(--chalk);flex-direction:column;align-items:stretch;gap:0;padding:1rem var(--gut) 2rem;overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .nav a{font-family:var(--serif);font-size:1.75rem;letter-spacing:0;text-transform:none;padding:.45em 0;border-bottom:1px solid var(--rule)}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:1.2rem;font-family:var(--sans);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase}
  .js .nav a{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease)}
  .js .nav.open a{opacity:1;transform:none;transition-delay:calc(var(--k,0)*40ms)}
}
@media (max-width:400px){.logo-t{font-size:1.1rem;letter-spacing:.08em}.logo-t small{letter-spacing:.16em}}
body.lock{overflow:hidden}

.logo .lg-a{stroke:var(--sang)}.logo .lg-b{fill:var(--sang)}.logo .lg-c{stroke:var(--grey)}