/* ============================================================
   Bianca Kau · About / Meet the artist
   Picture + a single text column, side by side. All the text
   (heading and story) lives in one column beside the portrait.
   ============================================================ */

.about {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4.6rem) var(--pad) clamp(1rem, 3vw, 2rem);
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.4rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 880px) { .about { grid-template-columns: 1fr; gap: 1.8rem; } }

/* portrait sticks beside the story as you read */
.about__media { margin: 0; position: sticky; top: clamp(4.5rem, 9vh, 6.5rem); }
@media (max-width: 880px) { .about__media { position: static; } }
.about__media img { width: 100%; border-radius: 8px; border: 1px solid var(--oat); box-shadow: 0 28px 54px -30px rgba(60,40,16,.55); }

/* the single text column */
.about__col { max-width: 60ch; }
.about__head { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.about__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.01em; margin-top: .4rem; }
.about__lede { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 1.1vw + 1rem, 1.55rem); color: var(--ink-soft); margin-top: .7rem; text-wrap: balance; }

.about__text p { color: var(--ink-soft); font-size: 1.14rem; }
.about__text p + p { margin-top: 1.1rem; }
.about__text .about__lead { font-family: var(--display); font-style: italic; font-size: clamp(1.35rem, 1.4vw + 1rem, 1.85rem); line-height: 1.25; color: var(--ink); margin-bottom: 1.1rem; text-wrap: balance; }
.about__text .about__sign { font-family: var(--script); font-size: clamp(2.2rem, 4vw, 2.9rem); line-height: 1; color: var(--ink); margin-top: 1.5rem; }

/* closing CTA */
.about-cta {
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--cream) 0%, color-mix(in oklab, var(--clay) 8%, var(--cream)) 100%);
  padding: clamp(3rem, 7vw, 5.5rem) var(--pad); text-align: center; margin-top: clamp(2.5rem, 6vw, 4rem);
}
.about-cta h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.about-cta p { color: var(--ink-soft); max-width: 46ch; margin: 1rem auto clamp(1.4rem, 3vw, 2rem); text-wrap: pretty; }
.about-cta__or { color: var(--ink-faint); font-style: italic; font-size: .96rem; margin-top: 1.1rem; }
.about-cta__mail {
  display: inline-block; margin-top: .35rem; font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--clay); text-decoration: none;
  background-image: linear-gradient(to right, var(--ochre) 55%, transparent 55%); background-size: 12px 2px; background-repeat: repeat-x; background-position: 0 1.25em; padding-bottom: .15em;
}
.about-cta__mail:hover { color: var(--clay-deep); }