:root {
  --bg: #0f0d0b; --bg-2: #171310; --card: #1c1814; --field: #241f19; --ink: #f6f0e7; --muted: #b7ab9b;
  --line: #2f2820; --line-strong: #4c4134; --accent: #f0c67e; --accent-bright: #f6d18f; --accent-text: #f0c67e; --accent-ink: #1a1208;
  --accent-soft: rgba(240,198,126,.13); --glow: rgba(240,198,126,.28); --star: #f0c67e;
  --head-bg: rgba(15,13,11,.9); --head-solid: #1c1814; --radius: 20px;
  --head-font: 'Archivo', system-ui, sans-serif; --body-font: 'Inter', system-ui, sans-serif;
  --story-height: 560svh; --ba-ratio: 4 / 3; --ba-pos: 50% 45%;
}
@supports not (height: 1svh) { :root { --story-height: 560vh; } }
.deck { background: #120f0c; }
.roof-storm { box-shadow: inset 0 0 0 1px #000; }
.storm-card { display: grid; gap: 26px; overflow: hidden; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius); background: linear-gradient(120deg, #2a2118, #17130f); border: 1px solid var(--line-strong); }
@media (min-width: 820px) { .storm-card { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.storm-card h2 { font-size: clamp(32px, 5vw, 50px); font-weight: 800; }
.storm-card ol { margin: 0; padding-left: 22px; font-weight: 600; }
.storm-card li { margin-top: 8px; }