:root {
  --bg: #0d1109;
  --bg2: #111507;
  --surface: #161c0f;
  --border: #243018;
  --muted: #4a5e3a;
  --body: #8fa876;
  --heading: #d6e8c0;
  --accent: #7db87a;
  --accent2: #b8c98a;
  --amber: #d8b271;
  --serif: 'Playfair Display', Georgia, serif;
  --body-font: 'Literata', Georgia, serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --max: 740px;
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background-color: var(--bg); color: var(--body); font-family: var(--body-font); font-size: clamp(16px, 1.8vw, 18px); line-height: 1.85; min-height: 100vh; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); opacity: 0.6; }
#site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 500; background: rgba(13,17,9,0.92); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 4rem); }
.nav-logo { font-family: var(--serif); font-size: 1.35rem; font-weight: 900; letter-spacing: 0.06em; color: var(--heading); text-transform: lowercase; transition: color 0.2s; }
.nav-logo:hover { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 2.25rem; }
.nav-links a { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--heading); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 24px; padding: 4px 0; cursor: pointer; background: none; border: none; }
.nav-toggle span { display: block; height: 1px; background: var(--heading); transition: transform 0.3s, opacity 0.3s; transform-origin: left center; }
.nav-toggle span:nth-child(2) { width: 65%; }
.nav-toggle.open span:nth-child(1) { transform: rotate(38deg) translateY(-1px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-38deg) translateY(1px); }
.nav-drawer { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: rgba(13,17,9,0.97); border-bottom: 1px solid var(--border); padding: 2rem clamp(1.25rem, 5vw, 4rem); flex-direction: column; gap: 1.75rem; z-index: 499; }
.nav-drawer.open { display: flex; }
.nav-drawer a { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--heading); }
.article-wrap { max-width: var(--max); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 5rem)); padding-bottom: clamp(5rem, 10vw, 8rem); }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 3rem; transition: color 0.2s; }
.back-link:hover { color: var(--accent); }
.back-link::before { content: '←'; }
.article-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.meta-cat { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(125,184,122,0.3); padding: 0.2rem 0.65rem; }
.meta-date { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }
.article-title { font-family: var(--serif); font-weight: 900; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--heading); margin-bottom: 1rem; }
.article-subtitle { font-family: var(--body-font); font-size: clamp(1.05rem, 2vw, 1.2rem); font-weight: 300; font-style: italic; color: var(--body); margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border); }
.article-body { color: var(--body); }
.article-body p { font-size: clamp(1rem, 1.8vw, 1.1rem); font-weight: 300; margin-bottom: 1.6rem; line-height: 1.9; }
.article-body h2 { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; color: var(--heading); margin-top: 3rem; margin-bottom: 1rem; }
.article-body blockquote { border-left: 2px solid var(--accent); padding-left: 1.5rem; margin-block: 2.5rem; font-style: italic; font-size: 1.15rem; color: var(--heading); }
.article-divider { width: 40px; height: 1px; background: var(--border); margin-block: 3rem; }
#site-footer { border-top: 1px solid var(--border); padding-block: 2rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; max-width: 1080px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 4rem); }
.footer-copy { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--muted); }
.footer-top { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; color: var(--muted); transition: color 0.2s; }
.footer-top:hover { color: var(--accent); }
@media (max-width: 640px) { .nav-links { display: none; } .nav-toggle { display: flex; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }