/* The About page keeps the shared menu and reuses the portfolio's editorial type and timeline. */
html { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body.about-page { width: 100%; height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; background: var(--white); color: var(--ink); font-family: var(--font-body); }
/* Leave space for the fixed, shared menu before the editorial page heading. */
.about-page > .site-header { padding-top: 92px; }
.about-page .page-shell { padding-bottom: clamp(72px, 12vh, 150px); }
.about-page .home-about { margin-top: 1.8rem; }
.about-page .about-section-title { margin: 0 0 1.25rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.about-page .about-content-layout { position: relative; display: block; min-height: 300px; }
.about-page .about-copy { position: relative; z-index: 1; width: min(76%, 880px); }
.about-page .about-copy p { max-width: 100%; text-shadow: 0 1px 5px #fff9; }
.about-page .about-portrait { position: absolute; z-index: 0; top: -38px; right: 0; bottom: auto; width: min(38%, 320px); height: 640px; object-fit: contain; object-position: center bottom; opacity: .82; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); }
.about-page .history { margin-top: 0; }
.about-page .contact-dialog { position: fixed; inset: 50% auto auto 50%; width: min(560px, calc(100% - 36px)); max-height: min(82svh, 680px); overflow-y: auto; transform: translate(-50%, -50%); padding: clamp(30px, 6vw, 58px); border: 0; background: var(--white); color: var(--ink); box-shadow: 0 18px 80px #0005; }
.about-page .contact-dialog::backdrop { background: #1119; backdrop-filter: blur(4px); }
.about-page .contact-dialog:not([open]) { display: none; }
.about-page .contact-close { position: absolute; top: 12px; right: 15px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--ink); font-size: 28px; font-weight: 300; cursor: pointer; }
.about-page .contact-location { margin: 0 0 12px; color: var(--blue-soft); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: none; }
.about-page .contact-dialog h2 { margin: 0 0 8px; font: 400 clamp(44px, 8vw, 72px)/.95 var(--font-display); text-transform: uppercase; }
.about-page .contact-dialog .contact-role { margin: 0 0 26px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-page .contact-dialog > a { display: block; width: fit-content; margin: 12px 0; color: var(--ink); font-size: 15px; font-weight: 600; text-underline-offset: 4px; }
.about-page .contact-card-socials { display: flex; gap: 24px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.about-page .contact-card-socials a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; text-decoration: none; }
.about-page .contact-card-socials svg { width: 16px; height: 16px; fill: currentColor; }
.about-page a:focus-visible, .about-page button:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 4px; }

@media (max-width: 700px) {
  .about-page > .site-header { padding-top: 76px; }
  .about-page .about-content-layout { min-height: 0; }
  .about-page .about-copy { width: 100%; }
  .about-page .about-copy p { text-shadow: none; }
  .about-page .about-portrait {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    display: block;
    width: min(54%, 220px);
    height: min(70vw, 290px);
    margin: 1.25rem 0 0 auto;
    object-fit: cover;
    object-position: center 12%;
    opacity: .9;
  }
  .about-page .history { margin-top: 1.25rem; }
}