:root {
  --ink: #17130f;
  --paper: #f6f1e7;
  --cream: #fffaf0;
  --gold: #d99c16;
  --blue: #173e58;
  --muted: #6f675c;
  --line: rgba(23, 19, 15, .24);
}

* { box-sizing: border-box; }
html { background: #cac6be; }
body {
  margin: 0;
  color: var(--ink);
  background: #cac6be;
  font-family: Arial, Helvetica, sans-serif;
}

.page {
  width: 1600px;
  height: 900px;
  margin: 24px auto;
  padding: 58px 66px 48px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  page-break-after: always;
}

.page.dark { background: var(--ink); color: var(--cream); }
.page.gold { background: var(--gold); }
.running {
  position: absolute;
  left: 66px;
  right: 66px;
  top: 26px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .7;
}
.folio {
  position: absolute;
  right: 66px;
  bottom: 22px;
  font-size: 12px;
  opacity: .55;
}

.cover {
  background: linear-gradient(90deg, rgba(16,14,11,.92), rgba(16,14,11,.42)), url('assets/panel-01.jpg') center/cover;
  color: white;
  display: grid;
  align-content: center;
}
.cover .kicker,
.kicker {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
h1, h2, h3 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
h1 { margin-top: 18px; font-size: 102px; line-height: .92; letter-spacing: -.055em; max-width: 960px; }
.cover .dek { max-width: 760px; margin-top: 28px; font: 30px/1.25 Georgia, serif; }
.cover .meta { margin-top: 44px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.brand-signature {
  position: absolute;
  left: 66px;
  bottom: 40px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: .92;
}
.brand-signature span { width: 1px; height: 25px; background: rgba(255,255,255,.42); }
.brand-signature img { display: block; object-fit: contain; }
.brand-orbx { width: 295px; height: 165px; margin: 0 -55px 0 -104px; }
.brand-artmont { width: 128px; height: 72px; }
.brand-signature--closing { left: auto; right: 112px; bottom: 10px; transform: scale(.72); transform-origin: right bottom; }

.page-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.page-title h2 { font-size: 40px; letter-spacing: -.03em; }
.page-title p { margin: 0; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.dark .page-title p { color: rgba(255,255,255,.65); }

.boards { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; height: 744px; }
.board {
  display: grid;
  grid-template-columns: 54% 46%;
  background: var(--cream);
  border: 1px solid var(--line);
  min-height: 0;
}
.dark .board { background: #221d18; border-color: rgba(255,255,255,.2); }
.frame { position: relative; overflow: hidden; background: #dfd8ca; border-right: 1px solid var(--line); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92); }
.movement {
  position: absolute;
  padding: 8px 11px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
.movement.camera { top: 12px; left: 12px; color: white; background: rgba(23,62,88,.92); }
.movement.character { right: 12px; bottom: 12px; color: #17130f; background: rgba(238,180,47,.94); }
.notes { padding: 20px 24px 16px; overflow: hidden; }
.shotline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.shotline h3 { font-size: 27px; line-height: 1; letter-spacing: -.025em; }
.time { flex: none; color: var(--gold); font-size: 14px; font-weight: 800; }
.description { margin: 10px 0 13px; font: 17px/1.28 Georgia, serif; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.spec { border-top: 1px solid var(--line); padding-top: 7px; font-size: 12.5px; line-height: 1.25; }
.dark .spec { border-color: rgba(255,255,255,.19); }
.spec b { display: block; margin-bottom: 3px; color: var(--blue); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.dark .spec b { color: var(--gold); }
.line { margin: 11px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.25; }
.dark .line { border-color: rgba(255,255,255,.19); }
.line b { color: var(--gold); }

.legend-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; height: 100%; }
.legend-copy h2 { font-size: 66px; line-height: .98; letter-spacing: -.04em; }
.legend-copy p { margin: 24px 0 0; max-width: 620px; font: 22px/1.35 Georgia, serif; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.legend-item { padding: 18px; border-top: 2px solid currentColor; }
.legend-item strong { display: block; font-size: 34px; color: var(--gold); }
.legend-item span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.3; }

.single-board { height: 700px; display: grid; grid-template-columns: 62% 38%; border: 1px solid rgba(255,255,255,.2); }
.single-board .frame { border-right-color: rgba(255,255,255,.2); }
.single-board .notes { padding: 35px; }
.single-board .shotline h3 { font-size: 42px; }
.single-board .description { font-size: 25px; margin: 22px 0 30px; }
.single-board .specs { grid-template-columns: 1fr; gap: 17px; }
.single-board .spec { font-size: 16px; padding-top: 12px; }

.footer-note { position: absolute; left: 66px; bottom: 22px; font-size: 11px; opacity: .58; max-width: 950px; }

@media (max-width: 1648px) and (min-width: 901px) {
  body { zoom: calc(100vw / 1648); }
}

@media (max-width: 900px) {
  body { background: var(--paper); }
  .page { width: 100%; height: auto; min-height: 100vh; margin: 0; padding: 70px 22px 50px; box-shadow: none; }
  .boards { height: auto; grid-template-rows: auto; }
  .board, .single-board { height: auto; grid-template-columns: 1fr; }
  .frame { min-height: 55vw; border-right: 0; border-bottom: 1px solid var(--line); }
  .running { left: 22px; right: 22px; }
  .brand-signature { left: 22px; bottom: 24px; transform: scale(.76); transform-origin: left bottom; }
  .brand-signature--closing { left: auto; right: 22px; }
  .legend-wrap { grid-template-columns: 1fr; }
}

@media print {
  @page { size: 16in 9in; margin: 0; }
  html, body { width: 16in; background: white; }
  .page {
    width: 16in;
    height: 9in;
    min-height: 9in;
    margin: 0;
    padding: .58in .66in .48in;
    box-shadow: none;
    break-after: page;
  }
  .running { left: .66in; right: .66in; top: .25in; }
  .folio { right: .66in; bottom: .2in; }
  .page-title { margin-bottom: .22in; }
  .page-title h2 { font-size: 29px; }
  .boards { height: 7.35in; gap: .22in; }
  .notes { padding: .16in .2in .13in; }
  .shotline h3 { font-size: 20px; }
  .description { font-size: 12.5px; margin: .07in 0 .1in; }
  .specs { gap: .05in .12in; }
  .spec { font-size: 9.2px; padding-top: .05in; }
  .spec b { font-size: 7.4px; }
  .line { font-size: 9.2px; margin-top: .08in; padding-top: .05in; }
  .movement { font-size: 8px; padding: 5px 7px; }
  .single-board { height: 7.1in; }
  .single-board .notes { padding: .3in; }
  .single-board .shotline h3 { font-size: 30px; }
  .single-board .description { font-size: 18px; }
  .single-board .spec { font-size: 12px; }
}