/*
 * about.html — the lockup, the four "who" plates, the project's own strip
 * map, the quoted plate and the 10% plate.
 *
 * Builds on site.css (the .route strip map, .tithe--plate and .pullquote are
 * all from there). Everything here is the resting state; js/about.js rises
 * the plates in with Web Animations and counts the four figures, and with
 * the script off or motion refused the page simply stands.
 */

/* ── The head: copy left, the lockup right ──────────────────────────────── */

/* The heavy rule closes the whole head (copy and lockup), not the copy alone. */
.about-head {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: start;
  border-bottom: 2px solid var(--ink);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) { .about-head { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); } }
.about-head__text { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
/* The four prose headings are h2s under the page's one h1, kept at the
   size and weight the page was drawn with (site.css's ruled .prose h2 is the
   legal pages' register). */
.prose h2 { font-size: 1.5rem; margin: 2rem 0 0.6rem; padding-top: 0; border-top: 0; }
/* The page's one h1 sits where the other sections put their h2, at that size. */
.section .about-head__text h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); margin-bottom: 0.9rem; max-width: 26ch; }
.about-lockup { margin: 0; max-inline-size: 30rem; }
@media (min-width: 900px) { .about-lockup { max-inline-size: none; } }
.about-lockup picture, .about-lockup img { display: block; inline-size: 100%; block-size: auto; }
.about-lockup img { border: 1px solid var(--rule); }
.about-lockup figcaption { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); line-height: 1.5; margin-top: 0.5rem; }

/* ── Who: four ink plates, no portraits ─────────────────────────────────── */

.who {
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .who { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .who { grid-template-columns: repeat(4, 1fr); } }
.who__plate {
  background: var(--ink);
  color: var(--ground);
  border-inline-start: 6px solid var(--tick, var(--plate-accent));
  padding: 0.9rem 1.1rem 1rem;
  min-width: 0;
}
.who__role {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rule-2);
  margin-bottom: 0.45rem;
}
.who__plate b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.02; color: var(--ground); margin-bottom: 0.4rem; }
.who__plate p { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--rule-2); max-width: none; }

/* ── The line so far ───────────────────────────────────────────────────── */

.about-line { margin: 2.5rem 0 2rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.about-line__head { margin: 0 0 0.5rem; }
.about-route { --route-color: var(--line-orange); }
.about-route .route__meta a { color: var(--accent); font-style: normal; }

/* ── The quoted plate ──────────────────────────────────────────────────── */

.about-quote {
  margin: 1.5rem 0 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  background: var(--ink);
  color: var(--ground);
  border-inline-start: 6px solid var(--line-green-lit);
  max-width: 46rem;
}
.about-quote p {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  color: var(--ground);
  max-width: 24ch;
  text-wrap: balance;
}
.about-quote p::before { content: "\201C"; color: var(--plate-accent); margin-inline-end: 0.1em; }
.about-quote p::after { content: "\201D"; color: var(--plate-accent); margin-inline-start: 0.05em; }
.about-quote footer { font-family: var(--mono); font-size: 0.75rem; color: var(--rule-2); line-height: 1.5; }
.about-quote footer a { color: var(--plate-accent); }

/* ── The 10% plate: the figure at 120 px ───────────────────────────────── */

.about-tithe { margin-top: 1.25rem; }
.about-tithe .tithe__figure { font-size: clamp(3.4rem, 8vw, 6.5rem); letter-spacing: -0.02em; }
.about-after { margin-top: 2.5rem; }
.about-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
/* .prose a's accent would paint the primary button's label blue on blue. */
.prose .btn--primary, .prose .btn--primary:hover { color: var(--on-accent); }
.prose .btn:not(.btn--primary) { color: var(--ink); }
.prose .btn:not(.btn--primary):hover { color: var(--ground); }

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .who__plate b { font-size: 1.4rem; }
  .about-cta .btn { flex: 1 1 100%; }
}

.who__plate:hover .who__role, .who__plate:focus-within .who__role { color: var(--plate-accent); }
.about-lockup img { transition: border-color 160ms ease; }
.about-lockup:hover img, .about-lockup:focus-within img { border-color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .who__plate {
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .who__plate:hover, .who__plate:focus-within { transform: translateY(-4px); }
  .about-quote {
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .about-quote:hover { transform: translateY(-2px); }
  .about-tithe {
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .about-tithe:hover { transform: translateY(-2px); }
}