/* ==========================================================================
   WRATH — Pitch Document
   Design system: typography, color, layout primitives
   Page size: 792pt × 445.5pt (16:9 landscape, matches image aspect ratio)
   ========================================================================== */

/* -- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Fraktur";
  src: url("../fonts/UnifrakturMaguntia.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/Cinzel-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/Cinzel-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Garamond";
  src: url("../fonts/EBGaramond-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Garamond";
  src: url("../fonts/EBGaramond-Regular.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Garamond";
  src: url("../fonts/EBGaramond-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/CormorantGaramond.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* -- Page ----------------------------------------------------------------- */
@page {
  size: 792pt 445.5pt;
  margin: 0;
  background: #0a0908;
}

/* -- Reset ---------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }

body {
  font-family: "Garamond", serif;
  font-size: 10.5pt;
  line-height: 1.55;
  color: #e6dcc6;
  background: #0a0908;
  -webkit-font-smoothing: antialiased;
}

/* -- Color tokens (as utility vars) --------------------------------------- */
:root {
  --ink-black: #0a0908;
  --ink-deep:  #141210;
  --cream:     #e6dcc6;       /* body text warm cream */
  --cream-dim: #bfb29b;       /* secondary text */
  --gold:      #b0924d;       /* antique muted gold */
  --gold-dim:  #7d6836;
  --blood:     #6a0f0f;       /* deep oxblood — used sparingly */
  --ember:     #c23a1a;       /* EAS red */
  --rule:      #2e2a24;       /* hairline rule gold-brown */
  --rule-dim:  #1a1815;
}

/* -- Page wrapper --------------------------------------------------------- */
.page {
  width: 792pt;
  height: 445.5pt;
  position: relative;
  overflow: hidden;
  page-break-after: always;
  background: var(--ink-black);
}
.page:last-child { page-break-after: auto; }

/* -- Typography primitives ------------------------------------------------ */
/* Display titleface — Roman inscription caps, matches Powers' placards */
.titleface {
  font-family: "Cinzel", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.titleface--light {
  font-weight: 400;
  letter-spacing: 0.14em;
}
.caps {
  font-family: "Cinzel", serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.body-serif { font-family: "Garamond", serif; }
.display    { font-family: "Cormorant", "Garamond", serif; font-weight: 300; }
.italic     { font-style: italic; }

.eyebrow {
  font-family: "Cinzel", serif;
  font-size: 7.5pt;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--dim { color: var(--gold-dim); }

.folio {
  position: absolute;
  bottom: 16pt;
  font-family: "Cinzel", serif;
  font-size: 7pt;
  letter-spacing: 0.24em;
  color: var(--gold-dim);
  text-transform: uppercase;
}
.folio--left  { left: 32pt; }
.folio--right { right: 32pt; }
.folio__title { color: var(--gold-dim); }
.folio__num   { color: var(--gold); margin-left: 14pt; }

.rule-h {
  display: block;
  height: 0.5pt;
  background: var(--rule);
  border: 0;
  margin: 10pt 0;
}
.rule-h--short { width: 36pt; }

/* -- Shared layout primitives --------------------------------------------- */
.pad { padding: 36pt 48pt; }
.pad-lg { padding: 48pt 64pt; }
.pad-xl { padding: 56pt 72pt; }

.full-bleed {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  /* Firefox/PDF.js-safe: background-image avoids the object-fit:cover PDF bug */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
}
.vignette {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

/* Cinemascope letterbox (for 2.35:1 images on a 16:9 page) */
.letterbox {
  position: absolute;
  left: 0; right: 0;
  height: 189pt; /* 792 / 2.357 ~ 336pt wide; aspect-fit ~ 189pt tall */
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  background: #000;
}
.letterbox {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
}
.letterbox-bars {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
}
.letterbox-bars::before,
.letterbox-bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 128pt; /* ( 445.5 - 189 ) / 2 ≈ 128.25 */
  background: #000;
}
.letterbox-bars::before { top: 0; border-bottom: 0.5pt solid var(--rule-dim); }
.letterbox-bars::after  { bottom: 0; border-top: 0.5pt solid var(--rule-dim); }

/* Split-panel: image-left / text-right  (absolute-positioned, reliable) */
.split {
  position: relative;
  width: 792pt;
  height: 445.5pt;
}
.split__img {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 396pt;                 /* 50% of 792 */
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.split__img--portrait {
  background-color: #0a0908;
  background-size: contain;
}
.split__text {
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  width: 396pt;
  padding: 48pt 52pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* 40/60 and 60/40 variants */
.split--4060 .split__img  { width: 316.8pt; }
.split--4060 .split__text { width: 475.2pt; }
.split--6040 .split__img  { width: 475.2pt; }
.split--6040 .split__text { width: 316.8pt; }

/* Inverse — text left, image right */
.split--flip .split__img  { left: auto; right: 0; }
.split--flip .split__text { right: auto; left: 0; }

/* Three-column grid */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28pt;
  height: 100%;
  padding: 48pt 56pt;
}
.grid-3__cell {
  display: flex;
  flex-direction: column;
  gap: 10pt;
}
.grid-3__img {
  width: 100%;
  height: 130pt;
  overflow: hidden;
  background: #000;
  border: 0.5pt solid var(--rule-dim);
}
.grid-3__img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* -- Overlays for full-bleed text ----------------------------------------- */
.overlay {
  position: absolute;
  z-index: 2;
}
.overlay--bl { bottom: 44pt; left: 52pt; right: auto; }
.overlay--br { bottom: 44pt; right: 52pt; left: auto; text-align: right; }
.overlay--tl { top: 44pt; left: 52pt; }
.overlay--tr { top: 44pt; right: 52pt; text-align: right; }
.overlay--center {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* -- Titles / section marks ---------------------------------------------- */
.section-mark {
  font-family: "Cinzel", serif;
  font-size: 9pt;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.page-title {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 22pt;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #f3e8cd;
  line-height: 1.1;
}
.page-title--sm {
  font-size: 15pt;
  letter-spacing: 0.14em;
}
.page-subtitle {
  font-family: "Garamond", serif;
  font-style: italic;
  font-size: 10.5pt;
  color: var(--cream-dim);
  margin-top: 8pt;
  line-height: 1.45;
}

.pull {
  font-family: "Cormorant", "Garamond", serif;
  font-weight: 300;
  font-size: 22pt;
  line-height: 1.2;
  color: #f3e8cd;
  font-style: italic;
  letter-spacing: 0.005em;
}

.pull--lg { font-size: 32pt; line-height: 1.15; }

/* -- Body text ------------------------------------------------------------ */
p {
  font-family: "Garamond", serif;
  font-size: 10.25pt;
  line-height: 1.6;
  color: var(--cream);
  margin-bottom: 8pt;
}
p + p { margin-top: 0; }
strong { color: #f3e8cd; font-weight: 600; }
em { color: var(--cream); font-style: italic; }

.lede {
  font-family: "Cormorant", "Garamond", serif;
  font-weight: 400;
  font-size: 13pt;
  line-height: 1.5;
  color: #f3e8cd;
  margin-bottom: 14pt;
}
.small { font-size: 8.5pt; color: var(--cream-dim); line-height: 1.5; }
.micro { font-size: 7pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); }

/* Placard — used for Power titles, Fallen Power titles */
.placard {
  border-top: 0.5pt solid var(--gold-dim);
  border-bottom: 0.5pt solid var(--gold-dim);
  padding: 12pt 0;
  text-align: center;
  background: rgba(176, 146, 77, 0.04);
}
.placard__latin {
  font-family: "Cinzel", serif;
  font-size: 22pt;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  line-height: 1;
}
.placard__english {
  font-family: "Garamond", serif;
  font-style: italic;
  font-size: 10pt;
  color: var(--cream-dim);
  margin-top: 8pt;
  letter-spacing: 0.05em;
}

/* Latin-primary / English-gloss inline */
.latin { color: var(--gold); font-style: italic; letter-spacing: 0.02em; }
.gloss { color: var(--cream-dim); }

/* -- Decorative marks ----------------------------------------------------- */
.ornament {
  display: block;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 12pt;
  color: var(--gold);
  letter-spacing: 0.6em;
  margin: 16pt 0;
}

/* -- Utilities ------------------------------------------------------------ */
.flex       { display: flex; }
.col        { flex-direction: column; }
.between    { justify-content: space-between; }
.center     { align-items: center; justify-content: center; }
.h-full     { height: 100%; }
.w-full     { width: 100%; }
.gap-sm     { gap: 8pt; }
.gap-md     { gap: 16pt; }
.gap-lg     { gap: 28pt; }
.mt-sm      { margin-top: 8pt; }
.mt-md      { margin-top: 16pt; }
.mt-lg      { margin-top: 28pt; }
.mb-sm      { margin-bottom: 8pt; }
.mb-md      { margin-bottom: 16pt; }
.mb-lg      { margin-bottom: 28pt; }
.text-right { text-align: right; }
.text-center{ text-align: center; }

/* Selective page backgrounds */
.page--pure { background: var(--ink-black); }
.page--image { background: #000; }