:root { --navigation-width: 220px; --navigation-inset: 24px; }
.portfolio { --navigation-width: 72px; }
.portfolio-header, .site-nav {
  position: fixed; z-index: 30; inset: var(--navigation-inset) auto auto var(--navigation-inset);
  width: var(--navigation-width); height: auto; max-height: calc(100dvh - var(--navigation-inset) * 2);
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 12px; padding: 12px; overflow-y: auto;
  background: #f2f3f4; color: #141414; border: 1px solid rgb(0 0 0 / .025); border-radius: 0;
  font-family: var(--font-aeonik, sans-serif); box-sizing: border-box;
  box-shadow: 0 2px 8px rgb(0 0 0 / .025);
  scrollbar-width: thin;
}
.nav-card-top, .nav-dialog-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 8px; }
.portfolio-header .nav-card-top, .portfolio-header .nav-dialog-top { padding-inline: 0; }
.portfolio-header .nav-card-top { justify-content: center; }
.portfolio-brand, .site-nav .site-logo {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0;
  margin: 0; padding: 0; min-height: 44px; border-radius: 0;
}
.site-nav .site-logo { margin-left: 8px; }
.site-nav .site-logo span { width: 30px; height: 30px; }
.portfolio-brand img { width: 30px; height: 30px; filter: brightness(0); }
.portfolio-nav, .site-nav .nav-links, .nav-dialog-links { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
.portfolio-nav a, .site-nav .nav-links a, .nav-dialog-links a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px;
  box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 0;
  color: #373a3d; font: 16px/1.25 var(--font-aeonik, sans-serif);
  letter-spacing: -.02em; text-decoration: none; background: transparent; white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease, transform 160ms cubic-bezier(.2, 0, 0, 1);
}
.portfolio-nav a svg, .site-nav .nav-links a svg, .nav-dialog-links a svg { width: 20px; height: 20px; flex-shrink: 0; color: #8a8d91; transition: color 150ms ease; }
.portfolio-header :is(.portfolio-nav, .nav-dialog-links) a { justify-content: center; gap: 0; padding-inline: 0; }
.portfolio-header :is(.portfolio-nav, .nav-dialog-links) a svg { color: #64676b; }
.portfolio-header > .portfolio-nav { flex: 1; }
.portfolio-nav .nav-contact { margin-top: auto; flex-shrink: 0; }
.nav-dialog-links .nav-contact { margin-top: 14px; }
.portfolio-nav a:is([aria-current="page"], [aria-current="location"]),
.site-nav .nav-links a:is([aria-current="page"], [aria-current="location"]),
.nav-dialog-links a:is([aria-current="page"], [aria-current="location"]) { color: #141414; background: rgb(255 255 255 / .75); }
.nav-active-indicator { position: absolute; inset: 0; z-index: 0; background: var(--nav-active, rgb(255 255 255 / .75)); pointer-events: none; }
.portfolio-header :is(.portfolio-nav, .nav-dialog-links) a svg { position: relative; z-index: 1; }
.portfolio-nav a[aria-current] svg, .site-nav .nav-links a[aria-current] svg, .nav-dialog-links a[aria-current] svg { color: #34383c; }
.nav-menu-toggle { display: none; }
.nav-dialog {
  position: fixed; inset: var(--navigation-inset) auto auto var(--navigation-inset);
  width: 112px; max-width: calc(100vw - var(--navigation-inset) * 2); height: auto; max-height: calc(100dvh - var(--navigation-inset) * 2);
  margin: 0; padding: 6px; border: 1px solid rgb(0 0 0 / .025); border-radius: 0;
  background: #f2f3f4; color: #141414; box-shadow: 0 8px 32px rgb(0 0 0 / .08);
  font-family: var(--font-aeonik, sans-serif); box-sizing: border-box; overflow-y: auto;
}
.nav-dialog[open] { display: block; opacity: 1; transform: none; transition: opacity 180ms ease-out, transform 200ms cubic-bezier(.2, 0, 0, 1); }
@starting-style { .nav-dialog[open] { opacity: 0; transform: translateY(-6px); } }
.nav-dialog::backdrop { background: rgb(0 0 0 / .12); }
.nav-dialog-top { margin-bottom: 12px; }
.nav-menu-toggle, .nav-menu-close { align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px; border: 0; border-radius: 0; background: none; color: inherit; font: 14px/1 var(--font-aeonik, sans-serif); cursor: pointer; }
.nav-menu-close { display: inline-flex; }
.nav-menu-toggle:focus-visible, .nav-menu-close:focus-visible, .portfolio-header a:focus-visible, .nav-dialog a:focus-visible, .site-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.site-nav .nav-tools { display: flex; gap: 8px; margin-top: 4px; padding: 8px 8px 0; border-top: 1px solid rgb(0 0 0 / .07); }
@media (hover: hover) and (pointer: fine) {
  .portfolio-nav a:hover, .site-nav .nav-links a:hover, .nav-dialog-links a:hover { color: #141414; background: rgb(255 255 255 / .5); }
  .portfolio-nav a:hover svg, .site-nav .nav-links a:hover svg, .nav-dialog-links a:hover svg { color: #34383c; }
  .nav-menu-toggle:hover, .nav-menu-close:hover { background: rgb(255 255 255 / .5); }
}
.nav-menu-toggle:active, .nav-menu-close:active, .nav-dialog-links a:active { transform: scale(.96); }
@media (min-width: 1001px) {
  .portfolio-header, .site-nav { height: calc(100dvh - var(--navigation-inset) * 2); }
  .site-nav .nav-tools { margin-top: auto; }
}
@media (max-width: 1000px) {
  :root { --navigation-inset: 16px; }
  .portfolio { padding-top: 88px; }
  .portfolio-header { width: 112px; padding: 6px; border-radius: 0; gap: 0; overflow: visible; }
  .nav-card-top { padding: 0 4px; }
  .portfolio-header > .portfolio-nav, .site-nav > .nav-links { display: none; }
  .nav-menu-toggle { display: inline-flex; margin-left: auto; }
  .site-nav { width: auto; max-width: calc(100vw - 32px); padding: 6px; border-radius: 0; flex-direction: row; align-items: center; gap: 4px; }
  .site-nav .site-logo { margin: 0; }
  .site-nav > .nav-tools { margin: 0; padding: 0 0 0 4px; border-top: 0; border-left: 1px solid rgb(0 0 0 / .07); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-active-indicator { transform: none !important; }
  .nav-dialog[open] { transform: none; transition: opacity 100ms ease; }
  @starting-style { .nav-dialog[open] { opacity: 0; transform: none; } }
  .portfolio-nav a, .site-nav .nav-links a, .nav-dialog-links a { transition: color 150ms ease, background-color 150ms ease; }
  .nav-menu-toggle:active, .nav-menu-close:active, .nav-dialog-links a:active { transform: none; }
}

/* A single top-layer surface morphs from a dot into each navigation label.
   The popover escapes the scrollable rail and remains above the mobile dialog. */
.nav-cursor {
  position: fixed; inset: 0 auto auto 0; width: 0; height: 0;
  margin: 0; padding: 0; border: 0; overflow: visible;
  background: transparent; color: var(--cursor-ink, #141414); pointer-events: none; user-select: none; -webkit-user-select: none;
  opacity: 0; transition: opacity var(--portfolio-motion-fast) ease;
}
.nav-cursor::backdrop { display: none; }
.nav-cursor[data-visible="true"] { opacity: 1; }
.nav-cursor-morph {
  position: absolute; left: 0; top: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 200ms var(--portfolio-motion-ease);
}
.nav-cursor-surface {
  position: absolute; left: -80px; top: -18px; width: 160px; height: 36px;
  background: var(--cursor-surface, #e7eaed);
  clip-path: inset(12px 74px round 18px);
  transition: clip-path 200ms var(--portfolio-motion-ease);
}
.nav-cursor-label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  color: var(--cursor-ink, #141414); font: 12px/1 var(--font-geist-mono), monospace; letter-spacing: -.02em;
  white-space: nowrap; opacity: 0; transition: opacity 125ms ease;
}
.nav-cursor[data-menu-pointer="true"] .nav-cursor-surface { background: var(--cursor-ink, #141414); }
.nav-cursor[data-keyboard="true"] :is(.nav-cursor-morph, .nav-cursor-surface, .nav-cursor-label),
.nav-cursor[data-reduced="true"] :is(.nav-cursor-morph, .nav-cursor-surface, .nav-cursor-label) { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .portfolio[data-cursor-ready],
  .portfolio[data-cursor-ready] *,
  .portfolio[data-cursor-ready] *::before,
  .portfolio[data-cursor-ready] *::after { cursor: none !important; }
}