:root {
  --sheet-width: 14;
  --sheet-height: 8.5;
  --page-width: 7in;
  --page-height: 8.5in;
  --page-pad-x: .43in;
  --page-pad-top: .38in;
  --page-pad-bottom: .45in;
  --flow-width: 6.14in;
  --paper: #fff;
  --ink: #1a1a1a;
  --rule: #ddd;

  /* Fixed artifact coordinates measured from the top of page-flow. */
  --bell-top: 1.08in;
  --bell-width: 3.55in;
  --bell-height: 1.90in;
  --train-top: 3.15in;
  --train-height: 2.82in;
  --train-image-width: 12.28in;
  --train-right-offset: -6.14in;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--paper);
}

/* Active two-page viewer. */
body:not(.darkstar-interior) {
  display: grid;
  place-items: center;
  overflow: hidden;
}

#spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100vw, calc(100vh * var(--sheet-width) / var(--sheet-height)));
  height: min(100vh, calc(100vw * var(--sheet-height) / var(--sheet-width)));
  aspect-ratio: 14 / 8.5;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
}

.page-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}

#page-left-slot {
  border-right: 1px solid var(--rule);
}

.page {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: var(--page-width);
  height: var(--page-height);
  border: 0;
  background: var(--paper);
  transform-origin: top left;
}

.turn-zone {
  position: fixed;
  top: 0;
  bottom: 0;
  width: max(10vw, 48px);
  z-index: 10;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.turn-left {
  left: 0;
  cursor: w-resize;
}

.turn-right {
  right: 0;
  cursor: e-resize;
}

/* One invariant interior page. */
html.darkstar-page,
html.darkstar-page body.darkstar-interior {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--paper) !important;
}

body.darkstar-interior {
  display: block !important;
  position: relative !important;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

.interior-page[data-darkstar-uniform] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom) !important;
  overflow: hidden !important;
  background: var(--paper) !important;
}

.page-flow {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 10pt;
  line-height: 1.3;
}

.page-block {
  position: static !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 .55em !important;
  padding: 0 !important;
  break-inside: avoid;
}

.page-block:last-child {
  margin-bottom: 0 !important;
}

.page-block > main,
.page-block > article,
.page-block > section,
.page-block > div {
  position: static !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-block p {
  margin-top: 0;
  margin-bottom: .55em;
}

.page-block h1,
.page-block h2,
.page-block h3 {
  margin-top: 0;
  margin-bottom: .45em;
  line-height: 1.12;
}

.page-block pre {
  max-width: 100%;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: "Courier New", Courier, monospace;
  font-size: .82em;
  line-height: 1.24;
}

.page-block table {
  max-width: 100%;
  border-collapse: collapse;
}

.page-block figure {
  max-width: 100% !important;
  margin: .3em auto !important;
}

.page-block img,
.page-block svg,
.page-block video,
.page-block canvas {
  display: block;
  max-width: 100% !important;
  max-height: 7.55in !important;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

/*
  Fixed artifact slots.

  viewer.js moves artifact blocks to the beginning of page-flow. Each artifact
  is a float whose exclusion shape begins at an exact Y coordinate. Text can
  therefore fill the page above the artifact, flow beside it where there is
  room, and continue below it. The artifact itself never moves because text
  was added or removed.
*/
.page-block[data-artifact] {
  position: relative !important;
  z-index: 2;
  padding: 0 !important;
  break-inside: avoid;
}

/* Bell: identical rectangle and vertical coordinate on every Bell page. */
.page-block[data-artifact="bell"] {
  width: var(--bell-width) !important;
  max-width: var(--bell-width) !important;
  height: calc(var(--bell-top) + var(--bell-height)) !important;
  min-height: calc(var(--bell-top) + var(--bell-height)) !important;
  margin: 0 !important;
  overflow: visible !important;
  shape-outside: inset(var(--bell-top) 0 0 0);
  shape-margin: .18in;
}

body.darkstar-interior[data-side="left"] .page-block[data-artifact="bell"] {
  float: right !important;
  clear: right !important;
}

body.darkstar-interior[data-side="right"] .page-block[data-artifact="bell"] {
  float: left !important;
  clear: left !important;
}

.page-block[data-artifact="bell"] > .bell-tract {
  position: absolute !important;
  top: var(--bell-top) !important;
  left: 0 !important;
  display: grid !important;
  grid-template-columns: 52% 48%;
  width: var(--bell-width) !important;
  max-width: var(--bell-width) !important;
  height: var(--bell-height) !important;
  min-height: var(--bell-height) !important;
  max-height: var(--bell-height) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1.5pt solid var(--ink);
  background: var(--paper);
}

.page-block[data-artifact="bell"] > .bell-tract img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain;
}

.page-block[data-artifact="bell"] > .bell-tract figcaption {
  box-sizing: border-box;
  overflow: hidden;
  padding: .09in .1in .08in;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7.4pt;
  font-weight: 600;
  line-height: 1.13;
}

.page-block[data-artifact="bell"] > .bell-tract figcaption p {
  margin: 0 0 .06in;
}

.page-block[data-artifact="bell"] > .bell-tract figcaption p:last-child {
  margin-bottom: 0;
}

.page-block[data-artifact="bell"] > .bell-tract figcaption strong {
  display: block;
  margin-bottom: .05in;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.3pt;
  line-height: 1;
  text-transform: uppercase;
}

body.darkstar-interior[data-side="left"] .page-block[data-artifact="bell"] > .bell-tract img {
  order: 2;
}

body.darkstar-interior[data-side="left"] .page-block[data-artifact="bell"] > .bell-tract figcaption {
  order: 1;
  border-right: 1pt solid var(--ink);
}

body.darkstar-interior[data-side="right"] .page-block[data-artifact="bell"] > .bell-tract figcaption {
  border-left: 1pt solid var(--ink);
}

/* Bell cover/revelation/final still occupy the same outer slot. */
.page-block[data-artifact="bell"] > .bell-cover-tract {
  display: block !important;
}

.page-block[data-artifact="bell"] > .bell-cover-tract img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.page-block[data-artifact="bell"] > .bell-revelation {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: .14in !important;
  background: #090909;
  color: #fff;
  text-align: center;
}

.page-block[data-artifact="bell"] > .bell-revelation figcaption,
body.darkstar-interior[data-side="left"] .page-block[data-artifact="bell"] > .bell-revelation figcaption,
body.darkstar-interior[data-side="right"] .page-block[data-artifact="bell"] > .bell-revelation figcaption {
  order: initial;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: 8pt;
  line-height: 1.18;
}

.page-block[data-artifact="bell"] > .bell-final-tract {
  grid-template-columns: 100%;
  grid-template-rows: 1.05in auto;
}

.page-block[data-artifact="bell"] > .bell-final-tract img {
  order: initial !important;
  width: 100% !important;
  height: 1.05in !important;
  border-bottom: 1pt solid var(--ink);
}

/*
  Train: one continuous 12.28-inch image viewed through two identical
  6.14-inch page windows. The right page is shifted exactly one flow width,
  so the seam is mathematical rather than eyeballed.
*/
.page-block[data-artifact="train"] {
  float: left !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  height: calc(var(--train-top) + var(--train-height)) !important;
  min-height: calc(var(--train-top) + var(--train-height)) !important;
  margin: 0 !important;
  overflow: hidden !important;
  shape-outside: inset(var(--train-top) 0 0 0);
}

.page-block[data-artifact="train"] > .train-art {
  position: absolute !important;
  top: var(--train-top) !important;
  width: var(--train-image-width) !important;
  max-width: none !important;
  height: var(--train-height) !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: center center;
}

body.darkstar-interior[data-side="left"] .page-block[data-artifact="train"] > .train-art {
  left: 0 !important;
}

body.darkstar-interior[data-side="right"] .page-block[data-artifact="train"] > .train-art {
  left: var(--train-right-offset) !important;
}

@media print {
  @page {
    size: legal landscape;
    margin: 0;
  }

  html:not(.darkstar-page),
  html:not(.darkstar-page) body {
    width: 14in;
    height: 8.5in;
    overflow: hidden;
  }

  #spread {
    width: 14in;
    height: 8.5in;
    box-shadow: none;
  }

  .page-slot {
    width: var(--page-width);
    height: var(--page-height);
  }

  #page-left-slot {
    border-right: 0;
  }

  .page {
    width: var(--page-width);
    height: var(--page-height);
    transform: none !important;
  }

  .turn-zone {
    display: none;
  }
}