/* ═══════════════════════════════════════════════════════════════
   AVIATION AFFAIR — ABOUT PAGE (Page 40)
   Loaded on /about. Contains the editorial layout for the
   manifesto, about-block sections, and host bio.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   35. ABOUT PAGE (Page 40)
   Editorial layout — eyebrow, manifesto headline, deck, then a
   sequence of about-block sections with the host bio block.
   ─────────────────────────────────────────────────────────────── */

.page-about {
  max-width: var(--aa-container);
  margin: 0 auto;
  padding: var(--aa-space-3xl) var(--aa-space-lg) var(--aa-space-2xl);
}

.page-about__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--aa-space-3xl);
}

.page-about__eyebrow {
  font-family: var(--aa-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--aa-accent-bright);
  margin: 0 0 var(--aa-space-md);
}

.page-about__title {
  font-family: var(--aa-font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--aa-space-lg);
  color: var(--aa-ink);
}

.page-about__deck {
  font-family: var(--aa-font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.55;
  color: var(--aa-ink-muted);
  margin: 0;
}

.page-about__body {
  max-width: 720px;
  margin: 0 auto;
}

/* Each major section of the about page */
.about-block {
  margin-bottom: var(--aa-space-3xl);
  padding-bottom: var(--aa-space-2xl);
  border-bottom: 1px solid var(--aa-rule);
}

.about-block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.about-block__heading {
  font-family: var(--aa-font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 var(--aa-space-md);
  color: var(--aa-ink);
}

.about-block p {
  font-family: var(--aa-font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--aa-ink);
  margin: 0 0 var(--aa-space-md);
}

.about-block p:last-child {
  margin-bottom: 0;
}

.about-block__list {
  list-style: none;
  padding: 0;
  margin: var(--aa-space-md) 0 0;
}

.about-block__list li {
  font-family: var(--aa-font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--aa-space-md);
  padding-left: var(--aa-space-lg);
  position: relative;
}

.about-block__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--aa-accent-bright);
  font-family: var(--aa-font-mono);
}

.about-block__list strong {
  color: var(--aa-ink);
  font-weight: 600;
}

.about-block a {
  color: var(--aa-accent-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.about-block a:hover {
  color: var(--aa-ink);
}

/* Host bio block — avatar + bio side-by-side */
.about-host {
  display: flex;
  gap: var(--aa-space-lg);
  align-items: flex-start;
  margin-top: var(--aa-space-md);
}

.about-host__avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aa-accent-bright) 0%, var(--aa-accent) 100%);
  color: #FFFFFF;
  font-family: var(--aa-font-mono);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-host__bio {
  flex: 1;
}

.about-host__bio p {
  margin-bottom: var(--aa-space-sm);
}

.about-host__bio p:last-child {
  margin-bottom: 0;
}

.about-host__bio strong {
  color: var(--aa-ink);
  font-weight: 600;
}

@media (max-width: 600px) {
  .about-host {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-host__bio {
    text-align: left;
  }
}