/* ============================================================
   About page (AboutMe.html)
   Clean semantic layout — no Wix wrappers, no !important overrides.
   ============================================================ */

.about-intro h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 20px;
}

.about-intro p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 18px;
}

/* Each profile = image | divider | text */
.profile {
  display: grid;
  /* minmax(0, 1fr) lets the text column shrink below its content's min-width,
     so a long unbreakable token (e.g. the canon pattern string) can't blow out
     the layout — it scrolls inside .canon-snippet instead. */
  grid-template-columns: 280px 2px minmax(0, 1fr);
  column-gap: 30px;
  align-items: start;
  margin-bottom: 50px;
}

.profile__body { min-width: 0; }

.profile__image {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.profile__divider {
  width: 2px;
  align-self: stretch;
  min-height: 200px;
  background: var(--accent);
}

.profile__body h2 {
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 14px;
}

.profile__body p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.profile__body a {
  color: var(--link);
  text-decoration: underline;
}

/* Inline canon code teaser on the GEB profile */
.canon-snippet {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  color: var(--link);
  white-space: pre;
  overflow-x: auto;       /* long lines scroll within the snippet, not the page */
  margin-top: 8px;
}

/* ── Mobile: stack image over text, drop the divider ───────── */
@media (max-width: 768px) {
  .profile {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    margin-bottom: 36px;
  }

  .profile__image {
    max-width: 320px;
    margin: 0 auto;
  }

  .profile__divider { display: none; }

  .about-intro h1 { font-size: 24px; }
}