/* ── About page specific ─────────────────────────────────────── */

.ab-hero {
  padding: 100px 28px 80px;
  max-width: var(--max);
  margin: 0 auto;
  text-align: left;
}
.ab-hero .hero-title { font-size: clamp(56px, 8vw, 120px); margin-bottom: 36px; }
.ab-hero .hero-sub { max-width: 580px; font-size: 19px; }

.ab-hero-marks {
  display: flex; align-items: center; gap: 24px;
  margin-top: 56px;
  opacity: 0; animation: rise2 .9s var(--ease) 1s forwards;
  flex-wrap: wrap;
}
.ab-mark-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
}
.ab-mark-num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 32px; color: var(--accent); line-height: 1;
}
.ab-mark-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}

/* Prose sections */
.ab-prose {
  padding: 64px 28px;
  border-top: 1.5px solid var(--ink);
}
.ab-prose-band {
  background: var(--ink);
  border-top-color: rgba(246,241,232,0.12);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.ab-prose-band .section-label          { color: rgba(246,241,232,0.5); }
.ab-prose-band .section-label::before  { background: rgba(246,241,232,0.5); }
.ab-prose-band .ab-aside-num           { color: var(--accent); }
.ab-prose-band .ab-prose-body h3       { color: var(--paper); }
.ab-prose-band .ab-prose-body h3 em    { color: var(--accent); }
.ab-prose-band .ab-prose-body p        { color: rgba(246,241,232,0.65); }

.ab-prose-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}

.ab-aside {
  display: flex; flex-direction: column;
  gap: 14px; position: sticky; top: 110px;
}
.ab-aside-num {
  font-family: var(--font-serif); font-style: italic;
  font-size: 100px; color: var(--accent); line-height: 0.85;
}
.ab-aside .section-label { margin-bottom: 0; }

.ab-prose-body h3 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: 28px;
  font-weight: 400;
  max-width: 600px;
}
.ab-prose-body h3 em { color: var(--accent); font-style: italic; }
.ab-prose-body p {
  font-size: 18px; line-height: 1.7;
  color: var(--ink-soft); margin-bottom: 18px;
  max-width: 640px;
}
.ab-pull {
  font-family: var(--font-serif); font-style: italic;
  font-size: 26px !important; color: var(--accent) !important;
  line-height: 1.3 !important; margin-top: 24px !important;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
}

@media (max-width: 880px) {
  .ab-prose-grid { grid-template-columns: 1fr; gap: 24px; }
  .ab-aside { position: static; flex-direction: row; align-items: baseline; gap: 18px; }
  .ab-aside-num { font-size: 60px; }
}
@media (max-width: 640px) {
  .ab-hero-marks { gap: 16px; }
  .ab-mark-num { font-size: 24px; }
}