/* ==========================================================================
   about.css, carlpayne.com
   Layout for about.html only: portrait, essay, plain-facts line.
   Requires base.css; uses gallery.css for the next-course door.
   ========================================================================== */

.about {
  max-width: 640px;
  margin: 0 auto;
  padding: 9.5rem 2rem 6rem;
}

/* Self-portrait at the top, with its footnote caption. */
.about-portrait { max-width: 420px; margin: 0 auto 1rem; }

.about-portrait img {
  width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .5);
}

.about-portrait figcaption {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.about-eyebrow {
  display: block;
  text-align: center;
  margin: 4rem 0 2.4rem;
}

.about h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
  margin-bottom: 2.6rem;
}

.about p { margin-bottom: 1.5rem; font-size: 1.12rem; }

/* Plain facts, instead of a CV. */
.about-facts {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline-soft);
  text-align: center;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.about-facts span { color: var(--brass); }