/* The readable scales and materials approved for the service pages. */
.page-about{background:var(--cobalt) url('cobalt.webp') center top / max(100vw,1050px) auto repeat-y}
.page-about>.site-header{background:transparent;border-bottom:0}
.page-about #main{background:var(--chalk)}
.about-opening{display:block;max-width:none;padding:clamp(48px,5.5vw,92px) 0 clamp(64px,7vw,116px);background:var(--cobalt) url('cobalt.webp') center calc(-1 * var(--site-header-height,140px)) / max(100vw,1050px) auto repeat-y;color:var(--chalk)}
.about-introduction{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.about-opening h1{font-size:clamp(64px,7.7vw,128px);color:var(--chalk);line-height:1.02;letter-spacing:-.065em;margin:0}
.about-opening h1 span{white-space:nowrap}
.about-opening p{font-size:clamp(22px,1.8vw,28px);line-height:1.48;max-width:600px}
.about-introduction>div{padding-top:clamp(8px,1vw,14px)}
.about-introduction p{margin:0}
.about-story{background:var(--ink) url('midnight.webp') center/cover;color:var(--chalk)}
.about-story .split{grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.about-story h2{font-size:clamp(38px,3.4vw,56px);line-height:1.12;color:var(--gold)}
.about-story h2 span{color:var(--chalk)}
.about-story .prose p,.about-purpose p,.about-writing p{font-size:clamp(21px,1.65vw,27px);line-height:1.5}
.career{list-style:none;padding:0;margin:clamp(56px,6vw,100px) 0 0;border-top:1px solid #eeede54d}
.career li{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);padding:28px 0;border-bottom:1px solid #eeede54d;position:relative}
.career h3{font-size:clamp(25px,2.2vw,34px);letter-spacing:-.035em;line-height:1.2;color:var(--chalk);margin:0}
.career li:last-child h3{color:var(--gold)}
.career p{font-size:clamp(20px,1.5vw,24px);line-height:1.45;margin:0;max-width:640px}
.about-purpose{gap:clamp(40px,5vw,90px);grid-template-columns:1.15fr 1fr;align-items:center}
.about-purpose figure{margin:0}
.about-purpose img{display:block;width:100%;height:auto}
.about-purpose h2{font-size:clamp(40px,3.8vw,60px);line-height:1.08;margin-bottom:30px}
.about-purpose .text-link{font-size:clamp(19px,1.6vw,24px)}
.about-writing{background:var(--cobalt) url('cobalt.webp') center/cover;color:var(--chalk);align-items:center;gap:48px;padding:clamp(64px,7vw,116px) var(--gutter)}
.about-writing h2{font-size:clamp(42px,4.5vw,72px);margin-bottom:30px}
.about-writing p{max-width:780px;margin-bottom:0}
.page-about .closing{align-items:start}
.page-about .closing p{font-size:clamp(23px,2vw,31px);line-height:1.45}
.page-about .button{font-size:clamp(18px,1.5vw,24px)}
.about-introduction{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(35px,7vw,120px)}
.about-opening h1{font-size:clamp(64px,7.2vw,112px);line-height:1.03;padding-top:30px}
.about-person{max-width:580px}.about-introduction>.about-person{padding-top:0}
.about-portrait{display:block;width:100%;max-width:380px;height:auto;max-height:410px;object-fit:contain;object-position:left bottom;margin:0 0 28px}
.about-opening p{font-size:clamp(20px,1.8vw,26px)}
@media(min-width:761px) and (max-width:1050px){.about-introduction{gap:45px}.about-story .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:45px}.about-purpose{grid-template-columns:1.15fr 1fr;gap:35px}.about-story h2{font-size:36px}.about-story .prose p{font-size:20px}}
@media(max-width:760px){.about-introduction{grid-template-columns:1fr;gap:30px}.about-opening h1{padding:0;font-size:70px}.about-person{max-width:540px}.about-portrait{max-height:430px;max-width:330px}.about-story .split,.about-purpose{grid-template-columns:1fr;gap:40px}.about-purpose figure{max-width:850px}.about-writing{display:block}.about-writing .button{margin-top:36px}}
@media(max-width:600px){.about-opening h1{font-size:clamp(46px,10.2vw,62px)}.about-introduction{gap:28px}.career li{grid-template-columns:1fr;gap:12px;padding:24px 0}.about-story h2{font-size:38px}.about-purpose h2{font-size:38px}.about-writing h2{font-size:40px}}

/* Revision 31: a compact introduction, with the portrait beside the biography. */
.about-opening{padding-block:clamp(28px,3vw,48px) clamp(40px,3.5vw,60px)}
.about-introduction{align-items:start}
.about-opening h1{font-size:clamp(60px,6.2vw,100px);line-height:1.03;padding-top:0}
.about-introduction>.about-person{padding-top:6px}
.about-opening p{font-size:clamp(23px,2vw,31px);line-height:1.4;max-width:650px}
.about-story .split{align-items:center}
.about-story-portrait{margin:0;display:flex;align-items:center;justify-content:center}
.about-story-portrait .about-portrait{width:min(100%,440px);max-width:440px;height:auto;max-height:none;object-fit:contain;object-position:center;margin:0}
@media(max-width:760px){
 .about-opening{padding-block:28px 44px}
 .about-introduction{gap:28px}
 .about-introduction>.about-person{padding-top:0}
 .about-opening h1{font-size:clamp(56px,11vw,78px)}
 .about-opening p{font-size:23px}
 .about-story-portrait .about-portrait{width:min(100%,350px)}
 .about-story .split{gap:36px}
}