/* ═══ HELHEIMRS — base ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  direction: rtl;
  text-align: start;
  overflow-x: hidden;
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
}
body.has-lantern { cursor: none; }
/* the spirit lantern replaces the arrow, never the cursors that carry meaning */
body.has-lantern a, body.has-lantern button, body.has-lantern [role="button"], body.has-lantern label,
body.has-lantern summary, body.has-lantern .chip, body.has-lantern .tab { cursor: pointer; }
body.has-lantern input, body.has-lantern textarea, body.has-lantern select, body.has-lantern [contenteditable="true"] { cursor: auto; }

/* film grain */
body::after {
  content: ""; position: fixed; inset: -4%; pointer-events: none; z-index: 1;
  opacity: var(--grain-opacity);
  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='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.4s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-1%,-1%)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--fg-strong);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: 900; }
/* two page ranks + one hero exception, so the same role is not six sizes */
.page-title { font-size: var(--fs-page); }
.hero-title { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--accent-text); text-decoration: none; text-underline-offset: .2em; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
small { font-size: var(--fs-sm); }
strong { color: var(--fg-strong); font-weight: 700; }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); margin: var(--s-7) 0; }
img, svg, video, canvas { max-width: 100%; display: block; }
ul, ol { padding-inline-start: 1.4em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; scroll-margin-block: 96px 140px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: var(--glow-soft); border-radius: var(--r-1); }
/* clip-path clips outline AND box-shadow, so anything painted outside the polygon
   is discarded: faceted/hex controls take the ring on the inside instead. */
.btn:focus-visible, .chip:focus-visible, .slab:focus-visible, .tab:focus-visible,
.dice-fab:focus-visible, .sound-btn:focus-visible, .avatar:focus-visible,
.check input:focus-visible, .shield:focus-visible, .cr:focus-visible {
  outline-offset: -3px; box-shadow: var(--glow-inset);
}
/* Route changes move focus to the page heading so screen readers announce it.
   That target is not Tab-reachable, so a painted ring would tell a sighted
   keyboard user nothing while covering the headline. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible, main:focus, main:focus-visible {
  outline: none; box-shadow: none;
}
::selection { background: rgba(47,211,154,.35); color: var(--fg-strong); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; inset-inline-start: var(--s-4); z-index: 999; background: var(--accent); color: var(--accent-fg); padding: var(--s-2) var(--s-4); font-weight: 700; }
.skip-link:focus { top: var(--s-4); text-decoration: none; }

/* layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.section { padding-block: var(--s-9); position: relative; }
.section--tight { padding-block: var(--s-7); }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.center { text-align: center; }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.strong { color: var(--fg-strong); }
.accent { color: var(--accent-text); }
.num { font-variant-numeric: tabular-nums; }
.latin { direction: ltr; unicode-bidi: isolate; font-family: var(--font-latin); }
.rune { font-family: var(--font-rune); letter-spacing: .3em; color: var(--accent-text); opacity: .8; user-select: none; font-size: var(--rune-md); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* section heading with rune ornament: ᚼ ─── heading ─── ᚼ */
.sec-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.sec-head h2 { margin: 0; }
.sec-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to left, var(--line-glow), transparent 70%); min-width: 40px; }
.sec-head .rune { font-size: var(--rune-md); }

/* reading text */
.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.2em; }
.prose h2 { font-size: var(--fs-2xl); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose blockquote { margin: 1.4em 0; padding: var(--s-4) var(--s-5); border-inline-start: 2px solid var(--accent); background: var(--bg-elev); color: var(--fg-strong); }
.prose ul li { margin-bottom: .35em; }

/* carved heading (text looks cut into stone) */
.carved { color: var(--fg-strong); text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.8); }
.lit { color: var(--emerald); text-shadow: 0 0 12px rgba(47,211,154,.6), 0 0 32px rgba(47,211,154,.3); }
:root[data-theme="light"] .lit { color: var(--jade); text-shadow: 0 0 12px rgba(47,211,154,.5); }

/* reveal (staggered) — content starts visible; JS adds .will-reveal only when motion is allowed */
.will-reveal { opacity: 0; transform: translateY(18px); }
.revealed { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.revealed > .stagger { transition-delay: calc(var(--i, 0) * 70ms); }

/* The in-app motion switch (Valhalla) sets data-motion on <html> via core.js.
   Without this block it only gated JS while every CSS animation kept running. */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* time-of-day realm variables (set by JS on <html>) */
/* data-realm still names the hour; the sky/aurora colours it used to carry are gone
   with the generated hero scene — the realm is a painted plate per hour now. */
:root { --realm-name: "شب شفق‌زده"; }