/* about: big centred heading, four pictures that slide in from the corners, text that lights up as you scroll */
.about.ab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(64px, 8vw, 96px); min-height: 100vh; padding-block: 80px; text-align: center; }
.ab-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 5vw, 64px); }
.ab #about-title { margin: 0; font-size: clamp(2.25rem, 9vw, 120px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.ab-text { max-width: 560px; margin: 0; font-size: clamp(16px, 2vw, 21.6px); font-weight: 500; line-height: 1.65; }
.ab-text .w { white-space: nowrap; }
.ab-p2 { position: relative; align-self: flex-start; margin-top: -28px; max-width: calc(34 * clamp(16px, 2vw, 21.6px)); }
.ab-p2 .ab-text { max-width: none; margin: 0; }
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ab > .btn { position: relative; z-index: 1; }
.ab > .ab-journey { margin-top: calc(-1 * clamp(24px, 3vw, 44px)); }
.ab-pic { position: absolute; margin: 0; transition: opacity .9s cubic-bezier(.25,.1,.25,1), translate .9s cubic-bezier(.25,.1,.25,1); transition-delay: var(--d, 0s); }
.ab-pic img { display: block; width: 100%; height: auto; }
.ab-pic.waiting { opacity: 0; translate: var(--x) 0; }
.ab-tl { --x: -80px; --d: .1s; top: 4%; left: 2%; width: clamp(120px, 14.6vw, 210px); rotate: -3deg; }
.ab-tr { --x: 36px; --d: .15s; top: 4%; right: 2%; width: clamp(144px, 17.5vw, 252px); rotate: 3deg; }
.ab-bl { --x: -80px; --d: .25s; bottom: 8%; left: 7%; width: clamp(100px, 12.5vw, 180px); }
.ab-br { --x: 80px; --d: .3s; bottom: 8%; right: 7%; width: clamp(143px, 19.9vw, 286px); }
/* on wide screens the photo sits in the empty space beside the second paragraph, level with its first line */
/* on wide screens the first paragraph starts a little to the right, so the pink shirt photo never covers it */
@media (min-width: 861px) { .ab-copy { --m: clamp(0px, calc(489px - 29vw), 170px); width: calc(44.8 * clamp(16px, 2vw, 21.6px)); max-width: 100%; } #about-text { align-self: flex-end; width: calc(100% - var(--m)); } .ab-p2 { margin-left: var(--m); max-width: calc(min(calc(34 * clamp(16px, 2vw, 21.6px)), 50vw) - var(--m)); } .ab-p2 .ab-br { top: 0; bottom: auto; right: auto; left: calc(100% + 40px); transform: scale(1.2); transform-origin: top left; } .ab-tr { top: calc(4% - clamp(30px, 6vw, 95px)); right: calc(2% - 20px); } }
@media (max-width: 860px) {
  .about.ab { gap: 48px; padding-block: 230px 200px; overflow-x: clip; }
  .ab-pic.frame { padding: 6px; }
  .ab-tl, .ab-tr { top: 24px; }
  .ab-pic.ab-tl { margin: 0; transform: none; }
  .ab-p2 .ab-br { position: static; margin: 28px 0 0 auto; }
  .ab-bl, .ab-br { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ab-pic { transition: none; } }