/* Understated navigation, using the portfolio's existing fonts and tokens. */
:root {--nav-content-width:min(1060px,calc(100% - 60px));}
.nav.nav-understated {
  top:22px;
  width:var(--nav-content-width);
  max-width:none;
  gap:18px;
  padding:0 0 13px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:var(--paper);
  backdrop-filter:none;
  box-shadow:none;
}
.nav.nav-understated::before {
  content:"";
  position:absolute;
  inset:-22px 0 auto;
  height:22px;
  background:var(--paper);
}
.nav.nav-understated .monogram {
  --monogram-disc:light-dark(#0b0b0f,#fbfbfc);
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  width:38px;
  height:38px;
  padding:0;
  background:transparent;
  color:light-dark(#fbfbfc,#0b0b0f);
}
.nav.nav-understated .monogram::before {
  content:"";
  position:absolute;
  inset:-8%;
  border-radius:50%;
  background:var(--monogram-disc);
  z-index:-1;
  pointer-events:none;
}
.monogram-mark {display:block;width:100%;height:100%;pointer-events:none;}
.monogram-letters {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font:400 37cqw/1 Audiowide,sans-serif;
  pointer-events:none;
}
.monogram-letters > span + span {margin-left:-.13em;}
.nav-understated .nav-links {display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav.nav-understated .nav-links a {
  position:relative;
  height:38px;
  padding:0 12px;
  border-radius:0;
  font-size:13px;
  background:transparent;
  box-shadow:none;
}
.nav-understated .nav-links a::after {
  content:"";
  position:absolute;
  bottom:0;
  left:12px;
  right:12px;
  height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transition:transform .18s ease-out;
}
.nav-understated .nav-links a.active::after {transform:scaleX(1);}
.nav.nav-understated .nav-links a:hover {color:var(--ink);}
.nav-understated .nav-languages {display:flex;gap:2px;align-items:center;padding:0 10px;border-left:1px solid var(--line);border-right:1px solid var(--line);}
.nav.nav-understated .nav-languages button {height:32px;padding:0 10px;font:500 11px 'Geist Mono',monospace;}
.nav.nav-understated .nav-menu {display:none;}
.nav-menu-icon {display:block;width:13px;height:8px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;}
@media(max-width:760px) {
  :root {--nav-content-width:calc(100% - 44px);}
  .nav.nav-understated {top:12px;gap:10px;flex-wrap:wrap;padding-bottom:12px;}
  .nav.nav-understated::before {top:-12px;height:12px;}
  .nav.nav-understated .monogram {width:38px;height:38px;}
  .nav.nav-understated.nav-enhanced .nav-menu:not([hidden]) {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:38px;
    margin-left:auto;
    padding:0 13px;
    border:1px solid var(--line);
    background:var(--paper);
    font:500 13px Geist,Arial,sans-serif;
  }
  .nav.nav-understated .nav-languages {padding:0 8px;margin-left:auto;}
  .nav.nav-understated.nav-enhanced .nav-languages {margin-left:0;}
  .nav.nav-understated .nav-links {order:3;width:100%;margin:0;justify-content:space-between;flex-wrap:wrap;gap:4px;}
  .nav.nav-understated.nav-enhanced .nav-links {display:none;}
  .nav.nav-understated.nav-open .nav-links {display:flex;}
  .nav.nav-understated .nav-links a {height:44px;padding:0 9px;font-size:12px;}
  .nav-understated .nav-links a::after {left:9px;right:9px;}
}
@media(pointer:coarse) {
  .nav.nav-understated .monogram,
  .nav.nav-understated .nav-links a,
  .nav.nav-understated .nav-languages button,
  .nav.nav-understated.nav-enhanced .nav-menu:not([hidden]) {min-height:44px;min-width:44px;}
}
@media(prefers-reduced-motion:reduce) {.nav-understated .nav-links a::after {transition:none;}}