/* ---------- New nav: brand left, pill of links centre, actions right.
   After scrolling, only the centre pill stays. ---------- */
:root {
  --nav-pill-bg: #1A1A1A; --nav-pill-border: #2A2A2A; --nav-link: #B9B0A2; --nav-link-hover: #F0E9DD;
  --nav-active-bg: var(--bright-red, #EB5939); --nav-active-fg: #fff;
  --nav-cta-bg: #D2C5AF; --nav-cta-fg: #101010; --nav-name: #D2C5AF; --nav-shadow: 0 14px 34px -14px rgba(0,0,0,.7);
}
html[data-theme="light"] {
  --nav-pill-bg: #F4F4F4; --nav-pill-border: #E6E6E6; --nav-link: #797979; --nav-link-hover: #131516;
  --nav-cta-bg: #131516; --nav-cta-fg: #FFFFFF; --nav-name: #131516; --nav-shadow: 0 14px 34px -16px rgba(19,21,22,.28);
  --nav-active-bg: #131516; --nav-active-fg: #FFFFFF;
}

.navbar-logo-left { display: none !important; }   /* the old Webflow nav */

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  max-width: 1360px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px);
  pointer-events: none;
}
.site-nav > * { pointer-events: auto; }
.nav-side { transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility .35s; }
.nav-brand { justify-self: start; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nav-name); }
.nav-brand img { width: 44px; height: 44px; border-radius: 50%; display: block; background: #000; }
.nav-brand span { font: 700 1.15rem/1 Silka, Inter, sans-serif; letter-spacing: -.02em; white-space: nowrap; }

.nav-pill {
  justify-self: center; display: flex; gap: 4px; padding: 6px; margin: 0; list-style: none;
  border-radius: 999px; background: var(--nav-pill-bg); border: 1px solid var(--nav-pill-border);
  transition: box-shadow .35s ease, background-color .3s, border-color .3s;
}
.nav-pill a {
  display: block; padding: 10px 20px; border-radius: 999px; text-decoration: none;
  font: 500 .98rem/1 Inter, sans-serif; color: var(--nav-link); transition: color .2s, background-color .2s;
}
.nav-pill a:hover { color: var(--nav-link-hover); }
.nav-pill a[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active-fg); }

.nav-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-cta, .nav-square {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 12px;
  background: var(--nav-cta-bg); color: var(--nav-cta-fg); text-decoration: none; font: 600 .95rem/1 Inter, sans-serif;
  transition: transform .15s, opacity .2s;
}
.nav-cta { padding: 0 18px; }
.nav-square { width: 44px; }
.nav-cta:hover, .nav-square:hover { transform: translateY(-1px); opacity: .9; }
.nav-cta svg, .nav-square svg { width: 17px; height: 17px; }
.site-nav .theme-toggle { width: 44px; height: 44px; margin: 0; border-radius: 12px; background: var(--nav-pill-bg); border: 1px solid var(--nav-pill-border); }

/* scrolled: the sides fade away, the pill floats */
.site-nav.scrolled .nav-side { opacity: 0; visibility: hidden; transform: translateY(-10px); }
.site-nav.scrolled .nav-pill { box-shadow: var(--nav-shadow); }

/* phones: brand and actions on top, the pill below; after scrolling only the pill stays at the top */
@media (max-width: 767px) {
  .site-nav { grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "pill pill"; row-gap: 12px; padding-top: 14px;
    transition: transform .45s cubic-bezier(.2,.8,.2,1); }
  .nav-brand { grid-area: brand; }
  .nav-brand span { font-size: 1rem; }
  .nav-brand img { width: 38px; height: 38px; }
  .nav-actions { grid-area: actions; gap: 6px; }
  .nav-cta { padding: 0; width: 40px; }
  .nav-cta span { display: none; }
  .nav-cta, .nav-square, .site-nav .theme-toggle { width: 40px; height: 40px; }
  .nav-pill { grid-area: pill; }
  .nav-pill a { padding: 10px 18px; font-size: .95rem; }
  .site-nav.scrolled { transform: translateY(-52px); }
}
@media (prefers-reduced-motion: reduce) { .nav-side, .nav-pill, .site-nav { transition: none; } }

/* phones: the two-row nav is taller, so the content below starts a little lower */
@media (max-width: 767px) {
  .site-nav[data-page="work"] ~ .main-wrapper { padding-top: 150px; }
  .site-nav[data-page="about"] ~ .main-wrapper { padding-top: 62px; }
}

/* ---------- Segmented-control animation ----------
   The highlight sits inside the current link. Between pages the browser morphs it from the old link
   to the new one on a spring (bounce 0.2), like Motion's shared layout animation. */
.nav-pill a { position: relative; z-index: 0; transition: color .25s ease; }
.nav-pill a[aria-current="page"] { background: transparent; color: var(--nav-active-fg); }
.nav-indicator { position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--nav-active-bg); transition: background-color .3s; }
.nav-label { position: relative; }

/* ---------- Smooth page changes: the browser morphs the highlight from page to page ---------- */
@view-transition { navigation: auto; }
.nav-indicator { view-transition-name: nav-indicator; }
.nav-pill { view-transition-name: nav-pill; }
.nav-brand { view-transition-name: nav-brand; }
.nav-actions { view-transition-name: nav-actions; }
/* the highlight glides on the same spring as the segmented control (bounce 0.2) */
::view-transition-group(nav-indicator) { animation-duration: .87s; animation-timing-function: linear(0.0000 0.0%, 0.0201 2.5%, 0.0716 5.0%, 0.1436 7.5%, 0.2274 10.0%, 0.3164 12.5%, 0.4058 15.0%, 0.4921 17.5%, 0.5728 20.0%, 0.6465 22.5%, 0.7125 25.0%, 0.7704 27.5%, 0.8203 30.0%, 0.8627 32.5%, 0.8982 35.0%, 0.9273 37.5%, 0.9508 40.0%, 0.9694 42.5%, 0.9838 45.0%, 0.9947 47.5%, 1.0026 50.0%, 1.0082 52.5%, 1.0118 55.0%, 1.0140 57.5%, 1.0150 60.0%, 1.0151 62.5%, 1.0147 65.0%, 1.0138 67.5%, 1.0126 70.0%, 1.0113 72.5%, 1.0099 75.0%, 1.0086 77.5%, 1.0073 80.0%, 1.0061 82.5%, 1.0050 85.0%, 1.0041 87.5%, 1.0032 90.0%, 1.0025 92.5%, 1.0019 95.0%, 1.0014 97.5%, 1.0010 100.0%); }
::view-transition-old(nav-indicator), ::view-transition-new(nav-indicator) { animation: none; height: 100%; }
/* the nav itself stays still; the page underneath does a quick crossfade */
::view-transition-group(nav-pill), ::view-transition-group(nav-brand), ::view-transition-group(nav-actions) { animation-duration: .25s; }
::view-transition-old(nav-pill), ::view-transition-new(nav-pill) { animation-duration: .25s; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
/* While the highlight travels, every label keeps the muted colour (nothing to crossfade, so no flash on cream).
   When it lands, the selected label fades to white with the normal colour transition. */
html.vt-leaving .nav-pill a, html.vt-arriving .nav-pill a { color: var(--nav-link) !important; transition: none !important; }
::view-transition-group(nav-indicator) { z-index: 1; }
::view-transition-group(nav-label-work), ::view-transition-group(nav-label-about), ::view-transition-group(nav-label-resume) { z-index: 2; animation-duration: 0s; }
::view-transition-old(nav-label-work), ::view-transition-old(nav-label-about), ::view-transition-old(nav-label-resume) { animation: none; opacity: 0; }
::view-transition-new(nav-label-work), ::view-transition-new(nav-label-about), ::view-transition-new(nav-label-resume) { animation: none; }
::view-transition-old(nav-pill), ::view-transition-new(nav-pill) { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- The avatar in the header: the face zooms in a little inside its circle on hover ----------
   nav.js wraps the avatar in .nav-face, a fixed circle. */
.nav-face { position: relative; display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #000;
  isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }   /* keeps Safari clipping to the circle while scaling */
.nav-face img { width: 100% !important; height: 100% !important; border-radius: 0 !important; display: block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1); transform-origin: 50% 55%; will-change: transform; }
.nav-brand:hover .nav-face img, .nav-brand:focus-visible .nav-face img { transform: scale(1.1); }
@media (max-width: 767px) { .nav-face { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .nav-face img { transition: none; } .nav-brand:hover .nav-face img { transform: none; } }