:root {
  --bg-0:#070b18;
  --bg-1:#0b1124;
  --bg-2:#0e1530;
  --panel:#10172e;
  --panel-2:#141c38;
  --line:rgba(212,180,120,0.14);
  --line-cool:rgba(120,170,230,0.16);
  --ivory:#f3ecdc;
  --ivory-strong:#fff7e3;
  --ivory-dim:#d8cfb9;
  --muted:#8b91a8;
  --muted-2:#6c7290;
  --gold:#e9c073;
  --gold-2:#f5d99a;
  --gold-deep:#b8853a;
  --amber:#d99a3f;
  --sapphire:#6ea6e6;
  --sapphire-2:#9cc4f1;
  --sapphire-deep:#3a6ea8;
  --rose:#c97a7a;
  --crucifixion:#d6b07a;

  /* highlight palette */
  --hl-covenant:#5b8fd0;
  --hl-promise:#e9c073;
  --hl-warning:#c97a7a;
  --hl-fulfillment:#7fb585;
  --hl-question:#9d7ec8;

  /* genre tints (chapter map) */
  --genre-narrative:#c2b594;
  --genre-law:#d6b07a;
  --genre-poetry:#9d7ec8;
  --genre-wisdom:#7fb585;
  --genre-prophecy:#5b8fd0;
  --genre-gospel:#f5d99a;
  --genre-epistle:#9cc4f1;
  --genre-apocalypse:#c97a7a;
}

*{box-sizing:border-box}
html, body {
  margin:0; padding:0;
  background:var(--bg-0);
  color:var(--ivory);
  font-family:'Inter', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body {
  min-height:100vh;
  background:
    radial-gradient(1400px 700px at 20% -10%, rgba(217,154,63,0.08), transparent 60%),
    radial-gradient(1100px 600px at 90% 110%, rgba(110,166,230,0.07), transparent 65%),
    radial-gradient(900px 500px at 50% 50%, rgba(233,192,115,0.04), transparent 70%),
    linear-gradient(180deg, #060914 0%, #0a0f22 50%, #060914 100%);
  overflow-x:hidden;
}

.serif{ font-family:'Cormorant Garamond', serif; letter-spacing:0.01em }
.mono { font-family:'JetBrains Mono', monospace }

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

/* small shared icon */
.ic { width:14px; height:14px; display:inline-block; vertical-align:middle }