/* Personal introduction: real, reflowing copy and three replaceable photo slots. */
.about-landing {
  position: relative;
  display: grid;
  grid-template-columns: 43% minmax(0, 1fr);
  grid-template-areas: "copy collage" "note collage" "actions collage";
  column-gap: 2%;
  padding: clamp(52px, 5vw, 84px) 4.7% 68px;
  background: #fff;
  scroll-margin-top: 120px;
}
.about-copy { grid-area: copy; position: relative; z-index: 4; }
.about-copy h2 { max-width: 660px; font-size: clamp(36px, 3.6vw, 60px); line-height: 1.12; }
.about-copy .intro { max-width: 540px; margin-top: 22px; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.4; }
.about-note-wrap { grid-area: note; position: relative; z-index: 4; padding: 48px 50px 24px 10px; }
.about-note { margin: 0; padding: 32px 34px 22px; border: 1.5px solid #cdddf4; border-radius: 25px; background: #fff; transform: rotate(-5deg); }
.about-note p { font-size: clamp(18px, 1.55vw, 25px); line-height: 1.45; }
.about-note footer { margin-top: 14px; color: var(--blue); font-family: "Segoe Print", "Bradley Hand", cursive; font-size: 34px; font-style: italic; text-align: right; }
.about-arrow { position: absolute; right: -105px; bottom: 4px; width: 190px; height: 95px; color: var(--blue); pointer-events: none; }
.about-collage { grid-area: collage; position: relative; min-width: 0; align-self: center; width: 100%; aspect-ratio: 1.23; }
.about-photo { position: absolute; padding: 6px; background: #fff; border: 1.5px solid #d3e1f5; border-radius: 28px; overflow: hidden; }
.about-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; border-radius: 20px; background: var(--media); color: var(--muted); font-size: 14px; text-align: center; }
.about-photo-placeholder svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 1.5; }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.about-photo-left { left: 0; top: 23%; width: 43%; height: 58%; transform: rotate(-6deg); }
.about-photo-right { right: 0; top: 32%; width: 42%; height: 58%; transform: rotate(6deg); }
.about-photo-left .about-photo-placeholder { padding-right: 26%; }
.about-photo-right .about-photo-placeholder { padding-left: 45%; }
.about-photo-portrait { z-index: 2; left: 29%; top: 3%; width: 48%; height: 93%; transform: rotate(3deg); }
.about-actions { grid-area: actions; position: relative; z-index: 4; margin-top: 24px; }
.about-actions .button { min-width: 190px; }
.about-actions .button:active { transform: scale(.96); }
@media (min-width: 1672px) { .about-landing { padding-inline: 79px; } }
@media (max-width: 1023px) {
  .about-landing { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "collage" "note" "actions"; gap: 0; padding: 42px 24px 38px; scroll-margin-top: 16px; }
  .about-copy h2 { max-width: 480px; font-size: clamp(29px, 5vw, 38px); }
  .about-copy .intro { margin-top: 16px; font-size: 18px; }
  .about-collage { margin-top: 24px; aspect-ratio: 1.32; }
  .about-photo { padding: 4px; border-radius: 19px; }
  .about-photo-placeholder, .about-photo img { border-radius: 13px; }
  .about-photo-placeholder { gap: 8px; font-size: 11px; }
  .about-photo-placeholder svg { width: 24px; height: 24px; }
  .about-photo-left { top: 23%; }
  .about-photo-right { right: 1%; }
  .about-photo-portrait { left: 28%; width: 48%; }
  .about-note-wrap { padding: 22px 34px 12px 4px; }
  .about-note { padding: 22px 24px 16px; border-radius: 20px; transform: rotate(-4deg); }
  .about-note p { font-size: 18px; }
  .about-note footer { margin-top: 8px; font-size: 28px; }
  .about-arrow { right: -3px; top: -12px; bottom: auto; width: 76px; height: 62px; transform: rotate(-70deg); }
  .about-actions { margin-top: 20px; }
  .about-actions .button { width: 100%; min-height: 48px; }
}
@media (max-width: 374px) {
  .about-landing { padding-inline: 20px; }
  .about-copy h2 { font-size: 27px; }
  .about-copy .intro { font-size: 16px; }
  .about-photo-placeholder { font-size: 10px; }
  .about-note-wrap { padding-right: 22px; }
  .about-note { padding: 18px 20px 14px; }
  .about-note p { font-size: 16px; }
}