/* Seraphs & Serpents — shared style for the card pages, the card list, How to play and the FAQ (15 Nov 2026).
   Layout: a narrow reading column under the site header; card pages put the card face beside the facts on wide
   screens and above them on phones.  Single dark look (the brand's night ground), every colour set here. */
:root {
  color-scheme: dark;
  --night: #07070F; --vault: #10101E; --panel: #151327; --line: rgba(212, 178, 106, .22);
  --gold: #D4B26A; --gold-hi: #F1D98A; --linen: #F2ECDF; --mute: #AAA4BC; --mist: #CDBBFF; --verd: #5FB3A4; --verd-hi: #9FE8D9;
  --f-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --f-head: 'Cinzel', Georgia, 'Times New Roman', serif;
  --f-body: 'Alegreya', Georgia, 'Times New Roman', serif;
  --f-ui: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box }
html { background: var(--night) }
body { margin: 0; background: var(--night); color: var(--linen); font: 400 18px/1.6 var(--f-body);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  background-image: radial-gradient(90% 40% at 50% 0%, rgba(123, 79, 176, .16), transparent 70%) }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--night) }
img { max-width: 100% }
a { color: var(--gold-hi) }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px }
[hidden] { display: none !important }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #1a1205; padding: 8px 12px; border-radius: 8px; z-index: 50 }
.skip:focus { left: 16px }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(7, 7, 15, .94); border-bottom: 1px solid var(--line) }
.bar { display: flex; align-items: center; gap: 18px; padding-block: 10px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0 }
.brand svg { display: block; max-width: 100%; height: auto }
.brand .wordmark, .brand svg + svg { width: clamp(150px, 22vw, 230px); height: auto }
.nav { display: flex; gap: 20px; margin-left: auto }
.nav a { color: var(--linen); text-decoration: none; font: 700 13px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; opacity: .85 }
.nav a:hover, .nav a[aria-current] { color: var(--gold-hi); opacity: 1 }
@media (max-width: 900px) { .nav { display: none } .bar .btn { margin-left: auto } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 11px 18px; text-decoration: none; white-space: nowrap;
  font: 800 15px/1 var(--f-ui); border: 0; cursor: pointer }
.btn-gold { background: linear-gradient(#f3dc8f, #c99a3d); color: #20160a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 #7a5a1a }
.btn-ghost { background: transparent; color: var(--linen); box-shadow: inset 0 0 0 1px var(--line) }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--gold) }
main { display: block; padding-block: 28px 64px }
.crumbs { font: 700 13px/1.4 var(--f-ui); letter-spacing: .04em; color: var(--mute); margin-bottom: 18px }
.crumbs a { color: var(--mute) } .crumbs a:hover { color: var(--gold-hi) }
.eyebrow { font: 800 12.5px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--mist) }
h1 { margin: 6px 0 4px; font: 700 clamp(32px, 5.4vw, 54px)/1.08 var(--f-display); color: var(--gold-hi); text-wrap: balance }
h2 { margin: 34px 0 10px; font: 800 clamp(20px, 2.4vw, 25px)/1.2 var(--f-head); color: var(--gold-hi); letter-spacing: .02em; text-wrap: balance }
h3 { margin: 22px 0 8px; font: 800 18px/1.25 var(--f-head); color: var(--linen) }
p { margin: 0 0 14px; max-width: 68ch }
.lead { font-size: 20px; line-height: 1.55 }
.mute { color: var(--mute) }
.sel { user-select: all }
.subtitle { font: italic 500 21px/1.4 var(--f-body); color: var(--mist); margin: 0 0 16px }

/* card page */
.cp { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr) }
@media (min-width: 860px) { .cp { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start } .cp-face { position: sticky; top: 92px } }
.cp-face { display: grid; gap: 14px; justify-items: center }
.face { width: min(86vw, 380px); container-type: inline-size; border-radius: 4.6% / 3.3%; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(123, 79, 176, .22) }
.face > .fa { --w: 100cqw }
.cp-body { min-width: 0 }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 18px 0 8px; padding: 16px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; font: 500 16px/1.4 var(--f-ui) }
.facts dt { color: var(--mute); font-weight: 700 } .facts dd { margin: 0 }
.power { background: rgba(212, 178, 106, .08); border-left: 3px solid var(--gold); padding: 12px 16px; border-radius: 0 12px 12px 0; font: 500 18px/1.5 var(--f-ui) }
.power b { color: var(--gold-hi) }
.scripture { font: italic 500 21px/1.5 var(--f-body); color: #fff; border-left: 3px solid var(--mist); padding-left: 16px }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; padding: 0; list-style: none }
.chips li, .chip { font: 800 12.5px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--vault) }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(44%, 150px), 1fr)); gap: 16px; margin: 12px 0 }
.mini { text-decoration: none; color: var(--linen); display: grid; gap: 8px; font: 700 14px/1.25 var(--f-ui) }
.mini .face { width: 100%; box-shadow: 0 10px 26px rgba(0, 0, 0, .5) }
.mini:hover .face { box-shadow: 0 0 0 2px var(--gold-hi), 0 12px 30px rgba(0, 0, 0, .55) }
.pn { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font: 700 15px/1.3 var(--f-ui) }
.pn a { text-decoration: none }
.cta-band { margin: 28px 0; padding: 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(212, 178, 106, .16), rgba(95, 179, 164, .12)); border: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between }
.cta-band p { margin: 0; font: 500 17px/1.45 var(--f-ui) }

/* card list */
.deck-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 30px }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 168px), 1fr)); gap: 18px; margin-top: 12px }

/* how to play + faq */
.prose { max-width: 760px }
.prose ol, .prose ul { padding-left: 22px; margin: 0 0 16px } .prose li { margin-bottom: 8px }
.prose .note { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; font: 500 16.5px/1.5 var(--f-ui) }
.prose dl { display: grid; gap: 8px; margin: 0 0 16px } .prose dt { font-weight: 700; color: var(--gold-hi); font-family: var(--f-ui) } .prose dd { margin: 0 0 6px }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; padding: 0; list-style: none }
.toc a { display: inline-block; text-decoration: none; font: 700 13.5px/1 var(--f-ui); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--linen) }
.toc a:hover { border-color: var(--gold) }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0 }
.faq summary { cursor: pointer; font: 800 18px/1.35 var(--f-head); color: var(--linen); list-style-position: outside }
.faq details p { margin-top: 10px }
.answer-first { font-size: 20px }

.ft { border-top: 1px solid var(--line); padding-block: 34px 44px; background: #05050b }
.ft .wrap { display: grid; gap: 12px; justify-items: start }
.ft small { display: block; color: var(--mute); font: 500 12.5px/1.5 var(--f-ui); max-width: 90ch }
.ft-links { font: 700 14px/1.5 var(--f-ui) } .ft-links a { text-decoration: none }
.sdg { font: italic 500 15px/1 var(--f-body); color: var(--gold) }
.fa-xdense .fa-power { font-size: calc(var(--u) * 2.3); line-height: 1.16 }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* register interest */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0 }
.tabs [role=tab] { font: 800 15px/1.2 var(--f-ui); padding: 12px 16px; border-radius: 12px 12px 0 0; border: 1px solid var(--line); border-bottom: 0;
  background: var(--vault); color: var(--mute); cursor: pointer }
.tabs [role=tab][aria-selected=true] { background: var(--panel); color: var(--gold-hi) }
.form { display: grid; gap: 14px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 0 16px 16px 16px; margin-bottom: 18px }
.row2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) }
.field { display: grid; gap: 6px; min-width: 0 }
.field label { font: 700 15px/1.3 var(--f-ui); color: var(--linen) } .field .opt { color: var(--mute); font-weight: 500 }
.field small { font: 500 13.5px/1.4 var(--f-ui); color: var(--mute) }
.field input, .field select, .field textarea { width: 100%; font: 500 16px/1.4 var(--f-ui); color: var(--linen); background: #0b0a17; border: 1px solid rgba(205, 187, 255, .28);
  border-radius: 10px; padding: 11px 12px }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold-hi); outline-offset: 1px; border-color: transparent }
.check { display: flex; gap: 10px; align-items: flex-start; font: 500 15.5px/1.45 var(--f-ui) } .check input { margin-top: 4px; width: 18px; height: 18px; accent-color: #d4b26a }
.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center } .status { margin: 0; font: 600 15.5px/1.4 var(--f-ui) }
.status.ok { color: #9ee6b2 } .status.err { color: #ffb4a8 }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.small-print { font: 500 14px/1.5 var(--f-ui) }

/* anchors land below the sticky header */
[id] { scroll-margin-top: 88px }