/* ============================================================
   about.css — about.html (loaded alongside vertical.css)
   ============================================================ */

/* ---- founder ---- */
.founder { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 800px) { .founder { grid-template-columns: minmax(0, 320px) 1fr; gap: var(--sp-8); } }
.founder__media .slot { aspect-ratio: 3 / 4; }

.founder__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}
.founder__name { font-size: var(--step-l); }
.founder__role {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-block-end: var(--sp-4);
  display: block;
}
.founder__quote {
  font-family: var(--font-display);
  font-size: var(--step-l);
  font-stretch: 104%;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-block: var(--sp-5);
  max-width: 22ch;
}
.founder__quote-attr {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  color: var(--muted);
  display: block;
  margin-block-start: var(--sp-3);
}
.founder__body { color: var(--muted); }
.founder__body p + p { margin-block-start: var(--sp-4); }

/* ---- principles ---- */
.principles { display: grid; gap: 0; margin-block-start: var(--sp-7); }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
  border-block-start: 1px solid var(--line);
}
@media (min-width: 900px) {
  .principle { padding-inline-end: var(--sp-6); }
  .principle + .principle { border-inline-start: 1px solid var(--line); padding-inline-start: var(--sp-6); }
}
.principle:last-child { border-block-end: 1px solid var(--line); }
@media (min-width: 900px) { .principle { border-block-end: 1px solid var(--line); } }
.principle h3 { font-size: var(--step-m); font-stretch: 100%; }
.principle p { color: var(--muted); font-size: var(--step-sm); }

/* ---- the two offices ---- */
.offices { display: grid; gap: var(--sp-6); margin-block-start: var(--sp-7); }
@media (min-width: 768px) { .offices { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); } }
.office {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.office--primary { border-color: var(--accent); }
.office__label {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hi);
  display: block;
  margin-block-end: var(--sp-4);
}
.office__role { color: var(--muted); font-size: var(--step-sm); margin-block-end: var(--sp-5); }
.office address {
  font-style: normal;
  line-height: 1.7;
  color: var(--muted);
  font-size: var(--step-sm);
}
.office address a { color: var(--text); text-decoration: none; }
.office address a:hover { color: var(--accent-hi); }