/* ==========================================================================
   main.css — design tokens, reset, typography, base
   ========================================================================== */

:root {
  --bg:        #0a0a0a;
  --bg-2:      #111111;
  --bg-3:      #161616;
  --line:      #222222;
  --line-2:    #2a2a2a;
  --ink:       #f3efe7;
  --ink-2:     #b8b3a8;
  --ink-3:     #6a665e;
  --hot:       #ff5b1f;
  --hot-2:     #ff8a3d;
  --mint:      #4dffd2;
  --gold:      #d4b65a;
  --red:       #ff3344;

  --display:   "Bricolage Grotesque", serif;
  --serif:     "Instrument Serif", serif;
  --body:      "Manrope", system-ui, sans-serif;
  --mono:      "JetBrains Mono", monospace;

  --container: 1400px;
  --pad-x:     2.5rem;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.9 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: overlay;
}

/* faint grid */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 91, 31, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 91, 31, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* ---- typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
ul, ol { padding-left: 1.2em; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.mono  { font-family: var(--mono);  font-weight: 400; letter-spacing: 0; }

::selection { background: var(--hot); color: var(--bg); }

/* ---- layout helpers ---- */
main { position: relative; z-index: 1; }
.container-x { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.text-mute  { color: var(--ink-2); }
.text-dim   { color: var(--ink-3); }
.text-hot   { color: var(--hot); }
.border-top { border-top: 1px solid var(--line); }
.border-btm { border-bottom: 1px solid var(--line); }

/* ---- scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--hot); }

/* ---- responsive (shared) ---- */
@media (max-width: 720px) {
  :root { --pad-x: 1.25rem; }
  h1, h2 { letter-spacing: -0.03em; }
}