/* Project pages: written from content/projects/<slug>.json by tools/build-pages.py. Reads every
   value from tokens.css; eyebrows, statements, notes, frames and tiles come from
   components.css.

   Luke 10/9: Chad Dorsey's project pages (Spenser 10/5: quotes, inspo and sketches between
   the photos, and a mood video), in this site's style. Dorsey's order: a large photo, the
   name and a short intro, then photos in pairs and across the page, with words between them:
   designer's notes, a quote, a paragraph. Here every piece is a block on the 12-column grid,
   so a page is a list of blocks in its JSON and any project reuses them:

     full     one horizontal photo across the page, 16:9
     pair     two photos side by side, out to the page's edges: two horizontals at 3:2 or two
              verticals at 4:5 (six columns each; Luke 10/9: not set in from the edges as
              Dorsey's are), or one of each at the same height (the vertical on four columns)
     feature  one vertical photo (columns 7-12, to the edge) with a short note beside it,
              ending at its foot
     text     a paragraph under a rule, in the intro's column (7-11)
     notes    Designer's notes (no heading): numbered figures (concept boards, sketches, inspo) staggered
              down the left, a ruled legend at right (Dorsey's "Fig (No.1)")
     concept  a concept board beside the room it became, the same height, no captions (Luke 10/9)
     quote    a statement-size quote, who said it and their title
     video    a mood video across the page, muted and looping (Spenser: "a feeling")

   Photos and words alternate. Photo blocks sit the gutter apart, down as across (Luke 10/9);
   a block of words gets more room either side (--space-head). See "The space between
   blocks" below. Static: no scroll reveals (Luke 9/30). */

.story {
  container-type: inline-size; /* its width, for blocks whose photos share a height */
  --col: calc((100cqi - 11 * var(--gutter)) / 12); /* one grid column */
  /* The back link sits close under the header (Luke 10/9: it was as far down as the
     portfolio's eyebrow) */
  padding: calc(var(--header-height, 88px) + var(--space-near)) var(--gutter)
    calc(var(--space-page-end) - var(--space-footer-top)); /* plus the footer's own paper */
  background: var(--paper);
  color: var(--ink);
}

/* The space between blocks (Luke 10/9: one rule, by what a block starts and ends with).
   Photo blocks (a photo's edge at their top and bottom: full, pair, feature, concept, video)
   sit the gutter apart, the same as two photos side by side, so rows and columns read as one
   grid. A block of words (intro, text, notes, quote, more projects) gets more room either
   side. The cover sits the tile gap under the intro. */
.story > section + section { margin-top: var(--space-head); }
.story > :is(.story-full, .story-pair, .story-feature, .story-concept, .story-video) + :is(.story-full, .story-pair, .story-feature, .story-concept, .story-video) {
  margin-top: var(--gutter);
}
.story > .project__intro + section { margin-top: var(--space-tiles); }

/* Every block but a full one is laid out on the page's 12 columns */
:is(.project__head, .project__intro, .story-pair, .story-feature, .story-text, .story-notes, .story-concept, .story-quote) {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: start;
}

/* ---------- Head: the way back to the portfolio, then the title in ink (Luke 10/9: no
   eyebrow, no subtitle). The intro follows it, then the cover (Luke 10/9: words first).
   Luke 10/9 on the spacing: the header, the back link, the title and the description each the
   same close gap apart (--space-near; the back link to the title was 63, too far); the cover
   the tile gap under the description's last line. Each gap is measured to capitals and baselines. ---------- */

.project__head { margin-bottom: var(--space-near); }
.story > .project__head + .project__intro { margin-top: 0; } /* the head's own space is the gap */
.project__back { grid-column: 1 / -1; justify-self: start; margin-bottom: var(--space-near); }
.project__back span { text-box: trim-both cap alphabetic; } /* the link is its capitals' height, so the gaps either side are exact */
.project__title { grid-column: 1 / span 8; text-box: trim-both cap alphabetic; }

/* ---------- Intro: the text, and the facts as ruled cells (the footer's) beside it ---------- */
/* The description at left, the location and year at right, out to the edge (Luke 10/9: swapped
   from facts-left). Each cell: a rule, its label, its value, measured to capitals and
   baselines like the footer's. The text starts under a rule of its own, level with the
   first label. */

.project__facts { grid-column: 9 / span 4; }
.project__fact { padding: var(--space-cell-top) 0 var(--space-cell); border-top: var(--hairline-width) solid var(--hairline); }
.project__fact:last-child { padding-bottom: 0; } /* the block ends on its last baseline */
.project__fact dt { margin-bottom: var(--space-cell-label); text-box: trim-both cap alphabetic; }
.project__fact dd, .project__text {
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-text);
  text-wrap: pretty;
}
.project__fact dd { text-box: trim-both cap alphabetic; }
.project__text {
  grid-column: 1 / span 6; max-width: var(--measure);
  padding-top: var(--space-cell-top); border-top: var(--hairline-width) solid var(--hairline);
  text-box: trim-both cap alphabetic;
}

/* ---------- Photos ---------- */

.story-photo .frame { aspect-ratio: var(--ratio, 3 / 2); }
.story-photo--v { --ratio: 4 / 5; }
.story-full .story-photo { --ratio: 16 / 9; }
.story-caption { display: block; margin-top: var(--space-caption); text-box: trim-both cap alphabetic; } /* ends on its baseline, so the gap under it is exact */

/* Pairs */
.story-pair--h > :nth-child(1) { grid-column: 1 / span 6; }
.story-pair--h > :nth-child(2) { grid-column: 7 / span 6; }
/* Verticals out to the edges too (Luke 10/9: no empty columns at the sides) */
.story-pair--v > :nth-child(1) { grid-column: 1 / span 6; }
.story-pair--v > :nth-child(2) { grid-column: 7 / span 6; }
/* One of each: the horizontal on eight columns at 3:2, the vertical on four at its height */
:is(.story-pair--vh, .story-pair--hv) { --pair-h: calc((8 * var(--col) + 7 * var(--gutter)) / 1.5); }
:is(.story-pair--vh, .story-pair--hv) .frame { aspect-ratio: auto; height: var(--pair-h); }
.story-pair--vh > :nth-child(1) { grid-column: 1 / span 4; }
.story-pair--vh > :nth-child(2) { grid-column: 5 / span 8; }
.story-pair--hv > :nth-child(1) { grid-column: 1 / span 8; }
.story-pair--hv > :nth-child(2) { grid-column: 9 / span 4; }

/* A photo is never taller than the screen under the header (at 1920 wide a 4:5 on six columns
   is 1125 tall, a full 16:9 is 1035), so the whole photo can be seen at once. A vertical crops
   toward square and a full one toward 2.4:1, never past them. */
@media (min-width: 601px) {
  .story { --photo-max-h: calc(100svh - var(--header-height, 88px) - var(--gutter)); }
  :is(.story-pair--v, .story-feature, .story-full) .frame { width: 100%; } /* a set width, so the cap trims the height only (an auto width would shrink with it) */
  :is(.story-pair--v, .story-feature) .frame { max-height: max(var(--photo-max-h), calc((100cqi - var(--gutter)) / 2)); }
  .story-full .frame { max-height: max(var(--photo-max-h), calc(100cqi / 2.4)); }
}

/* ---------- Words: a note (components.css), its text alone under the rule (Luke 10/9: no
   eyebrow over it) ---------- */

/* Feature: the note ends level with the photo's foot (as the home's bio does the portrait) */
.story-feature { align-items: end; }
.story-feature__note { grid-column: 1 / span 5; grid-row: 1; }
.story-feature .story-photo { grid-column: 7 / span 6; grid-row: 1; }

.story-text__note { grid-column: 7 / span 5; max-width: var(--measure); }

/* ---------- Designer's notes ---------- */
/* The figures down the left, every other one set in, and the legend beside the first. No
   rules and no eyebrow (Luke 10/9): the boards and their numbers say what it is. Boards are
   drawn on white; multiplied onto the paper, the white is the paper. */

.story-notes__fig { grid-column: 1 / span 7; margin-top: var(--space-tiles); }
.story-notes__fig:nth-of-type(2n) { grid-column: 4 / span 7; }
.story-notes__fig:first-of-type { grid-row: 1; margin-top: 0; }
.story-notes__legend { grid-column: 9 / span 4; grid-row: 1; list-style: none; }
/* Each row a ruled cell, as the facts (tokens.css: the rule to the capitals, the baseline to the
   next rule) */
.story-notes__legend li {
  display: flex; align-items: baseline; gap: var(--space-inline);
  padding: var(--space-cell-top) 0 var(--space-cell);
  border-top: var(--hairline-width) solid var(--hairline);
  font-size: var(--text-body); font-weight: var(--weight-body); line-height: var(--leading-text);
  text-wrap: pretty; /* a long label wraps without leaving one word on its last line */
}
.story-notes__legend li > * { text-box: trim-both cap alphabetic; }
.story-notes__legend .eyebrow { flex: none; width: 3.6em; }

.story-board { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* ---------- Concept: the board and the room, the same height ---------- */

.story-concept { --board-h: calc((8 * var(--col) + 7 * var(--gutter)) * var(--board-ratio, .5625)); } /* the board's height over its width, from the build */
.story-concept__board { grid-column: 1 / span 8; }
.story-concept__room { grid-column: 9 / span 4; }
.story-concept__room .frame { aspect-ratio: auto; height: var(--board-h); }

/* ---------- Quote: the statement size, on the title's columns (1-8) ---------- */

.story-quote__text { grid-column: 1 / span 8; }
/* The name, then the title under it in stone: a .credit (components.css), the closing's (Luke
   10/9: the placeholder title went, Spenser's real one came back) */
.story-quote__cite { grid-column: 1 / span 8; margin-top: var(--space-near); text-box: trim-end cap alphabetic; }

/* ---------- Video ---------- */

.story-video__media {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--photo-backdrop);
}

/* ---------- More projects: two tiles under the shared .more-head and .more-title
   (components.css) ---------- */

/* ---------- Tablet: words and boards take more of the width. The feature and the concept
   keep their side-by-side layouts, which hold down to the phone's. ---------- */
@media (max-width: 989px) {
  .project__title { grid-column: 1 / -1; }
  .project__text { grid-column: 1 / span 7; }
  .project__facts { grid-column: 9 / -1; }
  .story-text__note { grid-column: 7 / -1; }
  .story-notes__fig:nth-of-type(n) { grid-column: 1 / -1; }
  .story-notes__legend { grid-column: 1 / span 8; grid-row: auto; order: 1; margin-top: var(--space-tiles); } /* after the figures */
  .story-quote__text, .story-quote__cite { grid-column: 1 / -1; }
}

/* Tablet and phone: a rule runs the width of its columns, its text still wraps at the
   measure (the space past it is padding), so no rule stops short in mid-column */
@media (max-width: 989px) {
  :is(.project__text, .story-text__note) { max-width: none; padding-right: max(0px, calc(100% - var(--measure))); }
}

/* ---------- Phone: one column ---------- */
@media (max-width: 600px) {
  .story-full .story-photo { --ratio: 3 / 2; }
  .story-pair { row-gap: var(--gutter); } /* stacked, still the gutter apart */
  .story-pair > :nth-child(n) { grid-column: 1 / -1; }
  :is(.story-pair--vh, .story-pair--hv) .frame { height: auto; aspect-ratio: var(--ratio, 3 / 2); } /* the horizontal has no --ratio of its own (it collapsed to nothing here) */
  .project__facts, .project__text, .story-text__note { grid-column: 1 / -1; }
  .project__facts { margin-top: var(--space-near); }
  .story-feature { align-items: start; }
  .story-feature .story-photo { grid-column: 1 / -1; }
  .story-feature__note { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-near); }
  .story-notes__legend { grid-column: 1 / -1; }
  .story-concept__board { grid-column: 1 / -1; }
  .story-concept__room { grid-column: 3 / -1; margin-top: var(--space-tiles); }
  .story-concept__room .frame { height: auto; aspect-ratio: 4 / 5; }
}