/* Hero LAYOUT now lives in site.css (.hero). Removed 15 Aug — five parallel copies had
   drifted apart and every fix had to be made five times. This file keeps type/colour only. */
/* =============================================================================
   page-about.css — /about/ only.
   Shared elements (.container, .band, .btn, .arrowlink, .textlink, .eyebrow,
   .t-script, header, footer) come from site.css and are used verbatim; only the
   genuinely About-specific sections live here, all prefixed `about-`.

   Every number is measured off design/About/mockup.png (1602x4165, 1:1) and
   re-solved against the POSITIVELY IDENTIFIED faces (Young Serif 400 / Great
   Vibes 400 / Jost 300 — notes/typography.md). Ink positions quoted in comments
   are mockup y values.
   ============================================================================= */

.page-about {
  /* Display scale — solved by matching RENDERED Young Serif ink width to the
     mockup's measured ink width, per string, not by a cap-ratio assumption:
       h1   "Austin Wedding" 384/799.4 = 48.04 · "Filmmaker — Every Frame"
            638/1328.7 = 48.02 · "Tells the Truth" 358/744.1 = 48.11   -> 48px
       h2   "The Approach" 293/702.3 = 41.72 · "The Journey" 255/611.6 = 41.69
            "Austin — Home Base," 433/1038.8 = 41.68 · "Let's Meet"
            208/499.6 = 41.63                                          -> 41.7px
       h3   "Documentary Heart," 231/1024.9 = 22.54 · "Cinematic Eye"
            160/711.9 = 22.47 · "Destination Ready" 204/906.6 = 22.50  -> 22.5px
       lead "My path into filmmaking..." 690/3077 = 22.42              -> 22.4px
       clos "Every couple..." 605/3146=19.23 · Meet 527 -> 19.22    -> 19.2px
     Young Serif ships ONE weight — font-weight is 400 everywhere below. The old
     700 was synthesised bold and widened every display string. */
  --ab-h1:      48px;
  --ab-h1-lh: 52.5px;   /* mockup h1 line pitch 136->189->241 = 53/52 */
  --ab-h2:    41.7px;
  --ab-h3:    22.5px;
  --ab-h3-lh:   29px;   /* mockup 1175->1204 */
  --ab-lead:  22.4px;
  --ab-lead-lh: 35px;   /* mockup 1790->1825 */
  --ab-close: 19.2px;
  --ab-close-lh:31px;   /* mockup 2188->2219 and 3541->3572 */

  /* Text measures. Body is the SHARED Jost 300 14px/27px. Each measure is the
     bracket [widest mockup line, widest line + next word] evaluated in Jost 14px,
     so every mockup line break is reproduced exactly:
       hero [525.8, 534)  approach [587.6, 594.6)  journey [591.0, 604.1)
       austin [497.2, 512.4)  meet [509.7, 519.7)
     The old values (608/674/688/577/584) were the mockup measures multiplied by
     1.109 to compensate for a wider source face; that compensation is gone. */
  --ab-m-hero:    530px;
  --ab-m-approach:591px;
  --ab-m-journey: 597px;
  --ab-m-austin:  505px;
  --ab-m-meet:    515px;
}

/* --------------------------------------------------------- display type ---
   Young Serif has a single 400 weight — never set 700 here. */
/* Matched to the Home/Films hero tier (Pete, 15 Aug: "h1 size should match the home and films
   pages"). The comp measured this h1 at 48px — an inner-page tier — but with the hero flipped
   onto the same copy-left/photo-right shape as Home and Films, the smaller heading read as a
   different, lesser page. These are the Films hero values (clamp caps at 80px; Home's caps at
   88px only because its title is four short words). */
.about-h1 {
  font-size: clamp(38px, 5vw, 80px);
  line-height: 1.0625;
  font-weight: 400;
}
.about-h2 {
  font-size: clamp(28px, 2.6vw, var(--ab-h2));
  line-height: 1;
  font-weight: 400;
}
.about-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.4vw, var(--ab-h3));
  line-height: calc(var(--ab-h3-lh) / var(--ab-h3));
  font-weight: 400;
  color: var(--burgundy);
}
/* Journey lead — display serif, tan, 22.4/35 (mockup ink 1790-1848) */
.about-lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.4vw, var(--ab-lead));
  line-height: calc(var(--ab-lead-lh) / var(--ab-lead));
  font-weight: 400;
  color: var(--tan);
}
/* the closing statement that ends Journey and Let's Meet — display serif, tan */
.about-closing {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.21vw, var(--ab-close));
  line-height: calc(var(--ab-close-lh) / var(--ab-close));
  font-weight: 400;
  color: var(--tan);
}

/* body block: shared 14/27, 45px paragraph pitch (= 18px margin), measured on
   Approach 1264->1309, Journey 1977->2022, Austin 2869->2914, Meet 3401->3446 */
.about-body p { margin: 0 0 18px; }
.about-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------ split photo/copy shell ---
   hero + austin: full-bleed 50/50, photo left, copy panel right starting at
   x881 (= 801 + 80px inset). */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cream);
}
.about-split__media { position: relative; overflow: hidden; }
.about-split__media img { width: 100%; height: 100%; object-fit: cover; }
.about-split__copy { padding-left: 80px; padding-right: var(--pad); }

/* ================================================================= hero === */
/* photo 801x967 -> the section's height; the header overlays it. */

/* h1 ink top 136; Young Serif 48/52.5 puts ink 3.85 below the box top -> 132 */
.about-hero__title { max-width: 650px; margin-bottom: 0; }
/* body ink top 326; h1 box ends 289.5; Jost 14/27 ink sits 7.58 below box top */
/* Full column width, same as the Home hero (Pete, 15 Aug: "why is text not full width? Why are
   we not just using the same as the homepage hero?"). The comp capped this at a 530px measure
   for a narrower one-column hero; in the flipped split the h1 fills the column and the body
   stopping 300px short looked like a mistake. Home's hero body has no cap either. */
.about-hero__body  { max-width: none; margin-top: 29px; }
/* hero paragraph pitch measures 42 (vs 45 in the other sections) */
.about-hero__body p { margin: 0 0 15px; }
.about-hero__body p:last-child { margin-bottom: 0; }

/* CTA row: 284x44 solid button + arrow link whose rule aligns to the button's
   bottom edge (mockup: button y792-836, underline y834-835). */
.about-hero__cta {
  display: flex;
  align-items: stretch;
  gap: 21px;
  margin-top: 44px;
}
.about-hero__btn { min-height: 44px; padding: 0 32px; }
.about-hero__filmlink {
  color: var(--brown);
  border-bottom-color: #998D83;
  padding-bottom: 0;
  align-items: center;
}

/* ============================================================= approach ===
   band 967-1637 (670). Grid row top = 1112 (quote rule top); last ink = the
   1px link underline at 1494, box bottom 1495 -> bottom padding 142. */
.about-approach { padding: 145px 0 142px; }

/* two-track text grid used by approach + journey: 1fr 2fr / 96px gap
   -> 352 / 704 at x225 and x673 inside the 1152 content box */
.about-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 96px;
}
.about-cols__side  { min-width: 0; }
.about-cols__main  { min-width: 0; }

/* h2 ink 1118 vs row top 1112 -> 4px offset on the side column */
.about-approach .about-cols__side { padding-top: 5px; }
/* h3 ink 1175; h2 box ends 1157.7; Young Serif 22.5/29 ink sits 5.63 down */
.about-approach .about-h3 { margin-top: 12px; max-width: 280px; }

/* the line that sets up the pull-quote — shared body type, sitting one paragraph
   step (18px) above the quote so the block reads as one unit */
.about-approach__intro { margin: 0 0 18px; max-width: var(--ab-m-approach); }

/* pull-quote: 2px tan rule on the left, text inset 28px -> x703.
   line-height 48px makes the box exactly 48 tall so the rule reads 1112-1159. */
.about-approach__quote {
  margin: 0;
  padding-left: 28px;
  border-left: 2px solid var(--tan);
}
.about-approach__quotetext {
  margin: 0;
  /* Great Vibes: mockup ink x703-1066 = 364; GV@100 = 943.9 -> 38.57px */
  font-size: clamp(26px, 2.4vw, 38.6px);
  line-height: 48px;
}

.about-approach .about-body { max-width: var(--ab-m-approach); margin-top: 32px; }

.about-approach__links {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin-top: 34px;
}
/* underline must land on y1494 with the cap row on y1480: 13.19 box + 3 + 1px rule */
.about-approach__links a { line-height: 1.2; padding-bottom: 3px; }
.about-approach__homelink {
  color: var(--body);
  border-bottom-color: #DCD5CF;
  letter-spacing: .15em;
}

/* ============================================================== journey ===
   band 1637-2385 (748). Row top 1783 (lead ink 1790 - 7.08). */
.about-journey { padding: 146px 0 140px; }
.about-journey .about-cols__side { padding-top: 3px; }  /* h2 ink 1787 */
.about-journey .about-lead { max-width: 700px; }
.about-journey__body { max-width: var(--ab-m-journey); margin-top: 25px; }
.about-journey .about-closing { max-width: 630px; margin-top: 26px; }

/* =============================================================== austin ===
   band 2385-3186 (801) — driven by the 801x801 photo. Copy vertically centred.
   `align-self` on the COPY only, not `align-items` on the section: with the full
   approved copy the right column can outgrow the square crop, and centring both
   tracks would leave cream showing above and below the photograph. Stretching the
   media instead lets the 1:1 crop set the band height until the copy exceeds it. */
.about-austin .about-split__copy { align-self: center; }
.about-austin .about-split__media img { aspect-ratio: 1 / 1; }
.about-austin__copy { padding-top: 60px; padding-bottom: 56px; }
.about-austin__sub    { margin-top: 13px; }  /* h2 ink 2602 -> h3 ink 2656 */
/* Great Vibes: mockup ink x881-1225 = 345; GV@100 = 1535.5 -> 22.47px */
.about-austin__script { margin: 34px 0 0; font-size: clamp(18px, 1.4vw, 22.5px); line-height: 1; }
.about-austin__body   { max-width: var(--ab-m-austin); margin-top: 30px; }

/* ============================================================ lets-meet ===
   band 3186-3806 (620). Right column top 3328.4 (body ink 3336 - 7.58). */
.about-meet { padding: 143px 0 147px; }
.about-meet__grid {
  display: grid;
  /* 1fr 1fr / 96 inside the 1152 content box -> 528 tracks at x225 and x849,
     exactly as measured. The 515px body measure now fits the real track, so the
     584px override this file used to carry is gone. */
  grid-template-columns: 1fr 1fr;
  gap: 96px;
}
.about-meet__side { min-width: 0; padding-top: 52px; }  /* eyebrow ink 3390 */
.about-meet__main { min-width: 0; }

.about-meet .about-meet__eyebrow {   /* out-specifies site.css .band--burgundy .eyebrow */
  color: #996761;
  margin-bottom: 18px;               /* h2 ink 3427; .eyebrow inherits the 27px body strut */
}
/* Great Vibes: mockup ink x225-475 = 251; GV@100 = 872 -> 28.78px */
.about-meet__script {
  color: var(--tan);
  margin: 26px 0 0;
  font-size: clamp(22px, 1.8vw, 28.8px);
  line-height: 1;
}

.about-meet__body    { max-width: var(--ab-m-meet); }
.about-meet__closing { max-width: 545px; margin-top: 26px; }

/* The secondary CTA block that closes the page. Same eyebrow/heading/body/button
   rhythm the rest of the page uses — 44px to open a new block, 18px to the body
   under a heading, 32px to a button row. `.about-h3` paints itself burgundy, which
   would vanish on this band, so the cream is restated at 0-2-0 (the same trick the
   eyebrow and wordmark above already need). */
.about-meet .about-meet__subhead { color: var(--cream); margin-top: 44px; }
.about-meet__invite { max-width: var(--ab-m-meet); margin-top: 18px; }
.about-meet__cta    { margin-top: 32px; }
.about-meet__more   { margin: 26px 0 0; max-width: var(--ab-m-meet); }

/* inline link inside running body copy — `.textlink` is an 11px uppercase
   micro-label, so it can't be used mid-sentence; this is that same 1px muted
   underline at body size. */
.about-inlink {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(216, 198, 196, .45);
  transition: text-decoration-color .18s ease;
}
.about-inlink:hover { text-decoration-color: currentColor; }

/* wordmark flanked by two rules, filling the whole 528 track (mock: x849-1376):
   162 + 16 + 172 + 16 + 162 = 528. */
.about-meet__mark {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}
.about-meet__rule { flex: 1 1 0; height: 1px; background: #601420; }
/* Great Vibes: mockup ink x1027-1198 = 172; GV@100 = 976.2 -> 17.62px.
   Two classes needed: site.css `.band--burgundy .t-script` is 0-2-0 and would
   otherwise win and paint this tan instead of the measured muted #996761. */
.about-meet .about-meet__wordmark { color: #996761; font-size: 17.6px; line-height: 1; white-space: nowrap; }

/* ============================================================== responsive ==
   The mockup is a single 1602px desktop frame; everything below is our design
   call, following the site-wide 1200 / 900 / 600 breakpoints. */
@media (max-width: 1200px) {
  .about-split__copy { padding-left: 48px; }
  .about-cols { gap: 64px; }
  .about-meet__grid { gap: 64px; }
  .about-approach { padding: 112px 0 110px; }
  .about-journey, .about-meet { padding: 116px 0 112px; }
  .about-meet__side { padding-top: 0; }
}

@media (max-width: 900px) {
  .about-split__copy { padding-left: var(--pad); padding-right: var(--pad); }
  /* stop bleeding the hero photo under the header: below 900 the crop puts the
     dark side of the photo behind the dark logo and contrast fails. */
  .about-hero .about-split__media img { aspect-ratio: 4 / 3; }
  .about-austin .about-split__media img { aspect-ratio: 4 / 3; }
  .about-austin__copy { padding-top: 64px; padding-bottom: 72px; }

  .about-cols, .about-meet__grid { grid-template-columns: 1fr; gap: 40px; }
  .about-approach .about-cols__side,
  .about-journey .about-cols__side { padding-top: 0; }

  .about-approach { padding: 88px 0; }
  .about-journey, .about-meet { padding: 88px 0; }

  .about-hero__title, .about-hero__body, .about-approach .about-body,
  .about-approach__intro,
  .about-journey__body, .about-journey .about-lead, .about-journey .about-closing,
  .about-austin__body, .about-meet__body, .about-meet__closing,
  .about-meet__invite, .about-meet__more,
  .about-approach .about-h3 { max-width: none; }
}

@media (max-width: 600px) {
  .about-approach, .about-journey, .about-meet { padding: 64px 0; }
  .about-hero__cta { flex-direction: column; align-items: flex-start; gap: 24px; }
  .about-hero__filmlink { padding-bottom: 5px; }
  .about-approach__links { flex-direction: column; align-items: flex-start; gap: 20px; }
  .about-approach__quotetext { line-height: 1.25; }
  .about-meet__mark { gap: 12px; }
  .about-meet__wordmark { font-size: 16px; }
}


/* .about-split still drives the Austin band (the hero moved to the shared .hero component on
   15 Aug). Its one-column stacking was deleted along with the hero rules by mistake, which left
   that band side-by-side on phones — an unreadable ~170px text column beside a cropped face.
   Restored here, and stacked COPY FIRST to match .splitsec and the heroes, so the page keeps
   alternating text/image down the screen instead of putting two photographs together. */
@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; }
  .about-split__copy  { order: 1; padding-left: var(--pad); padding-right: var(--pad); }
  .about-split__media { order: 2; }
  .about-split__media img { aspect-ratio: 4 / 5; width: 100%; height: auto; }
}