/* the deck · one landscape spread per chapter, 1440 x 1080 (4:3, DC-Q29).
   screen: the spreads sit on the desk, scaled to fit the window.
   print: exact page size, one spread per page. chrome's save-as-pdf is the canonical export. */

.deck {
  --deck-scale: 1;
  padding: var(--s6) var(--s5) var(--s8);
  display: grid;
  justify-items: center;
  gap: var(--s6);
}

@media (max-width: 1560px) { .deck { --deck-scale: 0.86; } }
@media (max-width: 1340px) { .deck { --deck-scale: 0.72; } }
@media (max-width: 1120px) { .deck { --deck-scale: 0.58; } }
@media (max-width: 900px)  { .deck { --deck-scale: 0.46; } }
@media (max-width: 720px)  { .deck { --deck-scale: 0.34; } }
@media (max-width: 540px)  { .deck { --deck-scale: 0.26; } }

.deck__hint {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--ink-soft);
  padding-bottom: var(--s5);
  text-align: center;
}

.spread {
  width: var(--spread-w);
  height: var(--spread-h);
  padding: var(--spread-pad);
  background: var(--paper);
  border: var(--hairline);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  zoom: var(--deck-scale);   /* zoom, not transform: the layout box shrinks with it */
  font-size: 16px;
  line-height: 1.5;
}

.spread__top {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-label);
  color: var(--ink-soft);
  border-bottom: var(--hairline);
  padding-bottom: var(--s3);
}
.spread__top span:first-child { color: var(--ink); }

.spread__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  color: var(--ink-soft);
  border-top: var(--hairline);
  padding-top: var(--s3);
}

.spread__body {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 38%);
  gap: var(--s8);
  padding-top: var(--s6);
  flex: 1;
  min-height: 0;
}
.spread__left, .spread__right { display: flex; flex-direction: column; gap: var(--s5); min-height: 0; }

/* cover */
.spread__cover { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.cover__name {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 96px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 8ch;
}
.cover__role {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: var(--tracking-label);
  color: var(--ink-soft);
  padding-top: var(--s5);
}
.spread--cover .annotation { margin-top: var(--s7); padding-top: 0; max-width: 40ch; font-size: 20px; text-align: left; }

/* the index spread */
.deck-record { border-top: var(--hairline); margin-top: var(--s6); }
.deck-row {
  display: grid;
  grid-template-columns: 5ch minmax(260px, 26%) 1fr auto;
  gap: var(--s5);
  align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: var(--hairline);
  font-family: var(--font-mono);
  font-size: 15px;
}
.deck-row span:nth-child(1) { color: var(--ink-soft); }
.deck-row span:nth-child(3) { font-family: var(--font-body); color: var(--ink-soft); font-size: 15px; }
.deck-row__metric { text-align: right; white-space: nowrap; }

/* chapter spreads */
.spread .claim {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: 20ch;
  padding: 0;
}
.spread .prose { max-width: 56ch; padding: 0; gap: var(--s4); }
.spread .prose p { font-size: 16px; }
.spread .mechanism { padding: var(--s4) var(--s5); max-width: 56ch; margin: 0; }
.spread .mechanism p { font-size: 15px; }

.spread .plates { gap: var(--s4); padding: 0; min-height: 0; }
.spread .plates--pair { grid-template-columns: 1fr 1fr; }
.spread .plate__frame { display: block; max-height: 300px; aspect-ratio: var(--fig-ratio, 16 / 10); }
.spread .plates--pair .plate__frame { aspect-ratio: 16 / 10; max-height: 240px; }
.spread .plate__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: grayscale(1) contrast(1.06) brightness(1.02) sepia(0.14);
}
.spread .plate__caption { font-size: 12px; padding-top: var(--s2); }

.spread .stats { display: grid; gap: var(--s5); padding: 0; border: 0; grid-template-columns: 1fr; }
.spread .stat__value { font-size: 30px; }
.spread .stat--hero .stat__value { font-size: 52px; }
.spread .stat--hero .stat__value::after { max-width: 200px; }
.spread .section-label { padding: 0 0 var(--s2); font-size: 12px; }
.spread .colophon { border-top: var(--hairline); }
.spread .colophon__row { grid-template-columns: minmax(150px, 40%) 1fr; gap: var(--s4); padding: var(--s3) 0; }
.spread .colophon__value { font-size: 14px; }
.spread .quote { padding: 0; max-width: none; }
.spread .quote__text { font-size: 15px; }
.spread .annotation { font-size: 18px; max-width: none; text-align: right; margin-top: auto; }
.spread .footnotes { border-top: 0; padding: var(--s4) 0 0; font-size: 11px; }

/* the deck is a record, not a screen: nothing animates here */
.js .spread .rule,
.js .spread .annotation,
.js .spread .annotation span,
.js .spread .stamp { transform: none; clip-path: none; opacity: 1; }
.js .spread .stat--hero .stat__value::after { transform: scaleX(1); }

@media print {
  @page { size: 1440px 1080px; margin: 0; }

  html, body { background: #fff; }
  .deck { padding: 0; gap: 0; display: block; }
  .deck__hint, .skip { display: none !important; }

  .spread {
    zoom: 1;
    border: 0;
    width: 1440px;
    height: 1080px;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .spread:last-child { break-after: auto; page-break-after: auto; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}