/* ============================================================
   about.css — the "About Chris" page
   The homepage makes the promise; this page is the person behind
   it. His face leads, then his story, how he runs the practice,
   the record, and the character quotes. Calm editorial register,
   same tokens as the rest of the site.
   ============================================================ */

/* ---------- Hero ----------
   The About hero reuses the homepage hero wholesale (styles/sections/hero.css):
   identical grid, gaps, padding, type scale, figure size, and grounding band.
   The ONLY differences on this page are the grounding image (the office instead
   of the skyline) and the copy — everything else must stay pixel-identical to home. */
.hero--about .hero__skyline {
  background-image: url("../../images/office-2880w.webp");
  background-position: center 40%;
}
@media (max-width: 900px) {
  .hero--about .hero__skyline {
    background-image: url("../../images/office-960w.webp");
  }
}

/* Section headings across the page share the homepage section-heading scale. */
.about-prose__title,
.practice__title,
.credentials__title,
.character__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.about-prose__title em,
.practice__title em,
.credentials__title em,
.character__title em { font-style: italic; color: var(--blue); }

/* ---------- His story: editorial rail (heading left, prose right) ---------- */
.about-prose { padding-block: clamp(4rem, 9vw, 7rem); }
.about-prose--paper   { background: var(--paper); }

.about-prose__inner {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
.about-prose__title { margin-top: var(--space-3); }

.about-prose__body { max-width: 40rem; }
.about-prose__body p {
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.about-prose__body p + p { margin-top: var(--space-4); }

/* ---------- How I run my practice: two principle pillars ---------- */
.practice {
  background: var(--paper-2);
  padding-block: clamp(4rem, 9vw, 7rem);
}
.practice__head { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.practice__title { margin-top: var(--space-3); }

.practice__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
/* each principle sits in its own light card on the darker beige */
.practice__pillar {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.practice__icon {
  width: 30px;
  height: 30px;
  color: var(--blue);
  margin-bottom: var(--space-3);
}
.practice__lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.practice__text {
  margin-top: var(--space-3);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- The record: numbered flow (mirrors the homepage "How I work" rows) ---------- */
.credentials {
  background: var(--paper);
  padding-block: clamp(4rem, 9vw, 7rem);
}
.credentials__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.credentials__title { margin-top: var(--space-3); }

.credentials__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.credentials__row {
  display: grid;
  grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(0.9rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.credentials__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-deep);
}
.credentials__term {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.credentials__detail {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- In his clients' words: one-quote slider with side arrows ---------- */
.character {
  background: var(--paper-2);
  padding-block: clamp(4rem, 9vw, 7rem);
}
.character__head { margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }
.character__title { margin-top: var(--space-3); }

.character__slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 2rem);
}
/* same circular chevron control as the homepage slider; the dead-end arrow fades */
.character__arrow {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
}
.character__arrow:hover:not([aria-disabled="true"]) { border-color: var(--ink); background: rgba(50,47,42,0.03); }
.character__arrow[aria-disabled="true"] { opacity: 0.28; cursor: default; }

.character__viewport {
  flex: 1 1 auto;
  display: grid;               /* stack quotes in one cell → height holds the tallest */
  max-width: 50rem;            /* ~25% wider than before, so the quote fills more of the row */
  text-align: center;
}
.character__quote {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
  pointer-events: none;
}
.character__quote.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.character__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 0.5;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.character__text {
  font-family: var(--font-body);
  font-size: 1.0625rem;        /* standard body copy */
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
}
.character__author {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ---------- Responsive ----------
   The hero's responsive behavior comes from hero.css (shared with home). */
@media (max-width: 860px) {
  .about-prose__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .practice__grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.25rem); }
}
/* numbered record: keep the number beside the label, stack the detail under */
@media (max-width: 760px) {
  .credentials__row {
    grid-template-columns: auto 1fr;
    gap: 0.3rem clamp(1rem, 3vw, 1.5rem);
  }
  .credentials__num { grid-row: span 2; }
}
@media (max-width: 520px) {
  .character__arrow { width: 44px; height: 44px; }
  .character__slider { gap: 0.35rem; }
}