/*
 * about.css — About page (PLAN Step 13; the client's brand story, Phase 6, E).
 * Consumes tokens.css only; zero literals (no @media needed — the page is a
 * single narrow column at every width). Enqueued only on the `about` page slug
 * (see functions.php).
 *
 * The sitewide section-head pattern (eyebrow/title/lead — mirrors contact.css)
 * over the narrow measure, a two-paragraph intro, four indexed sections that
 * borrow the article's numbered section head (single.css: hairline rule, brand
 * index above the h2, same tokens), and a closing "follow along" block (pill
 * CTAs + social links).
 */

/* — Section rhythm — mirrors .contact-section / .shop-section cadence. — */
.about-section {
  padding-block: var(--space-80);
}

/* Narrow, focused column for editorial copy (the sitewide narrow measure). */
.about__inner {
  max-width: var(--container-narrow);
}

/* ============================================================
 * Head — eyebrow + title + lead (the sitewide section-head pattern).
 * ============================================================ */
.about__head {
  margin-block-end: var(--space-48);
}

.about__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.about__title {
  margin-block-end: var(--space-24);
  letter-spacing: var(--tracking-tight);
}

.about__lead {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ============================================================
 * Intro — the two opening paragraphs.
 * ============================================================ */
.about__body > p,
.about-block > p {
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.about__body > p + p,
.about-block > p + p {
  margin-block-start: var(--space-24);
}

/* ============================================================
 * Story sections — each opens on a hairline rule with its index
 * above the h2 (the article's section head, single.css).
 * ============================================================ */
.about-block {
  margin-block-start: var(--space-64);
  padding-block-start: var(--space-32);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.about-block__title {
  margin-block-end: var(--space-24);
  letter-spacing: var(--tracking-tight);
}

.about-block__title[data-index]::before {
  content: attr(data-index);
  display: block;
  margin-block-end: var(--space-12);
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-brand);
}

/* ============================================================
 * Follow along — the closing beat: lead, pill CTAs, social links.
 * ============================================================ */
.about-follow {
  margin-block-start: var(--space-80);
  padding-block-start: var(--space-48);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.about-follow__lead {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.about-follow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block-start: var(--space-32);
}

.about-follow__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin: var(--space-32) 0 0;
  padding: 0;
  list-style: none;
}

.about-follow__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.about-follow__social-link:hover,
.about-follow__social-link:focus-visible {
  color: var(--color-text);
}

.about-follow__social-icon {
  width: var(--space-20);
  height: var(--space-20);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .about-follow__social-link {
    transition: none;
  }
}