/* Print: turn the site into a brand book PDF.
   Cmd+P on the index page should produce something you can send to a printer
   or attach to an email without apologising for it. */

@page {
  size: A4;
  margin: 16mm 14mm;
}

body {
  background: #fff !important;
  color: #0d0d12 !important;
  font-size: 10.5pt;
  line-height: 1.5;
}

/* chrome that has no meaning on paper */
.index,
.skip,
.cover-scroll,
.toast,
.btn,
.btn-quiet,
.btn-row,
.gallery-links {
  display: none !important;
}

/* the cover becomes a title page */
.cover {
  /* A4 297mm less the 16mm page margins, so the title page is fully inked */
  min-height: 258mm;
  background: #0d0d12 !important;
  color: #fffbff !important;
  padding: 22mm 18mm;
  break-after: page;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.cover-main {
  padding: 24mm 0 18mm;
  max-width: none;
}

.cover-main .display {
  font-size: 34pt;
}

.cover-tagline-en {
  font-size: 10pt;
}

.book {
  display: block;
}

.chapter {
  padding: 0 0 10mm;
  max-width: none;
  break-before: page;
  break-inside: auto;
}

.chapter:first-of-type {
  break-before: avoid;
}

.chapter-title {
  font-size: 22pt;
}

.chapter-num {
  font-size: 9pt;
}

.lede {
  font-size: 11.5pt;
  max-width: none;
}

.subhead {
  font-size: 13pt;
  margin-top: 8mm;
  break-after: avoid;
}

.subhead-sm {
  font-size: 11pt;
  break-after: avoid;
}

.prose,
.note,
.list-clean li {
  max-width: none;
}

/* keep coloured things coloured — the whole point of a brand book */
.swatch,
.gradient,
.palette-stripe span,
.cascade span,
.panel-dark,
.tagline-box,
.foot,
.v-busy {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.swatch,
.gradient,
.swatch-group,
.gallery-item,
.dont,
.scale-row,
.specimen,
.note,
.table,
.tagline-box {
  break-inside: avoid;
}

.swatch-main {
  height: 16mm;
}

.swatch-sub {
  height: 10mm;
}

.panel,
.panel-dark,
.tagline-box {
  padding: 8mm;
}

.gallery {
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
}

.donts {
  grid-template-columns: repeat(4, 1fr);
  gap: 4mm;
}

.scale-sample {
  overflow: visible;
  white-space: normal;
}

.table {
  min-width: 0;
  font-size: 9.5pt;
}

.table-wrap {
  overflow: visible;
}

/* show where a link actually goes */
.prose a[href^="http"]::after,
.prose a[href^="mailto"]::after {
  content: " (" attr(href) ")";
  font-size: 8.5pt;
  color: #79747e;
  word-break: break-all;
}

.foot {
  background: #0d0d12 !important;
  color: #938f99 !important;
  padding: 12mm;
  break-before: page;
}

.foot a {
  color: #d4baff !important;
}

/* no animation on paper */
* {
  animation: none !important;
  transition: none !important;
}