/*
 * One project, on its own page, read vertically.
 *
 * Loaded on top of styles.css, which supplies the typeface, the palette and
 * --indent. Nothing here restates a colour or a size that already has a token.
 *
 * The home page scrolls sideways because the point there is to move through
 * nineteen projects. A link someone has been sent has the opposite job: show
 * this one thing whole. So it stacks, and the images run at a single generous
 * width rather than being fitted to a viewport.
 */

.project-page {
  background: var(--project-text-bg, var(--paper));
  color: var(--paper);
}

/* No max-width and no centring. The home page runs its work to the full width
   of the window inside --indent, and a project page reading half as wide as the
   page it was linked from looked like a different site. The copy still holds a
   readable measure; only the pictures take the width. */
.project-page main {
  padding: calc(var(--indent) + 4rem) var(--indent) 0;
}

/* --- header --------------------------------------------------------------- */

.project-page-header {
  padding: 0 0 var(--heading-gap);
}

/* Block, with the line box collapsed. As an inline anchor the wordmark sat on
   a text baseline, which pushed it 27px below where the same mark sits on the
   home page even though both have identical padding above them. */
.project-page-mark {
  display: block;
  line-height: 0;
}

.project-page-back,
.project-page-nav a {
  display: inline-block;
  font-size: var(--font-size-chrome);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  opacity: 0.75;
}

.project-page-back:hover,
.project-page-nav a:hover {
  opacity: 1;
}

.project-page-next-arrow {
  margin-right: 0.5em;
}

.project-page h1 {
  margin: var(--heading-gap) 0 0;
  font-family: var(--font-display);
  /* The shared heading token, the same one the home page sets her name in. */
  font-size: var(--font-size-heading);
  font-weight: 700;
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-tracking);
}

.project-page-meta {
  margin-top: var(--spacing-medium);
  font-size: var(--font-size-chrome);
  opacity: 0.7;
}

/* --- copy ----------------------------------------------------------------- */

/* The measure the home page intro also uses, so the two read as one voice
   rather than two column widths. The paragraph and lead rules themselves live
   in styles.css, stated once for both pages. */
.project-page-body {
  max-width: var(--measure);
  padding-bottom: 3.5rem;
  font-size: var(--font-size-body);
}

.project-page-body a {
  color: inherit;
  text-decoration: underline;
}

.project-page-body a:hover {
  text-decoration: none;
}

.project-page-body .credit,
.project-page-body .press {
  font-size: var(--font-size-chrome);
  opacity: 0.75;
}

.project-page-body .credit {
  margin-top: 2.5rem;
  padding-top: var(--spacing-medium);
  border-top: 1px solid currentColor;
}

/* --- the work ------------------------------------------------------------- */

/* One column, then two once there is room for two pictures to be worth looking
   at side by side. A grid rather than floats so a portrait and a landscape
   sitting next to each other keep their own heights. */
.project-page-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--indent);
  align-items: start;
}

@media (min-width: 1200px) {
  .project-page-media {
    grid-template-columns: 1fr 1fr;
  }
}

.project-page-media figure {
  margin: 0;
}

.project-page-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.project-page-video {
  margin: 0;
  aspect-ratio: 16 / 9;
}

.project-page-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}

/* Right-aligned: the one place on this page that is not flush left, because it
   points forward and the arrow should end at the edge it points towards. */
.project-page-nav {
  margin-top: var(--indent);
  padding: 1.5rem 0 5rem;
  text-align: right;
}

/* The footer sits outside main, so it repeats main's own box: full width with
   the indent inside it, flush left like everything above. */
.project-page .footer {
  padding-inline: var(--indent);
}

.project-page .footer-content {
  max-width: none;
  margin: 0;
}

@media (max-width: 768px) {
  .project-page-header {
    padding: 2.5rem 0 2rem;
  }

  .project-page h1 {
    margin-top: 1.5rem;
  }
}

/* Printing on screen: the print JPEG has no layout box and never loads. */
.project-page-media img.print-only {
  display: none;
}

/* Printing a single project is not the pitch deck.

   Cmd+P on the home page produces the 16:9 landscape deck, and that @page rule
   lives in styles.css, which this page also loads — so without overriding it a
   project page printed onto slide-shaped paper. It is a document, so it prints
   as one: A4 portrait, one column, dark ground dropped so it does not empty a
   cartridge, and the pictures swapped to the same JPEGs the deck uses because
   Chrome re-embeds WebP into a PDF at almost no compression. */
@media print {
  @page {
    size: A4 portrait;
    margin: 18mm 16mm;
  }

  .project-page {
    background: #fff;
    color: #000;
  }

  .project-page main {
    padding: 0;
  }

  /* The wordmark and the next-project link are navigation, not content. */
  .project-page-mark,
  .project-page-back,
  .project-page-nav {
    display: none;
  }

  .project-page h1 {
    margin: 0 0 6mm;
  }

  .project-page-body {
    max-width: none;
    padding-bottom: 8mm;
  }

  .project-page-body a {
    text-decoration: none;
  }

  /* One column on a portrait page, and a figure never split across a break. */
  .project-page-media {
    display: block;
  }

  .project-page-media figure {
    margin: 0 0 6mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .project-page-media picture {
    display: none;
  }

  /* Height-capped rather than width-driven. At full width a portrait picture
     is taller than the usable 261mm of an A4 page, so break-inside: avoid threw
     each one onto a page of its own and left two thirds of it blank. Capped,
     two fit comfortably and the run came down from 11 pages to 6. */
  .project-page-media img.print-only {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 115mm;
    height: auto;
    border-radius: 0;
  }

  /* A video is a link on paper; the embed prints as an empty box. */
  .project-page-video {
    display: none;
  }

  .project-page .footer {
    padding: 6mm 0 0;
    background: none;
    color: #000;
    border-top: 0.3mm solid #000;
    break-inside: avoid;
  }

  .project-page .footer .wordmark {
    display: none;
  }
}