/* About page (all versions): the same look as the live case studies (very light cream, green
   serif headings, peach accents, white cards with thin edges), with the page's own touches on top
   in each version's file (a1-journey.css, a2-profile.css, a3-editorial.css). */
.page-about {
  --bg: #FFFDFA; --status-bg: rgba(255, 253, 250, 0.9);
  --ink: #262A22; --text: #34382F; --soft: #64685D; --line: #E6DCCB; --box-line: #DCCFBA;
  --head: #3F5B38; --kicker: #C46B5C; --peach: #F3B9A3; --peach-wash: rgba(240, 160, 130, 0.1);
  --sage-wash: #EEF3E8; --card: #FFFFFF;
}
.page-about .app { padding: clamp(92px, 11vw, 128px) var(--gutter) 160px; }
.ab { display: grid; gap: 0; max-width: 1040px; margin: 0 auto; }
.ab p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text); }
.ab h2, .ab h3 { margin: 0; }

/* Section rhythm: a thin line above each section, a big green serif heading, then the content */
.ab-sec { padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.ab-h { font-family: var(--font-head); font-weight: 400; font-size: clamp(36px, 4.2vw, 52px); line-height: 1.05; color: var(--head); }
.ab .ab-h + * { margin-top: 36px !important; }
.ab-kicker { margin: 0 0 10px !important; font-size: 12.5px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker) !important; }
.ab-lede { font-family: var(--font-head); font-size: clamp(24px, 2.6vw, 31px) !important; line-height: 1.3 !important; color: var(--kicker) !important; text-wrap: balance; }

/* Buttons: Résumé (filled green) and LinkedIn (outline) */
.ab-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; color: #FFFFFF; background: var(--accent); transition: transform 0.3s var(--ease), filter 0.3s; }
.ab-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ab-btn.is-quiet { color: var(--accent); background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.ab-btn svg { width: 16px; height: 16px; }

/* Tags (languages, skills): the same faint peach as the case-study tags */
.ab-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab-tags li { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #B4604F; background: var(--peach-wash); }
.ab-tags li small { margin-left: 4px; font-size: 12px; color: var(--soft); }
.ab-tags.is-green li { color: #3B5536; background: var(--sage-wash); }

/* School logos: same height, never stretched */
.ab-logo { display: block; width: auto; height: 34px; max-width: 150px; object-fit: contain; }

/* Empty photo slots for more pictures later */
.ab-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-photo-slot { display: grid; place-content: center; gap: 4px; aspect-ratio: 4 / 5; border-radius: 16px; text-align: center; background: #F6F1EA; box-shadow: inset 0 0 0 1.5px var(--line); }
.ab-photo-slot span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); }
.ab-photo-slot small { font-size: 12.5px; color: var(--soft); }

/* Hobbies and fun facts (placeholder text for now) */
.ab-fun { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ab-fun li { padding: 20px 22px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--box-line); }
.ab-fun h3 { margin-bottom: 6px; font-size: 17px; font-weight: 600; color: var(--ink); }
.ab-fun p { font-size: 15px; line-height: 1.6; }
.ab-fun-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; color: var(--kicker); background: var(--peach-wash); }
.ab-fun-icon svg { width: 22px; height: 22px; }

/* Fun facts: big light peach numbers, like Key Decisions */
.ab-facts { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: fact; }
.ab-facts li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; padding: 20px 24px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--box-line); counter-increment: fact; }
.ab-facts li::before { content: counter(fact, decimal-leading-zero); font-family: var(--font-head); font-style: italic; font-size: 56px; line-height: 1; color: #F4B3A2; opacity: 0.55; }

.ab-sub { margin: 40px 0 16px !important; font-size: 12.5px !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker) !important; }
.ab-sub:first-child { margin-top: 0 !important; }

@media (max-width: 600px) {
  .ab-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-facts li { grid-template-columns: 1fr; gap: 4px; }
  .ab-facts li::before { font-size: 44px; }
}