/* Site header — identical on every page: the same type (Italiana name, Jost menu), the same size,
   and the name, About · Gallery · CV and the globe (assets/lang-menu.css) in the same places.
   Only the colours follow the page:
     default       home: clear over the hero photos, white glass once they have scrolled past
     .theme-night  gallery: clear at first, navy glass once scrolled, cream lettering
     .theme-ice    CV: the CV's lavender bar throughout (no rule beneath), plum lettering
   .is-scrolled is set by assets/site-header.js. */
.nav {
  --h-ink: #161412;
  --h-glass: rgba(255, 255, 255, .9);
  --h-line: rgba(22, 20, 18, .14);
  --h-pad: clamp(20px, 5vw, 80px);
  --h-ease: cubic-bezier(.22, .61, .36, 1);
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px var(--h-pad);
  color: var(--h-ink);
  border-bottom: 1px solid transparent;
  transition: padding .5s var(--h-ease), background-color .5s var(--h-ease), border-color .5s var(--h-ease), color .5s var(--h-ease);
}
.nav.is-scrolled {
  padding-top: 14px; padding-bottom: 14px;
  background: var(--h-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--h-line);
}
.nav a { color: inherit; text-decoration: none; }
.nav .brand {
  font-family: "Italiana", "Cormorant Garamond", Georgia, serif; font-weight: 400;
  font-size: 1.5rem; line-height: 1; letter-spacing: .06em;
  transition: opacity .5s var(--h-ease);
}
/* the home hero already shows the name, so the header's appears once the hero has scrolled past */
.nav.has-hero:not(.is-scrolled) .brand { opacity: 0; pointer-events: none; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
.nav-links a {
  position: relative; padding: 6px 0;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif; font-weight: 400;
  font-size: .68rem; line-height: 1.85; letter-spacing: .38em; text-transform: uppercase;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: .38em; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--h-ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* gallery: navy glass, cream lettering */
.nav.theme-night {
  --h-ink: #f4efe7; --h-glass: rgba(11, 20, 36, .8); --h-line: rgba(198, 198, 232, .16);
  --lm-ink: #f4efe7; --lm-bg: rgba(21, 35, 59, .97); --lm-line: rgba(198, 198, 232, .16); --lm-hover: rgba(198, 198, 232, .12); --lm-shadow: rgba(0, 0, 0, .55);
}
/* CV: the lavender bar is there from the start; no rule beneath */
.nav.theme-ice {
  --h-ink: #3e354e; --h-glass: rgba(227, 224, 232, .72); --h-line: transparent;
  --lm-ink: #3e354e; --lm-bg: rgba(249, 248, 250, .97); --lm-line: rgba(62, 53, 78, .12); --lm-hover: #e7e4ee; --lm-shadow: rgba(46, 38, 62, .3);
  background: var(--h-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

@media (max-width: 820px) {
  .nav { padding: 20px var(--h-pad); }
  /* on the home page the header sits over the hero photo at first */
  .nav.has-hero:not(.is-scrolled) { color: #fff; text-shadow: 0 1px 10px rgba(22, 20, 18, .35); }
}
@media (max-width: 520px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: .62rem; letter-spacing: .26em; }
  .nav .brand { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav .brand, .nav-links a::after { transition-duration: .01ms !important; }
}
@media print {
  .nav { display: none; }
}