/* background.css: styles for the background section only. Use tokens from base.css; prefix every class with .background-. See work/DESIGN.md.

   Markup order: facts, story (opening), story (rest), "Family" heading,
   upright print, group print. The story reads as one run at every width;
   the family photos follow it as their own small subsection.
   phone:   facts as a short ruled list, then the whole story; then the Family
            heading with the two prints under it, set a little apart like loose
            prints on an album page.
   md:      facts in the rail beside the opening; the whole story; then the
            Family heading and the two prints side by side across the page.
   lg:      facts in the rail | the story as one continuous column at the main
            line (6 cols); under it, the Family heading and the two photos laid
            down together like loose prints on a table, overlapping a little at
            opposing angles. The pair spans the whole page width, so it sits
            centred and large.
   Photos are presented as family-album prints: a thin paper border with a
   hairline edge, two black mounting corners, a slight tilt and an italic
   note beneath. The photos never sit inside the reading measure. Both
   photos, the pull quote and the facts are optional: deleting any of them
   leaves the rest in place. */

/* Tilted prints may reach a few pixels past the page edge on phones; clip
   that sideways overflow so the page never scrolls horizontally. */
.section--background { overflow-x: clip; }

/* Spacing between blocks is set with margins rather than a row gap, so the
   two parts of the story join with the prose's own 1em paragraph gap
   whenever nothing sits between them (for example, if the photo is deleted). */
.background-body { row-gap: 0; }
.background-body > * + * { margin-top: var(--space-xl); }
.background-body > .background-story + .background-story--rest { margin-top: 1em; }

/* The story uses the shared .prose block (measure, leading, 1em paragraph
   rhythm) unchanged, in two parts. */

/* Pull quote: the section's one "voice" moment, set between paragraphs. */
.background-story > .background-pull {
  margin-block: var(--space-xl) var(--space-l); /* the italic's descenders add space below */
  padding-top: var(--space-s);
  border-top: var(--border-hair);
}
.background-pull .statement { text-wrap: balance; }

/* The Family heading: an album-page title in italic, like the notes under
   the prints, with a hairline running on to the edge of the page. */
.background-family {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.background-family::after {
  content: "";
  flex: 1;
  border-top: var(--border-hair);
  translate: 0 -0.3em;
}
.background-body > .background-family + * { margin-top: var(--space-m); }

/* Phones: the two prints set a little apart, upright one left, group one right. */
@media (max-width: 47.99em) {
  .background-body > .background-photo--side { width: 82%; justify-self: start; }
  .background-body > .background-photo--wide { width: 88%; justify-self: end; margin-top: var(--space-l); }
}

/* Photos as album prints. `rotate` is used (not `transform`) so the tilt
   combines with the scroll-reveal movement. */
.background-photo {
  position: relative;
  rotate: var(--tilt, 0deg);
}
.background-photo--side { --ratio: 4 / 5; --tilt: -1deg; }
.background-photo--wide { --ratio: 1 / 1; --tilt: 0.8deg; } /* phones: a square keeps a group large */

.background-photo__print { position: relative; display: block; }
.background-photo__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  padding: var(--space-2xs);           /* the print's paper border */
  border: var(--border-hair);
  background-color: var(--bg);
}
/* Two mounting corners, top left and bottom right. */
.background-photo__print::before,
.background-photo__print::after {
  content: "";
  position: absolute;
  width: var(--space-m);
  height: var(--space-m);
  background-color: var(--text);
}
.background-photo__print::before {
  top: calc(-1 * var(--space-3xs));
  left: calc(-1 * var(--space-3xs));
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.background-photo__print::after {
  right: calc(-1 * var(--space-3xs));
  bottom: calc(-1 * var(--space-3xs));
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* A note beneath the print, as if written on the album page. */
.background-photo__caption {
  margin-top: var(--space-xs);
  padding-inline: var(--space-2xs);
  max-width: var(--measure-narrow);
  font-size: var(--step--1);
  font-style: italic;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Crop positions: these frame the current photos' faces; change or delete
   them if you swap a photo. */
.background-photo--side .background-photo__img { object-position: 50% 40%; }
.background-photo--wide .background-photo__img { object-position: 50% 0%; } /* keep the heads */

/* Facts. Phones: a compact ruled list above the story, one pair per line. */
.background-facts {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-xs);
  padding-block: var(--space-s);
  border-block: var(--border-hair);
  max-width: var(--measure);
}
.background-facts > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  column-gap: var(--space-s);
  align-items: baseline;
}
.background-facts dd { margin-top: 0; }

@media (min-width: 48em) {
  .background-story { grid-column: main; grid-row: 1; }
  .background-body > .background-facts + .background-story { margin-top: 0; } /* beside the facts */
  .background-story--rest { grid-row: auto; }
  /* The heading across the page, then the two prints side by side under it,
     the group print a little lower. */
  .background-family { grid-column: full; }
  .background-photo--side { grid-column: 1 / 4; --tilt: -1.25deg; }
  .background-photo--wide { grid-column: 4 / 9; --ratio: 4 / 3; --tilt: 1deg; }
  .background-body > .background-photo--wide { margin-top: calc(var(--space-m) + var(--space-l)); }

  /* Facts in the rail, stacked, beside the story. */
  .background-facts {
    grid-column: rail;
    grid-row: 1 / span 2; /* beside both parts of the story, so no gap opens between them */
    align-self: start;
    row-gap: var(--space-m);
    /* In the rail the rules go; the first label sits on the story's first
       line instead. */
    padding-block: var(--space-2xs) 0;
    padding-right: var(--space-s);
    border-block: 0;
  }
  .background-facts > div { display: block; }
  .background-facts dd { margin-top: var(--space-3xs); }
}

@media (min-width: 64em) {
  /* The two parts of the story read as one column: no row gap between them,
     just the prose's own paragraph spacing. The second row is flexible, so a
     tall photo or facts list adds space after the story, never inside it. */
  .background-body { grid-template-rows: auto 1fr; }
  .background-story { grid-column: 4 / 10; }
  .background-body > .background-story--rest { grid-row: 2; margin-top: 1em; }
  .background-facts { grid-row: 1 / 3; }
  /* Under the whole story: the heading, then the pair. */
  .background-body > .background-family { grid-column: full; grid-row: 3; margin-top: var(--space-2xl); }
  /* The two prints laid down together under the story, across the whole page
     width so the pair is centred: the upright one on five columns (reaching a
     little into the gap), the group print on the remaining seven, lower,
     overlapping its edge (over the booth, never a face). */
  .background-body > .background-photo--side {
    grid-column: 1 / 6;
    grid-row: 4;
    justify-self: stretch;
    align-self: start;
    width: calc(100% + var(--space-m));
    margin-top: var(--space-l);
    --tilt: -1.5deg;
  }
  .background-body > .background-photo--wide {
    grid-column: 6 / 13;
    grid-row: 4;
    align-self: start;
    z-index: 1;
    margin-top: calc(var(--space-l) + var(--space-2xl));
    margin-left: calc(-1 * var(--space-xl));
    /* Nudged a little up and to the right (the note beneath moves with it).
       Change or delete these two lines to adjust the nudge. */
    top: calc(-1 * var(--space-s));
    left: var(--space-s);
    --tilt: 1.25deg;
  }
  /* Its note starts clear of the print it overlaps. */
  .background-body > .background-photo--wide .background-photo__caption {
    padding-left: calc(var(--space-xl) + var(--space-2xs));
  }
  /* Without the upright print, the group print sits under the story on its own. */
  .background-body:not(:has(> .background-photo--side)) > .background-photo--wide {
    grid-column: 3 / 11; /* centred */
    margin-top: var(--space-l);
    margin-left: 0;
  }
  .background-body:not(:has(> .background-photo--side)) > .background-photo--wide .background-photo__caption {
    padding-left: var(--space-2xs);
  }
}