/* ---------- Studio chrome: identical on every Spread Media Studios site ---------- */
.topbar {
  position: relative; z-index: 20;
  height: 38px;
  padding: env(safe-area-inset-top, 0px) clamp(16px, 3.6vw, 48px) 0;
  background: #000; color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.topbar nav { height: 100%; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.topbar a { display: flex; align-items: center; height: 100%; text-decoration: none; color: #fff; }
.topbar .logo-svg { display: block; height: 17px; width: auto; color: #fff; }
.topbar .tb-text { font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.topbar a:hover { opacity: .75; }

.studio-foot { margin-top: auto; }
.studio-foot .legal {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px;
  padding: 10px clamp(16px, 3.6vw, 48px);
  font: 11px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--foot-ink, #000); background: var(--foot-bg, transparent);
}
.studio-foot .legal p { margin: 0; }
.studio-foot .legal nav { display: flex; gap: 14px; flex-wrap: wrap; }
.studio-foot .legal a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.studio-foot .bars { display: grid; grid-template-columns: repeat(8, 1fr); height: clamp(26px, 6vh, 48px); margin: 0; padding: 0; list-style: none; }
.studio-foot .bars li:nth-child(1) { background: #0b0b0b; } .studio-foot .bars li:nth-child(2) { background: #0000ff; }
.studio-foot .bars li:nth-child(3) { background: #00ffff; } .studio-foot .bars li:nth-child(4) { background: #00ff00; }
.studio-foot .bars li:nth-child(5) { background: #ff00ff; } .studio-foot .bars li:nth-child(6) { background: #ff0000; }
.studio-foot .bars li:nth-child(7) { background: #ffffff; } .studio-foot .bars li:nth-child(8) { background: #ffe100; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: #000; color: #fff; padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Vampiradelphia: a cathedral at night. Near-black stone, the red and blue of the stained glass,
   tarnished silver from the title. Cinzel (Roman inscription capitals, for 1959 Rome and the Vatican)
   for headings, EB Garamond for the story. The portrait of Evangeline stays pinned while the story
   scrolls beside it; everything else runs full-width below. */

@font-face { font-family: "Inscription"; src: url("../fonts/cinzel.woff") format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Psalter"; src: url("../fonts/ebgaramond.woff") format("woff"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Psalter"; src: url("../fonts/ebgaramond-Italic.woff") format("woff"); font-weight: 400 600; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --stone: #070506;
  --stone-2: #0e0a0b;
  --silver: #d6d1c8;
  --dim: rgba(214, 209, 200, .68);
  --faint: rgba(214, 209, 200, .4);
  --blood: #b3141e;
  --ember: #e0323c;
  --glass: #2f63e0;
  --gold: #c9a24a;
  --rule: rgba(201, 162, 74, .35);
  --caps: "Inscription", "Trajan Pro", Georgia, serif;
  --text: "Psalter", Garamond, Georgia, "Times New Roman", serif;
  --gutter: clamp(18px, 4vw, 60px);
  --foot-bg: var(--stone); --foot-ink: var(--dim);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--stone); scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--text); font-size: 19px; color: var(--silver); background: var(--stone);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.studio-foot .legal a { color: var(--silver); }
.caps { font-family: var(--caps); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { margin: 0 0 14px; font: 600 12px/1.4 var(--caps); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
h2 { margin: 0 0 22px; font: 600 clamp(28px, 3.4vw, 44px)/1.12 var(--caps); letter-spacing: .06em; color: var(--silver); }
h2 .red { color: var(--ember); }
.cross { display: block; text-align: center; color: var(--blood); font-size: 22px; margin: 34px 0; letter-spacing: 1em; padding-left: 1em; }

/* ---------- Title ---------- */
.title-block {
  position: relative; text-align: center;
  padding: clamp(46px, 9vh, 96px) var(--gutter) clamp(34px, 6vh, 64px);
  background:
    radial-gradient(ellipse 50% 70% at 50% 100%, rgba(179,20,30,.22), transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 0%, rgba(47,99,224,.12), transparent 70%),
    var(--stone);
}
.title-block .logo { display: block; width: min(980px, 100%); height: auto; margin: 0 auto; filter: drop-shadow(0 0 24px rgba(0,0,0,.9)); }
.title-block .sub { margin: 22px 0 0; font: 600 clamp(14px, 1.5vw, 18px)/1.5 var(--caps); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--ember); }
.title-block .credit { margin: 12px 0 0; font: italic 400 clamp(17px, 1.6vw, 20px)/1.5 var(--text); color: var(--dim); }

/* ---------- The wrap: portrait pinned, story beside it ---------- */
.nave { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: start; }
.portrait { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 62%, var(--stone)), linear-gradient(180deg, var(--stone), transparent 14%, transparent 86%, var(--stone));
  pointer-events: none;
}
.portrait figcaption { position: absolute; left: 22px; bottom: 22px; z-index: 2; font: italic 400 15px/1.4 var(--text); color: var(--dim); max-width: 26ch; }
@media (prefers-reduced-motion: no-preference) {
  .portrait img { animation: candle 5.5s ease-in-out infinite alternate; }
  @keyframes candle { 0% { filter: brightness(.96) saturate(1); } 40% { filter: brightness(1.04) saturate(1.06); } 100% { filter: brightness(.98) saturate(1.02); } }
}
.story { padding: clamp(36px, 7vh, 80px) var(--gutter) clamp(60px, 10vh, 110px) clamp(24px, 4vw, 64px); max-width: 760px; }
.logline { margin: 0; font: italic 400 clamp(24px, 2.4vw, 31px)/1.4 var(--text); color: var(--silver); text-wrap: pretty; }
.logline::first-letter { float: left; font: 600 3.3em/.82 var(--caps); color: var(--ember); margin: .06em .1em 0 0; font-style: normal; }
.act { position: relative; padding: 30px 0 6px; border-top: 1px solid var(--rule); margin-top: 34px; }
.act .when { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 600 12px/1.3 var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.act .when span:last-child { color: var(--faint); }
.act h3 { margin: 12px 0 14px; font: 600 clamp(22px, 2.2vw, 28px)/1.2 var(--caps); letter-spacing: .05em; }
.act p { margin: 0 0 14px; font-size: 19px; line-height: 1.7; color: var(--dim); }
.act p b { font-weight: 600; color: var(--silver); font-variant: small-caps; letter-spacing: .04em; }
.act .sealed { font-style: italic; color: var(--faint); }
.act .sealed a { color: var(--ember); }

.relics { margin-top: 46px; padding: 26px 26px 10px; border: 1px solid var(--rule); background: linear-gradient(180deg, rgba(179,20,30,.08), transparent 60%); }
.relics ul { list-style: none; margin: 0; padding: 0; }
.relics li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.relics .glyph { font: 400 24px/1.1 var(--caps); color: var(--gold); text-align: center; }
.relics b { display: block; font: 600 16px/1.3 var(--caps); letter-spacing: .08em; color: var(--silver); }
.relics span.d { font-size: 17px; line-height: 1.55; color: var(--dim); }

/* ---------- Full width below ---------- */
.wide { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.players { padding: clamp(64px, 11vh, 120px) 0; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(47,99,224,.1), transparent 70%), var(--stone-2); border-top: 1px solid var(--rule); }
.players .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); }
.player { padding: 26px 24px 28px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.player:nth-child(3n) { border-right: 0; }
.player:nth-last-child(-n+3) { border-bottom: 0; }
.player .side { font: 600 11px/1 var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.player .side.dark { color: var(--ember); }
.player h3 { margin: 10px 0 4px; font: 600 22px/1.2 var(--caps); letter-spacing: .06em; }
.player .aka { margin: 0 0 10px; font: italic 400 16px/1.4 var(--text); color: var(--faint); }
.player p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--dim); }

.road { padding: clamp(64px, 11vh, 120px) 0; }
.stations { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.stations::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--blood) 70%, var(--ember)); opacity: .7; }
.stations li { position: relative; padding: 38px 18px 0 0; }
.stations li::before { content: ""; position: absolute; top: 6px; left: 0; width: 15px; height: 15px; transform: rotate(45deg); background: var(--stone); border: 1.5px solid var(--gold); }
.stations li:last-child::before { background: var(--blood); border-color: var(--ember); }
.stations .yr { font: 600 13px/1 var(--caps); letter-spacing: .24em; color: var(--gold); }
.stations h3 { margin: 8px 0 6px; font: 600 20px/1.2 var(--caps); letter-spacing: .05em; }
.stations p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--dim); }

.novel { margin-top: clamp(48px, 8vh, 80px); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 26px; border: 1px solid var(--rule); }
.novel p { margin: 0; font-size: 18px; color: var(--dim); }
.novel p b { color: var(--silver); font-family: var(--caps); font-weight: 600; letter-spacing: .06em; }
.novel a { font: 600 12px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--gold); border-bottom: 1px solid var(--gold); padding-bottom: 4px; }

/* ---------- EPK ---------- */
.epk { padding: clamp(64px, 11vh, 120px) 0 clamp(64px, 10vh, 100px); background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(179,20,30,.18), transparent 70%), var(--stone); border-top: 1px solid var(--rule); }
.epk .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(28px, 6vw, 80px); align-items: start; }
.epk .side p { margin: 0 0 14px; font-size: 19px; line-height: 1.65; color: var(--dim); max-width: 40ch; }
.form { display: grid; gap: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font: 600 11px/1.2 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.field .opt { font: italic 400 13px/1 var(--text); letter-spacing: 0; text-transform: none; color: var(--faint); }
.field input, .field select {
  width: 100%; font: 400 18px/1.2 var(--text); color: var(--silver);
  background: rgba(255,255,255,.03); border: 1px solid var(--rule); border-radius: 0; padding: 13px 14px;
  appearance: none; -webkit-appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px;
}
.field select option { color: #000; }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,74,.18); }
.field [aria-invalid="true"] { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(224,50,60,.2); }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 16px; line-height: 1.45; color: var(--dim); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blood); }
.submit-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.submit {
  font: 600 13px/1 var(--caps); letter-spacing: .26em; text-transform: uppercase;
  color: #fff; background: var(--blood); border: 1px solid var(--ember); border-radius: 0; padding: 17px 26px 16px; cursor: pointer;
  box-shadow: 0 0 30px rgba(179,20,30,.35); transition: background .15s ease, box-shadow .15s ease;
}
.submit:hover { background: var(--ember); box-shadow: 0 0 44px rgba(224,50,60,.5); }
.submit[disabled] { opacity: .6; cursor: progress; }
.fine { flex: 1 1 220px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--faint); }
.status { margin: 0; font-size: 17px; }
.status.error { color: #ff8b8b; }
.done { border: 1px solid var(--ember); padding: 28px 26px; background: rgba(179,20,30,.08); }
.done h3 { margin: 0 0 8px; font: 600 26px/1.15 var(--caps); letter-spacing: .06em; color: var(--silver); }
.done p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--dim); }
.done strong { color: var(--silver); }
.done .note { margin-top: 10px; font-size: 15px; }

/* ---------- Text pages ---------- */
.doc { width: 100%; max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 72px; }
.doc h1 { margin: 0 0 6px; font: 600 clamp(30px, 4vw, 44px)/1.1 var(--caps); letter-spacing: .06em; }
.doc .meta { margin: 0 0 28px; color: var(--faint); font-size: 16px; font-style: italic; }
.doc h2 { margin: 34px 0 8px; font: 600 15px/1.3 var(--caps); letter-spacing: .2em; color: var(--gold); }
.doc p, .doc li { font-size: 18px; line-height: 1.7; }
.doc .summary { border: 1px solid var(--rule); padding: 14px 20px; }
.doc a { color: var(--gold); }
.doc-head { padding: 18px var(--gutter); border-bottom: 1px solid var(--rule); }
.doc-head img { display: block; height: 46px; width: auto; }

/* ---------- Small screens: the portrait leads, the story follows ---------- */
@media (max-width: 880px) {
  .nave { grid-template-columns: 1fr; }
  .portrait { position: relative; height: auto; }
  .portrait img { height: auto; aspect-ratio: 941 / 1300; }
  .portrait::after { background: linear-gradient(180deg, var(--stone), transparent 10%, transparent 80%, var(--stone)); }
  .story { padding-left: var(--gutter); }
  .players .grid { grid-template-columns: 1fr; }
  .player { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .player:last-child { border-bottom: 0 !important; }
  .stations { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .stations::before { display: none; }
  .epk .grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 18px; }
  .row { grid-template-columns: 1fr; }
  .stations { grid-template-columns: 1fr; }
  .title-block .sub { letter-spacing: .3em; }
}

.epk .side .eyebrow { margin: 0 0 14px; font: 600 12px/1.4 var(--caps); letter-spacing: .32em; color: var(--gold); max-width: none; }