/* About page.

   Everything on about.html is a token, a shell component or an interior.css
   band, with one exception: the supporting lines in the hero and the two
   handwritten asides are positioned against THIS portrait, which has the
   subject centre-right and open wall above and left of him. Move the
   photograph and these rules have to move with it.

   Loaded last, after interior.css. */

/* ---------- Hero supporting lines ---------- */

/* The hero carries a short emphasised line before the body paragraph.
   .page-hero__dek is built for a single paragraph at --fs-lead, so the lead
   line gets its own modifier rather than a second, identically styled one. */
.page-hero__dek--lead {
  margin-bottom: var(--sp-3);
  color: var(--wm-ink);
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-sans);
  text-transform: uppercase;
}

/* Place line, sitting under the call to action behind a rule. */
.hero-place {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 470px;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--wm-line);
}

.hero-place svg { flex: none; color: var(--wm-ink); }

.hero-place strong { display: block; font-size: var(--fs-small); font-weight: 600; }

.hero-place span {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* The tagline reuses .eyebrow, which is the system's existing mono caps label,
   and only needs the gap above it. */
.eyebrow.hero-tagline { margin-top: var(--sp-7); }

/* ---------- The two handwritten asides ---------- */

/* Both handwritten notes sit in the blurred gym space left of Sean, clear of
   his head and body. */
.hand-note--hero-note {
  top: clamp(96px, 9vw, 132px);
  left: 67%;
  right: auto;
}

.hand-note--hero-stack {
  left: 67%;
  right: auto;
  bottom: clamp(28px, 4vw, 60px);
  font-size: clamp(18px, 1.6vw, 24px);
  text-align: left;
}

/* The notes are placed against THIS portrait: floated to the right of the copy
   column at full width, and back in the copy column below it. Between roughly
   780px and 1400px the copy column and the subject's head share the same
   horizontal band, so an absolutely positioned note lands on his hair. Keep the
   notes in flow across that whole range and only float them once the
   composition has room again at 1321px and up, where the subject's head has
   cleared the note's column. */
@media (max-width: 1320px) {
  .hand-note--hero-note,
  .hand-note--hero-stack {
    position: static;
    margin-top: var(--sp-5);
    text-align: left;
  }

  .hand-note--hero-note { text-align: left; }
}

/* Keep the headline out of the subject's face.

   The hero is a 65%-wide photograph sitting behind a full-width copy column.
   At the display h1 the headline runs well past the middle of the frame, and
   between about 780px and 1400px the portrait is cropped tall enough that the
   subject's head lands underneath it — the headline crossed his hair and
   forehead, worst near 1024px. Capping the headline to a share of the viewport
   keeps every line in the dark left column with the face whole to its right.
   At 1441px and up the column is wide enough again and the cap is lifted. */
@media (min-width: 781px) and (max-width: 1400px) {
  .about-hero h1 { max-width: 58vw; }
}

/* ---------- Facts columns ---------- */

/* The strapline over the dumbbell photograph. Carried over from the editorial
   page, where it sat as a Fraunces overlay; here it takes the navy system's
   display face and the same corner scrim .region-tile uses, so the type has
   something to sit on whatever the photograph does behind it. */
.principle-band__media { position: relative; overflow: hidden; }

.principle-band__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, oklch(0.13 0.05 255 / 0.82), oklch(0.13 0.05 255 / 0.1) 58%);
  content: "";
}

.media-label {
  position: absolute;
  z-index: 2;
  bottom: var(--sp-4);
  left: var(--sp-4);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-sans);
  text-transform: uppercase;
}

/* The five care cards go five across, which is how the source page laid them
   out. A three-column grid leaves the second row with an empty third cell and
   reads as a hole in the band. */
.card-band .text-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .card-band .text-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .card-band .text-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .card-band .text-card-grid { grid-template-columns: 1fr; }
  .card-band .text-card-grid { margin-left: 0; }
}

/* The two marked columns are sentences, not labels, so they run at body weight
   against the credentials column beside them, which stays heavier. */
.condition-group li.has-mark { font-weight: 400; }
.condition-group li.has-mark div { max-width: 40ch; }

/* ---------- Photographs ride the content column ----------

   The hero portrait and the closing sunset were the last two layers on this
   page running edge to edge while the copy sat in the centred .shell column:
   the hero started at 35vw and ran to the viewport edge on desktop, and went
   full width again below 780px, while the closing photo bled at every width.
   Both now take the shell's width, centring and corner radius, so every
   photograph on the page shares one content column with the text.

   about.css loads after shell.css and interior.css, so the two selectors carry
   enough specificity to re-seat the layers, and the 780px block below restates
   the mobile hero height shell.css gives .page-hero__media. */
.about-hero .page-hero__media,
.about-hero .page-hero__scrim,
.final-cta .final-media,
.final-cta .final-scrim {
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(100% - (var(--gutter) * 2), var(--max-width));
  transform: translateX(-50%);
}

.about-hero .page-hero__media,
.final-cta .final-media { overflow: hidden; border-radius: 16px; }

.about-hero .page-hero__scrim,
.final-cta .final-scrim { border-radius: 16px; }

/* The portrait keeps the framing the inline object-position gave it: subject
   centre-right, head clear of the copy that sits over the left of the frame.
   Declared here rather than inline so the mobile crop can differ. */
.about-hero .page-hero__media img { object-position: 76% 32%; }

@media (max-width: 780px) {
  .about-hero .page-hero__media,
  .about-hero .page-hero__scrim {
    top: 0;
    bottom: auto;
    height: clamp(220px, 42vh, 340px);
  }

  /* Portrait crop, not landscape: at phone width the frame is nearly square,
     so the subject moves back toward the middle and keeps his shoulders. */
  .about-hero .page-hero__media img { object-position: 60% 30%; }
}