.about {
    padding: 118px var(--gutter) 126px;
    background: #f5eee9;
    scroll-margin-top: 0;
    overflow: clip;
}

.about:focus { outline: none; }
.about-layout { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: clamp(65px, 7vw, 120px); max-width: 1640px; margin: 0 auto; }
.about-gallery { min-width: 0; padding: 18px 0 0; }
.photo-stack { position: relative; width: 100%; max-width: 560px; aspect-ratio: .95; margin: 0 auto; isolation: isolate; }
.photo-card {
    position: absolute;
    display: block;
    aspect-ratio: 3 / 4;
    padding: 7px;
    border-radius: 11px;
    background: #fffcf8;
    box-shadow: 0 7px 14px rgb(62 30 31 / 6%), 0 22px 48px rgb(62 30 31 / 12%);
    transform: rotate(var(--card-angle));
}

.photo-card img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 5px; }
.photo-card-1 { --card-angle: -8deg; z-index: 1; width: 53%; left: 5%; top: 0; }
.photo-card-2 { --card-angle: 8deg; z-index: 2; width: 44%; right: 0; top: 9%; }
.photo-card-1 img, .photo-card-2 img { object-position: center top; }
.photo-card-2 img { object-position: 65% top; }
.photo-card-3 { --card-angle: 5deg; z-index: 3; width: 49%; left: -1%; bottom: 0; }
.photo-card-4 { --card-angle: -7deg; z-index: 4; width: 49%; right: 1%; bottom: -3%; }
.gallery-note { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 55px; font-family: var(--serif); font-size: 26px; font-style: italic; color: var(--muted); }
.gallery-note-line { width: 43px; height: 1px; background: var(--line); }

.about-copy { padding: 0 0 10px; }
.about-copy h1 { margin: 24px 0 30px; font-family: var(--serif); font-size: clamp(64px, 5.9vw, 90px); line-height: .98; font-weight: 400; letter-spacing: -.045em; }
.about-copy h1 em { font-weight: 400; }
.about-text { max-width: 480px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.about-text p + p { margin-top: 19px; }
.about-text strong { color: var(--burgundy); font-weight: 600; }
.about-signoff { display: flex; align-items: baseline; gap: 10px; margin-top: 29px; font-family: var(--serif); font-size: 25px; font-style: italic; }
.about-signoff span { font-size: 39px; letter-spacing: -.045em; }

@media (min-width: 1800px) {
    .about { padding-top: 140px; padding-bottom: 150px; }
    .about-layout { gap: 140px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .about { padding-top: 96px; padding-bottom: 100px; }
    .about-layout { grid-template-columns: 1fr 1fr; gap: 48px; }
    .about-copy h1 { font-size: clamp(50px, 6vw, 65px); }
    .about-text { line-height: 1.75; }
    .photo-card { padding: 5px; border-radius: 9px; }
    .gallery-note { gap: 10px; font-size: 23px; }
    .gallery-note-line { width: 24px; }
}

@media (max-width: 700px) {
    .about { padding-top: 65px; padding-bottom: 70px; }
    .about-layout { grid-template-columns: 1fr; gap: 50px; }
    .about-gallery { width: min(100%, 450px); margin-inline: auto; padding-top: 12px; }
    .photo-stack { width: 94%; }
    .photo-card { padding: 5px; border-radius: 9px; }
    .photo-card img { border-radius: 4px; }
    .gallery-note { margin-top: 41px; gap: 12px; font-size: 24px; }
    .gallery-note-line { width: 28px; }
    .about-copy { padding: 0; }
    .about-title-break { display: none; }
    .about-title-role { white-space: nowrap; }
    .about-copy h1 { margin-top: 21px; margin-bottom: 26px; font-size: clamp(49px, 12vw, 72px); }
    .about-text { max-width: none; }
    .about-signoff { margin-top: 26px; }
}