/* Shared editorial typography. Loaded last on every project page.
   Based on BARIKAD's 13px Times/1.75 and the justified paragraphs in 1BITP.
   Artwork grids, viewers and the surveillance screen interface keep their own styles. */
body.project-typography {
  --project-copy-font: "Times New Roman", Times, Georgia, serif;
  --project-copy-size: 13px;
  --project-copy-leading: 1.75;
  --project-copy-width: 580px;
  -webkit-text-size-adjust: 100%;
}
body.project-typography :is(.project-intro, .project-text, .text-block, .project-note, .vk-essay) {
  width: min(100%, var(--project-copy-width), calc(100vw - 32px));
  max-width: var(--project-copy-width);
  margin-inline: auto;
  font: 400 var(--project-copy-size)/var(--project-copy-leading) var(--project-copy-font);
  color: #222;
  text-align: justify;
  text-align-last: start;
  letter-spacing: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
body.project-typography :is(.project-intro p, .project-text p, .text-block p, .project-note, .vk-essay p, .surveillance-documentation p:not(.project-meta)) {
  width: min(100%, var(--project-copy-width), calc(100vw - 32px));
  max-width: var(--project-copy-width);
  margin: 0 auto 1.25em;
  padding: 0;
  font: 400 var(--project-copy-size)/var(--project-copy-leading) var(--project-copy-font);
  color: #222;
  text-align: justify;
  text-align-last: start;
  text-indent: 0;
  letter-spacing: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
body.project-typography :is(.project-intro, .project-text, .text-block, .project-note) { margin-block: 28px; }
body.project-typography :is(.project-intro, .project-text, .text-block, .vk-essay) > p:last-child { margin-bottom: 0; }
body.project-typography :is([data-project-texts], [data-project-description]) p + p { margin-top: 0; }

/* Give 1BITP's copy the same column without enlarging its authored GIF grids. */
body.project-typography[data-project="1bitp"] > .page {
  width: 100%; max-width: 612px; padding-inline: 16px;
}
body.project-typography[data-project="1bitp"] :is(.grid-section, .visual) {
  max-width: 328px; margin-inline: auto;
}
@media (min-width: 480px) { body.project-typography[data-project="1bitp"] :is(.grid-section, .visual) { max-width: 348px; } }
@media (min-width: 768px) { body.project-typography[data-project="1bitp"] :is(.grid-section, .visual) { max-width: 368px; } }
body.project-typography[data-project="1bitp"] .project-header { max-width: 368px; margin-inline: auto; }
body.project-typography:is([data-project="quiet"], [data-project="whitenoise"]) > .page {
  max-width: 612px; padding-inline: 16px;
}

body.project-typography .project-header { display: block; text-align: center; }
body.project-typography :is(.project-header h1, .surveillance-documentation h1) {
  font: 400 22px/1.35 var(--project-copy-font);
  letter-spacing: normal;
  text-align: center;
}
body.project-typography :is(.section-title, .project-sources h2, .surveillance-documentation h2, .surveillance-documentation h3) {
  width: min(100%, var(--project-copy-width));
  margin: 32px auto 14px;
  font: 400 16px/1.5 var(--project-copy-font);
  letter-spacing: normal;
  text-align: left;
}
body.project-typography .project-meta {
  justify-content: center;
  margin: 12px auto 0;
  font: 400 12px/1.6 var(--project-copy-font);
  color: #555;
  text-align: center;
  letter-spacing: normal;
}
body.project-typography :is(.project-media figcaption, .project-media-caption, .surveillance-documentation figcaption) {
  max-width: var(--project-copy-width);
  margin: 10px auto 0;
  font: 400 12px/1.6 var(--project-copy-font);
  color: #555;
  text-align: center;
}
body.project-typography :is(.project-sources, .vk-sources) {
  width: min(100%, var(--project-copy-width), calc(100vw - 32px));
  max-width: var(--project-copy-width);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid #d4d4d4;
}
body.project-typography :is(.project-sources ol, .vk-sources ol) {
  padding-left: 22px; margin: 16px 0 0;
  font: 400 12px/1.75 var(--project-copy-font);
  color: #333; text-align: left;
}
body.project-typography :is(.project-sources li, .vk-sources li) { margin-bottom: 12px; padding-left: 4px; }
body.project-typography .vk-sources summary { font: 400 13px/1.75 var(--project-copy-font); }
body.project-typography .project-references { font: 10px/1.4 var(--project-copy-font); }
body.project-typography :is(.back-link, .detail-back) { font: 400 12px/1.5 var(--project-copy-font); }
body.project-typography .site-footer { font: 400 10px/1.6 var(--project-copy-font); text-align: center; letter-spacing: .04em; }
@media (max-width: 700px) {
  /* The reading column has the same side clearance as other project pages. */
  body.project-typography > .page-wrap { padding-inline: 16px; }
  body.project-typography .surveillance-documentation { padding-inline: 4px; }
}