/* ============================================================
   About — editorial expression.
   Tokens, masthead, footer, .btn, .kicker come from home.css
   (enqueued alongside this file). These rules style the About
   page's own sections only (ab-* namespace).
   ============================================================ */

:root {
  /* fallbacks in case home.css tokens are not present */
  --accent-deep: #2F4A31;
  --accent-2:    #5A8555;
  --faint:       #9A9384;
  --line-2:      #C7C0B0;
}

/* shared section rhythm ---------------------------------------------------- */
.ab-band {
  padding:49px 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.ab-band--alt { background: var(--paper-2); }

.ab-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 8px 0 40px;
}

/* the kicker (.kicker from home.css) sits above each heading; give it space */
.ab-band .kicker,
.ab-hero .kicker,
.ab-cta .kicker { margin-bottom: 6px; }

/* hero -------------------------------------------------------------------- */
.ab-hero {
  padding:56px 0 42px;
  background: var(--paper);
}
.ab-hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 54px;
  line-height: 1.03;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 10px 0 22px;
  max-width: none;
}
.ab-accent { color: var(--accent); }
.ab-hero-sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
  margin: 0;
}
.ab-hero-sub + .ab-hero-sub { margin-top: 16px; }

/* team grid --------------------------------------------------------------- */
.ab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.ab-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding:22px 26px;
  display: flex;
  flex-direction: column;
}
.ab-avatar {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--line-2);
  background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(47,74,49,.06);
}
.ab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.ab-role {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.ab-bio {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.ab-card-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent);
  text-decoration: none;
  margin-top: auto;
  transition: color .2s cubic-bezier(.22,.61,.36,1);
}
.ab-card-link:hover { color: var(--accent-deep); }

/* collaborations ---------------------------------------------------------- */
.ab-collab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
.ab-collab {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap:15px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding:21px 28px;
}
.ab-collab-logo {
  width: 96px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding:8px;
}
.ab-collab-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ab-collab-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 6px;
}
.ab-collab-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* milestones -------------------------------------------------------------- */
.ab-mile-list {
  list-style: none;
  margin: 0; padding:0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.ab-mile {
  position: relative;
  padding-top:22px;
  border-top: 2px solid var(--line-2);
}
.ab-mile::before {
  content: "";
  position: absolute;
  top: -6px; left: 0;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--accent);
}
.ab-mile-year {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--accent);
}
.ab-mile-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  margin: 8px 0 8px;
}
.ab-mile-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* CTA band ---------------------------------------------------------------- */
.ab-cta {
  padding:51px 0;
  background: var(--accent-deep);
  text-align: center;
}
.kicker--on-deep { color: #cfe0cb !important; }
.ab-cta-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 38px;
  letter-spacing: -.015em;
  color: #F3EEE4;
  margin: 8px auto 16px;
  max-width: 20ch;
}
.ab-cta-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: #D8D2C4;
  max-width: 56ch;
  margin: 0 auto 30px;
}
.ab-cta-actions {
  display: flex;
  gap:14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* on the deep-green band, make the ghost button legible */
.ab-cta .btn-o {
  color: #F3EEE4;
  border-color: rgba(243,238,228,.5);
  background: transparent;
}
.ab-cta .btn-o:hover { border-color: #F3EEE4; background: rgba(243,238,228,.08); }

/* responsive -------------------------------------------------------------- */
@media (max-width: 960px) {
  .ab-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-mile-list { grid-template-columns: repeat(2, 1fr); }
  .ab-hero-title { font-size: 42px; }
}
@media (max-width: 620px) {
  .ab-grid,
  .ab-collab-grid,
  .ab-mile-list { grid-template-columns: 1fr; }
  .ab-collab { grid-template-columns: 72px 1fr; gap:11px; }
  .ab-hero-title { font-size: 34px; }
  .ab-hero { padding:42px 0 35px; }
  .ab-band { padding:37px 0; }
}