/* Tokens — the whole palette and the radius scale, shared by every page
   that links this file. Four solid greys — the #141414 ink at 0.94, 0.6,
   0.4 and 0.1 over white — used on the white pages and the black footer
   alike. */
:root {
  --ink: #222222;
  --ink-soft: #727272;
  --ink-faint: #a1a1a1;
  --rule: #e8e8e8;
  /* Corner radius — one 16px base; every other size halves from it, so
     changing the base rescales them all. Pills stay fully rounded. */
  --r-base: 16px;
  --r-media: var(--r-base);
  --r-control: calc(var(--r-base) / 2);
  --r-paper: calc(var(--r-base) / 4);
  --r-well: calc(var(--r-base) / 8);
  --r-pill: 999px;
}

/* Cross-document page transitions. The outgoing page settles back and
   fades; the incoming one rises into place slightly slower, so the
   handoff reads as one continuous move rather than two crossfades. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-leave 0.30s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-enter 0.46s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes vt-leave {
  to { opacity: 0; transform: translateY(-10px) scale(0.994); }
}
@keyframes vt-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── NAVBAR (shared) ──────────────────────────── */
    .navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
}
/* The surface is a pseudo-element rather than the bar itself, and stays
   opaque here: without backdrop-filter support a translucent bar would let
   the page read straight through it. The frost is layered on below. */
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #ffffff;
  box-shadow: 0 1px 0 var(--rule);
}
/* Glass. More of the page shows through than it used to (0.62, was 0.86);
   the heavier blur and saturation keep what's underneath soft and its
   colour rich, so it reads as frosted glass rather than a faded bar — the
   same blur/saturate as Gallery's floating pills. Over the white page it is
   still invisible. Lower alpha is more glass, higher is closer to solid. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar::before {
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    /* Bevel along the bottom edge: a crisp 1px highlight just inside it (the
       bevel's own rgba(255,255,255,0.9), from the prints on About) and a soft
       glow rising off it, so the edge reads as thick glass catching light.
       The hairline stays outside, underneath. Only visible over photos —
       white on white disappears, like the frost. */
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.9), inset 0 -10px 12px -10px rgba(255, 255, 255, 0.7), 0 1px 0 var(--rule);
  }
}
/* Some people ask the OS for less of this. The bar goes solid for them. */
@media (prefers-reduced-transparency: reduce) {
  .navbar::before {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 var(--rule);
  }
}
/* Positioned so they paint above the surface. */
.nav-logo, .nav-right { position: relative; z-index: 1; }

.nav-logo { text-decoration: none; cursor: pointer; font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; flex-shrink: 0; transform-origin: left center; transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1); display: inline-flex; align-items: center; min-height: 44px; padding-right: 8px; }
.nav-logo:hover { transform: scale(1.18); }
.nav-right { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-link { font-size: 14px; color: var(--ink-soft); text-decoration: none; cursor: pointer; transition: color 0.15s ease; display: inline-flex; align-items: center; gap: 4px; padding: 12px 6px; margin: -12px -6px; }
.nav-link:hover { color: var(--ink); }
.nav-link-arrow { display: inline-flex; align-items: center; justify-content: center; width: 0; opacity: 0; overflow: hidden; transform: translate(-2px, 2px); transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.23,1,0.32,1), width 0.2s ease; }
.nav-link-arrow svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-link:hover .nav-link-arrow { opacity: 1; width: 11px; transform: translate(0,0); }