/* About / Contact. Two columns that fit the screen: on the left the portrait (top left corner), a thin line, and the about text with the
   copyright; on the right the statement, and the contact details below it. All sizes follow both the width and the height of the screen,
   so it fits one screen on a laptop and stays readable. If the content is still taller than the area (a long text, a phone), only the area
   scrolls, vertically. Never horizontal. */
.about{position:absolute;inset:0}
.ab-area{position:absolute;top:110px;bottom:100px;left:var(--edge);right:var(--edge);overflow-y:auto;scrollbar-width:none;
	display:grid;grid-template-columns:clamp(200px,28vw,380px) minmax(0,1fr);column-gap:clamp(24px,4.5vw,80px);align-items:start;align-content:start}
.ab-area.ab-solo{grid-template-columns:minmax(0,1fr)}
.ab-area:not(:has(.ab-left)){grid-template-columns:minmax(0,1fr)}
.ab-area::-webkit-scrollbar{display:none}
.ab-left,.ab-right{display:flex;flex-direction:column;min-width:0}
.ab-left{gap:clamp(14px,2.6vh,26px)}
.ab-right{gap:clamp(16px,3vh,32px)}

/* the portrait keeps its own proportions (never cropped); at most half the height of the area, so the about text fits below it */
.ab-portrait{margin:0}
.ab-portrait .photo{width:min(100%,calc((100vh - 210px) * .55 * var(--ar)))}
.ab-portrait + .ab-bio{border-top:1px solid var(--rule);padding-top:clamp(12px,2.2vh,22px)}

.ab-statement{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,20px)}
.ab-lead,.ab-closing{margin:0;font-size:clamp(18px,min(2.1vw,3.6vh),30px)}
.ab-lead{font-weight:300;line-height:1.38}
.ab-closing{font-weight:500;line-height:1.38}

.ab-bio,.ab-contact{display:flex;flex-direction:column;gap:10px;min-width:0}
.ab-statement + .ab-contact{border-top:1px solid var(--rule);padding-top:clamp(14px,2.6vh,26px)}
.ab-label{margin:0;font:400 13px var(--font-mono);color:var(--muted)}
.ab-text{font-weight:300;font-size:clamp(14px,min(1.2vw,2.2vh),18px);line-height:1.5}
.ab-text p{margin:0 0 .8em}
.ab-text p:last-child{margin:0}
.ab-text h2.jb-sub{font-size:1.3em;margin:1.1em 0 .4em}
.ab-email{margin:0;font-weight:500;font-size:clamp(17px,min(1.8vw,3vh),26px);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:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.ab-links a{text-decoration:none}
.ab-links a:hover{text-decoration:underline;text-underline-offset:4px}
.ab-copy{margin:6px 0 0;font:400 12px var(--font-mono);color:var(--muted)}

/* phone: one column in the reading order: portrait (small), statement, contact, about */
@media (max-width:767px){
	.ab-area,.ab-area.ab-solo{top:84px;bottom:84px;left:var(--edge-phone);right:var(--edge-phone);grid-template-columns:minmax(0,1fr);align-content:start;row-gap:22px}
	.ab-left,.ab-right{display:contents}
	.ab-portrait{order:0;width:96px}
	.ab-portrait .photo{width:100%}
	.ab-statement{order:1}
	.ab-contact{order:2}
	.ab-bio{order:3}
	.ab-portrait + .ab-bio{border-top:0;padding-top:0}
	.ab-statement + .ab-contact{border-top:1px solid var(--rule);padding-top:18px}
	.about .hfoot{left:var(--edge-phone);right:var(--edge-phone)}
}