/* =============================================================================
   ABOUT.HTML  ·  page-specific layout only
   Visual system (tokens, type, badge spin, rule-head, credit, reveal) lives in
   styles.css. This file positions the giant "about bonolo" overlap, the
   founder photo + badge corner, the hero intro line, and the Aasvoelberg
   figure inside the reading column.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   About hero: kicker + giant lowercase display, overlapping the founder photo.
   Mobile-first: text above photo, slight overlap. Desktop (>=720px): text sits
   left, photo sits right of center, display type pulled over the photo's
   left edge with a negative margin.
   -------------------------------------------------------------------------- */
.about-hero {
  margin-top: var(--sect);
}

.about-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-hero__text {
  max-width: 40rem;
}

.about-hero__photo {
  position: relative;
  margin-top: calc(-1 * var(--s-6));
  width: min(340px, 80vw);
}

.about-hero__photo img {
  border-radius: var(--r-card);
  width: 100%;
  height: auto;
}

.about-hero__photo .credit {
  text-align: center;
}

/* Badge: static/centered on mobile, corner-overlap on desktop (below). */
.about-hero__photo .badge {
  margin-inline: auto;
  margin-block: var(--s-6);
}

.about-hero__intro {
  margin-top: var(--s-5);
  font: 400 var(--fs-lead) var(--font-sans);
  color: var(--ink-2);
  line-height: var(--lh-body);
  max-width: 30rem;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .about-hero__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: var(--s-8);
  }

  .about-hero__text {
    flex: 0 1 26rem;
    padding-top: var(--s-9);
    position: relative;
    z-index: 1;
    /* Pulls the giant display text over the photo's left edge. */
    margin-right: -4%;
  }

  .about-hero__photo {
    flex: 0 0 auto;
    margin-top: 0;
    position: relative;
    z-index: 0;
  }

  .about-hero__photo .credit {
    text-align: left;
  }

  /* Rotating badge overlaps the photo's lower-left corner. */
  .about-hero__photo .badge {
    position: absolute;
    right: -40px;
    bottom: -40px;
    margin: 0;
  }

  .about-hero__intro {
    margin-inline: 0;
    margin-top: var(--s-6);
    max-width: 24rem;
  }
}

/* -----------------------------------------------------------------------------
   Reading-column sections: tighter gap between the story chapters than the
   default --sect rhythm, since they are one continuous narrative.
   -------------------------------------------------------------------------- */
.about-read {
  margin-top: var(--s-9);
}

.about-read .read > p + p {
  margin-top: var(--s-4);
}

/* Amber tick above each about section heading, for rhythm and warmth. */
.about-read .rule-head::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: var(--s-3);
}

/* Opening statement of "What drives me": larger, inked, tight. */
.about-read__lead {
  font: 500 var(--fs-h3) var(--font-sans);
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: var(--s-3);
}

/* Pull-quote: the method line, set apart with an amber left rule. */
.about-pull {
  font: 400 var(--fs-lead) var(--font-sans);
  color: var(--ink);
  line-height: var(--lh-body);
  padding-left: var(--s-5);
  border-left: 3px solid var(--accent);
  margin-top: var(--s-5) !important;
}

/* Aasvoelberg photo inside the "My path" section. */
.about-peak {
  margin-top: var(--s-6);
}

.about-peak img {
  border-radius: var(--r-card);
  width: 100%;
  height: auto;
}

.about-peak .credit {
  margin-top: var(--s-2);
}

/* -----------------------------------------------------------------------------
   Closing CTA block.
   -------------------------------------------------------------------------- */
.about-cta {
  text-align: center;
}

.about-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.about-cta__thesis {
  font: 500 var(--fs-h3) var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.about-cta__line {
  font: 400 var(--fs-lead) var(--font-sans);
  color: var(--ink);
  line-height: var(--lh-body);
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
}

.about-cta__note {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--ink-2);
}