.about-intro { display: grid; grid-template-columns: 144px minmax(0, 660px); align-items: start; gap: 28px; }
.about-intro .page-copy > p:first-child { margin-top: 0; }
.about-portrait { margin: 0; }
.about-portrait img { display: block; width: 100%; height: auto; }
.about-contact { --email-blue: #9dbbff; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 28px; }
.about-email-button { position: relative; isolation: isolate; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--email-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.about-email-button::before { content: ""; position: absolute; z-index: -1; inset: -14px -30px; background: radial-gradient(ellipse, rgba(100, 150, 255, .28) 0%, rgba(85, 130, 255, .14) 35%, rgba(70, 115, 255, 0) 72%); opacity: 0; pointer-events: none; }
.about-email-button:focus-visible::before { opacity: 1; }
.about-email-button[hidden] { display: none; }
.about-email-button:focus-visible { outline: 3px solid #a0abff; outline-offset: 7px; text-shadow: 0 0 10px rgba(150, 180, 255, .35), 0 0 24px rgba(125, 160, 255, .2); }
.about-email-status { min-height: 22px; color: var(--email-blue); font-size: 13px; line-height: 1.6; }
.about-email-fallback { flex-basis: 100%; width: 100%; padding: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
@media (hover: hover) {
  .about-email-button:hover::before { opacity: 1; }
  .about-email-button:hover { text-shadow: 0 0 10px rgba(150, 180, 255, .35), 0 0 24px rgba(125, 160, 255, .2); }
}
@media (max-width: 700px) {
  .about-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about-portrait { width: 112px; }
}