/* Hauntface — landing page. Dark by design; effects are progressive enhancement. */
:root {
  --bg: #050304;
  --bg2: #0b0607;
  --stone: #17110f;
  --bone: #ebe2d2;
  --ash: #bdb1a0;
  --dim: #8f8373;
  --ember: #ff4a12;
  --gold: #ffc23a;
  --blood: #6e0a0a;
  --blood2: #a3140f;
  --line: rgba(235, 226, 210, .12);
  --f-display: "Pirata One", "UnifrakturMaguntia", Georgia, serif;
  --f-caps: "Cinzel", Georgia, serif;
  --f-body: "Spectral", Georgia, "Times New Roman", serif;
  --f-mono: "Courier Prime", "Courier New", monospace;
  --nav-h: 60px;
  --lx: 50%;
  --ly: 30%;
  --lr: 280px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ash);
  font: 400 1.0625rem/1.65 var(--f-body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #ffd979; }
h1, h2, h3, h4 { color: var(--bone); margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--bone); color: var(--bg); padding: 8px 14px; }
.skip:focus { top: 10px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 780px; }
[hidden] { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .6em 1.3em;
  font: 700 .82rem/1.2 var(--f-caps); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background .2s, box-shadow .2s, color .2s, border-color .2s;
}
.btn-ember {
  color: #1a0500; background: linear-gradient(180deg, var(--gold), var(--ember) 70%);
  box-shadow: 0 0 0 1px rgba(255, 120, 40, .4), 0 0 24px rgba(255, 74, 18, .35);
}
.btn-ember:hover { color: #000; box-shadow: 0 0 0 1px rgba(255, 190, 80, .7), 0 0 38px rgba(255, 74, 18, .6); }
.btn-ghost { color: var(--bone); border-color: rgba(235, 226, 210, .35); background: rgba(5, 3, 4, .5); }
.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }
.btn-lg { min-height: 52px; padding: .8em 1.6em; font-size: .9rem; }
.btn-sm { min-height: 36px; padding: .45em .9em; font-size: .72rem; }
.linklike { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(5, 3, 4, .92), rgba(5, 3, 4, .7));
  border-bottom: 1px solid rgba(255, 74, 18, .12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.wordmark {
  font: 400 1.6rem/1 var(--f-display); letter-spacing: .08em; color: var(--bone); text-decoration: none;
  text-shadow: 0 0 18px rgba(255, 74, 18, .35);
}
.wordmark:hover { color: var(--gold); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--ash); text-decoration: none; font: 500 .78rem/1 var(--f-caps); letter-spacing: .14em; text-transform: uppercase; }
.nav-links a:hover { color: var(--gold); }
.nav-tools { display: flex; align-items: center; gap: 8px; }
.tool {
  height: 36px; min-width: 36px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: transparent; color: var(--ash); border: 1px solid var(--line); border-radius: 2px; cursor: pointer; font: 700 .72rem/1 var(--f-mono);
}
.tool:hover { color: var(--gold); border-color: rgba(255, 194, 58, .5); }
.tool svg { width: 20px; height: 20px; }
.tool[aria-pressed="true"] { color: var(--gold); border-color: rgba(255, 194, 58, .6); box-shadow: 0 0 12px rgba(255, 74, 18, .3) inset; }
.lang i { font-style: normal; opacity: .4; }
.lang span { opacity: .55; }
.lang span.on { opacity: 1; color: var(--gold); }
#soundBtn .waves { display: none; }
#soundBtn[aria-pressed="true"] .waves { display: inline; }
#soundBtn[aria-pressed="true"] .mute { display: none; }
#calmBtn .calm-on { opacity: 0; }
#calmBtn[aria-pressed="true"] .calm-on { opacity: 1; }

/* ---------- Atmosphere overlays ---------- */
.fx-grain, .fx-scan, .fx-torch, .fx-flicker, .fx-flash, .fx-cracks, .fx-skull { position: fixed; inset: 0; pointer-events: none; }
.fx-grain {
  z-index: 90; inset: -50%; opacity: .07;
  background-image: var(--noise, none);
  animation: grain .6s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); }
}
.fx-scan {
  z-index: 89; opacity: .5;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .28) 2px 3px);
}
.fx-scan::after { /* slow VHS tracking band */
  content: ""; position: absolute; left: 0; right: 0; height: 90px; top: -120px;
  background: linear-gradient(180deg, transparent, rgba(235, 226, 210, .035) 40%, rgba(235, 226, 210, .06) 50%, transparent);
  animation: track 11s linear infinite;
}
@keyframes track { to { transform: translateY(calc(100vh + 240px)); } }
.fx-torch { z-index: 40; display: none; background: radial-gradient(circle 520px at var(--px, 50%) var(--py, 50%), transparent 0, transparent 30%, rgba(0, 0, 0, .28) 100%); }
.torch-on .fx-torch { display: block; }
.fx-flicker { z-index: 88; background: #000; opacity: 0; }
.fx-flicker.on { opacity: .55; }
.fx-flash { z-index: 87; background: radial-gradient(circle at 50% 40%, rgba(163, 20, 15, .55), rgba(40, 0, 0, .75)); opacity: 0; transition: opacity .5s; }
.fx-flash.on { opacity: 1; transition: none; }
.fx-cracks { z-index: 86; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease-in; }
.fx-cracks.on { opacity: 1; transition: none; }
.fx-cracks path { fill: none; stroke: rgba(235, 226, 210, .75); stroke-width: 1.2; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .4)); }
.fx-skull { z-index: 91; display: none; place-items: center; background: rgba(0, 0, 0, .35); }
.fx-skull svg { width: min(70vw, 70vh); opacity: .2; filter: blur(1px) contrast(1.4); }
.fx-skull.on { display: grid; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h));
  padding: clamp(190px, 30vh, 280px) 0 120px;
  display: flex; align-items: flex-end;
  background: radial-gradient(ellipse at 50% 18%, #1a0c08 0, var(--bg) 55%);
}
.hero-marks { position: absolute; inset: 0; z-index: 1; }
.mark {
  position: absolute; font: 400 clamp(1.4rem, 4vw, 3.2rem)/1 var(--f-display); color: rgba(150, 120, 105, .55);
  letter-spacing: .2em; transform: rotate(-6deg); white-space: nowrap;
  text-shadow: 1px 1px 0 #000, -1px 0 0 rgba(255, 255, 255, .05);
}
.m1 { left: 6%; top: 16%; }
.m2 { right: 6%; top: 58%; transform: rotate(4deg); color: rgba(130, 30, 25, .65); }
.m3 { left: 8%; bottom: 14%; transform: rotate(3deg); font-size: clamp(1rem, 2.4vw, 1.8rem); }
.m4 { right: 10%; top: 12%; font-family: var(--f-mono); letter-spacing: .1em; transform: rotate(-2deg); font-size: clamp(1rem, 2vw, 1.6rem); }
.hand { position: absolute; width: clamp(80px, 11vw, 140px); right: 22%; bottom: 20%; transform: rotate(-18deg); opacity: .75; }

/* The darkness: a light hole that follows the cursor (JS moves --lx/--ly). */
.hero-dark {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(circle var(--lr) at var(--lx) var(--ly),
    rgba(255, 150, 70, .06) 0, rgba(5, 3, 4, .55) 45%, rgba(5, 3, 4, .96) 100%);
}
.hero-canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }
.eyes-hit {
  display: none; position: absolute; z-index: 6; left: 50%; top: clamp(110px, 17vh, 170px);
  width: clamp(200px, 26vw, 360px); height: clamp(70px, 8vw, 110px); transform: translate(-50%, -50%);
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.js .eyes-hit { display: block; }
.hero-inner { position: relative; z-index: 5; text-align: center; }
.eyebrow { font: 400 .8rem/1.4 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2em; }
.hero h1 {
  font: 400 clamp(2.6rem, 8.4vw, 6.4rem)/.98 var(--f-display); letter-spacing: .01em;
  color: var(--bone); text-shadow: 0 0 40px rgba(255, 74, 18, .25), 0 2px 0 #000;
  max-width: 14ch; margin: 0 auto .25em;
}
.typed { font: italic 400 clamp(1.1rem, 2.4vw, 1.45rem)/1.4 var(--f-body); color: #d6a37a; min-height: 1.5em; margin-bottom: 1em; }
.caret { display: none; width: .5em; height: 1.05em; vertical-align: -.15em; margin-left: 2px; border-bottom: 2px solid var(--ember); animation: caret 1.1s steps(1) infinite; }
.typing .caret { display: inline-block; }
@keyframes caret { 50% { opacity: 0; } }
.lede { max-width: 38em; margin: 0 auto 1.8em; color: var(--bone); font-size: clamp(1.05rem, 1.8vw, 1.2rem); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-note { margin: 1.2em 0 0; color: var(--dim); font: 400 .82rem/1.5 var(--f-mono); }
.dare {
  margin-top: 1.6em; background: none; border: 0; padding: 6px 4px; cursor: pointer;
  color: #c98f6a; font: italic 400 1rem/1.3 var(--f-body); border-bottom: 1px dashed rgba(255, 74, 18, .45);
}
.dare:hover { color: var(--gold); }
.dare .dare-on, .dare[aria-pressed="true"] .dare-off { display: none; }
.dare[aria-pressed="true"] .dare-on { display: inline; }
.osd {
  position: absolute; z-index: 5; left: 16px; right: 16px; top: 14px; display: flex; gap: 18px; justify-content: space-between;
  font: 400 .78rem/1 var(--f-mono); color: rgba(235, 226, 210, .6); letter-spacing: .12em; text-shadow: 0 0 6px rgba(255, 255, 255, .25);
}
.osd .rec { color: #e0473a; animation: caret 2s steps(1) infinite; }
.osd #clock { margin-left: auto; }

/* Headline glitch (JS adds .glitching briefly) */
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.glitch.glitching::before { opacity: .8; color: var(--ember); transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); }
.glitch.glitching::after { opacity: .8; color: #67d5c9; transform: translate(3px, -1px); clip-path: inset(60% 0 8% 0); mix-blend-mode: screen; }
.glitch.glitching { animation: jit .32s steps(3) 1; }
@keyframes jit { 0% { transform: translateX(0); } 33% { transform: translateX(-4px) skewX(4deg); } 66% { transform: translateX(3px); } 100% { transform: none; } }

.hero.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97) 1; }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(5px, -3px); }
  30%, 50%, 70% { transform: translate(-9px, 4px) scale(1.01); } 40%, 60% { transform: translate(9px, -2px); }
}

/* Fog */
.fog { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; overflow: hidden; }
.fog i {
  position: absolute; bottom: -30%; left: -50%; width: 200%; height: 130%; opacity: .55;
  background:
    radial-gradient(ellipse 22% 38% at 20% 70%, rgba(170, 160, 150, .16), transparent 70%),
    radial-gradient(ellipse 26% 32% at 48% 80%, rgba(170, 160, 150, .13), transparent 70%),
    radial-gradient(ellipse 20% 40% at 75% 72%, rgba(170, 160, 150, .15), transparent 70%),
    radial-gradient(ellipse 30% 30% at 95% 85%, rgba(170, 160, 150, .12), transparent 70%);
  animation: fog 46s linear infinite alternate;
}
.fog i + i { animation-duration: 70s; animation-direction: alternate-reverse; opacity: .4; bottom: -40%; }
@keyframes fog { from { transform: translateX(0); } to { transform: translateX(25%); } }
.fog::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, transparent, var(--bg)); }

/* ---------- Found footage / CRT ---------- */
.tape { position: relative; padding: 40px 0 90px; }
.tape-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.crt { margin: 0; }
.crt-glass {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 18px / 22px; background: #080506;
  border: 14px solid #15100e; outline: 1px solid #2a201c;
  box-shadow: 0 0 0 2px #000, 0 30px 80px rgba(0, 0, 0, .8), 0 0 60px rgba(255, 74, 18, .12), inset 0 0 50px rgba(0, 0, 0, .9);
}
.crt-glass img, .crt-glass video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) saturate(1.1); }
.crt-glass::after { /* curvature, vignette, scanlines */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .65) 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
}
.nosignal {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(255, 74, 18, .14), transparent 60%), linear-gradient(rgba(8, 5, 6, .78), rgba(8, 5, 6, .78)), var(--noise, #0c0809);
  background-size: auto, auto, 180px;
}
.nosignal span { font: 400 clamp(1rem, 2.5vw, 1.5rem)/1 var(--f-mono); letter-spacing: .3em; color: rgba(235, 226, 210, .55); background: rgba(0, 0, 0, .6); padding: .5em .9em; }
.crt figcaption { margin-top: 14px; font: 400 .78rem/1.4 var(--f-mono); color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.manifesto { font: 400 clamp(1.9rem, 4vw, 3rem)/1.1 var(--f-display); margin-bottom: .6em; }
.manifesto em { font-style: normal; color: var(--ember); text-shadow: 0 0 24px rgba(255, 74, 18, .45); }
.w { color: var(--bone); border-bottom: 1px dotted rgba(255, 74, 18, .6); cursor: default; transition: text-shadow .3s; }
.w:hover { text-shadow: 0 0 10px rgba(255, 74, 18, .8); }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(70px, 10vw, 120px) 0; }
.section + .section::before { /* thin ragged divider */
  content: ""; position: absolute; top: 0; left: 50%; width: min(560px, 80%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(163, 20, 15, .6), rgba(255, 74, 18, .3), transparent);
}
.kicker { font: 400 .8rem/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ember); margin-bottom: .6em; }
.h2 { font: 400 clamp(2.4rem, 6vw, 4.2rem)/1 var(--f-display); margin-bottom: .5em; text-shadow: 0 0 30px rgba(255, 74, 18, .18); }
.section-lede { max-width: 40em; margin-bottom: 2.2em; }
.grid { display: grid; gap: 16px; }
h3 { font: 700 1.05rem/1.3 var(--f-caps); letter-spacing: .05em; margin-bottom: .55em; }

.card {
  position: relative; padding: 24px 22px 20px; background: linear-gradient(160deg, #110a0a, #080506);
  border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
}
.card::after { /* hairline cracks in the corner */
  content: ""; position: absolute; right: -10px; top: -10px; width: 120px; height: 120px; opacity: .22; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23ebe2d2' stroke-width='.8'%3E%3Cpath d='M120 8 92 30l-14-4-20 22-16 2-12 18M92 30l6 22-10 14M78 26 70 8M58 48l4 18'/%3E%3C/svg%3E") no-repeat;
}
.card p { margin: 0; font-size: 1rem; }
.feats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* Monsters */
.monsters { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.monster { background: #0a0607; border: 1px solid var(--line); }
.portrait { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #070405; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait::before, .portrait::after { /* fallback "eyes" when screenshots are missing */
  content: ""; position: absolute; top: 44%; width: 12%; height: 7%; border-radius: 50%;
}
.p-reaper { background: radial-gradient(ellipse 40% 55% at 50% 52%, #1d1512, #070405 70%); }
.p-reaper::before, .p-reaper::after { background: radial-gradient(circle, var(--gold), var(--ember) 45%, transparent 72%); box-shadow: 0 0 30px 6px rgba(255, 74, 18, .45); }
.p-witch { background: radial-gradient(ellipse 36% 52% at 50% 55%, #142012, #070405 70%); }
.p-witch::before, .p-witch::after { height: 6%; background: radial-gradient(ellipse 12% 60%, #000 40%, #c8e04a 50%, #4f7a14 75%, transparent 78%); box-shadow: 0 0 22px 2px rgba(180, 220, 60, .3); }
.portrait::before { left: 34%; } .portrait::after { right: 34%; }
.portrait img { z-index: 1; }
.monster-body { padding: 22px 22px 24px; }
.monster h3 { font: 400 2.1rem/1 var(--f-display); letter-spacing: .02em; }
.monster h3 small { display: block; font: 500 .75rem/1.6 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); margin-top: .4em; }
blockquote { margin: 1em 0 0; padding-left: 14px; border-left: 2px solid var(--blood2); font-style: italic; color: #d9b597; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.step { position: relative; padding: 26px 22px; border-top: 1px solid rgba(255, 74, 18, .4); background: linear-gradient(180deg, rgba(255, 74, 18, .05), transparent 60%); }
.step .num { display: block; font: 400 3rem/1 var(--f-display); color: var(--ember); margin-bottom: .2em; text-shadow: 0 0 18px rgba(255, 74, 18, .5); }
.step p { margin: 0; }

/* Scares */
.scares { list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.scare { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); background: #090506; }
.scare h3 { margin-bottom: .2em; font-size: .95rem; }
.scare p { margin: 0; font-size: .95rem; color: var(--ash); }
kbd {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  font: 700 1.2rem/1 var(--f-mono); color: var(--gold);
  background: linear-gradient(180deg, #1c1310, #0d0807); border: 1px solid #3a2a22; border-bottom-width: 3px; border-radius: 4px;
  box-shadow: 0 0 14px rgba(255, 74, 18, .15);
}
.scare:hover kbd { color: #fff2d0; box-shadow: 0 0 20px rgba(255, 74, 18, .5); }

/* Roadmap */
.roadmap { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.soon { border-style: dashed; background: transparent; }
.tag { display: inline-block; margin-bottom: 12px; padding: 2px 8px; font: 400 .72rem/1.5 var(--f-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--bg); background: var(--ash); }

/* Download — tombstones */
.download { overflow: hidden; background: radial-gradient(ellipse at 50% 100%, rgba(110, 10, 10, .18), transparent 60%); }
.stones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: end; }
.stone {
  position: relative; text-align: center; padding: 56px 22px 30px; min-height: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border-radius: 140px 140px 6px 6px / 110px 110px 6px 6px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .05), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0, 0, 0, .4), transparent 40%),
    linear-gradient(180deg, #2a2320, #171210 70%, #0e0a09);
  border: 1px solid #3a302b; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), inset 0 -20px 40px rgba(0, 0, 0, .5), 0 24px 40px rgba(0, 0, 0, .7);
}
.stone::after { /* soil */
  content: ""; position: absolute; left: -6%; right: -6%; bottom: -14px; height: 28px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #1a100c, transparent 70%);
}
.stone h3 { font: 700 1.6rem/1.1 var(--f-caps); letter-spacing: .14em; text-transform: uppercase; color: #cfc3b1; text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(255, 255, 255, .12); }
.stone-meta { margin: 0 0 8px; font: 400 .85rem/1.4 var(--f-mono); color: var(--ash); }
.stone-note { margin: 4px 0 0; font-size: .92rem; }
.rip { margin: auto 0 0; font: 700 .9rem/1 var(--f-caps); letter-spacing: .4em; color: #6e625a; text-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.yours {
  display: none; position: absolute; top: 22px; font: 400 .7rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 0 10px rgba(255, 74, 18, .8);
}
.stone.is-yours { border-color: rgba(255, 74, 18, .55); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 74, 18, .25), 0 0 50px rgba(255, 74, 18, .22), 0 24px 40px rgba(0, 0, 0, .7); }
.stone.is-yours .yours { display: block; }
.dl-extra { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 44px 0 26px; }
.unsigned { max-width: 780px; margin: 0 auto; border: 1px solid var(--line); background: #090506; }
.unsigned summary, .faq summary { cursor: pointer; padding: 16px 20px; color: var(--bone); font-weight: 600; list-style: none; position: relative; padding-right: 44px; }
.unsigned summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.unsigned summary::after, .faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 400 1.4rem/1 var(--f-mono); color: var(--ember); }
details[open] > summary::after { content: "−"; }
.unsigned-body { padding: 0 20px 18px; }
.unsigned h4 { font: 700 .85rem/1.4 var(--f-caps); letter-spacing: .12em; text-transform: uppercase; margin: 1.2em 0 .4em; color: var(--gold); }
pre { margin: 0 0 1em; padding: 12px 14px; overflow-x: auto; background: #000; border: 1px solid #2a201c; color: #e7d9c3; font: 400 .85rem/1.5 var(--f-mono); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { font: 400 1.25rem/1.3 var(--f-body); font-style: italic; padding-left: 0; }
.faq summary:hover { color: var(--gold); }
.faq details p { padding: 0 0 18px; margin: 0; }

/* Footer */
.footer { position: relative; overflow: hidden; padding: 90px 0 50px; border-top: 1px solid rgba(255, 74, 18, .12); background: linear-gradient(180deg, var(--bg), #0b0505); }
.fog-foot { top: 0; height: 100%; z-index: 0; opacity: .7; }
.footer-inner { position: relative; z-index: 1; text-align: center; }
.foot-mark { font-size: 2.4rem; margin-bottom: .3em; }
.foot-line { font-style: italic; color: var(--bone); }
.souls { font: 400 .85rem/1.4 var(--f-mono); color: var(--dim); letter-spacing: .08em; }
.souls b { color: var(--ember); }
.foot-links { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; font-size: .95rem; }

/* ---------- Scroll reveal: ink bleed (only when JS is on & motion allowed) ---------- */
@property --ink { syntax: "<percentage>"; inherits: false; initial-value: 150%; }
.js .reveal {
  --ink: 0%;
  opacity: 0; filter: blur(6px); transform: translateY(14px);
  -webkit-mask-image: radial-gradient(circle at 35% 30%, #000 var(--ink), transparent calc(var(--ink) + 25%));
  mask-image: radial-gradient(circle at 35% 30%, #000 var(--ink), transparent calc(var(--ink) + 25%));
  transition: opacity .9s ease, filter 1.1s ease, transform 1s ease, --ink 1.4s cubic-bezier(.3, .6, .2, 1);
}
.js .reveal.in { --ink: 150%; opacity: 1; filter: none; transform: none; }

/* ---------- Calm mode / reduced motion ---------- */
.calm .fx-flicker, .calm .fx-flash, .calm .fx-skull, .calm .fx-cracks { display: none !important; }
.calm .fx-grain { animation: none; }
.calm .fx-scan::after, .calm .glitch.glitching, .calm .hero.shake { animation: none; }
.calm .glitch::before, .calm .glitch::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx-grain, .fx-scan::after, .fog i, .caret, .osd .rec { animation: none !important; }
  .js .reveal { opacity: 1; filter: none; transform: none; -webkit-mask-image: none; mask-image: none; transition: none; }
  .fx-flicker, .fx-flash, .fx-skull, .fx-cracks { display: none !important; }
  .glitch::before, .glitch::after { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-tools { margin-left: auto; }
  .tape-grid, .monsters { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stones { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 34px; }
  .stone { min-height: 0; }
}
@media (max-width: 480px) {
  :root { --nav-h: 56px; }
  .nav { gap: 8px; }
  .wordmark { font-size: 1.3rem; }
  .nav .btn-sm { padding: .45em .6em; letter-spacing: .06em; }
  .hero { padding-top: 170px; padding-bottom: 90px; }
  .eyes-hit { top: 112px; }
  .osd { font-size: .66rem; gap: 10px; }
  .osd span:nth-child(2) { display: none; }
  .btn-lg { width: 100%; }
  .mark { font-size: 1.2rem; }
  .m2 { right: 4%; }
  .hand { right: 6%; bottom: 8%; }
  .card { padding: 20px 18px; }
}
@media (max-width: 360px) {
  .nav .btn-sm { display: none; }
}