/* =========================================================
   About page — personal letter layout
   Author photo + declaration, beige letter card with red
   spine, oversized pull-quote, compact trust badges,
   warm contact card.
   ========================================================= */

.about-wrap { max-width: 780px; margin: 0 auto; padding: 46px 8px 12px; }

/* ---------- Head: photo + declaration ---------- */
.ab-head { display: flex; gap: 28px; align-items: center; margin-bottom: 8px; }
.ab-photo {
  width: 136px; height: 136px; flex: none; object-fit: cover;
  border-radius: 28px; border: 1px solid var(--line); background: #fff;
  box-shadow: var(--shadow-lg);
}
.ab-kicker { color: var(--brand); font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.ab-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ink); letter-spacing: -.02em; line-height: 1.12; margin: 8px 0 10px; }
.ab-lede { color: var(--muted); font-size: 1.02rem; line-height: 1.75; }

.ab-rule { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }

/* ---------- Letter card ---------- */
.ab-letter {
  background: #faf6ee; border-left: 3px solid var(--brand);
  border-radius: 0 16px 16px 0; padding: 32px 36px;
}
.ab-letter p { color: #4c4a44; font-size: 1.03rem; line-height: 1.9; margin-bottom: 22px; }
.ab-letter p:last-child { margin-bottom: 0; }
.ab-letter strong { color: var(--ink); }

/* ---------- Oversized pull-quote ---------- */
.ab-quote { margin: 44px 6px; }
.ab-quote blockquote {
  margin: 0; font-style: italic; font-weight: 600; color: var(--ink);
  font-size: clamp(1.3rem, 2.5vw, 1.65rem); line-height: 1.55; letter-spacing: -.01em;
}
.ab-quote cite { display: block; margin-top: 16px; font-style: normal; font-weight: 700; color: var(--brand); font-size: .95rem; }

/* ---------- Trust badges ---------- */
.ab-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0; }
.ab-badge { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 10px 14px; text-align: center; }
.ab-badge svg { width: 20px; height: 20px; color: var(--brand); margin-bottom: 8px; }
.ab-badge b { display: block; color: var(--ink); font-size: .87rem; font-weight: 700; }
.ab-badge span { display: block; color: var(--muted); font-size: .72rem; line-height: 1.45; margin-top: 3px; }

/* ---------- Contact card ---------- */
.ab-contact {
  margin-top: 38px; background: var(--brand-soft); border: 1px solid #f2d3c9;
  border-radius: 18px; padding: 26px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.ab-contact h2 { font-size: 1.12rem; color: var(--ink); margin: 0 0 5px; }
.ab-contact p { margin: 0; color: #8a6154; font-size: .9rem; }
.ab-contact-right { display: flex; align-items: center; gap: 14px; }
.ab-btn {
  background: var(--brand); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 12px 24px; font-weight: 700; font-size: .92rem;
  box-shadow: var(--shadow); transition: background .15s ease;
}
.ab-btn:hover { background: var(--brand-dark); }
.ab-note { font-size: .82rem; color: #a1796b; }

@media (max-width: 700px) {
  .ab-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ab-badges { grid-template-columns: repeat(2, 1fr); }
  .ab-letter { padding: 24px 22px; }
}