/* ABOUT PAGE ----------------------------------------------------------
   Loaded last, after styles.css, site-refresh.css, mobile-fixes.css and
   footer-adjustments.css, and scoped to .page-about so nothing here can
   reach the header, the footer, or any other route.

   Alignment: the header (.hc-head-inner) and the footer (.hc-footer-main
   padding, .hc-footer-base margin) both inset by --page-gutter and carry
   no max-width, so every About section uses the same inset on a
   full-width container. That puts the wordmark, the H1, each section's
   outer edge, the footer wordmark and the copyright rule on one line at
   every width, with the extra room on wide screens going to the columns
   rather than to growing blank margins.

   The old .page-head/.shell/.panel-row markup is gone from the page
   rather than being overridden, so there is no doubled padding to
   unwind and no inherited 74rem shell cap fighting the gutter. */

.page-about {
  --ab-gutter: var(--page-gutter);
  --ab-pad-y: clamp(1.5rem, 1.9vw, 2.25rem);
  --ab-measure: 40rem;
  /* One column gap for every two-column section: 32px up to 40px. */
  --ab-col-gap: clamp(2rem, 2.5vw, 2.5rem);
  /* One artwork column width shared by Why It Exists and Founder, so
     the keys and the portrait sit on the same two edges and the two
     bands read as one pair. */
  --ab-media-col: 0.26fr;
  /* The light sage already used by the Widen the Frame "after context"
     card, reused here rather than introducing a second pale green.
     Body text on it measures 11.6:1, the rust label 5.2:1. */
  --ab-sage: #E8EEE3;
}

/* At 620px and below the header drops to a 1rem inset while the footer
   keeps 1.25rem. These two rules bring the footer to the header's value
   on this page only, so the mobile left edge is a single line as well. */
/* The header and footer now take --page-gutter at every width, so the
   per-page footer corrections this block used to carry are gone. */

/* LAYOUT PRIMITIVES ---------------------------------------------------- */

.page-about main { background: var(--paper); }

.ab-sec { padding-block: var(--ab-pad-y); }
.ab-shell { width: 100%; padding-inline: var(--ab-gutter); }

.ab-sec--paper { background: var(--paper); }
.ab-sec--paper-light { background: var(--paper-light); }
.ab-sec--ink { background: var(--ink-green); }
.ab-sec--sage { background: var(--ab-sage); }

/* TYPE ----------------------------------------------------------------
   One H1, one H2 size shared by all five following sections, one H3 for
   the focus columns, one eyebrow. Scoped to main so the footer's H2s and
   the nav keep their own treatment. */

.page-about main .ab-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s3);
  max-width: none;
}
/* Eyebrow, H3 and lead all sit at (0,2,1) while `.page-about main p` is
   only (0,1,2), so the paragraph rule below cannot reach them. */

.page-about main .ab-h1 {
  font-family: var(--display);
  font-weight: 500;
  /* The same declaration the homepage hero H1 uses, so the two first
     headings are one size. */
  font-size: clamp(3.5rem, 5.9vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.008em;
  color: var(--ink-green);
  margin: 0 0 var(--s3);
  max-width: 15ch;
}

.page-about main .ab-h2 {
  font-family: var(--display);
  font-weight: 500;
  /* Matches .growth-heading on the homepage. */
  font-size: clamp(2rem, 3.7vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.004em;
  color: var(--ink-green);
  margin: 0 0 var(--s3);
}

.page-about main .ab-h3 {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s2);
}

.page-about main p {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--forest);
  max-width: var(--ab-measure);
  margin: 0 0 var(--s3);
}
.page-about main p:last-child { margin-bottom: 0; }

/* 1. ABOUT HUMAN CONTEXT ----------------------------------------------- */

/* The section carries no vertical padding of its own and the shell drops
   its right inset, so the picture runs to the viewport edge and to the
   top and bottom of the band. The copy supplies the rhythm instead: its
   own 40px block padding sets the row height, and the image is taken out
   of flow inside a stretched cell so its square intrinsic size cannot
   force a much taller row. The left inset is untouched, so the copy
   still starts on the header's line. */
.ab-hero { padding-block: 0; }
.ab-hero .ab-shell { padding-right: 0; }

.ab-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ab-col-gap);
  align-items: stretch;
}
.ab-hero-copy { padding-block: 2rem; }
.ab-hero-media {
  position: relative;
  align-self: stretch;
  min-height: 0;
  width: 100%;
}
.ab-hero-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 2. WHY IT EXISTS ----------------------------------------------------
   Artwork, then the eyebrow, heading and prose as one block beside it -
   the same two-column shape the Founder band uses, on the same column
   width. The label and the heading used to sit in their own columns,
   which split one thought across three vertical strips.

   DOM order is artwork then text, so a phone gets the keys above the
   heading, matching Founder's portrait-first stack. The band still
   fills its width with structure rather than with 120-character lines,
   which is what the three columns were for. */
.ab-why-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--ab-media-col)) minmax(0, 1fr);
  column-gap: var(--ab-col-gap);
  row-gap: var(--s4);
  align-items: start;
}
.ab-why-media { width: 100%; }
/* A square area the whole drawing fits inside, so the keys are never
   cropped and fill the shared artwork column rather than a cap of their
   own. */
.ab-why-art {
  display: block;
  /* A little under the shared artwork column, centred in it, so the keys
     read lighter than the portrait without the two columns changing
     width. */
  width: 82%;
  margin-inline: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.page-about main .ab-why-head { margin-bottom: var(--s3); }

/* 3. WHAT WE BELIEVE --------------------------------------------------
   Every piece of text on the ink ground is warm off-white, the eyebrow
   included: the inherited rust and olive are both unreadable here
   (rust measures 2.1:1 on #203329), so they are overridden explicitly
   rather than left to cascade. */

.ab-believe { color: var(--paper-on-dark); }
.page-about main .ab-believe .ab-eyebrow { color: var(--paper-on-dark); }
.page-about main .ab-believe .ab-h2 { color: var(--paper-light); max-width: none; }
.page-about main .ab-believe p { color: var(--paper-on-dark); }

/* Back to two columns, which is what fills this band: stacked, the
   text reached only 56% of the width. What was wrong before was the
   18ch cap on the display line and the small body size, not the pair of
   columns - so the columns return and each one's text now fills it. */
.ab-believe-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 3.4vw, 3.25rem);
  margin-top: clamp(1rem, 1.6vw, 1.35rem);
  align-items: start;
}
.ab-believe-col { max-width: none; }
.ab-believe-col + .ab-believe-col {
  border-left: 1px solid rgba(239, 235, 224, 0.22);
  padding-left: clamp(2rem, 3.4vw, 3.25rem);
}
.page-about main .ab-believe p { max-width: none; }
/* A typographic split of one existing paragraph: the opening sentence is
   set in the display face, the remainder stays in the body style. It is
   not a pull quote, so it takes no quotation marks. */
.page-about main .ab-believe .ab-believe-lede {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem);
  line-height: 1.18;
  letter-spacing: -0.004em;
  color: var(--paper-light);
  max-width: none;
  margin-bottom: var(--s3);
}

/* 4. FOUNDER ---------------------------------------------------------- */

/* Portrait, then the eyebrow, heading and prose as one block beside it,
   on the artwork column Why It Exists shares. */
.ab-founder-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--ab-media-col)) minmax(0, 1fr);
  gap: var(--ab-col-gap);
  align-items: start;
}
/* Centred against the prose rather than aligned to its first line: the
   portrait is much shorter than the four paragraphs beside it, so
   starting both at the top left it hanging off the top of the band. */
.ab-founder-media { width: 100%; align-self: center; }
.ab-founder-media img {
  display: block;
  width: 100%;
  height: auto;
  /* The source is already 1122x1402, so the natural ratio is 4:5 and no
     crop is applied. */
}

/* 5. CURRENT FOCUS ----------------------------------------------------- */

.page-about main .ab-focus-intro {
  /* `.page-about main p` sets the margin shorthand at (0,2,1); an
     unscoped .ab-focus-intro loses to it and collapses to 16px. */
  margin-bottom: 1.5rem;
  max-width: 54rem;
}

.ab-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ab-col-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ab-focus-item { display: flex; flex-direction: column; }
.ab-focus-item + .ab-focus-item {
  border-left: 1px solid rgba(32, 51, 41, 0.14);
  padding-left: var(--ab-col-gap);
}
/* One fixed image slot per column so the three headings start on the
   same line whatever the silhouette. The per-image scale evens out the
   optical weight: the compass is dense and nearly fills its frame, the
   flowering branch is airy and wide, so they are not set to one size. */
.ab-focus-art {
  height: clamp(140px, 11vw, 165px);
  margin-bottom: var(--s3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ab-focus-art img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ab-focus-item--work .ab-focus-art img { max-height: 98%; }
.ab-focus-item--learning .ab-focus-art img { max-height: 96%; }
.ab-focus-item--health .ab-focus-art img { max-height: 100%; }

.page-about main .ab-focus-item p { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); }

/* The closing sentence belongs to all three columns, not to the Work
   one, so the rule runs the full width of the section while the sentence
   itself keeps a reading measure. The margin is restated at matching
   specificity because `.page-about main p` sets the margin shorthand at
   (0,2,1) and `p:last-child` zeroes the bottom. */
/* 12px above the rule and 12px below it: 24px in total, rather than a
   large margin stacked on top of a large padding. */
/* The research-agenda note that used to sit here is gone, so the foot
   carries the link alone. It stays on the left, under the first column,
   rather than floating at the right edge with nothing to balance it.
   flex-wrap and the gap are kept for whatever sits beside it next. */
.ab-focus-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem clamp(1.5rem, 3vw, 3rem);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(32, 51, 41, 0.14);
}
/* Restated at (0,2,1) because `.page-about main p` sets the margin
   shorthand and would otherwise put a bottom margin under the rule. */
.page-about main .ab-focus-note { margin: 0; max-width: 46rem; }
.page-about main .ab-focus-cta { margin: 0; }

/* 6. HOW WE WORK ------------------------------------------------------- */

.ab-how-grid {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: var(--ab-col-gap);
  align-items: stretch;
}
/* The cell stretches to the row, and the picture takes all of it, so
   its top edge starts on the HOW WE WORK label and its bottom edge
   finishes on the button: the two columns balance left to right rather
   than the image floating centred against them. */
.ab-how-media { position: relative; width: 100%; min-height: 260px; }
/* Taken out of flow, the same way the hero photograph is. Left in flow
   the square source contributes its own intrinsic height to the row, so
   on a wide screen - where the column is wide enough that the square is
   taller than the prose - it stretched the band and ran 135px past the
   button at 1920. Absolute, it cannot drive the row at all: the prose
   decides the height and the picture covers exactly that. */
.ab-how-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The existing /method link and its wording are unchanged; only the
   presentation moves from an inline arrow link to the rust button used
   on the newsletter page. */
.page-about main .ab-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s2);
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--rust);
  background: var(--rust);
  color: var(--paper-light);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.page-about main .ab-cta:hover,
.page-about main .ab-cta:focus-visible {
  border-color: #6F3217;
  background: #6F3217;
  color: var(--paper-light);
}
/* The global focus ring is rust, which is invisible against a rust
   button (1:1). Ink green on the section's cream ground measures 11.9:1
   and keeps the ring on the same palette. */
.page-about main .ab-cta:focus-visible {
  outline: 2px solid var(--ink-green);
  outline-offset: 3px;
}
.page-about main .ab-cta .arw { transition: transform 220ms var(--ease); }
.page-about main .ab-cta:hover .arw { transform: translateX(3px); }

/* RESPONSIVE ----------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Both bands stay on one shared artwork column, a little wider here. */
  .page-about { --ab-media-col: 0.3fr; }
  .page-about main .ab-h1 { max-width: none; }
  .ab-how-media { min-height: 240px; }
}

@media (max-width: 960px) {
  .page-about main .ab-h1 { font-size: clamp(3.4rem, 12.5vw, 4.2rem); }
}

@media (max-width: 860px) {
  .ab-hero-grid,
  .ab-how-grid,
  .ab-why-grid,
  .ab-founder-grid,
  .ab-believe-cols { grid-template-columns: minmax(0, 1fr); }

  /* Back to ordinary stacked flow: the picture returns to the page's
     side gutters, takes its natural square again, and no longer bleeds. */
  .ab-hero { padding-block: var(--ab-pad-y); }
  .ab-hero .ab-shell { padding-right: var(--ab-gutter); }
  .ab-hero-copy { padding-block: 0; }
  .ab-hero-media { position: static; justify-self: start; max-width: 520px; }
  .ab-hero-media img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .ab-founder-media { max-width: 250px; }
  /* Stacked, the container is already capped, so the artwork fills it
     rather than being reduced a second time. */
  .ab-why-media { max-width: 200px; }
  .ab-why-art { width: 100%; }
  /* Stacked: back into ordinary flow at its own ratio. */
  .ab-how-media { max-width: 560px; position: static; min-height: 0; }
  .ab-how-media img { position: static; height: auto; aspect-ratio: 16 / 10; }

  /* 16px body, 17px lead, 16px focus descriptions. Each override repeats
     its desktop selector so it clears that rule's specificity. */
  .page-about main p { font-size: 1rem; }
  .page-about main .ab-lead { font-size: 1.0625rem; }
  .page-about main .ab-focus-item p { font-size: 1rem; }

  .ab-believe-cols { row-gap: clamp(1.5rem, 4vw, 2rem); }
  .ab-believe-col + .ab-believe-col {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(239, 235, 224, 0.22);
    padding-top: clamp(1.5rem, 4vw, 2rem);
  }

  .ab-why-grid { row-gap: var(--s3); }
  .ab-why-media { max-width: 168px; }

  .ab-focus-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 2rem); }
  .ab-focus-item + .ab-focus-item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(32, 51, 41, 0.14);
    padding-top: clamp(1.25rem, 4vw, 1.75rem);
  }
  .ab-focus-art { height: 120px; }

  .page-about main .ab-believe .ab-believe-lede { max-width: none; }
  .page-about main .ab-believe p { max-width: none; }
}

@media (max-width: 620px) {
  .page-about main .ab-h2 { font-size: clamp(2rem, 10vw, 3rem); }
}

@media (max-width: 560px) {
  .ab-hero-media { max-width: none; }
  .ab-founder-media { max-width: 260px; }
  .page-about main .ab-cta { width: 100%; justify-content: center; }
}