@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══ TOKENS ═══ */
:root {
  --oak: #b5541e;
  --oak-deep: #8c3a10;
  --oak-wash: rgba(181,84,30,0.05);
  --oak-tint: #f5e6db;
  --wire: #4a5e73;
  --wire-deep: #2d3d4f;
  --cream: #f4efe8;
  --linen: #faf7f3;
  --parchment: #ede7dd;
  --ink: #1a1714;
  --ink-2: #3d3630;
  --ink-3: #7a7067;
  --ink-4: #b0a89e;
  --white: #ffffff;
  --border: #ddd5cb;
  --border-light: #eae4dc;
  --green: #3d7a4a;
  --r: 10px;
}

/* ═══ DARK MODE TOKENS ═══ */
@media (prefers-color-scheme: dark) {
  :root {
    --oak: #d4743a;
    --oak-deep: #c46a30;
    --oak-wash: rgba(212,116,58,0.08);
    --oak-tint: #3a2618;
    --wire: #7a99b5;
    --wire-deep: #5a7a96;
    --cream: #151210;
    --linen: #1c1917;
    --parchment: #1f1c18;
    --ink: #e8e2da;
    --ink-2: #c8c0b6;
    --ink-3: #8a8078;
    --ink-4: #605850;
    --white: #221f1c;
    --border: #3a3530;
    --border-light: #2e2a25;
    --green: #5aad6a;
  }
  body::after { opacity: 0.015; }
}

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

body {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* ═══ GRAIN ═══ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
}

/* ═══ UTILITIES ═══ */
.mono { font-family: 'JetBrains Mono', monospace; font-size: 0.78em; color: var(--ink-4); letter-spacing: 0.01em; }
.serif { font-family: 'Instrument Serif', serif; }
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 32px; }

/* ═══ ANIMATIONS ═══ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.visible .stagger { opacity: 0; animation: rise 0.6s ease-out forwards; }

@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

/* ═══ HUB NAV — masthead strip above hero, shared by all pages ═══ */
.hub-nav {
  background: var(--ink);
  position: relative;
  z-index: 6;
  border-bottom: 1px solid rgba(181,84,30,0.35);
}
.hub-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(181,84,30,0.55) 22%,
    rgba(181,84,30,0.55) 78%,
    transparent 100%);
  pointer-events: none;
}
.hub-nav-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hub-nav-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,239,232,0.55);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.hub-nav-brand::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--oak);
}
.hub-nav-brand strong {
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.18em;
}
.hub-nav-brand-sep {
  color: rgba(244,239,232,0.25);
  margin: 0 4px;
}
.hub-nav-pages {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.hub-nav-link {
  display: flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,239,232,0.42);
  padding: 4px 18px 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.hub-nav-link + .hub-nav-link {
  border-left: 1px solid rgba(244,239,232,0.08);
}
.hub-nav-link:hover { color: rgba(244,239,232,0.88); }
.hub-nav-link.active {
  color: var(--cream);
}
.hub-nav-link.active::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 2px;
  background: var(--oak);
  z-index: 2;
}
.hub-nav-num {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(244,239,232,0.3);
  font-weight: 500;
}
.hub-nav-link.active .hub-nav-num { color: var(--oak); }
.hub-nav-link[aria-disabled="true"] {
  color: rgba(244,239,232,0.22);
  cursor: default;
  pointer-events: none;
}

@media (max-width: 720px) {
  .hub-nav-inner { padding: 14px 20px; gap: 12px; }
  .hub-nav-brand { font-size: 9px; letter-spacing: 0.18em; }
  .hub-nav-brand-place { display: none; }
  .hub-nav-link { padding: 4px 12px 6px; font-size: 9px; letter-spacing: 0.16em; gap: 6px; }
  .hub-nav-link.active::after { left: 12px; right: 12px; }
  .hub-nav-num { font-size: 8px; }
}
@media (max-width: 480px) {
  .hub-nav-brand-suffix { display: none; }
}