/* ============================================================
   ABOUT PAGE — one small addition on top of main.css.
   Everything else on about.html uses shared classes.
   Loaded AFTER css/main.css.
   ============================================================ */

/* The welcome line gets its own band of air. Without this it sits tucked up
   under the header with roughly twice as much space below it as above, which
   reads as crowded rather than centred. Extra room on top balances it against
   the gap down to the first photo. */
.page-hero {
  /* Air above and below the welcome line, kept roughly equal so it reads as
     centred — but deliberately tight. The full section spacing on both sides
     left the top of the page looking empty. */
  padding-top: calc(var(--header-h) + clamp(4rem, 9vw, 7rem));
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* The biography follows straight on from that welcome line, so it does not
   need the full section padding on top — that stacked with the hero's bottom
   padding and pushed the photos a long way down the page. */
#bio {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* Small labels introducing each paragraph of the biography. They use the house
   eyebrow treatment, with two adjustments:

   1. Room above. .stack spaces everything 1.1rem apart, which is right between
      paragraphs but far too tight between a paragraph and the next heading —
      the label needs to belong to the text below it, not float between the
      two. The two-class selector beats .stack > * + * cleanly rather than
      relying on source order.
   2. Looser tracking than a normal eyebrow. At the standard 0.32em these run
      very wide — "Early years and professional beginnings" is 38 characters —
      and wrap to three lines on a phone. 0.18em keeps the small-caps feel and
      brings that back to two. */
.stack .bio-subhead {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 0.1rem;
  letter-spacing: 0.18em;
  line-height: 1.5;
}

/* the first one follows the pull-quote, which already leaves its own space */
.stack .bio-subhead:first-of-type {
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

/* Beth's mission statement, inside the faith paragraph. Rose, to match the
   excerpt of it on the home page so the two read as the same piece of writing.

   It carries its own class rather than being styled as `#bio em` because the
   biography's other <em>s are show titles — Frozen, Daddy Long Legs, Mean
   Girls, Godspell — and those must stay ink. This is the only italic in the
   biography that is not a title.

   Contrast on the bone background is 5.8:1, comfortably past the 4.5:1 the
   palette rules ask for at body size. */
.bio-mission {
  color: var(--rose);
}

/* On the "Details" split, nudge the facts list down so its first
   rule line sits with the body copy instead of the headline. */
@media (min-width: 901px) {
  #details .facts {
    margin-top: 0.6rem;
  }
}

/* The biography split: running the text to the same depth as the photos ----
   Beth wants the photo column left at its full half-width, but the biography
   beside it was only 1603px against 2803px of pictures, so it floated as a
   short block in the middle with ~600px of empty page above and below it.

   The photos are NOT shrunk here. Two levers on the text side close the gap:

   1. A narrower measure. The same words in a narrower column are taller —
      this is most of the work. 25em keeps a comfortable line length.
   2. space-between. Whatever is still left over is spent on the gaps between
      paragraphs instead of being dumped at the bottom, so the column starts
      and ends level with the photographs.

   If the text ever grows past the photo column, space-between simply stops
   having anything to distribute and the column runs on — it degrades safely. */
@media (min-width: 901px) {
  #bio .split {
    align-items: stretch;
  }


  #bio .split > .stack {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* 20em is the width where the two levers balance. Wider, and space-between
     has too much left to spend — at 25em the paragraphs sat 131px apart and
     read as five disconnected blocks. Narrower, and the line gets cramped.
     Here the leftover comes out at roughly 55px between paragraphs, which
     reads as an airy column rather than a broken one. */
  #bio .split .measure {
    max-width: 20em;
  }
}