/* =============================
   ABOUT HERO
============================= */
.about-hero {
  padding: 8rem 2rem 4rem;
  background: radial-gradient(ellipse at 50% 40%, #1a0a0a 0%, var(--bg) 70%);
  text-align: left;
}

.about-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.about-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.6;
}

/* =============================
   ABOUT CONTENT
============================= */
.about-content {
  padding: 3rem 0 4rem;
  background: var(--bg);
}

.about-text {
  max-width: 680px;
}

.about-text p {
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 1.6rem;
  line-height: 1.85;
}

.about-section-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.about-contact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-soft);
  padding: 1.5rem 2rem;
  margin-top: 3rem;
}

.about-contact-label {
  font-size: 0.7rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint) !important;
  margin-bottom: 0.75rem !important;
}

.about-contact p {
  margin-bottom: 0.75rem;
}

.about-email {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--accent-soft);
  text-decoration: none;
  transition: color 0.2s;
}

.about-email:hover {
  color: var(--text);
}