/* ============================================================================
   ABOUT — the page turns to paper. After a long dark reel, the printed essay:
   warm stock, black ink, wide margins. His philosophy, not his résumé.
   ============================================================================ */

.about {
  position: relative;
  /* Self-contained paper world — dark ink locally, without breaking the reel. */
  background: var(--c-paper);
  color: var(--c-paper-ink);
  --fg: var(--c-paper-ink);
  --c-ink: var(--c-paper-ink);
  --c-ink-dim: var(--c-paper-dim);
  --c-ink-mute: rgba(22, 20, 15, 0.58);
  --c-line: var(--c-paper-line);
  padding-block: calc(var(--section) * 1.05);
  overflow: hidden;
}
/* A subtle press-grain on the paper. */
.about::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.04;
}
.about__inner { position: relative; z-index: 1; }

.about__title {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-block: clamp(1.5rem, 4vh, 2.5rem) clamp(3rem, 8vh, 6rem);
}

.about__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 7vw, 6rem);
  align-items: start;
}
@media (max-width: 52rem) { .about__columns { grid-template-columns: 1fr; gap: 2.5rem; } }

.about__lead { position: sticky; top: 18vh; }
@media (max-width: 52rem) { .about__lead { position: static; } }

.about__body { display: grid; gap: 1.75rem; }

.about__quote {
  margin-block: 1.5rem;
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 1px solid var(--c-paper-ink);
}
.about__quote p {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: var(--w-thin);
  font-size: var(--fs-h3);
  line-height: 1.26;
  letter-spacing: -0.01em;
  max-width: none;
}

.about__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: clamp(4rem, 10vh, 8rem);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--c-paper-line);
}
@media (max-width: 40rem) { .about__facts { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; } }
.about__facts dt { color: var(--c-paper-dim); margin-bottom: 0.5rem; }
.about__facts dd { font-family: var(--f-display); font-weight: var(--w-thin); font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.01em; }