/* About page (layouts/page/about.html, words in data/about.yaml). Editorial layer of the design system:
   cream hero, serif headings with the heavy rule, ruled columns instead of boxes, numbered steps,
   a pull-quote letter, square team photos, certificates at their own proportions. Tokens only. */
.ab { color: var(--c-ink); font-family: var(--f-sans); }
.ab * { box-sizing: border-box; }
.ab-wrap { max-width: calc(var(--w-page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ab a { color: var(--c-link); }

/* Hero */
.ab-hero { background: var(--c-paper); display: grid; gap: var(--s-6); padding: var(--s-7) 0 0; overflow: hidden; }
.ab-hero > .ab-wrap { width: 100%; }
.ab-crumbs { margin: 0 0 var(--s-5); font-size: var(--t-small); color: var(--c-muted); }
.ab-crumbs a { text-decoration: underline; }
.ab-hero h1 { margin: 0; max-width: 16ch; font: 700 var(--t-display)/1.02 var(--f-serif); letter-spacing: -0.01em; color: var(--c-heading); }
.ab-hero h1 span { display: block; }
.ab-lead { margin: var(--s-5) 0 0; max-width: var(--w-text); font-size: var(--t-lead); line-height: 1.45; }
.ab-hero__art { display: block; }
.ab-hero__art .hero-scene-svg { display: block; width: 100%; height: clamp(180px, 26vw, 360px); }
.ab-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.ab-actions--center { justify-content: flex-start; }
.ab-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-5); border: 2px solid transparent; border-radius: var(--r-1); font-weight: 600; text-decoration: none; }
.ab-btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ab .ab-btn--primary { background: var(--c-brand); color: var(--c-on-brand); }
.ab .ab-btn--primary:hover { background: var(--c-brand-deep); }
.ab .ab-btn--ghost { border-color: var(--c-ink); color: var(--c-ink); }
.ab .ab-btn--white { background: var(--c-on-deep); color: #064E3B; }
.ab .ab-btn--outline { border-color: var(--c-on-deep); color: var(--c-on-deep); }

/* On this page */
.ab-jump { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); padding-top: var(--s-4); padding-bottom: var(--s-4); border-bottom: var(--line-hair); }
.ab-jump a { display: inline-block; min-height: 44px; padding: var(--s-2) 0; color: var(--c-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: .3em; }
.ab-jump a:hover { color: var(--c-link); text-decoration-color: currentColor; }

/* At a glance: big figures (owner to confirm each figure, COPY_REVIEW) */
.ab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); padding-top: var(--s-7); padding-bottom: var(--s-4); }
@media (min-width: 760px) { .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-stat { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: var(--line-heavy); }
.ab-stat strong { font: 700 var(--t-h1)/1 var(--f-serif); color: var(--c-figure); }
.ab-stat span { font-size: var(--t-small); color: var(--c-muted); }

/* Sections */
.ab-section { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.ab-section > h2, .ab-band h2 { margin: 0 0 var(--s-3); padding-top: var(--s-3); border-top: var(--line-heavy); max-width: 28ch; font: 700 var(--t-h2)/1.15 var(--f-serif); color: var(--c-heading); }
.ab-sub { margin: 0 0 var(--s-5); max-width: var(--w-text); color: var(--c-muted); line-height: 1.6; }
.ab-band { background: var(--c-paper); }
.ab-band--green { background: var(--c-surface-2); }

/* Ruled columns instead of boxed cards */
.ab-grid { display: grid; gap: var(--s-5) var(--s-6); margin-top: var(--s-5); }
@media (min-width: 760px) { .ab-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ab-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ab-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-card { padding-top: var(--s-3); border-top: var(--line-hair); }
.ab-card h3 { margin: 0 0 var(--s-2); font: 700 var(--t-h3)/1.25 var(--f-sans); color: var(--c-ink); }
.ab-card p { margin: 0; line-height: 1.6; }
.ab-problem ul { margin: 0; padding-left: var(--s-5); list-style: disc; }
.ab-problem li { margin: 0 0 var(--s-2); line-height: 1.5; }
.ab-warning { border-top-color: var(--c-warning); }

/* Numbered steps */
.ab-steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; }
.ab-step { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: var(--line-hair); }
.ab-step__n { font: 700 2.25rem/1 var(--f-serif); color: var(--c-link); }
.ab-step h3 { margin: 0 0 var(--s-1); font: 700 var(--t-h3)/1.25 var(--f-sans); }
.ab-step p { margin: 0; line-height: 1.6; max-width: var(--w-text); }

/* Certificates: their own proportions, no box */
.ab-cert { margin: 0; border-top: 0; padding: 0; }
.ab-cert img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; object-position: left top; background: #FFFFFF; }
.ab-cert figcaption { margin-top: var(--s-2); padding-top: var(--s-2); border-top: var(--line-hair); font-size: var(--t-caption); color: var(--c-muted); }

/* Founder's letter as a pull quote */
.ab-letter { margin: var(--s-5) 0 var(--s-7); padding: 0 0 0 var(--s-5); border-left: 3px solid var(--c-brand); max-width: var(--w-text); }
.ab-letter h3 { margin: 0 0 var(--s-3); font: 700 var(--t-h3)/1.3 var(--f-serif); color: var(--c-heading); }
.ab-letter p { margin: 0 0 var(--s-3); line-height: 1.65; }
.ab-letter footer { font-weight: 600; color: var(--c-muted); }

/* Team: square photos */
.ab-person { border-top: 0; padding: 0; }
.ab-person img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: var(--r-1); background: var(--c-surface-2); }
.ab-person__body { padding-top: var(--s-3); }
.ab-person__body h3 { margin: 0; }
.ab-person__body span { display: block; margin: var(--s-1) 0 var(--s-2); font-size: var(--t-small); color: var(--c-muted); }
.ab-person__body p { font-size: var(--t-small); }

/* Closing field */
.ab-cta { background: var(--c-deep-field); color: var(--c-on-deep); padding: var(--s-8) 0; }
.ab-cta h2 { margin: 0; max-width: 22ch; font: 700 var(--t-h2)/1.15 var(--f-serif); color: var(--c-on-deep); }
.ab-cta h2 span { display: block; }

/* ── Cards, so the page reads in short pieces (Track D Stage D7, 28 Oct 2026; owner: "card like … not tiresome to read").
   Same card language as the homepage and property pages: 22 px corners, icon tiles, one idea per card. ── */
.ab-jump { position: sticky; top: 64px; z-index: 5; flex-wrap: nowrap; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; background: var(--c-surface); }
.ab-jump::-webkit-scrollbar { display: none; }
.ab-jump a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--c-field); border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; }
.ab-jump a:hover { border-color: var(--c-brand); }
.ab-stat { padding: var(--s-4); border: 0; border-radius: var(--r-lg); background: var(--c-tint); }
.ab-stat strong { color: var(--c-tint-ink); }
.ab-stat span { color: var(--c-tint-ink); opacity: .85; }
.ab-grid { gap: var(--s-4); }
.ab-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-card); }
.ab-card h3 { margin: 0; font: 700 1.25rem/1.25 var(--f-serif); color: var(--c-heading); }
.ab-card p { color: var(--c-ink); }
.ab-tile { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s-1); border-radius: var(--r-md); background: var(--c-tint); color: var(--c-tint-ink); }
.ab-tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-problem ul { padding-left: var(--s-4); }
.ab-warning { border-color: var(--c-line); border-left: 4px solid var(--c-warning); }
.ab-warning .ab-tile { background: var(--c-warning-bg); color: var(--c-warning); }
.ab-steps { gap: var(--s-4); }
@media (min-width: 760px) { .ab-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-step { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.ab-step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-round); background: var(--c-brand); color: var(--c-on-brand); font-size: 1.25rem; }
.ab-step h3 { font-family: var(--f-serif); color: var(--c-heading); }
.ab-letter { padding: var(--s-5); border: 1px solid var(--c-line); border-left: 4px solid var(--c-brand); border-radius: var(--r-lg); background: var(--c-paper); }
.ab-person { padding: 0; overflow: hidden; }
.ab-cert { padding: var(--s-3); }