/* About: personal, curious and grounded in the shared warm-paper identity. */
.about-page { overflow: clip; }
.about-page h2 { margin: 0; font: 600 var(--font-size-h2)/1.15 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.about-page h1 em, .about-page h2 em { color: var(--color-action); font-weight: 600; }
.about-page .about-hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 2.5rem clamp(2rem, 5vw, 5rem); padding-block: 3.5rem 2.5rem; }
.about-page .about-small-mark { display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: var(--color-action); box-shadow: 0 0 0 5px var(--color-action-tint); }
.about-page .about-hero h1 { max-width: 16ch; font-size: clamp(2.75rem, 1.6rem + 3.7vw, 4.6rem); line-height: 1.08; letter-spacing: -.04em; }
.about-page .about-lead { max-width: 44ch; margin: 1.5rem 0 0; color: var(--color-text-secondary); font-size: var(--font-size-lead); line-height: 1.65; }
.about-page .about-location { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 0; font-size: .875rem; color: var(--color-text-secondary); line-height: 1.5; }
.about-page .about-location svg { flex: 0 0 30px; width: 30px; height: 30px; stroke: var(--color-link); stroke-width: 1.25; }
.about-page .about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2rem; }
.about-page .about-actions .button { white-space: normal; }
.about-page .about-text-link { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; font-size: 1rem; font-weight: 500; color: var(--color-text-primary); }
.about-page .about-text-link span { transition: transform .18s ease; }
.about-page .about-text-link:hover span { transform: translate(2px, -2px); }
.about-page .about-portrait { position: relative; min-width: 0; margin: 0; padding: 1rem 1rem 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1.4rem; box-shadow: var(--shadow-panel); transform: rotate(1.3deg); }
.about-page .about-portrait-frame { overflow: hidden; border-radius: .8rem; background: var(--color-surface); }
.about-page .about-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.about-page .about-portrait figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem .2rem 1.25rem; }
.about-page .about-portrait-name { font: 500 1.4rem/1.2 var(--font-display); letter-spacing: -.025em; }
.about-page .about-portrait figcaption > span:last-child { font-size: .75rem; line-height: 1.5; color: var(--color-text-secondary); text-align: right; }
.about-page .about-portrait-note { position: absolute; top: -1.2rem; left: -.6rem; padding: .75rem 1rem; background: var(--color-action-tint); border: 1px solid var(--color-border); border-radius: .5rem; font-size: .75rem; line-height: 1.5; color: var(--color-link); transform: rotate(-4deg); }
.about-page .about-experience { display: grid; grid-template-columns: .8fr 1fr 1fr; grid-column: 1/-1; gap: 2rem; margin: 1.5rem 0 0; padding-block: 2rem 0; border-top: 1px solid var(--color-border); }
.about-page .about-experience > div { display: flex; flex-direction: column-reverse; justify-content: end; gap: .25rem; }
.about-page .about-experience dt { color: var(--color-text-secondary); font-size: .875rem; }
.about-page .about-experience dd { margin: 0; font: 500 clamp(2.3rem, 3.8vw, 3.3rem)/1.2 var(--font-display); letter-spacing: -.035em; }
.about-page .about-experience dd > span { color: var(--color-action); }
.about-page .about-experience > .about-experience-context { flex-direction: column; justify-content: center; gap: .5rem; padding-left: 2rem; border-left: 1px solid var(--color-border); }
.about-page .about-experience-context dt { color: var(--color-link); font-weight: 500; }
.about-page .about-experience-context dd { max-width: 28ch; font: 400 1rem/1.6 var(--font-body); letter-spacing: 0; }
.about-page .about-perspective { padding-block: 4.5rem; }
.about-page .about-perspective-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; }
.about-page .about-prose p { margin: 0 0 1rem; font-size: 1.0625rem; color: var(--color-text-secondary); }
.about-page .about-prose .about-principle { margin: 1.5rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--color-action); color: var(--color-text-primary); font: 500 1.4rem/1.4 var(--font-display); }
.about-page .about-thinking { padding-block: 1rem 5rem; }
.about-page .about-section-heading { display: grid; grid-template-columns: 1fr 1.05fr; align-items: end; gap: 4rem; }
.about-page .about-section-heading > p { max-width: 46ch; margin: 0 0 .2rem; font-size: 1rem; color: var(--color-text-secondary); }
.about-page .about-notebook { margin-top: 2.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); overflow: hidden; background: var(--color-surface); }
.about-page .about-notebook[data-enhanced] { display: grid; grid-template-columns: .9fr 1.1fr; }
.about-page .about-situations { padding: 1rem; background: var(--color-surface-alt); }
.about-page .about-situations button { display: flex; align-items: start; width: 100%; min-height: 104px; gap: .85rem; padding: 1.25rem 1rem; border: 1px solid transparent; border-radius: .85rem; background: transparent; color: var(--color-text-primary); cursor: pointer; text-align: left; font-size: 1rem; font-weight: 500; line-height: 1.4; transition: background .18s, border-color .18s; }
.about-page .about-situations button + button { margin-top: .5rem; }
.about-page .about-situations button:hover { background: var(--color-bg); }
.about-page .about-situations button[aria-selected="true"] { border-color: var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-control); }
.about-page .about-situations button > span:nth-child(2) { min-width: 0; flex: 1; }
.about-page .about-situations small { display: block; margin-top: .4rem; color: var(--color-text-secondary); font-size: .8125rem; font-weight: 400; }
.about-page .about-situation-number { flex-shrink: 0; color: var(--color-link); font-size: .75rem; line-height: 1.9; }
.about-page .about-situation-arrow { flex-shrink: 0; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-link); }
.about-page .about-situations [aria-selected="true"] .about-situation-arrow { background: var(--color-action); border-color: var(--color-action); color: var(--color-on-action); }
.about-page .about-investigations { min-width: 0; }
.about-page .about-investigation { padding: 2rem; scroll-margin-top: 1rem; }
.about-page .about-investigation:focus-visible { outline-offset: -5px; }
.about-page .about-investigation + .about-investigation { border-top: 1px solid var(--color-border); }
.about-page [data-enhanced] .about-investigation { min-height: 100%; border-top: 0; }
.about-page .about-notebook-label { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem; color: var(--color-text-secondary); font-size: .8125rem; }
.about-page .about-notebook-label > span { color: var(--color-link); }
.about-page .about-investigation h3 { margin: 0 0 .85rem; font: 600 1.7rem/1.2 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.about-page .about-investigation > p:not(.about-notebook-label) { margin: 0; color: var(--color-text-secondary); font-size: .9375rem; }
.about-page .about-question-notes { margin: 1.4rem 0; border-top: 1px solid var(--color-border); }
.about-page .about-question-notes > div { display: grid; grid-template-columns: 78px 1fr; gap: .75rem; padding-top: 1rem; }
.about-page .about-question-notes dt { color: var(--color-link); font-size: .8125rem; font-weight: 500; }
.about-page .about-question-notes dd { margin: 0; font-size: .875rem; line-height: 1.6; }
.about-page .about-investigation > .about-next-question { padding-top: 1.1rem; border-top: 1px solid var(--color-border); font-size: .875rem; }
.about-page .about-collaboration { padding-block: 4.5rem; background: var(--color-surface); border-block: 1px solid var(--color-border); }
.about-page .about-audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.about-page .about-audience { padding: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-bg); }
.about-page .about-audience-label { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-size: .8125rem; font-weight: 500; }
.about-page .about-audience-label > span { color: var(--color-link); font-size: .75rem; }
.about-page .about-audience h3 { max-width: 22ch; margin: 0 0 1rem; font: 600 1.75rem/1.2 var(--font-display); letter-spacing: -.025em; }
.about-page .about-audience > p:not(.about-audience-label) { margin: 0; color: var(--color-text-secondary); font-size: 1rem; }
.about-page .about-audience ul { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.about-page .about-audience li { display: flex; align-items: baseline; gap: .65rem; margin-top: .6rem; font-size: .875rem; line-height: 1.5; }
.about-page .about-audience li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-action); flex-shrink: 0; transform: translateY(-2px); }
.about-page .about-scope-note { max-width: 88ch; margin: 1.5rem 0 0; color: var(--color-text-secondary); font-size: .9375rem; }
.about-page .about-reporting { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: center; padding-block: 5rem; }
.about-page .about-reporting-copy > p:not(.eyebrow) { max-width: 48ch; margin: 1.25rem 0 0; color: var(--color-text-secondary); font-size: 1rem; }
.about-page .about-reporting-copy > .about-text-link { margin-top: 1rem; }
.about-page .about-invitation { position: relative; padding: 2.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.about-page .about-invitation-mark { position: absolute; top: 1rem; right: 1.5rem; color: var(--color-action-tint); font: 600 8rem/1 var(--font-display); pointer-events: none; }
.about-page .about-invitation > :not(.about-invitation-mark) { position: relative; }
.about-page .about-invitation h3 { margin: 0; font: 600 clamp(1.7rem, 2.3vw, 2.3rem)/1.2 var(--font-display); letter-spacing: -.03em; }
.about-page .about-invitation > p:not(.eyebrow) { margin: 1.1rem 0 1.5rem; color: var(--color-text-secondary); font-size: 1rem; }
.about-page .about-invitation .button { white-space: normal; }
@media (max-width: 64rem) {
  .about-page .about-hero { gap: 2.5rem 2rem; padding-block: 2.5rem; }
  .about-page .about-hero h1 { font-size: clamp(2.7rem, 5vw, 3.6rem); }
  .about-page .about-portrait figcaption { align-items: start; flex-direction: column; gap: .5rem; }
  .about-page .about-portrait figcaption > span:last-child { text-align: left; }
  .about-page .about-experience { gap: 1.25rem; }
  .about-page .about-experience > .about-experience-context { padding-left: 1.25rem; }
  .about-page .about-perspective-layout, .about-page .about-section-heading, .about-page .about-reporting { gap: 2.5rem; }
  .about-page .about-notebook[data-enhanced] { grid-template-columns: 1fr 1.2fr; }
  .about-page .about-situations { padding: .65rem; }
  .about-page .about-situations button { padding: 1rem .8rem; gap: .6rem; }
  .about-page .about-situation-arrow { display: none; }
  .about-page .about-investigation, .about-page .about-audience { padding: 1.5rem; }
  .about-page .about-invitation { padding: 2rem; }
}
@media (max-width: 47rem) {
  .about-page .about-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2rem; }
  .about-page .about-hero h1 { max-width: 17ch; font-size: clamp(2.6rem, 8.2vw, 3.8rem); }
  .about-page .about-lead { max-width: 48ch; font-size: 1.125rem; }
  .about-page .about-actions { margin-top: 1.5rem; gap: .5rem 1.25rem; }
  .about-page .about-actions .button { width: 100%; }
  .about-page .about-portrait { width: 100%; max-width: 430px; justify-self: center; transform: rotate(.6deg); }
  .about-page .about-portrait figcaption { flex-direction: row; align-items: center; }
  .about-page .about-portrait figcaption > span:last-child { text-align: right; }
  .about-page .about-experience { grid-template-columns: 1fr 1fr; margin-top: .5rem; gap: 1.5rem; }
  .about-page .about-experience dd { font-size: 2.7rem; }
  .about-page .about-experience dt { font-size: .8125rem; }
  .about-page .about-experience > .about-experience-context { grid-column: 1/-1; padding: 1.1rem 0 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .about-page .about-experience-context dd { max-width: 45ch; font-size: .9375rem; }
  .about-page .about-perspective { padding-block: 2.5rem 3.5rem; }
  .about-page .about-perspective-layout, .about-page .about-section-heading, .about-page .about-reporting { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-page h2 { font-size: clamp(1.9rem, 6.5vw, 2.6rem); }
  .about-page .about-prose p { font-size: 1rem; }
  .about-page .about-prose .about-principle { font-size: 1.3rem; }
  .about-page .about-thinking { padding-block: 0 3rem; }
  .about-page .about-notebook { margin-top: 1.75rem; }
  .about-page .about-notebook[data-enhanced] { grid-template-columns: 1fr; }
  .about-page .about-situations { padding: .65rem; border-bottom: 1px solid var(--color-border); }
  .about-page .about-situations button { align-items: center; min-height: 65px; padding: .75rem; gap: .75rem; }
  .about-page .about-situations small { display: none; }
  .about-page .about-situation-arrow { display: grid; }
  .about-page .about-investigation { padding: 1.5rem; }
  .about-page .about-investigation h3 { font-size: 1.6rem; }
  .about-page .about-question-notes > div { grid-template-columns: 1fr; gap: .25rem; }
  .about-page .about-collaboration { padding-block: 3rem; }
  .about-page .about-audiences { grid-template-columns: 1fr; margin-top: 1.75rem; gap: 1rem; }
  .about-page .about-audience h3 { max-width: 26ch; font-size: 1.6rem; }
  .about-page .about-scope-note { font-size: .875rem; }
  .about-page .about-reporting { gap: 2rem; padding-block: 3rem; }
  .about-page .about-invitation { padding: 1.75rem; }
}
@media (max-width: 23rem) {
  .about-page .about-hero h1 { font-size: 2.5rem; }
  .about-page .about-actions { align-items: start; flex-direction: column; }
  .about-page .about-actions .button { gap: .65rem; padding-left: .8rem; font-size: .9375rem; }
  .about-page .about-portrait { padding: .65rem .65rem 0; }
  .about-page .about-portrait-name { font-size: 1.2rem; }
  .about-page .about-portrait figcaption > span:last-child { font-size: .6875rem; }
  .about-page .about-experience dd { font-size: 2.3rem; }
  .about-page .about-investigation, .about-page .about-audience, .about-page .about-invitation { padding: 1.25rem; }
  .about-page .about-situations button { gap: .5rem; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-page *, .about-page *::before, .about-page *::after { transition: none !important; scroll-behavior: auto !important; }
  .about-page .about-text-link:hover span { transform: none; }
}