/* Editorial portrait and native overlapping content sheet. */
.ms-about-landing{isolation:isolate;overflow:visible;background:#0b0c10}
.ms-about-hero{position:sticky;top:var(--product-pin-top,0px);z-index:0;min-height:min(850px,88svh);display:grid;grid-template-columns:1.15fr 1fr;align-items:center;padding:55px 6% 65px;gap:6vw;margin-bottom:clamp(100px,22svh,240px);background:#0b0c10 url('../img/footer-lines.svg') left center/cover;color:#e9e7e1}
.ms-about-intro{position:relative;z-index:1}
.ms-about-eyebrow,.ms-about-caption{font:11px/1.5 'Courier New',monospace;letter-spacing:.1em;text-transform:uppercase}
body.mindscape .ms-about-hero h1{font:400 clamp(70px,9.5vw,160px)/.92 Figtree,Arial,sans-serif;letter-spacing:-.065em;margin:40px -12vw 38px 0;max-width:8ch;position:relative;z-index:2}
.ms-about-role{font-size:clamp(20px,2.2vw,30px);line-height:1.45;color:#d7c1d0}
.ms-about-discover{display:flex;justify-content:space-between;max-width:230px;border-bottom:1px solid #ffffff50;padding:20px 0;margin-top:30px;color:inherit;text-decoration:none}
.ms-about-portrait{align-self:stretch;min-height:440px;max-height:700px}
.ms-about-portrait figure{margin:0;height:100%}
.ms-about-portrait img{display:block;width:100%;height:100%;max-height:700px;object-fit:cover;object-position:center 32%;filter:saturate(.6);border-radius:0}
.ms-about-caption{position:absolute;bottom:22px;right:6%;color:#b8aeb6}
.ms-about-content{position:relative;z-index:1;background:#e9e7e1;color:#111112;box-shadow:0 -22px 60px #0003;scroll-margin-top:95px}
.ms-about-chapter{display:grid;grid-template-columns:1fr 1.15fr;gap:8vw;padding:clamp(60px,8vw,130px) 6%;border-bottom:1px solid #11111225;scroll-margin-top:100px}
body.mindscape .ms-about-chapter h2{font:400 clamp(36px,4.2vw,64px)/1.08 Figtree,Arial,sans-serif;letter-spacing:-.045em;margin:0;max-width:14ch;color:inherit}
.ms-about-story-copy{max-width:680px;min-width:0}
.ms-about-story-copy p,.ms-about-story-copy li{font-size:clamp(17px,1.4vw,21px);line-height:1.8}
.ms-about-story-copy h3{font-size:26px;letter-spacing:-.025em;margin:36px 0 20px;color:inherit}
.ms-about-story-copy ul{padding:0;list-style:none}
.ms-about-story-copy li{border-top:1px solid #8a7c8640;padding:14px 0}
.ms-about-chapter:nth-child(3n){background:#111112;color:#e9e7e1}
.ms-about-chapter:last-of-type{background:#d7cbd2}
.ms-about-next{padding:90px 6%;background:#d7cbd2;display:grid;grid-template-columns:1fr 1.15fr;gap:28px 8vw;align-items:end}
.ms-about-next>p{grid-column:1/-1;font:11px/1.5 'Courier New',monospace;text-transform:uppercase;letter-spacing:.1em}
body.mindscape .ms-about-next h2{font-size:clamp(40px,5.5vw,80px);line-height:1.05;letter-spacing:-.045em;margin:0}
.ms-about-next em{font-family:Didot,'Bodoni MT',Georgia,serif;font-weight:400}
.ms-about-next a{color:inherit;border-bottom:1px solid #11111260;padding:20px 0;display:flex;justify-content:space-between;max-width:300px;text-decoration:none}
.ms-about-landing a:focus-visible{outline:2px solid #ac86a0;outline-offset:6px}
@media(max-width:781px){.ms-about-hero{min-height:0;grid-template-columns:1fr;gap:35px;padding:45px 6% 50px}.ms-about-hero .ms-about-intro h1{font-size:clamp(66px,14vw,106px);max-width:none;margin:24px 0}.ms-about-portrait{height:420px;min-height:0}.ms-about-caption{bottom:15px;font-size:9px}.ms-about-discover{margin-top:10px}.ms-about-chapter,.ms-about-next{grid-template-columns:1fr;gap:30px;padding:60px 6%}.ms-about-story-copy{max-width:none}.ms-about-next>p{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.ms-about-hero{position:relative;top:auto;margin-bottom:0}.ms-about-content{box-shadow:none}}

/* Portrait as an architectural part of the hero, with spacious editorial copy. */
.ms-about-hero{grid-template-columns:1fr 1fr;gap:5vw}
.ms-about-portrait{position:relative;isolation:isolate;align-self:stretch;margin:-55px -6vw -65px 0;min-height:650px;max-height:none;background:#242129;overflow:hidden}
.ms-about-portrait figure{height:100%;width:100%}
.ms-about-portrait img{position:absolute;inset:0;max-height:none;height:100%;object-position:center 30%;filter:grayscale(1);opacity:.88}
.ms-about-portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:url('../img/footer-lines.svg') center/cover;opacity:.18}
.ms-about-caption{z-index:2;color:#e9e7e1;text-shadow:0 1px 6px #000}
.ms-about-chapter{grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);gap:5vw}
.ms-about-story-copy{max-width:840px;width:100%;justify-self:end}
.ms-about-story-copy p{max-width:none;text-wrap:pretty;overflow-wrap:break-word}
@media(min-width:782px) and (max-width:1100px){.ms-about-chapter{grid-template-columns:1fr;gap:32px}.ms-about-chapter h2{max-width:22ch!important}.ms-about-story-copy{justify-self:start;max-width:840px}}
@media(max-width:781px){.ms-about-hero{grid-template-columns:1fr;padding-bottom:0}.ms-about-portrait{margin:0 -6.82%;height:480px;min-height:0}.ms-about-chapter{grid-template-columns:1fr}.ms-about-story-copy{justify-self:stretch}.ms-about-caption{bottom:18px}}

/* Let the content sheet meet the portrait without an empty dark spacer. */
.ms-about-hero{margin-bottom:0}

/* Give the desktop portrait room to fill the opening viewport. */
@media(min-width:1101px){.ms-about-hero{min-height:max(760px,calc(100svh - 74px))}}

/* Reuse the home page's capped canvas animation, without its photo zoom. */
.ms-about-hero{isolation:isolate;background-image:none}
.ms-about-hero .ms-space{z-index:1;mix-blend-mode:screen;pointer-events:none}
.ms-about-hero .ms-about-intro{z-index:2}
.ms-about-portrait::after{display:none}
.ms-about-motion{position:absolute;z-index:3;bottom:22px;left:6%;font:10px/1.5 'Courier New',monospace}
.ms-about-motion:not([hidden]){display:inline-flex;align-items:center;gap:9px}
@media(max-width:781px){.ms-about-motion{bottom:18px;padding:8px;background:#0b0c10d9}.ms-about-caption{bottom:65px}}
/* Keep the portrait readable beneath the moving line field. */
.ms-about-hero .ms-space{-webkit-mask-image:linear-gradient(to right,#000 38%,#0004 65%);mask-image:linear-gradient(to right,#000 38%,#0004 65%)}
@media(max-width:781px){.ms-about-hero .ms-space{-webkit-mask-image:linear-gradient(to bottom,#000 30%,#0004 65%);mask-image:linear-gradient(to bottom,#000 30%,#0004 65%)}}

.ms-about-motion{top:22px;bottom:auto}
@media(max-width:781px){.ms-about-motion{top:12px;bottom:auto;background:none;padding:0}}
