/* The story uses the site's existing scenery, typography and translucent layers. */
html body#nw-web.page-about .about-intro{grid-area:copy;max-width:650px}
html body#nw-web.page-about .about-intro .lede{font-size:clamp(18px,1.6vw,22px);line-height:1.65;max-width:34em;margin:0 0 22px}
html body#nw-web.page-about .about-welcome{font-size:18px;line-height:1.7;max-width:36em}
html body#nw-web.page-about .about-welcome p{margin:0 0 20px}
html body#nw-web.page-about .about-welcome p:last-child{margin-bottom:0}
html body#nw-web.page-about .about-story{max-width:none;margin:0 auto;scroll-margin-top:100px}
html body#nw-web.page-about .about-chapter{position:relative;display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.65fr);gap:clamp(24px,5vw,72px);padding:46px 0}
html body#nw-web.page-about .about-chapter::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--nw-fine-line);opacity:.6;pointer-events:none}
html body#nw-web.page-about .about-chapter h2{font-size:clamp(24px,2.3vw,32px);line-height:1.15;letter-spacing:-.025em;margin:12px 0 0;text-wrap:balance}
html body#nw-web.page-about .about-chapter .eyebrow{margin:0;opacity:.65}
html body#nw-web.page-about .about-prose{font-size:18px;line-height:1.75;max-width:74ch;min-width:0}
html body#nw-web.page-about .about-prose p{margin:0 0 20px}
html body#nw-web.page-about .about-prose p:last-child{margin-bottom:0}
@media(max-width:900px){
 html body#nw-web.page-about .about-chapter{grid-template-columns:minmax(0,.7fr) minmax(0,1.65fr);gap:28px}
}
@media(max-width:700px){
 html body#nw-web.page-about .about-intro .lede{font-size:18px;line-height:1.65;margin-bottom:18px}
 html body#nw-web.page-about .about-chapter{grid-template-columns:minmax(0,1fr);gap:20px;padding:30px 0}
 html body#nw-web.page-about .about-chapter h2{font-size:28px;margin-top:8px}
 html body#nw-web.page-about .about-prose{font-size:17px;line-height:1.75}
}
/* Match the contact page's illustration frame and introduction rhythm. */
html body#nw-web.page-about .about-hero{display:grid;align-items:start;min-width:0;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"copy art";gap:clamp(24px,3vw,48px);padding-block:var(--nw-intro-top) clamp(32px,4vw,48px)}
html body#nw-web.page-about .about-art{grid-area:art;margin:0;display:flex;align-items:center;justify-content:center;min-width:0;justify-self:end;width:min(100%,380px);aspect-ratio:2 / 3}
html body#nw-web.page-about .about-art img{display:block;transform:none;filter:none;mask-image:none;-webkit-mask-image:none;width:100%;height:100%;max-height:570px;object-fit:contain}
/* The title starts on the internal-page baseline; the portrait sits below it,
   on the contact page's inset rail. Mobile keeps its centered stacked layout. */
@media(min-width:701px){html body#nw-web.page-about .about-art{margin-top:clamp(48px,5vw,72px)}}
@media(min-width:701px) and (max-width:1000px){html body#nw-web.page-about .about-hero{column-gap:24px}}
@media(min-width:1200px){html body#nw-web.page-about .about-art{position:relative;left:calc(-1 * clamp(0px,calc((100vw - 1200px) * .26),80px))}}
html body#nw-web.page-about .about-intro h1{font-size:clamp(38px,4vw,58px)}
html body#nw-web.page-about .nw-page-support__art--seated{width:min(100%,477.415339px);aspect-ratio:1232 / 1007}
html body#nw-web.page-about .nw-page-support__art--seated>img{width:124.675324675%;transform:translateX(-14.127604167%)}
@media(min-width:901px){html body#nw-web.page-about .nw-page-support{max-width:1157.415339px;gap:80px;grid-template-columns:minmax(0,600fr) minmax(0,477.415339fr)}}
@media(min-width:901px) and (max-width:1100px){html body#nw-web.page-about .nw-page-support{gap:56px}}
@media(max-width:900px){
 html body#nw-web.page-about .nw-page-support{grid-template-columns:minmax(0,1fr);gap:32px;margin:48px auto 20px}
 html body#nw-web.page-about .nw-page-support__art--seated{width:min(92%,381.932271px)}
}
@media(max-width:700px){
 html body#nw-web.page-about .about-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "art";gap:24px;padding-block:var(--nw-intro-top) 36px}
 html body#nw-web.page-about .about-intro h1{font-size:clamp(36px,9vw,48px)}
 html body#nw-web.page-about .about-art{width:min(78vw,300px);justify-self:center}
 html body#nw-web.page-about .about-art img{width:100%;height:100%;max-height:none}
}

/* End the story at its final paragraph; use the shared support spacing. */
html body#nw-web.page-about .about-chapter:last-child{padding-bottom:0}
@media(max-width:700px){html body#nw-web.page-about .nw-page-support{margin-bottom:24px}}

/* The intro already separates the story; only later chapters need a divider. */
html body#nw-web.page-about .about-chapter:first-child::before{content:none}