/* ============================================================
   about.css — about page only. Shared components in site.css,
   all values from tokens.css.
   ============================================================ */

/* ---------- 1 · intro ---------- */
.abt-intro h1 { max-width: 12ch; }
.abt-intro p { max-width: 56ch; }
.abt-lede { font-size: 1.125rem; font-weight: 500; }

/* ---------- 2 · two-era timeline (dark band) ---------- */
.u-sun { color: var(--sun); }
.abt-tl h2 { max-width: 20ch; }
.abt-tl__track { list-style: none; position: relative; display: grid; gap: var(--space-5); margin-top: var(--space-4); }
.abt-tl__track::before { /* vertical sun rule connecting the eras */
  content: "";
  position: absolute;
  top: .5rem; bottom: .5rem; left: 6px;
  width: 3px;
  background: var(--sun);
}
.abt-era { position: relative; padding-left: var(--space-3); display: grid; gap: var(--space-3); }
.abt-era::before { /* era node on the rule */
  content: "";
  position: absolute;
  left: 0; top: .5rem;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 5px var(--char);
}
.abt-era__kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.15;
  color: var(--sun);
  text-wrap: balance;
}
.abt-era__p { max-width: 54ch; color: color-mix(in srgb, var(--paper) 80%, var(--char)); }
/* photos sit INTO the charcoal: tinted, washed, sun rule on top (homepage legacy treatment) */
.abt-era__media { margin: 0; position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--char-2); }
.abt-era__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.3) brightness(.78) contrast(.94);
}
.abt-era__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--char) 50%, transparent) 0%,
      color-mix(in srgb, var(--char) 16%, transparent) 55%,
      color-mix(in srgb, var(--char) 32%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--char) 42%, transparent) 0%, transparent 42%);
}
.abt-era__media::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sun); z-index: 1; }
@media (min-width: 900px) {
  .abt-era { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-4); align-items: start; padding-left: var(--space-4); }
  .abt-era::before { top: .65rem; } /* node sits on the kicker's first line */
}

/* ---------- 3 · values trio ---------- */
.abt-vals { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.abt-val { border-top: 3px solid var(--sun); padding-top: var(--space-2); }
.abt-val h3 { font-size: clamp(1.5rem, 4.5vw, 1.9rem); margin-bottom: .4rem; }
.abt-val p { margin: 0; color: var(--ink-dim); max-width: 38ch; }
@media (min-width: 768px) { .abt-vals { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }

/* ---------- 4 · service area ---------- */
.abt-area p { max-width: 62ch; }