.ashline-about-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 7%, rgba(var(--page-accent-rgb), 0.2), transparent 32rem),
    radial-gradient(circle at 8% 38%, rgba(var(--page-accent-rgb), 0.08), transparent 27rem),
    linear-gradient(180deg, #1b1512 0%, #151210 44rem, #141211 100%);
}

.about-shell {
  width: min(1180px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 92px;
}

.about-hero {
  position: relative;
  overflow: hidden;
  max-width: 860px;
  margin: clamp(48px, 10vh, 120px) auto;
  padding: clamp(36px, 7vw, 76px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%, rgba(var(--page-accent-rgb), 0.2), transparent 38%),
    var(--panel);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
}

.about-hero h1 {
  max-width: 700px;
  margin: 14px 0 24px;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.about-hero h1 span { color: var(--page-accent-bright); }

.about-hero > p:not(.eyebrow) {
  max-width: 680px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
}

.about-hero .hero-actions { margin-top: 30px; }

.about-primary {
  color: #fff;
  background: var(--page-accent);
  border-color: var(--page-accent);
}

.about-primary:hover { filter: brightness(1.1); }

html[data-theme="light"] .ashline-about-page {
  background:
    radial-gradient(circle at 82% 7%, rgba(var(--page-accent-rgb), 0.16), transparent 32rem),
    radial-gradient(circle at 8% 38%, rgba(var(--page-accent-rgb), 0.09), transparent 27rem),
    linear-gradient(180deg, #f3ece7 0%, #eee7e2 44rem, #f0edeb 100%);
}

@media (max-width: 620px) {
  .about-shell { width: min(100% - 24px, 1180px); }
  .about-hero { margin-top: 28px; padding: 30px 24px; }
}