/* ==========================================================================
   About page — Option C extensions
   Loads after base.css + option-c.css. Extends the botanical-journal system
   with About-only components; tokens come from base.css untouched.
   ========================================================================== */

/* Mobile hygiene (GLM-set lesson): no horizontal document scroll, ever */
body { overflow-x: clip; }

/* --- Hero (About cover) -------------------------------------------------------- */
.hero-sub--about { max-width: 52ch; }

/* --- Chapter 01 — The Letter ------------------------------------------------------ */
.letter-body p + p { margin-top: 20px; font-size: 1.02rem; line-height: 1.75; max-width: 58ch; }
.letter-sign {
  margin-top: clamp(28px, 4vw, 40px);
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--shiitake);
}

/* --- Chapter 02 — The Practitioners ------------------------------------------------- */
.c2-grid--pros { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.texture-panel--portrait { height: min(560px, 72vh); position: sticky; top: 108px; }
.texture-panel--portrait img { object-position: center 24%; }
.cred { padding: 26px 0; border-top: 1px solid rgba(84, 90, 61, 0.25); }
.cred:first-of-type { border-top: 0; padding-top: 0; }
.cred h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 10px; }
.cred p { color: var(--shiitake); line-height: 1.7; max-width: 56ch; }
.cred p + p { margin-top: 12px; }

/* --- Chapter 03 — The Method (reuses .tenets) ----------------------------------------- */
.c3m .tenet p + p { margin-top: 10px; }
.c3m .chapter-title { max-width: 26ch; }

/* --- Chapter 04 — The Proof: full awards list ------------------------------------------- */
.recog-list--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .recog-list--full { grid-template-columns: minmax(0, 1fr); } }

/* --- Chapter 06 — The House --------------------------------------------------------------- */
.house-intro { font-size: 1.05rem; line-height: 1.7; color: var(--cypress-deep); max-width: 52ch; margin-bottom: clamp(24px, 3vw, 36px); }
.house-list { display: grid; }
.house-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 24px; padding: 20px 0; border-top: 1px solid var(--stucco-tint);
}
.house-mark {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--jet); text-decoration: none;
  transition: color var(--t-hover);
}
a.house-mark:hover { color: var(--cypress); }
.house-note { font-size: 0.85rem; font-weight: 600; color: var(--cypress); }
.ethos { margin: clamp(40px, 6vw, 64px) 0 0; max-width: 62ch; }
.ethos h3 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 14px;
}
.ethos p { line-height: 1.72; color: var(--shiitake); }
.ethos p + p { margin-top: 12px; }
.ethos p:last-of-type { font-family: var(--serif); font-style: italic; color: var(--cypress-deep); font-size: 1.1rem; }
.services-index { margin-top: clamp(36px, 5vw, 56px); }
.services-index h3 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.5rem; margin-bottom: 6px;
}
.services-index > p { font-size: 0.9rem; color: var(--shiitake); max-width: 56ch; }
.services-index ul { margin-top: 14px; display: grid; gap: 0 48px; }
@media (min-width: 720px) { .services-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.services-index li { padding: 12px 0; border-top: 1px solid var(--stucco-tint); font-size: 0.93rem; line-height: 1.55; color: var(--shiitake); }

/* Boutiques inside chapter 06 */
.c6-about { padding-top: clamp(40px, 6vw, 72px); }
.bout-tel { margin-top: 4px; font-size: 0.85rem; }
.bout-tel a { text-decoration: none; color: var(--cypress); font-weight: 600; }
.bout-tel a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Responsive ------------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .c2-grid--pros { grid-template-columns: minmax(0, 1fr); }
  .texture-panel--portrait { height: 320px; position: static; }
  .texture-panel--portrait img { object-position: center 20%; }
}