/* ── BASE / RESET ─────────────────────────────────────────── */

:root {
  --bg-wall: #1a1a1e;
  --bg-wall-light: #252529;
  --cork: #b8935a;
  --cork-dark: #9a7844;
  --cork-light: #d4ad6a;
  --frame: #4a3520;
  --frame-light: #6b4f35;
  --frame-dark: #2e1f12;
  --string: #a21212;
  --string-glow: rgba(200, 30, 30, 0.6);
  --text: #ece7d8;
  --muted: #d3cbb5;
  --paper: #d5c5a3;
  --paper-dark: #c4b08a;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-heavy: 0 16px 40px rgba(0, 0, 0, 0.6);
  --pin-red: #c32f2f;
  --pin-shadow: rgba(0, 0, 0, 0.5);
  --font-hand: 'Caveat', 'Covered By Your Grace', cursive;
  --font-case: 'Special Elite', serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg-wall);
  -webkit-font-smoothing: antialiased;
}

a { color: #87cbff; text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }

.scene {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ── FONTS ────────────────────────────────────────────────── */

.handwritten {
  font-family: var(--font-hand);
  font-weight: 600;
}

.small { font-size: 0.82rem; }