/* Portfolio establishes the rhythm for numbered homepage sections. */
:root{--section-space:55px;--section-eyebrow-size:11px;--section-eyebrow-gap:40px}
#work,#approach,#recognition,#testimonials,#contact{padding-top:var(--section-space);padding-bottom:var(--section-space)}
#work>.section-kicker,#approach .approach-intro>.extension-eyebrow,#recognition>.extension-centered>.extension-eyebrow,#testimonials>.extension-centered>.extension-eyebrow,#about .about-story>.extension-eyebrow,#contact>.section-kicker{font-family:'DM Sans',Arial,sans-serif;font-size:var(--section-eyebrow-size);font-weight:400;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;margin-top:0;margin-bottom:var(--section-eyebrow-gap);padding-top:0;border-top:0}
/* The About panel owns its inset, so its nested padding is counted once. */
#about{padding-top:0;padding-bottom:0}
#about .about-callout{padding-top:var(--section-space);padding-bottom:var(--section-space)}
#about .about-story{align-self:start;padding-bottom:0}
/* Grow the original portrait proportionally, keeping its existing placement. */
#about .about-portrait{width:118%;max-width:none;justify-self:center;height:448.4px}
#about .about-portrait img.abstract-portrait{opacity:.688}
@media(max-width:800px){#about .about-portrait{height:354px;max-width:354px;width:118%}}

/* Restore breathing room around the dark About panel; keep its insets equal. */
#about{padding-top:var(--section-space);padding-bottom:var(--section-space)}
#about .about-portrait{width:100.3%;height:381.14px}
#about .about-portrait img.abstract-portrait{opacity:.7568}
@media(max-width:800px){#about .about-portrait{height:300.9px;max-width:300.9px;width:100.3%}}

/* Selected illustration: original color at full opacity, with true transparency. */
#about .about-portrait img.abstract-portrait{opacity:1;filter:none}

/* Give the illustrated portrait a little more breathing room. */
#about .about-portrait img.abstract-portrait{transform:scale(.92);transform-origin:center}