/* Personal introduction, isolated from the showcase and service section. */
.personal-section{background:#fff;--section-inset:clamp(3rem,5.5vw,5rem)}
.personal-section .personal-inner{padding-block:var(--section-inset) clamp(1.5rem,3vw,3rem)}
.personal-section .personal-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:center;margin-top:clamp(2rem,4vw,3.5rem)}
.personal-section .personal-portrait{margin:0;width:100%;max-width:25rem}
.personal-section .personal-portrait>img,.personal-section .personal-placeholder{width:100%;aspect-ratio:4/5;object-fit:cover}
.personal-section .personal-portrait>img{display:block;height:auto;aspect-ratio:1/1;object-position:center top}
.personal-section .personal-placeholder{background:#ece8e4;display:grid;place-items:center;color:var(--color-muted)}
.personal-section .personal-placeholder span{font-size:.6875rem;letter-spacing:.12em}
.personal-section .personal-name{margin-top:1rem;font-family:var(--font-editorial);font-style:italic;font-size:clamp(1.6rem,2.7vw,2.5rem);line-height:1.2;letter-spacing:-.045em;white-space:nowrap}
.personal-section .personal-name>span{color:var(--color-accent)}
.personal-section .personal-name>small{font-family:var(--font-body);font-style:normal;font-size:.42em;letter-spacing:0;color:var(--color-muted);margin-left:.35em}
.personal-section .personal-text{max-width:62ch;min-width:0}
.personal-section .personal-text h2{font-family:var(--font-body);font-size:clamp(2.64rem,4.4vw,3.96rem);font-weight:800;letter-spacing:-.055em;line-height:1;margin-bottom:1.75rem}
.personal-section .personal-text p{font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.65;color:var(--color-ink)}
.personal-section .personal-text p+p{margin-top:1.5rem}
@media(max-width:700px){
  .personal-section .personal-layout{grid-template-columns:1fr;gap:2.5rem}
  .personal-section .personal-portrait{max-width:20rem}
}