/* About / Contact (docs design.md → About / Contact): a strip of panels, top 110, bottom 100. */
.about{position:absolute;inset:0}
.about .hscroll{position:absolute;top:110px;bottom:100px;left:0;right:0;gap:72px;padding:0 var(--edge);align-items:stretch}
.ab{flex:none;display:flex;flex-direction:column;justify-content:center}
.ab-statement{width:620px;gap:24px}
.ab-lead{margin:0;font-weight:300;font-size:30px;line-height:1.4}
.ab-closing{margin:0;font-weight:500;font-size:30px;line-height:1.3}

.ab-portrait{width:440px;margin:0;container-type:size;align-items:center}
.ab-portrait .photo{width:min(100cqw,calc(100cqh*var(--ar)))}

.ab-bio{width:520px;gap:14px}
.ab-contact{width:420px;gap:14px}
.ab-label{margin:0;font:400 13px var(--font-mono);color:var(--muted)}
.ab-text{font-weight:300;font-size:19px;line-height:1.6}
.ab-text p{margin:0 0 1em}
.ab-text p:last-child{margin:0}
.ab-email{margin:0;font-weight:500;font-size:30px;line-height:1.2;overflow-wrap:anywhere}
.ab-email a{text-decoration:none}
.ab-email a:hover{text-decoration:underline;text-underline-offset:6px}
.ab-links{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.ab-links a{text-decoration:none}
.ab-links a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:767px){
	.about .hscroll{top:90px;bottom:90px;gap:40px;padding:0 var(--edge-phone)}
	.ab-statement{width:min(620px,84vw)}
	.ab-lead,.ab-closing{font-size:24px}
	.ab-portrait{width:min(440px,76vw)}
	.ab-bio,.ab-contact{width:min(520px,84vw)}
	.ab-text{font-size:17px}
	.ab-email{font-size:24px}
	.about .hfoot{left:var(--edge-phone);right:var(--edge-phone)}
}
.ab-copy{margin:auto 0 0;padding-top:28px;font:400 12px var(--font-mono);color:var(--muted)}