/* About uses the portfolio's existing type, colors, and reading width. */
.about-page .about-content { padding-top: 140px; }
.about-page .about-introduction {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 64px;
  margin-bottom: 88px;
}
.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 28% center;
}
.about-introduction-copy h1 {
  margin: 0 0 24px;
  color: var(--layout-ink);
  font: 400 clamp(34px, 4vw, 46px)/1.15 var(--layout-display);
  letter-spacing: -.025em;
}
.about-introduction-copy p,
.about-life-intro {
  color: #555;
  font: 400 17px/1.7 var(--layout-ui);
  margin: 0 0 18px;
}
.about-contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--layout-ink);
  font: 700 16px/1.5 var(--layout-ui);
  text-decoration: none;
}
.about-contact-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 3px solid var(--layout-accent);
}
.about-contact-link:hover .about-contact-label { border-bottom-color: #7351bd; }
.about-contact-link:focus-visible { outline: 2px solid #7351bd; outline-offset: 5px; }
.about-page .about-background-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--layout-line);
  padding-top: 40px;
}
.about-page .education-section { margin-top: 0; }
.about-page .about-entry:last-child { margin-bottom: 0; }
.about-page .about-section-label { color: #757178; line-height: 1.4; }
.about-page .about-entry .meta,
.about-page .speaking-card .meta { color: #707070; }
.about-life-intro { max-width: 690px; margin-bottom: 30px; }
.about-life-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.about-life-card { margin: 0; min-width: 0; }
.about-life-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.about-life-card h3 {
  margin: 18px 0 8px;
  color: var(--layout-ink);
  font: 700 18px/1.4 var(--layout-ui);
}
.about-life-card p {
  margin: 0;
  color: #606060;
  font: 400 16px/1.6 var(--layout-ui);
}
@media (max-width: 820px) {
  .about-page .about-content { padding-top: 112px; }
  .about-page .about-introduction { gap: 32px; margin-bottom: 64px; }
  .about-page .about-background-grid { gap: 32px; }
  .about-life-grid { gap: 20px; }
}
@media (max-width: 620px) {
  .about-page .about-content { padding-top: 96px; }
  .about-page .about-introduction { grid-template-columns: 1fr; gap: 30px; }
  .about-portrait { max-width: 380px; }
  .about-portrait img { aspect-ratio: 1 / 1; }
  .about-introduction-copy h1 { font-size: 36px; margin-bottom: 20px; }
  .about-introduction-copy p, .about-life-intro { font-size: 16px; }
  .about-page .about-background-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 32px; }
  .about-life-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-life-card > img { aspect-ratio: auto; }
}
/* Project names remain readable on touch devices and without hovering. */
.about-page .about-previous-grid .caption { opacity:1; }
.about-page .about-previous-grid div.image-block:hover img { transform:none; }
.about-project-dialog { width:min(900px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; background:#fff; color:#111; overflow:auto; overscroll-behavior:contain; }
.about-project-dialog::backdrop { background:rgb(0 0 0 / .55); }
.about-project-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 24px; position:sticky; top:0; background:#fff; z-index:1; border-bottom:1px solid #eee; }
.about-project-bar h2 { font:700 20px/1.3 var(--layout-ui); margin:0; }
.about-project-bar button { width:44px; height:44px; border:0; background:transparent; font-size:28px; cursor:pointer; }
.about-project-bar button:focus-visible { outline:2px solid #7351bd; }
.about-project-body { padding:24px; }
.about-project-body img { display:block; width:100%; height:auto; }
.about-project-body p { font:400 17px/1.7 var(--layout-ui); margin:20px 0 0; }
@media(max-width:620px) {
 .about-project-bar { padding:12px 16px; }
 .about-project-body { padding:16px; }
 .about-project-body p { font-size:16px; }
}

html:has(.about-project-dialog[open]) { overflow:hidden; }