/* Shared site theme. Linked from launch pages and the root.
   Single source of truth for fonts, palette, reset, grain, vignette, glyphs.
   Per-page body layout (flex/padding/etc) stays in each page's <style>. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;500;700&family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,500&family=JetBrains+Mono:wght@300;400&display=swap');

:root {
  --void:         #0a0a0b;
  --abyss:        #111113;
  --obsidian:     #1a1a1f;
  --smoke:        #2a2a32;
  --ash:          #6a6a78;
  --bone:         #d4cbb8;
  --parchment:    #ede4d0;
  --gold:         #c9a84c;
  --gold-bright:  #e8c95a;
  --gold-dim:     #8a7030;
}

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

html, body { min-height: 100%; }

body {
  background: var(--void);
  color: var(--bone);
  font-family: 'EB Garamond', serif;
}

@media (hover: hover) { body { cursor: crosshair; } }

/* Film grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}

/* Vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(5,5,5,0.7) 100%);
  pointer-events: none;
  z-index: 100;
}

/* Floating glyphs (used on pages with <div class="glyph">…</div> elements) */
.glyph {
  position: fixed;
  font-family: 'EB Garamond', serif;
  color: var(--ash);
  pointer-events: none;
  z-index: 50;
  font-size: 1rem;
  animation: glyph-drift 25s linear infinite;
  opacity: 0;
}
.glyph:nth-child(1) { left:  8%; top: 15%; animation-delay:   0s; animation-duration: 28s; }
.glyph:nth-child(2) { left: 88%; top: 35%; animation-delay:  -6s; animation-duration: 32s; }
.glyph:nth-child(3) { left: 12%; top: 75%; animation-delay: -11s; animation-duration: 24s; }
.glyph:nth-child(4) { left: 82%; top: 12%; animation-delay:  -8s; animation-duration: 30s; }
.glyph:nth-child(5) { left: 50%; top: 88%; animation-delay: -14s; animation-duration: 36s; }

@keyframes glyph-drift {
  0%   { opacity: 0;    transform: translateY(0)     rotate(0deg); }
  15%  { opacity: 0.2;                                              }
  50%  { opacity: 0.12;                                             }
  85%  { opacity: 0.2;                                              }
  100% { opacity: 0;    transform: translateY(-60px) rotate(6deg); }
}