/* Header 1 — shared site header. Uses tokens from site.css. */
/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter);
  transition: background .5s, color .5s, padding .5s, transform .5s var(--ease);
}
.site-header.scrolled { background: rgba(246, 241, 235, .9); backdrop-filter: blur(10px); padding-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--rule); }
.site-header.dark { color: var(--ivory); }
.site-header.dark.scrolled { background: rgba(27, 29, 30, .86); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.site-header.hide { transform: translateY(-100%); }
.wordmark { text-decoration: none; display: flex; flex-direction: column; line-height: 1; }
.wordmark b { font: 400 1.32rem/1 var(--serif); letter-spacing: .14em; }
.wordmark span { font: 600 .56rem/1 var(--sans); letter-spacing: .42em; margin-top: 6px; opacity: .75; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav ul { list-style: none; display: flex; gap: clamp(14px, 2vw, 30px); margin: 0; padding: 0; }
.nav a { text-decoration: none; font: 500 .82rem/1 var(--sans); letter-spacing: .08em; position: relative; padding: 6px 0; }
.nav ul a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { padding: 11px 16px; font-size: .7rem; --b: var(--charcoal); color: var(--charcoal); }
.nav .btn:hover, .nav .btn:focus-visible, .nav .btn:active { color: var(--ivory); }
.site-header.dark .nav .btn { --b: var(--ivory); color: var(--ivory); }
.site-header.dark .nav .btn:hover, .site-header.dark .nav .btn:focus-visible, .site-header.dark .nav .btn:active { color: var(--charcoal); }
@media (max-width: 1020px) {
  .nav .btn, .menu-open .nav .btn { --b: var(--gold); color: var(--gold); }
  .nav .btn:hover, .nav .btn:active { color: var(--charcoal); }
}
.menu-toggle { display: none; background: none; border: 0; color: inherit; padding: 8px; cursor: pointer; }
.menu-toggle span { display: block; width: 26px; height: 1px; background: currentColor; margin: 6px 0; transition: transform .4s var(--ease), opacity .3s; }
.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1020px) {
  .menu-toggle { display: block; z-index: 2; }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 100px var(--gutter) 40px; gap: 40px;
    background: var(--charcoal); color: var(--ivory);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .7s var(--ease), visibility 0s .7s;
  }
  .nav ul { flex-direction: column; gap: 6px; }
  .nav ul a { font: 300 2.4rem/1.2 var(--serif); letter-spacing: -.01em; }
  .menu-open .nav { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease); }
  .menu-open .site-header { color: var(--ivory); background: transparent; box-shadow: none; backdrop-filter: none; }
  .menu-open { overflow: hidden; }
}


/* language switch */
.nav .lang-switch { display: flex; align-items: center; gap: 6px; }
.nav .lang-switch a { font-size: .74rem; letter-spacing: .14em; opacity: .5; padding: 6px 2px; }
.nav .lang-switch a.on { opacity: 1; font-weight: 600; }
.nav .lang-switch a:hover { opacity: 1; }
.nav .lang-switch a::after { display: none; }
.nav .lang-switch span { opacity: .35; }
@media (max-width: 1020px) { .nav .lang-switch a { font: 600 1rem/1.2 var(--sans) !important; letter-spacing: .2em !important; } }