@import url("base.css");
/* VINTERHUS — ice, fjord, ember */
:root {
  --bg: #edf0f2; --bg-hi: #f7f9fa; --bg-lo: #d9e1e6; --bg-soft: #e2e8ec;
  --ink: #22313b; --text: #46555f; --accent: #d08a3e; --ink-on-accent: #fff;
  --halo: #edf0f2; --scrim: #e6ebee;
  --footer-bg: #16222b; --footer-ink: #e8eef2;
  --font-display: "Marcellus", Georgia, serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --display-weight: 400;
  --wordmark-size: 12.5vw; --wordmark-track: 0.14em;
  --grain-opacity: 0.035;
}
.stat b { color: var(--accent); }

/* QA finding: interior holds (acts 1-3) are DARK footage while the page is light.
   Side-act copy flips to ice-white with a fjord-dark halo so it reads on both. */
.act-side .act-title { color: #f2f6f8; }
.act-side .act-body { color: #e2eaef; }
.act-side .act-label { color: #f2f6f8; border-bottom-color: color-mix(in srgb, var(--accent) 85%, transparent); }
.act-side .act-title, .act-side .act-body, .act-side .act-label {
  text-shadow: 0 0 26px rgba(14, 24, 32, 0.92), 0 0 10px rgba(14, 24, 32, 0.78), 0 1px 3px rgba(14, 24, 32, 0.65);
}
.act-side .btn-ghost { color: #f2f6f8; border-color: rgba(242, 246, 248, 0.55); }
.act-side .btn-ghost:hover { background: #f2f6f8; color: var(--ink); }

/* Desktop top scrim so the nav survives dark interior ceilings */
@media (min-width: 901px) {
  #stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14vh;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--scrim) 72%, transparent) 0%, transparent 100%);
    pointer-events: none; z-index: 4; }
}