/* ==========================================================================
   Kodiyo — about.css
   The About page is one outlined card carrying the founder story, with the
   portrait straddling its top edge. The closing CTA is a shared block and
   lives in components.css.
   ========================================================================== */

.about {
  /* Extra room up top: the portrait hangs above the card's edge. */
  padding-block: clamp(5.5rem, 13vh, 9rem) var(--section-py);
}

.about__card {
  --photo-size: clamp(104px, 12vw, 168px);
  --card-radius: clamp(24px, 3vw, 44px);

  position: relative;
  max-width: 980px;
  margin-inline: auto;
  padding: calc(var(--photo-size) / 2 + clamp(2rem, 4vw, 3.25rem))
           clamp(1.5rem, 5vw, 4.5rem)
           clamp(3rem, 6vw, 4.5rem);
}

/* The drawn border. JS sizes the viewBox to the card so the corner radius
   stays true at any width; without JS the card takes a plain border instead. */
.about__outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.about__outline rect {
  fill: none;
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

html:not(.js) .about__card {
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--card-radius);
}

html:not(.js) .about__outline {
  display: none;
}

/* Sits astride the top edge, right of centre. Positioned with offsets rather
   than a transform so GSAP can scale it without inheriting a translate. */
.about__photo {
  position: absolute;
  top: calc(var(--photo-size) / -2);
  left: calc(72% - (var(--photo-size) / 2));
  width: var(--photo-size);
  height: var(--photo-size);
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--color-surface);
}

.about__title {
  font-family: var(--font-sub);
  font-weight: var(--weight-mid);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-fg);
}

.about__para {
  margin-top: var(--space-lg);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  /* Long measure on purpose — the card reads as a letter, and the mockup runs
     the lines to its edges. The cap only bites on very wide screens. */
  max-width: 84ch;
}

@media (max-width: 700px) {
  /* Centred on phones — right-of-centre reads as lopsided at this width. */
  .about__photo {
    left: calc(50% - (var(--photo-size) / 2));
  }
}