/* About: retain the Figma 973-19570 page grid, with resume content and skills
   updated from 1115-40760. Keep the shared type families and sidebar intact. */
#about-page[hidden] { display: none; }
.about-page {
  font: normal 400 14px/normal var(--font-sans);
  color: var(--ink);
  overflow-wrap: break-word;
}
.about-masthead,
.about-section {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 20px;
  align-items: start;
  border-top: 1px solid var(--line);
}
.about-masthead { padding-bottom: 20px; }
#about-title {
  grid-column: 1 / span 3;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  padding-top: 20px;
  font: normal 400 48px/48px "Instrument Serif", "Noto Sans SC", serif;
  letter-spacing: -0.02em;
  outline: none;
}
.about-name-line { display: block; }
/* Figma 973-19630: the small Chinese name follows the English display name
   at its top edge, rather than occupying a second full-size title line.
   Wrap the pair only when the responsive name column cannot fit both. */
.about-name-line[lang="zh-CN"] {
  flex: none;
  font: normal 700 14px/20px "Noto Sans SC", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}
.about-contact {
  grid-column: 4 / span 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-top: 20px;
  font: inherit;
  font-weight: 500;
}
.about-contact a { overflow-wrap: anywhere; }
.about-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.about-photo {
  grid-column: 4 / -1;
  grid-row: 1;
  justify-self: end;
  width: min(30.66%, 157px);
  height: auto;
  margin-top: -1px;
  aspect-ratio: 1;
  object-fit: cover;
}
.about-section { padding-block: 20px; }
/* Use the same 20 / 22 Chapter heading typography as project content. */
.about-section-label {
  grid-column: 1 / span 3;
  margin: 0;
  font: normal 400 20px/22px "Instrument Serif", "Noto Sans SC", serif;
  letter-spacing: -0.01em;
}
.about-section-content { grid-column: 4 / -1; min-width: 0; }
.about-experience { display: grid; gap: 12px; }
.about-entry-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}
.about-entry-title,
.about-dates,
.about-distinction {
  margin: 0;
  font: normal 500 14px/normal var(--font-sans);
  text-transform: none;
}
.about-dates { flex-shrink: 0; text-align: right; }
.about-prose { margin-top: 8px; }
.about-prose p { margin: 0; }
/* Line-entry overlays are inserted before each paragraph. A direct-adjacent
   selector loses this gap during animation, resizes the page and makes the
   shared entry controller cancel the entire sequence. Ignore those overlays. */
.about-prose > p ~ p { margin-top: 8px; }
.about-education { display: grid; gap: 8px; }
.about-education-details { min-width: 0; }
.about-distinction { color: var(--muted); }
.about-course { color: var(--ink); }
.about-skills {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.about-skill-group { min-width: 0; }
.about-skill-list {
  display: flex;
  /* Each skill group gets the full content width; pills wrap as a row. */
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.about-skill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(0 0 0 / 3%);
  font: normal 500 14px/20px var(--font-sans);
  text-transform: none;
}

/* Use the shell's existing 20px intro padding: the portrait now starts below
   the bear rather than meeting it. The masthead rule aligns with the nav. */

@media (min-width: 761px) and (max-width: 1100px) {
  .about-entry-heading { flex-direction: column; gap: 4px; }
  .about-dates { text-align: left; }
}

@media (max-width: 760px) {
  .about-masthead { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; }
  #about-title { grid-column: 1 / span 3; }
  .about-photo { grid-column: 4; width: 100%; margin-top: 20px; }
  .about-contact { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .about-section { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .about-section-label, .about-section-content { grid-column: 1; }
  .about-entry-heading { flex-direction: column; gap: 4px; }
  .about-dates { text-align: left; }
}

/* Only About changes the shared intro's tone. Keep the transition on the
   mounted header so both entering About and returning home fade smoothly. */
.introduction {
  transition: color 600ms cubic-bezier(.25, .1, .25, 1);
}
.is-about-page .introduction { color: var(--ink); }

/* Entry lines normally snapshot the source color in an inline style.
   Inherit the header's live color instead, otherwise those copies would
   stay gray during the fade and jump to black when the originals return.
   The nested <em> elements retain their existing primary-ink treatment. */
.introduction [data-entry-line] { color: inherit !important; }

@media (prefers-reduced-motion: reduce) {
  .introduction { transition: none; }
}