/* About page. Builds on site.css: same ink and paper, same type, page-only components prefixed ab-. */

/* ---------- Hero ---------- */

.ab-hero { padding-top: 168px; position: relative; overflow: hidden; }
.ab-hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px 56px; align-items: end; padding-bottom: clamp(64px, 8vw, 112px); }
.ab-hero__head { display: grid; gap: 28px; justify-items: start; }
.ab-hero h1 { font-size: clamp(46px, 6.6vw, 98px); max-width: 12ch; }
.ab-hero .lede { max-width: 40ch; color: var(--on-ink-muted); padding-bottom: .55em; }
@media (max-width: 960px) {
  .ab-hero__in { grid-template-columns: 1fr; }
  .ab-hero .lede { max-width: 48ch; padding-bottom: 0; }
}

.ab-hero__band .clayband__facts b { font-weight: 500; }

/* ---------- The name: crumb trails ---------- */

.ab-trail { margin: 0; }
.trail--tall { display: none; }
.trail .tr-field circle { fill: var(--line); }
.trail .tr-halo { opacity: .3; }
.trail .tr-t { font-family: var(--serif); font-weight: 650; font-size: 20px; letter-spacing: -0.02em; fill: var(--text); }
.trail .tr-t--sm { font-size: 17px; }
.trail .tr-crumbs circle { fill: var(--text); opacity: var(--o); }
.trail .tr-e1, .trail .tr-e2 { fill: var(--text); }
.trail .tr-e3 { fill: var(--accent); }
.trail .tr-ring { fill: none; stroke: var(--accent); stroke-opacity: .4; stroke-width: 1.5; }

/* animation: starts appear, crumbs follow the trail, the reason lands last */
.trail .tr-start { opacity: 0; transition: opacity .4s var(--ease) calc(var(--d) * .5); }
.trail .tr-crumbs circle { opacity: 0; transition: opacity .3s var(--ease) calc(var(--d) * .5); }
.trail .tr-e1, .trail .tr-e2, .trail .tr-e3, .trail .tr-ring, .trail .tr-end text { opacity: 0; transition: opacity .5s var(--ease); }
.trail .tr-e3 { transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .4s var(--ease) .95s, transform .5s var(--ease) .95s; }
.trail .tr-e1 { transition-delay: .8s; } .trail .tr-e2 { transition-delay: .88s; }
.trail .tr-end text { transition-delay: 1.1s; }
.trail .tr-ring { transform-box: fill-box; transform-origin: center; transition-delay: 2.3s; }
.ab-trail.in .tr-start, .ab-trail.in .tr-e1, .ab-trail.in .tr-e2, .ab-trail.in .tr-end text { opacity: 1; }
.ab-trail.in .tr-crumbs circle { opacity: var(--o); }
.ab-trail.in .tr-e3 { opacity: 1; transform: none; }
.ab-trail.in .tr-ring { opacity: 1; animation: ab-ring 3.2s ease-out 2.6s 3 forwards; }
@keyframes ab-ring { 0% { transform: scale(.7); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }

/* narrower screens: drop the sub-labels and enlarge the titles so nothing renders under ~12px */
@media (max-width: 1180px) {
  .trail--wide .dg-sub { display: none; }
  .trail--wide .tr-t { font-size: 24px; }
  .trail--wide .tr-start .tr-t { transform: translateY(9px); }
}
@media (max-width: 700px) {
  .trail--wide { display: none; }
  .trail--tall { display: block; max-width: 400px; margin: 0 auto; }
}

/* ---------- Where we work: the map ---------- */

.ab-map { margin: 0; }
.wmap .wm-land { fill: none; stroke: var(--on-ink); stroke-opacity: .3; stroke-width: 4.4; stroke-linecap: round; }
.wmap .wm-pt { fill: var(--accent); stroke: var(--accent); stroke-width: 0; }
.wmap .wm-arcs path { fill: none; stroke: var(--on-ink); stroke-opacity: .2; stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wmap .wm-homedot { fill: var(--on-ink); }
.wmap .wm-pulse { fill: var(--on-ink); opacity: 0; transform-box: fill-box; transform-origin: center; }
.wmap .wm-leader { fill: none; stroke: var(--on-ink-muted); stroke-width: 1; }
.wmap .wm-home-t { font-size: 13px; fill: var(--on-ink); letter-spacing: .02em; paint-order: stroke; stroke: var(--ink-2); stroke-width: 6px; stroke-linejoin: round; }
.wmap .wm-labels text { font-size: 13px; fill: var(--on-ink); letter-spacing: .02em; paint-order: stroke; stroke: var(--ink-2); stroke-width: 6px; stroke-linejoin: round; }

.wm-pts .wm-pt { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .55s var(--ease) var(--d); }
.wmap .wm-arcs path { transition: stroke-dashoffset 1.8s var(--ease) var(--d); }
.wmap .wm-labels, .wmap .wm-home { opacity: 0; transition: opacity .8s var(--ease) 1.2s; }
.wmap .wm-home { transition-delay: .1s; }
.ab-map.in .wm-pts .wm-pt { transform: none; }
.ab-map.in .wm-arcs path { stroke-dashoffset: 0; }
.ab-map.in .wm-labels, .ab-map.in .wm-home { opacity: 1; }
.ab-map.in .wm-pulse { animation: ab-pulse 3s ease-out 1s 3; }
@keyframes ab-pulse { 0% { transform: scale(.6); opacity: .5; } 80%, 100% { transform: scale(3.2); opacity: 0; } }

.ab-map__legend { display: none; list-style: none; padding: 0; margin: 18px 0 0; gap: 8px 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--on-ink); letter-spacing: .02em; }
.ab-map__legend li { display: inline-flex; align-items: center; gap: 8px; }
.ab-map__legend .dot { width: 7px; height: 7px; }
.ab-home { width: 7px; height: 7px; border-radius: 50%; background: var(--on-ink); box-shadow: 0 0 0 3px rgba(244,240,232,.18); flex: none; }

@media (max-width: 1180px) {
  .ab-map.figure { padding: 14px 12px 18px; }
  .wmap .wm-labels, .wmap .wm-leader, .wmap .wm-home-t { display: none; }
  .wmap .wm-land { stroke-width: 5.6; stroke-opacity: .36; }
  .wmap .wm-pt { stroke-width: 5; }
  .wmap .wm-arcs path { stroke-width: 2.2; }
  .wmap .wm-homedot { stroke: var(--on-ink); stroke-width: 5; }
  .ab-map__legend { display: flex; }
}
@media (max-width: 520px) { .ab-map__legend { display: grid; grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Numbers ---------- */

.ab-nums { padding: clamp(56px, 7vw, 96px) 0; }
.ab-nums__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ab-nums__grid > div { border-top: 1px solid var(--text); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.ab-nums .serif-num { font-size: clamp(52px, 5.4vw, 80px); white-space: nowrap; }
.ab-nums p { color: var(--muted); font-size: 15px; max-width: 24ch; }
@media (max-width: 860px) { .ab-nums__grid { grid-template-columns: 1fr 1fr; row-gap: 36px; } }

/* ---------- Principles ---------- */

.ab-rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ab-rules li { display: grid; grid-template-columns: 72px minmax(0, .82fr) minmax(0, 1fr); gap: 16px 40px; padding: 30px 0 32px; border-bottom: 1px solid var(--line); align-items: baseline; }
/* small orange text on paper uses the shared --accent-ink, same as the home page */
.ab-rules__n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent-ink); }
.ab-rules h3 { max-width: 24ch; }
.ab-rules .body { max-width: 50ch; }
@media (max-width: 860px) {
  .ab-rules li { grid-template-columns: 1fr; gap: 12px; padding: 24px 0 26px; }
}

/* ---------- Founder note ---------- */

.ab-founder__in { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.ab-founder__photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ink-line); background: var(--ink-2); aspect-ratio: 712 / 970; max-width: 440px; width: 100%; }
.ab-founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-founder__note { display: grid; gap: 28px; align-content: center; }
.ab-letter { display: grid; gap: 1.1em; max-width: 56ch; }
.ab-letter p { font-size: clamp(18px, 1.45vw, 20px); line-height: 1.62; color: var(--on-ink-muted); text-wrap: pretty; }
.ab-letter .ab-letter__open { font-family: var(--serif); font-weight: 650; font-variation-settings: "opsz" 60; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -0.028em; color: var(--on-ink); text-wrap: balance; margin-bottom: .2em; }
.ab-sign { display: flex; align-items: baseline; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--ink-line); max-width: 56ch; }
.ab-sign__name { font-family: var(--serif); font-weight: 650; font-size: 22px; letter-spacing: -0.02em; }
.ab-sign__role { color: var(--on-ink-muted); font-size: 16px; }
@media (max-width: 860px) {
  .ab-founder__in { grid-template-columns: 1fr; }
  .ab-founder__photo { max-width: 300px; }
}

/* ---------- Working here ---------- */

.ab-work { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.ab-work__head { display: grid; gap: 22px; align-content: start; }
.ab-work__head h2 { max-width: 14ch; }
.ab-work__body { display: grid; gap: 28px; padding-top: 6px; }
.ab-work__body .lede { max-width: 44ch; }
.ab-work__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.ab-work__list li { display: flex; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.ab-work__list li span { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); flex: none; }
.ab-work__mail { font-size: 17px; color: var(--muted); }
.ab-work__mail .textlink { color: var(--text); }
@media (max-width: 860px) { .ab-work { grid-template-columns: 1fr; } }

/* ---------- Reduced motion, and no script: show the finished diagrams ---------- */

.no-js .trail .tr-start, .no-js .trail .tr-e1, .no-js .trail .tr-e2, .no-js .trail .tr-end text, .no-js .trail .tr-ring { opacity: 1; }
.no-js .trail .tr-crumbs circle { opacity: var(--o); }
.no-js .trail .tr-e3 { opacity: 1; transform: none; }
.no-js .wm-pts .wm-pt { transform: none; }
.no-js .wmap .wm-arcs path { stroke-dashoffset: 0; }
.no-js .wmap .wm-labels, .no-js .wmap .wm-home { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .trail .tr-start, .trail .tr-e1, .trail .tr-e2, .trail .tr-end text, .trail .tr-ring { opacity: 1; transition: none; }
  .trail .tr-crumbs circle { opacity: var(--o); transition: none; }
  .trail .tr-e3 { opacity: 1; transform: none; transition: none; }
  .ab-trail.in .tr-ring { animation: none; }
  .wm-pts .wm-pt { transform: none; transition: none; }
  .wmap .wm-arcs path { stroke-dashoffset: 0; transition: none; }
  .wmap .wm-labels, .wmap .wm-home { opacity: 1; transition: none; }
  .ab-map.in .wm-pulse { animation: none; }
}

/* the shared partner strip has no side gutter inside .wrap; give it one here */

@media (max-width: 640px) { .ab-hero__band .clayband__facts { gap: 6px 22px; } }

/* Why we started: split like the other sections, small signature portrait */
.ab-why { margin-bottom: 0; align-items: start; }
.ab-why__text { display: grid; gap: 18px; color: var(--on-ink-muted); font-size: 18px; line-height: 1.6; max-width: 52ch; }
.ab-why__text .ab-sign { margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--ink-line); color: var(--on-ink); }
.ab-sign { display: flex; align-items: center; gap: 14px; }
.ab-sign__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; border: 1px solid var(--ink-line-strong); flex: none; }