/* About page. styles.css (the live site) supplies the header, the about section, the interests strip,
   and the footer; this file adds the new sections and adapts a few headings to the page's hierarchy. */

/* ---------- Intro ---------- */
.about-intro { padding-top: 56px; padding-bottom: 40px; }
.about-page h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--ink);
  text-align: left;
}
.about-intro .section-heading { margin-bottom: 0; }
/* The story heading is an h2 here (the page title is the h1); keep the homepage's h3 look. */
.about-story h2 { font-size: 33px; letter-spacing: -.9px; line-height: 1.14; margin-bottom: 25px; }
.story-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 30px; }
.story-actions .button-blue { padding: 18px 24px 14px; }
.story-actions .text-link { margin-top: 4px; }

/* ---------- Impact ---------- */
.impact { border-top: 1px solid var(--line); }
.impact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.impact-grid li { padding: 34px 28px 36px 0; display: grid; align-content: start; gap: 14px; }
.impact-grid li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.impact-grid strong { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 4vw, 56px); line-height: 1; letter-spacing: -.045em; color: var(--blue); }
.impact-grid span { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 250px; }

/* ---------- Experience ---------- */
/* The impact grid and timeline end in their own rule, so the next section needs no extra border or top padding. */
.experience, .interests { padding-top: 0; }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.role { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr); gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.role-when { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; align-self: start; padding-top: 8px; font-size: 13px; color: #737780; letter-spacing: .01em; }
.now { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 99px; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.now::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3c8a2e; }
.role-body h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.04em; line-height: 1.05; }
.role-title { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--ink); }
.role-summary { margin-top: 14px; max-width: 640px; font-size: 16px; line-height: 1.75; color: var(--text-lead); }
.role-summary a, .role details a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.role details { margin-top: 16px; max-width: 700px; }
.role summary { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 550; color: var(--ink); }
.role summary::-webkit-details-marker { display: none; }
.role summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.role .plus { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #d8d9d8; border-radius: 50%; font-size: 17px; font-weight: 400; color: #6d7379; transition: transform .3s, background .2s, border-color .2s; }
.role summary:hover .plus { border-color: var(--ink); }
.role details[open] .plus { transform: rotate(45deg); background: var(--lime); border-color: var(--lime); color: var(--ink); }
.role details ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.role details li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.7; color: var(--text-body); }
.role details li::before { content: ''; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3.5v17M3.5 12h17M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3.5v17M3.5 12h17M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.role-note { margin-top: 14px; font-family: var(--display); font-style: italic; font-size: 13px; color: #6e7479; }

/* ---------- Interests ---------- */
.interests .personality-strip { margin-top: 0; }

/* ---------- Contact ---------- */

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; translate: 0 18px; transition: opacity .7s cubic-bezier(.2,.8,.2,1), translate .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; translate: 0 0; }
.about-intro > * { animation: hero-in .8s both; }
.about-intro > :nth-child(2) { animation-delay: .12s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid li:nth-child(3) { padding-left: 0; border-left: 0; }
  .impact-grid li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .about-intro { padding-top: 28px; }
  .about-story h2 { font-size: 27px; }
  .about-intro .about-layout { row-gap: 64px; }
  .impact-grid li { padding: 26px 16px 28px 0; }
  .impact-grid li + li { padding-left: 16px; }
  .impact-grid li:nth-child(3) { padding-left: 0; }
  .impact-grid span { font-size: 13px; }
  .role { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .role-when { padding-top: 0; }
  .interests .personality-strip { grid-template-columns: 1fr; }
  .interests .interest-item { justify-content: flex-start; padding: 16px 4px; }
  .interests .interest-item + .interest-item { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 420px) {
  .impact-grid { grid-template-columns: 1fr; }
  .impact-grid li, .impact-grid li + li { padding-left: 0; border-left: 0; }
  .impact-grid li + li { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transition: none; }
}