:root {
  --ink: #050607;
  --panel: rgba(9, 10, 11, 0.84);
  --paper: #d8d4cb;
  --muted: #8d8b86;
  --line: rgba(216, 212, 203, 0.2);
  --red: #a61612;
  --red-bright: #d1261c;
  --max: 1540px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 76% 12%, rgba(92, 129, 136, .2), transparent 28%),
    radial-gradient(circle at 10% 38%, rgba(125, 17, 13, .08), transparent 24%),
    linear-gradient(#040506, #08090a 60%, #030404);
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025), rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.06) 0 1px, transparent 1.5px);
  background-size: auto, 12px 12px;
  mix-blend-mode: screen;
  z-index: 99;
}

.site-shell { width: min(100%, 1920px); margin: 0 auto; }

.hero {
  position: relative;
  min-height: 482px;
  display: grid;
  grid-template-columns: minmax(520px, .9fr) 1.1fr;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 30px 42px 14px;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}

.hero-copy { position: relative; z-index: 4; padding: 4px 0 18px 42px; }
.eyebrow {
  margin: 0 0 6px 98px;
  font: 700 18px/1.2 'Oswald', Arial, sans-serif;
  letter-spacing: .42em;
  color: var(--red-bright);
}

.title { margin: 0; line-height: 0; }
.title img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  /* The lettering carries its own drop shadow in the artwork; this just
     seats it against the background. */
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.85));
}

.threat-line,
.reaction-line {
  margin-left: 28px;
  letter-spacing: .12em;
  font-weight: 800;
  text-transform: uppercase;
}
.threat-line { margin-top: 16px; margin-bottom: 0; font-size: clamp(18px, 1.55vw, 26px); }
.threat-line em { color: var(--paper); font-style: normal; }
.reaction-line { margin-top: 14px; font-size: 17px; letter-spacing: .32em; }
.reaction-line span { color: var(--red-bright); }

.hero-actions { display: flex; gap: 22px; margin: 18px 0 0 28px; }
.button {
  min-height: 52px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  border: 1px solid rgba(230,225,216,.34);
  color: #e3ddd3;
  background: rgba(6,7,7,.58);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .11em;
  font: 800 14px/1 'Oswald', Arial, sans-serif;
  cursor: pointer;
  transition: .2s ease;
}
.button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.64); }
.button-primary { border-color: rgba(211, 42, 31, .78); background: linear-gradient(#a41913, #6c0e0b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.button-primary:hover { background: linear-gradient(#bc2119, #7a100c); }
.play-dot { font-size: 12px; }

.reaper-wrap {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 66%;
  height: 100%;
  overflow: hidden;
}
.reaper-wrap::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg, #050607 0%, rgba(5,6,7,.85) 10%, rgba(5,6,7,.08) 38%, transparent 62%),
    linear-gradient(0deg, #050607 0%, transparent 25%);
}
.reaper {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: contrast(1.06) brightness(.82) saturate(.8);
}
.halo { display: none; }

.control-deck {
  position: relative;
  z-index: 6;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 42px;
  display: grid;
  grid-template-columns: 1.15fr .92fr 1.08fr;
  gap: 12px;
}
.panel {
  min-height: 246px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(8,9,9,.95), rgba(6,7,7,.83));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 35px rgba(0,0,0,.55);
}
.panel-heading { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.panel-heading span { height: 1px; background: linear-gradient(90deg, transparent, var(--red)); }
.panel-heading span:last-child { background: linear-gradient(90deg, var(--red), transparent); }
.panel-heading h2 { margin: 0; font: 700 16px/1 'Oswald', Arial, sans-serif; letter-spacing: .16em; }

.trailer-frame {
  width: 100%;
  border: 1px solid rgba(216,212,203,.22);
  background: #020303;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
.trailer-art {
  min-height: 185px;
  position: relative;
  background: #050607 url("assets/trailer-still.webp") center/cover no-repeat;
  overflow: hidden;
  transition: filter .25s ease;
}
.trailer-frame:hover .trailer-art { filter: brightness(1.18); }

.fake-controls { display:flex; align-items:center; gap:8px; min-height:32px; padding:0 10px; font:  11px 'Oswald', Arial, sans-serif; color:#b9b9b9; }
.progress { width:90px; height:2px; background:#444; position:relative; }
.progress i { position:absolute; width:32%; inset:0 auto 0 0; background:var(--red-bright); }
.controls-spacer { flex:1; }

.countdown { display:grid; grid-template-columns:repeat(4,1fr); margin: 16px 0 16px; }
.countdown div { text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.countdown div:last-child { border-right:0; }
.countdown strong { display:block; font-weight:600; font-size: clamp(44px, 4vw, 66px); line-height:1; letter-spacing:.02em; color:#d7d3ca; }
.countdown small { display:block; margin-top:12px; font: 800 12px/1 'Oswald', Arial, sans-serif; color:var(--red-bright); letter-spacing:.18em; }
.monthly-note { border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; text-align:center; padding:16px 0 0; color:#cfcbc2; }
.monthly-note p { margin:0; font: 700 13px/1.6 'Oswald', Arial, sans-serif; letter-spacing:.12em; }
.monthly-note small { color:#8d8b86; font-size:10px; }
.sigil { color:var(--red-bright); }

.waitlist-panel > p { font-family: Georgia,'Times New Roman',serif; color:#a6a39d; margin: 6px 0 20px; text-align:center; font-size:15px; }
.waitlist-form { display:grid; gap:12px; }
.waitlist-form input {
  width:100%;
  height:48px;
  border:1px solid rgba(216,212,203,.28);
  background:#080909;
  color:#eee;
  padding:0 16px;
  font:15px Georgia,'Times New Roman',serif;
  outline:none;
}
.waitlist-form input:focus { border-color: var(--red-bright); box-shadow:0 0 0 2px rgba(209,38,28,.12); }
.waitlist-form .button { width:100%; }
.form-status { font-family: Georgia,'Times New Roman',serif; min-height:18px; margin:8px 0 0 !important; color:#c9c4ba !important; font-size:12px !important; }

.episode-one {
  max-width: var(--max);
  margin: 12px auto 0;
  padding: 18px 42px 20px;
  display:grid;
  grid-template-columns: 1.25fr 2fr auto;
  gap: 28px;
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(52,36,24,.16), rgba(7,7,7,.78));
}
.evidence-stack {
  min-height: 172px;
  align-self: stretch;
  background: url("assets/episode-1.webp") left center/contain no-repeat;
}

.episode-copy p { color:var(--red-bright); margin:0 0 4px; font: 800 16px 'Oswald', Arial, sans-serif; letter-spacing:.16em; }
.episode-copy h2 { margin:0; font-weight:600; font-size:clamp(34px,4vw,62px); line-height:1.02; letter-spacing:.03em; text-transform:uppercase; color:#d9d5ca; }
.episode-cta { white-space:nowrap; }

.footer { max-width:var(--max); margin:0 auto; text-align:center; padding:16px 42px 20px; }
.footer p { margin:0 0 12px; letter-spacing:.45em; font-weight:700; }
.footer p span { color:var(--red-bright); }
.footer small { color:#5e5e5c; letter-spacing:.18em; }

.trailer-modal {
  width:min(1000px,92vw);
  border:1px solid rgba(255,255,255,.18);
  padding:0;
  background:#030404;
  color:#fff;
  box-shadow:0 30px 90px #000;
}
.trailer-modal::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(5px); }
.modal-close { position:absolute; z-index:4; right:10px; top:8px; width:42px; height:42px; border:0; background:#111; color:#fff; font-size:28px; cursor:pointer; }
.modal-video { aspect-ratio:16/9; }
.modal-video iframe, .modal-video video { width:100%; height:100%; border:0; display:block; }
.video-placeholder { height:100%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle,#151a1b,#030404 60%); }
.video-placeholder p { font: 900 28px 'Oswald', Arial, sans-serif; letter-spacing:.16em; margin:0 0 12px; }
.video-placeholder span { color:#999; }
.video-placeholder code { color:#d5d1c8; }
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

@media (max-width: 1100px) {
  .hero { grid-template-columns:1fr; min-height:720px; padding-inline:28px; }
  .hero-copy { padding-left:0; align-self:end; padding-bottom:40px; }
  .reaper-wrap { width:100%; height:78%; opacity:.82; }
  .reaper-wrap::before { background:linear-gradient(0deg,#050607 0%,rgba(5,6,7,.4) 35%,transparent 65%),linear-gradient(90deg,rgba(5,6,7,.7),transparent 55%); }
  .eyebrow { margin-left:0; }
  .control-deck { grid-template-columns:1fr 1fr; padding-inline:28px; }
  .waitlist-panel { grid-column:1 / -1; }
  .episode-one { margin-inline:28px; padding-inline:0; grid-template-columns:.8fr 2fr; }
  .episode-cta { grid-column:2; justify-self:start; }
}

@media (max-width: 720px) {
  .hero { min-height:650px; padding:24px 18px 8px; }
  .hero-copy { padding-bottom:26px; }
  .eyebrow { font-size:12px; letter-spacing:.28em; }
  .title img { max-width:100%; }
  .threat-line,.reaction-line,.hero-actions { margin-left:0; }
  .reaction-line { font-size:12px; letter-spacing:.2em; }
  .hero-actions { gap:10px; flex-wrap:wrap; }
  .button { min-height:48px; padding-inline:18px; font-size:12px; }
  .reaper-wrap { height:70%; width:108%; right:-8%; }
  .reaper { object-position:52% 14%; }
  .control-deck { grid-template-columns:1fr; padding:0 14px; }
  .waitlist-panel { grid-column:auto; }
  .panel { min-height:unset; }
  .countdown strong { font-size:42px; }
  .episode-one { margin:10px 14px 0; padding:24px 12px; grid-template-columns:1fr; gap:18px; }
  .episode-cta { grid-column:auto; justify-self:stretch; }
  .evidence-stack { grid-row:2; }
  .footer { padding-inline:18px; }
  .footer p { font-size:12px; letter-spacing:.22em; }
}