:root {
  --indigo: #16213d;
  --teal: #123f45;
  --gold: #c8962e;
  --gold-dark: #8f6514;
  --paper: #f3ead7;
  --cream: #f6efe0;
  --ink: #1b2340;
  --ink-soft: #4a4f62;
  --terracotta: #a4472a;
  --head: "Fraunces", Georgia, serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0c1222; }
body { font-family: var(--body); color: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  margin: 0 auto 40px;
  background: var(--paper);
}

.motif { position: absolute; top: 0; left: 0; height: 100%; }

.kicker {
  font-family: var(--body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker.dark { color: var(--gold-dark); }

/* Title */
.title-slide { background: var(--indigo); }
.title-slide .motif { width: 760px; background: var(--teal); }
.title-img { position: absolute; top: 0; left: 0; width: 760px; height: 1080px; object-fit: cover; object-position: 50% 50%; }
.title-slide::after {
  content: ""; position: absolute; top: 0; left: 760px; width: 14px; height: 100%; background: var(--gold);
}
.title-body { position: absolute; left: 880px; right: 130px; top: 50%; transform: translateY(-50%); color: var(--cream); }
.title-body h1 { font-family: var(--head); font-weight: 600; font-size: 128px; line-height: 1.02; margin: 28px 0 0; letter-spacing: -0.01em; }
.rule { width: 160px; height: 6px; background: var(--gold); margin: 52px 0 44px; }
.subtitle { font-family: var(--head); font-size: 42px; line-height: 1.3; color: #e7d9bc; }

/* Overview */
.page-head { position: absolute; left: 140px; top: 64px; }
.page-head h2 { font-family: var(--head); font-weight: 600; font-size: 80px; margin-top: 10px; color: var(--ink); }
.kinds { position: absolute; left: 140px; right: 140px; top: 330px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.kind { background: var(--cream); border-top: 10px solid var(--teal); padding: 44px 48px 44px; position: relative; display: grid; grid-template-columns: 1fr 310px; column-gap: 36px; align-content: start; }
.kind + .kind { border-top-color: var(--terracotta); }
.kind-img { grid-column: 2; grid-row: 1 / span 3; width: 310px; height: 310px; display: block; object-fit: cover; }
.kind-num, .kind h3, .kind p { grid-column: 1; }
.chips { grid-column: 1 / -1; }
.kind-num { font-family: var(--head); font-weight: 700; font-size: 34px; color: var(--gold-dark); }
.kind h3 { font-family: var(--head); font-weight: 600; font-size: 40px; line-height: 1.12; margin: 8px 0 16px; color: var(--ink); }
.kind p { font-size: 26px; line-height: 1.45; color: var(--ink-soft); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.chips li { font-size: 23px; font-weight: 500; padding: 8px 20px; border: 2px solid var(--ink); border-radius: 40px; color: var(--ink); }

/* Legend slides */
.legend .side { position: absolute; top: 0; left: 0; width: 640px; height: 100%; background: var(--teal); }
.legend .side .motif { width: 640px; }
.legend .side::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: var(--gold); }
.side-body {
  position: absolute; left: 70px; right: 82px; top: 544px; bottom: 64px;
  display: flex; flex-direction: column;
  background: var(--indigo); padding: 40px 44px 38px; color: var(--cream);
  border-top: 6px solid var(--gold);
}
.num { font-family: var(--head); font-weight: 700; font-size: 72px; line-height: 1; color: var(--gold); }
.side-body h2 { font-family: var(--head); font-weight: 600; font-size: 60px; line-height: 1.05; margin: 16px 0 16px; }
.place { font-size: 27px; font-weight: 500; color: #e7d9bc; line-height: 1.35; margin-bottom: 20px; }
.type { margin-top: auto; padding-top: 18px; border-top: 2px solid #34406a; font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; color: #a9b0c4; line-height: 1.45; text-wrap: balance; }

/* 20-second scene card: a mini script page on the motif, above the title box */
.scene {
  position: absolute; left: 70px; right: 82px; top: 64px; height: 448px;
  background: var(--cream); color: var(--ink);
  padding: 24px 32px 22px; border-top: 6px solid var(--gold);
}
.scene .kicker { font-size: 17px; letter-spacing: 0.22em; }
.slug { font-weight: 700; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; color: var(--ink); margin-top: 10px; padding-bottom: 14px; border-bottom: 2px solid #e3d6b8; }
.shots { list-style: none; margin-top: 16px; }
.shots li { display: grid; grid-template-columns: 92px 1fr; column-gap: 14px; font-size: 18px; line-height: 1.38; }
.shots li + li { margin-top: 8px; }
.shots li.dlg, .shots li.dlg + li { margin-top: 10px; }
.tc { font-weight: 700; font-size: 15px; line-height: 24.84px; letter-spacing: 0.02em; color: var(--gold-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.act { color: var(--ink); }
/* Cue block (dialogue or SOUND): centred on the card's full text width so every line fits on one line */
.shots li.dlg { display: block; text-align: center; }
.dlg .cue { display: block; font-weight: 700; font-size: 14px; line-height: 16px; letter-spacing: 0.16em; padding-left: 0.16em; color: var(--ink-soft); }
.dlg .line { display: block; font-family: var(--head); font-style: italic; font-size: 20px; line-height: 1.3; margin-top: 2px; }

.legend .main { position: absolute; left: 712px; right: 612px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.syn { font-size: 31px; line-height: 1.52; color: var(--ink); }
.syn i { font-style: italic; }
.facts { margin-top: 40px; border-left: 8px solid var(--gold); padding: 6px 0 6px 36px; }
.facts p { font-size: 25px; line-height: 1.45; color: var(--ink-soft); }
.facts p + p { margin-top: 18px; }
.facts b { display: block; font-size: 19px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 4px; }

/* Picture pairs: story moment above, real place below, full height at the right edge */
.pics { position: absolute; top: 0; right: 0; width: 552px; height: 1080px; display: grid; grid-template-rows: 540px 540px; border-left: 12px solid var(--gold); background: var(--indigo); }
.pics figure { position: relative; width: 540px; height: 540px; overflow: hidden; }
.pics figure + figure { border-top: 4px solid var(--gold); height: 540px; }
.pics img { display: block; width: 540px; height: 540px; object-fit: cover; }
.pics figcaption { position: absolute; left: 20px; bottom: 18px; font-size: 17px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); background: rgba(22,33,61,0.86); padding: 7px 14px 6px; }

/* Closing */
.closing { background: var(--indigo); color: var(--cream); }
.closing-note { position: absolute; left: 140px; top: 130px; width: 820px; }
.closing-note .quote { font-family: var(--head); font-size: 54px; line-height: 1.3; margin-top: 34px; }
.closing-img { position: absolute; left: 140px; top: 690px; width: 820px; height: 260px; object-fit: cover; object-position: 50% 48%; border-top: 6px solid var(--gold); }
.closing-note::after { content: ""; display: block; width: 160px; height: 6px; background: var(--gold); margin-top: 60px; }
.sources { position: absolute; left: 1080px; right: 130px; top: 130px; bottom: 130px; background: var(--teal); padding: 56px 60px; border-top: 6px solid var(--gold); }
.sources ul { list-style: none; margin-top: 30px; }
.sources li { font-size: 25px; line-height: 1.35; padding: 17px 0; border-bottom: 2px solid #2c6a66; color: var(--cream); word-break: break-word; }
.sources li:last-child { border-bottom: 0; }
.sources li span { display: block; font-size: 21px; color: #bcd0cc; margin-top: 4px; }

@page { size: 1920px 1080px; margin: 0; }
@media print {
  html, body { background: none; }
  .slide { margin: 0; break-after: page; page-break-after: always; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
}