/* Shared across all pages: reset, color tokens, nav, footer */

:root {
  --bg: #000000;
  /* --ink/--ink-dim/--ink-faint are neon-green at different opacities, not
     a separate color -- there's no pink/purple ink tone anywhere in this
     project, on any page or at any width. about.css overrides all three
     for its own light theme; every other page inherits these. */
  --neon-rgb: 0, 255, 80;
  --ink: rgba(var(--neon-rgb), 0.85);
  --ink-dim: rgba(var(--neon-rgb), 0.45);
  --ink-faint: rgba(var(--neon-rgb), 0.25);
  --neon: #00ff50;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Mobile Safari (and some other mobile browsers) silently boosts font sizes
   on its own "readability" heuristic, on top of whatever font-size the CSS
   actually says -- and that boost factor is computed per-page from things
   like column width and text density, so the *same* font-size rule can
   render at a different actual size on index.html vs work.html. Pinning
   this to 100% forces every font-size in the CSS to mean exactly what it
   says, identically across pages. */
html, body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Native browser cross-fade between page navigations -- clicking a node
   into its work page, jumping between works via the Works dropdown, going
   back to the index -- instead of the default hard cut. Pure progressive
   enhancement: browsers without support (Safari, Firefox as of writing)
   just navigate instantly like before, no fallback needed. */
@view-transition {
  navigation: auto;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

/* Soft entrance for a page's first paint: a solid veil sits on top of the
   already-fully-rendered page and fades itself away, instead of fading the
   page's own opacity in. That matters here specifically because body's own
   background can differ from the actual content sitting on top of it (e.g.
   about.html's light theme override) -- fading body's opacity would blend
   the two live on screen for the whole animation. A veil set to the real
   underlying color has nothing to blend with the content already sitting
   there at full color underneath, so nothing but the veil itself is ever
   seen fading. Each page adds `<div class="page-veil" style="background:...">`
   right after <body> with the color that page actually shows underneath. */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  animation: veil-out 3s ease forwards;
}
@keyframes veil-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.5; }

/* NAV — name left, links + instagram right */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
}

.nav-name {
  font-size: 28px;
  letter-spacing: 0.05em;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-right a { font-size: 18px; color: var(--ink-dim); }
.nav-right a:hover,
.nav-right a.active { color: var(--ink); opacity: 1; }

.nav-ig {
  display: flex;
  align-items: center;
  color: var(--ink-dim);
  transition: opacity 0.2s;
}
.nav-ig:hover { opacity: 0.5; }
.nav-ig svg { width: 19px; height: 19px; fill: currentColor; }

/* Phone widths: the name + links overflow a single flex row at the
   desktop sizes above, so scale both down and tighten the gaps instead of
   letting the row run off the side of the screen. */
@media (max-width: 480px) {
  .nav { padding: 16px 18px; }
  .nav-name { font-size: 19px; }
  .nav-right { gap: 14px; }
  .nav-right a { font-size: 14px; }
  .nav-ig svg { width: 16px; height: 16px; }
}

/* FOOTER */
footer {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 32px;
  font-size: 13px;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}
footer a { color: var(--ink-faint); }
footer a:hover { color: var(--neon); opacity: 1; }