/* =============================================
   ORLÉ — ABOUT PAGE
   Layered on top of style.css + diagnostic.css +
   blog.css. Reuses the hp-*, bd-* and bl-* chrome
   from across the site so About reads as the whole
   practice — not just a letters-author bio.
   ============================================= */

/* ---- Cancel the global p { max-width: 600px } from style.css
       so about sections can flow at full container width. ---- */
.ab-hero p,
.ab-stance p,
.ab-bio p,
.ab-shaped p,
.ab-fitfor p,
.ab-cta p {
  max-width: none;
}


/* =============================================
   HERO — split layout, same chrome as hp-hero.
   Heading row spans, portrait on the right, body
   beneath. Reuses hp-hero classes; this file only
   tunes the copy column for an About-page rhythm.
   ============================================= */
.ab-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hp-maroon);
  margin: 0 0 0.5rem;
}

/* About hero drops the separate .hp-hero-eyebrow paragraph (which was
   uppercase/nowrap on the homepage) and runs the lead as one more body
   paragraph so all four paragraphs wrap the same way and read as one
   block of prose alongside the photo. */
.ab-hero .hp-hero-body-line {
  white-space: normal;
}

/* Vertically center the body column alongside the photo and give it
   breathing room so the four paragraphs stay within the photo's bounds. */
.ab-hero .hp-hero-left {
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ab-hero .hp-hero-body {
  gap: 0.7rem;
}

/* Slightly taller photo gives the body more vertical room without changing
   the homepage hero. */
.ab-hero .hp-hero-photo-wrap {
  max-width: 460px;
}

@media (max-width: 960px) {
  .ab-hero .hp-hero-left {
    justify-content: flex-start;
    padding-top: 1.25rem;
    padding-bottom: 0;
  }
}


/* =============================================
   STANCE — two-column with a pill card on one
   side. Same chrome as hp-reframe / hp-problem
   on the homepage. This file only adds the eyebrow
   block above the heading because the About page
   uses bd-eyebrow rather than hp-section-label.
   ============================================= */
.ab-stance-eyebrow-wrap {
  margin-bottom: 0.75rem;
}


/* =============================================
   BIO — same chrome as hp-whoiam. Blurred portrait
   backdrop, bio column on the left, sharp portrait
   on the right. The bio copy here uses bl-author
   typography so the reading is calmer than the
   homepage Who-I-Am block.
   ============================================= */
.ab-bio-tag {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hp-blue);
  margin: 0 0 0.5rem;
}


/* =============================================
   WHAT SHAPED THIS — vertical chapter list. Mirrors
   bl-letter-list chrome but rows are not links
   (chapters of formation, not posts).
   ============================================= */
.ab-chapter {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding: 1.75rem 0.25rem;
  color: inherit;
}

.ab-chapter-num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-body);
  margin: 0;
  padding-top: 0.35rem;
  color: var(--hp-maroon);
}
.ab-chapter-roman {
  font-size: 1.4rem;
  font-weight: 500;
  font-family: var(--font-heading);
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ab-chapter-tag {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.3rem;
  opacity: 0.8;
}

.ab-chapter-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ab-chapter-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp-navy);
  opacity: 0.55;
  margin: 0;
}
.ab-chapter-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  color: var(--hp-navy);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
}
.ab-chapter-title em {
  font-style: italic;
  font-weight: 500;
  background-image: linear-gradient(var(--hp-blue), var(--hp-blue));
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 84%;
  padding: 0 0.06em;
}
.ab-chapter-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--hp-navy);
  letter-spacing: -0.01em;
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
}
.ab-chapter-text em {
  font-style: italic;
  font-weight: 500;
  color: var(--hp-maroon);
  opacity: 1;
}


/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 640px) {
  .ab-chapter {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.4rem 0.25rem;
  }
  .ab-chapter-roman { font-size: 1.15rem; }
}