/* Ascent theme: light = "Paper & Pixel", dark = "Night Desk". */
:root {
  --bg: #f6f4ef;
  --surface: #fffdf9;
  --ink: #1b1b1a;
  --mute: #6f6d68;
  --line: #e4e0d6;
  --btn-bg: #1b1b1a;
  --btn-ink: #ffffff;
  --gold: #e8a33a;
  --tint-1: #eef1fb;
  --tint-2: #f4eee2;
  --tint-3: #edf4ec;

  --m-line: #1b1b1a;
  --m-body: #f3eee3;
  --m-shade: #ddd5c3;
  --m-screen: #1f2433;
  --m-leg: #2c2c31;
  --m-night: #4a4a52;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #121212;
  --surface: #1a1a1a;
  --ink: #ececea;
  --mute: #9a9894;
  --line: #2a2a2a;
  --btn-bg: #f3f1ec;
  --btn-ink: #121212;
  --tint-1: #181c26;
  --tint-2: #1f1b15;
  --tint-3: #161d17;

  --m-leg: #55555d;
  --m-shade: #b9b1a0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
h1, h2, h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.012em; margin: 0; line-height: 1.05; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.logo-svg, .mascot-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Mascot life: idle bob, blinking eyes, waving arm, twinkling diamond. */
.mascot-svg .m-body { animation: m-bob 3.2s ease-in-out infinite; }
.mascot-svg .m-eyes { animation: m-blink 5s infinite; transform-box: fill-box; transform-origin: center; }
.mascot-svg .m-wave { animation: m-wave 2.4s ease-in-out infinite; transform-box: view-box; transform-origin: 154px 140px; }
.mascot-svg .m-star { animation: m-twinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mascot-svg .m-float { animation: m-bob 1.6s ease-in-out infinite reverse; }
.mascot-svg .m-steam { animation: m-steam 2.4s ease-in-out infinite; }
@keyframes m-bob { 50% { transform: translateY(-4px); } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes m-wave { 0%, 60%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(-14deg); } 30% { transform: rotate(8deg); } }
@keyframes m-twinkle { 50% { transform: translateY(-3px) scale(1.06); } }
@keyframes m-steam { 50% { opacity: .15; transform: translateY(-3px); } }

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