/* /about — long-form. Uses only the tokens already declared in styles.css:
   no new colours, no new fonts, no new card patterns. Buttons are the shared
   .btn / .btn--dark / .btn--ghost. Headings reuse the site's existing clamps. */

.about { background: var(--card); }

/* ---------- hero ---------- */
.ahero {
  padding-block: clamp(56px, 8vw, 104px) clamp(28px, 4vw, 44px);
  padding-inline: max(var(--pad), calc((100% - var(--content)) / 2));
}
.ahero h1 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(36px, 4.6vw, 64px);   /* same clamp as the landing h1 */
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.036em;
  color: var(--ink-deep);
}
.ahero__sub {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--muted);
}
.ahero__act { margin: 28px 0 0; }

/* ---------- prose column ----------
   Sits inside the site container, then narrows to a readable measure.
   Not full width, per the brief. */
.aprose {
  padding-block: 0 clamp(56px, 8vw, 104px);
  padding-inline: max(var(--pad), calc((100% - var(--content)) / 2));
}
.aprose__main { max-width: 68ch; }

/* Outline rail visuals live in toc.css; this is only the /about layout. */
@media (min-width: 1120px) {
  .aprose {
    display: grid;
    grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .atoc { --toc-offset: clamp(40px, 5.5vw, 72px); }   /* aligns with the first h2 */
}

.asec { margin-top: clamp(40px, 5.5vw, 72px); }
.asec h2 {
  margin: 0 0 20px;
  font-size: clamp(23px, 2.5vw, 33px);   /* same clamp as existing section heads */
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--ink-deep);
  scroll-margin-top: 96px;               /* clears the sticky nav on anchor jumps */
}
.asec p {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.68;
  letter-spacing: -.008em;
  color: var(--ink);
}
.asec p:last-child { margin-bottom: 0; }

/* the line section 2 turns on: largest non-heading type on the page */
.aq {
  margin: 26px 0 26px !important;
  font-size: clamp(21px, 2.2vw, 29px) !important;
  font-weight: 600;
  line-height: 1.28 !important;
  letter-spacing: -.026em !important;
  color: var(--ink-deep);
}

/* pull statement — weight and colour only, no vertical accent bar */
.astatement {
  margin: 24px 0 24px !important;
  font-size: clamp(18px, 1.7vw, 22px) !important;
  font-weight: 600;
  line-height: 1.36 !important;
  letter-spacing: -.022em !important;
  color: var(--accent-700);
}

/* the "never do" / "world after" items: prose with a bolded lead, not cards */
.alead { margin-bottom: 16px; }
.alead strong { color: var(--ink-deep); font-weight: 600; }

/* section 7 is the quietest block on the page */
.asec--quiet p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.asec--quiet h2 { color: var(--ink); font-size: clamp(19px, 1.8vw, 24px); }

.alink { color: var(--accent-700); text-decoration: underline; text-underline-offset: 2px; }
.alink:hover { color: var(--ink-deep); }

/* ---------- fold ---------- */
.afold {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
}
.afold__more { cursor: pointer; font-family: var(--sans); }

/* ---------- the rest of the story ----------
   Rendered in the DOM on load and hidden with CSS only, so it is crawlable.
   `inert` (set in the markup, removed by about.js) keeps the collapsed links
   out of the tab order without taking them out of the document. */
.amore {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 300ms ease, visibility 0s linear 300ms;
}
.amore.is-open {
  visibility: visible;
  transition: max-height 300ms ease, visibility 0s;
}
.amore.is-done { max-height: none; overflow: visible; }

/* closing block */
.aclose { margin-top: clamp(40px, 5.5vw, 72px); }
.aclose p {
  margin: 0 0 16px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.022em;
  color: var(--ink-deep);
}
.aclose__act { margin: 0 0 32px !important; }
.aclose__act:last-child { margin-bottom: 0 !important; }

@media (max-width: 640px) {
  .afold .btn, .aclose__act .btn { width: 100%; justify-content: center; }
}

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