/* ==========================================================
   keeplee - the About page: a story to read. Plain text in one
   column, in the home page's colours, and nothing drawn.
   ========================================================== */
.ab-hero { padding: calc(80px + var(--under, 0px)) 0 80px; background: var(--warm-bg); text-align: center; }
.ab-copy { max-width: 860px; }
.ab-kicker { margin: 0 0 14px; font-weight: 600; color: var(--accent-600); }
.ab-hero h1 { margin: 0 0 20px; font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.ab-hero .lead { max-width: 34em; margin: 0 auto 28px; text-wrap: balance; }

/* Long text reads best from the left, in a column that sits in the middle of the page */
.ab-story { padding: 72px 0; background: #fff; }
.ab-col { max-width: 720px; margin: 0 auto; }
.ab-story h2 { margin: 56px 0 14px; color: var(--navy); font-size: clamp(1.45rem, 2.8vw, 1.9rem); line-height: 1.2; letter-spacing: -.015em; }
.ab-story h2:first-child { margin-top: 0; }
.ab-story p { margin: 0 0 18px; color: var(--ink); font-size: 1.14rem; line-height: 1.75; }
.ab-story p:last-child { margin-bottom: 0; }
.ab-pic { margin: 0 0 24px; }
.ab-pic img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow-sm); }
.ab-shot { margin: 32px 0 0; text-align: center; }
.ab-shot img { border: 1px solid var(--line); box-shadow: var(--shadow); }
.ab-shot figcaption { margin-top: 12px; }
.ab-why { background: var(--bg-soft); }

.ab-us { padding: 60px 0; background: var(--warm-bg); }
.ab-us h2 { margin: 0 0 10px; color: var(--navy); font-size: clamp(1.25rem, 2.4vw, 1.5rem); letter-spacing: -.01em; }
.ab-us p { margin: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.7; }
.ab-us .ab-sign { margin-top: 16px; color: var(--navy); font-weight: 600; line-height: 1.4; }
.ab-sign small { color: var(--muted); font-weight: 500; font-size: .9rem; }

@media (max-width: 639px) {
  .ab-hero { padding-top: calc(48px + var(--under, 0px)); padding-bottom: 56px; }
  .ab-story { padding: 52px 0; }
  .ab-story h2 { margin-top: 44px; }
  .ab-story p { font-size: 1.06rem; line-height: 1.7; }
}