/* ── Design tokens ──
   The entire theme is driven from this :root block. Swap these values
   to reskin the whole site. */
:root {
  /* Core palette */
  --bg: #FEFEFB;      /* warm white base — page background only */
  --ink: #0A0A0A;     /* display type, headlines, link text */
  --body: #3D3D3D;    /* paragraph copy, secondary text */
  --paper: #F0E6D2;   /* cream — cards only, never the page background */
  --accent: #C8102E;  /* crimson — link hovers & underlines only, no fills */

  /* Derived tokens (outside the core 5 — needed for hierarchy) */
  --muted: #767676;                       /* tertiary text: dates, footers */
  --pencil: #B8B8B8;                       /* soft pencil-grey annotation */
  --note: #4A4A4A;                          /* script label ink — pencil annotation */
  --ink-soft: #2A2A2A;                      /* dark pencil grey — written, not declared */
  --hairline: rgba(10,10,10,0.10);        /* subtle borders & dividers */
  --hairline-strong: rgba(10,10,10,0.16); /* hover borders */
  --surface-tint: rgba(10,10,10,0.03);    /* card hover background */
  --shadow: rgba(10,10,10,0.14);          /* soft photo shadow */

  /* Status badge hues — placeholders, pending the log-card redesign */
  --status-shipped: #22c55e;
  --status-building: #f59e0b;
  --status-coming: #a78bfa;

  /* ── Theme-invariant tokens ──
     These sit ON TOP of photographs and video, never on the page ground,
     so they must NOT flip with the theme. Deliberately not overridden in
     the dark block below. */
  --media-matte: #0A0A0A;   /* letterbox behind video — always black */
  --chip-bg: #F0E6D2;       /* cream discs floating over media */
  --chip-ink: #0A0A0A;      /* glyph on a cream disc */
  --chip-ink-soft: #3D3D3D; /* label text on a cream disc */
}

/* ── Dark mode ──
   Follows the device setting only — there is no toggle. Nothing but the
   token values change, so every rule below this block is theme-agnostic
   and light mode is byte-for-byte what it was. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Core palette */
    --bg: #0C0C0C;      /* near-black base — page background only */
    --ink: #F4F1E8;     /* warm off-white: display type, headlines, links */
    --body: #C7C2B6;    /* paragraph copy, secondary text */
    --paper: #1A1815;   /* warm near-black — cards only */
    --accent: #E8455C;  /* lifted crimson — reads on a dark ground */

    /* Derived tokens — mirrored, not merely inverted */
    --muted: #8E887D;
    --pencil: #5A554D;
    --note: #A9A296;
    --ink-soft: #DCD7CB;
    --hairline: rgba(244,241,232,0.14);
    --hairline-strong: rgba(244,241,232,0.24);
    --surface-tint: rgba(244,241,232,0.05);
    --shadow: rgba(0,0,0,0.55);   /* shadows barely register on dark */

    /* Status badge hues — nudged brighter so they hold on a dark ground */
    --status-shipped: #4ade80;
    --status-building: #fbbf24;
    --status-coming: #c4b5fd;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px; /* clear the fixed nav on anchor jumps */
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  animation: pageFadeIn 0.65s ease-out both;
  transition: background-color 0.3s, color 0.3s;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.exiting {
  animation: pageFadeOut 0.4s ease-in forwards;
}

@keyframes pageFadeOut {
  to { opacity: 0; transform: translateY(-12px); }
}

main { position: relative; z-index: 1; }

/* ── Top nav ──
   VAIBHAV home link at the far left (a compact serif echo of the hero
   wordmark), then the three toggle items spread evenly to its right.
   Matches the floating-label treatment — no boxes, no fills. */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 40px;
  /* Soft --bg bar so it stays legible over content — no border, no shadow */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
}

/* Home link — compact echo of the hero wordmark, not a large logo */
.nav-home {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease-out;
}

.nav-home:hover { color: var(--accent); }

.nav-link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease-out;
}

.nav-link:hover { color: var(--accent); }

/* Active page — subtle thin underline, not a filled state */
.nav-link[aria-current="page"],
.nav-home[aria-current="page"] {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
}

.nav-link:focus-visible,
.nav-home:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 8px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  /* Four items now (VAIBHAV + three toggles) — tighten type and padding so
     they stay evenly spread edge-to-edge without clipping at 390px. */
  .site-nav {
    gap: 8px;
    padding: 13px 14px;
  }
  .nav-home { font-size: 11px; letter-spacing: 0.08em; }
  .nav-link { font-size: 9px; letter-spacing: 0.06em; }
}

/* ── Scroll fade-up ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up.delay-1 { transition-delay: 0.12s; }
.fade-up.delay-2 { transition-delay: 0.24s; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .fade-up {
    opacity: 1;
    transform: none;
  }
}