/* Warlocked — a warlock's sealed lock shop by candle and witchfire: blue-black ink, cobalt witchfire for
   the call to action, brimstone sulphur for the keyhole light and accents, tarnished silver type.
   New Rocker (flared dark-fantasy capitals) for display, Alegreya Sans for reading.
   Tokens plus a few one-page pieces; structure is ../_engine/base.css. */
:root {
  --bg: #08090f;
  --bg-rgb: 8, 9, 15;
  --bg-2: #0d0f1a;
  --panel: #121526;
  --panel-2: #1a1e36;
  --footer-bg: #05060a;
  --line: rgba(150, 175, 255, 0.14);
  --text: #e4e8f2;
  --muted: #aab2c8;
  --dim: #7a839c;
  --red: #3f5fe0;
  --red-deep: #2d47b6;
  --ochre: #e3c75a;
  --ochre-soft: #f0dc8e;
  --gum: #a9c4ff;
  --display: "New Rocker", "Iowan Old Style", Georgia, serif;
  --body: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 6px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}
body { font-size: 18px; }
h1, h2, h3, h4 { letter-spacing: 0.02em; line-height: 1.1; font-weight: 400; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); color: #eef1fa; text-shadow: 0 0 28px rgba(79, 125, 255, 0.35); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }
.btn { font: 700 0.95rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 24px 14px; box-shadow: 0 0 0 1px rgba(169, 196, 255, 0.25) inset, 0 10px 34px -12px rgba(79, 125, 255, 0.8); }
.btn.sm { font-size: 0.82rem; padding: 11px 16px 10px; }
.btn.ghost { border-color: rgba(169, 196, 255, 0.45); box-shadow: none; }
.soon-badge { border-color: var(--ochre); color: var(--ochre); }

/* hero: the door sits right; keep the left readable (full-width wrap so the copy sits left, not centred) */
.hero-poster .wrap { width: 100%; }
.hero h1 { font-size: clamp(1.25rem, 2.4vw, 1.8rem); letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.hero .strap { color: var(--gum); }
.hero-poster .hero-logo { filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.7)); }
@media (max-width: 760px) {
  .hero-poster .hero-media img { object-position: 72% 50%; }
  .hero-poster::after { background: linear-gradient(180deg, rgba(var(--bg-rgb), .35) 0%, rgba(var(--bg-rgb), .6) 45%, rgba(var(--bg-rgb), .94) 75%, var(--bg) 100%); }
}

/* story */
.story p:first-child::first-letter { color: var(--ochre); text-shadow: 0 0 18px rgba(227, 199, 90, 0.45); }
blockquote.pull { border-left-color: var(--ochre); margin-top: 26px; }
#story .split { align-items: start; }
@media (min-width: 861px) { #story .frame { position: sticky; top: 100px; } }
.frame { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(79, 125, 255, 0.35); }

/* concept cards: art on top, words below */
.card { background: linear-gradient(180deg, var(--panel), var(--bg-2)); }
.card-media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--line); }
.card-media > div { padding: 20px 22px 24px; }
.card h3 { color: #eef1fa; }
a.card:hover { border-color: rgba(169, 196, 255, 0.4); }

/* what we know */
#what-we-know .factsheet { margin-top: 16px; }
.ticks li::before { background: var(--ochre); box-shadow: 0 0 8px rgba(227, 199, 90, 0.6); }

/* FAQ on the home page */
.qa-section { border-top: 1px solid var(--line); }
.qa-section .toc { margin: 22px 0 10px; }
.qa-group-h { font: 400 clamp(1.4rem, 2.4vw, 1.8rem)/1.1 var(--display); color: var(--ochre-soft); margin: 0 0 4px; }
.qa-group { scroll-margin-top: 90px; }
#story, #what-we-know, #faq { scroll-margin-top: 70px; }

.site-footer .production img { opacity: 0.85; }