/* ============================================================
   BASE — tokens, reset, body, grain, nav, fab, fade
   Shared by all pages.
   ============================================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Tokens */
:root {
  --ink: #0f1a14; --ink-2: #3a4a40; --ink-3: #606e68; --ink-4: #686e68;
  --paper: #ffffff; --paper-2: #eef1f6;
  --rule: rgba(15,26,20,0.1);
  --accent: #234168; --accent-light: rgba(35,65,104,0.07);
  --mono: 'Fragment Mono', 'Courier New', monospace;
  --serif: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --sans: 'Onest', 'Helvetica Neue', sans-serif;
}
html.dark {
  --ink: #e8ede9; --ink-2: #b0bfb5; --ink-3: #8a9a90; --ink-4: #787e78;
  --paper: #0d1210; --paper-2: #141a16;
  --rule: rgba(232,237,233,0.08);
  --accent: #9bb8e0; --accent-light: rgba(155,184,224,0.07);
}

/* Base */
html { scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 350ms ease, color 350ms ease;
}

/* Paper grain */
.grain {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 9999; opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj4KPGZpbHRlciBpZD0ibiI+CjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjg1IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiBzZWVkPSIyIi8+CjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMC41IDAiLz4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC41NSIvPgo8L3N2Zz4=");
  background-size: 200px 200px;
}
html.dark .grain { mix-blend-mode: screen; opacity: 0.18; }

/* Nav */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 2rem;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms, background 300ms;
}
nav.scrolled { border-bottom: 1px solid var(--rule); }
.nav-name {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
}
.nav-back {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-4);
  text-decoration: none; letter-spacing: 0.06em; transition: color 150ms;
}
.nav-back:hover { color: var(--ink); }

/* Theme toggle FAB */
.fab {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 200;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 300ms, border-color 300ms, transform 200ms, color 300ms;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.fab:hover { transform: scale(1.08); }
.fab svg { width: 16px; height: 16px; transition: opacity 200ms; stroke: currentColor; }
.fab .icon-light { position: absolute; }
.fab .icon-dark  { position: absolute; }
html:not(.dark) .fab .icon-light { opacity: 0; }
html.dark        .fab .icon-dark  { opacity: 0; }

/* Scroll fade-in */
.fade { opacity: 0; transform: translateY(14px); transition: opacity 550ms cubic-bezier(0.16,1,0.3,1), transform 550ms cubic-bezier(0.16,1,0.3,1); }
.fade.in { opacity: 1; transform: none; }