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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: var(--body-size);
  line-height: 1.72;
  overflow-x: hidden;
  transition: background var(--t-med), color var(--t-med);
}

/* atmosphere layers: texture + realm-specific wash */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--texture);
  opacity: var(--texture-op);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
[data-realm="dread"] body::before { mix-blend-mode: overlay; animation: grainshift 1.1s steps(3) infinite; }
[data-realm="liminal"] body::before { mix-blend-mode: overlay; }

@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 15% -10%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%),
    radial-gradient(900px 600px at 90% 5%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  transition: background var(--t-med);
}
[data-realm="dread"] body::after {
  background:
    radial-gradient(1000px 620px at 50% -15%, rgba(192,32,31,.20), transparent 72%),
    radial-gradient(700px 500px at 8% 110%, rgba(110,15,15,.24), transparent 70%);
}

/* vignette for horror */
[data-realm="dread"] .vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 min(28vw, 320px) min(6vw, 60px) rgba(0,0,0,.92);
}
.vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 min(24vw,300px) min(2vw,26px) color-mix(in srgb, var(--bg) 78%, transparent); }

main, header, footer { position: relative; z-index: 3; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-d);
  font-weight: 600;
  line-height: 1.14;
  margin: 0 0 .6em;
  text-transform: var(--heading-case);
  letter-spacing: .01em;
}
[data-realm="dread"] h1,
[data-realm="dread"] h2,
[data-realm="dread"] h3 { font-weight: 500; letter-spacing: .06em; }

h1 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.5rem); }

p { margin: 0 0 1.05em; color: var(--ink); }
p.lede { font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--ink-dim); line-height: 1.68; }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast), opacity var(--t-fast); }
a:hover { color: var(--ink); }

img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 3rem 0; }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--pad); }

section { padding: clamp(3.2rem, 8vw, 6.5rem) 0; }
section.tight { padding: clamp(2rem, 4vw, 3rem) 0; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1.1em;
  font-weight: 500;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--accent); opacity: .7; }

.grid { display: grid; gap: clamp(14px, 2vw, 24px); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); font-size: .9rem; }
.mono { font-family: var(--font-mono); }
.gold { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}