/* ==========================================================================
   About

   A long read that somebody chose. The whole design problem is: do not make
   1,100 words look like 1,100 words. So the page is built in beats rather
   than as one slab — a short lede, one wide image, three sections, and two
   lines that stand alone — and the measure never gets wider than something
   you can read without losing your place returning to the left edge.

   Borrowed deliberately from the legal pages, which solved the same problem
   for documents nobody chose: narrow shell, generous leading, headings you
   can scan for. The difference is that this one is meant to be enjoyed, so it
   gets air where the legal pages get density.
   ========================================================================== */

.bl-aboutpage {
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--bl-section-y);
}

/* 34rem is roughly 68 characters at this size — the long end of comfortable.
   The portrait breaks out of it below, which is the point of setting it. */
.bl-aboutpage .bl-shell { max-width: 38rem; }

/* Header ------------------------------------------------------------------ */

/* Two lines, not one wrapped one: the role and the description are separate
   facts and reading them as a single sentence made the second half look like
   a continuation of the first. Spans rather than a <br> so the break is a
   layout decision and can be undone in a media query without touching the
   markup. */
.bl-aboutpage__eyebrow {
  margin-bottom: var(--bl-space-3);
  font-size: var(--bl-size-sm);
  font-weight: var(--bl-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--bl-text-muted, var(--bl-text-on-light-muted));
}

.bl-aboutpage__eyebrow span {
  display: block;
  text-wrap: balance;
}

.bl-aboutpage__title {
  margin-bottom: 0;
  text-wrap: balance;
}

/* The brand name ---------------------------------------------------------- */

/* Set in the mark's own blue wherever it appears in the prose.

   Not --bl-cyan. The brand cyan (#03d9dd) is 1.75:1 against the white page,
   which is not a near miss — it is roughly the contrast of light gray on
   white, and it fails AA for text of any size. The deep blue is the same hue
   family at 4.85:1, so it still reads as the brand color and can actually be
   read. In dark mode the page flips to a near-black panel, where the real
   cyan clears 10:1, so that is where it gets used.

   <b> rather than <strong>: this is a typographic convention, and a screen
   reader should not stress the name six times in one page. */
.bl-brandname {
  font-weight: var(--bl-weight-bold);
  color: var(--bl-blue-deep);
}

/* Inside the lines that are already bold, go heavier so the name still
   separates from the sentence around it. */
.bl-aboutpage__stand .bl-brandname,
.bl-aboutpage__beat .bl-brandname {
  font-weight: var(--bl-weight-black);
}

@media (prefers-color-scheme: dark) {
  body:not(.bl-theme-fixed) .bl-brandname { color: var(--bl-cyan); }
}

/* Lede -------------------------------------------------------------------- */

/* A step up from the body, so the first thing you read is the easiest thing
   to read, and the page gets smaller rather than larger as you commit. */
.bl-aboutpage__lede {
  margin-top: var(--bl-space-7);
  font-size: var(--bl-size-lead);
  line-height: 1.6;
  letter-spacing: -0.012em;
}

.bl-aboutpage__lede > * + * { margin-top: var(--bl-space-5); }

/* Motion ------------------------------------------------------------------ */

/* One direction for the whole page.

   The shared system has two arrivals: the default rises 26px out of a blur,
   and "soft" settles 6px DOWN. Used together on one page — headings on one,
   paragraphs on the other — they read as two animations arguing, because
   that is what they are. Everything here rises instead, at one magnitude,
   on one curve. The only thing that varies is when: a heading lands first,
   then the paragraphs under it cascade 80ms apart.

   16px rather than the system's 26px because this page has forty elements
   on it; at full travel the scroll feels like a swell. */
.bl-aboutpage [data-enter] {
  transform: translateY(16px);
  filter: blur(5px);
}

/* Specificity note: the rule above is .bl-aboutpage [data-enter] (0,2,0) and
   lives in a later stylesheet than [data-enter].is-entered (0,2,0) — so
   without this it would win and nothing would ever finish arriving. */
.bl-aboutpage [data-enter].is-entered {
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .bl-aboutpage [data-enter] { transform: none; filter: none; }
}

/* Portrait ---------------------------------------------------------------- */

/* One column, and the picture breaks out of it.

   A sidecar was tried here — the portrait beside the first section, text
   wrapping down its left — and it was wrong for a reason worth writing down:
   making room for a 21rem image meant moving the text column's left edge,
   so the lede above it and the story below it no longer started at the same
   place. The eye reads that as a layout coming apart, not as a magazine
   spread. A measure this narrow has nowhere to put a second column without
   borrowing from the first.

   So the image gets the full width instead and the prose never moves. The
   frame is uncropped at every size: the room is the content.

   margin-left: 50% plus a -50% translate centers it on the column however
   much wider than the column it is, which the usual negative-margin
   arithmetic does not survive at every viewport. */
.bl-aboutpage__portrait {
  width: min(56rem, calc(100vw - 2rem));
  margin-left: 50%;
  translate: -50% 0;
  /* The breath on either side of the picture is what makes it a pause rather
     than an interruption, so it is deliberately larger than the space between
     any two paragraphs. */
  margin-block: clamp(3.5rem, 2rem + 5vw, 6rem);
}

.bl-aboutpage__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bl-radius-lg);
  /* The photograph is already dark at the edges; a heavy shadow under it
     reads as a second, muddier border. This is just enough to lift it off
     the page. */
  box-shadow: 0 18px 40px rgba(0, 0, 0, calc(0.16 * var(--bl-shadow-boost)));
}

/* Body -------------------------------------------------------------------- */

.bl-aboutpage__body {
  font-size: var(--bl-size-body);
  line-height: 1.75;
}

.bl-aboutpage__body > * + * { margin-top: var(--bl-space-5); }

/* No rule above these, unlike the legal pages. A horizontal line every few
   hundred words turns a story into a contract; the space does the work. */
.bl-aboutpage__body h2 {
  /* Roughly three blank lines at the top of the range. At --bl-space-9 the
     headings sat close enough to the paragraph above that the page read as
     one continuous block with bold lines in it. */
  margin-top: clamp(3.25rem, 2.25rem + 3vw, 5rem);
  font-size: var(--bl-size-h3);
  font-weight: var(--bl-weight-black);
  line-height: 1.2;
  letter-spacing: var(--bl-track-heading);
  text-wrap: balance;
  scroll-margin-top: 7rem;
}

.bl-aboutpage__body em { font-style: italic; }

/* Links are set in the brand blue and underline on hover, matching the
   footer. The offset keeps the rule off the descenders. */
.bl-aboutpage__body a,
.bl-aboutpage__onward-small a {
  color: var(--bl-blue);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color var(--bl-dur-fast, 160ms) var(--bl-ease-out, ease);
}

.bl-aboutpage__body a:hover,
.bl-aboutpage__body a:focus-visible,
.bl-aboutpage__onward-small a:hover,
.bl-aboutpage__onward-small a:focus-visible {
  text-decoration: underline;
  color: var(--bl-blue-deep);
}

/* "I was fascinated." / "I was 11." — three-word paragraphs that are doing
   the work of a pause. Left at body size but given their own air, because
   enlarging them would turn a beat into an announcement. */
.bl-aboutpage__beat {
  margin-top: var(--bl-space-6) !important;
  margin-bottom: var(--bl-space-6);
  font-weight: var(--bl-weight-bold);
}

/* The two sentences the page is actually built to deliver. */
.bl-aboutpage__stand {
  margin-top: var(--bl-space-7) !important;
  font-size: var(--bl-size-lead);
  font-weight: var(--bl-weight-bold);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* The quote --------------------------------------------------------------- */

.bl-aboutpage__quote {
  margin: var(--bl-space-7) 0 !important;
  padding: var(--bl-space-6) 0;
  border-top: 1px solid var(--bl-border);
  border-bottom: 1px solid var(--bl-border);
  text-align: center;
}

.bl-aboutpage__quote p {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: var(--bl-weight-black);
  line-height: 1.2;
  letter-spacing: var(--bl-track-heading);
  text-wrap: balance;
}

/* Onward ------------------------------------------------------------------ */

.bl-aboutpage__onward {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: var(--bl-space-7);
  border-top: 1px solid var(--bl-border);
  text-align: center;
}

.bl-aboutpage__onward-note {
  margin-bottom: var(--bl-space-5);
  font-size: var(--bl-size-lead);
  font-weight: var(--bl-weight-medium);
  text-wrap: balance;
}

.bl-aboutpage__onward-small {
  margin-top: var(--bl-space-5);
  font-size: var(--bl-size-sm);
  line-height: 1.6;
  color: var(--bl-text-muted, var(--bl-text-on-light-muted));
}

/* Two lines: the terms on one, the invitation on the other. Left as a
   wrapped sentence, "Or" ended up stranded at the end of the first line,
   which read as a broken thought rather than an offer. */
.bl-aboutpage__onward-small span {
  display: block;
  text-wrap: balance;
}

/* Narrow ------------------------------------------------------------------ */

@media (max-width: 560px) {
  /* Edge to edge. At this width the margins were taking more from the
     picture than they were giving to the page. */
  .bl-aboutpage__portrait { width: 100vw; }
  .bl-aboutpage__portrait img { border-radius: 0; }
}