/* About page — content specific to /about. Shared header/drawer/footer/
   page-hero CSS lives in /static/base.css. */

.about-main { max-width: 720px; margin: 0 auto; padding: 36px 24px 60px; }

.about-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow); margin-bottom: 24px;
}
.about-card h2 {
  font-family: 'DM Serif Display', serif; font-size: 1.25rem; color: var(--ink); margin-bottom: 14px;
}
.about-card p { font-size: 0.92rem; color: var(--ink-light); line-height: 1.75; margin-bottom: 14px; }
.about-card p:last-child { margin-bottom: 0; }
.about-card a { color: var(--accent); text-decoration: none; font-weight: 500; }
.about-card a:hover { text-decoration: underline; }
.about-byline { font-size: 0.8rem; color: var(--ink-faint); font-weight: 600; letter-spacing: 0.03em; margin-bottom: 4px; }

.about-disclaimer {
  background: var(--warn-light); border-radius: 7px; padding: 12px 14px;
  font-size: 0.82rem; color: var(--warn); display: flex; gap: 8px; align-items: flex-start; margin-top: 4px;
}

@media (max-width: 600px) {
  .about-main { padding: 28px 16px 48px; }
  .about-card { padding: 24px 20px; }
}