/* NOX VELUM — OCCULT EDITORIAL | Web brand starter v1.0
   Reference palette and type guidance; update only after artist approval.
   Main logo is custom artwork: do not recreate it with webfonts.
*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Space+Grotesk:wght@400;500;600&display=swap');
:root {
  --nv-obsidian: #101010;
  --nv-charcoal: #211C1B;
  --nv-antique-gold: #CAA56C;
  --nv-parchment: #E8E2D8;
  --nv-oxblood: #541F2B;
  --nv-midnight-plum: #35273E;
  --nv-antique-silver: #A6A09A;
  --nv-smoke: #77736F;

  --nv-font-display: 'Cormorant Garamond', Georgia, serif;
  --nv-font-body: 'EB Garamond', Georgia, serif;
  --nv-font-ui: 'Space Grotesk', Arial, sans-serif;
  --nv-font-tarot: 'Cinzel', Georgia, serif;

  --nv-bg: var(--nv-obsidian);
  --nv-surface: var(--nv-charcoal);
  --nv-text: var(--nv-parchment);
  --nv-muted: var(--nv-antique-silver);
  --nv-accent: var(--nv-antique-gold);
}
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--nv-bg);
  color: var(--nv-text);
  font-family: var(--nv-font-body);
  font-size: clamp(1.0625rem, 1vw + 0.65rem, 1.1875rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, blockquote { font-family: var(--nv-font-display); font-weight: 500; }
h1 { font-size: clamp(3.2rem, 7vw, 6.8rem); line-height: .98; letter-spacing: -.025em; margin-block: 0 .4em; }
h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -.012em; }
h3 { font-size: clamp(1.75rem, 3.3vw, 2.8rem); line-height: 1.14; }
p { max-width: 66ch; }
blockquote { font-size: clamp(1.9rem, 4vw, 3.5rem); line-height: 1.12; font-style: italic; }
nav, button, .button, .eyebrow, .caption, .overline, input, textarea, label {
  font-family: var(--nv-font-ui);
}
nav, .eyebrow, .overline, .caption {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}
button, .button { font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tarot-card__title { font-family: var(--nv-font-tarot); font-weight: 500; font-size: clamp(.9rem, 1.5vw, 1.25rem); letter-spacing: .12em; line-height: 1.35; }
.tarot-card__number { font-family: var(--nv-font-tarot); font-size: .77rem; letter-spacing: .16em; }
a { color: inherit; text-underline-offset: .22em; }
a:hover, a:focus-visible { color: var(--nv-antique-gold); }
:focus-visible { outline: 2px solid var(--nv-antique-gold); outline-offset: 4px; }
.nv-gold-rule { height: 1px; background: var(--nv-antique-gold); opacity: .75; border: 0; }
.nv-panel--umbra { background: var(--nv-midnight-plum); color: var(--nv-parchment); }
.nv-panel--prima-lux { background: var(--nv-parchment); color: var(--nv-obsidian); }
/* Accessibility: Smoke on obsidian is ~4.05:1 — avoid for small body text.
   Gold on obsidian is ~8.25:1; parchment on obsidian is ~14.77:1.
   Never set small gold lettering over photographs without an opaque backing.
   At favicon/small sizes, use a simplified logo without fine texture.
*/
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }