/* ==========================================================================
   Thriving Sons — About page (page-specific styles)
   Reuses tokens, base, components (eyebrow, photo-frame, text-link, philosophy),
   header and footer. Nothing here changes another page.
   ========================================================================== */

/* --- Section 01: Our Story --------------------------------------------------
   Mobile: headline, then the story, then one photograph beneath it.
   64rem+: headline stays in view on the left while the story is read on the right. */
.story {
  padding-block: var(--ts-space-5) var(--ts-space-6);
}

.story__grid {
  display: grid;
  gap: 0;
}

.story__heading { margin-bottom: var(--ts-space-4); }
.story__opening { min-width: 0; }
.story__rest { min-width: 0; }

.story__heading {
  display: grid;
  gap: var(--ts-space-3);
  justify-items: start;
  align-content: start;
}

.story__title {
  font-family: var(--ts-font-display);
  font-size: clamp(2.125rem, 1.4rem + 3.6vw, 3.5rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ts-charcoal);
}

.story__body {
  display: grid;
  gap: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.75;
  color: var(--ts-charcoal-soft);
}

/* The story's internal subheadings */
.story__subhead {
  margin-top: var(--ts-space-3);
  padding-top: var(--ts-space-3);
  border-top: 1px solid rgba(176, 141, 62, 0.38);
  position: relative;
  font-family: var(--ts-font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  font-weight: 700;
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ts-charcoal);
}

.story__subhead::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--ts-gold);
}

/* The turning point of the story, set apart with a gold rule (copy unchanged) */
.story__pull {
  display: grid;
  gap: 0.25rem;
  margin-block: var(--ts-space-1);
  padding-left: var(--ts-space-3);
  border-left: 2px solid var(--ts-gold);
  font-family: var(--ts-font-display);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ts-charcoal);
}

/* Photograph of LJ, beneath the complete story */
.about-photo {
  width: 100%;
  max-width: 18rem;          /* modest portrait on phones */
  margin-top: var(--ts-space-4);
}

.about-photo__frame {
  aspect-ratio: 4 / 5;
  --focus: 50% 25%;
}

.about-photo__caption {
  margin-top: 0.75rem;
  font-family: var(--ts-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ts-charcoal);
}

@media (min-width: 48rem) {
  .story { padding-block: var(--ts-space-6) 6rem; }
  .about-photo { max-width: 22rem; }
}

/* Desktop: label and headline span the top; beneath them the opening of the story
   (left) sits beside one modest portrait of LJ (right, top-aligned with the copy).
   The two subsections then run across the full content width as before. */
@media (min-width: 64rem) {
  .story__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    grid-template-areas:
      "head  head"
      "open  photo"
      "rest  rest";
    column-gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
  }

  .story__heading  { grid-area: head; }
  .story__opening  { grid-area: open; max-width: 44rem; }
  .about-photo     { grid-area: photo; margin-top: 0; }
  .story__rest     { grid-area: rest; }

  /* The continuation spans the full content width (same margins as the rest of the
     site). Full-width lines would be far too long at this type size, so the text flows
     in two readable columns; each subheading spans both columns as a section break. */
  .story__rest { max-width: none; }

  .story__rest .story__body {
    display: block;
    column-count: 2;
    column-gap: clamp(3rem, 5vw, 5rem);
  }

  .story__rest .story__body > p {
    margin: 0 0 1.25rem;
    break-inside: avoid;   /* never split a paragraph across the two columns */
  }

  .story__rest .story__subhead {
    column-span: all;
    margin-top: var(--ts-space-4);
    margin-bottom: 1.25rem;
  }

  .story__rest .story__pull {
    margin-block: 0 1.25rem;
    break-inside: avoid;
  }

}

/* --- Section 02: The Men Behind Thriving Sons ------------------------------------
   Plain cream. Text only: no profiles or photographs.                              */
.men {
  padding-block: var(--ts-space-5);
}

.men__grid {
  display: grid;
  gap: var(--ts-space-3);
}

.men__heading {
  display: grid;
  gap: var(--ts-space-3);
  align-content: start;
}

.men__title {
  font-family: var(--ts-font-display);
  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ts-charcoal);
}

.men__lead {
  max-width: 28rem;
  padding-top: var(--ts-space-2);
  border-top: 2px solid var(--ts-gold);
  font-family: var(--ts-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
  color: var(--ts-charcoal);
}

.men__body {
  display: grid;
  gap: var(--ts-space-2);
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ts-charcoal-soft);
}

@media (min-width: 48rem) {
  .men { padding-block: 6rem; }
}

@media (min-width: 64rem) {
  .men__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
  }
}

/* --- Section 04: Our Commitment ----------------------------------------------------
   Brief. Headline left, copy and link right from 64rem; one column below.            */
.commitment {
  padding-block: var(--ts-space-5);
}

.commitment__grid {
  display: grid;
  gap: var(--ts-space-3);
}

.commitment__title {
  font-family: var(--ts-font-display);
  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ts-charcoal);
}

.commitment__body {
  display: grid;
  gap: var(--ts-space-2);
  justify-items: start;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ts-charcoal-soft);
}

.commitment__lead {
  font-family: var(--ts-font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
  color: var(--ts-charcoal);
}

.commitment__body .text-link { margin-top: var(--ts-space-1); }

@media (min-width: 48rem) {
  .commitment { padding-block: 6rem; }
}

@media (min-width: 64rem) {
  .commitment__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
  }
}

/* --- Section 03: Boy–Warrior–King as gold-outlined cards -----------------------------
   About page only (the homepage uses a different, compact version). Same copy and the
   same charcoal band; each archetype now sits in a thin muted-gold rectangle.
   Mobile and tablet: stacked cards. 72rem+: three equal cards with headings and
   copy aligned across them (the section's existing subgrid rows).                    */
.philosophy--cards .philosophy__journey {
  gap: var(--ts-space-3);
  margin-top: var(--ts-space-4);
}

.philosophy--cards .archetype {
  padding: var(--ts-space-3) 1.25rem;
  border: 1px solid rgba(205, 176, 106, 0.55);
  border-radius: 2px;
  background: none;
}

@media (min-width: 40rem) {
  .philosophy--cards .archetype { padding: var(--ts-space-4); }
}

/* Tablet: one column inside each stacked card (overrides the editorial two-column row) */
@media (min-width: 48rem) and (max-width: 71.999rem) {
  .philosophy--cards .archetype {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    grid-template-rows: none;
    row-gap: var(--ts-space-2);
  }

  .philosophy--cards .archetype__label,
  .philosophy--cards .archetype__title,
  .philosophy--cards .archetype__body { grid-area: auto; }

  .philosophy--cards .archetype__body { max-width: 40rem; }
}

@media (min-width: 72rem) {
  .philosophy--cards .philosophy__journey {
    column-gap: var(--ts-space-3);
    margin-top: var(--ts-space-5);
  }

  .philosophy--cards .archetype {
    padding: var(--ts-space-4);
  }

  /* The border replaces the short gold marker */
  .philosophy--cards .archetype::before { display: none; }
}

/* --- Our Story, second half: "Why Thriving Sons Exists" on a cream-deep band ---------
   Breaks the long cream run. Same text styles and two-column flow as the first half. */
.story--why {
  background: var(--ts-cream-deep);
  padding-block: var(--ts-space-5);
}

.story--why .story__subhead {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.story--why .story__subhead::before { display: none; }

@media (min-width: 48rem) {
  .story--why { padding-block: 5rem; }
}
@media (min-width: 64rem) {
  .story--why { padding-block: 6rem; }
  .story--why .story__rest .story__subhead { margin-top: 0; }
}